@emeraldemperaur/vector-sigma 1.4.9 → 1.4.11

package/lib/index.esm.js

@@ -12151,7 +12151,7 @@ const getStyles$1 = (inputtype, shape, hasError) => {
     return Object.assign(Object.assign(Object.assign({}, base), { borderRadius }), designStyles);
 };
 const AvatarInput = (_a) => {
-    var { inputtype = 'avatar-outline', alias, readonly, width, inputlabel, placeholder = '', value, shape = 'circle', size = 120, style, accept = 'image/*' } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "shape", "size", "style", "accept"]);
+    var { inputtype = 'avatar-outline', alias, readOnly, width, inputLabel, shape = 'circle', size = 120, newRow, isHinted, hintText, hintUrl, errorText, style, className, accept = 'image/*' } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "shape", "size", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "className", "accept"]);
     const [field, meta, helpers] = useField(alias);
     const { setTouched } = useFormikContext();
     const inputRef = useRef(null);
@@ -12193,7 +12193,7 @@ const AvatarInput = (_a) => {
     };
     const containerStyles = getStyles$1(inputtype, shape, !!hasError);
     const iconColor = inputtype === 'avatar-neumorphic' ? '#555' : 'var(--gray-10)';
-    return (React__default.createElement(Column, { span: width, newLine: props.newRow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", align: "center", gap: "3", style: style },
             React__default.createElement(p$8, { onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, style: Object.assign({ width: size, height: size }, containerStyles) }, previewUrl ? (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("img", { src: previewUrl, alt: "Avatar", style: {
@@ -12218,18 +12218,18 @@ const AvatarInput = (_a) => {
                     React__default.createElement(Icon, { name: 'camera', color: "white", width: "16", height: "16" })))) : (React__default.createElement(p$5, { direction: "column", align: "center", justify: "center", height: "100%", width: "100%" },
                 React__default.createElement(Icon, { name: 'user', width: size * 0.4, height: size * 0.4, color: iconColor, style: { opacity: 0.5 } }),
                 React__default.createElement(p$d, { size: "1", color: "gray", style: { marginTop: 4, opacity: 0.8 } }, "Upload")))),
-            React__default.createElement("input", { ref: inputRef, id: inputId || alias, name: alias, readOnly: readonly, type: "file", accept: accept, onChange: handleFileChange, style: { display: 'none' } }),
+            React__default.createElement("input", { ref: inputRef, id: inputId || alias, name: alias, readOnly: readOnly, type: "file", accept: accept, onChange: handleFileChange, style: { display: 'none' } }),
             React__default.createElement("div", null,
-                inputlabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", color: 'gray', highContrast: inputtype !== 'avatar-neumorphic', htmlFor: alias }, inputlabel)),
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", color: 'gray', highContrast: inputtype !== 'avatar-neumorphic', htmlFor: alias }, inputLabel)),
                 "\u00A0",
-                props.ishinted ?
+                isHinted ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`)) : null))));
 };
 
 /**
@@ -12298,7 +12298,7 @@ const formatBytes = (bytes, decimals = 2) => {
 };
 
 const ButtonInput = (_a) => {
-    var { inputtype = 'button-outline', type = 'button', inputlabel, alias, readonly, style, width, children } = _a, props = __rest$1(_a, ["inputtype", "type", "inputlabel", "alias", "readonly", "style", "width", "children"]);
+    var { inputtype = 'button-outline', type = 'button', alias, readOnly, style, width, children, newRow, isHinted, hintText, hintUrl } = _a, props = __rest$1(_a, ["inputtype", "type", "alias", "readOnly", "style", "width", "children", "newRow", "isHinted", "hintText", "hintUrl"]);
     const buttonRef = useRef(null);
     const [neumorphicVars, setNeumorphicVars] = useState({});
     const [bgColor, setBgColor] = useState('#ffffff');
@@ -12372,7 +12372,7 @@ const ButtonInput = (_a) => {
         }
     };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Column, { span: width, newLine: props.newRow },
+        React__default.createElement(Column, { span: width, newLine: newRow },
             inputtype === 'button-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
           .neumorphic-btn:active {
             box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), inset -6px -6px 12px var(--neu-shadow-light) !important;
@@ -12382,19 +12382,19 @@ const ButtonInput = (_a) => {
             transform: translateY(-2px);
           }
         ` } })),
-            React__default.createElement(o$a, Object.assign({ name: alias, disabled: readonly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, ref: buttonRef, onClick: handler, type: type }, props, getVariantProps()),
+            React__default.createElement(o$a, Object.assign({ name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, ref: buttonRef, onClick: handler, type: type }, props, getVariantProps()),
                 props.icon && (React__default.createElement("span", { style: { display: 'flex', alignItems: 'center' } }, props.icon)),
                 children),
             React__default.createElement("br", null),
-            React__default.createElement("div", null, props.ishinted ?
+            React__default.createElement("div", null, isHinted ?
                 React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                        React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                    React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                        React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                             React__default.createElement(Icon, { name: 'questionmarkcircled', height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
 };
 
 const CheckboxGroupInput = (_a) => {
-    var { inputtype = 'checkbox-outline', alias, readonly, width, placeholder = '', inputlabel, style, value, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "placeholder", "inputlabel", "style", "value", "inputoptions", "direction", "columns", "className"]);
+    var { inputtype = 'checkbox-outline', alias, readOnly, width, inputLabel, style, inputOptions, newRow, isHinted, hintText, hintUrl, errorText, direction = 'row', columns, className } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "inputOptions", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "direction", "columns", "className"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const currentValues = (Array.isArray(field.value) ? field.value : []);
@@ -12424,7 +12424,7 @@ const CheckboxGroupInput = (_a) => {
             });
         }
     }, [inputtype]);
-    return (React__default.createElement(Column, { span: width, newLine: props.newRow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
             inputtype === 'checkbox-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
           .neu-checkbox .rt-CheckboxButton { 
@@ -12445,7 +12445,7 @@ const CheckboxGroupInput = (_a) => {
             color: var(--neu-check-color);
           }
         ` } })),
-            React__default.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputoptions.map((inputoption) => {
+            React__default.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption) => {
                 const isChecked = currentValues.some(val => String(val) === String(inputoption.optionvalue));
                 return (React__default.createElement(p$d, { as: "label", key: inputoption.optionvalue || crypto.randomUUID(), size: "2", style: {
                         display: 'flex',
@@ -12453,23 +12453,23 @@ const CheckboxGroupInput = (_a) => {
                         gap: '8px',
                         cursor: 'pointer'
                     } },
-                    React__default.createElement(c$2, { name: alias, id: `${alias}FormInput${inputoption.optionid}`, "aria-describedby": `${alias}InputLabel${inputoption.optionid}`, disabled: readonly, value: inputoption.optionvalue, checked: isChecked, onCheckedChange: (checked) => handleCheckedChange(checked, inputoption.optionvalue), variant: inputtype === 'checkbox-outline' ? 'soft' : 'surface', className: inputtype === 'checkbox-neumorphic' ? 'neu-checkbox' : '', style: Object.assign({}, (inputtype === 'checkbox-outline' ? {
+                    React__default.createElement(c$2, { name: alias, id: `${alias}FormInput${inputoption.optionid}`, "aria-describedby": `${alias}InputLabel${inputoption.optionid}`, disabled: readOnly, value: inputoption.optionvalue, checked: isChecked, onCheckedChange: (checked) => handleCheckedChange(checked, inputoption.optionvalue), variant: inputtype === 'checkbox-outline' ? 'soft' : 'surface', className: inputtype === 'checkbox-neumorphic' ? 'neu-checkbox' : '', style: Object.assign({}, (inputtype === 'checkbox-outline' ? {
                             border: isChecked ? '2px solid var(--accent-9)' : '2px solid var(--gray-8)',
                             backgroundColor: 'transparent'
                         } : {})) }),
                     React__default.createElement("span", { style: { userSelect: 'none' } }, inputoption.text)));
             })),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted ?
+                isHinted ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || "Required field")) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || "Required field")) : null))));
 };
 
 const animationStyles = {
@@ -12500,7 +12500,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 = '', inputLabel, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputOptions = [], children, newRow, isHinted, hintText, hintUrl, errorText, style, className } = _a; __rest$1(_a, ["alias", "readOnly", "width", "placeholder", "inputLabel", "inputtype", "triggerValue", "inputOptions", "children", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "className"]);
     const [field, meta, helpers] = useField(alias);
     const { setTouched } = useFormikContext();
     const inputId = `${alias}FormInput` || crypto.randomUUID();
@@ -12517,20 +12517,20 @@ const ConditionalTrigger = (_a) => {
         switch (true) {
             case inputtype.includes('conditionalcheckbox'):
                 return (React__default.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
-                    React__default.createElement(c$2, { name: alias, disabled: readonly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
+                    React__default.createElement(c$2, { name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
             case inputtype.includes('conditionalselect'):
                 return (React__default.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
-                    React__default.createElement(C$1, { name: alias, disabled: readonly, value: field.value, defaultValue: placeholder || String(value) || "", onValueChange: handleChange },
+                    React__default.createElement(C$1, { name: alias, disabled: readOnly, value: field.value, defaultValue: placeholder || "", onValueChange: handleChange },
                         React__default.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' } }),
-                        React__default.createElement(g, null, inputoptions.map((inputoption) => (React__default.createElement(v, { key: inputoption.optionvalue || crypto.randomUUID(), value: inputoption.optionvalue }, inputoption.text)))))));
+                        React__default.createElement(g, null, inputOptions.map((inputoption) => (React__default.createElement(v, { key: inputoption.optionvalue || crypto.randomUUID(), value: inputoption.optionvalue }, inputoption.text)))))));
             case inputtype.includes('conditionaltoggle'):
             default:
                 return (React__default.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
-                    React__default.createElement(i$1, { id: inputId, name: alias, disabled: readonly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
+                    React__default.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);
-    return (React__default.createElement(Column, { span: width, newLine: props.newRow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$8, { className: className, style: Object.assign(Object.assign({}, containerStyle), style) },
             React__default.createElement(p$8, { mb: isOpen ? "4" : "0", style: { transition: 'margin 0.3s' } }, renderTrigger()),
             React__default.createElement("div", { style: Object.assign(Object.assign({}, animationStyles.wrapper), { gridTemplateRows: isOpen ? '1fr' : '0fr', opacity: isOpen ? 1 : 0.6 }) },
@@ -12540,16 +12540,16 @@ const ConditionalTrigger = (_a) => {
                             borderTop: isOpen && !isNeumorphic ? '1px dashed var(--gray-6)' : 'none'
                         } }, children))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias, style: { cursor: 'pointer' } }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias, style: { cursor: 'pointer' } }, inputLabel),
                 "\u00A0",
-                props.ishinted ?
+                isHinted ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ? React__default.createElement(React__default.Fragment, null, props.errortext || "Required field")
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ? React__default.createElement(React__default.Fragment, null, errorText || "Required field")
                             : 'Invalid file selection')) : null))));
 };
 
@@ -20829,20 +20829,26 @@ const ensureDate = (date) => {
 };
 
 const DatePicker = (_a) => {
-    var { inputtype = 'datepicker-outline', alias, readonly, width, inputlabel, placeholder = 'Pick a date', minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "minvalue", "maxvalue", "className", "style"]);
+    var { inputtype = 'datepicker-outline', alias, readOnly, newRow, isHinted, hintText, hintUrl, errorText, width, inputLabel, placeholder = 'Pick a date', minDate, maxDate, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "width", "inputLabel", "placeholder", "minDate", "maxDate", "className", "style"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
-    const selectedDate = field.value
-        ? (typeof field.value === 'string' ? parseISO(field.value) : field.value)
-        : undefined;
-    const parsedMin = ensureDate(minvalue);
-    const parsedMax = ensureDate(maxvalue);
+    const selectedDate = React__default.useMemo(() => {
+        if (!field.value)
+            return undefined;
+        if (field.value instanceof Date)
+            return field.value;
+        const parsed = parseISO(field.value);
+        return isValid(parsed) ? parsed : undefined;
+    }, [field.value]);
+    const parsedMin = ensureDate(minDate);
+    const parsedMax = ensureDate(maxDate);
     const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
+    // Neumorphic Dynamic Colors
     useEffect(() => {
         if (inputtype === 'datepicker-neumorphic' && containerRef.current) {
             const parentBg = getNearestParentBackground(containerRef.current.parentElement);
@@ -20876,110 +20882,104 @@ const DatePicker = (_a) => {
             borderRadius: 'var(--radius-2)'
         };
     }, [inputtype, hasError, neuVars]);
-    // --- CALENDAR POPUP STYLES ---
     const calendarContainerStyle = React__default.useMemo(() => {
-        const base = { padding: '16px', borderRadius: '12px' };
+        const base = { padding: '20px', borderRadius: '16px', zIndex: 50 };
         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)' });
+        return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-4)', boxShadow: '0 12px 24px -10px rgba(0,0,0,0.15), 0 8px 12px -6px rgba(0,0,0,0.1)' });
     }, [inputtype, neuVars]);
-    return (React__default.createElement(Column, { span: width, newLine: props.newRow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
             React__default.createElement("input", { type: "hidden", "aria-describedby": `${alias}InputLabel`, name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
             React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
-          /* Reset & Layout */
           .rdp { 
-             --rdp-cell-size: 36px;
-             --rdp-caption-font-size: 16px;
-             margin: 0; 
-             font-family: var(--default-font-family, sans-serif);
+             --rdp-cell-size: 40px; /* Bigger touch targets */
+             --rdp-accent-color: var(--accent-9);
+             --rdp-background-color: var(--accent-3);
+             margin: 0;
           }
-          .rdp-months { justify-content: center; }
-          .rdp-month { background: transparent; }
+          /* Hide internal input field of DayPicker if present */
+          .rdp-vhidden { display: none; }
+
+          /* Layout Construction - Critical for "Google Style" Grid */
+          .rdp-month { display: table; margin: 0 auto; border-collapse: collapse; }
+          .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 0 8px; }
           
-          /* Header (Month Name + Nav) */
-          .rdp-caption { 
-             display: flex; 
-             align-items: center; 
-             justify-content: space-between; 
-             margin-bottom: 12px; 
-             padding: 0 4px;
-          }
+          /* Header Typography */
           .rdp-caption_label { 
+             font-size: 1rem; 
              font-weight: 600; 
              color: var(--gray-12); 
-             font-size: var(--font-size-3); 
-             text-transform: capitalize;
+             text-transform: capitalize; 
           }
-          .rdp-nav { display: flex; gap: 8px; }
+          
+          /* Navigation Arrows */
+          .rdp-nav { display: flex; gap: 4px; }
           .rdp-nav_button {
-             color: var(--gray-11);
-             border-radius: 6px;
-             padding: 4px;
-             transition: background 0.2s;
-             background: transparent;
+             width: 32px; height: 32px;
+             display: flex; align-items: center; justify-content: center;
+             border-radius: 50%;
              border: none;
+             background: transparent;
              cursor: pointer;
-             display: flex;
-             align-items: center;
-             justify-content: center;
+             color: var(--gray-11);
+             transition: all 0.2s ease;
           }
           .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
 
-          /* Weekdays Row */
+          /* Table Structure */
+          .rdp-table { max-width: 100%; border-collapse: collapse; }
+          .rdp-tbody { border: 0; }
+          
+          /* Weekday Headers (S M T W...) */
           .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;
+             width: var(--rdp-cell-size); height: 32px;
+             font-size: 0.75rem; font-weight: 600; 
+             color: var(--gray-9); text-transform: uppercase; 
+             text-align: center; vertical-align: middle;
           }
-          
-          /* Day Cells */
-          .rdp-cell { text-align: center; }
+
+          /* Days */
+          .rdp-cell { text-align: center; padding: 0; }
           .rdp-day { 
-             width: var(--rdp-cell-size); 
-             height: var(--rdp-cell-size); 
+             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;
+             border: none;
+             background: transparent;
+             color: var(--gray-12);
+             font-size: 0.9rem;
+             cursor: pointer;
+             display: flex; align-items: center; justify-content: center;
              margin: 1px;
+             transition: background-color 0.2s ease;
           }
 
-          /* States */
-          .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { 
+          /* Hover State */
+          .rdp-day:hover:not(.rdp-day_selected):not(.rdp-day_disabled) { 
              background-color: var(--gray-4); 
+             font-weight: 500;
           }
-          
+
+          /* Selected State - Solid Circle */
           .rdp-day_selected { 
-             background-color: var(--accent-9) !important; 
+             background-color: var(--rdp-accent-color) !important; 
              color: white !important; 
              font-weight: 600;
           }
 
+          /* Today State */
           .rdp-day_today { 
-             color: var(--accent-11); 
+             color: var(--rdp-accent-color); 
              font-weight: 700;
-             position: relative;
           }
+          /* If today is selected, keep text white */
+          .rdp-day_selected.rdp-day_today { color: white; }
 
-          .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
+          /* Disabled State */
+          .rdp-day_disabled { opacity: 0.25; cursor: not-allowed; }
 
-          /* NEUMORPHIC OVERRIDES */
+          /* 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);
@@ -20994,27 +20994,28 @@ const DatePicker = (_a) => {
         ` } }),
             React__default.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
                 React__default.createElement(s$1, null,
-                    React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
+                    React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readOnly && setIsOpen(true) },
                         React__default.createElement(c, null,
                             React__default.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
-                        React__default.createElement("input", { readOnly: true, disabled: readonly, value: selectedDate && isValid(selectedDate) ? format$2(selectedDate, 'PPP') : '', placeholder: placeholder, style: {
+                        React__default.createElement("input", { readOnly: true, disabled: readOnly, value: selectedDate ? format$2(selectedDate, 'PPP') : '', placeholder: placeholder, style: {
                                 backgroundColor: 'transparent',
                                 border: 'none',
                                 outline: 'none',
                                 width: '100%',
-                                cursor: readonly ? 'default' : 'pointer',
+                                cursor: readOnly ? 'default' : 'pointer',
                                 color: 'inherit',
                                 fontFamily: 'inherit',
                                 fontSize: 'var(--font-size-2)',
-                                fontWeight: 500
+                                fontWeight: 500,
+                                pointerEvents: 'none'
                             }, id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel` }))),
-                React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
+                React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 8 },
                     React__default.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
-                            setFieldValue(alias, date);
+                            setFieldValue(alias, date ? date.toISOString() : '');
                             setIsOpen(false);
                             setFieldTouched(alias, true);
                         }, disabled: [
-                            ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
+                            ...(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: {
@@ -21027,33 +21028,29 @@ const DatePicker = (_a) => {
                             }
                         } }))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
                 "\u00A0",
-                props.ishinted ?
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
-                hasError ?
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || (meta.error || "Required field"))) : null))));
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (meta.error || "Required field")))))));
 };
 
 const DateRangePicker = (_a) => {
     var _b, _c;
-    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"]);
+    var { inputtype = 'daterangepicker-outline', alias, readOnly, newRow, isHinted, hintText, hintUrl, errorText, width, inputLabel, placeholder = 'Pick a date range', minDate, maxDate, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "width", "inputLabel", "placeholder", "minDate", "maxDate", "className", "style"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
-    // Range object value format: { from: "2023-01-01", to: "2023-01-05" }
-    const rawVal = field.value || {};
-    const selectedRange = {
-        from: ensureDate(rawVal.from),
-        to: ensureDate(rawVal.to),
-    };
-    const parsedMin = ensureDate(minvalue);
-    const parsedMax = ensureDate(maxvalue);
-    const inputId = `${alias}FormInput`;
+    const selectedRange = React__default.useMemo(() => {
+        const rawVal = field.value || {};
+        return {
+            from: ensureDate(rawVal.from),
+            to: ensureDate(rawVal.to),
+        };
+    }, [field.value]);
+    const parsedMin = ensureDate(minDate);
+    const parsedMax = ensureDate(maxDate);
     const errorId = `${alias}-error`;
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef(null);
@@ -21071,12 +21068,12 @@ const DateRangePicker = (_a) => {
         }
     }, [inputtype]);
     let displayText = placeholder;
-    if (selectedRange.from) {
+    if (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) {
         if (selectedRange.to) {
-            displayText = `${format$2(selectedRange.from, 'LLL dd')} - ${format$2(selectedRange.to, 'LLL dd')}`;
+            displayText = `${format$2(selectedRange.from, 'LLL dd, yyyy')} - ${format$2(selectedRange.to, 'LLL dd, yyyy')}`;
         }
         else {
-            displayText = format$2(selectedRange.from, 'LLL dd');
+            displayText = format$2(selectedRange.from, 'LLL dd, yyyy');
         }
     }
     // --- STYLES ---
@@ -21101,137 +21098,139 @@ const DateRangePicker = (_a) => {
         };
     }, [inputtype, hasError, neuVars]);
     const calendarContainerStyle = React__default.useMemo(() => {
-        const base = { padding: '16px', borderRadius: '12px' };
+        const base = { padding: '20px', borderRadius: '16px', zIndex: 50 };
         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)' });
+        return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-4)', boxShadow: '0 12px 24px -10px rgba(0,0,0,0.15), 0 8px 12px -6px rgba(0,0,0,0.1)' });
     }, [inputtype, neuVars]);
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
-        React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: classname },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
+        React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
             React__default.createElement("input", { type: "hidden", name: alias, value: JSON.stringify({
                     from: (_b = selectedRange.from) === null || _b === void 0 ? void 0 : _b.toISOString(),
                     to: (_c = selectedRange.to) === null || _c === void 0 ? void 0 : _c.toISOString()
                 }) }),
             React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
-        /* Reset & Layout */
         .rdp { 
-            --rdp-cell-size: 36px;
-            --rdp-caption-font-size: 16px;
-            margin: 0; 
+            --rdp-cell-size: 40px; 
+            --rdp-accent-color: var(--accent-9);
+            --rdp-background-color: var(--accent-3);
+            margin: 0;
             font-family: var(--default-font-family, sans-serif);
         }
-        .rdp-months { justify-content: center; }
-        .rdp-month { background: transparent; }
+        .rdp-vhidden { display: none; }
+        .rdp-month { display: table; margin: 0 auto; border-collapse: collapse; }
+        .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 0 8px; }
         
-        /* 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;
+            font-size: 1rem; font-weight: 600; color: var(--gray-12); text-transform: capitalize; 
         }
-        .rdp-nav { display: flex; gap: 8px; }
+        
+        /* Navigation */
+        .rdp-nav { display: flex; gap: 4px; }
         .rdp-nav_button {
-            color: var(--gray-11); border-radius: 6px; padding: 4px;
-            transition: background 0.2s; background: transparent; border: none; cursor: pointer;
+            width: 32px; height: 32px;
             display: flex; align-items: center; justify-content: center;
+            border-radius: 50%; border: none; background: transparent; cursor: pointer;
+            color: var(--gray-11); transition: all 0.2s ease;
         }
         .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
 
-        /* Weekdays */
+        /* Table */
         .rdp-head_cell { 
+            width: var(--rdp-cell-size); height: 32px;
             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;
+            text-transform: uppercase; text-align: center; vertical-align: middle;
         }
         
-        /* Cells */
         .rdp-cell { text-align: center; padding: 1px 0; }
+        
+        /* Base Day Style */
         .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;
+            border-radius: 50%; border: none; background: transparent; 
+            color: var(--gray-12); font-size: 0.9rem; cursor: pointer; 
+            display: flex; align-items: center; justify-content: center;
             margin: 0 auto;
+            transition: background-color 0.2s ease;
         }
         
-        /* States */
-        .rdp-day:hover:not(.rdp-day_selected):not([disabled]) { background-color: var(--gray-4); }
+        .rdp-day:hover:not(.rdp-day_selected):not(.rdp-day_disabled) { 
+            background-color: var(--gray-4); font-weight: 500;
+        }
 
-        /* --- RANGE STYLES --- */
+        
         .rdp-day_range_middle {
-            background-color: var(--accent-3) !important;
+            background-color: var(--rdp-background-color) !important;
             color: var(--accent-11) !important;
             border-radius: 0 !important;
-            width: 100%; /* Fill cell width for continuous strip */
+            width: 100%; /* Fill the cell to connect strip */
+            margin: 0;
         }
+        
         .rdp-day_range_start {
-            background-color: var(--accent-9) !important;
+            background-color: var(--rdp-accent-color) !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%;
+            border-radius: 50% !important;
+        }
+        .rdp-day_range_start:not(.rdp-day_range_end) {
+             border-top-right-radius: 0 !important;
+             border-bottom-right-radius: 0 !important;
+             width: 100%;
+             margin: 0;
         }
+
         .rdp-day_range_end {
-            background-color: var(--accent-9) !important;
+            background-color: var(--rdp-accent-color) !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;
+            border-top-right-radius: 50% !important;
+            border-bottom-right-radius: 50% !important;
             width: 100%;
+            margin: 0;
         }
+
         .rdp-day_range_start.rdp-day_range_end {
             border-radius: 50% !important;
             width: var(--rdp-cell-size);
+            margin: 0 auto;
         }
+
         .rdp-day_today { color: var(--accent-11); font-weight: 700; }
-        .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
+        .rdp-day_disabled { opacity: 0.25; cursor: not-allowed; }
 
-        /* NEUMORPHIC OVERRIDES */
+        /* 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; 
-          }
+            .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_range_start, .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;
+            }
         ` : ''}
       ` } }),
             React__default.createElement(P$1, { open: isOpen, onOpenChange: setIsOpen },
                 React__default.createElement(s$1, null,
-                    React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
+                    React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'daterangepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readOnly && setIsOpen(true) },
                         React__default.createElement(c, null,
                             React__default.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
-                        React__default.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : `${alias}InputLabel`, readOnly: true, disabled: readonly, value: displayText, placeholder: placeholder, style: {
+                        React__default.createElement("input", { readOnly: true, disabled: readOnly, value: displayText, placeholder: placeholder, style: {
                                 backgroundColor: 'transparent',
                                 border: 'none',
                                 outline: 'none',
                                 width: '100%',
-                                cursor: readonly ? 'default' : 'pointer',
+                                cursor: readOnly ? 'default' : 'pointer',
                                 color: 'inherit',
                                 fontFamily: 'inherit',
                                 fontSize: 'var(--font-size-2)',
-                                fontWeight: 500
+                                fontWeight: 500,
+                                pointerEvents: 'none'
                             } }))),
-                React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
+                React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 8 },
                     React__default.createElement("div", { className: inputtype === 'daterangepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
                         React__default.createElement(DayPicker, { mode: "range", selected: selectedRange, onSelect: (range) => {
                                 setFieldValue(alias, range);
@@ -21240,43 +21239,41 @@ const DateRangePicker = (_a) => {
                                     setIsOpen(false);
                                 }
                             }, disabled: [
-                                ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
+                                ...(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')
+                                    if (props.orientation === 'left') {
                                         return React__default.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
+                                    }
                                     return React__default.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
                                 }
                             } })))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
                 "\u00A0",
-                props.ishinted ?
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
-                hasError ?
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || (meta.error || "Required field"))) : null))));
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (meta.error || "Required field")))))));
 };
 
 const DateTimePicker = (_a) => {
-    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"]);
+    var { inputtype = 'datetimepicker-outline', alias, readOnly, newRow, isHinted, hintText, hintUrl, errorText, width, inputLabel, placeholder = 'Pick date & time', value, minDate, maxDate, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "width", "inputLabel", "placeholder", "value", "minDate", "maxDate", "className", "style"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const selectedDate = ensureDate(field.value);
-    const parsedMin = ensureDate(minvalue);
-    const parsedMax = ensureDate(maxvalue);
+    const parsedMin = ensureDate(minDate);
+    const parsedMax = ensureDate(maxDate);
     const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
+    // Neumorphic Logic
     useEffect(() => {
         if (inputtype === 'datetimepicker-neumorphic' && containerRef.current) {
             const parentBg = getNearestParentBackground(containerRef.current.parentElement);
@@ -21295,6 +21292,7 @@ const DateTimePicker = (_a) => {
         const current = selectedDate || new Date();
         const hours = current.getHours();
         const minutes = current.getMinutes();
+        // Preserve existing time when changing date
         const newDateTime = setMinutes(setHours(date, hours), minutes);
         setFieldValue(alias, newDateTime);
     };
@@ -21314,7 +21312,7 @@ const DateTimePicker = (_a) => {
         }
         setFieldValue(alias, newDate);
     };
-    // --- STYLES ---
+    // --- INPUT STYLES ---
     const activeInputStyle = React__default.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);
@@ -21335,82 +21333,87 @@ const DateTimePicker = (_a) => {
             borderRadius: 'var(--radius-2)'
         };
     }, [inputtype, hasError, neuVars]);
+    // --- POPUP CONTAINER STYLES ---
     const calendarContainerStyle = React__default.useMemo(() => {
-        const base = { padding: 0, borderRadius: '12px', overflow: 'hidden' }; // Padding 0 to let Time section flush to bottom
+        // Padding 0 allows the Time Picker footer to sit flush at the bottom
+        const base = { padding: 0, borderRadius: '16px', overflow: 'hidden', zIndex: 50 };
         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)' });
+        // Google Material Shadow
+        return Object.assign(Object.assign({}, base), { backgroundColor: 'var(--color-panel-solid)', border: '1px solid var(--gray-4)', boxShadow: '0 12px 24px -10px rgba(0,0,0,0.15), 0 8px 12px -6px rgba(0,0,0,0.1)' });
     }, [inputtype, neuVars]);
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
-        React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: classname },
-            React__default.createElement("input", { type: "hidden", name: alias, value: selectedDate ? selectedDate.toISOString() : '' }),
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
+        React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
+            React__default.createElement("input", Object.assign({ type: "hidden", name: alias, value: selectedDate ? selectedDate.toISOString() : '' }, props)),
             React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
-        /* Reset & Layout */
         .rdp { 
-            --rdp-cell-size: 36px;
-            --rdp-caption-font-size: 16px;
+            --rdp-cell-size: 40px;
+            --rdp-accent-color: var(--accent-9);
+            --rdp-background-color: var(--accent-3);
             margin: 0; 
-            padding: 16px; /* Padding moved to RDP so Time section is flush */
+            padding: 16px; /* Padding inside RDP */
             font-family: var(--default-font-family, sans-serif);
         }
-        .rdp-months { justify-content: center; }
-        .rdp-month { background: transparent; }
+        .rdp-vhidden { display: none; }
+        .rdp-month { display: table; margin: 0 auto; border-collapse: collapse; }
+        .rdp-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 0 8px; }
         
-        /* 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;
+            font-size: 1rem; font-weight: 600; color: var(--gray-12); text-transform: capitalize;
         }
-        .rdp-nav { display: flex; gap: 8px; }
+        
+        /* Navigation */
+        .rdp-nav { display: flex; gap: 4px; }
         .rdp-nav_button {
-            color: var(--gray-11); border-radius: 6px; padding: 4px;
-            transition: background 0.2s; background: transparent; border: none; cursor: pointer;
+            width: 32px; height: 32px;
             display: flex; align-items: center; justify-content: center;
+            border-radius: 50%; border: none; background: transparent; cursor: pointer;
+            color: var(--gray-11); transition: all 0.2s ease;
         }
         .rdp-nav_button:hover { background-color: var(--gray-4); color: var(--gray-12); }
 
         /* Weekdays */
         .rdp-head_cell { 
+            width: var(--rdp-cell-size); height: 32px;
             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;
+            text-transform: uppercase; text-align: center; vertical-align: middle;
         }
         
-        /* Cells */
-        .rdp-cell { text-align: center; }
+        /* Days */
+        .rdp-cell { text-align: center; padding: 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;
+            border-radius: 50%; border: none; background: transparent; 
+            color: var(--gray-12); font-size: 0.9rem; cursor: pointer; 
+            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:hover:not(.rdp-day_selected):not([disabled]) { 
+            background-color: var(--gray-4); font-weight: 500;
+        }
+        
+        /* Selected State */
+        .rdp-day_selected { 
+            background-color: var(--rdp-accent-color) !important; 
+            color: white !important; font-weight: 600; 
         }
-        .rdp-day_disabled { opacity: 0.3; cursor: not-allowed; }
         
-        /* Time Input Styling */
+        /* Today State */
+        .rdp-day_today { color: var(--rdp-accent-color); font-weight: 700; }
+        .rdp-day_disabled { opacity: 0.25; cursor: not-allowed; }
+        
+        /* --- TIME INPUT STYLING --- */
         .time-input {
             text-align: center; font-variant-numeric: tabular-nums;
-            width: 44px; padding: 4px; border-radius: 6px;
+            width: 44px; padding: 6px; border-radius: 6px;
             border: 1px solid var(--gray-6); background: var(--color-surface);
-            color: var(--gray-12); font-weight: 500;
+            color: var(--gray-12); font-weight: 600; font-size: 0.9rem;
+        }
+        .time-input:focus { 
+            outline: 2px solid var(--accent-9); border-color: transparent; 
         }
-        .time-input:focus { outline: 2px solid var(--accent-9); border-color: transparent; }
         
         /* Neumorphic Overrides */
         ${inputtype === 'datetimepicker-neumorphic' ? `
@@ -21434,54 +21437,53 @@ const DateTimePicker = (_a) => {
                         setFieldTouched(alias, true);
                 } },
                 React__default.createElement(s$1, null,
-                    React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datetimepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readonly && setIsOpen(true) },
+                    React__default.createElement(u, { variant: "surface", style: Object.assign({ cursor: 'pointer', height: inputtype === 'datetimepicker-neumorphic' ? '40px' : '32px' }, activeInputStyle), onClick: () => !readOnly && setIsOpen(true) },
                         React__default.createElement(c, null,
                             React__default.createElement(Icon, { name: 'calendar', height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
-                        React__default.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: {
+                        React__default.createElement("input", { id: inputId, "aria-describedby": hasError ? errorId : undefined, readOnly: true, disabled: readOnly, 
+                            // Format: Jan 01, 2023 12:00 PM
+                            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
+                                cursor: readOnly ? 'default' : 'pointer', color: 'inherit', fontFamily: 'inherit',
+                                fontSize: 'var(--font-size-2)', fontWeight: 500, pointerEvents: 'none'
                             } }))),
                 React__default.createElement(i$3, { style: calendarContainerStyle, align: "start", sideOffset: 5 },
                     React__default.createElement("div", { className: inputtype === 'datetimepicker-neumorphic' ? 'neu-calendar' : '', style: neuVars },
                         React__default.createElement(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, disabled: [
-                                ...(readonly ? [{ from: new Date(1900, 0, 1), to: new Date(2100, 0, 1) }] : []),
+                                ...(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: {
+                            ], components: {
                                 Chevron: (props) => {
                                     const style = { display: 'block', cursor: 'pointer', color: 'var(--gray-11)' };
-                                    if (props.orientation === 'left')
+                                    if (props.orientation === 'left') {
                                         return React__default.createElement(Icon, { name: 'chevronleft', height: "16", width: "16", style: style });
+                                    }
                                     return React__default.createElement(Icon, { name: 'chevronright', height: "16", width: "16", style: style });
                                 }
                             } }),
-                        React__default.createElement(o$2, { size: "4" }),
-                        React__default.createElement(p$5, { p: "3", gap: "3", align: "center", justify: "center", style: {
+                        React__default.createElement(p$5, { p: "3", gap: "3", align: "center", justify: "between", style: {
                                 backgroundColor: inputtype === 'datetimepicker-neumorphic' ? 'rgba(0,0,0,0.02)' : 'var(--gray-2)',
                                 borderTop: inputtype === 'datetimepicker-neumorphic' ? 'none' : '1px solid var(--gray-4)'
                             } },
-                            React__default.createElement(Icon, { name: "clock", width: "16", height: "16", style: { opacity: 0.7 } }),
-                            React__default.createElement(p$5, { align: "center", gap: "1" },
-                                React__default.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__default.createElement(p$d, { weight: "bold", style: { paddingBottom: 2 } }, ":"),
-                                React__default.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__default.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false), style: { marginLeft: 'auto' } }, "Done"))))),
+                            React__default.createElement(p$5, { align: "center", gap: "2" },
+                                React__default.createElement(Icon, { name: "clock", width: "16", height: "16", style: { opacity: 0.6 } }),
+                                React__default.createElement(p$5, { align: "center", gap: "1" },
+                                    React__default.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__default.createElement(p$d, { weight: "bold", size: "3", style: { paddingBottom: 2, color: 'var(--gray-10)' } }, ":"),
+                                    React__default.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__default.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false) }, "Done"))))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
                 "\u00A0",
-                props.ishinted ?
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
-                hasError ?
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || (meta.error || "Required field"))) : null))));
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (meta.error || "Required field")))))));
 };
 
 const Dropdown = (_a) => {
-    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"]);
+    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, value, inputOptions, style, newRow, isHinted, hintText, hintUrl, defaultvalue, errorText, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "value", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "defaultvalue", "errorText", "className"]);
     const triggerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const { setFieldValue, setFieldTouched } = useFormikContext();
