@stfrigerio/sito-template 0.1.30 → 0.1.31

package/dist/index.esm.js

@@ -30,7 +30,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
     return (jsx(ThemeContext$1.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
 };
 
-var styles$r = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
+var styles$s = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
 
 const SOUND_PACKS = {
     digital: {
@@ -595,11 +595,11 @@ function useComponentSound(config, options) {
 const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, soundConfig, onClick, onMouseEnter, onFocus, ...rest }) => {
     const { handlers } = useComponentSound(soundConfig);
     const buttonClasses = [
-        styles$r.button,
-        styles$r[variant],
-        styles$r[size],
-        fullWidth && styles$r.fullWidth,
-        loading && styles$r.loading,
+        styles$s.button,
+        styles$s[variant],
+        styles$s[size],
+        fullWidth && styles$s.fullWidth,
+        loading && styles$s.loading,
         className
     ].filter(Boolean).join(' ');
     const handleClick = (e) => {
@@ -610,10 +610,10 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
         handlers.onMouseEnter?.();
         onMouseEnter?.(e);
     };
-    return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$r.spinner }), iconLeft && jsx("span", { className: styles$r.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$r.iconRight, children: iconRight })] }));
+    return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$s.spinner }), iconLeft && jsx("span", { className: styles$s.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$s.iconRight, children: iconRight })] }));
 };
 
