@emeraldemperaur/vector-sigma 1.4.5 → 1.4.8

package/lib/index.cjs

@@ -12520,7 +12520,7 @@ const getDesignStyles = (inputtype, isOpen) => {
     return Object.assign(Object.assign({}, base), { backgroundColor: 'transparent', border: '1px solid var(--gray-6)', borderLeft: isOpen ? '4px solid var(--accent-9)' : '1px solid var(--gray-6)' });
 };
 const ConditionalTrigger = (_a) => {
-    var { alias, readOnly, width, placeholder = '', value, inputlabel, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputoptions = [], toggledinputtype = "conditionaltoggle-outline", children, style, className } = _a, props = __rest$1(_a, ["alias", "readOnly", "width", "placeholder", "value", "inputlabel", "inputtype", "triggerValue", "inputoptions", "toggledinputtype", "children", "style", "className"]);
+    var { alias, readonly, width, placeholder = '', value, inputlabel, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputoptions = [], toggledinputtype = "conditionaltoggle-outline", children, style, className } = _a, props = __rest$1(_a, ["alias", "readonly", "width", "placeholder", "value", "inputlabel", "inputtype", "triggerValue", "inputoptions", "toggledinputtype", "children", "style", "className"]);
     const [field, meta, helpers] = formik.useField(alias);
     const { setTouched } = formik.useFormikContext();
     const inputId = `${alias}FormInput` || crypto.randomUUID();
@@ -12537,16 +12537,16 @@ const ConditionalTrigger = (_a) => {
         switch (true) {
             case inputtype.includes('conditionalcheckbox'):
                 return (React.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
-                    React.createElement(c$2, { name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
+                    React.createElement(c$2, { name: alias, disabled: readonly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
             case inputtype.includes('conditionalselect'):
                 return (React.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
-                    React.createElement(C$1, { name: alias, disabled: readOnly, value: field.value, defaultValue: placeholder || String(value) || "", onValueChange: handleChange },
+                    React.createElement(C$1, { name: alias, disabled: readonly, value: field.value, defaultValue: placeholder || String(value) || "", onValueChange: handleChange },
                         React.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' } }),
                         React.createElement(g, null, inputoptions.map((inputoption) => (React.createElement(v, { key: inputoption.optionvalue || crypto.randomUUID(), value: inputoption.optionvalue }, inputoption.text)))))));
             case inputtype.includes('conditionaltoggle'):
             default:
                 return (React.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
-                    React.createElement(i$1, { id: inputId, name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
+                    React.createElement(i$1, { id: inputId, name: alias, disabled: readonly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
         }
     };
     const containerStyle = getDesignStyles(inputtype, isOpen);
@@ -20853,10 +20853,12 @@ const DatePicker = (_a) => {
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
-    const selectedDate = field.value ? (typeof field.value === 'string' ? parseISO(field.value) : field.value) : undefined;
+    const selectedDate = field.value
+        ? (typeof field.value === 'string' ? parseISO(field.value) : field.value)
+        : undefined;
     const parsedMin = ensureDate(minvalue);
     const parsedMax = ensureDate(maxvalue);
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
     const [isOpen, setIsOpen] = React.useState(false);
     const containerRef = React.useRef(null);
@@ -20873,85 +20875,177 @@ const DatePicker = (_a) => {
             });
         }
     }, [inputtype]);
-    // --- STYLES ---
-    const activeInputStyle = inputtype === 'datepicker-neumorphic'
-        ? Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars) : inputtype === 'datepicker-outline'
-        ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
-        : { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)', border: 'none' };
+    // --- INPUT STYLES ---
+    const activeInputStyle = React.useMemo(() => {
+        if (inputtype === 'datepicker-neumorphic') {
+            return Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars);
+        }
+        if (inputtype === 'datepicker-outline') {
+            return {
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
+                borderRadius: 'var(--radius-2)'
+            };
+        }
+        // Material / Default
+        return {
+            backgroundColor: 'var(--color-surface)',
+            boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
+            border: '1px solid var(--gray-5)',
+            borderRadius: 'var(--radius-2)'
+        };
+    }, [inputtype, hasError, neuVars]);
+    // --- CALENDAR POPUP STYLES ---
+    const calendarContainerStyle = React.useMemo(() => {
+        const base = { padding: '16px', borderRadius: '12px' };
+        if (inputtype === 'datepicker-neumorphic') {
+            return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
+        }
+        if (inputtype === 'datepicker-outline') {
+            return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-6)', boxShadow: '0 4px 12px rgba(0,0,0,0.05)' });
+        }
+        // Material
+        return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
+    }, [inputtype, neuVars]);
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
             React.createElement("input", { type: "hidden", "aria-describedby": `${alias}InputLabel`, name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
             React.createElement("style", { dangerouslySetInnerHTML: { __html: `
-        /* Base Calendar */
-        .rdp { --rdp-cell-size: 32px; margin: 0; }
-        .rdp-months { display: flex; justify-content: center; }
-        .rdp-month { background: ${inputtype === 'datepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
-        .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
-        .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
-        .rdp-nav { display: flex; gap: 5px; }
-        .rdp-head_cell { font-size: 0.8rem; font-weight: 500; color: var(--gray-10); padding-bottom: 5px; }
-        
-        /* Day */
-        .rdp-day { 
-          width: var(--rdp-cell-size); height: var(--rdp-cell-size); 
-          border-radius: 50%; border: none; background: transparent; 
-          cursor: pointer; color: var(--gray-12); 
-          display: flex; align-items: center; justify-content: center;
-        }
-        .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
+          /* Reset & Layout */
+          .rdp { 
+             --rdp-cell-size: 36px;
+             --rdp-caption-font-size: 16px;
+             margin: 0; 
+             font-family: var(--default-font-family, sans-serif);
+          }
+          .rdp-months { justify-content: center; }
+          .rdp-month { background: transparent; }
+          
+          /* Header (Month Name + Nav) */
+          .rdp-caption { 
+             display: flex; 
+             align-items: center; 
+             justify-content: space-between; 
+             margin-bottom: 12px; 
+             padding: 0 4px;
+          }
+          .rdp-caption_label { 
+             font-weight: 600; 
+             color: var(--gray-12); 
+             font-size: var(--font-size-3); 
+             text-transform: capitalize;
+          }
+          .rdp-nav { display: flex; gap: 8px; }
+          .rdp-nav_button {
+             color: var(--gray-11);
+             border-radius: 6px;
+             padding: 4px;
+             transition: background 0.2s;
+             background: transparent;
+             border: none;
+             cursor: pointer;
+             display: flex;
+             align-items: center;
+             justify-content: center;
+          }
+          .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
+
+          /* Weekdays Row */
+          .rdp-head_cell { 
+             font-size: 0.75rem; 
+             font-weight: 600; 
+             color: var(--gray-9); 
+             text-transform: uppercase; 
+             padding-bottom: 8px; 
+             width: var(--rdp-cell-size);
+             text-align: center;
+          }
+          
+          /* Day Cells */
+          .rdp-cell { text-align: center; }
+          .rdp-day { 
+             width: var(--rdp-cell-size); 
+             height: var(--rdp-cell-size); 
+             border-radius: 50%;
+             border: 2px solid transparent; 
+             background: transparent; 
+             cursor: pointer; 
+             color: var(--gray-12); 
+             font-size: var(--font-size-2);
+             display: flex; 
+             align-items: center; 
+             justify-content: center;
+             transition: all 0.15s ease;
+             margin: 1px;
+          }
 
-        /* Selected State */
-        .rdp-day_selected { 
-          background-color: var(--accent-9); color: white; 
-          font-weight: bold;
-        }
+          /* States */
+          .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { 
+             background-color: var(--gray-4); 
+          }
+          
+          .rdp-day_selected { 
+             background-color: var(--accent-9) !important; 
+             color: white !important; 
+             font-weight: 600;
+          }
 
-        /* NEUMORPHIC OVERRIDES */
-        .neu-calendar .rdp-month {
-           /* The floating plate */
-           box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
-        }
-        .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
-           background-color: transparent;
-           /* Hover = pop out slightly */
-           box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
-        }
-        .neu-calendar .rdp-day_selected {
-           background-color: var(--neu-bg);
-           color: var(--neu-accent);
-           /* Pressed in state for selected */
-           box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
-        }
-      ` } }),
+          .rdp-day_today { 
+             color: var(--accent-11); 
+             font-weight: 700;
+             position: relative;
+          }
+
+          .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
+
+          /* NEUMORPHIC OVERRIDES */
+          ${inputtype === 'datepicker-neumorphic' ? `
+            .rdp-day:hover:not(.rdp-day_selected) {
+                box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
+                background-color: transparent;
+            }
+            .rdp-day_selected {
+                box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
+                color: var(--neu-accent) !important;
+                background-color: var(--neu-bg) !important;
+            }
+          ` : ''}
+        ` } }),
             React.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
                 React.createElement(s$1, null,
-                    React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
+                    React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
                         React.createElement(c, null,
                             React.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
-                        React.createElement("input", { readOnly: true, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP') : '', placeholder: placeholder, style: {
+                        React.createElement("input", { readOnly: true, disabled: readonly, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP') : '', placeholder: placeholder, style: {
                                 backgroundColor: 'transparent',
                                 border: 'none',
                                 outline: 'none',
                                 width: '100%',
-                                cursor: 'pointer',
+                                cursor: readonly ? 'default' : 'pointer',
                                 color: 'inherit',
                                 fontFamily: 'inherit',
-                                fontSize: 'var(--font-size-2)'
+                                fontSize: 'var(--font-size-2)',
+                                fontWeight: 500
                             }, id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel` }))),
-                React.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
-                    React.createElement("div", { className: inputtype === 'datepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
-                        React.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
-                                setFieldValue(alias, date);
-                                setIsOpen(false);
-                                setFieldTouched(alias, true);
-                            }, disabled: [{ before: parsedMin || new Date(1900, 0, 1) }, { after: parsedMax || new Date(2100, 0, 1) }], components: {
-                                Chevron: (props) => {
-                                    if (props.orientation === 'left') {
-                                        return React.createElement(Icon, { name: 'chevronleft', height: "16", width: "16" });
-                                    }
-                                    return React.createElement(Icon, { name: 'chevronright', height: "16", width: "16" });
+                React.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
+                    React.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
+                            setFieldValue(alias, date);
+                            setIsOpen(false);
+                            setFieldTouched(alias, true);
+                        }, disabled: [
+                            ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
+                            { before: parsedMin || new Date(1900, 0, 1) },
+                            { after: parsedMax || new Date(2100, 0, 1) }
+                        ], components: {
+                            Chevron: (props) => {
+                                const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
+                                if (props.orientation === 'left') {
+                                    return React.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
                                 }
-                            } })))),
+                                return React.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
+                            }
+                        } }))),
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
@@ -20962,16 +21056,16 @@ const DatePicker = (_a) => {
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
 };
 
 const DateRangePicker = (_a) => {
     var _b, _c;
-    var { inputtype = 'daterangepicker-outline', alias, readOnly, width, inputlabel, placeholder = '', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
+    var { inputtype = 'daterangepicker-outline', alias, readOnly, width, inputlabel, placeholder = 'Pick a date range', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
-    // Range object value format: { from: "2023-01-01", to: "2023-01-05" } :: Strings or Date Objects
+    // Range object value format: { from: "2023-01-01", to: "2023-01-05" }
     const rawVal = field.value || {};
     const selectedRange = {
         from: ensureDate(rawVal.from),
@@ -20979,7 +21073,7 @@ const DateRangePicker = (_a) => {
     };
     const parsedMin = ensureDate(minvalue);
     const parsedMax = ensureDate(maxvalue);
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
     const [isOpen, setIsOpen] = React.useState(false);
     const containerRef = React.useRef(null);
@@ -21005,11 +21099,38 @@ const DateRangePicker = (_a) => {
             displayText = format$2(selectedRange.from, 'LLL dd');
         }
     }
-    // Styles
-    const activeInputStyle = inputtype === 'daterangepicker-neumorphic'
-        ? Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars) : inputtype === 'daterangepicker-outline'
-        ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
-        : { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)', border: 'none' };
+    // --- STYLES ---
+    const activeInputStyle = React.useMemo(() => {
+        if (inputtype === 'daterangepicker-neumorphic') {
+            return Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars);
+        }
+        if (inputtype === 'daterangepicker-outline') {
+            return {
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
+                borderRadius: 'var(--radius-2)'
+            };
+        }
+        // Material
+        return {
+            backgroundColor: 'var(--color-surface)',
+            boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
+            border: '1px solid var(--gray-5)',
+            borderRadius: 'var(--radius-2)'
+        };
+    }, [inputtype, hasError, neuVars]);
+    const calendarContainerStyle = React.useMemo(() => {
+        const base = { padding: '16px', borderRadius: '12px' };
+        if (inputtype === 'daterangepicker-neumorphic') {
+            return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
+        }
+        if (inputtype === 'daterangepicker-outline') {
+            return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-6)', boxShadow: '0 4px 12px rgba(0,0,0,0.05)' });
+        }
+        // Material
+        return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
+    }, [inputtype, neuVars]);
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
             React.createElement("input", { type: "hidden", name: alias, value: JSON.stringify({
@@ -21017,31 +21138,120 @@ const DateRangePicker = (_a) => {
                     to: (_c = selectedRange.to) === null || _c === void 0 ? void 0 : _c.toISOString()
                 }) }),
             React.createElement("style", { dangerouslySetInnerHTML: { __html: `
-        .rdp { --rdp-cell-size: 32px; margin: 0; }
+        /* Reset & Layout */
+        .rdp { 
+            --rdp-cell-size: 36px;
+            --rdp-caption-font-size: 16px;
+            margin: 0; 
+            font-family: var(--default-font-family, sans-serif);
+        }
         .rdp-months { justify-content: center; }
-        .rdp-month { background: ${inputtype === 'daterangepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
-        .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
-        .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
-        .rdp-nav { display: flex; gap: 5px; }
-        .rdp-head_cell { font-size: 0.8rem; font-weight: 500; color: var(--gray-10); padding-bottom: 5px; }
-        .rdp-day { width: var(--rdp-cell-size); height: var(--rdp-cell-size); border-radius: 50%; border: none; background: transparent; cursor: pointer; color: var(--gray-12); display: flex; align-items: center; justify-content: center; }
-        .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
+        .rdp-month { background: transparent; }
         
-        .rdp-day_selected:not(.rdp-day_range_start):not(.rdp-day_range_end) { background-color: var(--accent-4); color: var(--accent-11); border-radius: 0; }
-        .rdp-day_range_start { border-radius: 50% 0 0 50%; background-color: var(--accent-9); color: white; }
-        .rdp-day_range_end { border-radius: 0 50% 50% 0; background-color: var(--accent-9); color: white; }
+        /* Header */
+        .rdp-caption { 
+            display: flex; align-items: center; justify-content: space-between; 
+            margin-bottom: 12px; padding: 0 4px;
+        }
+        .rdp-caption_label { 
+            font-weight: 600; color: var(--gray-12); font-size: var(--font-size-3); 
+            text-transform: capitalize;
+        }
+        .rdp-nav { display: flex; gap: 8px; }
+        .rdp-nav_button {
+            color: var(--gray-11); border-radius: 6px; padding: 4px;
+            transition: background 0.2s; background: transparent; border: none; cursor: pointer;
+            display: flex; align-items: center; justify-content: center;
+        }
+        .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
+
+        /* Weekdays */
+        .rdp-head_cell { 
+            font-size: 0.75rem; font-weight: 600; color: var(--gray-9); 
+            text-transform: uppercase; padding-bottom: 8px; width: var(--rdp-cell-size);
+            text-align: center;
+        }
+        
+        /* Cells */
+        .rdp-cell { text-align: center; padding: 1px 0; }
+        .rdp-day { 
+            width: var(--rdp-cell-size); height: var(--rdp-cell-size); 
+            border-radius: 50%; border: 2px solid transparent; 
+            background: transparent; cursor: pointer; color: var(--gray-12); 
+            font-size: var(--font-size-2); display: flex; align-items: center; justify-content: center;
+            margin: 0 auto;
+        }
+        
+        /* States */
+        .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { background-color: var(--gray-4); }
+
+        /* --- RANGE STYLES --- */
+        .rdp-day_range_middle {
+            background-color: var(--accent-3) !important;
+            color: var(--accent-11) !important;
+            border-radius: 0 !important;
+            width: 100%; /* Fill cell width for continuous strip */
+        }
+        .rdp-day_range_start {
+            background-color: var(--accent-9) !important;
+            color: white !important;
+            border-top-left-radius: 50% !important;
+            border-bottom-left-radius: 50% !important;
+            border-top-right-radius: 0 !important;
+            border-bottom-right-radius: 0 !important;
+            width: 100%;
+        }
+        .rdp-day_range_end {
+            background-color: var(--accent-9) !important;
+            color: white !important;
+            border-top-right-radius: 50% !important;
+            border-bottom-right-radius: 50% !important;
+            border-top-left-radius: 0 !important;
+            border-bottom-left-radius: 0 !important;
+            width: 100%;
+        }
+        .rdp-day_range_start.rdp-day_range_end {
+            border-radius: 50% !important;
+            width: var(--rdp-cell-size);
+        }
+        .rdp-day_today { color: var(--accent-11); font-weight: 700; }
+        .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
 
-        /* Neumorphic */
-        .neu-calendar .rdp-month { box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); }
-        .neu-calendar .rdp-day_range_start, .neu-calendar .rdp-day_range_end { box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2); }
+        /* NEUMORPHIC OVERRIDES */
+        ${inputtype === 'daterangepicker-neumorphic' ? `
+          .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
+             box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
+             background-color: transparent;
+          }
+          .neu-calendar .rdp-day_range_start, 
+          .neu-calendar .rdp-day_range_end {
+             box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
+             color: var(--neu-accent) !important;
+             background-color: var(--neu-bg) !important;
+          }
+          .neu-calendar .rdp-day_range_middle {
+             box-shadow: inset 1px 1px 2px var(--neu-shadow-dark), inset -1px -1px 2px var(--neu-shadow-light);
+             background-color: transparent !important; 
+          }
+        ` : ''}
       ` } }),
             React.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
                 React.createElement(s$1, null,
-                    React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
+                    React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readOnly && setIsOpen(true) },
                         React.createElement(c, null,
                             React.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
-                        React.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel`, readOnly: true, value: displayText, style: { backgroundColor: 'transparent', border: 'none', outline: 'none', width: '100%', cursor: 'pointer', color: 'inherit', fontSize: 'var(--font-size-2)' } }))),
-                React.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
+                        React.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel`, readOnly: true, disabled: readOnly, value: displayText, placeholder: placeholder, style: {
+                                backgroundColor: 'transparent',
+                                border: 'none',
+                                outline: 'none',
+                                width: '100%',
+                                cursor: readOnly ? 'default' : 'pointer',
+                                color: 'inherit',
+                                fontFamily: 'inherit',
+                                fontSize: 'var(--font-size-2)',
+                                fontWeight: 500
+                            } }))),
+                React.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
                     React.createElement("div", { className: inputtype === 'daterangepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
                         React.createElement(DayPicker, { mode: "range", selected: selectedRange, onSelect: (range) => {
                                 setFieldValue(alias, range);
@@ -21050,13 +21260,15 @@ const DateRangePicker = (_a) => {
                                     setIsOpen(false);
                                 }
                             }, disabled: [
+                                ...(readOnly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
                                 { before: parsedMin || new Date(1900, 0, 1) },
                                 { after: parsedMax || new Date(2100, 0, 1) }
                             ], components: {
                                 Chevron: (props) => {
+                                    const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
                                     if (props.orientation === 'left')
-                                        return React.createElement(Icon, { name: 'chevronleft' });
-                                    return React.createElement(Icon, { name: 'chevronright' });
+                                        return React.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
+                                    return React.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
                                 }
                             } })))),
             React.createElement("div", null,
@@ -21069,18 +21281,18 @@ const DateRangePicker = (_a) => {
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
 };
 
 const DateTimePicker = (_a) => {
-    var { inputtype = 'datetimepicker-outline', alias, readonly, width, inputlabel, placeholder = '', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
+    var { inputtype = 'datetimepicker-outline', alias, readonly, width, inputlabel, placeholder = 'Pick date & time', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const selectedDate = ensureDate(field.value);
     const parsedMin = ensureDate(minvalue);
     const parsedMax = ensureDate(maxvalue);
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
     const [isOpen, setIsOpen] = React.useState(false);
     const containerRef = React.useRef(null);
@@ -21113,55 +21325,128 @@ const DateTimePicker = (_a) => {
         const baseDate = selectedDate || new Date();
         let newDate = baseDate;
         if (type === 'hours') {
-            // 0-23 limiters
             const h = Math.min(23, Math.max(0, numVal));
             newDate = setHours(baseDate, h);
         }
         else {
-            // 0-59 limiters
             const m = Math.min(59, Math.max(0, numVal));
             newDate = setMinutes(baseDate, m);
         }
         setFieldValue(alias, newDate);
     };
-    // Styles
-    const activeInputStyle = inputtype === 'datetimepicker-neumorphic'
-        ? Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars) : inputtype === 'datetimepicker-outline'
-        ? { backgroundColor: 'transparent', boxShadow: 'none', border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)' }
-        : { backgroundColor: 'var(--color-surface)', boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 2px 5px rgba(0,0,0,0.1)', border: 'none' };
+    // --- STYLES ---
+    const activeInputStyle = React.useMemo(() => {
+        if (inputtype === 'datetimepicker-neumorphic') {
+            return Object.assign({ backgroundColor: 'var(--neu-bg)', border: 'none', color: hasError ? 'var(--red-9)' : 'var(--neu-text)', boxShadow: 'inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light)', borderRadius: '8px' }, neuVars);
+        }
+        if (inputtype === 'datetimepicker-outline') {
+            return {
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                border: hasError ? '1px solid var(--red-9)' : '1px solid var(--gray-7)',
+                borderRadius: 'var(--radius-2)'
+            };
+        }
+        // Material
+        return {
+            backgroundColor: 'var(--color-surface)',
+            boxShadow: hasError ? 'inset 0 0 0 1px var(--red-9)' : '0 1px 2px rgba(0,0,0,0.05)',
+            border: '1px solid var(--gray-5)',
+            borderRadius: 'var(--radius-2)'
+        };
+    }, [inputtype, hasError, neuVars]);
+    const calendarContainerStyle = React.useMemo(() => {
+        const base = { padding: 0, borderRadius: '12px', overflow: 'hidden' }; // Padding 0 to let Time section flush to bottom
+        if (inputtype === 'datetimepicker-neumorphic') {
+            return Object.assign(Object.assign(Object.assign({}, base), { backgroundColor: 'var(--neu-bg)', boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
+        }
+        if (inputtype === 'datetimepicker-outline') {
+            return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-6)', boxShadow: '0 4px 12px rgba(0,0,0,0.05)' });
+        }
+        // Material
+        return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: 'none', boxShadow: '0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2)' });
+    }, [inputtype, neuVars]);
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
             React.createElement("input", { type: "hidden", name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
             React.createElement("style", { dangerouslySetInnerHTML: { __html: `
-        .rdp { --rdp-cell-size: 32px; margin: 0; }
+        /* Reset & Layout */
+        .rdp { 
+            --rdp-cell-size: 36px;
+            --rdp-caption-font-size: 16px;
+            margin: 0; 
+            padding: 16px; /* Padding moved to RDP so Time section is flush */
+            font-family: var(--default-font-family, sans-serif);
+        }
         .rdp-months { justify-content: center; }
-        .rdp-month { background: ${inputtype === 'datetimepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)'}; padding: 10px; border-radius: 8px; }
-        .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
-        .rdp-caption_label { font-weight: bold; color: var(--gray-12); font-size: var(--font-size-3); }
-        .rdp-nav { display: flex; gap: 5px; }
-        .rdp-day { width: var(--rdp-cell-size); height: var(--rdp-cell-size); border-radius: 50%; border: none; background: transparent; cursor: pointer; color: var(--gray-12); display: flex; align-items: center; justify-content: center; }
-        .rdp-day:hover:not(.rdp-day_selected) { background-color: var(--gray-4); }
-        .rdp-day_selected { background-color: var(--accent-9); color: white; font-weight: bold; }
+        .rdp-month { background: transparent; }
         
-        .neu-calendar .rdp-month { box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light); }
-        .neu-calendar .rdp-day:hover:not(.rdp-day_selected) { background-color: transparent; box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light); }
-        .neu-calendar .rdp-day_selected { background-color: var(--neu-bg); color: var(--neu-accent); box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light); }
+        /* Header */
+        .rdp-caption { 
+            display: flex; align-items: center; justify-content: space-between; 
+            margin-bottom: 12px; padding: 0 4px;
+        }
+        .rdp-caption_label { 
+            font-weight: 600; color: var(--gray-12); font-size: var(--font-size-3); 
+            text-transform: capitalize;
+        }
+        .rdp-nav { display: flex; gap: 8px; }
+        .rdp-nav_button {
+            color: var(--gray-11); border-radius: 6px; padding: 4px;
+            transition: background 0.2s; background: transparent; border: none; cursor: pointer;
+            display: flex; align-items: center; justify-content: center;
+        }
+        .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
+
+        /* Weekdays */
+        .rdp-head_cell { 
+            font-size: 0.75rem; font-weight: 600; color: var(--gray-9); 
+            text-transform: uppercase; padding-bottom: 8px; width: var(--rdp-cell-size);
+            text-align: center;
+        }
+        
+        /* Cells */
+        .rdp-cell { text-align: center; }
+        .rdp-day { 
+            width: var(--rdp-cell-size); height: var(--rdp-cell-size); 
+            border-radius: 50%; border: 2px solid transparent; 
+            background: transparent; cursor: pointer; color: var(--gray-12); 
+            font-size: var(--font-size-2); display: flex; align-items: center; justify-content: center;
+            transition: all 0.15s ease; margin: 1px;
+        }
+        
+        .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { background-color: var(--gray-4); }
+        .rdp-day_selected { background-color: var(--accent-9) !important; color: white !important; font-weight: 600; }
+        .rdp-day_today { color: var(--accent-11); font-weight: 700; position: relative; }
+        .rdp-day_today:not(.rdp-day_selected)::after {
+             content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--accent-9);
+        }
+        .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
         
         /* Time Input Styling */
         .time-input {
-            text-align: center;
-            font-variant-numeric: tabular-nums;
-            width: 40px;
-            padding: 4px;
-            border-radius: 4px;
-            border: 1px solid var(--gray-6);
-            background: var(--color-surface);
-        }
-        .neu-calendar .time-input {
-            background: var(--neu-bg);
-            border: none;
-            box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
+            text-align: center; font-variant-numeric: tabular-nums;
+            width: 44px; padding: 4px; border-radius: 6px;
+            border: 1px solid var(--gray-6); background: var(--color-surface);
+            color: var(--gray-12); font-weight: 500;
         }
+        .time-input:focus { outline: 2px solid var(--accent-9); border-color: transparent; }
+        
+        /* Neumorphic Overrides */
+        ${inputtype === 'datetimepicker-neumorphic' ? `
+          .neu-calendar .rdp-day:hover:not(.rdp-day_selected) {
+             box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
+             background-color: transparent;
+          }
+          .neu-calendar .rdp-day_selected {
+             box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
+             color: var(--neu-accent) !important; background-color: var(--neu-bg) !important;
+          }
+          .neu-calendar .time-input {
+             background: var(--neu-bg); border: none;
+             box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
+          }
+        ` : ''}
       ` } }),
             React.createElement(P$1, { open: isOpen, onOpenChange: (open) => {
                     setIsOpen(open);
@@ -21169,28 +21454,39 @@ const DateTimePicker = (_a) => {
                         setFieldTouched(alias, true);
                 } },
                 React.createElement(s$1, null,
-                    React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datetimepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => setIsOpen(true) },
+                    React.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datetimepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
                         React.createElement(c, null,
                             React.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
-                        React.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : undefined, readOnly: true, value: selectedDate ? format$2(selectedDate, 'PPP p') : '', placeholder: placeholder, style: { backgroundColor: 'transparent', border: 'none', outline: 'none', width: '100%', cursor: 'pointer', color: 'inherit', fontFamily: 'inherit', fontSize: 'var(--font-size-2)' } }))),
-                React.createElement(i$3, { style: { padding: 0, backgroundColor: 'transparent', boxShadow: 'none' }, align: "start" },
+                        React.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : undefined, readOnly: true, disabled: readonly, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP p') : '', placeholder: placeholder, style: {
+                                backgroundColor: 'transparent', border: 'none', outline: 'none', width: '100%',
+                                cursor: readonly ? 'default' : 'pointer', color: 'inherit', fontFamily: 'inherit',
+                                fontSize: 'var(--font-size-2)', fontWeight: 500
+                            } }))),
+                React.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
                     React.createElement("div", { className: inputtype === 'datetimepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
-                        React.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, disabled: [{ before: parsedMin || new Date(1900, 0, 1) }, { after: parsedMax || new Date(2100, 0, 1) }], components: {
-                                Chevron: (props) => props.orientation === 'left' ? React.createElement(Icon, { name: 'chevronleft' }) : React.createElement(Icon, { name: 'chevronright' })
+                        React.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, disabled: [
+                                ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
+                                { before: parsedMin || new Date(1900, 0, 1) },
+                                { after: parsedMax || new Date(2100, 0, 1) }
+                            ], modifiers: { today: new Date() }, modifiersClassNames: { today: 'rdp-day_today' }, components: {
+                                Chevron: (props) => {
+                                    const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
+                                    if (props.orientation === 'left')
+                                        return React.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
+                                    return React.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
+                                }
                             } }),
                         React.createElement(o$2, { size: "4" }),
                         React.createElement(p$5, { p: "3", gap: "3", align: "center", justify: "center", style: {
-                                backgroundColor: inputtype === 'datetimepicker-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)',
-                                borderBottomLeftRadius: '8px',
-                                borderBottomRightRadius: '8px',
-                                boxShadow: inputtype === 'datetimepicker-neumorphic' ? '6px 6px 12px var(--neu-shadow-dark), -6px 6px 12px var(--neu-shadow-light)' : undefined
+                                backgroundColor: inputtype === 'datetimepicker-neumorphic' ? 'rgba(0,0,0,0.02)' : 'var(--gray-2)',
+                                borderTop: inputtype === 'datetimepicker-neumorphic' ? 'none' : '1px solid var(--gray-4)'
                             } },
                             React.createElement(Icon, { name: "clock", width: "16", height: "16", style: { opacity: 0.7 } }),
-                            React.createElement(p$d, { size: "2", weight: "bold" }, "Time:"),
-                            React.createElement("input", { type: "number", className: "time-input", min: "0", max: "23", value: selectedDate ? format$2(selectedDate, 'HH') : '12', onChange: (e) => handleTimeChange('hours', e.target.value) }),
-                            React.createElement(p$d, null, ":"),
-                            React.createElement("input", { type: "number", className: "time-input", min: "0", max: "59", value: selectedDate ? format$2(selectedDate, 'mm') : '00', onChange: (e) => handleTimeChange('minutes', e.target.value) }),
-                            React.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false) }, "Done"))))),
+                            React.createElement(p$5, { align: "center", gap: "1" },
+                                React.createElement("input", { type: "number", className: "time-input", min: "0", max: "23", disabled: readonly, value: selectedDate ? format$2(selectedDate, 'HH') : '12', onChange: (e) => handleTimeChange('hours', e.target.value) }),
+                                React.createElement(p$d, { weight: "bold", style: { paddingBottom: 2 } }, ":"),
+                                React.createElement("input", { type: "number", className: "time-input", min: "0", max: "59", disabled: readonly, value: selectedDate ? format$2(selectedDate, 'mm') : '00', onChange: (e) => handleTimeChange('minutes', e.target.value) })),
+                            React.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false), style: { marginLeft: 'auto' } }, "Done"))))),
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
@@ -21201,11 +21497,11 @@ const DateTimePicker = (_a) => {
                                 React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || (meta.error || "Required field"))) : null))));
 };
 
 const Dropdown = (_a) => {
-    var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style"]);
+    var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, isHinted, hintText, hintUrl, defaultValue, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultValue", "errorText"]);
     const triggerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
@@ -21229,7 +21525,6 @@ const Dropdown = (_a) => {
         window.open(inputUrl, '_blank', 'noopener,noreferrer');
     };
     // --- STYLES ---
-    // MATERIAL
     const materialTrigger = {
         backgroundColor: 'var(--color-surface)',
         border: 'none',
@@ -21280,7 +21575,7 @@ const Dropdown = (_a) => {
         inputtype === 'dropdown-material' ? materialContent :
             inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Column, { span: width, newLine: props.newRow },
+        React.createElement(Column, { span: width, newLine: newRow },
             React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
                 inputtype === 'dropdown-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
           .neu-select-trigger[data-state='open'] {
@@ -21292,32 +21587,37 @@ const Dropdown = (_a) => {
             cursor: pointer;
           }
         ` } })),
-                React.createElement(C$1, { name: alias, disabled: readonly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue || value, value: field.value, onValueChange: (val) => {
-                        setFieldValue(alias, val);
+                React.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
+                        const finalVal = val === "__RESET__" ? "" : val;
+                        setFieldValue(alias, finalVal);
                         setTimeout(() => setFieldTouched(alias, true), 0);
+                        if (props.onValueChange)
+                            props.onValueChange(finalVal);
                     }, onOpenChange: (isOpen) => {
                         if (!isOpen) {
                             setFieldTouched(alias, true);
                         }
                     } },
-                    React.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder, className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
-                    React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle }, inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
-                        React.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
-                            React.createElement("a", { onClick: () => openLink(inputoption.optionurl || "#"), style: { textDecoration: 'none' } }, inputoption.text))
-                        :
-                            React.createElement(React.Fragment, null,
-                                React.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
+                    React.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
+                    React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
+                        React.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
+                        React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
+                        inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
+                            React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
+                                React.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))
+                            :
+                                React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text)))))),
                 React.createElement("div", null,
                     React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                     "\u00A0",
-                    props.isHinted ?
+                    isHinted ?
                         React.createElement(React.Fragment, null,
-                            React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                                React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                            React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                                React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                     React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                     hasError ?
                         React.createElement(React.Fragment, null,
-                            React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null)))));
+                            React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null)))));
 };
 
 const getFileIcon$1 = (type, name) => {
@@ -21606,6 +21906,7 @@ const FileMultiple = (_a) => {
                             React.createElement(Icon, { name: 'close' })))));
             }))),
             React.createElement("div", null,
+                React.createElement("br", null),
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
                 props.isHinted ?
@@ -28935,7 +29236,7 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
         React.createElement(i$9, { ratio: aspectRatio }, content)));
 };
 
-const Input$1 = (_a) => {
+const Input$2 = (_a) => {
     var { alias, inputtype = "text", width, inputlabel, readonly = false, placeholder = '', className, size = "2", style, inputVariant = 'input-outline' } = _a, props = __rest$1(_a, ["alias", "inputtype", "width", "inputlabel", "readonly", "placeholder", "className", "size", "style", "inputVariant"]);
     const [inputField, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -28944,6 +29245,7 @@ const Input$1 = (_a) => {
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(u, Object.assign({ size: size, type: inputtype, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, readOnly: readonly, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, inputField, props, { name: alias })),
         React.createElement("div", null,
+            React.createElement("br", null),
             React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
             "\u00A0",
             props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -28968,6 +29270,7 @@ const PasswordInput = (_a) => {
                 React.createElement(e, { content: showPassword ? "Hide password" : "Show password" },
                     React.createElement(o$5, { size: "1", variant: "ghost", color: "gray", onClick: toggleVisibility, type: "button", "aria-label": showPassword ? "Hide password" : "Show password" }, showPassword ? (React.createElement(Icon, { name: "eyeopen", height: "16", width: "16" })) : (React.createElement(Icon, { name: "eyeclosed", height: "16", width: "16" })))))),
         React.createElement("div", null,
+            React.createElement("br", null),
             React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
             "\u00A0",
             props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -30761,7 +31064,7 @@ function _objectWithoutPropertiesLoose$4(source, excluded) { if (source == null)
 // 	format={value => ({ text: value, template: 'xxxxxxxx' })}/>
 //
 
-function Input(_ref, ref) {
+function Input$1(_ref, ref) {
   var _ref$inputComponent = _ref.inputComponent,
       InputComponent = _ref$inputComponent === void 0 ? 'input' : _ref$inputComponent,
       parse = _ref.parse,
@@ -30789,8 +31092,8 @@ function Input(_ref, ref) {
   return /*#__PURE__*/React.createElement(InputComponent, inputProps);
 }
 
-Input = /*#__PURE__*/React.forwardRef(Input);
-Input.propTypes = {
+Input$1 = /*#__PURE__*/React.forwardRef(Input$1);
+Input$1.propTypes = {
   // Parses a single characher of `<input/>` text.
   parse: PropTypes.func.isRequired,
   // Formats `value` into `<input/>` text.
@@ -35515,7 +35818,7 @@ function createInput$2(defaultMetadata) {
       onKeyDown: onKeyDown,
       inputFormat: inputFormat
     });
-    return /*#__PURE__*/React.createElement(Input, _extends$3({}, rest, {
+    return /*#__PURE__*/React.createElement(Input$1, _extends$3({}, rest, {
       ref: ref,
       parse: parsePhoneNumberCharacter_,
       format: format,
@@ -36243,7 +36546,7 @@ function call(func, _arguments) {
 	return func.apply(this, args)
 }
 
-var PhoneInputInput = createInput(metadata$1);
+var Input = createInput(metadata$1);
 
 function getCountries() {
 	return call(getCountries$1, arguments)
@@ -36524,7 +36827,7 @@ const PhoneInput = (_a) => {
     const errorId = `${alias}-error`;
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            React.createElement(u, Object.assign({ size: size, variant: "surface", id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props, { name: alias }),
+            React.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props),
                 React.createElement(c, { style: { padding: 0 } },
                     React.createElement(C$1, { value: country, onValueChange: (value) => setCountry(value) },
                         React.createElement(u$1, { variant: "ghost", style: {
@@ -36532,7 +36835,9 @@ const PhoneInput = (_a) => {
                                 padding: '0 8px 0 12px',
                                 gap: '6px',
                                 borderTopRightRadius: 0,
-                                borderBottomRightRadius: 0
+                                borderBottomRightRadius: 0,
+                                backgroundColor: 'var(--gray-3)',
+                                borderRight: '1px solid var(--gray-alpha-5)'
                             } },
                             React.createElement(p$5, { align: "center", gap: "2" },
                                 React.createElement(FlagIcon, { country: country }),
@@ -36547,9 +36852,8 @@ const PhoneInput = (_a) => {
                                 React.createElement(p$d, { color: "gray", size: "1" },
                                     "(+",
                                     getCountryCallingCode(c),
-                                    ")"))))))),
-                    React.createElement("div", { style: { width: '1px', height: '20px', backgroundColor: 'var(--gray-a4)', alignSelf: 'center' } })),
-                React.createElement(PhoneInputInput, { country: country, value: field.value, onChange: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, readOnly: readonly, style: {
+                                    ")")))))))),
+                React.createElement(Input, { country: country, defaultCountry: "US", international: true, withCountryCallingCode: false, limitMaxLength: true, value: field.value || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true), readOnly: readonly, placeholder: placeholder, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -36558,15 +36862,15 @@ const PhoneInput = (_a) => {
                         paddingLeft: '12px',
                         color: 'var(--gray-12)',
                         fontFamily: 'var(--default-font-family)',
-                        fontSize: 'var(--font-size-2)'
+                        fontSize: 'var(--font-size-2)',
+                        width: '100%'
                     } })),
             React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
-                "\u00A0",
                 props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
                     React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
+                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || meta.error || `Required field`))))));
 };
 
 /** Checks if value is string */
@@ -40358,16 +40662,27 @@ const parseUuidFormat = (input) => {
 
 const UUIDInput = (_a) => {
     var { alias, type, inputLabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = '', readOnly = false, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "readOnly", "inputVariant", "size", "className"]);
-    let activeFormat = format;
-    if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
-        activeFormat = parseUuidFormat(type) || format;
-    }
-    const maskPattern = activeFormat.map(len => '*'.repeat(len)).join(delimiter);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const [copied, setCopied] = React.useState(false);
     const errorId = `${alias}-error`;
+    const { maskPattern, definitions } = React.useMemo(() => {
+        let activeFormat = format;
+        if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
+            const parsed = parseUuidFormat(type);
+            if (parsed)
+                activeFormat = parsed;
+        }
+        const maskChar = '#';
+        const pattern = activeFormat.map(len => maskChar.repeat(len)).join(delimiter);
+        return {
+            maskPattern: pattern,
+            definitions: {
+                '#': /[0-9a-fA-F]/
+            }
+        };
+    }, [format, type, delimiter]);
     const handleCopy = () => {
         navigator.clipboard.writeText(field.value || '');
         setCopied(true);
@@ -40377,7 +40692,7 @@ const UUIDInput = (_a) => {
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
-                React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, value: field.value, unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
+                React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, definitions: definitions, value: field.value || '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -40389,7 +40704,7 @@ const UUIDInput = (_a) => {
                         fontSize: 'var(--font-size-2)',
                         textTransform: 'uppercase',
                         width: '100%'
-                    }, autoComplete: "off" }),
+                    }, autoComplete: "off", spellCheck: false }),
                 React.createElement(c, null,
                     React.createElement(e, { content: copied ? "Copied!" : "Copy to clipboard" },
                         React.createElement(o$5, { size: "1", variant: "ghost", color: copied ? "green" : "gray", onClick: handleCopy, type: "button", disabled: !field.value }, copied ? React.createElement(CheckIcon, null) : React.createElement(CopyIcon, null))))),
@@ -40399,7 +40714,7 @@ const UUIDInput = (_a) => {
                 props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                     React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`))))));