@@ -21555,7 +21557,7 @@ const Dropdown = (_a) => {
         inputtype === 'dropdown-material' ? materialContent :
             inputtype === 'dropdown-outline' ? outlineContent : Object.assign(Object.assign({}, neumorphicContent), neuVars);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Column, { span: width, newLine: newrow },
+        React__default.createElement(Column, { span: width, newLine: newRow },
             React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
                 inputtype === 'dropdown-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
           .neu-select-trigger[data-state='open'] {
@@ -21567,7 +21569,7 @@ const Dropdown = (_a) => {
             cursor: pointer;
           }
         ` } })),
-                React__default.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
+                React__default.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);
@@ -21578,26 +21580,26 @@ const Dropdown = (_a) => {
                             setFieldTouched(alias, true);
                         }
                     } },
-                    React__default.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__default.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
                     React__default.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
                         React__default.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
                         React__default.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
-                        inputoptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
+                        inputOptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
                             React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
                                 React__default.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))
                             :
                                 React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text)))))),
                 React__default.createElement("div", null,
-                    React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                    React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                     "\u00A0",
-                    ishinted ?
+                    isHinted ?
                         React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement(e, { content: hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                                React__default.createElement("a", { href: hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                            React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                                React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                     React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                     hasError ?
                         React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errortext || meta.error || "Required field")) : null)))));
+                            React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null)))));
 };
 
 const getFileIcon$1 = (type, name) => {
@@ -21615,7 +21617,7 @@ const getFileIcon$1 = (type, name) => {
 };
 const File$1 = (_a) => {
     var _b;
-    var { inputtype = 'fileinput-outline', alias, readonly, width, inputlabel, placeholder = '', preview = false, classname, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "preview", "classname", "style"]);
+    var { inputtype = 'fileinput-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, preview = false, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "preview", "className", "style"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const selectedFile = field.value;
@@ -21685,9 +21687,9 @@ const File$1 = (_a) => {
             : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', border: 'none' }), neuVars);
     const activeStyle = inputtype === 'fileinput-neumorphic' ? neumorphicTrigger :
         inputtype === 'fileinput-outline' ? outlineTrigger : materialTrigger;
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
-        React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: classname },
-            React__default.createElement("input", { ref: inputRef, id: inputId, name: alias, readOnly: readonly, type: "file", accept: ACCEPTED_FORMATS, onChange: handleFileChange, style: { display: 'none' }, "aria-describedby": hasError ? errorId : undefined }),
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
+        React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
+            React__default.createElement("input", { ref: inputRef, id: inputId, name: alias, readOnly: readOnly, type: "file", accept: ACCEPTED_FORMATS, onChange: handleFileChange, style: { display: 'none' }, "aria-describedby": hasError ? errorId : undefined }),
             React__default.createElement("div", { onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, style: activeStyle, onMouseEnter: (e) => {
                     if (inputtype === 'fileinput-outline')
                         e.currentTarget.style.borderColor = 'var(--accent-9)';
@@ -21719,16 +21721,16 @@ const File$1 = (_a) => {
                 React__default.createElement(o$5, { size: "1", variant: "ghost", color: "red", onClick: handleClear, style: { borderRadius: '50%', padding: 4 } },
                     React__default.createElement(Icon, { name: 'close', width: "16", height: "16" }))))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted ?
+                isHinted ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || "Required field")) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || "Required field")) : null))));
 };
 
 const getFileIcon = (fileOrUrl) => {
@@ -21778,7 +21780,7 @@ const styles = {
     }
 };
 const FileMultiple = (_a) => {
-    var { inputtype = 'filemultiple-outline', alias, readonly, width, inputlabel, placeholder = '', preview = true, classname, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "preview", "classname", "style"]);
+    var { inputtype = 'filemultiple-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, preview = true, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "preview", "className", "style"]);
     const [field, meta] = useField(alias);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const inputRef = useRef(null);
@@ -21809,11 +21811,9 @@ const FileMultiple = (_a) => {
     const handleFileChange = (e) => {
         if (e.target.files && e.target.files.length > 0) {
             const newFiles = Array.from(e.target.files);
-            // Append new files to extants
             setFieldValue(alias, [...currentFiles, ...newFiles]);
             setFieldTouched(alias, true);
         }
-        // Reset input value to allow file reselection
         if (inputRef.current)
             inputRef.current.value = '';
     };
@@ -21827,8 +21827,8 @@ const FileMultiple = (_a) => {
     };
     const isNeumorphic = inputtype === 'filemultiple-neumorphic';
     const hasError = meta.touched && meta.error;
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
-        React__default.createElement(p$8, { className: classname, style: style },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
+        React__default.createElement(p$8, { className: className, style: style },
             React__default.createElement(p$8, { onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, p: "4", style: Object.assign(Object.assign({}, styles[inputtype]), { cursor: 'pointer', transition: 'all 0.2s', borderColor: hasError ? 'var(--red-9)' : (styles[inputtype].borderBottom ? 'var(--accent-9)' : 'var(--gray-a8)'), position: 'relative' }) },
                 React__default.createElement(p$5, { align: "center", gap: "4" },
                     React__default.createElement(p$8, { style: {
@@ -21843,7 +21843,7 @@ const FileMultiple = (_a) => {
                             ? `${currentFiles.length} file${currentFiles.length !== 1 ? 's' : ''} selected`
                             : "Choose files..."),
                         React__default.createElement(p$d, { size: "1", color: "gray", style: { opacity: 0.8 } }, "PDF, Images, Office Docs, JSON, ZIP"))),
-                React__default.createElement("input", { id: inputId || alias, ref: inputRef, readOnly: readonly, name: alias, type: "file", multiple: true, accept: ACCEPTED_EXTENSIONS, onChange: handleFileChange, style: { display: 'none' }, "aria-describedby": hasError ? errorId : undefined })),
+                React__default.createElement("input", { id: inputId || alias, ref: inputRef, readOnly: readOnly, name: alias, type: "file", multiple: true, accept: ACCEPTED_EXTENSIONS, onChange: handleFileChange, style: { display: 'none' }, "aria-describedby": hasError ? errorId : undefined })),
             preview && currentFiles.length > 0 && (React__default.createElement(o$6, { columns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "3", mt: "3" }, currentFiles.map((file, index) => {
                 // Detect preview URL:
                 // If string (URL from DB), use urlpath
@@ -21887,17 +21887,17 @@ const FileMultiple = (_a) => {
             }))),
             React__default.createElement("div", null,
                 React__default.createElement("br", null),
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted ?
+                isHinted ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
                         React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ?
-                            React__default.createElement(React__default.Fragment, null, props.errortext || "Required field")
+                            React__default.createElement(React__default.Fragment, null, errorText || "Required field")
                             : 'Invalid file selection')) : null))));
 };
 
@@ -29192,10 +29192,10 @@ const getStyles = (design, layout) => {
     }
     return Object.assign(Object.assign({ borderRadius }, visualStyles), { position: 'relative', overflow: 'hidden', display: 'block' });
 };
-const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'normal', aspectratio = 16 / 9, height, width = '100%', classname, style, onClick, }) => {
+const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'normal', aspectratio = 16 / 9, height, width = '100%', className, style, onClick, }) => {
     const containerStyles = getStyles(design, layout);
     const iconColor = design === 'neumorphic' ? '#555' : 'var(--gray-9)';
-    const content = (React__default.createElement(p$8, { className: classname, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width, height: height || 'auto' }), style), onClick: onClick }, src ? (React__default.createElement("img", { id: String(id), src: src, alt: alt, style: {
+    const content = (React__default.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width, height: height || 'auto' }), style), onClick: onClick }, src ? (React__default.createElement("img", { id: String(id), src: src, alt: alt, style: {
             width: '100%',
             height: '100%',
             objectFit: 'cover',
@@ -29217,33 +29217,33 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
 };
 
 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"]);
+    var { alias, inputtype = "text", width, inputLabel, readOnly = false, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, className, size = "2", style, inputvariant = 'input-outline' } = _a, props = __rest$1(_a, ["alias", "inputtype", "width", "inputLabel", "readOnly", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "className", "size", "style", "inputvariant"]);
     const [inputField, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const errorId = `${alias}-error`;
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
-        React__default.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 })),
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
+        React__default.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__default.createElement("div", null,
             React__default.createElement("br", null),
-            React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+            React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
             "\u00A0",
-            props.ishinted && (React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+            isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                     React__default.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-            hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)))));
+            hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`)))));
 };
 
 const PasswordInput = (_a) => {
-    var { alias, inputlabel, width, readonly = false, placeholder = '', inputvariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "readonly", "placeholder", "inputvariant", "size", "className"]);
+    var { alias, inputLabel, width, readOnly = false, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, inputvariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "readOnly", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "inputvariant", "size", "className"]);
     const [showPassword, setShowPassword] = useState(false);
     const toggleVisibility = () => setShowPassword(!showPassword);
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const errorId = `${alias}-error`;
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
-        React__default.createElement(u, Object.assign({ size: size, type: showPassword ? "text" : "password", id: `${alias}FormInput`, readOnly: readonly, "aria-describedby": `${alias}InputLabel`, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, field, props, { name: alias }),
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
+        React__default.createElement(u, Object.assign({ size: size, type: showPassword ? "text" : "password", id: `${alias}FormInput`, readOnly: readOnly, "aria-describedby": `${alias}InputLabel`, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, field, props, { name: alias }),
             React__default.createElement(c, null,
                 React__default.createElement(Icon, { name: "lockclosed", height: "16", width: "16" })),
             React__default.createElement(c, null,
@@ -29251,12 +29251,12 @@ const PasswordInput = (_a) => {
                     React__default.createElement(o$5, { size: "1", variant: "ghost", color: "gray", onClick: toggleVisibility, type: "button", "aria-label": showPassword ? "Hide password" : "Show password" }, showPassword ? (React__default.createElement(Icon, { name: "eyeopen", height: "16", width: "16" })) : (React__default.createElement(Icon, { name: "eyeclosed", height: "16", width: "16" })))))),
         React__default.createElement("div", null,
             React__default.createElement("br", null),
-            React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+            React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
             "\u00A0",
-            props.ishinted && (React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+            isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                     React__default.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-            hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)))));
+            hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`)))));
 };
 
 // This file is a workaround for a bug in web browsers' "native"
@@ -36798,14 +36798,14 @@ var en = {
 };
 
 const PhoneInput = (_a) => {
-    var { alias, inputlabel, width, placeholder = "Phone Number", readonly, inputvariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "placeholder", "readonly", "inputvariant", "size", "className"]);
+    var { alias, inputLabel, width, placeholder = "Phone Number", newRow, isHinted, hintText, hintUrl, errorText, readOnly, inputvariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "size", "className"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const [country, setCountry] = useState('US');
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const errorId = `${alias}-error`;
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React__default.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props),
                 React__default.createElement(c, { style: { padding: 0 } },
@@ -36833,7 +36833,7 @@ const PhoneInput = (_a) => {
                                     "(+",
                                     getCountryCallingCode(c),
                                     ")")))))))),
-                React__default.createElement(Input, { country: country, 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: {
+                React__default.createElement(Input, { country: country, 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',
@@ -36846,11 +36846,11 @@ const PhoneInput = (_a) => {
                         width: '100%'
                     } })),
             React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
-                props.ishinted && (React__default.createElement(e, { content: props.hinttext || "No hint available" },
-                    React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React__default.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errortext || meta.error || `Required field`))))));
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || meta.error || `Required field`))))));
 };
 
 /** Checks if value is string */
@@ -40641,7 +40641,7 @@ 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"]);
+    var { alias, type, inputLabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputVariant", "size", "className"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -40662,17 +40662,17 @@ const UUIDInput = (_a) => {
                 '#': /[0-9a-fA-F]/
             }
         };
-    }, [format, type, delimiter]);
+    }, [JSON.stringify(format), type, delimiter]);
     const handleCopy = () => {
         navigator.clipboard.writeText(field.value || '');
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     };
-    const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
+    const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React__default.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
-                React__default.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: {
+                React__default.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, type: "text", style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -40689,12 +40689,12 @@ const UUIDInput = (_a) => {
                     React__default.createElement(e, { content: copied ? "Copied!" : "Copy to clipboard" },
                         React__default.createElement(o$5, { size: "1", variant: "ghost", color: copied ? "green" : "gray", onClick: handleCopy, type: "button", disabled: !field.value }, copied ? React__default.createElement(CheckIcon, null) : React__default.createElement(CopyIcon, null))))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted && (React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                    React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || meta.error || `Required field`))))));
+                hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || `Required field`))))));
 };
 
 var FaCcVisa = {};
@@ -42126,7 +42126,7 @@ var cardValidator = /*@__PURE__*/getDefaultExportFromCjs(distExports);
 
 const CreditCardInput = (_a) => {
     var _b;
-    var { alias, inputlabel, width, placeholder, readonly = false, inputvariant = 'input-outline', classname } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "placeholder", "readonly", "inputvariant", "classname"]);
+    var { alias, inputLabel, width, placeholder, newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputvariant = 'input-outline', className } = _a; __rest$1(_a, ["alias", "inputLabel", "width", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "className"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -42147,16 +42147,16 @@ const CreditCardInput = (_a) => {
     };
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const isOutline = inputvariant === 'input-outline';
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            React__default.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${classname || ''}`, style: {
+            React__default.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
                     width: '100%',
                     boxShadow: (isOutline && hasError) ? 'inset 0 0 0 1px var(--red-9)' : undefined,
                     backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
                     paddingRight: '12px',
                     cursor: 'text'
                 } },