-var styles$q = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","headerContent":"Card-module_headerContent__W7-jD","expandButton":"Card-module_expandButton__I7f49","expandIcon":"Card-module_expandIcon__Lu-OY","expandableContent":"Card-module_expandableContent__BFgO5","expandable":"Card-module_expandable__GMXzo","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
+var styles$r = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","headerContent":"Card-module_headerContent__W7-jD","expandButton":"Card-module_expandButton__I7f49","expandIcon":"Card-module_expandIcon__Lu-OY","expandableContent":"Card-module_expandableContent__BFgO5","expandable":"Card-module_expandable__GMXzo","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
 
 /**
  * Card Component
@@ -678,28 +678,28 @@ const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padd
         onExpandChange?.(newExpanded);
     };
     const cardClasses = [
-        styles$q.card,
-        styles$q[variant],
-        hoverable && styles$q.hoverable,
-        clickable && styles$q.clickable,
-        !padding && styles$q.noPadding,
-        expandable && styles$q.expandable,
+        styles$r.card,
+        styles$r[variant],
+        hoverable && styles$r.hoverable,
+        clickable && styles$r.clickable,
+        !padding && styles$r.noPadding,
+        expandable && styles$r.expandable,
         className
     ].filter(Boolean).join(' ');
     const renderHeader = () => {
         if (header) {
-            return (jsxs("div", { className: styles$q.header, children: [jsx("div", { className: styles$q.headerContent, children: header }), expandable && (jsx("button", { className: styles$q.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$q.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
+            return (jsxs("div", { className: styles$r.header, children: [jsx("div", { className: styles$r.headerContent, children: header }), expandable && (jsx("button", { className: styles$r.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$r.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
         }
         if (title || subtitle) {
-            return (jsxs("div", { className: styles$q.header, children: [jsxs("div", { className: styles$q.headerContent, children: [title && jsx("h3", { className: styles$q.title, children: title }), subtitle && jsx("p", { className: styles$q.subtitle, children: subtitle })] }), expandable && (jsx("button", { className: styles$q.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$q.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
+            return (jsxs("div", { className: styles$r.header, children: [jsxs("div", { className: styles$r.headerContent, children: [title && jsx("h3", { className: styles$r.title, children: title }), subtitle && jsx("p", { className: styles$r.subtitle, children: subtitle })] }), expandable && (jsx("button", { className: styles$r.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$r.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
         }
         return null;
     };
-    const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$q.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$q.image }) })), renderHeader(), jsx(AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxs(motion.div, { initial: expandable ? { height: 0, opacity: 0 } : undefined, animate: expandable ? { height: 'auto', opacity: 1 } : undefined, exit: expandable ? { height: 0, opacity: 0 } : undefined, transition: { duration: 0.3, ease: "easeInOut" }, className: styles$q.expandableContent, children: [children && (jsx("div", { className: padding ? styles$q.body : undefined, children: children })), footer && jsx("div", { className: styles$q.footer, children: footer })] }, "content")) })] }));
+    const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$r.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$r.image }) })), renderHeader(), jsx(AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxs(motion.div, { initial: expandable ? { height: 0, opacity: 0 } : undefined, animate: expandable ? { height: 'auto', opacity: 1 } : undefined, exit: expandable ? { height: 0, opacity: 0 } : undefined, transition: { duration: 0.3, ease: "easeInOut" }, className: styles$r.expandableContent, children: [children && (jsx("div", { className: padding ? styles$r.body : undefined, children: children })), footer && jsx("div", { className: styles$r.footer, children: footer })] }, "content")) })] }));
     return (jsx(motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
 };
 
-var styles$p = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
+var styles$q = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
 
 /**
  * Checkbox component - Modern interactive checkbox with animations
@@ -744,13 +744,13 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return (jsxs("label", { className: styles$p.checkboxLabel, children: [jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => {
+    return (jsxs("label", { className: styles$q.checkboxLabel, children: [jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => {
                     const isChecked = e.target.checked;
                     onChange(isChecked);
                     if (soundConfig?.onClick !== false) {
                         playSound('toggle');
                     }
-                }, className: styles$p.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsx("span", { className: styles$p.checkboxText, children: label })] }));
+                }, className: styles$q.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsx("span", { className: styles$q.checkboxText, children: label })] }));
 };
 
 var DefaultContext = {
@@ -887,7 +887,7 @@ const parseEuropeanDate = (dateString) => {
     return '';
 };
 
-var styles$o = {"dateInput":"DateInput-module_dateInput__54VPD","label":"DateInput-module_label__yDdUw","inputWrapper":"DateInput-module_inputWrapper__x-r1d","textInput":"DateInput-module_textInput__ToOSX","calendarButton":"DateInput-module_calendarButton__JzDGD","hiddenDateInput":"DateInput-module_hiddenDateInput__IWNg3","error":"DateInput-module_error__ieuPO","success":"DateInput-module_success__rPA93","loading":"DateInput-module_loading__1DAmD"};
+var styles$p = {"dateInput":"DateInput-module_dateInput__54VPD","label":"DateInput-module_label__yDdUw","inputWrapper":"DateInput-module_inputWrapper__x-r1d","textInput":"DateInput-module_textInput__ToOSX","calendarButton":"DateInput-module_calendarButton__JzDGD","hiddenDateInput":"DateInput-module_hiddenDateInput__IWNg3","error":"DateInput-module_error__ieuPO","success":"DateInput-module_success__rPA93","loading":"DateInput-module_loading__1DAmD"};
 
 /**
  * DateInput component - European format date picker with manual input support
@@ -976,19 +976,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
         }
     };
     const getClassName = () => {
-        const classes = [styles$o.dateInput];
+        const classes = [styles$p.dateInput];
         if (error)
-            classes.push(styles$o.error);
+            classes.push(styles$p.error);
         if (success)
-            classes.push(styles$o.success);
+            classes.push(styles$p.success);
         if (loading)
-            classes.push(styles$o.loading);
+            classes.push(styles$p.loading);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$o.label, children: label }), jsxs("div", { className: styles$o.inputWrapper, children: [jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$o.textInput, disabled: disabled || loading, ...handlers }), jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$o.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsx(FiCalendar, {}) }), jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$o.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
+    return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$p.label, children: label }), jsxs("div", { className: styles$p.inputWrapper, children: [jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$p.textInput, disabled: disabled || loading, ...handlers }), jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$p.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsx(FiCalendar, {}) }), jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$p.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
 }
 
-var styles$n = {"searchableDropdown":"SearchableDropdown-module_searchableDropdown__S2Nh5","dropdownTrigger":"SearchableDropdown-module_dropdownTrigger__dihdr","open":"SearchableDropdown-module_open__P7mRt","dropdownValue":"SearchableDropdown-module_dropdownValue__ydrc2","placeholder":"SearchableDropdown-module_placeholder__BwM2W","dropdownArrow":"SearchableDropdown-module_dropdownArrow__yd5fp","dropdownMenu":"SearchableDropdown-module_dropdownMenu__2Z5cc","dropdownSearch":"SearchableDropdown-module_dropdownSearch__NRk7j","searchInput":"SearchableDropdown-module_searchInput__VS2Hw","searchIcon":"SearchableDropdown-module_searchIcon__2vKFF","dropdownOptions":"SearchableDropdown-module_dropdownOptions__6YXqF","dropdownOption":"SearchableDropdown-module_dropdownOption__YwDr-","selected":"SearchableDropdown-module_selected__31JeB","highlighted":"SearchableDropdown-module_highlighted__P0bBq","checkIcon":"SearchableDropdown-module_checkIcon__YxowK","dropdownNoResults":"SearchableDropdown-module_dropdownNoResults__WW-Da","loading":"SearchableDropdown-module_loading__xlYf0"};
+var styles$o = {"searchableDropdown":"SearchableDropdown-module_searchableDropdown__S2Nh5","dropdownTrigger":"SearchableDropdown-module_dropdownTrigger__dihdr","open":"SearchableDropdown-module_open__P7mRt","dropdownValue":"SearchableDropdown-module_dropdownValue__ydrc2","placeholder":"SearchableDropdown-module_placeholder__BwM2W","dropdownArrow":"SearchableDropdown-module_dropdownArrow__yd5fp","dropdownMenu":"SearchableDropdown-module_dropdownMenu__2Z5cc","dropdownSearch":"SearchableDropdown-module_dropdownSearch__NRk7j","searchInput":"SearchableDropdown-module_searchInput__VS2Hw","searchIcon":"SearchableDropdown-module_searchIcon__2vKFF","dropdownOptions":"SearchableDropdown-module_dropdownOptions__6YXqF","dropdownOption":"SearchableDropdown-module_dropdownOption__YwDr-","selected":"SearchableDropdown-module_selected__31JeB","highlighted":"SearchableDropdown-module_highlighted__P0bBq","checkIcon":"SearchableDropdown-module_checkIcon__YxowK","dropdownNoResults":"SearchableDropdown-module_dropdownNoResults__WW-Da","loading":"SearchableDropdown-module_loading__xlYf0"};
 
 /**
  * SearchableDropdown component - Modern filterable dropdown with animations
@@ -1093,23 +1093,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
         }
     };
     const getTriggerClassName = () => {
-        const classes = [styles$n.dropdownTrigger];
+        const classes = [styles$o.dropdownTrigger];
         if (isOpen)
-            classes.push(styles$n.open);
+            classes.push(styles$o.open);
         if (loading)
-            classes.push(styles$n.loading);
+            classes.push(styles$o.loading);
         if (error)
-            classes.push(styles$n.error);
+            classes.push(styles$o.error);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: styles$n.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsx("label", { children: label }), jsxs(motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsx("span", { className: `${styles$n.dropdownValue} ${!displayValue ? styles$n.placeholder : ''}`, children: displayValue || placeholder }), jsx(FiChevronDown, { className: styles$n.dropdownArrow })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(motion.div, { className: styles$n.dropdownMenu, initial: { opacity: 0, y: -10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2, ease: "easeOut" }, children: [jsxs("div", { className: styles$n.dropdownSearch, children: [jsx(FiSearch, { className: styles$n.searchIcon }), jsx("input", { ref: inputRef, type: "text", className: styles$n.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: styles$n.dropdownOptions, children: [allOptions.map((opt, index) => {
+    return (jsxs("div", { className: styles$o.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsx("label", { children: label }), jsxs(motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsx("span", { className: `${styles$o.dropdownValue} ${!displayValue ? styles$o.placeholder : ''}`, children: displayValue || placeholder }), jsx(FiChevronDown, { className: styles$o.dropdownArrow })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(motion.div, { className: styles$o.dropdownMenu, initial: { opacity: 0, y: -10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2, ease: "easeOut" }, children: [jsxs("div", { className: styles$o.dropdownSearch, children: [jsx(FiSearch, { className: styles$o.searchIcon }), jsx("input", { ref: inputRef, type: "text", className: styles$o.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: styles$o.dropdownOptions, children: [allOptions.map((opt, index) => {
                                     const isSelected = value === opt.value;
                                     const isHighlighted = highlightedIndex === index;
-                                    return (jsxs(motion.button, { type: "button", className: `${styles$n.dropdownOption} ${isSelected ? styles$n.selected : ''} ${isHighlighted ? styles$n.highlighted : ''}`, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.02 }, whileTap: { scale: 0.98 }, style: { willChange: 'transform' }, children: [jsx("span", { children: opt.label }), isSelected && jsx(FiCheck, { className: styles$n.checkIcon })] }, `${opt.value}-${index}`));
-                                }), allOptions.length === 0 && (jsx(motion.div, { className: styles$n.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
+                                    return (jsxs(motion.button, { type: "button", className: `${styles$o.dropdownOption} ${isSelected ? styles$o.selected : ''} ${isHighlighted ? styles$o.highlighted : ''}`, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.02 }, whileTap: { scale: 0.98 }, style: { willChange: 'transform' }, children: [jsx("span", { children: opt.label }), isSelected && jsx(FiCheck, { className: styles$o.checkIcon })] }, `${opt.value}-${index}`));
+                                }), allOptions.length === 0 && (jsx(motion.div, { className: styles$o.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
 }
 
-var styles$m = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWrapper":"SelectInput-module_selectWrapper__Qr4pl","selectIcon":"SelectInput-module_selectIcon__9pjhf","error":"SelectInput-module_error__3WNJc","success":"SelectInput-module_success__WJ5ga","loading":"SelectInput-module_loading__n35N9"};
+var styles$n = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWrapper":"SelectInput-module_selectWrapper__Qr4pl","selectIcon":"SelectInput-module_selectIcon__9pjhf","error":"SelectInput-module_error__3WNJc","success":"SelectInput-module_success__WJ5ga","loading":"SelectInput-module_loading__n35N9"};
 
 /**
  * SelectInput component - Styled dropdown selector with flexible option format
@@ -1147,26 +1147,26 @@ var styles$m = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
 function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false, soundConfig }) {
     const { handlers, playSound } = useComponentSound(soundConfig);
     const getClassName = () => {
-        const classes = [styles$m.selectInput];
+        const classes = [styles$n.selectInput];
         if (error)
-            classes.push(styles$m.error);
+            classes.push(styles$n.error);
         if (success)
-            classes.push(styles$m.success);
+            classes.push(styles$n.success);
         if (loading)
-            classes.push(styles$m.loading);
+            classes.push(styles$n.loading);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$m.selectWrapper, children: [jsxs("select", { value: value, onChange: e => {
+    return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$n.selectWrapper, children: [jsxs("select", { value: value, onChange: e => {
                             playSound('click');
                             onChange(e.target.value);
                         }, disabled: disabled || loading, required: required, ...handlers, children: [jsx("option", { value: "", children: placeholder }), options.map(opt => {
                                 const optionValue = typeof opt === 'string' ? opt : opt.value;
                                 const optionLabel = typeof opt === 'string' ? opt : opt.label;
                                 return (jsx("option", { value: optionValue, children: optionLabel }, optionValue));
-                            })] }), jsx(FiChevronDown, { className: styles$m.selectIcon })] })] }));
+                            })] }), jsx(FiChevronDown, { className: styles$n.selectIcon })] })] }));
 }
 
-var styles$l = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","compact":"TextArea-module_compact__U5lPn","textareaLabel":"TextArea-module_textareaLabel__7Vmyx","requiredIndicator":"TextArea-module_requiredIndicator__3Fxyy","textareaInput":"TextArea-module_textareaInput__VCDZA","characterCount":"TextArea-module_characterCount__9FO5N","nearLimit":"TextArea-module_nearLimit__cUdnw","atLimit":"TextArea-module_atLimit__GoWCC","error":"TextArea-module_error__ciHgb","success":"TextArea-module_success__a0-xD","loading":"TextArea-module_loading__CSFBR","focusMode":"TextArea-module_focusMode__9A8U-"};
+var styles$m = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","compact":"TextArea-module_compact__U5lPn","textareaLabel":"TextArea-module_textareaLabel__7Vmyx","requiredIndicator":"TextArea-module_requiredIndicator__3Fxyy","textareaInput":"TextArea-module_textareaInput__VCDZA","characterCount":"TextArea-module_characterCount__9FO5N","nearLimit":"TextArea-module_nearLimit__cUdnw","atLimit":"TextArea-module_atLimit__GoWCC","error":"TextArea-module_error__ciHgb","success":"TextArea-module_success__a0-xD","loading":"TextArea-module_loading__CSFBR","focusMode":"TextArea-module_focusMode__9A8U-"};
 
 /**
  * TextArea component - Multi-line text input with character counting
@@ -1201,38 +1201,38 @@ var styles$l = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
 function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false, className = "" }) {
     const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
     const getContainerClassName = () => {
-        const classes = [styles$l.textareaContainer];
+        const classes = [styles$m.textareaContainer];
         if (error)
-            classes.push(styles$l.error);
+            classes.push(styles$m.error);
         if (success)
-            classes.push(styles$l.success);
+            classes.push(styles$m.success);
         if (loading)
-            classes.push(styles$l.loading);
+            classes.push(styles$m.loading);
         if (focusMode)
-            classes.push(styles$l.focusMode);
+            classes.push(styles$m.focusMode);
         if (compact)
-            classes.push(styles$l.compact);
+            classes.push(styles$m.compact);
         if (className)
             classes.push(className);
         return classes.join(' ');
     };
     const getCharCountClassName = () => {
         if (!maxLength)
-            return styles$l.characterCount;
-        const classes = [styles$l.characterCount];
+            return styles$m.characterCount;
+        const classes = [styles$m.characterCount];
         const percentage = (value.length / maxLength) * 100;
         if (percentage >= 100) {
-            classes.push(styles$l.atLimit);
+            classes.push(styles$m.atLimit);
         }
         else if (percentage >= 80) {
-            classes.push(styles$l.nearLimit);
+            classes.push(styles$m.nearLimit);
         }
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { htmlFor: textareaId, className: styles$l.textareaLabel, children: [label, required && jsx("span", { className: styles$l.requiredIndicator, children: "*" })] })), jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$l.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxs("div", { className: getCharCountClassName(), children: [jsx("span", { children: value.length }), jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsx("span", { children: maxLength })] }))] }));
+    return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { htmlFor: textareaId, className: styles$m.textareaLabel, children: [label, required && jsx("span", { className: styles$m.requiredIndicator, children: "*" })] })), jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$m.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxs("div", { className: getCharCountClassName(), children: [jsx("span", { children: value.length }), jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsx("span", { children: maxLength })] }))] }));
 }
 
-var styles$k = {"textInput":"TextInput-module_textInput__b2LVM","required":"TextInput-module_required__7uLiM","inputError":"TextInput-module_inputError__QD0a-","errorMessage":"TextInput-module_errorMessage__nIDoQ","success":"TextInput-module_success__KbSS3","loading":"TextInput-module_loading__qXaca","withIcon":"TextInput-module_withIcon__-8swm","inputIcon":"TextInput-module_inputIcon__B4czN","withAction":"TextInput-module_withAction__JD3ku","actionButton":"TextInput-module_actionButton__zFJel"};
+var styles$l = {"textInput":"TextInput-module_textInput__b2LVM","required":"TextInput-module_required__7uLiM","inputError":"TextInput-module_inputError__QD0a-","errorMessage":"TextInput-module_errorMessage__nIDoQ","success":"TextInput-module_success__KbSS3","loading":"TextInput-module_loading__qXaca","withIcon":"TextInput-module_withIcon__-8swm","inputIcon":"TextInput-module_inputIcon__B4czN","withAction":"TextInput-module_withAction__JD3ku","actionButton":"TextInput-module_actionButton__zFJel"};
 
 /**
  * TextInput component - A versatile text input field with label and error handling
@@ -1269,21 +1269,21 @@ function TextInput({ label, value, onChange, type = "text", onBlur, placeholder,
     const { handlers, playSound } = useComponentSound(soundConfig);
     const prevValueRef = React.useRef(value);
     const getContainerClassName = () => {
-        const classes = [styles$k.textInput];
+        const classes = [styles$l.textInput];
         if (success)
-            classes.push(styles$k.success);
+            classes.push(styles$l.success);
         if (loading)
-            classes.push(styles$k.loading);
+            classes.push(styles$l.loading);
         if (icon)
-            classes.push(styles$k.withIcon);
+            classes.push(styles$l.withIcon);
         if (actionButton)
-            classes.push(styles$k.withAction);
+            classes.push(styles$l.withAction);
         return classes.join(' ');
     };
     React.useEffect(() => {
         prevValueRef.current = value;
     }, [value]);
-    return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$k.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$k.inputIcon, children: icon }), jsx("input", { id: inputId, type: type, value: value, onChange: (e) => {
+    return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$l.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$l.inputIcon, children: icon }), jsx("input", { id: inputId, type: type, value: value, onChange: (e) => {
                             const newValue = e.target.value;
                             const oldValue = prevValueRef.current;
                             onChange(newValue);
@@ -1299,13 +1299,13 @@ function TextInput({ label, value, onChange, type = "text", onBlur, placeholder,
                             if (error && soundConfig?.onError) {
                                 playSound(typeof soundConfig.onError === 'string' ? soundConfig.onError : 'error');
                             }
-                        }, onBlur: onBlur, placeholder: placeholder, className: error ? styles$k.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsx("button", { type: "button", className: styles$k.actionButton, onClick: () => {
+                        }, onBlur: onBlur, placeholder: placeholder, className: error ? styles$l.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsx("button", { type: "button", className: styles$l.actionButton, onClick: () => {
                             handlers.onClick?.();
                             actionButton.onClick();
-                        }, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$k.errorMessage, children: error }))] }));
+                        }, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$l.errorMessage, children: error }))] }));
 }
 
-var styles$j = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
+var styles$k = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
 
 /**
  * Toggle Component
@@ -1366,7 +1366,7 @@ function Toggle(props) {
         justifyContent: 'center',
         ...style
     };
-    return (jsxs("div", { className: `${styles$j.toggleContainer} ${className || ''}`, children: [jsxs(motion.button, { ref: leftButtonRef, className: `${styles$j.toggleButton} ${!isOn ? styles$j.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
+    return (jsxs("div", { className: `${styles$k.toggleContainer} ${className || ''}`, children: [jsxs(motion.button, { ref: leftButtonRef, className: `${styles$k.toggleButton} ${!isOn ? styles$k.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
                     const element = leftButtonRef.current;
                     if (!isOn) {
                         // Already on left, celebration!
@@ -1382,7 +1382,7 @@ function Toggle(props) {
                         playSound('toggle', element || undefined);
                     }
                     onToggle(false);
-                }, onMouseEnter: () => handlers.onMouseEnter?.(leftButtonRef.current || undefined), style: buttonStyle, children: [jsx(motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxs(motion.button, { ref: rightButtonRef, className: `${styles$j.toggleButton} ${isOn ? styles$j.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
+                }, onMouseEnter: () => handlers.onMouseEnter?.(leftButtonRef.current || undefined), style: buttonStyle, children: [jsx(motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxs(motion.button, { ref: rightButtonRef, className: `${styles$k.toggleButton} ${isOn ? styles$k.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
                     const element = rightButtonRef.current;
                     if (isOn) {
                         // Already on right, celebration!
@@ -1401,7 +1401,7 @@ function Toggle(props) {
                 }, onMouseEnter: () => handlers.onMouseEnter?.(rightButtonRef.current || undefined), style: buttonStyle, children: [jsx(motion.div, { animate: { scale: isOn ? 1.1 : 1, rotate: isOn ? [0, 5, -5, 0] : 0 }, transition: { duration: 0.3 }, children: rightIcon }), rightLabel] })] }));
 }
 
-var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","minimal":"NumberStepper-module_minimal__y47-W","custom":"NumberStepper-module_custom__XGSVg","vertical":"NumberStepper-module_vertical__nBcL7","pulse":"NumberStepper-module_pulse__51oUo"};
+var styles$j = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","minimal":"NumberStepper-module_minimal__y47-W","custom":"NumberStepper-module_custom__XGSVg","vertical":"NumberStepper-module_vertical__nBcL7","pulse":"NumberStepper-module_pulse__51oUo"};
 
 /**
  * NumberStepper Component
@@ -1586,32 +1586,32 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
         setDisplayValue(finalValue);
     }, [displayValue, min, max, step, onChange]);
     const containerClasses = [
-        styles$i.container,
-        styles$i[size],
-        styles$i[variant],
-        layout === 'vertical' && styles$i.vertical,
-        disabled && styles$i.disabled,
+        styles$j.container,
+        styles$j[size],
+        styles$j[variant],
+        layout === 'vertical' && styles$j.vertical,
+        disabled && styles$j.disabled,
         className
     ].filter(Boolean).join(' ');
     // Merge custom styles with hover states
     const [isButtonHovered, setIsButtonHovered] = useState(null);
     const isDecrementDisabled = disabled || value <= min;
     const isIncrementDisabled = disabled || value >= max;
-    const stepperContent = (jsxs("div", { className: styles$i.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsx(motion.button, { className: styles$i.button, style: {
+    const stepperContent = (jsxs("div", { className: styles$j.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsx(motion.button, { className: styles$j.button, style: {
                     ...customStyles.button,
                     ...(isButtonHovered === 'decrement' && customStyles.buttonHover)
-                }, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsx("div", { className: styles$i.valueContainer, style: customStyles.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$i.valueWrapper, children: jsx("input", { type: "text", className: styles$i.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsx(motion.button, { className: styles$i.button, style: {
+                }, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsx("span", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsx("div", { className: styles$j.valueContainer, style: customStyles.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$j.valueWrapper, children: jsx("input", { type: "text", className: styles$j.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsx(motion.button, { className: styles$j.button, style: {
                     ...customStyles.button,
                     ...(isButtonHovered === 'increment' && customStyles.buttonHover)
-                }, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }));
+                }, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsx("span", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }));
     // For custom variant with horizontal layout, render differently
     if (variant === 'custom' && (label || icon)) {
-        return (jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxs("div", { className: styles$i.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+        return (jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxs("div", { className: styles$j.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsx("span", { className: styles$j.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$j.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$j.limits, style: customStyles.limits, children: [jsx("span", { className: styles$j.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$j.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
     }
-    return (jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxs("div", { className: styles$i.header, style: customStyles.header, children: [icon && jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+    return (jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxs("div", { className: styles$j.header, style: customStyles.header, children: [icon && jsx("span", { className: styles$j.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$j.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$j.limits, style: customStyles.limits, children: [jsx("span", { className: styles$j.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$j.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
 };
 
-var styles$h = {"button":"ToggleButton-module_button__DTuyY","background":"ToggleButton-module_background__NwfTp","content":"ToggleButton-module_content__NHqIN","iconWrapper":"ToggleButton-module_iconWrapper__yN4sP","icon":"ToggleButton-module_icon__r8juX","label":"ToggleButton-module_label__4mPJP","hideMobile":"ToggleButton-module_hideMobile__GFAc3","checkmark":"ToggleButton-module_checkmark__ZJwf-","ripple":"ToggleButton-module_ripple__2-faB","small":"ToggleButton-module_small__MhfoN","large":"ToggleButton-module_large__A3naL","default":"ToggleButton-module_default__q8QaZ","active":"ToggleButton-module_active__4DjlR","outlined":"ToggleButton-module_outlined__OtqJB","filled":"ToggleButton-module_filled__LySNn","ghost":"ToggleButton-module_ghost__9KXcb","active-primary":"ToggleButton-module_active-primary__vXMP7","active-secondary":"ToggleButton-module_active-secondary__9Ttdx","active-success":"ToggleButton-module_active-success__oi0rr","active-danger":"ToggleButton-module_active-danger__VUdxr","active-warning":"ToggleButton-module_active-warning__77nSu","animation-scale":"ToggleButton-module_animation-scale__j-3mJ","scaleAnimation":"ToggleButton-module_scaleAnimation__Ms1j2","animation-rotate":"ToggleButton-module_animation-rotate__pBmfc","rotateAnimation":"ToggleButton-module_rotateAnimation__xWZJ5","animation-flip":"ToggleButton-module_animation-flip__ErAbm","flipAnimation":"ToggleButton-module_flipAnimation__qwDTb","disabled":"ToggleButton-module_disabled__Gv5ji"};
+var styles$i = {"button":"ToggleButton-module_button__DTuyY","background":"ToggleButton-module_background__NwfTp","content":"ToggleButton-module_content__NHqIN","iconWrapper":"ToggleButton-module_iconWrapper__yN4sP","icon":"ToggleButton-module_icon__r8juX","label":"ToggleButton-module_label__4mPJP","hideMobile":"ToggleButton-module_hideMobile__GFAc3","checkmark":"ToggleButton-module_checkmark__ZJwf-","ripple":"ToggleButton-module_ripple__2-faB","small":"ToggleButton-module_small__MhfoN","large":"ToggleButton-module_large__A3naL","default":"ToggleButton-module_default__q8QaZ","active":"ToggleButton-module_active__4DjlR","outlined":"ToggleButton-module_outlined__OtqJB","filled":"ToggleButton-module_filled__LySNn","ghost":"ToggleButton-module_ghost__9KXcb","active-primary":"ToggleButton-module_active-primary__vXMP7","active-secondary":"ToggleButton-module_active-secondary__9Ttdx","active-success":"ToggleButton-module_active-success__oi0rr","active-danger":"ToggleButton-module_active-danger__VUdxr","active-warning":"ToggleButton-module_active-warning__77nSu","animation-scale":"ToggleButton-module_animation-scale__j-3mJ","scaleAnimation":"ToggleButton-module_scaleAnimation__Ms1j2","animation-rotate":"ToggleButton-module_animation-rotate__pBmfc","rotateAnimation":"ToggleButton-module_rotateAnimation__xWZJ5","animation-flip":"ToggleButton-module_animation-flip__ErAbm","flipAnimation":"ToggleButton-module_flipAnimation__qwDTb","disabled":"ToggleButton-module_disabled__Gv5ji"};
 
 /**
  * ToggleButton Component
@@ -1650,18 +1650,18 @@ var styles$h = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
 const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', style = {}, color, tooltip, hideLabelOnMobile = false, soundConfig }) => {
     const { handlers, playSound } = useComponentSound(soundConfig);
     const buttonClasses = [
-        styles$h.button,
-        styles$h[size],
-        styles$h[variant],
-        active && styles$h.active,
-        active && styles$h[`active-${activeColor}`],
-        disabled && styles$h.disabled,
-        animation !== 'none' && styles$h[`animation-${animation}`],
+        styles$i.button,
+        styles$i[size],
+        styles$i[variant],
+        active && styles$i.active,
+        active && styles$i[`active-${activeColor}`],
+        disabled && styles$i.disabled,
+        animation !== 'none' && styles$i[`animation-${animation}`],
         className
     ].filter(Boolean).join(' ');
     const labelClasses = [
-        styles$h.label,
-        hideLabelOnMobile && styles$h.hideMobile
+        styles$i.label,
+        hideLabelOnMobile && styles$i.hideMobile
     ].filter(Boolean).join(' ');
     const iconVariants = {
         scale: {
@@ -1725,10 +1725,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
     return (jsxs(motion.button, { className: buttonClasses, style: dynamicStyle, onClick: () => {
             playSound('toggle');
             onClick();
-        }, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsx(motion.div, { className: styles$h.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$h.content, children: [icon && (jsx(motion.div, { className: styles$h.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$h.icon, children: icon })) : (jsx("div", { className: styles$h.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$h.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsx(AnimatePresence, { children: active && (jsx(motion.div, { className: styles$h.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
+        }, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsx(motion.div, { className: styles$i.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$i.content, children: [icon && (jsx(motion.div, { className: styles$i.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$i.icon, children: icon })) : (jsx("div", { className: styles$i.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$i.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsx(AnimatePresence, { children: active && (jsx(motion.div, { className: styles$i.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
 };
 
-var styles$g = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","fill":"Slider-module_fill__AYR4-","shimmer":"Slider-module_shimmer__271tL","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","ripple":"Slider-module_ripple__gVS04","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
+var styles$h = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","fill":"Slider-module_fill__AYR4-","shimmer":"Slider-module_shimmer__271tL","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","ripple":"Slider-module_ripple__gVS04","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
 
 /**
  * Slider component - A beautiful, animated range input
@@ -1816,16 +1816,16 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
             setShowTooltipState(false);
     };
     const dynamicColor = getDynamicColor();
-    const sizeClass = styles$g[`size-${size}`];
-    const stateClass = disabled ? styles$g.disabled : loading ? styles$g.loading : '';
+    const sizeClass = styles$h[`size-${size}`];
+    const stateClass = disabled ? styles$h.disabled : loading ? styles$h.loading : '';
     if (loading) {
-        return (jsxs("div", { className: `${styles$g.slider} ${sizeClass} ${styles$g.loading} ${className}`, style: style, children: [label && jsx("label", { className: styles$g.label, children: label }), jsx("div", { className: styles$g.loadingTrack, children: jsx(motion.div, { className: styles$g.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
+        return (jsxs("div", { className: `${styles$h.slider} ${sizeClass} ${styles$h.loading} ${className}`, style: style, children: [label && jsx("label", { className: styles$h.label, children: label }), jsx("div", { className: styles$h.loadingTrack, children: jsx(motion.div, { className: styles$h.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
                             repeat: Infinity,
                             duration: 1.5,
                             ease: "easeInOut"
                         } }) })] }));
     }
-    return (jsxs("div", { className: `${styles$g.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsx(motion.label, { className: styles$g.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxs(motion.div, { className: styles$g.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsx(motion.div, { className: styles$g.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsx(motion.div, { className: styles$g.fill, style: {
+    return (jsxs("div", { className: `${styles$h.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsx(motion.label, { className: styles$h.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxs(motion.div, { className: styles$h.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsx(motion.div, { className: styles$h.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsx(motion.div, { className: styles$h.fill, style: {
                                 width: `${percentage}%`,
                                 backgroundColor: dynamicColor
                             }, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: {
@@ -1835,7 +1835,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                                 damping: 30
                             }, whileHover: {
                                 boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2)`
-                            } }) }), jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$g.input, disabled: disabled, "aria-label": label }), jsx(motion.div, { className: styles$g.thumb, style: {
+                            } }) }), jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$h.input, disabled: disabled, "aria-label": label }), jsx(motion.div, { className: styles$h.thumb, style: {
                             left: `${percentage}%`,
                             backgroundColor: dynamicColor,
                             borderColor: colors.thumb || dynamicColor
@@ -1852,14 +1852,14 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                         }, whileHover: {
                             scale: 1.1,
                             transition: { duration: 0.1 }
-                        }, children: isDragging && (jsx(motion.div, { className: styles$g.ripple, initial: { scale: 0, opacity: 0.6 }, animate: { scale: 2, opacity: 0 }, transition: { duration: 0.5 } })) }), jsx(AnimatePresence, { children: showTooltipState && (jsxs(motion.div, { className: styles$g.tooltip, style: {
+                        }, children: isDragging && (jsx(motion.div, { className: styles$h.ripple, initial: { scale: 0, opacity: 0.6 }, animate: { scale: 2, opacity: 0 }, transition: { duration: 0.5 } })) }), jsx(AnimatePresence, { children: showTooltipState && (jsxs(motion.div, { className: styles$h.tooltip, style: {
                                 left: `${percentage}%`,
                                 backgroundColor: dynamicColor
-                            }, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsx("div", { className: styles$g.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsx(motion.div, { className: styles$g.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
+                            }, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsx("div", { className: styles$h.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsx(motion.div, { className: styles$h.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
                     duration: 0.2,
                     type: "spring",
                     stiffness: 300
-                }, children: formatValue(value) }, value)), labels.length > 0 && (jsx("div", { className: styles$g.labelsContainer, children: labels.map((labelConfig, index) => {
+                }, children: formatValue(value) }, value)), labels.length > 0 && (jsx("div", { className: styles$h.labelsContainer, children: labels.map((labelConfig, index) => {
                     let position = 0;
                     if (labelConfig.position === 'start')
                         position = 0;
@@ -1867,7 +1867,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                         position = 100;
                     else if (typeof labelConfig.position === 'number')
                         position = labelConfig.position;
-                    return (jsx(motion.div, { className: styles$g.labelItem, style: {
+                    return (jsx(motion.div, { className: styles$h.labelItem, style: {
                             left: `${position}%`,
                             color: labelConfig.color
                         }, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, transition: {
@@ -1880,6 +1880,171 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                 }) }))] }));
 }
 
+var styles$g = {"loadingContainer":"LoadingSpinner-module_loadingContainer__m5u51","fullScreen":"LoadingSpinner-module_fullScreen__TuAem","overlay":"LoadingSpinner-module_overlay__X7FTa","shimmer":"LoadingSpinner-module_shimmer__xw4AH","small":"LoadingSpinner-module_small__nq8A3","loadingText":"LoadingSpinner-module_loadingText__wWwna","medium":"LoadingSpinner-module_medium__3JC1S","large":"LoadingSpinner-module_large__4MvAc","dotsSpinner":"LoadingSpinner-module_dotsSpinner__PXtfs","dot1":"LoadingSpinner-module_dot1__5YKSi","dot2":"LoadingSpinner-module_dot2__l6Rbu","dot3":"LoadingSpinner-module_dot3__b9YPW","circleSpinner":"LoadingSpinner-module_circleSpinner__ZmmWs","pulseSpinner":"LoadingSpinner-module_pulseSpinner__wTtDJ","textGradient":"LoadingSpinner-module_textGradient__QDrTY","sparkleContainer":"LoadingSpinner-module_sparkleContainer__9XLJG","sparkle":"LoadingSpinner-module_sparkle__LtFFf"};
+
+const defaultMessages = [
+    'Loading your content...',
+    'Just a moment please...',
+    'Preparing something awesome...',
+    'Almost ready...',
+    'Working on it...',
+    'Just a sec...',
+    'Loading with care...',
+    'Getting things ready...',
+    'Almost there...',
+    'Polishing the details...'
+];
+/**
+ * LoadingSpinner Component
+ *
+ * @component
+ * @description
+ * A highly customizable, animated loading spinner component built with Framer Motion.
+ * Supports multiple visual variants, sizes, custom messages, and advanced styling options.
+ * Perfect for indicating loading states across different contexts in your application.
+ *
+ * Features:
+ * - Multiple spinner variants (dots, spinner, pulse)
+ * - Three size options (small, medium, large)
+ * - Rotating or static messages
+ * - Customizable colors and styling
+ * - Full-screen overlay support
+ * - Decorative sparkle effects
+ * - Accessibility support (respects reduced motion preferences)
+ * - Theme-aware styling
+ *
+ * @example
+ * // Basic usage
+ * <LoadingSpinner />
+ *
+ * @example
+ * // With custom message and variant
+ * <LoadingSpinner
+ *   variant="pulse"
+ *   message="Saving your changes..."
+ *   size="large"
+ * />
+ *
+ * @example
+ * // Full-screen overlay
+ * <LoadingSpinner
+ *   fullScreen
+ *   overlay
+ *   message="Loading application..."
+ * />
+ *
+ * @example
+ * // Custom messages and styling
+ * <LoadingSpinner
+ *   customMessages={['Processing...', 'Almost done...', 'Final touches...']}
+ *   color="#ff6b6b"
+ *   backgroundColor="#f8f9fa"
+ *   showSparkles={false}
+ * />
+ *
+ * @param {LoadingSpinnerProps} props - The props for the LoadingSpinner component
+ * @returns {JSX.Element} The rendered LoadingSpinner component
+ */
+const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className = '', showMessage = true, customMessages, messageRotationInterval = 2500, showSparkles = true, fullScreen = false, overlay = false, color, backgroundColor }) => {
+    const messagesToUse = customMessages || defaultMessages;
+    const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
+    const [currentMessage, setCurrentMessage] = useState(message || messagesToUse[0]);
+    useEffect(() => {
+        if (!message && showMessage) {
+            const interval = setInterval(() => {
+                setCurrentMessageIndex((prev) => (prev + 1) % messagesToUse.length);
+            }, messageRotationInterval);
+            return () => clearInterval(interval);
+        }
+    }, [message, showMessage, messagesToUse.length, messageRotationInterval]);
+    useEffect(() => {
+        if (!message && showMessage) {
+            setCurrentMessage(messagesToUse[currentMessageIndex]);
+        }
+    }, [currentMessageIndex, message, messagesToUse, showMessage]);
+    const containerClasses = [
+        styles$g.loadingContainer,
+        styles$g[size],
+        styles$g[variant],
+        fullScreen && styles$g.fullScreen,
+        overlay && styles$g.overlay,
+        className
+    ].filter(Boolean).join(' ');
+    const customStyle = {
+        ...(color && { '--spinner-color': color }),
+        ...(backgroundColor && { '--spinner-background': backgroundColor }),
+    };
+    const renderDots = () => (jsxs(motion.div, { className: styles$g.dotsSpinner, animate: { rotate: 360 }, transition: {
+            duration: 2,
+            repeat: Infinity,
+            ease: 'linear'
+        }, children: [jsx(motion.div, { className: styles$g.dot1, animate: {
+                    scale: [1, 1.3, 1],
+                    y: [0, -6, 0]
+                }, transition: {
+                    duration: 1.5,
+                    repeat: Infinity,
+                    ease: 'easeInOut',
+                    delay: 0
+                } }), jsx(motion.div, { className: styles$g.dot2, animate: {
+                    scale: [1, 1.3, 1],
+                    y: [0, -6, 0]
+                }, transition: {
+                    duration: 1.5,
+                    repeat: Infinity,
+                    ease: 'easeInOut',
+                    delay: 0.5
+                } }), jsx(motion.div, { className: styles$g.dot3, animate: {
+                    scale: [1, 1.3, 1],
+                    y: [0, -6, 0]
+                }, transition: {
+                    duration: 1.5,
+                    repeat: Infinity,
+                    ease: 'easeInOut',
+                    delay: 1
+                } })] }));
+    const renderSpinner = () => (jsx(motion.div, { className: styles$g.circleSpinner, animate: { rotate: 360 }, transition: {
+            duration: 1,
+            repeat: Infinity,
+            ease: 'linear'
+        } }));
+    const renderPulse = () => (jsx(motion.div, { className: styles$g.pulseSpinner, animate: {
+            scale: [1, 1.2, 1],
+            opacity: [1, 0.7, 1]
+        }, transition: {
+            duration: 1.5,
+            repeat: Infinity,
+            ease: 'easeInOut'
+        } }));
+    const renderSpinnerVariant = () => {
+        switch (variant) {
+            case 'spinner':
+                return renderSpinner();
+            case 'pulse':
+                return renderPulse();
+            case 'dots':
+            default:
+                return renderDots();
+        }
+    };
+    return (jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsx(AnimatePresence, { mode: "wait", children: jsx(motion.p, { className: styles$g.loadingText, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: {
+                        duration: 0.4,
+                        ease: 'easeOut'
+                    }, children: currentMessage }, currentMessage) })), showSparkles && (jsx("div", { className: styles$g.sparkleContainer, children: [...Array(4)].map((_, i) => (jsx(motion.div, { className: styles$g.sparkle, animate: {
+                        opacity: [0, 1, 0],
+                        scale: [0.5, 1, 0.5],
+                        rotate: [0, 180, 360]
+                    }, transition: {
+                        duration: 3,
+                        repeat: Infinity,
+                        delay: i * 0.75,
+                        ease: 'easeInOut'
+                    }, style: {
+                        left: `${20 + (i % 2) * 60}%`,
+                        top: `${20 + Math.floor(i / 2) * 60}%`
+                    } }, i))) }))] }));
+};
+
 var styles$f = {"arrayInput":"ArrayInput-module_arrayInput__q1x7A","arrayInputLabel":"ArrayInput-module_arrayInputLabel__HyUC7","arrayInputItem":"ArrayInput-module_arrayInputItem__bFtgl","inputWrapper":"ArrayInput-module_inputWrapper__ajhbW","input":"ArrayInput-module_input__1uywi","complexItem":"ArrayInput-module_complexItem__zr-Q-","fieldsWrapper":"ArrayInput-module_fieldsWrapper__7BVPa","removeButton":"ArrayInput-module_removeButton__gYf8Y","addButton":"ArrayInput-module_addButton__mia29"};
 
 /**
@@ -2938,7 +3103,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
                 }, children: [jsxs("div", { className: styles$7.tooltipHeader, children: [jsx("div", { className: styles$7.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxs("div", { className: styles$7.tooltipRating, children: [jsx("span", { className: styles$7.ratingValue, children: selectedMood.rating }), jsx("span", { className: styles$7.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsx("div", { className: styles$7.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsx("span", { className: styles$7.tag, children: tag }, index))) })), selectedMood.comment && (jsx("div", { className: styles$7.tooltipComment, children: selectedMood.comment }))] }))] }));
 };
 
-var styles$6 = {"container":"QuantifiableHabitsChart-module_container__X5SBp","controls":"QuantifiableHabitsChart-module_controls__O-ObQ","viewToggle":"QuantifiableHabitsChart-module_viewToggle__24hKA","viewButton":"QuantifiableHabitsChart-module_viewButton__WFU6j","active":"QuantifiableHabitsChart-module_active__Pjqy9","viewIcon":"QuantifiableHabitsChart-module_viewIcon__b2mfk","viewLabel":"QuantifiableHabitsChart-module_viewLabel__9MjCU","legend":"QuantifiableHabitsChart-module_legend__3Ki7c","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","chart":"QuantifiableHabitsChart-module_chart__FMeA-","gridLine":"QuantifiableHabitsChart-module_gridLine__CTNIq","line":"QuantifiableHabitsChart-module_line__CpYip","xAxis":"QuantifiableHabitsChart-module_xAxis__lbgBG","yAxis":"QuantifiableHabitsChart-module_yAxis__Y6WeV","dataPoint":"QuantifiableHabitsChart-module_dataPoint__s8UMX","tooltip":"QuantifiableHabitsChart-module_tooltip__Fay8N","visible":"QuantifiableHabitsChart-module_visible__-KSJq","tooltipHeader":"QuantifiableHabitsChart-module_tooltipHeader__7Q2up","tooltipEmoji":"QuantifiableHabitsChart-module_tooltipEmoji__atV3T","tooltipDot":"QuantifiableHabitsChart-module_tooltipDot__YbdFh","tooltipInfo":"QuantifiableHabitsChart-module_tooltipInfo__XC7WF","tooltipDate":"QuantifiableHabitsChart-module_tooltipDate__6V6Xi","tooltipValue":"QuantifiableHabitsChart-module_tooltipValue__ldASB"};
+var styles$6 = {"container":"QuantifiableHabitsChart-module_container__X5SBp","controls":"QuantifiableHabitsChart-module_controls__O-ObQ","viewToggle":"QuantifiableHabitsChart-module_viewToggle__24hKA","viewButton":"QuantifiableHabitsChart-module_viewButton__WFU6j","active":"QuantifiableHabitsChart-module_active__Pjqy9","viewIcon":"QuantifiableHabitsChart-module_viewIcon__b2mfk","viewLabel":"QuantifiableHabitsChart-module_viewLabel__9MjCU","aggregationToggle":"QuantifiableHabitsChart-module_aggregationToggle__WnxwB","aggregationButton":"QuantifiableHabitsChart-module_aggregationButton__sGCxX","aggregationIcon":"QuantifiableHabitsChart-module_aggregationIcon__HIaEf","aggregationLabel":"QuantifiableHabitsChart-module_aggregationLabel__Yc-S-","legend":"QuantifiableHabitsChart-module_legend__3Ki7c","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","chart":"QuantifiableHabitsChart-module_chart__FMeA-","gridLine":"QuantifiableHabitsChart-module_gridLine__CTNIq","line":"QuantifiableHabitsChart-module_line__CpYip","xAxis":"QuantifiableHabitsChart-module_xAxis__lbgBG","yAxis":"QuantifiableHabitsChart-module_yAxis__Y6WeV","dataPoint":"QuantifiableHabitsChart-module_dataPoint__s8UMX","tooltip":"QuantifiableHabitsChart-module_tooltip__Fay8N","visible":"QuantifiableHabitsChart-module_visible__-KSJq","tooltipHeader":"QuantifiableHabitsChart-module_tooltipHeader__7Q2up","tooltipEmoji":"QuantifiableHabitsChart-module_tooltipEmoji__atV3T","tooltipDot":"QuantifiableHabitsChart-module_tooltipDot__YbdFh","tooltipInfo":"QuantifiableHabitsChart-module_tooltipInfo__XC7WF","tooltipDate":"QuantifiableHabitsChart-module_tooltipDate__6V6Xi","tooltipValue":"QuantifiableHabitsChart-module_tooltipValue__ldASB"};
 
 // Default colors as fallback
 const DEFAULT_HABIT_COLORS = {
@@ -2958,6 +3123,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
     const [activeHabits, setActiveHabits] = useState([]);
     const [hoveredHabit, setHoveredHabit] = useState(null);
     const [tooltipData, setTooltipData] = useState(null);
+    const [aggregationMode, setAggregationMode] = useState('average');
     const margin = { top: 20, right: 20, bottom: 50, left: 50 };
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
@@ -3047,12 +3213,17 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
                     .filter(v => typeof v === 'number' && !isNaN(v));
                 if (values.length === 0)
                     return 0;
-                // Calculate average for aggregated periods
-                return Math.round(values.reduce((sum, v) => sum + v, 0) / values.length);
+                // Calculate aggregation based on mode
+                if (aggregationMode === 'sum') {
+                    return Math.round(values.reduce((sum, v) => sum + v, 0));
+                }
+                else { // average
+                    return Math.round(values.reduce((sum, v) => sum + v, 0) / values.length);
+                }
             });
         });
         return aggregated;
-    }, [data, viewType, habits]);
+    }, [data, viewType, habits, aggregationMode]);
     const toggleHabit = (habit) => {
         setActiveHabits(prev => prev.includes(habit)
             ? prev.filter(h => h !== habit)
@@ -3250,7 +3421,8 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         monthly: { icon: '🗓️', label: 'Monthly' },
         quarterly: { icon: '📊', label: 'Quarterly' }
     };
-    return (jsxs("div", { className: styles$6.container, children: [jsx("div", { className: styles$6.controls, children: jsx("div", { className: styles$6.viewToggle, children: availableViewTypes.map(type => (jsxs("button", { className: `${styles$6.viewButton} ${viewType === type ? styles$6.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsx("span", { className: styles$6.viewIcon, children: viewTypeConfig[type].icon }), jsx("span", { className: styles$6.viewLabel, children: viewTypeConfig[type].label })] }, type))) }) }), jsx("div", { className: styles$6.legend, children: habits.map(habit => (jsxs("button", { className: `${styles$6.legendItem} ${!activeHabits.includes(habit) ? styles$6.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$6.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$6.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$6.legendLabel, children: habit })] }, habit))) }), jsx("svg", { ref: svgRef, width: width, height: height, className: styles$6.chart }), tooltipData && (jsxs("div", { ref: tooltipRef, className: `${styles$6.tooltip} ${tooltipData ? styles$6.visible : ''}`, style: {
+    const shouldShowAggregationToggle = viewType !== 'daily';
+    return (jsxs("div", { className: styles$6.container, children: [jsxs("div", { className: styles$6.controls, children: [jsx("div", { className: styles$6.viewToggle, children: availableViewTypes.map(type => (jsxs("button", { className: `${styles$6.viewButton} ${viewType === type ? styles$6.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsx("span", { className: styles$6.viewIcon, children: viewTypeConfig[type].icon }), jsx("span", { className: styles$6.viewLabel, children: viewTypeConfig[type].label })] }, type))) }), shouldShowAggregationToggle && (jsxs("div", { className: styles$6.aggregationToggle, children: [jsxs("button", { className: `${styles$6.aggregationButton} ${aggregationMode === 'average' ? styles$6.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsx("span", { className: styles$6.aggregationIcon, children: "\uD83D\uDCCA" }), jsx("span", { className: styles$6.aggregationLabel, children: "Average" })] }), jsxs("button", { className: `${styles$6.aggregationButton} ${aggregationMode === 'sum' ? styles$6.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsx("span", { className: styles$6.aggregationIcon, children: "\u2795" }), jsx("span", { className: styles$6.aggregationLabel, children: "Sum" })] })] }))] }), jsx("div", { className: styles$6.legend, children: habits.map(habit => (jsxs("button", { className: `${styles$6.legendItem} ${!activeHabits.includes(habit) ? styles$6.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$6.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$6.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$6.legendLabel, children: habit })] }, habit))) }), jsx("svg", { ref: svgRef, width: width, height: height, className: styles$6.chart }), tooltipData && (jsxs("div", { ref: tooltipRef, className: `${styles$6.tooltip} ${tooltipData ? styles$6.visible : ''}`, style: {
                     left: `${tooltipData.x}px`,
                     top: `${tooltipData.y - 80}px`
                 }, children: [jsxs("div", { className: styles$6.tooltipHeader, children: [jsx("span", { className: styles$6.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsx("span", { className: styles$6.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsx("span", { children: tooltipData.habit })] }), jsxs("div", { className: styles$6.tooltipInfo, children: [jsx("div", { className: styles$6.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxs("div", { className: styles$6.tooltipValue, children: [jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));
@@ -4884,5 +5056,5 @@ function formatValue(value) {
 // Memoized Table component to prevent unnecessary re-renders
 const Table = memo(TableComponent);
 
-export { ArrayInput, BooleansHeatmap, Button, Calendar, Card, Checkbox, DateInput, EditFAB, ImageSlideshow, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, Slider, SunburstChart, Table, Tabs, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, ToggleButton, soundManager, useComponentSound, useSound, useTheme$1 as useTheme };
+export { ArrayInput, BooleansHeatmap, Button, Calendar, Card, Checkbox, DateInput, EditFAB, ImageSlideshow, LoadingSpinner, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, Slider, SunburstChart, Table, Tabs, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, ToggleButton, soundManager, useComponentSound, useSound, useTheme$1 as useTheme };
 //# sourceMappingURL=index.esm.js.map