@emeraldemperaur/vector-sigma 1.4.2 → 1.4.3

package/lib/index.cjs

@@ -12114,11 +12114,10 @@ const Column = (_a) => {
             return "span 12";
         return `span ${value}`;
     };
-    const baseSize = span ? `span ${span}` : (getSpan(xs) || "span 12");
-    return (React.createElement(p$8, Object.assign({}, props, { 
-        // NEW: If newLine is true, force start at column 1
-        gridColumnStart: newLine ? "1" : props.gridColumnStart, gridColumn: {
-            initial: baseSize,
+    const spanString = span ? `span ${span}` : (getSpan(xs) || "span 12");
+    const initialGridColumn = newLine ? `1 / ${spanString}` : spanString;
+    return (React.createElement(p$8, Object.assign({}, props, { gridColumn: {
+            initial: initialGridColumn,
             xs: getSpan(xs),
             sm: getSpan(sm),
             md: getSpan(md),
@@ -12168,7 +12167,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, placeholder = '', value, shape = 'circle', size = 120, style, accept = 'image/*' } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "value", "shape", "size", "style", "accept"]);
+    var { inputtype = 'avatar-outline', alias, readonly, width, inputlabel = undefined, 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"]);
     const [field, meta, helpers] = formik.useField(alias);
     const { setTouched } = formik.useFormikContext();
     const inputRef = React.useRef(null);
@@ -12235,9 +12234,10 @@ const AvatarInput = (_a) => {
                     React.createElement(Icon, { name: 'camera', color: "white", width: "16", height: "16" })))) : (React.createElement(p$5, { direction: "column", align: "center", justify: "center", height: "100%", width: "100%" },
                 React.createElement(Icon, { name: 'user', width: size * 0.4, height: size * 0.4, color: iconColor, style: { opacity: 0.5 } }),
                 React.createElement(p$d, { size: "1", color: "gray", style: { marginTop: 4, opacity: 0.8 } }, "Upload")))),
-            React.createElement("input", { ref: inputRef, id: inputId || alias, name: alias, readOnly: readOnly, type: "file", accept: accept, onChange: handleFileChange, style: { display: 'none' } }),
+            React.createElement("input", { ref: inputRef, id: inputId || alias, name: alias, readOnly: readonly, type: "file", accept: accept, onChange: handleFileChange, style: { display: 'none' } }),
             React.createElement("div", null,
-                props.inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", color: 'gray', highContrast: inputtype !== 'avatar-neumorphic', htmlFor: alias }, props.inputLabel)),
+                inputlabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", color: 'gray', highContrast: inputtype !== 'avatar-neumorphic', htmlFor: alias }, inputlabel)),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -12314,7 +12314,7 @@ const formatBytes = (bytes, decimals = 2) => {
 };
 
 const ButtonInput = (_a) => {
-    var { inputtype = 'button-outline', alias, readOnly, style, width, children } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "style", "width", "children"]);
+    var { inputtype = 'button-outline', type = 'button', inputlabel = undefined, alias, readOnly, style, width, children } = _a, props = __rest$1(_a, ["inputtype", "type", "inputlabel", "alias", "readOnly", "style", "width", "children"]);
     const buttonRef = React.useRef(null);
     const [neumorphicVars, setNeumorphicVars] = React.useState({});
     const [bgColor, setBgColor] = React.useState('#ffffff');
@@ -12398,9 +12398,10 @@ const ButtonInput = (_a) => {
             transform: translateY(-2px);
           }
         ` } })),
-            React.createElement(o$a, Object.assign({ name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, ref: buttonRef, onClick: handler }, props, getVariantProps()),
+            React.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.createElement("span", { style: { display: 'flex', alignItems: 'center' } }, props.icon)),
                 children),
+            React.createElement("br", null),
             React.createElement("div", null, props.isHinted ?
                 React.createElement(React.Fragment, null,
                     React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -12409,13 +12410,14 @@ const ButtonInput = (_a) => {
 };
 
 const CheckboxGroupInput = (_a) => {
-    var { inputtype = 'checkbox-outline', alias, readOnly, width, placeholder = '', style, value, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "style", "value", "inputoptions", "direction", "columns", "className"]);
+    var { inputtype = 'checkbox-outline', alias, readonly, width, placeholder = '', inputlabel = undefined, style, value, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "placeholder", "inputlabel", "style", "value", "inputoptions", "direction", "columns", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const currentValues = (Array.isArray(field.value) ? field.value : []);
     const hasError = Boolean(meta.touched && meta.error);
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
+    const errorId = `${alias}-error`;
     const handleCheckedChange = (checked, value) => {
         let newValues = [...currentValues];
         if (checked) {
@@ -12467,22 +12469,23 @@ const CheckboxGroupInput = (_a) => {
                         gap: '8px',
                         cursor: 'pointer'
                     } },
-                    React.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.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.createElement("span", { style: { userSelect: 'none' } }, inputoption.text)));
             })),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
 };
 
 const animationStyles = {
@@ -12513,7 +12516,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, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputoptions = [], toggledinputtype = "conditionaltoggle-outline", children, style, className } = _a, props = __rest$1(_a, ["alias", "readOnly", "width", "placeholder", "value", "inputtype", "triggerValue", "inputoptions", "toggledinputtype", "children", "style", "className"]);
+    var { alias, readOnly, width, placeholder = '', value, inputlabel = undefined, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputoptions = [], toggledinputtype = "conditionaltoggle-outline", children, style, className } = _a, props = __rest$1(_a, ["alias", "readOnly", "width", "placeholder", "value", "inputlabel", "inputtype", "triggerValue", "inputoptions", "toggledinputtype", "children", "style", "className"]);
     const [field, meta, helpers] = formik.useField(alias);
     const { setTouched } = formik.useFormikContext();
     const inputId = `${alias}FormInput` || crypto.randomUUID();
@@ -12530,18 +12533,15 @@ const ConditionalTrigger = (_a) => {
         switch (true) {
             case inputtype.includes('conditionalcheckbox'):
                 return (React.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
-                    React.createElement(c$2, { name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId }),
-                    React.createElement(p$d, { as: "label", htmlFor: alias, size: "2", weight: "bold", style: { cursor: 'pointer' } }, props.inputLabel)));
+                    React.createElement(c$2, { name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
             case inputtype.includes('conditionalselect'):
                 return (React.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
-                    React.createElement(p$d, { as: "label", size: "2", weight: "bold" }, props.inputLabel),
                     React.createElement(C$1, { name: alias, disabled: readOnly, value: field.value, defaultValue: placeholder || String(value) || "", onValueChange: handleChange },
                         React.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' } }),
                         React.createElement(g, null, inputoptions.map((inputoption) => (React.createElement(v, { key: inputoption.optionvalue || crypto.randomUUID(), value: inputoption.optionvalue }, inputoption.text)))))));
             case inputtype.includes('conditionaltoggle'):
             default:
                 return (React.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
-                    React.createElement(p$d, { as: "label", size: "2", weight: "bold" }, props.inputLabel),
                     React.createElement(i$1, { id: inputId, name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
         }
     };
@@ -12556,16 +12556,17 @@ const ConditionalTrigger = (_a) => {
                             borderTop: isOpen && !isNeumorphic ? '1px dashed var(--gray-6)' : 'none'
                         } }, children))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ? React.createElement(React.Fragment, null, props.errorText || "Required field")
-                            : 'Invalid file selection')) : null,
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias, style: { cursor: 'pointer' } }, inputlabel),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ? React.createElement(React.Fragment, null, props.errorText || "Required field")
+                            : 'Invalid file selection')) : null))));
 };
 
 /**
@@ -20844,7 +20845,7 @@ const ensureDate = (date) => {
 };
 
 const DatePicker = (_a) => {
-    var { inputtype = 'datepicker-outline', alias, readOnly, width, placeholder = 'Pick a date', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
+    var { inputtype = 'datepicker-outline', alias, readonly, width, inputlabel = undefined, placeholder = 'Pick a date', minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "minvalue", "maxvalue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -20948,20 +20949,21 @@ const DatePicker = (_a) => {
                                 }
                             } })))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
 };
 
 const DateRangePicker = (_a) => {
     var _b, _c;
-    var { inputtype = 'daterangepicker-outline', alias, readOnly, width, placeholder = '', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
+    var { inputtype = 'daterangepicker-outline', alias, readOnly, width, inputlabel = undefined, placeholder = '', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -21054,19 +21056,20 @@ const DateRangePicker = (_a) => {
                                 }
                             } })))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
 };
 
 const DateTimePicker = (_a) => {
-    var { inputtype = 'datetimepicker-outline', alias, readOnly, width, placeholder = '', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
+    var { inputtype = 'datetimepicker-outline', alias, readonly, width, inputlabel = undefined, placeholder = '', value, minvalue, maxvalue, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "minvalue", "maxvalue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
@@ -21185,24 +21188,26 @@ const DateTimePicker = (_a) => {
                             React.createElement("input", { type: "number", className: "time-input", min: "0", max: "59", value: selectedDate ? format$2(selectedDate, 'mm') : '00', onChange: (e) => handleTimeChange('minutes', e.target.value) }),
                             React.createElement(o$a, { size: "1", variant: "soft", onClick: () => setIsOpen(false) }, "Done"))))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
 };
 
 const Dropdown = (_a) => {
-    var { inputtype = 'dropdown-outline', alias, readOnly, width, placeholder, value, inputoptions, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "value", "inputoptions", "style"]);
+    var { inputtype = 'dropdown-outline', alias, readonly, width, inputlabel = undefined, placeholder, value, inputoptions, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "value", "inputoptions", "style"]);
     const triggerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
+    const errorId = `${alias}-error`;
     React.useEffect(() => {
         if (inputtype === 'dropdown-neumorphic' && triggerRef.current) {
             const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
@@ -21216,6 +21221,9 @@ const Dropdown = (_a) => {
             });
         }
     }, [inputtype]);
+    const openLink = (inputUrl) => {
+        window.open(inputUrl, '_blank', 'noopener,noreferrer');
+    };
     // --- STYLES ---
     // MATERIAL
     const materialTrigger = {
@@ -21280,7 +21288,7 @@ const Dropdown = (_a) => {
             cursor: pointer;
           }
         ` } })),