-                React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: maskPattern, readOnly: readonly, value: field.value, unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || '0000 0000 0000 0000', inputMode: "numeric", autoComplete: "cc-number", style: {
+                React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: maskPattern, readOnly: readOnly, value: field.value, unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || '0000 0000 0000 0000', inputMode: "numeric", autoComplete: "cc-number", style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -42170,12 +42170,12 @@ const CreditCardInput = (_a) => {
                     } }),
                 React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, getCardIcon())),
             React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted && (React__default.createElement(e, { content: props.hinttext || "No hint available" },
-                    React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errortext || `Required field`))))));
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || `Required field`))))));
 };
 
 const CURRENCIES = {
@@ -42247,7 +42247,7 @@ const CURRENCIES = {
 };
 
 const CurrencyInput = (_a) => {
-    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"]);
+    var { alias, inputtype = "currency", inputLabel, width, defaultvalue = "USD", placeholder, newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputvariant = 'input-outline', className } = _a; __rest$1(_a, ["alias", "inputtype", "inputLabel", "width", "defaultvalue", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "className"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [amountField, amountMeta] = useField(alias);
     const currencyAlias = `${alias}Currency`;
@@ -42266,15 +42266,15 @@ const CurrencyInput = (_a) => {
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const isOutline = inputvariant === 'input-outline';
     const errorId = `${alias}-error`;
-    return (React__default.createElement(Column, { span: width, newLine: props.newRow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            React__default.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${classname || ''}`, style: {
+            React__default.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
                     width: '100%',
                     boxShadow: (isOutline && hasError) ? 'inset 0 0 0 1px var(--red-9)' : undefined,
                     backgroundColor: isOutline ? 'var(--color-surface)' : undefined,
                     cursor: 'text'
                 } },
-                React__default.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyAlias, val), disabled: readonly || inputtype !== "currency" },
+                React__default.createElement(C$1, { value: activeCurrency.code, onValueChange: (val) => setFieldValue(currencyAlias, val), disabled: readOnly || inputtype !== "currency" },
                     React__default.createElement(u$1, { variant: "ghost", style: {
                             height: '100%',
                             padding: '0 8px 0 12px',
@@ -42305,7 +42305,7 @@ const CurrencyInput = (_a) => {
                     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: {
+                }, { 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',
@@ -42319,12 +42319,12 @@ const CurrencyInput = (_a) => {
                         width: '100%'
                     }, inputMode: "decimal", autoComplete: "off" }))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted && (React__default.createElement(e, { content: props.hinttext || "No hint available" },
-                    React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errortext || amountMeta.error || `Required field`))))));
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || amountMeta.error || `Required field`))))));
 };
 
 var FaChartLine = {};
@@ -42345,16 +42345,16 @@ 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, newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputvariant = 'input-outline', className } = _a; __rest$1(_a, ["alias", "inputLabel", "width", "defaultvalue", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "className"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [priceField, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const isOutline = inputvariant === 'input-outline';
     const errorId = `${alias}-error`;
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            React__default.createElement(p$5, { align: "center", justify: "between", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${classname || ''}`, style: {
+            React__default.createElement(p$5, { align: "center", justify: "between", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
                     width: '100%',
                     height: 'var(--space-6)',
                     boxShadow: (isOutline)
@@ -42378,7 +42378,7 @@ const StockInput = (_a) => {
                         userSelect: 'none'
                     } }, defaultvalue || React__default.createElement(FaChartLineExports.FaChartLine, null)),
                 React__default.createElement(p$5, { align: "center", style: { flex: 1, height: '100%', justifyContent: 'flex-end' } },
-                    React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: 2, readOnly: readonly, 
+                    React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: 2, readOnly: readOnly, 
                         // @ts-expect-error: known library type definition gap
                         signed: String(false), thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'], value: priceField.value !== undefined && priceField.value !== null ? String(priceField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || "0.00", style: {
                             border: 'none',
@@ -42393,16 +42393,16 @@ const StockInput = (_a) => {
                             fontFamily: 'var(--default-font-family)',
                         }, inputMode: "decimal", autoComplete: "off" }))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted && (React__default.createElement(e, { content: props.hinttext || "No hint available" },
-                    React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`))))));
+                hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`))))));
 };
 
 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 = '', newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, direction = 'column', columns, className } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "direction", "columns", "className"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -42420,8 +42420,8 @@ const RadioGroupInput = (_a) => {
             });
         }
     }, [inputtype]);
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
-        React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: classname },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
+        React__default.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
             inputtype === 'radio-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
           /* Target the specific Radio Item button class */
           .neu-radio .rt-RadioGroupItem { 
@@ -42456,11 +42456,11 @@ const RadioGroupInput = (_a) => {
             transform: none; /* Don't scale if pressed in */
           }
         ` } })),
-            React__default.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, disabled: readonly, value: field.value, onValueChange: (val) => {
+            React__default.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, disabled: readOnly, value: field.value, onValueChange: (val) => {
                     setFieldValue(alias, val);
                     setTimeout(() => setFieldTouched(alias, true), 0);
                 } },
-                React__default.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputoptions.map((inputoption) => {
+                React__default.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption) => {
                     const isChecked = String(field.value) === String(inputoption.optionvalue);
                     return (React__default.createElement(p$5, { asChild: true, key: inputoption.optionvalue, align: "center", gap: "2" },
                         React__default.createElement(p$d, { as: "label", size: "2", style: { cursor: 'pointer' } },
@@ -42471,20 +42471,20 @@ const RadioGroupInput = (_a) => {
                             React__default.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
                 }))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted ?
+                isHinted ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`)) : null))));
 };
 
 const OptionSelect = (_a) => {
-    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"]);
+    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 = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const { setFieldValue, setFieldTouched } = useFormikContext();
@@ -42567,7 +42567,7 @@ const OptionSelect = (_a) => {
               cursor: pointer;
             }
           ` } })),
-            React__default.createElement(C$1, { name: alias, disabled: readonly, value: field.value || "", onValueChange: (val) => {
+            React__default.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);
@@ -42582,24 +42582,24 @@ const OptionSelect = (_a) => {
                 React__default.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
                     React__default.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
                     React__default.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
-                    inputoptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ? (React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
+                    inputOptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ? (React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
                         React__default.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))) : (React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                ishinted ?
+                isHinted ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errortext || meta.error || "Required field")) : null))));
+                        React__default.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 = '', newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, className } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "className"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const selectedValues = (Array.isArray(field.value) ? field.value : []);
@@ -42616,7 +42616,7 @@ const MultipleSelect = (_a) => {
         setTimeout(() => setFieldTouched(alias, true), 0);
     };
     const displayLabel = selectedValues.length > 0
-        ? inputoptions
+        ? inputOptions
             .filter(inputoption => selectedValues.includes(inputoption.optionvalue))
             .map(inputoption => inputoption.text)
             .join(', ')
@@ -42655,12 +42655,12 @@ const MultipleSelect = (_a) => {
             : '6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light)', transition: 'all 0.2s ease' });
     const activeTrigger = inputtype === 'multiselect-material' ? materialTrigger :
         inputtype === 'multiselect-outline' ? outlineTrigger : Object.assign(Object.assign({}, neumorphicTrigger), neuVars);
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React__default.createElement("input", { type: "hidden", name: alias, value: JSON.stringify(selectedValues) }),
             React__default.createElement(P$1, { onOpenChange: setIsOpen },
                 React__default.createElement(s$1, null,
-                    React__default.createElement("button", { id: `${alias}FormInput`, type: "button", ref: triggerRef, className: classname, style: Object.assign(Object.assign({}, activeTrigger), style), "aria-describedby": `${alias}InputLabel` },
+                    React__default.createElement("button", { id: `${alias}FormInput`, type: "button", ref: triggerRef, className: className, style: Object.assign(Object.assign({}, activeTrigger), style), "aria-describedby": `${alias}InputLabel` },
                         React__default.createElement("span", { style: {
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
@@ -42670,7 +42670,7 @@ const MultipleSelect = (_a) => {
                 React__default.createElement(i$3, { align: "start", sideOffset: 5, style: Object.assign({ width: (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth, padding: 0, overflow: 'hidden', backgroundColor: inputtype === 'multiselect-neumorphic' ? 'var(--neu-bg)' : 'var(--color-panel-solid)' }, neuVars) },
                     React__default.createElement(c$1, { type: "auto", scrollbars: "vertical", style: { maxHeight: 200 } },
                         React__default.createElement(p$8, { p: "2" },
-                            React__default.createElement(p$5, { direction: "column", gap: "1" }, inputoptions.map((inputoption) => {
+                            React__default.createElement(p$5, { direction: "column", gap: "1" }, inputOptions.map((inputoption) => {
                                 const isSelected = selectedValues.some((val) => String(val)
                                     === String(inputoption.optionvalue));
                                 return (React__default.createElement(p$5, { id: String(inputoption.optionid) || '', key: inputoption.optionid, align: "center", gap: "2", onClick: () => handleToggle(inputoption.optionvalue), style: {
@@ -42680,27 +42680,27 @@ const MultipleSelect = (_a) => {
                                         backgroundColor: isSelected ? 'var(--accent-a3)' : 'transparent',
                                         transition: 'background-color 0.1s'
                                     }, className: "multiselect-item" },
-                                    React__default.createElement(c$2, { disabled: readonly, checked: isSelected, style: { pointerEvents: 'none' } }),
+                                    React__default.createElement(c$2, { disabled: readOnly, checked: isSelected, style: { pointerEvents: 'none' } }),
                                     React__default.createElement(p$d, { size: "2" }, inputoption.text)));
                             })))))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted ?
+                isHinted ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, 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 = '', newRow, isHinted, hintText, hintUrl, errorText, minValue = 0, maxValue = 100, stepValue = 1, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minValue", "maxValue", "stepValue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
-    const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
+    const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minValue];
     const hasError = Boolean(meta.touched && meta.error);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
@@ -42716,7 +42716,7 @@ const SliderInput = (_a) => {
             });
         }
     }, [inputtype]);
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "3", width: "100%", ref: containerRef, style: style, className: className },
             React__default.createElement(p$5, { justify: "between", align: "center" },
                 React__default.createElement(p$d, { size: "2", color: "gray", style: { fontVariantNumeric: 'tabular-nums' } }, fieldValue[0])),
@@ -42777,27 +42777,26 @@ const SliderInput = (_a) => {
            box-shadow: none;
         }
       ` } }),
