@stfrigerio/sito-template 0.1.35 → 0.1.37

package/dist/index.js

@@ -1,57 +1,32 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var framerMotion = require('framer-motion');
+var React = require('react');
+var reactDom = require('react-dom');
 var lucideReact = require('lucide-react');
 var d3 = require('d3');
 
 function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
 }
 
 var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
 
-const ThemeContext$1 = React.createContext(undefined);
-const useTheme$1 = () => {
-    const context = React.useContext(ThemeContext$1);
-    if (!context) {
-        throw new Error('useTheme must be used within a ThemeProvider');
-    }
-    return context;
-};
-const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
-    const [theme, setTheme] = React.useState(defaultTheme);
-    React.useEffect(() => {
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme) {
-            setTheme(savedTheme);
-        }
-    }, []);
-    React.useEffect(() => {
-        document.documentElement.setAttribute('data-theme', theme);
-        localStorage.setItem('theme', theme);
-    }, [theme]);
-    const toggleTheme = () => {
-        setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
-    };
-    return (jsxRuntime.jsx(ThemeContext$1.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
-};
-
-var styles$s = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
+var styles$z = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
 
 const SOUND_PACKS = {
     digital: {
@@ -616,11 +591,11 @@ function useComponentSound(config, options) {
 const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, soundConfig, onClick, onMouseEnter, onFocus, ...rest }) => {
     const { handlers } = useComponentSound(soundConfig);
     const buttonClasses = [
-        styles$s.button,
-        styles$s[variant],
-        styles$s[size],
-        fullWidth && styles$s.fullWidth,
-        loading && styles$s.loading,
+        styles$z.button,
+        styles$z[variant],
+        styles$z[size],
+        fullWidth && styles$z.fullWidth,
+        loading && styles$z.loading,
         className
     ].filter(Boolean).join(' ');
     const handleClick = (e) => {
@@ -631,10 +606,10 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
         handlers.onMouseEnter?.();
         onMouseEnter?.(e);
     };
-    return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$s.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$s.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$s.iconRight, children: iconRight })] }));
+    return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$z.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$z.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$z.iconRight, children: iconRight })] }));
 };
 
-var styles$r = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","headerContent":"Card-module_headerContent__W7-jD","expandButton":"Card-module_expandButton__I7f49","expandIcon":"Card-module_expandIcon__Lu-OY","expandableContent":"Card-module_expandableContent__BFgO5","expandable":"Card-module_expandable__GMXzo","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
+var styles$y = {"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
@@ -699,28 +674,132 @@ const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padd
         onExpandChange?.(newExpanded);
     };
     const cardClasses = [
-        styles$r.card,
-        styles$r[variant],
-        hoverable && styles$r.hoverable,
-        clickable && styles$r.clickable,
-        !padding && styles$r.noPadding,
-        expandable && styles$r.expandable,
+        styles$y.card,
+        styles$y[variant],
+        hoverable && styles$y.hoverable,
+        clickable && styles$y.clickable,
+        !padding && styles$y.noPadding,
+        expandable && styles$y.expandable,
         className
     ].filter(Boolean).join(' ');
     const renderHeader = () => {
         if (header) {
-            return (jsxRuntime.jsxs("div", { className: styles$r.header, children: [jsxRuntime.jsx("div", { className: styles$r.headerContent, children: header }), expandable && (jsxRuntime.jsx("button", { className: styles$r.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$r.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
+            return (jsxRuntime.jsxs("div", { className: styles$y.header, children: [jsxRuntime.jsx("div", { className: styles$y.headerContent, children: header }), expandable && (jsxRuntime.jsx("button", { className: styles$y.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$y.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
         }
         if (title || subtitle) {
-            return (jsxRuntime.jsxs("div", { className: styles$r.header, children: [jsxRuntime.jsxs("div", { className: styles$r.headerContent, children: [title && jsxRuntime.jsx("h3", { className: styles$r.title, children: title }), subtitle && jsxRuntime.jsx("p", { className: styles$r.subtitle, children: subtitle })] }), expandable && (jsxRuntime.jsx("button", { className: styles$r.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$r.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
+            return (jsxRuntime.jsxs("div", { className: styles$y.header, children: [jsxRuntime.jsxs("div", { className: styles$y.headerContent, children: [title && jsxRuntime.jsx("h3", { className: styles$y.title, children: title }), subtitle && jsxRuntime.jsx("p", { className: styles$y.subtitle, children: subtitle })] }), expandable && (jsxRuntime.jsx("button", { className: styles$y.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$y.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
         }
         return null;
     };
-    const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$r.imageContainer, children: jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: styles$r.image }) })), renderHeader(), jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxRuntime.jsxs(framerMotion.motion.div, { initial: expandable ? { height: 0, opacity: 0 } : undefined, animate: expandable ? { height: 'auto', opacity: 1 } : undefined, exit: expandable ? { height: 0, opacity: 0 } : undefined, transition: { duration: 0.3, ease: "easeInOut" }, className: styles$r.expandableContent, children: [children && (jsxRuntime.jsx("div", { className: padding ? styles$r.body : undefined, children: children })), footer && jsxRuntime.jsx("div", { className: styles$r.footer, children: footer })] }, "content")) })] }));
+    const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$y.imageContainer, children: jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: styles$y.image }) })), renderHeader(), jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxRuntime.jsxs(framerMotion.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$y.expandableContent, children: [children && (jsxRuntime.jsx("div", { className: padding ? styles$y.body : undefined, children: children })), footer && jsxRuntime.jsx("div", { className: styles$y.footer, children: footer })] }, "content")) })] }));
     return (jsxRuntime.jsx(framerMotion.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$q = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
+var styles$x = {"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
+ *
+ * @component
+ * @description
+ * A composable placeholder for empty lists, empty sidebars, and
+ * "nothing to show" panels. Renders an icon, optional title, message,
+ * and optional action CTA in a vertically-centered stack. Pure layout —
+ * no fetching, no state.
+ *
+ * @example
+ * // Minimal: just a message
+ * <EmptyState message="No documents yet." />
+ *
+ * @example
+ * // With an icon
+ * import { FileText } from 'lucide-react';
+ * <EmptyState
+ *   icon={<FileText size={32} />}
+ *   message="Select a document from the sidebar to start editing."
+ * />
+ *
+ * @example
+ * // Full: icon + title + message + action
+ * <EmptyState
+ *   icon={<FolderKanban size={40} />}
+ *   title="No projects"
+ *   message="Create your first project to get started."
+ *   action={<Button onClick={handleCreate}>New project</Button>}
+ * />
+ *
+ * @param {EmptyStateProps} props - The props for the EmptyState component
+ * @returns {JSX.Element} The rendered EmptyState component
+ */
+const EmptyState = ({ icon, title, message, action, size = 'default', }) => {
+    const wrapperClass = [styles$x.wrapper, styles$x[size]].filter(Boolean).join(' ');
+    return (jsxRuntime.jsxs("div", { className: wrapperClass, children: [icon && jsxRuntime.jsx("div", { className: styles$x.icon, children: icon }), title && jsxRuntime.jsx("h3", { className: styles$x.title, children: title }), jsxRuntime.jsx("p", { className: styles$x.message, children: message }), action && jsxRuntime.jsx("div", { className: styles$x.action, children: action })] }));
+};
+
+var styles$w = {"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"};
+
+/**
+ * Modal Component
+ *
+ * @component
+ * @description
+ * An accessible overlay dialog with a backdrop, title header, optional
+ * header actions, and a flexible body. Renders into a React portal on
+ * `document.body`, animates in/out with Framer Motion, closes on Escape
+ * key or backdrop click, and clicks inside the dialog don't propagate
+ * to the backdrop.
+ *
+ * @example
+ * // Basic usage
+ * <Modal open={isOpen} title="Confirm" onClose={() => setIsOpen(false)}>
+ *   <p>Are you sure?</p>
+ * </Modal>
+ *
+ * @example
+ * // With header actions and wide size
+ * <Modal
+ *   open={isOpen}
+ *   title="Edit profile"
+ *   size="wide"
+ *   actions={<button onClick={save}>Save</button>}
+ *   onClose={handleClose}
+ * >
+ *   <ProfileForm />
+ * </Modal>
+ *
+ * @example
+ * // Flush body (no padding) for editors and full-bleed content
+ * <Modal open={isOpen} title="Document" padding={false} onClose={handleClose}>
+ *   <DocEditor content={content} onSave={save} />
+ * </Modal>
+ *
+ * @param {ModalProps} props - The props for the Modal component
+ * @returns {React.ReactPortal | null} A portal rendering the modal, or null on the server
+ */
+const Modal = ({ open, title, onClose, children, size = 'default', actions, padding = true, }) => {
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [open, onClose]);
+    if (typeof document === 'undefined')
+        return null;
+    const dialogClass = [
+        styles$w.dialog,
+        size === 'compact' && styles$w.dialogCompact,
+        size === 'wide' && styles$w.dialogWide,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return reactDom.createPortal(jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$w.backdrop, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, onClick: onClose, "aria-hidden": "true", children: jsxRuntime.jsxs(framerMotion.motion.div, { className: dialogClass, role: "dialog", "aria-modal": "true", "aria-label": title, initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.96, y: 8 }, transition: { duration: 0.15, ease: 'easeOut' }, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: styles$w.header, children: [jsxRuntime.jsx("span", { className: styles$w.title, children: title }), actions && jsxRuntime.jsx("div", { className: styles$w.headerActions, children: actions }), jsxRuntime.jsx("button", { className: styles$w.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })] }), jsxRuntime.jsx("div", { className: padding ? styles$w.body : styles$w.bodyFlush, children: children })] }) })) }), document.body);
+};
+
+var styles$v = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
 
 /**
  * Checkbox component - Modern interactive checkbox with animations
@@ -759,126 +838,20 @@ var styles$q = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox
  */
 const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate = false, id, name, value, soundConfig }) => {
     const checkboxRef = React.useRef(null);
-    const { handlers, playSound } = useComponentSound(soundConfig);
+    const { playSound } = useComponentSound(soundConfig);
     React.useEffect(() => {
         if (checkboxRef.current) {
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return (jsxRuntime.jsxs("label", { className: styles$q.checkboxLabel, children: [jsxRuntime.jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => {
+    return (jsxRuntime.jsxs("label", { className: styles$v.checkboxLabel, children: [jsxRuntime.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$q.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$q.checkboxText, children: label })] }));
-};
-
-var DefaultContext = {
-  color: undefined,
-  size: undefined,
-  className: undefined,
-  style: undefined,
-  attr: undefined
+                }, className: styles$v.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$v.checkboxText, children: label })] }));
 };
-var IconContext = React.createContext && /*#__PURE__*/React.createContext(DefaultContext);
-
-var _excluded = ["attr", "size", "title"];
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /*#__PURE__*/React.createElement(node.tag, _objectSpread({
-    key: i
-  }, node.attr), Tree2Element(node.child)));
-}
-function GenIcon(data) {
-  return props => /*#__PURE__*/React.createElement(IconBase, _extends({
-    attr: _objectSpread({}, data.attr)
-  }, props), Tree2Element(data.child));
-}
-function IconBase(props) {
-  var elem = conf => {
-    var {
-        attr,
-        size,
-        title
-      } = props,
-      svgProps = _objectWithoutProperties(props, _excluded);
-    var computedSize = size || conf.size || "1em";
-    var className;
-    if (conf.className) className = conf.className;
-    if (props.className) className = (className ? className + " " : "") + props.className;
-    return /*#__PURE__*/React.createElement("svg", _extends({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf.attr, attr, svgProps, {
-      className: className,
-      style: _objectSpread(_objectSpread({
-        color: props.color || conf.color
-      }, conf.style), props.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && /*#__PURE__*/React.createElement("title", null, title), props.children);
-  };
-  return IconContext !== undefined ? /*#__PURE__*/React.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
-}
-
-// THIS FILE IS AUTO GENERATED
-function FiBook (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M4 19.5A2.5 2.5 0 0 1 6.5 17H20"},"child":[]},{"tag":"path","attr":{"d":"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"},"child":[]}]})(props);
-}function FiCalendar (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"rect","attr":{"x":"3","y":"4","width":"18","height":"18","rx":"2","ry":"2"},"child":[]},{"tag":"line","attr":{"x1":"16","y1":"2","x2":"16","y2":"6"},"child":[]},{"tag":"line","attr":{"x1":"8","y1":"2","x2":"8","y2":"6"},"child":[]},{"tag":"line","attr":{"x1":"3","y1":"10","x2":"21","y2":"10"},"child":[]}]})(props);
-}function FiCheck (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"polyline","attr":{"points":"20 6 9 17 4 12"},"child":[]}]})(props);
-}function FiChevronDown (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"polyline","attr":{"points":"6 9 12 15 18 9"},"child":[]}]})(props);
-}function FiChevronLeft (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"polyline","attr":{"points":"15 18 9 12 15 6"},"child":[]}]})(props);
-}function FiChevronRight (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"polyline","attr":{"points":"9 18 15 12 9 6"},"child":[]}]})(props);
-}function FiClock (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"circle","attr":{"cx":"12","cy":"12","r":"10"},"child":[]},{"tag":"polyline","attr":{"points":"12 6 12 12 16 14"},"child":[]}]})(props);
-}function FiDownload (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"},"child":[]},{"tag":"polyline","attr":{"points":"7 10 12 15 17 10"},"child":[]},{"tag":"line","attr":{"x1":"12","y1":"15","x2":"12","y2":"3"},"child":[]}]})(props);
-}function FiFolder (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"},"child":[]}]})(props);
-}function FiGithub (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"},"child":[]}]})(props);
-}function FiInfo (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"circle","attr":{"cx":"12","cy":"12","r":"10"},"child":[]},{"tag":"line","attr":{"x1":"12","y1":"16","x2":"12","y2":"12"},"child":[]},{"tag":"line","attr":{"x1":"12","y1":"8","x2":"12.01","y2":"8"},"child":[]}]})(props);
-}function FiMaximize (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"},"child":[]}]})(props);
-}function FiMenu (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"line","attr":{"x1":"3","y1":"12","x2":"21","y2":"12"},"child":[]},{"tag":"line","attr":{"x1":"3","y1":"6","x2":"21","y2":"6"},"child":[]},{"tag":"line","attr":{"x1":"3","y1":"18","x2":"21","y2":"18"},"child":[]}]})(props);
-}function FiMessageSquare (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"},"child":[]}]})(props);
-}function FiMoon (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"},"child":[]}]})(props);
-}function FiPause (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"rect","attr":{"x":"6","y":"4","width":"4","height":"16"},"child":[]},{"tag":"rect","attr":{"x":"14","y":"4","width":"4","height":"16"},"child":[]}]})(props);
-}function FiPlay (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"polygon","attr":{"points":"5 3 19 12 5 21 5 3"},"child":[]}]})(props);
-}function FiSearch (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"circle","attr":{"cx":"11","cy":"11","r":"8"},"child":[]},{"tag":"line","attr":{"x1":"21","y1":"21","x2":"16.65","y2":"16.65"},"child":[]}]})(props);
-}function FiShare2 (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"circle","attr":{"cx":"18","cy":"5","r":"3"},"child":[]},{"tag":"circle","attr":{"cx":"6","cy":"12","r":"3"},"child":[]},{"tag":"circle","attr":{"cx":"18","cy":"19","r":"3"},"child":[]},{"tag":"line","attr":{"x1":"8.59","y1":"13.51","x2":"15.42","y2":"17.49"},"child":[]},{"tag":"line","attr":{"x1":"15.41","y1":"6.51","x2":"8.59","y2":"10.49"},"child":[]}]})(props);
-}function FiSun (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"circle","attr":{"cx":"12","cy":"12","r":"5"},"child":[]},{"tag":"line","attr":{"x1":"12","y1":"1","x2":"12","y2":"3"},"child":[]},{"tag":"line","attr":{"x1":"12","y1":"21","x2":"12","y2":"23"},"child":[]},{"tag":"line","attr":{"x1":"4.22","y1":"4.22","x2":"5.64","y2":"5.64"},"child":[]},{"tag":"line","attr":{"x1":"18.36","y1":"18.36","x2":"19.78","y2":"19.78"},"child":[]},{"tag":"line","attr":{"x1":"1","y1":"12","x2":"3","y2":"12"},"child":[]},{"tag":"line","attr":{"x1":"21","y1":"12","x2":"23","y2":"12"},"child":[]},{"tag":"line","attr":{"x1":"4.22","y1":"19.78","x2":"5.64","y2":"18.36"},"child":[]},{"tag":"line","attr":{"x1":"18.36","y1":"5.64","x2":"19.78","y2":"4.22"},"child":[]}]})(props);
-}function FiUserPlus (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"},"child":[]},{"tag":"circle","attr":{"cx":"8.5","cy":"7","r":"4"},"child":[]},{"tag":"line","attr":{"x1":"20","y1":"8","x2":"20","y2":"14"},"child":[]},{"tag":"line","attr":{"x1":"23","y1":"11","x2":"17","y2":"11"},"child":[]}]})(props);
-}function FiUsers (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"},"child":[]},{"tag":"circle","attr":{"cx":"9","cy":"7","r":"4"},"child":[]},{"tag":"path","attr":{"d":"M23 21v-2a4 4 0 0 0-3-3.87"},"child":[]},{"tag":"path","attr":{"d":"M16 3.13a4 4 0 0 1 0 7.75"},"child":[]}]})(props);
-}function FiX (props) {
-  return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"line","attr":{"x1":"18","y1":"6","x2":"6","y2":"18"},"child":[]},{"tag":"line","attr":{"x1":"6","y1":"6","x2":"18","y2":"18"},"child":[]}]})(props);
-}
 
 const formatDateToEuropean = (date) => {
     if (!date)
@@ -908,7 +881,7 @@ const parseEuropeanDate = (dateString) => {
     return '';
 };
 
-var styles$p = {"dateInput":"DateInput-module_dateInput__54VPD","label":"DateInput-module_label__yDdUw","inputWrapper":"DateInput-module_inputWrapper__x-r1d","textInput":"DateInput-module_textInput__ToOSX","calendarButton":"DateInput-module_calendarButton__JzDGD","hiddenDateInput":"DateInput-module_hiddenDateInput__IWNg3","error":"DateInput-module_error__ieuPO","success":"DateInput-module_success__rPA93","loading":"DateInput-module_loading__1DAmD"};
+var styles$u = {"dateInput":"DateInput-module_dateInput__54VPD","label":"DateInput-module_label__yDdUw","inputWrapper":"DateInput-module_inputWrapper__x-r1d","textInput":"DateInput-module_textInput__ToOSX","calendarButton":"DateInput-module_calendarButton__JzDGD","hiddenDateInput":"DateInput-module_hiddenDateInput__IWNg3","error":"DateInput-module_error__ieuPO","success":"DateInput-module_success__rPA93","loading":"DateInput-module_loading__1DAmD"};
 
 /**
  * DateInput component - European format date picker with manual input support
@@ -997,19 +970,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
         }
     };
     const getClassName = () => {
-        const classes = [styles$p.dateInput];
+        const classes = [styles$u.dateInput];
         if (error)
-            classes.push(styles$p.error);
+            classes.push(styles$u.error);
         if (success)
-            classes.push(styles$p.success);
+            classes.push(styles$u.success);
         if (loading)
-            classes.push(styles$p.loading);
+            classes.push(styles$u.loading);
         return classes.join(' ');
     };
-    return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$p.label, children: label }), jsxRuntime.jsxs("div", { className: styles$p.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$p.textInput, disabled: disabled || loading, ...handlers }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$p.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(FiCalendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$p.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
+    return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$u.label, children: label }), jsxRuntime.jsxs("div", { className: styles$u.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$u.textInput, disabled: disabled || loading, ...handlers }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$u.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(lucideReact.Calendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$u.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
 }
 
-var styles$o = {"searchableDropdown":"SearchableDropdown-module_searchableDropdown__S2Nh5","dropdownTrigger":"SearchableDropdown-module_dropdownTrigger__dihdr","open":"SearchableDropdown-module_open__P7mRt","dropdownValue":"SearchableDropdown-module_dropdownValue__ydrc2","placeholder":"SearchableDropdown-module_placeholder__BwM2W","dropdownArrow":"SearchableDropdown-module_dropdownArrow__yd5fp","dropdownMenu":"SearchableDropdown-module_dropdownMenu__2Z5cc","dropdownSearch":"SearchableDropdown-module_dropdownSearch__NRk7j","searchInput":"SearchableDropdown-module_searchInput__VS2Hw","searchIcon":"SearchableDropdown-module_searchIcon__2vKFF","dropdownOptions":"SearchableDropdown-module_dropdownOptions__6YXqF","dropdownOption":"SearchableDropdown-module_dropdownOption__YwDr-","selected":"SearchableDropdown-module_selected__31JeB","highlighted":"SearchableDropdown-module_highlighted__P0bBq","checkIcon":"SearchableDropdown-module_checkIcon__YxowK","dropdownNoResults":"SearchableDropdown-module_dropdownNoResults__WW-Da","loading":"SearchableDropdown-module_loading__xlYf0"};
+var styles$t = {"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
@@ -1114,23 +1087,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
         }
     };
     const getTriggerClassName = () => {
-        const classes = [styles$o.dropdownTrigger];
+        const classes = [styles$t.dropdownTrigger];
         if (isOpen)
-            classes.push(styles$o.open);
+            classes.push(styles$t.open);
         if (loading)
-            classes.push(styles$o.loading);
+            classes.push(styles$t.loading);
         if (error)
-            classes.push(styles$o.error);
+            classes.push(styles$t.error);
         return classes.join(' ');
     };
-    return (jsxRuntime.jsxs("div", { className: styles$o.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `${styles$o.dropdownValue} ${!displayValue ? styles$o.placeholder : ''}`, children: displayValue || placeholder }), jsxRuntime.jsx(FiChevronDown, { className: styles$o.dropdownArrow })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$o.dropdownMenu, initial: { opacity: 0, y: -10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2, ease: "easeOut" }, children: [jsxRuntime.jsxs("div", { className: styles$o.dropdownSearch, children: [jsxRuntime.jsx(FiSearch, { className: styles$o.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: styles$o.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxRuntime.jsxs("div", { className: styles$o.dropdownOptions, children: [allOptions.map((opt, index) => {
+    return (jsxRuntime.jsxs("div", { className: styles$t.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `${styles$t.dropdownValue} ${!displayValue ? styles$t.placeholder : ''}`, children: displayValue || placeholder }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: styles$t.dropdownArrow })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$t.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: [jsxRuntime.jsxs("div", { className: styles$t.dropdownSearch, children: [jsxRuntime.jsx(lucideReact.Search, { className: styles$t.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: styles$t.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxRuntime.jsxs("div", { className: styles$t.dropdownOptions, children: [allOptions.map((opt, index) => {
                                     const isSelected = value === opt.value;
                                     const isHighlighted = highlightedIndex === index;
-                                    return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$o.dropdownOption} ${isSelected ? styles$o.selected : ''} ${isHighlighted ? styles$o.highlighted : ''}`, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.02 }, whileTap: { scale: 0.98 }, style: { willChange: 'transform' }, children: [jsxRuntime.jsx("span", { children: opt.label }), isSelected && jsxRuntime.jsx(FiCheck, { className: styles$o.checkIcon })] }, `${opt.value}-${index}`));
-                                }), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
+                                    return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$t.dropdownOption} ${isSelected ? styles$t.selected : ''} ${isHighlighted ? styles$t.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: [jsxRuntime.jsx("span", { children: opt.label }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: styles$t.checkIcon })] }, `${opt.value}-${index}`));
+                                }), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$t.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
 }
 
-var styles$n = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWrapper":"SelectInput-module_selectWrapper__Qr4pl","selectIcon":"SelectInput-module_selectIcon__9pjhf","error":"SelectInput-module_error__3WNJc","success":"SelectInput-module_success__WJ5ga","loading":"SelectInput-module_loading__n35N9"};
+var styles$s = {"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
@@ -1165,29 +1138,29 @@ var styles$n = {"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 }) {
+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$n.selectInput];
+        const classes = [styles$s.selectInput];
         if (error)
-            classes.push(styles$n.error);
+            classes.push(styles$s.error);
         if (success)
-            classes.push(styles$n.success);
+            classes.push(styles$s.success);
         if (loading)
-            classes.push(styles$n.loading);
+            classes.push(styles$s.loading);
         return classes.join(' ');
     };
-    return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$n.selectWrapper, children: [jsxRuntime.jsxs("select", { value: value, onChange: e => {
+    return (jsxRuntime.jsxs("div", { className: `${getClassName()}${className ? ` ${className}` : ''}`, children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$s.selectWrapper, children: [jsxRuntime.jsxs("select", { value: value, onChange: e => {
                             playSound('click');
                             onChange(e.target.value);
                         }, disabled: disabled || loading, required: required, ...handlers, children: [jsxRuntime.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 (jsxRuntime.jsx("option", { value: optionValue, children: optionLabel }, optionValue));
-                            })] }), jsxRuntime.jsx(FiChevronDown, { className: styles$n.selectIcon })] })] }));
+                            })] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: styles$s.selectIcon })] })] }));
 }
 
-var styles$m = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","compact":"TextArea-module_compact__U5lPn","textareaLabel":"TextArea-module_textareaLabel__7Vmyx","requiredIndicator":"TextArea-module_requiredIndicator__3Fxyy","textareaInput":"TextArea-module_textareaInput__VCDZA","characterCount":"TextArea-module_characterCount__9FO5N","nearLimit":"TextArea-module_nearLimit__cUdnw","atLimit":"TextArea-module_atLimit__GoWCC","error":"TextArea-module_error__ciHgb","success":"TextArea-module_success__a0-xD","loading":"TextArea-module_loading__CSFBR","focusMode":"TextArea-module_focusMode__9A8U-"};
+var styles$r = {"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
@@ -1222,38 +1195,38 @@ var styles$m = {"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$m.textareaContainer];
+        const classes = [styles$r.textareaContainer];
         if (error)
-            classes.push(styles$m.error);
+            classes.push(styles$r.error);
         if (success)
-            classes.push(styles$m.success);
+            classes.push(styles$r.success);
         if (loading)
-            classes.push(styles$m.loading);
+            classes.push(styles$r.loading);
         if (focusMode)
-            classes.push(styles$m.focusMode);
+            classes.push(styles$r.focusMode);
         if (compact)
-            classes.push(styles$m.compact);
+            classes.push(styles$r.compact);
         if (className)
             classes.push(className);
         return classes.join(' ');
     };
     const getCharCountClassName = () => {
         if (!maxLength)
-            return styles$m.characterCount;
-        const classes = [styles$m.characterCount];
+            return styles$r.characterCount;
+        const classes = [styles$r.characterCount];
         const percentage = (value.length / maxLength) * 100;
         if (percentage >= 100) {
-            classes.push(styles$m.atLimit);
+            classes.push(styles$r.atLimit);
         }
         else if (percentage >= 80) {
-            classes.push(styles$m.nearLimit);
+            classes.push(styles$r.nearLimit);
         }
         return classes.join(' ');
     };
-    return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$m.textareaLabel, children: [label, required && jsxRuntime.jsx("span", { className: styles$m.requiredIndicator, children: "*" })] })), jsxRuntime.jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$m.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxRuntime.jsxs("div", { className: getCharCountClassName(), children: [jsxRuntime.jsx("span", { children: value.length }), jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsxRuntime.jsx("span", { children: maxLength })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$r.textareaLabel, children: [label, required && jsxRuntime.jsx("span", { className: styles$r.requiredIndicator, children: "*" })] })), jsxRuntime.jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$r.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxRuntime.jsxs("div", { className: getCharCountClassName(), children: [jsxRuntime.jsx("span", { children: value.length }), jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsxRuntime.jsx("span", { children: maxLength })] }))] }));
 }
 
-var styles$l = {"textInput":"TextInput-module_textInput__b2LVM","required":"TextInput-module_required__7uLiM","inputError":"TextInput-module_inputError__QD0a-","errorMessage":"TextInput-module_errorMessage__nIDoQ","success":"TextInput-module_success__KbSS3","loading":"TextInput-module_loading__qXaca","withIcon":"TextInput-module_withIcon__-8swm","inputIcon":"TextInput-module_inputIcon__B4czN","withAction":"TextInput-module_withAction__JD3ku","actionButton":"TextInput-module_actionButton__zFJel"};
+var styles$q = {"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
@@ -1290,21 +1263,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$l.textInput];
+        const classes = [styles$q.textInput];
         if (success)
-            classes.push(styles$l.success);
+            classes.push(styles$q.success);
         if (loading)
-            classes.push(styles$l.loading);
+            classes.push(styles$q.loading);
         if (icon)
-            classes.push(styles$l.withIcon);
+            classes.push(styles$q.withIcon);
         if (actionButton)
-            classes.push(styles$l.withAction);
+            classes.push(styles$q.withAction);
         return classes.join(' ');
     };
     React.useEffect(() => {
         prevValueRef.current = value;
     }, [value]);
-    return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$l.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$l.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => {
+    return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$q.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$q.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => {
                             const newValue = e.target.value;
                             const oldValue = prevValueRef.current;
                             onChange(newValue);
@@ -1320,13 +1293,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$l.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsxRuntime.jsx("button", { type: "button", className: styles$l.actionButton, onClick: () => {
+                        }, onBlur: onBlur, placeholder: placeholder, className: error ? styles$q.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsxRuntime.jsx("button", { type: "button", className: styles$q.actionButton, onClick: () => {
                             handlers.onClick?.();
                             actionButton.onClick();
-                        }, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$l.errorMessage, children: error }))] }));
+                        }, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$q.errorMessage, children: error }))] }));
 }
 
-var styles$k = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
+var styles$p = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
 
 /**
  * Toggle Component
@@ -1344,7 +1317,7 @@ var styles$k = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
  *   onToggle={setDarkMode}
  *   leftLabel="Light"
  *   rightLabel="Dark"
- *   soundTheme="cozy"
+ *   soundTheme="digital"
  *   enableCelebration={true}
  * />
  *
@@ -1372,14 +1345,14 @@ var styles$k = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
  * @returns {JSX.Element} The rendered Toggle component
  */
 function Toggle(props) {
-    const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon, className, style, soundConfig, soundTheme, enableCelebration = false } = props;
+    const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon, className, style, soundConfig, enableCelebration = false } = props;
     const leftButtonRef = React.useRef(null);
     const rightButtonRef = React.useRef(null);
