@emeraldemperaur/vector-sigma 1.4.32 → 1.4.34

package/lib/index.esm.js

@@ -15904,6 +15904,28 @@ var HamburgerMenuIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }));
 });
 
+var _excluded$2u = ["color"];
+var HeadingIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$7(_ref, _excluded$2u);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M8.75432 2.0502C8.50579 2.0502 8.30432 2.25167 8.30432 2.5002C8.30432 2.74873 8.50579 2.9502 8.75432 2.9502H9.94997V7.05004H5.04997V2.9502H6.25432C6.50285 2.9502 6.70432 2.74873 6.70432 2.5002C6.70432 2.25167 6.50285 2.0502 6.25432 2.0502H2.75432C2.50579 2.0502 2.30432 2.25167 2.30432 2.5002C2.30432 2.74873 2.50579 2.9502 2.75432 2.9502H3.94997V12.0502H2.75432C2.50579 12.0502 2.30432 12.2517 2.30432 12.5002C2.30432 12.7487 2.50579 12.9502 2.75432 12.9502H6.25432C6.50285 12.9502 6.70432 12.7487 6.70432 12.5002C6.70432 12.2517 6.50285 12.0502 6.25432 12.0502H5.04997V7.95004H9.94997V12.0502H8.75432C8.50579 12.0502 8.30432 12.2517 8.30432 12.5002C8.30432 12.7487 8.50579 12.9502 8.75432 12.9502H12.2543C12.5028 12.9502 12.7043 12.7487 12.7043 12.5002C12.7043 12.2517 12.5028 12.0502 12.2543 12.0502H11.05V2.9502H12.2543C12.5028 2.9502 12.7043 2.74873 12.7043 2.5002C12.7043 2.25167 12.5028 2.0502 12.2543 2.0502H8.75432Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 var _excluded$2v = ["color"];
 var HeartIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -17238,7 +17260,8 @@ const iconMap = {
     fontfamily: FontFamilyIcon,
     video: VideoIcon,
     shuffle: ShuffleIcon,
-    loop: LoopIcon
+    loop: LoopIcon,
+    heading: HeadingIcon,
 };
 const Icon = (_a) => {
     var { name } = _a, props = __rest$1(_a, ["name"]);
@@ -17619,7 +17642,7 @@ const CheckboxGroupInput = (_a) => {
     const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
     const handleCheckedChange = (checked, value) => {
         let newValues = [...currentValues];
@@ -17630,7 +17653,7 @@ const CheckboxGroupInput = (_a) => {
             newValues = newValues.filter((v) => String(v) !== String(value));
         }
         setFieldValue(alias, newValues);
-        setTimeout(() => setFieldTouched(alias, true), 0);
+        setTimeout(() => setFieldTouched(alias, true, false), 0);
     };
     useEffect(() => {
         if (inputtype === 'checkbox-neumorphic' && containerRef.current) {
@@ -17644,35 +17667,33 @@ const CheckboxGroupInput = (_a) => {
         }
     }, [inputtype]);
     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(p$5, { direction: "row", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
             inputtype === 'checkbox-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
           .neu-checkbox .rt-CheckboxButton { 
             background-color: var(--neu-bg);
             border: none;
             box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
             border-radius: 4px;
-            width: 20px;
-            height: 20px;
-            transition: all 0.2s ease;
+            width: 20px; height: 20px; transition: all 0.2s ease;
           }
-          /* Checked State: Pressed In */
           .neu-checkbox[data-state='checked'] .rt-CheckboxButton {
             box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
-            background-color: var(--neu-bg); /* Keep bg same, let icon show color */
-          }
-          .neu-checkbox .rt-CheckboxIndicator {
-            color: var(--neu-check-color);
+            background-color: var(--neu-bg); 
           }
+          .neu-checkbox .rt-CheckboxIndicator { 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) => {
-                const isChecked = currentValues.some(val => String(val) === String(inputoption.optionvalue));
-                return (React__default.createElement(p$d, { as: "label", key: String(inputoption.optionvalue) || crypto.randomUUID(), size: "2", style: {
+            React__default.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars, id: inputId }, inputOptions.map((inputoption, idx) => {
+                const optionVal = String(inputoption.optionvalue);
+                const isChecked = currentValues.some(val => String(val) === optionVal);
+                const itemKey = `${alias}-chk-${inputoption.optionid || idx}`;
+                const itemId = `${alias}FormInput${inputoption.optionid || idx}`;
+                return (React__default.createElement(p$d, { as: "label", key: itemKey, size: "2", style: {
                         display: 'flex',
                         alignItems: 'center',
                         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: String(inputoption.optionvalue), checked: isChecked, onCheckedChange: (checked) => handleCheckedChange(checked, String(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: itemId, disabled: readOnly, value: optionVal, checked: isChecked, onCheckedChange: (checked) => handleCheckedChange(checked, optionVal), 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'
                         } : {})) }),
@@ -17681,14 +17702,10 @@ const CheckboxGroupInput = (_a) => {
             React__default.createElement("div", null,
                 React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel),
                 "\u00A0",
-                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(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 || "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", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
 };
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -31333,7 +31350,8 @@ const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width
     const fieldValue = getIn(values, alias);
     const fieldTouched = getIn(touched, alias);
     const fieldError = getIn(errors, alias);
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
+    const labelId = `${alias}InputLabel`;
     const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
@@ -31403,11 +31421,11 @@ const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width
             React__default.createElement(DatePicker$1, { id: `${alias}DatePicker`, selected: (fieldValue && new Date(fieldValue)) || null, onChange: (val) => {
                     setFieldValue(alias, val);
                     setFieldTouched(alias, true, false);
-                }, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", customInput: React__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
+                }, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", "aria-labelledby": labelId, customInput: React__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
                     React__default.createElement(c, null,
                         React__default.createElement(Icon, { name: "calendar", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
             React__default.createElement("div", null,
-                inputLabel && React__default.createElement(p$d, { size: "2", weight: "bold", as: "label", htmlFor: inputId }, inputLabel),
+                inputLabel && React__default.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint", align: "start" },
                     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' } })))),
@@ -31415,9 +31433,10 @@ const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width
 };
 
 const Dropdown = (_a) => {
-    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, className, formikContext } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "className", "formikContext"]);
+    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, className, formikContext, onValueChange } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "className", "formikContext", "onValueChange"]);
     const defaultFormikContext = useFormikContext();
     const activeContext = formikContext || defaultFormikContext;
+    const RESET_ID = `__RESET__${alias}`;
     if (!activeContext) {
         console.error(`Dropdown '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
         return null;
@@ -31429,7 +31448,7 @@ const Dropdown = (_a) => {
     const hasError = Boolean(fieldTouched && fieldError);
     const triggerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
     useEffect(() => {
         if (inputtype === 'dropdown-neumorphic' && triggerRef.current) {
@@ -31460,7 +31479,6 @@ const Dropdown = (_a) => {
         borderRadius: '4px',
         boxShadow: '0 5px 15px rgba(0,0,0,0.2)',
     };
-    // OUTLINE
     const outlineTrigger = {
         backgroundColor: 'transparent',
         border: '2px solid var(--gray-7)',
@@ -31473,7 +31491,6 @@ const Dropdown = (_a) => {
         borderRadius: '4px',
         boxShadow: 'none',
     };
-    // NEUMORPHIC
     const neumorphicTrigger = {
         backgroundColor: 'var(--neu-bg)',
         color: 'var(--neu-text)',
@@ -31497,50 +31514,45 @@ const Dropdown = (_a) => {
     const activeContentStyle = inputtype === 'dropdown' ? materialContent :
         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(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-                inputtype === 'dropdown-neumorphic' && (React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
-          .neu-select-trigger[data-state='open'] {
-            box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
-                        inset -6px -6px 12px var(--neu-shadow-light) !important;
-          }
-          .neu-select-item:hover {
-            background-color: rgba(0,0,0,0.05) !important;
-            cursor: pointer;
-          }
-        ` } })),
-                React__default.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue || "", onValueChange: (val) => {
-                        const finalVal = val === "__RESET__" ? "" : val;
-                        setFieldValue(alias, finalVal);
-                        setTimeout(() => setFieldTouched(alias, true, false), 0);
-                        if (props.onValueChange)
-                            props.onValueChange(finalVal);
-                    }, onOpenChange: (isOpen) => {
-                        if (!isOpen) {
-                            setFieldTouched(alias, true, false);
-                        }
-                    } },
-                    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 ?
-                            React__default.createElement(v, { id: String(inputoption.optionid) || '', value: String(inputoption.optionvalue) || `__empty_${inputoption.optionid}`, 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: String(inputoption.optionvalue) || `__empty_${inputoption.optionid}`, 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: inputId }, inputLabel),
-                    "\u00A0",
-                    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(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 || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null)))));
+    return (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'] {
+              box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
+                          inset -6px -6px 12px var(--neu-shadow-light) !important;
+            }
+            .neu-select-item:hover {
+              background-color: rgba(0,0,0,0.05) !important;
+              cursor: pointer;
+            }
+          ` } })),
+            React__default.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue || "", onValueChange: (val) => {
+                    const finalVal = val === RESET_ID ? "" : val;
+                    setFieldValue(alias, finalVal);
+                    setTimeout(() => setFieldTouched(alias, true, false), 0);
+                    if (onValueChange)
+                        onValueChange(finalVal);
+                }, onOpenChange: (isOpen) => {
+                    if (!isOpen) {
+                        setFieldTouched(alias, true, false);
+                    }
+                } },
+                React__default.createElement(u$1, { id: inputId, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }),
+                React__default.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
+                    React__default.createElement(v, { value: RESET_ID, 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, idx) => (React__default.createElement(React__default.Fragment, { key: `${alias}-opt-${inputoption.optionid || idx}` }, inputoption.optionurl ?
+                        React__default.createElement(v, { id: String(inputoption.optionid) || `${alias}-item-${idx}`, value: String(inputoption.optionvalue) || `__empty_${idx}`, 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) || `${alias}-item-${idx}`, value: String(inputoption.optionvalue) || `__empty_${idx}`, 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: inputId }, inputLabel),
+                "\u00A0",
+                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' } })))) : null,
+                hasError ? (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null))));
 };
 
 const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outline', width = 12, newRow, placeholder = "Select date range", isHinted, hintText, hintUrl, errorText, readOnly, className, formikContext }) => {
@@ -31555,7 +31567,8 @@ const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outli
     const fieldTouched = getIn(touched, alias);
     const fieldError = getIn(errors, alias);
     const hasError = Boolean(fieldTouched && fieldError);
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
+    const labelId = `${alias}InputLabel`;
     const getDates = () => {
         const val = fieldValue;
         if (!val)
@@ -31667,11 +31680,11 @@ const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outli
                     if (start && end) {
                         setFieldTouched(alias, true, false);
                     }
-                }, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", customInput: React__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
+                }, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", "aria-labelledby": labelId, customInput: React__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
                     React__default.createElement(c, null,
                         React__default.createElement(Icon, { name: "calendar", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
             React__default.createElement("div", null,
-                inputLabel && React__default.createElement(p$d, { size: "2", weight: "bold", as: "label", htmlFor: inputId }, inputLabel),
+                inputLabel && React__default.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint", align: "start" },
                     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' } })))),
@@ -32012,8 +32025,8 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
     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: {
-            width: '100%',
-            height: '100%',
+            width: '333px',
+            height: '333px',
             objectFit: 'cover',
             display: 'block',
         } })) : (React__default.createElement(p$5, { align: "center", justify: "center", style: {
@@ -52500,64 +52513,53 @@ const RadioGroupInput = (_a) => {
     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 { 
             background-color: var(--neu-bg);
             border: none;
-            /* Circular Shadows */
             box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light);
             width: 20px;
             height: 20px;
             transition: all 0.2s ease;
           }
-          
-          /* Checked State: Inset Shadow (Pressed In) */
           .neu-radio .rt-RadioGroupItem[data-state='checked'] {
             box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
             background-color: var(--neu-bg); 
           }
-
-          /* The Inner Dot Indicator */
           .neu-radio .rt-RadioGroupIndicator {
              background-color: var(--neu-check-color);
              width: 50%;
              height: 50%;
              border-radius: 50%;
           }
-          
-          /* Hover Effect */
           .neu-radio .rt-RadioGroupItem:hover {
             transform: scale(1.05);
           }
           .neu-radio .rt-RadioGroupItem[data-state='checked']:hover {
-            transform: none; /* Don't scale if pressed in */
+            transform: none;
           }
         ` } })),
-            React__default.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, disabled: readOnly, value: fieldValue !== undefined && fieldValue !== null ? String(fieldValue) : undefined, onValueChange: (val) => {
+            React__default.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-labelledby": `${alias}InputLabel`, disabled: readOnly, value: fieldValue !== undefined && fieldValue !== null ? String(fieldValue) : "", onValueChange: (val) => {
                     setFieldValue(alias, val);
                     setTimeout(() => setFieldTouched(alias, true, false), 0);
                 } },