-            React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readonly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, value: fieldValue, onValueChange: (val) => {
-                    // Formik Implementation - For array, pass 'val' directly
+            React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minValue, max: maxValue, step: stepValue, value: fieldValue, onValueChange: (val) => {
                     setFieldValue(alias, val[0]);
                 }, onValueCommit: () => {
                     setFieldTouched(alias, true);
                 }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted ?
+                isHinted ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`)) : null))));
 };
 
 const RangeSlider = (_a) => {
-    var { inputtype = 'range-outline', alias, readonly, width, inputlabel, placeholder = '', minvalue = 0, maxvalue = 100, stepvalue = 1, minStepsBetweenThumbs = 0, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "minvalue", "maxvalue", "stepvalue", "minStepsBetweenThumbs", "className", "style"]);
+    var { inputtype = 'range-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, minStepsBetweenThumbs = 0, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "minStepsBetweenThumbs", "className", "style"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     // Range Formik Logic 
@@ -42823,7 +42822,7 @@ const RangeSlider = (_a) => {
             });
         }
     }, [inputtype]);
-    return (React__default.createElement(Column, { span: width, newLine: props.newrow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "3", width: "100%", ref: containerRef, style: style, className: className },
             React__default.createElement(p$5, { justify: "between", align: "center" },
                 React__default.createElement(p$d, { size: "2", color: "gray", style: { fontVariantNumeric: 'tabular-nums' } }, fieldValue.join(' - '))),
@@ -42857,27 +42856,27 @@ const RangeSlider = (_a) => {
            background-color: white; border: 2px solid var(--accent-9); box-shadow: none;
         }
       ` } }),
