@stfrigerio/sito-template 0.1.8 → 0.1.10

package/dist/index.esm.js

@@ -30,7 +30,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
     return (jsx(ThemeContext$1.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
 };
 
-var styles$n = {"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$o = {"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"};
 
 /**
  * Button Component
@@ -73,17 +73,17 @@ var styles$n = {"button":"Button-module_button__c6nkW","primary":"Button-module_
  */
 const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, ...rest }) => {
     const buttonClasses = [
-        styles$n.button,
-        styles$n[variant],
-        styles$n[size],
-        fullWidth && styles$n.fullWidth,
-        loading && styles$n.loading,
+        styles$o.button,
+        styles$o[variant],
+        styles$o[size],
+        fullWidth && styles$o.fullWidth,
+        loading && styles$o.loading,
         className
     ].filter(Boolean).join(' ');
-    return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$n.spinner }), iconLeft && jsx("span", { className: styles$n.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$n.iconRight, children: iconRight })] }));
+    return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$o.spinner }), iconLeft && jsx("span", { className: styles$o.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$o.iconRight, children: iconRight })] }));
 };
 
-var styles$m = {"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","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$n = {"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
@@ -136,150 +136,40 @@ var styles$m = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hovera
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} The rendered Card component
  */
-const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padding = true, image, imageAlt = '', title, subtitle, header, footer, children, className = '', onClick, motionProps, ...rest }) => {
+const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padding = true, image, imageAlt = '', title, subtitle, header, footer, children, expandable = false, defaultExpanded = false, expanded: controlledExpanded, onExpandChange, className = '', onClick, motionProps, ...rest }) => {
+    // State management for expandable cards
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+    const handleToggleExpand = () => {
+        const newExpanded = !isExpanded;
+        if (controlledExpanded === undefined) {
+            setInternalExpanded(newExpanded);
+        }
+        onExpandChange?.(newExpanded);
+    };
     const cardClasses = [
-        styles$m.card,
-        styles$m[variant],
-        hoverable && styles$m.hoverable,
-        clickable && styles$m.clickable,
-        !padding && styles$m.noPadding,
+        styles$n.card,
+        styles$n[variant],
+        hoverable && styles$n.hoverable,
+        clickable && styles$n.clickable,
+        !padding && styles$n.noPadding,
+        expandable && styles$n.expandable,
         className
     ].filter(Boolean).join(' ');
-    const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$m.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$m.image }) })), header && jsx("div", { className: styles$m.header, children: header }), (title || subtitle) && !header && (jsxs("div", { className: styles$m.header, children: [title && jsx("h3", { className: styles$m.title, children: title }), subtitle && jsx("p", { className: styles$m.subtitle, children: subtitle })] })), children && (jsx("div", { className: padding ? styles$m.body : undefined, children: children })), footer && jsx("div", { className: styles$m.footer, children: footer })] }));
+    const renderHeader = () => {
+        if (header) {
+            return (jsxs("div", { className: styles$n.header, children: [jsx("div", { className: styles$n.headerContent, children: header }), expandable && (jsx("button", { className: styles$n.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$n.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
+        }
+        if (title || subtitle) {
+            return (jsxs("div", { className: styles$n.header, children: [jsxs("div", { className: styles$n.headerContent, children: [title && jsx("h3", { className: styles$n.title, children: title }), subtitle && jsx("p", { className: styles$n.subtitle, children: subtitle })] }), expandable && (jsx("button", { className: styles$n.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$n.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
+        }
+        return null;
+    };
+    const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$n.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$n.image }) })), renderHeader(), jsx(AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxs(motion.div, { initial: expandable ? { height: 0, opacity: 0 } : undefined, animate: expandable ? { height: 'auto', opacity: 1 } : undefined, exit: expandable ? { height: 0, opacity: 0 } : undefined, transition: { duration: 0.3, ease: "easeInOut" }, className: styles$n.expandableContent, children: [children && (jsx("div", { className: padding ? styles$n.body : undefined, children: children })), footer && jsx("div", { className: styles$n.footer, children: footer })] }, "content")) })] }));
     return (jsx(motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
 };
 
-var styles$l = {"textInput":"TextInput-module_textInput__b2LVM","required":"TextInput-module_required__7uLiM","inputError":"TextInput-module_inputError__QD0a-","errorMessage":"TextInput-module_errorMessage__nIDoQ","success":"TextInput-module_success__KbSS3","loading":"TextInput-module_loading__qXaca","withIcon":"TextInput-module_withIcon__-8swm","inputIcon":"TextInput-module_inputIcon__B4czN","withAction":"TextInput-module_withAction__JD3ku","actionButton":"TextInput-module_actionButton__zFJel"};
-
-/**
- * TextInput component - A versatile text input field with label and error handling
- *
- * @component
- * @description
- * A foundational input component that provides a clean, accessible text field with
- * built-in support for labels, validation errors, and various HTML5 input types.
- * Follows design system tokens for consistent theming across light/dark modes.
- *
- * @example
- * // Basic usage
- * <TextInput
- *   label="Email Address"
- *   value={email}
- *   onChange={setEmail}
- *   type="email"
- *   placeholder="Enter your email"
- * />
- *
- * @example
- * // With validation error
- * <TextInput
- *   label="Password"
- *   value={password}
- *   onChange={setPassword}
- *   type="password"
- *   error="Password must be at least 8 characters"
- *   required
- * />
- */
-function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
-    const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
-    const getContainerClassName = () => {
-        const classes = [styles$l.textInput];
-        if (success)
-            classes.push(styles$l.success);
-        if (loading)
-            classes.push(styles$l.loading);
-        if (icon)
-            classes.push(styles$l.withIcon);
-        if (actionButton)
-            classes.push(styles$l.withAction);
-        return classes.join(' ');
-    };
-    return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$l.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$l.inputIcon, children: icon }), jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$l.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsx("button", { type: "button", className: styles$l.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$l.errorMessage, children: error }))] }));
-}
-
-var styles$k = {"arrayInput":"ArrayInput-module_arrayInput__FNrd2","arrayInputLabel":"ArrayInput-module_arrayInputLabel__7Rpkj","arrayInputItem":"ArrayInput-module_arrayInputItem__eSH-6","inputWrapper":"ArrayInput-module_inputWrapper__i-MB-","input":"ArrayInput-module_input__792ru","complexItem":"ArrayInput-module_complexItem__iX3v6","fieldsWrapper":"ArrayInput-module_fieldsWrapper__fzqvn"};
-
-/**
- * ArrayInput component - Versatile dynamic list manager
- *
- * @component
- * @description
- * A flexible component that can handle both simple string arrays and complex object arrays.
- * Users can add, remove, and edit items dynamically. Supports custom field configurations
- * for complex data structures.
- *
- * @example
- * // Simple string array
- * <ArrayInput
- *   label="Tags"
- *   values={tags}
- *   onChange={setTags}
- *   placeholder="Enter tag"
- * />
- *
- * @example
- * // Complex object array
- * <ArrayInput
- *   type="complex"
- *   label="Social Links"
- *   values={links}
- *   onChange={setLinks}
- *   fields={[
- *     { name: 'label', label: 'Label', placeholder: 'GitHub' },
- *     { name: 'url', label: 'URL', type: 'url', placeholder: 'https://github.com/...' }
- *   ]}
- * />
- */
-function ArrayInput(props) {
-    if (props.type === 'complex') {
-        return jsx(ComplexArrayInput, { ...props });
-    }
-    return jsx(SimpleArrayInput, { ...props });
-}
-// Simple string array implementation
-function SimpleArrayInput({ label, values, onChange, placeholder }) {
-    const handleChange = (index, value) => {
-        const newValues = [...values];
-        newValues[index] = value;
-        onChange(newValues);
-    };
-    const handleAdd = () => {
-        onChange([...values, '']);
-    };
-    const handleRemove = (index) => {
-        const newValues = values.filter((_, i) => i !== index);
-        onChange(newValues);
-    };
-    return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxs("div", { className: styles$k.arrayInputItem, children: [jsx("div", { className: styles$k.inputWrapper, children: jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$k.input }) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, `item-${index}`))), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
-}
-// Complex object array implementation
-function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
-    const handleChange = (index, field, value) => {
-        const newValues = [...values];
-        newValues[index] = { ...newValues[index], [field]: value };
-        onChange(newValues);
-    };
-    const handleAdd = () => {
-        const newItem = fields.reduce((acc, field) => {
-            return { ...acc, [field.name]: '' };
-        }, {});
-        onChange([...values, newItem]);
-    };
-    const handleRemove = (index) => {
-        const newValues = values.filter((_, i) => i !== index);
-        onChange(newValues);
-    };
-    const generateKey = (item, index) => {
-        if (getKey)
-            return getKey(item, index);
-        // Generate key from all field values
-        return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
-    };
-    return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxs("div", { className: `${styles$k.arrayInputItem} ${fields.length > 1 ? styles$k.complexItem : ''}`, children: [jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, generateKey(value, index)))), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
-}
-
-var styles$j = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
+var styles$m = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
 
 /**
  * Checkbox component - Modern interactive checkbox with animations
@@ -323,7 +213,7 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
             checkboxRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    return (jsxs("label", { className: styles$j.checkboxLabel, children: [jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked), className: styles$j.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsx("span", { className: styles$j.checkboxText, children: label })] }));
+    return (jsxs("label", { className: styles$m.checkboxLabel, children: [jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked), className: styles$m.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsx("span", { className: styles$m.checkboxText, children: label })] }));
 };
 
 var DefaultContext = {
@@ -446,7 +336,7 @@ const parseEuropeanDate = (dateString) => {
     return '';
 };
 
-var styles$i = {"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$l = {"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
@@ -533,19 +423,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
         }
     };
     const getClassName = () => {
-        const classes = [styles$i.dateInput];
+        const classes = [styles$l.dateInput];
         if (error)
-            classes.push(styles$i.error);
+            classes.push(styles$l.error);
         if (success)
-            classes.push(styles$i.success);
+            classes.push(styles$l.success);
         if (loading)
-            classes.push(styles$i.loading);
+            classes.push(styles$l.loading);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$i.label, children: label }), jsxs("div", { className: styles$i.inputWrapper, children: [jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$i.textInput, disabled: disabled || loading }), jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$i.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsx(FiCalendar, {}) }), jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$i.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
+    return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$l.label, children: label }), jsxs("div", { className: styles$l.inputWrapper, children: [jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$l.textInput, disabled: disabled || loading }), jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$l.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsx(FiCalendar, {}) }), jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$l.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
 }
 
-var styles$h = {"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$k = {"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
@@ -650,23 +540,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
         }
     };
     const getTriggerClassName = () => {
-        const classes = [styles$h.dropdownTrigger];
+        const classes = [styles$k.dropdownTrigger];
         if (isOpen)
-            classes.push(styles$h.open);
+            classes.push(styles$k.open);
         if (loading)
-            classes.push(styles$h.loading);
+            classes.push(styles$k.loading);
         if (error)
-            classes.push(styles$h.error);
+            classes.push(styles$k.error);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: styles$h.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsx("label", { children: label }), jsxs(motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsx("span", { className: `${styles$h.dropdownValue} ${!displayValue ? styles$h.placeholder : ''}`, children: displayValue || placeholder }), jsx(FiChevronDown, { className: styles$h.dropdownArrow })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(motion.div, { className: styles$h.dropdownMenu, initial: { opacity: 0, y: -10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2, ease: "easeOut" }, children: [jsxs("div", { className: styles$h.dropdownSearch, children: [jsx(FiSearch, { className: styles$h.searchIcon }), jsx("input", { ref: inputRef, type: "text", className: styles$h.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: styles$h.dropdownOptions, children: [allOptions.map((opt, index) => {
+    return (jsxs("div", { className: styles$k.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsx("label", { children: label }), jsxs(motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsx("span", { className: `${styles$k.dropdownValue} ${!displayValue ? styles$k.placeholder : ''}`, children: displayValue || placeholder }), jsx(FiChevronDown, { className: styles$k.dropdownArrow })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(motion.div, { className: styles$k.dropdownMenu, initial: { opacity: 0, y: -10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2, ease: "easeOut" }, children: [jsxs("div", { className: styles$k.dropdownSearch, children: [jsx(FiSearch, { className: styles$k.searchIcon }), jsx("input", { ref: inputRef, type: "text", className: styles$k.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: styles$k.dropdownOptions, children: [allOptions.map((opt, index) => {
                                     const isSelected = value === opt.value;
                                     const isHighlighted = highlightedIndex === index;
-                                    return (jsxs(motion.button, { type: "button", className: `${styles$h.dropdownOption} ${isSelected ? styles$h.selected : ''} ${isHighlighted ? styles$h.highlighted : ''}`, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.02 }, whileTap: { scale: 0.98 }, style: { willChange: 'transform' }, children: [jsx("span", { children: opt.label }), isSelected && jsx(FiCheck, { className: styles$h.checkIcon })] }, `${opt.value}-${index}`));
-                                }), allOptions.length === 0 && (jsx(motion.div, { className: styles$h.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
+                                    return (jsxs(motion.button, { type: "button", className: `${styles$k.dropdownOption} ${isSelected ? styles$k.selected : ''} ${isHighlighted ? styles$k.highlighted : ''}`, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.02 }, whileTap: { scale: 0.98 }, style: { willChange: 'transform' }, children: [jsx("span", { children: opt.label }), isSelected && jsx(FiCheck, { className: styles$k.checkIcon })] }, `${opt.value}-${index}`));
+                                }), allOptions.length === 0 && (jsx(motion.div, { className: styles$k.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
 }
 
-var styles$g = {"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$j = {"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
@@ -703,23 +593,23 @@ var styles$g = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
  */
 function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false }) {
     const getClassName = () => {
-        const classes = [styles$g.selectInput];
+        const classes = [styles$j.selectInput];
         if (error)
-            classes.push(styles$g.error);
+            classes.push(styles$j.error);
         if (success)
-            classes.push(styles$g.success);
+            classes.push(styles$j.success);
         if (loading)
-            classes.push(styles$g.loading);
+            classes.push(styles$j.loading);
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$g.selectWrapper, children: [jsxs("select", { value: value, onChange: e => onChange(e.target.value), disabled: disabled || loading, required: required, children: [jsx("option", { value: "", children: placeholder }), options.map(opt => {
+    return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$j.selectWrapper, children: [jsxs("select", { value: value, onChange: e => onChange(e.target.value), disabled: disabled || loading, required: required, children: [jsx("option", { value: "", children: placeholder }), options.map(opt => {
                                 const optionValue = typeof opt === 'string' ? opt : opt.value;
                                 const optionLabel = typeof opt === 'string' ? opt : opt.label;
                                 return (jsx("option", { value: optionValue, children: optionLabel }, optionValue));
-                            })] }), jsx(FiChevronDown, { className: styles$g.selectIcon })] })] }));
+                            })] }), jsx(FiChevronDown, { className: styles$j.selectIcon })] })] }));
 }
 
