@emeraldemperaur/vector-sigma 1.4.32 → 1.4.33

package/lib/index.cjs

@@ -31436,9 +31436,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 = formik.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;
@@ -31450,7 +31451,7 @@ const Dropdown = (_a) => {
     const hasError = Boolean(fieldTouched && fieldError);
     const triggerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
     React.useEffect(() => {
         if (inputtype === 'dropdown-neumorphic' && triggerRef.current) {
@@ -31481,7 +31482,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)',
@@ -31494,7 +31494,6 @@ const Dropdown = (_a) => {
         borderRadius: '4px',
         boxShadow: 'none',
     };
-    // NEUMORPHIC
     const neumorphicTrigger = {
         backgroundColor: 'var(--neu-bg)',
         color: 'var(--neu-text)',
@@ -31518,50 +31517,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.createElement(React.Fragment, null,
-        React.createElement(Column, { span: width, newLine: newRow },
-            React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-                inputtype === 'dropdown-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
-          .neu-select-trigger[data-state='open'] {
-            box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
-                        inset -6px -6px 12px var(--neu-shadow-light) !important;
-          }
-          .neu-select-item:hover {
-            background-color: rgba(0,0,0,0.05) !important;
-            cursor: pointer;
-          }
-        ` } })),
-                React.createElement(C$1, { name: alias, disabled: readOnly, value: 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.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.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
-                        React.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
-                        React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
-                        inputOptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
-                            React.createElement(v, { id: String(inputoption.optionid) || '', value: String(inputoption.optionvalue) || `__empty_${inputoption.optionid}`, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
-                                React.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))
-                            :
-                                React.createElement(v, { id: String(inputoption.optionid) || '', value: String(inputoption.optionvalue) || `__empty_${inputoption.optionid}`, 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: inputId }, inputLabel),
-                    "\u00A0",
-                    isHinted ?
-                        React.createElement(React.Fragment, null,
-                            React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
-                                React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
-                                    React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
-                    hasError ?
-                        React.createElement(React.Fragment, null,
-                            React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null)))));
+    return (React.createElement(Column, { span: width, newLine: newRow },
+        React.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
+            inputtype === 'dropdown-neumorphic' && (React.createElement("style", { dangerouslySetInnerHTML: { __html: `
+            .neu-select-trigger[data-state='open'] {
+              box-shadow: inset 6px 6px 12px var(--neu-shadow-dark), 
+                          inset -6px -6px 12px var(--neu-shadow-light) !important;
+            }
+            .neu-select-item:hover {
+              background-color: rgba(0,0,0,0.05) !important;
+              cursor: pointer;
+            }
+          ` } })),
+            React.createElement(C$1, { name: alias, disabled: readOnly, value: 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.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.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
+                    React.createElement(v, { value: RESET_ID, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
+                    React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
+                    inputOptions.map((inputoption, idx) => (React.createElement(React.Fragment, { key: `${alias}-opt-${inputoption.optionid || idx}` }, inputoption.optionurl ?
+                        React.createElement(v, { id: String(inputoption.optionid) || `${alias}-item-${idx}`, value: String(inputoption.optionvalue) || `__empty_${idx}`, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
+                            React.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))
+                        :
+                            React.createElement(v, { id: String(inputoption.optionid) || `${alias}-item-${idx}`, value: String(inputoption.optionvalue) || `__empty_${idx}`, 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: inputId }, inputLabel),
+                "\u00A0",
+                isHinted ? (React.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
+                    React.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
+                        React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
+                hasError ? (React.createElement("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 }) => {
@@ -52595,6 +52589,7 @@ const OptionSelect = (_a) => {
     const fieldValue = formik.getIn(values, alias);
     const fieldTouched = formik.getIn(touched, alias);
     const fieldError = formik.getIn(errors, alias);
+    const RESET_ID = `__RESET__${alias}`;
     const hasError = Boolean(fieldTouched && fieldError);
     const errorId = `${alias}-error`;
     React.useEffect(() => {
@@ -52674,7 +52669,7 @@ const OptionSelect = (_a) => {
             }
           ` } })),
             React.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)
@@ -52686,7 +52681,7 @@ const OptionSelect = (_a) => {
                 } },
                 React.createElement(u$1, Object.assign({ id: `${alias}FormInput`, ref: triggerRef, variant: "ghost", placeholder: placeholder || "Select an option", className: `${inputtype === 'dropdown-neumorphic' ? 'neu-select-trigger' : ''} ${props.className || ''}`, style: Object.assign(Object.assign({}, activeTriggerStyle), style) }, props)),
                 React.createElement(g, { position: "popper", sideOffset: 5, style: activeContentStyle },
-                    React.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
+                    React.createElement(v, { value: RESET_ID, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
                     React.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
                     inputOptions.map((inputoption) => (React.createElement(React.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ? (React.createElement(v, { id: String(inputoption.optionid) || '', value: String(inputoption.optionvalue) || `__empty_${inputoption.optionid}`, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
                         React.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))) : (React.createElement(v, { id: String(inputoption.optionid) || '', value: String(inputoption.optionvalue) || `__empty_${inputoption.optionid}`, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
@@ -53638,158 +53633,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.createElement(AvatarInput, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, key: inputUID, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, errorText: errorText });
+                return React.createElement(AvatarInput, Object.assign({}, layoutProps));
             case buttonInputType.includes(normalizedType):
-                return React.createElement(ButtonInput, { alias: inputAlias, width: inputWidth, readOnly: readOnly, newRow: newRow, key: inputUID }, defaultValue);
+                return React.createElement(ButtonInput, Object.assign({}, layoutProps), defaultValue);
             case checkboxInputType.includes(normalizedType):
-                return React.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.createElement(CheckboxGroupInput, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case conditionalInputType.includes(normalizedType):
-                return React.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.createElement(ConditionalTrigger, Object.assign({}, layoutProps, { inputOptions: inputOptions, triggerValue: defaultValue, children: toggledInput }));
             case datePickerInputType.includes(normalizedType):
-                return React.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.createElement(DatePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dateRangePickerInputType.includes(normalizedType):
-                return React.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.createElement(DateRangePicker, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                return React.createElement(DateRangePicker, Object.assign({}, layoutProps));
             case dropdownInputType.includes(normalizedType):
-                return React.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.createElement(Dropdown, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case fileInputType.includes(normalizedType):
-                return React.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.createElement(File$1, Object.assign({}, layoutProps, { preview: true }));
             case fileMultipleInputType.includes(normalizedType):
-                return React.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.createElement(FileMultiple, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, preview: true }));
             case imageOutputType.includes(normalizedType):
-                return React.createElement(ImageOutput, { id: inputAlias, src: defaultValue, alt: inputPlaceholder, width: inputWidth, height: inputHeight });
+                return React.createElement(ImageOutput, { id: inputAlias, src: defaultValue, alt: inputPlaceholder, width: inputWidth, height: inputHeight, key: inputUID });
             case textInputType.includes(normalizedType):
-                return React.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.createElement(Input$2, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case passwordInputType.includes(normalizedType):
-                return React.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.createElement(PasswordInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case phoneInputType.includes(normalizedType):
-                return React.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.createElement(PhoneInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case creditCardInputType.includes(normalizedType):
-                return React.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.createElement(CreditCardInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case currencyInputType.includes(normalizedType):
-                return React.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.createElement(CurrencyInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case stockInputType.includes(normalizedType):
-                return React.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.createElement(StockInput, Object.assign({}, layoutProps, { placeholder: inputPlaceholder, defaultvalue: defaultValue }));
             case radioInputType.includes(normalizedType):
-                return React.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.createElement(RadioGroupInput, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case selectInputType.includes(normalizedType):
-                return React.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.createElement(OptionSelect, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case selectMultipleInputType.includes(normalizedType):
-                return React.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.createElement(MultipleSelect, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case sliderInputType.includes(normalizedType):
-                return React.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.createElement(SliderInput, Object.assign({}, layoutProps, { stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue) }));
             case rangeSliderInputType.includes(normalizedType):
-                return React.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.createElement(RangeSlider, Object.assign({}, layoutProps, { stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue) }));
             case toggleInputType.includes(normalizedType):
-                return React.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.createElement(Toggle, Object.assign({}, layoutProps, { icon: defaultValue }));
             default:
-                return React.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.createElement(Input$2, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
         }
     };
     const renderQueries = (queries) => {
         if (!queries)
             return null;
-        return queries.map((xFormelement) => (React.createElement(React.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.createElement(React.Fragment, null,
-                    "Dual Display",
-                    React.createElement(Row, null,
-                        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
-                            React.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.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.createElement("input", { id: `teletraan1DualToggle`, className: "neu-toggle-state", type: "checkbox", checked: dualToggled, readOnly: true }),
-                                React.createElement("div", { className: "neu-indicator" })),
-                            React.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.createElement(React.Fragment, null,
-                                "Accordion Display",
-                                React.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title },
-                                    React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))))
-                            :
-                                React.createElement(React.Fragment, null,
-                                    "Codice Display",
-                                    React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
-                                        React.createElement(SectionTitle, { title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
-                                        React.createElement(Row, null, renderQueries(formsection.queries))))))))));
+                    React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '20px' } },
+                        React.createElement("span", null, "Dual Display"),
+                        React.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.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.createElement("input", { className: "neu-toggle-state", type: "checkbox", checked: dualToggled, readOnly: true }),
+                            React.createElement("div", { className: "neu-indicator" })),
+                        React.createElement(Icon, { name: "layers", height: "20", width: "20", color: brandColor, style: { opacity: readOnlyMode ? 0.5 : 1, cursor: 'pointer' }, onClick: () => setDualToggled(!dualToggled) })),
+                    dualToggled ?
+                        React.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title },
+                            React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))
+                        :
+                            xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
+                                React.createElement(SectionTitle, { title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
+                                React.createElement(Row, null, renderQueries(formsection.queries)))))));
             case 'accordion':
-                return (React.createElement(React.Fragment, null,
-                    "Accordion Display",
-                    React.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title },
-                        React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries))))))));
+                return (React.createElement(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title },
+                    React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))));
             case 'codex':