-            React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readonly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, minStepsBetweenThumbs: minStepsBetweenThumbs, value: fieldValue, onValueChange: (val) => {
+            React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, minStepsBetweenThumbs: minStepsBetweenThumbs, value: fieldValue, onValueChange: (val) => {
                     // LOGIC SYNOPSIS:
                     // If Range, set value as array.
                     // If Slider, set value as first value.
                     setFieldValue(alias, isRange ? val : val[0]);
                 }, onValueCommit: () => setFieldTouched(alias, true), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 "\u00A0",
-                props.ishinted ?
+                isHinted ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement(e, { content: props.hinttext || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                            React__default.createElement("a", { href: props.hinturl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                            React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errortext || `Required field`)) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`)) : null))));
 };
 
 const Toggle = (_a) => {
-    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"]);
+    var { inputtype = 'toggle-neumorphic', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl, errorText, icon = 'stack' } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "icon"]);
     const { setFieldValue, setFieldTouched } = useFormikContext();
     const [field, meta] = useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -42912,59 +42911,62 @@ const Toggle = (_a) => {
         transition: 'all 0.1s ease',
     };
     const handleToggle = (val) => {
-        if (!readonly) {
+        if (!readOnly) {
             setFieldValue(alias, val);
             setFieldTouched(alias, true);
         }
     };
-    return (React__default.createElement(Column, { span: width, newLine: newrow },
+    // Determine Icon Color: Deep accent if Checked & Active, Grey otherwise
+    const iconColor = field.value && !readOnly ? 'var(--accent-9)' : 'var(--gray-8)';
+    return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement("div", { ref: containerRef, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: '4px' } },
-            inputtype === 'toggle-neumorphic' ? (React__default.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__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
-                    .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;
-                    }
+            inputtype === 'toggle-neumorphic' ? (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
+                React__default.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__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
+                        .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;
+                        }
+                        
+                        .neu-toggle-state {
+                            display: none;
+                        }
 
-                    .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);
-                    }
+                        .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);
+                        }
 
-                    /* Sibling selector triggers animation when checked */
-                    .neu-toggle-state:checked ~ .neu-indicator {
-                        transform: translate3d(25%, 0, 0);
-                    }
-                ` } }),
-                React__default.createElement("input", { className: "neu-toggle-state", type: "checkbox", checked: !!field.value, readOnly: true }),
-                React__default.createElement("div", { className: "neu-indicator" }),
-                React__default.createElement(Icon, { name: icon }))) : (React__default.createElement(Root$1, { pressed: field.value, onPressedChange: handleToggle, name: alias, disabled: readonly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
-                React__default.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" }),
+                        .neu-toggle-state:checked ~ .neu-indicator {
+                            transform: translate3d(25%, 0, 0);
+                        }
+                    ` } }),
+                    React__default.createElement("input", { className: "neu-toggle-state", type: "checkbox", checked: !!field.value, readOnly: true }),
+                    React__default.createElement("div", { className: "neu-indicator" })),
+                React__default.createElement(Icon, { name: icon, height: "20", width: "20", color: iconColor, style: {
+                        transition: 'color 0.3s ease',
+                        opacity: readOnly ? 0.5 : 1
+                    } }))) : (React__default.createElement(Root$1, { pressed: field.value, onPressedChange: handleToggle, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
+                React__default.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__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
-                        /* Material States */
                         .design-toggle.toggle-material[data-state='on'] {
                             background-color: var(--accent-9);
                             color: white;
@@ -42974,7 +42976,6 @@ const Toggle = (_a) => {
                             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);
@@ -42987,15 +42988,15 @@ const Toggle = (_a) => {
                     ` } }),
                     children))),
             React__default.createElement("div", null,
-                inputlabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel)),
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
                 "\u00A0",
