From e417105f7a159e62b06537fd465571c7243840cc Mon Sep 17 00:00:00 2001
From: Younes ENNAJI <younes.ennaji.pro@gmail.com>
Date: Sun, 1 Mar 2026 21:34:50 +0000
Subject: [PATCH] refactor(themes): create shared utilities and design tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This refactoring improves code quality and reduces duplication:

## New Files
- `themes/shared/icons.ts` - Centralized SVG icons (getIcon, getCloseIcon)
- `themes/shared/accessibility.ts` - A11y helpers (getA11yString, getCloseButtonA11y)
- `themes/shared/constants.ts` - Standard class names and default titles

## Design Tokens Added (index.scss)
- Spacing scale: --fl-spacing-xs through --fl-spacing-2xl
- Typography scale: --fl-font-size-xs through --fl-font-size-xl
- Close button sizes: --fl-close-sm, --fl-close-md, --fl-close-lg
- Border radius: --fl-radius-sm through --fl-radius-full
- Shadow tokens: --fl-shadow-sm through --fl-shadow-lg
- Animation: --fl-duration-*, --fl-easing-*, --fl-slide-*

## Mixins Updated
- Added `close-button-sized($size)` with sm/md/lg support
- Added `close-button-circular($size)` variant
- Added `close-button-text` for text-style buttons
- Updated existing mixins to use design tokens

## All 17 Themes Refactored
Each theme now uses shared utilities instead of duplicating code:
- Icon code: 20+ lines → 1 function call
- Accessibility: 3 lines → 1 function call
- Class names: via CLASS_NAMES constants

Backwards compatible - no breaking changes.
---
 .../Resources/assets/themes/amazon/amazon.ts  |  58 +++-----
 .../Resources/assets/themes/amber/amber.ts    |  22 ++-
 .../Resources/assets/themes/aurora/aurora.ts  |  18 ++-
 .../assets/themes/crystal/crystal.ts          |  20 ++-
 .../assets/themes/emerald/emerald.ts          |  14 +-
 .../assets/themes/facebook/facebook.ts        |  31 +++--
 .../assets/themes/flasher/flasher.ts          |  24 ++--
 .../Resources/assets/themes/google/google.ts  |  53 ++------
 src/Prime/Resources/assets/themes/index.scss  |  47 ++++++-
 src/Prime/Resources/assets/themes/ios/ios.ts  |  55 +++-----
 .../Resources/assets/themes/jade/jade.ts      |  18 ++-
 .../assets/themes/material/material.ts        |  24 ++--
 .../assets/themes/minimal/minimal.ts          |  18 ++-
 src/Prime/Resources/assets/themes/mixins.scss | 106 ++++++++++++++-
 .../Resources/assets/themes/neon/neon.ts      |  18 ++-
 .../Resources/assets/themes/onyx/onyx.ts      |  20 ++-
 .../Resources/assets/themes/ruby/ruby.ts      |  22 ++-
 .../assets/themes/sapphire/sapphire.ts        |  16 +--
 .../assets/themes/shared/accessibility.ts     |  25 ++++
 .../assets/themes/shared/constants.ts         |  45 +++++++
 .../Resources/assets/themes/shared/icons.ts   |  51 +++++++
 .../Resources/assets/themes/shared/index.ts   |  13 ++
 .../Resources/assets/themes/slack/slack.ts    |  40 +++---
 src/Prime/Resources/dist/flasher.esm.js       |  69 ++++++++--
 src/Prime/Resources/dist/flasher.js           |  69 ++++++++--
 src/Prime/Resources/dist/flasher.min.css      |   4 +-
 src/Prime/Resources/dist/flasher.min.js       |   2 +-
 .../dist/themes/amazon/amazon.esm.js          | 126 ++++++++++++------
 .../Resources/dist/themes/amazon/amazon.js    | 126 ++++++++++++------
 .../dist/themes/amazon/amazon.min.js          |   2 +-
 .../Resources/dist/themes/amber/amber.esm.js  |  55 ++++++--
 .../Resources/dist/themes/amber/amber.js      |  55 ++++++--
 .../Resources/dist/themes/amber/amber.min.js  |   2 +-
 .../dist/themes/aurora/aurora.esm.js          |  51 +++++--
 .../Resources/dist/themes/aurora/aurora.js    |  51 +++++--
 .../dist/themes/aurora/aurora.min.js          |   2 +-
 .../dist/themes/crystal/crystal.esm.js        |  53 ++++++--
 .../Resources/dist/themes/crystal/crystal.js  |  53 ++++++--
 .../dist/themes/crystal/crystal.min.js        |   2 +-
 .../dist/themes/emerald/emerald.esm.js        |  47 ++++++-
 .../Resources/dist/themes/emerald/emerald.js  |  47 ++++++-
 .../dist/themes/emerald/emerald.min.js        |   2 +-
 .../dist/themes/facebook/facebook.esm.js      |  84 ++++++++++--
 .../dist/themes/facebook/facebook.js          |  84 ++++++++++--
 .../dist/themes/facebook/facebook.min.js      |   2 +-
 .../dist/themes/flasher/flasher.esm.js        |  69 ++++++++--
 .../Resources/dist/themes/flasher/flasher.js  |  69 ++++++++--
 .../dist/themes/flasher/flasher.min.css       |   2 +-
 .../dist/themes/flasher/flasher.min.js        |   2 +-
 .../dist/themes/google/google.esm.js          | 114 +++++++++++-----
 .../Resources/dist/themes/google/google.js    | 114 +++++++++++-----
 .../dist/themes/google/google.min.js          |   2 +-
 .../Resources/dist/themes/ios/ios.esm.js      | 111 ++++++++++-----
 src/Prime/Resources/dist/themes/ios/ios.js    | 111 ++++++++++-----
 .../Resources/dist/themes/ios/ios.min.js      |   2 +-
 .../Resources/dist/themes/jade/jade.esm.js    |  51 +++++--
 src/Prime/Resources/dist/themes/jade/jade.js  |  51 +++++--
 .../Resources/dist/themes/jade/jade.min.js    |   2 +-
 .../dist/themes/material/material.esm.js      |  58 ++++++--
 .../dist/themes/material/material.js          |  58 ++++++--
 .../dist/themes/material/material.min.js      |   2 +-
 .../dist/themes/minimal/minimal.esm.js        |  51 +++++--
 .../Resources/dist/themes/minimal/minimal.js  |  51 +++++--
 .../dist/themes/minimal/minimal.min.js        |   2 +-
 .../Resources/dist/themes/neon/neon.esm.js    |  51 +++++--
 src/Prime/Resources/dist/themes/neon/neon.js  |  51 +++++--
 .../Resources/dist/themes/neon/neon.min.js    |   2 +-
 .../Resources/dist/themes/onyx/onyx.esm.js    |  53 ++++++--
 src/Prime/Resources/dist/themes/onyx/onyx.js  |  53 ++++++--
 .../Resources/dist/themes/onyx/onyx.min.js    |   2 +-
 .../Resources/dist/themes/ruby/ruby.esm.js    |  55 ++++++--
 src/Prime/Resources/dist/themes/ruby/ruby.js  |  55 ++++++--
 .../Resources/dist/themes/ruby/ruby.min.js    |   2 +-
 .../dist/themes/sapphire/sapphire.esm.js      |  46 +++++--
 .../dist/themes/sapphire/sapphire.js          |  46 +++++--
 .../dist/themes/sapphire/sapphire.min.js      |   2 +-
 .../dist/themes/shared/accessibility.d.ts     |   9 ++
 .../dist/themes/shared/constants.d.ts         |  26 ++++
 .../Resources/dist/themes/shared/icons.d.ts   |   9 ++
 .../Resources/dist/themes/shared/index.d.ts   |   5 +
 .../dist/themes/shared/shared.esm.js          |  90 +++++++++++++
 .../Resources/dist/themes/shared/shared.js    | 108 +++++++++++++++
 .../dist/themes/shared/shared.min.js          |   1 +
 .../Resources/dist/themes/slack/slack.esm.js  |  94 +++++++++----
 .../Resources/dist/themes/slack/slack.js      |  94 +++++++++----
 .../Resources/dist/themes/slack/slack.min.js  |   2 +-
 src/Prime/Resources/public/flasher.min.css    |   4 +-
 src/Prime/Resources/public/flasher.min.js     |   2 +-
 .../public/themes/amazon/amazon.min.js        |   2 +-
 .../public/themes/amber/amber.min.js          |   2 +-
 .../public/themes/aurora/aurora.min.js        |   2 +-
 .../public/themes/crystal/crystal.min.js      |   2 +-
 .../public/themes/emerald/emerald.min.js      |   2 +-
 .../public/themes/facebook/facebook.min.js    |   2 +-
 .../public/themes/flasher/flasher.min.css     |   2 +-
 .../public/themes/flasher/flasher.min.js      |   2 +-
 .../public/themes/google/google.min.js        |   2 +-
 .../Resources/public/themes/ios/ios.min.js    |   2 +-
 .../Resources/public/themes/jade/jade.min.js  |   2 +-
 .../public/themes/material/material.min.js    |   2 +-
 .../public/themes/minimal/minimal.min.js      |   2 +-
 .../Resources/public/themes/neon/neon.min.js  |   2 +-
 .../Resources/public/themes/onyx/onyx.min.js  |   2 +-
 .../Resources/public/themes/ruby/ruby.min.js  |   2 +-
 .../public/themes/sapphire/sapphire.min.js    |   2 +-
 .../public/themes/shared/shared.min.js        |   1 +
 .../public/themes/slack/slack.min.js          |   2 +-
 107 files changed, 2678 insertions(+), 889 deletions(-)
 create mode 100644 src/Prime/Resources/assets/themes/shared/accessibility.ts
 create mode 100644 src/Prime/Resources/assets/themes/shared/constants.ts
 create mode 100644 src/Prime/Resources/assets/themes/shared/icons.ts
 create mode 100644 src/Prime/Resources/assets/themes/shared/index.ts
 create mode 100644 src/Prime/Resources/dist/themes/shared/accessibility.d.ts
 create mode 100644 src/Prime/Resources/dist/themes/shared/constants.d.ts
 create mode 100644 src/Prime/Resources/dist/themes/shared/icons.d.ts
 create mode 100644 src/Prime/Resources/dist/themes/shared/index.d.ts
 create mode 100644 src/Prime/Resources/dist/themes/shared/shared.esm.js
 create mode 100644 src/Prime/Resources/dist/themes/shared/shared.js
 create mode 100644 src/Prime/Resources/dist/themes/shared/shared.min.js
 create mode 100644 src/Prime/Resources/public/themes/shared/shared.min.js

diff --git a/src/Prime/Resources/assets/themes/amazon/amazon.ts b/src/Prime/Resources/assets/themes/amazon/amazon.ts
index af7179a7..c98aedfa 100644
--- a/src/Prime/Resources/assets/themes/amazon/amazon.ts
+++ b/src/Prime/Resources/assets/themes/amazon/amazon.ts
@@ -1,63 +1,37 @@
 import './amazon.scss'
 import type { Envelope } from '../../types'
+import { getTypeIcon, getCloseIcon } from '../shared/icons'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES, DEFAULT_TITLES } from '../shared/constants'
+
+const AMAZON_TITLES: Record<string, string> = {
+    success: 'Success!',
+    error: 'Problem',
+    warning: 'Warning',
+    info: 'Information',
+}
 
 export const amazonTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
-        const getAlertIcon = () => {
-            switch (type) {
-                case 'success':
-                    return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                    </svg>`
-                case 'error':
-                    return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-                    </svg>`
-                case 'warning':
-                    return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-                    </svg>`
-                case 'info':
-                    return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-                    </svg>`
-            }
-            return ''
-        }
-
-        const getAlertTitle = () => {
-            switch (type) {
-                case 'success': return 'Success!'
-                case 'error': return 'Problem'
-                case 'warning': return 'Warning'
-                case 'info': return 'Information'
-                default: return 'Alert'
-            }
-        }
+        const alertTitle = AMAZON_TITLES[type] || DEFAULT_TITLES[type] || 'Alert'
 
         return `
-            <div class="fl-amazon fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('amazon')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-amazon-alert">
                     <div class="fl-alert-content">
                         <div class="fl-icon-container">
-                            ${getAlertIcon()}
+                            ${getTypeIcon(type, { size: 'lg' })}
                         </div>
                         <div class="fl-text-content">
-                            <div class="fl-alert-title">${getAlertTitle()}</div>
+                            <div class="fl-alert-title">${alertTitle}</div>
                             <div class="fl-alert-message">${message}</div>
                         </div>
                     </div>
                     <div class="fl-alert-actions">
-                        <button class="fl-close" aria-label="Close notification">
-                            <svg viewBox="0 0 24 24" width="16" height="16">
-                                <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-                            </svg>
+                        <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${getCloseIcon()}
                         </button>
                     </div>
                 </div>
diff --git a/src/Prime/Resources/assets/themes/amber/amber.ts b/src/Prime/Resources/assets/themes/amber/amber.ts
index 05f54a23..f2bad839 100644
--- a/src/Prime/Resources/assets/themes/amber/amber.ts
+++ b/src/Prime/Resources/assets/themes/amber/amber.ts
@@ -1,25 +1,23 @@
 import './amber.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
 
 export const amberTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
         return `
-            <div class="fl-amber fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-icon"></div>
-                    <div class="fl-text">
-                        <div class="fl-message">${message}</div>
+            <div class="${CLASS_NAMES.theme('amber')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.icon}"></div>
+                    <div class="${CLASS_NAMES.text}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/aurora/aurora.ts b/src/Prime/Resources/assets/themes/aurora/aurora.ts
index 3b498e09..e69965b1 100644
--- a/src/Prime/Resources/assets/themes/aurora/aurora.ts
+++ b/src/Prime/Resources/assets/themes/aurora/aurora.ts
@@ -1,22 +1,20 @@
 import './aurora.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
 
 export const auroraTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
         return `
-            <div class="fl-aurora fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('aurora')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/crystal/crystal.ts b/src/Prime/Resources/assets/themes/crystal/crystal.ts
index 81b8879f..d244de45 100644
--- a/src/Prime/Resources/assets/themes/crystal/crystal.ts
+++ b/src/Prime/Resources/assets/themes/crystal/crystal.ts
@@ -1,24 +1,22 @@
 import './crystal.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
 
 export const crystalTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
         return `
-            <div class="fl-crystal fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-text">
-                        <p class="fl-message">${message}</p>
+            <div class="${CLASS_NAMES.theme('crystal')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.text}">
+                        <p class="${CLASS_NAMES.message}">${message}</p>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/emerald/emerald.ts b/src/Prime/Resources/assets/themes/emerald/emerald.ts
index 87156d65..fccd8be7 100644
--- a/src/Prime/Resources/assets/themes/emerald/emerald.ts
+++ b/src/Prime/Resources/assets/themes/emerald/emerald.ts
@@ -1,19 +1,17 @@
 import './emerald.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
 
 export const emeraldTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
         return `
-            <div class="fl-emerald fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('emerald')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/facebook/facebook.ts b/src/Prime/Resources/assets/themes/facebook/facebook.ts
index b23630f7..060e5919 100644
--- a/src/Prime/Resources/assets/themes/facebook/facebook.ts
+++ b/src/Prime/Resources/assets/themes/facebook/facebook.ts
@@ -1,17 +1,18 @@
 import './facebook.scss'
 import type { Envelope } from '../../types'
+import { getCloseIcon } from '../shared/icons'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
+
+function getTimeString(): string {
+    const now = new Date()
+    return now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
+}
 
 export const facebookTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
-        const now = new Date()
-        const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
-
         const getNotificationIcon = () => {
             switch (type) {
                 case 'success':
@@ -43,25 +44,23 @@ export const facebookTheme = {
         }
 
         return `
-            <div class="fl-facebook fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('facebook')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-fb-notification">
                     <div class="fl-icon-container">
                         ${getNotificationIcon()}
                     </div>
-                    <div class="fl-content">
-                        <div class="fl-message">
+                    <div class="${CLASS_NAMES.content}">
+                        <div class="${CLASS_NAMES.message}">
                             ${message}
                         </div>
                         <div class="fl-meta">
-                            <span class="fl-time">${timeString}</span>
+                            <span class="fl-time">${getTimeString()}</span>
                         </div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-button fl-close" aria-label="Close ${type} message">
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="fl-button ${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
                             <div class="fl-button-icon">
-                                <svg viewBox="0 0 24 24" width="20" height="20">
-                                    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-                                </svg>
+                                ${getCloseIcon({ size: 'md' })}
                             </div>
                         </button>
                     </div>
diff --git a/src/Prime/Resources/assets/themes/flasher/flasher.ts b/src/Prime/Resources/assets/themes/flasher/flasher.ts
index eda35ff9..e9bdc359 100644
--- a/src/Prime/Resources/assets/themes/flasher/flasher.ts
+++ b/src/Prime/Resources/assets/themes/flasher/flasher.ts
@@ -1,28 +1,26 @@
 import './flasher.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES, getTitle } from '../shared/constants'
 
 export const flasherTheme = {
     render: (envelope: Envelope): string => {
         const { type, title, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
-        const displayTitle = title || type.charAt(0).toUpperCase() + type.slice(1)
+        const displayTitle = getTitle(title, type)
 
         return `
-            <div class="fl-flasher fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-icon"></div>
+            <div class="${CLASS_NAMES.theme('flasher')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.icon}"></div>
                     <div>
-                        <strong class="fl-title">${displayTitle}</strong>
-                        <span class="fl-message">${message}</span>
+                        <strong class="${CLASS_NAMES.title}">${displayTitle}</strong>
+                        <span class="${CLASS_NAMES.message}">${message}</span>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">&times;</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>&times;</button>
                 </div>
-                <span class="fl-progress-bar">
-                    <span class="fl-progress"></span>
+                <span class="${CLASS_NAMES.progressBar}">
+                    <span class="${CLASS_NAMES.progress}"></span>
                 </span>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/google/google.ts b/src/Prime/Resources/assets/themes/google/google.ts
index 1081795f..479243b9 100644
--- a/src/Prime/Resources/assets/themes/google/google.ts
+++ b/src/Prime/Resources/assets/themes/google/google.ts
@@ -1,60 +1,35 @@
 import './google.scss'
 import type { Envelope } from '../../types'
+import { getTypeIcon } from '../shared/icons'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES, DEFAULT_TEXT } from '../shared/constants'
 
 export const googleTheme = {
     render: (envelope: Envelope): string => {
         const { type, message, title } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
-        const actionText = 'DISMISS'
-
-        const getIcon = () => {
-            switch (type) {
-                case 'success':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                    </svg>`
-                case 'error':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
-                    </svg>`
-                case 'warning':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"/>
-                    </svg>`
-                case 'info':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-                    </svg>`
-            }
-            return ''
-        }
-
-        const titleSection = title ? `<div class="fl-title">${title}</div>` : ''
+        const titleSection = title ? `<div class="${CLASS_NAMES.title}">${title}</div>` : ''
 
         return `
-            <div class="fl-google fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('google')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-md-card">
-                    <div class="fl-content">
-                        <div class="fl-icon-wrapper">
-                            ${getIcon()}
+                    <div class="${CLASS_NAMES.content}">
+                        <div class="${CLASS_NAMES.iconWrapper}">
+                            ${getTypeIcon(type, { size: 'lg', className: 'fl-icon-svg' })}
                         </div>
                         <div class="fl-text-content">
                             ${titleSection}
-                            <div class="fl-message">${message}</div>
+                            <div class="${CLASS_NAMES.message}">${message}</div>
                         </div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-action-button fl-close" aria-label="Close ${type} message">
-                            ${actionText}
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="fl-action-button ${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${DEFAULT_TEXT.dismissButton}
                         </button>
                     </div>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/index.scss b/src/Prime/Resources/assets/themes/index.scss
index cd0a262e..6d2eba46 100644
--- a/src/Prime/Resources/assets/themes/index.scss
+++ b/src/Prime/Resources/assets/themes/index.scss
@@ -2,6 +2,7 @@
 @use "sass:meta";
 
 :root {
+    // Colors
     --fl-success: #10b981;
     --fl-info: #3b82f6;
     --fl-warning: #f59e0b;
@@ -19,12 +20,56 @@
     --fl-text-light: rgb(75, 85, 99);
     --fl-text-dark: var(--fl-white);
 
+    // Typography
     --fl-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    --fl-font-size-xs: 0.75rem;
+    --fl-font-size-sm: 0.875rem;
+    --fl-font-size-base: 1rem;
+    --fl-font-size-lg: 1.125rem;
+    --fl-font-size-xl: 1.25rem;
+
+    // Spacing scale (rem for consistency)
+    --fl-spacing-xs: 0.25rem;
+    --fl-spacing-sm: 0.5rem;
+    --fl-spacing-md: 0.75rem;
+    --fl-spacing-lg: 1rem;
+    --fl-spacing-xl: 1.5rem;
+    --fl-spacing-2xl: 2rem;
+
+    // Close button sizes
+    --fl-close-sm: 1.125rem;
+    --fl-close-md: 1.5rem;
+    --fl-close-lg: 1.875rem;
+
+    // Border radius
     --fl-border-radius: 4px;
+    --fl-radius-sm: 0.25rem;
+    --fl-radius-md: 0.5rem;
+    --fl-radius-lg: 0.75rem;
+    --fl-radius-xl: 1rem;
+    --fl-radius-full: 9999px;
+
+    // Shadows
     --fl-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     --fl-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.35);
-    --fl-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    --fl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --fl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --fl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 
+    // Animation
+    --fl-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    --fl-duration-fast: 0.15s;
+    --fl-duration-base: 0.3s;
+    --fl-duration-slow: 0.5s;
+    --fl-easing-spring: cubic-bezier(0.23, 1, 0.32, 1);
+    --fl-easing-material: cubic-bezier(0.4, 0, 0.2, 1);
+
+    // Animation distances
+    --fl-slide-sm: 8px;
+    --fl-slide-md: 12px;
+    --fl-slide-lg: 20px;
+
+    // Legacy aliases (for backwards compatibility)
     --background-color: var(--fl-bg-light);
     --text-color: var(--fl-text-light);
     --dark-background-color: var(--fl-bg-dark);
diff --git a/src/Prime/Resources/assets/themes/ios/ios.ts b/src/Prime/Resources/assets/themes/ios/ios.ts
index 876c4871..1e094c5c 100644
--- a/src/Prime/Resources/assets/themes/ios/ios.ts
+++ b/src/Prime/Resources/assets/themes/ios/ios.ts
@@ -1,59 +1,38 @@
 import './ios.scss'
 import type { Envelope } from '../../types'
+import { getTypeIcon } from '../shared/icons'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
+
+const APP_NAME = 'PHPFlasher'
+
+function getTimeString(): string {
+    const now = new Date()
+    return now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
+}
 
 export const iosTheme = {
     render: (envelope: Envelope): string => {
         const { type, message, title } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
-        const appName = 'PHPFlasher'
-
-        const now = new Date()
-        const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
-
-        const getIcon = () => {
-            switch (type) {
-                case 'success':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                    </svg>`
-                case 'error':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-                    </svg>`
-                case 'warning':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-                    </svg>`
-                case 'info':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-                    </svg>`
-            }
-            return ''
-        }
-
-        const displayTitle = title || appName
+        const displayTitle = title || APP_NAME
 
         return `
-            <div class="fl-ios fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('ios')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-ios-notification">
                     <div class="fl-header">
                         <div class="fl-app-icon">
-                            ${getIcon()}
+                            ${getTypeIcon(type, { size: 'md', className: 'fl-icon-svg' })}
                         </div>
                         <div class="fl-app-info">
                             <div class="fl-app-name">${displayTitle}</div>
-                            <div class="fl-time">${timeString}</div>
+                            <div class="fl-time">${getTimeString()}</div>
                         </div>
                     </div>
-                    <div class="fl-content">
-                        <div class="fl-message">${message}</div>
+                    <div class="${CLASS_NAMES.content}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
                         <span aria-hidden="true">×</span>
                     </button>
                 </div>
diff --git a/src/Prime/Resources/assets/themes/jade/jade.ts b/src/Prime/Resources/assets/themes/jade/jade.ts
index 74d0273a..5b784af7 100644
--- a/src/Prime/Resources/assets/themes/jade/jade.ts
+++ b/src/Prime/Resources/assets/themes/jade/jade.ts
@@ -1,22 +1,20 @@
 import './jade.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
 
 export const jadeTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
         return `
-            <div class="fl-jade fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('jade')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/material/material.ts b/src/Prime/Resources/assets/themes/material/material.ts
index f2965796..33601d2a 100644
--- a/src/Prime/Resources/assets/themes/material/material.ts
+++ b/src/Prime/Resources/assets/themes/material/material.ts
@@ -1,32 +1,28 @@
 import './material.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES, DEFAULT_TEXT } from '../shared/constants'
 
 export const materialTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
-        const actionText = 'DISMISS'
-
         return `
-            <div class="fl-material fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('material')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-md-card">
-                    <div class="fl-content">
+                    <div class="${CLASS_NAMES.content}">
                         <div class="fl-text-content">
-                            <div class="fl-message">${message}</div>
+                            <div class="${CLASS_NAMES.message}">${message}</div>
                         </div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-action-button fl-close" aria-label="Close ${type} message">
-                            ${actionText}
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="fl-action-button ${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${DEFAULT_TEXT.dismissButton}
                         </button>
                     </div>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/minimal/minimal.ts b/src/Prime/Resources/assets/themes/minimal/minimal.ts
index 8e372ec0..41eb437e 100644
--- a/src/Prime/Resources/assets/themes/minimal/minimal.ts
+++ b/src/Prime/Resources/assets/themes/minimal/minimal.ts
@@ -1,22 +1,20 @@
 import './minimal.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
 
 export const minimalTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
         return `
-            <div class="fl-minimal fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('minimal')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/mixins.scss b/src/Prime/Resources/assets/themes/mixins.scss
index 5979f307..164ede7c 100644
--- a/src/Prime/Resources/assets/themes/mixins.scss
+++ b/src/Prime/Resources/assets/themes/mixins.scss
@@ -8,26 +8,122 @@
     }
 }
 
+// Legacy close button mixin (for backwards compatibility)
 @mixin close-button {
     .fl-close {
         position: absolute;
-        right: 0.75rem;
+        right: var(--fl-spacing-md, 0.75rem);
         top: 50%;
         transform: translateY(-50%);
         background: none;
         border: none;
-        font-size: 1.25rem;
+        font-size: var(--fl-font-size-xl, 1.25rem);
         line-height: 1;
-        padding: 0.25rem;
+        padding: var(--fl-spacing-xs, 0.25rem);
         cursor: pointer;
         opacity: 0.5;
-        transition: opacity 0.2s ease;
+        transition: opacity var(--fl-duration-fast, 0.15s) ease;
         color: currentColor;
         touch-action: manipulation;
 
         &:hover, &:focus {
             opacity: 1;
         }
+
+        &:focus-visible {
+            outline: 2px solid currentColor;
+            outline-offset: 2px;
+        }
+    }
+}
+
+// Parameterized close button with size variants
+@mixin close-button-sized($size: 'md', $position: 'absolute') {
+    .fl-close {
+        @if $position == 'absolute' {
+            position: absolute;
+            right: var(--fl-spacing-md, 0.75rem);
+            top: 50%;
+            transform: translateY(-50%);
+        } @else {
+            position: relative;
+        }
+
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: currentColor;
+        opacity: 0.5;
+        transition: opacity var(--fl-duration-fast, 0.15s) ease,
+                    transform var(--fl-duration-fast, 0.15s) ease;
+        touch-action: manipulation;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+
+        @if $size == 'sm' {
+            width: var(--fl-close-sm, 1.125rem);
+            height: var(--fl-close-sm, 1.125rem);
+            font-size: var(--fl-font-size-base, 1rem);
+        } @else if $size == 'lg' {
+            width: var(--fl-close-lg, 1.875rem);
+            height: var(--fl-close-lg, 1.875rem);
+            font-size: var(--fl-font-size-xl, 1.25rem);
+        } @else {
+            width: var(--fl-close-md, 1.5rem);
+            height: var(--fl-close-md, 1.5rem);
+            font-size: var(--fl-font-size-lg, 1.125rem);
+        }
+
+        &:hover, &:focus {
+            opacity: 1;
+        }
+
+        &:focus-visible {
+            outline: 2px solid currentColor;
+            outline-offset: 2px;
+        }
+    }
+}
+
+// Circular close button variant
+@mixin close-button-circular($size: 'md') {
+    @include close-button-sized($size, 'relative');
+
+    .fl-close {
+        border-radius: var(--fl-radius-full, 9999px);
+
+        &:hover, &:focus {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+    }
+}
+
+// Text-style close button (e.g., "DISMISS")
+@mixin close-button-text {
+    .fl-close {
+        background: transparent;
+        border: none;
+        font-family: inherit;
+        font-weight: 500;
+        font-size: var(--fl-font-size-sm, 0.875rem);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        padding: var(--fl-spacing-sm, 0.5rem) var(--fl-spacing-md, 0.75rem);
+        cursor: pointer;
+        color: currentColor;
+        border-radius: var(--fl-radius-sm, 0.25rem);
+        transition: background-color var(--fl-duration-fast, 0.15s) ease;
+
+        &:hover, &:focus {
+            background-color: rgba(0, 0, 0, 0.04);
+        }
+
+        &:focus-visible {
+            outline: 2px solid currentColor;
+            outline-offset: 2px;
+        }
     }
 }
 
@@ -39,7 +135,7 @@
 
         .fl-close {
             right: auto;
-            left: 0.75rem;
+            left: var(--fl-spacing-md, 0.75rem);
         }
     }
 }
diff --git a/src/Prime/Resources/assets/themes/neon/neon.ts b/src/Prime/Resources/assets/themes/neon/neon.ts
index 2985e62a..386583d0 100644
--- a/src/Prime/Resources/assets/themes/neon/neon.ts
+++ b/src/Prime/Resources/assets/themes/neon/neon.ts
@@ -1,22 +1,20 @@
 import './neon.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
 
 export const neonTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
         return `
-            <div class="fl-neon fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('neon')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/onyx/onyx.ts b/src/Prime/Resources/assets/themes/onyx/onyx.ts
index 3ebb8846..2c40ad75 100644
--- a/src/Prime/Resources/assets/themes/onyx/onyx.ts
+++ b/src/Prime/Resources/assets/themes/onyx/onyx.ts
@@ -1,24 +1,22 @@
 import './onyx.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
 
 export const onyxTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
         return `
-            <div class="fl-onyx fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-text">
-                        <div class="fl-message">${message}</div>
+            <div class="${CLASS_NAMES.theme('onyx')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.text}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/ruby/ruby.ts b/src/Prime/Resources/assets/themes/ruby/ruby.ts
index e7910250..2f252617 100644
--- a/src/Prime/Resources/assets/themes/ruby/ruby.ts
+++ b/src/Prime/Resources/assets/themes/ruby/ruby.ts
@@ -1,28 +1,26 @@
 import './ruby.scss'
 import type { Envelope } from '../../types'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
 
 export const rubyTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
         return `
-            <div class="fl-ruby fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('ruby')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-shine"></div>
-                <div class="fl-content">
+                <div class="${CLASS_NAMES.content}">
                     <div class="fl-icon-circle">
-                        <div class="fl-icon"></div>
+                        <div class="${CLASS_NAMES.icon}"></div>
                     </div>
-                    <div class="fl-text">
-                        <div class="fl-message">${message}</div>
+                    <div class="${CLASS_NAMES.text}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/sapphire/sapphire.ts b/src/Prime/Resources/assets/themes/sapphire/sapphire.ts
index 98fbb765..931c7ec4 100644
--- a/src/Prime/Resources/assets/themes/sapphire/sapphire.ts
+++ b/src/Prime/Resources/assets/themes/sapphire/sapphire.ts
@@ -1,21 +1,19 @@
 import './sapphire.scss'
 import type { Envelope } from '../../types'
+import { getA11yString } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
 
 export const sapphireTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
         return `
-            <div class="fl-sapphire fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <span class="fl-message">${message}</span>
+            <div class="${CLASS_NAMES.theme('sapphire')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <span class="${CLASS_NAMES.message}">${message}</span>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`
     },
diff --git a/src/Prime/Resources/assets/themes/shared/accessibility.ts b/src/Prime/Resources/assets/themes/shared/accessibility.ts
new file mode 100644
index 00000000..2d790402
--- /dev/null
+++ b/src/Prime/Resources/assets/themes/shared/accessibility.ts
@@ -0,0 +1,25 @@
+export type NotificationType = 'success' | 'info' | 'warning' | 'error'
+
+export interface A11yAttributes {
+    role: 'alert' | 'status'
+    ariaLive: 'assertive' | 'polite'
+    ariaAtomic: 'true'
+}
+
+export function getA11yAttributes(type: NotificationType | string): A11yAttributes {
+    const isAlert = type === 'error' || type === 'warning'
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    }
+}
+
+export function getA11yString(type: NotificationType | string): string {
+    const attrs = getA11yAttributes(type)
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`
+}
+
+export function getCloseButtonA11y(type: NotificationType | string): string {
+    return `aria-label="Close ${type} message"`
+}
diff --git a/src/Prime/Resources/assets/themes/shared/constants.ts b/src/Prime/Resources/assets/themes/shared/constants.ts
new file mode 100644
index 00000000..01213e5f
--- /dev/null
+++ b/src/Prime/Resources/assets/themes/shared/constants.ts
@@ -0,0 +1,45 @@
+export const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+
+    actions: 'fl-actions',
+    close: 'fl-close',
+
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+
+    type: (type: string) => `fl-${type}`,
+    theme: (name: string) => `fl-${name}`,
+} as const
+
+export const DEFAULT_TITLES: Record<string, string> = {
+    success: 'Success',
+    error: 'Error',
+    warning: 'Warning',
+    info: 'Information',
+}
+
+export const DEFAULT_TEXT = {
+    dismissButton: 'DISMISS',
+    closeLabel: (type: string) => `Close ${type} message`,
+} as const
+
+export function capitalizeType(type: string): string {
+    return type.charAt(0).toUpperCase() + type.slice(1)
+}
+
+export function getTitle(title: string | undefined, type: string): string {
+    return title || DEFAULT_TITLES[type] || capitalizeType(type)
+}
diff --git a/src/Prime/Resources/assets/themes/shared/icons.ts b/src/Prime/Resources/assets/themes/shared/icons.ts
new file mode 100644
index 00000000..e8305a35
--- /dev/null
+++ b/src/Prime/Resources/assets/themes/shared/icons.ts
@@ -0,0 +1,51 @@
+export type IconType = 'success' | 'info' | 'warning' | 'error' | 'close'
+export type IconSize = 'sm' | 'md' | 'lg' | number
+
+export interface IconConfig {
+    size?: IconSize
+    className?: string
+}
+
+const sizeMap: Record<string, number> = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+}
+
+const iconPaths: Record<IconType, string> = {
+    success:
+        'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+    error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+    warning:
+        'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+    info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+    close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+}
+
+export function getIcon(type: IconType, config: IconConfig = {}): string {
+    const { size = 'md', className = '' } = config
+    const dimension = typeof size === 'number' ? size : sizeMap[size]
+    const path = iconPaths[type]
+
+    if (!path) {
+        return ''
+    }
+
+    const classAttr = className ? ` class="${className}"` : ''
+
+    return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`
+}
+
+export function getCloseIcon(config: IconConfig = {}): string {
+    return getIcon('close', { size: 'sm', ...config })
+}
+
+export function getTypeIcon(
+    type: string,
+    config: IconConfig = {}
+): string {
+    if (type === 'success' || type === 'error' || type === 'warning' || type === 'info') {
+        return getIcon(type, config)
+    }
+    return ''
+}
diff --git a/src/Prime/Resources/assets/themes/shared/index.ts b/src/Prime/Resources/assets/themes/shared/index.ts
new file mode 100644
index 00000000..0c8e043b
--- /dev/null
+++ b/src/Prime/Resources/assets/themes/shared/index.ts
@@ -0,0 +1,13 @@
+export { getIcon, getCloseIcon, getTypeIcon } from './icons'
+export type { IconType, IconSize, IconConfig } from './icons'
+
+export { getA11yAttributes, getA11yString, getCloseButtonA11y } from './accessibility'
+export type { NotificationType, A11yAttributes } from './accessibility'
+
+export {
+    CLASS_NAMES,
+    DEFAULT_TITLES,
+    DEFAULT_TEXT,
+    capitalizeType,
+    getTitle,
+} from './constants'
diff --git a/src/Prime/Resources/assets/themes/slack/slack.ts b/src/Prime/Resources/assets/themes/slack/slack.ts
index 67ec11de..8ef3bc71 100644
--- a/src/Prime/Resources/assets/themes/slack/slack.ts
+++ b/src/Prime/Resources/assets/themes/slack/slack.ts
@@ -1,42 +1,34 @@
 import './slack.scss'
 import type { Envelope } from '../../types'
+import { getCloseIcon } from '../shared/icons'
+import { getA11yString, getCloseButtonA11y } from '../shared/accessibility'
+import { CLASS_NAMES } from '../shared/constants'
+
+const TYPE_ICONS: Record<string, string> = {
+    success: '✓',
+    error: '✕',
+    warning: '!',
+    info: 'i',
+}
 
 export const slackTheme = {
     render: (envelope: Envelope): string => {
         const { type, message } = envelope
 
-        const isAlert = type === 'error' || type === 'warning'
-        const role = isAlert ? 'alert' : 'status'
-        const ariaLive = isAlert ? 'assertive' : 'polite'
-
-        const getTypeIcon = () => {
-            switch (type) {
-                case 'success':
-                    return `<div class="fl-type-icon fl-success-icon">✓</div>`
-                case 'error':
-                    return `<div class="fl-type-icon fl-error-icon">✕</div>`
-                case 'warning':
-                    return `<div class="fl-type-icon fl-warning-icon">!</div>`
-                case 'info':
-                    return `<div class="fl-type-icon fl-info-icon">i</div>`
-            }
-            return ''
-        }
+        const iconChar = TYPE_ICONS[type] || ''
 
         return `
-            <div class="fl-slack fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('slack')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-slack-message">
                     <div class="fl-avatar">
-                        ${getTypeIcon()}
+                        <div class="fl-type-icon fl-${type}-icon">${iconChar}</div>
                     </div>
                     <div class="fl-message-content">
                         <div class="fl-message-text">${message}</div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-close" aria-label="Close ${type} message">
-                            <svg viewBox="0 0 20 20" width="16" height="16">
-                                <path fill="currentColor" d="M10 8.586L6.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 101.414 1.414L10 11.414l3.293 3.293a1 1 0 001.414-1.414L11.414 10l3.293-3.293a1 1 0 00-1.414-1.414L10 8.586z"/>
-                            </svg>
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${getCloseIcon()}
                         </button>
                     </div>
                 </div>
diff --git a/src/Prime/Resources/dist/flasher.esm.js b/src/Prime/Resources/dist/flasher.esm.js
index 8ccd2bb5..59f39909 100644
--- a/src/Prime/Resources/dist/flasher.esm.js
+++ b/src/Prime/Resources/dist/flasher.esm.js
@@ -598,25 +598,70 @@ class Flasher extends AbstractPlugin {
     }
 }
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+const DEFAULT_TITLES = {
+    success: 'Success',
+    error: 'Error',
+    warning: 'Warning',
+    info: 'Information',
+};
+function capitalizeType(type) {
+    return type.charAt(0).toUpperCase() + type.slice(1);
+}
+function getTitle(title, type) {
+    return title || DEFAULT_TITLES[type] || capitalizeType(type);
+}
+
 const flasherTheme = {
     render: (envelope) => {
         const { type, title, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
-        const displayTitle = title || type.charAt(0).toUpperCase() + type.slice(1);
+        const displayTitle = getTitle(title, type);
         return `
-            <div class="fl-flasher fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-icon"></div>
+            <div class="${CLASS_NAMES.theme('flasher')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.icon}"></div>
                     <div>
-                        <strong class="fl-title">${displayTitle}</strong>
-                        <span class="fl-message">${message}</span>
+                        <strong class="${CLASS_NAMES.title}">${displayTitle}</strong>
+                        <span class="${CLASS_NAMES.message}">${message}</span>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">&times;</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>&times;</button>
                 </div>
-                <span class="fl-progress-bar">
-                    <span class="fl-progress"></span>
+                <span class="${CLASS_NAMES.progressBar}">
+                    <span class="${CLASS_NAMES.progress}"></span>
                 </span>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/flasher.js b/src/Prime/Resources/dist/flasher.js
index 99796483..a7cc198f 100644
--- a/src/Prime/Resources/dist/flasher.js
+++ b/src/Prime/Resources/dist/flasher.js
@@ -604,25 +604,70 @@
         }
     }
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+    const DEFAULT_TITLES = {
+        success: 'Success',
+        error: 'Error',
+        warning: 'Warning',
+        info: 'Information',
+    };
+    function capitalizeType(type) {
+        return type.charAt(0).toUpperCase() + type.slice(1);
+    }
+    function getTitle(title, type) {
+        return title || DEFAULT_TITLES[type] || capitalizeType(type);
+    }
+
     const flasherTheme = {
         render: (envelope) => {
             const { type, title, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
-            const displayTitle = title || type.charAt(0).toUpperCase() + type.slice(1);
+            const displayTitle = getTitle(title, type);
             return `
-            <div class="fl-flasher fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-icon"></div>
+            <div class="${CLASS_NAMES.theme('flasher')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.icon}"></div>
                     <div>
-                        <strong class="fl-title">${displayTitle}</strong>
-                        <span class="fl-message">${message}</span>
+                        <strong class="${CLASS_NAMES.title}">${displayTitle}</strong>
+                        <span class="${CLASS_NAMES.message}">${message}</span>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">&times;</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>&times;</button>
                 </div>
-                <span class="fl-progress-bar">
-                    <span class="fl-progress"></span>
+                <span class="${CLASS_NAMES.progressBar}">
+                    <span class="${CLASS_NAMES.progress}"></span>
                 </span>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/flasher.min.css b/src/Prime/Resources/dist/flasher.min.css
index cb304f12..fe9c34c5 100644
--- a/src/Prime/Resources/dist/flasher.min.css
+++ b/src/Prime/Resources/dist/flasher.min.css
@@ -1,11 +1,11 @@
-:root{--fl-success:#10b981;--fl-info:#3b82f6;--fl-warning:#f59e0b;--fl-error:#ef4444;--fl-success-light:color-mix(in srgb,var(--fl-success) 10%,transparent);--fl-info-light:color-mix(in srgb,var(--fl-info) 10%,transparent);--fl-warning-light:color-mix(in srgb,var(--fl-warning) 10%,transparent);--fl-error-light:color-mix(in srgb,var(--fl-error) 10%,transparent);--fl-white:#fff;--fl-black:#000;--fl-bg-light:var(--fl-white);--fl-bg-dark:#0f172a;--fl-text-light:#4b5563;--fl-text-dark:var(--fl-white);--fl-font:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--fl-border-radius:4px;--fl-shadow:0 4px 12px rgba(0,0,0,.15);--fl-shadow-dark:0 4px 12px rgba(0,0,0,.35);--fl-transition:0.4s cubic-bezier(0.23,1,0.32,1);--background-color:var(--fl-bg-light);--text-color:var(--fl-text-light);--dark-background-color:var(--fl-bg-dark);--dark-text-color:var(--fl-text-dark);--success-color:var(--fl-success);--info-color:var(--fl-info);--warning-color:var(--fl-warning);--error-color:var(--fl-error);--success-color-light:var(--fl-success-light);--info-color-light:var(--fl-info-light);--warning-color-light:var(--fl-warning-light);--error-color-light:var(--fl-error-light)}.fl-wrapper{pointer-events:none;position:fixed;transition:all .4s cubic-bezier(.23,1,.32,1);width:24em;z-index:1000}.fl-wrapper .fl-container{border-radius:var(--fl-border-radius,4px);opacity:0;pointer-events:auto;transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .4s cubic-bezier(.23,1,.32,1)}.fl-wrapper .fl-container.fl-show{opacity:1;transform:translate(0) scale(1)!important}.fl-wrapper.fl-stacked .fl-container:not(:last-child){margin-bottom:.5em}.fl-wrapper[data-position^=top-]{top:.75em}.fl-wrapper[data-position^=bottom-]{bottom:.75em}.fl-wrapper[data-position^=center-]{top:50%}.fl-wrapper[data-position$=-right]{right:.75em}.fl-wrapper[data-position$=-left]{left:.75em}.fl-wrapper[data-position$=-center]{left:50%}.fl-wrapper[data-position=center-left]{transform:translateY(-50%)}.fl-wrapper[data-position=center-left] .fl-container{transform:translateX(-110%)}.fl-wrapper[data-position=center-right]{transform:translateY(-50%)}.fl-wrapper[data-position=center-right] .fl-container{transform:translateX(110%)}.fl-wrapper[data-position=center-center]{transform:translate(-50%,-50%)}.fl-wrapper[data-position=center-center] .fl-container{opacity:0;transform:translate(0) scale(.5);transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .5s cubic-bezier(.23,1,.32,1)}.fl-wrapper[data-position=bottom-center],.fl-wrapper[data-position=top-center]{transform:translateX(-50%)}.fl-wrapper[data-position=top-center] .fl-container{transform:translateY(-150%)}.fl-wrapper[data-position=bottom-center] .fl-container{transform:translateY(150%)}.fl-wrapper[data-position=bottom-right] .fl-container,.fl-wrapper[data-position=top-right] .fl-container{transform:translateX(110%)}.fl-wrapper[data-position=bottom-left] .fl-container,.fl-wrapper[data-position=top-left] .fl-container{transform:translateX(-110%)}@media screen and (max-width:768px){.fl-wrapper{left:7.5%;right:7.5%;width:85%}.fl-wrapper[data-position$=-center],.fl-wrapper[data-position$=-left],.fl-wrapper[data-position$=-right]{left:50%;right:auto}.fl-wrapper[data-position^=top-]{top:.75em;transform:translateX(-50%)}.fl-wrapper[data-position^=bottom-]{bottom:.75em;transform:translateX(-50%)}.fl-wrapper[data-position^=center-]{top:50%;transform:translate(-50%,-50%)}}@media screen and (max-width:480px){.fl-wrapper{left:5%;right:5%;width:90%}}@media (prefers-color-scheme:dark){.fl-wrapper.fl-auto-dark .fl-container{box-shadow:var(--fl-shadow-dark,0 4px 12px rgba(0,0,0,.35))}}.fl-wrapper .fl-container.fl-dismissing{opacity:0;transition:all .3s ease-out}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-right],.fl-wrapper .fl-container.fl-dismissing[data-position=top-right]{transform:translateX(110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-left],.fl-wrapper .fl-container.fl-dismissing[data-position=top-left]{transform:translateX(-110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=top-center]{transform:translateY(-150%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-center]{transform:scale(.5);transition:opacity .4s ease-out,transform .4s ease-out}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-center]{transform:translateY(150%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-left]{transform:translateX(-110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-right]{transform:translateX(110%)}@media (prefers-reduced-motion:reduce){.fl-wrapper,.fl-wrapper .fl-container{transition:none!important}}.fl-container{color:var(--text-color,var(--fl-text-light));opacity:0;transform:translateY(-20px);transition:all .4s cubic-bezier(.23,1,.32,1);will-change:opacity,transform}.fl-container.fl-show{opacity:1;transform:translate(0)!important}.fl-container.fl-rtl{text-align:right}.fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-rtl .fl-progress .fl-progress{transform-origin:right center}.fl-icon{border-radius:50%;box-sizing:border-box;color:#fff;display:inline-block;height:1em;margin:0;min-height:1em;min-width:1em;position:relative;transition:transform .2s ease;width:1em}.fl-icon:after,.fl-icon:before{border-width:0;box-sizing:border-box;content:"";position:absolute;transition:inherit}.fl-success .fl-icon:after,.fl-success .fl-icon:before{background-color:currentcolor;border-radius:.1em;height:.6em;left:.35em;top:.6em;transform:rotate(-135deg);transform-origin:.08em .08em;width:.16em}.fl-success .fl-icon:after{height:.16em;width:.4em}.fl-info .fl-icon:after,.fl-info .fl-icon:before{background-color:currentcolor;border-radius:.03em;left:50%;transform:translateX(-50%);width:.15em}.fl-info .fl-icon:before{height:.38em;top:.4em}.fl-info .fl-icon:after{box-shadow:-.06em .19em,-.06em .44em,.06em .44em;height:.13em;top:.21em}.fl-warning .fl-icon:after,.fl-warning .fl-icon:before{background-color:currentcolor;border-radius:.03em;left:50%;transform:translateX(-50%);width:.15em}.fl-warning .fl-icon:before{height:.38em;top:.21em}.fl-warning .fl-icon:after{height:.13em;top:.65em}.fl-error .fl-icon:after,.fl-error .fl-icon:before{background-color:currentcolor;border-radius:.1em;height:.7em;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-135deg);width:.16em}.fl-error .fl-icon:after{transform:translate(-50%,-50%) rotate(-45deg)}.fl-success .fl-icon{background-color:var(--success-color,var(--fl-success))}.fl-info .fl-icon{background-color:var(--info-color,var(--fl-info))}.fl-warning .fl-icon{background-color:var(--warning-color,var(--fl-warning))}.fl-error .fl-icon{background-color:var(--error-color,var(--fl-error))}
+:root{--fl-success:#10b981;--fl-info:#3b82f6;--fl-warning:#f59e0b;--fl-error:#ef4444;--fl-success-light:color-mix(in srgb,var(--fl-success) 10%,transparent);--fl-info-light:color-mix(in srgb,var(--fl-info) 10%,transparent);--fl-warning-light:color-mix(in srgb,var(--fl-warning) 10%,transparent);--fl-error-light:color-mix(in srgb,var(--fl-error) 10%,transparent);--fl-white:#fff;--fl-black:#000;--fl-bg-light:var(--fl-white);--fl-bg-dark:#0f172a;--fl-text-light:#4b5563;--fl-text-dark:var(--fl-white);--fl-font:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--fl-font-size-xs:0.75rem;--fl-font-size-sm:0.875rem;--fl-font-size-base:1rem;--fl-font-size-lg:1.125rem;--fl-font-size-xl:1.25rem;--fl-spacing-xs:0.25rem;--fl-spacing-sm:0.5rem;--fl-spacing-md:0.75rem;--fl-spacing-lg:1rem;--fl-spacing-xl:1.5rem;--fl-spacing-2xl:2rem;--fl-close-sm:1.125rem;--fl-close-md:1.5rem;--fl-close-lg:1.875rem;--fl-border-radius:4px;--fl-radius-sm:0.25rem;--fl-radius-md:0.5rem;--fl-radius-lg:0.75rem;--fl-radius-xl:1rem;--fl-radius-full:9999px;--fl-shadow:0 4px 12px rgba(0,0,0,.15);--fl-shadow-dark:0 4px 12px rgba(0,0,0,.35);--fl-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--fl-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--fl-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--fl-transition:0.4s cubic-bezier(0.23,1,0.32,1);--fl-duration-fast:0.15s;--fl-duration-base:0.3s;--fl-duration-slow:0.5s;--fl-easing-spring:cubic-bezier(0.23,1,0.32,1);--fl-easing-material:cubic-bezier(0.4,0,0.2,1);--fl-slide-sm:8px;--fl-slide-md:12px;--fl-slide-lg:20px;--background-color:var(--fl-bg-light);--text-color:var(--fl-text-light);--dark-background-color:var(--fl-bg-dark);--dark-text-color:var(--fl-text-dark);--success-color:var(--fl-success);--info-color:var(--fl-info);--warning-color:var(--fl-warning);--error-color:var(--fl-error);--success-color-light:var(--fl-success-light);--info-color-light:var(--fl-info-light);--warning-color-light:var(--fl-warning-light);--error-color-light:var(--fl-error-light)}.fl-wrapper{pointer-events:none;position:fixed;transition:all .4s cubic-bezier(.23,1,.32,1);width:24em;z-index:1000}.fl-wrapper .fl-container{border-radius:var(--fl-border-radius,4px);opacity:0;pointer-events:auto;transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .4s cubic-bezier(.23,1,.32,1)}.fl-wrapper .fl-container.fl-show{opacity:1;transform:translate(0) scale(1)!important}.fl-wrapper.fl-stacked .fl-container:not(:last-child){margin-bottom:.5em}.fl-wrapper[data-position^=top-]{top:.75em}.fl-wrapper[data-position^=bottom-]{bottom:.75em}.fl-wrapper[data-position^=center-]{top:50%}.fl-wrapper[data-position$=-right]{right:.75em}.fl-wrapper[data-position$=-left]{left:.75em}.fl-wrapper[data-position$=-center]{left:50%}.fl-wrapper[data-position=center-left]{transform:translateY(-50%)}.fl-wrapper[data-position=center-left] .fl-container{transform:translateX(-110%)}.fl-wrapper[data-position=center-right]{transform:translateY(-50%)}.fl-wrapper[data-position=center-right] .fl-container{transform:translateX(110%)}.fl-wrapper[data-position=center-center]{transform:translate(-50%,-50%)}.fl-wrapper[data-position=center-center] .fl-container{opacity:0;transform:translate(0) scale(.5);transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .5s cubic-bezier(.23,1,.32,1)}.fl-wrapper[data-position=bottom-center],.fl-wrapper[data-position=top-center]{transform:translateX(-50%)}.fl-wrapper[data-position=top-center] .fl-container{transform:translateY(-150%)}.fl-wrapper[data-position=bottom-center] .fl-container{transform:translateY(150%)}.fl-wrapper[data-position=bottom-right] .fl-container,.fl-wrapper[data-position=top-right] .fl-container{transform:translateX(110%)}.fl-wrapper[data-position=bottom-left] .fl-container,.fl-wrapper[data-position=top-left] .fl-container{transform:translateX(-110%)}@media screen and (max-width:768px){.fl-wrapper{left:7.5%;right:7.5%;width:85%}.fl-wrapper[data-position$=-center],.fl-wrapper[data-position$=-left],.fl-wrapper[data-position$=-right]{left:50%;right:auto}.fl-wrapper[data-position^=top-]{top:.75em;transform:translateX(-50%)}.fl-wrapper[data-position^=bottom-]{bottom:.75em;transform:translateX(-50%)}.fl-wrapper[data-position^=center-]{top:50%;transform:translate(-50%,-50%)}}@media screen and (max-width:480px){.fl-wrapper{left:5%;right:5%;width:90%}}@media (prefers-color-scheme:dark){.fl-wrapper.fl-auto-dark .fl-container{box-shadow:var(--fl-shadow-dark,0 4px 12px rgba(0,0,0,.35))}}.fl-wrapper .fl-container.fl-dismissing{opacity:0;transition:all .3s ease-out}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-right],.fl-wrapper .fl-container.fl-dismissing[data-position=top-right]{transform:translateX(110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-left],.fl-wrapper .fl-container.fl-dismissing[data-position=top-left]{transform:translateX(-110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=top-center]{transform:translateY(-150%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-center]{transform:scale(.5);transition:opacity .4s ease-out,transform .4s ease-out}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-center]{transform:translateY(150%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-left]{transform:translateX(-110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-right]{transform:translateX(110%)}@media (prefers-reduced-motion:reduce){.fl-wrapper,.fl-wrapper .fl-container{transition:none!important}}.fl-container{color:var(--text-color,var(--fl-text-light));opacity:0;transform:translateY(-20px);transition:all .4s cubic-bezier(.23,1,.32,1);will-change:opacity,transform}.fl-container.fl-show{opacity:1;transform:translate(0)!important}.fl-container.fl-rtl{text-align:right}.fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-rtl .fl-progress .fl-progress{transform-origin:right center}.fl-icon{border-radius:50%;box-sizing:border-box;color:#fff;display:inline-block;height:1em;margin:0;min-height:1em;min-width:1em;position:relative;transition:transform .2s ease;width:1em}.fl-icon:after,.fl-icon:before{border-width:0;box-sizing:border-box;content:"";position:absolute;transition:inherit}.fl-success .fl-icon:after,.fl-success .fl-icon:before{background-color:currentcolor;border-radius:.1em;height:.6em;left:.35em;top:.6em;transform:rotate(-135deg);transform-origin:.08em .08em;width:.16em}.fl-success .fl-icon:after{height:.16em;width:.4em}.fl-info .fl-icon:after,.fl-info .fl-icon:before{background-color:currentcolor;border-radius:.03em;left:50%;transform:translateX(-50%);width:.15em}.fl-info .fl-icon:before{height:.38em;top:.4em}.fl-info .fl-icon:after{box-shadow:-.06em .19em,-.06em .44em,.06em .44em;height:.13em;top:.21em}.fl-warning .fl-icon:after,.fl-warning .fl-icon:before{background-color:currentcolor;border-radius:.03em;left:50%;transform:translateX(-50%);width:.15em}.fl-warning .fl-icon:before{height:.38em;top:.21em}.fl-warning .fl-icon:after{height:.13em;top:.65em}.fl-error .fl-icon:after,.fl-error .fl-icon:before{background-color:currentcolor;border-radius:.1em;height:.7em;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-135deg);width:.16em}.fl-error .fl-icon:after{transform:translate(-50%,-50%) rotate(-45deg)}.fl-success .fl-icon{background-color:var(--success-color,var(--fl-success))}.fl-info .fl-icon{background-color:var(--info-color,var(--fl-info))}.fl-warning .fl-icon{background-color:var(--warning-color,var(--fl-warning))}.fl-error .fl-icon{background-color:var(--error-color,var(--fl-error))}
 .fl-amazon{--amazon-bg-light:#fff;--amazon-bg-dark:#202124;--amazon-text-light:#0f1111;--amazon-text-secondary-light:#565959;--amazon-text-dark:#fff;--amazon-text-secondary-dark:#b6b6b6;--amazon-border-light:#ddd;--amazon-border-dark:#3f3f3f;--amazon-yellow:#ffd814;--amazon-orange:#f90;--amazon-success-bg:#f0fff5;--amazon-success-border:#7fda95;--amazon-success-icon:#007600;--amazon-info-bg:#f3f9ff;--amazon-info-border:#7fb4da;--amazon-info-icon:#0066c0;--amazon-warning-bg:#fffcf3;--amazon-warning-border:#ffd996;--amazon-warning-icon:#c45500;--amazon-error-bg:#fff5f5;--amazon-error-border:#ff8f8f;--amazon-error-icon:#c40000;--amazon-success-bg-dark:#082d11;--amazon-success-border-dark:#1e6e2c;--amazon-success-icon-dark:#7fda95;--amazon-info-bg-dark:#0a1c2e;--amazon-info-border-dark:#1a5183;--amazon-info-icon-dark:#7fb4da;--amazon-warning-bg-dark:#342a0a;--amazon-warning-border-dark:#705711;--amazon-warning-icon-dark:#ffd996;--amazon-error-bg-dark:#2b0c0c;--amazon-error-border-dark:#721c1c;--amazon-error-icon-dark:#ff8f8f;--amazon-animation-duration:0.2s}@keyframes amazonSlideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.fl-amazon{animation:amazonSlideDown var(--amazon-animation-duration) ease-out;font-family:Arial,sans-serif;margin:10px 0;position:relative}.fl-amazon .fl-amazon-alert{background-color:var(--amazon-bg-light);border:1px solid;border-left:4px solid;border-radius:8px;box-shadow:0 2px 5px rgba(15,17,17,.15);color:var(--amazon-text-light);display:flex;padding:14px}.fl-amazon .fl-alert-content{align-items:flex-start;display:flex;flex:1}.fl-amazon .fl-icon-container{color:currentColor;flex-shrink:0;margin-right:12px}.fl-amazon .fl-text-content{flex:1;min-width:0}.fl-amazon .fl-alert-title{font-size:16px;font-weight:700;margin-bottom:4px}.fl-amazon .fl-alert-message{color:var(--amazon-text-secondary-light);font-size:14px;line-height:20px}.fl-amazon .fl-alert-actions{margin-left:16px}.fl-amazon .fl-close{align-items:center;background:none;border:none;border-radius:50%;color:var(--amazon-text-secondary-light);cursor:pointer;display:flex;height:30px;justify-content:center;padding:0;transition:all .2s;width:30px}.fl-amazon .fl-close:hover{background-color:rgba(0,0,0,.05);color:var(--amazon-text-light)}.fl-amazon.fl-success .fl-amazon-alert{background-color:var(--amazon-success-bg);border-color:var(--amazon-success-border)}.fl-amazon.fl-success .fl-icon-container{color:var(--amazon-success-icon)}.fl-amazon.fl-info .fl-amazon-alert{background-color:var(--amazon-info-bg);border-color:var(--amazon-info-border)}.fl-amazon.fl-info .fl-icon-container{color:var(--amazon-info-icon)}.fl-amazon.fl-warning .fl-amazon-alert{background-color:var(--amazon-warning-bg);border-color:var(--amazon-warning-border)}.fl-amazon.fl-warning .fl-icon-container{color:var(--amazon-warning-icon)}.fl-amazon.fl-error .fl-amazon-alert{background-color:var(--amazon-error-bg);border-color:var(--amazon-error-border)}.fl-amazon.fl-error .fl-icon-container{color:var(--amazon-error-icon)}.fl-amazon.fl-rtl{direction:rtl}.fl-amazon.fl-rtl .fl-icon-container{margin-left:12px;margin-right:0}.fl-amazon.fl-rtl .fl-alert-actions{margin-left:0;margin-right:16px}.fl-amazon.fl-rtl .fl-amazon-alert{border-left-width:1px;border-right-width:4px}@media (prefers-reduced-motion:reduce){.fl-amazon{animation:none}}.fl-amazon.fl-auto-dark .fl-amazon-alert,body.fl-dark .fl-amazon .fl-amazon-alert,html.fl-dark .fl-amazon .fl-amazon-alert{background-color:var(--amazon-bg-dark);border-color:var(--amazon-border-dark);box-shadow:0 2px 5px rgba(0,0,0,.3);color:var(--amazon-text-dark)}.fl-amazon.fl-auto-dark .fl-alert-message,.fl-amazon.fl-auto-dark .fl-close,body.fl-dark .fl-amazon .fl-alert-message,body.fl-dark .fl-amazon .fl-close,html.fl-dark .fl-amazon .fl-alert-message,html.fl-dark .fl-amazon .fl-close{color:var(--amazon-text-secondary-dark)}.fl-amazon.fl-auto-dark .fl-close:hover,body.fl-dark .fl-amazon .fl-close:hover,html.fl-dark .fl-amazon .fl-close:hover{background-color:hsla(0,0%,100%,.1);color:var(--amazon-text-dark)}.fl-amazon.fl-auto-dark.fl-success .fl-amazon-alert,body.fl-dark .fl-amazon.fl-success .fl-amazon-alert,html.fl-dark .fl-amazon.fl-success .fl-amazon-alert{background-color:var(--amazon-success-bg-dark);border-color:var(--amazon-success-border-dark)}.fl-amazon.fl-auto-dark.fl-success .fl-icon-container,body.fl-dark .fl-amazon.fl-success .fl-icon-container,html.fl-dark .fl-amazon.fl-success .fl-icon-container{color:var(--amazon-success-icon-dark)}.fl-amazon.fl-auto-dark.fl-info .fl-amazon-alert,body.fl-dark .fl-amazon.fl-info .fl-amazon-alert,html.fl-dark .fl-amazon.fl-info .fl-amazon-alert{background-color:var(--amazon-info-bg-dark);border-color:var(--amazon-info-border-dark)}.fl-amazon.fl-auto-dark.fl-info .fl-icon-container,body.fl-dark .fl-amazon.fl-info .fl-icon-container,html.fl-dark .fl-amazon.fl-info .fl-icon-container{color:var(--amazon-info-icon-dark)}.fl-amazon.fl-auto-dark.fl-warning .fl-amazon-alert,body.fl-dark .fl-amazon.fl-warning .fl-amazon-alert,html.fl-dark .fl-amazon.fl-warning .fl-amazon-alert{background-color:var(--amazon-warning-bg-dark);border-color:var(--amazon-warning-border-dark)}.fl-amazon.fl-auto-dark.fl-warning .fl-icon-container,body.fl-dark .fl-amazon.fl-warning .fl-icon-container,html.fl-dark .fl-amazon.fl-warning .fl-icon-container{color:var(--amazon-warning-icon-dark)}.fl-amazon.fl-auto-dark.fl-error .fl-amazon-alert,body.fl-dark .fl-amazon.fl-error .fl-amazon-alert,html.fl-dark .fl-amazon.fl-error .fl-amazon-alert{background-color:var(--amazon-error-bg-dark);border-color:var(--amazon-error-border-dark)}.fl-amazon.fl-auto-dark.fl-error .fl-icon-container,body.fl-dark .fl-amazon.fl-error .fl-icon-container,html.fl-dark .fl-amazon.fl-error .fl-icon-container{color:var(--amazon-error-icon-dark)}
 .fl-amber{--amber-bg-light:#fff;--amber-bg-dark:#1e293b;--amber-text-light:#4b5563;--amber-text-dark:#f1f5f9;--amber-shadow:0 5px 15px rgba(0,0,0,.08);--amber-shadow-dark:0 5px 15px rgba(0,0,0,.2);--amber-border-radius:4px;--amber-success:#10b981;--amber-info:#3b82f6;--amber-warning:#f59e0b;--amber-error:#ef4444}@keyframes amberIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.fl-amber{animation:amberIn .3s ease-out;background-color:var(--amber-bg-light);border-radius:var(--amber-border-radius) var(--amber-border-radius) 0 0;box-shadow:var(--amber-shadow);color:var(--amber-text-light);font-family:var(--fl-font),serif;margin:.6rem 0;padding:.85rem 1rem;position:relative;will-change:transform,opacity}.fl-amber .fl-content{align-items:center;display:flex}.fl-amber .fl-icon{font-size:1.85em;margin-right:.8rem}.fl-amber .fl-text{flex:1}.fl-amber .fl-message{font-size:.875em;line-height:1.4}.fl-amber .fl-close{background:none;border:none;color:currentColor;cursor:pointer;flex-shrink:0;font-size:1.15rem;margin-left:1rem;opacity:.6;padding:.25rem;touch-action:manipulation;transition:opacity .2s}.fl-amber .fl-close:focus,.fl-amber .fl-close:hover{opacity:1}.fl-amber .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-amber .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-amber.fl-success .fl-close{color:var(--amber-success)}.fl-amber.fl-info .fl-close{color:var(--amber-info)}.fl-amber.fl-warning .fl-close{color:var(--amber-warning)}.fl-amber.fl-error .fl-close{color:var(--amber-error)}.fl-amber.fl-rtl{direction:rtl}.fl-amber.fl-rtl .fl-icon{margin-left:.8rem;margin-right:0}.fl-amber.fl-rtl .fl-close{margin-left:0;margin-right:1rem}.fl-amber.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-amber{animation:none}}.fl-amber.fl-auto-dark,body.fl-dark .fl-amber,html.fl-dark .fl-amber{background-color:var(--amber-bg-dark);box-shadow:var(--amber-shadow-dark);color:var(--amber-text-dark)}
 .fl-aurora{--aurora-bg-light:#fff;--aurora-bg-dark:#14141c;--aurora-text-light:#1e293b;--aurora-text-dark:#f8fafc;--aurora-shadow:0 8px 25px rgba(0,0,0,.08);--aurora-shadow-dark:0 10px 30px rgba(0,0,0,.16);--aurora-border-radius:4px;--aurora-blur:15px;--aurora-success-gradient:linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.2));--aurora-info-gradient:linear-gradient(135deg,rgba(59,130,246,.08),rgba(59,130,246,.2));--aurora-warning-gradient:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.2));--aurora-error-gradient:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.2));--aurora-success:#10b981;--aurora-info:#3b82f6;--aurora-warning:#f59e0b;--aurora-error:#ef4444}@keyframes auroraFadeIn{0%{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.fl-aurora{animation:auroraFadeIn .35s cubic-bezier(.21,1.02,.73,1);backdrop-filter:blur(var(--aurora-blur));-webkit-backdrop-filter:blur(var(--aurora-blur));background-color:var(--aurora-bg-light);border-radius:var(--aurora-border-radius) var(--aurora-border-radius) 0 0;box-shadow:var(--aurora-shadow);color:var(--aurora-text-light);font-family:var(--fl-font),sans-serif;margin:10px 0;overflow:hidden;padding:16px 18px;position:relative;will-change:transform,opacity}.fl-aurora:before{border-radius:inherit;content:"";inset:0;opacity:.8;position:absolute;z-index:0}.fl-aurora .fl-content{align-items:center;display:flex;position:relative;z-index:1}.fl-aurora .fl-message{flex:1;font-size:.9375rem;font-weight:500;line-height:1.5;margin-right:10px}.fl-aurora .fl-close{align-items:center;background:rgba(0,0,0,.05);border:none;border-radius:50%;color:inherit;cursor:pointer;display:flex;flex-shrink:0;font-size:1rem;height:28px;justify-content:center;opacity:.7;transition:all .2s ease;width:28px}.fl-aurora .fl-close:focus,.fl-aurora .fl-close:hover{background:rgba(0,0,0,.1);opacity:1}.fl-aurora .fl-progress-bar{border-radius:6px;bottom:2px;height:3px;left:2px;opacity:.7;overflow:hidden;position:absolute;right:2px;z-index:1}.fl-aurora .fl-progress{height:100%;width:100%}.fl-aurora.fl-success:before{background:var(--aurora-success-gradient)}.fl-aurora.fl-success .fl-progress{background-color:var(--aurora-success)}.fl-aurora.fl-info:before{background:var(--aurora-info-gradient)}.fl-aurora.fl-info .fl-progress{background-color:var(--aurora-info)}.fl-aurora.fl-warning:before{background:var(--aurora-warning-gradient)}.fl-aurora.fl-warning .fl-progress{background-color:var(--aurora-warning)}.fl-aurora.fl-error:before{background:var(--aurora-error-gradient)}.fl-aurora.fl-error .fl-progress{background-color:var(--aurora-error)}.fl-aurora.fl-rtl{direction:rtl}.fl-aurora.fl-rtl .fl-message{margin-left:10px;margin-right:0}.fl-aurora.fl-rtl .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-aurora{animation:none}}.fl-aurora.fl-auto-dark,body.fl-dark .fl-aurora,html.fl-dark .fl-aurora{background-color:var(--aurora-bg-dark);box-shadow:var(--aurora-shadow-dark);color:var(--aurora-text-dark)}.fl-aurora.fl-auto-dark .fl-close,body.fl-dark .fl-aurora .fl-close,html.fl-dark .fl-aurora .fl-close{background:hsla(0,0%,100%,.1)}.fl-aurora.fl-auto-dark .fl-close:focus,.fl-aurora.fl-auto-dark .fl-close:hover,body.fl-dark .fl-aurora .fl-close:focus,body.fl-dark .fl-aurora .fl-close:hover,html.fl-dark .fl-aurora .fl-close:focus,html.fl-dark .fl-aurora .fl-close:hover{background:hsla(0,0%,100%,.15)}.fl-aurora.fl-auto-dark.fl-success:before,body.fl-dark .fl-aurora.fl-success:before,html.fl-dark .fl-aurora.fl-success:before{background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(16,185,129,.25))}.fl-aurora.fl-auto-dark.fl-info:before,body.fl-dark .fl-aurora.fl-info:before,html.fl-dark .fl-aurora.fl-info:before{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(59,130,246,.25))}.fl-aurora.fl-auto-dark.fl-warning:before,body.fl-dark .fl-aurora.fl-warning:before,html.fl-dark .fl-aurora.fl-warning:before{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,.25))}.fl-aurora.fl-auto-dark.fl-error:before,body.fl-dark .fl-aurora.fl-error:before,html.fl-dark .fl-aurora.fl-error:before{background:linear-gradient(135deg,rgba(239,68,68,.1),rgba(239,68,68,.25))}
 .fl-crystal{--crystal-bg-light:#fff;--crystal-bg-dark:rgba(30,30,30,.95);--crystal-text-light:#2c3e50;--crystal-text-dark:hsla(0,0%,100%,.95);--crystal-shadow:rgba(0,0,0,.08);--crystal-shadow-dark:rgba(0,0,0,.25)}@keyframes crystalIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes crystalPulse{0%{box-shadow:0 2px 8px var(--crystal-shadow)}50%{box-shadow:0 4px 12px var(--crystal-shadow)}to{box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal{animation:crystalIn .3s ease-out;background:var(--crystal-bg-light,var(--fl-bg-light));border-radius:var(--fl-border-radius,4px) var(--fl-border-radius,4px) 0 0;box-shadow:0 2px 8px var(--crystal-shadow);font-family:var(--fl-font),serif;margin:0 0 1rem;position:relative;transition:box-shadow .3s ease;will-change:transform,opacity}.fl-crystal:hover{animation:crystalPulse 2s ease-in-out infinite}.fl-crystal .fl-content{align-items:center;display:flex;gap:.75rem;padding:1rem 2.5rem 1rem 1rem}.fl-crystal .fl-text{flex:1}.fl-crystal .fl-message{color:var(--crystal-text-light,var(--fl-text-light));font-size:.9375rem;line-height:1.4;margin:0}.fl-crystal .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:1.25rem;line-height:1;opacity:.5;padding:.25rem;position:absolute;right:.75rem;top:50%;touch-action:manipulation;transform:translateY(-50%);transition:all .2s ease}.fl-crystal .fl-close:focus,.fl-crystal .fl-close:hover{opacity:1;transform:translateY(-50%) scale(1.1)}.fl-crystal .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-crystal .fl-progress-bar .fl-progress{height:100%;transform-origin:left center;width:100%}.fl-crystal.fl-success,.fl-crystal.fl-success .fl-message{color:var(--success-color,var(--fl-success))}.fl-crystal.fl-error,.fl-crystal.fl-error .fl-message{color:var(--error-color,var(--fl-error))}.fl-crystal.fl-warning,.fl-crystal.fl-warning .fl-message{color:var(--warning-color,var(--fl-warning))}.fl-crystal.fl-info,.fl-crystal.fl-info .fl-message{color:var(--info-color,var(--fl-info))}.fl-crystal.fl-rtl{direction:rtl}.fl-crystal.fl-rtl .fl-content{padding:1rem 1rem 1rem 2.5rem}.fl-crystal.fl-rtl .fl-close{left:.75rem;right:auto}.fl-crystal.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-crystal{animation:none}.fl-crystal:hover{animation:none;box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal.fl-auto-dark,body.fl-dark .fl-crystal,html.fl-dark .fl-crystal{background-color:var(--crystal-bg-dark,var(--fl-bg-dark));box-shadow:0 2px 8px var(--crystal-shadow-dark)}.fl-crystal.fl-auto-dark .fl-message,body.fl-dark .fl-crystal .fl-message,html.fl-dark .fl-crystal .fl-message{color:var(--crystal-text-dark,var(--fl-text-dark))}.fl-crystal.fl-auto-dark:hover,body.fl-dark .fl-crystal:hover,html.fl-dark .fl-crystal:hover{animation:none;box-shadow:0 4px 16px var(--crystal-shadow-dark)}
 .fl-emerald{--emerald-bg-light:#fff;--emerald-bg-dark:#1e1e1e;--emerald-text-light:#333;--emerald-text-dark:hsla(0,0%,100%,.9);--emerald-shadow:rgba(0,0,0,.1);--emerald-blur:8px;--emerald-success:var(--success-color,#16a085);--emerald-error:var(--error-color,#e74c3c);--emerald-warning:var(--warning-color,#f39c12);--emerald-info:var(--info-color,#3498db)}@keyframes emeraldIn{0%{opacity:0;transform:scale(.5) translateY(20px)}60%{opacity:1;transform:scale(1.1) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.fl-emerald{animation:emeraldIn .5s cubic-bezier(.23,1,.32,1);backdrop-filter:blur(var(--emerald-blur));-webkit-backdrop-filter:blur(var(--emerald-blur));background:var(--emerald-bg-light);border-radius:4px 4px 0 0;box-shadow:0 10px 20px var(--emerald-shadow);color:var(--emerald-text-light);font-family:"Inter",var(--fl-font),serif;margin:0 0 .5rem;overflow:hidden;padding:1rem 1.5rem 1rem 1rem;position:relative}.fl-emerald .fl-content{align-items:center;display:flex}.fl-emerald .fl-message{flex:1;font-size:.9rem;font-weight:500;line-height:1.4}.fl-emerald .fl-close{background:transparent;border:none;color:currentColor;cursor:pointer;font-size:1.3rem;margin-left:auto;opacity:.7;transition:opacity .2s ease}.fl-emerald .fl-close:focus,.fl-emerald .fl-close:hover{opacity:1}.fl-emerald.fl-success{color:var(--emerald-success)}.fl-emerald.fl-error{color:var(--emerald-error)}.fl-emerald.fl-warning{color:var(--emerald-warning)}.fl-emerald.fl-info{color:var(--emerald-info)}.fl-emerald.fl-rtl{direction:rtl;padding:1rem 1rem 1rem 1.5rem}.fl-emerald.fl-rtl .fl-content{flex-direction:row-reverse}.fl-emerald.fl-rtl .fl-close{margin-left:0;margin-right:auto}@media (prefers-reduced-motion:reduce){.fl-emerald{animation:none}}.fl-emerald.fl-auto-dark,body.fl-dark .fl-emerald,html.fl-dark .fl-emerald{background:var(--emerald-bg-dark)}.fl-emerald.fl-auto-dark .fl-message,body.fl-dark .fl-emerald .fl-message,html.fl-dark .fl-emerald .fl-message{color:var(--emerald-text-dark)}
 .fl-facebook{--fb-bg-light:#fff;--fb-bg-dark:#242526;--fb-text-light:#050505;--fb-text-secondary-light:#65676b;--fb-text-dark:#e4e6eb;--fb-text-secondary-dark:#b0b3b8;--fb-hover-light:#f0f2f5;--fb-hover-dark:#3a3b3c;--fb-border-light:#e4e6eb;--fb-border-dark:#3e4042;--fb-blue:#1876f2;--fb-name-color:#050505;--fb-name-color-dark:#e4e6eb;--fb-success:#31a24c;--fb-info:#1876f2;--fb-warning:#f7b928;--fb-error:#e41e3f;--fb-success-bg:#e7f3ff;--fb-info-bg:#e7f3ff;--fb-warning-bg:#fff5cc;--fb-error-bg:#ffebe9;--fb-success-bg-dark:#263c4b;--fb-info-bg-dark:#263c4b;--fb-warning-bg-dark:#3e3c26;--fb-error-bg-dark:#472835;--fb-animation-duration:0.2s}@keyframes fbFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.fl-facebook{animation:fbFadeIn var(--fb-animation-duration) ease-out;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:8px 0;position:relative}.fl-facebook .fl-fb-notification{align-items:flex-start;background-color:var(--fb-bg-light);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--fb-text-light);display:flex;padding:12px;transition:background-color .1s ease}.fl-facebook .fl-fb-notification:hover{background-color:var(--fb-hover-light)}.fl-facebook .fl-icon-container{flex-shrink:0;margin-right:12px}.fl-facebook .fl-fb-icon{align-items:center;border-radius:50%;display:flex;height:36px;justify-content:center;width:36px}.fl-facebook .fl-fb-icon svg{color:#fff}.fl-facebook .fl-fb-icon-success{background-color:var(--fb-success)}.fl-facebook .fl-fb-icon-info{background-color:var(--fb-info)}.fl-facebook .fl-fb-icon-warning{background-color:var(--fb-warning)}.fl-facebook .fl-fb-icon-error{background-color:var(--fb-error)}.fl-facebook .fl-content{flex:1;min-width:0}.fl-facebook .fl-message{font-size:15px;line-height:1.33;margin-bottom:4px}.fl-facebook .fl-user-name{color:var(--fb-name-color);font-weight:600;margin-right:4px}.fl-facebook .fl-meta{align-items:center;display:flex}.fl-facebook .fl-time{color:var(--fb-text-secondary-light);font-size:13px}.fl-facebook .fl-actions{align-items:center;display:flex;margin-left:12px}.fl-facebook .fl-button{align-items:center;background:var(--fb-hover-light);border:none;border-radius:50%;color:var(--fb-text-secondary-light);cursor:pointer;display:flex;height:32px;justify-content:center;margin-left:8px;transition:background-color .1s;width:32px}.fl-facebook .fl-button:hover{background-color:var(--fb-border-light)}.fl-facebook .fl-button-icon{align-items:center;display:flex;justify-content:center}.fl-facebook.fl-rtl{direction:rtl}.fl-facebook.fl-rtl .fl-icon-container{margin-left:12px;margin-right:0}.fl-facebook.fl-rtl .fl-user-name{margin-left:4px;margin-right:0}.fl-facebook.fl-rtl .fl-actions{margin-left:0;margin-right:12px}.fl-facebook.fl-rtl .fl-button{margin-left:0;margin-right:8px}@media (prefers-reduced-motion:reduce){.fl-facebook{animation:none}}.fl-facebook.fl-auto-dark .fl-fb-notification,body.fl-dark .fl-facebook .fl-fb-notification,html.fl-dark .fl-facebook .fl-fb-notification{background-color:var(--fb-bg-dark);box-shadow:0 1px 2px rgba(0,0,0,.2);color:var(--fb-text-dark)}.fl-facebook.fl-auto-dark .fl-fb-notification:hover,body.fl-dark .fl-facebook .fl-fb-notification:hover,html.fl-dark .fl-facebook .fl-fb-notification:hover{background-color:var(--fb-hover-dark)}.fl-facebook.fl-auto-dark .fl-user-name,body.fl-dark .fl-facebook .fl-user-name,html.fl-dark .fl-facebook .fl-user-name{color:var(--fb-name-color-dark)}.fl-facebook.fl-auto-dark .fl-time,body.fl-dark .fl-facebook .fl-time,html.fl-dark .fl-facebook .fl-time{color:var(--fb-text-secondary-dark)}.fl-facebook.fl-auto-dark .fl-button,body.fl-dark .fl-facebook .fl-button,html.fl-dark .fl-facebook .fl-button{background:var(--fb-hover-dark);color:var(--fb-text-secondary-dark)}.fl-facebook.fl-auto-dark .fl-button:hover,body.fl-dark .fl-facebook .fl-button:hover,html.fl-dark .fl-facebook .fl-button:hover{background-color:var(--fb-border-dark)}.fl-facebook.fl-auto-dark .fl-fb-icon-success,body.fl-dark .fl-facebook .fl-fb-icon-success,html.fl-dark .fl-facebook .fl-fb-icon-success{background-color:var(--fb-success-bg-dark)}.fl-facebook.fl-auto-dark .fl-fb-icon-success svg,body.fl-dark .fl-facebook .fl-fb-icon-success svg,html.fl-dark .fl-facebook .fl-fb-icon-success svg{color:var(--fb-success)}.fl-facebook.fl-auto-dark .fl-fb-icon-info,body.fl-dark .fl-facebook .fl-fb-icon-info,html.fl-dark .fl-facebook .fl-fb-icon-info{background-color:var(--fb-info-bg-dark)}.fl-facebook.fl-auto-dark .fl-fb-icon-info svg,body.fl-dark .fl-facebook .fl-fb-icon-info svg,html.fl-dark .fl-facebook .fl-fb-icon-info svg{color:var(--fb-info)}.fl-facebook.fl-auto-dark .fl-fb-icon-warning,body.fl-dark .fl-facebook .fl-fb-icon-warning,html.fl-dark .fl-facebook .fl-fb-icon-warning{background-color:var(--fb-warning-bg-dark)}.fl-facebook.fl-auto-dark .fl-fb-icon-warning svg,body.fl-dark .fl-facebook .fl-fb-icon-warning svg,html.fl-dark .fl-facebook .fl-fb-icon-warning svg{color:var(--fb-warning)}.fl-facebook.fl-auto-dark .fl-fb-icon-error,body.fl-dark .fl-facebook .fl-fb-icon-error,html.fl-dark .fl-facebook .fl-fb-icon-error{background-color:var(--fb-error-bg-dark)}.fl-facebook.fl-auto-dark .fl-fb-icon-error svg,body.fl-dark .fl-facebook .fl-fb-icon-error svg,html.fl-dark .fl-facebook .fl-fb-icon-error svg{color:var(--fb-error)}
-@keyframes flasherIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}@keyframes flasherInRtl{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.fl-flasher{animation:flasherIn .3s ease-out;background-color:var(--background-color,var(--fl-bg-light));border-bottom:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:var(--text-color,var(--fl-text-light));font-family:var(--fl-font),serif;line-height:1.5;margin:.75em 0;padding:.75em;position:relative;transition:transform .2s ease;will-change:transform,opacity;word-break:break-word}.fl-flasher:hover{transform:translateY(-2px)}.fl-flasher.fl-rtl{animation:flasherInRtl .3s ease-out;border-radius:0 .375em .375em 0}.fl-flasher:not(.fl-rtl){border-radius:.375em 0 0 .375em}.fl-flasher .fl-content{align-items:center;display:flex}.fl-flasher .fl-icon{font-size:2.5em}.fl-flasher .fl-message,.fl-flasher .fl-title{display:block;line-height:1.25em;margin-left:1em;margin-right:1em}.fl-flasher.fl-rtl .fl-message,.fl-flasher.fl-rtl .fl-title{margin-left:1em;margin-right:1em}.fl-flasher .fl-title{font-size:1em;font-weight:600}.fl-flasher .fl-message{font-size:.875em;margin-top:.25em}.fl-flasher .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:1.25rem;line-height:1;opacity:.5;padding:.25rem;position:absolute;right:.75rem;top:50%;touch-action:manipulation;transform:translateY(-50%);transition:opacity .2s ease}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{opacity:1}.fl-flasher.fl-rtl .fl-content{flex-direction:row-reverse}.fl-flasher.fl-rtl .fl-close{left:.75rem;right:auto}.fl-flasher.fl-success{border-left:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success.fl-rtl{border-left:none;border-right:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success:not(.fl-rtl){border-left:.8em solid var(--success-color,var(--fl-success));border-right:none}.fl-flasher.fl-success .fl-close,.fl-flasher.fl-success .fl-title{color:var(--success-color,var(--fl-success))}.fl-flasher.fl-success .fl-close:focus,.fl-flasher.fl-success .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-info{border-left:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info.fl-rtl{border-left:none;border-right:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info:not(.fl-rtl){border-left:.8em solid var(--info-color,var(--fl-info));border-right:none}.fl-flasher.fl-info .fl-close,.fl-flasher.fl-info .fl-title{color:var(--info-color,var(--fl-info))}.fl-flasher.fl-info .fl-close:focus,.fl-flasher.fl-info .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-warning{border-left:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning.fl-rtl{border-left:none;border-right:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning:not(.fl-rtl){border-left:.8em solid var(--warning-color,var(--fl-warning));border-right:none}.fl-flasher.fl-warning .fl-close,.fl-flasher.fl-warning .fl-title{color:var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning .fl-close:focus,.fl-flasher.fl-warning .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-error{border-left:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error.fl-rtl{border-left:none;border-right:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error:not(.fl-rtl){border-left:.8em solid var(--error-color,var(--fl-error));border-right:none}.fl-flasher.fl-error .fl-close,.fl-flasher.fl-error .fl-title{color:var(--error-color,var(--fl-error))}.fl-flasher.fl-error .fl-close:focus,.fl-flasher.fl-error .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher .fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-flasher.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-flasher.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;width:100%}.fl-flasher.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-flasher.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;width:100%}.fl-flasher.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-flasher.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;width:100%}.fl-flasher.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-flasher.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;width:100%}@media (prefers-color-scheme:dark){.fl-flasher.fl-auto-dark{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}}body.fl-dark .fl-flasher,html.fl-dark .fl-flasher{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}@media (prefers-reduced-motion:reduce){.fl-flasher{animation:none}.fl-flasher:hover{transform:none}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{transform:translateY(-50%)}}
+@keyframes flasherIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}@keyframes flasherInRtl{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.fl-flasher{animation:flasherIn .3s ease-out;background-color:var(--background-color,var(--fl-bg-light));border-bottom:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:var(--text-color,var(--fl-text-light));font-family:var(--fl-font),serif;line-height:1.5;margin:.75em 0;padding:.75em;position:relative;transition:transform .2s ease;will-change:transform,opacity;word-break:break-word}.fl-flasher:hover{transform:translateY(-2px)}.fl-flasher.fl-rtl{animation:flasherInRtl .3s ease-out;border-radius:0 .375em .375em 0}.fl-flasher:not(.fl-rtl){border-radius:.375em 0 0 .375em}.fl-flasher .fl-content{align-items:center;display:flex}.fl-flasher .fl-icon{font-size:2.5em}.fl-flasher .fl-message,.fl-flasher .fl-title{display:block;line-height:1.25em;margin-left:1em;margin-right:1em}.fl-flasher.fl-rtl .fl-message,.fl-flasher.fl-rtl .fl-title{margin-left:1em;margin-right:1em}.fl-flasher .fl-title{font-size:1em;font-weight:600}.fl-flasher .fl-message{font-size:.875em;margin-top:.25em}.fl-flasher .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:var(--fl-font-size-xl,1.25rem);line-height:1;opacity:.5;padding:var(--fl-spacing-xs,.25rem);position:absolute;right:var(--fl-spacing-md,.75rem);top:50%;touch-action:manipulation;transform:translateY(-50%);transition:opacity var(--fl-duration-fast,.15s) ease}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{opacity:1}.fl-flasher .fl-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.fl-flasher.fl-rtl .fl-content{flex-direction:row-reverse}.fl-flasher.fl-rtl .fl-close{left:var(--fl-spacing-md,.75rem);right:auto}.fl-flasher.fl-success{border-left:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success.fl-rtl{border-left:none;border-right:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success:not(.fl-rtl){border-left:.8em solid var(--success-color,var(--fl-success));border-right:none}.fl-flasher.fl-success .fl-close,.fl-flasher.fl-success .fl-title{color:var(--success-color,var(--fl-success))}.fl-flasher.fl-success .fl-close:focus,.fl-flasher.fl-success .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-info{border-left:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info.fl-rtl{border-left:none;border-right:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info:not(.fl-rtl){border-left:.8em solid var(--info-color,var(--fl-info));border-right:none}.fl-flasher.fl-info .fl-close,.fl-flasher.fl-info .fl-title{color:var(--info-color,var(--fl-info))}.fl-flasher.fl-info .fl-close:focus,.fl-flasher.fl-info .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-warning{border-left:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning.fl-rtl{border-left:none;border-right:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning:not(.fl-rtl){border-left:.8em solid var(--warning-color,var(--fl-warning));border-right:none}.fl-flasher.fl-warning .fl-close,.fl-flasher.fl-warning .fl-title{color:var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning .fl-close:focus,.fl-flasher.fl-warning .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-error{border-left:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error.fl-rtl{border-left:none;border-right:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error:not(.fl-rtl){border-left:.8em solid var(--error-color,var(--fl-error));border-right:none}.fl-flasher.fl-error .fl-close,.fl-flasher.fl-error .fl-title{color:var(--error-color,var(--fl-error))}.fl-flasher.fl-error .fl-close:focus,.fl-flasher.fl-error .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher .fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-flasher.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-flasher.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;width:100%}.fl-flasher.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-flasher.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;width:100%}.fl-flasher.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-flasher.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;width:100%}.fl-flasher.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-flasher.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;width:100%}@media (prefers-color-scheme:dark){.fl-flasher.fl-auto-dark{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}}body.fl-dark .fl-flasher,html.fl-dark .fl-flasher{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}@media (prefers-reduced-motion:reduce){.fl-flasher{animation:none}.fl-flasher:hover{transform:none}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{transform:translateY(-50%)}}
 .fl-google{--md-bg-light:#fff;--md-bg-dark:#2d2d2d;--md-text-light:rgba(0,0,0,.87);--md-text-secondary-light:rgba(0,0,0,.6);--md-text-dark:hsla(0,0%,100%,.87);--md-text-secondary-dark:hsla(0,0%,100%,.6);--md-elevation:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);--md-elevation-dark:0 3px 5px -1px rgba(0,0,0,.4),0 6px 10px 0 rgba(0,0,0,.28),0 1px 18px 0 rgba(0,0,0,.24);--md-border-radius:4px;--md-success:#43a047;--md-info:#1e88e5;--md-warning:#fb8c00;--md-error:#e53935;--md-animation-duration:0.3s;--md-ripple-duration:0.6s}@keyframes mdSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes mdRipple{to{opacity:0;transform:scale(4)}}.fl-google{animation:mdSlideUp var(--md-animation-duration) cubic-bezier(.4,0,.2,1);font-family:Roboto,Segoe UI,Helvetica,Arial,sans-serif;margin:8px 0;position:relative}.fl-google .fl-md-card{background-color:var(--md-bg-light);border-radius:var(--md-border-radius);box-shadow:var(--md-elevation);color:var(--md-text-light);overflow:hidden}.fl-google .fl-content{align-items:flex-start;display:flex;padding:16px}.fl-google .fl-icon-wrapper{color:var(--md-text-secondary-light);flex-shrink:0;margin-right:16px}.fl-google .fl-text-content{flex:1}.fl-google .fl-title{font-size:1rem;font-weight:500;margin-bottom:4px}.fl-google .fl-message{color:var(--md-text-secondary-light);font-size:.875rem;line-height:1.43}.fl-google .fl-actions{display:flex;justify-content:flex-end;padding:8px}.fl-google .fl-action-button{background:transparent;border:none;border-radius:4px;color:currentColor;cursor:pointer;font-family:inherit;font-size:.8125rem;font-weight:500;letter-spacing:.0892857143em;overflow:hidden;padding:8px 12px;position:relative;text-transform:uppercase;transition:background-color .2s}.fl-google .fl-action-button:focus,.fl-google .fl-action-button:hover{background-color:rgba(0,0,0,.04)}.fl-google .fl-action-button:after{background:currentColor;border-radius:50%;content:"";height:5px;opacity:0;pointer-events:none;position:absolute;transform:scale(1);width:5px}.fl-google .fl-action-button:active:after{animation:mdRipple var(--md-ripple-duration) linear;opacity:.3}.fl-google.fl-success .fl-action-button,.fl-google.fl-success .fl-icon-wrapper{color:var(--md-success)}.fl-google.fl-info .fl-action-button,.fl-google.fl-info .fl-icon-wrapper{color:var(--md-info)}.fl-google.fl-warning .fl-action-button,.fl-google.fl-warning .fl-icon-wrapper{color:var(--md-warning)}.fl-google.fl-error .fl-action-button,.fl-google.fl-error .fl-icon-wrapper{color:var(--md-error)}.fl-google .fl-progress-bar{bottom:0;height:4px;left:0;overflow:hidden;position:absolute;right:0}.fl-google .fl-progress-bar .fl-progress{height:100%;transform-origin:left center;width:100%}.fl-google.fl-success .fl-progress{background-color:var(--md-success)}.fl-google.fl-info .fl-progress{background-color:var(--md-info)}.fl-google.fl-warning .fl-progress{background-color:var(--md-warning)}.fl-google.fl-error .fl-progress{background-color:var(--md-error)}.fl-google.fl-rtl{direction:rtl}.fl-google.fl-rtl .fl-content{flex-direction:row-reverse}.fl-google.fl-rtl .fl-icon-wrapper{margin-left:16px;margin-right:0}.fl-google.fl-rtl .fl-actions{justify-content:flex-start}.fl-google.fl-rtl .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-google,.fl-google .fl-action-button:active:after{animation:none}}.fl-google.fl-auto-dark .fl-md-card,body.fl-dark .fl-google .fl-md-card,html.fl-dark .fl-google .fl-md-card{background-color:var(--md-bg-dark);box-shadow:var(--md-elevation-dark);color:var(--md-text-dark)}.fl-google.fl-auto-dark .fl-message,body.fl-dark .fl-google .fl-message,html.fl-dark .fl-google .fl-message{color:var(--md-text-secondary-dark)}.fl-google.fl-auto-dark .fl-action-button:focus,.fl-google.fl-auto-dark .fl-action-button:hover,body.fl-dark .fl-google .fl-action-button:focus,body.fl-dark .fl-google .fl-action-button:hover,html.fl-dark .fl-google .fl-action-button:focus,html.fl-dark .fl-google .fl-action-button:hover{background-color:hsla(0,0%,100%,.08)}
 .fl-ios{--ios-bg-light:#fff;--ios-bg-dark:#1e1e1e;--ios-text-light:#000;--ios-text-secondary-light:#6e6e6e;--ios-text-dark:#fff;--ios-text-secondary-dark:#a8a8a8;--ios-border-radius:13px;--ios-shadow:0 2px 12px rgba(0,0,0,.15);--ios-shadow-dark:0 2px 12px rgba(0,0,0,.35);--ios-icon-size:18px;--ios-blur:30px;--ios-success:#34c759;--ios-info:#007aff;--ios-warning:#ff9500;--ios-error:#ff3b30;--ios-animation-duration:0.4s}@keyframes iosSlideIn{0%{opacity:0;transform:translateY(-15px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes iosExpand{0%{max-height:0;opacity:0}to{max-height:100px;opacity:1}}.fl-ios{animation:iosSlideIn var(--ios-animation-duration) cubic-bezier(.23,1,.32,1);font-family:-apple-system,BlinkMacSystemFont,San Francisco,Helvetica Neue,Helvetica,Arial,sans-serif;margin:10px 0;position:relative;will-change:transform,opacity}.fl-ios .fl-ios-notification{backdrop-filter:blur(var(--ios-blur));-webkit-backdrop-filter:blur(var(--ios-blur));background-color:var(--ios-bg-light);border-radius:var(--ios-border-radius);box-shadow:var(--ios-shadow);color:var(--ios-text-light);padding:12px 15px;position:relative}.fl-ios .fl-header{align-items:center;display:flex;margin-bottom:8px;padding-right:20px}.fl-ios .fl-app-icon{align-items:center;background-color:currentColor;border-radius:5px;display:flex;flex-shrink:0;height:22px;justify-content:center;margin-right:8px;width:22px}.fl-ios .fl-icon-svg{color:#fff;height:14px;width:14px}.fl-ios .fl-app-info{align-items:baseline;display:flex;flex:1;justify-content:space-between}.fl-ios .fl-app-name{font-size:.85rem;font-weight:600}.fl-ios .fl-time{color:var(--ios-text-secondary-light);flex-shrink:0;font-size:.75rem;margin-left:5px}.fl-ios .fl-content{animation:iosExpand .3s forwards;animation-delay:.1s;overflow:hidden}.fl-ios .fl-message{font-size:.95rem;line-height:1.3;margin:0;padding-right:15px}.fl-ios .fl-close{align-items:center;background-color:rgba(0,0,0,.1);border:none;border-radius:50%;color:var(--ios-text-light);cursor:pointer;display:flex;font-size:14px;height:18px;justify-content:center;line-height:1;opacity:.7;padding:0;position:absolute;right:12px;top:10px;transition:opacity .2s;width:18px}.fl-ios .fl-close:focus,.fl-ios .fl-close:hover{opacity:1}.fl-ios.fl-success .fl-app-icon{color:var(--ios-success)}.fl-ios.fl-info .fl-app-icon{color:var(--ios-info)}.fl-ios.fl-warning .fl-app-icon{color:var(--ios-warning)}.fl-ios.fl-error .fl-app-icon{color:var(--ios-error)}.fl-ios.fl-rtl{direction:rtl}.fl-ios.fl-rtl .fl-header{padding-left:20px;padding-right:0}.fl-ios.fl-rtl .fl-app-icon{margin-left:8px;margin-right:0}.fl-ios.fl-rtl .fl-time{margin-left:0;margin-right:5px}.fl-ios.fl-rtl .fl-message{padding-left:15px;padding-right:0}.fl-ios.fl-rtl .fl-close{left:12px;right:auto}@media (prefers-reduced-motion:reduce){.fl-ios{animation:none}.fl-ios .fl-content{animation:none;max-height:none;opacity:1}}@media screen and (max-width:480px){.fl-ios{width:100%}}.fl-ios.fl-auto-dark .fl-ios-notification,body.fl-dark .fl-ios .fl-ios-notification,html.fl-dark .fl-ios .fl-ios-notification{background-color:var(--ios-bg-dark);box-shadow:var(--ios-shadow-dark);color:var(--ios-text-dark)}.fl-ios.fl-auto-dark .fl-time,body.fl-dark .fl-ios .fl-time,html.fl-dark .fl-ios .fl-time{color:var(--ios-text-secondary-dark)}.fl-ios.fl-auto-dark .fl-close,body.fl-dark .fl-ios .fl-close,html.fl-dark .fl-ios .fl-close{background-color:hsla(0,0%,100%,.2);color:var(--ios-text-dark)}
 .fl-jade{--jade-text-light:#5f6c7b;--jade-text-dark:#e2e8f0;--jade-shadow:0 8px 24px hsla(210,8%,62%,.1);--jade-shadow-dark:0 8px 24px rgba(0,0,0,.2);--jade-border-radius:4px;--jade-transition:0.3s cubic-bezier(0.4,0,0.2,1);--jade-success-bg:#f0fdf4;--jade-success-color:#16a34a;--jade-info-bg:#eff6ff;--jade-info-color:#3b82f6;--jade-warning-bg:#fffbeb;--jade-warning-color:#f59e0b;--jade-error-bg:#fef2f2;--jade-error-color:#dc2626;--jade-success-bg-dark:rgba(22,163,74,.15);--jade-info-bg-dark:rgba(59,130,246,.15);--jade-warning-bg-dark:rgba(245,158,11,.15);--jade-error-bg-dark:rgba(220,38,38,.15)}@keyframes jadeIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.fl-jade{animation:jadeIn .4s var(--jade-transition);border:1px solid transparent;border-radius:var(--jade-border-radius) var(--jade-border-radius) 0 0;box-shadow:var(--jade-shadow);font-family:var(--fl-font),serif;margin:.5rem 0;overflow:hidden;padding:1rem 1.25rem;position:relative;will-change:transform,opacity}.fl-jade .fl-content{align-items:center;display:flex}.fl-jade .fl-message{flex:1;font-size:.875rem;font-weight:500;line-height:1.5;padding-right:.75rem}.fl-jade .fl-close{align-items:center;background:none;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;font-size:1.125rem;height:1.875rem;justify-content:center;opacity:.6;padding:.375rem;transition:all var(--jade-transition);width:1.875rem}.fl-jade .fl-close:focus,.fl-jade .fl-close:hover{background-color:rgba(0,0,0,.05);opacity:1}.fl-jade .fl-progress-bar{border-radius:0 0 var(--jade-border-radius) var(--jade-border-radius);bottom:0;height:3px;left:0;opacity:.7;overflow:hidden;position:absolute;right:0}.fl-jade .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-jade.fl-success{background-color:var(--jade-success-bg);border-color:rgba(22,163,74,.1)}.fl-jade.fl-success,.fl-jade.fl-success .fl-close{color:var(--jade-success-color)}.fl-jade.fl-success .fl-close:focus,.fl-jade.fl-success .fl-close:hover{background-color:rgba(22,163,74,.1)}.fl-jade.fl-success .fl-progress-bar .fl-progress{background-color:var(--jade-success-color)}.fl-jade.fl-info{background-color:var(--jade-info-bg);border-color:rgba(59,130,246,.1)}.fl-jade.fl-info,.fl-jade.fl-info .fl-close{color:var(--jade-info-color)}.fl-jade.fl-info .fl-close:focus,.fl-jade.fl-info .fl-close:hover{background-color:rgba(59,130,246,.1)}.fl-jade.fl-info .fl-progress-bar .fl-progress{background-color:var(--jade-info-color)}.fl-jade.fl-warning{background-color:var(--jade-warning-bg);border-color:rgba(245,158,11,.1)}.fl-jade.fl-warning,.fl-jade.fl-warning .fl-close{color:var(--jade-warning-color)}.fl-jade.fl-warning .fl-close:focus,.fl-jade.fl-warning .fl-close:hover{background-color:rgba(245,158,11,.1)}.fl-jade.fl-warning .fl-progress-bar .fl-progress{background-color:var(--jade-warning-color)}.fl-jade.fl-error{background-color:var(--jade-error-bg);border-color:rgba(220,38,38,.1)}.fl-jade.fl-error,.fl-jade.fl-error .fl-close{color:var(--jade-error-color)}.fl-jade.fl-error .fl-close:focus,.fl-jade.fl-error .fl-close:hover{background-color:rgba(220,38,38,.1)}.fl-jade.fl-error .fl-progress-bar .fl-progress{background-color:var(--jade-error-color)}.fl-jade.fl-rtl{direction:rtl}.fl-jade.fl-rtl .fl-message{padding-left:.75rem;padding-right:0}.fl-jade.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-jade{animation:none}}.fl-jade.fl-auto-dark,body.fl-dark .fl-jade,html.fl-dark .fl-jade{box-shadow:var(--jade-shadow-dark);color:var(--jade-text-dark)}.fl-jade.fl-auto-dark.fl-success,body.fl-dark .fl-jade.fl-success,html.fl-dark .fl-jade.fl-success{background-color:var(--jade-success-bg-dark);border-color:rgba(22,163,74,.2)}.fl-jade.fl-auto-dark.fl-info,body.fl-dark .fl-jade.fl-info,html.fl-dark .fl-jade.fl-info{background-color:var(--jade-info-bg-dark);border-color:rgba(59,130,246,.2)}.fl-jade.fl-auto-dark.fl-warning,body.fl-dark .fl-jade.fl-warning,html.fl-dark .fl-jade.fl-warning{background-color:var(--jade-warning-bg-dark);border-color:rgba(245,158,11,.2)}.fl-jade.fl-auto-dark.fl-error,body.fl-dark .fl-jade.fl-error,html.fl-dark .fl-jade.fl-error{background-color:var(--jade-error-bg-dark);border-color:rgba(220,38,38,.2)}.fl-jade.fl-auto-dark .fl-close:focus,.fl-jade.fl-auto-dark .fl-close:hover,body.fl-dark .fl-jade .fl-close:focus,body.fl-dark .fl-jade .fl-close:hover,html.fl-dark .fl-jade .fl-close:focus,html.fl-dark .fl-jade .fl-close:hover{background-color:hsla(0,0%,100%,.1)}
diff --git a/src/Prime/Resources/dist/flasher.min.js b/src/Prime/Resources/dist/flasher.min.js
index c9c3adc6..8b580d48 100644
--- a/src/Prime/Resources/dist/flasher.min.js
+++ b/src/Prime/Resources/dist/flasher.min.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).flasher=t()}(this,(function(){"use strict";function e(e,t,s,n){return new(s||(s=Promise))((function(r,o){function i(e){try{a(n.next(e))}catch(e){o(e)}}function l(e){try{a(n.throw(e))}catch(e){o(e)}}function a(e){var t;e.done?r(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(i,l)}a((n=n.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{success(e,t,s){this.flash("success",e,t,s)}error(e,t,s){this.flash("error",e,t,s)}info(e,t,s){this.flash("info",e,t,s)}warning(e,t,s){this.flash("warning",e,t,s)}flash(e,t,s,n){let r,o,i,l={};if("object"==typeof e?(l=Object.assign({},e),r=l.type,o=l.message,i=l.title,delete l.type,delete l.message,delete l.title):"object"==typeof t?(l=Object.assign({},t),r=e,o=l.message,i=l.title,delete l.message,delete l.title):(r=e,o=t,null==s?(i=void 0,l=n||{}):"string"==typeof s?(i=s,l=n||{}):"object"==typeof s&&(l=Object.assign({},s),"title"in l?(i=l.title,delete l.title):i=void 0,n&&"object"==typeof n&&(l=Object.assign(Object.assign({},l),n)))),!r)throw new Error("Type is required for notifications");if(null==o)throw new Error("Message is required for notifications");null==i&&(i=r.charAt(0).toUpperCase()+r.slice(1));const a={type:r,message:o,title:i,options:l,metadata:{plugin:""}};this.renderOptions({}),this.renderEnvelopes([a])}}class s extends t{constructor(e){if(super(),this.options={timeout:null,timeouts:{success:1e4,info:1e4,error:1e4,warning:1e4},fps:30,position:"top-right",direction:"top",rtl:!1,style:{},escapeHtml:!1},!e)throw new Error("Theme is required");if("function"!=typeof e.render)throw new TypeError("Theme must have a render function");this.theme=e}renderEnvelopes(e){if(!(null==e?void 0:e.length))return;const t=()=>{e.forEach((e=>{var t,s,n,r;try{const o=null!==(s=null!==(t=this.options.timeout)&&void 0!==t?t:this.options.timeouts[e.type])&&void 0!==s?s:1e4,i=Object.assign(Object.assign(Object.assign({},this.options),e.options),{timeout:this.normalizeTimeout(null!==(n=e.options.timeout)&&void 0!==n?n:o),escapeHtml:null!==(r=e.options.escapeHtml)&&void 0!==r?r:this.options.escapeHtml}),l=this.createContainer(i),a={direction:i.direction,timeout:Number(i.timeout||0),fps:i.fps,rtl:i.rtl,escapeHtml:i.escapeHtml};this.addToContainer(l,e,a)}catch(t){console.error("PHPFlasher: Error rendering envelope",t,e)}}))};if("loading"===document.readyState){const e=()=>{document.removeEventListener("DOMContentLoaded",e),t()};document.addEventListener("DOMContentLoaded",e)}else t()}renderOptions(e){e&&(this.options=Object.assign(Object.assign({},this.options),e))}createContainer(e){let t=document.querySelector(`.fl-wrapper[data-position="${e.position}"]`);return t||(t=document.createElement("div"),t.className="fl-wrapper",t.dataset.position=e.position,Object.entries(e.style).forEach((([e,s])=>{if(null!=s){const n=e.replace(/([A-Z])/g,"-$1").toLowerCase();t.style.setProperty(n,String(s))}})),document.body.appendChild(t)),t.dataset.turboTemporary="",t}addToContainer(e,t,s){s.escapeHtml&&(t.title=this.escapeHtml(t.title),t.message=this.escapeHtml(t.message));const n=this.stringToHTML(this.theme.render(t));n.classList.add("fl-container"),s.rtl&&n.classList.add("fl-rtl"),"bottom"===s.direction?e.append(n):e.prepend(n),requestAnimationFrame((()=>n.classList.add("fl-show")));const r=n.querySelector(".fl-close");if(r&&r.addEventListener("click",(e=>{e.stopPropagation(),this.removeNotification(n)})),n.addEventListener("click",(e=>{e.target.closest(".fl-close")||this.dispatchClickEvents(t)})),s.timeout>0)this.addTimer(n,s);else{n.classList.add("fl-sticky");const e=n.querySelector(".fl-progress-bar");if(e){const t=document.createElement("span");t.classList.add("fl-progress","fl-sticky-progress"),t.style.width="100%",e.append(t)}}}normalizeTimeout(e){return!1===e||"number"==typeof e&&e<0||null==e?0:Number(e)||0}addTimer(e,{timeout:t,fps:s}){if(t<=0)return;const n=1e3/s;let r,o=0;const i=()=>{o+=n;const s=e.querySelector(".fl-progress-bar");if(s){let e=s.querySelector(".fl-progress");e||(e=document.createElement("span"),e.classList.add("fl-progress"),s.append(e));const n=100*(1-o/t);e.style.width=`${Math.max(0,n)}%`}o>=t&&(clearInterval(r),this.removeNotification(e))};r=window.setInterval(i,n);const l=()=>{clearInterval(r),r=window.setInterval(i,n)},a=()=>clearInterval(r);e.addEventListener("mouseout",l),e.addEventListener("mouseover",a),e._flasherCleanup=()=>{clearInterval(r),e.removeEventListener("mouseout",l),e.removeEventListener("mouseover",a)}}removeNotification(e){e&&(e._flasherCleanup&&(e._flasherCleanup(),delete e._flasherCleanup),e.classList.remove("fl-show"),e.ontransitionend=()=>{const t=e.parentElement;e.remove(),t&&!t.hasChildNodes()&&t.remove()})}stringToHTML(e){const t=document.createElement("template");t.innerHTML=e.trim();const s=t.content.firstElementChild;if(!s)throw new Error("PHPFlasher: Invalid HTML template - no element found");return s}escapeHtml(e){if(null==e)return"";const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","`":"&#96;","=":"&#61;","/":"&#47;"};return e.replace(/[&<>"'`=/]/g,(e=>t[e]||e))}dispatchClickEvents(e){const t={envelope:e};window.dispatchEvent(new CustomEvent("flasher:theme:click",{detail:t}));const s=this.getThemeName(e);s&&window.dispatchEvent(new CustomEvent(`flasher:theme:${s}:click`,{detail:t}))}getThemeName(e){var t;const s=(null===(t=e.metadata)||void 0===t?void 0:t.plugin)||"";return s.startsWith("theme.")?s.replace("theme.",""):"flasher"===s?"flasher":s}}const n=new class extends t{constructor(){super(...arguments),this.defaultPlugin="flasher",this.plugins=new Map,this.themes=new Map,this.loadedAssets=new Set}render(t){return e(this,void 0,void 0,(function*(){const e=this.resolveResponse(t);try{yield this.addAssets([{urls:e.styles,nonce:e.context.csp_style_nonce,type:"style"},{urls:e.scripts,nonce:e.context.csp_script_nonce,type:"script"}]),this.renderOptions(e.options),this.renderEnvelopes(e.envelopes)}catch(e){console.error("PHPFlasher: Error rendering notifications",e)}}))}renderEnvelopes(e){if(!(null==e?void 0:e.length))return;const t={};e.forEach((e=>{const s=this.resolvePluginAlias(e.metadata.plugin);t[s]=t[s]||[],t[s].push(e)})),Object.entries(t).forEach((([e,t])=>{try{this.use(e).renderEnvelopes(t)}catch(t){console.error(`PHPFlasher: Error rendering envelopes for plugin "${e}"`,t)}}))}renderOptions(e){e&&Object.entries(e).forEach((([e,t])=>{try{this.use(e).renderOptions(t)}catch(t){console.error(`PHPFlasher: Error applying options for plugin "${e}"`,t)}}))}addPlugin(e,t){if(!e||!t)throw new Error("Both plugin name and instance are required");this.plugins.set(e,t)}addTheme(e,t){if(!e||!t)throw new Error("Both theme name and definition are required");this.themes.set(e,t)}use(e){const t=this.resolvePluginAlias(e);this.resolvePlugin(t);const s=this.plugins.get(t);if(!s)throw new Error(`Unable to resolve "${t}" plugin, did you forget to register it?`);return s}create(e){return this.use(e)}resolveResponse(e){const t=Object.assign({envelopes:[],options:{},scripts:[],styles:[],context:{}},e);return Object.entries(t.options).forEach((([e,s])=>{t.options[e]=this.resolveOptions(s)})),t.context.csp_style_nonce=t.context.csp_style_nonce||"",t.context.csp_script_nonce=t.context.csp_script_nonce||"",t.envelopes.forEach((e=>{e.metadata=e.metadata||{},e.metadata.plugin=this.resolvePluginAlias(e.metadata.plugin),this.addThemeStyles(t,e.metadata.plugin),e.options=this.resolveOptions(e.options),e.context=t.context})),t}resolveOptions(e){if(!e)return{};const t=Object.assign({},e);return Object.entries(t).forEach((([e,s])=>{t[e]=this.resolveFunction(s)})),t}resolveFunction(e){var t,s,n,r;if("string"!=typeof e)return e;const o=e.match(/^function\s*(\w*)\s*\(([^)]*)\)\s*\{([\s\S]*)\}$/),i=e.match(/^\s*(\(([^)]*)\)|[^=]+)\s*=>\s*([\s\S]+)$/);if(!o&&!i)return e;let l,a;o?(l=null!==(s=null===(t=o[2])||void 0===t?void 0:t.split(",").map((e=>e.trim())).filter(Boolean))&&void 0!==s?s:[],a=o[3].trim()):(l=null!==(r=null===(n=i[2])||void 0===n?void 0:n.split(",").map((e=>e.trim())).filter(Boolean))&&void 0!==r?r:[],a=i[3].trim(),a=a.startsWith("{")?a.slice(1,-1).trim():`return ${a};`);try{return new Function(...l,a)}catch(t){return console.error("PHPFlasher: Error converting string to function:",t),e}}resolvePlugin(e){if(this.plugins.get(e)||!e.includes("theme."))return;const t=e.replace("theme.",""),n=this.themes.get(t);n&&this.addPlugin(e,new s(n))}resolvePluginAlias(e){return"flasher"===(e=e||this.defaultPlugin)?"theme.flasher":e}addAssets(t){return e(this,void 0,void 0,(function*(){try{const e=t.filter((e=>"style"===e.type)),s=[];for(const{urls:t,nonce:n,type:r}of e)if(null==t?void 0:t.length)for(const e of t)e&&!this.loadedAssets.has(e)&&(s.push(this.loadAsset(e,n,r)),this.loadedAssets.add(e));yield Promise.all(s);const n=t.filter((e=>"script"===e.type));for(const{urls:e,nonce:t,type:s}of n)if(null==e?void 0:e.length)for(const n of e)n&&!this.loadedAssets.has(n)&&(yield this.loadAsset(n,t,s),this.loadedAssets.add(n))}catch(e){console.error("PHPFlasher: Error loading assets",e)}}))}loadAsset(e,t,s){const n="style"===s?`link[href="${e}"]`:`script[src="${e}"]`;return document.querySelector(n)?Promise.resolve():new Promise(((n,r)=>{const o=document.createElement("style"===s?"link":"script");"style"===s?(o.rel="stylesheet",o.href=e):(o.type="text/javascript",o.src=e),t&&o.setAttribute("nonce",t),o.onload=()=>n(),o.onerror=()=>r(new Error(`Failed to load ${e}`)),document.head.appendChild(o)}))}addThemeStyles(e,t){if("flasher"!==t&&!t.includes("theme."))return;const s=t.replace("theme.",""),n=this.themes.get(s);if(!(null==n?void 0:n.styles))return;const r=Array.isArray(n.styles)?n.styles:[n.styles];e.styles=Array.from(new Set([...e.styles,...r]))}};return n.addTheme("flasher",{render:e=>{const{type:t,title:s,message:n}=e,r="error"===t||"warning"===t,o=r?"alert":"status",i=r?"assertive":"polite",l=s||t.charAt(0).toUpperCase()+t.slice(1);return`\n            <div class="fl-flasher fl-${t}" role="${o}" aria-live="${i}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-icon"></div>\n                    <div>\n                        <strong class="fl-title">${l}</strong>\n                        <span class="fl-message">${n}</span>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${t} message">&times;</button>\n                </div>\n                <span class="fl-progress-bar">\n                    <span class="fl-progress"></span>\n                </span>\n            </div>`}}),"undefined"!=typeof window&&(window.flasher=n),n}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).flasher=t()}(this,(function(){"use strict";function e(e,t,s,n){return new(s||(s=Promise))((function(r,o){function i(e){try{a(n.next(e))}catch(e){o(e)}}function l(e){try{a(n.throw(e))}catch(e){o(e)}}function a(e){var t;e.done?r(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(i,l)}a((n=n.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{success(e,t,s){this.flash("success",e,t,s)}error(e,t,s){this.flash("error",e,t,s)}info(e,t,s){this.flash("info",e,t,s)}warning(e,t,s){this.flash("warning",e,t,s)}flash(e,t,s,n){let r,o,i,l={};if("object"==typeof e?(l=Object.assign({},e),r=l.type,o=l.message,i=l.title,delete l.type,delete l.message,delete l.title):"object"==typeof t?(l=Object.assign({},t),r=e,o=l.message,i=l.title,delete l.message,delete l.title):(r=e,o=t,null==s?(i=void 0,l=n||{}):"string"==typeof s?(i=s,l=n||{}):"object"==typeof s&&(l=Object.assign({},s),"title"in l?(i=l.title,delete l.title):i=void 0,n&&"object"==typeof n&&(l=Object.assign(Object.assign({},l),n)))),!r)throw new Error("Type is required for notifications");if(null==o)throw new Error("Message is required for notifications");null==i&&(i=r.charAt(0).toUpperCase()+r.slice(1));const a={type:r,message:o,title:i,options:l,metadata:{plugin:""}};this.renderOptions({}),this.renderEnvelopes([a])}}class s extends t{constructor(e){if(super(),this.options={timeout:null,timeouts:{success:1e4,info:1e4,error:1e4,warning:1e4},fps:30,position:"top-right",direction:"top",rtl:!1,style:{},escapeHtml:!1},!e)throw new Error("Theme is required");if("function"!=typeof e.render)throw new TypeError("Theme must have a render function");this.theme=e}renderEnvelopes(e){if(!(null==e?void 0:e.length))return;const t=()=>{e.forEach((e=>{var t,s,n,r;try{const o=null!==(s=null!==(t=this.options.timeout)&&void 0!==t?t:this.options.timeouts[e.type])&&void 0!==s?s:1e4,i=Object.assign(Object.assign(Object.assign({},this.options),e.options),{timeout:this.normalizeTimeout(null!==(n=e.options.timeout)&&void 0!==n?n:o),escapeHtml:null!==(r=e.options.escapeHtml)&&void 0!==r?r:this.options.escapeHtml}),l=this.createContainer(i),a={direction:i.direction,timeout:Number(i.timeout||0),fps:i.fps,rtl:i.rtl,escapeHtml:i.escapeHtml};this.addToContainer(l,e,a)}catch(t){console.error("PHPFlasher: Error rendering envelope",t,e)}}))};if("loading"===document.readyState){const e=()=>{document.removeEventListener("DOMContentLoaded",e),t()};document.addEventListener("DOMContentLoaded",e)}else t()}renderOptions(e){e&&(this.options=Object.assign(Object.assign({},this.options),e))}createContainer(e){let t=document.querySelector(`.fl-wrapper[data-position="${e.position}"]`);return t||(t=document.createElement("div"),t.className="fl-wrapper",t.dataset.position=e.position,Object.entries(e.style).forEach((([e,s])=>{if(null!=s){const n=e.replace(/([A-Z])/g,"-$1").toLowerCase();t.style.setProperty(n,String(s))}})),document.body.appendChild(t)),t.dataset.turboTemporary="",t}addToContainer(e,t,s){s.escapeHtml&&(t.title=this.escapeHtml(t.title),t.message=this.escapeHtml(t.message));const n=this.stringToHTML(this.theme.render(t));n.classList.add("fl-container"),s.rtl&&n.classList.add("fl-rtl"),"bottom"===s.direction?e.append(n):e.prepend(n),requestAnimationFrame((()=>n.classList.add("fl-show")));const r=n.querySelector(".fl-close");if(r&&r.addEventListener("click",(e=>{e.stopPropagation(),this.removeNotification(n)})),n.addEventListener("click",(e=>{e.target.closest(".fl-close")||this.dispatchClickEvents(t)})),s.timeout>0)this.addTimer(n,s);else{n.classList.add("fl-sticky");const e=n.querySelector(".fl-progress-bar");if(e){const t=document.createElement("span");t.classList.add("fl-progress","fl-sticky-progress"),t.style.width="100%",e.append(t)}}}normalizeTimeout(e){return!1===e||"number"==typeof e&&e<0||null==e?0:Number(e)||0}addTimer(e,{timeout:t,fps:s}){if(t<=0)return;const n=1e3/s;let r,o=0;const i=()=>{o+=n;const s=e.querySelector(".fl-progress-bar");if(s){let e=s.querySelector(".fl-progress");e||(e=document.createElement("span"),e.classList.add("fl-progress"),s.append(e));const n=100*(1-o/t);e.style.width=`${Math.max(0,n)}%`}o>=t&&(clearInterval(r),this.removeNotification(e))};r=window.setInterval(i,n);const l=()=>{clearInterval(r),r=window.setInterval(i,n)},a=()=>clearInterval(r);e.addEventListener("mouseout",l),e.addEventListener("mouseover",a),e._flasherCleanup=()=>{clearInterval(r),e.removeEventListener("mouseout",l),e.removeEventListener("mouseover",a)}}removeNotification(e){e&&(e._flasherCleanup&&(e._flasherCleanup(),delete e._flasherCleanup),e.classList.remove("fl-show"),e.ontransitionend=()=>{const t=e.parentElement;e.remove(),t&&!t.hasChildNodes()&&t.remove()})}stringToHTML(e){const t=document.createElement("template");t.innerHTML=e.trim();const s=t.content.firstElementChild;if(!s)throw new Error("PHPFlasher: Invalid HTML template - no element found");return s}escapeHtml(e){if(null==e)return"";const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","`":"&#96;","=":"&#61;","/":"&#47;"};return e.replace(/[&<>"'`=/]/g,(e=>t[e]||e))}dispatchClickEvents(e){const t={envelope:e};window.dispatchEvent(new CustomEvent("flasher:theme:click",{detail:t}));const s=this.getThemeName(e);s&&window.dispatchEvent(new CustomEvent(`flasher:theme:${s}:click`,{detail:t}))}getThemeName(e){var t;const s=(null===(t=e.metadata)||void 0===t?void 0:t.plugin)||"";return s.startsWith("theme.")?s.replace("theme.",""):"flasher"===s?"flasher":s}}const n="fl-content",r="fl-message",o="fl-title",i="fl-icon",l="fl-close",a="fl-progress-bar",c="fl-progress",d=e=>`fl-${e}`,u=e=>`fl-${e}`,p={success:"Success",error:"Error",warning:"Warning",info:"Information"};const h={render:e=>{const{type:t,title:s,message:h}=e,f=function(e,t){return e||p[t]||function(e){return e.charAt(0).toUpperCase()+e.slice(1)}(t)}(s,t);return`\n            <div class="${u("flasher")} ${d(t)}" ${function(e){const t=function(e){const t="error"===e||"warning"===e;return{role:t?"alert":"status",ariaLive:t?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${t.role}" aria-live="${t.ariaLive}" aria-atomic="${t.ariaAtomic}"`}(t)}>\n                <div class="${n}">\n                    <div class="${i}"></div>\n                    <div>\n                        <strong class="${o}">${f}</strong>\n                        <span class="${r}">${h}</span>\n                    </div>\n                    <button class="${l}" ${function(e){return`aria-label="Close ${e} message"`}(t)}>&times;</button>\n                </div>\n                <span class="${a}">\n                    <span class="${c}"></span>\n                </span>\n            </div>`}},f=new class extends t{constructor(){super(...arguments),this.defaultPlugin="flasher",this.plugins=new Map,this.themes=new Map,this.loadedAssets=new Set}render(t){return e(this,void 0,void 0,(function*(){const e=this.resolveResponse(t);try{yield this.addAssets([{urls:e.styles,nonce:e.context.csp_style_nonce,type:"style"},{urls:e.scripts,nonce:e.context.csp_script_nonce,type:"script"}]),this.renderOptions(e.options),this.renderEnvelopes(e.envelopes)}catch(e){console.error("PHPFlasher: Error rendering notifications",e)}}))}renderEnvelopes(e){if(!(null==e?void 0:e.length))return;const t={};e.forEach((e=>{const s=this.resolvePluginAlias(e.metadata.plugin);t[s]=t[s]||[],t[s].push(e)})),Object.entries(t).forEach((([e,t])=>{try{this.use(e).renderEnvelopes(t)}catch(t){console.error(`PHPFlasher: Error rendering envelopes for plugin "${e}"`,t)}}))}renderOptions(e){e&&Object.entries(e).forEach((([e,t])=>{try{this.use(e).renderOptions(t)}catch(t){console.error(`PHPFlasher: Error applying options for plugin "${e}"`,t)}}))}addPlugin(e,t){if(!e||!t)throw new Error("Both plugin name and instance are required");this.plugins.set(e,t)}addTheme(e,t){if(!e||!t)throw new Error("Both theme name and definition are required");this.themes.set(e,t)}use(e){const t=this.resolvePluginAlias(e);this.resolvePlugin(t);const s=this.plugins.get(t);if(!s)throw new Error(`Unable to resolve "${t}" plugin, did you forget to register it?`);return s}create(e){return this.use(e)}resolveResponse(e){const t=Object.assign({envelopes:[],options:{},scripts:[],styles:[],context:{}},e);return Object.entries(t.options).forEach((([e,s])=>{t.options[e]=this.resolveOptions(s)})),t.context.csp_style_nonce=t.context.csp_style_nonce||"",t.context.csp_script_nonce=t.context.csp_script_nonce||"",t.envelopes.forEach((e=>{e.metadata=e.metadata||{},e.metadata.plugin=this.resolvePluginAlias(e.metadata.plugin),this.addThemeStyles(t,e.metadata.plugin),e.options=this.resolveOptions(e.options),e.context=t.context})),t}resolveOptions(e){if(!e)return{};const t=Object.assign({},e);return Object.entries(t).forEach((([e,s])=>{t[e]=this.resolveFunction(s)})),t}resolveFunction(e){var t,s,n,r;if("string"!=typeof e)return e;const o=e.match(/^function\s*(\w*)\s*\(([^)]*)\)\s*\{([\s\S]*)\}$/),i=e.match(/^\s*(\(([^)]*)\)|[^=]+)\s*=>\s*([\s\S]+)$/);if(!o&&!i)return e;let l,a;o?(l=null!==(s=null===(t=o[2])||void 0===t?void 0:t.split(",").map((e=>e.trim())).filter(Boolean))&&void 0!==s?s:[],a=o[3].trim()):(l=null!==(r=null===(n=i[2])||void 0===n?void 0:n.split(",").map((e=>e.trim())).filter(Boolean))&&void 0!==r?r:[],a=i[3].trim(),a=a.startsWith("{")?a.slice(1,-1).trim():`return ${a};`);try{return new Function(...l,a)}catch(t){return console.error("PHPFlasher: Error converting string to function:",t),e}}resolvePlugin(e){if(this.plugins.get(e)||!e.includes("theme."))return;const t=e.replace("theme.",""),n=this.themes.get(t);n&&this.addPlugin(e,new s(n))}resolvePluginAlias(e){return"flasher"===(e=e||this.defaultPlugin)?"theme.flasher":e}addAssets(t){return e(this,void 0,void 0,(function*(){try{const e=t.filter((e=>"style"===e.type)),s=[];for(const{urls:t,nonce:n,type:r}of e)if(null==t?void 0:t.length)for(const e of t)e&&!this.loadedAssets.has(e)&&(s.push(this.loadAsset(e,n,r)),this.loadedAssets.add(e));yield Promise.all(s);const n=t.filter((e=>"script"===e.type));for(const{urls:e,nonce:t,type:s}of n)if(null==e?void 0:e.length)for(const n of e)n&&!this.loadedAssets.has(n)&&(yield this.loadAsset(n,t,s),this.loadedAssets.add(n))}catch(e){console.error("PHPFlasher: Error loading assets",e)}}))}loadAsset(e,t,s){const n="style"===s?`link[href="${e}"]`:`script[src="${e}"]`;return document.querySelector(n)?Promise.resolve():new Promise(((n,r)=>{const o=document.createElement("style"===s?"link":"script");"style"===s?(o.rel="stylesheet",o.href=e):(o.type="text/javascript",o.src=e),t&&o.setAttribute("nonce",t),o.onload=()=>n(),o.onerror=()=>r(new Error(`Failed to load ${e}`)),document.head.appendChild(o)}))}addThemeStyles(e,t){if("flasher"!==t&&!t.includes("theme."))return;const s=t.replace("theme.",""),n=this.themes.get(s);if(!(null==n?void 0:n.styles))return;const r=Array.isArray(n.styles)?n.styles:[n.styles];e.styles=Array.from(new Set([...e.styles,...r]))}};return f.addTheme("flasher",h),"undefined"!=typeof window&&(window.flasher=f),f}));
diff --git a/src/Prime/Resources/dist/themes/amazon/amazon.esm.js b/src/Prime/Resources/dist/themes/amazon/amazon.esm.js
index 49f5b5e0..c66b6b68 100644
--- a/src/Prime/Resources/dist/themes/amazon/amazon.esm.js
+++ b/src/Prime/Resources/dist/themes/amazon/amazon.esm.js
@@ -5,59 +5,105 @@
  */
 import flasher from '@flasher/flasher';
 
+const sizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+};
+const iconPaths = {
+    success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+    error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+    warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+    info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+    close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+};
+function getIcon(type, config = {}) {
+    const { size = 'md', className = '' } = config;
+    const dimension = typeof size === 'number' ? size : sizeMap[size];
+    const path = iconPaths[type];
+    if (!path) {
+        return '';
+    }
+    const classAttr = className ? ` class="${className}"` : '';
+    return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+}
+function getCloseIcon(config = {}) {
+    return getIcon('close', Object.assign({ size: 'sm' }, config));
+}
+function getTypeIcon(type, config = {}) {
+    if (type === 'success' || type === 'error' || type === 'warning' || type === 'info') {
+        return getIcon(type, config);
+    }
+    return '';
+}
+
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+const DEFAULT_TITLES = {
+    success: 'Success',
+    error: 'Error',
+    warning: 'Warning',
+    info: 'Information',
+};
+
+const AMAZON_TITLES = {
+    success: 'Success!',
+    error: 'Problem',
+    warning: 'Warning',
+    info: 'Information',
+};
 const amazonTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
-        const getAlertIcon = () => {
-            switch (type) {
-                case 'success':
-                    return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                    </svg>`;
-                case 'error':
-                    return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-                    </svg>`;
-                case 'warning':
-                    return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-                    </svg>`;
-                case 'info':
-                    return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-                    </svg>`;
-            }
-            return '';
-        };
-        const getAlertTitle = () => {
-            switch (type) {
-                case 'success': return 'Success!';
-                case 'error': return 'Problem';
-                case 'warning': return 'Warning';
-                case 'info': return 'Information';
-                default: return 'Alert';
-            }
-        };
+        const alertTitle = AMAZON_TITLES[type] || DEFAULT_TITLES[type] || 'Alert';
         return `
-            <div class="fl-amazon fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('amazon')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-amazon-alert">
                     <div class="fl-alert-content">
                         <div class="fl-icon-container">
-                            ${getAlertIcon()}
+                            ${getTypeIcon(type, { size: 'lg' })}
                         </div>
                         <div class="fl-text-content">
-                            <div class="fl-alert-title">${getAlertTitle()}</div>
+                            <div class="fl-alert-title">${alertTitle}</div>
                             <div class="fl-alert-message">${message}</div>
                         </div>
                     </div>
                     <div class="fl-alert-actions">
-                        <button class="fl-close" aria-label="Close notification">
-                            <svg viewBox="0 0 24 24" width="16" height="16">
-                                <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-                            </svg>
+                        <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${getCloseIcon()}
                         </button>
                     </div>
                 </div>
diff --git a/src/Prime/Resources/dist/themes/amazon/amazon.js b/src/Prime/Resources/dist/themes/amazon/amazon.js
index 14aa1d34..1600b757 100644
--- a/src/Prime/Resources/dist/themes/amazon/amazon.js
+++ b/src/Prime/Resources/dist/themes/amazon/amazon.js
@@ -9,59 +9,105 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    const sizeMap = {
+        sm: 16,
+        md: 20,
+        lg: 24,
+    };
+    const iconPaths = {
+        success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+        error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+        warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+        info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+        close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+    };
+    function getIcon(type, config = {}) {
+        const { size = 'md', className = '' } = config;
+        const dimension = typeof size === 'number' ? size : sizeMap[size];
+        const path = iconPaths[type];
+        if (!path) {
+            return '';
+        }
+        const classAttr = className ? ` class="${className}"` : '';
+        return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+    }
+    function getCloseIcon(config = {}) {
+        return getIcon('close', Object.assign({ size: 'sm' }, config));
+    }
+    function getTypeIcon(type, config = {}) {
+        if (type === 'success' || type === 'error' || type === 'warning' || type === 'info') {
+            return getIcon(type, config);
+        }
+        return '';
+    }
+
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+    const DEFAULT_TITLES = {
+        success: 'Success',
+        error: 'Error',
+        warning: 'Warning',
+        info: 'Information',
+    };
+
+    const AMAZON_TITLES = {
+        success: 'Success!',
+        error: 'Problem',
+        warning: 'Warning',
+        info: 'Information',
+    };
     const amazonTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
-            const getAlertIcon = () => {
-                switch (type) {
-                    case 'success':
-                        return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                    </svg>`;
-                    case 'error':
-                        return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-                    </svg>`;
-                    case 'warning':
-                        return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-                    </svg>`;
-                    case 'info':
-                        return `<svg viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-                    </svg>`;
-                }
-                return '';
-            };
-            const getAlertTitle = () => {
-                switch (type) {
-                    case 'success': return 'Success!';
-                    case 'error': return 'Problem';
-                    case 'warning': return 'Warning';
-                    case 'info': return 'Information';
-                    default: return 'Alert';
-                }
-            };
+            const alertTitle = AMAZON_TITLES[type] || DEFAULT_TITLES[type] || 'Alert';
             return `
-            <div class="fl-amazon fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('amazon')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-amazon-alert">
                     <div class="fl-alert-content">
                         <div class="fl-icon-container">
-                            ${getAlertIcon()}
+                            ${getTypeIcon(type, { size: 'lg' })}
                         </div>
                         <div class="fl-text-content">
-                            <div class="fl-alert-title">${getAlertTitle()}</div>
+                            <div class="fl-alert-title">${alertTitle}</div>
                             <div class="fl-alert-message">${message}</div>
                         </div>
                     </div>
                     <div class="fl-alert-actions">
-                        <button class="fl-close" aria-label="Close notification">
-                            <svg viewBox="0 0 24 24" width="16" height="16">
-                                <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-                            </svg>
+                        <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${getCloseIcon()}
                         </button>
                     </div>
                 </div>
diff --git a/src/Prime/Resources/dist/themes/amazon/amazon.min.js b/src/Prime/Resources/dist/themes/amazon/amazon.min.js
index da583f5d..3344ad81 100644
--- a/src/Prime/Resources/dist/themes/amazon/amazon.min.js
+++ b/src/Prime/Resources/dist/themes/amazon/amazon.min.js
@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("amazon",{render:e=>{const{type:n,message:t}=e,r="error"===n||"warning"===n;return`\n            <div class="fl-amazon fl-${n}" role="${r?"alert":"status"}" aria-live="${r?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-amazon-alert">\n                    <div class="fl-alert-content">\n                        <div class="fl-icon-container">\n                            ${(()=>{switch(n){case"success":return'<svg viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>\n                    </svg>';case"error":return'<svg viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>\n                    </svg>';case"warning":return'<svg viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>\n                    </svg>';case"info":return'<svg viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>\n                    </svg>'}return""})()}\n                        </div>\n                        <div class="fl-text-content">\n                            <div class="fl-alert-title">${(()=>{switch(n){case"success":return"Success!";case"error":return"Problem";case"warning":return"Warning";case"info":return"Information";default:return"Alert"}})()}</div>\n                            <div class="fl-alert-message">${t}</div>\n                        </div>\n                    </div>\n                    <div class="fl-alert-actions">\n                        <button class="fl-close" aria-label="Close notification">\n                            <svg viewBox="0 0 24 24" width="16" height="16">\n                                <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>\n                            </svg>\n                        </button>\n                    </div>\n                </div>\n            </div>`}})}));
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).flasher)}(this,(function(n){"use strict";const e={sm:16,md:20,lg:24},s={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function r(n,r={}){const{size:i="md",className:t=""}=r,a="number"==typeof i?i:e[i],o=s[n];if(!o)return"";return`<svg${t?` class="${t}"`:""} viewBox="0 0 24 24" width="${a}" height="${a}" aria-hidden="true"><path fill="currentColor" d="${o}"/></svg>`}const i="fl-close",t=n=>`fl-${n}`,a=n=>`fl-${n}`,o={success:"Success",error:"Error",warning:"Warning",info:"Information"},l={success:"Success!",error:"Problem",warning:"Warning",info:"Information"},c={render:n=>{const{type:e,message:s}=n,c=l[e]||o[e]||"Alert";return`\n            <div class="${a("amazon")} ${t(e)}" ${function(n){const e=function(n){const e="error"===n||"warning"===n;return{role:e?"alert":"status",ariaLive:e?"assertive":"polite",ariaAtomic:"true"}}(n);return`role="${e.role}" aria-live="${e.ariaLive}" aria-atomic="${e.ariaAtomic}"`}(e)}>\n                <div class="fl-amazon-alert">\n                    <div class="fl-alert-content">\n                        <div class="fl-icon-container">\n                            ${function(n,e={}){return"success"===n||"error"===n||"warning"===n||"info"===n?r(n,e):""}(e,{size:"lg"})}\n                        </div>\n                        <div class="fl-text-content">\n                            <div class="fl-alert-title">${c}</div>\n                            <div class="fl-alert-message">${s}</div>\n                        </div>\n                    </div>\n                    <div class="fl-alert-actions">\n                        <button class="${i}" ${function(n){return`aria-label="Close ${n} message"`}(e)}>\n                            ${function(n={}){return r("close",Object.assign({size:"sm"},n))}()}\n                        </button>\n                    </div>\n                </div>\n            </div>`}};n.addTheme("amazon",c)}));
diff --git a/src/Prime/Resources/dist/themes/amber/amber.esm.js b/src/Prime/Resources/dist/themes/amber/amber.esm.js
index 6b0294f3..ca99cb76 100644
--- a/src/Prime/Resources/dist/themes/amber/amber.esm.js
+++ b/src/Prime/Resources/dist/themes/amber/amber.esm.js
@@ -5,23 +5,56 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
 const amberTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
         return `
-            <div class="fl-amber fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-icon"></div>
-                    <div class="fl-text">
-                        <div class="fl-message">${message}</div>
+            <div class="${CLASS_NAMES.theme('amber')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.icon}"></div>
+                    <div class="${CLASS_NAMES.text}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/amber/amber.js b/src/Prime/Resources/dist/themes/amber/amber.js
index 438b2ad7..5384cab3 100644
--- a/src/Prime/Resources/dist/themes/amber/amber.js
+++ b/src/Prime/Resources/dist/themes/amber/amber.js
@@ -9,23 +9,56 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
     const amberTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
             return `
-            <div class="fl-amber fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-icon"></div>
-                    <div class="fl-text">
-                        <div class="fl-message">${message}</div>
+            <div class="${CLASS_NAMES.theme('amber')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.icon}"></div>
+                    <div class="${CLASS_NAMES.text}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/amber/amber.min.js b/src/Prime/Resources/dist/themes/amber/amber.min.js
index 159d1d24..9263f063 100644
--- a/src/Prime/Resources/dist/themes/amber/amber.min.js
+++ b/src/Prime/Resources/dist/themes/amber/amber.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("amber",{render:e=>{const{type:s,message:i}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-amber fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-icon"></div>\n                    <div class="fl-text">\n                        <div class="fl-message">${i}</div>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s="fl-content",i="fl-message",n="fl-text",a="fl-icon",r="fl-close",t="fl-progress-bar",l="fl-progress",o=e=>`fl-${e}`,f=e=>`fl-${e}`,c={render:e=>{const{type:c,message:d}=e;return`\n            <div class="${f("amber")} ${o(c)}" ${function(e){const s=function(e){const s="error"===e||"warning"===e;return{role:s?"alert":"status",ariaLive:s?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${s.role}" aria-live="${s.ariaLive}" aria-atomic="${s.ariaAtomic}"`}(c)}>\n                <div class="${s}">\n                    <div class="${a}"></div>\n                    <div class="${n}">\n                        <div class="${i}">${d}</div>\n                    </div>\n                    <button class="${r}" ${function(e){return`aria-label="Close ${e} message"`}(c)}>×</button>\n                </div>\n                <div class="${t}">\n                    <div class="${l}"></div>\n                </div>\n            </div>`}};e.addTheme("amber",c)}));
diff --git a/src/Prime/Resources/dist/themes/aurora/aurora.esm.js b/src/Prime/Resources/dist/themes/aurora/aurora.esm.js
index 70c80851..1a684b4a 100644
--- a/src/Prime/Resources/dist/themes/aurora/aurora.esm.js
+++ b/src/Prime/Resources/dist/themes/aurora/aurora.esm.js
@@ -5,20 +5,53 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
 const auroraTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
         return `
-            <div class="fl-aurora fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('aurora')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/aurora/aurora.js b/src/Prime/Resources/dist/themes/aurora/aurora.js
index fc97f589..dce427b7 100644
--- a/src/Prime/Resources/dist/themes/aurora/aurora.js
+++ b/src/Prime/Resources/dist/themes/aurora/aurora.js
@@ -9,20 +9,53 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
     const auroraTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
             return `
-            <div class="fl-aurora fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('aurora')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/aurora/aurora.min.js b/src/Prime/Resources/dist/themes/aurora/aurora.min.js
index 27c7e9cd..0b4a2517 100644
--- a/src/Prime/Resources/dist/themes/aurora/aurora.min.js
+++ b/src/Prime/Resources/dist/themes/aurora/aurora.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("aurora",{render:e=>{const{type:s,message:a}=e,r="error"===s||"warning"===s;return`\n            <div class="fl-aurora fl-${s}" role="${r?"alert":"status"}" aria-live="${r?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-message">${a}</div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const r="fl-content",s="fl-message",a="fl-close",n="fl-progress-bar",i="fl-progress",t=e=>`fl-${e}`,o=e=>`fl-${e}`,l={render:e=>{const{type:l,message:f}=e;return`\n            <div class="${o("aurora")} ${t(l)}" ${function(e){const r=function(e){const r="error"===e||"warning"===e;return{role:r?"alert":"status",ariaLive:r?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${r.role}" aria-live="${r.ariaLive}" aria-atomic="${r.ariaAtomic}"`}(l)}>\n                <div class="${r}">\n                    <div class="${s}">${f}</div>\n                    <button class="${a}" ${function(e){return`aria-label="Close ${e} message"`}(l)}>×</button>\n                </div>\n                <div class="${n}">\n                    <div class="${i}"></div>\n                </div>\n            </div>`}};e.addTheme("aurora",l)}));
diff --git a/src/Prime/Resources/dist/themes/crystal/crystal.esm.js b/src/Prime/Resources/dist/themes/crystal/crystal.esm.js
index c02a185f..7fbd5049 100644
--- a/src/Prime/Resources/dist/themes/crystal/crystal.esm.js
+++ b/src/Prime/Resources/dist/themes/crystal/crystal.esm.js
@@ -5,22 +5,55 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
 const crystalTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
         return `
-            <div class="fl-crystal fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-text">
-                        <p class="fl-message">${message}</p>
+            <div class="${CLASS_NAMES.theme('crystal')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.text}">
+                        <p class="${CLASS_NAMES.message}">${message}</p>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/crystal/crystal.js b/src/Prime/Resources/dist/themes/crystal/crystal.js
index 000c9e04..65a07379 100644
--- a/src/Prime/Resources/dist/themes/crystal/crystal.js
+++ b/src/Prime/Resources/dist/themes/crystal/crystal.js
@@ -9,22 +9,55 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
     const crystalTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
             return `
-            <div class="fl-crystal fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-text">
-                        <p class="fl-message">${message}</p>
+            <div class="${CLASS_NAMES.theme('crystal')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.text}">
+                        <p class="${CLASS_NAMES.message}">${message}</p>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/crystal/crystal.min.js b/src/Prime/Resources/dist/themes/crystal/crystal.min.js
index ee3a1f03..9e88b721 100644
--- a/src/Prime/Resources/dist/themes/crystal/crystal.min.js
+++ b/src/Prime/Resources/dist/themes/crystal/crystal.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("crystal",{render:e=>{const{type:s,message:l}=e,a="error"===s||"warning"===s;return`\n            <div class="fl-crystal fl-${s}" role="${a?"alert":"status"}" aria-live="${a?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-text">\n                        <p class="fl-message">${l}</p>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s="fl-content",n="fl-message",r="fl-text",t="fl-close",a="fl-progress-bar",i="fl-progress",l=e=>`fl-${e}`,o=e=>`fl-${e}`,f={render:e=>{const{type:f,message:c}=e;return`\n            <div class="${o("crystal")} ${l(f)}" ${function(e){const s=function(e){const s="error"===e||"warning"===e;return{role:s?"alert":"status",ariaLive:s?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${s.role}" aria-live="${s.ariaLive}" aria-atomic="${s.ariaAtomic}"`}(f)}>\n                <div class="${s}">\n                    <div class="${r}">\n                        <p class="${n}">${c}</p>\n                    </div>\n                    <button class="${t}" ${function(e){return`aria-label="Close ${e} message"`}(f)}>×</button>\n                </div>\n                <div class="${a}">\n                    <div class="${i}"></div>\n                </div>\n            </div>`}};e.addTheme("crystal",f)}));
diff --git a/src/Prime/Resources/dist/themes/emerald/emerald.esm.js b/src/Prime/Resources/dist/themes/emerald/emerald.esm.js
index 3c7e7a7a..4acc6c81 100644
--- a/src/Prime/Resources/dist/themes/emerald/emerald.esm.js
+++ b/src/Prime/Resources/dist/themes/emerald/emerald.esm.js
@@ -5,17 +5,50 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
 const emeraldTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
         return `
-            <div class="fl-emerald fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('emerald')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/emerald/emerald.js b/src/Prime/Resources/dist/themes/emerald/emerald.js
index 2e310742..fdc05bf4 100644
--- a/src/Prime/Resources/dist/themes/emerald/emerald.js
+++ b/src/Prime/Resources/dist/themes/emerald/emerald.js
@@ -9,17 +9,50 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
     const emeraldTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
             return `
-            <div class="fl-emerald fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('emerald')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/emerald/emerald.min.js b/src/Prime/Resources/dist/themes/emerald/emerald.min.js
index eeaa76b6..28a5732f 100644
--- a/src/Prime/Resources/dist/themes/emerald/emerald.min.js
+++ b/src/Prime/Resources/dist/themes/emerald/emerald.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("emerald",{render:e=>{const{type:s,message:a}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-emerald fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-message">${a}</div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",t="fl-message",a="fl-close",i=e=>`fl-${e}`,r=e=>`fl-${e}`,s={render:e=>{const{type:s,message:l}=e;return`\n            <div class="${r("emerald")} ${i(s)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(s)}>\n                <div class="${n}">\n                    <div class="${t}">${l}</div>\n                    <button class="${a}" ${function(e){return`aria-label="Close ${e} message"`}(s)}>×</button>\n                </div>\n            </div>`}};e.addTheme("emerald",s)}));
diff --git a/src/Prime/Resources/dist/themes/facebook/facebook.esm.js b/src/Prime/Resources/dist/themes/facebook/facebook.esm.js
index a8220e09..490dc7d4 100644
--- a/src/Prime/Resources/dist/themes/facebook/facebook.esm.js
+++ b/src/Prime/Resources/dist/themes/facebook/facebook.esm.js
@@ -5,14 +5,72 @@
  */
 import flasher from '@flasher/flasher';
 
+const sizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+};
+const iconPaths = {
+    success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+    error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+    warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+    info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+    close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+};
+function getIcon(type, config = {}) {
+    const { size = 'md', className = '' } = config;
+    const dimension = typeof size === 'number' ? size : sizeMap[size];
+    const path = iconPaths[type];
+    const classAttr = className ? ` class="${className}"` : '';
+    return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+}
+function getCloseIcon(config = {}) {
+    return getIcon('close', Object.assign({ size: 'sm' }, config));
+}
+
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
+function getTimeString() {
+    const now = new Date();
+    return now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+}
 const facebookTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
-        const now = new Date();
-        const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
         const getNotificationIcon = () => {
             switch (type) {
                 case 'success':
@@ -43,25 +101,23 @@ const facebookTheme = {
             return '';
         };
         return `
-            <div class="fl-facebook fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('facebook')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-fb-notification">
                     <div class="fl-icon-container">
                         ${getNotificationIcon()}
                     </div>
-                    <div class="fl-content">
-                        <div class="fl-message">
+                    <div class="${CLASS_NAMES.content}">
+                        <div class="${CLASS_NAMES.message}">
                             ${message}
                         </div>
                         <div class="fl-meta">
-                            <span class="fl-time">${timeString}</span>
+                            <span class="fl-time">${getTimeString()}</span>
                         </div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-button fl-close" aria-label="Close ${type} message">
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="fl-button ${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
                             <div class="fl-button-icon">
-                                <svg viewBox="0 0 24 24" width="20" height="20">
-                                    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-                                </svg>
+                                ${getCloseIcon({ size: 'md' })}
                             </div>
                         </button>
                     </div>
diff --git a/src/Prime/Resources/dist/themes/facebook/facebook.js b/src/Prime/Resources/dist/themes/facebook/facebook.js
index ee18103b..c70b80dc 100644
--- a/src/Prime/Resources/dist/themes/facebook/facebook.js
+++ b/src/Prime/Resources/dist/themes/facebook/facebook.js
@@ -9,14 +9,72 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    const sizeMap = {
+        sm: 16,
+        md: 20,
+        lg: 24,
+    };
+    const iconPaths = {
+        success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+        error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+        warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+        info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+        close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+    };
+    function getIcon(type, config = {}) {
+        const { size = 'md', className = '' } = config;
+        const dimension = typeof size === 'number' ? size : sizeMap[size];
+        const path = iconPaths[type];
+        const classAttr = className ? ` class="${className}"` : '';
+        return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+    }
+    function getCloseIcon(config = {}) {
+        return getIcon('close', Object.assign({ size: 'sm' }, config));
+    }
+
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
+    function getTimeString() {
+        const now = new Date();
+        return now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+    }
     const facebookTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
-            const now = new Date();
-            const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
             const getNotificationIcon = () => {
                 switch (type) {
                     case 'success':
@@ -47,25 +105,23 @@
                 return '';
             };
             return `
-            <div class="fl-facebook fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('facebook')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-fb-notification">
                     <div class="fl-icon-container">
                         ${getNotificationIcon()}
                     </div>
-                    <div class="fl-content">
-                        <div class="fl-message">
+                    <div class="${CLASS_NAMES.content}">
+                        <div class="${CLASS_NAMES.message}">
                             ${message}
                         </div>
                         <div class="fl-meta">
-                            <span class="fl-time">${timeString}</span>
+                            <span class="fl-time">${getTimeString()}</span>
                         </div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-button fl-close" aria-label="Close ${type} message">
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="fl-button ${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
                             <div class="fl-button-icon">
-                                <svg viewBox="0 0 24 24" width="20" height="20">
-                                    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-                                </svg>
+                                ${getCloseIcon({ size: 'md' })}
                             </div>
                         </button>
                     </div>
diff --git a/src/Prime/Resources/dist/themes/facebook/facebook.min.js b/src/Prime/Resources/dist/themes/facebook/facebook.min.js
index 9d106bd9..935839d5 100644
--- a/src/Prime/Resources/dist/themes/facebook/facebook.min.js
+++ b/src/Prime/Resources/dist/themes/facebook/facebook.min.js
@@ -1 +1 @@
-!function(n,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((n="undefined"!=typeof globalThis?globalThis:n||self).flasher)}(this,(function(n){"use strict";const i={render:n=>{const{type:i,message:e}=n,s="error"===i||"warning"===i,t=s?"alert":"status",l=s?"assertive":"polite",o=(new Date).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"});return`\n            <div class="fl-facebook fl-${i}" role="${t}" aria-live="${l}" aria-atomic="true">\n                <div class="fl-fb-notification">\n                    <div class="fl-icon-container">\n                        ${(()=>{switch(i){case"success":return'<div class="fl-fb-icon fl-fb-icon-success">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>\n                        </svg>\n                    </div>';case"error":return'<div class="fl-fb-icon fl-fb-icon-error">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.5c-.69 0-1.25.56-1.25 1.25S11.31 13 12 13s1.25-.56 1.25-1.25S12.69 10.5 12 10.5zM12 9c.552 0 1-.448 1-1V7c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1z"/>\n                        </svg>\n                    </div>';case"warning":return'<div class="fl-fb-icon fl-fb-icon-warning">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.409 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72192 12.7772 2.84815 12.865 3.00017ZM11 16.0002V18.0002H13V16.0002H11ZM11 8.00017V14.0002H13V8.00017H11Z"/>\n                        </svg>\n                    </div>';case"info":return'<div class="fl-fb-icon fl-fb-icon-info">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v-2h-2v2zm0-4h2V7h-2v4z"/>\n                        </svg>\n                    </div>'}return""})()}\n                    </div>\n                    <div class="fl-content">\n                        <div class="fl-message">\n                            ${e}\n                        </div>\n                        <div class="fl-meta">\n                            <span class="fl-time">${o}</span>\n                        </div>\n                    </div>\n                    <div class="fl-actions">\n                        <button class="fl-button fl-close" aria-label="Close ${i} message">\n                            <div class="fl-button-icon">\n                                <svg viewBox="0 0 24 24" width="20" height="20">\n                                    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>\n                                </svg>\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </div>`}};n.addTheme("facebook",i)}));
+!function(n,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((n="undefined"!=typeof globalThis?globalThis:n||self).flasher)}(this,(function(n){"use strict";const i={sm:16,md:20,lg:24},e={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function s(n={}){return function(n,s={}){const{size:t="md",className:o=""}=s,r="number"==typeof t?t:i[t];return`<svg${o?` class="${o}"`:""} viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true"><path fill="currentColor" d="${e[n]}"/></svg>`}("close",Object.assign({size:"sm"},n))}const t="fl-content",o="fl-message",r="fl-actions",l="fl-close",c=n=>`fl-${n}`,a=n=>`fl-${n}`;const f={render:n=>{const{type:i,message:e}=n;return`\n            <div class="${a("facebook")} ${c(i)}" ${function(n){const i=function(n){const i="error"===n||"warning"===n;return{role:i?"alert":"status",ariaLive:i?"assertive":"polite",ariaAtomic:"true"}}(n);return`role="${i.role}" aria-live="${i.ariaLive}" aria-atomic="${i.ariaAtomic}"`}(i)}>\n                <div class="fl-fb-notification">\n                    <div class="fl-icon-container">\n                        ${(()=>{switch(i){case"success":return'<div class="fl-fb-icon fl-fb-icon-success">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>\n                        </svg>\n                    </div>';case"error":return'<div class="fl-fb-icon fl-fb-icon-error">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.5c-.69 0-1.25.56-1.25 1.25S11.31 13 12 13s1.25-.56 1.25-1.25S12.69 10.5 12 10.5zM12 9c.552 0 1-.448 1-1V7c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1z"/>\n                        </svg>\n                    </div>';case"warning":return'<div class="fl-fb-icon fl-fb-icon-warning">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.409 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72192 12.7772 2.84815 12.865 3.00017ZM11 16.0002V18.0002H13V16.0002H11ZM11 8.00017V14.0002H13V8.00017H11Z"/>\n                        </svg>\n                    </div>';case"info":return'<div class="fl-fb-icon fl-fb-icon-info">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v-2h-2v2zm0-4h2V7h-2v4z"/>\n                        </svg>\n                    </div>'}return""})()}\n                    </div>\n                    <div class="${t}">\n                        <div class="${o}">\n                            ${e}\n                        </div>\n                        <div class="fl-meta">\n                            <span class="fl-time">${(new Date).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"})}</span>\n                        </div>\n                    </div>\n                    <div class="${r}">\n                        <button class="fl-button ${l}" ${function(n){return`aria-label="Close ${n} message"`}(i)}>\n                            <div class="fl-button-icon">\n                                ${s({size:"md"})}\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </div>`}};n.addTheme("facebook",f)}));
diff --git a/src/Prime/Resources/dist/themes/flasher/flasher.esm.js b/src/Prime/Resources/dist/themes/flasher/flasher.esm.js
index c240f584..d2460394 100644
--- a/src/Prime/Resources/dist/themes/flasher/flasher.esm.js
+++ b/src/Prime/Resources/dist/themes/flasher/flasher.esm.js
@@ -5,25 +5,70 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+const DEFAULT_TITLES = {
+    success: 'Success',
+    error: 'Error',
+    warning: 'Warning',
+    info: 'Information',
+};
+function capitalizeType(type) {
+    return type.charAt(0).toUpperCase() + type.slice(1);
+}
+function getTitle(title, type) {
+    return title || DEFAULT_TITLES[type] || capitalizeType(type);
+}
+
 const flasherTheme = {
     render: (envelope) => {
         const { type, title, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
-        const displayTitle = title || type.charAt(0).toUpperCase() + type.slice(1);
+        const displayTitle = getTitle(title, type);
         return `
-            <div class="fl-flasher fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-icon"></div>
+            <div class="${CLASS_NAMES.theme('flasher')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.icon}"></div>
                     <div>
-                        <strong class="fl-title">${displayTitle}</strong>
-                        <span class="fl-message">${message}</span>
+                        <strong class="${CLASS_NAMES.title}">${displayTitle}</strong>
+                        <span class="${CLASS_NAMES.message}">${message}</span>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">&times;</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>&times;</button>
                 </div>
-                <span class="fl-progress-bar">
-                    <span class="fl-progress"></span>
+                <span class="${CLASS_NAMES.progressBar}">
+                    <span class="${CLASS_NAMES.progress}"></span>
                 </span>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/flasher/flasher.js b/src/Prime/Resources/dist/themes/flasher/flasher.js
index 4d26b3db..24d665e1 100644
--- a/src/Prime/Resources/dist/themes/flasher/flasher.js
+++ b/src/Prime/Resources/dist/themes/flasher/flasher.js
@@ -9,25 +9,70 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+    const DEFAULT_TITLES = {
+        success: 'Success',
+        error: 'Error',
+        warning: 'Warning',
+        info: 'Information',
+    };
+    function capitalizeType(type) {
+        return type.charAt(0).toUpperCase() + type.slice(1);
+    }
+    function getTitle(title, type) {
+        return title || DEFAULT_TITLES[type] || capitalizeType(type);
+    }
+
     const flasherTheme = {
         render: (envelope) => {
             const { type, title, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
-            const displayTitle = title || type.charAt(0).toUpperCase() + type.slice(1);
+            const displayTitle = getTitle(title, type);
             return `
-            <div class="fl-flasher fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-icon"></div>
+            <div class="${CLASS_NAMES.theme('flasher')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.icon}"></div>
                     <div>
-                        <strong class="fl-title">${displayTitle}</strong>
-                        <span class="fl-message">${message}</span>
+                        <strong class="${CLASS_NAMES.title}">${displayTitle}</strong>
+                        <span class="${CLASS_NAMES.message}">${message}</span>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">&times;</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>&times;</button>
                 </div>
-                <span class="fl-progress-bar">
-                    <span class="fl-progress"></span>
+                <span class="${CLASS_NAMES.progressBar}">
+                    <span class="${CLASS_NAMES.progress}"></span>
                 </span>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/flasher/flasher.min.css b/src/Prime/Resources/dist/themes/flasher/flasher.min.css
index 7dff29c9..cd5e3950 100644
--- a/src/Prime/Resources/dist/themes/flasher/flasher.min.css
+++ b/src/Prime/Resources/dist/themes/flasher/flasher.min.css
@@ -1 +1 @@
-@keyframes flasherIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}@keyframes flasherInRtl{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.fl-flasher{animation:flasherIn .3s ease-out;background-color:var(--background-color,var(--fl-bg-light));border-bottom:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:var(--text-color,var(--fl-text-light));font-family:var(--fl-font),serif;line-height:1.5;margin:.75em 0;padding:.75em;position:relative;transition:transform .2s ease;will-change:transform,opacity;word-break:break-word}.fl-flasher:hover{transform:translateY(-2px)}.fl-flasher.fl-rtl{animation:flasherInRtl .3s ease-out;border-radius:0 .375em .375em 0}.fl-flasher:not(.fl-rtl){border-radius:.375em 0 0 .375em}.fl-flasher .fl-content{align-items:center;display:flex}.fl-flasher .fl-icon{font-size:2.5em}.fl-flasher .fl-message,.fl-flasher .fl-title{display:block;line-height:1.25em;margin-left:1em;margin-right:1em}.fl-flasher.fl-rtl .fl-message,.fl-flasher.fl-rtl .fl-title{margin-left:1em;margin-right:1em}.fl-flasher .fl-title{font-size:1em;font-weight:600}.fl-flasher .fl-message{font-size:.875em;margin-top:.25em}.fl-flasher .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:1.25rem;line-height:1;opacity:.5;padding:.25rem;position:absolute;right:.75rem;top:50%;touch-action:manipulation;transform:translateY(-50%);transition:opacity .2s ease}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{opacity:1}.fl-flasher.fl-rtl .fl-content{flex-direction:row-reverse}.fl-flasher.fl-rtl .fl-close{left:.75rem;right:auto}.fl-flasher.fl-success{border-left:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success.fl-rtl{border-left:none;border-right:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success:not(.fl-rtl){border-left:.8em solid var(--success-color,var(--fl-success));border-right:none}.fl-flasher.fl-success .fl-close,.fl-flasher.fl-success .fl-title{color:var(--success-color,var(--fl-success))}.fl-flasher.fl-success .fl-close:focus,.fl-flasher.fl-success .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-info{border-left:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info.fl-rtl{border-left:none;border-right:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info:not(.fl-rtl){border-left:.8em solid var(--info-color,var(--fl-info));border-right:none}.fl-flasher.fl-info .fl-close,.fl-flasher.fl-info .fl-title{color:var(--info-color,var(--fl-info))}.fl-flasher.fl-info .fl-close:focus,.fl-flasher.fl-info .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-warning{border-left:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning.fl-rtl{border-left:none;border-right:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning:not(.fl-rtl){border-left:.8em solid var(--warning-color,var(--fl-warning));border-right:none}.fl-flasher.fl-warning .fl-close,.fl-flasher.fl-warning .fl-title{color:var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning .fl-close:focus,.fl-flasher.fl-warning .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-error{border-left:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error.fl-rtl{border-left:none;border-right:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error:not(.fl-rtl){border-left:.8em solid var(--error-color,var(--fl-error));border-right:none}.fl-flasher.fl-error .fl-close,.fl-flasher.fl-error .fl-title{color:var(--error-color,var(--fl-error))}.fl-flasher.fl-error .fl-close:focus,.fl-flasher.fl-error .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher .fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-flasher.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-flasher.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;width:100%}.fl-flasher.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-flasher.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;width:100%}.fl-flasher.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-flasher.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;width:100%}.fl-flasher.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-flasher.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;width:100%}@media (prefers-color-scheme:dark){.fl-flasher.fl-auto-dark{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}}body.fl-dark .fl-flasher,html.fl-dark .fl-flasher{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}@media (prefers-reduced-motion:reduce){.fl-flasher{animation:none}.fl-flasher:hover{transform:none}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{transform:translateY(-50%)}}
\ No newline at end of file
+@keyframes flasherIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}@keyframes flasherInRtl{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.fl-flasher{animation:flasherIn .3s ease-out;background-color:var(--background-color,var(--fl-bg-light));border-bottom:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:var(--text-color,var(--fl-text-light));font-family:var(--fl-font),serif;line-height:1.5;margin:.75em 0;padding:.75em;position:relative;transition:transform .2s ease;will-change:transform,opacity;word-break:break-word}.fl-flasher:hover{transform:translateY(-2px)}.fl-flasher.fl-rtl{animation:flasherInRtl .3s ease-out;border-radius:0 .375em .375em 0}.fl-flasher:not(.fl-rtl){border-radius:.375em 0 0 .375em}.fl-flasher .fl-content{align-items:center;display:flex}.fl-flasher .fl-icon{font-size:2.5em}.fl-flasher .fl-message,.fl-flasher .fl-title{display:block;line-height:1.25em;margin-left:1em;margin-right:1em}.fl-flasher.fl-rtl .fl-message,.fl-flasher.fl-rtl .fl-title{margin-left:1em;margin-right:1em}.fl-flasher .fl-title{font-size:1em;font-weight:600}.fl-flasher .fl-message{font-size:.875em;margin-top:.25em}.fl-flasher .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:var(--fl-font-size-xl,1.25rem);line-height:1;opacity:.5;padding:var(--fl-spacing-xs,.25rem);position:absolute;right:var(--fl-spacing-md,.75rem);top:50%;touch-action:manipulation;transform:translateY(-50%);transition:opacity var(--fl-duration-fast,.15s) ease}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{opacity:1}.fl-flasher .fl-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.fl-flasher.fl-rtl .fl-content{flex-direction:row-reverse}.fl-flasher.fl-rtl .fl-close{left:var(--fl-spacing-md,.75rem);right:auto}.fl-flasher.fl-success{border-left:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success.fl-rtl{border-left:none;border-right:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success:not(.fl-rtl){border-left:.8em solid var(--success-color,var(--fl-success));border-right:none}.fl-flasher.fl-success .fl-close,.fl-flasher.fl-success .fl-title{color:var(--success-color,var(--fl-success))}.fl-flasher.fl-success .fl-close:focus,.fl-flasher.fl-success .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-info{border-left:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info.fl-rtl{border-left:none;border-right:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info:not(.fl-rtl){border-left:.8em solid var(--info-color,var(--fl-info));border-right:none}.fl-flasher.fl-info .fl-close,.fl-flasher.fl-info .fl-title{color:var(--info-color,var(--fl-info))}.fl-flasher.fl-info .fl-close:focus,.fl-flasher.fl-info .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-warning{border-left:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning.fl-rtl{border-left:none;border-right:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning:not(.fl-rtl){border-left:.8em solid var(--warning-color,var(--fl-warning));border-right:none}.fl-flasher.fl-warning .fl-close,.fl-flasher.fl-warning .fl-title{color:var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning .fl-close:focus,.fl-flasher.fl-warning .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-error{border-left:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error.fl-rtl{border-left:none;border-right:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error:not(.fl-rtl){border-left:.8em solid var(--error-color,var(--fl-error));border-right:none}.fl-flasher.fl-error .fl-close,.fl-flasher.fl-error .fl-title{color:var(--error-color,var(--fl-error))}.fl-flasher.fl-error .fl-close:focus,.fl-flasher.fl-error .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher .fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-flasher.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-flasher.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;width:100%}.fl-flasher.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-flasher.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;width:100%}.fl-flasher.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-flasher.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;width:100%}.fl-flasher.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-flasher.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;width:100%}@media (prefers-color-scheme:dark){.fl-flasher.fl-auto-dark{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}}body.fl-dark .fl-flasher,html.fl-dark .fl-flasher{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}@media (prefers-reduced-motion:reduce){.fl-flasher{animation:none}.fl-flasher:hover{transform:none}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{transform:translateY(-50%)}}
\ No newline at end of file
diff --git a/src/Prime/Resources/dist/themes/flasher/flasher.min.js b/src/Prime/Resources/dist/themes/flasher/flasher.min.js
index 4bad8629..4f501fa5 100644
--- a/src/Prime/Resources/dist/themes/flasher/flasher.min.js
+++ b/src/Prime/Resources/dist/themes/flasher/flasher.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("flasher",{render:e=>{const{type:s,title:n,message:a}=e,l="error"===s||"warning"===s,t=l?"alert":"status",r=l?"assertive":"polite",i=n||s.charAt(0).toUpperCase()+s.slice(1);return`\n            <div class="fl-flasher fl-${s}" role="${t}" aria-live="${r}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-icon"></div>\n                    <div>\n                        <strong class="fl-title">${i}</strong>\n                        <span class="fl-message">${a}</span>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">&times;</button>\n                </div>\n                <span class="fl-progress-bar">\n                    <span class="fl-progress"></span>\n                </span>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",s="fl-message",r="fl-title",a="fl-icon",t="fl-close",i="fl-progress-bar",o="fl-progress",l=e=>`fl-${e}`,f=e=>`fl-${e}`,c={success:"Success",error:"Error",warning:"Warning",info:"Information"};const u={render:e=>{const{type:u,title:d,message:$}=e,p=function(e,n){return e||c[n]||function(e){return e.charAt(0).toUpperCase()+e.slice(1)}(n)}(d,u);return`\n            <div class="${f("flasher")} ${l(u)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(u)}>\n                <div class="${n}">\n                    <div class="${a}"></div>\n                    <div>\n                        <strong class="${r}">${p}</strong>\n                        <span class="${s}">${$}</span>\n                    </div>\n                    <button class="${t}" ${function(e){return`aria-label="Close ${e} message"`}(u)}>&times;</button>\n                </div>\n                <span class="${i}">\n                    <span class="${o}"></span>\n                </span>\n            </div>`}};e.addTheme("flasher",u)}));
diff --git a/src/Prime/Resources/dist/themes/google/google.esm.js b/src/Prime/Resources/dist/themes/google/google.esm.js
index 4a439e2f..0573f12e 100644
--- a/src/Prime/Resources/dist/themes/google/google.esm.js
+++ b/src/Prime/Resources/dist/themes/google/google.esm.js
@@ -5,55 +5,97 @@
  */
 import flasher from '@flasher/flasher';
 
+const sizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+};
+const iconPaths = {
+    success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+    error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+    warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+    info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+    close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+};
+function getIcon(type, config = {}) {
+    const { size = 'md', className = '' } = config;
+    const dimension = typeof size === 'number' ? size : sizeMap[size];
+    const path = iconPaths[type];
+    if (!path) {
+        return '';
+    }
+    const classAttr = className ? ` class="${className}"` : '';
+    return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+}
+function getTypeIcon(type, config = {}) {
+    if (type === 'success' || type === 'error' || type === 'warning' || type === 'info') {
+        return getIcon(type, config);
+    }
+    return '';
+}
+
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+const DEFAULT_TEXT = {
+    dismissButton: 'DISMISS'};
+
 const googleTheme = {
     render: (envelope) => {
         const { type, message, title } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
-        const actionText = 'DISMISS';
-        const getIcon = () => {
-            switch (type) {
-                case 'success':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                    </svg>`;
-                case 'error':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
-                    </svg>`;
-                case 'warning':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"/>
-                    </svg>`;
-                case 'info':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-                    </svg>`;
-            }
-            return '';
-        };
-        const titleSection = title ? `<div class="fl-title">${title}</div>` : '';
+        const titleSection = title ? `<div class="${CLASS_NAMES.title}">${title}</div>` : '';
         return `
-            <div class="fl-google fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('google')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-md-card">
-                    <div class="fl-content">
-                        <div class="fl-icon-wrapper">
-                            ${getIcon()}
+                    <div class="${CLASS_NAMES.content}">
+                        <div class="${CLASS_NAMES.iconWrapper}">
+                            ${getTypeIcon(type, { size: 'lg', className: 'fl-icon-svg' })}
                         </div>
                         <div class="fl-text-content">
                             ${titleSection}
-                            <div class="fl-message">${message}</div>
+                            <div class="${CLASS_NAMES.message}">${message}</div>
                         </div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-action-button fl-close" aria-label="Close ${type} message">
-                            ${actionText}
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="fl-action-button ${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${DEFAULT_TEXT.dismissButton}
                         </button>
                     </div>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/google/google.js b/src/Prime/Resources/dist/themes/google/google.js
index 1bea4625..ce75f81b 100644
--- a/src/Prime/Resources/dist/themes/google/google.js
+++ b/src/Prime/Resources/dist/themes/google/google.js
@@ -9,55 +9,97 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    const sizeMap = {
+        sm: 16,
+        md: 20,
+        lg: 24,
+    };
+    const iconPaths = {
+        success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+        error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+        warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+        info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+        close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+    };
+    function getIcon(type, config = {}) {
+        const { size = 'md', className = '' } = config;
+        const dimension = typeof size === 'number' ? size : sizeMap[size];
+        const path = iconPaths[type];
+        if (!path) {
+            return '';
+        }
+        const classAttr = className ? ` class="${className}"` : '';
+        return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+    }
+    function getTypeIcon(type, config = {}) {
+        if (type === 'success' || type === 'error' || type === 'warning' || type === 'info') {
+            return getIcon(type, config);
+        }
+        return '';
+    }
+
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+    const DEFAULT_TEXT = {
+        dismissButton: 'DISMISS'};
+
     const googleTheme = {
         render: (envelope) => {
             const { type, message, title } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
-            const actionText = 'DISMISS';
-            const getIcon = () => {
-                switch (type) {
-                    case 'success':
-                        return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                    </svg>`;
-                    case 'error':
-                        return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
-                    </svg>`;
-                    case 'warning':
-                        return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"/>
-                    </svg>`;
-                    case 'info':
-                        return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-                    </svg>`;
-                }
-                return '';
-            };
-            const titleSection = title ? `<div class="fl-title">${title}</div>` : '';
+            const titleSection = title ? `<div class="${CLASS_NAMES.title}">${title}</div>` : '';
             return `
-            <div class="fl-google fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('google')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-md-card">
-                    <div class="fl-content">
-                        <div class="fl-icon-wrapper">
-                            ${getIcon()}
+                    <div class="${CLASS_NAMES.content}">
+                        <div class="${CLASS_NAMES.iconWrapper}">
+                            ${getTypeIcon(type, { size: 'lg', className: 'fl-icon-svg' })}
                         </div>
                         <div class="fl-text-content">
                             ${titleSection}
-                            <div class="fl-message">${message}</div>
+                            <div class="${CLASS_NAMES.message}">${message}</div>
                         </div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-action-button fl-close" aria-label="Close ${type} message">
-                            ${actionText}
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="fl-action-button ${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${DEFAULT_TEXT.dismissButton}
                         </button>
                     </div>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/google/google.min.js b/src/Prime/Resources/dist/themes/google/google.min.js
index 2c3e1b35..02eccf19 100644
--- a/src/Prime/Resources/dist/themes/google/google.min.js
+++ b/src/Prime/Resources/dist/themes/google/google.min.js
@@ -1 +1 @@
-!function(s,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],e):e((s="undefined"!=typeof globalThis?globalThis:s||self).flasher)}(this,(function(s){"use strict";s.addTheme("google",{render:s=>{const{type:e,message:n,title:l}=s,i="error"===e||"warning"===e,t=l?`<div class="fl-title">${l}</div>`:"";return`\n            <div class="fl-google fl-${e}" role="${i?"alert":"status"}" aria-live="${i?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-md-card">\n                    <div class="fl-content">\n                        <div class="fl-icon-wrapper">\n                            ${(()=>{switch(e){case"success":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>\n                    </svg>';case"error":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>\n                    </svg>';case"warning":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"/>\n                    </svg>';case"info":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>\n                    </svg>'}return""})()}\n                        </div>\n                        <div class="fl-text-content">\n                            ${t}\n                            <div class="fl-message">${n}</div>\n                        </div>\n                    </div>\n                    <div class="fl-actions">\n                        <button class="fl-action-button fl-close" aria-label="Close ${e} message">\n                            DISMISS\n                        </button>\n                    </div>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n={sm:16,md:20,lg:24},s={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function i(e,i={}){return"success"===e||"error"===e||"warning"===e||"info"===e?function(e,i={}){const{size:t="md",className:l=""}=i,r="number"==typeof t?t:n[t],a=s[e];return a?`<svg${l?` class="${l}"`:""} viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true"><path fill="currentColor" d="${a}"/></svg>`:""}(e,i):""}const t="fl-content",l="fl-message",r="fl-title",a="fl-icon-wrapper",o="fl-actions",c="fl-close",f="fl-progress-bar",d="fl-progress",v=e=>`fl-${e}`,u=e=>`fl-${e}`,$="DISMISS",h={render:e=>{const{type:n,message:s,title:h}=e,m=h?`<div class="${r}">${h}</div>`:"";return`\n            <div class="${u("google")} ${v(n)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(n)}>\n                <div class="fl-md-card">\n                    <div class="${t}">\n                        <div class="${a}">\n                            ${i(n,{size:"lg",className:"fl-icon-svg"})}\n                        </div>\n                        <div class="fl-text-content">\n                            ${m}\n                            <div class="${l}">${s}</div>\n                        </div>\n                    </div>\n                    <div class="${o}">\n                        <button class="fl-action-button ${c}" ${function(e){return`aria-label="Close ${e} message"`}(n)}>\n                            ${$}\n                        </button>\n                    </div>\n                </div>\n                <div class="${f}">\n                    <div class="${d}"></div>\n                </div>\n            </div>`}};e.addTheme("google",h)}));
diff --git a/src/Prime/Resources/dist/themes/ios/ios.esm.js b/src/Prime/Resources/dist/themes/ios/ios.esm.js
index e6211c5d..4b3f6077 100644
--- a/src/Prime/Resources/dist/themes/ios/ios.esm.js
+++ b/src/Prime/Resources/dist/themes/ios/ios.esm.js
@@ -5,53 +5,96 @@
  */
 import flasher from '@flasher/flasher';
 
+const sizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+};
+const iconPaths = {
+    success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+    error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+    warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+    info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+    close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+};
+function getIcon(type, config = {}) {
+    const { size = 'md', className = '' } = config;
+    const dimension = typeof size === 'number' ? size : sizeMap[size];
+    const path = iconPaths[type];
+    if (!path) {
+        return '';
+    }
+    const classAttr = className ? ` class="${className}"` : '';
+    return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+}
+function getTypeIcon(type, config = {}) {
+    if (type === 'success' || type === 'error' || type === 'warning' || type === 'info') {
+        return getIcon(type, config);
+    }
+    return '';
+}
+
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
+const APP_NAME = 'PHPFlasher';
+function getTimeString() {
+    const now = new Date();
+    return now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+}
 const iosTheme = {
     render: (envelope) => {
         const { type, message, title } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
-        const appName = 'PHPFlasher';
-        const now = new Date();
-        const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
-        const getIcon = () => {
-            switch (type) {
-                case 'success':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                    </svg>`;
-                case 'error':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-                    </svg>`;
-                case 'warning':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-                    </svg>`;
-                case 'info':
-                    return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-                    </svg>`;
-            }
-            return '';
-        };
-        const displayTitle = title || appName;
+        const displayTitle = title || APP_NAME;
         return `
-            <div class="fl-ios fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('ios')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-ios-notification">
                     <div class="fl-header">
                         <div class="fl-app-icon">
-                            ${getIcon()}
+                            ${getTypeIcon(type, { size: 'md', className: 'fl-icon-svg' })}
                         </div>
                         <div class="fl-app-info">
                             <div class="fl-app-name">${displayTitle}</div>
-                            <div class="fl-time">${timeString}</div>
+                            <div class="fl-time">${getTimeString()}</div>
                         </div>
                     </div>
-                    <div class="fl-content">
-                        <div class="fl-message">${message}</div>
+                    <div class="${CLASS_NAMES.content}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
                         <span aria-hidden="true">×</span>
                     </button>
                 </div>
diff --git a/src/Prime/Resources/dist/themes/ios/ios.js b/src/Prime/Resources/dist/themes/ios/ios.js
index a794b72d..403750cd 100644
--- a/src/Prime/Resources/dist/themes/ios/ios.js
+++ b/src/Prime/Resources/dist/themes/ios/ios.js
@@ -9,53 +9,96 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    const sizeMap = {
+        sm: 16,
+        md: 20,
+        lg: 24,
+    };
+    const iconPaths = {
+        success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+        error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+        warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+        info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+        close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+    };
+    function getIcon(type, config = {}) {
+        const { size = 'md', className = '' } = config;
+        const dimension = typeof size === 'number' ? size : sizeMap[size];
+        const path = iconPaths[type];
+        if (!path) {
+            return '';
+        }
+        const classAttr = className ? ` class="${className}"` : '';
+        return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+    }
+    function getTypeIcon(type, config = {}) {
+        if (type === 'success' || type === 'error' || type === 'warning' || type === 'info') {
+            return getIcon(type, config);
+        }
+        return '';
+    }
+
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
+    const APP_NAME = 'PHPFlasher';
+    function getTimeString() {
+        const now = new Date();
+        return now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+    }
     const iosTheme = {
         render: (envelope) => {
             const { type, message, title } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
-            const appName = 'PHPFlasher';
-            const now = new Date();
-            const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
-            const getIcon = () => {
-                switch (type) {
-                    case 'success':
-                        return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                    </svg>`;
-                    case 'error':
-                        return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-                    </svg>`;
-                    case 'warning':
-                        return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-                    </svg>`;
-                    case 'info':
-                        return `<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
-                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-                    </svg>`;
-                }
-                return '';
-            };
-            const displayTitle = title || appName;
+            const displayTitle = title || APP_NAME;
             return `
-            <div class="fl-ios fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('ios')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-ios-notification">
                     <div class="fl-header">
                         <div class="fl-app-icon">
-                            ${getIcon()}
+                            ${getTypeIcon(type, { size: 'md', className: 'fl-icon-svg' })}
                         </div>
                         <div class="fl-app-info">
                             <div class="fl-app-name">${displayTitle}</div>
-                            <div class="fl-time">${timeString}</div>
+                            <div class="fl-time">${getTimeString()}</div>
                         </div>
                     </div>
-                    <div class="fl-content">
-                        <div class="fl-message">${message}</div>
+                    <div class="${CLASS_NAMES.content}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
                         <span aria-hidden="true">×</span>
                     </button>
                 </div>
diff --git a/src/Prime/Resources/dist/themes/ios/ios.min.js b/src/Prime/Resources/dist/themes/ios/ios.min.js
index 6680c7e2..882f6982 100644
--- a/src/Prime/Resources/dist/themes/ios/ios.min.js
+++ b/src/Prime/Resources/dist/themes/ios/ios.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s={render:e=>{const{type:s,message:i,title:n}=e,l="error"===s||"warning"===s,t=l?"alert":"status",a=l?"assertive":"polite",r=(new Date).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"}),o=n||"PHPFlasher";return`\n            <div class="fl-ios fl-${s}" role="${t}" aria-live="${a}" aria-atomic="true">\n                <div class="fl-ios-notification">\n                    <div class="fl-header">\n                        <div class="fl-app-icon">\n                            ${(()=>{switch(s){case"success":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>\n                    </svg>';case"error":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>\n                    </svg>';case"warning":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">\n                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>\n                    </svg>';case"info":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>\n                    </svg>'}return""})()}\n                        </div>\n                        <div class="fl-app-info">\n                            <div class="fl-app-name">${o}</div>\n                            <div class="fl-time">${r}</div>\n                        </div>\n                    </div>\n                    <div class="fl-content">\n                        <div class="fl-message">${i}</div>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">\n                        <span aria-hidden="true">×</span>\n                    </button>\n                </div>\n            </div>`}};e.addTheme("ios",s)}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n={sm:16,md:20,lg:24},i={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function s(e,s={}){return"success"===e||"error"===e||"warning"===e||"info"===e?function(e,s={}){const{size:a="md",className:t=""}=s,r="number"==typeof a?a:n[a],l=i[e];return l?`<svg${t?` class="${t}"`:""} viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true"><path fill="currentColor" d="${l}"/></svg>`:""}(e,s):""}const a="fl-content",t="fl-message",r="fl-close",l=e=>`fl-${e}`,o=e=>`fl-${e}`;const c={render:e=>{const{type:n,message:i,title:c}=e,d=c||"PHPFlasher";return`\n            <div class="${o("ios")} ${l(n)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(n)}>\n                <div class="fl-ios-notification">\n                    <div class="fl-header">\n                        <div class="fl-app-icon">\n                            ${s(n,{size:"md",className:"fl-icon-svg"})}\n                        </div>\n                        <div class="fl-app-info">\n                            <div class="fl-app-name">${d}</div>\n                            <div class="fl-time">${(new Date).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"})}</div>\n                        </div>\n                    </div>\n                    <div class="${a}">\n                        <div class="${t}">${i}</div>\n                    </div>\n                    <button class="${r}" ${function(e){return`aria-label="Close ${e} message"`}(n)}>\n                        <span aria-hidden="true">×</span>\n                    </button>\n                </div>\n            </div>`}};e.addTheme("ios",c)}));
diff --git a/src/Prime/Resources/dist/themes/jade/jade.esm.js b/src/Prime/Resources/dist/themes/jade/jade.esm.js
index 02106278..d422c14d 100644
--- a/src/Prime/Resources/dist/themes/jade/jade.esm.js
+++ b/src/Prime/Resources/dist/themes/jade/jade.esm.js
@@ -5,20 +5,53 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
 const jadeTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
         return `
-            <div class="fl-jade fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('jade')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/jade/jade.js b/src/Prime/Resources/dist/themes/jade/jade.js
index c11ca098..c299b6fb 100644
--- a/src/Prime/Resources/dist/themes/jade/jade.js
+++ b/src/Prime/Resources/dist/themes/jade/jade.js
@@ -9,20 +9,53 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
     const jadeTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
             return `
-            <div class="fl-jade fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('jade')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/jade/jade.min.js b/src/Prime/Resources/dist/themes/jade/jade.min.js
index 8bcffc46..c5c56ace 100644
--- a/src/Prime/Resources/dist/themes/jade/jade.min.js
+++ b/src/Prime/Resources/dist/themes/jade/jade.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("jade",{render:e=>{const{type:s,message:a}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-jade fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-message">${a}</div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s="fl-content",n="fl-message",i="fl-close",a="fl-progress-bar",r="fl-progress",t=e=>`fl-${e}`,l=e=>`fl-${e}`,o={render:e=>{const{type:o,message:f}=e;return`\n            <div class="${l("jade")} ${t(o)}" ${function(e){const s=function(e){const s="error"===e||"warning"===e;return{role:s?"alert":"status",ariaLive:s?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${s.role}" aria-live="${s.ariaLive}" aria-atomic="${s.ariaAtomic}"`}(o)}>\n                <div class="${s}">\n                    <div class="${n}">${f}</div>\n                    <button class="${i}" ${function(e){return`aria-label="Close ${e} message"`}(o)}>×</button>\n                </div>\n                <div class="${a}">\n                    <div class="${r}"></div>\n                </div>\n            </div>`}};e.addTheme("jade",o)}));
diff --git a/src/Prime/Resources/dist/themes/material/material.esm.js b/src/Prime/Resources/dist/themes/material/material.esm.js
index 018072c1..df4c8d3b 100644
--- a/src/Prime/Resources/dist/themes/material/material.esm.js
+++ b/src/Prime/Resources/dist/themes/material/material.esm.js
@@ -5,29 +5,63 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+const DEFAULT_TEXT = {
+    dismissButton: 'DISMISS'};
+
 const materialTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
-        const actionText = 'DISMISS';
         return `
-            <div class="fl-material fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('material')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-md-card">
-                    <div class="fl-content">
+                    <div class="${CLASS_NAMES.content}">
                         <div class="fl-text-content">
-                            <div class="fl-message">${message}</div>
+                            <div class="${CLASS_NAMES.message}">${message}</div>
                         </div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-action-button fl-close" aria-label="Close ${type} message">
-                            ${actionText}
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="fl-action-button ${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${DEFAULT_TEXT.dismissButton}
                         </button>
                     </div>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/material/material.js b/src/Prime/Resources/dist/themes/material/material.js
index 70a067fd..8cf2ab11 100644
--- a/src/Prime/Resources/dist/themes/material/material.js
+++ b/src/Prime/Resources/dist/themes/material/material.js
@@ -9,29 +9,63 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+    const DEFAULT_TEXT = {
+        dismissButton: 'DISMISS'};
+
     const materialTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
-            const actionText = 'DISMISS';
             return `
-            <div class="fl-material fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('material')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-md-card">
-                    <div class="fl-content">
+                    <div class="${CLASS_NAMES.content}">
                         <div class="fl-text-content">
-                            <div class="fl-message">${message}</div>
+                            <div class="${CLASS_NAMES.message}">${message}</div>
                         </div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-action-button fl-close" aria-label="Close ${type} message">
-                            ${actionText}
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="fl-action-button ${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${DEFAULT_TEXT.dismissButton}
                         </button>
                     </div>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/material/material.min.js b/src/Prime/Resources/dist/themes/material/material.min.js
index a9bbefb3..16beb5fa 100644
--- a/src/Prime/Resources/dist/themes/material/material.min.js
+++ b/src/Prime/Resources/dist/themes/material/material.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("material",{render:e=>{const{type:s,message:n}=e,a="error"===s||"warning"===s;return`\n            <div class="fl-material fl-${s}" role="${a?"alert":"status"}" aria-live="${a?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-md-card">\n                    <div class="fl-content">\n                        <div class="fl-text-content">\n                            <div class="fl-message">${n}</div>\n                        </div>\n                    </div>\n                    <div class="fl-actions">\n                        <button class="fl-action-button fl-close" aria-label="Close ${s} message">\n                            DISMISS\n                        </button>\n                    </div>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",i="fl-message",s="fl-actions",a="fl-close",t="fl-progress-bar",r="fl-progress",l=e=>`fl-${e}`,o=e=>`fl-${e}`,f="DISMISS",c={render:e=>{const{type:c,message:d}=e;return`\n            <div class="${o("material")} ${l(c)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(c)}>\n                <div class="fl-md-card">\n                    <div class="${n}">\n                        <div class="fl-text-content">\n                            <div class="${i}">${d}</div>\n                        </div>\n                    </div>\n                    <div class="${s}">\n                        <button class="fl-action-button ${a}" ${function(e){return`aria-label="Close ${e} message"`}(c)}>\n                            ${f}\n                        </button>\n                    </div>\n                </div>\n                <div class="${t}">\n                    <div class="${r}"></div>\n                </div>\n            </div>`}};e.addTheme("material",c)}));
diff --git a/src/Prime/Resources/dist/themes/minimal/minimal.esm.js b/src/Prime/Resources/dist/themes/minimal/minimal.esm.js
index dce23ee8..e0fd7b3a 100644
--- a/src/Prime/Resources/dist/themes/minimal/minimal.esm.js
+++ b/src/Prime/Resources/dist/themes/minimal/minimal.esm.js
@@ -5,20 +5,53 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
 const minimalTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
         return `
-            <div class="fl-minimal fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('minimal')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/minimal/minimal.js b/src/Prime/Resources/dist/themes/minimal/minimal.js
index 61bf90bd..75a14bc3 100644
--- a/src/Prime/Resources/dist/themes/minimal/minimal.js
+++ b/src/Prime/Resources/dist/themes/minimal/minimal.js
@@ -9,20 +9,53 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
     const minimalTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
             return `
-            <div class="fl-minimal fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('minimal')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/minimal/minimal.min.js b/src/Prime/Resources/dist/themes/minimal/minimal.min.js
index efcbb6a4..6866063f 100644
--- a/src/Prime/Resources/dist/themes/minimal/minimal.min.js
+++ b/src/Prime/Resources/dist/themes/minimal/minimal.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("minimal",{render:e=>{const{type:s,message:i}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-minimal fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-message">${i}</div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const i="fl-content",n="fl-message",s="fl-close",a="fl-progress-bar",r="fl-progress",t=e=>`fl-${e}`,l=e=>`fl-${e}`,o={render:e=>{const{type:o,message:f}=e;return`\n            <div class="${l("minimal")} ${t(o)}" ${function(e){const i=function(e){const i="error"===e||"warning"===e;return{role:i?"alert":"status",ariaLive:i?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${i.role}" aria-live="${i.ariaLive}" aria-atomic="${i.ariaAtomic}"`}(o)}>\n                <div class="${i}">\n                    <div class="${n}">${f}</div>\n                    <button class="${s}" ${function(e){return`aria-label="Close ${e} message"`}(o)}>×</button>\n                </div>\n                <div class="${a}">\n                    <div class="${r}"></div>\n                </div>\n            </div>`}};e.addTheme("minimal",o)}));
diff --git a/src/Prime/Resources/dist/themes/neon/neon.esm.js b/src/Prime/Resources/dist/themes/neon/neon.esm.js
index abec7f48..f7a305df 100644
--- a/src/Prime/Resources/dist/themes/neon/neon.esm.js
+++ b/src/Prime/Resources/dist/themes/neon/neon.esm.js
@@ -5,20 +5,53 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
 const neonTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
         return `
-            <div class="fl-neon fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('neon')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/neon/neon.js b/src/Prime/Resources/dist/themes/neon/neon.js
index c3d26f9c..31ee7b31 100644
--- a/src/Prime/Resources/dist/themes/neon/neon.js
+++ b/src/Prime/Resources/dist/themes/neon/neon.js
@@ -9,20 +9,53 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
     const neonTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
             return `
-            <div class="fl-neon fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-message">${message}</div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+            <div class="${CLASS_NAMES.theme('neon')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.message}">${message}</div>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/neon/neon.min.js b/src/Prime/Resources/dist/themes/neon/neon.min.js
index b1ce195c..464107f6 100644
--- a/src/Prime/Resources/dist/themes/neon/neon.min.js
+++ b/src/Prime/Resources/dist/themes/neon/neon.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("neon",{render:e=>{const{type:s,message:n}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-neon fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-message">${n}</div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",s="fl-message",i="fl-close",r="fl-progress-bar",a="fl-progress",t=e=>`fl-${e}`,o=e=>`fl-${e}`,l={render:e=>{const{type:l,message:f}=e;return`\n            <div class="${o("neon")} ${t(l)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(l)}>\n                <div class="${n}">\n                    <div class="${s}">${f}</div>\n                    <button class="${i}" ${function(e){return`aria-label="Close ${e} message"`}(l)}>×</button>\n                </div>\n                <div class="${r}">\n                    <div class="${a}"></div>\n                </div>\n            </div>`}};e.addTheme("neon",l)}));
diff --git a/src/Prime/Resources/dist/themes/onyx/onyx.esm.js b/src/Prime/Resources/dist/themes/onyx/onyx.esm.js
index 42fcef71..0f708f20 100644
--- a/src/Prime/Resources/dist/themes/onyx/onyx.esm.js
+++ b/src/Prime/Resources/dist/themes/onyx/onyx.esm.js
@@ -5,22 +5,55 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
 const onyxTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
         return `
-            <div class="fl-onyx fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-text">
-                        <div class="fl-message">${message}</div>
+            <div class="${CLASS_NAMES.theme('onyx')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.text}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/onyx/onyx.js b/src/Prime/Resources/dist/themes/onyx/onyx.js
index 2f9cced6..8ebf3072 100644
--- a/src/Prime/Resources/dist/themes/onyx/onyx.js
+++ b/src/Prime/Resources/dist/themes/onyx/onyx.js
@@ -9,22 +9,55 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
     const onyxTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
             return `
-            <div class="fl-onyx fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <div class="fl-text">
-                        <div class="fl-message">${message}</div>
+            <div class="${CLASS_NAMES.theme('onyx')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <div class="${CLASS_NAMES.text}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/onyx/onyx.min.js b/src/Prime/Resources/dist/themes/onyx/onyx.min.js
index 1276accb..3dbb326a 100644
--- a/src/Prime/Resources/dist/themes/onyx/onyx.min.js
+++ b/src/Prime/Resources/dist/themes/onyx/onyx.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("onyx",{render:e=>{const{type:s,message:n}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-onyx fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-text">\n                        <div class="fl-message">${n}</div>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",s="fl-message",i="fl-text",r="fl-close",t="fl-progress-bar",a="fl-progress",l=e=>`fl-${e}`,o=e=>`fl-${e}`,f={render:e=>{const{type:f,message:c}=e;return`\n            <div class="${o("onyx")} ${l(f)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(f)}>\n                <div class="${n}">\n                    <div class="${i}">\n                        <div class="${s}">${c}</div>\n                    </div>\n                    <button class="${r}" ${function(e){return`aria-label="Close ${e} message"`}(f)}>×</button>\n                </div>\n                <div class="${t}">\n                    <div class="${a}"></div>\n                </div>\n            </div>`}};e.addTheme("onyx",f)}));
diff --git a/src/Prime/Resources/dist/themes/ruby/ruby.esm.js b/src/Prime/Resources/dist/themes/ruby/ruby.esm.js
index f734ddab..48212c9f 100644
--- a/src/Prime/Resources/dist/themes/ruby/ruby.esm.js
+++ b/src/Prime/Resources/dist/themes/ruby/ruby.esm.js
@@ -5,26 +5,59 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
 const rubyTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
         return `
-            <div class="fl-ruby fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('ruby')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-shine"></div>
-                <div class="fl-content">
+                <div class="${CLASS_NAMES.content}">
                     <div class="fl-icon-circle">
-                        <div class="fl-icon"></div>
+                        <div class="${CLASS_NAMES.icon}"></div>
                     </div>
-                    <div class="fl-text">
-                        <div class="fl-message">${message}</div>
+                    <div class="${CLASS_NAMES.text}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/ruby/ruby.js b/src/Prime/Resources/dist/themes/ruby/ruby.js
index da1bb281..b46a37ad 100644
--- a/src/Prime/Resources/dist/themes/ruby/ruby.js
+++ b/src/Prime/Resources/dist/themes/ruby/ruby.js
@@ -9,26 +9,59 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
     const rubyTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
             return `
-            <div class="fl-ruby fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('ruby')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-shine"></div>
-                <div class="fl-content">
+                <div class="${CLASS_NAMES.content}">
                     <div class="fl-icon-circle">
-                        <div class="fl-icon"></div>
+                        <div class="${CLASS_NAMES.icon}"></div>
                     </div>
-                    <div class="fl-text">
-                        <div class="fl-message">${message}</div>
+                    <div class="${CLASS_NAMES.text}">
+                        <div class="${CLASS_NAMES.message}">${message}</div>
                     </div>
-                    <button class="fl-close" aria-label="Close ${type} message">×</button>
+                    <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>×</button>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/ruby/ruby.min.js b/src/Prime/Resources/dist/themes/ruby/ruby.min.js
index 3c46d443..2859d68a 100644
--- a/src/Prime/Resources/dist/themes/ruby/ruby.min.js
+++ b/src/Prime/Resources/dist/themes/ruby/ruby.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("ruby",{render:e=>{const{type:s,message:i}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-ruby fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-shine"></div>\n                <div class="fl-content">\n                    <div class="fl-icon-circle">\n                        <div class="fl-icon"></div>\n                    </div>\n                    <div class="fl-text">\n                        <div class="fl-message">${i}</div>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const i="fl-content",s="fl-message",n="fl-text",r="fl-icon",a="fl-close",l="fl-progress-bar",t="fl-progress",o=e=>`fl-${e}`,f=e=>`fl-${e}`,c={render:e=>{const{type:c,message:d}=e;return`\n            <div class="${f("ruby")} ${o(c)}" ${function(e){const i=function(e){const i="error"===e||"warning"===e;return{role:i?"alert":"status",ariaLive:i?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${i.role}" aria-live="${i.ariaLive}" aria-atomic="${i.ariaAtomic}"`}(c)}>\n                <div class="fl-shine"></div>\n                <div class="${i}">\n                    <div class="fl-icon-circle">\n                        <div class="${r}"></div>\n                    </div>\n                    <div class="${n}">\n                        <div class="${s}">${d}</div>\n                    </div>\n                    <button class="${a}" ${function(e){return`aria-label="Close ${e} message"`}(c)}>×</button>\n                </div>\n                <div class="${l}">\n                    <div class="${t}"></div>\n                </div>\n            </div>`}};e.addTheme("ruby",c)}));
diff --git a/src/Prime/Resources/dist/themes/sapphire/sapphire.esm.js b/src/Prime/Resources/dist/themes/sapphire/sapphire.esm.js
index 1dd35f9b..a773a1be 100644
--- a/src/Prime/Resources/dist/themes/sapphire/sapphire.esm.js
+++ b/src/Prime/Resources/dist/themes/sapphire/sapphire.esm.js
@@ -5,19 +5,49 @@
  */
 import flasher from '@flasher/flasher';
 
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
 const sapphireTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
         return `
-            <div class="fl-sapphire fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <span class="fl-message">${message}</span>
+            <div class="${CLASS_NAMES.theme('sapphire')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <span class="${CLASS_NAMES.message}">${message}</span>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
     },
diff --git a/src/Prime/Resources/dist/themes/sapphire/sapphire.js b/src/Prime/Resources/dist/themes/sapphire/sapphire.js
index 9a1c63bc..69697745 100644
--- a/src/Prime/Resources/dist/themes/sapphire/sapphire.js
+++ b/src/Prime/Resources/dist/themes/sapphire/sapphire.js
@@ -9,19 +9,49 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
     const sapphireTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
             return `
-            <div class="fl-sapphire fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
-                <div class="fl-content">
-                    <span class="fl-message">${message}</span>
+            <div class="${CLASS_NAMES.theme('sapphire')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
+                <div class="${CLASS_NAMES.content}">
+                    <span class="${CLASS_NAMES.message}">${message}</span>
                 </div>
-                <div class="fl-progress-bar">
-                    <div class="fl-progress"></div>
+                <div class="${CLASS_NAMES.progressBar}">
+                    <div class="${CLASS_NAMES.progress}"></div>
                 </div>
             </div>`;
         },
diff --git a/src/Prime/Resources/dist/themes/sapphire/sapphire.min.js b/src/Prime/Resources/dist/themes/sapphire/sapphire.min.js
index da9a1e25..e21b1274 100644
--- a/src/Prime/Resources/dist/themes/sapphire/sapphire.min.js
+++ b/src/Prime/Resources/dist/themes/sapphire/sapphire.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("sapphire",{render:e=>{const{type:s,message:a}=e,i="error"===s||"warning"===s;return`\n            <div class="fl-sapphire fl-${s}" role="${i?"alert":"status"}" aria-live="${i?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <span class="fl-message">${a}</span>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s="fl-content",i="fl-message",r="fl-progress-bar",n="fl-progress",a=e=>`fl-${e}`,t=e=>`fl-${e}`,o={render:e=>{const{type:o,message:l}=e;return`\n            <div class="${t("sapphire")} ${a(o)}" ${function(e){const s=function(e){const s="error"===e||"warning"===e;return{role:s?"alert":"status",ariaLive:s?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${s.role}" aria-live="${s.ariaLive}" aria-atomic="${s.ariaAtomic}"`}(o)}>\n                <div class="${s}">\n                    <span class="${i}">${l}</span>\n                </div>\n                <div class="${r}">\n                    <div class="${n}"></div>\n                </div>\n            </div>`}};e.addTheme("sapphire",o)}));
diff --git a/src/Prime/Resources/dist/themes/shared/accessibility.d.ts b/src/Prime/Resources/dist/themes/shared/accessibility.d.ts
new file mode 100644
index 00000000..931a3add
--- /dev/null
+++ b/src/Prime/Resources/dist/themes/shared/accessibility.d.ts
@@ -0,0 +1,9 @@
+export type NotificationType = 'success' | 'info' | 'warning' | 'error';
+export interface A11yAttributes {
+    role: 'alert' | 'status';
+    ariaLive: 'assertive' | 'polite';
+    ariaAtomic: 'true';
+}
+export declare function getA11yAttributes(type: NotificationType | string): A11yAttributes;
+export declare function getA11yString(type: NotificationType | string): string;
+export declare function getCloseButtonA11y(type: NotificationType | string): string;
diff --git a/src/Prime/Resources/dist/themes/shared/constants.d.ts b/src/Prime/Resources/dist/themes/shared/constants.d.ts
new file mode 100644
index 00000000..7339cd71
--- /dev/null
+++ b/src/Prime/Resources/dist/themes/shared/constants.d.ts
@@ -0,0 +1,26 @@
+export declare const CLASS_NAMES: {
+    readonly container: "fl-container";
+    readonly wrapper: "fl-wrapper";
+    readonly content: "fl-content";
+    readonly message: "fl-message";
+    readonly title: "fl-title";
+    readonly text: "fl-text";
+    readonly icon: "fl-icon";
+    readonly iconWrapper: "fl-icon-wrapper";
+    readonly actions: "fl-actions";
+    readonly close: "fl-close";
+    readonly progressBar: "fl-progress-bar";
+    readonly progress: "fl-progress";
+    readonly show: "fl-show";
+    readonly sticky: "fl-sticky";
+    readonly rtl: "fl-rtl";
+    readonly type: (type: string) => string;
+    readonly theme: (name: string) => string;
+};
+export declare const DEFAULT_TITLES: Record<string, string>;
+export declare const DEFAULT_TEXT: {
+    readonly dismissButton: "DISMISS";
+    readonly closeLabel: (type: string) => string;
+};
+export declare function capitalizeType(type: string): string;
+export declare function getTitle(title: string | undefined, type: string): string;
diff --git a/src/Prime/Resources/dist/themes/shared/icons.d.ts b/src/Prime/Resources/dist/themes/shared/icons.d.ts
new file mode 100644
index 00000000..239b5eeb
--- /dev/null
+++ b/src/Prime/Resources/dist/themes/shared/icons.d.ts
@@ -0,0 +1,9 @@
+export type IconType = 'success' | 'info' | 'warning' | 'error' | 'close';
+export type IconSize = 'sm' | 'md' | 'lg' | number;
+export interface IconConfig {
+    size?: IconSize;
+    className?: string;
+}
+export declare function getIcon(type: IconType, config?: IconConfig): string;
+export declare function getCloseIcon(config?: IconConfig): string;
+export declare function getTypeIcon(type: string, config?: IconConfig): string;
diff --git a/src/Prime/Resources/dist/themes/shared/index.d.ts b/src/Prime/Resources/dist/themes/shared/index.d.ts
new file mode 100644
index 00000000..441797ec
--- /dev/null
+++ b/src/Prime/Resources/dist/themes/shared/index.d.ts
@@ -0,0 +1,5 @@
+export { getIcon, getCloseIcon, getTypeIcon } from './icons';
+export type { IconType, IconSize, IconConfig } from './icons';
+export { getA11yAttributes, getA11yString, getCloseButtonA11y } from './accessibility';
+export type { NotificationType, A11yAttributes } from './accessibility';
+export { CLASS_NAMES, DEFAULT_TITLES, DEFAULT_TEXT, capitalizeType, getTitle, } from './constants';
diff --git a/src/Prime/Resources/dist/themes/shared/shared.esm.js b/src/Prime/Resources/dist/themes/shared/shared.esm.js
new file mode 100644
index 00000000..490a707f
--- /dev/null
+++ b/src/Prime/Resources/dist/themes/shared/shared.esm.js
@@ -0,0 +1,90 @@
+/**
+ * @package PHPFlasher
+ * @author Younes ENNAJI
+ * @license MIT
+ */
+const sizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+};
+const iconPaths = {
+    success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+    error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+    warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+    info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+    close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+};
+function getIcon(type, config = {}) {
+    const { size = 'md', className = '' } = config;
+    const dimension = typeof size === 'number' ? size : sizeMap[size];
+    const path = iconPaths[type];
+    if (!path) {
+        return '';
+    }
+    const classAttr = className ? ` class="${className}"` : '';
+    return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+}
+function getCloseIcon(config = {}) {
+    return getIcon('close', Object.assign({ size: 'sm' }, config));
+}
+function getTypeIcon(type, config = {}) {
+    if (type === 'success' || type === 'error' || type === 'warning' || type === 'info') {
+        return getIcon(type, config);
+    }
+    return '';
+}
+
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+const DEFAULT_TITLES = {
+    success: 'Success',
+    error: 'Error',
+    warning: 'Warning',
+    info: 'Information',
+};
+const DEFAULT_TEXT = {
+    dismissButton: 'DISMISS',
+    closeLabel: (type) => `Close ${type} message`,
+};
+function capitalizeType(type) {
+    return type.charAt(0).toUpperCase() + type.slice(1);
+}
+function getTitle(title, type) {
+    return title || DEFAULT_TITLES[type] || capitalizeType(type);
+}
+
+export { CLASS_NAMES, DEFAULT_TEXT, DEFAULT_TITLES, capitalizeType, getA11yAttributes, getA11yString, getCloseButtonA11y, getCloseIcon, getIcon, getTitle, getTypeIcon };
diff --git a/src/Prime/Resources/dist/themes/shared/shared.js b/src/Prime/Resources/dist/themes/shared/shared.js
new file mode 100644
index 00000000..35e0cea9
--- /dev/null
+++ b/src/Prime/Resources/dist/themes/shared/shared.js
@@ -0,0 +1,108 @@
+/**
+ * @package PHPFlasher
+ * @author Younes ENNAJI
+ * @license MIT
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.theme = global.theme || {}, global.theme.shared = {})));
+})(this, (function (exports) { 'use strict';
+
+    const sizeMap = {
+        sm: 16,
+        md: 20,
+        lg: 24,
+    };
+    const iconPaths = {
+        success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+        error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+        warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+        info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+        close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+    };
+    function getIcon(type, config = {}) {
+        const { size = 'md', className = '' } = config;
+        const dimension = typeof size === 'number' ? size : sizeMap[size];
+        const path = iconPaths[type];
+        if (!path) {
+            return '';
+        }
+        const classAttr = className ? ` class="${className}"` : '';
+        return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+    }
+    function getCloseIcon(config = {}) {
+        return getIcon('close', Object.assign({ size: 'sm' }, config));
+    }
+    function getTypeIcon(type, config = {}) {
+        if (type === 'success' || type === 'error' || type === 'warning' || type === 'info') {
+            return getIcon(type, config);
+        }
+        return '';
+    }
+
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+    const DEFAULT_TITLES = {
+        success: 'Success',
+        error: 'Error',
+        warning: 'Warning',
+        info: 'Information',
+    };
+    const DEFAULT_TEXT = {
+        dismissButton: 'DISMISS',
+        closeLabel: (type) => `Close ${type} message`,
+    };
+    function capitalizeType(type) {
+        return type.charAt(0).toUpperCase() + type.slice(1);
+    }
+    function getTitle(title, type) {
+        return title || DEFAULT_TITLES[type] || capitalizeType(type);
+    }
+
+    exports.CLASS_NAMES = CLASS_NAMES;
+    exports.DEFAULT_TEXT = DEFAULT_TEXT;
+    exports.DEFAULT_TITLES = DEFAULT_TITLES;
+    exports.capitalizeType = capitalizeType;
+    exports.getA11yAttributes = getA11yAttributes;
+    exports.getA11yString = getA11yString;
+    exports.getCloseButtonA11y = getCloseButtonA11y;
+    exports.getCloseIcon = getCloseIcon;
+    exports.getIcon = getIcon;
+    exports.getTitle = getTitle;
+    exports.getTypeIcon = getTypeIcon;
+
+}));
diff --git a/src/Prime/Resources/dist/themes/shared/shared.min.js b/src/Prime/Resources/dist/themes/shared/shared.min.js
new file mode 100644
index 00000000..eac51c45
--- /dev/null
+++ b/src/Prime/Resources/dist/themes/shared/shared.min.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).theme=e.theme||{},e.theme.shared={}))}(this,(function(e){"use strict";const t={sm:16,md:20,lg:24},r={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function n(e,n={}){const{size:s="md",className:o=""}=n,i="number"==typeof s?s:t[s],l=r[e];if(!l)return"";return`<svg${o?` class="${o}"`:""} viewBox="0 0 24 24" width="${i}" height="${i}" aria-hidden="true"><path fill="currentColor" d="${l}"/></svg>`}function s(e){const t="error"===e||"warning"===e;return{role:t?"alert":"status",ariaLive:t?"assertive":"polite",ariaAtomic:"true"}}const o={success:"Success",error:"Error",warning:"Warning",info:"Information"};function i(e){return e.charAt(0).toUpperCase()+e.slice(1)}e.CLASS_NAMES={container:"fl-container",wrapper:"fl-wrapper",content:"fl-content",message:"fl-message",title:"fl-title",text:"fl-text",icon:"fl-icon",iconWrapper:"fl-icon-wrapper",actions:"fl-actions",close:"fl-close",progressBar:"fl-progress-bar",progress:"fl-progress",show:"fl-show",sticky:"fl-sticky",rtl:"fl-rtl",type:e=>`fl-${e}`,theme:e=>`fl-${e}`},e.DEFAULT_TEXT={dismissButton:"DISMISS",closeLabel:e=>`Close ${e} message`},e.DEFAULT_TITLES=o,e.capitalizeType=i,e.getA11yAttributes=s,e.getA11yString=function(e){const t=s(e);return`role="${t.role}" aria-live="${t.ariaLive}" aria-atomic="${t.ariaAtomic}"`},e.getCloseButtonA11y=function(e){return`aria-label="Close ${e} message"`},e.getCloseIcon=function(e={}){return n("close",Object.assign({size:"sm"},e))},e.getIcon=n,e.getTitle=function(e,t){return e||o[t]||i(t)},e.getTypeIcon=function(e,t={}){return"success"===e||"error"===e||"warning"===e||"info"===e?n(e,t):""}}));
diff --git a/src/Prime/Resources/dist/themes/slack/slack.esm.js b/src/Prime/Resources/dist/themes/slack/slack.esm.js
index d2a6530e..81ec0821 100644
--- a/src/Prime/Resources/dist/themes/slack/slack.esm.js
+++ b/src/Prime/Resources/dist/themes/slack/slack.esm.js
@@ -5,39 +5,87 @@
  */
 import flasher from '@flasher/flasher';
 
+const sizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+};
+const iconPaths = {
+    success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+    error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+    warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+    info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+    close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+};
+function getIcon(type, config = {}) {
+    const { size = 'md', className = '' } = config;
+    const dimension = typeof size === 'number' ? size : sizeMap[size];
+    const path = iconPaths[type];
+    const classAttr = className ? ` class="${className}"` : '';
+    return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+}
+function getCloseIcon(config = {}) {
+    return getIcon('close', Object.assign({ size: 'sm' }, config));
+}
+
+function getA11yAttributes(type) {
+    const isAlert = type === 'error' || type === 'warning';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        ariaLive: isAlert ? 'assertive' : 'polite',
+        ariaAtomic: 'true',
+    };
+}
+function getA11yString(type) {
+    const attrs = getA11yAttributes(type);
+    return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+}
+function getCloseButtonA11y(type) {
+    return `aria-label="Close ${type} message"`;
+}
+
+const CLASS_NAMES = {
+    container: 'fl-container',
+    wrapper: 'fl-wrapper',
+    content: 'fl-content',
+    message: 'fl-message',
+    title: 'fl-title',
+    text: 'fl-text',
+    icon: 'fl-icon',
+    iconWrapper: 'fl-icon-wrapper',
+    actions: 'fl-actions',
+    close: 'fl-close',
+    progressBar: 'fl-progress-bar',
+    progress: 'fl-progress',
+    show: 'fl-show',
+    sticky: 'fl-sticky',
+    rtl: 'fl-rtl',
+    type: (type) => `fl-${type}`,
+    theme: (name) => `fl-${name}`,
+};
+
+const TYPE_ICONS = {
+    success: '✓',
+    error: '✕',
+    warning: '!',
+    info: 'i',
+};
 const slackTheme = {
     render: (envelope) => {
         const { type, message } = envelope;
-        const isAlert = type === 'error' || type === 'warning';
-        const role = isAlert ? 'alert' : 'status';
-        const ariaLive = isAlert ? 'assertive' : 'polite';
-        const getTypeIcon = () => {
-            switch (type) {
-                case 'success':
-                    return `<div class="fl-type-icon fl-success-icon">✓</div>`;
-                case 'error':
-                    return `<div class="fl-type-icon fl-error-icon">✕</div>`;
-                case 'warning':
-                    return `<div class="fl-type-icon fl-warning-icon">!</div>`;
-                case 'info':
-                    return `<div class="fl-type-icon fl-info-icon">i</div>`;
-            }
-            return '';
-        };
+        const iconChar = TYPE_ICONS[type] || '';
         return `
-            <div class="fl-slack fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('slack')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-slack-message">
                     <div class="fl-avatar">
-                        ${getTypeIcon()}
+                        <div class="fl-type-icon fl-${type}-icon">${iconChar}</div>
                     </div>
                     <div class="fl-message-content">
                         <div class="fl-message-text">${message}</div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-close" aria-label="Close ${type} message">
-                            <svg viewBox="0 0 20 20" width="16" height="16">
-                                <path fill="currentColor" d="M10 8.586L6.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 101.414 1.414L10 11.414l3.293 3.293a1 1 0 001.414-1.414L11.414 10l3.293-3.293a1 1 0 00-1.414-1.414L10 8.586z"/>
-                            </svg>
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${getCloseIcon()}
                         </button>
                     </div>
                 </div>
diff --git a/src/Prime/Resources/dist/themes/slack/slack.js b/src/Prime/Resources/dist/themes/slack/slack.js
index 2528119c..4255a64d 100644
--- a/src/Prime/Resources/dist/themes/slack/slack.js
+++ b/src/Prime/Resources/dist/themes/slack/slack.js
@@ -9,39 +9,87 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.flasher));
 })(this, (function (flasher) { 'use strict';
 
+    const sizeMap = {
+        sm: 16,
+        md: 20,
+        lg: 24,
+    };
+    const iconPaths = {
+        success: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z',
+        error: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z',
+        warning: 'M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+        info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
+        close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+    };
+    function getIcon(type, config = {}) {
+        const { size = 'md', className = '' } = config;
+        const dimension = typeof size === 'number' ? size : sizeMap[size];
+        const path = iconPaths[type];
+        const classAttr = className ? ` class="${className}"` : '';
+        return `<svg${classAttr} viewBox="0 0 24 24" width="${dimension}" height="${dimension}" aria-hidden="true"><path fill="currentColor" d="${path}"/></svg>`;
+    }
+    function getCloseIcon(config = {}) {
+        return getIcon('close', Object.assign({ size: 'sm' }, config));
+    }
+
+    function getA11yAttributes(type) {
+        const isAlert = type === 'error' || type === 'warning';
+        return {
+            role: isAlert ? 'alert' : 'status',
+            ariaLive: isAlert ? 'assertive' : 'polite',
+            ariaAtomic: 'true',
+        };
+    }
+    function getA11yString(type) {
+        const attrs = getA11yAttributes(type);
+        return `role="${attrs.role}" aria-live="${attrs.ariaLive}" aria-atomic="${attrs.ariaAtomic}"`;
+    }
+    function getCloseButtonA11y(type) {
+        return `aria-label="Close ${type} message"`;
+    }
+
+    const CLASS_NAMES = {
+        container: 'fl-container',
+        wrapper: 'fl-wrapper',
+        content: 'fl-content',
+        message: 'fl-message',
+        title: 'fl-title',
+        text: 'fl-text',
+        icon: 'fl-icon',
+        iconWrapper: 'fl-icon-wrapper',
+        actions: 'fl-actions',
+        close: 'fl-close',
+        progressBar: 'fl-progress-bar',
+        progress: 'fl-progress',
+        show: 'fl-show',
+        sticky: 'fl-sticky',
+        rtl: 'fl-rtl',
+        type: (type) => `fl-${type}`,
+        theme: (name) => `fl-${name}`,
+    };
+
+    const TYPE_ICONS = {
+        success: '✓',
+        error: '✕',
+        warning: '!',
+        info: 'i',
+    };
     const slackTheme = {
         render: (envelope) => {
             const { type, message } = envelope;
-            const isAlert = type === 'error' || type === 'warning';
-            const role = isAlert ? 'alert' : 'status';
-            const ariaLive = isAlert ? 'assertive' : 'polite';
-            const getTypeIcon = () => {
-                switch (type) {
-                    case 'success':
-                        return `<div class="fl-type-icon fl-success-icon">✓</div>`;
-                    case 'error':
-                        return `<div class="fl-type-icon fl-error-icon">✕</div>`;
-                    case 'warning':
-                        return `<div class="fl-type-icon fl-warning-icon">!</div>`;
-                    case 'info':
-                        return `<div class="fl-type-icon fl-info-icon">i</div>`;
-                }
-                return '';
-            };
+            const iconChar = TYPE_ICONS[type] || '';
             return `
-            <div class="fl-slack fl-${type}" role="${role}" aria-live="${ariaLive}" aria-atomic="true">
+            <div class="${CLASS_NAMES.theme('slack')} ${CLASS_NAMES.type(type)}" ${getA11yString(type)}>
                 <div class="fl-slack-message">
                     <div class="fl-avatar">
-                        ${getTypeIcon()}
+                        <div class="fl-type-icon fl-${type}-icon">${iconChar}</div>
                     </div>
                     <div class="fl-message-content">
                         <div class="fl-message-text">${message}</div>
                     </div>
-                    <div class="fl-actions">
-                        <button class="fl-close" aria-label="Close ${type} message">
-                            <svg viewBox="0 0 20 20" width="16" height="16">
-                                <path fill="currentColor" d="M10 8.586L6.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 101.414 1.414L10 11.414l3.293 3.293a1 1 0 001.414-1.414L11.414 10l3.293-3.293a1 1 0 00-1.414-1.414L10 8.586z"/>
-                            </svg>
+                    <div class="${CLASS_NAMES.actions}">
+                        <button class="${CLASS_NAMES.close}" ${getCloseButtonA11y(type)}>
+                            ${getCloseIcon()}
                         </button>
                     </div>
                 </div>
diff --git a/src/Prime/Resources/dist/themes/slack/slack.min.js b/src/Prime/Resources/dist/themes/slack/slack.min.js
index 71b95e0c..5cf1034b 100644
--- a/src/Prime/Resources/dist/themes/slack/slack.min.js
+++ b/src/Prime/Resources/dist/themes/slack/slack.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("slack",{render:e=>{const{type:s,message:i}=e,n="error"===s||"warning"===s;return`\n            <div class="fl-slack fl-${s}" role="${n?"alert":"status"}" aria-live="${n?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-slack-message">\n                    <div class="fl-avatar">\n                        ${(()=>{switch(s){case"success":return'<div class="fl-type-icon fl-success-icon">✓</div>';case"error":return'<div class="fl-type-icon fl-error-icon">✕</div>';case"warning":return'<div class="fl-type-icon fl-warning-icon">!</div>';case"info":return'<div class="fl-type-icon fl-info-icon">i</div>'}return""})()}\n                    </div>\n                    <div class="fl-message-content">\n                        <div class="fl-message-text">${i}</div>\n                    </div>\n                    <div class="fl-actions">\n                        <button class="fl-close" aria-label="Close ${s} message">\n                            <svg viewBox="0 0 20 20" width="16" height="16">\n                                <path fill="currentColor" d="M10 8.586L6.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 101.414 1.414L10 11.414l3.293 3.293a1 1 0 001.414-1.414L11.414 10l3.293-3.293a1 1 0 00-1.414-1.414L10 8.586z"/>\n                            </svg>\n                        </button>\n                    </div>\n                </div>\n            </div>`}})}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s={sm:16,md:20,lg:24},n={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function i(e={}){return function(e,i={}){const{size:a="md",className:t=""}=i,r="number"==typeof a?a:s[a];return`<svg${t?` class="${t}"`:""} viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true"><path fill="currentColor" d="${n[e]}"/></svg>`}("close",Object.assign({size:"sm"},e))}const a="fl-actions",t="fl-close",r=e=>`fl-${e}`,l=e=>`fl-${e}`,o={success:"✓",error:"✕",warning:"!",info:"i"},c={render:e=>{const{type:s,message:n}=e,c=o[s]||"";return`\n            <div class="${l("slack")} ${r(s)}" ${function(e){const s=function(e){const s="error"===e||"warning"===e;return{role:s?"alert":"status",ariaLive:s?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${s.role}" aria-live="${s.ariaLive}" aria-atomic="${s.ariaAtomic}"`}(s)}>\n                <div class="fl-slack-message">\n                    <div class="fl-avatar">\n                        <div class="fl-type-icon fl-${s}-icon">${c}</div>\n                    </div>\n                    <div class="fl-message-content">\n                        <div class="fl-message-text">${n}</div>\n                    </div>\n                    <div class="${a}">\n                        <button class="${t}" ${function(e){return`aria-label="Close ${e} message"`}(s)}>\n                            ${i()}\n                        </button>\n                    </div>\n                </div>\n            </div>`}};e.addTheme("slack",c)}));
diff --git a/src/Prime/Resources/public/flasher.min.css b/src/Prime/Resources/public/flasher.min.css
index cb304f12..fe9c34c5 100644
--- a/src/Prime/Resources/public/flasher.min.css
+++ b/src/Prime/Resources/public/flasher.min.css
@@ -1,11 +1,11 @@
-:root{--fl-success:#10b981;--fl-info:#3b82f6;--fl-warning:#f59e0b;--fl-error:#ef4444;--fl-success-light:color-mix(in srgb,var(--fl-success) 10%,transparent);--fl-info-light:color-mix(in srgb,var(--fl-info) 10%,transparent);--fl-warning-light:color-mix(in srgb,var(--fl-warning) 10%,transparent);--fl-error-light:color-mix(in srgb,var(--fl-error) 10%,transparent);--fl-white:#fff;--fl-black:#000;--fl-bg-light:var(--fl-white);--fl-bg-dark:#0f172a;--fl-text-light:#4b5563;--fl-text-dark:var(--fl-white);--fl-font:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--fl-border-radius:4px;--fl-shadow:0 4px 12px rgba(0,0,0,.15);--fl-shadow-dark:0 4px 12px rgba(0,0,0,.35);--fl-transition:0.4s cubic-bezier(0.23,1,0.32,1);--background-color:var(--fl-bg-light);--text-color:var(--fl-text-light);--dark-background-color:var(--fl-bg-dark);--dark-text-color:var(--fl-text-dark);--success-color:var(--fl-success);--info-color:var(--fl-info);--warning-color:var(--fl-warning);--error-color:var(--fl-error);--success-color-light:var(--fl-success-light);--info-color-light:var(--fl-info-light);--warning-color-light:var(--fl-warning-light);--error-color-light:var(--fl-error-light)}.fl-wrapper{pointer-events:none;position:fixed;transition:all .4s cubic-bezier(.23,1,.32,1);width:24em;z-index:1000}.fl-wrapper .fl-container{border-radius:var(--fl-border-radius,4px);opacity:0;pointer-events:auto;transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .4s cubic-bezier(.23,1,.32,1)}.fl-wrapper .fl-container.fl-show{opacity:1;transform:translate(0) scale(1)!important}.fl-wrapper.fl-stacked .fl-container:not(:last-child){margin-bottom:.5em}.fl-wrapper[data-position^=top-]{top:.75em}.fl-wrapper[data-position^=bottom-]{bottom:.75em}.fl-wrapper[data-position^=center-]{top:50%}.fl-wrapper[data-position$=-right]{right:.75em}.fl-wrapper[data-position$=-left]{left:.75em}.fl-wrapper[data-position$=-center]{left:50%}.fl-wrapper[data-position=center-left]{transform:translateY(-50%)}.fl-wrapper[data-position=center-left] .fl-container{transform:translateX(-110%)}.fl-wrapper[data-position=center-right]{transform:translateY(-50%)}.fl-wrapper[data-position=center-right] .fl-container{transform:translateX(110%)}.fl-wrapper[data-position=center-center]{transform:translate(-50%,-50%)}.fl-wrapper[data-position=center-center] .fl-container{opacity:0;transform:translate(0) scale(.5);transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .5s cubic-bezier(.23,1,.32,1)}.fl-wrapper[data-position=bottom-center],.fl-wrapper[data-position=top-center]{transform:translateX(-50%)}.fl-wrapper[data-position=top-center] .fl-container{transform:translateY(-150%)}.fl-wrapper[data-position=bottom-center] .fl-container{transform:translateY(150%)}.fl-wrapper[data-position=bottom-right] .fl-container,.fl-wrapper[data-position=top-right] .fl-container{transform:translateX(110%)}.fl-wrapper[data-position=bottom-left] .fl-container,.fl-wrapper[data-position=top-left] .fl-container{transform:translateX(-110%)}@media screen and (max-width:768px){.fl-wrapper{left:7.5%;right:7.5%;width:85%}.fl-wrapper[data-position$=-center],.fl-wrapper[data-position$=-left],.fl-wrapper[data-position$=-right]{left:50%;right:auto}.fl-wrapper[data-position^=top-]{top:.75em;transform:translateX(-50%)}.fl-wrapper[data-position^=bottom-]{bottom:.75em;transform:translateX(-50%)}.fl-wrapper[data-position^=center-]{top:50%;transform:translate(-50%,-50%)}}@media screen and (max-width:480px){.fl-wrapper{left:5%;right:5%;width:90%}}@media (prefers-color-scheme:dark){.fl-wrapper.fl-auto-dark .fl-container{box-shadow:var(--fl-shadow-dark,0 4px 12px rgba(0,0,0,.35))}}.fl-wrapper .fl-container.fl-dismissing{opacity:0;transition:all .3s ease-out}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-right],.fl-wrapper .fl-container.fl-dismissing[data-position=top-right]{transform:translateX(110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-left],.fl-wrapper .fl-container.fl-dismissing[data-position=top-left]{transform:translateX(-110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=top-center]{transform:translateY(-150%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-center]{transform:scale(.5);transition:opacity .4s ease-out,transform .4s ease-out}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-center]{transform:translateY(150%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-left]{transform:translateX(-110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-right]{transform:translateX(110%)}@media (prefers-reduced-motion:reduce){.fl-wrapper,.fl-wrapper .fl-container{transition:none!important}}.fl-container{color:var(--text-color,var(--fl-text-light));opacity:0;transform:translateY(-20px);transition:all .4s cubic-bezier(.23,1,.32,1);will-change:opacity,transform}.fl-container.fl-show{opacity:1;transform:translate(0)!important}.fl-container.fl-rtl{text-align:right}.fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-rtl .fl-progress .fl-progress{transform-origin:right center}.fl-icon{border-radius:50%;box-sizing:border-box;color:#fff;display:inline-block;height:1em;margin:0;min-height:1em;min-width:1em;position:relative;transition:transform .2s ease;width:1em}.fl-icon:after,.fl-icon:before{border-width:0;box-sizing:border-box;content:"";position:absolute;transition:inherit}.fl-success .fl-icon:after,.fl-success .fl-icon:before{background-color:currentcolor;border-radius:.1em;height:.6em;left:.35em;top:.6em;transform:rotate(-135deg);transform-origin:.08em .08em;width:.16em}.fl-success .fl-icon:after{height:.16em;width:.4em}.fl-info .fl-icon:after,.fl-info .fl-icon:before{background-color:currentcolor;border-radius:.03em;left:50%;transform:translateX(-50%);width:.15em}.fl-info .fl-icon:before{height:.38em;top:.4em}.fl-info .fl-icon:after{box-shadow:-.06em .19em,-.06em .44em,.06em .44em;height:.13em;top:.21em}.fl-warning .fl-icon:after,.fl-warning .fl-icon:before{background-color:currentcolor;border-radius:.03em;left:50%;transform:translateX(-50%);width:.15em}.fl-warning .fl-icon:before{height:.38em;top:.21em}.fl-warning .fl-icon:after{height:.13em;top:.65em}.fl-error .fl-icon:after,.fl-error .fl-icon:before{background-color:currentcolor;border-radius:.1em;height:.7em;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-135deg);width:.16em}.fl-error .fl-icon:after{transform:translate(-50%,-50%) rotate(-45deg)}.fl-success .fl-icon{background-color:var(--success-color,var(--fl-success))}.fl-info .fl-icon{background-color:var(--info-color,var(--fl-info))}.fl-warning .fl-icon{background-color:var(--warning-color,var(--fl-warning))}.fl-error .fl-icon{background-color:var(--error-color,var(--fl-error))}
+:root{--fl-success:#10b981;--fl-info:#3b82f6;--fl-warning:#f59e0b;--fl-error:#ef4444;--fl-success-light:color-mix(in srgb,var(--fl-success) 10%,transparent);--fl-info-light:color-mix(in srgb,var(--fl-info) 10%,transparent);--fl-warning-light:color-mix(in srgb,var(--fl-warning) 10%,transparent);--fl-error-light:color-mix(in srgb,var(--fl-error) 10%,transparent);--fl-white:#fff;--fl-black:#000;--fl-bg-light:var(--fl-white);--fl-bg-dark:#0f172a;--fl-text-light:#4b5563;--fl-text-dark:var(--fl-white);--fl-font:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--fl-font-size-xs:0.75rem;--fl-font-size-sm:0.875rem;--fl-font-size-base:1rem;--fl-font-size-lg:1.125rem;--fl-font-size-xl:1.25rem;--fl-spacing-xs:0.25rem;--fl-spacing-sm:0.5rem;--fl-spacing-md:0.75rem;--fl-spacing-lg:1rem;--fl-spacing-xl:1.5rem;--fl-spacing-2xl:2rem;--fl-close-sm:1.125rem;--fl-close-md:1.5rem;--fl-close-lg:1.875rem;--fl-border-radius:4px;--fl-radius-sm:0.25rem;--fl-radius-md:0.5rem;--fl-radius-lg:0.75rem;--fl-radius-xl:1rem;--fl-radius-full:9999px;--fl-shadow:0 4px 12px rgba(0,0,0,.15);--fl-shadow-dark:0 4px 12px rgba(0,0,0,.35);--fl-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--fl-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--fl-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--fl-transition:0.4s cubic-bezier(0.23,1,0.32,1);--fl-duration-fast:0.15s;--fl-duration-base:0.3s;--fl-duration-slow:0.5s;--fl-easing-spring:cubic-bezier(0.23,1,0.32,1);--fl-easing-material:cubic-bezier(0.4,0,0.2,1);--fl-slide-sm:8px;--fl-slide-md:12px;--fl-slide-lg:20px;--background-color:var(--fl-bg-light);--text-color:var(--fl-text-light);--dark-background-color:var(--fl-bg-dark);--dark-text-color:var(--fl-text-dark);--success-color:var(--fl-success);--info-color:var(--fl-info);--warning-color:var(--fl-warning);--error-color:var(--fl-error);--success-color-light:var(--fl-success-light);--info-color-light:var(--fl-info-light);--warning-color-light:var(--fl-warning-light);--error-color-light:var(--fl-error-light)}.fl-wrapper{pointer-events:none;position:fixed;transition:all .4s cubic-bezier(.23,1,.32,1);width:24em;z-index:1000}.fl-wrapper .fl-container{border-radius:var(--fl-border-radius,4px);opacity:0;pointer-events:auto;transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .4s cubic-bezier(.23,1,.32,1)}.fl-wrapper .fl-container.fl-show{opacity:1;transform:translate(0) scale(1)!important}.fl-wrapper.fl-stacked .fl-container:not(:last-child){margin-bottom:.5em}.fl-wrapper[data-position^=top-]{top:.75em}.fl-wrapper[data-position^=bottom-]{bottom:.75em}.fl-wrapper[data-position^=center-]{top:50%}.fl-wrapper[data-position$=-right]{right:.75em}.fl-wrapper[data-position$=-left]{left:.75em}.fl-wrapper[data-position$=-center]{left:50%}.fl-wrapper[data-position=center-left]{transform:translateY(-50%)}.fl-wrapper[data-position=center-left] .fl-container{transform:translateX(-110%)}.fl-wrapper[data-position=center-right]{transform:translateY(-50%)}.fl-wrapper[data-position=center-right] .fl-container{transform:translateX(110%)}.fl-wrapper[data-position=center-center]{transform:translate(-50%,-50%)}.fl-wrapper[data-position=center-center] .fl-container{opacity:0;transform:translate(0) scale(.5);transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .5s cubic-bezier(.23,1,.32,1)}.fl-wrapper[data-position=bottom-center],.fl-wrapper[data-position=top-center]{transform:translateX(-50%)}.fl-wrapper[data-position=top-center] .fl-container{transform:translateY(-150%)}.fl-wrapper[data-position=bottom-center] .fl-container{transform:translateY(150%)}.fl-wrapper[data-position=bottom-right] .fl-container,.fl-wrapper[data-position=top-right] .fl-container{transform:translateX(110%)}.fl-wrapper[data-position=bottom-left] .fl-container,.fl-wrapper[data-position=top-left] .fl-container{transform:translateX(-110%)}@media screen and (max-width:768px){.fl-wrapper{left:7.5%;right:7.5%;width:85%}.fl-wrapper[data-position$=-center],.fl-wrapper[data-position$=-left],.fl-wrapper[data-position$=-right]{left:50%;right:auto}.fl-wrapper[data-position^=top-]{top:.75em;transform:translateX(-50%)}.fl-wrapper[data-position^=bottom-]{bottom:.75em;transform:translateX(-50%)}.fl-wrapper[data-position^=center-]{top:50%;transform:translate(-50%,-50%)}}@media screen and (max-width:480px){.fl-wrapper{left:5%;right:5%;width:90%}}@media (prefers-color-scheme:dark){.fl-wrapper.fl-auto-dark .fl-container{box-shadow:var(--fl-shadow-dark,0 4px 12px rgba(0,0,0,.35))}}.fl-wrapper .fl-container.fl-dismissing{opacity:0;transition:all .3s ease-out}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-right],.fl-wrapper .fl-container.fl-dismissing[data-position=top-right]{transform:translateX(110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-left],.fl-wrapper .fl-container.fl-dismissing[data-position=top-left]{transform:translateX(-110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=top-center]{transform:translateY(-150%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-center]{transform:scale(.5);transition:opacity .4s ease-out,transform .4s ease-out}.fl-wrapper .fl-container.fl-dismissing[data-position=bottom-center]{transform:translateY(150%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-left]{transform:translateX(-110%)}.fl-wrapper .fl-container.fl-dismissing[data-position=center-right]{transform:translateX(110%)}@media (prefers-reduced-motion:reduce){.fl-wrapper,.fl-wrapper .fl-container{transition:none!important}}.fl-container{color:var(--text-color,var(--fl-text-light));opacity:0;transform:translateY(-20px);transition:all .4s cubic-bezier(.23,1,.32,1);will-change:opacity,transform}.fl-container.fl-show{opacity:1;transform:translate(0)!important}.fl-container.fl-rtl{text-align:right}.fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-rtl .fl-progress .fl-progress{transform-origin:right center}.fl-icon{border-radius:50%;box-sizing:border-box;color:#fff;display:inline-block;height:1em;margin:0;min-height:1em;min-width:1em;position:relative;transition:transform .2s ease;width:1em}.fl-icon:after,.fl-icon:before{border-width:0;box-sizing:border-box;content:"";position:absolute;transition:inherit}.fl-success .fl-icon:after,.fl-success .fl-icon:before{background-color:currentcolor;border-radius:.1em;height:.6em;left:.35em;top:.6em;transform:rotate(-135deg);transform-origin:.08em .08em;width:.16em}.fl-success .fl-icon:after{height:.16em;width:.4em}.fl-info .fl-icon:after,.fl-info .fl-icon:before{background-color:currentcolor;border-radius:.03em;left:50%;transform:translateX(-50%);width:.15em}.fl-info .fl-icon:before{height:.38em;top:.4em}.fl-info .fl-icon:after{box-shadow:-.06em .19em,-.06em .44em,.06em .44em;height:.13em;top:.21em}.fl-warning .fl-icon:after,.fl-warning .fl-icon:before{background-color:currentcolor;border-radius:.03em;left:50%;transform:translateX(-50%);width:.15em}.fl-warning .fl-icon:before{height:.38em;top:.21em}.fl-warning .fl-icon:after{height:.13em;top:.65em}.fl-error .fl-icon:after,.fl-error .fl-icon:before{background-color:currentcolor;border-radius:.1em;height:.7em;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-135deg);width:.16em}.fl-error .fl-icon:after{transform:translate(-50%,-50%) rotate(-45deg)}.fl-success .fl-icon{background-color:var(--success-color,var(--fl-success))}.fl-info .fl-icon{background-color:var(--info-color,var(--fl-info))}.fl-warning .fl-icon{background-color:var(--warning-color,var(--fl-warning))}.fl-error .fl-icon{background-color:var(--error-color,var(--fl-error))}
 .fl-amazon{--amazon-bg-light:#fff;--amazon-bg-dark:#202124;--amazon-text-light:#0f1111;--amazon-text-secondary-light:#565959;--amazon-text-dark:#fff;--amazon-text-secondary-dark:#b6b6b6;--amazon-border-light:#ddd;--amazon-border-dark:#3f3f3f;--amazon-yellow:#ffd814;--amazon-orange:#f90;--amazon-success-bg:#f0fff5;--amazon-success-border:#7fda95;--amazon-success-icon:#007600;--amazon-info-bg:#f3f9ff;--amazon-info-border:#7fb4da;--amazon-info-icon:#0066c0;--amazon-warning-bg:#fffcf3;--amazon-warning-border:#ffd996;--amazon-warning-icon:#c45500;--amazon-error-bg:#fff5f5;--amazon-error-border:#ff8f8f;--amazon-error-icon:#c40000;--amazon-success-bg-dark:#082d11;--amazon-success-border-dark:#1e6e2c;--amazon-success-icon-dark:#7fda95;--amazon-info-bg-dark:#0a1c2e;--amazon-info-border-dark:#1a5183;--amazon-info-icon-dark:#7fb4da;--amazon-warning-bg-dark:#342a0a;--amazon-warning-border-dark:#705711;--amazon-warning-icon-dark:#ffd996;--amazon-error-bg-dark:#2b0c0c;--amazon-error-border-dark:#721c1c;--amazon-error-icon-dark:#ff8f8f;--amazon-animation-duration:0.2s}@keyframes amazonSlideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.fl-amazon{animation:amazonSlideDown var(--amazon-animation-duration) ease-out;font-family:Arial,sans-serif;margin:10px 0;position:relative}.fl-amazon .fl-amazon-alert{background-color:var(--amazon-bg-light);border:1px solid;border-left:4px solid;border-radius:8px;box-shadow:0 2px 5px rgba(15,17,17,.15);color:var(--amazon-text-light);display:flex;padding:14px}.fl-amazon .fl-alert-content{align-items:flex-start;display:flex;flex:1}.fl-amazon .fl-icon-container{color:currentColor;flex-shrink:0;margin-right:12px}.fl-amazon .fl-text-content{flex:1;min-width:0}.fl-amazon .fl-alert-title{font-size:16px;font-weight:700;margin-bottom:4px}.fl-amazon .fl-alert-message{color:var(--amazon-text-secondary-light);font-size:14px;line-height:20px}.fl-amazon .fl-alert-actions{margin-left:16px}.fl-amazon .fl-close{align-items:center;background:none;border:none;border-radius:50%;color:var(--amazon-text-secondary-light);cursor:pointer;display:flex;height:30px;justify-content:center;padding:0;transition:all .2s;width:30px}.fl-amazon .fl-close:hover{background-color:rgba(0,0,0,.05);color:var(--amazon-text-light)}.fl-amazon.fl-success .fl-amazon-alert{background-color:var(--amazon-success-bg);border-color:var(--amazon-success-border)}.fl-amazon.fl-success .fl-icon-container{color:var(--amazon-success-icon)}.fl-amazon.fl-info .fl-amazon-alert{background-color:var(--amazon-info-bg);border-color:var(--amazon-info-border)}.fl-amazon.fl-info .fl-icon-container{color:var(--amazon-info-icon)}.fl-amazon.fl-warning .fl-amazon-alert{background-color:var(--amazon-warning-bg);border-color:var(--amazon-warning-border)}.fl-amazon.fl-warning .fl-icon-container{color:var(--amazon-warning-icon)}.fl-amazon.fl-error .fl-amazon-alert{background-color:var(--amazon-error-bg);border-color:var(--amazon-error-border)}.fl-amazon.fl-error .fl-icon-container{color:var(--amazon-error-icon)}.fl-amazon.fl-rtl{direction:rtl}.fl-amazon.fl-rtl .fl-icon-container{margin-left:12px;margin-right:0}.fl-amazon.fl-rtl .fl-alert-actions{margin-left:0;margin-right:16px}.fl-amazon.fl-rtl .fl-amazon-alert{border-left-width:1px;border-right-width:4px}@media (prefers-reduced-motion:reduce){.fl-amazon{animation:none}}.fl-amazon.fl-auto-dark .fl-amazon-alert,body.fl-dark .fl-amazon .fl-amazon-alert,html.fl-dark .fl-amazon .fl-amazon-alert{background-color:var(--amazon-bg-dark);border-color:var(--amazon-border-dark);box-shadow:0 2px 5px rgba(0,0,0,.3);color:var(--amazon-text-dark)}.fl-amazon.fl-auto-dark .fl-alert-message,.fl-amazon.fl-auto-dark .fl-close,body.fl-dark .fl-amazon .fl-alert-message,body.fl-dark .fl-amazon .fl-close,html.fl-dark .fl-amazon .fl-alert-message,html.fl-dark .fl-amazon .fl-close{color:var(--amazon-text-secondary-dark)}.fl-amazon.fl-auto-dark .fl-close:hover,body.fl-dark .fl-amazon .fl-close:hover,html.fl-dark .fl-amazon .fl-close:hover{background-color:hsla(0,0%,100%,.1);color:var(--amazon-text-dark)}.fl-amazon.fl-auto-dark.fl-success .fl-amazon-alert,body.fl-dark .fl-amazon.fl-success .fl-amazon-alert,html.fl-dark .fl-amazon.fl-success .fl-amazon-alert{background-color:var(--amazon-success-bg-dark);border-color:var(--amazon-success-border-dark)}.fl-amazon.fl-auto-dark.fl-success .fl-icon-container,body.fl-dark .fl-amazon.fl-success .fl-icon-container,html.fl-dark .fl-amazon.fl-success .fl-icon-container{color:var(--amazon-success-icon-dark)}.fl-amazon.fl-auto-dark.fl-info .fl-amazon-alert,body.fl-dark .fl-amazon.fl-info .fl-amazon-alert,html.fl-dark .fl-amazon.fl-info .fl-amazon-alert{background-color:var(--amazon-info-bg-dark);border-color:var(--amazon-info-border-dark)}.fl-amazon.fl-auto-dark.fl-info .fl-icon-container,body.fl-dark .fl-amazon.fl-info .fl-icon-container,html.fl-dark .fl-amazon.fl-info .fl-icon-container{color:var(--amazon-info-icon-dark)}.fl-amazon.fl-auto-dark.fl-warning .fl-amazon-alert,body.fl-dark .fl-amazon.fl-warning .fl-amazon-alert,html.fl-dark .fl-amazon.fl-warning .fl-amazon-alert{background-color:var(--amazon-warning-bg-dark);border-color:var(--amazon-warning-border-dark)}.fl-amazon.fl-auto-dark.fl-warning .fl-icon-container,body.fl-dark .fl-amazon.fl-warning .fl-icon-container,html.fl-dark .fl-amazon.fl-warning .fl-icon-container{color:var(--amazon-warning-icon-dark)}.fl-amazon.fl-auto-dark.fl-error .fl-amazon-alert,body.fl-dark .fl-amazon.fl-error .fl-amazon-alert,html.fl-dark .fl-amazon.fl-error .fl-amazon-alert{background-color:var(--amazon-error-bg-dark);border-color:var(--amazon-error-border-dark)}.fl-amazon.fl-auto-dark.fl-error .fl-icon-container,body.fl-dark .fl-amazon.fl-error .fl-icon-container,html.fl-dark .fl-amazon.fl-error .fl-icon-container{color:var(--amazon-error-icon-dark)}
 .fl-amber{--amber-bg-light:#fff;--amber-bg-dark:#1e293b;--amber-text-light:#4b5563;--amber-text-dark:#f1f5f9;--amber-shadow:0 5px 15px rgba(0,0,0,.08);--amber-shadow-dark:0 5px 15px rgba(0,0,0,.2);--amber-border-radius:4px;--amber-success:#10b981;--amber-info:#3b82f6;--amber-warning:#f59e0b;--amber-error:#ef4444}@keyframes amberIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.fl-amber{animation:amberIn .3s ease-out;background-color:var(--amber-bg-light);border-radius:var(--amber-border-radius) var(--amber-border-radius) 0 0;box-shadow:var(--amber-shadow);color:var(--amber-text-light);font-family:var(--fl-font),serif;margin:.6rem 0;padding:.85rem 1rem;position:relative;will-change:transform,opacity}.fl-amber .fl-content{align-items:center;display:flex}.fl-amber .fl-icon{font-size:1.85em;margin-right:.8rem}.fl-amber .fl-text{flex:1}.fl-amber .fl-message{font-size:.875em;line-height:1.4}.fl-amber .fl-close{background:none;border:none;color:currentColor;cursor:pointer;flex-shrink:0;font-size:1.15rem;margin-left:1rem;opacity:.6;padding:.25rem;touch-action:manipulation;transition:opacity .2s}.fl-amber .fl-close:focus,.fl-amber .fl-close:hover{opacity:1}.fl-amber .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-amber .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-amber.fl-success .fl-close{color:var(--amber-success)}.fl-amber.fl-info .fl-close{color:var(--amber-info)}.fl-amber.fl-warning .fl-close{color:var(--amber-warning)}.fl-amber.fl-error .fl-close{color:var(--amber-error)}.fl-amber.fl-rtl{direction:rtl}.fl-amber.fl-rtl .fl-icon{margin-left:.8rem;margin-right:0}.fl-amber.fl-rtl .fl-close{margin-left:0;margin-right:1rem}.fl-amber.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-amber{animation:none}}.fl-amber.fl-auto-dark,body.fl-dark .fl-amber,html.fl-dark .fl-amber{background-color:var(--amber-bg-dark);box-shadow:var(--amber-shadow-dark);color:var(--amber-text-dark)}
 .fl-aurora{--aurora-bg-light:#fff;--aurora-bg-dark:#14141c;--aurora-text-light:#1e293b;--aurora-text-dark:#f8fafc;--aurora-shadow:0 8px 25px rgba(0,0,0,.08);--aurora-shadow-dark:0 10px 30px rgba(0,0,0,.16);--aurora-border-radius:4px;--aurora-blur:15px;--aurora-success-gradient:linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.2));--aurora-info-gradient:linear-gradient(135deg,rgba(59,130,246,.08),rgba(59,130,246,.2));--aurora-warning-gradient:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.2));--aurora-error-gradient:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.2));--aurora-success:#10b981;--aurora-info:#3b82f6;--aurora-warning:#f59e0b;--aurora-error:#ef4444}@keyframes auroraFadeIn{0%{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.fl-aurora{animation:auroraFadeIn .35s cubic-bezier(.21,1.02,.73,1);backdrop-filter:blur(var(--aurora-blur));-webkit-backdrop-filter:blur(var(--aurora-blur));background-color:var(--aurora-bg-light);border-radius:var(--aurora-border-radius) var(--aurora-border-radius) 0 0;box-shadow:var(--aurora-shadow);color:var(--aurora-text-light);font-family:var(--fl-font),sans-serif;margin:10px 0;overflow:hidden;padding:16px 18px;position:relative;will-change:transform,opacity}.fl-aurora:before{border-radius:inherit;content:"";inset:0;opacity:.8;position:absolute;z-index:0}.fl-aurora .fl-content{align-items:center;display:flex;position:relative;z-index:1}.fl-aurora .fl-message{flex:1;font-size:.9375rem;font-weight:500;line-height:1.5;margin-right:10px}.fl-aurora .fl-close{align-items:center;background:rgba(0,0,0,.05);border:none;border-radius:50%;color:inherit;cursor:pointer;display:flex;flex-shrink:0;font-size:1rem;height:28px;justify-content:center;opacity:.7;transition:all .2s ease;width:28px}.fl-aurora .fl-close:focus,.fl-aurora .fl-close:hover{background:rgba(0,0,0,.1);opacity:1}.fl-aurora .fl-progress-bar{border-radius:6px;bottom:2px;height:3px;left:2px;opacity:.7;overflow:hidden;position:absolute;right:2px;z-index:1}.fl-aurora .fl-progress{height:100%;width:100%}.fl-aurora.fl-success:before{background:var(--aurora-success-gradient)}.fl-aurora.fl-success .fl-progress{background-color:var(--aurora-success)}.fl-aurora.fl-info:before{background:var(--aurora-info-gradient)}.fl-aurora.fl-info .fl-progress{background-color:var(--aurora-info)}.fl-aurora.fl-warning:before{background:var(--aurora-warning-gradient)}.fl-aurora.fl-warning .fl-progress{background-color:var(--aurora-warning)}.fl-aurora.fl-error:before{background:var(--aurora-error-gradient)}.fl-aurora.fl-error .fl-progress{background-color:var(--aurora-error)}.fl-aurora.fl-rtl{direction:rtl}.fl-aurora.fl-rtl .fl-message{margin-left:10px;margin-right:0}.fl-aurora.fl-rtl .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-aurora{animation:none}}.fl-aurora.fl-auto-dark,body.fl-dark .fl-aurora,html.fl-dark .fl-aurora{background-color:var(--aurora-bg-dark);box-shadow:var(--aurora-shadow-dark);color:var(--aurora-text-dark)}.fl-aurora.fl-auto-dark .fl-close,body.fl-dark .fl-aurora .fl-close,html.fl-dark .fl-aurora .fl-close{background:hsla(0,0%,100%,.1)}.fl-aurora.fl-auto-dark .fl-close:focus,.fl-aurora.fl-auto-dark .fl-close:hover,body.fl-dark .fl-aurora .fl-close:focus,body.fl-dark .fl-aurora .fl-close:hover,html.fl-dark .fl-aurora .fl-close:focus,html.fl-dark .fl-aurora .fl-close:hover{background:hsla(0,0%,100%,.15)}.fl-aurora.fl-auto-dark.fl-success:before,body.fl-dark .fl-aurora.fl-success:before,html.fl-dark .fl-aurora.fl-success:before{background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(16,185,129,.25))}.fl-aurora.fl-auto-dark.fl-info:before,body.fl-dark .fl-aurora.fl-info:before,html.fl-dark .fl-aurora.fl-info:before{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(59,130,246,.25))}.fl-aurora.fl-auto-dark.fl-warning:before,body.fl-dark .fl-aurora.fl-warning:before,html.fl-dark .fl-aurora.fl-warning:before{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,.25))}.fl-aurora.fl-auto-dark.fl-error:before,body.fl-dark .fl-aurora.fl-error:before,html.fl-dark .fl-aurora.fl-error:before{background:linear-gradient(135deg,rgba(239,68,68,.1),rgba(239,68,68,.25))}
 .fl-crystal{--crystal-bg-light:#fff;--crystal-bg-dark:rgba(30,30,30,.95);--crystal-text-light:#2c3e50;--crystal-text-dark:hsla(0,0%,100%,.95);--crystal-shadow:rgba(0,0,0,.08);--crystal-shadow-dark:rgba(0,0,0,.25)}@keyframes crystalIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes crystalPulse{0%{box-shadow:0 2px 8px var(--crystal-shadow)}50%{box-shadow:0 4px 12px var(--crystal-shadow)}to{box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal{animation:crystalIn .3s ease-out;background:var(--crystal-bg-light,var(--fl-bg-light));border-radius:var(--fl-border-radius,4px) var(--fl-border-radius,4px) 0 0;box-shadow:0 2px 8px var(--crystal-shadow);font-family:var(--fl-font),serif;margin:0 0 1rem;position:relative;transition:box-shadow .3s ease;will-change:transform,opacity}.fl-crystal:hover{animation:crystalPulse 2s ease-in-out infinite}.fl-crystal .fl-content{align-items:center;display:flex;gap:.75rem;padding:1rem 2.5rem 1rem 1rem}.fl-crystal .fl-text{flex:1}.fl-crystal .fl-message{color:var(--crystal-text-light,var(--fl-text-light));font-size:.9375rem;line-height:1.4;margin:0}.fl-crystal .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:1.25rem;line-height:1;opacity:.5;padding:.25rem;position:absolute;right:.75rem;top:50%;touch-action:manipulation;transform:translateY(-50%);transition:all .2s ease}.fl-crystal .fl-close:focus,.fl-crystal .fl-close:hover{opacity:1;transform:translateY(-50%) scale(1.1)}.fl-crystal .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-crystal .fl-progress-bar .fl-progress{height:100%;transform-origin:left center;width:100%}.fl-crystal.fl-success,.fl-crystal.fl-success .fl-message{color:var(--success-color,var(--fl-success))}.fl-crystal.fl-error,.fl-crystal.fl-error .fl-message{color:var(--error-color,var(--fl-error))}.fl-crystal.fl-warning,.fl-crystal.fl-warning .fl-message{color:var(--warning-color,var(--fl-warning))}.fl-crystal.fl-info,.fl-crystal.fl-info .fl-message{color:var(--info-color,var(--fl-info))}.fl-crystal.fl-rtl{direction:rtl}.fl-crystal.fl-rtl .fl-content{padding:1rem 1rem 1rem 2.5rem}.fl-crystal.fl-rtl .fl-close{left:.75rem;right:auto}.fl-crystal.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-crystal{animation:none}.fl-crystal:hover{animation:none;box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal.fl-auto-dark,body.fl-dark .fl-crystal,html.fl-dark .fl-crystal{background-color:var(--crystal-bg-dark,var(--fl-bg-dark));box-shadow:0 2px 8px var(--crystal-shadow-dark)}.fl-crystal.fl-auto-dark .fl-message,body.fl-dark .fl-crystal .fl-message,html.fl-dark .fl-crystal .fl-message{color:var(--crystal-text-dark,var(--fl-text-dark))}.fl-crystal.fl-auto-dark:hover,body.fl-dark .fl-crystal:hover,html.fl-dark .fl-crystal:hover{animation:none;box-shadow:0 4px 16px var(--crystal-shadow-dark)}
 .fl-emerald{--emerald-bg-light:#fff;--emerald-bg-dark:#1e1e1e;--emerald-text-light:#333;--emerald-text-dark:hsla(0,0%,100%,.9);--emerald-shadow:rgba(0,0,0,.1);--emerald-blur:8px;--emerald-success:var(--success-color,#16a085);--emerald-error:var(--error-color,#e74c3c);--emerald-warning:var(--warning-color,#f39c12);--emerald-info:var(--info-color,#3498db)}@keyframes emeraldIn{0%{opacity:0;transform:scale(.5) translateY(20px)}60%{opacity:1;transform:scale(1.1) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.fl-emerald{animation:emeraldIn .5s cubic-bezier(.23,1,.32,1);backdrop-filter:blur(var(--emerald-blur));-webkit-backdrop-filter:blur(var(--emerald-blur));background:var(--emerald-bg-light);border-radius:4px 4px 0 0;box-shadow:0 10px 20px var(--emerald-shadow);color:var(--emerald-text-light);font-family:"Inter",var(--fl-font),serif;margin:0 0 .5rem;overflow:hidden;padding:1rem 1.5rem 1rem 1rem;position:relative}.fl-emerald .fl-content{align-items:center;display:flex}.fl-emerald .fl-message{flex:1;font-size:.9rem;font-weight:500;line-height:1.4}.fl-emerald .fl-close{background:transparent;border:none;color:currentColor;cursor:pointer;font-size:1.3rem;margin-left:auto;opacity:.7;transition:opacity .2s ease}.fl-emerald .fl-close:focus,.fl-emerald .fl-close:hover{opacity:1}.fl-emerald.fl-success{color:var(--emerald-success)}.fl-emerald.fl-error{color:var(--emerald-error)}.fl-emerald.fl-warning{color:var(--emerald-warning)}.fl-emerald.fl-info{color:var(--emerald-info)}.fl-emerald.fl-rtl{direction:rtl;padding:1rem 1rem 1rem 1.5rem}.fl-emerald.fl-rtl .fl-content{flex-direction:row-reverse}.fl-emerald.fl-rtl .fl-close{margin-left:0;margin-right:auto}@media (prefers-reduced-motion:reduce){.fl-emerald{animation:none}}.fl-emerald.fl-auto-dark,body.fl-dark .fl-emerald,html.fl-dark .fl-emerald{background:var(--emerald-bg-dark)}.fl-emerald.fl-auto-dark .fl-message,body.fl-dark .fl-emerald .fl-message,html.fl-dark .fl-emerald .fl-message{color:var(--emerald-text-dark)}
 .fl-facebook{--fb-bg-light:#fff;--fb-bg-dark:#242526;--fb-text-light:#050505;--fb-text-secondary-light:#65676b;--fb-text-dark:#e4e6eb;--fb-text-secondary-dark:#b0b3b8;--fb-hover-light:#f0f2f5;--fb-hover-dark:#3a3b3c;--fb-border-light:#e4e6eb;--fb-border-dark:#3e4042;--fb-blue:#1876f2;--fb-name-color:#050505;--fb-name-color-dark:#e4e6eb;--fb-success:#31a24c;--fb-info:#1876f2;--fb-warning:#f7b928;--fb-error:#e41e3f;--fb-success-bg:#e7f3ff;--fb-info-bg:#e7f3ff;--fb-warning-bg:#fff5cc;--fb-error-bg:#ffebe9;--fb-success-bg-dark:#263c4b;--fb-info-bg-dark:#263c4b;--fb-warning-bg-dark:#3e3c26;--fb-error-bg-dark:#472835;--fb-animation-duration:0.2s}@keyframes fbFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.fl-facebook{animation:fbFadeIn var(--fb-animation-duration) ease-out;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:8px 0;position:relative}.fl-facebook .fl-fb-notification{align-items:flex-start;background-color:var(--fb-bg-light);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--fb-text-light);display:flex;padding:12px;transition:background-color .1s ease}.fl-facebook .fl-fb-notification:hover{background-color:var(--fb-hover-light)}.fl-facebook .fl-icon-container{flex-shrink:0;margin-right:12px}.fl-facebook .fl-fb-icon{align-items:center;border-radius:50%;display:flex;height:36px;justify-content:center;width:36px}.fl-facebook .fl-fb-icon svg{color:#fff}.fl-facebook .fl-fb-icon-success{background-color:var(--fb-success)}.fl-facebook .fl-fb-icon-info{background-color:var(--fb-info)}.fl-facebook .fl-fb-icon-warning{background-color:var(--fb-warning)}.fl-facebook .fl-fb-icon-error{background-color:var(--fb-error)}.fl-facebook .fl-content{flex:1;min-width:0}.fl-facebook .fl-message{font-size:15px;line-height:1.33;margin-bottom:4px}.fl-facebook .fl-user-name{color:var(--fb-name-color);font-weight:600;margin-right:4px}.fl-facebook .fl-meta{align-items:center;display:flex}.fl-facebook .fl-time{color:var(--fb-text-secondary-light);font-size:13px}.fl-facebook .fl-actions{align-items:center;display:flex;margin-left:12px}.fl-facebook .fl-button{align-items:center;background:var(--fb-hover-light);border:none;border-radius:50%;color:var(--fb-text-secondary-light);cursor:pointer;display:flex;height:32px;justify-content:center;margin-left:8px;transition:background-color .1s;width:32px}.fl-facebook .fl-button:hover{background-color:var(--fb-border-light)}.fl-facebook .fl-button-icon{align-items:center;display:flex;justify-content:center}.fl-facebook.fl-rtl{direction:rtl}.fl-facebook.fl-rtl .fl-icon-container{margin-left:12px;margin-right:0}.fl-facebook.fl-rtl .fl-user-name{margin-left:4px;margin-right:0}.fl-facebook.fl-rtl .fl-actions{margin-left:0;margin-right:12px}.fl-facebook.fl-rtl .fl-button{margin-left:0;margin-right:8px}@media (prefers-reduced-motion:reduce){.fl-facebook{animation:none}}.fl-facebook.fl-auto-dark .fl-fb-notification,body.fl-dark .fl-facebook .fl-fb-notification,html.fl-dark .fl-facebook .fl-fb-notification{background-color:var(--fb-bg-dark);box-shadow:0 1px 2px rgba(0,0,0,.2);color:var(--fb-text-dark)}.fl-facebook.fl-auto-dark .fl-fb-notification:hover,body.fl-dark .fl-facebook .fl-fb-notification:hover,html.fl-dark .fl-facebook .fl-fb-notification:hover{background-color:var(--fb-hover-dark)}.fl-facebook.fl-auto-dark .fl-user-name,body.fl-dark .fl-facebook .fl-user-name,html.fl-dark .fl-facebook .fl-user-name{color:var(--fb-name-color-dark)}.fl-facebook.fl-auto-dark .fl-time,body.fl-dark .fl-facebook .fl-time,html.fl-dark .fl-facebook .fl-time{color:var(--fb-text-secondary-dark)}.fl-facebook.fl-auto-dark .fl-button,body.fl-dark .fl-facebook .fl-button,html.fl-dark .fl-facebook .fl-button{background:var(--fb-hover-dark);color:var(--fb-text-secondary-dark)}.fl-facebook.fl-auto-dark .fl-button:hover,body.fl-dark .fl-facebook .fl-button:hover,html.fl-dark .fl-facebook .fl-button:hover{background-color:var(--fb-border-dark)}.fl-facebook.fl-auto-dark .fl-fb-icon-success,body.fl-dark .fl-facebook .fl-fb-icon-success,html.fl-dark .fl-facebook .fl-fb-icon-success{background-color:var(--fb-success-bg-dark)}.fl-facebook.fl-auto-dark .fl-fb-icon-success svg,body.fl-dark .fl-facebook .fl-fb-icon-success svg,html.fl-dark .fl-facebook .fl-fb-icon-success svg{color:var(--fb-success)}.fl-facebook.fl-auto-dark .fl-fb-icon-info,body.fl-dark .fl-facebook .fl-fb-icon-info,html.fl-dark .fl-facebook .fl-fb-icon-info{background-color:var(--fb-info-bg-dark)}.fl-facebook.fl-auto-dark .fl-fb-icon-info svg,body.fl-dark .fl-facebook .fl-fb-icon-info svg,html.fl-dark .fl-facebook .fl-fb-icon-info svg{color:var(--fb-info)}.fl-facebook.fl-auto-dark .fl-fb-icon-warning,body.fl-dark .fl-facebook .fl-fb-icon-warning,html.fl-dark .fl-facebook .fl-fb-icon-warning{background-color:var(--fb-warning-bg-dark)}.fl-facebook.fl-auto-dark .fl-fb-icon-warning svg,body.fl-dark .fl-facebook .fl-fb-icon-warning svg,html.fl-dark .fl-facebook .fl-fb-icon-warning svg{color:var(--fb-warning)}.fl-facebook.fl-auto-dark .fl-fb-icon-error,body.fl-dark .fl-facebook .fl-fb-icon-error,html.fl-dark .fl-facebook .fl-fb-icon-error{background-color:var(--fb-error-bg-dark)}.fl-facebook.fl-auto-dark .fl-fb-icon-error svg,body.fl-dark .fl-facebook .fl-fb-icon-error svg,html.fl-dark .fl-facebook .fl-fb-icon-error svg{color:var(--fb-error)}
-@keyframes flasherIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}@keyframes flasherInRtl{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.fl-flasher{animation:flasherIn .3s ease-out;background-color:var(--background-color,var(--fl-bg-light));border-bottom:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:var(--text-color,var(--fl-text-light));font-family:var(--fl-font),serif;line-height:1.5;margin:.75em 0;padding:.75em;position:relative;transition:transform .2s ease;will-change:transform,opacity;word-break:break-word}.fl-flasher:hover{transform:translateY(-2px)}.fl-flasher.fl-rtl{animation:flasherInRtl .3s ease-out;border-radius:0 .375em .375em 0}.fl-flasher:not(.fl-rtl){border-radius:.375em 0 0 .375em}.fl-flasher .fl-content{align-items:center;display:flex}.fl-flasher .fl-icon{font-size:2.5em}.fl-flasher .fl-message,.fl-flasher .fl-title{display:block;line-height:1.25em;margin-left:1em;margin-right:1em}.fl-flasher.fl-rtl .fl-message,.fl-flasher.fl-rtl .fl-title{margin-left:1em;margin-right:1em}.fl-flasher .fl-title{font-size:1em;font-weight:600}.fl-flasher .fl-message{font-size:.875em;margin-top:.25em}.fl-flasher .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:1.25rem;line-height:1;opacity:.5;padding:.25rem;position:absolute;right:.75rem;top:50%;touch-action:manipulation;transform:translateY(-50%);transition:opacity .2s ease}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{opacity:1}.fl-flasher.fl-rtl .fl-content{flex-direction:row-reverse}.fl-flasher.fl-rtl .fl-close{left:.75rem;right:auto}.fl-flasher.fl-success{border-left:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success.fl-rtl{border-left:none;border-right:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success:not(.fl-rtl){border-left:.8em solid var(--success-color,var(--fl-success));border-right:none}.fl-flasher.fl-success .fl-close,.fl-flasher.fl-success .fl-title{color:var(--success-color,var(--fl-success))}.fl-flasher.fl-success .fl-close:focus,.fl-flasher.fl-success .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-info{border-left:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info.fl-rtl{border-left:none;border-right:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info:not(.fl-rtl){border-left:.8em solid var(--info-color,var(--fl-info));border-right:none}.fl-flasher.fl-info .fl-close,.fl-flasher.fl-info .fl-title{color:var(--info-color,var(--fl-info))}.fl-flasher.fl-info .fl-close:focus,.fl-flasher.fl-info .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-warning{border-left:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning.fl-rtl{border-left:none;border-right:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning:not(.fl-rtl){border-left:.8em solid var(--warning-color,var(--fl-warning));border-right:none}.fl-flasher.fl-warning .fl-close,.fl-flasher.fl-warning .fl-title{color:var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning .fl-close:focus,.fl-flasher.fl-warning .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-error{border-left:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error.fl-rtl{border-left:none;border-right:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error:not(.fl-rtl){border-left:.8em solid var(--error-color,var(--fl-error));border-right:none}.fl-flasher.fl-error .fl-close,.fl-flasher.fl-error .fl-title{color:var(--error-color,var(--fl-error))}.fl-flasher.fl-error .fl-close:focus,.fl-flasher.fl-error .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher .fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-flasher.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-flasher.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;width:100%}.fl-flasher.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-flasher.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;width:100%}.fl-flasher.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-flasher.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;width:100%}.fl-flasher.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-flasher.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;width:100%}@media (prefers-color-scheme:dark){.fl-flasher.fl-auto-dark{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}}body.fl-dark .fl-flasher,html.fl-dark .fl-flasher{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}@media (prefers-reduced-motion:reduce){.fl-flasher{animation:none}.fl-flasher:hover{transform:none}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{transform:translateY(-50%)}}
+@keyframes flasherIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}@keyframes flasherInRtl{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.fl-flasher{animation:flasherIn .3s ease-out;background-color:var(--background-color,var(--fl-bg-light));border-bottom:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:var(--text-color,var(--fl-text-light));font-family:var(--fl-font),serif;line-height:1.5;margin:.75em 0;padding:.75em;position:relative;transition:transform .2s ease;will-change:transform,opacity;word-break:break-word}.fl-flasher:hover{transform:translateY(-2px)}.fl-flasher.fl-rtl{animation:flasherInRtl .3s ease-out;border-radius:0 .375em .375em 0}.fl-flasher:not(.fl-rtl){border-radius:.375em 0 0 .375em}.fl-flasher .fl-content{align-items:center;display:flex}.fl-flasher .fl-icon{font-size:2.5em}.fl-flasher .fl-message,.fl-flasher .fl-title{display:block;line-height:1.25em;margin-left:1em;margin-right:1em}.fl-flasher.fl-rtl .fl-message,.fl-flasher.fl-rtl .fl-title{margin-left:1em;margin-right:1em}.fl-flasher .fl-title{font-size:1em;font-weight:600}.fl-flasher .fl-message{font-size:.875em;margin-top:.25em}.fl-flasher .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:var(--fl-font-size-xl,1.25rem);line-height:1;opacity:.5;padding:var(--fl-spacing-xs,.25rem);position:absolute;right:var(--fl-spacing-md,.75rem);top:50%;touch-action:manipulation;transform:translateY(-50%);transition:opacity var(--fl-duration-fast,.15s) ease}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{opacity:1}.fl-flasher .fl-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.fl-flasher.fl-rtl .fl-content{flex-direction:row-reverse}.fl-flasher.fl-rtl .fl-close{left:var(--fl-spacing-md,.75rem);right:auto}.fl-flasher.fl-success{border-left:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success.fl-rtl{border-left:none;border-right:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success:not(.fl-rtl){border-left:.8em solid var(--success-color,var(--fl-success));border-right:none}.fl-flasher.fl-success .fl-close,.fl-flasher.fl-success .fl-title{color:var(--success-color,var(--fl-success))}.fl-flasher.fl-success .fl-close:focus,.fl-flasher.fl-success .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-info{border-left:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info.fl-rtl{border-left:none;border-right:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info:not(.fl-rtl){border-left:.8em solid var(--info-color,var(--fl-info));border-right:none}.fl-flasher.fl-info .fl-close,.fl-flasher.fl-info .fl-title{color:var(--info-color,var(--fl-info))}.fl-flasher.fl-info .fl-close:focus,.fl-flasher.fl-info .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-warning{border-left:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning.fl-rtl{border-left:none;border-right:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning:not(.fl-rtl){border-left:.8em solid var(--warning-color,var(--fl-warning));border-right:none}.fl-flasher.fl-warning .fl-close,.fl-flasher.fl-warning .fl-title{color:var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning .fl-close:focus,.fl-flasher.fl-warning .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-error{border-left:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error.fl-rtl{border-left:none;border-right:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error:not(.fl-rtl){border-left:.8em solid var(--error-color,var(--fl-error));border-right:none}.fl-flasher.fl-error .fl-close,.fl-flasher.fl-error .fl-title{color:var(--error-color,var(--fl-error))}.fl-flasher.fl-error .fl-close:focus,.fl-flasher.fl-error .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher .fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-flasher.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-flasher.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;width:100%}.fl-flasher.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-flasher.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;width:100%}.fl-flasher.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-flasher.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;width:100%}.fl-flasher.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-flasher.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;width:100%}@media (prefers-color-scheme:dark){.fl-flasher.fl-auto-dark{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}}body.fl-dark .fl-flasher,html.fl-dark .fl-flasher{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}@media (prefers-reduced-motion:reduce){.fl-flasher{animation:none}.fl-flasher:hover{transform:none}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{transform:translateY(-50%)}}
 .fl-google{--md-bg-light:#fff;--md-bg-dark:#2d2d2d;--md-text-light:rgba(0,0,0,.87);--md-text-secondary-light:rgba(0,0,0,.6);--md-text-dark:hsla(0,0%,100%,.87);--md-text-secondary-dark:hsla(0,0%,100%,.6);--md-elevation:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);--md-elevation-dark:0 3px 5px -1px rgba(0,0,0,.4),0 6px 10px 0 rgba(0,0,0,.28),0 1px 18px 0 rgba(0,0,0,.24);--md-border-radius:4px;--md-success:#43a047;--md-info:#1e88e5;--md-warning:#fb8c00;--md-error:#e53935;--md-animation-duration:0.3s;--md-ripple-duration:0.6s}@keyframes mdSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes mdRipple{to{opacity:0;transform:scale(4)}}.fl-google{animation:mdSlideUp var(--md-animation-duration) cubic-bezier(.4,0,.2,1);font-family:Roboto,Segoe UI,Helvetica,Arial,sans-serif;margin:8px 0;position:relative}.fl-google .fl-md-card{background-color:var(--md-bg-light);border-radius:var(--md-border-radius);box-shadow:var(--md-elevation);color:var(--md-text-light);overflow:hidden}.fl-google .fl-content{align-items:flex-start;display:flex;padding:16px}.fl-google .fl-icon-wrapper{color:var(--md-text-secondary-light);flex-shrink:0;margin-right:16px}.fl-google .fl-text-content{flex:1}.fl-google .fl-title{font-size:1rem;font-weight:500;margin-bottom:4px}.fl-google .fl-message{color:var(--md-text-secondary-light);font-size:.875rem;line-height:1.43}.fl-google .fl-actions{display:flex;justify-content:flex-end;padding:8px}.fl-google .fl-action-button{background:transparent;border:none;border-radius:4px;color:currentColor;cursor:pointer;font-family:inherit;font-size:.8125rem;font-weight:500;letter-spacing:.0892857143em;overflow:hidden;padding:8px 12px;position:relative;text-transform:uppercase;transition:background-color .2s}.fl-google .fl-action-button:focus,.fl-google .fl-action-button:hover{background-color:rgba(0,0,0,.04)}.fl-google .fl-action-button:after{background:currentColor;border-radius:50%;content:"";height:5px;opacity:0;pointer-events:none;position:absolute;transform:scale(1);width:5px}.fl-google .fl-action-button:active:after{animation:mdRipple var(--md-ripple-duration) linear;opacity:.3}.fl-google.fl-success .fl-action-button,.fl-google.fl-success .fl-icon-wrapper{color:var(--md-success)}.fl-google.fl-info .fl-action-button,.fl-google.fl-info .fl-icon-wrapper{color:var(--md-info)}.fl-google.fl-warning .fl-action-button,.fl-google.fl-warning .fl-icon-wrapper{color:var(--md-warning)}.fl-google.fl-error .fl-action-button,.fl-google.fl-error .fl-icon-wrapper{color:var(--md-error)}.fl-google .fl-progress-bar{bottom:0;height:4px;left:0;overflow:hidden;position:absolute;right:0}.fl-google .fl-progress-bar .fl-progress{height:100%;transform-origin:left center;width:100%}.fl-google.fl-success .fl-progress{background-color:var(--md-success)}.fl-google.fl-info .fl-progress{background-color:var(--md-info)}.fl-google.fl-warning .fl-progress{background-color:var(--md-warning)}.fl-google.fl-error .fl-progress{background-color:var(--md-error)}.fl-google.fl-rtl{direction:rtl}.fl-google.fl-rtl .fl-content{flex-direction:row-reverse}.fl-google.fl-rtl .fl-icon-wrapper{margin-left:16px;margin-right:0}.fl-google.fl-rtl .fl-actions{justify-content:flex-start}.fl-google.fl-rtl .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-google,.fl-google .fl-action-button:active:after{animation:none}}.fl-google.fl-auto-dark .fl-md-card,body.fl-dark .fl-google .fl-md-card,html.fl-dark .fl-google .fl-md-card{background-color:var(--md-bg-dark);box-shadow:var(--md-elevation-dark);color:var(--md-text-dark)}.fl-google.fl-auto-dark .fl-message,body.fl-dark .fl-google .fl-message,html.fl-dark .fl-google .fl-message{color:var(--md-text-secondary-dark)}.fl-google.fl-auto-dark .fl-action-button:focus,.fl-google.fl-auto-dark .fl-action-button:hover,body.fl-dark .fl-google .fl-action-button:focus,body.fl-dark .fl-google .fl-action-button:hover,html.fl-dark .fl-google .fl-action-button:focus,html.fl-dark .fl-google .fl-action-button:hover{background-color:hsla(0,0%,100%,.08)}
 .fl-ios{--ios-bg-light:#fff;--ios-bg-dark:#1e1e1e;--ios-text-light:#000;--ios-text-secondary-light:#6e6e6e;--ios-text-dark:#fff;--ios-text-secondary-dark:#a8a8a8;--ios-border-radius:13px;--ios-shadow:0 2px 12px rgba(0,0,0,.15);--ios-shadow-dark:0 2px 12px rgba(0,0,0,.35);--ios-icon-size:18px;--ios-blur:30px;--ios-success:#34c759;--ios-info:#007aff;--ios-warning:#ff9500;--ios-error:#ff3b30;--ios-animation-duration:0.4s}@keyframes iosSlideIn{0%{opacity:0;transform:translateY(-15px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes iosExpand{0%{max-height:0;opacity:0}to{max-height:100px;opacity:1}}.fl-ios{animation:iosSlideIn var(--ios-animation-duration) cubic-bezier(.23,1,.32,1);font-family:-apple-system,BlinkMacSystemFont,San Francisco,Helvetica Neue,Helvetica,Arial,sans-serif;margin:10px 0;position:relative;will-change:transform,opacity}.fl-ios .fl-ios-notification{backdrop-filter:blur(var(--ios-blur));-webkit-backdrop-filter:blur(var(--ios-blur));background-color:var(--ios-bg-light);border-radius:var(--ios-border-radius);box-shadow:var(--ios-shadow);color:var(--ios-text-light);padding:12px 15px;position:relative}.fl-ios .fl-header{align-items:center;display:flex;margin-bottom:8px;padding-right:20px}.fl-ios .fl-app-icon{align-items:center;background-color:currentColor;border-radius:5px;display:flex;flex-shrink:0;height:22px;justify-content:center;margin-right:8px;width:22px}.fl-ios .fl-icon-svg{color:#fff;height:14px;width:14px}.fl-ios .fl-app-info{align-items:baseline;display:flex;flex:1;justify-content:space-between}.fl-ios .fl-app-name{font-size:.85rem;font-weight:600}.fl-ios .fl-time{color:var(--ios-text-secondary-light);flex-shrink:0;font-size:.75rem;margin-left:5px}.fl-ios .fl-content{animation:iosExpand .3s forwards;animation-delay:.1s;overflow:hidden}.fl-ios .fl-message{font-size:.95rem;line-height:1.3;margin:0;padding-right:15px}.fl-ios .fl-close{align-items:center;background-color:rgba(0,0,0,.1);border:none;border-radius:50%;color:var(--ios-text-light);cursor:pointer;display:flex;font-size:14px;height:18px;justify-content:center;line-height:1;opacity:.7;padding:0;position:absolute;right:12px;top:10px;transition:opacity .2s;width:18px}.fl-ios .fl-close:focus,.fl-ios .fl-close:hover{opacity:1}.fl-ios.fl-success .fl-app-icon{color:var(--ios-success)}.fl-ios.fl-info .fl-app-icon{color:var(--ios-info)}.fl-ios.fl-warning .fl-app-icon{color:var(--ios-warning)}.fl-ios.fl-error .fl-app-icon{color:var(--ios-error)}.fl-ios.fl-rtl{direction:rtl}.fl-ios.fl-rtl .fl-header{padding-left:20px;padding-right:0}.fl-ios.fl-rtl .fl-app-icon{margin-left:8px;margin-right:0}.fl-ios.fl-rtl .fl-time{margin-left:0;margin-right:5px}.fl-ios.fl-rtl .fl-message{padding-left:15px;padding-right:0}.fl-ios.fl-rtl .fl-close{left:12px;right:auto}@media (prefers-reduced-motion:reduce){.fl-ios{animation:none}.fl-ios .fl-content{animation:none;max-height:none;opacity:1}}@media screen and (max-width:480px){.fl-ios{width:100%}}.fl-ios.fl-auto-dark .fl-ios-notification,body.fl-dark .fl-ios .fl-ios-notification,html.fl-dark .fl-ios .fl-ios-notification{background-color:var(--ios-bg-dark);box-shadow:var(--ios-shadow-dark);color:var(--ios-text-dark)}.fl-ios.fl-auto-dark .fl-time,body.fl-dark .fl-ios .fl-time,html.fl-dark .fl-ios .fl-time{color:var(--ios-text-secondary-dark)}.fl-ios.fl-auto-dark .fl-close,body.fl-dark .fl-ios .fl-close,html.fl-dark .fl-ios .fl-close{background-color:hsla(0,0%,100%,.2);color:var(--ios-text-dark)}
 .fl-jade{--jade-text-light:#5f6c7b;--jade-text-dark:#e2e8f0;--jade-shadow:0 8px 24px hsla(210,8%,62%,.1);--jade-shadow-dark:0 8px 24px rgba(0,0,0,.2);--jade-border-radius:4px;--jade-transition:0.3s cubic-bezier(0.4,0,0.2,1);--jade-success-bg:#f0fdf4;--jade-success-color:#16a34a;--jade-info-bg:#eff6ff;--jade-info-color:#3b82f6;--jade-warning-bg:#fffbeb;--jade-warning-color:#f59e0b;--jade-error-bg:#fef2f2;--jade-error-color:#dc2626;--jade-success-bg-dark:rgba(22,163,74,.15);--jade-info-bg-dark:rgba(59,130,246,.15);--jade-warning-bg-dark:rgba(245,158,11,.15);--jade-error-bg-dark:rgba(220,38,38,.15)}@keyframes jadeIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.fl-jade{animation:jadeIn .4s var(--jade-transition);border:1px solid transparent;border-radius:var(--jade-border-radius) var(--jade-border-radius) 0 0;box-shadow:var(--jade-shadow);font-family:var(--fl-font),serif;margin:.5rem 0;overflow:hidden;padding:1rem 1.25rem;position:relative;will-change:transform,opacity}.fl-jade .fl-content{align-items:center;display:flex}.fl-jade .fl-message{flex:1;font-size:.875rem;font-weight:500;line-height:1.5;padding-right:.75rem}.fl-jade .fl-close{align-items:center;background:none;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;font-size:1.125rem;height:1.875rem;justify-content:center;opacity:.6;padding:.375rem;transition:all var(--jade-transition);width:1.875rem}.fl-jade .fl-close:focus,.fl-jade .fl-close:hover{background-color:rgba(0,0,0,.05);opacity:1}.fl-jade .fl-progress-bar{border-radius:0 0 var(--jade-border-radius) var(--jade-border-radius);bottom:0;height:3px;left:0;opacity:.7;overflow:hidden;position:absolute;right:0}.fl-jade .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-jade.fl-success{background-color:var(--jade-success-bg);border-color:rgba(22,163,74,.1)}.fl-jade.fl-success,.fl-jade.fl-success .fl-close{color:var(--jade-success-color)}.fl-jade.fl-success .fl-close:focus,.fl-jade.fl-success .fl-close:hover{background-color:rgba(22,163,74,.1)}.fl-jade.fl-success .fl-progress-bar .fl-progress{background-color:var(--jade-success-color)}.fl-jade.fl-info{background-color:var(--jade-info-bg);border-color:rgba(59,130,246,.1)}.fl-jade.fl-info,.fl-jade.fl-info .fl-close{color:var(--jade-info-color)}.fl-jade.fl-info .fl-close:focus,.fl-jade.fl-info .fl-close:hover{background-color:rgba(59,130,246,.1)}.fl-jade.fl-info .fl-progress-bar .fl-progress{background-color:var(--jade-info-color)}.fl-jade.fl-warning{background-color:var(--jade-warning-bg);border-color:rgba(245,158,11,.1)}.fl-jade.fl-warning,.fl-jade.fl-warning .fl-close{color:var(--jade-warning-color)}.fl-jade.fl-warning .fl-close:focus,.fl-jade.fl-warning .fl-close:hover{background-color:rgba(245,158,11,.1)}.fl-jade.fl-warning .fl-progress-bar .fl-progress{background-color:var(--jade-warning-color)}.fl-jade.fl-error{background-color:var(--jade-error-bg);border-color:rgba(220,38,38,.1)}.fl-jade.fl-error,.fl-jade.fl-error .fl-close{color:var(--jade-error-color)}.fl-jade.fl-error .fl-close:focus,.fl-jade.fl-error .fl-close:hover{background-color:rgba(220,38,38,.1)}.fl-jade.fl-error .fl-progress-bar .fl-progress{background-color:var(--jade-error-color)}.fl-jade.fl-rtl{direction:rtl}.fl-jade.fl-rtl .fl-message{padding-left:.75rem;padding-right:0}.fl-jade.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-jade{animation:none}}.fl-jade.fl-auto-dark,body.fl-dark .fl-jade,html.fl-dark .fl-jade{box-shadow:var(--jade-shadow-dark);color:var(--jade-text-dark)}.fl-jade.fl-auto-dark.fl-success,body.fl-dark .fl-jade.fl-success,html.fl-dark .fl-jade.fl-success{background-color:var(--jade-success-bg-dark);border-color:rgba(22,163,74,.2)}.fl-jade.fl-auto-dark.fl-info,body.fl-dark .fl-jade.fl-info,html.fl-dark .fl-jade.fl-info{background-color:var(--jade-info-bg-dark);border-color:rgba(59,130,246,.2)}.fl-jade.fl-auto-dark.fl-warning,body.fl-dark .fl-jade.fl-warning,html.fl-dark .fl-jade.fl-warning{background-color:var(--jade-warning-bg-dark);border-color:rgba(245,158,11,.2)}.fl-jade.fl-auto-dark.fl-error,body.fl-dark .fl-jade.fl-error,html.fl-dark .fl-jade.fl-error{background-color:var(--jade-error-bg-dark);border-color:rgba(220,38,38,.2)}.fl-jade.fl-auto-dark .fl-close:focus,.fl-jade.fl-auto-dark .fl-close:hover,body.fl-dark .fl-jade .fl-close:focus,body.fl-dark .fl-jade .fl-close:hover,html.fl-dark .fl-jade .fl-close:focus,html.fl-dark .fl-jade .fl-close:hover{background-color:hsla(0,0%,100%,.1)}
diff --git a/src/Prime/Resources/public/flasher.min.js b/src/Prime/Resources/public/flasher.min.js
index c9c3adc6..8b580d48 100644
--- a/src/Prime/Resources/public/flasher.min.js
+++ b/src/Prime/Resources/public/flasher.min.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).flasher=t()}(this,(function(){"use strict";function e(e,t,s,n){return new(s||(s=Promise))((function(r,o){function i(e){try{a(n.next(e))}catch(e){o(e)}}function l(e){try{a(n.throw(e))}catch(e){o(e)}}function a(e){var t;e.done?r(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(i,l)}a((n=n.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{success(e,t,s){this.flash("success",e,t,s)}error(e,t,s){this.flash("error",e,t,s)}info(e,t,s){this.flash("info",e,t,s)}warning(e,t,s){this.flash("warning",e,t,s)}flash(e,t,s,n){let r,o,i,l={};if("object"==typeof e?(l=Object.assign({},e),r=l.type,o=l.message,i=l.title,delete l.type,delete l.message,delete l.title):"object"==typeof t?(l=Object.assign({},t),r=e,o=l.message,i=l.title,delete l.message,delete l.title):(r=e,o=t,null==s?(i=void 0,l=n||{}):"string"==typeof s?(i=s,l=n||{}):"object"==typeof s&&(l=Object.assign({},s),"title"in l?(i=l.title,delete l.title):i=void 0,n&&"object"==typeof n&&(l=Object.assign(Object.assign({},l),n)))),!r)throw new Error("Type is required for notifications");if(null==o)throw new Error("Message is required for notifications");null==i&&(i=r.charAt(0).toUpperCase()+r.slice(1));const a={type:r,message:o,title:i,options:l,metadata:{plugin:""}};this.renderOptions({}),this.renderEnvelopes([a])}}class s extends t{constructor(e){if(super(),this.options={timeout:null,timeouts:{success:1e4,info:1e4,error:1e4,warning:1e4},fps:30,position:"top-right",direction:"top",rtl:!1,style:{},escapeHtml:!1},!e)throw new Error("Theme is required");if("function"!=typeof e.render)throw new TypeError("Theme must have a render function");this.theme=e}renderEnvelopes(e){if(!(null==e?void 0:e.length))return;const t=()=>{e.forEach((e=>{var t,s,n,r;try{const o=null!==(s=null!==(t=this.options.timeout)&&void 0!==t?t:this.options.timeouts[e.type])&&void 0!==s?s:1e4,i=Object.assign(Object.assign(Object.assign({},this.options),e.options),{timeout:this.normalizeTimeout(null!==(n=e.options.timeout)&&void 0!==n?n:o),escapeHtml:null!==(r=e.options.escapeHtml)&&void 0!==r?r:this.options.escapeHtml}),l=this.createContainer(i),a={direction:i.direction,timeout:Number(i.timeout||0),fps:i.fps,rtl:i.rtl,escapeHtml:i.escapeHtml};this.addToContainer(l,e,a)}catch(t){console.error("PHPFlasher: Error rendering envelope",t,e)}}))};if("loading"===document.readyState){const e=()=>{document.removeEventListener("DOMContentLoaded",e),t()};document.addEventListener("DOMContentLoaded",e)}else t()}renderOptions(e){e&&(this.options=Object.assign(Object.assign({},this.options),e))}createContainer(e){let t=document.querySelector(`.fl-wrapper[data-position="${e.position}"]`);return t||(t=document.createElement("div"),t.className="fl-wrapper",t.dataset.position=e.position,Object.entries(e.style).forEach((([e,s])=>{if(null!=s){const n=e.replace(/([A-Z])/g,"-$1").toLowerCase();t.style.setProperty(n,String(s))}})),document.body.appendChild(t)),t.dataset.turboTemporary="",t}addToContainer(e,t,s){s.escapeHtml&&(t.title=this.escapeHtml(t.title),t.message=this.escapeHtml(t.message));const n=this.stringToHTML(this.theme.render(t));n.classList.add("fl-container"),s.rtl&&n.classList.add("fl-rtl"),"bottom"===s.direction?e.append(n):e.prepend(n),requestAnimationFrame((()=>n.classList.add("fl-show")));const r=n.querySelector(".fl-close");if(r&&r.addEventListener("click",(e=>{e.stopPropagation(),this.removeNotification(n)})),n.addEventListener("click",(e=>{e.target.closest(".fl-close")||this.dispatchClickEvents(t)})),s.timeout>0)this.addTimer(n,s);else{n.classList.add("fl-sticky");const e=n.querySelector(".fl-progress-bar");if(e){const t=document.createElement("span");t.classList.add("fl-progress","fl-sticky-progress"),t.style.width="100%",e.append(t)}}}normalizeTimeout(e){return!1===e||"number"==typeof e&&e<0||null==e?0:Number(e)||0}addTimer(e,{timeout:t,fps:s}){if(t<=0)return;const n=1e3/s;let r,o=0;const i=()=>{o+=n;const s=e.querySelector(".fl-progress-bar");if(s){let e=s.querySelector(".fl-progress");e||(e=document.createElement("span"),e.classList.add("fl-progress"),s.append(e));const n=100*(1-o/t);e.style.width=`${Math.max(0,n)}%`}o>=t&&(clearInterval(r),this.removeNotification(e))};r=window.setInterval(i,n);const l=()=>{clearInterval(r),r=window.setInterval(i,n)},a=()=>clearInterval(r);e.addEventListener("mouseout",l),e.addEventListener("mouseover",a),e._flasherCleanup=()=>{clearInterval(r),e.removeEventListener("mouseout",l),e.removeEventListener("mouseover",a)}}removeNotification(e){e&&(e._flasherCleanup&&(e._flasherCleanup(),delete e._flasherCleanup),e.classList.remove("fl-show"),e.ontransitionend=()=>{const t=e.parentElement;e.remove(),t&&!t.hasChildNodes()&&t.remove()})}stringToHTML(e){const t=document.createElement("template");t.innerHTML=e.trim();const s=t.content.firstElementChild;if(!s)throw new Error("PHPFlasher: Invalid HTML template - no element found");return s}escapeHtml(e){if(null==e)return"";const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","`":"&#96;","=":"&#61;","/":"&#47;"};return e.replace(/[&<>"'`=/]/g,(e=>t[e]||e))}dispatchClickEvents(e){const t={envelope:e};window.dispatchEvent(new CustomEvent("flasher:theme:click",{detail:t}));const s=this.getThemeName(e);s&&window.dispatchEvent(new CustomEvent(`flasher:theme:${s}:click`,{detail:t}))}getThemeName(e){var t;const s=(null===(t=e.metadata)||void 0===t?void 0:t.plugin)||"";return s.startsWith("theme.")?s.replace("theme.",""):"flasher"===s?"flasher":s}}const n=new class extends t{constructor(){super(...arguments),this.defaultPlugin="flasher",this.plugins=new Map,this.themes=new Map,this.loadedAssets=new Set}render(t){return e(this,void 0,void 0,(function*(){const e=this.resolveResponse(t);try{yield this.addAssets([{urls:e.styles,nonce:e.context.csp_style_nonce,type:"style"},{urls:e.scripts,nonce:e.context.csp_script_nonce,type:"script"}]),this.renderOptions(e.options),this.renderEnvelopes(e.envelopes)}catch(e){console.error("PHPFlasher: Error rendering notifications",e)}}))}renderEnvelopes(e){if(!(null==e?void 0:e.length))return;const t={};e.forEach((e=>{const s=this.resolvePluginAlias(e.metadata.plugin);t[s]=t[s]||[],t[s].push(e)})),Object.entries(t).forEach((([e,t])=>{try{this.use(e).renderEnvelopes(t)}catch(t){console.error(`PHPFlasher: Error rendering envelopes for plugin "${e}"`,t)}}))}renderOptions(e){e&&Object.entries(e).forEach((([e,t])=>{try{this.use(e).renderOptions(t)}catch(t){console.error(`PHPFlasher: Error applying options for plugin "${e}"`,t)}}))}addPlugin(e,t){if(!e||!t)throw new Error("Both plugin name and instance are required");this.plugins.set(e,t)}addTheme(e,t){if(!e||!t)throw new Error("Both theme name and definition are required");this.themes.set(e,t)}use(e){const t=this.resolvePluginAlias(e);this.resolvePlugin(t);const s=this.plugins.get(t);if(!s)throw new Error(`Unable to resolve "${t}" plugin, did you forget to register it?`);return s}create(e){return this.use(e)}resolveResponse(e){const t=Object.assign({envelopes:[],options:{},scripts:[],styles:[],context:{}},e);return Object.entries(t.options).forEach((([e,s])=>{t.options[e]=this.resolveOptions(s)})),t.context.csp_style_nonce=t.context.csp_style_nonce||"",t.context.csp_script_nonce=t.context.csp_script_nonce||"",t.envelopes.forEach((e=>{e.metadata=e.metadata||{},e.metadata.plugin=this.resolvePluginAlias(e.metadata.plugin),this.addThemeStyles(t,e.metadata.plugin),e.options=this.resolveOptions(e.options),e.context=t.context})),t}resolveOptions(e){if(!e)return{};const t=Object.assign({},e);return Object.entries(t).forEach((([e,s])=>{t[e]=this.resolveFunction(s)})),t}resolveFunction(e){var t,s,n,r;if("string"!=typeof e)return e;const o=e.match(/^function\s*(\w*)\s*\(([^)]*)\)\s*\{([\s\S]*)\}$/),i=e.match(/^\s*(\(([^)]*)\)|[^=]+)\s*=>\s*([\s\S]+)$/);if(!o&&!i)return e;let l,a;o?(l=null!==(s=null===(t=o[2])||void 0===t?void 0:t.split(",").map((e=>e.trim())).filter(Boolean))&&void 0!==s?s:[],a=o[3].trim()):(l=null!==(r=null===(n=i[2])||void 0===n?void 0:n.split(",").map((e=>e.trim())).filter(Boolean))&&void 0!==r?r:[],a=i[3].trim(),a=a.startsWith("{")?a.slice(1,-1).trim():`return ${a};`);try{return new Function(...l,a)}catch(t){return console.error("PHPFlasher: Error converting string to function:",t),e}}resolvePlugin(e){if(this.plugins.get(e)||!e.includes("theme."))return;const t=e.replace("theme.",""),n=this.themes.get(t);n&&this.addPlugin(e,new s(n))}resolvePluginAlias(e){return"flasher"===(e=e||this.defaultPlugin)?"theme.flasher":e}addAssets(t){return e(this,void 0,void 0,(function*(){try{const e=t.filter((e=>"style"===e.type)),s=[];for(const{urls:t,nonce:n,type:r}of e)if(null==t?void 0:t.length)for(const e of t)e&&!this.loadedAssets.has(e)&&(s.push(this.loadAsset(e,n,r)),this.loadedAssets.add(e));yield Promise.all(s);const n=t.filter((e=>"script"===e.type));for(const{urls:e,nonce:t,type:s}of n)if(null==e?void 0:e.length)for(const n of e)n&&!this.loadedAssets.has(n)&&(yield this.loadAsset(n,t,s),this.loadedAssets.add(n))}catch(e){console.error("PHPFlasher: Error loading assets",e)}}))}loadAsset(e,t,s){const n="style"===s?`link[href="${e}"]`:`script[src="${e}"]`;return document.querySelector(n)?Promise.resolve():new Promise(((n,r)=>{const o=document.createElement("style"===s?"link":"script");"style"===s?(o.rel="stylesheet",o.href=e):(o.type="text/javascript",o.src=e),t&&o.setAttribute("nonce",t),o.onload=()=>n(),o.onerror=()=>r(new Error(`Failed to load ${e}`)),document.head.appendChild(o)}))}addThemeStyles(e,t){if("flasher"!==t&&!t.includes("theme."))return;const s=t.replace("theme.",""),n=this.themes.get(s);if(!(null==n?void 0:n.styles))return;const r=Array.isArray(n.styles)?n.styles:[n.styles];e.styles=Array.from(new Set([...e.styles,...r]))}};return n.addTheme("flasher",{render:e=>{const{type:t,title:s,message:n}=e,r="error"===t||"warning"===t,o=r?"alert":"status",i=r?"assertive":"polite",l=s||t.charAt(0).toUpperCase()+t.slice(1);return`\n            <div class="fl-flasher fl-${t}" role="${o}" aria-live="${i}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-icon"></div>\n                    <div>\n                        <strong class="fl-title">${l}</strong>\n                        <span class="fl-message">${n}</span>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${t} message">&times;</button>\n                </div>\n                <span class="fl-progress-bar">\n                    <span class="fl-progress"></span>\n                </span>\n            </div>`}}),"undefined"!=typeof window&&(window.flasher=n),n}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).flasher=t()}(this,(function(){"use strict";function e(e,t,s,n){return new(s||(s=Promise))((function(r,o){function i(e){try{a(n.next(e))}catch(e){o(e)}}function l(e){try{a(n.throw(e))}catch(e){o(e)}}function a(e){var t;e.done?r(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(i,l)}a((n=n.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{success(e,t,s){this.flash("success",e,t,s)}error(e,t,s){this.flash("error",e,t,s)}info(e,t,s){this.flash("info",e,t,s)}warning(e,t,s){this.flash("warning",e,t,s)}flash(e,t,s,n){let r,o,i,l={};if("object"==typeof e?(l=Object.assign({},e),r=l.type,o=l.message,i=l.title,delete l.type,delete l.message,delete l.title):"object"==typeof t?(l=Object.assign({},t),r=e,o=l.message,i=l.title,delete l.message,delete l.title):(r=e,o=t,null==s?(i=void 0,l=n||{}):"string"==typeof s?(i=s,l=n||{}):"object"==typeof s&&(l=Object.assign({},s),"title"in l?(i=l.title,delete l.title):i=void 0,n&&"object"==typeof n&&(l=Object.assign(Object.assign({},l),n)))),!r)throw new Error("Type is required for notifications");if(null==o)throw new Error("Message is required for notifications");null==i&&(i=r.charAt(0).toUpperCase()+r.slice(1));const a={type:r,message:o,title:i,options:l,metadata:{plugin:""}};this.renderOptions({}),this.renderEnvelopes([a])}}class s extends t{constructor(e){if(super(),this.options={timeout:null,timeouts:{success:1e4,info:1e4,error:1e4,warning:1e4},fps:30,position:"top-right",direction:"top",rtl:!1,style:{},escapeHtml:!1},!e)throw new Error("Theme is required");if("function"!=typeof e.render)throw new TypeError("Theme must have a render function");this.theme=e}renderEnvelopes(e){if(!(null==e?void 0:e.length))return;const t=()=>{e.forEach((e=>{var t,s,n,r;try{const o=null!==(s=null!==(t=this.options.timeout)&&void 0!==t?t:this.options.timeouts[e.type])&&void 0!==s?s:1e4,i=Object.assign(Object.assign(Object.assign({},this.options),e.options),{timeout:this.normalizeTimeout(null!==(n=e.options.timeout)&&void 0!==n?n:o),escapeHtml:null!==(r=e.options.escapeHtml)&&void 0!==r?r:this.options.escapeHtml}),l=this.createContainer(i),a={direction:i.direction,timeout:Number(i.timeout||0),fps:i.fps,rtl:i.rtl,escapeHtml:i.escapeHtml};this.addToContainer(l,e,a)}catch(t){console.error("PHPFlasher: Error rendering envelope",t,e)}}))};if("loading"===document.readyState){const e=()=>{document.removeEventListener("DOMContentLoaded",e),t()};document.addEventListener("DOMContentLoaded",e)}else t()}renderOptions(e){e&&(this.options=Object.assign(Object.assign({},this.options),e))}createContainer(e){let t=document.querySelector(`.fl-wrapper[data-position="${e.position}"]`);return t||(t=document.createElement("div"),t.className="fl-wrapper",t.dataset.position=e.position,Object.entries(e.style).forEach((([e,s])=>{if(null!=s){const n=e.replace(/([A-Z])/g,"-$1").toLowerCase();t.style.setProperty(n,String(s))}})),document.body.appendChild(t)),t.dataset.turboTemporary="",t}addToContainer(e,t,s){s.escapeHtml&&(t.title=this.escapeHtml(t.title),t.message=this.escapeHtml(t.message));const n=this.stringToHTML(this.theme.render(t));n.classList.add("fl-container"),s.rtl&&n.classList.add("fl-rtl"),"bottom"===s.direction?e.append(n):e.prepend(n),requestAnimationFrame((()=>n.classList.add("fl-show")));const r=n.querySelector(".fl-close");if(r&&r.addEventListener("click",(e=>{e.stopPropagation(),this.removeNotification(n)})),n.addEventListener("click",(e=>{e.target.closest(".fl-close")||this.dispatchClickEvents(t)})),s.timeout>0)this.addTimer(n,s);else{n.classList.add("fl-sticky");const e=n.querySelector(".fl-progress-bar");if(e){const t=document.createElement("span");t.classList.add("fl-progress","fl-sticky-progress"),t.style.width="100%",e.append(t)}}}normalizeTimeout(e){return!1===e||"number"==typeof e&&e<0||null==e?0:Number(e)||0}addTimer(e,{timeout:t,fps:s}){if(t<=0)return;const n=1e3/s;let r,o=0;const i=()=>{o+=n;const s=e.querySelector(".fl-progress-bar");if(s){let e=s.querySelector(".fl-progress");e||(e=document.createElement("span"),e.classList.add("fl-progress"),s.append(e));const n=100*(1-o/t);e.style.width=`${Math.max(0,n)}%`}o>=t&&(clearInterval(r),this.removeNotification(e))};r=window.setInterval(i,n);const l=()=>{clearInterval(r),r=window.setInterval(i,n)},a=()=>clearInterval(r);e.addEventListener("mouseout",l),e.addEventListener("mouseover",a),e._flasherCleanup=()=>{clearInterval(r),e.removeEventListener("mouseout",l),e.removeEventListener("mouseover",a)}}removeNotification(e){e&&(e._flasherCleanup&&(e._flasherCleanup(),delete e._flasherCleanup),e.classList.remove("fl-show"),e.ontransitionend=()=>{const t=e.parentElement;e.remove(),t&&!t.hasChildNodes()&&t.remove()})}stringToHTML(e){const t=document.createElement("template");t.innerHTML=e.trim();const s=t.content.firstElementChild;if(!s)throw new Error("PHPFlasher: Invalid HTML template - no element found");return s}escapeHtml(e){if(null==e)return"";const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","`":"&#96;","=":"&#61;","/":"&#47;"};return e.replace(/[&<>"'`=/]/g,(e=>t[e]||e))}dispatchClickEvents(e){const t={envelope:e};window.dispatchEvent(new CustomEvent("flasher:theme:click",{detail:t}));const s=this.getThemeName(e);s&&window.dispatchEvent(new CustomEvent(`flasher:theme:${s}:click`,{detail:t}))}getThemeName(e){var t;const s=(null===(t=e.metadata)||void 0===t?void 0:t.plugin)||"";return s.startsWith("theme.")?s.replace("theme.",""):"flasher"===s?"flasher":s}}const n="fl-content",r="fl-message",o="fl-title",i="fl-icon",l="fl-close",a="fl-progress-bar",c="fl-progress",d=e=>`fl-${e}`,u=e=>`fl-${e}`,p={success:"Success",error:"Error",warning:"Warning",info:"Information"};const h={render:e=>{const{type:t,title:s,message:h}=e,f=function(e,t){return e||p[t]||function(e){return e.charAt(0).toUpperCase()+e.slice(1)}(t)}(s,t);return`\n            <div class="${u("flasher")} ${d(t)}" ${function(e){const t=function(e){const t="error"===e||"warning"===e;return{role:t?"alert":"status",ariaLive:t?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${t.role}" aria-live="${t.ariaLive}" aria-atomic="${t.ariaAtomic}"`}(t)}>\n                <div class="${n}">\n                    <div class="${i}"></div>\n                    <div>\n                        <strong class="${o}">${f}</strong>\n                        <span class="${r}">${h}</span>\n                    </div>\n                    <button class="${l}" ${function(e){return`aria-label="Close ${e} message"`}(t)}>&times;</button>\n                </div>\n                <span class="${a}">\n                    <span class="${c}"></span>\n                </span>\n            </div>`}},f=new class extends t{constructor(){super(...arguments),this.defaultPlugin="flasher",this.plugins=new Map,this.themes=new Map,this.loadedAssets=new Set}render(t){return e(this,void 0,void 0,(function*(){const e=this.resolveResponse(t);try{yield this.addAssets([{urls:e.styles,nonce:e.context.csp_style_nonce,type:"style"},{urls:e.scripts,nonce:e.context.csp_script_nonce,type:"script"}]),this.renderOptions(e.options),this.renderEnvelopes(e.envelopes)}catch(e){console.error("PHPFlasher: Error rendering notifications",e)}}))}renderEnvelopes(e){if(!(null==e?void 0:e.length))return;const t={};e.forEach((e=>{const s=this.resolvePluginAlias(e.metadata.plugin);t[s]=t[s]||[],t[s].push(e)})),Object.entries(t).forEach((([e,t])=>{try{this.use(e).renderEnvelopes(t)}catch(t){console.error(`PHPFlasher: Error rendering envelopes for plugin "${e}"`,t)}}))}renderOptions(e){e&&Object.entries(e).forEach((([e,t])=>{try{this.use(e).renderOptions(t)}catch(t){console.error(`PHPFlasher: Error applying options for plugin "${e}"`,t)}}))}addPlugin(e,t){if(!e||!t)throw new Error("Both plugin name and instance are required");this.plugins.set(e,t)}addTheme(e,t){if(!e||!t)throw new Error("Both theme name and definition are required");this.themes.set(e,t)}use(e){const t=this.resolvePluginAlias(e);this.resolvePlugin(t);const s=this.plugins.get(t);if(!s)throw new Error(`Unable to resolve "${t}" plugin, did you forget to register it?`);return s}create(e){return this.use(e)}resolveResponse(e){const t=Object.assign({envelopes:[],options:{},scripts:[],styles:[],context:{}},e);return Object.entries(t.options).forEach((([e,s])=>{t.options[e]=this.resolveOptions(s)})),t.context.csp_style_nonce=t.context.csp_style_nonce||"",t.context.csp_script_nonce=t.context.csp_script_nonce||"",t.envelopes.forEach((e=>{e.metadata=e.metadata||{},e.metadata.plugin=this.resolvePluginAlias(e.metadata.plugin),this.addThemeStyles(t,e.metadata.plugin),e.options=this.resolveOptions(e.options),e.context=t.context})),t}resolveOptions(e){if(!e)return{};const t=Object.assign({},e);return Object.entries(t).forEach((([e,s])=>{t[e]=this.resolveFunction(s)})),t}resolveFunction(e){var t,s,n,r;if("string"!=typeof e)return e;const o=e.match(/^function\s*(\w*)\s*\(([^)]*)\)\s*\{([\s\S]*)\}$/),i=e.match(/^\s*(\(([^)]*)\)|[^=]+)\s*=>\s*([\s\S]+)$/);if(!o&&!i)return e;let l,a;o?(l=null!==(s=null===(t=o[2])||void 0===t?void 0:t.split(",").map((e=>e.trim())).filter(Boolean))&&void 0!==s?s:[],a=o[3].trim()):(l=null!==(r=null===(n=i[2])||void 0===n?void 0:n.split(",").map((e=>e.trim())).filter(Boolean))&&void 0!==r?r:[],a=i[3].trim(),a=a.startsWith("{")?a.slice(1,-1).trim():`return ${a};`);try{return new Function(...l,a)}catch(t){return console.error("PHPFlasher: Error converting string to function:",t),e}}resolvePlugin(e){if(this.plugins.get(e)||!e.includes("theme."))return;const t=e.replace("theme.",""),n=this.themes.get(t);n&&this.addPlugin(e,new s(n))}resolvePluginAlias(e){return"flasher"===(e=e||this.defaultPlugin)?"theme.flasher":e}addAssets(t){return e(this,void 0,void 0,(function*(){try{const e=t.filter((e=>"style"===e.type)),s=[];for(const{urls:t,nonce:n,type:r}of e)if(null==t?void 0:t.length)for(const e of t)e&&!this.loadedAssets.has(e)&&(s.push(this.loadAsset(e,n,r)),this.loadedAssets.add(e));yield Promise.all(s);const n=t.filter((e=>"script"===e.type));for(const{urls:e,nonce:t,type:s}of n)if(null==e?void 0:e.length)for(const n of e)n&&!this.loadedAssets.has(n)&&(yield this.loadAsset(n,t,s),this.loadedAssets.add(n))}catch(e){console.error("PHPFlasher: Error loading assets",e)}}))}loadAsset(e,t,s){const n="style"===s?`link[href="${e}"]`:`script[src="${e}"]`;return document.querySelector(n)?Promise.resolve():new Promise(((n,r)=>{const o=document.createElement("style"===s?"link":"script");"style"===s?(o.rel="stylesheet",o.href=e):(o.type="text/javascript",o.src=e),t&&o.setAttribute("nonce",t),o.onload=()=>n(),o.onerror=()=>r(new Error(`Failed to load ${e}`)),document.head.appendChild(o)}))}addThemeStyles(e,t){if("flasher"!==t&&!t.includes("theme."))return;const s=t.replace("theme.",""),n=this.themes.get(s);if(!(null==n?void 0:n.styles))return;const r=Array.isArray(n.styles)?n.styles:[n.styles];e.styles=Array.from(new Set([...e.styles,...r]))}};return f.addTheme("flasher",h),"undefined"!=typeof window&&(window.flasher=f),f}));
diff --git a/src/Prime/Resources/public/themes/amazon/amazon.min.js b/src/Prime/Resources/public/themes/amazon/amazon.min.js
index da583f5d..3344ad81 100644
--- a/src/Prime/Resources/public/themes/amazon/amazon.min.js
+++ b/src/Prime/Resources/public/themes/amazon/amazon.min.js
@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("amazon",{render:e=>{const{type:n,message:t}=e,r="error"===n||"warning"===n;return`\n            <div class="fl-amazon fl-${n}" role="${r?"alert":"status"}" aria-live="${r?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-amazon-alert">\n                    <div class="fl-alert-content">\n                        <div class="fl-icon-container">\n                            ${(()=>{switch(n){case"success":return'<svg viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>\n                    </svg>';case"error":return'<svg viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>\n                    </svg>';case"warning":return'<svg viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>\n                    </svg>';case"info":return'<svg viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>\n                    </svg>'}return""})()}\n                        </div>\n                        <div class="fl-text-content">\n                            <div class="fl-alert-title">${(()=>{switch(n){case"success":return"Success!";case"error":return"Problem";case"warning":return"Warning";case"info":return"Information";default:return"Alert"}})()}</div>\n                            <div class="fl-alert-message">${t}</div>\n                        </div>\n                    </div>\n                    <div class="fl-alert-actions">\n                        <button class="fl-close" aria-label="Close notification">\n                            <svg viewBox="0 0 24 24" width="16" height="16">\n                                <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>\n                            </svg>\n                        </button>\n                    </div>\n                </div>\n            </div>`}})}));
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).flasher)}(this,(function(n){"use strict";const e={sm:16,md:20,lg:24},s={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function r(n,r={}){const{size:i="md",className:t=""}=r,a="number"==typeof i?i:e[i],o=s[n];if(!o)return"";return`<svg${t?` class="${t}"`:""} viewBox="0 0 24 24" width="${a}" height="${a}" aria-hidden="true"><path fill="currentColor" d="${o}"/></svg>`}const i="fl-close",t=n=>`fl-${n}`,a=n=>`fl-${n}`,o={success:"Success",error:"Error",warning:"Warning",info:"Information"},l={success:"Success!",error:"Problem",warning:"Warning",info:"Information"},c={render:n=>{const{type:e,message:s}=n,c=l[e]||o[e]||"Alert";return`\n            <div class="${a("amazon")} ${t(e)}" ${function(n){const e=function(n){const e="error"===n||"warning"===n;return{role:e?"alert":"status",ariaLive:e?"assertive":"polite",ariaAtomic:"true"}}(n);return`role="${e.role}" aria-live="${e.ariaLive}" aria-atomic="${e.ariaAtomic}"`}(e)}>\n                <div class="fl-amazon-alert">\n                    <div class="fl-alert-content">\n                        <div class="fl-icon-container">\n                            ${function(n,e={}){return"success"===n||"error"===n||"warning"===n||"info"===n?r(n,e):""}(e,{size:"lg"})}\n                        </div>\n                        <div class="fl-text-content">\n                            <div class="fl-alert-title">${c}</div>\n                            <div class="fl-alert-message">${s}</div>\n                        </div>\n                    </div>\n                    <div class="fl-alert-actions">\n                        <button class="${i}" ${function(n){return`aria-label="Close ${n} message"`}(e)}>\n                            ${function(n={}){return r("close",Object.assign({size:"sm"},n))}()}\n                        </button>\n                    </div>\n                </div>\n            </div>`}};n.addTheme("amazon",c)}));
diff --git a/src/Prime/Resources/public/themes/amber/amber.min.js b/src/Prime/Resources/public/themes/amber/amber.min.js
index 159d1d24..9263f063 100644
--- a/src/Prime/Resources/public/themes/amber/amber.min.js
+++ b/src/Prime/Resources/public/themes/amber/amber.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("amber",{render:e=>{const{type:s,message:i}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-amber fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-icon"></div>\n                    <div class="fl-text">\n                        <div class="fl-message">${i}</div>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s="fl-content",i="fl-message",n="fl-text",a="fl-icon",r="fl-close",t="fl-progress-bar",l="fl-progress",o=e=>`fl-${e}`,f=e=>`fl-${e}`,c={render:e=>{const{type:c,message:d}=e;return`\n            <div class="${f("amber")} ${o(c)}" ${function(e){const s=function(e){const s="error"===e||"warning"===e;return{role:s?"alert":"status",ariaLive:s?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${s.role}" aria-live="${s.ariaLive}" aria-atomic="${s.ariaAtomic}"`}(c)}>\n                <div class="${s}">\n                    <div class="${a}"></div>\n                    <div class="${n}">\n                        <div class="${i}">${d}</div>\n                    </div>\n                    <button class="${r}" ${function(e){return`aria-label="Close ${e} message"`}(c)}>×</button>\n                </div>\n                <div class="${t}">\n                    <div class="${l}"></div>\n                </div>\n            </div>`}};e.addTheme("amber",c)}));
diff --git a/src/Prime/Resources/public/themes/aurora/aurora.min.js b/src/Prime/Resources/public/themes/aurora/aurora.min.js
index 27c7e9cd..0b4a2517 100644
--- a/src/Prime/Resources/public/themes/aurora/aurora.min.js
+++ b/src/Prime/Resources/public/themes/aurora/aurora.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("aurora",{render:e=>{const{type:s,message:a}=e,r="error"===s||"warning"===s;return`\n            <div class="fl-aurora fl-${s}" role="${r?"alert":"status"}" aria-live="${r?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-message">${a}</div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const r="fl-content",s="fl-message",a="fl-close",n="fl-progress-bar",i="fl-progress",t=e=>`fl-${e}`,o=e=>`fl-${e}`,l={render:e=>{const{type:l,message:f}=e;return`\n            <div class="${o("aurora")} ${t(l)}" ${function(e){const r=function(e){const r="error"===e||"warning"===e;return{role:r?"alert":"status",ariaLive:r?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${r.role}" aria-live="${r.ariaLive}" aria-atomic="${r.ariaAtomic}"`}(l)}>\n                <div class="${r}">\n                    <div class="${s}">${f}</div>\n                    <button class="${a}" ${function(e){return`aria-label="Close ${e} message"`}(l)}>×</button>\n                </div>\n                <div class="${n}">\n                    <div class="${i}"></div>\n                </div>\n            </div>`}};e.addTheme("aurora",l)}));
diff --git a/src/Prime/Resources/public/themes/crystal/crystal.min.js b/src/Prime/Resources/public/themes/crystal/crystal.min.js
index ee3a1f03..9e88b721 100644
--- a/src/Prime/Resources/public/themes/crystal/crystal.min.js
+++ b/src/Prime/Resources/public/themes/crystal/crystal.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("crystal",{render:e=>{const{type:s,message:l}=e,a="error"===s||"warning"===s;return`\n            <div class="fl-crystal fl-${s}" role="${a?"alert":"status"}" aria-live="${a?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-text">\n                        <p class="fl-message">${l}</p>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s="fl-content",n="fl-message",r="fl-text",t="fl-close",a="fl-progress-bar",i="fl-progress",l=e=>`fl-${e}`,o=e=>`fl-${e}`,f={render:e=>{const{type:f,message:c}=e;return`\n            <div class="${o("crystal")} ${l(f)}" ${function(e){const s=function(e){const s="error"===e||"warning"===e;return{role:s?"alert":"status",ariaLive:s?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${s.role}" aria-live="${s.ariaLive}" aria-atomic="${s.ariaAtomic}"`}(f)}>\n                <div class="${s}">\n                    <div class="${r}">\n                        <p class="${n}">${c}</p>\n                    </div>\n                    <button class="${t}" ${function(e){return`aria-label="Close ${e} message"`}(f)}>×</button>\n                </div>\n                <div class="${a}">\n                    <div class="${i}"></div>\n                </div>\n            </div>`}};e.addTheme("crystal",f)}));
diff --git a/src/Prime/Resources/public/themes/emerald/emerald.min.js b/src/Prime/Resources/public/themes/emerald/emerald.min.js
index eeaa76b6..28a5732f 100644
--- a/src/Prime/Resources/public/themes/emerald/emerald.min.js
+++ b/src/Prime/Resources/public/themes/emerald/emerald.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("emerald",{render:e=>{const{type:s,message:a}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-emerald fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-message">${a}</div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",t="fl-message",a="fl-close",i=e=>`fl-${e}`,r=e=>`fl-${e}`,s={render:e=>{const{type:s,message:l}=e;return`\n            <div class="${r("emerald")} ${i(s)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(s)}>\n                <div class="${n}">\n                    <div class="${t}">${l}</div>\n                    <button class="${a}" ${function(e){return`aria-label="Close ${e} message"`}(s)}>×</button>\n                </div>\n            </div>`}};e.addTheme("emerald",s)}));
diff --git a/src/Prime/Resources/public/themes/facebook/facebook.min.js b/src/Prime/Resources/public/themes/facebook/facebook.min.js
index 9d106bd9..935839d5 100644
--- a/src/Prime/Resources/public/themes/facebook/facebook.min.js
+++ b/src/Prime/Resources/public/themes/facebook/facebook.min.js
@@ -1 +1 @@
-!function(n,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((n="undefined"!=typeof globalThis?globalThis:n||self).flasher)}(this,(function(n){"use strict";const i={render:n=>{const{type:i,message:e}=n,s="error"===i||"warning"===i,t=s?"alert":"status",l=s?"assertive":"polite",o=(new Date).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"});return`\n            <div class="fl-facebook fl-${i}" role="${t}" aria-live="${l}" aria-atomic="true">\n                <div class="fl-fb-notification">\n                    <div class="fl-icon-container">\n                        ${(()=>{switch(i){case"success":return'<div class="fl-fb-icon fl-fb-icon-success">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>\n                        </svg>\n                    </div>';case"error":return'<div class="fl-fb-icon fl-fb-icon-error">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.5c-.69 0-1.25.56-1.25 1.25S11.31 13 12 13s1.25-.56 1.25-1.25S12.69 10.5 12 10.5zM12 9c.552 0 1-.448 1-1V7c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1z"/>\n                        </svg>\n                    </div>';case"warning":return'<div class="fl-fb-icon fl-fb-icon-warning">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.409 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72192 12.7772 2.84815 12.865 3.00017ZM11 16.0002V18.0002H13V16.0002H11ZM11 8.00017V14.0002H13V8.00017H11Z"/>\n                        </svg>\n                    </div>';case"info":return'<div class="fl-fb-icon fl-fb-icon-info">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v-2h-2v2zm0-4h2V7h-2v4z"/>\n                        </svg>\n                    </div>'}return""})()}\n                    </div>\n                    <div class="fl-content">\n                        <div class="fl-message">\n                            ${e}\n                        </div>\n                        <div class="fl-meta">\n                            <span class="fl-time">${o}</span>\n                        </div>\n                    </div>\n                    <div class="fl-actions">\n                        <button class="fl-button fl-close" aria-label="Close ${i} message">\n                            <div class="fl-button-icon">\n                                <svg viewBox="0 0 24 24" width="20" height="20">\n                                    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>\n                                </svg>\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </div>`}};n.addTheme("facebook",i)}));
+!function(n,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((n="undefined"!=typeof globalThis?globalThis:n||self).flasher)}(this,(function(n){"use strict";const i={sm:16,md:20,lg:24},e={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function s(n={}){return function(n,s={}){const{size:t="md",className:o=""}=s,r="number"==typeof t?t:i[t];return`<svg${o?` class="${o}"`:""} viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true"><path fill="currentColor" d="${e[n]}"/></svg>`}("close",Object.assign({size:"sm"},n))}const t="fl-content",o="fl-message",r="fl-actions",l="fl-close",c=n=>`fl-${n}`,a=n=>`fl-${n}`;const f={render:n=>{const{type:i,message:e}=n;return`\n            <div class="${a("facebook")} ${c(i)}" ${function(n){const i=function(n){const i="error"===n||"warning"===n;return{role:i?"alert":"status",ariaLive:i?"assertive":"polite",ariaAtomic:"true"}}(n);return`role="${i.role}" aria-live="${i.ariaLive}" aria-atomic="${i.ariaAtomic}"`}(i)}>\n                <div class="fl-fb-notification">\n                    <div class="fl-icon-container">\n                        ${(()=>{switch(i){case"success":return'<div class="fl-fb-icon fl-fb-icon-success">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>\n                        </svg>\n                    </div>';case"error":return'<div class="fl-fb-icon fl-fb-icon-error">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.5c-.69 0-1.25.56-1.25 1.25S11.31 13 12 13s1.25-.56 1.25-1.25S12.69 10.5 12 10.5zM12 9c.552 0 1-.448 1-1V7c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1z"/>\n                        </svg>\n                    </div>';case"warning":return'<div class="fl-fb-icon fl-fb-icon-warning">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.409 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72192 12.7772 2.84815 12.865 3.00017ZM11 16.0002V18.0002H13V16.0002H11ZM11 8.00017V14.0002H13V8.00017H11Z"/>\n                        </svg>\n                    </div>';case"info":return'<div class="fl-fb-icon fl-fb-icon-info">\n                        <svg viewBox="0 0 24 24" width="16" height="16">\n                            <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v-2h-2v2zm0-4h2V7h-2v4z"/>\n                        </svg>\n                    </div>'}return""})()}\n                    </div>\n                    <div class="${t}">\n                        <div class="${o}">\n                            ${e}\n                        </div>\n                        <div class="fl-meta">\n                            <span class="fl-time">${(new Date).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"})}</span>\n                        </div>\n                    </div>\n                    <div class="${r}">\n                        <button class="fl-button ${l}" ${function(n){return`aria-label="Close ${n} message"`}(i)}>\n                            <div class="fl-button-icon">\n                                ${s({size:"md"})}\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </div>`}};n.addTheme("facebook",f)}));
diff --git a/src/Prime/Resources/public/themes/flasher/flasher.min.css b/src/Prime/Resources/public/themes/flasher/flasher.min.css
index 7dff29c9..cd5e3950 100644
--- a/src/Prime/Resources/public/themes/flasher/flasher.min.css
+++ b/src/Prime/Resources/public/themes/flasher/flasher.min.css
@@ -1 +1 @@
-@keyframes flasherIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}@keyframes flasherInRtl{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.fl-flasher{animation:flasherIn .3s ease-out;background-color:var(--background-color,var(--fl-bg-light));border-bottom:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:var(--text-color,var(--fl-text-light));font-family:var(--fl-font),serif;line-height:1.5;margin:.75em 0;padding:.75em;position:relative;transition:transform .2s ease;will-change:transform,opacity;word-break:break-word}.fl-flasher:hover{transform:translateY(-2px)}.fl-flasher.fl-rtl{animation:flasherInRtl .3s ease-out;border-radius:0 .375em .375em 0}.fl-flasher:not(.fl-rtl){border-radius:.375em 0 0 .375em}.fl-flasher .fl-content{align-items:center;display:flex}.fl-flasher .fl-icon{font-size:2.5em}.fl-flasher .fl-message,.fl-flasher .fl-title{display:block;line-height:1.25em;margin-left:1em;margin-right:1em}.fl-flasher.fl-rtl .fl-message,.fl-flasher.fl-rtl .fl-title{margin-left:1em;margin-right:1em}.fl-flasher .fl-title{font-size:1em;font-weight:600}.fl-flasher .fl-message{font-size:.875em;margin-top:.25em}.fl-flasher .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:1.25rem;line-height:1;opacity:.5;padding:.25rem;position:absolute;right:.75rem;top:50%;touch-action:manipulation;transform:translateY(-50%);transition:opacity .2s ease}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{opacity:1}.fl-flasher.fl-rtl .fl-content{flex-direction:row-reverse}.fl-flasher.fl-rtl .fl-close{left:.75rem;right:auto}.fl-flasher.fl-success{border-left:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success.fl-rtl{border-left:none;border-right:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success:not(.fl-rtl){border-left:.8em solid var(--success-color,var(--fl-success));border-right:none}.fl-flasher.fl-success .fl-close,.fl-flasher.fl-success .fl-title{color:var(--success-color,var(--fl-success))}.fl-flasher.fl-success .fl-close:focus,.fl-flasher.fl-success .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-info{border-left:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info.fl-rtl{border-left:none;border-right:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info:not(.fl-rtl){border-left:.8em solid var(--info-color,var(--fl-info));border-right:none}.fl-flasher.fl-info .fl-close,.fl-flasher.fl-info .fl-title{color:var(--info-color,var(--fl-info))}.fl-flasher.fl-info .fl-close:focus,.fl-flasher.fl-info .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-warning{border-left:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning.fl-rtl{border-left:none;border-right:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning:not(.fl-rtl){border-left:.8em solid var(--warning-color,var(--fl-warning));border-right:none}.fl-flasher.fl-warning .fl-close,.fl-flasher.fl-warning .fl-title{color:var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning .fl-close:focus,.fl-flasher.fl-warning .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-error{border-left:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error.fl-rtl{border-left:none;border-right:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error:not(.fl-rtl){border-left:.8em solid var(--error-color,var(--fl-error));border-right:none}.fl-flasher.fl-error .fl-close,.fl-flasher.fl-error .fl-title{color:var(--error-color,var(--fl-error))}.fl-flasher.fl-error .fl-close:focus,.fl-flasher.fl-error .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher .fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-flasher.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-flasher.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;width:100%}.fl-flasher.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-flasher.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;width:100%}.fl-flasher.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-flasher.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;width:100%}.fl-flasher.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-flasher.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;width:100%}@media (prefers-color-scheme:dark){.fl-flasher.fl-auto-dark{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}}body.fl-dark .fl-flasher,html.fl-dark .fl-flasher{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}@media (prefers-reduced-motion:reduce){.fl-flasher{animation:none}.fl-flasher:hover{transform:none}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{transform:translateY(-50%)}}
\ No newline at end of file
+@keyframes flasherIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}@keyframes flasherInRtl{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.fl-flasher{animation:flasherIn .3s ease-out;background-color:var(--background-color,var(--fl-bg-light));border-bottom:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:var(--text-color,var(--fl-text-light));font-family:var(--fl-font),serif;line-height:1.5;margin:.75em 0;padding:.75em;position:relative;transition:transform .2s ease;will-change:transform,opacity;word-break:break-word}.fl-flasher:hover{transform:translateY(-2px)}.fl-flasher.fl-rtl{animation:flasherInRtl .3s ease-out;border-radius:0 .375em .375em 0}.fl-flasher:not(.fl-rtl){border-radius:.375em 0 0 .375em}.fl-flasher .fl-content{align-items:center;display:flex}.fl-flasher .fl-icon{font-size:2.5em}.fl-flasher .fl-message,.fl-flasher .fl-title{display:block;line-height:1.25em;margin-left:1em;margin-right:1em}.fl-flasher.fl-rtl .fl-message,.fl-flasher.fl-rtl .fl-title{margin-left:1em;margin-right:1em}.fl-flasher .fl-title{font-size:1em;font-weight:600}.fl-flasher .fl-message{font-size:.875em;margin-top:.25em}.fl-flasher .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:var(--fl-font-size-xl,1.25rem);line-height:1;opacity:.5;padding:var(--fl-spacing-xs,.25rem);position:absolute;right:var(--fl-spacing-md,.75rem);top:50%;touch-action:manipulation;transform:translateY(-50%);transition:opacity var(--fl-duration-fast,.15s) ease}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{opacity:1}.fl-flasher .fl-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.fl-flasher.fl-rtl .fl-content{flex-direction:row-reverse}.fl-flasher.fl-rtl .fl-close{left:var(--fl-spacing-md,.75rem);right:auto}.fl-flasher.fl-success{border-left:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success.fl-rtl{border-left:none;border-right:.8em solid var(--success-color,var(--fl-success))}.fl-flasher.fl-success:not(.fl-rtl){border-left:.8em solid var(--success-color,var(--fl-success));border-right:none}.fl-flasher.fl-success .fl-close,.fl-flasher.fl-success .fl-title{color:var(--success-color,var(--fl-success))}.fl-flasher.fl-success .fl-close:focus,.fl-flasher.fl-success .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-info{border-left:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info.fl-rtl{border-left:none;border-right:.8em solid var(--info-color,var(--fl-info))}.fl-flasher.fl-info:not(.fl-rtl){border-left:.8em solid var(--info-color,var(--fl-info));border-right:none}.fl-flasher.fl-info .fl-close,.fl-flasher.fl-info .fl-title{color:var(--info-color,var(--fl-info))}.fl-flasher.fl-info .fl-close:focus,.fl-flasher.fl-info .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-warning{border-left:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning.fl-rtl{border-left:none;border-right:.8em solid var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning:not(.fl-rtl){border-left:.8em solid var(--warning-color,var(--fl-warning));border-right:none}.fl-flasher.fl-warning .fl-close,.fl-flasher.fl-warning .fl-title{color:var(--warning-color,var(--fl-warning))}.fl-flasher.fl-warning .fl-close:focus,.fl-flasher.fl-warning .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher.fl-error{border-left:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error.fl-rtl{border-left:none;border-right:.8em solid var(--error-color,var(--fl-error))}.fl-flasher.fl-error:not(.fl-rtl){border-left:.8em solid var(--error-color,var(--fl-error));border-right:none}.fl-flasher.fl-error .fl-close,.fl-flasher.fl-error .fl-title{color:var(--error-color,var(--fl-error))}.fl-flasher.fl-error .fl-close:focus,.fl-flasher.fl-error .fl-close:hover{transform:translateY(-50%) scale(1.1)}.fl-flasher .fl-progress-bar{bottom:0;display:flex;height:.125em;left:0;overflow:hidden;position:absolute;right:0}.fl-flasher.fl-success .fl-progress-bar{background-color:var(--success-color-light,var(--fl-success-light))}.fl-flasher.fl-success .fl-progress-bar .fl-progress{background-color:var(--success-color,var(--fl-success));height:100%;width:100%}.fl-flasher.fl-info .fl-progress-bar{background-color:var(--info-color-light,var(--fl-info-light))}.fl-flasher.fl-info .fl-progress-bar .fl-progress{background-color:var(--info-color,var(--fl-info));height:100%;width:100%}.fl-flasher.fl-warning .fl-progress-bar{background-color:var(--warning-color-light,var(--fl-warning-light))}.fl-flasher.fl-warning .fl-progress-bar .fl-progress{background-color:var(--warning-color,var(--fl-warning));height:100%;width:100%}.fl-flasher.fl-error .fl-progress-bar{background-color:var(--error-color-light,var(--fl-error-light))}.fl-flasher.fl-error .fl-progress-bar .fl-progress{background-color:var(--error-color,var(--fl-error));height:100%;width:100%}@media (prefers-color-scheme:dark){.fl-flasher.fl-auto-dark{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}}body.fl-dark .fl-flasher,html.fl-dark .fl-flasher{background-color:var(--dark-background-color,var(--fl-bg-dark));color:var(--dark-text-color,var(--fl-text-dark))}@media (prefers-reduced-motion:reduce){.fl-flasher{animation:none}.fl-flasher:hover{transform:none}.fl-flasher .fl-close:focus,.fl-flasher .fl-close:hover{transform:translateY(-50%)}}
\ No newline at end of file
diff --git a/src/Prime/Resources/public/themes/flasher/flasher.min.js b/src/Prime/Resources/public/themes/flasher/flasher.min.js
index 4bad8629..4f501fa5 100644
--- a/src/Prime/Resources/public/themes/flasher/flasher.min.js
+++ b/src/Prime/Resources/public/themes/flasher/flasher.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("flasher",{render:e=>{const{type:s,title:n,message:a}=e,l="error"===s||"warning"===s,t=l?"alert":"status",r=l?"assertive":"polite",i=n||s.charAt(0).toUpperCase()+s.slice(1);return`\n            <div class="fl-flasher fl-${s}" role="${t}" aria-live="${r}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-icon"></div>\n                    <div>\n                        <strong class="fl-title">${i}</strong>\n                        <span class="fl-message">${a}</span>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">&times;</button>\n                </div>\n                <span class="fl-progress-bar">\n                    <span class="fl-progress"></span>\n                </span>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",s="fl-message",r="fl-title",a="fl-icon",t="fl-close",i="fl-progress-bar",o="fl-progress",l=e=>`fl-${e}`,f=e=>`fl-${e}`,c={success:"Success",error:"Error",warning:"Warning",info:"Information"};const u={render:e=>{const{type:u,title:d,message:$}=e,p=function(e,n){return e||c[n]||function(e){return e.charAt(0).toUpperCase()+e.slice(1)}(n)}(d,u);return`\n            <div class="${f("flasher")} ${l(u)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(u)}>\n                <div class="${n}">\n                    <div class="${a}"></div>\n                    <div>\n                        <strong class="${r}">${p}</strong>\n                        <span class="${s}">${$}</span>\n                    </div>\n                    <button class="${t}" ${function(e){return`aria-label="Close ${e} message"`}(u)}>&times;</button>\n                </div>\n                <span class="${i}">\n                    <span class="${o}"></span>\n                </span>\n            </div>`}};e.addTheme("flasher",u)}));
diff --git a/src/Prime/Resources/public/themes/google/google.min.js b/src/Prime/Resources/public/themes/google/google.min.js
index 2c3e1b35..02eccf19 100644
--- a/src/Prime/Resources/public/themes/google/google.min.js
+++ b/src/Prime/Resources/public/themes/google/google.min.js
@@ -1 +1 @@
-!function(s,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],e):e((s="undefined"!=typeof globalThis?globalThis:s||self).flasher)}(this,(function(s){"use strict";s.addTheme("google",{render:s=>{const{type:e,message:n,title:l}=s,i="error"===e||"warning"===e,t=l?`<div class="fl-title">${l}</div>`:"";return`\n            <div class="fl-google fl-${e}" role="${i?"alert":"status"}" aria-live="${i?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-md-card">\n                    <div class="fl-content">\n                        <div class="fl-icon-wrapper">\n                            ${(()=>{switch(e){case"success":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>\n                    </svg>';case"error":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>\n                    </svg>';case"warning":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"/>\n                    </svg>';case"info":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>\n                    </svg>'}return""})()}\n                        </div>\n                        <div class="fl-text-content">\n                            ${t}\n                            <div class="fl-message">${n}</div>\n                        </div>\n                    </div>\n                    <div class="fl-actions">\n                        <button class="fl-action-button fl-close" aria-label="Close ${e} message">\n                            DISMISS\n                        </button>\n                    </div>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n={sm:16,md:20,lg:24},s={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function i(e,i={}){return"success"===e||"error"===e||"warning"===e||"info"===e?function(e,i={}){const{size:t="md",className:l=""}=i,r="number"==typeof t?t:n[t],a=s[e];return a?`<svg${l?` class="${l}"`:""} viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true"><path fill="currentColor" d="${a}"/></svg>`:""}(e,i):""}const t="fl-content",l="fl-message",r="fl-title",a="fl-icon-wrapper",o="fl-actions",c="fl-close",f="fl-progress-bar",d="fl-progress",v=e=>`fl-${e}`,u=e=>`fl-${e}`,$="DISMISS",h={render:e=>{const{type:n,message:s,title:h}=e,m=h?`<div class="${r}">${h}</div>`:"";return`\n            <div class="${u("google")} ${v(n)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(n)}>\n                <div class="fl-md-card">\n                    <div class="${t}">\n                        <div class="${a}">\n                            ${i(n,{size:"lg",className:"fl-icon-svg"})}\n                        </div>\n                        <div class="fl-text-content">\n                            ${m}\n                            <div class="${l}">${s}</div>\n                        </div>\n                    </div>\n                    <div class="${o}">\n                        <button class="fl-action-button ${c}" ${function(e){return`aria-label="Close ${e} message"`}(n)}>\n                            ${$}\n                        </button>\n                    </div>\n                </div>\n                <div class="${f}">\n                    <div class="${d}"></div>\n                </div>\n            </div>`}};e.addTheme("google",h)}));
diff --git a/src/Prime/Resources/public/themes/ios/ios.min.js b/src/Prime/Resources/public/themes/ios/ios.min.js
index 6680c7e2..882f6982 100644
--- a/src/Prime/Resources/public/themes/ios/ios.min.js
+++ b/src/Prime/Resources/public/themes/ios/ios.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s={render:e=>{const{type:s,message:i,title:n}=e,l="error"===s||"warning"===s,t=l?"alert":"status",a=l?"assertive":"polite",r=(new Date).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"}),o=n||"PHPFlasher";return`\n            <div class="fl-ios fl-${s}" role="${t}" aria-live="${a}" aria-atomic="true">\n                <div class="fl-ios-notification">\n                    <div class="fl-header">\n                        <div class="fl-app-icon">\n                            ${(()=>{switch(s){case"success":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>\n                    </svg>';case"error":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>\n                    </svg>';case"warning":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">\n                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>\n                    </svg>';case"info":return'<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">\n                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>\n                    </svg>'}return""})()}\n                        </div>\n                        <div class="fl-app-info">\n                            <div class="fl-app-name">${o}</div>\n                            <div class="fl-time">${r}</div>\n                        </div>\n                    </div>\n                    <div class="fl-content">\n                        <div class="fl-message">${i}</div>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">\n                        <span aria-hidden="true">×</span>\n                    </button>\n                </div>\n            </div>`}};e.addTheme("ios",s)}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n={sm:16,md:20,lg:24},i={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function s(e,s={}){return"success"===e||"error"===e||"warning"===e||"info"===e?function(e,s={}){const{size:a="md",className:t=""}=s,r="number"==typeof a?a:n[a],l=i[e];return l?`<svg${t?` class="${t}"`:""} viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true"><path fill="currentColor" d="${l}"/></svg>`:""}(e,s):""}const a="fl-content",t="fl-message",r="fl-close",l=e=>`fl-${e}`,o=e=>`fl-${e}`;const c={render:e=>{const{type:n,message:i,title:c}=e,d=c||"PHPFlasher";return`\n            <div class="${o("ios")} ${l(n)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(n)}>\n                <div class="fl-ios-notification">\n                    <div class="fl-header">\n                        <div class="fl-app-icon">\n                            ${s(n,{size:"md",className:"fl-icon-svg"})}\n                        </div>\n                        <div class="fl-app-info">\n                            <div class="fl-app-name">${d}</div>\n                            <div class="fl-time">${(new Date).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"})}</div>\n                        </div>\n                    </div>\n                    <div class="${a}">\n                        <div class="${t}">${i}</div>\n                    </div>\n                    <button class="${r}" ${function(e){return`aria-label="Close ${e} message"`}(n)}>\n                        <span aria-hidden="true">×</span>\n                    </button>\n                </div>\n            </div>`}};e.addTheme("ios",c)}));
diff --git a/src/Prime/Resources/public/themes/jade/jade.min.js b/src/Prime/Resources/public/themes/jade/jade.min.js
index 8bcffc46..c5c56ace 100644
--- a/src/Prime/Resources/public/themes/jade/jade.min.js
+++ b/src/Prime/Resources/public/themes/jade/jade.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("jade",{render:e=>{const{type:s,message:a}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-jade fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-message">${a}</div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s="fl-content",n="fl-message",i="fl-close",a="fl-progress-bar",r="fl-progress",t=e=>`fl-${e}`,l=e=>`fl-${e}`,o={render:e=>{const{type:o,message:f}=e;return`\n            <div class="${l("jade")} ${t(o)}" ${function(e){const s=function(e){const s="error"===e||"warning"===e;return{role:s?"alert":"status",ariaLive:s?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${s.role}" aria-live="${s.ariaLive}" aria-atomic="${s.ariaAtomic}"`}(o)}>\n                <div class="${s}">\n                    <div class="${n}">${f}</div>\n                    <button class="${i}" ${function(e){return`aria-label="Close ${e} message"`}(o)}>×</button>\n                </div>\n                <div class="${a}">\n                    <div class="${r}"></div>\n                </div>\n            </div>`}};e.addTheme("jade",o)}));
diff --git a/src/Prime/Resources/public/themes/material/material.min.js b/src/Prime/Resources/public/themes/material/material.min.js
index a9bbefb3..16beb5fa 100644
--- a/src/Prime/Resources/public/themes/material/material.min.js
+++ b/src/Prime/Resources/public/themes/material/material.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("material",{render:e=>{const{type:s,message:n}=e,a="error"===s||"warning"===s;return`\n            <div class="fl-material fl-${s}" role="${a?"alert":"status"}" aria-live="${a?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-md-card">\n                    <div class="fl-content">\n                        <div class="fl-text-content">\n                            <div class="fl-message">${n}</div>\n                        </div>\n                    </div>\n                    <div class="fl-actions">\n                        <button class="fl-action-button fl-close" aria-label="Close ${s} message">\n                            DISMISS\n                        </button>\n                    </div>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",i="fl-message",s="fl-actions",a="fl-close",t="fl-progress-bar",r="fl-progress",l=e=>`fl-${e}`,o=e=>`fl-${e}`,f="DISMISS",c={render:e=>{const{type:c,message:d}=e;return`\n            <div class="${o("material")} ${l(c)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(c)}>\n                <div class="fl-md-card">\n                    <div class="${n}">\n                        <div class="fl-text-content">\n                            <div class="${i}">${d}</div>\n                        </div>\n                    </div>\n                    <div class="${s}">\n                        <button class="fl-action-button ${a}" ${function(e){return`aria-label="Close ${e} message"`}(c)}>\n                            ${f}\n                        </button>\n                    </div>\n                </div>\n                <div class="${t}">\n                    <div class="${r}"></div>\n                </div>\n            </div>`}};e.addTheme("material",c)}));
diff --git a/src/Prime/Resources/public/themes/minimal/minimal.min.js b/src/Prime/Resources/public/themes/minimal/minimal.min.js
index efcbb6a4..6866063f 100644
--- a/src/Prime/Resources/public/themes/minimal/minimal.min.js
+++ b/src/Prime/Resources/public/themes/minimal/minimal.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("minimal",{render:e=>{const{type:s,message:i}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-minimal fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-message">${i}</div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const i="fl-content",n="fl-message",s="fl-close",a="fl-progress-bar",r="fl-progress",t=e=>`fl-${e}`,l=e=>`fl-${e}`,o={render:e=>{const{type:o,message:f}=e;return`\n            <div class="${l("minimal")} ${t(o)}" ${function(e){const i=function(e){const i="error"===e||"warning"===e;return{role:i?"alert":"status",ariaLive:i?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${i.role}" aria-live="${i.ariaLive}" aria-atomic="${i.ariaAtomic}"`}(o)}>\n                <div class="${i}">\n                    <div class="${n}">${f}</div>\n                    <button class="${s}" ${function(e){return`aria-label="Close ${e} message"`}(o)}>×</button>\n                </div>\n                <div class="${a}">\n                    <div class="${r}"></div>\n                </div>\n            </div>`}};e.addTheme("minimal",o)}));
diff --git a/src/Prime/Resources/public/themes/neon/neon.min.js b/src/Prime/Resources/public/themes/neon/neon.min.js
index b1ce195c..464107f6 100644
--- a/src/Prime/Resources/public/themes/neon/neon.min.js
+++ b/src/Prime/Resources/public/themes/neon/neon.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("neon",{render:e=>{const{type:s,message:n}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-neon fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-message">${n}</div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",s="fl-message",i="fl-close",r="fl-progress-bar",a="fl-progress",t=e=>`fl-${e}`,o=e=>`fl-${e}`,l={render:e=>{const{type:l,message:f}=e;return`\n            <div class="${o("neon")} ${t(l)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(l)}>\n                <div class="${n}">\n                    <div class="${s}">${f}</div>\n                    <button class="${i}" ${function(e){return`aria-label="Close ${e} message"`}(l)}>×</button>\n                </div>\n                <div class="${r}">\n                    <div class="${a}"></div>\n                </div>\n            </div>`}};e.addTheme("neon",l)}));
diff --git a/src/Prime/Resources/public/themes/onyx/onyx.min.js b/src/Prime/Resources/public/themes/onyx/onyx.min.js
index 1276accb..3dbb326a 100644
--- a/src/Prime/Resources/public/themes/onyx/onyx.min.js
+++ b/src/Prime/Resources/public/themes/onyx/onyx.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("onyx",{render:e=>{const{type:s,message:n}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-onyx fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <div class="fl-text">\n                        <div class="fl-message">${n}</div>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const n="fl-content",s="fl-message",i="fl-text",r="fl-close",t="fl-progress-bar",a="fl-progress",l=e=>`fl-${e}`,o=e=>`fl-${e}`,f={render:e=>{const{type:f,message:c}=e;return`\n            <div class="${o("onyx")} ${l(f)}" ${function(e){const n=function(e){const n="error"===e||"warning"===e;return{role:n?"alert":"status",ariaLive:n?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${n.role}" aria-live="${n.ariaLive}" aria-atomic="${n.ariaAtomic}"`}(f)}>\n                <div class="${n}">\n                    <div class="${i}">\n                        <div class="${s}">${c}</div>\n                    </div>\n                    <button class="${r}" ${function(e){return`aria-label="Close ${e} message"`}(f)}>×</button>\n                </div>\n                <div class="${t}">\n                    <div class="${a}"></div>\n                </div>\n            </div>`}};e.addTheme("onyx",f)}));
diff --git a/src/Prime/Resources/public/themes/ruby/ruby.min.js b/src/Prime/Resources/public/themes/ruby/ruby.min.js
index 3c46d443..2859d68a 100644
--- a/src/Prime/Resources/public/themes/ruby/ruby.min.js
+++ b/src/Prime/Resources/public/themes/ruby/ruby.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("ruby",{render:e=>{const{type:s,message:i}=e,l="error"===s||"warning"===s;return`\n            <div class="fl-ruby fl-${s}" role="${l?"alert":"status"}" aria-live="${l?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-shine"></div>\n                <div class="fl-content">\n                    <div class="fl-icon-circle">\n                        <div class="fl-icon"></div>\n                    </div>\n                    <div class="fl-text">\n                        <div class="fl-message">${i}</div>\n                    </div>\n                    <button class="fl-close" aria-label="Close ${s} message">×</button>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const i="fl-content",s="fl-message",n="fl-text",r="fl-icon",a="fl-close",l="fl-progress-bar",t="fl-progress",o=e=>`fl-${e}`,f=e=>`fl-${e}`,c={render:e=>{const{type:c,message:d}=e;return`\n            <div class="${f("ruby")} ${o(c)}" ${function(e){const i=function(e){const i="error"===e||"warning"===e;return{role:i?"alert":"status",ariaLive:i?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${i.role}" aria-live="${i.ariaLive}" aria-atomic="${i.ariaAtomic}"`}(c)}>\n                <div class="fl-shine"></div>\n                <div class="${i}">\n                    <div class="fl-icon-circle">\n                        <div class="${r}"></div>\n                    </div>\n                    <div class="${n}">\n                        <div class="${s}">${d}</div>\n                    </div>\n                    <button class="${a}" ${function(e){return`aria-label="Close ${e} message"`}(c)}>×</button>\n                </div>\n                <div class="${l}">\n                    <div class="${t}"></div>\n                </div>\n            </div>`}};e.addTheme("ruby",c)}));
diff --git a/src/Prime/Resources/public/themes/sapphire/sapphire.min.js b/src/Prime/Resources/public/themes/sapphire/sapphire.min.js
index da9a1e25..e21b1274 100644
--- a/src/Prime/Resources/public/themes/sapphire/sapphire.min.js
+++ b/src/Prime/Resources/public/themes/sapphire/sapphire.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("sapphire",{render:e=>{const{type:s,message:a}=e,i="error"===s||"warning"===s;return`\n            <div class="fl-sapphire fl-${s}" role="${i?"alert":"status"}" aria-live="${i?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-content">\n                    <span class="fl-message">${a}</span>\n                </div>\n                <div class="fl-progress-bar">\n                    <div class="fl-progress"></div>\n                </div>\n            </div>`}})}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s="fl-content",i="fl-message",r="fl-progress-bar",n="fl-progress",a=e=>`fl-${e}`,t=e=>`fl-${e}`,o={render:e=>{const{type:o,message:l}=e;return`\n            <div class="${t("sapphire")} ${a(o)}" ${function(e){const s=function(e){const s="error"===e||"warning"===e;return{role:s?"alert":"status",ariaLive:s?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${s.role}" aria-live="${s.ariaLive}" aria-atomic="${s.ariaAtomic}"`}(o)}>\n                <div class="${s}">\n                    <span class="${i}">${l}</span>\n                </div>\n                <div class="${r}">\n                    <div class="${n}"></div>\n                </div>\n            </div>`}};e.addTheme("sapphire",o)}));
diff --git a/src/Prime/Resources/public/themes/shared/shared.min.js b/src/Prime/Resources/public/themes/shared/shared.min.js
new file mode 100644
index 00000000..eac51c45
--- /dev/null
+++ b/src/Prime/Resources/public/themes/shared/shared.min.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).theme=e.theme||{},e.theme.shared={}))}(this,(function(e){"use strict";const t={sm:16,md:20,lg:24},r={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function n(e,n={}){const{size:s="md",className:o=""}=n,i="number"==typeof s?s:t[s],l=r[e];if(!l)return"";return`<svg${o?` class="${o}"`:""} viewBox="0 0 24 24" width="${i}" height="${i}" aria-hidden="true"><path fill="currentColor" d="${l}"/></svg>`}function s(e){const t="error"===e||"warning"===e;return{role:t?"alert":"status",ariaLive:t?"assertive":"polite",ariaAtomic:"true"}}const o={success:"Success",error:"Error",warning:"Warning",info:"Information"};function i(e){return e.charAt(0).toUpperCase()+e.slice(1)}e.CLASS_NAMES={container:"fl-container",wrapper:"fl-wrapper",content:"fl-content",message:"fl-message",title:"fl-title",text:"fl-text",icon:"fl-icon",iconWrapper:"fl-icon-wrapper",actions:"fl-actions",close:"fl-close",progressBar:"fl-progress-bar",progress:"fl-progress",show:"fl-show",sticky:"fl-sticky",rtl:"fl-rtl",type:e=>`fl-${e}`,theme:e=>`fl-${e}`},e.DEFAULT_TEXT={dismissButton:"DISMISS",closeLabel:e=>`Close ${e} message`},e.DEFAULT_TITLES=o,e.capitalizeType=i,e.getA11yAttributes=s,e.getA11yString=function(e){const t=s(e);return`role="${t.role}" aria-live="${t.ariaLive}" aria-atomic="${t.ariaAtomic}"`},e.getCloseButtonA11y=function(e){return`aria-label="Close ${e} message"`},e.getCloseIcon=function(e={}){return n("close",Object.assign({size:"sm"},e))},e.getIcon=n,e.getTitle=function(e,t){return e||o[t]||i(t)},e.getTypeIcon=function(e,t={}){return"success"===e||"error"===e||"warning"===e||"info"===e?n(e,t):""}}));
diff --git a/src/Prime/Resources/public/themes/slack/slack.min.js b/src/Prime/Resources/public/themes/slack/slack.min.js
index 71b95e0c..5cf1034b 100644
--- a/src/Prime/Resources/public/themes/slack/slack.min.js
+++ b/src/Prime/Resources/public/themes/slack/slack.min.js
@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";e.addTheme("slack",{render:e=>{const{type:s,message:i}=e,n="error"===s||"warning"===s;return`\n            <div class="fl-slack fl-${s}" role="${n?"alert":"status"}" aria-live="${n?"assertive":"polite"}" aria-atomic="true">\n                <div class="fl-slack-message">\n                    <div class="fl-avatar">\n                        ${(()=>{switch(s){case"success":return'<div class="fl-type-icon fl-success-icon">✓</div>';case"error":return'<div class="fl-type-icon fl-error-icon">✕</div>';case"warning":return'<div class="fl-type-icon fl-warning-icon">!</div>';case"info":return'<div class="fl-type-icon fl-info-icon">i</div>'}return""})()}\n                    </div>\n                    <div class="fl-message-content">\n                        <div class="fl-message-text">${i}</div>\n                    </div>\n                    <div class="fl-actions">\n                        <button class="fl-close" aria-label="Close ${s} message">\n                            <svg viewBox="0 0 20 20" width="16" height="16">\n                                <path fill="currentColor" d="M10 8.586L6.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 101.414 1.414L10 11.414l3.293 3.293a1 1 0 001.414-1.414L11.414 10l3.293-3.293a1 1 0 00-1.414-1.414L10 8.586z"/>\n                            </svg>\n                        </button>\n                    </div>\n                </div>\n            </div>`}})}));
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?s(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],s):s((e="undefined"!=typeof globalThis?globalThis:e||self).flasher)}(this,(function(e){"use strict";const s={sm:16,md:20,lg:24},n={success:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",error:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",warning:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z",info:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"};function i(e={}){return function(e,i={}){const{size:a="md",className:t=""}=i,r="number"==typeof a?a:s[a];return`<svg${t?` class="${t}"`:""} viewBox="0 0 24 24" width="${r}" height="${r}" aria-hidden="true"><path fill="currentColor" d="${n[e]}"/></svg>`}("close",Object.assign({size:"sm"},e))}const a="fl-actions",t="fl-close",r=e=>`fl-${e}`,l=e=>`fl-${e}`,o={success:"✓",error:"✕",warning:"!",info:"i"},c={render:e=>{const{type:s,message:n}=e,c=o[s]||"";return`\n            <div class="${l("slack")} ${r(s)}" ${function(e){const s=function(e){const s="error"===e||"warning"===e;return{role:s?"alert":"status",ariaLive:s?"assertive":"polite",ariaAtomic:"true"}}(e);return`role="${s.role}" aria-live="${s.ariaLive}" aria-atomic="${s.ariaAtomic}"`}(s)}>\n                <div class="fl-slack-message">\n                    <div class="fl-avatar">\n                        <div class="fl-type-icon fl-${s}-icon">${c}</div>\n                    </div>\n                    <div class="fl-message-content">\n                        <div class="fl-message-text">${n}</div>\n                    </div>\n                    <div class="${a}">\n                        <button class="${t}" ${function(e){return`aria-label="Close ${e} message"`}(s)}>\n                            ${i()}\n                        </button>\n                    </div>\n                </div>\n            </div>`}};e.addTheme("slack",c)}));