@emeraldemperaur/vector-sigma 1.4.33 → 1.4.34

package/README.md

@@ -95,7 +95,7 @@ const App = () => {
 </li>
 
 <li><strong>🧩Exported UI Components</strong></br>
-<p align="justify">Explicitly exported reusable form UI components with material, outline and neumorphic design variants from package entry point <code>src/index.ts</code> to enable developer-friendly use as lightweight component library.</p>
+<p align="justify">Explicitly exported reusable form UI components with material, outline and neumorphic design variants from package entry point <code>src/index.ts</code> to enable developer-friendly use as lightweight ARIA compliant component library.</p>
 <p><em>Container, Row, Column, Theme, Accordion, AccordionItem, Codex, CodexItem, CodexControls, AvatarInput, ButtonInput, CheckboxGroupInput, ConditionalTrigger, DatePicker, DateRangePicker, DateTimePicker, Dropdown, File, FileMultiple, FlagIcon, Icon, Image, Input, PasswordInput, PhoneInput, CreditCardInput, CurrencyInput, StockInput, RadioGroupInput, OptionSelect, MultipleSelect, RangeSlider, SliderInput, Toggle, SectionTitle, Teletraan1 (Render Matrix)</em></p>
 
 ```javascript

package/lib/index.cjs

@@ -15925,6 +15925,28 @@ var HamburgerMenuIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedR
   }));
 });
 
+var _excluded$2u = ["color"];
+var HeadingIcon = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$7(_ref, _excluded$2u);
+
+  return React.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
+  }), React.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__*/React.forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -17259,7 +17281,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"]);
@@ -17640,7 +17663,7 @@ const CheckboxGroupInput = (_a) => {
     const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
     const handleCheckedChange = (checked, value) => {
         let newValues = [...currentValues];
@@ -17651,7 +17674,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);
     };
     React.useEffect(() => {
         if (inputtype === 'checkbox-neumorphic' && containerRef.current) {
@@ -17665,35 +17688,33 @@ const CheckboxGroupInput = (_a) => {
         }
     }, [inputtype]);
     return (React.createElement(Column, { span: width, newLine: newRow },
-        React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
+        React.createElement(p$5, { direction: "row", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
             inputtype === 'checkbox-neumorphic' && (React.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.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.createElement(p$d, { as: "label", key: String(inputoption.optionvalue) || crypto.randomUUID(), size: "2", style: {
+            React.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.createElement(p$d, { as: "label", key: itemKey, size: "2", style: {
                         display: 'flex',
                         alignItems: 'center',
                         gap: '8px',
                         cursor: 'pointer'
                     } },
-                    React.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.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'
                         } : {})) }),
@@ -17702,14 +17723,10 @@ const CheckboxGroupInput = (_a) => {
             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 || "Required field")) : null))));
+                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' } })))),
+                hasError && (React.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}
@@ -31354,7 +31371,8 @@ const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width
     const fieldValue = formik.getIn(values, alias);
     const fieldTouched = formik.getIn(touched, alias);
     const fieldError = formik.getIn(errors, alias);
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
+    const labelId = `${alias}InputLabel`;
     const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
@@ -31424,11 +31442,11 @@ const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width
             React.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.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
+                }, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", "aria-labelledby": labelId, customInput: React.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
                     React.createElement(c, null,
                         React.createElement(Icon, { name: "calendar", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
             React.createElement("div", null,
-                inputLabel && React.createElement(p$d, { size: "2", weight: "bold", as: "label", htmlFor: inputId }, inputLabel),
+                inputLabel && React.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
                 isHinted && (React.createElement(e, { content: hintText || "No hint", align: "start" },
                     React.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
@@ -31570,7 +31588,8 @@ const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outli
     const fieldTouched = formik.getIn(touched, alias);
     const fieldError = formik.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)
@@ -31682,11 +31701,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.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
+                }, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", "aria-labelledby": labelId, customInput: React.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
                     React.createElement(c, null,
                         React.createElement(Icon, { name: "calendar", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
             React.createElement("div", null,
-                inputLabel && React.createElement(p$d, { size: "2", weight: "bold", as: "label", htmlFor: inputId }, inputLabel),
+                inputLabel && React.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
                 isHinted && (React.createElement(e, { content: hintText || "No hint", align: "start" },
                     React.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
@@ -32027,8 +32046,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.createElement(p$8, { className: className, style: Object.assign(Object.assign(Object.assign({}, containerStyles), { width, height: height || 'auto' }), style), onClick: onClick }, src ? (React.createElement("img", { id: String(id), src: src, alt: alt, style: {
-            width: '100%',
-            height: '100%',
+            width: '333px',
+            height: '333px',
             objectFit: 'cover',
             display: 'block',
         } })) : (React.createElement(p$5, { align: "center", justify: "center", style: {
@@ -52515,64 +52534,53 @@ const RadioGroupInput = (_a) => {
     return (React.createElement(Column, { span: width, newLine: newRow },
         React.createElement(p$5, { direction: "column", gap: "2", width: "100%", ref: containerRef, style: style, className: className },
             inputtype === 'radio-neumorphic' && (React.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.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.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.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.createElement(p$5, { asChild: true, key: String(inputoption.optionvalue), align: "center", gap: "2" },
+                React.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.createElement(p$5, { asChild: true, key: `${alias}-radio-${idx}`, align: "center", gap: "2" },
                         React.createElement(p$d, { as: "label", size: "2", style: { cursor: 'pointer' } },
-                            React.createElement(y$1, { value: String(inputoption.optionvalue), className: inputtype === 'radio-neumorphic' ? 'neu-radio' : '', style: Object.assign({}, (inputtype === 'radio-outline' ? {
+                            React.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.createElement("span", { style: { userSelect: 'none' } }, inputoption.text))));
                 }))),
             React.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
+                React.createElement(p$d, { id: `${alias}InputLabel`, as: "div", size: "2", weight: "bold" }, 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))));
+                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' } })))),
+                hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const OptionSelect = (_a) => {
@@ -52828,6 +52836,7 @@ const SliderInput = (_a) => {
     const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
+    const labelId = `${alias}InputLabel`;
     const errorId = `${alias}-error`;
     React.useEffect(() => {
         if (inputtype === 'slider-neumorphic' && containerRef.current) {
@@ -52901,13 +52910,13 @@ const SliderInput = (_a) => {
            box-shadow: none;
         }
       ` } }),