-                return (React.createElement(React.Fragment, null,
-                    "Codex Display",
-                    React.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.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title },
-                            React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
-                            React.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.createElement(Codex, { brandColor: brandColor }, xFormModel.model.map((formsection, index, array) => (React.createElement(CodexItem, { key: formsection.sectionId, stepId: String(formsection.sectionId), title: formsection.title },
+                    React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)),
+                    React.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.createElement(React.Fragment, null,
-                    "Codice/Script Display",
-                    React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
-                        React.createElement(SectionTitle, { title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
-                        React.createElement(Row, null, renderQueries(formsection.queries))))))));
+                return (React.createElement(React.Fragment, { key: xFormModel.uuid }, xFormModel.model.map((formsection) => (React.createElement(React.Fragment, { key: formsection.sectionId || crypto.randomUUID() },
+                    React.createElement(SectionTitle, { title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
+                    React.createElement(Row, null, renderQueries(formsection.queries)))))));
         }
     };
-    return (React.createElement(Row, null, renderDisplayMode()));
+    return (React.createElement(React.Fragment, null, renderDisplayMode()));
 };
 
 // ==========================================

package/lib/index.esm.js

@@ -31415,9 +31415,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 +31430,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 +31461,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 +31473,6 @@ const Dropdown = (_a) => {
         borderRadius: '4px',
         boxShadow: 'none',
     };