-                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(fieldValue) === String(inputoption.optionvalue);
-                    return (React__default.createElement(p$5, { asChild: true, key: String(inputoption.optionvalue), align: "center", gap: "2" },
+                React__default.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption, idx) => {
+                    const optionValue = String(inputoption.optionvalue);
+                    const isChecked = String(fieldValue) === optionValue;
+                    return (React__default.createElement(p$5, { asChild: true, key: `${alias}-radio-${idx}`, align: "center", gap: "2" },
                         React__default.createElement(p$d, { as: "label", size: "2", style: { cursor: 'pointer' } },
-                            React__default.createElement(y$1, { value: String(inputoption.optionvalue), className: inputtype === 'radio-neumorphic' ? 'neu-radio' : '', style: Object.assign({}, (inputtype === 'radio-outline' ? {
+                            React__default.createElement(y$1, { value: optionValue, className: inputtype === 'radio-neumorphic' ? 'neu-radio' : '', style: Object.assign({}, (inputtype === 'radio-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}FormInput` }, inputLabel),
+                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "div", size: "2", weight: "bold" }, inputLabel),
                 "\u00A0",
-                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(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 || (typeof fieldError === 'string' ? fieldError : `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", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const OptionSelect = (_a) => {
@@ -52574,6 +52576,7 @@ const OptionSelect = (_a) => {
     const fieldValue = getIn(values, alias);
     const fieldTouched = getIn(touched, alias);
     const fieldError = getIn(errors, alias);
+    const RESET_ID = `__RESET__${alias}`;
     const hasError = Boolean(fieldTouched && fieldError);
     const errorId = `${alias}-error`;
     useEffect(() => {
@@ -52653,7 +52656,7 @@ const OptionSelect = (_a) => {
             }
           ` } })),
             React__default.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue || "", onValueChange: (val) => {
-                    const finalVal = val === "__RESET__" ? "" : val;
+                    const finalVal = val === RESET_ID ? "" : val;
                     setFieldValue(alias, finalVal);
                     setTimeout(() => setFieldTouched(alias, true, false), 0);
                     if (props.onValueChange)
@@ -52665,7 +52668,7 @@ const OptionSelect = (_a) => {
                 } },
                 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(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(v, { value: RESET_ID, 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: String(inputoption.optionvalue) || `__empty_${inputoption.optionid}`, 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: String(inputoption.optionvalue) || `__empty_${inputoption.optionid}`, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
@@ -52812,6 +52815,7 @@ const SliderInput = (_a) => {
     const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
+    const labelId = `${alias}InputLabel`;
     const errorId = `${alias}-error`;
     useEffect(() => {
         if (inputtype === 'slider-neumorphic' && containerRef.current) {
@@ -52885,13 +52889,13 @@ 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) => {
+            React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-labelledby": labelId, min: minvalue, max: maxvalue, step: stepvalue, value: fieldValue, onValueChange: (val) => {
                     setFieldValue(alias, val[0]);
                 }, onValueCommit: () => {
                     setFieldTouched(alias, true, false);
                 }, 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}FormInput` }, inputLabel),
+                React__default.createElement(p$d, { id: labelId, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
                 "\u00A0",
                 isHinted ?
                     React__default.createElement(React__default.Fragment, null,
@@ -52915,18 +52919,13 @@ const RangeSlider = (_a) => {
     const fieldVal = getIn(values, alias);
     const fieldTouched = getIn(touched, alias);
     const fieldError = getIn(errors, alias);
-    // Range Formik Logic 
-    // Synopsis
-    // Radix slider component requires an array. 
-    // If field value is [20, 80] pass [20, 80].
-    // If field value is 50 we pass [50].
-    // If field value is undefined, default to [min] or [min, max].
     const isRange = Array.isArray(fieldVal);
     const sliderValue = isRange ? fieldVal : [fieldVal || minvalue];
     const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const errorId = `${alias}-error`;
+    const labelId = `${alias}InputLabel`;
     useEffect(() => {
         if (inputtype === 'range-neumorphic' && containerRef.current) {
             const parentBg = getNearestParentBackground(containerRef.current.parentElement);
@@ -52950,13 +52949,9 @@ const RangeSlider = (_a) => {
           box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light);
           border-radius: 99px;
         }
-        .neu-slider .rt-SliderRange {
-          background-color: var(--neu-accent);
-          border-radius: 99px;
-        }
+        .neu-slider .rt-SliderRange { background-color: var(--neu-accent); border-radius: 99px; }
         .neu-slider .rt-SliderThumb {
-          background-color: var(--neu-bg);
-          border: 2px solid var(--neu-bg);
+          background-color: var(--neu-bg); border: 2px solid var(--neu-bg);
           width: 24px; height: 24px;
           box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
         }
@@ -52964,31 +52959,22 @@ const RangeSlider = (_a) => {
         .neu-slider .rt-SliderThumb:active { transform: scale(0.95); cursor: grabbing; }
 
         /* Outline */
-        .outline-slider .rt-SliderTrack {
-           height: 4px; background-color: transparent; border: 1px solid var(--gray-8);
-        }
+        .outline-slider .rt-SliderTrack { height: 4px; background-color: transparent; border: 1px solid var(--gray-8); }
         .outline-slider .rt-SliderRange { background-color: var(--accent-9); }
-        .outline-slider .rt-SliderThumb {
-           background-color: white; border: 2px solid var(--accent-9); box-shadow: none;
-        }
+        .outline-slider .rt-SliderThumb { 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: sliderValue, onValueChange: (val) => {
-                    // LOGIC SYNOPSIS:
-                    // If Range, set value as array.
-                    // If Slider, set value as first value.
+            React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-labelledby": labelId, min: minvalue, max: maxvalue, step: stepvalue, minStepsBetweenThumbs: minStepsBetweenThumbs, value: sliderValue, onValueChange: (val) => {
                     setFieldValue(alias, isRange ? val : val[0]);
                 }, onValueCommit: () => setFieldTouched(alias, true, false), 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}FormInput` }, inputLabel),
+                React__default.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, inputLabel),
                 "\u00A0",
-                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(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 || (typeof fieldError === 'string' ? fieldError : `Required field`))) : null))));
+                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(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } }))))),
+                hasError && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`))))))));
 };
 
 const Toggle = (_a) => {
@@ -53159,7 +53145,7 @@ const ConditionalTrigger = (_a) => {
     const fieldValue = getIn(values, alias);
     const fieldTouched = getIn(touched, alias);
     const fieldError = getIn(errors, alias);
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
     // Trigger (Equality) Logic :: If current Field value === trigger value
     const isOpen = fieldValue === triggerValue;
@@ -53170,19 +53156,19 @@ const ConditionalTrigger = (_a) => {
     const isNeumorphic = inputtype.includes('neumorphic');
     const hasError = Boolean(fieldTouched && fieldError);
     const renderTrigger = () => {
-        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: fieldValue === 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: fieldValue, 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: String(inputoption.optionvalue) || crypto.randomUUID(), value: String(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: fieldValue === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
+        if (inputtype.includes('conditionalcheckbox') || inputtype.includes('conditional-checkbox')) {
+            return (React__default.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
+                React__default.createElement(c$2, { name: alias, disabled: readOnly, checked: fieldValue === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
+        }
+        else if (inputtype.includes('conditionalselect') || inputtype.includes('conditional-select')) {
+            return (React__default.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
+                React__default.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue !== undefined ? String(fieldValue) : undefined, onValueChange: handleChange },
+                    React__default.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' }, placeholder: placeholder || "Select" }),
+                    React__default.createElement(g, null, inputOptions.map((inputoption, idx) => (React__default.createElement(v, { key: `${alias}-opt-${inputoption.optionid || idx}`, value: String(inputoption.optionvalue) }, inputoption.text)))))));
+        }
+        else {
+            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: fieldValue === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
         }
     };
     const containerStyle = getDesignStyles(inputtype, isOpen);
@@ -53193,20 +53179,16 @@ const ConditionalTrigger = (_a) => {
                 React__default.createElement("div", { style: animationStyles.inner },
                     React__default.createElement(p$8, { style: {
                             paddingTop: '8px',
-                            borderTop: isOpen && !isNeumorphic ? '1px dashed var(--gray-6)' : 'none'
-                        } }, children))),
-            React__default.createElement("div", null,
+                            borderTop: isOpen && !isNeumorphic ? '1px dashed var(--gray-6)' : 'none',
+                        } },
+                        React__default.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '16px', width: '100%' } }, children)))),
+            React__default.createElement("div", { style: { marginTop: '8px' } },
                 React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId, style: { cursor: 'pointer' } }, inputLabel),
                 "\u00A0",
-                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(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 fieldError === 'string' ? React__default.createElement(React__default.Fragment, null, errorText || "Required field")
-                            : 'Invalid file selection')) : 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", { id: errorId, className: 'core-input-label-error' }, typeof fieldError === 'string' ? React__default.createElement(React__default.Fragment, null, errorText || "Required field") : 'Invalid selection'))))));
 };
 
 const Row = ({ children, className, gap = "4" }) => {
@@ -53335,7 +53317,7 @@ const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) =
                     React__default.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title)),
                 React__default.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
         React__default.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
-            React__default.createElement("div", { style: { padding: '0 16px 16px 16px' } },
+            React__default.createElement("div", { style: { padding: '24px 16px 24px 16px' } },
                 React__default.createElement(p$d, { size: "2", color: "gray", as: "div" }, children)))));
 };
 
@@ -53495,7 +53477,7 @@ const Codex = ({ design = 'outline', defaultStepId, brandColor, width = 12, newR
                                     step.description && (React__default.createElement(p$d, { size: "1", color: "gray", style: { display: 'block', marginTop: '4px' } }, step.description)))),
                             index < steps.length - 1 && (React__default.createElement("div", { className: `v-step-line ${isCompleted ? 'completed' : 'pending'}` }))));
                     }))),
-                React__default.createElement(p$8, { style: { position: 'relative' } }, children)))));
+                React__default.createElement(p$8, { style: { position: 'relative', marginTop: '33px', marginBottom: '33px' } }, children)))));
 };
 const CodexItem = ({ stepId, children, }) => {
     const { activeStepId } = useContext(CodexContext);
@@ -53504,7 +53486,7 @@ const CodexItem = ({ stepId, children, }) => {
     return (React__default.createElement("div", { className: "v-step-content-animation", style: { width: '100%' } }, children));
 };
 
-const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLabel = "Back", finishLabel = "Submit", prevIcon = "doublearrowleft", nextIcon = "doublearrowright", finishIcon = "paperplane", onSubmit = false, onNext, onPrev, onFinish }) => {
+const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLabel = "Back", finishLabel = "Submit", prevIcon = "doublearrowleft", nextIcon = "doublearrowright", finishIcon = "paperplane", onSubmit = true, onNext, onPrev, onFinish }) => {
     const { setActiveStepId, brandColor } = useStepper();
     const handlePrev = () => {
         if (onPrev)
@@ -53546,11 +53528,12 @@ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize =
         center: 'center',
         right: 'end'
     };
-    return (React__default.createElement(Column, { span: width, newLine: newRow },
+    return (React__default.createElement(Column, { span: width, newLine: newRow, style: { marginBottom: '23px', marginTop: '23px' } },
         React__default.createElement(p$5, { direction: "column", gap: "2", className: className, style: {
                 width: '100%',
                 boxSizing: 'border-box',
-                marginBottom: 'var(--space-2)',
+                marginTop: '23px',
+                marginBottom: '23px',
                 textAlign: align,
                 backgroundColor: backgroundColor || 'transparent',
                 padding: backgroundColor ? 'var(--space-3) var(--space-4)' : '0',
@@ -53617,158 +53600,114 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
         if (readOnlyMode)
             readOnly = true;
         const normalizedType = inputType.toLocaleLowerCase();
+        const layoutProps = {
+            alias: inputAlias,
+            width: inputWidth,
+            inputLabel: inputLabel,
+            key: inputUID,
+            newRow: newRow,
+            readOnly: readOnly,
+            isHinted: isHinted,
+            hintText: hintText,
+            hintUrl: hintUrl,
+            errorText: errorText
+        };
         switch (true) {
             case avatarInputType.includes(normalizedType):
-                return React__default.createElement(AvatarInput, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, key: inputUID, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, errorText: errorText });
+                return React__default.createElement(AvatarInput, Object.assign({}, layoutProps));
             case buttonInputType.includes(normalizedType):
-                return React__default.createElement(ButtonInput, { alias: inputAlias, width: inputWidth, readOnly: readOnly, newRow: newRow, key: inputUID }, defaultValue);
+                return React__default.createElement(ButtonInput, Object.assign({}, layoutProps), defaultValue);
             case checkboxInputType.includes(normalizedType):
-                return React__default.createElement(CheckboxGroupInput, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, inputOptions: inputOptions || [InputOptionsPlaceholder], newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(CheckboxGroupInput, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case conditionalInputType.includes(normalizedType):
-                return React__default.createElement(ConditionalTrigger, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, triggerValue: defaultValue, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, children: toggledInput });
+                return React__default.createElement(ConditionalTrigger, Object.assign({}, layoutProps, { inputOptions: inputOptions, triggerValue: triggerValue, children: toggledInput }));
             case datePickerInputType.includes(normalizedType):
-                return React__default.createElement(DatePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(DatePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dateRangePickerInputType.includes(normalizedType):
-                return React__default.createElement(DateRangePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
             case dateTimePickerInputType.includes(normalizedType):
-                return React__default.createElement(DateRangePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(DateRangePicker, Object.assign({}, layoutProps));
             case dropdownInputType.includes(normalizedType):
-                return React__default.createElement(Dropdown, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions || [InputOptionsPlaceholder], newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(Dropdown, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case fileInputType.includes(normalizedType):
-                return React__default.createElement(File$1, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, preview: true });
+                return React__default.createElement(File$1, Object.assign({}, layoutProps, { preview: true }));
             case fileMultipleInputType.includes(normalizedType):
-                return React__default.createElement(FileMultiple, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, preview: true });
+                return React__default.createElement(FileMultiple, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, preview: true }));
             case imageOutputType.includes(normalizedType):
-                return React__default.createElement(ImageOutput, { id: inputAlias, src: defaultValue, alt: inputPlaceholder, width: inputWidth, height: inputHeight });
+                return React__default.createElement(ImageOutput, { id: inputAlias, src: defaultValue, alt: inputPlaceholder, width: inputWidth, height: inputHeight, key: inputUID });
             case textInputType.includes(normalizedType):
-                return React__default.createElement(Input$2, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(Input$2, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case passwordInputType.includes(normalizedType):
-                return React__default.createElement(PasswordInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(PasswordInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case phoneInputType.includes(normalizedType):
-                return React__default.createElement(PhoneInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(PhoneInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case creditCardInputType.includes(normalizedType):
-                return React__default.createElement(CreditCardInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(CreditCardInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case currencyInputType.includes(normalizedType):
-                return React__default.createElement(CurrencyInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(CurrencyInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case stockInputType.includes(normalizedType):
-                return React__default.createElement(StockInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, defaultvalue: defaultValue, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(StockInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, defaultvalue: defaultValue }));
             case radioInputType.includes(normalizedType):
-                return React__default.createElement(RadioGroupInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions || [InputOptionsPlaceholder], newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(RadioGroupInput, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case selectInputType.includes(normalizedType):
-                return React__default.createElement(OptionSelect, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions || [InputOptionsPlaceholder], newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(OptionSelect, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case selectMultipleInputType.includes(normalizedType):
-                return React__default.createElement(MultipleSelect, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions || [InputOptionsPlaceholder], newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(MultipleSelect, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case sliderInputType.includes(normalizedType):
-                return React__default.createElement(SliderInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue), newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(SliderInput, Object.assign({}, layoutProps, { stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue) }));
             case rangeSliderInputType.includes(normalizedType):
-                return React__default.createElement(RangeSlider, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue), newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(RangeSlider, Object.assign({}, layoutProps, { stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue) }));
             case toggleInputType.includes(normalizedType):
-                return React__default.createElement(Toggle, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText, icon: defaultValue });
+                return React__default.createElement(Toggle, Object.assign({}, layoutProps, { icon: "layers" }));
             default:
-                return React__default.createElement(Input$2, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, placeholder: inputPlaceholder, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React__default.createElement(Input$2, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
         }
     };
     const renderQueries = (queries) => {
         if (!queries)
             return null;
-        return queries.map((xFormelement) => (React__default.createElement(React__default.Fragment, { key: xFormelement.queryId }, inputAlphaTrion(xFormelement.inputAlias, xFormelement.inputType, xFormelement.inputWidth, xFormelement.inputLabel, String(xFormelement.minValue), String(xFormelement.maxValue), xFormelement.defaultValue, xFormelement.inputOptions, xFormelement.stepValue, xFormelement.inputHeight, 
-        // Conditional ToggledInput (React Node) recursive handling
-        xFormelement.toggledInput ? inputAlphaTrion(xFormelement.toggledInput.inputAlias, xFormelement.toggledInput.inputType, xFormelement.toggledInput.inputWidth, xFormelement.toggledInput.inputLabel, String(xFormelement.toggledInput.minValue), String(xFormelement.toggledInput.maxValue), xFormelement.toggledInput.defaultValue, xFormelement.toggledInput.inputOptions, xFormelement.toggledInput.stepValue, xFormelement.toggledInput.inputHeight, null, null, xFormelement.toggledInput.newRow, xFormelement.toggledInput.inputPlaceholder, readOnlyMode, xFormelement.toggledInput.isHinted, xFormelement.toggledInput.hintText || "", xFormelement.toggledInput.hintUrl || "", xFormelement.toggledInput.errorText, String(xFormelement.toggledInput.queryId) || crypto.randomUUID()) : null, xFormelement.triggerValue, xFormelement.newRow, xFormelement.inputPlaceholder, readOnlyMode, xFormelement.isHinted, xFormelement.hintText || "", xFormelement.hintUrl || "", xFormelement.errorText, String(xFormelement.queryId) || crypto.randomUUID()))));
+        return queries.map((xFormelement) => {
+            const childInput = xFormelement.toggledInput ? inputAlphaTrion(xFormelement.toggledInput.inputAlias, xFormelement.toggledInput.inputType, xFormelement.toggledInput.inputWidth, xFormelement.toggledInput.inputLabel, String(xFormelement.toggledInput.minValue), String(xFormelement.toggledInput.maxValue), xFormelement.toggledInput.defaultValue, xFormelement.toggledInput.inputOptions, xFormelement.toggledInput.stepValue, xFormelement.toggledInput.inputHeight, null, null, xFormelement.toggledInput.newRow, xFormelement.toggledInput.inputPlaceholder, readOnlyMode, xFormelement.toggledInput.isHinted, xFormelement.toggledInput.hintText || "", xFormelement.toggledInput.hintUrl || "", xFormelement.toggledInput.errorText, String(xFormelement.toggledInput.queryId) || crypto.randomUUID()) : null;
+            return inputAlphaTrion(xFormelement.inputAlias, xFormelement.inputType, xFormelement.inputWidth, xFormelement.inputLabel, String(xFormelement.minValue), String(xFormelement.maxValue), xFormelement.defaultValue, xFormelement.inputOptions, xFormelement.stepValue, xFormelement.inputHeight, childInput, xFormelement.triggerValue, xFormelement.newRow, xFormelement.inputPlaceholder, readOnlyMode, xFormelement.isHinted, xFormelement.hintText || "", xFormelement.hintUrl || "", xFormelement.errorText, String(xFormelement.queryId) || crypto.randomUUID());
+        });
     };
     const renderDisplayMode = () => {
         switch (displayMode) {
             case 'dual':
                 return (React__default.createElement(React__default.Fragment, null,
-                    "Dual Display",
-                    React__default.createElement(Row, null,
-                        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: readOnlyMode ? 0.6 : 1, pointerEvents: readOnlyMode ? 'none' : 'auto' }), onClick: () => setDualToggled(!dualToggled) },
-                                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-toggle-state:checked ~ .neu-indicator {
-                                                    transform: translate3d(25%, 0, 0);
-                                                }
-                                            ` } }),
-                                React__default.createElement("input", { id: `teletraan1DualToggle`, className: "neu-toggle-state", type: "checkbox", checked: dualToggled, readOnly: true }),
-                                React__default.createElement("div", { className: "neu-indicator" })),
-                            React__default.createElement(Icon, { name: "layers", height: "20", width: "20", color: brandColor, style: {
-                                    transition: 'color 0.3s ease',
-                                    opacity: readOnlyMode ? 0.5 : 1,
-                                    cursor: 'pointer'
-                                }, onClick: () => setDualToggled(!dualToggled) })),
-                        dualToggled ?
-                            React__default.createElement(React__default.Fragment, null,
-                                "Accordion Display",
-                                React__default.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title },
-                                    React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))))
-                            :
-                                React__default.createElement(React__default.Fragment, null,
-                                    "Codice Display",
-                                    React__default.createElement(React__default.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
-                                        React__default.createElement(SectionTitle, { title: formsection.title, icon: React__default.createElement(Icon, { name: String(formsection.icon) }) }),
-                                        React__default.createElement(Row, null, renderQueries(formsection.queries))))))))));
+                    React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px', marginBottom: '20px' } },
+                        React__default.createElement("span", { style: { fontWeight: 600 } }, "Dual Display"),
+                        React__default.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readOnlyMode ? 0.6 : 1, pointerEvents: readOnlyMode ? 'none' : 'auto' }), onClick: () => setDualToggled(!dualToggled) },
+                            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-toggle-state:checked ~ .neu-indicator { transform: translate3d(25%, 0, 0); }
+                                ` } }),
+                            React__default.createElement("input", { className: "neu-toggle-state", type: "checkbox", checked: dualToggled, readOnly: true }),
+                            React__default.createElement("div", { className: "neu-indicator" })),
+                        React__default.createElement(Icon, { name: "layers", height: "20", width: "20", color: brandColor, style: { opacity: readOnlyMode ? 0.5 : 1, cursor: 'pointer' }, onClick: () => setDualToggled(!dualToggled) })),
+                    dualToggled ?
+                        React__default.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
+                            React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))
+                        :
+                            xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
+                                React__default.createElement(SectionTitle, { title: formsection.title, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
+                                React__default.createElement(Row, null, renderQueries(formsection.queries)))))));
             case 'accordion':
-                return (React__default.createElement(React__default.Fragment, null,
-                    "Accordion Display",
-                    React__default.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title },
-                        React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))));
+                return (React__default.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React__default.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
+                    React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))));
             case 'codex':
-                return (React__default.createElement(React__default.Fragment, null,
-                    "Codex Display",
-                    React__default.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => {
-                        const prevStepId = index > 0 ? String(array[index - 1].sectionId) : undefined;
-                        const nextStepId = index < array.length - 1 ? String(array[index + 1].sectionId) : undefined;
-                        return (React__default.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title },
-                            React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
-                            React__default.createElement(CodexControls, { prevStepId: prevStepId, nextStepId: nextStepId, onPrev: () => {
-                                    console.log(`Teletraan-1 Codex :: ${formsection.title} :: onPrev()`);
-                                }, onNext: () => {
-                                    console.log(`Teletraan-1 Codex :: ${formsection.title} :: onNext()`);
-                                }, onFinish: () => {
-                                    console.log(`Teletraan-1 Codex :: ${formsection.title} :: onFinish()`);
-                                } })));
-                    }))));
+                return (React__default.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React__default.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title, icon: React__default.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
+                    React__default.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
+                    React__default.createElement(CodexControls, { prevStepId: index > 0 ? String(array[index - 1].sectionId) : undefined, nextStepId: index < array.length - 1 ? String(array[index + 1].sectionId) : undefined, onPrev: onPrev, onNext: onNext, onFinish: onFinish }))))));
             case 'codice':
             default:
-                return (React__default.createElement(React__default.Fragment, null,
-                    "Codice/Script Display",
-                    React__default.createElement(React__default.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
-                        React__default.createElement(SectionTitle, { title: formsection.title, icon: React__default.createElement(Icon, { name: String(formsection.icon) }) }),
-                        React__default.createElement(Row, null, renderQueries(formsection.queries))))))));
+                return (React__default.createElement(React__default.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React__default.createElement(React__default.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
+                    React__default.createElement(SectionTitle, { backgroundColor: brandColor, title: formsection.title, icon: React__default.createElement(Icon, { name: String(formsection.icon) }) }),
+                    React__default.createElement(Row, null, renderQueries(formsection.queries)))))));
         }
     };
-    return (React__default.createElement(Row, null, renderDisplayMode()));
+    return (React__default.createElement(React__default.Fragment, null, renderDisplayMode()));
 };
 
 // ==========================================
@@ -54000,7 +53939,8 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
     const fieldValue = getIn(values, alias);
     const fieldTouched = getIn(touched, alias);
     const fieldError = getIn(errors, alias);
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
+    const labelId = `${alias}InputLabel`;
     const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
@@ -54109,11 +54049,11 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
             React__default.createElement(DatePicker$1, { id: `${alias}DatePicker`, selected: (fieldValue && new Date(fieldValue)) || null, onChange: (val) => {
                     setFieldValue(alias, val);
                     setFieldTouched(alias, true, false);
-                }, showTimeSelect: true, timeFormat: "HH:mm", timeIntervals: 15, dateFormat: "MMM d, yyyy h:mm aa", disabled: readOnly, placeholderText: placeholder, customInput: React__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
+                }, showTimeSelect: true, timeFormat: "HH:mm", timeIntervals: 15, dateFormat: "MMM d, yyyy h:mm aa", disabled: readOnly, placeholderText: placeholder, "aria-labelledby": labelId, customInput: React__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
                     React__default.createElement(c, null,
                         React__default.createElement(Icon, { name: "clock", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
             React__default.createElement("div", null,
-                inputLabel && React__default.createElement(p$d, { size: "2", weight: "bold", as: "label", htmlFor: inputId }, inputLabel),
+                inputLabel && React__default.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint", align: "start" },
                     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' } })))),