-    const { handlers, playSound, triggerCelebration } = useComponentSound({
+    const { handlers, playSound } = useComponentSound({
         ...soundConfig,
-        onToggle: soundConfig?.onToggle ?? 'toggle',
+        onClick: soundConfig?.onClick ?? 'toggle',
         onHover: soundConfig?.onHover ?? 'hover'
-    }, { });
+    });
     // Ensure content stays centered by merging styles
     const buttonStyle = {
         display: 'flex',
@@ -1387,42 +1360,40 @@ function Toggle(props) {
         justifyContent: 'center',
         ...style
     };
-    return (jsxRuntime.jsxs("div", { className: `${styles$k.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { ref: leftButtonRef, className: `${styles$k.toggleButton} ${!isOn ? styles$k.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
-                    const element = leftButtonRef.current;
+    return (jsxRuntime.jsxs("div", { className: `${styles$p.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { ref: leftButtonRef, className: `${styles$p.toggleButton} ${!isOn ? styles$p.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
                     if (!isOn) {
-                        // Already on left, celebration!
+                        // Already on left
                         if (enableCelebration) {
-                            triggerCelebration(element || undefined);
+                            playSound('success');
                         }
                         else {
-                            playSound('boop', element || undefined);
+                            playSound('click');
                         }
                     }
                     else {
                         // Switching to left
-                        playSound('toggle', element || undefined);
+                        playSound('toggle');
                     }
                     onToggle(false);
-                }, onMouseEnter: () => handlers.onMouseEnter?.(leftButtonRef.current || undefined), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxRuntime.jsxs(framerMotion.motion.button, { ref: rightButtonRef, className: `${styles$k.toggleButton} ${isOn ? styles$k.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
-                    const element = rightButtonRef.current;
+                }, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxRuntime.jsxs(framerMotion.motion.button, { ref: rightButtonRef, className: `${styles$p.toggleButton} ${isOn ? styles$p.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
                     if (isOn) {
-                        // Already on right, celebration!
+                        // Already on right
                         if (enableCelebration) {
-                            triggerCelebration(element || undefined);
+                            playSound('success');
                         }
                         else {
-                            playSound('ding', element || undefined);
+                            playSound('click');
                         }
                     }
                     else {
-                        // Switching to right  
-                        playSound('success', element || undefined);
+                        // Switching to right
+                        playSound('success');
                     }
                     onToggle(true);
-                }, onMouseEnter: () => handlers.onMouseEnter?.(rightButtonRef.current || undefined), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: isOn ? 1.1 : 1, rotate: isOn ? [0, 5, -5, 0] : 0 }, transition: { duration: 0.3 }, children: rightIcon }), rightLabel] })] }));
+                }, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: isOn ? 1.1 : 1, rotate: isOn ? [0, 5, -5, 0] : 0 }, transition: { duration: 0.3 }, children: rightIcon }), rightLabel] })] }));
 }
 
-var styles$j = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","minimal":"NumberStepper-module_minimal__y47-W","custom":"NumberStepper-module_custom__XGSVg","vertical":"NumberStepper-module_vertical__nBcL7","pulse":"NumberStepper-module_pulse__51oUo"};
+var styles$o = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","minimal":"NumberStepper-module_minimal__y47-W","custom":"NumberStepper-module_custom__XGSVg","vertical":"NumberStepper-module_vertical__nBcL7","pulse":"NumberStepper-module_pulse__51oUo"};
 
 /**
  * NumberStepper Component
@@ -1559,16 +1530,18 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
                 e.preventDefault();
                 handleDecrement();
                 break;
-            case 'PageUp':
+            case 'PageUp': {
                 e.preventDefault();
                 const bigIncrease = Math.min(value + (step * 10), max);
                 onChange(bigIncrease);
                 break;
-            case 'PageDown':
+            }
+            case 'PageDown': {
                 e.preventDefault();
                 const bigDecrease = Math.max(value - (step * 10), min);
                 onChange(bigDecrease);
                 break;
+            }
             case 'Home':
                 e.preventDefault();
                 if (min !== -Infinity)
@@ -1607,32 +1580,32 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
         setDisplayValue(finalValue);
     }, [displayValue, min, max, step, onChange]);
     const containerClasses = [
-        styles$j.container,
-        styles$j[size],
-        styles$j[variant],
-        layout === 'vertical' && styles$j.vertical,
-        disabled && styles$j.disabled,
+        styles$o.container,
+        styles$o[size],
+        styles$o[variant],
+        layout === 'vertical' && styles$o.vertical,
+        disabled && styles$o.disabled,
         className
     ].filter(Boolean).join(' ');
     // Merge custom styles with hover states
     const [isButtonHovered, setIsButtonHovered] = React.useState(null);
     const isDecrementDisabled = disabled || value <= min;
     const isIncrementDisabled = disabled || value >= max;
-    const stepperContent = (jsxRuntime.jsxs("div", { className: styles$j.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$j.button, style: {
+    const stepperContent = (jsxRuntime.jsxs("div", { className: styles$o.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$o.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 ? (jsxRuntime.jsx("span", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsxRuntime.jsx("div", { className: styles$j.valueContainer, style: customStyles.valueContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$j.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$j.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsxRuntime.jsx(framerMotion.motion.button, { className: styles$j.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 ? (jsxRuntime.jsx("span", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsxRuntime.jsx("div", { className: styles$o.valueContainer, style: customStyles.valueContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.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$o.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$o.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) }) }), jsxRuntime.jsx(framerMotion.motion.button, { className: styles$o.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 ? (jsxRuntime.jsx("span", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.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 ? (jsxRuntime.jsx("span", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }));
     // For custom variant with horizontal layout, render differently
     if (variant === 'custom' && (label || icon)) {
-        return (jsxRuntime.jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs("div", { className: styles$j.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsxRuntime.jsx("span", { className: styles$j.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$j.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$j.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$j.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$j.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+        return (jsxRuntime.jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs("div", { className: styles$o.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsxRuntime.jsx("span", { className: styles$o.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$o.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$o.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$o.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$o.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
     }
-    return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$j.header, style: customStyles.header, children: [icon && jsxRuntime.jsx("span", { className: styles$j.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$j.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$j.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$j.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$j.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$o.header, style: customStyles.header, children: [icon && jsxRuntime.jsx("span", { className: styles$o.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$o.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$o.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$o.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$o.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
 };
 
-var styles$i = {"button":"ToggleButton-module_button__DTuyY","background":"ToggleButton-module_background__NwfTp","content":"ToggleButton-module_content__NHqIN","iconWrapper":"ToggleButton-module_iconWrapper__yN4sP","icon":"ToggleButton-module_icon__r8juX","label":"ToggleButton-module_label__4mPJP","hideMobile":"ToggleButton-module_hideMobile__GFAc3","checkmark":"ToggleButton-module_checkmark__ZJwf-","ripple":"ToggleButton-module_ripple__2-faB","small":"ToggleButton-module_small__MhfoN","large":"ToggleButton-module_large__A3naL","default":"ToggleButton-module_default__q8QaZ","active":"ToggleButton-module_active__4DjlR","outlined":"ToggleButton-module_outlined__OtqJB","filled":"ToggleButton-module_filled__LySNn","ghost":"ToggleButton-module_ghost__9KXcb","active-primary":"ToggleButton-module_active-primary__vXMP7","active-secondary":"ToggleButton-module_active-secondary__9Ttdx","active-success":"ToggleButton-module_active-success__oi0rr","active-danger":"ToggleButton-module_active-danger__VUdxr","active-warning":"ToggleButton-module_active-warning__77nSu","animation-scale":"ToggleButton-module_animation-scale__j-3mJ","scaleAnimation":"ToggleButton-module_scaleAnimation__Ms1j2","animation-rotate":"ToggleButton-module_animation-rotate__pBmfc","rotateAnimation":"ToggleButton-module_rotateAnimation__xWZJ5","animation-flip":"ToggleButton-module_animation-flip__ErAbm","flipAnimation":"ToggleButton-module_flipAnimation__qwDTb","disabled":"ToggleButton-module_disabled__Gv5ji"};
+var styles$n = {"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
@@ -1671,18 +1644,18 @@ var styles$i = {"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$i.button,
-        styles$i[size],
-        styles$i[variant],
-        active && styles$i.active,
-        active && styles$i[`active-${activeColor}`],
-        disabled && styles$i.disabled,
-        animation !== 'none' && styles$i[`animation-${animation}`],
+        styles$n.button,
+        styles$n[size],
+        styles$n[variant],
+        active && styles$n.active,
+        active && styles$n[`active-${activeColor}`],
+        disabled && styles$n.disabled,
+        animation !== 'none' && styles$n[`animation-${animation}`],
         className
     ].filter(Boolean).join(' ');
     const labelClasses = [
-        styles$i.label,
-        hideLabelOnMobile && styles$i.hideMobile
+        styles$n.label,
+        hideLabelOnMobile && styles$n.hideMobile
     ].filter(Boolean).join(' ');
     const iconVariants = {
         scale: {
@@ -1746,10 +1719,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
     return (jsxRuntime.jsxs(framerMotion.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: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$i.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$i.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$i.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$i.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$i.icon, children: icon })) })), label && jsxRuntime.jsx("span", { className: labelClasses, children: label }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showCheckmark && active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$i.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$i.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
+        }, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$n.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$n.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$n.icon, children: icon })) })), label && jsxRuntime.jsx("span", { className: labelClasses, children: label }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showCheckmark && active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
 };
 
-var styles$h = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","fill":"Slider-module_fill__AYR4-","shimmer":"Slider-module_shimmer__271tL","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","ripple":"Slider-module_ripple__gVS04","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
+var styles$m = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","fill":"Slider-module_fill__AYR4-","shimmer":"Slider-module_shimmer__271tL","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","ripple":"Slider-module_ripple__gVS04","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
 
 /**
  * Slider component - A beautiful, animated range input
@@ -1837,16 +1810,16 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
             setShowTooltipState(false);
     };
     const dynamicColor = getDynamicColor();
-    const sizeClass = styles$h[`size-${size}`];
-    const stateClass = disabled ? styles$h.disabled : loading ? styles$h.loading : '';
+    const sizeClass = styles$m[`size-${size}`];
+    const stateClass = disabled ? styles$m.disabled : loading ? styles$m.loading : '';
     if (loading) {
-        return (jsxRuntime.jsxs("div", { className: `${styles$h.slider} ${sizeClass} ${styles$h.loading} ${className}`, style: style, children: [label && jsxRuntime.jsx("label", { className: styles$h.label, children: label }), jsxRuntime.jsx("div", { className: styles$h.loadingTrack, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
+        return (jsxRuntime.jsxs("div", { className: `${styles$m.slider} ${sizeClass} ${styles$m.loading} ${className}`, style: style, children: [label && jsxRuntime.jsx("label", { className: styles$m.label, children: label }), jsxRuntime.jsx("div", { className: styles$m.loadingTrack, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
                             repeat: Infinity,
                             duration: 1.5,
                             ease: "easeInOut"
                         } }) })] }));
     }
-    return (jsxRuntime.jsxs("div", { className: `${styles$h.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsxRuntime.jsx(framerMotion.motion.label, { className: styles$h.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$h.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.fill, style: {
+    return (jsxRuntime.jsxs("div", { className: `${styles$m.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsxRuntime.jsx(framerMotion.motion.label, { className: styles$m.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$m.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.fill, style: {
                                 width: `${percentage}%`,
                                 backgroundColor: dynamicColor
                             }, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: {
@@ -1856,7 +1829,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                                 damping: 30
                             }, whileHover: {
                                 boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2)`
-                            } }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$h.input, disabled: disabled, "aria-label": label }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.thumb, style: {
+                            } }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$m.input, disabled: disabled, "aria-label": label }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.thumb, style: {
                             left: `${percentage}%`,
                             backgroundColor: dynamicColor,
                             borderColor: colors.thumb || dynamicColor
@@ -1873,14 +1846,14 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                         }, whileHover: {
                             scale: 1.1,
                             transition: { duration: 0.1 }
-                        }, children: isDragging && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.ripple, initial: { scale: 0, opacity: 0.6 }, animate: { scale: 2, opacity: 0 }, transition: { duration: 0.5 } })) }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTooltipState && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$h.tooltip, style: {
+                        }, children: isDragging && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.ripple, initial: { scale: 0, opacity: 0.6 }, animate: { scale: 2, opacity: 0 }, transition: { duration: 0.5 } })) }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTooltipState && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$m.tooltip, style: {
                                 left: `${percentage}%`,
                                 backgroundColor: dynamicColor
-                            }, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsxRuntime.jsx("div", { className: styles$h.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
+                            }, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsxRuntime.jsx("div", { className: styles$m.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
                     duration: 0.2,
                     type: "spring",
                     stiffness: 300
-                }, children: formatValue(value) }, value)), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$h.labelsContainer, children: labels.map((labelConfig, index) => {
+                }, children: formatValue(value) }, value)), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$m.labelsContainer, children: labels.map((labelConfig, index) => {
                     let position = 0;
                     if (labelConfig.position === 'start')
                         position = 0;
@@ -1888,7 +1861,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                         position = 100;
                     else if (typeof labelConfig.position === 'number')
                         position = labelConfig.position;
-                    return (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.labelItem, style: {
+                    return (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.labelItem, style: {
                             left: `${position}%`,
                             color: labelConfig.color
                         }, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, transition: {
@@ -1901,7 +1874,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                 }) }))] }));
 }
 
-var styles$g = {"loadingContainer":"LoadingSpinner-module_loadingContainer__m5u51","fullScreen":"LoadingSpinner-module_fullScreen__TuAem","overlay":"LoadingSpinner-module_overlay__X7FTa","shimmer":"LoadingSpinner-module_shimmer__xw4AH","small":"LoadingSpinner-module_small__nq8A3","loadingText":"LoadingSpinner-module_loadingText__wWwna","medium":"LoadingSpinner-module_medium__3JC1S","large":"LoadingSpinner-module_large__4MvAc","dotsSpinner":"LoadingSpinner-module_dotsSpinner__PXtfs","dot1":"LoadingSpinner-module_dot1__5YKSi","dot2":"LoadingSpinner-module_dot2__l6Rbu","dot3":"LoadingSpinner-module_dot3__b9YPW","circleSpinner":"LoadingSpinner-module_circleSpinner__ZmmWs","pulseSpinner":"LoadingSpinner-module_pulseSpinner__wTtDJ","textGradient":"LoadingSpinner-module_textGradient__QDrTY","sparkleContainer":"LoadingSpinner-module_sparkleContainer__9XLJG","sparkle":"LoadingSpinner-module_sparkle__LtFFf"};
+var styles$l = {"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...',
@@ -1977,6 +1950,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
             }, messageRotationInterval);
             return () => clearInterval(interval);
         }
+        return undefined;
     }, [message, showMessage, messagesToUse.length, messageRotationInterval]);
     React.useEffect(() => {
         if (!message && showMessage) {
@@ -1984,22 +1958,22 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
         }
     }, [currentMessageIndex, message, messagesToUse, showMessage]);
     const containerClasses = [
-        styles$g.loadingContainer,
-        styles$g[size],
-        styles$g[variant],
-        fullScreen && styles$g.fullScreen,
-        overlay && styles$g.overlay,
+        styles$l.loadingContainer,
+        styles$l[size],
+        styles$l[variant],
+        fullScreen && styles$l.fullScreen,
+        overlay && styles$l.overlay,
         className
     ].filter(Boolean).join(' ');
     const customStyle = {
         ...(color && { '--spinner-color': color }),
         ...(backgroundColor && { '--spinner-background': backgroundColor }),
     };
-    const renderDots = () => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$g.dotsSpinner, animate: { rotate: 360 }, transition: {
+    const renderDots = () => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$l.dotsSpinner, animate: { rotate: 360 }, transition: {
             duration: 2,
             repeat: Infinity,
             ease: 'linear'
-        }, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.dot1, animate: {
+        }, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.dot1, animate: {
                     scale: [1, 1.3, 1],
                     y: [0, -6, 0]
                 }, transition: {
@@ -2007,7 +1981,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
                     repeat: Infinity,
                     ease: 'easeInOut',
                     delay: 0
-                } }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.dot2, animate: {
+                } }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.dot2, animate: {
                     scale: [1, 1.3, 1],
                     y: [0, -6, 0]
                 }, transition: {
@@ -2015,7 +1989,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
                     repeat: Infinity,
                     ease: 'easeInOut',
                     delay: 0.5
-                } }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.dot3, animate: {
+                } }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.dot3, animate: {
                     scale: [1, 1.3, 1],
                     y: [0, -6, 0]
                 }, transition: {
@@ -2024,12 +1998,12 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
                     ease: 'easeInOut',
                     delay: 1
                 } })] }));
-    const renderSpinner = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.circleSpinner, animate: { rotate: 360 }, transition: {
+    const renderSpinner = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.circleSpinner, animate: { rotate: 360 }, transition: {
             duration: 1,
             repeat: Infinity,
             ease: 'linear'
         } }));
-    const renderPulse = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.pulseSpinner, animate: {
+    const renderPulse = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.pulseSpinner, animate: {
             scale: [1, 1.2, 1],
             opacity: [1, 0.7, 1]
         }, transition: {
@@ -2048,10 +2022,10 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
                 return renderDots();
         }
     };
-    return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.p, { className: styles$g.loadingText, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: {
+    return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.p, { className: styles$l.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 && (jsxRuntime.jsx("div", { className: styles$g.sparkleContainer, children: [...Array(4)].map((_, i) => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.sparkle, animate: {
+                    }, children: currentMessage }, currentMessage) })), showSparkles && (jsxRuntime.jsx("div", { className: styles$l.sparkleContainer, children: [...Array(4)].map((_, i) => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.sparkle, animate: {
                         opacity: [0, 1, 0],
                         scale: [0.5, 1, 0.5],
                         rotate: [0, 180, 360]
@@ -2066,7 +2040,197 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
                     } }, i))) }))] }));
 };
 
-var styles$f = {"arrayInput":"ArrayInput-module_arrayInput__q1x7A","arrayInputLabel":"ArrayInput-module_arrayInputLabel__HyUC7","arrayInputItem":"ArrayInput-module_arrayInputItem__bFtgl","inputWrapper":"ArrayInput-module_inputWrapper__ajhbW","input":"ArrayInput-module_input__1uywi","complexItem":"ArrayInput-module_complexItem__zr-Q-","fieldsWrapper":"ArrayInput-module_fieldsWrapper__7BVPa","removeButton":"ArrayInput-module_removeButton__gYf8Y","addButton":"ArrayInput-module_addButton__mia29"};
+var styles$k = {"wrapper":"DecryptedText-module_wrapper__tuLvf","srOnly":"DecryptedText-module_srOnly__A-K2T"};
+
+/**
+ * DecryptedText Component
+ *
+ * Creates an animated text reveal effect where characters progressively
+ * decrypt from scrambled characters to the final text.
+ *
+ * @example
+ * // Basic usage - animates on hover
+ * <DecryptedText text="Hello World" />
+ *
+ * @example
+ * // Animate when scrolled into view
+ * <DecryptedText text="Welcome" animateOn="view" />
+ *
+ * @example
+ * // Sequential reveal from center
+ * <DecryptedText
+ *   text="Decrypt Me"
+ *   sequential
+ *   revealDirection="center"
+ *   speed={30}
+ * />
+ */
+const DecryptedText = ({ text, speed = 50, maxIterations = 10, sequential = false, revealDirection = 'start', useOriginalCharsOnly = false, characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz', className = '', parentClassName = '', encryptedClassName = '', animateOn = 'hover', ...props }) => {
+    const [displayText, setDisplayText] = React.useState(text);
+    const [isHovering, setIsHovering] = React.useState(false);
+    const [isScrambling, setIsScrambling] = React.useState(false);
+    const [revealedIndices, setRevealedIndices] = React.useState(new Set());
+    const [hasAnimated, setHasAnimated] = React.useState(false);
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
+        let interval;
+        let currentIteration = 0;
+        const getNextIndex = (revealedSet) => {
+            const textLength = text.length;
+            switch (revealDirection) {
+                case 'start':
+                    return revealedSet.size;
+                case 'end':
+                    return textLength - 1 - revealedSet.size;
+                case 'center': {
+                    const middle = Math.floor(textLength / 2);
+                    const offset = Math.floor(revealedSet.size / 2);
+                    const nextIndex = revealedSet.size % 2 === 0 ? middle + offset : middle - offset - 1;
+                    if (nextIndex >= 0 && nextIndex < textLength && !revealedSet.has(nextIndex)) {
+                        return nextIndex;
+                    }
+                    for (let i = 0; i < textLength; i++) {
+                        if (!revealedSet.has(i))
+                            return i;
+                    }
+                    return 0;
+                }
+                default:
+                    return revealedSet.size;
+            }
+        };
+        const availableChars = useOriginalCharsOnly
+            ? Array.from(new Set(text.split(''))).filter((char) => char !== ' ')
+            : characters.split('');
+        const shuffleText = (originalText, currentRevealed) => {
+            if (useOriginalCharsOnly) {
+                const positions = originalText.split('').map((char, i) => ({
+                    char,
+                    isSpace: char === ' ',
+                    index: i,
+                    isRevealed: currentRevealed.has(i),
+                }));
+                const nonSpaceChars = positions
+                    .filter((p) => !p.isSpace && !p.isRevealed)
+                    .map((p) => p.char);
+                for (let i = nonSpaceChars.length - 1; i > 0; i--) {
+                    const j = Math.floor(Math.random() * (i + 1));
+                    [nonSpaceChars[i], nonSpaceChars[j]] = [nonSpaceChars[j], nonSpaceChars[i]];
+                }
+                let charIndex = 0;
+                return positions
+                    .map((p) => {
+                    if (p.isSpace)
+                        return ' ';
+                    if (p.isRevealed)
+                        return originalText[p.index];
+                    return nonSpaceChars[charIndex++];
+                })
+                    .join('');
+            }
+            else {
+                return originalText
+                    .split('')
+                    .map((char, i) => {
+                    if (char === ' ')
+                        return ' ';
+                    if (currentRevealed.has(i))
+                        return originalText[i];
+                    return availableChars[Math.floor(Math.random() * availableChars.length)];
+                })
+                    .join('');
+            }
+        };
+        if (isHovering) {
+            setIsScrambling(true);
+            interval = setInterval(() => {
+                setRevealedIndices((prevRevealed) => {
+                    if (sequential) {
+                        if (prevRevealed.size < text.length) {
+                            const nextIndex = getNextIndex(prevRevealed);
+                            const newRevealed = new Set(prevRevealed);
+                            newRevealed.add(nextIndex);
+                            setDisplayText(shuffleText(text, newRevealed));
+                            return newRevealed;
+                        }
+                        else {
+                            clearInterval(interval);
+                            setIsScrambling(false);
+                            return prevRevealed;
+                        }
+                    }
+                    else {
+                        setDisplayText(shuffleText(text, prevRevealed));
+                        currentIteration++;
+                        if (currentIteration >= maxIterations) {
+                            clearInterval(interval);
+                            setIsScrambling(false);
+                            setDisplayText(text);
+                        }
+                        return prevRevealed;
+                    }
+                });
+            }, speed);
+        }
+        else {
+            setDisplayText(text);
+            setRevealedIndices(new Set());
+            setIsScrambling(false);
+        }
+        return () => {
+            if (interval)
+                clearInterval(interval);
+        };
+    }, [
+        isHovering,
+        text,
+        speed,
+        maxIterations,
+        sequential,
+        revealDirection,
+        characters,
+        useOriginalCharsOnly,
+    ]);
+    React.useEffect(() => {
+        if (animateOn !== 'view' && animateOn !== 'both')
+            return;
+        const observerCallback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && !hasAnimated) {
+                    setIsHovering(true);
+                    setHasAnimated(true);
+                }
+            });
+        };
+        const observerOptions = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 0.1,
+        };
+        const observer = new IntersectionObserver(observerCallback, observerOptions);
+        const currentRef = containerRef.current;
+        if (currentRef) {
+            observer.observe(currentRef);
+        }
+        return () => {
+            if (currentRef) {
+                observer.unobserve(currentRef);
+            }
+        };
+    }, [animateOn, hasAnimated]);
+    const hoverProps = animateOn === 'hover' || animateOn === 'both'
+        ? {
+            onMouseEnter: () => setIsHovering(true),
+            onMouseLeave: () => setIsHovering(false),
+        }
+        : {};
+    return (jsxRuntime.jsxs(framerMotion.motion.span, { className: `${styles$k.wrapper} ${parentClassName}`, ref: containerRef, ...hoverProps, ...props, children: [jsxRuntime.jsx("span", { className: styles$k.srOnly, children: displayText }), jsxRuntime.jsx("span", { "aria-hidden": "true", children: displayText.split('').map((char, index) => {
+                    const isRevealedOrDone = revealedIndices.has(index) || !isScrambling || !isHovering;
+                    return (jsxRuntime.jsx("span", { className: isRevealedOrDone ? className : encryptedClassName, children: char }, index));
+                }) })] }));
+};
+
+var styles$j = {"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
@@ -2133,11 +2297,11 @@ function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inp
         itemIdsRef.current.splice(index, 1);
         onChange(newValues);
     };