+                hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || meta.error || `Required field`))))));
 };
 
 var FaCcVisa = {};
@@ -41952,13 +42267,22 @@ const CURRENCIES = {
 };
 
 const CurrencyInput = (_a) => {
-    var { alias, inputtype = "currency", inputLabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
+    var { alias, inputtype = "currency", inputlabel, width, defaultValue = "USD", placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputlabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [amountField, amountMeta] = formik.useField(alias);
-    const currencyFieldName = inputtype === "currency" ? "USD" : inputtype;
-    const [currencyField] = formik.useField(currencyFieldName);
+    const currencyAlias = `${alias}Currency`;
+    const [currencyField, , currencyHelpers] = formik.useField(currencyAlias);
+    React.useEffect(() => {
+        if (inputtype !== "currency" && CURRENCIES[inputtype]) {
+            currencyHelpers.setValue(inputtype);
+        }
+        else if (!currencyField.value) {
+            currencyHelpers.setValue(defaultValue);
+        }
+    }, [inputtype, defaultValue]);
     const hasError = Boolean(amountMeta.touched && amountMeta.error);
-    const activeCurrency = CURRENCIES[currencyField.value] || CURRENCIES.USD;
+    const currentCode = currencyField.value || "USD";
+    const activeCurrency = CURRENCIES[currentCode] || CURRENCIES.USD;
     const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
     const isOutline = inputVariant === 'input-outline';
     const errorId = `${alias}-error`;
@@ -41970,7 +42294,7 @@ const CurrencyInput = (_a) => {
                     backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
                     cursor: 'text'
                 } },
-                React.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyFieldName, val) },
+                React.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyAlias, val), disabled: readOnly || inputtype !== "currency" },
                     React.createElement(u$1, { variant: "ghost", style: {
                             height: '100%',
                             padding: '0 8px 0 12px',
@@ -41992,11 +42316,16 @@ const CurrencyInput = (_a) => {
                                 c.symbol,
                                 ")"))))))),
                 React.createElement(p$d, { color: "gray", size: "2", style: { paddingLeft: '12px', userSelect: 'none' } }, activeCurrency.symbol),