-            React.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, value: fieldValue, onValueChange: (val) => {
+            React.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.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
+                React.createElement(p$d, { id: labelId, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
                 "\u00A0",
                 isHinted ?
                     React.createElement(React.Fragment, null,
@@ -52931,18 +52940,13 @@ const RangeSlider = (_a) => {
     const fieldVal = formik.getIn(values, alias);
     const fieldTouched = formik.getIn(touched, alias);
     const fieldError = formik.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 = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
     const errorId = `${alias}-error`;
+    const labelId = `${alias}InputLabel`;
     React.useEffect(() => {
         if (inputtype === 'range-neumorphic' && containerRef.current) {
             const parentBg = getNearestParentBackground(containerRef.current.parentElement);
@@ -52966,13 +52970,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);
         }
@@ -52980,31 +52980,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.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.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.createElement("div", null,
-                React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
+                React.createElement(p$d, { id: labelId, as: "div", size: "2", weight: "bold", style: { display: 'inline' } }, 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))));
+                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' } }))))),
+                hasError && (React.createElement(React.Fragment, null,
+                    React.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`))))))));
 };
 
 const Toggle = (_a) => {
@@ -53175,7 +53166,7 @@ const ConditionalTrigger = (_a) => {
     const fieldValue = formik.getIn(values, alias);
     const fieldTouched = formik.getIn(touched, alias);
     const fieldError = formik.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;
@@ -53186,19 +53177,19 @@ const ConditionalTrigger = (_a) => {
     const isNeumorphic = inputtype.includes('neumorphic');
     const hasError = Boolean(fieldTouched && fieldError);
     const renderTrigger = () => {
-        switch (true) {
-            case inputtype.includes('conditionalcheckbox'):
-                return (React.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
-                    React.createElement(c$2, { name: alias, disabled: readOnly, checked: fieldValue === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
-            case inputtype.includes('conditionalselect'):
-                return (React.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
-                    React.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue, defaultValue: placeholder || "", onValueChange: handleChange },
-                        React.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' } }),
-                        React.createElement(g, null, inputOptions.map((inputoption) => (React.createElement(v, { key: String(inputoption.optionvalue) || crypto.randomUUID(), value: String(inputoption.optionvalue) }, inputoption.text)))))));
-            case inputtype.includes('conditionaltoggle'):
-            default:
-                return (React.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
-                    React.createElement(i$1, { id: inputId, name: alias, disabled: readOnly, checked: fieldValue === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
+        if (inputtype.includes('conditionalcheckbox') || inputtype.includes('conditional-checkbox')) {
+            return (React.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
+                React.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.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
+                React.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue !== undefined ? String(fieldValue) : undefined, onValueChange: handleChange },
+                    React.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' }, placeholder: placeholder || "Select" }),
+                    React.createElement(g, null, inputOptions.map((inputoption, idx) => (React.createElement(v, { key: `${alias}-opt-${inputoption.optionid || idx}`, value: String(inputoption.optionvalue) }, inputoption.text)))))));
+        }
+        else {
+            return (React.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
+                React.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);
@@ -53209,20 +53200,16 @@ const ConditionalTrigger = (_a) => {
                 React.createElement("div", { style: animationStyles.inner },
                     React.createElement(p$8, { style: {
                             paddingTop: '8px',
-                            borderTop: isOpen && !isNeumorphic ? '1px dashed var(--gray-6)' : 'none'
-                        } }, children))),
-            React.createElement("div", null,
+                            borderTop: isOpen && !isNeumorphic ? '1px dashed var(--gray-6)' : 'none',
+                        } },
+                        React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '16px', width: '100%' } }, children)))),
+            React.createElement("div", { style: { marginTop: '8px' } },
                 React.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId, style: { cursor: 'pointer' } }, 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' }, typeof fieldError === 'string' ? React.createElement(React.Fragment, null, errorText || "Required field")
-                            : 'Invalid file selection')) : null))));
+                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' } })))),
+                hasError && (React.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof fieldError === 'string' ? React.createElement(React.Fragment, null, errorText || "Required field") : 'Invalid selection'))))));
 };
 
 const Row = ({ children, className, gap = "4" }) => {
@@ -53351,7 +53338,7 @@ const AccordionItem = ({ sectionId, title, children, disabled = false, icon }) =
                     React.createElement(p$d, { size: "3", weight: "bold", style: { color: 'var(--accordion-title-color, var(--gray-12))' } }, title)),
                 React.createElement(Icon, { name: "chevrondown", height: "20", width: "20", className: "v-accordion-chevron" }))),
         React.createElement(Content2$3, { className: "v-accordion-content", style: { overflow: 'hidden' } },
-            React.createElement("div", { style: { padding: '0 16px 16px 16px' } },
+            React.createElement("div", { style: { padding: '24px 16px 24px 16px' } },
                 React.createElement(p$d, { size: "2", color: "gray", as: "div" }, children)))));
 };
 
@@ -53511,7 +53498,7 @@ const Codex = ({ design = 'outline', defaultStepId, brandColor, width = 12, newR
                                     step.description && (React.createElement(p$d, { size: "1", color: "gray", style: { display: 'block', marginTop: '4px' } }, step.description)))),
                             index < steps.length - 1 && (React.createElement("div", { className: `v-step-line ${isCompleted ? 'completed' : 'pending'}` }))));
                     }))),
-                React.createElement(p$8, { style: { position: 'relative' } }, children)))));
+                React.createElement(p$8, { style: { position: 'relative', marginTop: '33px', marginBottom: '33px' } }, children)))));
 };
 const CodexItem = ({ stepId, children, }) => {
     const { activeStepId } = React.useContext(CodexContext);
@@ -53520,7 +53507,7 @@ const CodexItem = ({ stepId, children, }) => {
     return (React.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)
@@ -53562,11 +53549,12 @@ const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize =
         center: 'center',
         right: 'end'
     };
-    return (React.createElement(Column, { span: width, newLine: newRow },
+    return (React.createElement(Column, { span: width, newLine: newRow, style: { marginBottom: '23px', marginTop: '23px' } },
         React.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',
@@ -53653,7 +53641,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             case checkboxInputType.includes(normalizedType):
                 return React.createElement(CheckboxGroupInput, Object.assign({}, layoutProps, { inputOptions: inputOptions || [InputOptionsPlaceholder] }));
             case conditionalInputType.includes(normalizedType):
-                return React.createElement(ConditionalTrigger, Object.assign({}, layoutProps, { inputOptions: inputOptions, triggerValue: defaultValue, children: toggledInput }));
+                return React.createElement(ConditionalTrigger, Object.assign({}, layoutProps, { inputOptions: inputOptions, triggerValue: triggerValue, children: toggledInput }));
             case datePickerInputType.includes(normalizedType):
                 return React.createElement(DatePicker, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
             case dateRangePickerInputType.includes(normalizedType):
@@ -53690,7 +53678,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             case rangeSliderInputType.includes(normalizedType):
                 return React.createElement(RangeSlider, Object.assign({}, layoutProps, { stepvalue: Number(stepValue), minvalue: Number(inputMinValue), maxvalue: Number(inputMaxValue) }));
             case toggleInputType.includes(normalizedType):
-                return React.createElement(Toggle, Object.assign({}, layoutProps, { icon: defaultValue }));
+                return React.createElement(Toggle, Object.assign({}, layoutProps, { icon: "layers" }));
             default:
                 return React.createElement(Input$2, Object.assign({}, layoutProps, { placeholder: inputPlaceholder }));
         }
@@ -53707,8 +53695,8 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
         switch (displayMode) {
             case 'dual':
                 return (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '20px' } },
-                        React.createElement("span", null, "Dual Display"),
+                    React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px', marginBottom: '20px' } },
+                        React.createElement("span", { style: { fontWeight: 600 } }, "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; }
@@ -53720,23 +53708,23 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
                             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(Accordion, { allowMultiple: true, brandcolor: brandColor, titleColor: '#ffffff' }, xFormModel.model.map((formsection) => (React.createElement(AccordionItem, { key: formsection.sectionId, sectionId: String(formsection.sectionId), title: formsection.title, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                             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(SectionTitle, { title: formsection.title, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) }),
                                 React.createElement(Row, null, renderQueries(formsection.queries)))))));
             case 'accordion':
-                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 },
+                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, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                     React.createElement(Row, { key: formsection.sectionId }, renderQueries(formsection.queries)))))));
             case 'codex':
-                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 },
+                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, icon: React.createElement(Icon, { name: formsection.icon || "fontfamily" }) },
                     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, { 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(SectionTitle, { backgroundColor: brandColor, title: formsection.title, icon: React.createElement(Icon, { name: String(formsection.icon) }) }),
                     React.createElement(Row, null, renderQueries(formsection.queries)))))));
         }
     };
@@ -53972,7 +53960,8 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
     const fieldValue = formik.getIn(values, alias);
     const fieldTouched = formik.getIn(touched, alias);
     const fieldError = formik.getIn(errors, alias);
-    const inputId = `${alias}FormInput` || crypto.randomUUID();
+    const inputId = `${alias}FormInput`;
+    const labelId = `${alias}InputLabel`;
     const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = React.useRef(null);
     const [neuVars, setNeuVars] = React.useState({});
@@ -54081,11 +54070,11 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
             React.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.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.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
                     React.createElement(c, null,
                         React.createElement(Icon, { name: "clock", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
             React.createElement("div", null,
-                inputLabel && React.createElement(p$d, { size: "2", weight: "bold", as: "label", htmlFor: inputId }, inputLabel),
+                inputLabel && React.createElement(p$d, { id: labelId, size: "2", weight: "bold", as: "div", style: { display: 'inline' } }, inputLabel),
                 isHinted && (React.createElement(e, { content: hintText || "No hint", align: "start" },
                     React.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
                         React.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),