-    return (jsxRuntime.jsxs("div", { className: styles$f.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$f.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$f.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
+    return (jsxRuntime.jsxs("div", { className: styles$j.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$j.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$j.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: [jsxRuntime.jsx("div", { className: styles$f.inputWrapper, children: multiline ? (jsxRuntime.jsx("div", { style: inputStyle, children: jsxRuntime.jsx(TextArea, { label: "", value: value, onChange: (newValue) => handleChange(index, newValue), placeholder: placeholder, rows: rows, compact: true }) })) : (jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$f.input, style: inputStyle })) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$f.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.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]))) }) }), jsxRuntime.jsx(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$f.addButton, children: label })] }));
+                        }, children: [jsxRuntime.jsx("div", { className: styles$j.inputWrapper, children: multiline ? (jsxRuntime.jsx("div", { style: inputStyle, children: jsxRuntime.jsx(TextArea, { label: "", value: value, onChange: (newValue) => handleChange(index, newValue), placeholder: placeholder, rows: rows, compact: true }) })) : (jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$j.input, style: inputStyle })) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$j.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.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]))) }) }), jsxRuntime.jsx(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$j.addButton, children: label })] }));
 }
 // Complex object array implementation
 function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle, buttonVariant = 'primary' }) {
@@ -2162,14 +2326,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 (jsxRuntime.jsxs("div", { className: styles$f.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$f.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$f.arrayInputItem} ${fields.length > 1 ? styles$f.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
+    return (jsxRuntime.jsxs("div", { className: styles$j.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$j.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$j.arrayInputItem} ${fields.length > 1 ? styles$j.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: [jsxRuntime.jsx("div", { className: styles$f.fieldsWrapper, children: fields.map((field) => (jsxRuntime.jsx("div", { style: inputStyle, children: field.multiline ? (jsxRuntime.jsx(TextArea, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, placeholder: field.placeholder, rows: field.rows, compact: true })) : (jsxRuntime.jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder })) }, field.name))) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$f.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.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)))) }) }), jsxRuntime.jsxs(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$f.addButton, children: ["Add ", label] })] }));
+                        }, children: [jsxRuntime.jsx("div", { className: styles$j.fieldsWrapper, children: fields.map((field) => (jsxRuntime.jsx("div", { style: inputStyle, children: field.multiline ? (jsxRuntime.jsx(TextArea, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, placeholder: field.placeholder, rows: field.rows, compact: true })) : (jsxRuntime.jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder })) }, field.name))) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$j.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.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)))) }) }), jsxRuntime.jsxs(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$j.addButton, children: ["Add ", label] })] }));
 }
 
-var styles$e = {"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$i = {"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] = React.useState(false);
@@ -2254,15 +2418,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
     };
     const getVariantClass = () => {
         if (isSaving)
-            return styles$e.primary;
+            return styles$i.primary;
         if (isEditMode) {
-            return hasUnsavedChanges ? styles$e.success : styles$e.secondary;
+            return hasUnsavedChanges ? styles$i.success : styles$i.secondary;
         }
-        return styles$e.primary;
+        return styles$i.primary;
     };
     const getIcon = () => {
         if (isSaving) {
-            return jsxRuntime.jsx("div", { className: styles$e.loader });
+            return jsxRuntime.jsx("div", { className: styles$i.loader });
         }
         if (isEditMode) {
             return hasUnsavedChanges ? jsxRuntime.jsx(lucideReact.Check, { size: 24 }) : jsxRuntime.jsx(lucideReact.X, { size: 24 });
@@ -2277,30 +2441,30 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
         }
         return "Enter edit mode";
     };
-    return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$e.fab} ${getVariantClass()} ${isMobile ? styles$e.draggable : ''} ${isDragging ? styles$e.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 (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$i.fab} ${getVariantClass()} ${isMobile ? styles$i.draggable : ''} ${isDragging ? styles$i.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$d = {"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$h = {"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 = [
-    { value: 'all', label: 'All', icon: FiSearch },
-    { value: 'projects', label: 'Projects', icon: FiFolder },
-    { value: 'clients', label: 'Clients', icon: FiUsers },
-    { value: 'contacts', label: 'Contacts', icon: FiBook },
-    { value: 'interactions', label: 'Interactions', icon: FiMessageSquare },
-    { value: 'team', label: 'Team', icon: FiUserPlus },
+    { value: 'all', label: 'All', icon: lucideReact.Search },
+    { value: 'projects', label: 'Projects', icon: lucideReact.Folder },
+    { value: 'clients', label: 'Clients', icon: lucideReact.Users },
+    { value: 'contacts', label: 'Contacts', icon: lucideReact.Book },
+    { value: 'interactions', label: 'Interactions', icon: lucideReact.MessageSquare },
+    { value: 'team', label: 'Team', icon: lucideReact.UserPlus },
 ];
 const defaultEntityIcons = {
-    projects: FiFolder,
-    clients: FiUsers,
-    contacts: FiBook,
-    interactions: FiMessageSquare,
-    team: FiUserPlus,
+    projects: lucideReact.Folder,
+    clients: lucideReact.Users,
+    contacts: lucideReact.Book,
+    interactions: lucideReact.MessageSquare,
+    team: lucideReact.UserPlus,
 };
 const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch, onResultClick, onClear, debounceDelay = 300, minSearchLength = 2, showFilter = true, enableKeyboardShortcut = true, filterOptions: customFilterOptions, entityIcons: customEntityIcons }) => {
     const filterOptions = customFilterOptions ?? defaultFilterOptions;
@@ -2477,18 +2641,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) ? (jsxRuntime.jsx("mark", { className: styles$d.highlight, children: part }, index)) : (part));
+        return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$h.highlight, children: part }, index)) : (part));
     };
-    return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$d.searchContainer} ${className || ''}`, children: [jsxRuntime.jsxs("div", { className: styles$d.searchInputWrapper, children: [jsxRuntime.jsx(FiSearch, { className: styles$d.searchIcon }), jsxRuntime.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$d.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsxRuntime.jsx(framerMotion.motion.button, { className: styles$d.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: jsxRuntime.jsx(FiX, {}) })), showFilter && (jsxRuntime.jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$d.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isDropdownOpen && (jsxRuntime.jsx(framerMotion.motion.div, { ref: resultsRef, id: "search-results", className: styles$d.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxRuntime.jsxs("div", { className: styles$d.loadingState, children: [jsxRuntime.jsx("div", { className: styles$d.spinner }), jsxRuntime.jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxRuntime.jsxs("div", { className: styles$d.emptyState, children: ["No results found for \"", query, "\""] })) : (jsxRuntime.jsx("div", { className: styles$d.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
+    return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$h.searchContainer} ${className || ''}`, children: [jsxRuntime.jsxs("div", { className: styles$h.searchInputWrapper, children: [jsxRuntime.jsx(lucideReact.Search, { className: styles$h.searchIcon }), jsxRuntime.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$h.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsxRuntime.jsx(framerMotion.motion.button, { className: styles$h.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: jsxRuntime.jsx(lucideReact.X, {}) })), showFilter && (jsxRuntime.jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$h.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isDropdownOpen && (jsxRuntime.jsx(framerMotion.motion.div, { ref: resultsRef, id: "search-results", className: styles$h.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxRuntime.jsxs("div", { className: styles$h.loadingState, children: [jsxRuntime.jsx("div", { className: styles$h.spinner }), jsxRuntime.jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxRuntime.jsxs("div", { className: styles$h.emptyState, children: ["No results found for \"", query, "\""] })) : (jsxRuntime.jsx("div", { className: styles$h.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
                             const Icon = entityIcons[type];
-                            return (jsxRuntime.jsxs("div", { className: styles$d.resultGroup, children: [jsxRuntime.jsxs("div", { className: styles$d.groupHeader, children: [Icon && jsxRuntime.jsx(Icon, { className: styles$d.groupIcon }), jsxRuntime.jsx("span", { className: styles$d.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsxRuntime.jsx("span", { className: styles$d.groupCount, children: groupResults.length })] }), jsxRuntime.jsx("div", { className: styles$d.groupResults, children: groupResults.map((result) => {
+                            return (jsxRuntime.jsxs("div", { className: styles$h.resultGroup, children: [jsxRuntime.jsxs("div", { className: styles$h.groupHeader, children: [Icon && jsxRuntime.jsx(Icon, { className: styles$h.groupIcon }), jsxRuntime.jsx("span", { className: styles$h.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsxRuntime.jsx("span", { className: styles$h.groupCount, children: groupResults.length })] }), jsxRuntime.jsx("div", { className: styles$h.groupResults, children: groupResults.map((result) => {
                                             const globalIndex = results.indexOf(result);
-                                            return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$d.resultItem} ${highlightedIndex === globalIndex ? styles$d.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxRuntime.jsxs("div", { className: styles$d.resultContent, children: [jsxRuntime.jsx("div", { className: styles$d.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsxRuntime.jsx("div", { className: styles$d.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsxRuntime.jsx("div", { className: styles$d.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
+                                            return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$h.resultItem} ${highlightedIndex === globalIndex ? styles$h.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxRuntime.jsxs("div", { className: styles$h.resultContent, children: [jsxRuntime.jsx("div", { className: styles$h.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsxRuntime.jsx("div", { className: styles$h.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsxRuntime.jsx("div", { className: styles$h.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
                                         }) })] }, type));
                         }) })) })) })] }));
 };
 
-var styles$c = {"modalOverlay":"TimePickerModal-module_modalOverlay__Cbq5-","modalContent":"TimePickerModal-module_modalContent__e6py2","modalHeader":"TimePickerModal-module_modalHeader__XhTgK","closeButton":"TimePickerModal-module_closeButton__qsRAG","timeDisplay":"TimePickerModal-module_timeDisplay__voGP4","pickerContainer":"TimePickerModal-module_pickerContainer__4qn3r","pickerColumn":"TimePickerModal-module_pickerColumn__0-kWf","pickerLabel":"TimePickerModal-module_pickerLabel__e7zQ2","pickerScroll":"TimePickerModal-module_pickerScroll__5Dcvw","pickerItem":"TimePickerModal-module_pickerItem__n8sC2","selected":"TimePickerModal-module_selected__oQA8Z","pickerDivider":"TimePickerModal-module_pickerDivider__eg83F","modalActions":"TimePickerModal-module_modalActions__eJRWU","cancelButton":"TimePickerModal-module_cancelButton__zri81","confirmButton":"TimePickerModal-module_confirmButton__q2p3Q"};
+var styles$g = {"modalOverlay":"TimePickerModal-module_modalOverlay__Cbq5-","modalContent":"TimePickerModal-module_modalContent__e6py2","modalHeader":"TimePickerModal-module_modalHeader__XhTgK","closeButton":"TimePickerModal-module_closeButton__qsRAG","timeDisplay":"TimePickerModal-module_timeDisplay__voGP4","pickerContainer":"TimePickerModal-module_pickerContainer__4qn3r","pickerColumn":"TimePickerModal-module_pickerColumn__0-kWf","pickerLabel":"TimePickerModal-module_pickerLabel__e7zQ2","pickerScroll":"TimePickerModal-module_pickerScroll__5Dcvw","pickerItem":"TimePickerModal-module_pickerItem__n8sC2","selected":"TimePickerModal-module_selected__oQA8Z","pickerDivider":"TimePickerModal-module_pickerDivider__eg83F","modalActions":"TimePickerModal-module_modalActions__eJRWU","cancelButton":"TimePickerModal-module_cancelButton__zri81","confirmButton":"TimePickerModal-module_confirmButton__q2p3Q"};
 
 function TimePickerModal({ isOpen, onClose, value, onChange }) {
     const [hours, minutes] = value ? value.split(':').map(Number) : [12, 0];
@@ -2509,10 +2673,10 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
     };
     if (!isOpen)
         return null;
-    return (jsxRuntime.jsx("div", { className: styles$c.modalOverlay, onClick: onClose, children: jsxRuntime.jsxs("div", { className: styles$c.modalContent, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: styles$c.modalHeader, children: [jsxRuntime.jsx("h3", { children: "Select Time" }), jsxRuntime.jsx("button", { className: styles$c.closeButton, onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(FiX, {}) })] }), jsxRuntime.jsxs("div", { className: styles$c.timeDisplay, children: [selectedHour.toString().padStart(2, '0'), ":", selectedMinute.toString().padStart(2, '0')] }), jsxRuntime.jsxs("div", { className: styles$c.pickerContainer, children: [jsxRuntime.jsxs("div", { className: styles$c.pickerColumn, children: [jsxRuntime.jsx("div", { className: styles$c.pickerLabel, children: "Hours" }), jsxRuntime.jsx("div", { className: styles$c.pickerScroll, children: Array.from({ length: 24 }, (_, i) => (jsxRuntime.jsx("button", { className: `${styles$c.pickerItem} ${selectedHour === i ? styles$c.selected : ''}`, onClick: () => setSelectedHour(i), children: i.toString().padStart(2, '0') }, i))) })] }), jsxRuntime.jsx("div", { className: styles$c.pickerDivider, children: ":" }), jsxRuntime.jsxs("div", { className: styles$c.pickerColumn, children: [jsxRuntime.jsx("div", { className: styles$c.pickerLabel, children: "Minutes" }), jsxRuntime.jsx("div", { className: styles$c.pickerScroll, children: Array.from({ length: 60 }, (_, i) => (jsxRuntime.jsx("button", { className: `${styles$c.pickerItem} ${selectedMinute === i ? styles$c.selected : ''}`, onClick: () => setSelectedMinute(i), children: i.toString().padStart(2, '0') }, i))) })] })] }), jsxRuntime.jsxs("div", { className: styles$c.modalActions, children: [jsxRuntime.jsx("button", { className: styles$c.cancelButton, onClick: onClose, children: "Cancel" }), jsxRuntime.jsx("button", { className: styles$c.confirmButton, onClick: handleConfirm, children: "Confirm" })] })] }) }));
+    return (jsxRuntime.jsx("div", { className: styles$g.modalOverlay, onClick: onClose, children: jsxRuntime.jsxs("div", { className: styles$g.modalContent, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: styles$g.modalHeader, children: [jsxRuntime.jsx("h3", { children: "Select Time" }), jsxRuntime.jsx("button", { className: styles$g.closeButton, onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, {}) })] }), jsxRuntime.jsxs("div", { className: styles$g.timeDisplay, children: [selectedHour.toString().padStart(2, '0'), ":", selectedMinute.toString().padStart(2, '0')] }), jsxRuntime.jsxs("div", { className: styles$g.pickerContainer, children: [jsxRuntime.jsxs("div", { className: styles$g.pickerColumn, children: [jsxRuntime.jsx("div", { className: styles$g.pickerLabel, children: "Hours" }), jsxRuntime.jsx("div", { className: styles$g.pickerScroll, children: Array.from({ length: 24 }, (_, i) => (jsxRuntime.jsx("button", { className: `${styles$g.pickerItem} ${selectedHour === i ? styles$g.selected : ''}`, onClick: () => setSelectedHour(i), children: i.toString().padStart(2, '0') }, i))) })] }), jsxRuntime.jsx("div", { className: styles$g.pickerDivider, children: ":" }), jsxRuntime.jsxs("div", { className: styles$g.pickerColumn, children: [jsxRuntime.jsx("div", { className: styles$g.pickerLabel, children: "Minutes" }), jsxRuntime.jsx("div", { className: styles$g.pickerScroll, children: Array.from({ length: 60 }, (_, i) => (jsxRuntime.jsx("button", { className: `${styles$g.pickerItem} ${selectedMinute === i ? styles$g.selected : ''}`, onClick: () => setSelectedMinute(i), children: i.toString().padStart(2, '0') }, i))) })] })] }), jsxRuntime.jsxs("div", { className: styles$g.modalActions, children: [jsxRuntime.jsx("button", { className: styles$g.cancelButton, onClick: onClose, children: "Cancel" }), jsxRuntime.jsx("button", { className: styles$g.confirmButton, onClick: handleConfirm, children: "Confirm" })] })] }) }));
 }
 
-var styles$b = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","inputWrapper":"TimeInput-module_inputWrapper__4RPAn","textInput":"TimeInput-module_textInput__M3eBZ","clockButton":"TimeInput-module_clockButton__3qoub","error":"TimeInput-module_error__gJnpk","success":"TimeInput-module_success__np-lF","loading":"TimeInput-module_loading__Wb1DC","disabled":"TimeInput-module_disabled__wxiZ-"};
+var styles$f = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","inputWrapper":"TimeInput-module_inputWrapper__4RPAn","textInput":"TimeInput-module_textInput__M3eBZ","clockButton":"TimeInput-module_clockButton__3qoub","error":"TimeInput-module_error__gJnpk","success":"TimeInput-module_success__np-lF","loading":"TimeInput-module_loading__Wb1DC","disabled":"TimeInput-module_disabled__wxiZ-"};
 
 function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false, className = "" }) {
     const [showPicker, setShowPicker] = React.useState(false);
@@ -2565,20 +2729,20 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
         }
     };
     const getContainerClassName = () => {
-        const classes = [styles$b.timeInput];
+        const classes = [styles$f.timeInput];
         if (error)
-            classes.push(styles$b.error);
+            classes.push(styles$f.error);
         if (success)
-            classes.push(styles$b.success);
+            classes.push(styles$f.success);
         if (loading)
-            classes.push(styles$b.loading);
+            classes.push(styles$f.loading);
         if (disabled)
-            classes.push(styles$b.disabled);
+            classes.push(styles$f.disabled);
         if (className)
             classes.push(className);
         return classes.join(' ');
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { className: styles$b.label, children: [label, required && jsxRuntime.jsx("span", { className: styles$b.required, children: "*" })] }), jsxRuntime.jsxs("div", { className: styles$b.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$b.textInput, maxLength: 5, disabled: disabled || loading, "aria-invalid": error, "aria-required": required, inputMode: "numeric", pattern: "[0-9:]*" }), jsxRuntime.jsx("button", { type: "button", onClick: handleClockClick, className: styles$b.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsxRuntime.jsx(FiClock, { size: 20 }) })] })] }), jsxRuntime.jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { className: styles$f.label, children: [label, required && jsxRuntime.jsx("span", { className: styles$f.required, children: "*" })] }), jsxRuntime.jsxs("div", { className: styles$f.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$f.textInput, maxLength: 5, disabled: disabled || loading, "aria-invalid": error, "aria-required": required, inputMode: "numeric", pattern: "[0-9:]*" }), jsxRuntime.jsx("button", { type: "button", onClick: handleClockClick, className: styles$f.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsxRuntime.jsx(lucideReact.Clock, { size: 20 }) })] })] }), jsxRuntime.jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));
 }
 
 const ThemeContext = React.createContext(undefined);