-                ishinted && (React__default.createElement(e, { content: hinttext || "No hint available" },
-                    React__default.createElement("a", { href: hinturl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
+                isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
+                    React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errortext || `Required field`))))));
+                hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, errorText || `Required field`))))));
 };
 
-const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize = "2", subtitle, align = "left", withSeparator = true, className, backgroundcolor, icon }) => {
+const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize = "2", subTitle, align = "left", letterSpacing = "0.13em", withSeparator = true, className, backgroundColor, icon, titleColor, subtitleColor }) => {
     const justifyMap = {
         left: 'start',
         center: 'center',
@@ -43004,19 +43005,25 @@ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize =
     return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", className: className, style: {
                 width: '100%',
+                boxSizing: 'border-box',
                 marginBottom: 'var(--space-2)',
                 textAlign: align,
-                backgroundColor: backgroundcolor || 'transparent',
-                padding: backgroundcolor ? 'var(--space-3) var(--space-4)' : '0',
-                borderRadius: backgroundcolor ? 'var(--radius-3)' : '0',
+                backgroundColor: backgroundColor || 'transparent',
+                padding: backgroundColor ? 'var(--space-3) var(--space-4)' : '0',
+                borderRadius: backgroundColor ? 'var(--radius-3)' : '0',
             } },
             React__default.createElement(p$5, { align: "center", justify: justifyMap[align], gap: "3", style: { width: '100%' } },
-                icon && (React__default.createElement(p$5, { align: "center", justify: "center", style: { color: 'var(--gray-12)' } }, icon)),
+                icon && (React__default.createElement(p$5, { align: "center", justify: "center", style: { color: titleColor || 'var(--gray-12)' } }, icon)),
                 React__default.createElement(r$g, { size: size, weight: "bold", style: {
-                        color: 'var(--gray-12)',
-                        lineHeight: '1.2'
+                        color: titleColor || 'var(--gray-12)',
+                        lineHeight: '1.2',
+                        letterSpacing: `${letterSpacing}`
                     } }, title)),
-            subtitle && (React__default.createElement(p$d, { size: subsize, color: "gray", style: { maxWidth: '80%', margin: align === 'center' ? '0 auto' : undefined } }, subtitle)),
+            subTitle && (React__default.createElement(p$d, { size: subsize, style: {
+                    color: subtitleColor || 'var(--gray-11)',
+                    maxWidth: '80%',
+                    margin: align === 'center' ? '0 auto' : undefined
+                } }, subTitle)),
             withSeparator && (React__default.createElement(o$2, { size: "4", style: {
                     width: '100%',
                     marginTop: '4px',