-                React.createElement(C$1, { name: alias, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue || value, value: field.value || value, onValueChange: (val) => {
+                React.createElement(C$1, { name: alias, disabled: readonly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue || value, value: field.value, onValueChange: (val) => {
                         setFieldValue(alias, val);
                         setTimeout(() => setFieldTouched(alias, true), 0);
                     }, onOpenChange: (isOpen) => {
@@ -21291,20 +21299,21 @@ const Dropdown = (_a) => {
                     React.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder, className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
                     React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle }, inputoptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
                         React.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
-                            React.createElement("a", { style: { textDecoration: 'none' }, href: inputoption.optionurl || "", target: "_blank", rel: "noopener noreferrer" }, inputoption.text))
+                            React.createElement("a", { onClick: () => openLink(inputoption.optionurl || "#"), style: { textDecoration: 'none' } }, inputoption.text))
                         :
                             React.createElement(React.Fragment, null,
                                 React.createElement(v, { id: String(inputoption.optionid) || '', key: inputoption.optionid, value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
                 React.createElement("div", null,
-                    React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
-                    hasError ?
-                        React.createElement(React.Fragment, null,
-                            React.createElement("p", { className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
+                    React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                    "\u00A0",
                     props.isHinted ?
                         React.createElement(React.Fragment, null,
                             React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                                 React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                    React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null)))));
+                                    React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                    hasError ?
+                        React.createElement(React.Fragment, null,
+                            React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null)))));
 };
 
 const getFileIcon$1 = (type, name) => {
@@ -21322,7 +21331,7 @@ const getFileIcon$1 = (type, name) => {
 };
 const File$1 = (_a) => {
     var _b;
-    var { inputtype = 'fileinput-outline', alias, readOnly, width, placeholder = '', value, preview = false, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "value", "preview", "className", "style"]);
+    var { inputtype = 'fileinput-outline', alias, readonly, width, inputlabel = undefined, placeholder = '', preview = false, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "preview", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const selectedFile = field.value;
@@ -21394,7 +21403,7 @@ const File$1 = (_a) => {
         inputtype === 'fileinput-outline' ? outlineTrigger : materialTrigger;
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
-            React.createElement("input", { ref: inputRef, id: inputId, name: alias, readOnly: readOnly, type: "file", accept: ACCEPTED_FORMATS, onChange: handleFileChange, style: { display: 'none' }, "aria-describedby": hasError ? errorId : undefined }),
+            React.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.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)';
@@ -21426,15 +21435,16 @@ const File$1 = (_a) => {
                 React.createElement(o$5, { size: "1", variant: "ghost", color: "red", onClick: handleClear, style: { borderRadius: '50%', padding: 4 } },
                     React.createElement(Icon, { name: 'close', width: "16", height: "16" }))))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { className: 'core-input-label-error' }, props.errorText || "Required field")) : null,
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || "Required field")) : null))));
 };
 
 const getFileIcon = (fileOrUrl) => {
@@ -21484,7 +21494,7 @@ const styles = {
     }
 };
 const FileMultiple = (_a) => {
-    var { inputtype = 'filemultiple-outline', alias, readOnly, width, placeholder = '', value, preview = true, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "value", "preview", "className", "style"]);
+    var { inputtype = 'filemultiple-outline', alias, readonly, width, inputlabel = undefined, placeholder = '', preview = true, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readonly", "width", "inputlabel", "placeholder", "preview", "className", "style"]);
     const [field, meta] = formik.useField(alias);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const inputRef = React.useRef(null);
@@ -21549,7 +21559,7 @@ const FileMultiple = (_a) => {
                             ? `${currentFiles.length} file${currentFiles.length !== 1 ? 's' : ''} selected`
                             : "Choose files..."),
                         React.createElement(p$d, { size: "1", color: "gray", style: { opacity: 0.8 } }, "PDF, Images, Office Docs, JSON, ZIP"))),