@@ -2589,24 +2753,70 @@ const useTheme = () => {
     }
     return context;
 };
+/** Safe version of useTheme that returns null when outside a ThemeProvider */
+const useThemeSafe = () => {
+    return React.useContext(ThemeContext) ?? null;
+};
+const ThemeProvider = ({ children, defaultTheme = 'light', storageKey = 'app-theme', }) => {
+    const [theme, setThemeState] = React.useState(() => {
+        // Check localStorage first
+        const stored = localStorage.getItem(storageKey);
+        if (stored && ['light', 'dark', 'lossito', 'lossito-dark', 'dmood', 'dmood-dark', 'crt'].includes(stored)) {
+            return stored;
+        }
+        // Check system preference
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return defaultTheme;
+    });
+    const setTheme = (newTheme) => {
+        setThemeState(newTheme);
+        localStorage.setItem(storageKey, newTheme);
+    };
+    const toggleTheme = () => {
+        const themeOrder = ['light', 'dark', 'lossito', 'lossito-dark', 'dmood', 'dmood-dark', 'crt'];
+        const currentIndex = themeOrder.indexOf(theme);
+        const nextIndex = (currentIndex + 1) % themeOrder.length;
+        setTheme(themeOrder[nextIndex]);
+    };
+    React.useEffect(() => {
+        const root = document.documentElement;
+        // Apply theme attribute
+        root.setAttribute('data-theme', theme);
+        // Apply dark class if needed
+        if (theme.includes('dark')) {
+            root.classList.add('dark');
+        }
+        else {
+            root.classList.remove('dark');
+        }
+    }, [theme]);
+    // Listen for system theme changes
+    React.useEffect(() => {
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = (e) => {
+            const stored = localStorage.getItem(storageKey);
+            if (!stored) {
+                setThemeState(e.matches ? 'dark' : 'light');
+            }
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [storageKey]);
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: children }));
+};
 
-var styles$a = {"button":"ThemeSwitcher-module_button__VfRjU","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$e = {"button":"ThemeSwitcher-module_button__VfRjU","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, }) => {
-    // Try to use internal context if available, otherwise use props
-    const contextTheme = (() => {
-        try {
-            return useTheme();
-        }
-        catch {
-            return null;
-        }
-    })();
+    // Use safe version that returns null when outside a ThemeProvider
+    const contextTheme = useThemeSafe();
     const theme = currentTheme ?? contextTheme?.theme ?? 'light';
     const setTheme = onThemeChange ?? contextTheme?.setTheme ?? (() => { });
     const defaultThemes = [
-        { value: 'light', label: 'Light', icon: jsxRuntime.jsx(FiSun, {}) },
-        { value: 'dark', label: 'Dark', icon: jsxRuntime.jsx(FiMoon, {}) },
+        { value: 'light', label: 'Light', icon: jsxRuntime.jsx(lucideReact.Sun, {}) },
+        { value: 'dark', label: 'Dark', icon: jsxRuntime.jsx(lucideReact.Moon, {}) },
         { value: 'lossito', label: 'Lossito Light', icon: '✨' },
         { value: 'lossito-dark', label: 'Lossito Dark', icon: '🌑' },
         { value: 'dmood', label: 'Dmood Light', icon: '💙' },
@@ -2618,48 +2828,154 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
     if (variant === 'toggle') {
         // Simple toggle between light and dark
         const isDark = theme.includes('dark');
-        return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$a.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$a.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$a.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsxRuntime.jsx(FiMoon, { size: 14 }) : jsxRuntime.jsx(FiSun, { size: 14 }) }) }), showLabel && jsxRuntime.jsx("span", { className: styles$a.label, children: isDark ? 'Dark' : 'Light' })] }));
+        return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$e.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$e.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$e.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsxRuntime.jsx(lucideReact.Moon, { size: 14 }) : jsxRuntime.jsx(lucideReact.Sun, { size: 14 }) }) }), showLabel && jsxRuntime.jsx("span", { className: styles$e.label, children: isDark ? 'Dark' : 'Light' })] }));
     }
     if (variant === 'dropdown') {
-        return (jsxRuntime.jsxs("div", { className: `${styles$a.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$a.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsxRuntime.jsx("span", { className: styles$a.label, children: currentThemeData.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$a.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$a.dropdownItem} ${theme === t.value ? styles$a.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$a.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$a.text, children: t.label })] }, t.value))) })] }));
+        return (jsxRuntime.jsxs("div", { className: `${styles$e.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$e.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsxRuntime.jsx("span", { className: styles$e.label, children: currentThemeData.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$e.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$e.dropdownItem} ${theme === t.value ? styles$e.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$e.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$e.text, children: t.label })] }, t.value))) })] }));
     }
     // Default button variant - cycles through themes
