@stfrigerio/sito-template 0.1.98 → 0.1.100

package/dist/index.esm.js

@@ -11,7 +11,7 @@ import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/sty
 import { RRule } from 'rrule';
 import * as d3 from 'd3';
 
-var styles$C = {"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","icon":"Button-module_icon__JNzlJ","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS","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"};
+var styles$G = {"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","icon":"Button-module_icon__JNzlJ","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS","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"};
 
 const SOUND_PACKS = {
     digital: {
@@ -577,11 +577,11 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
     const { handlers } = useComponentSound(soundConfig);
     const isIcon = variant === 'icon';
     const buttonClasses = [
-        styles$C.button,
-        styles$C[variant],
-        !isIcon && styles$C[size],
-        fullWidth && styles$C.fullWidth,
-        loading && styles$C.loading,
+        styles$G.button,
+        styles$G[variant],
+        !isIcon && styles$G[size],
+        fullWidth && styles$G.fullWidth,
+        loading && styles$G.loading,
         className
     ].filter(Boolean).join(' ');
     const handleClick = (e) => {
@@ -592,10 +592,10 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
         handlers.onMouseEnter?.();
         onMouseEnter?.(e);
     };
-    return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: isIcon ? undefined : { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : (isIcon ? 0.9 : 0.98) }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$C.spinner }), iconLeft && jsx("span", { className: styles$C.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$C.iconRight, children: iconRight })] }));
+    return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: isIcon ? undefined : { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : (isIcon ? 0.9 : 0.98) }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$G.spinner }), iconLeft && jsx("span", { className: styles$G.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$G.iconRight, children: iconRight })] }));
 };
 