-                React.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.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.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
@@ -21592,17 +21602,18 @@ const FileMultiple = (_a) => {
                             React.createElement(Icon, { name: 'close' })))));
             }))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
-                hasError ?
-                    React.createElement(React.Fragment, null,
-                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ?
-                            React.createElement(React.Fragment, null, props.errorText || "Required field")
-                            : 'Invalid file selection')) : null,
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null))));
+                                React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ?
+                    React.createElement(React.Fragment, null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ?
+                            React.createElement(React.Fragment, null, props.errorText || "Required field")
+                            : 'Invalid file selection')) : null))));
 };
 
 var _excluded$6 = ["title"],
@@ -28896,7 +28907,7 @@ const getStyles = (design, layout) => {
     }
     return Object.assign(Object.assign({ borderRadius }, visualStyles), { position: 'relative', overflow: 'hidden', display: 'block' });
 };
-const Image = ({ 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.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width, height: height || 'auto' }), style), onClick: onClick }, src ? (React.createElement("img", { id: String(id), src: src, alt: alt, style: {
@@ -28921,40 +28932,44 @@ const Image = ({ id, src, alt = "Image", design = 'outline', layout = 'normal',
 };
 
 const Input$1 = (_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 = undefined, readonly = false, placeholder = '', className, size = "2", style, inputVariant = 'input-outline' } = _a, props = __rest$1(_a, ["alias", "inputtype", "width", "inputlabel", "readonly", "placeholder", "className", "size", "style", "inputVariant"]);
     const [inputField, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
+    const errorId = `${alias}-error`;
     return (React.createElement(Column, { span: width, newLine: props.newRow },
-        React.createElement(u, Object.assign({ size: size, type: inputtype, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, inputField, props, { name: alias })),
+        React.createElement(u, Object.assign({ size: size, type: inputtype, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, readOnly: readonly, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, inputField, props, { name: alias })),
         React.createElement("div", null,
-            React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-            hasError && (React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)),
+            React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+            "\u00A0",
             props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                 React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                    React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))))));
+                    React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+            hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.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 = undefined, width, readonly = false, placeholder = '', inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "readonly", "placeholder", "inputVariant", "size", "className"]);
     const [showPassword, setShowPassword] = React.useState(false);
     const toggleVisibility = () => setShowPassword(!showPassword);
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
+    const errorId = `${alias}-error`;
     return (React.createElement(Column, { span: width, newLine: props.newRow },
-        React.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.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.createElement(c, null,
                 React.createElement(Icon, { name: "lockclosed", height: "16", width: "16" })),
             React.createElement(c, null,
                 React.createElement(e, { content: showPassword ? "Hide password" : "Show password" },
                     React.createElement(o$5, { size: "1", variant: "ghost", color: "gray", onClick: toggleVisibility, type: "button", "aria-label": showPassword ? "Hide password" : "Show password" }, showPassword ? (React.createElement(Icon, { name: "eyeopen", height: "16", width: "16" })) : (React.createElement(Icon, { name: "eyeclosed", height: "16", width: "16" })))))),
         React.createElement("div", null,
-            React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-            hasError && (React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)),
+            React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+            "\u00A0",
             props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                 React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                    React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))))));