-var styles$f = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","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$i = {"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
@@ -751,37 +641,88 @@ var styles$f = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
  *   required
  * />
  */
-function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false }) {
+function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false }) {
     const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
     const getContainerClassName = () => {
-        const classes = [styles$f.textareaContainer];
+        const classes = [styles$i.textareaContainer];
         if (error)
-            classes.push(styles$f.error);
+            classes.push(styles$i.error);
         if (success)
-            classes.push(styles$f.success);
+            classes.push(styles$i.success);
         if (loading)
-            classes.push(styles$f.loading);
+            classes.push(styles$i.loading);
         if (focusMode)
-            classes.push(styles$f.focusMode);
+            classes.push(styles$i.focusMode);
+        if (compact)
+            classes.push(styles$i.compact);
         return classes.join(' ');
     };
     const getCharCountClassName = () => {
         if (!maxLength)
-            return styles$f.characterCount;
-        const classes = [styles$f.characterCount];
+            return styles$i.characterCount;
+        const classes = [styles$i.characterCount];
         const percentage = (value.length / maxLength) * 100;
         if (percentage >= 100) {
-            classes.push(styles$f.atLimit);
+            classes.push(styles$i.atLimit);
         }
         else if (percentage >= 80) {
-            classes.push(styles$f.nearLimit);
+            classes.push(styles$i.nearLimit);
         }
         return classes.join(' ');
     };
-    return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: textareaId, className: styles$f.textareaLabel, children: [label, required && jsx("span", { className: styles$f.requiredIndicator, children: "*" })] }), jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$f.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxs("div", { className: getCharCountClassName(), children: [jsx("span", { children: value.length }), jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsx("span", { children: maxLength })] }))] }));
+    return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { htmlFor: textareaId, className: styles$i.textareaLabel, children: [label, required && jsx("span", { className: styles$i.requiredIndicator, children: "*" })] })), jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$i.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxs("div", { className: getCharCountClassName(), children: [jsx("span", { children: value.length }), jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsx("span", { children: maxLength })] }))] }));
+}
+
+var styles$h = {"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
+ *
+ * @component
+ * @description
+ * A foundational input component that provides a clean, accessible text field with
+ * built-in support for labels, validation errors, and various HTML5 input types.
+ * Follows design system tokens for consistent theming across light/dark modes.
+ *
+ * @example
+ * // Basic usage
+ * <TextInput
+ *   label="Email Address"
+ *   value={email}
+ *   onChange={setEmail}
+ *   type="email"
+ *   placeholder="Enter your email"
+ * />
+ *
+ * @example
+ * // With validation error
+ * <TextInput
+ *   label="Password"
+ *   value={password}
+ *   onChange={setPassword}
+ *   type="password"
+ *   error="Password must be at least 8 characters"
+ *   required
+ * />
+ */
+function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
+    const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
+    const getContainerClassName = () => {
+        const classes = [styles$h.textInput];
+        if (success)
+            classes.push(styles$h.success);
+        if (loading)
+            classes.push(styles$h.loading);
+        if (icon)
+            classes.push(styles$h.withIcon);
+        if (actionButton)
+            classes.push(styles$h.withAction);
+        return classes.join(' ');
+    };
+    return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$h.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$h.inputIcon, children: icon }), jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$h.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsx("button", { type: "button", className: styles$h.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$h.errorMessage, children: error }))] }));
 }
 