-var styles$B = {"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$F = {"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
@@ -660,28 +660,28 @@ const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padd
         onExpandChange?.(newExpanded);
     };
     const cardClasses = [
-        styles$B.card,
-        styles$B[variant],
-        hoverable && styles$B.hoverable,
-        clickable && styles$B.clickable,
-        !padding && styles$B.noPadding,
-        expandable && styles$B.expandable,
+        styles$F.card,
+        styles$F[variant],
+        hoverable && styles$F.hoverable,
+        clickable && styles$F.clickable,
+        !padding && styles$F.noPadding,
+        expandable && styles$F.expandable,
         className
     ].filter(Boolean).join(' ');
     const renderHeader = () => {
         if (header) {
-            return (jsxs("div", { className: styles$B.header, children: [jsx("div", { className: styles$B.headerContent, children: header }), expandable && (jsx("button", { className: styles$B.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$B.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
+            return (jsxs("div", { className: styles$F.header, children: [jsx("div", { className: styles$F.headerContent, children: header }), expandable && (jsx("button", { className: styles$F.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$F.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$B.header, children: [jsxs("div", { className: styles$B.headerContent, children: [title && jsx("h3", { className: styles$B.title, children: title }), subtitle && jsx("p", { className: styles$B.subtitle, children: subtitle })] }), expandable && (jsx("button", { className: styles$B.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$B.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
+            return (jsxs("div", { className: styles$F.header, children: [jsxs("div", { className: styles$F.headerContent, children: [title && jsx("h3", { className: styles$F.title, children: title }), subtitle && jsx("p", { className: styles$F.subtitle, children: subtitle })] }), expandable && (jsx("button", { className: styles$F.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$F.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$B.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$B.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$B.expandableContent, children: [children && (jsx("div", { className: padding ? styles$B.body : undefined, children: children })), footer && jsx("div", { className: styles$B.footer, children: footer })] }, "content")) })] }));
+    const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$F.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$F.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$F.expandableContent, children: [children && (jsx("div", { className: padding ? styles$F.body : undefined, children: children })), footer && jsx("div", { className: styles$F.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$A = {"wrapper":"EmptyState-module_wrapper__h3Y2E","compact":"EmptyState-module_compact__HdYu1","default":"EmptyState-module_default__ACAbn","large":"EmptyState-module_large__H3ELo","icon":"EmptyState-module_icon__i7-3M","title":"EmptyState-module_title__xCyfH","message":"EmptyState-module_message__Bc5xK","action":"EmptyState-module_action__UpnvZ"};
+var styles$E = {"wrapper":"EmptyState-module_wrapper__h3Y2E","compact":"EmptyState-module_compact__HdYu1","default":"EmptyState-module_default__ACAbn","large":"EmptyState-module_large__H3ELo","icon":"EmptyState-module_icon__i7-3M","title":"EmptyState-module_title__xCyfH","message":"EmptyState-module_message__Bc5xK","action":"EmptyState-module_action__UpnvZ"};
 
 /**
  * EmptyState Component
@@ -718,11 +718,11 @@ var styles$A = {"wrapper":"EmptyState-module_wrapper__h3Y2E","compact":"EmptySta
  * @returns {JSX.Element} The rendered EmptyState component
  */
 const EmptyState = ({ icon, title, message, action, size = 'default', }) => {
-    const wrapperClass = [styles$A.wrapper, styles$A[size]].filter(Boolean).join(' ');
-    return (jsxs("div", { className: wrapperClass, children: [icon && jsx("div", { className: styles$A.icon, children: icon }), title && jsx("h3", { className: styles$A.title, children: title }), jsx("p", { className: styles$A.message, children: message }), action && jsx("div", { className: styles$A.action, children: action })] }));
+    const wrapperClass = [styles$E.wrapper, styles$E[size]].filter(Boolean).join(' ');
+    return (jsxs("div", { className: wrapperClass, children: [icon && jsx("div", { className: styles$E.icon, children: icon }), title && jsx("h3", { className: styles$E.title, children: title }), jsx("p", { className: styles$E.message, children: message }), action && jsx("div", { className: styles$E.action, children: action })] }));
 };
 
-var styles$z = {"backdrop":"Modal-module_backdrop__yOx-a","dialog":"Modal-module_dialog__yEXTq","dialogCompact":"Modal-module_dialogCompact__z1Wxp","dialogWide":"Modal-module_dialogWide__9PTXK","header":"Modal-module_header__NHHKd","title":"Modal-module_title__i3R0x","headerActions":"Modal-module_headerActions__g28UN","closeButton":"Modal-module_closeButton__siC-1","body":"Modal-module_body__U7jvM","bodyFlush":"Modal-module_bodyFlush__wtk3q","backdropSheet":"Modal-module_backdropSheet__o9kW3","dialogSheet":"Modal-module_dialogSheet__EjpwP","grabBar":"Modal-module_grabBar__qhl9f"};
+var styles$D = {"backdrop":"Modal-module_backdrop__yOx-a","dialog":"Modal-module_dialog__yEXTq","dialogCompact":"Modal-module_dialogCompact__z1Wxp","dialogWide":"Modal-module_dialogWide__9PTXK","header":"Modal-module_header__NHHKd","title":"Modal-module_title__i3R0x","headerActions":"Modal-module_headerActions__g28UN","closeButton":"Modal-module_closeButton__siC-1","body":"Modal-module_body__U7jvM","bodyFlush":"Modal-module_bodyFlush__wtk3q","backdropSheet":"Modal-module_backdropSheet__o9kW3","dialogSheet":"Modal-module_dialogSheet__EjpwP","grabBar":"Modal-module_grabBar__qhl9f"};
 
 const MOBILE_BREAKPOINT = '(max-width: 640px)';
 const useIsMobile = () => {
@@ -759,14 +759,14 @@ const Modal = ({ open, title, onClose, children, size = 'default', actions, padd
         return null;
     const isSheet = mobileVariant === 'sheet' && isMobile;
     const isDraggable = isSheet && draggable;
-    const backdropClass = [styles$z.backdrop, isSheet && styles$z.backdropSheet]
+    const backdropClass = [styles$D.backdrop, isSheet && styles$D.backdropSheet]
         .filter(Boolean)
         .join(' ');
     const dialogClass = [
-        styles$z.dialog,
-        size === 'compact' && styles$z.dialogCompact,
-        size === 'wide' && styles$z.dialogWide,
-        isSheet && styles$z.dialogSheet,
+        styles$D.dialog,
+        size === 'compact' && styles$D.dialogCompact,
+        size === 'wide' && styles$D.dialogWide,
+        isSheet && styles$D.dialogSheet,
     ]
         .filter(Boolean)
         .join(' ');
@@ -782,16 +782,16 @@ const Modal = ({ open, title, onClose, children, size = 'default', actions, padd
                     : { duration: 0.15, ease: 'easeOut' }, onClick: (e) => e.stopPropagation(), drag: isDraggable ? 'y' : false, dragControls: isDraggable ? dragControls : undefined, dragConstraints: { top: 0 }, dragElastic: { top: 0, bottom: 0.3 }, dragListener: false, onDragEnd: (_, info) => {
                     if (info.offset.y > 80)
                         onClose();
-                }, children: [isSheet && jsx("div", { className: styles$z.grabBar }), jsxs("div", { ref: headerRef, className: styles$z.header, onPointerDown: (e) => {
+                }, children: [isSheet && jsx("div", { className: styles$D.grabBar }), jsxs("div", { ref: headerRef, className: styles$D.header, onPointerDown: (e) => {
                             if (!isDraggable)
                                 return;
                             if (e.target.closest('button'))
                                 return;
                             dragControls.start(e);
-                        }, children: [jsx("span", { className: styles$z.title, children: title }), actions && jsx("div", { className: styles$z.headerActions, children: actions }), jsx("button", { className: styles$z.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsx(X, { size: 16 }) })] }), jsx("div", { className: padding ? styles$z.body : styles$z.bodyFlush, children: children })] }) })) }), document.body);
+                        }, children: [jsx("span", { className: styles$D.title, children: title }), actions && jsx("div", { className: styles$D.headerActions, children: actions }), jsx("button", { className: styles$D.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsx(X, { size: 16 }) })] }), jsx("div", { className: padding ? styles$D.body : styles$D.bodyFlush, children: children })] }) })) }), document.body);
 };
 
-var styles$y = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
+var styles$C = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
 
 /**
  * Checkbox component - Modern interactive checkbox with animations
@@ -836,13 +836,13 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return (jsxs("label", { className: styles$y.checkboxLabel, children: [jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => {
+    return (jsxs("label", { className: styles$C.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$y.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsx("span", { className: styles$y.checkboxText, children: label })] }));
+                }, className: styles$C.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsx("span", { className: styles$C.checkboxText, children: label })] }));
 };
 
 const formatDateToEuropean = (date) => {
@@ -873,7 +873,7 @@ const parseEuropeanDate = (dateString) => {
     return '';
 };
 
-var styles$x = {"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","nativeDateInput":"DateInput-module_nativeDateInput__tbi68","error":"DateInput-module_error__ieuPO","success":"DateInput-module_success__rPA93","loading":"DateInput-module_loading__1DAmD"};
+var styles$B = {"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","nativeDateInput":"DateInput-module_nativeDateInput__tbi68","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
@@ -933,21 +933,21 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
         }
     };
     const getClassName = () => {
-        const classes = [styles$x.dateInput];
+        const classes = [styles$B.dateInput];
         if (error)
-            classes.push(styles$x.error);
+            classes.push(styles$B.error);
         if (success)
-            classes.push(styles$x.success);
+            classes.push(styles$B.success);
         if (loading)
-            classes.push(styles$x.loading);
+            classes.push(styles$B.loading);
         return classes.join(' ');
     };
     // Current ISO value for the native date input (or '' if empty/unparseable)
     const isoValue = value.includes('-') ? value : (parseEuropeanDate(value) || '');
-    return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$x.label, children: label }), jsxs("div", { className: styles$x.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$x.textInput, disabled: disabled || loading, ...handlers }), jsxs("span", { className: styles$x.calendarButton, "aria-hidden": "true", children: [jsx(Calendar$1, {}), jsx("input", { type: "date", value: isoValue, onChange: handleCalendarChange, className: styles$x.nativeDateInput, title: "Select date from calendar", "aria-label": label ? `${label} calendar picker` : 'Calendar picker', disabled: disabled || loading })] })] })] }));
+    return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$B.label, children: label }), jsxs("div", { className: styles$B.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$B.textInput, disabled: disabled || loading, ...handlers }), jsxs("span", { className: styles$B.calendarButton, "aria-hidden": "true", children: [jsx(Calendar$1, {}), jsx("input", { type: "date", value: isoValue, onChange: handleCalendarChange, className: styles$B.nativeDateInput, title: "Select date from calendar", "aria-label": label ? `${label} calendar picker` : 'Calendar picker', disabled: disabled || loading })] })] })] }));
 }
 
-var styles$w = {"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$A = {"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
@@ -1052,23 +1052,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
         }
     };
     const getTriggerClassName = () => {
-        const classes = [styles$w.dropdownTrigger];
+        const classes = [styles$A.dropdownTrigger];
         if (isOpen)
-            classes.push(styles$w.open);
+            classes.push(styles$A.open);
         if (loading)
-            classes.push(styles$w.loading);
+            classes.push(styles$A.loading);
         if (error)
-            classes.push(styles$w.error);
+            classes.push(styles$A.error);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: styles$w.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$w.dropdownValue} ${!displayValue ? styles$w.placeholder : ''}`, children: displayValue || placeholder }), jsx(ChevronDown, { className: styles$w.dropdownArrow })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(motion.div, { className: styles$w.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$w.dropdownSearch, children: [jsx(Search, { className: styles$w.searchIcon }), jsx("input", { ref: inputRef, type: "text", className: styles$w.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: styles$w.dropdownOptions, children: [allOptions.map((opt, index) => {
+    return (jsxs("div", { className: styles$A.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$A.dropdownValue} ${!displayValue ? styles$A.placeholder : ''}`, children: displayValue || placeholder }), jsx(ChevronDown, { className: styles$A.dropdownArrow })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(motion.div, { className: styles$A.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$A.dropdownSearch, children: [jsx(Search, { className: styles$A.searchIcon }), jsx("input", { ref: inputRef, type: "text", className: styles$A.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: styles$A.dropdownOptions, children: [allOptions.map((opt, index) => {
                                     const isSelected = value === opt.value;
                                     const isHighlighted = highlightedIndex === index;
-                                    return (jsxs(motion.button, { type: "button", className: `${styles$w.dropdownOption} ${isSelected ? styles$w.selected : ''} ${isHighlighted ? styles$w.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(Check, { className: styles$w.checkIcon })] }, `${opt.value}-${index}`));
-                                }), allOptions.length === 0 && (jsx(motion.div, { className: styles$w.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
+                                    return (jsxs(motion.button, { type: "button", className: `${styles$A.dropdownOption} ${isSelected ? styles$A.selected : ''} ${isHighlighted ? styles$A.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(Check, { className: styles$A.checkIcon })] }, `${opt.value}-${index}`));
+                                }), allOptions.length === 0 && (jsx(motion.div, { className: styles$A.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
 }
 
-var styles$v = {"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$z = {"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
@@ -1106,26 +1106,26 @@ var styles$v = {"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, className }) {
     const { handlers, playSound } = useComponentSound(soundConfig);
     const getClassName = () => {
-        const classes = [styles$v.selectInput];
+        const classes = [styles$z.selectInput];
         if (error)
-            classes.push(styles$v.error);
+            classes.push(styles$z.error);
         if (success)
-            classes.push(styles$v.success);
+            classes.push(styles$z.success);
         if (loading)
-            classes.push(styles$v.loading);
+            classes.push(styles$z.loading);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: `${getClassName()}${className ? ` ${className}` : ''}`, children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$v.selectWrapper, children: [jsxs("select", { value: value, onChange: e => {
+    return (jsxs("div", { className: `${getClassName()}${className ? ` ${className}` : ''}`, children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$z.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(ChevronDown, { className: styles$v.selectIcon })] })] }));
+                            })] }), jsx(ChevronDown, { className: styles$z.selectIcon })] })] }));
 }
 
-var styles$u = {"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$y = {"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
@@ -1160,38 +1160,38 @@ var styles$u = {"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$u.textareaContainer];
+        const classes = [styles$y.textareaContainer];
         if (error)
-            classes.push(styles$u.error);
+            classes.push(styles$y.error);
         if (success)
-            classes.push(styles$u.success);
+            classes.push(styles$y.success);
         if (loading)
-            classes.push(styles$u.loading);
+            classes.push(styles$y.loading);
         if (focusMode)
-            classes.push(styles$u.focusMode);
+            classes.push(styles$y.focusMode);
         if (compact)
-            classes.push(styles$u.compact);
+            classes.push(styles$y.compact);
         if (className)
             classes.push(className);
         return classes.join(' ');
     };
     const getCharCountClassName = () => {
         if (!maxLength)
-            return styles$u.characterCount;
-        const classes = [styles$u.characterCount];
+            return styles$y.characterCount;
+        const classes = [styles$y.characterCount];
         const percentage = (value.length / maxLength) * 100;
         if (percentage >= 100) {
-            classes.push(styles$u.atLimit);
+            classes.push(styles$y.atLimit);
         }
         else if (percentage >= 80) {
-            classes.push(styles$u.nearLimit);
+            classes.push(styles$y.nearLimit);
         }
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { htmlFor: textareaId, className: styles$u.textareaLabel, children: [label, required && jsx("span", { className: styles$u.requiredIndicator, children: "*" })] })), jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$u.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$y.textareaLabel, children: [label, required && jsx("span", { className: styles$y.requiredIndicator, children: "*" })] })), jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$y.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$t = {"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$x = {"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
@@ -1228,21 +1228,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$t.textInput];
+        const classes = [styles$x.textInput];
         if (success)
-            classes.push(styles$t.success);
+            classes.push(styles$x.success);
         if (loading)
-            classes.push(styles$t.loading);
+            classes.push(styles$x.loading);
         if (icon)
-            classes.push(styles$t.withIcon);
+            classes.push(styles$x.withIcon);
         if (actionButton)
-            classes.push(styles$t.withAction);
+            classes.push(styles$x.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$t.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$t.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$x.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$x.inputIcon, children: icon }), jsx("input", { id: inputId, type: type, value: value, onChange: (e) => {
                             const newValue = e.target.value;
                             const oldValue = prevValueRef.current;
                             onChange(newValue);
@@ -1258,13 +1258,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$t.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsx("button", { type: "button", className: styles$t.actionButton, onClick: () => {
+                        }, onBlur: onBlur, placeholder: placeholder, className: error ? styles$x.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsx("button", { type: "button", className: styles$x.actionButton, onClick: () => {
                             handlers.onClick?.();
                             actionButton.onClick();
-                        }, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$t.errorMessage, children: error }))] }));
+                        }, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$x.errorMessage, children: error }))] }));
 }
 
-var styles$s = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
+var styles$w = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
 
 /**
  * Toggle Component
@@ -1325,7 +1325,7 @@ function Toggle(props) {
         justifyContent: 'center',
         ...style
     };
-    return (jsxs("div", { className: `${styles$s.toggleContainer} ${className || ''}`, children: [jsxs(motion.button, { ref: leftButtonRef, className: `${styles$s.toggleButton} ${!isOn ? styles$s.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
+    return (jsxs("div", { className: `${styles$w.toggleContainer} ${className || ''}`, children: [jsxs(motion.button, { ref: leftButtonRef, className: `${styles$w.toggleButton} ${!isOn ? styles$w.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
                     if (!isOn) {
                         // Already on left
                         if (enableCelebration) {
@@ -1340,7 +1340,7 @@ function Toggle(props) {
                         playSound('toggle');
                     }
                     onToggle(false);
-                }, onMouseEnter: () => handlers.onMouseEnter?.(), 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$s.toggleButton} ${isOn ? styles$s.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
+                }, onMouseEnter: () => handlers.onMouseEnter?.(), 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$w.toggleButton} ${isOn ? styles$w.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
                     if (isOn) {
                         // Already on right
                         if (enableCelebration) {
@@ -1358,7 +1358,7 @@ function Toggle(props) {
                 }, onMouseEnter: () => handlers.onMouseEnter?.(), 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$r = {"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","tally":"NumberStepper-module_tally__aO2zq","tallyRow":"NumberStepper-module_tallyRow__wcrtj","tallyButton":"NumberStepper-module_tallyButton__EUTXY","tallyButtonIcon":"NumberStepper-module_tallyButtonIcon__A3fDQ","tallyIcon":"NumberStepper-module_tallyIcon__ynB4C","tallyLabel":"NumberStepper-module_tallyLabel__kjXos","tallyBody":"NumberStepper-module_tallyBody__wDBsU","tallyMarks":"NumberStepper-module_tallyMarks__RU5qJ","tallyGroup":"NumberStepper-module_tallyGroup__0qUNo","tallyHint":"NumberStepper-module_tallyHint__zi-GM","tallyValue":"NumberStepper-module_tallyValue__CFJDk","pulse":"NumberStepper-module_pulse__51oUo"};
+var styles$v = {"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","tally":"NumberStepper-module_tally__aO2zq","tallyRow":"NumberStepper-module_tallyRow__wcrtj","tallyButton":"NumberStepper-module_tallyButton__EUTXY","tallyButtonIcon":"NumberStepper-module_tallyButtonIcon__A3fDQ","tallyIcon":"NumberStepper-module_tallyIcon__ynB4C","tallyLabel":"NumberStepper-module_tallyLabel__kjXos","tallyBody":"NumberStepper-module_tallyBody__wDBsU","tallyMarks":"NumberStepper-module_tallyMarks__RU5qJ","tallyGroup":"NumberStepper-module_tallyGroup__0qUNo","tallyHint":"NumberStepper-module_tallyHint__zi-GM","tallyValue":"NumberStepper-module_tallyValue__CFJDk","pulse":"NumberStepper-module_pulse__51oUo"};
 
 /**
  * NumberStepper Component
@@ -1545,33 +1545,33 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
         setDisplayValue(finalValue);
     }, [displayValue, min, max, step, onChange]);
     const containerClasses = [
-        styles$r.container,
-        styles$r[size],
-        styles$r[variant],
-        layout === 'vertical' && styles$r.vertical,
-        disabled && styles$r.disabled,
+        styles$v.container,
+        styles$v[size],
+        styles$v[variant],
+        layout === 'vertical' && styles$v.vertical,
+        disabled && styles$v.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$r.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsx(motion.button, { className: styles$r.button, style: {
+    const stepperContent = (jsxs("div", { className: styles$v.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsx(motion.button, { className: styles$v.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$r.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$r.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$r.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$r.valueWrapper, children: jsx("input", { type: "text", className: styles$r.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$r.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$v.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$v.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$v.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$v.valueWrapper, children: jsx("input", { type: "text", className: styles$v.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$v.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$r.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$r.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$v.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$v.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" }) }))) })] }));
     // ── Tally variant: pen-stroke counter with explicit +/- buttons.
     if (variant === 'tally') {
         return (jsx(TallyRow, { value: value, label: label, icon: icon, color: color, disabled: disabled, emptyHint: tallyEmptyHint, className: containerClasses, customStyles: customStyles, onIncrement: handleIncrement, onDecrement: handleDecrement, ariaLabel: label || 'Tally counter', isDecrementDisabled: isDecrementDisabled, isIncrementDisabled: isIncrementDisabled }));
     }
     // 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$r.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsx("span", { className: styles$r.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$r.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$r.limits, style: customStyles.limits, children: [jsx("span", { className: styles$r.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$r.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+        return (jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxs("div", { className: styles$v.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsx("span", { className: styles$v.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$v.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$v.limits, style: customStyles.limits, children: [jsx("span", { className: styles$v.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$v.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
     }
-    return (jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxs("div", { className: styles$r.header, style: customStyles.header, children: [icon && jsx("span", { className: styles$r.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$r.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$r.limits, style: customStyles.limits, children: [jsx("span", { className: styles$r.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$r.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+    return (jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxs("div", { className: styles$v.header, style: customStyles.header, children: [icon && jsx("span", { className: styles$v.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$v.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$v.limits, style: customStyles.limits, children: [jsx("span", { className: styles$v.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$v.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
 };
 const TallyMarks = ({ count, color }) => {
     const groups = [];
@@ -1581,14 +1581,14 @@ const TallyMarks = ({ count, color }) => {
         groups.push(n);
         left -= n;
     }
-    return (jsx("div", { className: styles$r.tallyMarks, "aria-hidden": "true", children: groups.map((n, i) => (jsxs("svg", { className: styles$r.tallyGroup, width: "38", height: "22", viewBox: "0 0 38 22", children: [[0, 1, 2, 3].slice(0, Math.min(4, n)).map((j) => (jsx("line", { x1: 4 + j * 6, y1: "2", x2: 4 + j * 6, y2: "20", stroke: color, strokeWidth: "2", strokeLinecap: "round" }, j))), n === 5 && (jsx("line", { x1: "1", y1: "18", x2: "27", y2: "4", stroke: color, strokeWidth: "2", strokeLinecap: "round" }))] }, i))) }));
+    return (jsx("div", { className: styles$v.tallyMarks, "aria-hidden": "true", children: groups.map((n, i) => (jsxs("svg", { className: styles$v.tallyGroup, width: "38", height: "22", viewBox: "0 0 38 22", children: [[0, 1, 2, 3].slice(0, Math.min(4, n)).map((j) => (jsx("line", { x1: 4 + j * 6, y1: "2", x2: 4 + j * 6, y2: "20", stroke: color, strokeWidth: "2", strokeLinecap: "round" }, j))), n === 5 && (jsx("line", { x1: "1", y1: "18", x2: "27", y2: "4", stroke: color, strokeWidth: "2", strokeLinecap: "round" }))] }, i))) }));
 };
 const TallyRow = ({ value, label, icon, color, disabled, emptyHint, className, customStyles, onIncrement, onDecrement, ariaLabel, isDecrementDisabled, isIncrementDisabled }) => {
     const resolvedColor = color || 'currentColor';
-    return (jsxs("div", { "aria-label": ariaLabel, "aria-disabled": disabled || undefined, className: `${className} ${styles$r.tallyRow}`, style: customStyles.container, children: [icon && (jsx("span", { className: styles$r.tallyIcon, style: { color: resolvedColor, ...customStyles.icon }, children: icon })), label && (jsx("span", { className: styles$r.tallyLabel, style: customStyles.label, children: label })), jsx("div", { className: styles$r.tallyBody, children: value <= 0 ? (jsx("span", { className: styles$r.tallyHint, children: emptyHint })) : (jsx(TallyMarks, { count: value, color: resolvedColor })) }), jsx("button", { type: "button", className: styles$r.tallyButton, onClick: onDecrement, disabled: isDecrementDisabled, "aria-label": `Decrease ${label || 'value'}`, children: jsx("span", { className: styles$r.tallyButtonIcon, children: "\u2212" }) }), jsx("span", { className: styles$r.tallyValue, style: { color: resolvedColor, ...customStyles.value }, "aria-hidden": "true", children: value }), jsx("button", { type: "button", className: styles$r.tallyButton, onClick: onIncrement, disabled: isIncrementDisabled, "aria-label": `Increase ${label || 'value'}`, children: jsx("span", { className: styles$r.tallyButtonIcon, children: "+" }) })] }));
+    return (jsxs("div", { "aria-label": ariaLabel, "aria-disabled": disabled || undefined, className: `${className} ${styles$v.tallyRow}`, style: customStyles.container, children: [icon && (jsx("span", { className: styles$v.tallyIcon, style: { color: resolvedColor, ...customStyles.icon }, children: icon })), label && (jsx("span", { className: styles$v.tallyLabel, style: customStyles.label, children: label })), jsx("div", { className: styles$v.tallyBody, children: value <= 0 ? (jsx("span", { className: styles$v.tallyHint, children: emptyHint })) : (jsx(TallyMarks, { count: value, color: resolvedColor })) }), jsx("button", { type: "button", className: styles$v.tallyButton, onClick: onDecrement, disabled: isDecrementDisabled, "aria-label": `Decrease ${label || 'value'}`, children: jsx("span", { className: styles$v.tallyButtonIcon, children: "\u2212" }) }), jsx("span", { className: styles$v.tallyValue, style: { color: resolvedColor, ...customStyles.value }, "aria-hidden": "true", children: value }), jsx("button", { type: "button", className: styles$v.tallyButton, onClick: onIncrement, disabled: isIncrementDisabled, "aria-label": `Increase ${label || 'value'}`, children: jsx("span", { className: styles$v.tallyButtonIcon, children: "+" }) })] }));
 };
 
-var styles$q = {"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$u = {"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
@@ -1627,18 +1627,18 @@ var styles$q = {"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$q.button,
-        styles$q[size],
-        styles$q[variant],
-        active && styles$q.active,
-        active && styles$q[`active-${activeColor}`],
-        disabled && styles$q.disabled,
-        animation !== 'none' && styles$q[`animation-${animation}`],
+        styles$u.button,
+        styles$u[size],
+        styles$u[variant],
+        active && styles$u.active,
+        active && styles$u[`active-${activeColor}`],
+        disabled && styles$u.disabled,
+        animation !== 'none' && styles$u[`animation-${animation}`],
         className
     ].filter(Boolean).join(' ');
     const labelClasses = [
-        styles$q.label,
-        hideLabelOnMobile && styles$q.hideMobile
+        styles$u.label,
+        hideLabelOnMobile && styles$u.hideMobile
     ].filter(Boolean).join(' ');
     const iconVariants = {
         scale: {
@@ -1702,10 +1702,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$q.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$q.content, children: [icon && (jsx(motion.div, { className: styles$q.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$q.icon, children: icon })) : (jsx("div", { className: styles$q.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$q.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$q.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$u.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$u.content, children: [icon && (jsx(motion.div, { className: styles$u.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$u.icon, children: icon })) : (jsx("div", { className: styles$u.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$u.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$u.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
 };
 
-var styles$p = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","dragging":"Slider-module_dragging__rynPv","fill":"Slider-module_fill__AYR4-","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","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","dotsContainer":"Slider-module_dotsContainer__zpcZe","dot":"Slider-module_dot__TkGh5","dotFilled":"Slider-module_dotFilled__n779E","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$t = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","dragging":"Slider-module_dragging__rynPv","fill":"Slider-module_fill__AYR4-","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","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","dotsContainer":"Slider-module_dotsContainer__zpcZe","dot":"Slider-module_dot__TkGh5","dotFilled":"Slider-module_dotFilled__n779E","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 — responsive, accessible range input with a styled track, fill, and thumb.
@@ -1744,11 +1744,11 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
     };
     const endDrag = () => setIsDragging(false);
     const dynamicColor = getDynamicColor();
-    const sizeClass = styles$p[`size-${size}`];
-    const stateClass = disabled ? styles$p.disabled : '';
-    const dragClass = isDragging ? styles$p.dragging : '';
+    const sizeClass = styles$t[`size-${size}`];
+    const stateClass = disabled ? styles$t.disabled : '';
+    const dragClass = isDragging ? styles$t.dragging : '';
     if (loading) {
-        return (jsxs("div", { className: `${styles$p.slider} ${sizeClass} ${styles$p.loading} ${className}`, style: style, children: [label && jsx("label", { className: styles$p.label, children: label }), jsx("div", { className: styles$p.loadingTrack, children: jsx(motion.div, { className: styles$p.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: { repeat: Infinity, duration: 1.5, ease: 'easeInOut' } }) })] }));
+        return (jsxs("div", { className: `${styles$t.slider} ${sizeClass} ${styles$t.loading} ${className}`, style: style, children: [label && jsx("label", { className: styles$t.label, children: label }), jsx("div", { className: styles$t.loadingTrack, children: jsx(motion.div, { className: styles$t.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: { repeat: Infinity, duration: 1.5, ease: 'easeInOut' } }) })] }));
     }
     if (variant === 'dots') {
         const dotCount = Math.max(0, Math.floor((max - min) / step));
@@ -1760,9 +1760,9 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
             const next = value === dotValue ? dotValue - step : dotValue;
             onChange(Math.max(min, next));
         };
-        return (jsxs("div", { className: `${styles$p.slider} ${sizeClass} ${stateClass} ${className}`, style: style, ...handlers, children: [label && jsx("label", { className: styles$p.label, children: label }), jsx("div", { className: styles$p.dotsContainer, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-label": label, children: dotValues.map((dotValue) => {
+        return (jsxs("div", { className: `${styles$t.slider} ${sizeClass} ${stateClass} ${className}`, style: style, ...handlers, children: [label && jsx("label", { className: styles$t.label, children: label }), jsx("div", { className: styles$t.dotsContainer, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-label": label, children: dotValues.map((dotValue) => {
                         const filled = dotValue <= value;
-                        return (jsx("button", { type: "button", className: `${styles$p.dot} ${filled ? styles$p.dotFilled : ''}`, style: filled
+                        return (jsx("button", { type: "button", className: `${styles$t.dot} ${filled ? styles$t.dotFilled : ''}`, style: filled
                                 ? {
                                     backgroundColor: dynamicColor,
                                     borderColor: dynamicColor,
@@ -1770,7 +1770,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                                 : undefined, onClick: () => handleDotClick(dotValue), disabled: disabled, "aria-label": valueFormatter
                                 ? valueFormatter(dotValue)
                                 : `Set to ${dotValue}` }, dotValue));
-                    }) }), showValue && (jsx("div", { className: styles$p.valueDisplay, style: { color: dynamicColor }, children: formatValue(value) }))] }));
+                    }) }), showValue && (jsx("div", { className: styles$t.valueDisplay, style: { color: dynamicColor }, children: formatValue(value) }))] }));
     }
     // Inset the thumb so its bounding box stays inside the track at 0/100%.
     // At percentage=0: marginLeft=0 → thumb flush-left. At 100%: marginLeft=-thumbSize → flush-right.
@@ -1778,11 +1778,11 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
         left: `${percentage}%`,
         marginLeft: `calc(var(--slider-thumb-size) * ${-percentage / 100})`,
     };
-    return (jsxs("div", { className: `${styles$p.slider} ${sizeClass} ${stateClass} ${dragClass} ${className}`, style: style, children: [label && jsx("label", { className: styles$p.label, children: label }), jsxs("div", { className: styles$p.sliderContainer, children: [jsx("div", { className: styles$p.track, children: jsx("div", { className: styles$p.fill, style: { width: `${percentage}%`, backgroundColor: dynamicColor } }) }), jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onPointerDown: startDrag, onPointerUp: endDrag, onPointerCancel: endDrag, onBlur: endDrag, ...handlers, className: styles$p.input, disabled: disabled, "aria-label": label }), jsx("div", { className: styles$p.thumb, style: {
+    return (jsxs("div", { className: `${styles$t.slider} ${sizeClass} ${stateClass} ${dragClass} ${className}`, style: style, children: [label && jsx("label", { className: styles$t.label, children: label }), jsxs("div", { className: styles$t.sliderContainer, children: [jsx("div", { className: styles$t.track, children: jsx("div", { className: styles$t.fill, style: { width: `${percentage}%`, backgroundColor: dynamicColor } }) }), jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onPointerDown: startDrag, onPointerUp: endDrag, onPointerCancel: endDrag, onBlur: endDrag, ...handlers, className: styles$t.input, disabled: disabled, "aria-label": label }), jsx("div", { className: styles$t.thumb, style: {
                             ...insetStyle,
                             backgroundColor: dynamicColor,
                             borderColor: colors.thumb || dynamicColor,
-                        } }), jsx(AnimatePresence, { children: showTooltip && isDragging && !disabled && (jsxs(motion.div, { className: styles$p.tooltip, style: { ...insetStyle, backgroundColor: dynamicColor }, initial: { opacity: 0, y: 6, scale: 0.9 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 6, scale: 0.9 }, transition: { duration: 0.15 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsx("div", { className: styles$p.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsx("div", { className: styles$p.valueDisplay, style: { color: dynamicColor }, children: formatValue(value) })), labels.length > 0 && (jsx("div", { className: styles$p.labelsContainer, children: labels.map((labelConfig, index) => {
+                        } }), jsx(AnimatePresence, { children: showTooltip && isDragging && !disabled && (jsxs(motion.div, { className: styles$t.tooltip, style: { ...insetStyle, backgroundColor: dynamicColor }, initial: { opacity: 0, y: 6, scale: 0.9 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 6, scale: 0.9 }, transition: { duration: 0.15 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsx("div", { className: styles$t.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsx("div", { className: styles$t.valueDisplay, style: { color: dynamicColor }, children: formatValue(value) })), labels.length > 0 && (jsx("div", { className: styles$t.labelsContainer, children: labels.map((labelConfig, index) => {
                     let position = 0;
                     if (labelConfig.position === 'start')
                         position = 0;
@@ -1790,11 +1790,11 @@ 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("div", { className: styles$p.labelItem, style: { left: `${position}%`, color: labelConfig.color }, children: labelConfig.label }, index));
+                    return (jsx("div", { className: styles$t.labelItem, style: { left: `${position}%`, color: labelConfig.color }, children: labelConfig.label }, index));
                 }) }))] }));
 }
 
-var styles$o = {"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"};
+var styles$s = {"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...',
@@ -1878,22 +1878,22 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
         }
     }, [currentMessageIndex, message, messagesToUse, showMessage]);
     const containerClasses = [
-        styles$o.loadingContainer,
-        styles$o[size],
-        styles$o[variant],
-        fullScreen && styles$o.fullScreen,
-        overlay && styles$o.overlay,
+        styles$s.loadingContainer,
+        styles$s[size],
+        styles$s[variant],
+        fullScreen && styles$s.fullScreen,
+        overlay && styles$s.overlay,
         className
     ].filter(Boolean).join(' ');
     const customStyle = {
         ...(color && { '--spinner-color': color }),
         ...(backgroundColor && { '--spinner-background': backgroundColor }),
     };
-    const renderDots = () => (jsxs(motion.div, { className: styles$o.dotsSpinner, animate: { rotate: 360 }, transition: {
+    const renderDots = () => (jsxs(motion.div, { className: styles$s.dotsSpinner, animate: { rotate: 360 }, transition: {
             duration: 2,
             repeat: Infinity,
             ease: 'linear'
-        }, children: [jsx(motion.div, { className: styles$o.dot1, animate: {
+        }, children: [jsx(motion.div, { className: styles$s.dot1, animate: {
                     scale: [1, 1.3, 1],
                     y: [0, -6, 0]
                 }, transition: {
@@ -1901,7 +1901,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
                     repeat: Infinity,
                     ease: 'easeInOut',
                     delay: 0
-                } }), jsx(motion.div, { className: styles$o.dot2, animate: {
+                } }), jsx(motion.div, { className: styles$s.dot2, animate: {
                     scale: [1, 1.3, 1],
                     y: [0, -6, 0]
                 }, transition: {
@@ -1909,7 +1909,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
                     repeat: Infinity,
                     ease: 'easeInOut',
                     delay: 0.5
-                } }), jsx(motion.div, { className: styles$o.dot3, animate: {
+                } }), jsx(motion.div, { className: styles$s.dot3, animate: {
                     scale: [1, 1.3, 1],
                     y: [0, -6, 0]
                 }, transition: {
@@ -1918,12 +1918,12 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
                     ease: 'easeInOut',
                     delay: 1
                 } })] }));
-    const renderSpinner = () => (jsx(motion.div, { className: styles$o.circleSpinner, animate: { rotate: 360 }, transition: {
+    const renderSpinner = () => (jsx(motion.div, { className: styles$s.circleSpinner, animate: { rotate: 360 }, transition: {
             duration: 1,
             repeat: Infinity,
             ease: 'linear'
         } }));
-    const renderPulse = () => (jsx(motion.div, { className: styles$o.pulseSpinner, animate: {
+    const renderPulse = () => (jsx(motion.div, { className: styles$s.pulseSpinner, animate: {
             scale: [1, 1.2, 1],
             opacity: [1, 0.7, 1]
         }, transition: {
@@ -1942,10 +1942,10 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
                 return renderDots();
         }
     };
-    return (jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsx(AnimatePresence, { mode: "wait", children: jsx(motion.p, { className: styles$o.loadingText, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: {
+    return (jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsx(AnimatePresence, { mode: "wait", children: jsx(motion.p, { className: styles$s.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$o.sparkleContainer, children: [...Array(4)].map((_, i) => (jsx(motion.div, { className: styles$o.sparkle, animate: {
+                    }, children: currentMessage }, currentMessage) })), showSparkles && (jsx("div", { className: styles$s.sparkleContainer, children: [...Array(4)].map((_, i) => (jsx(motion.div, { className: styles$s.sparkle, animate: {
                         opacity: [0, 1, 0],
                         scale: [0.5, 1, 0.5],
                         rotate: [0, 180, 360]
@@ -1960,7 +1960,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
                     } }, i))) }))] }));
 };
 
-var styles$n = {"wrapper":"DecryptedText-module_wrapper__tuLvf","srOnly":"DecryptedText-module_srOnly__A-K2T"};
+var styles$r = {"wrapper":"DecryptedText-module_wrapper__tuLvf","srOnly":"DecryptedText-module_srOnly__A-K2T"};
 
 /**
  * DecryptedText Component
@@ -2144,13 +2144,13 @@ const DecryptedText = ({ text, speed = 50, maxIterations = 10, sequential = fals
             onMouseLeave: () => setIsHovering(false),
         }
         : {};
-    return (jsxs(motion.span, { className: `${styles$n.wrapper} ${parentClassName}`, ref: containerRef, ...hoverProps, ...props, children: [jsx("span", { className: styles$n.srOnly, children: displayText }), jsx("span", { "aria-hidden": "true", children: displayText.split('').map((char, index) => {
+    return (jsxs(motion.span, { className: `${styles$r.wrapper} ${parentClassName}`, ref: containerRef, ...hoverProps, ...props, children: [jsx("span", { className: styles$r.srOnly, children: displayText }), jsx("span", { "aria-hidden": "true", children: displayText.split('').map((char, index) => {
                     const isRevealedOrDone = revealedIndices.has(index) || !isScrambling || !isHovering;
                     return (jsx("span", { className: isRevealedOrDone ? className : encryptedClassName, children: char }, index));
                 }) })] }));
 };
 
-var styles$m = {"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"};
+var styles$q = {"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"};
 
 /**
  * ArrayInput component - Versatile dynamic list manager
@@ -2217,11 +2217,11 @@ function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inp
         itemIdsRef.current.splice(index, 1);
         onChange(newValues);
     };
-    return (jsxs("div", { className: styles$m.arrayInput, children: [jsx("h3", { className: styles$m.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: styles$m.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
+    return (jsxs("div", { className: styles$q.arrayInput, children: [jsx("h3", { className: styles$q.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: styles$q.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
                             duration: 0.3,
                             ease: "easeInOut",
                             layout: { duration: 0.2 }
-                        }, children: [jsx("div", { className: styles$m.inputWrapper, children: multiline ? (jsx("div", { style: inputStyle, children: jsx(TextArea, { label: "", value: value, onChange: (newValue) => handleChange(index, newValue), placeholder: placeholder, rows: rows, compact: true }) })) : (jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$m.input, style: inputStyle })) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$m.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { 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" }) }) })] }, itemIdsRef.current[index]))) }) }), jsx(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$m.addButton, children: label })] }));
+                        }, children: [jsx("div", { className: styles$q.inputWrapper, children: multiline ? (jsx("div", { style: inputStyle, children: jsx(TextArea, { label: "", value: value, onChange: (newValue) => handleChange(index, newValue), placeholder: placeholder, rows: rows, compact: true }) })) : (jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$q.input, style: inputStyle })) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$q.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { 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" }) }) })] }, itemIdsRef.current[index]))) }) }), jsx(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$q.addButton, children: label })] }));
 }
 // Complex object array implementation
 function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle, buttonVariant = 'primary' }) {
@@ -2246,14 +2246,14 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle,
         // Generate key from all field values
         return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
     };
-    return (jsxs("div", { className: styles$m.arrayInput, children: [jsx("h3", { className: styles$m.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: `${styles$m.arrayInputItem} ${fields.length > 1 ? styles$m.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
+    return (jsxs("div", { className: styles$q.arrayInput, children: [jsx("h3", { className: styles$q.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: `${styles$q.arrayInputItem} ${fields.length > 1 ? styles$q.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
                             duration: 0.3,
                             ease: "easeInOut",
                             layout: { duration: 0.2 }
-                        }, children: [jsx("div", { className: styles$m.fieldsWrapper, children: fields.map((field) => (jsx("div", { style: inputStyle, children: field.multiline ? (jsx(TextArea, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, placeholder: field.placeholder, rows: field.rows, compact: true })) : (jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder })) }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$m.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { 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" }) }) })] }, generateKey(value, index)))) }) }), jsxs(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$m.addButton, children: ["Add ", label] })] }));
+                        }, children: [jsx("div", { className: styles$q.fieldsWrapper, children: fields.map((field) => (jsx("div", { style: inputStyle, children: field.multiline ? (jsx(TextArea, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, placeholder: field.placeholder, rows: field.rows, compact: true })) : (jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder })) }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$q.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { 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" }) }) })] }, generateKey(value, index)))) }) }), jsxs(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$q.addButton, children: ["Add ", label] })] }));
 }
 
-var styles$l = {"fab":"EditFAB-module_fab__nSrTJ","primary":"EditFAB-module_primary__zbA9n","secondary":"EditFAB-module_secondary__BnXs0","success":"EditFAB-module_success__kcLg3","loader":"EditFAB-module_loader__TaJOm","draggable":"EditFAB-module_draggable__eE2vE","dragging":"EditFAB-module_dragging__btRJe"};
+var styles$p = {"fab":"EditFAB-module_fab__nSrTJ","primary":"EditFAB-module_primary__zbA9n","secondary":"EditFAB-module_secondary__BnXs0","success":"EditFAB-module_success__kcLg3","loader":"EditFAB-module_loader__TaJOm","draggable":"EditFAB-module_draggable__eE2vE","dragging":"EditFAB-module_dragging__btRJe"};
 
 const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
     const [isMobile, setIsMobile] = useState(false);
@@ -2338,15 +2338,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
     };
     const getVariantClass = () => {
         if (isSaving)
-            return styles$l.primary;
+            return styles$p.primary;
         if (isEditMode) {
-            return hasUnsavedChanges ? styles$l.success : styles$l.secondary;
+            return hasUnsavedChanges ? styles$p.success : styles$p.secondary;
         }
-        return styles$l.primary;
+        return styles$p.primary;
     };
     const getIcon = () => {
         if (isSaving) {
-            return jsx("div", { className: styles$l.loader });
+            return jsx("div", { className: styles$p.loader });
         }
         if (isEditMode) {
             return hasUnsavedChanges ? jsx(Check, { size: 24 }) : jsx(X, { size: 24 });
@@ -2361,14 +2361,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
         }
         return "Enter edit mode";
     };
-    return (jsx(motion.button, { ref: fabRef, className: `${styles$l.fab} ${getVariantClass()} ${isMobile ? styles$l.draggable : ''} ${isDragging ? styles$l.dragging : ''}`, style: getPositionStyles(), onClick: handleClick, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, disabled: isSaving, "aria-label": getAriaLabel(), initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, whileHover: !isSaving && !isDragging ? { scale: 1.1 } : {}, whileTap: !isSaving && !isDragging ? { scale: 0.9 } : {}, transition: {
+    return (jsx(motion.button, { ref: fabRef, className: `${styles$p.fab} ${getVariantClass()} ${isMobile ? styles$p.draggable : ''} ${isDragging ? styles$p.dragging : ''}`, style: getPositionStyles(), onClick: handleClick, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, disabled: isSaving, "aria-label": getAriaLabel(), initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, whileHover: !isSaving && !isDragging ? { scale: 1.1 } : {}, whileTap: !isSaving && !isDragging ? { scale: 0.9 } : {}, transition: {
             type: "spring",
             stiffness: 260,
             damping: 20
         }, children: getIcon() }));
 };
 
-var styles$k = {"searchContainer":"SearchBar-module_searchContainer__TdM1w","searchInputWrapper":"SearchBar-module_searchInputWrapper__kCZLU","searchIcon":"SearchBar-module_searchIcon__IIxEu","searchInput":"SearchBar-module_searchInput__V4gkE","clearButton":"SearchBar-module_clearButton__7fNIY","filterSelect":"SearchBar-module_filterSelect__xIVE4","resultsDropdown":"SearchBar-module_resultsDropdown__yh6NF","loadingState":"SearchBar-module_loadingState__4gidK","emptyState":"SearchBar-module_emptyState__RbI4s","spinner":"SearchBar-module_spinner__PMc6-","resultsGroups":"SearchBar-module_resultsGroups__U24DC","resultGroup":"SearchBar-module_resultGroup__SoTQH","groupHeader":"SearchBar-module_groupHeader__bFRHA","groupIcon":"SearchBar-module_groupIcon__9ENM-","groupTitle":"SearchBar-module_groupTitle__ZekZs","groupCount":"SearchBar-module_groupCount__PQIqw","groupResults":"SearchBar-module_groupResults__xTF52","resultItem":"SearchBar-module_resultItem__VaKKy","highlighted":"SearchBar-module_highlighted__Q-3sH","resultTitle":"SearchBar-module_resultTitle__i1uqL","resultSubtitle":"SearchBar-module_resultSubtitle__LQOJ1","resultMeta":"SearchBar-module_resultMeta__Kmkrn","resultContent":"SearchBar-module_resultContent__TzVzL","highlight":"SearchBar-module_highlight__Q3PSP"};
+var styles$o = {"searchContainer":"SearchBar-module_searchContainer__TdM1w","searchInputWrapper":"SearchBar-module_searchInputWrapper__kCZLU","searchIcon":"SearchBar-module_searchIcon__IIxEu","searchInput":"SearchBar-module_searchInput__V4gkE","clearButton":"SearchBar-module_clearButton__7fNIY","filterSelect":"SearchBar-module_filterSelect__xIVE4","resultsDropdown":"SearchBar-module_resultsDropdown__yh6NF","loadingState":"SearchBar-module_loadingState__4gidK","emptyState":"SearchBar-module_emptyState__RbI4s","spinner":"SearchBar-module_spinner__PMc6-","resultsGroups":"SearchBar-module_resultsGroups__U24DC","resultGroup":"SearchBar-module_resultGroup__SoTQH","groupHeader":"SearchBar-module_groupHeader__bFRHA","groupIcon":"SearchBar-module_groupIcon__9ENM-","groupTitle":"SearchBar-module_groupTitle__ZekZs","groupCount":"SearchBar-module_groupCount__PQIqw","groupResults":"SearchBar-module_groupResults__xTF52","resultItem":"SearchBar-module_resultItem__VaKKy","highlighted":"SearchBar-module_highlighted__Q-3sH","resultTitle":"SearchBar-module_resultTitle__i1uqL","resultSubtitle":"SearchBar-module_resultSubtitle__LQOJ1","resultMeta":"SearchBar-module_resultMeta__Kmkrn","resultContent":"SearchBar-module_resultContent__TzVzL","highlight":"SearchBar-module_highlight__Q3PSP"};
 
 // Default filter options for backwards compatibility
 const defaultFilterOptions = [
@@ -2561,18 +2561,18 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
             return text || '';
         const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
         const parts = text.split(regex);
-        return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: styles$k.highlight, children: part }, index)) : (part));
+        return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: styles$o.highlight, children: part }, index)) : (part));
     };
-    return (jsxs("div", { ref: searchRef, className: `${styles$k.searchContainer} ${className || ''}`, children: [jsxs("div", { className: styles$k.searchInputWrapper, children: [jsx(Search, { className: styles$k.searchIcon }), jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, onFocus: () => query.trim() && results.length > 0 && setIsDropdownOpen(true), placeholder: placeholder, className: styles$k.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsx(motion.button, { className: styles$k.clearButton, onClick: handleClear, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, children: jsx(X, {}) })), showFilter && (jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$k.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsx(AnimatePresence, { children: isDropdownOpen && (jsx(motion.div, { ref: resultsRef, id: "search-results", className: styles$k.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxs("div", { className: styles$k.loadingState, children: [jsx("div", { className: styles$k.spinner }), jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxs("div", { className: styles$k.emptyState, children: ["No results found for \"", query, "\""] })) : (jsx("div", { className: styles$k.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
+    return (jsxs("div", { ref: searchRef, className: `${styles$o.searchContainer} ${className || ''}`, children: [jsxs("div", { className: styles$o.searchInputWrapper, children: [jsx(Search, { className: styles$o.searchIcon }), jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, onFocus: () => query.trim() && results.length > 0 && setIsDropdownOpen(true), placeholder: placeholder, className: styles$o.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsx(motion.button, { className: styles$o.clearButton, onClick: handleClear, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, children: jsx(X, {}) })), showFilter && (jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$o.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsx(AnimatePresence, { children: isDropdownOpen && (jsx(motion.div, { ref: resultsRef, id: "search-results", className: styles$o.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxs("div", { className: styles$o.loadingState, children: [jsx("div", { className: styles$o.spinner }), jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxs("div", { className: styles$o.emptyState, children: ["No results found for \"", query, "\""] })) : (jsx("div", { className: styles$o.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
                             const Icon = entityIcons[type];
-                            return (jsxs("div", { className: styles$k.resultGroup, children: [jsxs("div", { className: styles$k.groupHeader, children: [Icon && jsx(Icon, { className: styles$k.groupIcon }), jsx("span", { className: styles$k.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsx("span", { className: styles$k.groupCount, children: groupResults.length })] }), jsx("div", { className: styles$k.groupResults, children: groupResults.map((result) => {
+                            return (jsxs("div", { className: styles$o.resultGroup, children: [jsxs("div", { className: styles$o.groupHeader, children: [Icon && jsx(Icon, { className: styles$o.groupIcon }), jsx("span", { className: styles$o.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsx("span", { className: styles$o.groupCount, children: groupResults.length })] }), jsx("div", { className: styles$o.groupResults, children: groupResults.map((result) => {
                                             const globalIndex = results.indexOf(result);
-                                            return (jsxs(motion.button, { "data-result-index": globalIndex, className: `${styles$k.resultItem} ${highlightedIndex === globalIndex ? styles$k.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxs("div", { className: styles$k.resultContent, children: [jsx("div", { className: styles$k.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsx("div", { className: styles$k.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsx("div", { className: styles$k.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
+                                            return (jsxs(motion.button, { "data-result-index": globalIndex, className: `${styles$o.resultItem} ${highlightedIndex === globalIndex ? styles$o.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxs("div", { className: styles$o.resultContent, children: [jsx("div", { className: styles$o.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsx("div", { className: styles$o.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsx("div", { className: styles$o.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
                                         }) })] }, type));
                         }) })) })) })] }));
 };
 
-var styles$j = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","picker":"TimeInput-module_picker__9c6EI","error":"TimeInput-module_error__gJnpk","disabled":"TimeInput-module_disabled__wxiZ-"};
+var styles$n = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","picker":"TimeInput-module_picker__9c6EI","error":"TimeInput-module_error__gJnpk","disabled":"TimeInput-module_disabled__wxiZ-"};
 
 const lightTheme = createTheme({
     palette: {
@@ -2608,26 +2608,26 @@ function TimeInput({ label, value, onChange, error = false, success = false, loa
         !!document.documentElement.getAttribute('data-theme')?.includes('dark');
     const muiTheme = useMemo(() => (isDark ? darkTheme : lightTheme), [isDark]);
     const getContainerClassName = () => {
-        const classes = [styles$j.timeInput];
+        const classes = [styles$n.timeInput];
         if (error)
-            classes.push(styles$j.error);
+            classes.push(styles$n.error);
         if (success)
-            classes.push(styles$j.success);
+            classes.push(styles$n.success);
         if (loading)
-            classes.push(styles$j.loading);
+            classes.push(styles$n.loading);
         if (disabled)
-            classes.push(styles$j.disabled);
+            classes.push(styles$n.disabled);
         if (className)
             classes.push(className);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { className: styles$j.label, children: [label, required && jsx("span", { className: styles$j.required, children: "*" })] })), jsx(ThemeProvider$1, { theme: muiTheme, children: jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsx(MobileTimePicker, { value: dayjsValue, onChange: (newValue) => {
+    return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { className: styles$n.label, children: [label, required && jsx("span", { className: styles$n.required, children: "*" })] })), jsx(ThemeProvider$1, { theme: muiTheme, children: jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsx(MobileTimePicker, { value: dayjsValue, onChange: (newValue) => {
                             onChange(newValue ? newValue.format('HH:mm') : '');
                         }, ampm: false, views: ['hours', 'minutes'], disabled: disabled || loading, slotProps: {
                             textField: {
                                 size: 'small',
                                 fullWidth: true,
-                                className: styles$j.picker,
+                                className: styles$n.picker,
                                 sx: {
                                     '& .MuiPickersOutlinedInput-root': {
                                         fontFamily: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace",
@@ -2715,7 +2715,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light', storageKey = 'app-the
     return (jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: children }));
 };
 
-var styles$i = {"button":"ThemeSwitcher-module_button__VfRjU","iconButton":"ThemeSwitcher-module_iconButton__NKYBc","iconWrapper":"ThemeSwitcher-module_iconWrapper__FpHo8","label":"ThemeSwitcher-module_label__2Hfkp","toggle":"ThemeSwitcher-module_toggle__ATXx4","toggleTrack":"ThemeSwitcher-module_toggleTrack__x28Rv","toggleThumb":"ThemeSwitcher-module_toggleThumb__V8QeN","dropdown":"ThemeSwitcher-module_dropdown__3qLdt","dropdownTrigger":"ThemeSwitcher-module_dropdownTrigger__UzYV5","dropdownMenu":"ThemeSwitcher-module_dropdownMenu__3L5hT","dropdownItem":"ThemeSwitcher-module_dropdownItem__inw-K","active":"ThemeSwitcher-module_active__OHP19","icon":"ThemeSwitcher-module_icon__iRZiJ","text":"ThemeSwitcher-module_text__OCOoA"};
+var styles$m = {"button":"ThemeSwitcher-module_button__VfRjU","iconButton":"ThemeSwitcher-module_iconButton__NKYBc","iconWrapper":"ThemeSwitcher-module_iconWrapper__FpHo8","label":"ThemeSwitcher-module_label__2Hfkp","toggle":"ThemeSwitcher-module_toggle__ATXx4","toggleTrack":"ThemeSwitcher-module_toggleTrack__x28Rv","toggleThumb":"ThemeSwitcher-module_toggleThumb__V8QeN","dropdown":"ThemeSwitcher-module_dropdown__3qLdt","dropdownTrigger":"ThemeSwitcher-module_dropdownTrigger__UzYV5","dropdownMenu":"ThemeSwitcher-module_dropdownMenu__3L5hT","dropdownItem":"ThemeSwitcher-module_dropdownItem__inw-K","active":"ThemeSwitcher-module_active__OHP19","icon":"ThemeSwitcher-module_icon__iRZiJ","text":"ThemeSwitcher-module_text__OCOoA"};
 
 const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', currentTheme, onThemeChange, themes: customThemes, }) => {
     // Use safe version that returns null when outside a ThemeProvider
@@ -2736,25 +2736,25 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
     if (variant === 'toggle') {
         // Simple toggle between light and dark
         const isDark = theme.includes('dark');
-        return (jsxs(motion.button, { className: `${styles$i.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsx(motion.div, { className: styles$i.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsx(motion.div, { className: styles$i.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsx(Moon, { size: 14 }) : jsx(Sun, { size: 14 }) }) }), showLabel && jsx("span", { className: styles$i.label, children: isDark ? 'Dark' : 'Light' })] }));
+        return (jsxs(motion.button, { className: `${styles$m.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsx(motion.div, { className: styles$m.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsx(motion.div, { className: styles$m.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsx(Moon, { size: 14 }) : jsx(Sun, { size: 14 }) }) }), showLabel && jsx("span", { className: styles$m.label, children: isDark ? 'Dark' : 'Light' })] }));
     }
     if (variant === 'icon') {
-        return (jsxs("button", { type: "button", className: `${styles$i.iconButton} ${className}`, onClick: () => {
+        return (jsxs("button", { type: "button", className: `${styles$m.iconButton} ${className}`, onClick: () => {
                 const nextIndex = (currentThemeIndex + 1) % themes.length;
                 setTheme(themes[nextIndex].value);
-            }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, title: currentThemeData.label, children: [currentThemeData.icon, showLabel && jsx("span", { className: styles$i.label, children: currentThemeData.label })] }));
+            }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, title: currentThemeData.label, children: [currentThemeData.icon, showLabel && jsx("span", { className: styles$m.label, children: currentThemeData.label })] }));
     }
     if (variant === 'dropdown') {
-        return (jsxs("div", { className: `${styles$i.dropdown} ${className}`, children: [jsxs(motion.button, { className: styles$i.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsx("span", { className: styles$i.label, children: currentThemeData.label })] }), jsx(motion.div, { className: styles$i.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxs(motion.button, { className: `${styles$i.dropdownItem} ${theme === t.value ? styles$i.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsx("span", { className: styles$i.icon, children: t.icon }), jsx("span", { className: styles$i.text, children: t.label })] }, t.value))) })] }));
+        return (jsxs("div", { className: `${styles$m.dropdown} ${className}`, children: [jsxs(motion.button, { className: styles$m.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsx("span", { className: styles$m.label, children: currentThemeData.label })] }), jsx(motion.div, { className: styles$m.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxs(motion.button, { className: `${styles$m.dropdownItem} ${theme === t.value ? styles$m.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsx("span", { className: styles$m.icon, children: t.icon }), jsx("span", { className: styles$m.text, children: t.label })] }, t.value))) })] }));
     }
     // Default button variant - cycles through themes
-    return (jsxs(motion.button, { className: `${styles$i.button} ${className}`, onClick: () => {
+    return (jsxs(motion.button, { className: `${styles$m.button} ${className}`, onClick: () => {
             const nextIndex = (currentThemeIndex + 1) % themes.length;
             setTheme(themes[nextIndex].value);
-        }, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsx(motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$i.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsx("span", { className: styles$i.label, children: currentThemeData.label })] }));
+        }, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsx(motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$m.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsx("span", { className: styles$m.label, children: currentThemeData.label })] }));
 };
 
-var styles$h = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O","fullWidth":"Tabs-module_fullWidth__X-GHP"};
+var styles$l = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O","fullWidth":"Tabs-module_fullWidth__X-GHP"};
 
 // Default tabs for backwards compatibility
 const defaultTabs = [
@@ -2765,39 +2765,39 @@ const defaultTabs = [
 ];
 const Tabs = ({ activeTab, onTabChange, tabs: customTabs, className = '', fullWidth = false }) => {
     const tabs = customTabs ?? defaultTabs;
-    return (jsx("div", { className: `${styles$h.tabs} ${fullWidth ? styles$h.fullWidth : ''} ${className}`, children: tabs.map((tab) => {
+    return (jsx("div", { className: `${styles$l.tabs} ${fullWidth ? styles$l.fullWidth : ''} ${className}`, children: tabs.map((tab) => {
             const isActive = activeTab === tab.id;
-            return (jsxs(motion.button, { className: styles$h.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsx(motion.div, { animate: {
+            return (jsxs(motion.button, { className: styles$l.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsx(motion.div, { animate: {
                             rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
                         }, transition: {
                             rotate: {
                                 duration: 0.5,
                                 ease: 'easeInOut'
                             }
-                        }, children: tab.icon && (React.isValidElement(tab.icon) ? (jsx("span", { className: styles$h.tabIcon, children: tab.icon })) : (jsx("span", { className: styles$h.tabIcon, children: React.createElement(tab.icon) }))) }), jsx("span", { children: tab.label })] }, tab.id));
+                        }, children: tab.icon && (React.isValidElement(tab.icon) ? (jsx("span", { className: styles$l.tabIcon, children: tab.icon })) : (jsx("span", { className: styles$l.tabIcon, children: React.createElement(tab.icon) }))) }), jsx("span", { children: tab.label })] }, tab.id));
         }) }));
 };
 
-var styles$g = {"toastContainer":"Toast-module_toastContainer__gp5C0","toast":"Toast-module_toast__eenNR","toastSuccess":"Toast-module_toastSuccess__e-cSx","toastError":"Toast-module_toastError__6JO9w","toastWarning":"Toast-module_toastWarning__pJoF1","toastInfo":"Toast-module_toastInfo__y33kR","icon":"Toast-module_icon__Z-D6i","iconSuccess":"Toast-module_iconSuccess__ehY27","iconError":"Toast-module_iconError__nXhZz","iconWarning":"Toast-module_iconWarning__Ie8oD","iconInfo":"Toast-module_iconInfo__8vOf5","content":"Toast-module_content__eBhK8","title":"Toast-module_title__EfUfZ","message":"Toast-module_message__l4pyr","closeButton":"Toast-module_closeButton__UWOVG","progressBar":"Toast-module_progressBar__fGwBU"};
+var styles$k = {"toastContainer":"Toast-module_toastContainer__gp5C0","toast":"Toast-module_toast__eenNR","toastSuccess":"Toast-module_toastSuccess__e-cSx","toastError":"Toast-module_toastError__6JO9w","toastWarning":"Toast-module_toastWarning__pJoF1","toastInfo":"Toast-module_toastInfo__y33kR","icon":"Toast-module_icon__Z-D6i","iconSuccess":"Toast-module_iconSuccess__ehY27","iconError":"Toast-module_iconError__nXhZz","iconWarning":"Toast-module_iconWarning__Ie8oD","iconInfo":"Toast-module_iconInfo__8vOf5","content":"Toast-module_content__eBhK8","title":"Toast-module_title__EfUfZ","message":"Toast-module_message__l4pyr","closeButton":"Toast-module_closeButton__UWOVG","progressBar":"Toast-module_progressBar__fGwBU"};
 
 const getIcon = (type) => {
     switch (type) {
         case 'success':
-            return (jsx("svg", { className: `${styles$g.icon} ${styles$g.iconSuccess}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }));
+            return (jsx("svg", { className: `${styles$k.icon} ${styles$k.iconSuccess}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }));
         case 'error':
-            return (jsx("svg", { className: `${styles$g.icon} ${styles$g.iconError}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }));
+            return (jsx("svg", { className: `${styles$k.icon} ${styles$k.iconError}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }));
         case 'warning':
-            return (jsx("svg", { className: `${styles$g.icon} ${styles$g.iconWarning}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }));
+            return (jsx("svg", { className: `${styles$k.icon} ${styles$k.iconWarning}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }));
         case 'info':
-            return (jsx("svg", { className: `${styles$g.icon} ${styles$g.iconInfo}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
+            return (jsx("svg", { className: `${styles$k.icon} ${styles$k.iconInfo}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
     }
 };
 const getToastStyle = (type) => {
     switch (type) {
-        case 'success': return styles$g.toastSuccess;
-        case 'error': return styles$g.toastError;
-        case 'warning': return styles$g.toastWarning;
-        case 'info': return styles$g.toastInfo;
+        case 'success': return styles$k.toastSuccess;
+        case 'error': return styles$k.toastError;
+        case 'warning': return styles$k.toastWarning;
+        case 'info': return styles$k.toastInfo;
         default: return '';
     }
 };
@@ -2819,7 +2819,7 @@ const ToastItem = ({ toast, removeToast, }) => {
             clearInterval(interval);
         };
     }, [toast.id, duration, removeToast]);
-    return (jsxs(motion.div, { className: `${styles$g.toast} ${getToastStyle(toast.type)}`, initial: { opacity: 0, x: 100, scale: 0.9 }, animate: { opacity: 1, x: 0, scale: 1 }, exit: { opacity: 0, x: 100, scale: 0.9 }, transition: { type: 'spring', stiffness: 500, damping: 40 }, layout: true, children: [getIcon(toast.type), jsxs("div", { className: styles$g.content, children: [toast.title && jsx("p", { className: styles$g.title, children: toast.title }), jsx("p", { className: styles$g.message, children: toast.message })] }), jsx("button", { className: styles$g.closeButton, onClick: () => removeToast(toast.id), "aria-label": "Close notification", children: jsx("svg", { width: "16", height: "16", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), jsx(motion.div, { className: styles$g.progressBar, initial: { width: '100%' }, animate: { width: `${progress}%` }, style: {
+    return (jsxs(motion.div, { className: `${styles$k.toast} ${getToastStyle(toast.type)}`, initial: { opacity: 0, x: 100, scale: 0.9 }, animate: { opacity: 1, x: 0, scale: 1 }, exit: { opacity: 0, x: 100, scale: 0.9 }, transition: { type: 'spring', stiffness: 500, damping: 40 }, layout: true, children: [getIcon(toast.type), jsxs("div", { className: styles$k.content, children: [toast.title && jsx("p", { className: styles$k.title, children: toast.title }), jsx("p", { className: styles$k.message, children: toast.message })] }), jsx("button", { className: styles$k.closeButton, onClick: () => removeToast(toast.id), "aria-label": "Close notification", children: jsx("svg", { width: "16", height: "16", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), jsx(motion.div, { className: styles$k.progressBar, initial: { width: '100%' }, animate: { width: `${progress}%` }, style: {
                     color: toast.type === 'success' ? '#10B981'
                         : toast.type === 'error' ? '#EF4444'
                             : toast.type === 'warning' ? '#F59E0B'
@@ -2829,10 +2829,10 @@ const ToastItem = ({ toast, removeToast, }) => {
 const ToastContainer = ({ toasts, removeToast }) => {
     if (typeof document === 'undefined')
         return null;
-    return createPortal(jsx("div", { className: styles$g.toastContainer, children: jsx(AnimatePresence, { mode: "sync", children: toasts.map((toast) => (jsx(ToastItem, { toast: toast, removeToast: removeToast }, toast.id))) }) }), document.body);
+    return createPortal(jsx("div", { className: styles$k.toastContainer, children: jsx(AnimatePresence, { mode: "sync", children: toasts.map((toast) => (jsx(ToastItem, { toast: toast, removeToast: removeToast }, toast.id))) }) }), document.body);
 };
 
-var styles$f = {"breadcrumb":"Breadcrumb-module_breadcrumb__pGabz","separator":"Breadcrumb-module_separator__UCmyy","item":"Breadcrumb-module_item__0cLOg","link":"Breadcrumb-module_link__udp8M","current":"Breadcrumb-module_current__3DpQc"};
+var styles$j = {"breadcrumb":"Breadcrumb-module_breadcrumb__pGabz","separator":"Breadcrumb-module_separator__UCmyy","item":"Breadcrumb-module_item__0cLOg","link":"Breadcrumb-module_link__udp8M","current":"Breadcrumb-module_current__3DpQc"};
 
 /**
  * Breadcrumb Component
@@ -2851,13 +2851,13 @@ var styles$f = {"breadcrumb":"Breadcrumb-module_breadcrumb__pGabz","separator":"
  * />
  */
 const Breadcrumb = ({ items, onNavigate, className = '' }) => {
-    return (jsx("nav", { className: `${styles$f.breadcrumb} ${className}`, "aria-label": "Breadcrumb", children: items.map((item, index) => {
+    return (jsx("nav", { className: `${styles$j.breadcrumb} ${className}`, "aria-label": "Breadcrumb", children: items.map((item, index) => {
             const isLast = index === items.length - 1;
-            return (jsxs(React.Fragment, { children: [index > 0 && jsx(ChevronRight, { size: 14, className: styles$f.separator }), isLast || !item.href ? (jsx("span", { className: `${styles$f.item} ${isLast ? styles$f.current : ''}`, children: item.label })) : (jsx("button", { className: `${styles$f.item} ${styles$f.link}`, onClick: () => onNavigate?.(item.href), children: item.label }))] }, index));
+            return (jsxs(React.Fragment, { children: [index > 0 && jsx(ChevronRight, { size: 14, className: styles$j.separator }), isLast || !item.href ? (jsx("span", { className: `${styles$j.item} ${isLast ? styles$j.current : ''}`, children: item.label })) : (jsx("button", { className: `${styles$j.item} ${styles$j.link}`, onClick: () => onNavigate?.(item.href), children: item.label }))] }, index));
         }) }));
 };
 
-var styles$e = {"overlay":"LiquidButton-module_overlay__-P-xm","container":"LiquidButton-module_container__f1COS","actions":"LiquidButton-module_actions__XBz7p","actionButton":"LiquidButton-module_actionButton__PlEOk","actionLabel":"LiquidButton-module_actionLabel__tIGHE","button":"LiquidButton-module_button__znjyS"};
+var styles$i = {"overlay":"LiquidButton-module_overlay__-P-xm","container":"LiquidButton-module_container__f1COS","actions":"LiquidButton-module_actions__XBz7p","actionButton":"LiquidButton-module_actionButton__PlEOk","actionLabel":"LiquidButton-module_actionLabel__tIGHE","button":"LiquidButton-module_button__znjyS"};
 
 /**
  * LiquidButton Component
@@ -2883,13 +2883,13 @@ const LiquidButton = ({ actions, icon: Icon = Plus, className = '', }) => {
         setExpanded(false);
         action.onClick();
     }, []);
-    return (jsxs(Fragment, { children: [jsx(AnimatePresence, { children: expanded && (jsx(motion.div, { className: styles$e.overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleToggle })) }), jsxs("div", { className: `${styles$e.container} ${className}`, children: [jsx(AnimatePresence, { children: expanded && (jsx("div", { className: styles$e.actions, children: actions.map((action, index) => (jsxs(motion.button, { type: "button", className: styles$e.actionButton, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: {
+    return (jsxs(Fragment, { children: [jsx(AnimatePresence, { children: expanded && (jsx(motion.div, { className: styles$i.overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleToggle })) }), jsxs("div", { className: `${styles$i.container} ${className}`, children: [jsx(AnimatePresence, { children: expanded && (jsx("div", { className: styles$i.actions, children: actions.map((action, index) => (jsxs(motion.button, { type: "button", className: styles$i.actionButton, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: {
                                     duration: 0.15,
                                     delay: (actions.length - 1 - index) * 0.05,
-                                }, onClick: () => handleAction(action), children: [jsx(action.icon, { size: 18, color: action.color }), jsx("span", { className: styles$e.actionLabel, children: action.label })] }, action.key))) })) }), jsx(motion.button, { type: "button", className: styles$e.button, onClick: handleToggle, animate: { rotate: expanded ? 45 : 0 }, transition: { duration: 0.2 }, "aria-label": expanded ? 'Close actions' : 'Open actions', children: jsx(Icon, { size: 24, strokeWidth: 2.5 }) })] })] }));
+                                }, onClick: () => handleAction(action), children: [jsx(action.icon, { size: 18, color: action.color }), jsx("span", { className: styles$i.actionLabel, children: action.label })] }, action.key))) })) }), jsx(motion.button, { type: "button", className: styles$i.button, onClick: handleToggle, animate: { rotate: expanded ? 45 : 0 }, transition: { duration: 0.2 }, "aria-label": expanded ? 'Close actions' : 'Open actions', children: jsx(Icon, { size: 24, strokeWidth: 2.5 }) })] })] }));
 };
 
-var styles$d = {"container":"RecurrencePicker-module_container__2Ewc4","field":"RecurrencePicker-module_field__3rsnB","fieldCentered":"RecurrencePicker-module_fieldCentered__wP27Q","fieldLabel":"RecurrencePicker-module_fieldLabel__HCMBQ","fieldRow":"RecurrencePicker-module_fieldRow__AQ4k7","fieldUnit":"RecurrencePicker-module_fieldUnit__WHbVN","dayPicker":"RecurrencePicker-module_dayPicker__a5ue6","dayBtn":"RecurrencePicker-module_dayBtn__WIxNY","dayBtnActive":"RecurrencePicker-module_dayBtnActive__mX7FB","preview":"RecurrencePicker-module_preview__tfAQ-"};
+var styles$h = {"container":"RecurrencePicker-module_container__2Ewc4","field":"RecurrencePicker-module_field__3rsnB","fieldCentered":"RecurrencePicker-module_fieldCentered__wP27Q","fieldLabel":"RecurrencePicker-module_fieldLabel__HCMBQ","fieldRow":"RecurrencePicker-module_fieldRow__AQ4k7","fieldUnit":"RecurrencePicker-module_fieldUnit__WHbVN","dayPicker":"RecurrencePicker-module_dayPicker__a5ue6","dayBtn":"RecurrencePicker-module_dayBtn__WIxNY","dayBtnActive":"RecurrencePicker-module_dayBtnActive__mX7FB","preview":"RecurrencePicker-module_preview__tfAQ-"};
 
 const DEFAULT_STATE = {
     freq: 'WEEKLY',
@@ -3035,18 +3035,18 @@ const RecurrencePicker = ({ value, onChange, className, }) => {
         MONTHLY: state.interval === 1 ? 'month' : 'months',
         YEARLY: state.interval === 1 ? 'year' : 'years',
     };
-    return (jsxs("div", { className: `${styles$d.container}${className ? ` ${className}` : ''}`, children: [jsx("div", { className: styles$d.field, children: jsx(SelectInput, { label: "Frequency", value: state.freq, onChange: v => update({ freq: v }), options: [
+    return (jsxs("div", { className: `${styles$h.container}${className ? ` ${className}` : ''}`, children: [jsx("div", { className: styles$h.field, children: jsx(SelectInput, { label: "Frequency", value: state.freq, onChange: v => update({ freq: v }), options: [
                         { value: 'DAILY', label: 'Daily' },
                         { value: 'WEEKLY', label: 'Weekly' },
                         { value: 'MONTHLY', label: 'Monthly' },
                         { value: 'YEARLY', label: 'Yearly' },
-                    ] }) }), jsxs("div", { className: styles$d.field, children: [jsx("span", { className: styles$d.fieldLabel, children: "Every" }), jsxs("div", { className: styles$d.fieldRow, children: [jsx(NumberStepper, { value: state.interval, onChange: v => update({ interval: Math.max(1, v) }), min: 1, max: 99, hideLimits: true, size: "small" }), jsx("span", { className: styles$d.fieldUnit, children: unitLabel[state.freq] })] })] }), state.freq === 'WEEKLY' && (jsxs("div", { className: `${styles$d.field} ${styles$d.fieldCentered}`, children: [jsx("span", { className: styles$d.fieldLabel, children: "On" }), jsx("div", { className: styles$d.dayPicker, children: WEEKDAYS.map(d => (jsx("button", { type: "button", className: `${styles$d.dayBtn} ${state.byDay.includes(d.code) ? styles$d.dayBtnActive : ''}`, onClick: () => toggleDay(d.code), "aria-label": d.code, children: d.label }, d.code))) })] })), state.freq === 'MONTHLY' && (jsxs("div", { className: styles$d.field, children: [jsx("span", { className: styles$d.fieldLabel, children: "Day of month" }), jsxs("div", { className: styles$d.fieldRow, children: [jsx(NumberStepper, { value: state.byMonthDay, onChange: v => update({ byMonthDay: Math.min(31, Math.max(1, v)) }), min: 1, max: 31, disabled: state.monthlyLast, hideLimits: true, size: "small" }), jsx(Checkbox, { checked: state.monthlyLast, onChange: v => update({ monthlyLast: v }), label: "Last day" })] })] })), state.freq === 'YEARLY' && (jsxs(Fragment, { children: [jsx("div", { className: styles$d.field, children: jsx(SelectInput, { label: "Month", value: String(state.byMonth), onChange: v => update({ byMonth: Number(v) }), options: MONTHS$1.map((m, i) => ({
+                    ] }) }), jsxs("div", { className: styles$h.field, children: [jsx("span", { className: styles$h.fieldLabel, children: "Every" }), jsxs("div", { className: styles$h.fieldRow, children: [jsx(NumberStepper, { value: state.interval, onChange: v => update({ interval: Math.max(1, v) }), min: 1, max: 99, hideLimits: true, size: "small" }), jsx("span", { className: styles$h.fieldUnit, children: unitLabel[state.freq] })] })] }), state.freq === 'WEEKLY' && (jsxs("div", { className: `${styles$h.field} ${styles$h.fieldCentered}`, children: [jsx("span", { className: styles$h.fieldLabel, children: "On" }), jsx("div", { className: styles$h.dayPicker, children: WEEKDAYS.map(d => (jsx("button", { type: "button", className: `${styles$h.dayBtn} ${state.byDay.includes(d.code) ? styles$h.dayBtnActive : ''}`, onClick: () => toggleDay(d.code), "aria-label": d.code, children: d.label }, d.code))) })] })), state.freq === 'MONTHLY' && (jsxs("div", { className: styles$h.field, children: [jsx("span", { className: styles$h.fieldLabel, children: "Day of month" }), jsxs("div", { className: styles$h.fieldRow, children: [jsx(NumberStepper, { value: state.byMonthDay, onChange: v => update({ byMonthDay: Math.min(31, Math.max(1, v)) }), min: 1, max: 31, disabled: state.monthlyLast, hideLimits: true, size: "small" }), jsx(Checkbox, { checked: state.monthlyLast, onChange: v => update({ monthlyLast: v }), label: "Last day" })] })] })), state.freq === 'YEARLY' && (jsxs(Fragment, { children: [jsx("div", { className: styles$h.field, children: jsx(SelectInput, { label: "Month", value: String(state.byMonth), onChange: v => update({ byMonth: Number(v) }), options: MONTHS$1.map((m, i) => ({
                                 value: String(i + 1),
                                 label: m,
-                            })) }) }), jsxs("div", { className: styles$d.field, children: [jsx("span", { className: styles$d.fieldLabel, children: "Day" }), jsx(NumberStepper, { value: state.yearDay, onChange: v => update({ yearDay: Math.min(31, Math.max(1, v)) }), min: 1, max: 31, hideLimits: true, size: "small" })] })] })), jsx("div", { className: styles$d.preview, children: preview })] }));
+                            })) }) }), jsxs("div", { className: styles$h.field, children: [jsx("span", { className: styles$h.fieldLabel, children: "Day" }), jsx(NumberStepper, { value: state.yearDay, onChange: v => update({ yearDay: Math.min(31, Math.max(1, v)) }), min: 1, max: 31, hideLimits: true, size: "small" })] })] })), jsx("div", { className: styles$h.preview, children: preview })] }));
 };
 
-var styles$c = {"wrap":"StreamConsole-module_wrap__MnVWw","header":"StreamConsole-module_header__FjnRM","headerLeft":"StreamConsole-module_headerLeft__gNDyh","statusDot":"StreamConsole-module_statusDot__xQ254","spin":"StreamConsole-module_spin__OrOeL","label":"StreamConsole-module_label__rJIDm","statusText":"StreamConsole-module_statusText__oG-ej","dismiss":"StreamConsole-module_dismiss__WH3Kv","body":"StreamConsole-module_body__-HIK-","hint":"StreamConsole-module_hint__BA4SI","line":"StreamConsole-module_line__5hMY2","linePrefix":"StreamConsole-module_linePrefix__xR-Oj","lineText":"StreamConsole-module_lineText__IyRSF","lineLabel":"StreamConsole-module_lineLabel__z-qj4"};
+var styles$g = {"wrap":"StreamConsole-module_wrap__MnVWw","header":"StreamConsole-module_header__FjnRM","headerLeft":"StreamConsole-module_headerLeft__gNDyh","statusDot":"StreamConsole-module_statusDot__xQ254","spin":"StreamConsole-module_spin__OrOeL","label":"StreamConsole-module_label__rJIDm","statusText":"StreamConsole-module_statusText__oG-ej","dismiss":"StreamConsole-module_dismiss__WH3Kv","body":"StreamConsole-module_body__-HIK-","hint":"StreamConsole-module_hint__BA4SI","line":"StreamConsole-module_line__5hMY2","linePrefix":"StreamConsole-module_linePrefix__xR-Oj","lineText":"StreamConsole-module_lineText__IyRSF","lineLabel":"StreamConsole-module_lineLabel__z-qj4"};
 
 // Known prefixes produced by stream-json summarizers (DAO-style):
 //   "bash: ls -la", "read: path/to/file", "edit: path/to/file",
@@ -3112,21 +3112,21 @@ function StreamConsole({ stream, onCancel, onDismiss, hideDismiss = false, runni
             ? successLabel
             : errorLabel;
     const canShowDismiss = !hideDismiss && (stream.status === 'running' ? !!onCancel : !!onDismiss);
-    return (jsxs(motion.div, { className: styles$c.wrap, "data-status": stream.status, initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, transition: { duration: 0.18 }, children: [jsxs("header", { className: styles$c.header, children: [jsxs("div", { className: styles$c.headerLeft, children: [jsx("span", { className: styles$c.statusDot, "data-status": stream.status, children: jsx(Icon, { size: 12, className: stream.status === 'running' ? styles$c.spin : '' }) }), jsx("span", { className: styles$c.label, children: stream.label }), jsx("span", { className: styles$c.statusText, children: statusLabel })] }), canShowDismiss && (jsx("button", { type: "button", className: styles$c.dismiss, "aria-label": stream.status === 'running' ? 'Cancel' : 'Dismiss', onClick: () => {
+    return (jsxs(motion.div, { className: styles$g.wrap, "data-status": stream.status, initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, transition: { duration: 0.18 }, children: [jsxs("header", { className: styles$g.header, children: [jsxs("div", { className: styles$g.headerLeft, children: [jsx("span", { className: styles$g.statusDot, "data-status": stream.status, children: jsx(Icon, { size: 12, className: stream.status === 'running' ? styles$g.spin : '' }) }), jsx("span", { className: styles$g.label, children: stream.label }), jsx("span", { className: styles$g.statusText, children: statusLabel })] }), canShowDismiss && (jsx("button", { type: "button", className: styles$g.dismiss, "aria-label": stream.status === 'running' ? 'Cancel' : 'Dismiss', onClick: () => {
                             if (stream.status === 'running')
                                 onCancel?.(stream.id);
                             else
                                 onDismiss?.(stream.id);
-                        }, children: jsx(X, { size: 14 }) }))] }), jsxs("div", { className: styles$c.body, ref: listRef, children: [stream.events.length === 0 && stream.status === 'running' && (jsx("p", { className: styles$c.hint, children: "Waiting for output\u2026" })), stream.events.map((event, i) => {
+                        }, children: jsx(X, { size: 14 }) }))] }), jsxs("div", { className: styles$g.body, ref: listRef, children: [stream.events.length === 0 && stream.status === 'running' && (jsx("p", { className: styles$g.hint, children: "Waiting for output\u2026" })), stream.events.map((event, i) => {
                         const step = event.type === 'step' ? parseStep(event.message) : null;
                         const StepIcon = step?.subtype ? STEP_ICON[step.subtype] : null;
-                        return (jsxs("p", { className: styles$c.line, "data-type": event.type, "data-subtype": step?.subtype ?? undefined, children: [jsx("span", { className: styles$c.linePrefix, children: StepIcon ? (jsx(StepIcon, { size: 11 })) : event.type === 'error' ? ('!') : event.type === 'warning' ? ('⚠') : event.type === 'success' ? ('✓') : ('·') }), step?.label ? (jsx("span", { className: styles$c.lineLabel, children: step.label })) : null, jsx("span", { className: styles$c.lineText, children: step ? step.body : event.message })] }, i));
-                    }), stream.status === 'error' && stream.errorMessage && (jsxs("p", { className: styles$c.line, "data-type": "error", children: [jsx("span", { className: styles$c.linePrefix, children: "!" }), jsx("span", { className: styles$c.lineText, children: stream.errorMessage })] }))] })] }));
+                        return (jsxs("p", { className: styles$g.line, "data-type": event.type, "data-subtype": step?.subtype ?? undefined, children: [jsx("span", { className: styles$g.linePrefix, children: StepIcon ? (jsx(StepIcon, { size: 11 })) : event.type === 'error' ? ('!') : event.type === 'warning' ? ('⚠') : event.type === 'success' ? ('✓') : ('·') }), step?.label ? (jsx("span", { className: styles$g.lineLabel, children: step.label })) : null, jsx("span", { className: styles$g.lineText, children: step ? step.body : event.message })] }, i));
+                    }), stream.status === 'error' && stream.errorMessage && (jsxs("p", { className: styles$g.line, "data-type": "error", children: [jsx("span", { className: styles$g.linePrefix, children: "!" }), jsx("span", { className: styles$g.lineText, children: stream.errorMessage })] }))] })] }));
 }
 
-var styles$b = {"calendar":"Calendar-module_calendar__3mIJS","loading":"Calendar-module_loading__59Z9-","loadingSpinner":"Calendar-module_loadingSpinner__7MXqV","header":"Calendar-module_header__cZHNA","navigation":"Calendar-module_navigation__PGkpY","navButton":"Calendar-module_navButton__kOe-w","title":"Calendar-module_title__oJZ7m","controls":"Calendar-module_controls__i1Z38","exportDropdown":"Calendar-module_exportDropdown__yQX4q","exportButton":"Calendar-module_exportButton__dx7--","nightToggle":"Calendar-module_nightToggle__JGvmM","exportMenu":"Calendar-module_exportMenu__-lZ-8","exportMenuItem":"Calendar-module_exportMenuItem__D9MdL","todayButton":"Calendar-module_todayButton__Ac9zc","viewToggle":"Calendar-module_viewToggle__Fhg2t","viewButton":"Calendar-module_viewButton__J2WY6","active":"Calendar-module_active__lIqH-","filterBar":"Calendar-module_filterBar__ZD-lX","filterPill":"Calendar-module_filterPill__f7S8p","filterPillActive":"Calendar-module_filterPillActive__9Wtm9","filterDot":"Calendar-module_filterDot__E1Hp8","weekDays":"Calendar-module_weekDays__4J-8f","withWeekNumbers":"Calendar-module_withWeekNumbers__qbnUY","weekNumberHeader":"Calendar-module_weekNumberHeader__xhKbB","weekDay":"Calendar-module_weekDay__cg8Gr","daysGrid":"Calendar-module_daysGrid__ER0GM","dayCell":"Calendar-module_dayCell__TV-HR","dayNumber":"Calendar-module_dayNumber__ICH-X","today":"Calendar-module_today__eGuUU","events":"Calendar-module_events__qdbs7","event":"Calendar-module_event__Q1Zq3","eventTitle":"Calendar-module_eventTitle__XU7Wd","eventTime":"Calendar-module_eventTime__pMGEB","otherMonth":"Calendar-module_otherMonth__r6VJK","selected":"Calendar-module_selected__5e6h0","compact":"Calendar-module_compact__i0SF3","dots":"Calendar-module_dots__1Q7QR","dot":"Calendar-module_dot__tsCR1","dotMore":"Calendar-module_dotMore__emasD","weekNumberCell":"Calendar-module_weekNumberCell__bydCw","completed":"Calendar-module_completed__B-SHI","completedIcon":"Calendar-module_completedIcon__-oDZ9","moreEvents":"Calendar-module_moreEvents__TIKaT","emptyState":"Calendar-module_emptyState__2fcj7","dayView":"Calendar-module_dayView__PCIos","dayViewHeader":"Calendar-module_dayViewHeader__Gvxx2","timeColumnHeader":"Calendar-module_timeColumnHeader__B0btR","dayColumnHeader":"Calendar-module_dayColumnHeader__Rjqwg","allDayStrip":"Calendar-module_allDayStrip__VOqbV","allDayLabel":"Calendar-module_allDayLabel__2AmyT","allDayList":"Calendar-module_allDayList__6hFSb","dayViewScrollContainer":"Calendar-module_dayViewScrollContainer__84Byq","dayTimelineGrid":"Calendar-module_dayTimelineGrid__r1BNI","hourRow":"Calendar-module_hourRow__U-YN-","hourLabel":"Calendar-module_hourLabel__im84k","hourSlots":"Calendar-module_hourSlots__vbtYy","halfHourSlot":"Calendar-module_halfHourSlot__UWIri","halfHourSlotBottom":"Calendar-module_halfHourSlotBottom__aE5Mo","dayEventAnchor":"Calendar-module_dayEventAnchor__oryAi","weekTimeline":"Calendar-module_weekTimeline__q75EF","weekTimelineHeader":"Calendar-module_weekTimelineHeader__n5i06","weekDayColumnHeader":"Calendar-module_weekDayColumnHeader__u2ghX","weekDayLabel":"Calendar-module_weekDayLabel__i8Rm9","weekDayNumber":"Calendar-module_weekDayNumber__tqFKO","weekTimelineScroll":"Calendar-module_weekTimelineScroll__jesa0","weekTimelineGrid":"Calendar-module_weekTimelineGrid__MxIHF","weekTimeColumn":"Calendar-module_weekTimeColumn__rK4ZV","weekTimeSlot":"Calendar-module_weekTimeSlot__IFPUz","weekHourLabel":"Calendar-module_weekHourLabel__0ANmg","weekDayColumns":"Calendar-module_weekDayColumns__soiyU","weekDayColumn":"Calendar-module_weekDayColumn__sXVu0","weekHourRow":"Calendar-module_weekHourRow__FHcB2","weekEventAnchor":"Calendar-module_weekEventAnchor__nhG4x","currentTimeIndicator":"Calendar-module_currentTimeIndicator__GntOZ"};
+var styles$f = {"calendar":"Calendar-module_calendar__3mIJS","loading":"Calendar-module_loading__59Z9-","loadingSpinner":"Calendar-module_loadingSpinner__7MXqV","header":"Calendar-module_header__cZHNA","navigation":"Calendar-module_navigation__PGkpY","navButton":"Calendar-module_navButton__kOe-w","title":"Calendar-module_title__oJZ7m","controls":"Calendar-module_controls__i1Z38","exportDropdown":"Calendar-module_exportDropdown__yQX4q","exportButton":"Calendar-module_exportButton__dx7--","nightToggle":"Calendar-module_nightToggle__JGvmM","exportMenu":"Calendar-module_exportMenu__-lZ-8","exportMenuItem":"Calendar-module_exportMenuItem__D9MdL","todayButton":"Calendar-module_todayButton__Ac9zc","viewToggle":"Calendar-module_viewToggle__Fhg2t","viewButton":"Calendar-module_viewButton__J2WY6","active":"Calendar-module_active__lIqH-","filterBar":"Calendar-module_filterBar__ZD-lX","filterPill":"Calendar-module_filterPill__f7S8p","filterPillActive":"Calendar-module_filterPillActive__9Wtm9","filterDot":"Calendar-module_filterDot__E1Hp8","weekDays":"Calendar-module_weekDays__4J-8f","withWeekNumbers":"Calendar-module_withWeekNumbers__qbnUY","weekNumberHeader":"Calendar-module_weekNumberHeader__xhKbB","weekDay":"Calendar-module_weekDay__cg8Gr","daysGrid":"Calendar-module_daysGrid__ER0GM","dayCell":"Calendar-module_dayCell__TV-HR","dayNumber":"Calendar-module_dayNumber__ICH-X","today":"Calendar-module_today__eGuUU","events":"Calendar-module_events__qdbs7","event":"Calendar-module_event__Q1Zq3","eventTitle":"Calendar-module_eventTitle__XU7Wd","eventTime":"Calendar-module_eventTime__pMGEB","otherMonth":"Calendar-module_otherMonth__r6VJK","selected":"Calendar-module_selected__5e6h0","compact":"Calendar-module_compact__i0SF3","dots":"Calendar-module_dots__1Q7QR","dot":"Calendar-module_dot__tsCR1","dotMore":"Calendar-module_dotMore__emasD","weekNumberCell":"Calendar-module_weekNumberCell__bydCw","completed":"Calendar-module_completed__B-SHI","completedIcon":"Calendar-module_completedIcon__-oDZ9","moreEvents":"Calendar-module_moreEvents__TIKaT","emptyState":"Calendar-module_emptyState__2fcj7","dayView":"Calendar-module_dayView__PCIos","dayViewHeader":"Calendar-module_dayViewHeader__Gvxx2","timeColumnHeader":"Calendar-module_timeColumnHeader__B0btR","dayColumnHeader":"Calendar-module_dayColumnHeader__Rjqwg","allDayStrip":"Calendar-module_allDayStrip__VOqbV","allDayLabel":"Calendar-module_allDayLabel__2AmyT","allDayList":"Calendar-module_allDayList__6hFSb","dayViewScrollContainer":"Calendar-module_dayViewScrollContainer__84Byq","dayTimelineGrid":"Calendar-module_dayTimelineGrid__r1BNI","hourRow":"Calendar-module_hourRow__U-YN-","hourLabel":"Calendar-module_hourLabel__im84k","hourSlots":"Calendar-module_hourSlots__vbtYy","halfHourSlot":"Calendar-module_halfHourSlot__UWIri","halfHourSlotBottom":"Calendar-module_halfHourSlotBottom__aE5Mo","dayEventAnchor":"Calendar-module_dayEventAnchor__oryAi","weekTimeline":"Calendar-module_weekTimeline__q75EF","weekTimelineHeader":"Calendar-module_weekTimelineHeader__n5i06","weekDayColumnHeader":"Calendar-module_weekDayColumnHeader__u2ghX","weekDayLabel":"Calendar-module_weekDayLabel__i8Rm9","weekDayNumber":"Calendar-module_weekDayNumber__tqFKO","weekTimelineScroll":"Calendar-module_weekTimelineScroll__jesa0","weekTimelineGrid":"Calendar-module_weekTimelineGrid__MxIHF","weekTimeColumn":"Calendar-module_weekTimeColumn__rK4ZV","weekTimeSlot":"Calendar-module_weekTimeSlot__IFPUz","weekHourLabel":"Calendar-module_weekHourLabel__0ANmg","weekDayColumns":"Calendar-module_weekDayColumns__soiyU","weekDayColumn":"Calendar-module_weekDayColumn__sXVu0","weekHourRow":"Calendar-module_weekHourRow__FHcB2","weekEventAnchor":"Calendar-module_weekEventAnchor__nhG4x","currentTimeIndicator":"Calendar-module_currentTimeIndicator__GntOZ"};
 
-var styles$a = {"wrapper":"DayEventCard-module_wrapper__qvRgl","deleteUnderlay":"DayEventCard-module_deleteUnderlay__fTtuX","card":"DayEventCard-module_card__V9xTi","dragging":"DayEventCard-module_dragging__q19ID","completed":"DayEventCard-module_completed__tq8ol","text":"DayEventCard-module_text__3dWF7","grip":"DayEventCard-module_grip__tmim4","checkIcon":"DayEventCard-module_checkIcon__Ki67j","time":"DayEventCard-module_time__Ojdye","editButton":"DayEventCard-module_editButton__nDi-e"};
+var styles$e = {"wrapper":"DayEventCard-module_wrapper__qvRgl","deleteUnderlay":"DayEventCard-module_deleteUnderlay__fTtuX","card":"DayEventCard-module_card__V9xTi","dragging":"DayEventCard-module_dragging__q19ID","completed":"DayEventCard-module_completed__tq8ol","text":"DayEventCard-module_text__3dWF7","grip":"DayEventCard-module_grip__tmim4","checkIcon":"DayEventCard-module_checkIcon__Ki67j","time":"DayEventCard-module_time__Ojdye","editButton":"DayEventCard-module_editButton__nDi-e"};
 
 const SWIPE_DELETE_THRESHOLD = -80;
 const DayEventCard = ({ event, color, textColor, onComplete, onEdit, onDelete, onDragEnd, draggable = true, }) => {
@@ -3188,9 +3188,9 @@ const DayEventCard = ({ event, color, textColor, onComplete, onEdit, onDelete, o
     };
     const canSwipe = !!onDelete;
     const showGrip = draggable && !!onDragEnd;
-    return (jsxs("div", { className: styles$a.wrapper, children: [canSwipe && (jsxs(motion.div, { className: styles$a.deleteUnderlay, style: { opacity: deleteOpacity }, children: [jsx(Trash2, { size: 16 }), jsx("span", { children: "Delete" })] })), jsxs(motion.div, { className: `${styles$a.card} ${completed ? styles$a.completed : ''} ${verticalDragging ? styles$a.dragging : ''}`, style: { x, y, background: color, color: textColor, borderLeftColor: color }, drag: canSwipe && !verticalDragging ? 'x' : false, dragConstraints: canSwipe ? { left: -200, right: 0 } : undefined, dragElastic: 0.15, dragDirectionLock: true, onDragStart: () => {
+    return (jsxs("div", { className: styles$e.wrapper, children: [canSwipe && (jsxs(motion.div, { className: styles$e.deleteUnderlay, style: { opacity: deleteOpacity }, children: [jsx(Trash2, { size: 16 }), jsx("span", { children: "Delete" })] })), jsxs(motion.div, { className: `${styles$e.card} ${completed ? styles$e.completed : ''} ${verticalDragging ? styles$e.dragging : ''}`, style: { x, y, background: color, color: textColor, borderLeftColor: color }, drag: canSwipe && !verticalDragging ? 'x' : false, dragConstraints: canSwipe ? { left: -200, right: 0 } : undefined, dragElastic: 0.15, dragDirectionLock: true, onDragStart: () => {
                     didSwipe.current = true;
-                }, onDragEnd: handleSwipeEnd, whileTap: verticalDragging ? undefined : { scale: 0.98 }, animate: verticalDragging ? { scale: 1.03 } : { scale: 1 }, onClick: handleCardClick, children: [showGrip && (jsx("div", { className: styles$a.grip, onPointerDown: handleGripPointerDown, onPointerMove: handleGripPointerMove, onPointerUp: handleGripPointerUp, onPointerCancel: handleGripPointerUp, onClick: (e) => e.stopPropagation(), children: jsx(GripVertical, { size: 14 }) })), completed && jsx(Check, { size: 14, className: styles$a.checkIcon, strokeWidth: 3 }), jsx("span", { className: styles$a.text, children: event.title }), event.time && jsx("span", { className: styles$a.time, children: event.time }), onEdit && (jsx("button", { className: styles$a.editButton, onClick: (e) => {
+                }, onDragEnd: handleSwipeEnd, whileTap: verticalDragging ? undefined : { scale: 0.98 }, animate: verticalDragging ? { scale: 1.03 } : { scale: 1 }, onClick: handleCardClick, children: [showGrip && (jsx("div", { className: styles$e.grip, onPointerDown: handleGripPointerDown, onPointerMove: handleGripPointerMove, onPointerUp: handleGripPointerUp, onPointerCancel: handleGripPointerUp, onClick: (e) => e.stopPropagation(), children: jsx(GripVertical, { size: 14 }) })), completed && jsx(Check, { size: 14, className: styles$e.checkIcon, strokeWidth: 3 }), jsx("span", { className: styles$e.text, children: event.title }), event.time && jsx("span", { className: styles$e.time, children: event.time }), onEdit && (jsx("button", { className: styles$e.editButton, onClick: (e) => {
                             e.stopPropagation();
                             onEdit(event);
                         }, "aria-label": "Edit event", children: jsx(Pencil, { size: 13 }) }))] })] }));
@@ -3614,15 +3614,15 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
         return Math.floor(diff / oneWeek) + 1;
     };
     if (loading) {
-        return (jsx("div", { className: `${styles$b.calendar} ${styles$b.loading} ${className}`, style: style, children: jsx("div", { className: styles$b.loadingSpinner, children: "Loading..." }) }));
+        return (jsx("div", { className: `${styles$f.calendar} ${styles$f.loading} ${className}`, style: style, children: jsx("div", { className: styles$f.loadingSpinner, children: "Loading..." }) }));
     }
-    return (jsxs("div", { className: `${styles$b.calendar} ${compact ? styles$b.compact : ''} ${className}`, style: style, children: [!hideHeader && (jsxs("div", { className: styles$b.header, children: [jsxs("div", { className: styles$b.navigation, children: [jsx("button", { onClick: handlePrevious, className: styles$b.navButton, "aria-label": "Previous", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsx("h3", { className: styles$b.title, children: calendarData.displayTitle }), jsx("button", { onClick: handleNext, className: styles$b.navButton, "aria-label": "Next", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), categories && categories.length > 0 && (jsxs("div", { className: styles$b.filterBar, role: "tablist", "aria-label": "Filter by category", children: [jsx("button", { type: "button", role: "tab", "aria-selected": activeCategoryId === null, className: `${styles$b.filterPill} ${activeCategoryId === null ? styles$b.filterPillActive : ''}`, onClick: () => handleCategoryPick(null), children: "All" }), categories.map(cat => {
+    return (jsxs("div", { className: `${styles$f.calendar} ${compact ? styles$f.compact : ''} ${className}`, style: style, children: [!hideHeader && (jsxs("div", { className: styles$f.header, children: [jsxs("div", { className: styles$f.navigation, children: [jsx("button", { onClick: handlePrevious, className: styles$f.navButton, "aria-label": "Previous", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsx("h3", { className: styles$f.title, children: calendarData.displayTitle }), jsx("button", { onClick: handleNext, className: styles$f.navButton, "aria-label": "Next", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), categories && categories.length > 0 && (jsxs("div", { className: styles$f.filterBar, role: "tablist", "aria-label": "Filter by category", children: [jsx("button", { type: "button", role: "tab", "aria-selected": activeCategoryId === null, className: `${styles$f.filterPill} ${activeCategoryId === null ? styles$f.filterPillActive : ''}`, onClick: () => handleCategoryPick(null), children: "All" }), categories.map(cat => {
                                 const active = activeCategoryId === cat.id;
-                                return (jsxs("button", { type: "button", role: "tab", "aria-selected": active, className: `${styles$b.filterPill} ${active ? styles$b.filterPillActive : ''}`, style: active ? { background: cat.color, borderColor: cat.color, color: '#ffffff' } : undefined, onClick: () => handleCategoryPick(cat.id), children: [!active && (jsx("span", { className: styles$b.filterDot, style: { background: cat.color } })), cat.label] }, cat.id));
-                            })] })), jsxs("div", { className: styles$b.controls, children: [exportFormats && exportFormats.length > 0 && (jsxs("div", { className: styles$b.exportDropdown, ref: exportRef, children: [jsx("button", { type: "button", className: styles$b.exportButton, onClick: () => setExportOpen(v => !v), "aria-haspopup": "menu", "aria-expanded": exportOpen, "aria-label": "Export events", title: "Export events", children: jsx(Download, { size: 16 }) }), exportOpen && (jsx("div", { className: styles$b.exportMenu, role: "menu", children: exportFormats.map(format => (jsx("button", { type: "button", role: "menuitem", className: styles$b.exportMenuItem, onClick: () => {
+                                return (jsxs("button", { type: "button", role: "tab", "aria-selected": active, className: `${styles$f.filterPill} ${active ? styles$f.filterPillActive : ''}`, style: active ? { background: cat.color, borderColor: cat.color, color: '#ffffff' } : undefined, onClick: () => handleCategoryPick(cat.id), children: [!active && (jsx("span", { className: styles$f.filterDot, style: { background: cat.color } })), cat.label] }, cat.id));
+                            })] })), jsxs("div", { className: styles$f.controls, children: [exportFormats && exportFormats.length > 0 && (jsxs("div", { className: styles$f.exportDropdown, ref: exportRef, children: [jsx("button", { type: "button", className: styles$f.exportButton, onClick: () => setExportOpen(v => !v), "aria-haspopup": "menu", "aria-expanded": exportOpen, "aria-label": "Export events", title: "Export events", children: jsx(Download, { size: 16 }) }), exportOpen && (jsx("div", { className: styles$f.exportMenu, role: "menu", children: exportFormats.map(format => (jsx("button", { type: "button", role: "menuitem", className: styles$f.exportMenuItem, onClick: () => {
                                                 downloadEvents(filteredEvents, format);
                                                 setExportOpen(false);
-                                            }, children: format.toUpperCase() }, format))) }))] })), (currentViewMode === 'day' || currentViewMode === 'week') && (jsx("button", { type: "button", className: styles$b.nightToggle, onClick: () => setHideNightHours(v => !v), "aria-pressed": hideNightHours, title: hideNightHours ? 'Show night hours' : 'Hide night hours (00:00–08:00)', "aria-label": hideNightHours ? 'Show night hours' : 'Hide night hours', children: hideNightHours ? jsx(Sun, { size: 16 }) : jsx(Moon, { size: 16 }) })), jsx("button", { onClick: handleToday, className: styles$b.todayButton, children: "Today" }), jsxs("div", { className: styles$b.viewToggle, children: [jsx("button", { className: `${styles$b.viewButton} ${currentViewMode === 'month' ? styles$b.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsx("button", { className: `${styles$b.viewButton} ${currentViewMode === 'week' ? styles$b.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" }), jsx("button", { className: `${styles$b.viewButton} ${currentViewMode === 'day' ? styles$b.active : ''}`, onClick: () => setCurrentViewMode('day'), children: "Day" })] })] })] })), currentViewMode === 'month' && (jsxs("div", { className: `${styles$b.weekDays} ${showWeekNumbers ? styles$b.withWeekNumbers : ''}`, children: [showWeekNumbers && jsx("div", { className: styles$b.weekNumberHeader, children: "Wk" }), finalDayLabels.map((day) => (jsx("div", { className: styles$b.weekDay, children: day }, day)))] })), currentViewMode === 'day' ? (
+                                            }, children: format.toUpperCase() }, format))) }))] })), (currentViewMode === 'day' || currentViewMode === 'week') && (jsx("button", { type: "button", className: styles$f.nightToggle, onClick: () => setHideNightHours(v => !v), "aria-pressed": hideNightHours, title: hideNightHours ? 'Show night hours' : 'Hide night hours (00:00–08:00)', "aria-label": hideNightHours ? 'Show night hours' : 'Hide night hours', children: hideNightHours ? jsx(Sun, { size: 16 }) : jsx(Moon, { size: 16 }) })), jsx("button", { onClick: handleToday, className: styles$f.todayButton, children: "Today" }), jsxs("div", { className: styles$f.viewToggle, children: [jsx("button", { className: `${styles$f.viewButton} ${currentViewMode === 'month' ? styles$f.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsx("button", { className: `${styles$f.viewButton} ${currentViewMode === 'week' ? styles$f.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" }), jsx("button", { className: `${styles$f.viewButton} ${currentViewMode === 'day' ? styles$f.active : ''}`, onClick: () => setCurrentViewMode('day'), children: "Day" })] })] })] })), currentViewMode === 'month' && (jsxs("div", { className: `${styles$f.weekDays} ${showWeekNumbers ? styles$f.withWeekNumbers : ''}`, children: [showWeekNumbers && jsx("div", { className: styles$f.weekNumberHeader, children: "Wk" }), finalDayLabels.map((day) => (jsx("div", { className: styles$f.weekDay, children: day }, day)))] })), currentViewMode === 'day' ? (
             // Day view layout — positioned events with duration, all-day strip, now-line
             (() => {
                 const dayEvents = getDayEvents(currentDate);
@@ -3657,7 +3657,7 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                 const handleEventDragEnd = (event, clientY) => {
                     if (!onEventDrop)
                         return;
-                    const gridEl = dayViewScrollRef.current?.querySelector(`.${styles$b.dayTimelineGrid}`);
+                    const gridEl = dayViewScrollRef.current?.querySelector(`.${styles$f.dayTimelineGrid}`);
                     if (!gridEl)
                         return;
                     const rect = gridEl.getBoundingClientRect();
@@ -3672,7 +3672,7 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                     newDate.setHours(newHour, newMinute, 0, 0);
                     onEventDrop(event, newDate);
                 };
-                return (jsxs("div", { className: styles$b.dayView, children: [jsxs("div", { className: styles$b.dayViewHeader, children: [jsx("div", { className: styles$b.timeColumnHeader }), jsx("div", { className: styles$b.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), allDayEvents.length > 0 && (jsxs("div", { className: styles$b.allDayStrip, children: [jsx("span", { className: styles$b.allDayLabel, children: "All day" }), jsx("div", { className: styles$b.allDayList, children: allDayEvents.map(event => (jsx(DayEventCard, { event: event, color: getEventColor(event), textColor: getEventTextColor(event), onComplete: onEventComplete ?? (onEventClick ? handleEventClick : undefined), onEdit: onEventEdit, onDelete: onEventDelete, draggable: false }, event.id))) })] })), jsx("div", { className: styles$b.dayViewScrollContainer, ref: dayViewScrollRef, children: jsxs("div", { className: styles$b.dayTimelineGrid, style: { height: timelineHeight }, children: [hours.map(hour => (jsxs("div", { className: styles$b.hourRow, style: { height: hourHeight }, children: [jsxs("span", { className: styles$b.hourLabel, children: [hour.toString().padStart(2, '0'), ":00"] }), jsx("div", { className: styles$b.hourSlots, children: halfHourSlots ? (jsxs(Fragment, { children: [jsx("div", { className: styles$b.halfHourSlot, onClick: () => handleSlotClick(hour, 0) }), jsx("div", { className: `${styles$b.halfHourSlot} ${styles$b.halfHourSlotBottom}`, onClick: () => handleSlotClick(hour, 30) })] })) : (jsx("div", { className: styles$b.halfHourSlot, onClick: () => handleSlotClick(hour, 0) })) })] }, hour))), scheduled.map((event) => {
+                return (jsxs("div", { className: styles$f.dayView, children: [jsxs("div", { className: styles$f.dayViewHeader, children: [jsx("div", { className: styles$f.timeColumnHeader }), jsx("div", { className: styles$f.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), allDayEvents.length > 0 && (jsxs("div", { className: styles$f.allDayStrip, children: [jsx("span", { className: styles$f.allDayLabel, children: "All day" }), jsx("div", { className: styles$f.allDayList, children: allDayEvents.map(event => (jsx(DayEventCard, { event: event, color: getEventColor(event), textColor: getEventTextColor(event), onComplete: onEventComplete ?? (onEventClick ? handleEventClick : undefined), onEdit: onEventEdit, onDelete: onEventDelete, draggable: false }, event.id))) })] })), jsx("div", { className: styles$f.dayViewScrollContainer, ref: dayViewScrollRef, children: jsxs("div", { className: styles$f.dayTimelineGrid, style: { height: timelineHeight }, children: [hours.map(hour => (jsxs("div", { className: styles$f.hourRow, style: { height: hourHeight }, children: [jsxs("span", { className: styles$f.hourLabel, children: [hour.toString().padStart(2, '0'), ":00"] }), jsx("div", { className: styles$f.hourSlots, children: halfHourSlots ? (jsxs(Fragment, { children: [jsx("div", { className: styles$f.halfHourSlot, onClick: () => handleSlotClick(hour, 0) }), jsx("div", { className: `${styles$f.halfHourSlot} ${styles$f.halfHourSlotBottom}`, onClick: () => handleSlotClick(hour, 30) })] })) : (jsx("div", { className: styles$f.halfHourSlot, onClick: () => handleSlotClick(hour, 0) })) })] }, hour))), scheduled.map((event) => {
                                         const [h, m] = event.time.split(':').map(Number);
                                         const top = (h - startHour) * hourHeight + (m / 60) * hourHeight;
                                         const duration = eventDuration(event);
@@ -3680,13 +3680,13 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                                         const lane = dayLayout.get(event.id);
                                         const totalCols = lane?.totalCols ?? 1;
                                         const col = lane?.col ?? 0;
-                                        return (jsx("div", { className: styles$b.dayEventAnchor, style: {
+                                        return (jsx("div", { className: styles$f.dayEventAnchor, style: {
                                                 top,
                                                 height,
                                                 '--lane-col': col,
                                                 '--lane-total': totalCols,
                                             }, onClick: (e) => e.stopPropagation(), children: jsx(DayEventCard, { event: event, color: getEventColor(event), textColor: getEventTextColor(event), onComplete: onEventComplete ?? (onEventClick ? handleEventClick : undefined), onEdit: onEventEdit, onDelete: onEventDelete, onDragEnd: onEventDrop ? (clientY) => handleEventDragEnd(event, clientY) : undefined }) }, event.id));
-                                    }), showNow && (jsx("div", { className: styles$b.currentTimeIndicator, style: { top: `${nowOffset}px` } }))] }) })] }));
+                                    }), showNow && (jsx("div", { className: styles$f.currentTimeIndicator, style: { top: `${nowOffset}px` } }))] }) })] }));
             })()) : currentViewMode === 'week' ? (
             // Week view layout — 7 side-by-side day timelines. Drag events across
             // columns to reschedule to a different day + hour in one gesture.
@@ -3720,7 +3720,7 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                 const handleWeekDragEnd = (event, clientY, clientX) => {
                     if (!onEventDrop)
                         return;
-                    const gridEl = weekViewScrollRef.current?.querySelector(`.${styles$b.weekDayColumns}`);
+                    const gridEl = weekViewScrollRef.current?.querySelector(`.${styles$f.weekDayColumns}`);
                     if (!gridEl)
                         return;
                     const rect = gridEl.getBoundingClientRect();
@@ -3738,15 +3738,15 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                     newDate.setHours(newHour, newMinute, 0, 0);
                     onEventDrop(event, newDate);
                 };
-                return (jsxs("div", { className: styles$b.weekTimeline, children: [jsxs("div", { className: styles$b.weekTimelineHeader, children: [jsx("div", { className: styles$b.timeColumnHeader }), days.map(day => {
+                return (jsxs("div", { className: styles$f.weekTimeline, children: [jsxs("div", { className: styles$f.weekTimelineHeader, children: [jsx("div", { className: styles$f.timeColumnHeader }), days.map(day => {
                                     const dayIsToday = day.toDateString() === now.toDateString();
                                     const dayIsSelected = selectedDate && day.toDateString() === selectedDate.toDateString();
-                                    return (jsxs("button", { type: "button", className: `${styles$b.weekDayColumnHeader} ${dayIsToday ? styles$b.today : ''} ${dayIsSelected ? styles$b.selected : ''}`, onClick: () => handleDateClick(day), children: [jsx("span", { className: styles$b.weekDayLabel, children: day.toLocaleDateString(locale, { weekday: 'short' }) }), jsx("span", { className: styles$b.weekDayNumber, children: day.getDate() })] }, day.toISOString()));
-                                })] }), jsx("div", { className: styles$b.weekTimelineScroll, ref: weekViewScrollRef, children: jsxs("div", { className: styles$b.weekTimelineGrid, style: { height: timelineHeight }, children: [jsx("div", { className: styles$b.weekTimeColumn, children: hours.map(hour => (jsx("div", { className: styles$b.weekTimeSlot, style: { height: hourHeight }, children: jsxs("span", { className: styles$b.weekHourLabel, children: [hour.toString().padStart(2, '0'), ":00"] }) }, hour))) }), jsx("div", { className: styles$b.weekDayColumns, children: days.map(day => {
+                                    return (jsxs("button", { type: "button", className: `${styles$f.weekDayColumnHeader} ${dayIsToday ? styles$f.today : ''} ${dayIsSelected ? styles$f.selected : ''}`, onClick: () => handleDateClick(day), children: [jsx("span", { className: styles$f.weekDayLabel, children: day.toLocaleDateString(locale, { weekday: 'short' }) }), jsx("span", { className: styles$f.weekDayNumber, children: day.getDate() })] }, day.toISOString()));
+                                })] }), jsx("div", { className: styles$f.weekTimelineScroll, ref: weekViewScrollRef, children: jsxs("div", { className: styles$f.weekTimelineGrid, style: { height: timelineHeight }, children: [jsx("div", { className: styles$f.weekTimeColumn, children: hours.map(hour => (jsx("div", { className: styles$f.weekTimeSlot, style: { height: hourHeight }, children: jsxs("span", { className: styles$f.weekHourLabel, children: [hour.toString().padStart(2, '0'), ":00"] }) }, hour))) }), jsx("div", { className: styles$f.weekDayColumns, children: days.map(day => {
                                             const dayEvents = getDayEvents(day).filter(e => !e.allDay && e.time);
                                             const dayIsToday = day.toDateString() === now.toDateString();
                                             const dayLayout = layoutOverlappingEvents(dayEvents);
-                                            return (jsxs("div", { className: styles$b.weekDayColumn, children: [hours.map(hour => (jsx("div", { className: styles$b.weekHourRow, style: { height: hourHeight }, children: halfHourSlots ? (jsxs(Fragment, { children: [jsx("div", { className: styles$b.halfHourSlot, onClick: () => handleWeekSlotClick(day, hour, 0) }), jsx("div", { className: `${styles$b.halfHourSlot} ${styles$b.halfHourSlotBottom}`, onClick: () => handleWeekSlotClick(day, hour, 30) })] })) : (jsx("div", { className: styles$b.halfHourSlot, onClick: () => handleWeekSlotClick(day, hour, 0) })) }, hour))), dayEvents.map(event => {
+                                            return (jsxs("div", { className: styles$f.weekDayColumn, children: [hours.map(hour => (jsx("div", { className: styles$f.weekHourRow, style: { height: hourHeight }, children: halfHourSlots ? (jsxs(Fragment, { children: [jsx("div", { className: styles$f.halfHourSlot, onClick: () => handleWeekSlotClick(day, hour, 0) }), jsx("div", { className: `${styles$f.halfHourSlot} ${styles$f.halfHourSlotBottom}`, onClick: () => handleWeekSlotClick(day, hour, 30) })] })) : (jsx("div", { className: styles$f.halfHourSlot, onClick: () => handleWeekSlotClick(day, hour, 0) })) }, hour))), dayEvents.map(event => {
                                                         const [h, m] = event.time.split(':').map(Number);
                                                         const top = (h - startHour) * hourHeight + (m / 60) * hourHeight;
                                                         const duration = eventDuration(event);
@@ -3754,34 +3754,34 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                                                         const lane = dayLayout.get(event.id);
                                                         const totalCols = lane?.totalCols ?? 1;
                                                         const col = lane?.col ?? 0;
-                                                        return (jsx("div", { className: styles$b.weekEventAnchor, style: {
+                                                        return (jsx("div", { className: styles$f.weekEventAnchor, style: {
                                                                 top,
                                                                 height,
                                                                 '--lane-col': col,
                                                                 '--lane-total': totalCols,
                                                             }, onClick: (e) => e.stopPropagation(), children: jsx(DayEventCard, { event: event, color: getEventColor(event), textColor: getEventTextColor(event), onComplete: onEventComplete ?? (onEventClick ? handleEventClick : undefined), onEdit: onEventEdit, onDelete: onEventDelete, onDragEnd: onEventDrop ? (cy, cx) => handleWeekDragEnd(event, cy, cx) : undefined }) }, event.id));
-                                                    }), dayIsToday && showNow && (jsx("div", { className: styles$b.currentTimeIndicator, style: { top: `${nowOffset}px`, left: 0 } }))] }, day.toISOString()));
+                                                    }), dayIsToday && showNow && (jsx("div", { className: styles$f.currentTimeIndicator, style: { top: `${nowOffset}px`, left: 0 } }))] }, day.toISOString()));
                                         }) })] }) })] }));
             })()) : ((() => {
                 // Fixed month-view cell height derived from maxEventsPerDay.
                 // Day number + padding ≈ 40px, each event row ≈ 24px.
                 // Week and compact views keep their own CSS-driven sizing.
                 const monthCellHeight = !compact ? 40 + maxEventsPerDay * 24 : undefined;
-                return (jsx("div", { className: `${styles$b.daysGrid} ${showWeekNumbers ? styles$b.withWeekNumbers : ''}`, children: calendarData.days.map((day, index) => {
+                return (jsx("div", { className: `${styles$f.daysGrid} ${showWeekNumbers ? styles$f.withWeekNumbers : ''}`, children: calendarData.days.map((day, index) => {
                         const dayEvents = getDayEvents(day);
                         const dayIsToday = isToday(day);
                         const isInCurrentMonth = isCurrentMonth(day);
                         const isWeekStart = showWeekNumbers && (index % 7 === 0);
                         const dayIsSelected = selectedDate && day.toDateString() === selectedDate.toDateString();
-                        return (jsxs(Fragment$1, { children: [isWeekStart && (jsx("div", { className: styles$b.weekNumberCell, style: monthCellHeight !== undefined ? { height: monthCellHeight, minHeight: monthCellHeight } : undefined, children: getWeekNumber(day) })), jsxs(motion.div, { className: `${styles$b.dayCell} ${dayIsToday ? styles$b.today : ''} ${!isInCurrentMonth ? styles$b.otherMonth : ''} ${dayIsSelected ? styles$b.selected : ''}`, style: monthCellHeight !== undefined ? { height: monthCellHeight, minHeight: monthCellHeight } : undefined, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: {
+                        return (jsxs(Fragment$1, { children: [isWeekStart && (jsx("div", { className: styles$f.weekNumberCell, style: monthCellHeight !== undefined ? { height: monthCellHeight, minHeight: monthCellHeight } : undefined, children: getWeekNumber(day) })), jsxs(motion.div, { className: `${styles$f.dayCell} ${dayIsToday ? styles$f.today : ''} ${!isInCurrentMonth ? styles$f.otherMonth : ''} ${dayIsSelected ? styles$f.selected : ''}`, style: monthCellHeight !== undefined ? { height: monthCellHeight, minHeight: monthCellHeight } : undefined, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: {
                                         duration: 0.3,
                                         delay: index * 0.02,
                                         ease: "easeOut"
-                                    }, onClick: () => handleDateClick(day), children: [jsx("div", { className: styles$b.dayNumber, children: day.getDate() }), dayEvents.length > 0 && compact && currentViewMode === 'month' ? (jsxs("div", { className: styles$b.dots, children: [dayEvents.slice(0, maxEventsPerDay).map((event) => (jsx("span", { className: styles$b.dot, style: {
+                                    }, onClick: () => handleDateClick(day), children: [jsx("div", { className: styles$f.dayNumber, children: day.getDate() }), dayEvents.length > 0 && compact && currentViewMode === 'month' ? (jsxs("div", { className: styles$f.dots, children: [dayEvents.slice(0, maxEventsPerDay).map((event) => (jsx("span", { className: styles$f.dot, style: {
                                                         backgroundColor: event.status === 'completed'
                                                             ? '#047857'
                                                             : getEventColor(event),
-                                                    } }, event.id))), dayEvents.length > maxEventsPerDay && (jsxs("span", { className: styles$b.dotMore, children: ["+", dayEvents.length - maxEventsPerDay] }))] })) : dayEvents.length > 0 ? (jsxs("div", { className: styles$b.events, children: [dayEvents.slice(0, maxEventsPerDay).map((event, eventIndex) => (jsxs(motion.div, { className: `${styles$b.event} ${event.status === 'completed' ? styles$b.completed : ''}`, style: {
+                                                    } }, event.id))), dayEvents.length > maxEventsPerDay && (jsxs("span", { className: styles$f.dotMore, children: ["+", dayEvents.length - maxEventsPerDay] }))] })) : dayEvents.length > 0 ? (jsxs("div", { className: styles$f.events, children: [dayEvents.slice(0, maxEventsPerDay).map((event, eventIndex) => (jsxs(motion.div, { className: `${styles$f.event} ${event.status === 'completed' ? styles$f.completed : ''}`, style: {
                                                         backgroundColor: getEventColor(event),
                                                         color: getEventTextColor(event),
                                                         opacity: event.status === 'completed' ? 0.7 : 1
@@ -3799,7 +3799,7 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                                                     }, whileTap: {
                                                         scale: 0.98,
                                                         transition: { duration: 0.1 }
-                                                    }, children: [iconRenderer && iconRenderer(event), jsxs("span", { className: styles$b.eventTitle, children: [event.time && (jsx("span", { className: styles$b.eventTime, children: event.time })), event.title] }), event.status === 'completed' && (jsx("svg", { className: styles$b.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id))), dayEvents.length > maxEventsPerDay && (jsxs("div", { className: styles$b.moreEvents, children: ["+", dayEvents.length - maxEventsPerDay, " more"] }))] })) : emptyState ? (jsx("div", { className: styles$b.emptyState, children: emptyState })) : null] })] }, `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`));
+                                                    }, children: [iconRenderer && iconRenderer(event), jsxs("span", { className: styles$f.eventTitle, children: [event.time && (jsx("span", { className: styles$f.eventTime, children: event.time })), event.title] }), event.status === 'completed' && (jsx("svg", { className: styles$f.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id))), dayEvents.length > maxEventsPerDay && (jsxs("div", { className: styles$f.moreEvents, children: ["+", dayEvents.length - maxEventsPerDay, " more"] }))] })) : emptyState ? (jsx("div", { className: styles$f.emptyState, children: emptyState })) : null] })] }, `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`));
                     }) }));
             })())] }));
 }
@@ -3936,7 +3936,7 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
     return (jsx(Fragment, { children: jsx(motion.nav, { className: `${styles.navbar} ${styles[`navbar${variant.charAt(0).toUpperCase() + variant.slice(1)}`]} ${className}`, "data-colored-icons": coloredIconsAttr, initial: variant === 'sidebar' ? { x: -300 } : { opacity: 0 }, animate: variant === 'sidebar' ? { x: 0 } : { opacity: 1 }, transition: { type: 'spring', stiffness: 300, damping: 30 }, children: navContent }) }));
 };
 
-var styles$9 = {"container":"MoodChart-module_container__MB1Vr","chart":"MoodChart-module_chart__4-spu","gridLine":"MoodChart-module_gridLine__YJpZ8","line":"MoodChart-module_line__LfeUX","area":"MoodChart-module_area__a4BFM","areaStopTop":"MoodChart-module_areaStopTop__KEp49","areaStopBottom":"MoodChart-module_areaStopBottom__cp7Gn","crosshair":"MoodChart-module_crosshair__PHLfW","halo":"MoodChart-module_halo__YQB-7","overlay":"MoodChart-module_overlay__ZwuHi","xAxis":"MoodChart-module_xAxis__SeIWG","yAxis":"MoodChart-module_yAxis__sRjjE","dataPoint":"MoodChart-module_dataPoint__112P1","tooltip":"MoodChart-module_tooltip__vW59y","tooltipHeader":"MoodChart-module_tooltipHeader__U7yvN","tooltipDate":"MoodChart-module_tooltipDate__6Jjeu","tooltipRating":"MoodChart-module_tooltipRating__5A2Yx","ratingValue":"MoodChart-module_ratingValue__7Gpfx","ratingMax":"MoodChart-module_ratingMax__10WcJ","tooltipTags":"MoodChart-module_tooltipTags__FUQrU","tag":"MoodChart-module_tag__QhCh5","tooltipComment":"MoodChart-module_tooltipComment__6driJ"};
+var styles$d = {"container":"MoodChart-module_container__MB1Vr","chart":"MoodChart-module_chart__4-spu","gridLine":"MoodChart-module_gridLine__YJpZ8","line":"MoodChart-module_line__LfeUX","area":"MoodChart-module_area__a4BFM","areaStopTop":"MoodChart-module_areaStopTop__KEp49","areaStopBottom":"MoodChart-module_areaStopBottom__cp7Gn","crosshair":"MoodChart-module_crosshair__PHLfW","halo":"MoodChart-module_halo__YQB-7","overlay":"MoodChart-module_overlay__ZwuHi","xAxis":"MoodChart-module_xAxis__SeIWG","yAxis":"MoodChart-module_yAxis__sRjjE","dataPoint":"MoodChart-module_dataPoint__112P1","tooltip":"MoodChart-module_tooltip__vW59y","tooltipHeader":"MoodChart-module_tooltipHeader__U7yvN","tooltipDate":"MoodChart-module_tooltipDate__6Jjeu","tooltipRating":"MoodChart-module_tooltipRating__5A2Yx","ratingValue":"MoodChart-module_ratingValue__7Gpfx","ratingMax":"MoodChart-module_ratingMax__10WcJ","tooltipTags":"MoodChart-module_tooltipTags__FUQrU","tag":"MoodChart-module_tag__QhCh5","tooltipComment":"MoodChart-module_tooltipComment__6driJ"};
 
 const MoodChart = ({ moodData, width = 800, height = 400 }) => {
     const svgRef = useRef(null);
@@ -3987,8 +3987,8 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             .attr('id', gradientId)
             .attr('x1', '0%').attr('y1', '0%')
             .attr('x2', '0%').attr('y2', '100%');
-        gradient.append('stop').attr('offset', '0%').attr('class', styles$9.areaStopTop);
-        gradient.append('stop').attr('offset', '100%').attr('class', styles$9.areaStopBottom);
+        gradient.append('stop').attr('offset', '0%').attr('class', styles$d.areaStopTop);
+        gradient.append('stop').attr('offset', '100%').attr('class', styles$d.areaStopBottom);
         const g = svg.append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
         const extentDates = d3.extent(processedData, d => d.date);
@@ -4013,7 +4013,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
         g.selectAll('.grid-line-y')
             .data(yScale.ticks(5))
             .enter().append('line')
-            .attr('class', styles$9.gridLine)
+            .attr('class', styles$d.gridLine)
             .attr('x1', 0)
             .attr('y1', d => yScale(d))
             .attr('x2', chartWidth)
@@ -4025,7 +4025,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             .style('opacity', 1);
         // Axes (fade in)
         g.append('g')
-            .attr('class', styles$9.xAxis)
+            .attr('class', styles$d.xAxis)
             .attr('transform', `translate(0,${chartHeight})`)
             .style('opacity', 0)
             .call(d3.axisBottom(xScale)
@@ -4035,7 +4035,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             .delay(100)
             .style('opacity', 1);
         g.append('g')
-            .attr('class', styles$9.yAxis)
+            .attr('class', styles$d.yAxis)
             .style('opacity', 0)
             .call(d3.axisLeft(yScale))
             .transition()
@@ -4045,14 +4045,14 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
         // Area fill (fades in after line draws past it)
         const areaPath = g.append('path')
             .datum(processedData)
-            .attr('class', styles$9.area)
+            .attr('class', styles$d.area)
             .attr('fill', `url(#${gradientId})`)
             .attr('d', area)
             .style('opacity', 0);
         // Line (draw-in animation via stroke-dasharray)
         const linePath = g.append('path')
             .datum(processedData)
-            .attr('class', styles$9.line)
+            .attr('class', styles$d.line)
             .attr('d', line);
         const lineNode = linePath.node();
         const totalLength = lineNode && typeof lineNode.getTotalLength === 'function'
@@ -4079,14 +4079,14 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             .style('opacity', 1);
         // Crosshair (vertical guide on hover)
         const crosshair = g.append('line')
-            .attr('class', styles$9.crosshair)
+            .attr('class', styles$d.crosshair)
             .attr('y1', 0)
             .attr('y2', chartHeight)
             .style('opacity', 0)
             .style('pointer-events', 'none');
         // Pulsing halo behind active point
         const halo = g.append('circle')
-            .attr('class', styles$9.halo)
+            .attr('class', styles$d.halo)
             .attr('r', 0)
             .style('opacity', 0)
             .style('pointer-events', 'none');
@@ -4097,7 +4097,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
         const pointSel = g.selectAll('.mood-circle')
             .data(processedData)
             .enter().append('circle')
-            .attr('class', styles$9.dataPoint)
+            .attr('class', styles$d.dataPoint)
             .attr('cx', d => xScale(d.date))
             .attr('cy', d => yScale(d.rating))
             .attr('r', 0)
@@ -4204,7 +4204,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
         // Overlay captures mouse for nearest-point lookup (rendered last so it sits on top)
         const bisect = d3.bisector(d => d.date).center;
         g.append('rect')
-            .attr('class', styles$9.overlay)
+            .attr('class', styles$d.overlay)
             .attr('width', chartWidth)
             .attr('height', chartHeight)
             .on('mousemove', function (event) {
@@ -4227,7 +4227,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             setSelectedMood(null);
         };
     }, []);
-    return (jsxs("div", { className: styles$9.container, ref: containerRef, children: [jsx("svg", { ref: svgRef, width: width, height: height, className: styles$9.chart }), selectedMood && (jsxs("div", { ref: tooltipRef, className: styles$9.tooltip, style: {
+    return (jsxs("div", { className: styles$d.container, ref: containerRef, children: [jsx("svg", { ref: svgRef, width: width, height: height, className: styles$d.chart }), selectedMood && (jsxs("div", { ref: tooltipRef, className: styles$d.tooltip, style: {
                     position: 'absolute',
                     pointerEvents: 'auto',
                     left: tooltipPosition.x,
@@ -4236,10 +4236,10 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
                 }, onMouseEnter: () => setIsHoveringTooltip(true), onMouseLeave: () => {
                     setIsHoveringTooltip(false);
                     setSelectedMood(null);
-                }, children: [jsxs("div", { className: styles$9.tooltipHeader, children: [jsx("div", { className: styles$9.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxs("div", { className: styles$9.tooltipRating, children: [jsx("span", { className: styles$9.ratingValue, children: selectedMood.rating }), jsx("span", { className: styles$9.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsx("div", { className: styles$9.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsx("span", { className: styles$9.tag, children: tag }, index))) })), selectedMood.comment && (jsx("div", { className: styles$9.tooltipComment, children: selectedMood.comment }))] }))] }));
+                }, children: [jsxs("div", { className: styles$d.tooltipHeader, children: [jsx("div", { className: styles$d.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxs("div", { className: styles$d.tooltipRating, children: [jsx("span", { className: styles$d.ratingValue, children: selectedMood.rating }), jsx("span", { className: styles$d.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsx("div", { className: styles$d.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsx("span", { className: styles$d.tag, children: tag }, index))) })), selectedMood.comment && (jsx("div", { className: styles$d.tooltipComment, children: selectedMood.comment }))] }))] }));
 };
 
-var styles$8 = {"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","compactLegend":"QuantifiableHabitsChart-module_compactLegend__jMpLB","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","chart":"QuantifiableHabitsChart-module_chart__FMeA-","gridLine":"QuantifiableHabitsChart-module_gridLine__CTNIq","line":"QuantifiableHabitsChart-module_line__CpYip","crosshair":"QuantifiableHabitsChart-module_crosshair__7hoFL","halo":"QuantifiableHabitsChart-module_halo__YlkOF","overlay":"QuantifiableHabitsChart-module_overlay__ffeNz","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$c = {"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","compactLegend":"QuantifiableHabitsChart-module_compactLegend__jMpLB","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","chart":"QuantifiableHabitsChart-module_chart__FMeA-","gridLine":"QuantifiableHabitsChart-module_gridLine__CTNIq","line":"QuantifiableHabitsChart-module_line__CpYip","crosshair":"QuantifiableHabitsChart-module_crosshair__7hoFL","halo":"QuantifiableHabitsChart-module_halo__YlkOF","overlay":"QuantifiableHabitsChart-module_overlay__ffeNz","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"};
 
 const DEFAULT_HABIT_COLORS$1 = {
     'Exercise': '#6BCB77',
@@ -4433,7 +4433,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
             .data(yScale.ticks(5), d => String(d));
         gridSel.exit().remove();
         const gridEnter = gridSel.enter().append('line')
-            .attr('class', `${styles$8.gridLine} qhc-grid-line`)
+            .attr('class', `${styles$c.gridLine} qhc-grid-line`)
             .style('opacity', 0);
         gridEnter.merge(gridSel)
             .attr('x1', 0)
@@ -4489,7 +4489,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         }
         let xAxis = axesGroup.select('g.qhc-x-axis');
         if (xAxis.empty()) {
-            xAxis = axesGroup.append('g').attr('class', `${styles$8.xAxis} qhc-x-axis`);
+            xAxis = axesGroup.append('g').attr('class', `${styles$c.xAxis} qhc-x-axis`);
         }
         xAxis.attr('transform', `translate(0,${chartHeight})`).call(xAxisGenerator);
         xAxis.selectAll('text')
@@ -4499,7 +4499,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
             .attr('transform', viewType === 'daily' || viewType === 'weekly' ? 'rotate(-45)' : null);
         let yAxis = axesGroup.select('g.qhc-y-axis');
         if (yAxis.empty()) {
-            yAxis = axesGroup.append('g').attr('class', `${styles$8.yAxis} qhc-y-axis`);
+            yAxis = axesGroup.append('g').attr('class', `${styles$c.yAxis} qhc-y-axis`);
         }
         yAxis.call(d3.axisLeft(yScale));
         if (isFirstRender) {
@@ -4521,7 +4521,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
             .style('opacity', 0)
             .remove();
         const lineEnter = lineSel.enter().append('path')
-            .attr('class', `${styles$8.line} qhc-line`)
+            .attr('class', `${styles$c.line} qhc-line`)
             .attr('data-habit', d => d.habit)
             .attr('fill', 'none')
             .attr('stroke', d => d.color)
@@ -4578,7 +4578,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         pointsGroup.selectAll('circle.qhc-point')
             .data(allPoints)
             .enter().append('circle')
-            .attr('class', `${styles$8.dataPoint} qhc-point`)
+            .attr('class', `${styles$c.dataPoint} qhc-point`)
             .attr('data-habit', d => d.habit)
             .attr('cx', d => xScale(d.date))
             .attr('cy', chartHeight)
@@ -4595,13 +4595,13 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         // -------- UI layer (crosshair, halo, overlay) --------
         uiGroup.selectAll('*').remove();
         const crosshair = uiGroup.append('line')
-            .attr('class', styles$8.crosshair)
+            .attr('class', styles$c.crosshair)
             .attr('y1', 0)
             .attr('y2', chartHeight)
             .style('opacity', 0)
             .style('pointer-events', 'none');
         const halo = uiGroup.append('circle')
-            .attr('class', styles$8.halo)
+            .attr('class', styles$c.halo)
             .attr('r', 0)
             .style('opacity', 0)
             .style('pointer-events', 'none');
@@ -4673,7 +4673,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
             setTooltipData(null);
         };
         uiGroup.append('rect')
-            .attr('class', styles$8.overlay)
+            .attr('class', styles$c.overlay)
             .attr('width', chartWidth)
             .attr('height', chartHeight)
             .on('mousemove', function (event) {
@@ -4763,16 +4763,16 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         quarterly: { Icon: BarChart3, label: 'Quarterly' }
     };
     const shouldShowAggregationToggle = viewType !== 'daily';
-    return (jsxs("div", { className: styles$8.container, children: [!hideControls && (jsxs("div", { className: styles$8.controls, children: [jsx("div", { className: styles$8.viewToggle, children: availableViewTypes.map(type => {
+    return (jsxs("div", { className: styles$c.container, children: [!hideControls && (jsxs("div", { className: styles$c.controls, children: [jsx("div", { className: styles$c.viewToggle, children: availableViewTypes.map(type => {
                             const { Icon, label } = viewTypeConfig[type];
-                            return (jsxs("button", { className: `${styles$8.viewButton} ${viewType === type ? styles$8.active : ''}`, onClick: () => setViewType(type), title: label, children: [jsx("span", { className: styles$8.viewIcon, children: jsx(Icon, { size: 16 }) }), jsx("span", { className: styles$8.viewLabel, children: label })] }, type));
-                        }) }), shouldShowAggregationToggle && (jsxs("div", { className: styles$8.aggregationToggle, children: [jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'average' ? styles$8.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsx("span", { className: styles$8.aggregationIcon, children: jsx(Divide, { size: 16 }) }), jsx("span", { className: styles$8.aggregationLabel, children: "Average" })] }), jsxs("button", { className: `${styles$8.aggregationButton} ${aggregationMode === 'sum' ? styles$8.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsx("span", { className: styles$8.aggregationIcon, children: jsx(Sigma, { size: 16 }) }), jsx("span", { className: styles$8.aggregationLabel, children: "Sum" })] })] }))] })), jsx("div", { className: `${styles$8.legend}${compactLegend ? ` ${styles$8.compactLegend}` : ''}`, children: habits.map(habit => (jsxs("button", { className: `${styles$8.legendItem} ${!activeHabits.includes(habit) ? styles$8.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$8.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$8.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$8.legendLabel, children: habit })] }, habit))) }), jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$8.chart }), tooltipData && (jsxs("div", { ref: tooltipRef, className: `${styles$8.tooltip} ${tooltipData ? styles$8.visible : ''}`, style: {
+                            return (jsxs("button", { className: `${styles$c.viewButton} ${viewType === type ? styles$c.active : ''}`, onClick: () => setViewType(type), title: label, children: [jsx("span", { className: styles$c.viewIcon, children: jsx(Icon, { size: 16 }) }), jsx("span", { className: styles$c.viewLabel, children: label })] }, type));
+                        }) }), shouldShowAggregationToggle && (jsxs("div", { className: styles$c.aggregationToggle, children: [jsxs("button", { className: `${styles$c.aggregationButton} ${aggregationMode === 'average' ? styles$c.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsx("span", { className: styles$c.aggregationIcon, children: jsx(Divide, { size: 16 }) }), jsx("span", { className: styles$c.aggregationLabel, children: "Average" })] }), jsxs("button", { className: `${styles$c.aggregationButton} ${aggregationMode === 'sum' ? styles$c.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsx("span", { className: styles$c.aggregationIcon, children: jsx(Sigma, { size: 16 }) }), jsx("span", { className: styles$c.aggregationLabel, children: "Sum" })] })] }))] })), jsx("div", { className: `${styles$c.legend}${compactLegend ? ` ${styles$c.compactLegend}` : ''}`, children: habits.map(habit => (jsxs("button", { className: `${styles$c.legendItem} ${!activeHabits.includes(habit) ? styles$c.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$c.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$c.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$c.legendLabel, children: habit })] }, habit))) }), jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$c.chart }), tooltipData && (jsxs("div", { ref: tooltipRef, className: `${styles$c.tooltip} ${tooltipData ? styles$c.visible : ''}`, style: {
                     left: `${tooltipData.x}px`,
                     top: `${tooltipData.y - 80}px`
-                }, children: [jsxs("div", { className: styles$8.tooltipHeader, children: [jsx("span", { className: styles$8.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsx("span", { className: styles$8.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsx("span", { children: tooltipData.habit })] }), jsxs("div", { className: styles$8.tooltipInfo, children: [jsx("div", { className: styles$8.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxs("div", { className: styles$8.tooltipValue, children: [jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));
+                }, children: [jsxs("div", { className: styles$c.tooltipHeader, children: [jsx("span", { className: styles$c.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsx("span", { className: styles$c.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsx("span", { children: tooltipData.habit })] }), jsxs("div", { className: styles$c.tooltipInfo, children: [jsx("div", { className: styles$c.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxs("div", { className: styles$c.tooltipValue, children: [jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));
 };
 
-var styles$7 = {"container":"HabitTimeOfDayChart-module_container__DCW3B","controls":"HabitTimeOfDayChart-module_controls__2p7mW","viewToggle":"HabitTimeOfDayChart-module_viewToggle__SSfDu","viewButton":"HabitTimeOfDayChart-module_viewButton__DENLF","active":"HabitTimeOfDayChart-module_active__VRrF1","viewIcon":"HabitTimeOfDayChart-module_viewIcon__MXqrp","viewLabel":"HabitTimeOfDayChart-module_viewLabel__XNKhi","legend":"HabitTimeOfDayChart-module_legend__y4Apu","compactLegend":"HabitTimeOfDayChart-module_compactLegend__Gsodv","legendItem":"HabitTimeOfDayChart-module_legendItem__QEXr4","legendEmoji":"HabitTimeOfDayChart-module_legendEmoji__T7zLH","legendLabel":"HabitTimeOfDayChart-module_legendLabel__TUT29","inactive":"HabitTimeOfDayChart-module_inactive__xVIwD","legendColor":"HabitTimeOfDayChart-module_legendColor__SzkAm","chart":"HabitTimeOfDayChart-module_chart__7Plpd","dot":"HabitTimeOfDayChart-module_dot__rxGpu","bar":"HabitTimeOfDayChart-module_bar__F0Rwy","gridLine":"HabitTimeOfDayChart-module_gridLine__waZrZ","xAxis":"HabitTimeOfDayChart-module_xAxis__pQGbi","yAxis":"HabitTimeOfDayChart-module_yAxis__fblot","tooltip":"HabitTimeOfDayChart-module_tooltip__8EPnz","visible":"HabitTimeOfDayChart-module_visible__3yEYR","tooltipHeader":"HabitTimeOfDayChart-module_tooltipHeader__1ywo5","tooltipInfo":"HabitTimeOfDayChart-module_tooltipInfo__xizGe","tooltipValue":"HabitTimeOfDayChart-module_tooltipValue__DcYfO","tooltipUnits":"HabitTimeOfDayChart-module_tooltipUnits__Um-EN","tooltipBreakdown":"HabitTimeOfDayChart-module_tooltipBreakdown__AQ27l","tooltipBreakdownRow":"HabitTimeOfDayChart-module_tooltipBreakdownRow__jHc6D","tooltipDot":"HabitTimeOfDayChart-module_tooltipDot__Khfwh","tooltipCount":"HabitTimeOfDayChart-module_tooltipCount__BRgaU"};
+var styles$b = {"container":"HabitTimeOfDayChart-module_container__DCW3B","controls":"HabitTimeOfDayChart-module_controls__2p7mW","viewToggle":"HabitTimeOfDayChart-module_viewToggle__SSfDu","viewButton":"HabitTimeOfDayChart-module_viewButton__DENLF","active":"HabitTimeOfDayChart-module_active__VRrF1","viewIcon":"HabitTimeOfDayChart-module_viewIcon__MXqrp","viewLabel":"HabitTimeOfDayChart-module_viewLabel__XNKhi","legend":"HabitTimeOfDayChart-module_legend__y4Apu","compactLegend":"HabitTimeOfDayChart-module_compactLegend__Gsodv","legendItem":"HabitTimeOfDayChart-module_legendItem__QEXr4","legendEmoji":"HabitTimeOfDayChart-module_legendEmoji__T7zLH","legendLabel":"HabitTimeOfDayChart-module_legendLabel__TUT29","inactive":"HabitTimeOfDayChart-module_inactive__xVIwD","legendColor":"HabitTimeOfDayChart-module_legendColor__SzkAm","chart":"HabitTimeOfDayChart-module_chart__7Plpd","dot":"HabitTimeOfDayChart-module_dot__rxGpu","bar":"HabitTimeOfDayChart-module_bar__F0Rwy","gridLine":"HabitTimeOfDayChart-module_gridLine__waZrZ","xAxis":"HabitTimeOfDayChart-module_xAxis__pQGbi","yAxis":"HabitTimeOfDayChart-module_yAxis__fblot","tooltip":"HabitTimeOfDayChart-module_tooltip__8EPnz","visible":"HabitTimeOfDayChart-module_visible__3yEYR","tooltipHeader":"HabitTimeOfDayChart-module_tooltipHeader__1ywo5","tooltipInfo":"HabitTimeOfDayChart-module_tooltipInfo__xizGe","tooltipValue":"HabitTimeOfDayChart-module_tooltipValue__DcYfO","tooltipUnits":"HabitTimeOfDayChart-module_tooltipUnits__Um-EN","tooltipBreakdown":"HabitTimeOfDayChart-module_tooltipBreakdown__AQ27l","tooltipBreakdownRow":"HabitTimeOfDayChart-module_tooltipBreakdownRow__jHc6D","tooltipDot":"HabitTimeOfDayChart-module_tooltipDot__Khfwh","tooltipCount":"HabitTimeOfDayChart-module_tooltipCount__BRgaU"};
 
 const DEFAULT_HABIT_COLORS = {
     Exercise: '#6BCB77',
@@ -4961,7 +4961,7 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 .data([0, 3, 6, 9, 12, 15, 18, 21, 24])
                 .enter()
                 .append('line')
-                .attr('class', styles$7.gridLine)
+                .attr('class', styles$b.gridLine)
                 .attr('x1', d => xScale(d))
                 .attr('x2', d => xScale(d))
                 .attr('y1', 0)
@@ -4970,17 +4970,24 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
             const rowHeight = yScale.bandwidth();
             const baseRadius = Math.min(5, Math.max(2, rowHeight / 2));
             const maxRadius = baseRadius * 2.2;
-            g.selectAll('circle.dot')
+            const scatterDots = g.selectAll('circle.dot')
                 .data(clusters)
                 .enter()
                 .append('circle')
-                .attr('class', styles$7.dot)
+                .attr('class', styles$b.dot)
                 .attr('cx', d => xScale(d.hourFraction) + d.xOffsetPx)
                 .attr('cy', d => (yScale(d.date) ?? 0) + rowHeight / 2)
-                .attr('r', d => Math.min(maxRadius, baseRadius * Math.sqrt(d.count)))
+                .attr('r', 0)
                 .attr('fill', d => getColor(d.habitKey))
-                .attr('opacity', d => hoveredHabit && hoveredHabit !== d.habitKey ? 0.15 : 0.8)
-                .style('cursor', 'pointer')
+                .attr('opacity', 0)
+                .style('cursor', 'pointer');
+            scatterDots.transition()
+                .delay(d => (xScale(d.hourFraction) / chartWidth) * 600)
+                .duration(380)
+                .ease(d3.easeBackOut.overshoot(1.8))
+                .attr('r', d => Math.min(maxRadius, baseRadius * Math.sqrt(d.count)))
+                .attr('opacity', d => hoveredHabit && hoveredHabit !== d.habitKey ? 0.15 : 0.8);
+            scatterDots
                 .on('mouseenter', function (_event, d) {
                 const rect = svgRef.current?.getBoundingClientRect();
                 if (!rect)
@@ -5001,7 +5008,7 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 .tickValues([0, 3, 6, 9, 12, 15, 18, 21])
                 .tickFormat(d => formatHour(d));
             g.append('g')
-                .attr('class', styles$7.xAxis)
+                .attr('class', styles$b.xAxis)
                 .attr('transform', `translate(0,${chartHeight})`)
                 .call(xAxis);
             // Y axis (dates) — evenly spaced
@@ -5014,7 +5021,7 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 const [, m, day] = d.split('-');
                 return `${m}/${day}`;
             });
-            g.append('g').attr('class', styles$7.yAxis).call(yAxis);
+            g.append('g').attr('class', styles$b.yAxis).call(yAxis);
         }
         else {
             // Totals view: stacked bar by hour
@@ -5030,7 +5037,7 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 .data(yScale.ticks(5))
                 .enter()
                 .append('line')
-                .attr('class', styles$7.gridLine)
+                .attr('class', styles$b.gridLine)
                 .attr('x1', 0)
                 .attr('x2', chartWidth)
                 .attr('y1', d => yScale(d))
@@ -5038,17 +5045,24 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
             hourlyTotals.forEach(bucket => {
                 let cumulative = 0;
                 const entries = Array.from(bucket.byHabit.entries()).sort(([a], [b]) => a.localeCompare(b));
+                const barDelay = (bucket.hour / 24) * 700;
                 entries.forEach(([habit, count]) => {
                     const y = yScale(cumulative + count);
                     const barHeight = Math.max(0, yScale(cumulative) - yScale(cumulative + count));
                     g.append('rect')
-                        .attr('class', styles$7.bar)
+                        .attr('class', styles$b.bar)
                         .attr('x', xScale(bucket.hour) ?? 0)
-                        .attr('y', y)
+                        .attr('y', chartHeight)
                         .attr('width', xScale.bandwidth())
-                        .attr('height', barHeight)
+                        .attr('height', 0)
                         .attr('fill', getColor(habit))
-                        .attr('opacity', hoveredHabit && hoveredHabit !== habit ? 0.3 : 1);
+                        .attr('opacity', hoveredHabit && hoveredHabit !== habit ? 0.3 : 1)
+                        .transition()
+                        .delay(barDelay)
+                        .duration(550)
+                        .ease(d3.easeCubicOut)
+                        .attr('y', y)
+                        .attr('height', barHeight);
                     cumulative += count;
                 });
                 if (bucket.total > 0) {
@@ -5080,10 +5094,10 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 .tickValues([0, 3, 6, 9, 12, 15, 18, 21])
                 .tickFormat(d => formatHour(d));
             g.append('g')
-                .attr('class', styles$7.xAxis)
+                .attr('class', styles$b.xAxis)
                 .attr('transform', `translate(0,${chartHeight})`)
                 .call(xAxis);
-            g.append('g').attr('class', styles$7.yAxis).call(d3.axisLeft(yScale).ticks(5));
+            g.append('g').attr('class', styles$b.yAxis).call(d3.axisLeft(yScale).ticks(5));
         }
     }, [
         view,
@@ -5112,12 +5126,12 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
             day: 'numeric',
         });
     };
-    return (jsxs("div", { className: styles$7.container, children: [!hideControls && (jsx("div", { className: styles$7.controls, children: jsx("div", { className: styles$7.viewToggle, children: ['scatter', 'totals'].map(type => (jsxs("button", { className: `${styles$7.viewButton} ${view === type ? styles$7.active : ''}`, onClick: () => setView(type), title: viewConfig[type].label, children: [jsx("span", { className: styles$7.viewIcon, children: viewConfig[type].icon }), jsx("span", { className: styles$7.viewLabel, children: viewConfig[type].label })] }, type))) }) })), habits.length > 0 && (jsx("div", { className: `${styles$7.legend}${compactLegend ? ` ${styles$7.compactLegend}` : ''}`, children: habits.map(habit => (jsxs("button", { className: `${styles$7.legendItem} ${!activeHabits.includes(habit) ? styles$7.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$7.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$7.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$7.legendLabel, children: habit })] }, habit))) })), jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$7.chart }), tooltipData && (jsx("div", { className: `${styles$7.tooltip} ${styles$7.visible}`, style: { left: `${tooltipData.x}px`, top: `${tooltipData.y - 70}px` }, children: tooltipData.habit ? (jsxs(Fragment, { children: [jsxs("div", { className: styles$7.tooltipHeader, children: [jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxs("span", { children: [customHabitEmojis[tooltipData.habit] || '', " ", tooltipData.habit] })] }), jsxs("div", { className: styles$7.tooltipInfo, children: [jsxs("div", { className: styles$7.tooltipDate, children: [tooltipData.date ? formatTooltipDate(tooltipData.date) : '', tooltipData.minute !== undefined
+    return (jsxs("div", { className: styles$b.container, children: [!hideControls && (jsx("div", { className: styles$b.controls, children: jsx("div", { className: styles$b.viewToggle, children: ['scatter', 'totals'].map(type => (jsxs("button", { className: `${styles$b.viewButton} ${view === type ? styles$b.active : ''}`, onClick: () => setView(type), title: viewConfig[type].label, children: [jsx("span", { className: styles$b.viewIcon, children: viewConfig[type].icon }), jsx("span", { className: styles$b.viewLabel, children: viewConfig[type].label })] }, type))) }) })), habits.length > 0 && (jsx("div", { className: `${styles$b.legend}${compactLegend ? ` ${styles$b.compactLegend}` : ''}`, children: habits.map(habit => (jsxs("button", { className: `${styles$b.legendItem} ${!activeHabits.includes(habit) ? styles$b.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$b.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$b.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$b.legendLabel, children: habit })] }, habit))) })), jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$b.chart }), tooltipData && (jsx("div", { className: `${styles$b.tooltip} ${styles$b.visible}`, style: { left: `${tooltipData.x}px`, top: `${tooltipData.y - 70}px` }, children: tooltipData.habit ? (jsxs(Fragment, { children: [jsxs("div", { className: styles$b.tooltipHeader, children: [jsx("span", { className: styles$b.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxs("span", { children: [customHabitEmojis[tooltipData.habit] || '', " ", tooltipData.habit] })] }), jsxs("div", { className: styles$b.tooltipInfo, children: [jsxs("div", { className: styles$b.tooltipDate, children: [tooltipData.date ? formatTooltipDate(tooltipData.date) : '', tooltipData.minute !== undefined
                                             ? ` · ${formatTime$1(tooltipData.hour, tooltipData.minute)}`
-                                            : ''] }), tooltipData.count > 1 && (jsxs("div", { className: styles$7.tooltipValue, children: [jsx("strong", { children: tooltipData.count }), jsx("span", { className: styles$7.tooltipUnits, children: "events" })] }))] })] })) : (jsxs(Fragment, { children: [jsx("div", { className: styles$7.tooltipHeader, children: jsx("span", { children: formatHour(tooltipData.hour) }) }), jsxs("div", { className: styles$7.tooltipInfo, children: [jsxs("div", { className: styles$7.tooltipValue, children: [jsx("strong", { children: tooltipData.count }), jsxs("span", { className: styles$7.tooltipUnits, children: ["event", tooltipData.count === 1 ? '' : 's'] })] }), tooltipData.breakdown && tooltipData.breakdown.length > 1 && (jsx("div", { className: styles$7.tooltipBreakdown, children: tooltipData.breakdown.map(({ habit, count }) => (jsxs("div", { className: styles$7.tooltipBreakdownRow, children: [jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(habit) } }), jsxs("span", { children: [customHabitEmojis[habit] || '', " ", habit] }), jsx("span", { className: styles$7.tooltipCount, children: count })] }, habit))) }))] })] })) }))] }));
+                                            : ''] }), tooltipData.count > 1 && (jsxs("div", { className: styles$b.tooltipValue, children: [jsx("strong", { children: tooltipData.count }), jsx("span", { className: styles$b.tooltipUnits, children: "events" })] }))] })] })) : (jsxs(Fragment, { children: [jsx("div", { className: styles$b.tooltipHeader, children: jsx("span", { children: formatHour(tooltipData.hour) }) }), jsxs("div", { className: styles$b.tooltipInfo, children: [jsxs("div", { className: styles$b.tooltipValue, children: [jsx("strong", { children: tooltipData.count }), jsxs("span", { className: styles$b.tooltipUnits, children: ["event", tooltipData.count === 1 ? '' : 's'] })] }), tooltipData.breakdown && tooltipData.breakdown.length > 1 && (jsx("div", { className: styles$b.tooltipBreakdown, children: tooltipData.breakdown.map(({ habit, count }) => (jsxs("div", { className: styles$b.tooltipBreakdownRow, children: [jsx("span", { className: styles$b.tooltipDot, style: { backgroundColor: getColor(habit) } }), jsxs("span", { children: [customHabitEmojis[habit] || '', " ", habit] }), jsx("span", { className: styles$b.tooltipCount, children: count })] }, habit))) }))] })] })) }))] }));
 };
 
-var styles$6 = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","eyebrow":"SleepChart-module_eyebrow__KH0ox","title":"SleepChart-module_title__6-QII","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","gridLineAccent":"SleepChart-module_gridLineAccent__Sk-l6","sleepBar":"SleepChart-module_sleepBar__Hk76f","sleepBarHover":"SleepChart-module_sleepBarHover__cBTca","squiggle":"SleepChart-module_squiggle__Hxfjx","endpoint":"SleepChart-module_endpoint__vB4WD","endpointSleep":"SleepChart-module_endpointSleep__FA1vK","endpointWake":"SleepChart-module_endpointWake__CWEOB","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA","tooltip":"SleepChart-module_tooltip__jQBv1","visible":"SleepChart-module_visible__wy0ck","tooltipDate":"SleepChart-module_tooltipDate__g2kOA","tooltipBody":"SleepChart-module_tooltipBody__RamWJ","tooltipRow":"SleepChart-module_tooltipRow__CuDaE","tooltipTotal":"SleepChart-module_tooltipTotal__5v3dE"};
+var styles$a = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","eyebrow":"SleepChart-module_eyebrow__KH0ox","title":"SleepChart-module_title__6-QII","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","gridLineAccent":"SleepChart-module_gridLineAccent__Sk-l6","sleepBar":"SleepChart-module_sleepBar__Hk76f","sleepBarHover":"SleepChart-module_sleepBarHover__cBTca","squiggle":"SleepChart-module_squiggle__Hxfjx","endpoint":"SleepChart-module_endpoint__vB4WD","endpointSleep":"SleepChart-module_endpointSleep__FA1vK","endpointWake":"SleepChart-module_endpointWake__CWEOB","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA","tooltip":"SleepChart-module_tooltip__jQBv1","visible":"SleepChart-module_visible__wy0ck","tooltipDate":"SleepChart-module_tooltipDate__g2kOA","tooltipBody":"SleepChart-module_tooltipBody__RamWJ","tooltipRow":"SleepChart-module_tooltipRow__CuDaE","tooltipTotal":"SleepChart-module_tooltipTotal__5v3dE"};
 
 const parseTimeToDecimal = (time) => {
     const [hours, minutes] = time.split(':').map(Number);
@@ -5128,7 +5142,7 @@ const formatTime = (hour) => {
     const minutes = Math.round((hour % 1) * 60);
     return `${h24.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
 };
-const formatDuration = (decimal) => {
+const formatDuration$1 = (decimal) => {
     const h = Math.floor(decimal);
     const m = Math.round((decimal % 1) * 60);
     return `${h}h ${m.toString().padStart(2, '0')}m`;
@@ -5188,23 +5202,25 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick, }) => {
             .data(d3.range(18, 43, 3))
             .enter()
             .append('line')
-            .attr('class', styles$6.gridLine)
+            .attr('class', styles$a.gridLine)
             .attr('x1', (d) => xScale(d))
             .attr('y1', 0)
             .attr('x2', (d) => xScale(d))
             .attr('y2', chartHeight)
-            .classed(styles$6.gridLineAccent, (d) => {
+            .classed(styles$a.gridLineAccent, (d) => {
             const hour = d % 24;
             return hour === 0 || hour === 12;
         });
-        sleepData.forEach((dayData) => {
+        const rowStagger = Math.min(40, 600 / Math.max(1, sleepData.length));
+        sleepData.forEach((dayData, rowIdx) => {
             const yValue = yScale(dayData.date);
             if (yValue === undefined)
                 return;
+            const rowDelay = rowIdx * rowStagger;
             const barHeight = yScale.bandwidth();
             const sleepGroup = g
                 .append('g')
-                .attr('class', styles$6.sleepBar)
+                .attr('class', styles$a.sleepBar)
                 .style('cursor', onDateClick ? 'pointer' : 'default')
                 .on('click', () => onDateClick?.(dayData.date));
             let sleepHour = null;
@@ -5234,7 +5250,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick, }) => {
                 const d = buildSquigglePath(x1, x2, y, amplitude, wavelength);
                 const path = sleepGroup
                     .append('path')
-                    .attr('class', styles$6.squiggle)
+                    .attr('class', styles$a.squiggle)
                     .attr('d', d)
                     .attr('fill', 'none');
                 const node = path.node();
@@ -5244,6 +5260,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick, }) => {
                 path.attr('stroke-dasharray', length)
                     .attr('stroke-dashoffset', length)
                     .transition()
+                    .delay(rowDelay)
                     .duration(540)
                     .ease(d3.easeCubicOut)
                     .attr('stroke-dashoffset', 0);
@@ -5251,32 +5268,32 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick, }) => {
             if (sleepHour !== null) {
                 sleepGroup
                     .append('circle')
-                    .attr('class', `${styles$6.endpoint} ${styles$6.endpointSleep}`)
+                    .attr('class', `${styles$a.endpoint} ${styles$a.endpointSleep}`)
                     .attr('cx', xScale(sleepHour))
                     .attr('cy', yValue + barHeight / 2)
                     .attr('r', 0)
                     .transition()
                     .duration(280)
-                    .delay(160)
+                    .delay(rowDelay + 160)
                     .ease(d3.easeCubicOut)
                     .attr('r', 3.5);
             }
             if (wakeHour !== null) {
                 sleepGroup
                     .append('circle')
-                    .attr('class', `${styles$6.endpoint} ${styles$6.endpointWake}`)
+                    .attr('class', `${styles$a.endpoint} ${styles$a.endpointWake}`)
                     .attr('cx', xScale(wakeHour))
                     .attr('cy', yValue + barHeight / 2)
                     .attr('r', 0)
                     .transition()
                     .duration(280)
-                    .delay(220)
+                    .delay(rowDelay + 220)
                     .ease(d3.easeCubicOut)
                     .attr('r', 3.5);
             }
             sleepGroup
                 .on('mouseenter', function (event) {
-                d3.select(this).classed(styles$6.sleepBarHover, true);
+                d3.select(this).classed(styles$a.sleepBarHover, true);
                 const duration = sleepHour !== null && wakeHour !== null ? wakeHour - sleepHour : null;
                 setTooltipData({
                     date: dayData.date,
@@ -5288,7 +5305,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick, }) => {
                 });
             })
                 .on('mouseleave', function () {
-                d3.select(this).classed(styles$6.sleepBarHover, false);
+                d3.select(this).classed(styles$a.sleepBarHover, false);
                 setTooltipData(null);
             })
                 .on('mousemove', function (event) {
@@ -5301,7 +5318,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick, }) => {
         }));
         const xAxis = g
             .append('g')
-            .attr('class', styles$6.xAxis)
+            .attr('class', styles$a.xAxis)
             .attr('transform', `translate(0,${chartHeight})`)
             .call(d3
             .axisBottom(xScale)
@@ -5317,7 +5334,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick, }) => {
         const yAxisTicks = yDomain.filter((_, i) => i % tickEvery === 0);
         const yAxis = g
             .append('g')
-            .attr('class', styles$6.yAxis)
+            .attr('class', styles$a.yAxis)
             .call(d3
             .axisLeft(yScale)
             .tickValues(yAxisTicks)
@@ -5331,14 +5348,14 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick, }) => {
             .tickPadding(12));
         yAxis.select('.domain').remove();
     }, [sleepData, chartWidth, chartHeight, margin, onDateClick, height, width]);
-    return (jsxs("div", { className: styles$6.container, children: [jsxs("header", { className: styles$6.header, children: [jsx("span", { className: styles$6.eyebrow, children: "the night" }), jsxs("h3", { className: styles$6.title, children: [jsx("em", { children: "Sleep" }), " pattern"] })] }), jsx("svg", { ref: svgRef, width: width, height: height, className: styles$6.chart }), tooltipData && (jsxs("div", { className: `${styles$6.tooltip} ${styles$6.visible}`, style: { left: `${tooltipData.x}px`, top: `${tooltipData.y}px` }, children: [jsx("div", { className: styles$6.tooltipDate, children: new Date(tooltipData.date).toLocaleDateString('en-US', {
+    return (jsxs("div", { className: styles$a.container, children: [jsxs("header", { className: styles$a.header, children: [jsx("span", { className: styles$a.eyebrow, children: "the night" }), jsxs("h3", { className: styles$a.title, children: [jsx("em", { children: "Sleep" }), " pattern"] })] }), jsx("svg", { ref: svgRef, width: width, height: height, className: styles$a.chart }), tooltipData && (jsxs("div", { className: `${styles$a.tooltip} ${styles$a.visible}`, style: { left: `${tooltipData.x}px`, top: `${tooltipData.y}px` }, children: [jsx("div", { className: styles$a.tooltipDate, children: new Date(tooltipData.date).toLocaleDateString('en-US', {
                             weekday: 'short',
                             month: 'short',
                             day: 'numeric',
-                        }) }), jsxs("div", { className: styles$6.tooltipBody, children: [tooltipData.sleepTime && (jsxs("div", { className: styles$6.tooltipRow, children: [jsx("em", { children: "sleep" }), jsx("time", { children: tooltipData.sleepTime })] })), tooltipData.wakeTime && (jsxs("div", { className: styles$6.tooltipRow, children: [jsx("em", { children: "wake" }), jsx("time", { children: tooltipData.wakeTime })] })), tooltipData.duration !== null && (jsxs("div", { className: `${styles$6.tooltipRow} ${styles$6.tooltipTotal}`, children: [jsx("em", { children: "total" }), jsx("time", { children: formatDuration(tooltipData.duration) })] }))] })] }))] }));
+                        }) }), jsxs("div", { className: styles$a.tooltipBody, children: [tooltipData.sleepTime && (jsxs("div", { className: styles$a.tooltipRow, children: [jsx("em", { children: "sleep" }), jsx("time", { children: tooltipData.sleepTime })] })), tooltipData.wakeTime && (jsxs("div", { className: styles$a.tooltipRow, children: [jsx("em", { children: "wake" }), jsx("time", { children: tooltipData.wakeTime })] })), tooltipData.duration !== null && (jsxs("div", { className: `${styles$a.tooltipRow} ${styles$a.tooltipTotal}`, children: [jsx("em", { children: "total" }), jsx("time", { children: formatDuration$1(tooltipData.duration) })] }))] })] }))] }));
 };
 
-var styles$5 = {"container":"BooleansHeatmap-module_container__IOyeU","title":"BooleansHeatmap-module_title__8DRRQ","habitEmoji":"BooleansHeatmap-module_habitEmoji__Mawv-","chart":"BooleansHeatmap-module_chart__-q0Pc","monthLabel":"BooleansHeatmap-module_monthLabel__MXbIg","dayLabel":"BooleansHeatmap-module_dayLabel__2RRtm","cell":"BooleansHeatmap-module_cell__WADVB","legend":"BooleansHeatmap-module_legend__WqGF8","legendItem":"BooleansHeatmap-module_legendItem__rDE2g","legendColor":"BooleansHeatmap-module_legendColor__Z34-d","tooltip":"BooleansHeatmap-module_tooltip__-fHl7"};
+var styles$9 = {"container":"BooleansHeatmap-module_container__IOyeU","title":"BooleansHeatmap-module_title__8DRRQ","habitEmoji":"BooleansHeatmap-module_habitEmoji__Mawv-","chart":"BooleansHeatmap-module_chart__-q0Pc","monthLabel":"BooleansHeatmap-module_monthLabel__MXbIg","dayLabel":"BooleansHeatmap-module_dayLabel__2RRtm","cell":"BooleansHeatmap-module_cell__WADVB","legend":"BooleansHeatmap-module_legend__WqGF8","legendItem":"BooleansHeatmap-module_legendItem__rDE2g","legendColor":"BooleansHeatmap-module_legendColor__Z34-d","tooltip":"BooleansHeatmap-module_tooltip__-fHl7"};
 
 const DAYS_OF_WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -5392,20 +5409,20 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
             g.append('text')
                 .attr('x', weekIndex * (cellSize + cellGap))
                 .attr('y', -10)
-                .attr('class', styles$5.monthLabel)
+                .attr('class', styles$9.monthLabel)
                 .text(MONTHS[month]);
         });
         DAYS_OF_WEEK.forEach((day, index) => {
             g.append('text')
                 .attr('x', -10)
                 .attr('y', index * (cellSize + cellGap) + cellSize / 2)
-                .attr('class', styles$5.dayLabel)
+                .attr('class', styles$9.dayLabel)
                 .attr('text-anchor', 'end')
                 .attr('alignment-baseline', 'middle')
                 .text(day);
         });
         const tooltip = d3.select('body').append('div')
-            .attr('class', styles$5.tooltip)
+            .attr('class', styles$9.tooltip)
             .style('opacity', 0)
             .style('position', 'absolute');
         const daysToShow = weeksToShow * 7;
@@ -5418,16 +5435,29 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
             const dayOfWeek = (date.getDay() + 6) % 7;
             const weekIndex = Math.floor((i + startDayOffset) / 7);
             const isTrue = dateString in data && data[dateString];
+            const cx = weekIndex * (cellSize + cellGap) + cellSize / 2;
+            const cy = dayOfWeek * (cellSize + cellGap) + cellSize / 2;
             const rect = g.append('rect')
+                .attr('x', cx)
+                .attr('y', cy)
+                .attr('width', 0)
+                .attr('height', 0)
+                .attr('rx', 3)
+                .attr('class', styles$9.cell)
+                .attr('data-date', dateString)
+                .attr('data-value', isTrue ? 'true' : 'false')
+                .style('fill', isTrue ? habitColor : '#4D4D4DFF')
+                .style('opacity', 0);
+            const cellDelay = (weekIndex + dayOfWeek) * 18;
+            rect.transition()
+                .delay(cellDelay)
+                .duration(320)
+                .ease(d3.easeBackOut.overshoot(1.6))
                 .attr('x', weekIndex * (cellSize + cellGap))
                 .attr('y', dayOfWeek * (cellSize + cellGap))
                 .attr('width', cellSize)
                 .attr('height', cellSize)
-                .attr('rx', 3)
-                .attr('class', styles$5.cell)
-                .attr('data-date', dateString)
-                .attr('data-value', isTrue ? 'true' : 'false')
-                .style('fill', isTrue ? habitColor : '#4D4D4DFF');
+                .style('opacity', 1);
             rect.on('mouseover', function (event) {
                 tooltip.transition()
                     .duration(200)
@@ -5452,10 +5482,10 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
             tooltip.remove();
         };
     }, [data, habitName, width, height, startDate, endDate, weeksToShow, habitColor, habitEmoji]);
-    return (jsxs("div", { className: styles$5.container, children: [jsxs("h3", { className: styles$5.title, children: [jsx("span", { className: styles$5.habitEmoji, children: habitEmoji }), habitName] }), jsx("svg", { ref: svgRef, width: width, height: height, className: styles$5.chart }), jsxs("div", { className: styles$5.legend, children: [jsxs("span", { className: styles$5.legendItem, children: [jsx("span", { className: styles$5.legendColor, style: { backgroundColor: habitColor } }), "Done"] }), jsxs("span", { className: styles$5.legendItem, children: [jsx("span", { className: styles$5.legendColor, style: { backgroundColor: '#4D4D4DFF' } }), "Not done"] })] })] }));
+    return (jsxs("div", { className: styles$9.container, children: [jsxs("h3", { className: styles$9.title, children: [jsx("span", { className: styles$9.habitEmoji, children: habitEmoji }), habitName] }), jsx("svg", { ref: svgRef, width: width, height: height, className: styles$9.chart }), jsxs("div", { className: styles$9.legend, children: [jsxs("span", { className: styles$9.legendItem, children: [jsx("span", { className: styles$9.legendColor, style: { backgroundColor: habitColor } }), "Done"] }), jsxs("span", { className: styles$9.legendItem, children: [jsx("span", { className: styles$9.legendColor, style: { backgroundColor: '#4D4D4DFF' } }), "Not done"] })] })] }));
 };
 
-var styles$4 = {"container":"SunburstChart-module_container__w1ZYc","title":"SunburstChart-module_title__T6Ak7","chart":"SunburstChart-module_chart__BFM6E","tooltip":"SunburstChart-module_tooltip__TuTAN"};
+var styles$8 = {"container":"SunburstChart-module_container__w1ZYc","title":"SunburstChart-module_title__T6Ak7","chart":"SunburstChart-module_chart__BFM6E","tooltip":"SunburstChart-module_tooltip__TuTAN"};
 
 const COLOR_PALETTE = [
     '#6366f1',
@@ -5519,7 +5549,8 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             node.y0Original = d.y0;
             node.y1Original = d.y1;
         });
-        const arc = d3
+        // arc generator (used for type only — entrance animation builds its own)
+        void d3
             .arc()
             .startAngle((d) => d.x0)
             .endAngle((d) => d.x1)
@@ -5529,7 +5560,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         const tooltip = d3
             .select('body')
             .append('div')
-            .attr('class', styles$4.tooltip)
+            .attr('class', styles$8.tooltip)
             .style('opacity', 0)
             .style('position', 'absolute');
         // Function to reset to original view
@@ -5696,7 +5727,6 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .data(nodes.filter((d) => d.depth > 0 && d.value && d.value > 0))
             .enter()
             .append('path')
-            .attr('d', arc)
             .attr('fill', (d) => {
             let ancestor = d;
             while (ancestor.depth > 1 && ancestor.parent) {
@@ -5760,6 +5790,46 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 .style('left', event.pageX + 10 + 'px')
                 .style('top', event.pageY - 28 + 'px');
         });
+        // Entrance animation: grow segments outward from center, staggered by depth + angle.
+        const entranceDuration = 700;
+        paths
+            .attr('d', (d) => {
+            const collapsedArc = d3
+                .arc()
+                .startAngle(() => d.x0)
+                .endAngle(() => d.x1)
+                .innerRadius(() => 0)
+                .outerRadius(() => 0)
+                .cornerRadius(3);
+            return collapsedArc(d) || '';
+        })
+            .style('opacity', 0)
+            .transition()
+            .delay((d) => (d.depth - 1) * 120 + ((d.x0 + d.x1) / 2 / (2 * Math.PI)) * 240)
+            .duration(entranceDuration)
+            .ease(d3.easeCubicOut)
+            .style('opacity', 1)
+            .attrTween('d', function (d) {
+            const node = d;
+            const startY0 = 0;
+            const startY1 = 0;
+            const endY0 = node.y0Original;
+            const endY1 = node.y1Original;
+            return (t) => {
+                const currY0 = d3.interpolate(startY0, endY0)(t);
+                const currY1 = d3.interpolate(startY1, endY1)(t);
+                node.y0 = currY0;
+                node.y1 = currY1;
+                const interpolatedArc = d3
+                    .arc()
+                    .startAngle(() => node.x0)
+                    .endAngle(() => node.x1)
+                    .innerRadius(() => Math.sqrt(Math.max(0, currY0)))
+                    .outerRadius(() => Math.sqrt(Math.max(0, currY1)))
+                    .cornerRadius(3);
+                return interpolatedArc(node) || '';
+            };
+        });
         const shouldDisplayLabel = (d) => {
             const angle = d.x1 - d.x0;
             // When zoomed in, be more lenient with label display since segments are larger
@@ -5911,8 +5981,9 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .append('text')
             .attr('class', 'segment-label')
             .attr('transform', (d) => {
-            const angle = (d.x0 + d.x1) / 2;
-            const radiusVal = (Math.sqrt(d.y0) + Math.sqrt(d.y1)) / 2;
+            const node = d;
+            const angle = (node.x0 + node.x1) / 2;
+            const radiusVal = (Math.sqrt(node.y0Original) + Math.sqrt(node.y1Original)) / 2;
             const x = Math.cos(angle - Math.PI / 2) * radiusVal;
             const y = Math.sin(angle - Math.PI / 2) * radiusVal;
             return `translate(${x},${y})`;
@@ -5927,15 +5998,20 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .text((d) => {
             const maxLength = d.depth === 1 ? 12 : 8;
             return d.data.name.substring(0, maxLength);
-        });
+        })
+            .style('opacity', 0)
+            .transition()
+            .delay((d) => (d.depth - 1) * 120 + ((d.x0 + d.x1) / 2 / (2 * Math.PI)) * 240 + 500)
+            .duration(300)
+            .style('opacity', 1);
         return () => {
             tooltip.remove();
         };
     }, [data, width, height, colorMap, radius, tagColors, unit, centerLabel]);
-    return (jsxs("div", { className: styles$4.container, children: [jsx("h3", { className: styles$4.title, children: title }), jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, className: styles$4.chart })] }));
+    return (jsxs("div", { className: styles$8.container, children: [jsx("h3", { className: styles$8.title, children: title }), jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, className: styles$8.chart })] }));
 };
 
-var styles$3 = {"container":"PieChart-module_container__tXjbe","title":"PieChart-module_title__61o0R","chartContainer":"PieChart-module_chartContainer__uLmOz","chart":"PieChart-module_chart__3nqON","legend":"PieChart-module_legend__rAWgh","legendItem":"PieChart-module_legendItem__Nb031","legendColor":"PieChart-module_legendColor__fLuv9","legendLabel":"PieChart-module_legendLabel__xbjBr","legendValue":"PieChart-module_legendValue__h2WS2","tooltip":"PieChart-module_tooltip__140RU"};
+var styles$7 = {"container":"PieChart-module_container__tXjbe","title":"PieChart-module_title__61o0R","chartContainer":"PieChart-module_chartContainer__uLmOz","chart":"PieChart-module_chart__3nqON","legend":"PieChart-module_legend__rAWgh","legendItem":"PieChart-module_legendItem__Nb031","legendColor":"PieChart-module_legendColor__fLuv9","legendLabel":"PieChart-module_legendLabel__xbjBr","legendValue":"PieChart-module_legendValue__h2WS2","tooltip":"PieChart-module_tooltip__140RU"};
 
 const DEFAULT_COLORS = [
     '#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
@@ -5975,7 +6051,7 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
             .innerRadius(radius * 0.7)
             .outerRadius(radius * 0.7);
         const tooltip = d3.select('body').append('div')
-            .attr('class', styles$3.tooltip)
+            .attr('class', styles$7.tooltip)
             .style('opacity', 0)
             .style('position', 'absolute');
         const pieData = pie(data);
@@ -5984,13 +6060,25 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
             .data(pieData)
             .enter().append('g')
             .attr('class', 'arc');
-        arcs.append('path')
-            .attr('d', d => arc(d))
+        const sweepDuration = 900;
+        const arcPaths = arcs.append('path')
             .attr('fill', (d, i) => d.data.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length])
             .attr('stroke', 'var(--bg-primary)')
             .attr('stroke-width', 3)
             .style('cursor', 'pointer')
             .style('filter', 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))')
+            // Start collapsed at the slice's startAngle (zero-width slice)
+            .attr('d', d => arc({ ...d, endAngle: d.startAngle }));
+        arcPaths
+            .transition()
+            .delay(d => (d.startAngle / (2 * Math.PI)) * sweepDuration)
+            .duration(d => ((d.endAngle - d.startAngle) / (2 * Math.PI)) * sweepDuration + 200)
+            .ease(d3.easeCubicOut)
+            .attrTween('d', function (d) {
+            const i = d3.interpolate(d.startAngle, d.endAngle);
+            return (t) => arc({ ...d, endAngle: i(t) }) || '';
+        });
+        arcPaths
             .on('mouseover', function (event, d) {
             const hoverArc = d3.arc()
                 .innerRadius(radius * 0.4)
@@ -6062,21 +6150,593 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
             .style('text-shadow', (d, i) => {
             const segmentColor = d.data.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length];
             const textColor = getTextColor(segmentColor);
-            // Use contrasting shadow color
             const shadowColor = textColor === '#ffffff' ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.4)';
             return `0 1px 2px ${shadowColor}`;
         })
             .text(d => {
             const percentage = ((d.data.value / total) * 100);
             return percentage > 8 ? `${percentage.toFixed(0)}%` : '';
-        });
+        })
+            .style('opacity', 0)
+            .transition()
+            .delay(d => (((d.startAngle + d.endAngle) / 2) / (2 * Math.PI)) * sweepDuration + 250)
+            .duration(300)
+            .style('opacity', 1);
         return () => {
             tooltip.remove();
         };
     }, [data, width, height, radius, centerLabel, unit]);
-    return (jsxs("div", { className: styles$3.container, children: [jsx("h3", { className: styles$3.title, children: title }), jsxs("div", { className: styles$3.chartContainer, children: [jsx("svg", { ref: svgRef, width: width, height: height, className: styles$3.chart }), showLegend && (jsx("div", { className: styles$3.legend, children: data.map((item, index) => (jsxs("div", { className: styles$3.legendItem, children: [jsx("span", { className: styles$3.legendColor, style: {
+    return (jsxs("div", { className: styles$7.container, children: [jsx("h3", { className: styles$7.title, children: title }), jsxs("div", { className: styles$7.chartContainer, children: [jsx("svg", { ref: svgRef, width: width, height: height, className: styles$7.chart }), showLegend && (jsx("div", { className: styles$7.legend, children: data.map((item, index) => (jsxs("div", { className: styles$7.legendItem, children: [jsx("span", { className: styles$7.legendColor, style: {
                                         backgroundColor: item.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length]
-                                    } }), jsx("span", { className: styles$3.legendLabel, children: item.name }), jsx("span", { className: styles$3.legendValue, children: item.value.toLocaleString() })] }, item.name))) }))] })] }));
+                                    } }), jsx("span", { className: styles$7.legendLabel, children: item.name }), jsx("span", { className: styles$7.legendValue, children: item.value.toLocaleString() })] }, item.name))) }))] })] }));
+};
+
+var styles$6 = {"container":"ProgressRings-module_container__7AGya","grid":"ProgressRings-module_grid__aJB-2","ring":"ProgressRings-module_ring__Z2F6p","svg":"ProgressRings-module_svg__Aelkb","center":"ProgressRings-module_center__BIg-q","emoji":"ProgressRings-module_emoji__jA4Yz","pct":"ProgressRings-module_pct__9t8iC","over":"ProgressRings-module_over__0RLdn","label":"ProgressRings-module_label__2Ih08","amounts":"ProgressRings-module_amounts__85r8C","budget":"ProgressRings-module_budget__9xHyq","empty":"ProgressRings-module_empty__eZg6j","tooltip":"ProgressRings-module_tooltip__ApZHH","visible":"ProgressRings-module_visible__2ygIq","tipLabel":"ProgressRings-module_tipLabel__1LHAW","tipRow":"ProgressRings-module_tipRow__0VfOc"};
+
+const DEFAULT_FORMAT = (n) => n.toLocaleString();
+const DEFAULT_OVER = (over, fmt) => `Over by ${fmt(over)}`;
+const DEFAULT_UNDER = (left, fmt) => `${fmt(left)} left`;
+const ProgressRings = ({ rings, formatValue = DEFAULT_FORMAT, ringSize = 120, stroke = 12, emptyMessage = 'No data to display', overLabel = DEFAULT_OVER, underLabel = DEFAULT_UNDER, }) => {
+    const containerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const showTip = useCallback((event, html) => {
+        const tip = tooltipRef.current;
+        const ctn = containerRef.current;
+        if (!tip || !ctn)
+            return;
+        const rect = ctn.getBoundingClientRect();
+        tip.style.left = `${event.clientX - rect.left + 12}px`;
+        tip.style.top = `${event.clientY - rect.top - 10}px`;
+        tip.innerHTML = html;
+        tip.classList.add(styles$6.visible);
+    }, []);
+    const hideTip = useCallback(() => {
+        tooltipRef.current?.classList.remove(styles$6.visible);
+    }, []);
+    if (rings.length === 0) {
+        return jsx("div", { className: styles$6.empty, children: emptyMessage });
+    }
+    const radius = (ringSize - stroke) / 2;
+    const circumference = 2 * Math.PI * radius;
+    return (jsxs("div", { className: styles$6.container, ref: containerRef, children: [jsx("div", { className: styles$6.grid, children: rings.map((r, idx) => {
+                    const ratio = r.target > 0 ? r.value / r.target : 0;
+                    const clamped = Math.min(1, ratio);
+                    const finalOffset = circumference * (1 - clamped);
+                    const pct = Math.round(ratio * 100);
+                    const over = ratio > 1;
+                    const ringColor = over ? 'var(--color-error)' : (r.color || 'var(--color-primary)');
+                    return (jsx(Ring, { label: r.label, emoji: r.emoji, ringSize: ringSize, stroke: stroke, radius: radius, circumference: circumference, finalOffset: finalOffset, ringColor: ringColor, value: r.value, target: r.target, pct: pct, over: over, formatValue: formatValue, overLabel: overLabel, underLabel: underLabel, delay: idx * 80, onTip: showTip, onTipLeave: hideTip }, r.label));
+                }) }), jsx("div", { ref: tooltipRef, className: styles$6.tooltip })] }));
+};
+const Ring = ({ label, emoji, ringSize, stroke, radius, circumference, finalOffset, ringColor, value, target, pct, over, formatValue, overLabel, underLabel, delay, onTip, onTipLeave, }) => {
+    const circleRef = useRef(null);
+    useEffect(() => {
+        const node = circleRef.current;
+        if (!node)
+            return;
+        // Reset to empty then animate to final offset.
+        node.style.transition = 'none';
+        node.style.strokeDashoffset = `${circumference}`;
+        // Force reflow so the transition picks up the new starting state.
+        void node.getBoundingClientRect();
+        node.style.transition = `stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms`;
+        node.style.strokeDashoffset = `${finalOffset}`;
+    }, [circumference, finalOffset, delay]);
+    return (jsxs("div", { className: styles$6.ring, onMouseMove: (e) => onTip(e, `<div class="${styles$6.tipLabel}">${emoji ?? ''} ${label}</div>` +
+            `<div class="${styles$6.tipRow}">${formatValue(value)} of ${formatValue(target)}</div>` +
+            `<div class="${styles$6.tipRow}" style="color:${over ? 'var(--color-error)' : 'var(--color-success)'}">${over ? overLabel(value - target, formatValue) : underLabel(target - value, formatValue)}</div>`), onMouseLeave: onTipLeave, children: [jsxs("svg", { width: ringSize, height: ringSize, className: styles$6.svg, children: [jsx("circle", { cx: ringSize / 2, cy: ringSize / 2, r: radius, fill: "none", stroke: "var(--color-border)", strokeWidth: stroke, strokeOpacity: "0.35" }), jsx("circle", { ref: circleRef, cx: ringSize / 2, cy: ringSize / 2, r: radius, fill: "none", stroke: ringColor, strokeWidth: stroke, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: circumference, transform: `rotate(-90 ${ringSize / 2} ${ringSize / 2})` })] }), jsxs("div", { className: styles$6.center, children: [emoji && jsx("div", { className: styles$6.emoji, children: emoji }), jsxs("div", { className: `${styles$6.pct} ${over ? styles$6.over : ''}`, children: [pct, "%"] })] }), jsx("div", { className: styles$6.label, children: label }), jsxs("div", { className: styles$6.amounts, children: [jsx("span", { className: over ? styles$6.over : '', children: formatValue(value) }), jsxs("span", { className: styles$6.budget, children: [" / ", formatValue(target)] })] })] }));
+};
+
+var styles$5 = {"container":"RadialDayChart-module_container__2QM22","clockWrap":"RadialDayChart-module_clockWrap__dThw1","tooltip":"RadialDayChart-module_tooltip__NhrPN","visible":"RadialDayChart-module_visible__0wHWj","tooltipLabel":"RadialDayChart-module_tooltipLabel__--6Gk","tooltipRow":"RadialDayChart-module_tooltipRow__uPfvi"};
+
+const formatHHMM = (h) => {
+    const hh = Math.floor(h);
+    const mm = Math.floor((h - hh) * 60);
+    return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`;
+};
+const formatDuration = (hours) => {
+    const mins = Math.round(hours * 60);
+    if (mins < 60)
+        return `${mins}m`;
+    return `${Math.floor(mins / 60)}h ${mins % 60}m`;
+};
+const RadialDayChart = ({ rings, showNowHand = true, centerTopLabel, centerMainLabel, size: fixedSize, minSize = 280, maxSize = 560, }) => {
+    const containerRef = useRef(null);
+    const svgRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const [autoSize, setAutoSize] = useState(380);
+    const size = fixedSize ?? autoSize;
+    useEffect(() => {
+        if (fixedSize)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { width } = entry.contentRect;
+                if (width > 0)
+                    setAutoSize(Math.max(minSize, Math.min(maxSize, width)));
+            }
+        });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [fixedSize, minSize, maxSize]);
+    const showTooltip = useCallback((event, content) => {
+        const tooltip = tooltipRef.current;
+        const container = containerRef.current;
+        if (!tooltip || !container)
+            return;
+        const rect = container.getBoundingClientRect();
+        tooltip.style.left = `${event.clientX - rect.left + 12}px`;
+        tooltip.style.top = `${event.clientY - rect.top - 10}px`;
+        tooltip.innerHTML = content;
+        tooltip.classList.add(styles$5.visible);
+    }, []);
+    const hideTooltip = useCallback(() => {
+        tooltipRef.current?.classList.remove(styles$5.visible);
+    }, []);
+    useEffect(() => {
+        if (!svgRef.current || rings.length === 0)
+            return;
+        const svg = d3.select(svgRef.current);
+        svg.selectAll('*').remove();
+        const width = size;
+        const height = size;
+        const cx = width / 2;
+        const cy = height / 2;
+        const outerR = size / 2 - 28;
+        const g = svg
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${cx},${cy})`);
+        const computedStyle = getComputedStyle(document.documentElement);
+        const textColor = computedStyle.getPropertyValue('--color-text-secondary').trim() || '#888';
+        const mutedText = computedStyle.getPropertyValue('--color-text-muted').trim() || '#aaa';
+        const borderColor = computedStyle.getPropertyValue('--color-border').trim() || 'rgba(128,128,128,0.2)';
+        const hourToAngle = (h) => (h / 24) * Math.PI * 2;
+        g.append('circle')
+            .attr('r', outerR + 8)
+            .attr('fill', 'none')
+            .attr('stroke', borderColor)
+            .attr('stroke-width', 1);
+        const centerR = 46;
+        const ringGap = 2;
+        const ringCount = rings.length;
+        const ringWidth = (outerR - centerR - ringGap * (ringCount - 1)) / ringCount;
+        rings.forEach((ring, ringIdx) => {
+            const ringOuter = outerR - ringIdx * (ringWidth + ringGap);
+            const ringInner = ringOuter - ringWidth;
+            const opacity = ring.opacity !== undefined
+                ? ring.opacity
+                : ringIdx === 0
+                    ? 1
+                    : Math.max(0.1, 0.85 - (ringIdx / ringCount) * 0.85);
+            const arcGen = d3
+                .arc()
+                .innerRadius(ringInner)
+                .outerRadius(ringOuter)
+                .startAngle((d) => hourToAngle(d.startHour))
+                .endAngle((d) => hourToAngle(d.endHour))
+                .cornerRadius(2);
+            const arcSel = g
+                .selectAll(`.ring-${ringIdx}`)
+                .data(ring.arcs)
+                .join('path')
+                .attr('class', `ring-${ringIdx}`)
+                .attr('fill', (d) => d.color)
+                .attr('opacity', 0)
+                .attr('stroke', 'var(--color-background)')
+                .attr('stroke-width', 0.6)
+                .style('cursor', 'pointer')
+                .on('mousemove', function (event, d) {
+                const dur = formatDuration(d.endHour - d.startHour);
+                const labelLine = `${d.emoji ?? ''} ${d.label ?? ''}${d.description ? ` — ${d.description}` : ''}`.trim();
+                showTooltip(event, `<div class="${styles$5.tooltipLabel}">${labelLine || '·'}</div>` +
+                    `<div class="${styles$5.tooltipRow}">${ring.dayLabel} · ${formatHHMM(d.startHour)} → ${formatHHMM(d.endHour)}</div>` +
+                    `<div class="${styles$5.tooltipRow}">${dur}${d.isActive ? ' · running' : ''}</div>`);
+            })
+                .on('mouseleave', hideTooltip);
+            // Sweep-in: arcs grow from startAngle to their actual endAngle, staggered by start time.
+            arcSel
+                .attr('d', (d) => arcGen({ ...d, endHour: d.startHour }))
+                .transition()
+                .delay((d) => (d.startHour / 24) * 600 + ringIdx * 80)
+                .duration(550)
+                .ease(d3.easeCubicOut)
+                .attr('opacity', opacity)
+                .attrTween('d', function (d) {
+                const i = d3.interpolate(d.startHour, d.endHour);
+                return (t) => arcGen({ ...d, endHour: i(t) }) || '';
+            });
+        });
+        for (let h = 0; h < 24; h++) {
+            const angle = hourToAngle(h) - Math.PI / 2;
+            const isMajor = h % 3 === 0;
+            const inner = outerR + 2;
+            const outer = outerR + (isMajor ? 9 : 5);
+            g.append('line')
+                .attr('x1', Math.cos(angle) * inner)
+                .attr('y1', Math.sin(angle) * inner)
+                .attr('x2', Math.cos(angle) * outer)
+                .attr('y2', Math.sin(angle) * outer)
+                .attr('stroke', isMajor ? textColor : borderColor)
+                .attr('stroke-width', isMajor ? 2 : 1);
+            if (isMajor) {
+                const labelR = outerR + 22;
+                g.append('text')
+                    .attr('x', Math.cos(angle) * labelR)
+                    .attr('y', Math.sin(angle) * labelR)
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'middle')
+                    .attr('fill', mutedText)
+                    .attr('font-size', '11px')
+                    .attr('font-weight', 600)
+                    .text(String(h).padStart(2, '0'));
+            }
+        }
+        g.append('circle')
+            .attr('r', centerR - 2)
+            .attr('fill', 'var(--color-background-secondary)')
+            .attr('stroke', borderColor)
+            .attr('stroke-width', 1);
+        if (centerTopLabel) {
+            g.append('text')
+                .attr('text-anchor', 'middle')
+                .attr('y', centerMainLabel ? -6 : 4)
+                .attr('fill', mutedText)
+                .attr('font-size', '10px')
+                .attr('letter-spacing', '1.5px')
+                .text(centerTopLabel);
+        }
+        if (centerMainLabel) {
+            g.append('text')
+                .attr('text-anchor', 'middle')
+                .attr('y', centerTopLabel ? 14 : 4)
+                .attr('fill', 'var(--color-text)')
+                .attr('font-size', '18px')
+                .attr('font-weight', 700)
+                .text(centerMainLabel);
+        }
+        if (showNowHand) {
+            const now = new Date();
+            const nowHour = now.getHours() + now.getMinutes() / 60;
+            const nowAngle = hourToAngle(nowHour) - Math.PI / 2;
+            const handTipR = outerR + 6;
+            g.append('line')
+                .attr('x1', 0)
+                .attr('y1', 0)
+                .attr('x2', Math.cos(nowAngle) * handTipR)
+                .attr('y2', Math.sin(nowAngle) * handTipR)
+                .attr('stroke', 'var(--color-error)')
+                .attr('stroke-width', 2.5)
+                .attr('stroke-linecap', 'round')
+                .style('opacity', 0)
+                .transition()
+                .delay(800)
+                .duration(300)
+                .style('opacity', 1);
+            g.append('circle')
+                .attr('cx', Math.cos(nowAngle) * handTipR)
+                .attr('cy', Math.sin(nowAngle) * handTipR)
+                .attr('r', 4)
+                .attr('fill', 'var(--color-error)')
+                .style('opacity', 0)
+                .transition()
+                .delay(800)
+                .duration(300)
+                .style('opacity', 1);
+            g.append('circle')
+                .attr('r', 5)
+                .attr('fill', 'var(--color-error)')
+                .attr('stroke', 'var(--color-background)')
+                .attr('stroke-width', 1.5)
+                .style('opacity', 0)
+                .transition()
+                .delay(800)
+                .duration(300)
+                .style('opacity', 1);
+        }
+    }, [size, rings, centerTopLabel, centerMainLabel, showNowHand, showTooltip, hideTooltip]);
+    return (jsxs("div", { className: styles$5.container, ref: containerRef, children: [jsx("div", { className: styles$5.clockWrap, children: jsx("svg", { ref: svgRef }) }), jsx("div", { ref: tooltipRef, className: styles$5.tooltip })] }));
+};
+
+var styles$4 = {"container":"ChordDiagram-module_container__lf6an","svgWrap":"ChordDiagram-module_svgWrap__T4Gss","tooltip":"ChordDiagram-module_tooltip__86Z2U","visible":"ChordDiagram-module_visible__a-8LE","tipLabel":"ChordDiagram-module_tipLabel__m92kN","tipRow":"ChordDiagram-module_tipRow__nFuWs"};
+
+const DEFAULT_PALETTE = [
+    '#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
+    '#f59e0b', '#ef4444', '#ec4899', '#84cc16',
+    '#f97316', '#3b82f6', '#14b8a6', '#a855f7',
+];
+const ChordDiagram = ({ labels, matrix, colors, emojis, edgeUnit = 'connections', size: fixedSize, minSize = 320, maxSize = 820, }) => {
+    const containerRef = useRef(null);
+    const svgRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const [autoSize, setAutoSize] = useState(480);
+    const size = fixedSize ?? autoSize;
+    useEffect(() => {
+        if (fixedSize)
+            return;
+        const c = containerRef.current;
+        if (!c)
+            return;
+        const obs = new ResizeObserver((entries) => {
+            for (const e of entries) {
+                const w = e.contentRect.width;
+                if (w > 0)
+                    setAutoSize(Math.max(minSize, Math.min(maxSize, w)));
+            }
+        });
+        obs.observe(c);
+        return () => obs.disconnect();
+    }, [fixedSize, minSize, maxSize]);
+    const showTip = useCallback((event, html) => {
+        const tip = tooltipRef.current;
+        const ctn = containerRef.current;
+        if (!tip || !ctn)
+            return;
+        const rect = ctn.getBoundingClientRect();
+        tip.style.left = `${event.clientX - rect.left + 12}px`;
+        tip.style.top = `${event.clientY - rect.top - 10}px`;
+        tip.innerHTML = html;
+        tip.classList.add(styles$4.visible);
+    }, []);
+    const hideTip = useCallback(() => {
+        tooltipRef.current?.classList.remove(styles$4.visible);
+    }, []);
+    useEffect(() => {
+        if (!svgRef.current || labels.length === 0 || matrix.length === 0)
+            return;
+        const svg = d3.select(svgRef.current);
+        svg.selectAll('*').remove();
+        const inner = size / 2 - 50;
+        const outer = inner + 16;
+        const g = svg
+            .attr('width', size)
+            .attr('height', size)
+            .append('g')
+            .attr('transform', `translate(${size / 2}, ${size / 2})`);
+        const chord = d3.chord().padAngle(0.04).sortSubgroups(d3.descending);
+        const chords = chord(matrix);
+        const arc = d3.arc().innerRadius(inner).outerRadius(outer);
+        const ribbon = d3.ribbon().radius(inner);
+        const colorOf = (i) => colors?.[i] || DEFAULT_PALETTE[i % DEFAULT_PALETTE.length];
+        const emojiOf = (i) => emojis?.[i] ?? '•';
+        const groupSel = g.append('g')
+            .selectAll('path')
+            .data(chords.groups)
+            .join('path')
+            .attr('d', arc)
+            .attr('fill', (d) => colorOf(d.index))
+            .attr('stroke', 'var(--color-background)')
+            .attr('stroke-width', 1)
+            .style('cursor', 'pointer')
+            .style('opacity', 0)
+            .on('mousemove', function (event, d) {
+            const total = d.value;
+            showTip(event, `<div class="${styles$4.tipLabel}">${emojiOf(d.index)} ${labels[d.index]}</div>` +
+                `<div class="${styles$4.tipRow}">${total} ${edgeUnit}</div>`);
+        })
+            .on('mouseleave', hideTip);
+        groupSel.transition()
+            .delay((_, i) => i * 40)
+            .duration(420)
+            .ease(d3.easeCubicOut)
+            .style('opacity', 1);
+        const ribbonSel = g.append('g')
+            .selectAll('path')
+            .data(chords)
+            .join('path')
+            .attr('d', ribbon)
+            .attr('fill', (d) => colorOf(d.source.index))
+            .attr('opacity', 0)
+            .attr('stroke', 'var(--color-background)')
+            .attr('stroke-width', 0.4)
+            .style('cursor', 'pointer')
+            .on('mousemove', function (event, d) {
+            const aToB = matrix[d.source.index]?.[d.target.index] ?? 0;
+            const bToA = matrix[d.target.index]?.[d.source.index] ?? 0;
+            showTip(event, `<div class="${styles$4.tipLabel}">${emojiOf(d.source.index)} ${labels[d.source.index]} ↔ ${emojiOf(d.target.index)} ${labels[d.target.index]}</div>` +
+                `<div class="${styles$4.tipRow}">${labels[d.source.index]} → ${labels[d.target.index]}: ${aToB}</div>` +
+                `<div class="${styles$4.tipRow}">${labels[d.target.index]} → ${labels[d.source.index]}: ${bToA}</div>`);
+        })
+            .on('mouseleave', hideTip);
+        ribbonSel.transition()
+            .delay(labels.length * 40 + 120)
+            .duration(500)
+            .ease(d3.easeCubicOut)
+            .attr('opacity', 0.55);
+        const labelSel = g.append('g')
+            .selectAll('text')
+            .data(chords.groups)
+            .join('text')
+            .attr('transform', (d) => {
+            const angle = (d.startAngle + d.endAngle) / 2 - Math.PI / 2;
+            const r = outer + 18;
+            return `translate(${Math.cos(angle) * r}, ${Math.sin(angle) * r})`;
+        })
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .attr('font-size', '16px')
+            .style('pointer-events', 'none')
+            .style('opacity', 0)
+            .text((d) => emojiOf(d.index));
+        labelSel.transition()
+            .delay((_, i) => i * 40 + 200)
+            .duration(300)
+            .style('opacity', 1);
+    }, [matrix, labels, size, colors, emojis, edgeUnit, showTip, hideTip]);
+    return (jsxs("div", { className: styles$4.container, ref: containerRef, children: [jsx("div", { className: styles$4.svgWrap, children: jsx("svg", { ref: svgRef }) }), jsx("div", { ref: tooltipRef, className: styles$4.tooltip })] }));
+};
+
+var styles$3 = {"container":"PolarHeatmap-module_container__vkfiq","svgWrap":"PolarHeatmap-module_svgWrap__xrKnU","tooltip":"PolarHeatmap-module_tooltip__uAYch","visible":"PolarHeatmap-module_visible__myNKg","tipLabel":"PolarHeatmap-module_tipLabel__yyjWw","tipRow":"PolarHeatmap-module_tipRow__CQbQi"};
+
+const DEFAULT_ACCENT = '#c8a14a';
+const PolarHeatmap = ({ cells, days, accentColor = DEFAULT_ACCENT, centerTopLabel, centerMainLabel, size: fixedSize, minSize = 320, maxSize = 560, }) => {
+    const containerRef = useRef(null);
+    const svgRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const [autoSize, setAutoSize] = useState(560);
+    const size = fixedSize ?? autoSize;
+    useEffect(() => {
+        if (fixedSize)
+            return;
+        const c = containerRef.current;
+        if (!c)
+            return;
+        const obs = new ResizeObserver((entries) => {
+            for (const e of entries) {
+                const w = e.contentRect.width;
+                if (w > 0)
+                    setAutoSize(Math.max(minSize, Math.min(maxSize, w)));
+            }
+        });
+        obs.observe(c);
+        return () => obs.disconnect();
+    }, [fixedSize, minSize, maxSize]);
+    const showTip = useCallback((event, html) => {
+        const tip = tooltipRef.current;
+        const ctn = containerRef.current;
+        if (!tip || !ctn)
+            return;
+        const rect = ctn.getBoundingClientRect();
+        tip.style.left = `${event.clientX - rect.left + 12}px`;
+        tip.style.top = `${event.clientY - rect.top - 10}px`;
+        tip.innerHTML = html;
+        tip.classList.add(styles$3.visible);
+    }, []);
+    const hideTip = useCallback(() => {
+        tooltipRef.current?.classList.remove(styles$3.visible);
+    }, []);
+    useEffect(() => {
+        if (!svgRef.current || cells.length === 0 || days <= 0)
+            return;
+        const svg = d3.select(svgRef.current);
+        svg.selectAll('*').remove();
+        const outerR = size / 2 - 32;
+        const innerR = 64;
+        const ringGap = 4;
+        const ringWidth = (outerR - innerR - ringGap * (days - 1)) / days;
+        const defs = svg.append('defs');
+        const gradId = `polar-heatmap-glow-${Math.random().toString(36).slice(2, 9)}`;
+        const glow = defs
+            .append('radialGradient')
+            .attr('id', gradId)
+            .attr('cx', '50%')
+            .attr('cy', '50%')
+            .attr('r', '50%');
+        glow.append('stop').attr('offset', '0%').attr('stop-color', accentColor).attr('stop-opacity', 0.18);
+        glow.append('stop').attr('offset', '60%').attr('stop-color', accentColor).attr('stop-opacity', 0.05);
+        glow.append('stop').attr('offset', '100%').attr('stop-color', accentColor).attr('stop-opacity', 0);
+        const g = svg
+            .attr('width', size)
+            .attr('height', size)
+            .append('g')
+            .attr('transform', `translate(${size / 2}, ${size / 2})`);
+        const hourAngle = (h) => (h / 24) * Math.PI * 2;
+        g.append('circle')
+            .attr('r', outerR + 44)
+            .attr('fill', `url(#${gradId})`);
+        for (let h = 0; h < 24; h++) {
+            const angle = hourAngle(h) - Math.PI / 2;
+            g.append('line')
+                .attr('x1', Math.cos(angle) * innerR)
+                .attr('y1', Math.sin(angle) * innerR)
+                .attr('x2', Math.cos(angle) * (outerR + 6))
+                .attr('y2', Math.sin(angle) * (outerR + 6))
+                .attr('stroke', accentColor)
+                .attr('stroke-width', h % 3 === 0 ? 0.7 : 0.35)
+                .attr('opacity', h % 3 === 0 ? 0.55 : 0.25);
+        }
+        const arcGen = d3
+            .arc()
+            .innerRadius((d) => outerR - d.dayOffset * (ringWidth + ringGap) - ringWidth)
+            .outerRadius((d) => outerR - d.dayOffset * (ringWidth + ringGap))
+            .startAngle((d) => hourAngle(d.hour))
+            .endAngle((d) => hourAngle(d.hour + 1))
+            .padAngle(0.014)
+            .cornerRadius(2.5);
+        const visibleCells = cells.filter((c) => c.dayOffset >= 0 && c.dayOffset < days && c.hour >= 0 && c.hour < 24);
+        const cellSel = g.selectAll('path.cell')
+            .data(visibleCells)
+            .join('path')
+            .attr('class', 'cell')
+            .attr('d', arcGen)
+            .attr('fill', (d) => d.color)
+            .attr('opacity', 0)
+            .style('cursor', (d) => (d.label ? 'pointer' : 'default'))
+            .on('mousemove', function (event, d) {
+            if (!d.label)
+                return;
+            const hr = `${String(d.hour).padStart(2, '0')}:00`;
+            const dayLabel = d.dayLabel ?? (d.dayOffset === 0 ? 'Today' : `${d.dayOffset} days ago`);
+            showTip(event, `<div class="${styles$3.tipLabel}">${d.emoji ?? ''} ${d.label}</div>` +
+                `<div class="${styles$3.tipRow}">${dayLabel} · ${hr}</div>`);
+        })
+            .on('mouseleave', hideTip);
+        cellSel.transition()
+            .delay((d) => (d.hour / 24) * 600 + d.dayOffset * 30)
+            .duration(380)
+            .ease(d3.easeCubicOut)
+            .attr('opacity', (d) => (d.label ? 0.88 : 0));
+        g.append('circle')
+            .attr('r', outerR + 16)
+            .attr('fill', 'none')
+            .attr('stroke', accentColor)
+            .attr('stroke-width', 0.4)
+            .attr('opacity', 0.4);
+        for (let i = 0; i < 48; i++) {
+            const angle = (i / 48) * Math.PI * 2 - Math.PI / 2;
+            g.append('circle')
+                .attr('cx', Math.cos(angle) * (outerR + 12))
+                .attr('cy', Math.sin(angle) * (outerR + 12))
+                .attr('r', i % 2 === 0 ? 1.4 : 0.6)
+                .attr('fill', accentColor)
+                .attr('opacity', i % 2 === 0 ? 0.75 : 0.4);
+        }
+        for (let h = 0; h < 24; h += 3) {
+            const angle = hourAngle(h) - Math.PI / 2;
+            const labelR = outerR + 28;
+            g.append('text')
+                .attr('x', Math.cos(angle) * labelR)
+                .attr('y', Math.sin(angle) * labelR)
+                .attr('text-anchor', 'middle')
+                .attr('dominant-baseline', 'middle')
+                .attr('fill', accentColor)
+                .attr('font-size', '11px')
+                .attr('font-weight', 600)
+                .attr('letter-spacing', '1px')
+                .attr('opacity', 0.85)
+                .text(String(h).padStart(2, '0'));
+        }
+        g.append('circle')
+            .attr('r', innerR - 4)
+            .attr('fill', 'var(--color-background)');
+        g.append('circle').attr('r', 3).attr('fill', accentColor).attr('opacity', 0.9);
+        if (centerTopLabel) {
+            g.append('text')
+                .attr('text-anchor', 'middle')
+                .attr('y', innerR - 33)
+                .attr('fill', accentColor)
+                .attr('font-size', '9px')
+                .attr('letter-spacing', '3px')
+                .attr('opacity', 0.85)
+                .text(centerTopLabel);
+        }
+        if (centerMainLabel) {
+            g.append('text')
+                .attr('text-anchor', 'middle')
+                .attr('y', innerR + 2)
+                .attr('fill', accentColor)
+                .attr('font-size', '14px')
+                .attr('font-weight', 700)
+                .attr('letter-spacing', '2px')
+                .attr('opacity', 0.95)
+                .text(centerMainLabel);
+        }
+    }, [cells, days, size, accentColor, centerTopLabel, centerMainLabel, showTip, hideTip]);
+    return (jsxs("div", { className: styles$3.container, ref: containerRef, children: [jsx("div", { className: styles$3.svgWrap, children: jsx("svg", { ref: svgRef }) }), jsx("div", { ref: tooltipRef, className: styles$3.tooltip })] }));
 };
 
 var styles$2 = {"slideshow":"ImageSlideshow-module_slideshow__Ku43h","fullscreen":"ImageSlideshow-module_fullscreen__YhVju","empty":"ImageSlideshow-module_empty__XaCpW","emptyState":"ImageSlideshow-module_emptyState__caEwx","mainContainer":"ImageSlideshow-module_mainContainer__E9aZ3","slide":"ImageSlideshow-module_slide__Wt0U-","image":"ImageSlideshow-module_image__aLHJX","imageLoader":"ImageSlideshow-module_imageLoader__5oAf5","spinner":"ImageSlideshow-module_spinner__fmIFu","control":"ImageSlideshow-module_control__WF7Lz","controlPrev":"ImageSlideshow-module_controlPrev__PCSgw","controlNext":"ImageSlideshow-module_controlNext__RMVX2","controlPlay":"ImageSlideshow-module_controlPlay__183mX","topControls":"ImageSlideshow-module_topControls__AIEJT","controlAction":"ImageSlideshow-module_controlAction__NCD7t","caption":"ImageSlideshow-module_caption__9a3JW","captionTitle":"ImageSlideshow-module_captionTitle__w5Izi","captionText":"ImageSlideshow-module_captionText__FvPyQ","imageMetadata":"ImageSlideshow-module_imageMetadata__5RF2N","metadataItem":"ImageSlideshow-module_metadataItem__6MJDP","indicators":"ImageSlideshow-module_indicators__2cH2G","hasThumbnails":"ImageSlideshow-module_hasThumbnails__0B1N-","indicator":"ImageSlideshow-module_indicator__4zGqm","indicatorActive":"ImageSlideshow-module_indicatorActive__oLeK2","thumbnails":"ImageSlideshow-module_thumbnails__zwiUz","thumbnail":"ImageSlideshow-module_thumbnail__3YyIx","thumbnailActive":"ImageSlideshow-module_thumbnailActive__aADJh","thumbnailImage":"ImageSlideshow-module_thumbnailImage__Ft7Iq"};
@@ -6672,5 +7332,5 @@ const ConfirmationModal = ({ isOpen, onClose, onConfirm, title, message, confirm
     return (jsx(AnimatePresence, { children: isOpen && (jsxs(Fragment, { children: [jsx(motion.div, { className: styles.overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: !isLoading ? onClose : undefined }), jsx("div", { className: styles.positioner, children: jsxs(motion.div, { className: styles.modal, initial: { opacity: 0, scale: 0.9, y: 20 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.9, y: 20 }, transition: { type: 'spring', stiffness: 300, damping: 30 }, children: [jsxs("div", { className: `${styles.header} ${styles[variant]}`, children: [jsx("h2", { className: styles.title, children: title }), !isLoading && (jsx("button", { className: styles.closeButton, onClick: onClose, type: "button", "aria-label": "Close", children: "\u2715" }))] }), jsx("div", { className: styles.content, children: jsx("p", { className: styles.message, children: message }) }), jsxs("div", { className: styles.footer, children: [jsx(Button, { type: "button", variant: "ghost", onClick: onClose, disabled: isLoading, children: cancelText }), jsx(Button, { type: "button", variant: variant === 'danger' ? 'danger' : 'primary', onClick: handleConfirm, disabled: isLoading, loading: isLoading, children: confirmText })] })] }) })] })) }));
 };
 
-export { ArrayInput, BooleansHeatmap, Breadcrumb, Button, Calendar, Card, Checkbox, ConfirmationModal, DateInput, DecryptedText, EditFAB, EmptyState, HabitTimeOfDayChart, ImageSlideshow, LiquidButton, LoadingSpinner, Modal, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, RecurrencePicker, SearchBar, SearchableDropdown, SelectInput, SleepChart, Slider, StreamConsole, SunburstChart, Table, Tabs, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, ToastContainer, Toggle, ToggleButton, soundManager, useComponentSound, useSound, useTheme, useThemeSafe };
+export { ArrayInput, BooleansHeatmap, Breadcrumb, Button, Calendar, Card, Checkbox, ChordDiagram, ConfirmationModal, DateInput, DecryptedText, EditFAB, EmptyState, HabitTimeOfDayChart, ImageSlideshow, LiquidButton, LoadingSpinner, Modal, MoodChart, Navbar, NumberStepper, PieChart, PolarHeatmap, ProgressRings, QuantifiableHabitsChart, RadialDayChart, RecurrencePicker, SearchBar, SearchableDropdown, SelectInput, SleepChart, Slider, StreamConsole, SunburstChart, Table, Tabs, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, ToastContainer, Toggle, ToggleButton, soundManager, useComponentSound, useSound, useTheme, useThemeSafe };
 //# sourceMappingURL=index.esm.js.map