+                    React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+            hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)))));
 };
 
 // This file is a workaround for a bug in web browsers' "native"
@@ -36496,12 +36511,13 @@ 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 = undefined, width, placeholder = "Phone Number", readonly, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "placeholder", "readonly", "inputVariant", "size", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const [country, setCountry] = React.useState('US');
     const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
+    const errorId = `${alias}-error`;
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React.createElement(u, Object.assign({ size: size, variant: "surface", id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, props, { name: alias }),
@@ -36529,7 +36545,7 @@ const PhoneInput = (_a) => {
                                     getCountryCallingCode(c),
                                     ")"))))))),
                     React.createElement("div", { style: { width: '1px', height: '20px', backgroundColor: 'var(--gray-a4)', alignSelf: 'center' } })),
-                React.createElement(PhoneInputInput, { country: country, value: field.value, onChange: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, readOnly: readOnly, style: {
+                React.createElement(PhoneInputInput, { country: country, value: field.value, onChange: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, readOnly: readonly, style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -36541,11 +36557,12 @@ const PhoneInput = (_a) => {
                         fontSize: 'var(--font-size-2)'
                     } })),
             React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-                hasError && (React.createElement(p$d, { size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`)),
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
                     React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
-                        React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))))));
+                        React.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
 };
 
 /** Checks if value is string */
@@ -40336,7 +40353,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 = undefined, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = '', readOnly = false, inputVariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "readOnly", "inputVariant", "size", "className"]);
     let activeFormat = format;
     if (type && type.toLowerCase().startsWith("uuid") && type.length > 4) {
         activeFormat = parseUuidFormat(type) || format;
@@ -40346,6 +40363,7 @@ const UUIDInput = (_a) => {
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const [copied, setCopied] = React.useState(false);
+    const errorId = `${alias}-error`;
     const handleCopy = () => {
         navigator.clipboard.writeText(field.value || '');
         setCopied(true);
@@ -40355,7 +40373,7 @@ const UUIDInput = (_a) => {
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React.createElement(u, Object.assign({ size: size, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
-                React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, value: field.value || '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
+                React.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, readOnly: readOnly, mask: maskPattern, value: field.value, unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder, style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -40373,10 +40391,11 @@ const UUIDInput = (_a) => {
                         React.createElement(o$5, { size: "1", variant: "ghost", color: copied ? "green" : "gray", onClick: handleCopy, type: "button", disabled: !field.value }, copied ? React.createElement(CheckIcon, null) : React.createElement(CopyIcon, null))))),
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-                hasError && (React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)),
+                "\u00A0",
                 props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                     React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))))));
+                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`))))));
 };
 
 var FaCcVisa = {};