-var styles$e = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
+var styles$g = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
 
 /**
  * Toggle Component
@@ -825,11 +766,18 @@ var styles$e = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
  * @returns {JSX.Element} The rendered Toggle component
  */
 function Toggle(props) {
-    const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon } = props;
-    return (jsxs("div", { className: styles$e.toggleContainer, children: [jsxs("button", { className: `${styles$e.toggleButton} ${!isOn ? styles$e.active : ''}`, onClick: () => onToggle(false), children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$e.toggleButton} ${isOn ? styles$e.active : ''}`, onClick: () => onToggle(true), children: [rightIcon, rightLabel] })] }));
+    const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon, className, style } = props;
+    // Ensure content stays centered by merging styles
+    const buttonStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...style
+    };
+    return (jsxs("div", { className: `${styles$g.toggleContainer} ${className || ''}`, children: [jsxs("button", { className: `${styles$g.toggleButton} ${!isOn ? styles$g.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$g.toggleButton} ${isOn ? styles$g.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
 }
 
-var styles$d = {"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-","pulse":"NumberStepper-module_pulse__51oUo"};
+var styles$f = {"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-","pulse":"NumberStepper-module_pulse__51oUo"};
 
 /**
  * NumberStepper Component
@@ -946,18 +894,18 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
         setDisplayValue(finalValue);
     }, [displayValue, min, max, step, onChange]);
     const containerClasses = [
-        styles$d.container,
-        styles$d[size],
-        styles$d[variant],
-        disabled && styles$d.disabled,
+        styles$f.container,
+        styles$f[size],
+        styles$f[variant],
+        disabled && styles$f.disabled,
         className
     ].filter(Boolean).join(' ');
     const isDecrementDisabled = disabled || value <= min;
     const isIncrementDisabled = disabled || value >= max;
-    return (jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxs("div", { className: styles$d.header, children: [icon && jsx("span", { className: styles$d.icon, children: icon }), label && jsx("label", { className: styles$d.label, children: label })] })), jsxs("div", { className: styles$d.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(motion.button, { className: styles$d.button, 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: showPlusMinus ? (jsx("span", { className: styles$d.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$d.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsx("div", { className: styles$d.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$d.valueWrapper, children: jsx("input", { type: "text", className: styles$d.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsx(motion.button, { className: styles$d.button, 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: showPlusMinus ? (jsx("span", { className: styles$d.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$d.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$d.limits, children: [jsx("span", { className: styles$d.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$d.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+    return (jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxs("div", { className: styles$f.header, children: [icon && jsx("span", { className: styles$f.icon, children: icon }), label && jsx("label", { className: styles$f.label, children: label })] })), jsxs("div", { className: styles$f.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(motion.button, { className: styles$f.button, 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: showPlusMinus ? (jsx("span", { className: styles$f.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$f.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsx("div", { className: styles$f.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$f.valueWrapper, children: jsx("input", { type: "text", className: styles$f.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsx(motion.button, { className: styles$f.button, 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: showPlusMinus ? (jsx("span", { className: styles$f.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$f.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$f.limits, children: [jsx("span", { className: styles$f.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$f.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
 };
 
-var styles$c = {"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$e = {"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
@@ -995,18 +943,18 @@ var styles$c = {"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 = '', tooltip, hideLabelOnMobile = false, }) => {
     const buttonClasses = [
-        styles$c.button,
-        styles$c[size],
-        styles$c[variant],
-        active && styles$c.active,
-        active && styles$c[`active-${activeColor}`],
-        disabled && styles$c.disabled,
-        animation !== 'none' && styles$c[`animation-${animation}`],
+        styles$e.button,
+        styles$e[size],
+        styles$e[variant],
+        active && styles$e.active,
+        active && styles$e[`active-${activeColor}`],
+        disabled && styles$e.disabled,
+        animation !== 'none' && styles$e[`animation-${animation}`],
         className
     ].filter(Boolean).join(' ');
     const labelClasses = [
-        styles$c.label,
-        hideLabelOnMobile && styles$c.hideMobile
+        styles$e.label,
+        hideLabelOnMobile && styles$e.hideMobile
     ].filter(Boolean).join(' ');
     const iconVariants = {
         scale: {
@@ -1058,10 +1006,99 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
             }
         }
     };
-    return (jsxs(motion.button, { className: buttonClasses, onClick: onClick, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, children: [jsx(motion.div, { className: styles$c.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$c.content, children: [icon && (jsx(motion.div, { className: styles$c.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$c.icon, children: icon })) : (jsx("div", { className: styles$c.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$c.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsx(AnimatePresence, { children: active && (jsx(motion.div, { className: styles$c.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
+    return (jsxs(motion.button, { className: buttonClasses, onClick: onClick, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, children: [jsx(motion.div, { className: styles$e.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$e.content, children: [icon && (jsx(motion.div, { className: styles$e.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$e.icon, children: icon })) : (jsx("div", { className: styles$e.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$e.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsx(AnimatePresence, { children: active && (jsx(motion.div, { className: styles$e.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
 };
 
-var styles$b = {"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$d = {"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
+ *
+ * @component
+ * @description
+ * A flexible component that can handle both simple string arrays and complex object arrays.
+ * Users can add, remove, and edit items dynamically. Supports custom field configurations
+ * for complex data structures.
+ *
+ * @example
+ * // Simple string array
+ * <ArrayInput
+ *   label="Tags"
+ *   values={tags}
+ *   onChange={setTags}
+ *   placeholder="Enter tag"
+ * />
+ *
+ * @example
+ * // Complex object array
+ * <ArrayInput
+ *   type="complex"
+ *   label="Social Links"
+ *   values={links}
+ *   onChange={setLinks}
+ *   fields={[
+ *     { name: 'label', label: 'Label', placeholder: 'GitHub' },
+ *     { name: 'url', label: 'URL', type: 'url', placeholder: 'https://github.com/...' }
+ *   ]}
+ * />
+ */
+function ArrayInput(props) {
+    if (props.type === 'complex') {
+        return jsx(ComplexArrayInput, { ...props });
+    }
+    return jsx(SimpleArrayInput, { ...props });
+}
+// Simple string array implementation
+function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inputStyle, multiline = false, rows = 3 }) {
+    const handleChange = (index, value) => {
+        const newValues = [...values];
+        newValues[index] = value;
+        onChange(newValues);
+    };
+    const handleAdd = () => {
+        onChange([...values, '']);
+    };
+    const handleRemove = (index) => {
+        const newValues = values.filter((_, i) => i !== index);
+        onChange(newValues);
+    };
+    return (jsxs("div", { className: styles$d.arrayInput, children: [jsx("h3", { className: styles$d.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: styles$d.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
+                            duration: 0.3,
+                            ease: "easeInOut",
+                            layout: { duration: 0.2 }
+                        }, children: [jsx("div", { className: styles$d.inputWrapper, children: multiline ? (jsx("div", { style: inputStyle, children: jsx(TextArea, { label: "", value: value, onChange: (newValue) => handleChange(index, newValue), placeholder: placeholder, rows: rows, compact: true }) })) : (jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$d.input, style: inputStyle })) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$d.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, `item-${index}`))) }) }), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$d.addButton, children: ["Add ", label] })] }));
+}
+// Complex object array implementation
+function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle }) {
+    const handleChange = (index, field, value) => {
+        const newValues = [...values];
+        newValues[index] = { ...newValues[index], [field]: value };
+        onChange(newValues);
+    };
+    const handleAdd = () => {
+        const newItem = fields.reduce((acc, field) => {
+            return { ...acc, [field.name]: '' };
+        }, {});
+        onChange([...values, newItem]);
+    };
+    const handleRemove = (index) => {
+        const newValues = values.filter((_, i) => i !== index);
+        onChange(newValues);
+    };
+    const generateKey = (item, index) => {
+        if (getKey)
+            return getKey(item, index);
+        // Generate key from all field values
+        return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
+    };
+    return (jsxs("div", { className: styles$d.arrayInput, children: [jsx("h3", { className: styles$d.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: `${styles$d.arrayInputItem} ${fields.length > 1 ? styles$d.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
+                            duration: 0.3,
+                            ease: "easeInOut",
+                            layout: { duration: 0.2 }
+                        }, children: [jsx("div", { className: styles$d.fieldsWrapper, children: fields.map((field) => (jsx("div", { style: inputStyle, children: field.multiline ? (jsx(TextArea, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, placeholder: field.placeholder, rows: field.rows, compact: true })) : (jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder })) }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$d.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, generateKey(value, index)))) }) }), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$d.addButton, children: ["Add ", label] })] }));
+}
+
+var styles$c = {"fab":"EditFAB-module_fab__nSrTJ","primary":"EditFAB-module_primary__zbA9n","secondary":"EditFAB-module_secondary__BnXs0","success":"EditFAB-module_success__kcLg3","loader":"EditFAB-module_loader__TaJOm","draggable":"EditFAB-module_draggable__eE2vE","dragging":"EditFAB-module_dragging__btRJe"};
 
 const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
     const [isMobile, setIsMobile] = useState(false);
@@ -1146,15 +1183,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
     };
     const getVariantClass = () => {
         if (isSaving)
-            return styles$b.primary;
+            return styles$c.primary;
         if (isEditMode) {
-            return hasUnsavedChanges ? styles$b.success : styles$b.secondary;
+            return hasUnsavedChanges ? styles$c.success : styles$c.secondary;
         }
-        return styles$b.primary;
+        return styles$c.primary;
     };
     const getIcon = () => {
         if (isSaving) {
-            return jsx("div", { className: styles$b.loader });
+            return jsx("div", { className: styles$c.loader });
         }
         if (isEditMode) {
             return hasUnsavedChanges ? jsx(Check, { size: 24 }) : jsx(X, { size: 24 });
@@ -1169,14 +1206,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
         }
         return "Enter edit mode";
     };
-    return (jsx(motion.button, { ref: fabRef, className: `${styles$b.fab} ${getVariantClass()} ${isMobile ? styles$b.draggable : ''} ${isDragging ? styles$b.dragging : ''}`, style: getPositionStyles(), onClick: handleClick, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, disabled: isSaving, "aria-label": getAriaLabel(), initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, whileHover: !isSaving && !isDragging ? { scale: 1.1 } : {}, whileTap: !isSaving && !isDragging ? { scale: 0.9 } : {}, transition: {
+    return (jsx(motion.button, { ref: fabRef, className: `${styles$c.fab} ${getVariantClass()} ${isMobile ? styles$c.draggable : ''} ${isDragging ? styles$c.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$a = {"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$b = {"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 = [
@@ -1369,18 +1406,18 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
             return text || '';
         const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
         const parts = text.split(regex);
-        return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: styles$a.highlight, children: part }, index)) : (part));
+        return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: styles$b.highlight, children: part }, index)) : (part));
     };
-    return (jsxs("div", { ref: searchRef, className: `${styles$a.searchContainer} ${className || ''}`, children: [jsxs("div", { className: styles$a.searchInputWrapper, children: [jsx(FiSearch, { className: styles$a.searchIcon }), jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, onFocus: () => query.trim() && results.length > 0 && setIsDropdownOpen(true), placeholder: placeholder, className: styles$a.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsx(motion.button, { className: styles$a.clearButton, onClick: handleClear, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, children: jsx(FiX, {}) })), showFilter && (jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$a.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsx(AnimatePresence, { children: isDropdownOpen && (jsx(motion.div, { ref: resultsRef, id: "search-results", className: styles$a.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxs("div", { className: styles$a.loadingState, children: [jsx("div", { className: styles$a.spinner }), jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxs("div", { className: styles$a.emptyState, children: ["No results found for \"", query, "\""] })) : (jsx("div", { className: styles$a.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
+    return (jsxs("div", { ref: searchRef, className: `${styles$b.searchContainer} ${className || ''}`, children: [jsxs("div", { className: styles$b.searchInputWrapper, children: [jsx(FiSearch, { className: styles$b.searchIcon }), jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, onFocus: () => query.trim() && results.length > 0 && setIsDropdownOpen(true), placeholder: placeholder, className: styles$b.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsx(motion.button, { className: styles$b.clearButton, onClick: handleClear, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, children: jsx(FiX, {}) })), showFilter && (jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$b.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsx(AnimatePresence, { children: isDropdownOpen && (jsx(motion.div, { ref: resultsRef, id: "search-results", className: styles$b.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxs("div", { className: styles$b.loadingState, children: [jsx("div", { className: styles$b.spinner }), jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxs("div", { className: styles$b.emptyState, children: ["No results found for \"", query, "\""] })) : (jsx("div", { className: styles$b.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
                             const Icon = entityIcons[type];
-                            return (jsxs("div", { className: styles$a.resultGroup, children: [jsxs("div", { className: styles$a.groupHeader, children: [Icon && jsx(Icon, { className: styles$a.groupIcon }), jsx("span", { className: styles$a.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsx("span", { className: styles$a.groupCount, children: groupResults.length })] }), jsx("div", { className: styles$a.groupResults, children: groupResults.map((result) => {
+                            return (jsxs("div", { className: styles$b.resultGroup, children: [jsxs("div", { className: styles$b.groupHeader, children: [Icon && jsx(Icon, { className: styles$b.groupIcon }), jsx("span", { className: styles$b.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsx("span", { className: styles$b.groupCount, children: groupResults.length })] }), jsx("div", { className: styles$b.groupResults, children: groupResults.map((result) => {
                                             const globalIndex = results.indexOf(result);
-                                            return (jsxs(motion.button, { "data-result-index": globalIndex, className: `${styles$a.resultItem} ${highlightedIndex === globalIndex ? styles$a.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxs("div", { className: styles$a.resultContent, children: [jsx("div", { className: styles$a.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsx("div", { className: styles$a.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsx("div", { className: styles$a.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
+                                            return (jsxs(motion.button, { "data-result-index": globalIndex, className: `${styles$b.resultItem} ${highlightedIndex === globalIndex ? styles$b.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxs("div", { className: styles$b.resultContent, children: [jsx("div", { className: styles$b.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsx("div", { className: styles$b.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsx("div", { className: styles$b.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
                                         }) })] }, type));
                         }) })) })) })] }));
 };
 
-var styles$9 = {"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$a = {"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];
@@ -1401,10 +1438,10 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
     };
     if (!isOpen)
         return null;
-    return (jsx("div", { className: styles$9.modalOverlay, onClick: onClose, children: jsxs("div", { className: styles$9.modalContent, onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: styles$9.modalHeader, children: [jsx("h3", { children: "Select Time" }), jsx("button", { className: styles$9.closeButton, onClick: onClose, "aria-label": "Close", children: jsx(FiX, {}) })] }), jsxs("div", { className: styles$9.timeDisplay, children: [selectedHour.toString().padStart(2, '0'), ":", selectedMinute.toString().padStart(2, '0')] }), jsxs("div", { className: styles$9.pickerContainer, children: [jsxs("div", { className: styles$9.pickerColumn, children: [jsx("div", { className: styles$9.pickerLabel, children: "Hours" }), jsx("div", { className: styles$9.pickerScroll, children: Array.from({ length: 24 }, (_, i) => (jsx("button", { className: `${styles$9.pickerItem} ${selectedHour === i ? styles$9.selected : ''}`, onClick: () => setSelectedHour(i), children: i.toString().padStart(2, '0') }, i))) })] }), jsx("div", { className: styles$9.pickerDivider, children: ":" }), jsxs("div", { className: styles$9.pickerColumn, children: [jsx("div", { className: styles$9.pickerLabel, children: "Minutes" }), jsx("div", { className: styles$9.pickerScroll, children: Array.from({ length: 60 }, (_, i) => (jsx("button", { className: `${styles$9.pickerItem} ${selectedMinute === i ? styles$9.selected : ''}`, onClick: () => setSelectedMinute(i), children: i.toString().padStart(2, '0') }, i))) })] })] }), jsxs("div", { className: styles$9.modalActions, children: [jsx("button", { className: styles$9.cancelButton, onClick: onClose, children: "Cancel" }), jsx("button", { className: styles$9.confirmButton, onClick: handleConfirm, children: "Confirm" })] })] }) }));
+    return (jsx("div", { className: styles$a.modalOverlay, onClick: onClose, children: jsxs("div", { className: styles$a.modalContent, onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: styles$a.modalHeader, children: [jsx("h3", { children: "Select Time" }), jsx("button", { className: styles$a.closeButton, onClick: onClose, "aria-label": "Close", children: jsx(FiX, {}) })] }), jsxs("div", { className: styles$a.timeDisplay, children: [selectedHour.toString().padStart(2, '0'), ":", selectedMinute.toString().padStart(2, '0')] }), jsxs("div", { className: styles$a.pickerContainer, children: [jsxs("div", { className: styles$a.pickerColumn, children: [jsx("div", { className: styles$a.pickerLabel, children: "Hours" }), jsx("div", { className: styles$a.pickerScroll, children: Array.from({ length: 24 }, (_, i) => (jsx("button", { className: `${styles$a.pickerItem} ${selectedHour === i ? styles$a.selected : ''}`, onClick: () => setSelectedHour(i), children: i.toString().padStart(2, '0') }, i))) })] }), jsx("div", { className: styles$a.pickerDivider, children: ":" }), jsxs("div", { className: styles$a.pickerColumn, children: [jsx("div", { className: styles$a.pickerLabel, children: "Minutes" }), jsx("div", { className: styles$a.pickerScroll, children: Array.from({ length: 60 }, (_, i) => (jsx("button", { className: `${styles$a.pickerItem} ${selectedMinute === i ? styles$a.selected : ''}`, onClick: () => setSelectedMinute(i), children: i.toString().padStart(2, '0') }, i))) })] })] }), jsxs("div", { className: styles$a.modalActions, children: [jsx("button", { className: styles$a.cancelButton, onClick: onClose, children: "Cancel" }), jsx("button", { className: styles$a.confirmButton, onClick: handleConfirm, children: "Confirm" })] })] }) }));
 }
 
-var styles$8 = {"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$9 = {"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 }) {
     const [showPicker, setShowPicker] = useState(false);
@@ -1457,18 +1494,18 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
         }
     };
     const getContainerClassName = () => {
-        const classes = [styles$8.timeInput];
+        const classes = [styles$9.timeInput];
         if (error)
-            classes.push(styles$8.error);
+            classes.push(styles$9.error);
         if (success)
-            classes.push(styles$8.success);
+            classes.push(styles$9.success);
         if (loading)
-            classes.push(styles$8.loading);
+            classes.push(styles$9.loading);
         if (disabled)
-            classes.push(styles$8.disabled);
+            classes.push(styles$9.disabled);
         return classes.join(' ');
     };
-    return (jsxs(Fragment, { children: [jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { className: styles$8.label, children: [label, required && jsx("span", { className: styles$8.required, children: "*" })] }), jsxs("div", { className: styles$8.inputWrapper, children: [jsx("input", { type: "text", value: value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$8.textInput, maxLength: 5, disabled: disabled || loading, "aria-invalid": error, "aria-required": required, inputMode: "numeric", pattern: "[0-9:]*" }), jsx("button", { type: "button", onClick: handleClockClick, className: styles$8.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsx(FiClock, { size: 20 }) })] })] }), jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { className: styles$9.label, children: [label, required && jsx("span", { className: styles$9.required, children: "*" })] }), jsxs("div", { className: styles$9.inputWrapper, children: [jsx("input", { type: "text", value: value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$9.textInput, maxLength: 5, disabled: disabled || loading, "aria-invalid": error, "aria-required": required, inputMode: "numeric", pattern: "[0-9:]*" }), jsx("button", { type: "button", onClick: handleClockClick, className: styles$9.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsx(FiClock, { size: 20 }) })] })] }), jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));
 }
 
 const ThemeContext = createContext(undefined);
@@ -1480,7 +1517,7 @@ const useTheme = () => {
     return context;
 };
 
-var styles$7 = {"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$8 = {"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
@@ -1508,16 +1545,16 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
     if (variant === 'toggle') {
         // Simple toggle between light and dark
         const isDark = theme.includes('dark');
-        return (jsxs(motion.button, { className: `${styles$7.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsx(motion.div, { className: styles$7.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsx(motion.div, { className: styles$7.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsx(FiMoon, { size: 14 }) : jsx(FiSun, { size: 14 }) }) }), showLabel && jsx("span", { className: styles$7.label, children: isDark ? 'Dark' : 'Light' })] }));
+        return (jsxs(motion.button, { className: `${styles$8.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsx(motion.div, { className: styles$8.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsx(motion.div, { className: styles$8.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsx(FiMoon, { size: 14 }) : jsx(FiSun, { size: 14 }) }) }), showLabel && jsx("span", { className: styles$8.label, children: isDark ? 'Dark' : 'Light' })] }));
     }
     if (variant === 'dropdown') {
-        return (jsxs("div", { className: `${styles$7.dropdown} ${className}`, children: [jsxs(motion.button, { className: styles$7.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsx("span", { className: styles$7.label, children: currentThemeData.label })] }), jsx(motion.div, { className: styles$7.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxs(motion.button, { className: `${styles$7.dropdownItem} ${theme === t.value ? styles$7.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsx("span", { className: styles$7.icon, children: t.icon }), jsx("span", { className: styles$7.text, children: t.label })] }, t.value))) })] }));
+        return (jsxs("div", { className: `${styles$8.dropdown} ${className}`, children: [jsxs(motion.button, { className: styles$8.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsx("span", { className: styles$8.label, children: currentThemeData.label })] }), jsx(motion.div, { className: styles$8.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxs(motion.button, { className: `${styles$8.dropdownItem} ${theme === t.value ? styles$8.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsx("span", { className: styles$8.icon, children: t.icon }), jsx("span", { className: styles$8.text, children: t.label })] }, t.value))) })] }));
     }
     // Default button variant - cycles through themes
-    return (jsxs(motion.button, { className: `${styles$7.button} ${className}`, onClick: () => {
+    return (jsxs(motion.button, { className: `${styles$8.button} ${className}`, onClick: () => {
             const nextIndex = (currentThemeIndex + 1) % themes.length;
             setTheme(themes[nextIndex].value);
-        }, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsx(motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$7.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsx("span", { className: styles$7.label, children: currentThemeData.label })] }));
+        }, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsx(motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$8.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsx("span", { className: styles$8.label, children: currentThemeData.label })] }));
 };
 
 // THIS FILE IS AUTO GENERATED
@@ -1525,7 +1562,7 @@ 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$6 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
+var styles$7 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
 
 // Default tabs for backwards compatibility
 const defaultTabs = [
@@ -1536,19 +1573,220 @@ const defaultTabs = [
 ];
 const Tabs = ({ activeTab, onTabChange, tabs: customTabs, className = '' }) => {
     const tabs = customTabs ?? defaultTabs;
-    return (jsx("div", { className: `${styles$6.tabs} ${className}`, children: tabs.map((tab) => {
+    return (jsx("div", { className: `${styles$7.tabs} ${className}`, children: tabs.map((tab) => {
             const isActive = activeTab === tab.id;
-            return (jsxs(motion.button, { className: styles$6.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsx(motion.div, { animate: {
+            return (jsxs(motion.button, { className: styles$7.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsx(motion.div, { animate: {
                             rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
                         }, transition: {
                             rotate: {
                                 duration: 0.5,
                                 ease: 'easeInOut'
                             }
-                        }, children: tab.icon && (typeof tab.icon === 'function' ? (jsx("span", { className: styles$6.tabIcon, children: React.createElement(tab.icon) })) : (jsx("span", { className: styles$6.tabIcon, children: tab.icon }))) }), jsx("span", { children: tab.label })] }, tab.id));
+                        }, children: tab.icon && (typeof tab.icon === 'function' ? (jsx("span", { className: styles$7.tabIcon, children: React.createElement(tab.icon) })) : (jsx("span", { className: styles$7.tabIcon, children: tab.icon }))) }), jsx("span", { children: tab.label })] }, tab.id));
         }) }));
 };
 
+var styles$6 = {"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"};
+
+/**
+ * Calendar component - A flexible, reusable calendar for displaying events
+ *
+ * @component
+ * @description
+ * A highly customizable calendar component that can display events in month or week view.
+ * Supports custom event types, colors, icons, and localization. Perfect for scheduling,
+ * project management, habit tracking, or any date-based data visualization.
+ *
+ * @example
+ * // Basic usage
+ * <Calendar
+ *   events={myEvents}
+ *   onEventClick={handleEventClick}
+ *   viewMode="month"
+ * />
+ *
+ * @example
+ * // With custom configuration
+ * <Calendar
+ *   events={projectEvents}
+ *   config={{
+ *     eventColors: { task: '#4A90E2', meeting: '#7ED321' },
+ *     maxEventsPerDay: 5,
+ *     mondayStart: true
+ *   }}
+ *   onEventClick={handleEventClick}
+ * />
+ */
+function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initialDate = new Date(), config = {}, className = '', style = {}, loading = false, emptyState }) {
+    const [currentDate, setCurrentDate] = useState(initialDate);
+    const [currentViewMode, setCurrentViewMode] = useState(viewMode);
+    const { eventColors = {}, iconRenderer, maxEventsPerDay = 3, mondayStart = false, showWeekNumbers = false, dateFormat = { month: 'long', year: 'numeric' }, locale = 'en-US', dayLabels, monthNames } = config;
+    const defaultDayLabels = mondayStart
+        ? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    const finalDayLabels = dayLabels || defaultDayLabels;
+    const calendarData = useMemo(() => {
+        const year = currentDate.getFullYear();
+        const month = currentDate.getMonth();
+        let startDate;
+        let endDate;
+        let displayTitle;
+        if (currentViewMode === 'week') {
+            startDate = new Date(currentDate);
+            const day = startDate.getDay();
+            const diff = mondayStart
+                ? startDate.getDate() - day + (day === 0 ? -6 : 1)
+                : startDate.getDate() - day;
+            startDate = new Date(startDate.setDate(diff));
+            startDate.setHours(0, 0, 0, 0);
+            endDate = new Date(startDate);
+            endDate.setDate(endDate.getDate() + 6);
+            const weekStart = startDate.toLocaleDateString(locale, { day: 'numeric', month: 'short' });
+            const weekEnd = endDate.toLocaleDateString(locale, { day: 'numeric', month: 'short' });
+            displayTitle = `${weekStart} - ${weekEnd}`;
+        }
+        else {
+            const firstDay = new Date(year, month, 1);
+            const lastDay = new Date(year, month + 1, 0);
+            startDate = new Date(firstDay);
+            const firstDayWeek = mondayStart
+                ? (firstDay.getDay() + 6) % 7
+                : firstDay.getDay();
+            startDate.setDate(startDate.getDate() - firstDayWeek);
+            endDate = new Date(lastDay);
+            const lastDayWeek = mondayStart
+                ? (lastDay.getDay() + 6) % 7
+                : lastDay.getDay();
+            endDate.setDate(endDate.getDate() + (6 - lastDayWeek));
+            if (monthNames && monthNames[month]) {
+                displayTitle = `${monthNames[month]} ${year}`;
+            }
+            else {
+                displayTitle = currentDate.toLocaleDateString(locale, dateFormat);
+            }
+        }
+        const days = [];
+        const current = new Date(startDate);
+        while (current <= endDate) {
+            days.push(new Date(current));
+            current.setDate(current.getDate() + 1);
+        }
+        return { days, displayTitle };
+    }, [currentDate, currentViewMode, mondayStart, locale, dateFormat, monthNames]);
+    const getDayEvents = (day) => {
+        const dayEvents = events.filter(event => {
+            const eventDate = new Date(event.date);
+            return eventDate.toDateString() === day.toDateString();
+        });
+        // Sort events by time in week view
+        if (currentViewMode === 'week') {
+            return dayEvents.sort((a, b) => {
+                const timeA = a.time ? convertTimeToMinutes(a.time) : 999999;
+                const timeB = b.time ? convertTimeToMinutes(b.time) : 999999;
+                return timeA - timeB;
+            });
+        }
+        return dayEvents;
+    };
+    const convertTimeToMinutes = (time) => {
+        const [hours, minutes] = time.split(':').map(Number);
+        return hours * 60 + minutes;
+    };
+    const handlePrevious = () => {
+        const newDate = new Date(currentDate);
+        if (currentViewMode === 'week') {
+            newDate.setDate(newDate.getDate() - 7);
+        }
+        else {
+            newDate.setMonth(newDate.getMonth() - 1);
+        }
+        setCurrentDate(newDate);
+    };
+    const handleNext = () => {
+        const newDate = new Date(currentDate);
+        if (currentViewMode === 'week') {
+            newDate.setDate(newDate.getDate() + 7);
+        }
+        else {
+            newDate.setMonth(newDate.getMonth() + 1);
+        }
+        setCurrentDate(newDate);
+    };
+    const handleToday = () => {
+        setCurrentDate(new Date());
+    };
+    const getEventColor = (event) => {
+        if (event.color)
+            return event.color;
+        if (event.type && eventColors[event.type])
+            return eventColors[event.type];
+        // Default color scheme based on priority
+        const defaultColors = {
+            high: '#FF4444',
+            medium: '#FFA500',
+            low: '#4A90E2'
+        };
+        if (event.priority && defaultColors[event.priority]) {
+            return defaultColors[event.priority];
+        }
+        return '#4A90E2'; // Default blue
+    };
+    const handleEventClick = (event) => {
+        if (onEventClick) {
+            onEventClick(event);
+        }
+    };
+    const handleDateClick = (date) => {
+        if (onDateClick) {
+            onDateClick(date);
+        }
+    };
+    const isToday = (date) => {
+        const today = new Date();
+        return date.toDateString() === today.toDateString();
+    };
+    const isCurrentMonth = (date) => {
+        return date.getMonth() === currentDate.getMonth();
+    };
+    const getWeekNumber = (date) => {
+        const start = new Date(date.getFullYear(), 0, 1);
+        const diff = date.getTime() - start.getTime();
+        const oneWeek = 1000 * 60 * 60 * 24 * 7;
+        return Math.floor(diff / oneWeek) + 1;
+    };
+    if (loading) {
+        return (jsx("div", { className: `${styles$6.calendar} ${styles$6.loading} ${className}`, style: style, children: jsx("div", { className: styles$6.loadingSpinner, children: "Loading..." }) }));
+    }
+    return (jsxs("div", { className: `${styles$6.calendar} ${className}`, style: style, children: [jsxs("div", { className: styles$6.header, children: [jsxs("div", { className: styles$6.navigation, children: [jsx("button", { onClick: handlePrevious, className: styles$6.navButton, "aria-label": "Previous", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsx("h3", { className: styles$6.title, children: calendarData.displayTitle }), jsx("button", { onClick: handleNext, className: styles$6.navButton, "aria-label": "Next", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), jsxs("div", { className: styles$6.controls, children: [jsx("button", { onClick: handleToday, className: styles$6.todayButton, children: "Today" }), jsxs("div", { className: styles$6.viewToggle, children: [jsx("button", { className: `${styles$6.viewButton} ${currentViewMode === 'month' ? styles$6.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsx("button", { className: `${styles$6.viewButton} ${currentViewMode === 'week' ? styles$6.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" })] })] })] }), jsxs("div", { className: styles$6.weekDays, children: [showWeekNumbers && jsx("div", { className: styles$6.weekNumberHeader, children: "Week" }), finalDayLabels.map((day) => (jsx("div", { className: styles$6.weekDay, children: day }, day)))] }), jsx("div", { className: `${styles$6.daysGrid} ${currentViewMode === 'week' ? styles$6.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 (jsxs(motion.div, { className: `${styles$6.dayCell} ${dayIsToday ? styles$6.today : ''} ${!isInCurrentMonth ? styles$6.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 && (jsx("div", { className: styles$6.weekNumber, children: getWeekNumber(day) })), jsx("div", { className: styles$6.dayNumber, children: day.getDate() }), dayEvents.length > 0 && (jsxs("div", { className: styles$6.events, children: [dayEvents.slice(0, maxEventsPerDay).map((event, eventIndex) => (jsxs(motion.div, { className: `${styles$6.event} ${event.status === 'completed' ? styles$6.completed : ''}`, style: {
+                                            backgroundColor: getEventColor(event),
+                                            opacity: event.status === 'completed' ? 0.7 : 1
+                                        }, onClick: (e) => {
+                                            e.stopPropagation();
+                                            handleEventClick(event);
+                                        }, initial: { opacity: 0, x: -10 }, animate: { opacity: 1, x: 0 }, transition: {
+                                            duration: 0.2,
+                                            delay: eventIndex * 0.05,
+                                            ease: "easeOut"
+                                        }, whileHover: {
+                                            scale: 1.02,
+                                            y: -1,
+                                            transition: { duration: 0.1 }
+                                        }, whileTap: {
+                                            scale: 0.98,
+                                            transition: { duration: 0.1 }
+                                        }, children: [iconRenderer && iconRenderer(event), jsxs("span", { className: styles$6.eventTitle, children: [event.time && (jsx("span", { className: styles$6.eventTime, children: event.time })), event.title] }), event.status === 'completed' && (jsx("svg", { className: styles$6.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id))), dayEvents.length > maxEventsPerDay && (jsxs("div", { className: styles$6.moreEvents, children: ["+", dayEvents.length - maxEventsPerDay, " more"] }))] })), dayEvents.length === 0 && emptyState && (jsx("div", { className: styles$6.emptyState, children: emptyState }))] }, `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`));
+                }) })] }));
+}
+
 var desktopStyles = {"navbar":"Navbar-module_navbar__-SNiN","navbarSidebar":"Navbar-module_navbarSidebar__RVVL8","navbarTop":"Navbar-module_navbarTop__MLI-S","navList":"Navbar-module_navList__764oY","navItem":"Navbar-module_navItem__cbeLP","navbarMinimal":"Navbar-module_navbarMinimal__7gs0n","navLogo":"Navbar-module_navLogo__y0AxI","logoContainer":"Navbar-module_logoContainer__zJG3x","logoImage":"Navbar-module_logoImage__1Ptmz","logoPlaceholder":"Navbar-module_logoPlaceholder__aIREi","logoContent":"Navbar-module_logoContent__CjPyL","logoText":"Navbar-module_logoText__bTwI0","logoSubtitle":"Navbar-module_logoSubtitle__UA95I","subNavItem":"Navbar-module_subNavItem__WN9is","navLink":"Navbar-module_navLink__I-45k","active":"Navbar-module_active__tLLqx","activeBackground":"Navbar-module_activeBackground__ikyOn","navIcon":"Navbar-module_navIcon__uU4yD","activeIcon":"Navbar-module_activeIcon__omRDk","navText":"Navbar-module_navText__4e0cK","activeText":"Navbar-module_activeText__zSzJC","navBadge":"Navbar-module_navBadge__mLur9","chevron":"Navbar-module_chevron__nmRNk","subNavList":"Navbar-module_subNavList__YsOQP","navFooter":"Navbar-module_navFooter__p1wMO","mobileMenuButton":"Navbar-module_mobileMenuButton__BrALw","mobileBackdrop":"Navbar-module_mobileBackdrop__bgxCV","mobileMenuOpen":"Navbar-module_mobileMenuOpen__oICVa"};
 
 var mobileStyles = {"navbar":"Navbar-mobile-module_navbar__-shkE","navLogo":"Navbar-mobile-module_navLogo__7Gnna","navList":"Navbar-mobile-module_navList__FBo8I","navItem":"Navbar-mobile-module_navItem__-9E9-","navLink":"Navbar-mobile-module_navLink__A8n8F","active":"Navbar-mobile-module_active__h3ajz","activeBackground":"Navbar-mobile-module_activeBackground__btXAN","navIcon":"Navbar-mobile-module_navIcon__4L17v","activeIcon":"Navbar-mobile-module_activeIcon__A8GF-","navText":"Navbar-mobile-module_navText__ewf-i","activeText":"Navbar-mobile-module_activeText__fNqcU","navBadge":"Navbar-mobile-module_navBadge__YccGx","chevron":"Navbar-mobile-module_chevron__nBPqn","subNavList":"Navbar-mobile-module_subNavList__8tINc","navFooter":"Navbar-mobile-module_navFooter__yijWu","mobileMenuButton":"Navbar-mobile-module_mobileMenuButton__Dx3t8","mobileBackdrop":"Navbar-mobile-module_mobileBackdrop__biYng","navbarTop":"Navbar-mobile-module_navbarTop__oyfPE","navbarMinimal":"Navbar-mobile-module_navbarMinimal__cudny"};
@@ -2558,5 +2796,5 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
                                     } }), jsx("span", { className: styles.legendLabel, children: item.name }), jsx("span", { className: styles.legendValue, children: item.value.toLocaleString() })] }, item.name))) }))] })] }));
 };
 
-export { ArrayInput, BooleansHeatmap, Button, Card, Checkbox, DateInput, EditFAB, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, SunburstChart, Tabs, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, ToggleButton, useTheme$1 as useTheme };
+export { ArrayInput, BooleansHeatmap, Button, Calendar, Card, Checkbox, DateInput, EditFAB, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, SunburstChart, Tabs, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, ToggleButton, useTheme$1 as useTheme };
 //# sourceMappingURL=index.esm.js.map