-    return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$a.button} ${className}`, onClick: () => {
+    return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$e.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: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$a.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsxRuntime.jsx("span", { className: styles$a.label, children: currentThemeData.label })] }));
+        }, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$e.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsxRuntime.jsx("span", { className: styles$e.label, children: currentThemeData.label })] }));
 };
 
-// THIS FILE IS AUTO GENERATED
-function SiJira (props) {
-  return GenIcon({"attr":{"role":"img","viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"d":"M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0Z"},"child":[]}]})(props);
-}
-
-var styles$9 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
+var styles$d = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
 
 // Default tabs for backwards compatibility
 const defaultTabs = [
-    { id: 'details', icon: FiInfo, label: 'Dettagli' },
-    { id: 'github', icon: FiGithub, label: 'GitHub' },
-    { id: 'jira', icon: SiJira, label: 'Jira' },
-    { id: 'functional', icon: FiInfo, label: 'Analisi funzionale' }
+    { id: 'details', icon: lucideReact.Info, label: 'Dettagli' },
+    { id: 'github', icon: lucideReact.Github, label: 'GitHub' },
+    { id: 'jira', icon: lucideReact.SquareKanban, label: 'Jira' },
+    { id: 'functional', icon: lucideReact.Info, label: 'Analisi funzionale' }
 ];
 const Tabs = ({ activeTab, onTabChange, tabs: customTabs, className = '' }) => {
     const tabs = customTabs ?? defaultTabs;
-    return (jsxRuntime.jsx("div", { className: `${styles$9.tabs} ${className}`, children: tabs.map((tab) => {
+    return (jsxRuntime.jsx("div", { className: `${styles$d.tabs} ${className}`, children: tabs.map((tab) => {
             const isActive = activeTab === tab.id;
-            return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$9.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: {
+            return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$d.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: {
                             rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
                         }, transition: {
                             rotate: {
                                 duration: 0.5,
                                 ease: 'easeInOut'
                             }
-                        }, children: tab.icon && (typeof tab.icon === 'function' ? (jsxRuntime.jsx("span", { className: styles$9.tabIcon, children: React.createElement(tab.icon) })) : (jsxRuntime.jsx("span", { className: styles$9.tabIcon, children: tab.icon }))) }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
+                        }, children: tab.icon && (React.isValidElement(tab.icon) ? (jsxRuntime.jsx("span", { className: styles$d.tabIcon, children: tab.icon })) : (jsxRuntime.jsx("span", { className: styles$d.tabIcon, children: React.createElement(tab.icon) }))) }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
         }) }));
 };
 
-var styles$8 = {"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","todayButton":"Calendar-module_todayButton__Ac9zc","viewToggle":"Calendar-module_viewToggle__Fhg2t","viewButton":"Calendar-module_viewButton__J2WY6","active":"Calendar-module_active__lIqH-","weekDays":"Calendar-module_weekDays__4J-8f","weekNumberHeader":"Calendar-module_weekNumberHeader__xhKbB","weekDay":"Calendar-module_weekDay__cg8Gr","daysGrid":"Calendar-module_daysGrid__ER0GM","weekView":"Calendar-module_weekView__bdtGs","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","weekNumber":"Calendar-module_weekNumber__nlo50","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","dayViewScrollContainer":"Calendar-module_dayViewScrollContainer__84Byq","dayViewContent":"Calendar-module_dayViewContent__VU9JI","timeColumn":"Calendar-module_timeColumn__Sce-X","dayColumn":"Calendar-module_dayColumn__-j2oT","timeSlot":"Calendar-module_timeSlot__jldHq","timeLabel":"Calendar-module_timeLabel__9xLiK","hourSlot":"Calendar-module_hourSlot__z-80Q","hourLine":"Calendar-module_hourLine__fofdD","dayEvent":"Calendar-module_dayEvent__tSPFa","dayEventTitle":"Calendar-module_dayEventTitle__er03k","dayEventTime":"Calendar-module_dayEventTime__TlkeQ","currentTimeIndicator":"Calendar-module_currentTimeIndicator__GntOZ"};
+var styles$c = {"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 (jsxRuntime.jsx("svg", { className: `${styles$c.icon} ${styles$c.iconSuccess}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }));
+        case 'error':
+            return (jsxRuntime.jsx("svg", { className: `${styles$c.icon} ${styles$c.iconError}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }));
+        case 'warning':
+            return (jsxRuntime.jsx("svg", { className: `${styles$c.icon} ${styles$c.iconWarning}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.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 (jsxRuntime.jsx("svg", { className: `${styles$c.icon} ${styles$c.iconInfo}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.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$c.toastSuccess;
+        case 'error': return styles$c.toastError;
+        case 'warning': return styles$c.toastWarning;
+        case 'info': return styles$c.toastInfo;
+        default: return '';
+    }
+};
+const ToastItem = ({ toast, removeToast, }) => {
+    const [progress, setProgress] = React.useState(100);
+    const duration = toast.duration || 5000;
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            removeToast(toast.id);
+        }, duration);
+        const interval = setInterval(() => {
+            setProgress((prev) => {
+                const newProgress = prev - 100 / (duration / 100);
+                return newProgress <= 0 ? 0 : newProgress;
+            });
+        }, 100);
+        return () => {
+            clearTimeout(timer);
+            clearInterval(interval);
+        };
+    }, [toast.id, duration, removeToast]);
+    return (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$c.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), jsxRuntime.jsxs("div", { className: styles$c.content, children: [toast.title && jsxRuntime.jsx("p", { className: styles$c.title, children: toast.title }), jsxRuntime.jsx("p", { className: styles$c.message, children: toast.message })] }), jsxRuntime.jsx("button", { className: styles$c.closeButton, onClick: () => removeToast(toast.id), "aria-label": "Close notification", children: jsxRuntime.jsx("svg", { width: "16", height: "16", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$c.progressBar, initial: { width: '100%' }, animate: { width: `${progress}%` }, style: {
+                    color: toast.type === 'success' ? '#10B981'
+                        : toast.type === 'error' ? '#EF4444'
+                            : toast.type === 'warning' ? '#F59E0B'
+                                : '#3B82F6',
+                } })] }));
+};
+const ToastContainer = ({ toasts, removeToast }) => {
+    if (typeof document === 'undefined')
+        return null;
+    return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$c.toastContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "sync", children: toasts.map((toast) => (jsxRuntime.jsx(ToastItem, { toast: toast, removeToast: removeToast }, toast.id))) }) }), document.body);
+};
+
+var styles$b = {"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
+ *
+ * Navigation breadcrumb trail. Router-agnostic: pass onNavigate to handle
+ * clicks on breadcrumb links (e.g. with react-router's navigate function).
+ *
+ * @example
+ * <Breadcrumb
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Settings', href: '/settings' },
+ *     { label: 'Profile' },
+ *   ]}
+ *   onNavigate={(href) => navigate(href)}
+ * />
+ */
+const Breadcrumb = ({ items, onNavigate, className = '' }) => {
+    return (jsxRuntime.jsx("nav", { className: `${styles$b.breadcrumb} ${className}`, "aria-label": "Breadcrumb", children: items.map((item, index) => {
+            const isLast = index === items.length - 1;
+            return (jsxRuntime.jsxs(React.Fragment, { children: [index > 0 && jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14, className: styles$b.separator }), isLast || !item.href ? (jsxRuntime.jsx("span", { className: `${styles$b.item} ${isLast ? styles$b.current : ''}`, children: item.label })) : (jsxRuntime.jsx("button", { className: `${styles$b.item} ${styles$b.link}`, onClick: () => onNavigate?.(item.href), children: item.label }))] }, index));
+        }) }));
+};
+
+var styles$a = {"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
+ *
+ * A floating action button that expands to reveal quick action options.
+ * The main button rotates 45 degrees when expanded (Plus becomes X).
+ * Actions fan out above the button with staggered animations.
+ *
+ * @example
+ * <LiquidButton
+ *   actions={[
+ *     { key: 'add', label: 'Add Item', icon: Plus, color: '#2196F3', onClick: () => {} },
+ *     { key: 'edit', label: 'Edit', icon: Edit, color: '#FF9800', onClick: () => {} },
+ *   ]}
+ * />
+ */
+const LiquidButton = ({ actions, icon: Icon = lucideReact.Plus, className = '', }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const handleToggle = React.useCallback(() => {
+        setExpanded((prev) => !prev);
+    }, []);
+    const handleAction = React.useCallback((action) => {
+        setExpanded(false);
+        action.onClick();
+    }, []);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { children: expanded && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$a.overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleToggle })) }), jsxRuntime.jsxs("div", { className: `${styles$a.container} ${className}`, children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { children: expanded && (jsxRuntime.jsx("div", { className: styles$a.actions, children: actions.map((action, index) => (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: styles$a.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: [jsxRuntime.jsx(action.icon, { size: 18, color: action.color }), jsxRuntime.jsx("span", { className: styles$a.actionLabel, children: action.label })] }, action.key))) })) }), jsxRuntime.jsx(framerMotion.motion.button, { type: "button", className: styles$a.button, onClick: handleToggle, animate: { rotate: expanded ? 45 : 0 }, transition: { duration: 0.2 }, "aria-label": expanded ? 'Close actions' : 'Open actions', children: jsxRuntime.jsx(Icon, { size: 24, strokeWidth: 2.5 }) })] })] }));
+};
+
+var styles$9 = {"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","todayButton":"Calendar-module_todayButton__Ac9zc","viewToggle":"Calendar-module_viewToggle__Fhg2t","viewButton":"Calendar-module_viewButton__J2WY6","active":"Calendar-module_active__lIqH-","weekDays":"Calendar-module_weekDays__4J-8f","weekNumberHeader":"Calendar-module_weekNumberHeader__xhKbB","weekDay":"Calendar-module_weekDay__cg8Gr","daysGrid":"Calendar-module_daysGrid__ER0GM","weekView":"Calendar-module_weekView__bdtGs","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","weekNumber":"Calendar-module_weekNumber__nlo50","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","dayViewScrollContainer":"Calendar-module_dayViewScrollContainer__84Byq","dayViewContent":"Calendar-module_dayViewContent__VU9JI","timeColumn":"Calendar-module_timeColumn__Sce-X","dayColumn":"Calendar-module_dayColumn__-j2oT","timeSlot":"Calendar-module_timeSlot__jldHq","timeLabel":"Calendar-module_timeLabel__9xLiK","hourSlot":"Calendar-module_hourSlot__z-80Q","hourLine":"Calendar-module_hourLine__fofdD","dayEvent":"Calendar-module_dayEvent__tSPFa","dayEventTitle":"Calendar-module_dayEventTitle__er03k","dayEventTime":"Calendar-module_dayEventTime__TlkeQ","currentTimeIndicator":"Calendar-module_currentTimeIndicator__GntOZ"};
 
 /**
  * Calendar component - A flexible, reusable calendar for displaying events
@@ -2907,11 +3223,11 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
         return Math.floor(diff / oneWeek) + 1;
     };
     if (loading) {
-        return (jsxRuntime.jsx("div", { className: `${styles$8.calendar} ${styles$8.loading} ${className}`, style: style, children: jsxRuntime.jsx("div", { className: styles$8.loadingSpinner, children: "Loading..." }) }));
+        return (jsxRuntime.jsx("div", { className: `${styles$9.calendar} ${styles$9.loading} ${className}`, style: style, children: jsxRuntime.jsx("div", { className: styles$9.loadingSpinner, children: "Loading..." }) }));
     }
-    return (jsxRuntime.jsxs("div", { className: `${styles$8.calendar} ${className}`, style: style, children: [!hideHeader && (jsxRuntime.jsxs("div", { className: styles$8.header, children: [jsxRuntime.jsxs("div", { className: styles$8.navigation, children: [jsxRuntime.jsx("button", { onClick: handlePrevious, className: styles$8.navButton, "aria-label": "Previous", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsxRuntime.jsx("h3", { className: styles$8.title, children: calendarData.displayTitle }), jsxRuntime.jsx("button", { onClick: handleNext, className: styles$8.navButton, "aria-label": "Next", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), jsxRuntime.jsxs("div", { className: styles$8.controls, children: [jsxRuntime.jsx("button", { onClick: handleToday, className: styles$8.todayButton, children: "Today" }), jsxRuntime.jsxs("div", { className: styles$8.viewToggle, children: [jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'month' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'week' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" }), jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'day' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('day'), children: "Day" })] })] })] })), currentViewMode !== 'day' && (jsxRuntime.jsxs("div", { className: styles$8.weekDays, children: [showWeekNumbers && jsxRuntime.jsx("div", { className: styles$8.weekNumberHeader, children: "Week" }), finalDayLabels.map((day) => (jsxRuntime.jsx("div", { className: styles$8.weekDay, children: day }, day)))] })), currentViewMode === 'day' ? (
+    return (jsxRuntime.jsxs("div", { className: `${styles$9.calendar} ${className}`, style: style, children: [!hideHeader && (jsxRuntime.jsxs("div", { className: styles$9.header, children: [jsxRuntime.jsxs("div", { className: styles$9.navigation, children: [jsxRuntime.jsx("button", { onClick: handlePrevious, className: styles$9.navButton, "aria-label": "Previous", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsxRuntime.jsx("h3", { className: styles$9.title, children: calendarData.displayTitle }), jsxRuntime.jsx("button", { onClick: handleNext, className: styles$9.navButton, "aria-label": "Next", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), jsxRuntime.jsxs("div", { className: styles$9.controls, children: [jsxRuntime.jsx("button", { onClick: handleToday, className: styles$9.todayButton, children: "Today" }), jsxRuntime.jsxs("div", { className: styles$9.viewToggle, children: [jsxRuntime.jsx("button", { className: `${styles$9.viewButton} ${currentViewMode === 'month' ? styles$9.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsxRuntime.jsx("button", { className: `${styles$9.viewButton} ${currentViewMode === 'week' ? styles$9.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" }), jsxRuntime.jsx("button", { className: `${styles$9.viewButton} ${currentViewMode === 'day' ? styles$9.active : ''}`, onClick: () => setCurrentViewMode('day'), children: "Day" })] })] })] })), currentViewMode !== 'day' && (jsxRuntime.jsxs("div", { className: styles$9.weekDays, children: [showWeekNumbers && jsxRuntime.jsx("div", { className: styles$9.weekNumberHeader, children: "Week" }), finalDayLabels.map((day) => (jsxRuntime.jsx("div", { className: styles$9.weekDay, children: day }, day)))] })), currentViewMode === 'day' ? (
             // Day view layout
-            jsxRuntime.jsxs("div", { className: styles$8.dayView, children: [jsxRuntime.jsxs("div", { className: styles$8.dayViewHeader, children: [jsxRuntime.jsx("div", { className: styles$8.timeColumnHeader }), jsxRuntime.jsx("div", { className: styles$8.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), jsxRuntime.jsx("div", { className: styles$8.dayViewScrollContainer, ref: dayViewScrollRef, children: jsxRuntime.jsxs("div", { className: styles$8.dayViewContent, children: [(() => {
+            jsxRuntime.jsxs("div", { className: styles$9.dayView, children: [jsxRuntime.jsxs("div", { className: styles$9.dayViewHeader, children: [jsxRuntime.jsx("div", { className: styles$9.timeColumnHeader }), jsxRuntime.jsx("div", { className: styles$9.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), jsxRuntime.jsx("div", { className: styles$9.dayViewScrollContainer, ref: dayViewScrollRef, children: jsxRuntime.jsxs("div", { className: styles$9.dayViewContent, children: [(() => {
                                     const now = new Date();
                                     const currentHour = now.getHours();
                                     const currentMinute = now.getMinutes();
@@ -2919,21 +3235,21 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                                     const topPosition = (minutesSinceMidnight / 1440) * (24 * 60); // 24 hours * 60px per hour
                                     // Only show if viewing today
                                     const isToday = currentDate.toDateString() === now.toDateString();
-                                    return isToday ? (jsxRuntime.jsx("div", { className: styles$8.currentTimeIndicator, style: { top: `${topPosition}px` } })) : null;
-                                })(), jsxRuntime.jsx("div", { className: styles$8.timeColumn, children: Array.from({ length: 24 }, (_, hour) => (jsxRuntime.jsx("div", { className: styles$8.timeSlot, children: jsxRuntime.jsxs("span", { className: styles$8.timeLabel, children: [hour.toString().padStart(2, '0'), ":00"] }) }, hour))) }), jsxRuntime.jsx("div", { className: styles$8.dayColumn, children: Array.from({ length: 24 }, (_, hour) => {
+                                    return isToday ? (jsxRuntime.jsx("div", { className: styles$9.currentTimeIndicator, style: { top: `${topPosition}px` } })) : null;
+                                })(), jsxRuntime.jsx("div", { className: styles$9.timeColumn, children: Array.from({ length: 24 }, (_, hour) => (jsxRuntime.jsx("div", { className: styles$9.timeSlot, children: jsxRuntime.jsxs("span", { className: styles$9.timeLabel, children: [hour.toString().padStart(2, '0'), ":00"] }) }, hour))) }), jsxRuntime.jsx("div", { className: styles$9.dayColumn, children: Array.from({ length: 24 }, (_, hour) => {
                                         const hourEvents = getDayEvents(currentDate).filter(event => {
                                             if (!event.time)
                                                 return false;
                                             const eventHour = parseInt(event.time.split(':')[0]);
                                             return eventHour === hour;
                                         });
-                                        return (jsxRuntime.jsxs("div", { className: styles$8.hourSlot, onClick: (e) => {
+                                        return (jsxRuntime.jsxs("div", { className: styles$9.hourSlot, onClick: (e) => {
                                                 // Only trigger if clicking on the slot itself, not on an event
                                                 if (e.target === e.currentTarget ||
-                                                    e.target.classList.contains(styles$8.hourLine)) {
+                                                    e.target.classList.contains(styles$9.hourLine)) {
                                                     handleTimeSlotClick(hour);
                                                 }
-                                            }, style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("div", { className: styles$8.hourLine }), hourEvents.map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$8.dayEvent} ${event.status === 'completed' ? styles$8.completed : ''}`, style: {
+                                            }, style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("div", { className: styles$9.hourLine }), hourEvents.map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$9.dayEvent} ${event.status === 'completed' ? styles$9.completed : ''}`, style: {
                                                         backgroundColor: getEventColor(event),
                                                         color: getEventTextColor(event),
                                                         opacity: event.status === 'completed' ? 0.7 : 1
@@ -2951,17 +3267,17 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                                                     }, whileTap: {
                                                         scale: 0.98,
                                                         transition: { duration: 0.1 }
-                                                    }, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$8.dayEventTitle, children: [jsxRuntime.jsx("span", { className: styles$8.dayEventTime, children: event.time }), event.title] }), event.status === 'completed' && (jsxRuntime.jsx("svg", { className: styles$8.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id)))] }, hour));
-                                    }) })] }) })] })) : (jsxRuntime.jsx("div", { className: `${styles$8.daysGrid} ${currentViewMode === 'week' ? styles$8.weekView : ''}`, children: calendarData.days.map((day, index) => {
+                                                    }, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$9.dayEventTitle, children: [jsxRuntime.jsx("span", { className: styles$9.dayEventTime, children: event.time }), event.title] }), event.status === 'completed' && (jsxRuntime.jsx("svg", { className: styles$9.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id)))] }, hour));
+                                    }) })] }) })] })) : (jsxRuntime.jsx("div", { className: `${styles$9.daysGrid} ${currentViewMode === 'week' ? styles$9.weekView : ''}`, children: calendarData.days.map((day, index) => {
                     const dayEvents = getDayEvents(day);
                     const dayIsToday = isToday(day);
                     const isInCurrentMonth = currentViewMode === 'week' || isCurrentMonth(day);
                     const isWeekStart = showWeekNumbers && (index % 7 === 0);
-                    return (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$8.dayCell} ${dayIsToday ? styles$8.today : ''} ${!isInCurrentMonth ? styles$8.otherMonth : ''}`, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: {
+                    return (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$9.dayCell} ${dayIsToday ? styles$9.today : ''} ${!isInCurrentMonth ? styles$9.otherMonth : ''}`, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: {
                             duration: 0.3,
                             delay: index * 0.02,
                             ease: "easeOut"
-                        }, onClick: () => handleDateClick(day), children: [isWeekStart && (jsxRuntime.jsx("div", { className: styles$8.weekNumber, children: getWeekNumber(day) })), jsxRuntime.jsx("div", { className: styles$8.dayNumber, children: day.getDate() }), dayEvents.length > 0 && (jsxRuntime.jsxs("div", { className: styles$8.events, children: [dayEvents.slice(0, maxEventsPerDay).map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$8.event} ${event.status === 'completed' ? styles$8.completed : ''}`, style: {
+                        }, onClick: () => handleDateClick(day), children: [isWeekStart && (jsxRuntime.jsx("div", { className: styles$9.weekNumber, children: getWeekNumber(day) })), jsxRuntime.jsx("div", { className: styles$9.dayNumber, children: day.getDate() }), dayEvents.length > 0 && (jsxRuntime.jsxs("div", { className: styles$9.events, children: [dayEvents.slice(0, maxEventsPerDay).map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$9.event} ${event.status === 'completed' ? styles$9.completed : ''}`, style: {
                                             backgroundColor: getEventColor(event),
                                             color: getEventTextColor(event),
                                             opacity: event.status === 'completed' ? 0.7 : 1
@@ -2979,7 +3295,7 @@ function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDat
                                         }, whileTap: {
                                             scale: 0.98,
                                             transition: { duration: 0.1 }
-                                        }, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$8.eventTitle, children: [event.time && (jsxRuntime.jsx("span", { className: styles$8.eventTime, children: event.time })), event.title] }), event.status === 'completed' && (jsxRuntime.jsx("svg", { className: styles$8.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id))), dayEvents.length > maxEventsPerDay && (jsxRuntime.jsxs("div", { className: styles$8.moreEvents, children: ["+", dayEvents.length - maxEventsPerDay, " more"] }))] })), dayEvents.length === 0 && emptyState && (jsxRuntime.jsx("div", { className: styles$8.emptyState, children: emptyState }))] }, `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`));
+                                        }, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$9.eventTitle, children: [event.time && (jsxRuntime.jsx("span", { className: styles$9.eventTime, children: event.time })), event.title] }), event.status === 'completed' && (jsxRuntime.jsx("svg", { className: styles$9.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id))), dayEvents.length > maxEventsPerDay && (jsxRuntime.jsxs("div", { className: styles$9.moreEvents, children: ["+", dayEvents.length - maxEventsPerDay, " more"] }))] })), dayEvents.length === 0 && emptyState && (jsxRuntime.jsx("div", { className: styles$9.emptyState, children: emptyState }))] }, `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`));
                 }) }))] }));
 }
 
@@ -3049,10 +3365,10 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
     if (variant === 'top') {
         return (jsxRuntime.jsx(framerMotion.motion.nav, { className: `${styles.navbar} ${styles.navbarTop} ${className}`, initial: { y: -100 }, animate: { y: 0 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: navContent }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(isMobile || window.innerWidth <= 768) && (jsxRuntime.jsx(framerMotion.motion.button, { className: styles.mobileMenuButton, onClick: toggleMobileMenu, "aria-label": "Toggle navigation menu", whileTap: { scale: 0.9 }, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isMobileMenuOpen ? (jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -90, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 90, opacity: 0 }, children: jsxRuntime.jsx(FiX, {}) }, "close")) : (jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: 90, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: -90, opacity: 0 }, children: jsxRuntime.jsx(FiMenu, {}) }, "menu")) }) })), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isMobileMenuOpen && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.mobileBackdrop, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: () => setIsMobileMenuOpen(false) })) }), jsxRuntime.jsx(framerMotion.motion.nav, { className: `${styles.navbar} ${styles[`navbar${variant.charAt(0).toUpperCase() + variant.slice(1)}`]} ${isMobileMenuOpen ? styles.mobileMenuOpen : ''} ${className}`, initial: variant === 'sidebar' ? { x: -300 } : { opacity: 0 }, animate: variant === 'sidebar' ? { x: isMobileMenuOpen || !isMobile ? 0 : -300 } : { opacity: 1 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: navContent })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(isMobile || window.innerWidth <= 768) && (jsxRuntime.jsx(framerMotion.motion.button, { className: styles.mobileMenuButton, onClick: toggleMobileMenu, "aria-label": "Toggle navigation menu", whileTap: { scale: 0.9 }, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isMobileMenuOpen ? (jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -90, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 90, opacity: 0 }, children: jsxRuntime.jsx(lucideReact.X, {}) }, "close")) : (jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: 90, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: -90, opacity: 0 }, children: jsxRuntime.jsx(lucideReact.Menu, {}) }, "menu")) }) })), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isMobileMenuOpen && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.mobileBackdrop, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: () => setIsMobileMenuOpen(false) })) }), jsxRuntime.jsx(framerMotion.motion.nav, { className: `${styles.navbar} ${styles[`navbar${variant.charAt(0).toUpperCase() + variant.slice(1)}`]} ${isMobileMenuOpen ? styles.mobileMenuOpen : ''} ${className}`, initial: variant === 'sidebar' ? { x: -300 } : { opacity: 0 }, animate: variant === 'sidebar' ? { x: isMobileMenuOpen || !isMobile ? 0 : -300 } : { opacity: 1 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: navContent })] }));
 };
 
-var styles$7 = {"container":"MoodChart-module_container__MB1Vr","chart":"MoodChart-module_chart__4-spu","gridLine":"MoodChart-module_gridLine__YJpZ8","line":"MoodChart-module_line__LfeUX","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$8 = {"container":"MoodChart-module_container__MB1Vr","chart":"MoodChart-module_chart__4-spu","gridLine":"MoodChart-module_gridLine__YJpZ8","line":"MoodChart-module_line__LfeUX","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 = React.useRef(null);
@@ -3061,7 +3377,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
     const [selectedMood, setSelectedMood] = React.useState(null);
     const [tooltipPosition, setTooltipPosition] = React.useState({ x: 0, y: 0 });
     const [isHoveringTooltip, setIsHoveringTooltip] = React.useState(false);
-    const margin = { top: 20, right: 20, bottom: 50, left: 40 };
+    const margin = React.useMemo(() => ({ top: 20, right: 20, bottom: 50, left: 40 }), []);
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
     const processedData = React.useMemo(() => {
@@ -3110,27 +3426,27 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
         g.selectAll('.grid-line-y')
             .data(yScale.ticks(5))
             .enter().append('line')
-            .attr('class', styles$7.gridLine)
+            .attr('class', styles$8.gridLine)
             .attr('x1', 0)
             .attr('y1', d => yScale(d))
             .attr('x2', chartWidth)
             .attr('y2', d => yScale(d));
         g.append('path')
             .datum(processedData)
-            .attr('class', styles$7.line)
+            .attr('class', styles$8.line)
             .attr('d', line);
         g.append('g')
-            .attr('class', styles$7.xAxis)
+            .attr('class', styles$8.xAxis)
             .attr('transform', `translate(0,${chartHeight})`)
             .call(d3__namespace.axisBottom(xScale)
             .tickFormat(d => d3__namespace.timeFormat('%m/%d')(d)));
         g.append('g')
-            .attr('class', styles$7.yAxis)
+            .attr('class', styles$8.yAxis)
             .call(d3__namespace.axisLeft(yScale));
         g.selectAll('.mood-circle')
             .data(processedData)
             .enter().append('circle')
-            .attr('class', styles$7.dataPoint)
+            .attr('class', styles$8.dataPoint)
             .attr('cx', d => xScale(d.date))
             .attr('cy', d => yScale(d.rating))
             .attr('r', 5)
@@ -3184,7 +3500,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             setSelectedMood(null);
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { className: styles$7.container, ref: containerRef, children: [jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$7.chart }), selectedMood && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: styles$7.tooltip, style: {
+    return (jsxRuntime.jsxs("div", { className: styles$8.container, ref: containerRef, children: [jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$8.chart }), selectedMood && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: styles$8.tooltip, style: {
                     position: 'absolute',
                     pointerEvents: 'auto',
                     left: tooltipPosition.x,
@@ -3193,10 +3509,10 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
                 }, onMouseEnter: () => setIsHoveringTooltip(true), onMouseLeave: () => {
                     setIsHoveringTooltip(false);
                     setSelectedMood(null);
-                }, children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipHeader, children: [jsxRuntime.jsx("div", { className: styles$7.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxRuntime.jsxs("div", { className: styles$7.tooltipRating, children: [jsxRuntime.jsx("span", { className: styles$7.ratingValue, children: selectedMood.rating }), jsxRuntime.jsx("span", { className: styles$7.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsxRuntime.jsx("div", { className: styles$7.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsxRuntime.jsx("span", { className: styles$7.tag, children: tag }, index))) })), selectedMood.comment && (jsxRuntime.jsx("div", { className: styles$7.tooltipComment, children: selectedMood.comment }))] }))] }));
+                }, children: [jsxRuntime.jsxs("div", { className: styles$8.tooltipHeader, children: [jsxRuntime.jsx("div", { className: styles$8.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxRuntime.jsxs("div", { className: styles$8.tooltipRating, children: [jsxRuntime.jsx("span", { className: styles$8.ratingValue, children: selectedMood.rating }), jsxRuntime.jsx("span", { className: styles$8.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsxRuntime.jsx("div", { className: styles$8.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsxRuntime.jsx("span", { className: styles$8.tag, children: tag }, index))) })), selectedMood.comment && (jsxRuntime.jsx("div", { className: styles$8.tooltipComment, children: selectedMood.comment }))] }))] }));
 };
 
-var styles$6 = {"container":"QuantifiableHabitsChart-module_container__X5SBp","controls":"QuantifiableHabitsChart-module_controls__O-ObQ","viewToggle":"QuantifiableHabitsChart-module_viewToggle__24hKA","viewButton":"QuantifiableHabitsChart-module_viewButton__WFU6j","active":"QuantifiableHabitsChart-module_active__Pjqy9","viewIcon":"QuantifiableHabitsChart-module_viewIcon__b2mfk","viewLabel":"QuantifiableHabitsChart-module_viewLabel__9MjCU","aggregationToggle":"QuantifiableHabitsChart-module_aggregationToggle__WnxwB","aggregationButton":"QuantifiableHabitsChart-module_aggregationButton__sGCxX","aggregationIcon":"QuantifiableHabitsChart-module_aggregationIcon__HIaEf","aggregationLabel":"QuantifiableHabitsChart-module_aggregationLabel__Yc-S-","legend":"QuantifiableHabitsChart-module_legend__3Ki7c","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","chart":"QuantifiableHabitsChart-module_chart__FMeA-","gridLine":"QuantifiableHabitsChart-module_gridLine__CTNIq","line":"QuantifiableHabitsChart-module_line__CpYip","xAxis":"QuantifiableHabitsChart-module_xAxis__lbgBG","yAxis":"QuantifiableHabitsChart-module_yAxis__Y6WeV","dataPoint":"QuantifiableHabitsChart-module_dataPoint__s8UMX","tooltip":"QuantifiableHabitsChart-module_tooltip__Fay8N","visible":"QuantifiableHabitsChart-module_visible__-KSJq","tooltipHeader":"QuantifiableHabitsChart-module_tooltipHeader__7Q2up","tooltipEmoji":"QuantifiableHabitsChart-module_tooltipEmoji__atV3T","tooltipDot":"QuantifiableHabitsChart-module_tooltipDot__YbdFh","tooltipInfo":"QuantifiableHabitsChart-module_tooltipInfo__XC7WF","tooltipDate":"QuantifiableHabitsChart-module_tooltipDate__6V6Xi","tooltipValue":"QuantifiableHabitsChart-module_tooltipValue__ldASB"};
+var styles$7 = {"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","xAxis":"QuantifiableHabitsChart-module_xAxis__lbgBG","yAxis":"QuantifiableHabitsChart-module_yAxis__Y6WeV","dataPoint":"QuantifiableHabitsChart-module_dataPoint__s8UMX","tooltip":"QuantifiableHabitsChart-module_tooltip__Fay8N","visible":"QuantifiableHabitsChart-module_visible__-KSJq","tooltipHeader":"QuantifiableHabitsChart-module_tooltipHeader__7Q2up","tooltipEmoji":"QuantifiableHabitsChart-module_tooltipEmoji__atV3T","tooltipDot":"QuantifiableHabitsChart-module_tooltipDot__YbdFh","tooltipInfo":"QuantifiableHabitsChart-module_tooltipInfo__XC7WF","tooltipDate":"QuantifiableHabitsChart-module_tooltipDate__6V6Xi","tooltipValue":"QuantifiableHabitsChart-module_tooltipValue__ldASB"};
 
 // Default colors as fallback
 const DEFAULT_HABIT_COLORS = {
@@ -3209,7 +3525,7 @@ const DEFAULT_HABIT_COLORS = {
     'Calories': '#FF9F1C',
     'Study': '#C774E8'
 };
-const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewType = 'daily', periodType = 'month', habitColors: customHabitColors = {}, habitEmojis: customHabitEmojis = {}, onDataPointClick }) => {
+const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewType = 'daily', periodType = 'month', habitColors: customHabitColors = {}, habitEmojis: customHabitEmojis = {}, onDataPointClick, hideControls = false, compactLegend = false }) => {
     const svgRef = React.useRef(null);
     const tooltipRef = React.useRef(null);
     const [viewType, setViewType] = React.useState(defaultViewType);
@@ -3217,7 +3533,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
     const [hoveredHabit, setHoveredHabit] = React.useState(null);
     const [tooltipData, setTooltipData] = React.useState(null);
     const [aggregationMode, setAggregationMode] = React.useState('average');
-    const margin = { top: 20, right: 20, bottom: 50, left: 50 };
+    const margin = React.useMemo(() => ({ top: 20, right: 20, bottom: 50, left: 50 }), []);
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
     const habits = React.useMemo(() => Object.keys(data).filter(key => key !== 'dates'), [data]);
@@ -3250,10 +3566,10 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
                 return ['daily'];
         }
     }, [periodType]);
-    const getColor = (habit) => {
+    const getColor = React.useCallback((habit) => {
         // First check custom colors, then defaults, then generate deterministic color
         return customHabitColors[habit] || DEFAULT_HABIT_COLORS[habit] || `hsl(${Math.abs(habit.split('').reduce((a, b) => a + b.charCodeAt(0), 0)) % 360}, 70%, 50%)`;
-    };
+    }, [customHabitColors]);
     // Aggregate data based on view type
     const aggregateData = React.useMemo(() => {
         if (viewType === 'daily' || !data.dates.length) {
@@ -3349,7 +3665,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         g.selectAll('.grid-line-y')
             .data(yScale.ticks(5))
             .enter().append('line')
-            .attr('class', styles$6.gridLine)
+            .attr('class', styles$7.gridLine)
             .attr('x1', 0)
             .attr('y1', d => yScale(d))
             .attr('x2', chartWidth)
@@ -3362,7 +3678,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
             const habitData = dates.map((date, i) => [date, aggregateData[habit][i]]).filter(d => typeof d[1] === 'number');
             g.append('path')
                 .datum(habitData)
-                .attr('class', styles$6.line)
+                .attr('class', styles$7.line)
                 .attr('d', line)
                 .attr('stroke', getColor(habit))
                 .attr('opacity', hoveredHabit && hoveredHabit !== habit ? 0.3 : 1);
@@ -3409,7 +3725,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
             g.selectAll(`.circle-${habit}`)
                 .data(habitData)
                 .enter().append('circle')
-                .attr('class', (_d, i) => `${styles$6.dataPoint} circle-${habit}-${i}`)
+                .attr('class', (_d, i) => `${styles$7.dataPoint} circle-${habit}-${i}`)
                 .attr('cx', d => xScale(d[0]))
                 .attr('cy', d => yScale(d[1]))
                 .attr('r', 4)
@@ -3471,7 +3787,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
             xAxisGenerator.ticks(tickCount);
         }
         const xAxis = g.append('g')
-            .attr('class', styles$6.xAxis)
+            .attr('class', styles$7.xAxis)
             .attr('transform', `translate(0,${chartHeight})`)
             .call(xAxisGenerator);
         // Rotate labels for better readability if needed
@@ -3483,9 +3799,9 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
                 .attr('transform', 'rotate(-45)');
         }
         g.append('g')
-            .attr('class', styles$6.yAxis)
+            .attr('class', styles$7.yAxis)
             .call(d3__namespace.axisLeft(yScale));
-    }, [aggregateData, activeHabits, chartWidth, chartHeight, margin, hoveredHabit, customHabitColors, onDataPointClick]);
+    }, [aggregateData, activeHabits, chartWidth, chartHeight, margin, hoveredHabit, onDataPointClick, getColor, height, viewType, width]);
     // Format date for tooltip display
     const formatTooltipDate = (dateStr, viewType) => {
         const date = new Date(dateStr);
@@ -3515,13 +3831,13 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         quarterly: { icon: '📊', label: 'Quarterly' }
     };
     const shouldShowAggregationToggle = viewType !== 'daily';
-    return (jsxRuntime.jsxs("div", { className: styles$6.container, children: [jsxRuntime.jsxs("div", { className: styles$6.controls, children: [jsxRuntime.jsx("div", { className: styles$6.viewToggle, children: availableViewTypes.map(type => (jsxRuntime.jsxs("button", { className: `${styles$6.viewButton} ${viewType === type ? styles$6.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsxRuntime.jsx("span", { className: styles$6.viewIcon, children: viewTypeConfig[type].icon }), jsxRuntime.jsx("span", { className: styles$6.viewLabel, children: viewTypeConfig[type].label })] }, type))) }), shouldShowAggregationToggle && (jsxRuntime.jsxs("div", { className: styles$6.aggregationToggle, children: [jsxRuntime.jsxs("button", { className: `${styles$6.aggregationButton} ${aggregationMode === 'average' ? styles$6.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsxRuntime.jsx("span", { className: styles$6.aggregationIcon, children: "\uD83D\uDCCA" }), jsxRuntime.jsx("span", { className: styles$6.aggregationLabel, children: "Average" })] }), jsxRuntime.jsxs("button", { className: `${styles$6.aggregationButton} ${aggregationMode === 'sum' ? styles$6.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsxRuntime.jsx("span", { className: styles$6.aggregationIcon, children: "\u2795" }), jsxRuntime.jsx("span", { className: styles$6.aggregationLabel, children: "Sum" })] })] }))] }), jsxRuntime.jsx("div", { className: styles$6.legend, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$6.legendItem} ${!activeHabits.includes(habit) ? styles$6.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$6.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$6.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$6.legendLabel, children: habit })] }, habit))) }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$6.chart }), tooltipData && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: `${styles$6.tooltip} ${tooltipData ? styles$6.visible : ''}`, style: {
+    return (jsxRuntime.jsxs("div", { className: styles$7.container, children: [!hideControls && (jsxRuntime.jsxs("div", { className: styles$7.controls, children: [jsxRuntime.jsx("div", { className: styles$7.viewToggle, children: availableViewTypes.map(type => (jsxRuntime.jsxs("button", { className: `${styles$7.viewButton} ${viewType === type ? styles$7.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsxRuntime.jsx("span", { className: styles$7.viewIcon, children: viewTypeConfig[type].icon }), jsxRuntime.jsx("span", { className: styles$7.viewLabel, children: viewTypeConfig[type].label })] }, type))) }), shouldShowAggregationToggle && (jsxRuntime.jsxs("div", { className: styles$7.aggregationToggle, children: [jsxRuntime.jsxs("button", { className: `${styles$7.aggregationButton} ${aggregationMode === 'average' ? styles$7.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsxRuntime.jsx("span", { className: styles$7.aggregationIcon, children: "\uD83D\uDCCA" }), jsxRuntime.jsx("span", { className: styles$7.aggregationLabel, children: "Average" })] }), jsxRuntime.jsxs("button", { className: `${styles$7.aggregationButton} ${aggregationMode === 'sum' ? styles$7.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsxRuntime.jsx("span", { className: styles$7.aggregationIcon, children: "\u2795" }), jsxRuntime.jsx("span", { className: styles$7.aggregationLabel, children: "Sum" })] })] }))] })), jsxRuntime.jsx("div", { className: `${styles$7.legend}${compactLegend ? ` ${styles$7.compactLegend}` : ''}`, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$7.legendItem} ${!activeHabits.includes(habit) ? styles$7.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$7.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$7.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$7.legendLabel, children: habit })] }, habit))) }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$7.chart }), tooltipData && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: `${styles$7.tooltip} ${tooltipData ? styles$7.visible : ''}`, style: {
                     left: `${tooltipData.x}px`,
                     top: `${tooltipData.y - 80}px`
-                }, children: [jsxRuntime.jsxs("div", { className: styles$6.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$6.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$6.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxRuntime.jsx("span", { children: tooltipData.habit })] }), jsxRuntime.jsxs("div", { className: styles$6.tooltipInfo, children: [jsxRuntime.jsx("div", { className: styles$6.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxRuntime.jsxs("div", { className: styles$6.tooltipValue, children: [jsxRuntime.jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsxRuntime.jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));
+                }, children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$7.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxRuntime.jsx("span", { children: tooltipData.habit })] }), jsxRuntime.jsxs("div", { className: styles$7.tooltipInfo, children: [jsxRuntime.jsx("div", { className: styles$7.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxRuntime.jsxs("div", { className: styles$7.tooltipValue, children: [jsxRuntime.jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsxRuntime.jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));
 };
 
-var styles$5 = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","title":"SleepChart-module_title__6-QII","legend":"SleepChart-module_legend__VsqQj","legendItem":"SleepChart-module_legendItem__2c1nd","sleepDot":"SleepChart-module_sleepDot__qCY6O","wakeDot":"SleepChart-module_wakeDot__-RcrT","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","sleepBar":"SleepChart-module_sleepBar__Hk76f","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA","tooltip":"SleepChart-module_tooltip__jQBv1","visible":"SleepChart-module_visible__wy0ck","tooltipHeader":"SleepChart-module_tooltipHeader__5BdPL","tooltipEmoji":"SleepChart-module_tooltipEmoji__c5vtz","tooltipInfo":"SleepChart-module_tooltipInfo__9Yrno","tooltipRow":"SleepChart-module_tooltipRow__CuDaE","tooltipLabel":"SleepChart-module_tooltipLabel__7SNzQ","tooltipValue":"SleepChart-module_tooltipValue__FoAVy","tooltipDuration":"SleepChart-module_tooltipDuration__d2wBW"};
+var styles$6 = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","title":"SleepChart-module_title__6-QII","legend":"SleepChart-module_legend__VsqQj","legendItem":"SleepChart-module_legendItem__2c1nd","sleepDot":"SleepChart-module_sleepDot__qCY6O","wakeDot":"SleepChart-module_wakeDot__-RcrT","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","sleepBar":"SleepChart-module_sleepBar__Hk76f","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA","tooltip":"SleepChart-module_tooltip__jQBv1","visible":"SleepChart-module_visible__wy0ck","tooltipHeader":"SleepChart-module_tooltipHeader__5BdPL","tooltipEmoji":"SleepChart-module_tooltipEmoji__c5vtz","tooltipInfo":"SleepChart-module_tooltipInfo__9Yrno","tooltipRow":"SleepChart-module_tooltipRow__CuDaE","tooltipLabel":"SleepChart-module_tooltipLabel__7SNzQ","tooltipValue":"SleepChart-module_tooltipValue__FoAVy","tooltipDuration":"SleepChart-module_tooltipDuration__d2wBW"};
 
 const parseTimeToDecimal = (time) => {
     const [hours, minutes] = time.split(':').map(Number);
@@ -3579,7 +3895,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
         g.selectAll('.grid-line-x')
             .data(d3__namespace.range(18, 43, 1))
             .enter().append('line')
-            .attr('class', styles$5.gridLine)
+            .attr('class', styles$6.gridLine)
             .attr('x1', d => xScale(d))
             .attr('y1', 0)
             .attr('x2', d => xScale(d))
@@ -3612,7 +3928,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
                 return;
             const barHeight = yScale.bandwidth();
             const sleepGroup = g.append('g')
-                .attr('class', styles$5.sleepBar)
+                .attr('class', styles$6.sleepBar)
                 .style('cursor', 'pointer')
                 .on('click', () => onDateClick?.(dayData.date));
             // Handle sleep time and wake hour separately
@@ -3778,7 +4094,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
                         (hour % 24) === 12 ? '12 PM' : `${(hour % 24) - 12} PM`
         }));
         const xAxis = g.append('g')
-            .attr('class', styles$5.xAxis)
+            .attr('class', styles$6.xAxis)
             .attr('transform', `translate(0,${chartHeight})`)
             .call(d3__namespace.axisBottom(xScale)
             .tickValues(xAxisTicks.map(t => t.value))
@@ -3795,25 +4111,25 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
         });
         const yAxisTicks = yDomain.filter((_, i) => i % Math.ceil(yDomain.length / 10) === 0);
         g.append('g')
-            .attr('class', styles$5.yAxis)
+            .attr('class', styles$6.yAxis)
             .call(d3__namespace.axisLeft(yScale)
             .tickValues(yAxisTicks)
             .tickFormat(d => {
             const date = new Date(d);
             return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}`;
         }));
-    }, [sleepData, chartWidth, chartHeight, margin, onDateClick]);
-    return (jsxRuntime.jsxs("div", { className: styles$5.container, children: [jsxRuntime.jsxs("div", { className: styles$5.header, children: [jsxRuntime.jsx("h3", { className: styles$5.title, children: "Sleep Pattern" }), jsxRuntime.jsxs("div", { className: styles$5.legend, children: [jsxRuntime.jsxs("div", { className: styles$5.legendItem, children: [jsxRuntime.jsx("span", { className: styles$5.sleepDot }), jsxRuntime.jsx("span", { children: "Sleep Time" })] }), jsxRuntime.jsxs("div", { className: styles$5.legendItem, children: [jsxRuntime.jsx("span", { className: styles$5.wakeDot }), jsxRuntime.jsx("span", { children: "Wake Time" })] })] })] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$5.chart }), tooltipData && (jsxRuntime.jsxs("div", { className: `${styles$5.tooltip} ${tooltipData ? styles$5.visible : ''}`, style: {
+    }, [sleepData, chartWidth, chartHeight, margin, onDateClick, height, width]);
+    return (jsxRuntime.jsxs("div", { className: styles$6.container, children: [jsxRuntime.jsxs("div", { className: styles$6.header, children: [jsxRuntime.jsx("h3", { className: styles$6.title, children: "Sleep Pattern" }), jsxRuntime.jsxs("div", { className: styles$6.legend, children: [jsxRuntime.jsxs("div", { className: styles$6.legendItem, children: [jsxRuntime.jsx("span", { className: styles$6.sleepDot }), jsxRuntime.jsx("span", { children: "Sleep Time" })] }), jsxRuntime.jsxs("div", { className: styles$6.legendItem, children: [jsxRuntime.jsx("span", { className: styles$6.wakeDot }), jsxRuntime.jsx("span", { children: "Wake Time" })] })] })] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$6.chart }), tooltipData && (jsxRuntime.jsxs("div", { className: `${styles$6.tooltip} ${tooltipData ? styles$6.visible : ''}`, style: {
                     left: `${tooltipData.x}px`,
                     top: `${tooltipData.y}px`
-                }, children: [jsxRuntime.jsxs("div", { className: styles$5.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$5.tooltipEmoji, children: "\uD83D\uDE34" }), jsxRuntime.jsx("span", { children: new Date(tooltipData.date).toLocaleDateString('en-US', {
+                }, children: [jsxRuntime.jsxs("div", { className: styles$6.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$6.tooltipEmoji, children: "\uD83D\uDE34" }), jsxRuntime.jsx("span", { children: new Date(tooltipData.date).toLocaleDateString('en-US', {
                                     weekday: 'short',
                                     month: 'short',
                                     day: 'numeric'
-                                }) })] }), jsxRuntime.jsxs("div", { className: styles$5.tooltipInfo, children: [tooltipData.sleepTime && (jsxRuntime.jsxs("div", { className: styles$5.tooltipRow, children: [jsxRuntime.jsxs("span", { className: styles$5.tooltipLabel, children: [jsxRuntime.jsx("span", { children: "\uD83C\uDF19" }), jsxRuntime.jsx("span", { children: "Sleep:" })] }), jsxRuntime.jsx("span", { className: styles$5.tooltipValue, children: tooltipData.sleepTime })] })), tooltipData.wakeTime && (jsxRuntime.jsxs("div", { className: styles$5.tooltipRow, children: [jsxRuntime.jsxs("span", { className: styles$5.tooltipLabel, children: [jsxRuntime.jsx("span", { children: "\u2600\uFE0F" }), jsxRuntime.jsx("span", { children: "Wake:" })] }), jsxRuntime.jsx("span", { className: styles$5.tooltipValue, children: tooltipData.wakeTime })] })), tooltipData.duration !== null && (jsxRuntime.jsxs("div", { className: styles$5.tooltipDuration, children: [jsxRuntime.jsx("span", { children: "\u23F1\uFE0F" }), jsxRuntime.jsxs("span", { children: [Math.floor(tooltipData.duration), "h ", Math.round((tooltipData.duration % 1) * 60), "m"] })] }))] })] }))] }));
+                                }) })] }), jsxRuntime.jsxs("div", { className: styles$6.tooltipInfo, children: [tooltipData.sleepTime && (jsxRuntime.jsxs("div", { className: styles$6.tooltipRow, children: [jsxRuntime.jsxs("span", { className: styles$6.tooltipLabel, children: [jsxRuntime.jsx("span", { children: "\uD83C\uDF19" }), jsxRuntime.jsx("span", { children: "Sleep:" })] }), jsxRuntime.jsx("span", { className: styles$6.tooltipValue, children: tooltipData.sleepTime })] })), tooltipData.wakeTime && (jsxRuntime.jsxs("div", { className: styles$6.tooltipRow, children: [jsxRuntime.jsxs("span", { className: styles$6.tooltipLabel, children: [jsxRuntime.jsx("span", { children: "\u2600\uFE0F" }), jsxRuntime.jsx("span", { children: "Wake:" })] }), jsxRuntime.jsx("span", { className: styles$6.tooltipValue, children: tooltipData.wakeTime })] })), tooltipData.duration !== null && (jsxRuntime.jsxs("div", { className: styles$6.tooltipDuration, children: [jsxRuntime.jsx("span", { children: "\u23F1\uFE0F" }), jsxRuntime.jsxs("span", { children: [Math.floor(tooltipData.duration), "h ", Math.round((tooltipData.duration % 1) * 60), "m"] })] }))] })] }))] }));
 };
 
-var styles$4 = {"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$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"};
 
 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'];
@@ -3867,20 +4183,20 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
             g.append('text')
                 .attr('x', weekIndex * (cellSize + cellGap))
                 .attr('y', -10)
-                .attr('class', styles$4.monthLabel)
+                .attr('class', styles$5.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$4.dayLabel)
+                .attr('class', styles$5.dayLabel)
                 .attr('text-anchor', 'end')
                 .attr('alignment-baseline', 'middle')
                 .text(day);
         });
         const tooltip = d3__namespace.select('body').append('div')