-                React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: activeCurrency.scale, defaultValue: defaultValue, readOnly: readOnly, 
-                    // @ts-expect-error: known library type definition gap
-                    signed: false, thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'], 
-                    // Bind to Amount Field
-                    value: amountField.value !== undefined && amountField.value !== null ? String(amountField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || '0.00', style: {
+                React.createElement(IMaskInput, Object.assign({ id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel` }, {
+                    mask: Number,
+                    scale: activeCurrency.scale,
+                    signed: String(false),
+                    thousandsSeparator: ",",
+                    padFractionalZeros: true,
+                    normalizeZeros: true,
+                    radix: ".",
+                    mapToRadix: ['.'],
+                }, { value: amountField.value !== undefined && amountField.value !== null ? String(amountField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), readOnly: readOnly, placeholder: placeholder || '0.00', style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -42008,14 +42337,14 @@ const CurrencyInput = (_a) => {
                         fontSize: 'var(--font-size-2)',
                         textAlign: 'right',
                         width: '100%'
-                    }, inputMode: "decimal", autoComplete: "off" })),
+                    }, inputMode: "decimal", autoComplete: "off" }))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
                 props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
                     React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
+                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || amountMeta.error || `Required field`))))));
 };
 
 var FaChartLine = {};
@@ -42036,7 +42365,7 @@ function requireFaChartLine () {
 var FaChartLineExports = /*@__PURE__*/ requireFaChartLine();
 
 const StockInput = (_a) => {
-    var { alias, inputLabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
+    var { alias, inputlabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [priceField, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -42084,7 +42413,7 @@ const StockInput = (_a) => {
                             fontFamily: 'var(--default-font-family)',
                         }, inputMode: "decimal", autoComplete: "off" }))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 "\u00A0",
                 props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
                     React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
@@ -42093,7 +42422,7 @@ const StockInput = (_a) => {
 };
 
 const RadioGroupInput = (_a) => {
-    var { inputtype = 'radio-outline', alias, readOnly, width, inputLabel, placeholder = '', style, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "direction", "columns", "className"]);
+    var { inputtype = 'radio-outline', alias, readOnly, width, inputlabel, placeholder = '', style, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "style", "inputoptions", "direction", "columns", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -42162,19 +42491,20 @@ const RadioGroupInput = (_a) => {
                             React.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
                 }))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
 };
 
 const OptionSelect = (_a) => {
-    var { inputtype = 'select-outline', alias, readOnly, width, inputLabel, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "className"]);
+    var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel, placeholder, value, inputoptions, style, newRow, isHinted, hintText, hintUrl, defaultValue, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultValue", "errorText"]);
     const triggerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
@@ -42182,7 +42512,7 @@ const OptionSelect = (_a) => {
     const hasError = Boolean(meta.touched && meta.error);
     const errorId = `${alias}-error`;
     React.useEffect(() => {
-        if (inputtype === 'select-neumorphic' && triggerRef.current) {
+        if (inputtype === 'dropdown-neumorphic' && triggerRef.current) {
             const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
             const shadowDark = adjustColor(parentBg, -30);
             const shadowLight = adjustColor(parentBg, 30);
@@ -42194,25 +42524,37 @@ const OptionSelect = (_a) => {
             });
         }
     }, [inputtype]);
+    const openLink = (inputUrl) => {
+        window.open(inputUrl, '_blank', 'noopener,noreferrer');
+    };
     // --- STYLES ---
     const materialTrigger = {
         backgroundColor: 'var(--color-surface)',
-        border: hasError ? '1px solid var(--red-9)' : 'none',
+        border: 'none',
         boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
         borderRadius: '4px',
         height: '32px',
         fontWeight: 500,
     };
+    const materialContent = {
+        borderRadius: '4px',
+        boxShadow: '0 5px 15px rgba(0,0,0,0.2)',
+    };
     const outlineTrigger = {
         backgroundColor: 'transparent',
-        border: hasError ? '2px solid var(--red-9)' : '2px solid var(--gray-7)',
+        border: '2px solid var(--gray-7)',
         borderRadius: '4px',
         height: '32px',
         fontWeight: 600,
     };
+    const outlineContent = {
+        border: '2px solid var(--gray-7)',
+        borderRadius: '4px',
+        boxShadow: 'none',
+    };
     const neumorphicTrigger = {
         backgroundColor: 'var(--neu-bg)',
-        color: hasError ? 'var(--red-9)' : 'var(--neu-text)',
+        color: 'var(--neu-text)',
         border: 'none',
         borderRadius: '12px',
         height: '40px',
@@ -42221,46 +42563,63 @@ const OptionSelect = (_a) => {
         boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)',
         transition: 'all 0.2s ease',
     };
-    const activeTriggerStyle = inputtype === 'select' ? materialTrigger :
-        inputtype === 'select-material' ? materialTrigger :
-            inputtype === 'select-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
+    const neumorphicContent = {
+        backgroundColor: 'var(--neu-bg)',
+        borderRadius: '12px',
+        border: 'none',
+        boxShadow: '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)',
+    };
+    const activeTriggerStyle = inputtype === 'dropdown' ? materialTrigger :
+        inputtype === 'dropdown-material' ? materialTrigger :
+            inputtype === 'dropdown-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
+    const activeContentStyle = inputtype === 'dropdown' ? materialContent :
+        inputtype === 'dropdown-material' ? materialContent :
+            inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
+    return (React.createElement(Column, { span: width, newLine: newRow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            inputtype === 'select-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
-          .neu-select-trigger[data-state='open'] {
-            box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
-                        inset -6px -6px 12px var(--neu-shadow-light) !important;
-          }
-          .neu-select-item:hover {
-            background-color: rgba(0,0,0,0.05) !important;
-            cursor: pointer;
-          }
-        ` } })),
-            React.createElement(C$1, { name: alias, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue, value: field.value, onValueChange: (val) => {
-                    setFieldValue(alias, val);
+            inputtype === 'dropdown-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
+            .neu-select-trigger[data-state='open'] {
+              box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
+                          inset -6px -6px 12px var(--neu-shadow-light) !important;
+            }
+            .neu-select-item:hover {
+              background-color: rgba(0,0,0,0.05) !important;
+              cursor: pointer;
+            }
+          ` } })),
+            React.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
+                    const finalVal = val === "__RESET__" ? "" : val;
+                    setFieldValue(alias, finalVal);
                     setTimeout(() => setFieldTouched(alias, true), 0);
+                    if (props.onValueChange)
+                        props.onValueChange(finalVal);
                 }, onOpenChange: (isOpen) => {
                     if (!isOpen) {
                         setFieldTouched(alias, true);
                     }
                 } },
-                React.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder, className: `${inputtype === 'select-neumorphic' ? 'neu-select-trigger' : ''} ${className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
-                React.createElement(g, { position: "popper", sideOffset: 5 }, inputoptions.map((option) => (React.createElement(v, { id: String(option.optionid) || '', key: option.optionid, value: option.optionvalue, className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '' }, option.text))))),
+                React.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
+                React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
+                    React.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
+                    React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
+                    inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ? (React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
+                        React.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))) : (React.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-                hasError ?
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
+                isHinted ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
-                props.isHinted ?
+                        React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null))));
 };
 
 const MultipleSelect = (_a) => {
     var _b;
-    var { inputtype = 'multiselect-outline', alias, readOnly, width, inputLabel, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "className"]);
+    var { inputtype = 'multiselect-outline', alias, readOnly, width, inputlabel, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "style", "inputoptions", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const selectedValues = (Array.isArray(field.value) ? field.value : []);
@@ -42345,19 +42704,20 @@ const MultipleSelect = (_a) => {
                                     React.createElement(p$d, { size: "2" }, inputoption.text)));
                             })))))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
 };
 
 const SliderInput = (_a) => {
-    var { inputtype = 'slider-outline', alias, readOnly, width, inputLabel, placeholder = '', minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
+    var { inputtype = 'slider-outline', alias, readOnly, width, inputlabel, placeholder = '', minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
@@ -42444,15 +42804,16 @@ const SliderInput = (_a) => {
                     setFieldTouched(alias, true);
                 }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
 };
 
 const RangeSlider = (_a) => {
@@ -42524,39 +42885,40 @@ const RangeSlider = (_a) => {
                 }, onValueCommit: () => setFieldTouched(alias, true), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
 };
 
 const Toggle = (_a) => {
-    var { inputtype = 'toggle-outline', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl"]);
+    var { inputtype = 'toggle-neumorphic', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl, icon = 'stack' } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl", "icon"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
-    const buttonRef = React.useRef(null);
-    const [neumorphicVars, setNeumorphicVars] = React.useState({});
-    const errorId = `${alias}-error`;
+    const containerRef = React.useRef(null);
+    const [neuVars, setNeuVars] = React.useState({
+        '--neu-bg': '#ecf0f3',
+        '--neu-shadow-light': '#ffffff',
+        '--neu-shadow-dark': '#d1d9e6'
+    });
     React.useEffect(() => {
-        if (inputtype === 'toggle-neumorphic' && buttonRef.current) {
-            const parentBg = getNearestParentBackground(buttonRef.current.parentElement);
-            const shadowDark = adjustColor(parentBg, -30);
-            const shadowLight = adjustColor(parentBg, 30);
-            setNeumorphicVars({
-                '--neu-bg': parentBg,
-                '--neu-shadow-dark': shadowDark,
-                '--neu-shadow-light': shadowLight,
-                '--neu-text': 'var(--gray-12)',
-                '--neu-active-color': 'var(--accent-9)',
-            });
+        if (inputtype === 'toggle-neumorphic' && containerRef.current) {
+            const parentBg = getNearestParentBackground(containerRef.current.parentElement);
+            if (parentBg && parentBg !== 'transparent') {
+                setNeuVars({
+                    '--neu-bg': parentBg,
+                    '--neu-shadow-dark': adjustColor(parentBg, -20),
+                    '--neu-shadow-light': adjustColor(parentBg, 20),
+                });
+            }
         }
     }, [inputtype]);
-    // --- STYLES ---
     const materialStyle = {
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
@@ -42569,86 +42931,108 @@ const Toggle = (_a) => {
         background: 'transparent',
         transition: 'all 0.1s ease',
     };
-    const neumorphicStyle = {
-        backgroundColor: 'var(--neu-bg)',
-        color: 'var(--neu-text)',
-        border: 'none',
-        borderRadius: '12px',
-        fontWeight: 600,
-        transition: 'all 0.2s ease-in-out',
+    const handleToggle = (val) => {
+        if (!readOnly) {
+            setFieldValue(alias, val);
+            setFieldTouched(alias, true);
+        }
     };
     return (React.createElement(Column, { span: width, newLine: newRow },
-        React.createElement(Root$1, { pressed: field.value, onPressedChange: (val) => {
-                if (!readOnly) {
-                    setFieldValue(alias, val);
-                    setFieldTouched(alias, true);
-                }
-            }, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
-            React.createElement(o$a, Object.assign({ disabled: readOnly, ref: buttonRef }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), (inputtype === 'toggle-neumorphic' ? Object.assign(Object.assign({}, neumorphicStyle), neumorphicVars) : {})), type: "button" }),
+        React.createElement("div", { ref: containerRef, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: '4px' } },
+            inputtype === 'toggle-neumorphic' ? (React.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readOnly ? 0.6 : 1, pointerEvents: readOnly ? 'none' : 'auto' }), onClick: () => handleToggle(!field.value) },
                 React.createElement("style", { dangerouslySetInnerHTML: { __html: `
-            /* --- MATERIAL --- */
-            .design-toggle.toggle-material[data-state='on'] {
-              background-color: var(--accent-9);
-              color: white;
-              box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            }
-            .design-toggle.toggle-material[data-state='off'] {
-              background-color: var(--gray-3);
-              color: var(--gray-11);
-            }
-
-            /* --- OUTLINE --- */
-            .design-toggle.toggle-outline[data-state='on'] {
-              border: 2px solid var(--accent-9);
-              color: var(--accent-9);
-              background-color: var(--accent-2);
-            }
-            .design-toggle.toggle-outline[data-state='off'] {
-              border: 1px solid var(--gray-7);
-              color: var(--gray-11);
-            }
+                    .neu-toggle-wrapper {
+                        isolation: isolate;
+                        position: relative;
+                        height: 30px;
+                        width: 60px;
+                        border-radius: 15px;
+                        overflow: hidden;
+                        cursor: pointer;
+                        background: var(--neu-bg);
+                        box-shadow:
+                            -8px -4px 8px 0px var(--neu-shadow-light),
+                            8px 4px 12px 0px var(--neu-shadow-dark),
+                            4px 4px 4px 0px var(--neu-shadow-dark) inset,
+                            -4px -4px 4px 0px var(--neu-shadow-light) inset;
+                    }
+                    
+                    /* The Input is hidden visually but keeps state for CSS selector */
+                    .neu-toggle-state {
+                        display: none;
+                    }
 
-            /* --- NEUMORPHIC --- */
-            .design-toggle.toggle-neumorphic[data-state='off'] {
-               box-shadow: 6px 6px 12px var(--neu-shadow-dark), 
-                           -6px -6px 12px var(--neu-shadow-light);
-            }
-            .design-toggle.toggle-neumorphic[data-state='on'] {
-               box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
-                           inset -6px -6px 12px var(--neu-shadow-light);
-               color: var(--neu-active-color); 
-            }
-            .design-toggle.toggle-neumorphic:hover {
-              transform: translateY(-1px);
-            }
-          ` } }),
-                children)),
-        React.createElement("div", null,
-            inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
-            isHinted && (React.createElement(e, { content: hintText || "No hint available" },
-                React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
-                    React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-            hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`)))));
-};
+                    .neu-indicator {
+                        height: 100%;
+                        width: 200%;
+                        background: var(--neu-bg);
+                        border-radius: 15px;
+                        transform: translate3d(-75%, 0, 0);
+                        transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
+                        box-shadow:
+                            -8px -4px 8px 0px var(--neu-shadow-light),
+                            8px 4px 12px 0px var(--neu-shadow-dark);
+                    }
 
-const Row = ({ children, className, gap = "4" }) => {
-    return (React.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
+                    /* Sibling selector triggers animation when checked */
+                    .neu-toggle-state:checked ~ .neu-indicator {
+                        transform: translate3d(25%, 0, 0);
+                    }
+                ` } }),
+                React.createElement("input", { className: "neu-toggle-state", type: "checkbox", checked: !!field.value, readOnly: true }),
+                React.createElement("div", { className: "neu-indicator" }),
+                React.createElement(Icon, { name: icon }))) : (React.createElement(Root$1, { pressed: field.value, onPressedChange: handleToggle, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
+                React.createElement(o$a, Object.assign({ disabled: readOnly }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), type: "button" }),
+                    React.createElement("style", { dangerouslySetInnerHTML: { __html: `
+                        /* Material States */
+                        .design-toggle.toggle-material[data-state='on'] {
+                            background-color: var(--accent-9);
+                            color: white;
+                            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+                        }
+                        .design-toggle.toggle-material[data-state='off'] {
+                            background-color: var(--gray-3);
+                            color: var(--gray-11);
+                        }
+                        /* Outline States */
+                        .design-toggle.toggle-outline[data-state='on'] {
+                            border: 2px solid var(--accent-9);
+                            color: var(--accent-9);
+                            background-color: var(--accent-2);
+                        }
+                        .design-toggle.toggle-outline[data-state='off'] {
+                            border: 1px solid var(--gray-7);
+                            color: var(--gray-11);
+                        }
+                    ` } }),
+                    children))),
+            React.createElement("div", null,
+                inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
+                "\u00A0",
+                isHinted && (React.createElement(e, { content: hintText || "No hint available" },
+                    React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
+                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React.createElement(p$d, { size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`))))));
 };
 
-const SectionTitle = (_a) => {
-    var { title, iconname, textColor = "#FFFFFF", backgroundColor = "#000000", fontFamily } = _a, props = __rest$1(_a, ["title", "iconname", "textColor", "backgroundColor", "fontFamily"]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Row, null,
-            React.createElement(Column, { span: 12, newLine: true },
-                React.createElement("div", { id: "", style: { backgroundColor: backgroundColor }, className: 'core-input-section-ribbon' },
-                    React.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' },
-                        React.createElement(Icon, { name: iconname || "input" }),
-                        "\u00A0",
-                        title),
-                    props.subTitle ?
-                        React.createElement(React.Fragment, null,
-                            React.createElement("p", { style: { color: textColor, fontFamily: fontFamily ? fontFamily : 'inherit' }, className: 'core-input-section-text' }, props.subTitle))
-                        : null)))));
+const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize = "2", subtitle, align = "left", withSeparator = true, className }) => {
+    return (React.createElement(Column, { span: width, newLine: newRow },
+        React.createElement(p$5, { direction: "column", gap: "2", className: className, style: {
+                width: '100%',
+                marginBottom: 'var(--space-2)',
+                textAlign: align
+            } },
+            React.createElement(r$g, { size: size, weight: "bold", style: {
+                    width: '100%',
+                    color: 'var(--gray-12)',
+                    lineHeight: '1.2'
+                } }, title),
+            subtitle && (React.createElement(p$d, { size: subsize, color: "gray", style: { maxWidth: '80%', margin: align === 'center' ? '0 auto' : undefined } }, subtitle)),
+            withSeparator && (React.createElement(o$2, { size: "4", style: {
+                    width: '100%',
+                    marginTop: '4px',
+                    backgroundColor: 'var(--gray-6)'
+                } })))));
 };
 
 const Container = (_a) => {
@@ -42659,6 +43043,10 @@ const Container = (_a) => {
     return (React.createElement(p$2, Object.assign({ size: "3", px: "3" }, props), children));
 };
 
+const Row = ({ children, className, gap = "4" }) => {
+    return (React.createElement(o$6, { columns: "12", gap: gap, width: "auto", className: className }, children));
+};
+
 /** A special constant with type `never` */
 function $constructor(name, initializer, params) {
     function init(inst, def) {
@@ -47176,7 +47564,7 @@ exports.FileMultiple = FileMultiple;
 exports.FlagIcon = FlagIcon;
 exports.Icon = Icon;
 exports.ImageOutput = ImageOutput;
-exports.Input = Input$1;
+exports.Input = Input$2;
 exports.MultipleSelect = MultipleSelect;
 exports.OptionSelect = OptionSelect;
 exports.PasswordInput = PasswordInput;