@@ -41808,13 +41827,14 @@ 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 = undefined, width, placeholder, readonly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputlabel", "width", "placeholder", "readonly", "inputVariant", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
-    const cardInfo = cardValidator.number(field.value || '');
+    const cardInfo = cardValidator.number(field.value);
     const cardType = (_b = cardInfo.card) === null || _b === void 0 ? void 0 : _b.type;
     const maskPattern = cardType === 'american-express' ? '0000 000000 00000' : '0000 0000 0000 0000';
+    const errorId = `${alias}-error`;
     const getCardIcon = () => {
         switch (cardType) {
             case 'visa': return React.createElement(FaCcVisaExports.FaCcVisa, { color: "#1A1F71", size: "22" });
@@ -41837,7 +41857,7 @@ const CreditCardInput = (_a) => {
                     paddingRight: '12px',
                     cursor: 'text'
                 } },
-                React.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.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',
@@ -41851,11 +41871,12 @@ const CreditCardInput = (_a) => {
                     } }),
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, getCardIcon())),
             React.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-                hasError && (React.createElement(p$d, { size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`)),
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
+                "\u00A0",
                 props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
                     React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
-                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))))));
+                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
 };
 
 const CURRENCIES = {
@@ -41927,7 +41948,7 @@ const CURRENCIES = {
 };
 
 const CurrencyInput = (_a) => {
-    var { alias, inputtype = "currency", inputLabel, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
+    var { alias, inputtype = "currency", inputLabel = undefined, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputtype", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [amountField, amountMeta] = formik.useField(alias);
     const currencyFieldName = inputtype === "currency" ? "USD" : inputtype;
@@ -41936,6 +41957,7 @@ const CurrencyInput = (_a) => {
     const activeCurrency = CURRENCIES[currencyField.value] || CURRENCIES.USD;
     const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
     const isOutline = inputVariant === 'input-outline';
+    const errorId = `${alias}-error`;
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React.createElement(p$5, { align: "center", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
@@ -41985,10 +42007,11 @@ const CurrencyInput = (_a) => {
                     }, inputMode: "decimal", autoComplete: "off" })),
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-                hasError && (React.createElement(p$d, { size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`)),
+                "\u00A0",
                 props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
                     React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
-                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))))));
+                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, props.errorText || `Required field`))))));
 };
 
 var FaChartLine = {};