-            .attr('class', styles$4.tooltip)
+            .attr('class', styles$5.tooltip)
             .style('opacity', 0)
             .style('position', 'absolute');
         const daysToShow = weeksToShow * 7;
@@ -3899,7 +4215,7 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
                 .attr('width', cellSize)
                 .attr('height', cellSize)
                 .attr('rx', 3)
-                .attr('class', styles$4.cell)
+                .attr('class', styles$5.cell)
                 .attr('data-date', dateString)
                 .attr('data-value', isTrue ? 'true' : 'false')
                 .style('fill', isTrue ? habitColor : '#4D4D4DFF');
@@ -3927,10 +4243,10 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
             tooltip.remove();
         };
     }, [data, habitName, width, height, startDate, endDate, weeksToShow, habitColor, habitEmoji]);
-    return (jsxRuntime.jsxs("div", { className: styles$4.container, children: [jsxRuntime.jsxs("h3", { className: styles$4.title, children: [jsxRuntime.jsx("span", { className: styles$4.habitEmoji, children: habitEmoji }), habitName] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$4.chart }), jsxRuntime.jsxs("div", { className: styles$4.legend, children: [jsxRuntime.jsxs("span", { className: styles$4.legendItem, children: [jsxRuntime.jsx("span", { className: styles$4.legendColor, style: { backgroundColor: habitColor } }), "Done"] }), jsxRuntime.jsxs("span", { className: styles$4.legendItem, children: [jsxRuntime.jsx("span", { className: styles$4.legendColor, style: { backgroundColor: '#4D4D4DFF' } }), "Not done"] })] })] }));
+    return (jsxRuntime.jsxs("div", { className: styles$5.container, children: [jsxRuntime.jsxs("h3", { className: styles$5.title, children: [jsxRuntime.jsx("span", { className: styles$5.habitEmoji, children: habitEmoji }), habitName] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$5.chart }), jsxRuntime.jsxs("div", { className: styles$5.legend, children: [jsxRuntime.jsxs("span", { className: styles$5.legendItem, children: [jsxRuntime.jsx("span", { className: styles$5.legendColor, style: { backgroundColor: habitColor } }), "Done"] }), jsxRuntime.jsxs("span", { className: styles$5.legendItem, children: [jsxRuntime.jsx("span", { className: styles$5.legendColor, style: { backgroundColor: '#4D4D4DFF' } }), "Not done"] })] })] }));
 };
 
-var styles$3 = {"container":"SunburstChart-module_container__w1ZYc","title":"SunburstChart-module_title__T6Ak7","chart":"SunburstChart-module_chart__BFM6E","tooltip":"SunburstChart-module_tooltip__TuTAN"};
+var styles$4 = {"container":"SunburstChart-module_container__w1ZYc","title":"SunburstChart-module_title__T6Ak7","chart":"SunburstChart-module_chart__BFM6E","tooltip":"SunburstChart-module_tooltip__TuTAN"};
 
 const COLOR_PALETTE = [
     '#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
@@ -3957,6 +4273,15 @@ const getTextColor$1 = (backgroundColor) => {
     // Use a threshold of 0.5 for better contrast
     return luminance > 0.5 ? '#000000' : '#ffffff';
 };
+// Helper to create an interpolated arc generator for transitions
+const createInterpolatedArc = (currX0, currX1, currY0, currY1, radius) => {
+    return d3__namespace.arc()
+        .startAngle(() => currX0)
+        .endAngle(() => currX1)
+        .innerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY0))))
+        .outerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY1))))
+        .cornerRadius(3);
+};
 const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Chart', tagColors = {}, unit = 'items', centerLabel }) => {
     const svgRef = React.useRef(null);
     const colorMap = React.useRef(new Map()).current;
@@ -3997,6 +4322,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         const partition = d3__namespace.partition()
             .size([2 * Math.PI, radius * radius]);
         const nodes = partition(root).descendants();
+        // Store original positions for reset
         nodes.forEach((d) => {
             const node = d;
             node.x0Original = d.x0;
@@ -4011,7 +4337,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .outerRadius(d => Math.sqrt(d.y1))
             .cornerRadius(3);
         const tooltip = d3__namespace.select('body').append('div')
-            .attr('class', styles$3.tooltip)
+            .attr('class', styles$4.tooltip)
             .style('opacity', 0)
             .style('position', 'absolute');
         // Function to reset to original view
@@ -4036,12 +4362,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     node.x1 = currX1;
                     node.y0 = currY0;
                     node.y1 = currY1;
-                    const interpolatedArc = d3__namespace.arc()
-                        .startAngle(() => currX0)
-                        .endAngle(() => currX1)
-                        .innerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY0))))
-                        .outerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY1))))
-                        .cornerRadius(3);
+                    const interpolatedArc = createInterpolatedArc(currX0, currX1, currY0, currY1, radius);
                     return interpolatedArc(node) || '';
                 };
             });
@@ -4097,7 +4418,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 }
                 // Calculate new positions based on the original positions
                 // ALWAYS scale to fill the full circle, no minimum size preservation
-                let newX0 = xScale(node.x0Original);
+                const newX0 = xScale(node.x0Original);
                 let newX1 = xScale(node.x1Original);
                 // Ensure proper scaling even for very small segments
                 // The clicked node's extent should always map to full circle
@@ -4142,12 +4463,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     node.x1 = currX1;
                     node.y0 = currY0;
                     node.y1 = currY1;
-                    const interpolatedArc = d3__namespace.arc()
-                        .startAngle(() => currX0)
-                        .endAngle(() => currX1)
-                        .innerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY0))))
-                        .outerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY1))))
-                        .cornerRadius(3);
+                    const interpolatedArc = createInterpolatedArc(currX0, currX1, currY0, currY1, radius);
                     return interpolatedArc(node) || '';
                 };
             });
@@ -4173,7 +4489,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         const paths = g.selectAll('path')
             .data(nodes.filter(d => d.depth > 0 && d.value && d.value > 0))
             .enter().append('path')
-            .attr('d', arc)
+            .attr('d', d => arc(d) || '')
             .attr('fill', d => {
             let ancestor = d;
             while (ancestor.depth > 1 && ancestor.parent) {
@@ -4194,7 +4510,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             if (focusedNodeRef.current) {
                 return;
             }
-            const hoveredElement = this;
+            const hoveredElement = event.currentTarget;
             // Show tooltip for all nodes
             tooltip.transition()
                 .duration(200)
@@ -4440,11 +4756,11 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         return () => {
             tooltip.remove();
         };
-    }, [data, width, height, colorMap, radius, tagColors, unit, centerLabel]);
-    return (jsxRuntime.jsxs("div", { className: styles$3.container, children: [jsxRuntime.jsx("h3", { className: styles$3.title, children: title }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$3.chart })] }));
+    }, [data, width, height, colorMap, radius, tagColors, unit, centerLabel, getColor]);
+    return (jsxRuntime.jsxs("div", { className: styles$4.container, children: [jsxRuntime.jsx("h3", { className: styles$4.title, children: title }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$4.chart })] }));
 };
 
-var styles$2 = {"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$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"};
 
 const DEFAULT_COLORS = [
     '#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
@@ -4484,7 +4800,7 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
             .innerRadius(radius * 0.7)
             .outerRadius(radius * 0.7);
         const tooltip = d3__namespace.select('body').append('div')
-            .attr('class', styles$2.tooltip)
+            .attr('class', styles$3.tooltip)
             .style('opacity', 0)
             .style('position', 'absolute');
         const pieData = pie(data);
@@ -4508,7 +4824,7 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
             d3__namespace.select(this)
                 .transition()
                 .duration(200)
-                .attr('d', d => hoverArc(d))
+                .attr('d', (d) => hoverArc(d))
                 .style('filter', 'drop-shadow(0 4px 12px rgba(0,0,0,0.25))');
             tooltip.transition()
                 .duration(200)
@@ -4522,18 +4838,21 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
                 .style('left', (event.pageX + 10) + 'px')
                 .style('top', (event.pageY - 28) + 'px');
         })
-            .on('mouseout', function (event, d) {
+            .on('mouseout', function (_event, _d) {
             d3__namespace.select(this)
                 .transition()
                 .duration(200)
-                .attr('d', d => arc(d))
+                .attr('d', (d) => arc(d))
                 .style('filter', 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))');
             tooltip.transition()
                 .duration(500)
                 .style('opacity', 0);
         });
         // Calculate average background color for center text contrast
-        const avgColor = data.length > 0 ? d3__namespace.interpolateRgb.gamma(2.2)(...data.map((d, i) => d.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length]))(0.5) : '#ffffff';
+        const colors = data.map((d, i) => d.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length]);
+        const avgColor = colors.length >= 2
+            ? d3__namespace.interpolateRgb.gamma(2.2)(colors[0], colors[1])(0.5)
+            : colors[0] || '#ffffff';
         const centerTextColor = getTextColor(avgColor);
         // Add center text for donut
         g.append('text')
@@ -4579,13 +4898,13 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
         return () => {
             tooltip.remove();
         };
-    }, [data, width, height, radius]);
-    return (jsxRuntime.jsxs("div", { className: styles$2.container, children: [jsxRuntime.jsx("h3", { className: styles$2.title, children: title }), jsxRuntime.jsxs("div", { className: styles$2.chartContainer, children: [jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$2.chart }), showLegend && (jsxRuntime.jsx("div", { className: styles$2.legend, children: data.map((item, index) => (jsxRuntime.jsxs("div", { className: styles$2.legendItem, children: [jsxRuntime.jsx("span", { className: styles$2.legendColor, style: {
+    }, [data, width, height, radius, centerLabel, unit]);
+    return (jsxRuntime.jsxs("div", { className: styles$3.container, children: [jsxRuntime.jsx("h3", { className: styles$3.title, children: title }), jsxRuntime.jsxs("div", { className: styles$3.chartContainer, children: [jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$3.chart }), showLegend && (jsxRuntime.jsx("div", { className: styles$3.legend, children: data.map((item, index) => (jsxRuntime.jsxs("div", { className: styles$3.legendItem, children: [jsxRuntime.jsx("span", { className: styles$3.legendColor, style: {
                                         backgroundColor: item.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length]
-                                    } }), jsxRuntime.jsx("span", { className: styles$2.legendLabel, children: item.name }), jsxRuntime.jsx("span", { className: styles$2.legendValue, children: item.value.toLocaleString() })] }, item.name))) }))] })] }));
+                                    } }), jsxRuntime.jsx("span", { className: styles$3.legendLabel, children: item.name }), jsxRuntime.jsx("span", { className: styles$3.legendValue, children: item.value.toLocaleString() })] }, item.name))) }))] })] }));
 };
 
-var styles$1 = {"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"};
+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"};
 
 const ImageSlideshow = ({ images, autoPlay = false, autoPlayInterval = 3000, showThumbnails = true, showControls = true, showIndicators = true, showCaptions = true, loop = true, fadeTransition = false, enableFullscreen = true, enableDownload = false, enableShare = false, enableDragReorder = false, lazyLoading = true, preloadAdjacent = true, className = '', onImageChange, onDownload, onShare, onImageReorder, initialIndex = 0, }) => {
     const [currentIndex, setCurrentIndex] = React.useState(initialIndex);
@@ -4624,9 +4943,9 @@ const ImageSlideshow = ({ images, autoPlay = false, autoPlayInterval = 3000, sho
             goToSlide(imageOrder.length - 1);
         }
     }, [currentIndex, imageOrder.length, loop, goToSlide]);
-    const togglePlayPause = () => {
-        setIsPlaying(!isPlaying);
-    };
+    const togglePlayPause = React.useCallback(() => {
+        setIsPlaying(prev => !prev);
+    }, []);
     const toggleFullscreen = () => {
         if (!document.fullscreenElement) {
             slideshowRef.current?.requestFullscreen();
@@ -4750,7 +5069,7 @@ const ImageSlideshow = ({ images, autoPlay = false, autoPlayInterval = 3000, sho
                 }
             });
         }