-    // NEUMORPHIC
     const neumorphicTrigger = {
         backgroundColor: 'var(--neu-bg)',
         color: 'var(--neu-text)',
@@ -31497,50 +31496,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 }) => {
@@ -52574,6 +52568,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 +52648,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 +52660,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))))))),
@@ -53617,158 +53612,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: defaultValue, 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: defaultValue }));
             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', gap: '12px', marginBottom: '20px' } },
+                        React__default.createElement("span", null, "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 },
+                            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: String(formsection.icon) }) }),
+                                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 },
+                    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 },
+                    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, { 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()));
 };
 
 // ==========================================

package/lib/types/components/dropdown/dropdown.d.ts

@@ -84,11 +84,11 @@ export interface xDropDownProps {
     * * Required  inputOptions{} for the Dropdown input field.
     * * @example
     * inputOptions={
-             [
-               {optionid: 1, optionvalue: "Kaiju", optionurl:"https://github.com/emeraldemperaur", text: "Kaiju"},
-               {optionid: 2, optionvalue: "MekaGodzilla", optionurl:"https://github.com/emeraldemperaur", text: "MekaGodzilla"},
-               {optionid: 3, optionvalue: "Zaibatsu", optionurl:"https://github.com/emeraldemperaur", text: "Zaibatsu"},
-               ]}
+    * [
+    * {optionid: 1, optionvalue: "Kaiju", optionurl:"https://github.com/emeraldemperaur", text: "Kaiju"},
+    * {optionid: 2, optionvalue: "MekaGodzilla", optionurl:"https://github.com/emeraldemperaur", text: "MekaGodzilla"},
+    * {optionid: 3, optionvalue: "Zaibatsu", optionurl:"https://github.com/emeraldemperaur", text: "Zaibatsu"},
+    * ]}
    */
     inputOptions: InputOption[];
     /**
@@ -109,4 +109,4 @@ export interface xDropDownProps {
      */
     formikContext?: FormikContextType<any>;
 }
-export declare const Dropdown: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, className, formikContext, ...props }: xDropDownProps) => React.JSX.Element | null;
+export declare const Dropdown: ({ inputtype, alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, className, formikContext, onValueChange, ...props }: xDropDownProps) => React.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emeraldemperaur/vector-sigma",
-  "version": "1.4.32",
+  "version": "1.4.33",
   "description": "Dynamic Form Orchestrator: NPM Package",
   "repository": {
     "type": "git",