@@ -42009,12 +42032,13 @@ 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 = undefined, width, defaultValue, placeholder, readOnly = false, inputVariant = 'input-outline', className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "defaultValue", "placeholder", "readOnly", "inputVariant", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [priceField, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const variantClass = inputVariant !== 'input-outline' ? `input-${inputVariant}` : '';
     const isOutline = inputVariant === 'input-outline';
+    const errorId = `${alias}-error`;
     return (React.createElement(Column, { span: width, newLine: props.newRow },
         React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React.createElement(p$5, { align: "center", justify: "between", className: `rt-TextFieldRoot rt-r-size-2 rt-variant-surface ${variantClass} ${className || ''}`, style: {
@@ -42057,19 +42081,21 @@ const StockInput = (_a) => {
                         }, inputMode: "decimal", autoComplete: "off" }))),
             React.createElement("div", null,
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
-                hasError && (React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)),
+                "\u00A0",
                 props.isHinted && (React.createElement(e, { content: props.hintText || "No hint available" },
                     React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
-                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))))));
+                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`))))));
 };
 
 const RadioGroupInput = (_a) => {
-    var { inputtype = 'radio-outline', alias, readOnly, width, placeholder = '', style, value, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "style", "value", "inputoptions", "direction", "columns", "className"]);
+    var { inputtype = 'radio-outline', alias, readOnly, width, inputLabel = undefined, placeholder = '', style, inputoptions, direction = 'column', columns, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "direction", "columns", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
+    const errorId = `${alias}-error`;
     React.useEffect(() => {
         if (inputtype === 'radio-neumorphic' && containerRef.current) {
             const parentBg = getNearestParentBackground(containerRef.current.parentElement);
@@ -42132,10 +42158,10 @@ const RadioGroupInput = (_a) => {
                             React.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
                 }))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -42144,12 +42170,13 @@ const RadioGroupInput = (_a) => {
 };
 
 const OptionSelect = (_a) => {
-    var { inputtype = 'select-outline', alias, readOnly, width, placeholder = '', style, value, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "style", "value", "inputoptions", "className"]);
+    var { inputtype = 'select-outline', alias, readOnly, width, inputLabel = undefined, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "className"]);
     const triggerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const hasError = Boolean(meta.touched && meta.error);
+    const errorId = `${alias}-error`;
     React.useEffect(() => {
         if (inputtype === 'select-neumorphic' && triggerRef.current) {
             const parentBg = getNearestParentBackground(triggerRef.current.parentElement);
@@ -42205,7 +42232,7 @@ const OptionSelect = (_a) => {
             cursor: pointer;
           }
         ` } })),