-    }, [currentIndex, images, loop, preloadAdjacent]);
+    }, [currentIndex, imageOrder, images, loop, preloadAdjacent]);
     React.useEffect(() => {
         const handleFullscreenChange = () => {
             setIsFullscreen(!!document.fullscreenElement);
@@ -4801,9 +5120,9 @@ const ImageSlideshow = ({ images, autoPlay = false, autoPlayInterval = 3000, sho
         };
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [goToPrevious, goToNext]);
+    }, [goToPrevious, goToNext, enableFullscreen, togglePlayPause]);
     if (!imageOrder || imageOrder.length === 0) {
-        return (jsxRuntime.jsx("div", { className: `${styles$1.slideshow} ${styles$1.empty} ${className}`, children: jsxRuntime.jsx("div", { className: styles$1.emptyState, children: jsxRuntime.jsx("span", { children: "No images to display" }) }) }));
+        return (jsxRuntime.jsx("div", { className: `${styles$2.slideshow} ${styles$2.empty} ${className}`, children: jsxRuntime.jsx("div", { className: styles$2.emptyState, children: jsxRuntime.jsx("span", { children: "No images to display" }) }) }));
     }
     const slideVariants = {
         enter: (direction) => ({
@@ -4823,16 +5142,16 @@ const ImageSlideshow = ({ images, autoPlay = false, autoPlayInterval = 3000, sho
     };
     const currentImage = imageOrder[currentIndex];
     const isImageLoaded = loadedImages.has(currentImage.id);
-    return (jsxRuntime.jsxs("div", { ref: slideshowRef, className: `${styles$1.slideshow} ${isFullscreen ? styles$1.fullscreen : ''} ${showThumbnails && imageOrder.length > 1 ? styles$1.hasThumbnails : ''} ${className}`, children: [jsxRuntime.jsxs("div", { className: styles$1.mainContainer, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", custom: 1, children: jsxRuntime.jsxs(framerMotion.motion.div, { custom: 1, variants: slideVariants, initial: "enter", animate: "center", exit: "exit", transition: {
+    return (jsxRuntime.jsxs("div", { ref: slideshowRef, className: `${styles$2.slideshow} ${isFullscreen ? styles$2.fullscreen : ''} ${showThumbnails && imageOrder.length > 1 ? styles$2.hasThumbnails : ''} ${className}`, children: [jsxRuntime.jsxs("div", { className: styles$2.mainContainer, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", custom: 1, children: jsxRuntime.jsxs(framerMotion.motion.div, { custom: 1, variants: slideVariants, initial: "enter", animate: "center", exit: "exit", transition: {
                                 x: { type: "spring", stiffness: 300, damping: 30 },
                                 opacity: { duration: 0.3 }
-                            }, className: styles$1.slide, children: [jsxRuntime.jsx("img", { ref: imageRef, src: lazyLoading && !isImageLoaded ? undefined : currentImage.src, "data-src": lazyLoading ? currentImage.src : undefined, srcSet: currentImage.srcSet, sizes: currentImage.sizes, alt: currentImage.alt, className: styles$1.image, draggable: false, onLoad: () => handleImageLoad(currentImage.id), style: {
+                            }, className: styles$2.slide, children: [jsxRuntime.jsx("img", { ref: imageRef, src: lazyLoading && !isImageLoaded ? undefined : currentImage.src, "data-src": lazyLoading ? currentImage.src : undefined, srcSet: currentImage.srcSet, sizes: currentImage.sizes, alt: currentImage.alt, className: styles$2.image, draggable: false, onLoad: () => handleImageLoad(currentImage.id), style: {
                                         opacity: lazyLoading && !isImageLoaded ? 0 : 1,
                                         transition: 'opacity 0.3s ease'
-                                    } }), lazyLoading && !isImageLoaded && (jsxRuntime.jsx("div", { className: styles$1.imageLoader, children: jsxRuntime.jsx("div", { className: styles$1.spinner }) }))] }, currentIndex) }), showControls && imageOrder.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlPrev}`, onClick: goToPrevious, disabled: !loop && currentIndex === 0, "aria-label": "Previous image", children: jsxRuntime.jsx(FiChevronLeft, {}) }), jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlNext}`, onClick: goToNext, disabled: !loop && currentIndex === imageOrder.length - 1, "aria-label": "Next image", children: jsxRuntime.jsx(FiChevronRight, {}) })] })), jsxRuntime.jsxs("div", { className: styles$1.topControls, children: [enableFullscreen && (jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlAction}`, onClick: toggleFullscreen, "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen', title: isFullscreen ? 'Exit fullscreen (F)' : 'Enter fullscreen (F)', children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(FiMaximize, {}) }) })), enableDownload && (jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlAction}`, onClick: handleDownload, "aria-label": "Download image", title: "Download image", children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(FiDownload, {}) }) })), enableShare && (jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlAction}`, onClick: handleShare, "aria-label": "Share image", title: "Share image", children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(FiShare2, {}) }) }))] }), autoPlay && imageOrder.length > 1 && (jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlPlay}`, onClick: togglePlayPause, "aria-label": isPlaying ? 'Pause slideshow' : 'Play slideshow', title: isPlaying ? 'Pause slideshow (Space)' : 'Play slideshow (Space)', children: isPlaying ? jsxRuntime.jsx(FiPause, {}) : jsxRuntime.jsx(FiPlay, {}) })), showCaptions && (currentImage.caption || currentImage.title) && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$1.caption, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: [currentImage.title && (jsxRuntime.jsx("h3", { className: styles$1.captionTitle, children: currentImage.title })), currentImage.caption && (jsxRuntime.jsx("p", { className: styles$1.captionText, children: currentImage.caption })), currentImage.metadata && (jsxRuntime.jsxs("div", { className: styles$1.imageMetadata, children: [currentImage.metadata.photographer && (jsxRuntime.jsxs("span", { className: styles$1.metadataItem, children: ["\uD83D\uDCF7 ", currentImage.metadata.photographer] })), currentImage.metadata.location && (jsxRuntime.jsxs("span", { className: styles$1.metadataItem, children: ["\uD83D\uDCCD ", currentImage.metadata.location] })), currentImage.metadata.camera && (jsxRuntime.jsxs("span", { className: styles$1.metadataItem, children: ["\uD83D\uDCF9 ", currentImage.metadata.camera] }))] }))] }))] }), showIndicators && imageOrder.length > 1 && (jsxRuntime.jsx("div", { className: styles$1.indicators, children: imageOrder.map((_, index) => (jsxRuntime.jsx(framerMotion.motion.button, { className: `${styles$1.indicator} ${index === currentIndex ? styles$1.indicatorActive : ''}`, onClick: () => goToSlide(index), whileHover: { scale: 1.2 }, whileTap: { scale: 0.8 }, "aria-label": `Go to slide ${index + 1}` }, index))) })), showThumbnails && imageOrder.length > 1 && (jsxRuntime.jsx("div", { className: `${styles$1.thumbnails} ${isDragging ? styles$1.thumbnailsDragging : ''}`, children: imageOrder.map((image, index) => (jsxRuntime.jsx(framerMotion.motion.button, { className: `${styles$1.thumbnail} ${index === currentIndex ? styles$1.thumbnailActive : ''} ${draggedIndex === index ? styles$1.thumbnailDragged : ''}`, onClick: () => goToSlide(index), whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, "aria-label": `Go to ${image.alt}`, draggable: enableDragReorder, onDragStart: (e) => handleDragStart(e, index), onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, index), title: image.title || image.alt, children: jsxRuntime.jsx("img", { src: image.src, alt: image.alt, className: styles$1.thumbnailImage, draggable: false }) }, image.id))) }))] }));
+                                    } }), lazyLoading && !isImageLoaded && (jsxRuntime.jsx("div", { className: styles$2.imageLoader, children: jsxRuntime.jsx("div", { className: styles$2.spinner }) }))] }, currentIndex) }), showControls && imageOrder.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: `${styles$2.control} ${styles$2.controlPrev}`, onClick: goToPrevious, disabled: !loop && currentIndex === 0, "aria-label": "Previous image", children: jsxRuntime.jsx(lucideReact.ChevronLeft, {}) }), jsxRuntime.jsx("button", { className: `${styles$2.control} ${styles$2.controlNext}`, onClick: goToNext, disabled: !loop && currentIndex === imageOrder.length - 1, "aria-label": "Next image", children: jsxRuntime.jsx(lucideReact.ChevronRight, {}) })] })), jsxRuntime.jsxs("div", { className: styles$2.topControls, children: [enableFullscreen && (jsxRuntime.jsx("button", { className: `${styles$2.control} ${styles$2.controlAction}`, onClick: toggleFullscreen, "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen', title: isFullscreen ? 'Exit fullscreen (F)' : 'Enter fullscreen (F)', children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(lucideReact.Maximize, {}) }) })), enableDownload && (jsxRuntime.jsx("button", { className: `${styles$2.control} ${styles$2.controlAction}`, onClick: handleDownload, "aria-label": "Download image", title: "Download image", children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(lucideReact.Download, {}) }) })), enableShare && (jsxRuntime.jsx("button", { className: `${styles$2.control} ${styles$2.controlAction}`, onClick: handleShare, "aria-label": "Share image", title: "Share image", children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(lucideReact.Share2, {}) }) }))] }), autoPlay && imageOrder.length > 1 && (jsxRuntime.jsx("button", { className: `${styles$2.control} ${styles$2.controlPlay}`, onClick: togglePlayPause, "aria-label": isPlaying ? 'Pause slideshow' : 'Play slideshow', title: isPlaying ? 'Pause slideshow (Space)' : 'Play slideshow (Space)', children: isPlaying ? jsxRuntime.jsx(lucideReact.Pause, {}) : jsxRuntime.jsx(lucideReact.Play, {}) })), showCaptions && (currentImage.caption || currentImage.title) && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$2.caption, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: [currentImage.title && (jsxRuntime.jsx("h3", { className: styles$2.captionTitle, children: currentImage.title })), currentImage.caption && (jsxRuntime.jsx("p", { className: styles$2.captionText, children: currentImage.caption })), currentImage.metadata && (jsxRuntime.jsxs("div", { className: styles$2.imageMetadata, children: [currentImage.metadata.photographer && (jsxRuntime.jsxs("span", { className: styles$2.metadataItem, children: ["\uD83D\uDCF7 ", currentImage.metadata.photographer] })), currentImage.metadata.location && (jsxRuntime.jsxs("span", { className: styles$2.metadataItem, children: ["\uD83D\uDCCD ", currentImage.metadata.location] })), currentImage.metadata.camera && (jsxRuntime.jsxs("span", { className: styles$2.metadataItem, children: ["\uD83D\uDCF9 ", currentImage.metadata.camera] }))] }))] }))] }), showIndicators && imageOrder.length > 1 && (jsxRuntime.jsx("div", { className: styles$2.indicators, children: imageOrder.map((_, index) => (jsxRuntime.jsx(framerMotion.motion.button, { className: `${styles$2.indicator} ${index === currentIndex ? styles$2.indicatorActive : ''}`, onClick: () => goToSlide(index), whileHover: { scale: 1.2 }, whileTap: { scale: 0.8 }, "aria-label": `Go to slide ${index + 1}` }, index))) })), showThumbnails && imageOrder.length > 1 && (jsxRuntime.jsx("div", { className: `${styles$2.thumbnails} ${isDragging ? styles$2.thumbnailsDragging : ''}`, children: imageOrder.map((image, index) => (jsxRuntime.jsx(framerMotion.motion.button, { className: `${styles$2.thumbnail} ${index === currentIndex ? styles$2.thumbnailActive : ''} ${draggedIndex === index ? styles$2.thumbnailDragged : ''}`, onClick: () => goToSlide(index), whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, "aria-label": `Go to ${image.alt}`, draggable: enableDragReorder, onDragStart: (e) => handleDragStart(e, index), onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, index), title: image.title || image.alt, children: jsxRuntime.jsx("img", { src: image.src, alt: image.alt, className: styles$2.thumbnailImage, draggable: false }) }, image.id))) }))] }));
 };
 
-var styles = {"container":"Table-module_container__CH3T9","header":"Table-module_header__qVoF2","title":"Table-module_title__DSZgm","actions":"Table-module_actions__2J1i0","controls":"Table-module_controls__3WToN","searchBox":"Table-module_searchBox__bh3f3","searchIcon":"Table-module_searchIcon__1pQ5l","searchInput":"Table-module_searchInput__SrK6l","clearButton":"Table-module_clearButton__4Fysz","clearFiltersButton":"Table-module_clearFiltersButton__yFLI9","resultCount":"Table-module_resultCount__RR7Z6","loading":"Table-module_loading__xxSIa","spinner":"Table-module_spinner__T8mdH","empty":"Table-module_empty__-qPi2","emptyIcon":"Table-module_emptyIcon__FLViS","tableWrapper":"Table-module_tableWrapper__LvHGH","stickyHeader":"Table-module_stickyHeader__Dz0O8","table":"Table-module_table__4T9xo","striped":"Table-module_striped__TBcT6","compact":"Table-module_compact__w-QVs","th":"Table-module_th__bpKfX","td":"Table-module_td__HaytM","hoverable":"Table-module_hoverable__4aHgq","headerCell":"Table-module_headerCell__WUy2w","headerText":"Table-module_headerText__WGAqz","sortButton":"Table-module_sortButton__CJwYq","sortIcon":"Table-module_sortIcon__G48h1","columnFilter":"Table-module_columnFilter__hwNd2","tr":"Table-module_tr__-j8Fa","selected":"Table-module_selected__pjiMr","clickable":"Table-module_clickable__9R5oq","checkboxColumn":"Table-module_checkboxColumn__SpbCr","actionsColumn":"Table-module_actionsColumn__7x--N","actionButtons":"Table-module_actionButtons__8JQhr","actionButton":"Table-module_actionButton__9EQZu","actionButtonPrimary":"Table-module_actionButtonPrimary__Xyzgu","actionButtonSecondary":"Table-module_actionButtonSecondary__RiR1E","actionButtonDanger":"Table-module_actionButtonDanger__7aX-2","actionButtonWarning":"Table-module_actionButtonWarning__2s73k","actionButtonSuccess":"Table-module_actionButtonSuccess__DvbtN","checkbox":"Table-module_checkbox__9LC-f","nullValue":"Table-module_nullValue__TVTmT","badge":"Table-module_badge__OO-UL","badgeSuccess":"Table-module_badgeSuccess__uIJVY","badgeDanger":"Table-module_badgeDanger__Y6RPD","code":"Table-module_code__SIFLQ","pagination":"Table-module_pagination__UVcSr","pageInfo":"Table-module_pageInfo__e-k17","pageControls":"Table-module_pageControls__htKNN","pageButton":"Table-module_pageButton__9ukDT","pageNumber":"Table-module_pageNumber__qpnbj","pageSizeSelect":"Table-module_pageSizeSelect__GbSKL","bulkActions":"Table-module_bulkActions__7Rz-X","bulkActionButtons":"Table-module_bulkActionButtons__pb8M2","bulkActionButton":"Table-module_bulkActionButton__UOTDm","selectionCount":"Table-module_selectionCount__ZwGuQ","bulkPrimary":"Table-module_bulkPrimary__qx71n","bulkSecondary":"Table-module_bulkSecondary__WNEOF","bulkDanger":"Table-module_bulkDanger__Aqmye","bulkWarning":"Table-module_bulkWarning__jEkYC","bulkSuccess":"Table-module_bulkSuccess__VQd5s","bulkCustom":"Table-module_bulkCustom__BP47V","horizontalScroll":"Table-module_horizontalScroll__Cgx7N"};
+var styles$1 = {"container":"Table-module_container__CH3T9","header":"Table-module_header__qVoF2","title":"Table-module_title__DSZgm","actions":"Table-module_actions__2J1i0","controls":"Table-module_controls__3WToN","searchBox":"Table-module_searchBox__bh3f3","searchIcon":"Table-module_searchIcon__1pQ5l","searchInput":"Table-module_searchInput__SrK6l","clearButton":"Table-module_clearButton__4Fysz","clearFiltersButton":"Table-module_clearFiltersButton__yFLI9","resultCount":"Table-module_resultCount__RR7Z6","loading":"Table-module_loading__xxSIa","spinner":"Table-module_spinner__T8mdH","empty":"Table-module_empty__-qPi2","emptyIcon":"Table-module_emptyIcon__FLViS","tableWrapper":"Table-module_tableWrapper__LvHGH","stickyHeader":"Table-module_stickyHeader__Dz0O8","table":"Table-module_table__4T9xo","striped":"Table-module_striped__TBcT6","compact":"Table-module_compact__w-QVs","th":"Table-module_th__bpKfX","td":"Table-module_td__HaytM","hoverable":"Table-module_hoverable__4aHgq","headerCell":"Table-module_headerCell__WUy2w","headerText":"Table-module_headerText__WGAqz","sortButton":"Table-module_sortButton__CJwYq","sortIcon":"Table-module_sortIcon__G48h1","columnFilter":"Table-module_columnFilter__hwNd2","tr":"Table-module_tr__-j8Fa","selected":"Table-module_selected__pjiMr","clickable":"Table-module_clickable__9R5oq","checkboxColumn":"Table-module_checkboxColumn__SpbCr","actionsColumn":"Table-module_actionsColumn__7x--N","actionButtons":"Table-module_actionButtons__8JQhr","actionButton":"Table-module_actionButton__9EQZu","actionButtonPrimary":"Table-module_actionButtonPrimary__Xyzgu","actionButtonSecondary":"Table-module_actionButtonSecondary__RiR1E","actionButtonDanger":"Table-module_actionButtonDanger__7aX-2","actionButtonWarning":"Table-module_actionButtonWarning__2s73k","actionButtonSuccess":"Table-module_actionButtonSuccess__DvbtN","checkbox":"Table-module_checkbox__9LC-f","nullValue":"Table-module_nullValue__TVTmT","badge":"Table-module_badge__OO-UL","badgeSuccess":"Table-module_badgeSuccess__uIJVY","badgeDanger":"Table-module_badgeDanger__Y6RPD","code":"Table-module_code__SIFLQ","pagination":"Table-module_pagination__UVcSr","pageInfo":"Table-module_pageInfo__e-k17","pageControls":"Table-module_pageControls__htKNN","pageButton":"Table-module_pageButton__9ukDT","pageNumber":"Table-module_pageNumber__qpnbj","pageSizeSelect":"Table-module_pageSizeSelect__GbSKL","bulkActions":"Table-module_bulkActions__7Rz-X","bulkActionButtons":"Table-module_bulkActionButtons__pb8M2","bulkActionButton":"Table-module_bulkActionButton__UOTDm","selectionCount":"Table-module_selectionCount__ZwGuQ","bulkPrimary":"Table-module_bulkPrimary__qx71n","bulkSecondary":"Table-module_bulkSecondary__WNEOF","bulkDanger":"Table-module_bulkDanger__Aqmye","bulkWarning":"Table-module_bulkWarning__jEkYC","bulkSuccess":"Table-module_bulkSuccess__VQd5s","bulkCustom":"Table-module_bulkCustom__BP47V","horizontalScroll":"Table-module_horizontalScroll__Cgx7N"};
 
 /**
  * A comprehensive table component with sorting, filtering, pagination, selection, and row actions.
@@ -5033,7 +5352,7 @@ const TableComponent = function Table({ data, columns, keyField = 'id', title, s
             ...action.style,
             ...action.buttonStyles?.style
         };
-        // Handle icon size - cast to any to allow CSS custom properties
+        // Handle icon size - set CSS custom property
         if (action.buttonStyles?.iconSize || actionButtonStyles?.iconSize) {
             baseStyles['--icon-size'] = typeof (action.buttonStyles?.iconSize || actionButtonStyles?.iconSize) === 'number'
                 ? `${action.buttonStyles?.iconSize || actionButtonStyles?.iconSize}px`
@@ -5042,13 +5361,13 @@ const TableComponent = function Table({ data, columns, keyField = 'id', title, s
         return baseStyles;
     }, [actionButtonStyles]);
     const getButtonClassName = React.useCallback((action) => {
-        const baseClass = styles.actionButton;
-        const variantClass = action.variant === 'primary' ? styles.actionButtonPrimary :
-            action.variant === 'danger' ? styles.actionButtonDanger :
-                action.variant === 'warning' ? styles.actionButtonWarning :
-                    action.variant === 'success' ? styles.actionButtonSuccess :
+        const baseClass = styles$1.actionButton;
+        const variantClass = action.variant === 'primary' ? styles$1.actionButtonPrimary :
+            action.variant === 'danger' ? styles$1.actionButtonDanger :
+                action.variant === 'warning' ? styles$1.actionButtonWarning :
+                    action.variant === 'success' ? styles$1.actionButtonSuccess :
                         action.variant === 'custom' ? '' :
-                            styles.actionButtonSecondary;
+                            styles$1.actionButtonSecondary;
         const globalCustomClass = actionButtonStyles?.className || '';
         const actionCustomClass = action.className || '';
         const buttonCustomClass = action.buttonStyles?.className || '';
@@ -5056,23 +5375,23 @@ const TableComponent = function Table({ data, columns, keyField = 'id', title, s
     }, [actionButtonStyles]);
     // Loading state
     if (loading) {
-        return (jsxRuntime.jsx("div", { className: `${styles.container} ${className}`, children: jsxRuntime.jsxs("div", { className: styles.loading, children: [jsxRuntime.jsx("div", { className: styles.spinner }), jsxRuntime.jsx("span", { children: "Loading..." })] }) }));
+        return (jsxRuntime.jsx("div", { className: `${styles$1.container} ${className}`, children: jsxRuntime.jsxs("div", { className: styles$1.loading, children: [jsxRuntime.jsx("div", { className: styles$1.spinner }), jsxRuntime.jsx("span", { children: "Loading..." })] }) }));
     }
     // Empty state
     if (data.length === 0) {
-        return (jsxRuntime.jsxs("div", { className: `${styles.container} ${className}`, children: [title && jsxRuntime.jsx("h2", { className: styles.title, children: title }), jsxRuntime.jsxs("div", { className: styles.empty, children: [jsxRuntime.jsx("span", { className: styles.emptyIcon, children: "\uD83D\uDCCA" }), jsxRuntime.jsx("p", { children: emptyMessage })] })] }));
+        return (jsxRuntime.jsxs("div", { className: `${styles$1.container} ${className}`, children: [title && jsxRuntime.jsx("h2", { className: styles$1.title, children: title }), jsxRuntime.jsxs("div", { className: styles$1.empty, children: [jsxRuntime.jsx("span", { className: styles$1.emptyIcon, children: "\uD83D\uDCCA" }), jsxRuntime.jsx("p", { children: emptyMessage })] })] }));
     }
-    return (jsxRuntime.jsxs("div", { className: `${styles.container} ${className}`, children: [(title || actions || bulkActions) && (jsxRuntime.jsxs("div", { className: styles.header, children: [title && jsxRuntime.jsx("h2", { className: styles.title, children: title }), (actions || bulkActions) && (jsxRuntime.jsxs("div", { className: styles.bulkActions, children: [actions && selectedItems.length > 0 && (jsxRuntime.jsx("div", { className: styles.actions, children: actions(selectedItems) })), bulkActions && bulkActions.length > 0 && selectedItems.length > 0 && (jsxRuntime.jsx("div", { className: styles.bulkActionButtons, children: bulkActions.map((bulkAction, index) => {
+    return (jsxRuntime.jsxs("div", { className: `${styles$1.container} ${className}`, children: [(title || actions || bulkActions) && (jsxRuntime.jsxs("div", { className: styles$1.header, children: [title && jsxRuntime.jsx("h2", { className: styles$1.title, children: title }), (actions || bulkActions) && (jsxRuntime.jsxs("div", { className: styles$1.bulkActions, children: [actions && selectedItems.length > 0 && (jsxRuntime.jsx("div", { className: styles$1.actions, children: actions(selectedItems) })), bulkActions && bulkActions.length > 0 && selectedItems.length > 0 && (jsxRuntime.jsx("div", { className: styles$1.bulkActionButtons, children: bulkActions.map((bulkAction, index) => {
                                     const isDisabled = (bulkAction.disabled && bulkAction.disabled(selectedItems)) ||
                                         (bulkAction.minSelection && selectedItems.length < bulkAction.minSelection) ||
                                         (bulkAction.maxSelection && selectedItems.length > bulkAction.maxSelection);
-                                    return (jsxRuntime.jsxs("button", { className: `${styles.bulkActionButton} ${bulkAction.variant === 'primary' ? styles.bulkPrimary :
-                                            bulkAction.variant === 'secondary' ? styles.bulkSecondary :
-                                                bulkAction.variant === 'danger' ? styles.bulkDanger :
-                                                    bulkAction.variant === 'warning' ? styles.bulkWarning :
-                                                        bulkAction.variant === 'success' ? styles.bulkSuccess :
-                                                            bulkAction.variant === 'custom' ? styles.bulkCustom :
-                                                                styles.bulkPrimary} ${bulkAction.className || ''}`, style: bulkAction.style, disabled: !!isDisabled, onClick: async () => {
+                                    return (jsxRuntime.jsxs("button", { className: `${styles$1.bulkActionButton} ${bulkAction.variant === 'primary' ? styles$1.bulkPrimary :
+                                            bulkAction.variant === 'secondary' ? styles$1.bulkSecondary :
+                                                bulkAction.variant === 'danger' ? styles$1.bulkDanger :
+                                                    bulkAction.variant === 'warning' ? styles$1.bulkWarning :
+                                                        bulkAction.variant === 'success' ? styles$1.bulkSuccess :
+                                                            bulkAction.variant === 'custom' ? styles$1.bulkCustom :
+                                                                styles$1.bulkPrimary} ${bulkAction.className || ''}`, style: bulkAction.style, disabled: !!isDisabled, onClick: async () => {
                                             if (bulkAction.confirmMessage) {
                                                 const message = typeof bulkAction.confirmMessage === 'function'
                                                     ? bulkAction.confirmMessage(selectedItems)
@@ -5081,27 +5400,27 @@ const TableComponent = function Table({ data, columns, keyField = 'id', title, s
                                                     return;
                                             }
                                             await bulkAction.onClick(selectedItems);
-                                        }, title: bulkAction.label, "aria-label": bulkAction.label, children: [bulkAction.icon, jsxRuntime.jsx("span", { children: bulkAction.label }), jsxRuntime.jsxs("span", { className: styles.selectionCount, children: ["(", selectedItems.length, ")"] })] }, index));
-                                }) }))] }))] })), (searchable || hasActiveFilters) && (jsxRuntime.jsxs("div", { className: styles.controls, children: [searchable && (jsxRuntime.jsxs("div", { className: styles.searchBox, children: [jsxRuntime.jsx("span", { className: styles.searchIcon, children: "\uD83D\uDD0D" }), jsxRuntime.jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: e => {
+                                        }, title: bulkAction.label, "aria-label": bulkAction.label, children: [bulkAction.icon, jsxRuntime.jsx("span", { children: bulkAction.label }), jsxRuntime.jsxs("span", { className: styles$1.selectionCount, children: ["(", selectedItems.length, ")"] })] }, index));
+                                }) }))] }))] })), (searchable || hasActiveFilters) && (jsxRuntime.jsxs("div", { className: styles$1.controls, children: [searchable && (jsxRuntime.jsxs("div", { className: styles$1.searchBox, children: [jsxRuntime.jsx("span", { className: styles$1.searchIcon, children: "\uD83D\uDD0D" }), jsxRuntime.jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: e => {
                                     setSearchQuery(e.target.value);
                                     setCurrentPage(1);
-                                }, className: styles.searchInput }), searchQuery && (jsxRuntime.jsx("button", { className: styles.clearButton, onClick: () => setSearchQuery(''), children: "\u2715" }))] })), hasActiveFilters && (jsxRuntime.jsx("button", { className: styles.clearFiltersButton, onClick: clearFilters, children: "Clear All Filters" })), jsxRuntime.jsxs("div", { className: styles.resultCount, children: [filteredData.length, " ", filteredData.length === 1 ? 'result' : 'results'] })] })), jsxRuntime.jsx("div", { className: `${styles.tableWrapper} ${stickyHeader ? styles.stickyHeader : ''} ${horizontalScroll ? styles.horizontalScroll : ''}`, children: jsxRuntime.jsxs("table", { className: `
-                        ${styles.table} 
-                        ${striped ? styles.striped : ''} 
-                        ${hoverable ? styles.hoverable : ''}
-                        ${compact ? styles.compact : ''}
-                    `, role: "table", "aria-label": title || 'Data table', "aria-rowcount": sortedData.length, "aria-describedby": title ? `${title.replace(/\s+/g, '-').toLowerCase()}-summary` : undefined, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [selectable && (jsxRuntime.jsx("th", { className: styles.checkboxColumn, scope: "col", children: jsxRuntime.jsx("input", { type: "checkbox", checked: allCurrentPageSelected, ref: input => {
+                                }, className: styles$1.searchInput }), searchQuery && (jsxRuntime.jsx("button", { className: styles$1.clearButton, onClick: () => setSearchQuery(''), children: "\u2715" }))] })), hasActiveFilters && (jsxRuntime.jsx("button", { className: styles$1.clearFiltersButton, onClick: clearFilters, children: "Clear All Filters" })), jsxRuntime.jsxs("div", { className: styles$1.resultCount, children: [filteredData.length, " ", filteredData.length === 1 ? 'result' : 'results'] })] })), jsxRuntime.jsx("div", { className: `${styles$1.tableWrapper} ${stickyHeader ? styles$1.stickyHeader : ''} ${horizontalScroll ? styles$1.horizontalScroll : ''}`, children: jsxRuntime.jsxs("table", { className: `
+                        ${styles$1.table}
+                        ${striped ? styles$1.striped : ''}
+                        ${hoverable ? styles$1.hoverable : ''}
+                        ${compact ? styles$1.compact : ''}
+                    `, role: "table", "aria-label": title || 'Data table', "aria-rowcount": sortedData.length, "aria-describedby": title ? `${title.replace(/\s+/g, '-').toLowerCase()}-summary` : undefined, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [selectable && (jsxRuntime.jsx("th", { className: styles$1.checkboxColumn, scope: "col", children: jsxRuntime.jsx("input", { type: "checkbox", checked: allCurrentPageSelected, ref: input => {
                                                 if (input) {
                                                     input.indeterminate = !allCurrentPageSelected && someCurrentPageSelected;
                                                 }
-                                            }, onChange: handleSelectAll, className: styles.checkbox, "aria-label": "Select all rows" }) })), columns.map(column => (jsxRuntime.jsx("th", { className: `${styles.th} ${column.className || ''}`, style: {
+                                            }, onChange: handleSelectAll, className: styles$1.checkbox, "aria-label": "Select all rows" }) })), columns.map(column => (jsxRuntime.jsx("th", { className: `${styles$1.th} ${column.className || ''}`, style: {
                                             width: column.width,
                                             textAlign: column.align || 'left'
                                         }, scope: "col", role: "columnheader", "aria-sort": sortConfig.key === column.key
                                             ? sortConfig.direction === 'asc' ? 'ascending' : 'descending'
-                                            : column.sortable ? 'none' : undefined, children: jsxRuntime.jsxs("div", { className: styles.headerCell, children: [column.sortable ? (jsxRuntime.jsxs("button", { className: styles.sortButton, onClick: () => handleSort(column.key), "aria-label": `Sort by ${column.header} ${sortConfig.key === column.key
+                                            : column.sortable ? 'none' : undefined, children: jsxRuntime.jsxs("div", { className: styles$1.headerCell, children: [column.sortable ? (jsxRuntime.jsxs("button", { className: styles$1.sortButton, onClick: () => handleSort(column.key), "aria-label": `Sort by ${column.header} ${sortConfig.key === column.key
                                                         ? sortConfig.direction === 'asc' ? '(descending)' : '(ascending)'
-                                                        : '(ascending)'}`, children: [jsxRuntime.jsx("span", { children: column.header }), jsxRuntime.jsx("span", { className: styles.sortIcon, "aria-hidden": "true", children: sortConfig.key === column.key ? (sortConfig.direction === 'asc' ? '↑' : '↓') : '↕' })] })) : (jsxRuntime.jsx("span", { className: styles.headerText, children: column.header })), column.filterable && (jsxRuntime.jsx("input", { type: "text", placeholder: "Filter...", value: columnFilters[column.key] || '', onChange: e => handleColumnFilter(column.key, e.target.value), onClick: e => e.stopPropagation(), className: styles.columnFilter, "aria-label": `Filter ${column.header}` }))] }) }, column.key))), rowActions && rowActions.length > 0 && (jsxRuntime.jsx("th", { className: styles.actionsColumn, scope: "col", children: jsxRuntime.jsx("span", { className: styles.headerText, children: "Actions" }) }))] }) }), jsxRuntime.jsx("tbody", { children: animated ? (jsxRuntime.jsx(framerMotion.LayoutGroup, { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: paginatedData.map((item, index) => (jsxRuntime.jsxs(framerMotion.motion.tr, { layout: "position", initial: { opacity: 0, scale: 0.98 }, animate: {
+                                                        : '(ascending)'}`, children: [jsxRuntime.jsx("span", { children: column.header }), jsxRuntime.jsx("span", { className: styles$1.sortIcon, "aria-hidden": "true", children: sortConfig.key === column.key ? (sortConfig.direction === 'asc' ? '↑' : '↓') : '↕' })] })) : (jsxRuntime.jsx("span", { className: styles$1.headerText, children: column.header })), column.filterable && (jsxRuntime.jsx("input", { type: "text", placeholder: "Filter...", value: columnFilters[column.key] || '', onChange: e => handleColumnFilter(column.key, e.target.value), onClick: e => e.stopPropagation(), className: styles$1.columnFilter, "aria-label": `Filter ${column.header}` }))] }) }, column.key))), rowActions && rowActions.length > 0 && (jsxRuntime.jsx("th", { className: styles$1.actionsColumn, scope: "col", children: jsxRuntime.jsx("span", { className: styles$1.headerText, children: "Actions" }) }))] }) }), jsxRuntime.jsx("tbody", { children: animated ? (jsxRuntime.jsx(framerMotion.LayoutGroup, { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: paginatedData.map((item, index) => (jsxRuntime.jsxs(framerMotion.motion.tr, { layout: "position", initial: { opacity: 0, scale: 0.98 }, animate: {
                                             opacity: 1,
                                             scale: 1,
                                             transition: {
@@ -5114,18 +5433,18 @@ const TableComponent = function Table({ data, columns, keyField = 'id', title, s
                                             scale: 0.98,
                                             transition: { duration: 0.08 }
                                         }, className: `
-                                                ${styles.tr}
-                                                ${selectedRows.has(item[keyField]) ? styles.selected : ''}
-                                                ${onRowClick ? styles.clickable : ''}
-                                            `, onClick: () => onRowClick?.(item, index), children: [selectable && (jsxRuntime.jsx("td", { className: styles.checkboxColumn, children: jsxRuntime.jsx("input", { type: "checkbox", checked: selectedRows.has(item[keyField]), onChange: () => handleSelectRow(item[keyField]), onClick: e => e.stopPropagation(), className: styles.checkbox }) })), columns.map(column => (jsxRuntime.jsx("td", { className: `${styles.td} ${column.className || ''}`, style: { textAlign: column.align || 'left' }, children: column.render
+                                                ${styles$1.tr}
+                                                ${selectedRows.has(item[keyField]) ? styles$1.selected : ''}
+                                                ${onRowClick ? styles$1.clickable : ''}
+                                            `, onClick: () => onRowClick?.(item, index), children: [selectable && (jsxRuntime.jsx("td", { className: styles$1.checkboxColumn, children: jsxRuntime.jsx("input", { type: "checkbox", checked: selectedRows.has(item[keyField]), onChange: () => handleSelectRow(item[keyField]), onClick: e => e.stopPropagation(), className: styles$1.checkbox }) })), columns.map(column => (jsxRuntime.jsx("td", { className: `${styles$1.td} ${column.className || ''}`, style: { textAlign: column.align || 'left' }, children: column.render
                                                     ? column.render(item[column.key], item, index)
-                                                    : formatValue(item[column.key]) }, column.key))), rowActions && rowActions.length > 0 && (jsxRuntime.jsx("td", { className: styles.actionsColumn, onClick: e => e.stopPropagation(), children: jsxRuntime.jsx("div", { className: styles.actionButtons, children: rowActions.map((action, actionIndex) => (jsxRuntime.jsx("button", { className: getButtonClassName(action), style: getButtonStyles(action), onClick: () => action.onClick(item, index), disabled: action.disabled ? action.disabled(item) : false, title: action.label, "aria-label": action.label, children: action.icon }, actionIndex))) }) }))] }, `${item[keyField]}-${currentPage}`))) }) })) : (paginatedData.map((item, index) => (jsxRuntime.jsxs("tr", { className: `
-                                        ${styles.tr}
-                                        ${selectedRows.has(item[keyField]) ? styles.selected : ''}
-                                        ${onRowClick ? styles.clickable : ''}
-                                    `, onClick: () => onRowClick?.(item, index), children: [selectable && (jsxRuntime.jsx("td", { className: styles.checkboxColumn, children: jsxRuntime.jsx("input", { type: "checkbox", checked: selectedRows.has(item[keyField]), onChange: () => handleSelectRow(item[keyField]), onClick: e => e.stopPropagation(), className: styles.checkbox }) })), columns.map(column => (jsxRuntime.jsx("td", { className: `${styles.td} ${column.className || ''}`, style: { textAlign: column.align || 'left' }, children: column.render
+                                                    : formatValue(item[column.key]) }, column.key))), rowActions && rowActions.length > 0 && (jsxRuntime.jsx("td", { className: styles$1.actionsColumn, onClick: e => e.stopPropagation(), children: jsxRuntime.jsx("div", { className: styles$1.actionButtons, children: rowActions.map((action, actionIndex) => (jsxRuntime.jsx("button", { className: getButtonClassName(action), style: getButtonStyles(action), onClick: () => action.onClick(item, index), disabled: action.disabled ? action.disabled(item) : false, title: action.label, "aria-label": action.label, children: action.icon }, actionIndex))) }) }))] }, `${String(item[keyField])}-${currentPage}`))) }) })) : (paginatedData.map((item, index) => (jsxRuntime.jsxs("tr", { className: `
+                                        ${styles$1.tr}
+                                        ${selectedRows.has(item[keyField]) ? styles$1.selected : ''}
+                                        ${onRowClick ? styles$1.clickable : ''}
+                                    `, onClick: () => onRowClick?.(item, index), children: [selectable && (jsxRuntime.jsx("td", { className: styles$1.checkboxColumn, children: jsxRuntime.jsx("input", { type: "checkbox", checked: selectedRows.has(item[keyField]), onChange: () => handleSelectRow(item[keyField]), onClick: e => e.stopPropagation(), className: styles$1.checkbox }) })), columns.map(column => (jsxRuntime.jsx("td", { className: `${styles$1.td} ${column.className || ''}`, style: { textAlign: column.align || 'left' }, children: column.render
                                             ? column.render(item[column.key], item, index)
-                                            : formatValue(item[column.key]) }, column.key))), rowActions && rowActions.length > 0 && (jsxRuntime.jsx("td", { className: styles.actionsColumn, onClick: e => e.stopPropagation(), children: jsxRuntime.jsx("div", { className: styles.actionButtons, children: rowActions.map((action, actionIndex) => (jsxRuntime.jsx("button", { className: getButtonClassName(action), style: getButtonStyles(action), onClick: () => action.onClick(item, index), disabled: action.disabled ? action.disabled(item) : false, title: action.label, "aria-label": action.label, children: action.icon }, actionIndex))) }) }))] }, item[keyField])))) })] }) }), pagination && totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles.pagination, children: [jsxRuntime.jsxs("div", { className: styles.pageInfo, children: ["Showing ", ((currentPage - 1) * pageSize) + 1, "-", Math.min(currentPage * pageSize, sortedData.length), " of ", sortedData.length] }), jsxRuntime.jsxs("div", { className: styles.pageControls, children: [jsxRuntime.jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(1), disabled: currentPage === 1, children: "\u27E8\u27E8" }), jsxRuntime.jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(prev => Math.max(1, prev - 1)), disabled: currentPage === 1, children: "\u27E8" }), jsxRuntime.jsxs("span", { className: styles.pageNumber, children: ["Page ", currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(prev => Math.min(totalPages, prev + 1)), disabled: currentPage === totalPages, children: "\u27E9" }), jsxRuntime.jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(totalPages), disabled: currentPage === totalPages, children: "\u27E9\u27E9" })] }), typeof pagination === 'object' && (jsxRuntime.jsx("select", { className: styles.pageSizeSelect, value: pageSize, onChange: e => {
+                                            : formatValue(item[column.key]) }, column.key))), rowActions && rowActions.length > 0 && (jsxRuntime.jsx("td", { className: styles$1.actionsColumn, onClick: e => e.stopPropagation(), children: jsxRuntime.jsx("div", { className: styles$1.actionButtons, children: rowActions.map((action, actionIndex) => (jsxRuntime.jsx("button", { className: getButtonClassName(action), style: getButtonStyles(action), onClick: () => action.onClick(item, index), disabled: action.disabled ? action.disabled(item) : false, title: action.label, "aria-label": action.label, children: action.icon }, actionIndex))) }) }))] }, String(item[keyField]))))) })] }) }), pagination && totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$1.pagination, children: [jsxRuntime.jsxs("div", { className: styles$1.pageInfo, children: ["Showing ", ((currentPage - 1) * pageSize) + 1, "-", Math.min(currentPage * pageSize, sortedData.length), " of ", sortedData.length] }), jsxRuntime.jsxs("div", { className: styles$1.pageControls, children: [jsxRuntime.jsx("button", { className: styles$1.pageButton, onClick: () => setCurrentPage(1), disabled: currentPage === 1, children: "\u27E8\u27E8" }), jsxRuntime.jsx("button", { className: styles$1.pageButton, onClick: () => setCurrentPage(prev => Math.max(1, prev - 1)), disabled: currentPage === 1, children: "\u27E8" }), jsxRuntime.jsxs("span", { className: styles$1.pageNumber, children: ["Page ", currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { className: styles$1.pageButton, onClick: () => setCurrentPage(prev => Math.min(totalPages, prev + 1)), disabled: currentPage === totalPages, children: "\u27E9" }), jsxRuntime.jsx("button", { className: styles$1.pageButton, onClick: () => setCurrentPage(totalPages), disabled: currentPage === totalPages, children: "\u27E9\u27E9" })] }), typeof pagination === 'object' && (jsxRuntime.jsx("select", { className: styles$1.pageSizeSelect, value: pageSize, onChange: e => {
                             setPageSize(Number(e.target.value));
                             setCurrentPage(1);
                         }, children: pageSizeOptions.map(size => (jsxRuntime.jsxs("option", { value: size, children: [size, " per page"] }, size))) }))] }))] }));
@@ -5133,32 +5452,67 @@ const TableComponent = function Table({ data, columns, keyField = 'id', title, s
 // Helper function to format values
 function formatValue(value) {
     if (value === null || value === undefined) {
-        return jsxRuntime.jsx("span", { className: styles.nullValue, children: "\u2014" });
+        return jsxRuntime.jsx("span", { className: styles$1.nullValue, children: "\u2014" });
     }
     if (typeof value === 'boolean') {
-        return (jsxRuntime.jsx("span", { className: `${styles.badge} ${value ? styles.badgeSuccess : styles.badgeDanger}`, children: value ? '✓' : '✗' }));
+        return (jsxRuntime.jsx("span", { className: `${styles$1.badge} ${value ? styles$1.badgeSuccess : styles$1.badgeDanger}`, children: value ? '✓' : '✗' }));
     }
     if (value instanceof Date) {
         return value.toLocaleDateString();
     }
     if (typeof value === 'object') {
-        return jsxRuntime.jsx("code", { className: styles.code, children: JSON.stringify(value, null, 2) });
+        return jsxRuntime.jsx("code", { className: styles$1.code, children: JSON.stringify(value, null, 2) });
     }
     return String(value);
 }
 // Memoized Table component to prevent unnecessary re-renders
 const Table = React.memo(TableComponent);
 
+var styles = {"overlay":"ConfirmationModal-module_overlay__wzOO0","positioner":"ConfirmationModal-module_positioner__JbYiu","modal":"ConfirmationModal-module_modal__yG0nB","header":"ConfirmationModal-module_header__-mH-7","warning":"ConfirmationModal-module_warning__DbqCv","danger":"ConfirmationModal-module_danger__RGtlr","info":"ConfirmationModal-module_info__cyle2","title":"ConfirmationModal-module_title__-x6BK","closeButton":"ConfirmationModal-module_closeButton__NStBA","content":"ConfirmationModal-module_content__kFMOl","message":"ConfirmationModal-module_message__eOvmj","footer":"ConfirmationModal-module_footer__m41Eh"};
+
+/**
+ * ConfirmationModal Component
+ *
+ * A specialized modal for confirm/cancel flows with variant styling.
+ *
+ * @example
+ * <ConfirmationModal
+ *   isOpen={showDelete}
+ *   onClose={() => setShowDelete(false)}
+ *   onConfirm={handleDelete}
+ *   title="Delete item?"
+ *   message="This action cannot be undone."
+ *   variant="danger"
+ *   confirmText="Delete"
+ * />
+ */
+const ConfirmationModal = ({ isOpen, onClose, onConfirm, title, message, confirmText = 'Confirm', cancelText = 'Cancel', isLoading = false, variant = 'info', }) => {
+    const handleConfirm = (e) => {
+        if (!isLoading) {
+            e.preventDefault();
+            e.stopPropagation();
+            onConfirm();
+        }
+    };
+    return (jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles.overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: !isLoading ? onClose : undefined }), jsxRuntime.jsx("div", { className: styles.positioner, children: jsxRuntime.jsxs(framerMotion.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: [jsxRuntime.jsxs("div", { className: `${styles.header} ${styles[variant]}`, children: [jsxRuntime.jsx("h2", { className: styles.title, children: title }), !isLoading && (jsxRuntime.jsx("button", { className: styles.closeButton, onClick: onClose, type: "button", "aria-label": "Close", children: "\u2715" }))] }), jsxRuntime.jsx("div", { className: styles.content, children: jsxRuntime.jsx("p", { className: styles.message, children: message }) }), jsxRuntime.jsxs("div", { className: styles.footer, children: [jsxRuntime.jsx(Button, { type: "button", variant: "ghost", onClick: onClose, disabled: isLoading, children: cancelText }), jsxRuntime.jsx(Button, { type: "button", variant: variant === 'danger' ? 'danger' : 'primary', onClick: handleConfirm, disabled: isLoading, loading: isLoading, children: confirmText })] })] }) })] })) }));
+};
+
 exports.ArrayInput = ArrayInput;
 exports.BooleansHeatmap = BooleansHeatmap;
+exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.ConfirmationModal = ConfirmationModal;
 exports.DateInput = DateInput;
+exports.DecryptedText = DecryptedText;
 exports.EditFAB = EditFAB;
+exports.EmptyState = EmptyState;
 exports.ImageSlideshow = ImageSlideshow;
+exports.LiquidButton = LiquidButton;
 exports.LoadingSpinner = LoadingSpinner;
+exports.Modal = Modal;
 exports.MoodChart = MoodChart;
 exports.Navbar = Navbar;
 exports.NumberStepper = NumberStepper;
@@ -5177,10 +5531,12 @@ exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.TimeInput = TimeInput;
+exports.ToastContainer = ToastContainer;
 exports.Toggle = Toggle;
 exports.ToggleButton = ToggleButton;
 exports.soundManager = soundManager;
 exports.useComponentSound = useComponentSound;
 exports.useSound = useSound;
-exports.useTheme = useTheme$1;
+exports.useTheme = useTheme;
+exports.useThemeSafe = useThemeSafe;
 //# sourceMappingURL=index.js.map