-            React.createElement(C$1, { name: alias, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue || value, value: field.value || value, onValueChange: (val) => {
+            React.createElement(C$1, { name: alias, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, defaultValue: props.defaultValue, value: field.value, onValueChange: (val) => {
                     setFieldValue(alias, val);
                     setTimeout(() => setFieldTouched(alias, true), 0);
                 }, onOpenChange: (isOpen) => {
@@ -42216,10 +42243,10 @@ const OptionSelect = (_a) => {
                 React.createElement(u$1, { id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder, className: `${inputtype === 'select-neumorphic' ? 'neu-select-trigger' : ''} ${className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
                 React.createElement(g, { position: "popper", sideOffset: 5 }, inputoptions.map((option) => (React.createElement(v, { id: String(option.optionid) || '', key: option.optionid, value: option.optionvalue, className: inputtype === 'select-neumorphic' ? 'neu-select-item' : '' }, option.text))))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -42229,7 +42256,7 @@ const OptionSelect = (_a) => {
 
 const MultipleSelect = (_a) => {
     var _b;
-    var { inputtype = 'multiselect-outline', alias, readOnly, width, placeholder = '', style, value, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "style", "value", "inputoptions", "className"]);
+    var { inputtype = 'multiselect-outline', alias, readOnly, width, inputLabel = undefined, placeholder = '', style, inputoptions, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "style", "inputoptions", "className"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const selectedValues = (Array.isArray(field.value) ? field.value : []);
@@ -42237,6 +42264,7 @@ const MultipleSelect = (_a) => {
     const triggerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const [isOpen, setIsOpen] = React.useState(false);
+    const errorId = `${alias}-error`;
     const handleToggle = (value) => {
         const newValues = selectedValues.includes(value)
             ? selectedValues.filter((v) => v !== value) // Remove Unselected Values
@@ -42313,10 +42341,10 @@ const MultipleSelect = (_a) => {
                                     React.createElement(p$d, { size: "2" }, inputoption.text)));
                             })))))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel),
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -42325,13 +42353,14 @@ const MultipleSelect = (_a) => {
 };
 
 const SliderInput = (_a) => {
-    var { inputtype = 'slider-outline', alias, readOnly, width, placeholder = '', value, minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "value", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
+    var { inputtype = 'slider-outline', alias, readOnly, width, placeholder = '', minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
     const hasError = Boolean(meta.touched && meta.error);
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
+    const errorId = `${alias}-error`;
     React.useEffect(() => {
         if (inputtype === 'slider-neumorphic' && containerRef.current) {
             const parentBg = getNearestParentBackground(containerRef.current.parentElement);
@@ -42414,7 +42443,7 @@ const SliderInput = (_a) => {
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -42423,7 +42452,7 @@ const SliderInput = (_a) => {
 };
 
 const RangeSlider = (_a) => {
-    var { inputtype = 'range-outline', alias, readOnly, width, placeholder = '', value, minvalue = 0, maxvalue = 100, stepvalue = 1, minStepsBetweenThumbs = 0, className, style } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "placeholder", "value", "minvalue", "maxvalue", "stepvalue", "minStepsBetweenThumbs", "className", "style"]);
+    var { inputtype = 'range-outline', alias, readonly, width, inputlabel = undefined, 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"]);
     const { setFieldValue, setFieldTouched } = formik.useFormikContext();
     const [field, meta] = formik.useField(alias);
     // Range Formik Logic 
@@ -42437,6 +42466,7 @@ const RangeSlider = (_a) => {
     const hasError = Boolean(meta.touched && meta.error);
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
+    const errorId = `${alias}-error`;
     React.useEffect(() => {
         if (inputtype === 'range-neumorphic' && containerRef.current) {
             const parentBg = getNearestParentBackground(containerRef.current.parentElement);
@@ -42482,17 +42512,17 @@ const RangeSlider = (_a) => {
            background-color: white; border: 2px solid var(--accent-9); box-shadow: none;
         }
       ` } }),
-            React.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.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.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputlabel),
                 hasError ?
                     React.createElement(React.Fragment, null,
-                        React.createElement("p", { className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
+                        React.createElement("p", { id: errorId, className: 'core-input-label-error' }, props.errorText || `Required field`)) : null,
                 props.isHinted ?
                     React.createElement(React.Fragment, null,
                         React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
@@ -42501,9 +42531,13 @@ const RangeSlider = (_a) => {
 };
 
 const Toggle = (_a) => {
-    var { inputtype = 'toggle-outline', alias, readOnly, width, pressed, defaultPressed, onPressedChange, style, children } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "pressed", "defaultPressed", "onPressedChange", "style", "children"]);
+    var { inputtype = 'toggle-outline', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl"]);
+    const { setFieldValue, setFieldTouched } = formik.useFormikContext();
+    const [field, meta] = formik.useField(alias);
+    const hasError = Boolean(meta.touched && meta.error);
     const buttonRef = React.useRef(null);
     const [neumorphicVars, setNeumorphicVars] = React.useState({});
+    const errorId = `${alias}-error`;
     React.useEffect(() => {
         if (inputtype === 'toggle-neumorphic' && buttonRef.current) {
             const parentBg = getNearestParentBackground(buttonRef.current.parentElement);
@@ -42514,12 +42548,11 @@ const Toggle = (_a) => {
                 '--neu-shadow-dark': shadowDark,
                 '--neu-shadow-light': shadowLight,
                 '--neu-text': 'var(--gray-12)',
-                '--neu-active-color': 'var(--accent-9)', // ON
+                '--neu-active-color': 'var(--accent-9)',
             });
         }
     }, [inputtype]);
     // --- STYLES ---
-    // Material :: Ghost when OFF, Solid Color when ON
     const materialStyle = {
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
@@ -42527,15 +42560,11 @@ const Toggle = (_a) => {
         borderRadius: '4px',
         transition: 'all 0.2s ease',
     };
-    // Outline :: Thin Grey when OFF, Thick Colored Border when ON
     const outlineStyle = {
         fontWeight: 600,
         background: 'transparent',
         transition: 'all 0.1s ease',
     };
-    // Neumorphic: 
-    // OFF = Outset Shadow (Floating)
-    // ON  = Inset Shadow (Pressed In) 
     const neumorphicStyle = {
         backgroundColor: 'var(--neu-bg)',
         color: 'var(--neu-text)',
@@ -42544,57 +42573,58 @@ const Toggle = (_a) => {
         fontWeight: 600,
         transition: 'all 0.2s ease-in-out',
     };
-    return (React.createElement(Column, { span: width, newLine: props.newRow },
-        React.createElement(Root$1, { pressed: pressed, defaultPressed: defaultPressed, onPressedChange: onPressedChange, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
-            React.createElement(o$a, Object.assign({ disabled: readOnly, ref: buttonRef }, props, { className: `design-toggle ${inputtype}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), (inputtype === 'toggle-neumorphic' ? Object.assign(Object.assign({}, neumorphicStyle), neumorphicVars) : {})) }),
+    return (React.createElement(Column, { span: width, newLine: newRow },
+        React.createElement(Root$1, { pressed: field.value, onPressedChange: (val) => {
+                if (!readOnly) {
+                    setFieldValue(alias, val);
+                    setFieldTouched(alias, true);
+                }
+            }, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
+            React.createElement(o$a, Object.assign({ disabled: readOnly, ref: buttonRef }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), (inputtype === 'toggle-neumorphic' ? Object.assign(Object.assign({}, neumorphicStyle), neumorphicVars) : {})), type: "button" }),
                 React.createElement("style", { dangerouslySetInnerHTML: { __html: `
-          /* --- MATERIAL --- */
-          .design-toggle.toggle-material[data-state='on'] {
-            background-color: var(--accent-9);
-            color: white;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-          }
-          .design-toggle.toggle-material[data-state='off'] {
-            background-color: var(--gray-3);
-            color: var(--gray-11);
-          }
+            /* --- MATERIAL --- */
+            .design-toggle.toggle-material[data-state='on'] {
+              background-color: var(--accent-9);
+              color: white;
+              box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            }
+            .design-toggle.toggle-material[data-state='off'] {
+              background-color: var(--gray-3);
+              color: var(--gray-11);
+            }
 
-          /* --- OUTLINE --- */
-          .design-toggle.toggle-outline[data-state='on'] {
-            border: 2px solid var(--accent-9);
-            color: var(--accent-9);
-            background-color: var(--accent-2);
-          }
-          .design-toggle.toggle-outline[data-state='off'] {
-            border: 1px solid var(--gray-7);
-            color: var(--gray-11);
-          }
+            /* --- OUTLINE --- */
+            .design-toggle.toggle-outline[data-state='on'] {
+              border: 2px solid var(--accent-9);
+              color: var(--accent-9);
+              background-color: var(--accent-2);
+            }
+            .design-toggle.toggle-outline[data-state='off'] {
+              border: 1px solid var(--gray-7);
+              color: var(--gray-11);
+            }
 
-          /* --- NEUMORPHIC --- */
-          /* OFF State: Floating */
-          .design-toggle.toggle-neumorphic[data-state='off'] {
-             box-shadow: 6px 6px 12px var(--neu-shadow-dark), 
-                         -6px -6px 12px var(--neu-shadow-light);
-          }
-          /* ON State: Pressed In (Inset) + Colored Text */
-          .design-toggle.toggle-neumorphic[data-state='on'] {
-             box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
-                         inset -6px -6px 12px var(--neu-shadow-light);
-             color: var(--neu-active-color); 
-          }
-          /* Hover Effect for Neumorphic */
-          .design-toggle.toggle-neumorphic:hover {
-            transform: translateY(-1px);
-          }
-        ` } }),
+            /* --- NEUMORPHIC --- */
+            .design-toggle.toggle-neumorphic[data-state='off'] {
+               box-shadow: 6px 6px 12px var(--neu-shadow-dark), 
+                           -6px -6px 12px var(--neu-shadow-light);
+            }
+            .design-toggle.toggle-neumorphic[data-state='on'] {
+               box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
+                           inset -6px -6px 12px var(--neu-shadow-light);
+               color: var(--neu-active-color); 
+            }
+            .design-toggle.toggle-neumorphic:hover {
+              transform: translateY(-1px);
+            }
+          ` } }),
                 children)),
         React.createElement("div", null,
-            React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, props.inputLabel),
-            props.isHinted ?
-                React.createElement(React.Fragment, null,
-                    React.createElement(e, { content: props.hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                        React.createElement("a", { href: props.hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                            React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null)));
+            inputLabel && (React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: alias }, inputLabel)),
+            isHinted && (React.createElement(e, { content: hintText || "No hint available" },
+                React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
+                    React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+            hasError && (React.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, props.errorText || `Required field`)))));
 };
 
 const Row = ({ children, className, gap = "4" }) => {
@@ -47141,7 +47171,7 @@ exports.File = File$1;
 exports.FileMultiple = FileMultiple;
 exports.FlagIcon = FlagIcon;
 exports.Icon = Icon;
-exports.Image = Image;
+exports.ImageOutput = ImageOutput;
 exports.Input = Input$1;
 exports.MultipleSelect = MultipleSelect;
 exports.OptionSelect = OptionSelect;