@emeraldemperaur/vector-sigma 1.4.28 → 1.4.30

package/lib/index.esm.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { useState, useLayoutEffect, forwardRef, createElement, useRef, useEffect, cloneElement, createRef, Component, useCallback, useMemo, createContext, useContext } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
-import { useField, useFormikContext } from 'formik';
+import { useFormikContext, getIn } from 'formik';
 
 const primeMatrix = (name) => {
     return `Test ${name}`;
@@ -11089,6 +11089,28 @@ var EyeOpenIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }));
 });
 
+var _excluded$27 = ["color"];
+var FaceIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$7(_ref, _excluded$27);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82708 7.49972C1.82708 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82708 10.6327 1.82708 7.49972ZM5.03747 9.21395C4.87949 8.98746 4.56782 8.93193 4.34133 9.08991C4.11484 9.24789 4.05931 9.55956 4.21729 9.78605C4.93926 10.8211 6.14033 11.5 7.50004 11.5C8.85974 11.5 10.0608 10.8211 10.7828 9.78605C10.9408 9.55956 10.8852 9.24789 10.6587 9.08991C10.4323 8.93193 10.1206 8.98746 9.9626 9.21395C9.41963 9.99238 8.51907 10.5 7.50004 10.5C6.481 10.5 5.58044 9.99238 5.03747 9.21395ZM5.37503 6.84998C5.85828 6.84998 6.25003 6.45815 6.25003 5.97498C6.25003 5.4918 5.85828 5.09998 5.37503 5.09998C4.89179 5.09998 4.50003 5.4918 4.50003 5.97498C4.50003 6.45815 4.89179 6.84998 5.37503 6.84998ZM10.5 5.97498C10.5 6.45815 10.1083 6.84998 9.62503 6.84998C9.14179 6.84998 8.75003 6.45815 8.75003 5.97498C8.75003 5.4918 9.14179 5.09998 9.62503 5.09998C10.1083 5.09998 10.5 5.4918 10.5 5.97498Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 var _excluded$29 = ["color"];
 var FileIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -11133,6 +11155,26 @@ var FileTextIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }));
 });
 
+var _excluded$2e = ["color"];
+var FontFamilyIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$7(_ref, _excluded$2e);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M2.5 4.5C2.5 3.09886 3.59886 2 5 2H12.499C12.7752 2 13 2.22386 13 2.5C13 2.77614 12.7761 3 12.5 3H8.69244L8.40509 3.85458C8.18869 4.49752 7.89401 5.37197 7.58091 6.29794C7.50259 6.52956 7.42308 6.76453 7.34332 7H8.5C8.77614 7 9 7.22386 9 7.5C9 7.77614 8.77614 8 8.5 8H7.00407C6.56724 9.28543 6.16435 10.4613 5.95799 11.0386C5.63627 11.9386 5.20712 12.4857 4.66741 12.7778C4.16335 13.0507 3.64154 13.0503 3.28378 13.05L3.25 13.05C2.94624 13.05 2.7 12.8037 2.7 12.5C2.7 12.1962 2.94624 11.95 3.25 11.95C3.64182 11.95 3.9035 11.9405 4.14374 11.8105C4.36443 11.691 4.65532 11.4148 4.92217 10.6683C5.10695 10.1514 5.45375 9.14134 5.8422 8H4.5C4.22386 8 4 7.77614 4 7.5C4 7.22386 4.22386 7 4.5 7H6.18187C6.30127 6.64785 6.42132 6.29323 6.53887 5.94559C6.85175 5.02025 7.14627 4.14631 7.36256 3.50368L7.53192 3H5C4.15114 3 3.5 3.65114 3.5 4.5C3.5 4.77614 3.27614 5 3 5C2.72386 5 2.5 4.77614 2.5 4.5Z",
+    fill: color
+  }));
+});
+
 var _excluded$2h = ["color"];
 var FontSizeIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -11610,6 +11652,28 @@ var LockOpen2Icon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }));
 });
 
+var _excluded$31 = ["color"];
+var LoopIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$7(_ref, _excluded$31);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M3.35355 1.85355C3.54882 1.65829 3.54882 1.34171 3.35355 1.14645C3.15829 0.951184 2.84171 0.951184 2.64645 1.14645L0.646447 3.14645C0.451184 3.34171 0.451184 3.65829 0.646447 3.85355L2.64645 5.85355C2.84171 6.04882 3.15829 6.04882 3.35355 5.85355C3.54882 5.65829 3.54882 5.34171 3.35355 5.14645L2.20711 4H9.5C11.433 4 13 5.567 13 7.5C13 7.77614 13.2239 8 13.5 8C13.7761 8 14 7.77614 14 7.5C14 5.01472 11.9853 3 9.5 3H2.20711L3.35355 1.85355ZM2 7.5C2 7.22386 1.77614 7 1.5 7C1.22386 7 1 7.22386 1 7.5C1 9.98528 3.01472 12 5.5 12H12.7929L11.6464 13.1464C11.4512 13.3417 11.4512 13.6583 11.6464 13.8536C11.8417 14.0488 12.1583 14.0488 12.3536 13.8536L14.3536 11.8536C14.5488 11.6583 14.5488 11.3417 14.3536 11.1464L12.3536 9.14645C12.1583 8.95118 11.8417 8.95118 11.6464 9.14645C11.4512 9.34171 11.4512 9.65829 11.6464 9.85355L12.7929 11H5.5C3.567 11 2 9.433 2 7.5Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 var _excluded$33 = ["color"];
 var MagnifyingGlassIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -11676,6 +11740,28 @@ var MinusCircledIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }));
 });
 
+var _excluded$39 = ["color"];
+var MixIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$7(_ref, _excluded$39);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M2.14921 3.99996C2.14921 2.97778 2.97784 2.14915 4.00002 2.14915C5.02219 2.14915 5.85083 2.97778 5.85083 3.99996C5.85083 5.02213 5.02219 5.85077 4.00002 5.85077C2.97784 5.85077 2.14921 5.02213 2.14921 3.99996ZM4.00002 1.24915C2.48079 1.24915 1.24921 2.48073 1.24921 3.99996C1.24921 5.51919 2.48079 6.75077 4.00002 6.75077C5.51925 6.75077 6.75083 5.51919 6.75083 3.99996C6.75083 2.48073 5.51925 1.24915 4.00002 1.24915ZM5.82034 11.0001L2.49998 12.8369V9.16331L5.82034 11.0001ZM2.63883 8.21159C2.17228 7.9535 1.59998 8.29093 1.59998 8.82411V13.1761C1.59998 13.7093 2.17228 14.0467 2.63883 13.7886L6.57235 11.6126C7.05389 11.3462 7.05389 10.654 6.57235 10.3876L2.63883 8.21159ZM8.30001 9.00003C8.30001 8.61343 8.61341 8.30003 9.00001 8.30003H13C13.3866 8.30003 13.7 8.61343 13.7 9.00003V13C13.7 13.3866 13.3866 13.7 13 13.7H9.00001C8.61341 13.7 8.30001 13.3866 8.30001 13V9.00003ZM9.20001 9.20003V12.8H12.8V9.20003H9.20001ZM13.4432 2.19311C13.6189 2.01737 13.6189 1.73245 13.4432 1.55671C13.2675 1.38098 12.9826 1.38098 12.8068 1.55671L11 3.36353L9.19321 1.55674C9.01748 1.381 8.73255 1.381 8.55682 1.55674C8.38108 1.73247 8.38108 2.0174 8.55682 2.19313L10.3636 3.99992L8.55682 5.80671C8.38108 5.98245 8.38108 6.26737 8.55682 6.44311C8.73255 6.61885 9.01748 6.61885 9.19321 6.44311L11 4.63632L12.8068 6.44314C12.9826 6.61887 13.2675 6.61887 13.4432 6.44314C13.6189 6.2674 13.6189 5.98247 13.4432 5.80674L11.6364 3.99992L13.4432 2.19311Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 var _excluded$3a = ["color"];
 var MixerHorizontalIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -12050,6 +12136,28 @@ var Share1Icon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }));
 });
 
+var _excluded$3X = ["color"];
+var ShuffleIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$7(_ref, _excluded$3X);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M12.3536 1.14645C12.1583 0.951184 11.8417 0.951184 11.6464 1.14645C11.4512 1.34171 11.4512 1.65829 11.6464 1.85355L12.7929 3H12C10.7037 3 9.71111 3.58423 8.87248 4.38931C8.20065 5.03427 7.59349 5.85684 6.99461 6.6682C6.86287 6.84668 6.73154 7.02462 6.6 7.2C5.10874 9.18835 3.49037 11 0.5 11C0.223858 11 0 11.2239 0 11.5C0 11.7761 0.223858 12 0.5 12C4.00963 12 5.89126 9.81165 7.4 7.8C7.54367 7.60845 7.6832 7.41962 7.81996 7.23454L7.82005 7.23443L7.82006 7.23441C8.41674 6.42695 8.96069 5.69085 9.56502 5.11069C10.2889 4.41577 11.0463 4 12 4H12.7929L11.6464 5.14645C11.4512 5.34171 11.4512 5.65829 11.6464 5.85355C11.8417 6.04882 12.1583 6.04882 12.3536 5.85355L14.3536 3.85355C14.5488 3.65829 14.5488 3.34171 14.3536 3.14645L12.3536 1.14645ZM0.5 3C3.35278 3 5.12992 4.44588 6.50548 6.06746L6.3762 6.24266C6.2483 6.4161 6.12293 6.58609 6 6.75C5.96397 6.79804 5.92798 6.84581 5.892 6.89331C4.57348 5.29306 3.02637 4 0.5 4C0.223858 4 0 3.77614 0 3.5C0 3.22386 0.223858 3 0.5 3ZM8.87248 10.6107C8.37284 10.131 7.90897 9.55314 7.45767 8.95468C7.64688 8.71693 7.82704 8.48061 8 8.25L8.08987 8.12987C8.58412 8.79402 9.05288 9.39766 9.56502 9.88931C10.2889 10.5842 11.0463 11 12 11H12.7929L11.6464 9.85355C11.4512 9.65829 11.4512 9.34171 11.6464 9.14645C11.8417 8.95118 12.1583 8.95118 12.3536 9.14645L14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536C11.4512 13.6583 11.4512 13.3417 11.6464 13.1464L12.7929 12H12C10.7037 12 9.71111 11.4158 8.87248 10.6107Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 var _excluded$3$ = ["color"];
 var SliderIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -12334,6 +12442,28 @@ var UploadIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }));
 });
 
+var _excluded$4S = ["color"];
+var VideoIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$7(_ref, _excluded$4S);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M4.76447 3.12199C5.63151 3.04859 6.56082 3 7.5 3C8.43918 3 9.36849 3.04859 10.2355 3.12199C11.2796 3.21037 11.9553 3.27008 12.472 3.39203C12.9425 3.50304 13.2048 3.64976 13.4306 3.88086C13.4553 3.90618 13.4902 3.94414 13.5133 3.97092C13.7126 4.20149 13.8435 4.4887 13.918 5.03283C13.9978 5.6156 14 6.37644 14 7.52493C14 8.66026 13.9978 9.41019 13.9181 9.98538C13.8439 10.5206 13.7137 10.8061 13.5125 11.0387C13.4896 11.0651 13.4541 11.1038 13.4296 11.1287C13.2009 11.3625 12.9406 11.5076 12.4818 11.6164C11.9752 11.7365 11.3143 11.7942 10.2878 11.8797C9.41948 11.9521 8.47566 12 7.5 12C6.52434 12 5.58052 11.9521 4.7122 11.8797C3.68572 11.7942 3.02477 11.7365 2.51816 11.6164C2.05936 11.5076 1.7991 11.3625 1.57037 11.1287C1.54593 11.1038 1.51035 11.0651 1.48748 11.0387C1.28628 10.8061 1.15612 10.5206 1.08193 9.98538C1.00221 9.41019 1 8.66026 1 7.52493C1 6.37644 1.00216 5.6156 1.082 5.03283C1.15654 4.4887 1.28744 4.20149 1.48666 3.97092C1.5098 3.94414 1.54468 3.90618 1.56942 3.88086C1.7952 3.64976 2.05752 3.50304 2.52796 3.39203C3.04473 3.27008 3.7204 3.21037 4.76447 3.12199ZM0 7.52493C0 5.28296 0 4.16198 0.729985 3.31713C0.766457 3.27491 0.815139 3.22194 0.854123 3.18204C1.63439 2.38339 2.64963 2.29744 4.68012 2.12555C5.56923 2.05028 6.52724 2 7.5 2C8.47276 2 9.43077 2.05028 10.3199 2.12555C12.3504 2.29744 13.3656 2.38339 14.1459 3.18204C14.1849 3.22194 14.2335 3.27491 14.27 3.31713C15 4.16198 15 5.28296 15 7.52493C15 9.74012 15 10.8477 14.2688 11.6929C14.2326 11.7348 14.1832 11.7885 14.1444 11.8281C13.3629 12.6269 12.3655 12.71 10.3709 12.8763C9.47971 12.9505 8.50782 13 7.5 13C6.49218 13 5.52028 12.9505 4.62915 12.8763C2.63446 12.71 1.63712 12.6269 0.855558 11.8281C0.816844 11.7885 0.767442 11.7348 0.731221 11.6929C0 10.8477 0 9.74012 0 7.52493ZM5.25 5.38264C5.25 5.20225 5.43522 5.08124 5.60041 5.15369L10.428 7.27105C10.6274 7.35853 10.6274 7.64147 10.428 7.72895L5.60041 9.84631C5.43522 9.91876 5.25 9.79775 5.25 9.61736V5.38264Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
 var _excluded$4Y = ["color"];
 var ZoomInIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
@@ -12487,6 +12617,7 @@ const iconMap = {
     zoomout: ZoomOutIcon,
     mixerhorizontal: MixerHorizontalIcon,
     mixervertical: MixerVerticalIcon,
+    mix: MixIcon,
     archive: ArchiveIcon,
     crumpledpaper: CrumpledPaperIcon,
     stopwatch: StopwatchIcon,
@@ -12498,7 +12629,12 @@ const iconMap = {
     mobile: MobileIcon,
     enterfullscreen: EnterFullScreenIcon,
     exitfullscreen: ExitFullScreenIcon,
-    copy: CopyIcon
+    copy: CopyIcon,
+    face: FaceIcon,
+    fontfamily: FontFamilyIcon,
+    video: VideoIcon,
+    shuffle: ShuffleIcon,
+    loop: LoopIcon
 };
 const Icon = (_a) => {
     var { name } = _a, props = __rest$1(_a, ["name"]);
@@ -12576,22 +12712,30 @@ const getStyles$1 = (inputtype, shape, hasError) => {
     return Object.assign(Object.assign(Object.assign({}, base), { borderRadius }), designStyles);
 };
 const AvatarInput = (_a) => {
-    var { inputtype = 'avatar-outline', alias, readOnly, width, inputLabel, shape = 'circle', size = 120, newRow, isHinted, hintText, hintUrl, errorText, style, className, accept = 'image/*' } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "shape", "size", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "className", "accept"]);
-    const [field, meta, helpers] = useField(alias);
-    const { setTouched } = useFormikContext();
+    var { inputtype = 'avatar-outline', alias, readOnly, width, inputLabel, shape = 'circle', size = 120, newRow, isHinted, hintText, hintUrl, errorText, style, className, accept = 'image/*', formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "shape", "size", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "className", "accept", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`AvatarInput '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
     const inputRef = useRef(null);
     const [previewUrl, setPreviewUrl] = useState(null);
     const inputId = `${alias}FormInput` || crypto.randomUUID();
     const errorId = `${alias}-error`;
-    const hasError = meta.touched && meta.error;
+    const hasError = Boolean(fieldTouched && fieldError);
     useEffect(() => {
         let objectUrl = null;
-        if (field.value instanceof File) {
-            objectUrl = URL.createObjectURL(field.value);
+        if (fieldValue instanceof File) {
+            objectUrl = URL.createObjectURL(fieldValue);
             setPreviewUrl(objectUrl);
         }
-        else if (typeof field.value === 'string' && field.value) {
-            setPreviewUrl(field.value);
+        else if (typeof fieldValue === 'string' && fieldValue) {
+            setPreviewUrl(fieldValue);
         }
         else {
             setPreviewUrl(null);
@@ -12601,20 +12745,20 @@ const AvatarInput = (_a) => {
                 URL.revokeObjectURL(objectUrl);
             }
         };
-    }, [field.value]);
+    }, [fieldValue]);
     const handleFileChange = (e) => {
         var _a;
         const file = (_a = e.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
         if (file) {
-            helpers.setValue(file);
+            setFieldValue(alias, file);
         }
-        setTouched({ [alias]: true });
+        setFieldTouched(alias, true, false);
         if (inputRef.current)
             inputRef.current.value = '';
     };
     const handleRemove = (e) => {
         e.stopPropagation();
-        helpers.setValue(null);
+        setFieldValue(alias, null);
     };
     const containerStyles = getStyles$1(inputtype, shape, !!hasError);
     const iconColor = inputtype === 'avatar-neumorphic' ? '#555' : 'var(--gray-10)';
@@ -12728,7 +12872,7 @@ const InputOptionsPlaceholder = {
     tag: "",
     score: 0,
     note: "",
-    optionurl: ""
+    optionUrl: ""
 };
 
 const ButtonInput = (_a) => {
@@ -12826,11 +12970,19 @@ const ButtonInput = (_a) => {
 };
 
 const CheckboxGroupInput = (_a) => {
-    var { inputtype = 'checkbox-outline', alias, readOnly, width, inputLabel, style, inputOptions, newRow, isHinted, hintText, hintUrl, errorText, direction = 'row', columns, className } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "inputOptions", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "direction", "columns", "className"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const currentValues = (Array.isArray(field.value) ? field.value : []);
-    const hasError = Boolean(meta.touched && meta.error);
+    var { inputtype = 'checkbox-outline', alias, readOnly, width, inputLabel, style, inputOptions, newRow, isHinted, hintText, hintUrl, errorText, direction = 'row', columns, className, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "inputOptions", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "direction", "columns", "className", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`CheckboxGroupInput '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const currentValues = (Array.isArray(fieldValue) ? fieldValue : []);
+    const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const inputId = `${alias}FormInput` || crypto.randomUUID();
@@ -12880,13 +13032,13 @@ const CheckboxGroupInput = (_a) => {
         ` } })),
             React__default.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption) => {
                 const isChecked = currentValues.some(val => String(val) === String(inputoption.optionvalue));
-                return (React__default.createElement(p$d, { as: "label", key: inputoption.optionvalue || crypto.randomUUID(), size: "2", style: {
+                return (React__default.createElement(p$d, { as: "label", key: String(inputoption.optionvalue) || crypto.randomUUID(), size: "2", style: {
                         display: 'flex',
                         alignItems: 'center',
                         gap: '8px',
                         cursor: 'pointer'
                     } },
-                    React__default.createElement(c$2, { name: alias, id: `${alias}FormInput${inputoption.optionid}`, "aria-describedby": `${alias}InputLabel${inputoption.optionid}`, disabled: readOnly, value: inputoption.optionvalue, checked: isChecked, onCheckedChange: (checked) => handleCheckedChange(checked, inputoption.optionvalue), variant: inputtype === 'checkbox-outline' ? 'soft' : 'surface', className: inputtype === 'checkbox-neumorphic' ? 'neu-checkbox' : '', style: Object.assign({}, (inputtype === 'checkbox-outline' ? {
+                    React__default.createElement(c$2, { name: alias, id: `${alias}FormInput${inputoption.optionid}`, "aria-describedby": `${alias}InputLabel${inputoption.optionid}`, disabled: readOnly, value: 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' ? {
                             border: isChecked ? '2px solid var(--accent-9)' : '2px solid var(--gray-8)',
                             backgroundColor: 'transparent'
                         } : {})) }),
@@ -12933,33 +13085,41 @@ const getDesignStyles = (inputtype, isOpen) => {
     return Object.assign(Object.assign({}, base), { backgroundColor: 'transparent', border: '1px solid var(--gray-6)', borderLeft: isOpen ? '4px solid var(--accent-9)' : '1px solid var(--gray-6)' });
 };
 const ConditionalTrigger = (_a) => {
-    var { alias, readOnly, width, placeholder = '', inputLabel, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputOptions = [], children, newRow, isHinted, hintText, hintUrl, errorText, style, className } = _a; __rest$1(_a, ["alias", "readOnly", "width", "placeholder", "inputLabel", "inputtype", "triggerValue", "inputOptions", "children", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "className"]);
-    const [field, meta, helpers] = useField(alias);
-    const { setTouched } = useFormikContext();
+    var { alias, readOnly, width, placeholder = '', inputLabel, inputtype = 'conditionaltoggle-outline', triggerValue = true, inputOptions = [], children, newRow, isHinted, hintText, hintUrl, errorText, style, className, formikContext } = _a; __rest$1(_a, ["alias", "readOnly", "width", "placeholder", "inputLabel", "inputtype", "triggerValue", "inputOptions", "children", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "className", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`ConditionalTrigger '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
     const inputId = `${alias}FormInput` || crypto.randomUUID();
     const errorId = `${alias}-error`;
     // Trigger (Equality) Logic :: If current Field value === trigger value
-    const isOpen = field.value === triggerValue;
+    const isOpen = fieldValue === triggerValue;
     const handleChange = (val) => {
-        helpers.setValue(val);
-        setTouched({ [alias]: true });
+        setFieldValue(alias, val);
+        setFieldTouched(alias, true, false);
     };
     const isNeumorphic = inputtype.includes('neumorphic');
-    const hasError = meta.touched && meta.error;
+    const hasError = Boolean(fieldTouched && fieldError);
     const renderTrigger = () => {
         switch (true) {
             case inputtype.includes('conditionalcheckbox'):
                 return (React__default.createElement(p$5, { align: "center", gap: "2", style: { cursor: 'pointer' } },
-                    React__default.createElement(c$2, { name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
+                    React__default.createElement(c$2, { name: alias, disabled: readOnly, checked: fieldValue === true, onCheckedChange: (checked) => handleChange(!!checked), id: inputId })));
             case inputtype.includes('conditionalselect'):
                 return (React__default.createElement(p$5, { direction: "column", gap: "1", style: { width: '100%' } },
-                    React__default.createElement(C$1, { name: alias, disabled: readOnly, value: field.value, defaultValue: placeholder || "", onValueChange: handleChange },
+                    React__default.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue, defaultValue: placeholder || "", onValueChange: handleChange },
                         React__default.createElement(u$1, { id: inputId, variant: isNeumorphic ? 'soft' : 'surface', style: { width: '100%' } }),
-                        React__default.createElement(g, null, inputOptions.map((inputoption) => (React__default.createElement(v, { key: inputoption.optionvalue || crypto.randomUUID(), value: inputoption.optionvalue }, inputoption.text)))))));
+                        React__default.createElement(g, null, inputOptions.map((inputoption) => (React__default.createElement(v, { key: String(inputoption.optionvalue) || crypto.randomUUID(), value: String(inputoption.optionvalue) }, inputoption.text)))))));
             case inputtype.includes('conditionaltoggle'):
             default:
                 return (React__default.createElement(p$5, { justify: "between", align: "center", style: { width: '100%' } },
-                    React__default.createElement(i$1, { id: inputId, name: alias, disabled: readOnly, checked: field.value === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
+                    React__default.createElement(i$1, { id: inputId, name: alias, disabled: readOnly, checked: fieldValue === true, onCheckedChange: (checked) => handleChange(!!checked), variant: isNeumorphic ? 'soft' : 'surface' })));
         }
     };
     const containerStyle = getDesignStyles(inputtype, isOpen);
@@ -12982,7 +13142,7 @@ const ConditionalTrigger = (_a) => {
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof meta.error === 'string' ? React__default.createElement(React__default.Fragment, null, errorText || "Required field")
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, typeof fieldError === 'string' ? React__default.createElement(React__default.Fragment, null, errorText || "Required field")
                             : 'Invalid file selection')) : null))));
 };
 
@@ -26617,11 +26777,19 @@ var PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
 var css_248z = "@charset \"UTF-8\";.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:\"\";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker__sr-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker-wrapper{border:0;display:inline-block;padding:0}.react-datepicker{background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;color:#000;display:inline-block;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;line-height:normal;position:relative}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.375em;border-bottom-right-radius:.375em}.react-datepicker-popper{line-height:0;z-index:1}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker__header{background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative;text-align:center}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select,.react-datepicker__header--middle,.react-datepicker__header--bottom){border-top-right-radius:.3rem}.react-datepicker__header--middle{border-radius:0;border-top:1px solid #aeaeae;margin-top:4px}.react-datepicker__header--bottom{border-bottom:none;border-radius:0 0 .3rem .3rem;border-top:1px solid #aeaeae}.react-datepicker__header-wrapper{position:relative}.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:2px}.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select{display:inline-block;margin:0 15px}.react-datepicker__month-select,.react-datepicker__month-year-select,.react-datepicker__year-select{background-color:transparent;border:1px solid #aeaeae;border-radius:.3rem;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;margin-top:5px;padding:2px 5px}.react-datepicker__month-select:focus-visible,.react-datepicker__month-year-select:focus-visible,.react-datepicker__year-select:focus-visible{outline:1px auto}.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month{color:#000;font-size:.944rem;font-weight:700;margin-top:0}h2.react-datepicker__current-month{margin:0;padding:0}.react-datepicker-time__header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__navigation{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;overflow:hidden;padding:0;position:absolute;text-align:center;text-indent:-999em;top:2px;width:32px;z-index:1}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{display:block;margin-left:auto;margin-right:auto;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{font-size:20px;position:relative;top:-1px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.5em;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;margin:2px;width:5em}.react-datepicker__month{margin:.5em;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;margin:2px;width:5em}.react-datepicker__input-time-container{clear:both;float:left;margin:5px 0 10px 15px;text-align:left;width:100%}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{display:inline-block;margin-left:5px}.react-datepicker__time-container{border-left:1px solid #aeaeae;float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.375em;display:inline;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.375em;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:.375em;margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:content-box;height:calc(195px + 1.0625em);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:transparent;cursor:default}.react-datepicker__week-number{color:#ccc;display:inline-block;line-height:2.125em;margin:.208em;text-align:center;width:2.125em}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__week-number--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__day-names{margin-bottom:-8px;text-align:center;white-space:nowrap}.react-datepicker__week{white-space:nowrap}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{color:#000;display:inline-block;line-height:2.125em;margin:.208em;text-align:center;width:2.125em}.react-datepicker__day--disabled,.react-datepicker__day-name--disabled,.react-datepicker__time-name--disabled{color:#ccc;cursor:default}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:not([aria-disabled=true]):hover,.react-datepicker__month-text:not([aria-disabled=true]):hover,.react-datepicker__quarter-text:not([aria-disabled=true]):hover,.react-datepicker__year-text:not([aria-disabled=true]):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{background-color:#3dcc4a;border-radius:.3rem;color:#fff}.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{background-color:#ff6803;border-radius:.3rem;color:#fff;position:relative}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{background-color:#333;border-radius:4px;bottom:100%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__day--holidays:not([aria-disabled=true]):hover,.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{opacity:1;visibility:visible}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__day--in-range:not([aria-disabled=true]):hover,.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__day--selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--selected:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#bad9f1;border-radius:.3rem;color:#000}.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover{background-color:#1d5d90;color:#fff}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{color:#ccc;cursor:default}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{background-color:#333;border-radius:4px;bottom:70%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__input-container{display:inline-block;position:relative;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{box-sizing:content-box;padding:.625em;position:absolute}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view{border:1px solid transparent;border-radius:.3rem;position:relative}.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover{cursor:pointer}.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{right:-16px;top:0;transform:rotate(135deg)}.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown{background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;left:25%;position:absolute;text-align:center;top:30px;width:50%;z-index:1}.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover{cursor:pointer}.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option{display:block;line-height:20px;margin-left:auto;margin-right:auto;width:100%}.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover{background-color:#ccc}.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected{left:15px;position:absolute}.react-datepicker__close-icon{background-color:transparent;border:0;cursor:pointer;display:table-cell;height:100%;outline:0;padding:0 6px 0 0;position:absolute;right:0;top:0;vertical-align:middle}.react-datepicker__close-icon:after{background-color:#216ba5;border-radius:50%;color:#fff;content:\"×\";cursor:pointer;display:table-cell;font-size:12px;height:16px;line-height:1;padding:2px;text-align:center;vertical-align:middle;width:16px}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{background-color:#ccc;cursor:default}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:rgba(0,0,0,.8);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__children-container{height:auto;margin:.5em;padding-left:.25em;padding-right:.25em;width:17.25em}.react-datepicker__aria-live{border:0;clip-path:circle(0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__calendar-icon{height:1em;vertical-align:-.125em;width:1em}.react-datepicker-popper-offset{margin-top:-.7em}";
 styleInject(css_248z);
 
-const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width = 12, newRow, placeholder = "Select date", isHinted, hintText, hintUrl, errorText, readOnly, className }) => {
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
+const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width = 12, newRow, placeholder = "Select date", isHinted, hintText, hintUrl, errorText, readOnly, className, formikContext }) => {
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`DatePicker '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
     const inputId = `${alias}FormInput` || crypto.randomUUID();
-    const hasError = Boolean(meta.touched && meta.error);
+    const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     useEffect(() => {
@@ -26687,9 +26855,9 @@ const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width
                         .react-datepicker__day--selected { box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light); color: var(--accent) !important; background: var(--neu-bg) !important; }
                     ` : ''}
                 `),
-            React__default.createElement(DatePicker$1, { id: `${alias}DatePicker`, selected: (field.value && new Date(field.value)) || null, onChange: (val) => {
+            React__default.createElement(DatePicker$1, { id: `${alias}DatePicker`, selected: (fieldValue && new Date(fieldValue)) || null, onChange: (val) => {
                     setFieldValue(alias, val);
-                    setFieldTouched(alias, true);
+                    setFieldTouched(alias, true, false);
                 }, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", customInput: React__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
                     React__default.createElement(c, null,
                         React__default.createElement(Icon, { name: "calendar", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
@@ -26698,16 +26866,24 @@ const DatePicker = ({ alias, inputLabel, inputtype = 'datepicker-outline', width
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint", align: "start" },
                     React__default.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || meta.error)))));
+                hasError && React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || fieldError)))));
 };
 
-const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outline', width = 12, newRow, placeholder = "Select date range", isHinted, hintText, hintUrl, errorText, readOnly, className }) => {
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
+const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outline', width = 12, newRow, placeholder = "Select date range", isHinted, hintText, hintUrl, errorText, readOnly, className, formikContext }) => {
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`DateRangePicker '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const hasError = Boolean(fieldTouched && fieldError);
     const inputId = `${alias}FormInput` || crypto.randomUUID();
     const getDates = () => {
-        const val = field.value;
+        const val = fieldValue;
         if (!val)
             return [null, null];
         if (typeof val === 'object' && 'from' in val) {
@@ -26815,7 +26991,7 @@ const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outli
                     const [start, end] = dates;
                     setFieldValue(alias, { from: start, to: end });
                     if (start && end) {
-                        setFieldTouched(alias, true);
+                        setFieldTouched(alias, true, false);
                     }
                 }, disabled: readOnly, placeholderText: placeholder, dateFormat: "MMM d, yyyy", customInput: React__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
                     React__default.createElement(c, null,
@@ -26825,14 +27001,22 @@ const DateRangePicker = ({ alias, inputLabel, inputtype = 'daterangepicker-outli
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint", align: "start" },
                     React__default.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || (typeof meta.error === 'string' ? meta.error : "Required field")))))));
+                hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
 };
 
-const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline', width = 12, newRow, placeholder = "Select date & time", isHinted, hintText, hintUrl, errorText, readOnly, className }) => {
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
+const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline', width = 12, newRow, placeholder = "Select date & time", isHinted, hintText, hintUrl, errorText, readOnly, className, formikContext }) => {
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`DateTimePicker '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
     const inputId = `${alias}FormInput` || crypto.randomUUID();
-    const hasError = Boolean(meta.touched && meta.error);
+    const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     useEffect(() => {
@@ -26937,9 +27121,9 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
                         .react-datepicker__day--selected, .react-datepicker__time-list-item--selected { box-shadow: inset 2px 2px 5px var(--neu-shadow-dark), inset -2px -2px 5px var(--neu-shadow-light); color: var(--accent) !important; background: var(--neu-bg) !important; }
                     ` : ''}
                 `),
-            React__default.createElement(DatePicker$1, { id: `${alias}DatePicker`, selected: (field.value && new Date(field.value)) || null, onChange: (val) => {
+            React__default.createElement(DatePicker$1, { id: `${alias}DatePicker`, selected: (fieldValue && new Date(fieldValue)) || null, onChange: (val) => {
                     setFieldValue(alias, val);
-                    setFieldTouched(alias, true);
+                    setFieldTouched(alias, true, false);
                 }, showTimeSelect: true, timeFormat: "HH:mm", timeIntervals: 15, dateFormat: "MMM d, yyyy h:mm aa", disabled: readOnly, placeholderText: placeholder, customInput: React__default.createElement(u, { id: inputId, variant: "surface", style: getInputStyles() },
                     React__default.createElement(c, null,
                         React__default.createElement(Icon, { name: "clock", height: "16", width: "16", style: { color: 'var(--gray-10)' } }))) }),
@@ -26948,16 +27132,24 @@ const DateTimePicker = ({ alias, inputLabel, inputtype = 'datetimepicker-outline
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint", align: "start" },
                     React__default.createElement("a", { href: hintUrl || "#", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || meta.error))))));
+                hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block' } }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
 };
 
 const Dropdown = (_a) => {
-    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, className } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "className"]);
+    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"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`Dropdown '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const hasError = Boolean(fieldTouched && fieldError);
     const triggerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
     const inputId = `${alias}FormInput` || crypto.randomUUID();
     const errorId = `${alias}-error`;
     useEffect(() => {
@@ -27039,15 +27231,15 @@ const Dropdown = (_a) => {
             cursor: pointer;
           }
         ` } })),
-                React__default.createElement(C$1, { name: alias, disabled: readOnly, value: field.value || "", onValueChange: (val) => {
+                React__default.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue || "", onValueChange: (val) => {
                         const finalVal = val === "__RESET__" ? "" : val;
                         setFieldValue(alias, finalVal);
-                        setTimeout(() => setFieldTouched(alias, true), 0);
+                        setTimeout(() => setFieldTouched(alias, true, false), 0);
                         if (props.onValueChange)
                             props.onValueChange(finalVal);
                     }, onOpenChange: (isOpen) => {
                         if (!isOpen) {
-                            setFieldTouched(alias, true);
+                            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)),
@@ -27055,10 +27247,10 @@ const Dropdown = (_a) => {
                         React__default.createElement(v, { value: "__RESET__", className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '', style: { color: 'var(--gray-10)', fontStyle: 'italic' } }, placeholder || "Select an option"),
                         React__default.createElement(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
                         inputOptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ?
-                            React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
+                            React__default.createElement(v, { id: String(inputoption.optionid) || '', value: String(inputoption.optionvalue), className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
                                 React__default.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))
                             :
-                                React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text)))))),
+                                React__default.createElement(v, { id: String(inputoption.optionid) || '', value: String(inputoption.optionvalue), className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text)))))),
                 React__default.createElement("div", null,
                     React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: inputId }, inputLabel),
                     "\u00A0",
@@ -27069,7 +27261,7 @@ const Dropdown = (_a) => {
                                     React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                     hasError ?
                         React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null)))));
+                            React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null)))));
 };
 
 const getFileIcon$1 = (type, name) => {
@@ -27087,11 +27279,19 @@ const getFileIcon$1 = (type, name) => {
 };
 const File$1 = (_a) => {
     var _b;
-    var { inputtype = 'fileinput-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, preview = false, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "preview", "className", "style"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const selectedFile = field.value;
-    const hasError = Boolean(meta.touched && meta.error);
+    var { inputtype = 'fileinput-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, preview = false, className, style, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "preview", "className", "style", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`File '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const selectedFile = fieldValue;
+    const hasError = Boolean(fieldTouched && fieldError);
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const [previewUrl, setPreviewUrl] = useState(null);
@@ -27103,7 +27303,7 @@ const File$1 = (_a) => {
         const file = (_a = event.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
         if (file) {
             setFieldValue(alias, file);
-            setFieldTouched(alias, true);
+            setFieldTouched(alias, true, false);
         }
     };
     const handleClear = (e) => {
@@ -27167,14 +27367,14 @@ const File$1 = (_a) => {
                     if (inputtype === 'fileinput-outline')
                         e.currentTarget.style.borderColor = hasError ? 'var(--red-9)' : 'var(--gray-8)';
                 } }, !selectedFile ? (
-            // --- EMPTY STATE ---
+            // --- EMPTY STATE RENDER ---
             React__default.createElement(p$5, { align: "center", gap: "3", style: { width: '100%', color: 'var(--gray-10)' } },
                 React__default.createElement(p$8, { style: { padding: 8, borderRadius: '50%', backgroundColor: 'var(--gray-3)' } },
                     React__default.createElement(Icon, { name: 'upload', width: "18", height: "18" })),
                 React__default.createElement(p$5, { direction: "column" },
                     React__default.createElement(p$d, { size: "2", weight: "bold", color: "gray" }, "Upload File"),
                     React__default.createElement(p$d, { size: "1", color: "gray" }, "Supports PDF, Images, Excel, JSON...")))) : (
-            // --- SELECTED STATE ---
+            // --- SELECTED STATE RENDER ---
             React__default.createElement(p$5, { align: "center", gap: "4", style: { width: '100%' } },
                 preview && previewUrl ? (React__default.createElement(i$9, { ratio: 1, style: { width: 48, height: 48, borderRadius: 6, overflow: 'hidden', flexShrink: 0 } },
                     React__default.createElement("img", { src: previewUrl, alt: "Preview", style: { width: '100%', height: '100%', objectFit: 'cover' } }))) : (React__default.createElement(p$8, { style: {
@@ -27200,7 +27400,7 @@ const File$1 = (_a) => {
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || "Required field")) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))) : null))));
 };
 
 const getFileIcon = (fileOrUrl) => {
@@ -27246,14 +27446,23 @@ const styles = {
     }
 };
 const FileMultiple = (_a) => {
-    var { inputtype = 'filemultiple-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, preview = true, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "preview", "className", "style"]);
-    const [field, meta] = useField(alias);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
+    var { inputtype = 'filemultiple-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, preview = true, className, style, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "preview", "className", "style", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`FileMultiple '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
     const inputRef = useRef(null);
     const [objectUrls, setObjectUrls] = useState({});
     const inputId = `${alias}FormInput`;
     const errorId = `${alias}-error`;
-    const currentFiles = Array.isArray(field.value) ? field.value : [];
+    const currentFiles = Array.isArray(fieldValue) ? fieldValue : [];
+    const hasError = Boolean(fieldTouched && fieldError);
     useEffect(() => {
         if (!preview)
             return;
@@ -27278,7 +27487,7 @@ const FileMultiple = (_a) => {
         if (e.target.files && e.target.files.length > 0) {
             const newFiles = Array.from(e.target.files);
             setFieldValue(alias, [...currentFiles, ...newFiles]);
-            setFieldTouched(alias, true);
+            setFieldTouched(alias, true, false);
         }
         if (inputRef.current)
             inputRef.current.value = '';
@@ -27292,7 +27501,6 @@ const FileMultiple = (_a) => {
         }
     };
     const isNeumorphic = inputtype === 'filemultiple-neumorphic';
-    const hasError = Boolean(meta.touched && meta.error);
     return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", className: className, style: Object.assign({ width: '100%' }, style) },
             React__default.createElement(p$8, { onClick: () => { var _a; return !readOnly && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click()); }, p: "4", style: Object.assign(Object.assign({}, styles[inputtype]), { cursor: readOnly ? 'default' : 'pointer', transition: 'all 0.2s', borderColor: hasError ? 'var(--red-9)' : (styles[inputtype].borderBottom ? 'var(--accent-9)' : 'var(--gray-a8)'), position: 'relative', opacity: readOnly ? 0.7 : 1 }) },
@@ -27354,7 +27562,7 @@ const FileMultiple = (_a) => {
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
                     React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray', marginLeft: 4 } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, typeof meta.error === 'string' ? (errorText || meta.error) : 'Invalid file selection'))))));
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, typeof fieldError === 'string' ? (errorText || fieldError) : 'Invalid file selection'))))));
 };
 
 var _excluded$6 = ["title"],
@@ -34673,9 +34881,24 @@ const ImageOutput = ({ id, src, alt = "Image", design = 'outline', layout = 'nor
 };
 
 const Input$2 = (_a) => {
-    var { alias, inputtype = "text", width, inputLabel, readOnly = false, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, className, size = "2", style, inputvariant = 'input-outline', icon } = _a, props = __rest$1(_a, ["alias", "inputtype", "width", "inputLabel", "readOnly", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "className", "size", "style", "inputvariant", "icon"]);
-    const [inputField, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
+    var { alias, inputtype = "text", width, inputLabel, readOnly = false, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, className, size = "2", style, inputvariant = 'input-outline', icon, formikContext } = _a, props = __rest$1(_a, ["alias", "inputtype", "width", "inputLabel", "readOnly", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "className", "size", "style", "inputvariant", "icon", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`Input '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, handleChange, handleBlur } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const inputField = {
+        name: alias,
+        value: fieldValue !== undefined && fieldValue !== null ? fieldValue : '',
+        onChange: handleChange,
+        onBlur: handleBlur,
+    };
+    const hasError = Boolean(fieldTouched && fieldError);
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const errorId = `${alias}-error`;
     return (React__default.createElement(Column, { span: width, newLine: newRow },
@@ -34685,21 +34908,36 @@ const Input$2 = (_a) => {
                 inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
                 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", style: { marginLeft: 4 } },
-                        React__default.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error', style: { display: 'block', marginTop: 2 } }, errorText || meta.error || `Required field`))))));
+                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error', style: { display: 'block', marginTop: 2 } }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const PasswordInput = (_a) => {
-    var { alias, inputLabel, width, readOnly = false, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, inputvariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "readOnly", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "inputvariant", "size", "className"]);
+    var { alias, inputLabel, width, readOnly = false, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, inputvariant = 'input-outline', size = "2", className, formikContext } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "readOnly", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "inputvariant", "size", "className", "formikContext"]);
     const [showPassword, setShowPassword] = useState(false);
     const toggleVisibility = () => setShowPassword(!showPassword);
-    const [field, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`PasswordInput '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, handleChange, handleBlur } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const inputField = {
+        name: alias,
+        value: fieldValue !== undefined && fieldValue !== null ? fieldValue : '',
+        onChange: handleChange,
+        onBlur: handleBlur,
+    };
+    const hasError = Boolean(fieldTouched && fieldError);
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const errorId = `${alias}-error`;
     return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
-            React__default.createElement(u, Object.assign({ size: size, type: showPassword ? "text" : "password", id: `${alias}FormInput`, readOnly: readOnly, "aria-describedby": `${alias}InputLabel`, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, field, props, { name: alias }),
+            React__default.createElement(u, Object.assign({ size: size, type: showPassword ? "text" : "password", id: `${alias}FormInput`, readOnly: readOnly, "aria-describedby": `${alias}InputLabel`, placeholder: placeholder, color: hasError ? "red" : undefined, className: `${variantClass} ${className || ''}` }, inputField, props),
                 React__default.createElement(c, null,
                     React__default.createElement(Icon, { name: "lockclosed", height: "16", width: "16", style: { color: 'var(--gray-10)' } })),
                 React__default.createElement(c, null,
@@ -34709,8 +34947,8 @@ const PasswordInput = (_a) => {
                 inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
                 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", style: { marginLeft: 4 } },
-                        React__default.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error', style: { display: 'block', marginTop: 2 } }, errorText || meta.error || `Required field`))))));
+                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error', style: { display: 'block', marginTop: 2 } }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 // This file is a workaround for a bug in web browsers' "native"
@@ -42252,10 +42490,18 @@ var en = {
 };
 
 const PhoneInput = (_a) => {
-    var { alias, inputLabel, width, placeholder = "Phone Number", newRow, isHinted, hintText, hintUrl, errorText, readOnly, inputvariant = 'input-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "size", "className"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
+    var { alias, inputLabel, width, placeholder = "Phone Number", newRow, isHinted, hintText, hintUrl, errorText, readOnly, inputvariant = 'input-outline', size = "2", className, formikContext } = _a, props = __rest$1(_a, ["alias", "inputLabel", "width", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "size", "className", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`PhoneInput '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const hasError = Boolean(fieldTouched && fieldError);
     const [country, setCountry] = useState('US');
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const errorId = `${alias}-error`;
@@ -42287,7 +42533,7 @@ const PhoneInput = (_a) => {
                                     "(+",
                                     getCountryCallingCode(c),
                                     ")")))))))),
-                React__default.createElement(Input, { country: country, name: alias, international: true, withCountryCallingCode: false, value: field.value || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true), readOnly: readOnly, placeholder: placeholder, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, style: {
+                React__default.createElement(Input, { country: country, name: alias, international: true, withCountryCallingCode: false, value: fieldValue || '', onChange: (val) => setFieldValue(alias, val || ''), onBlur: () => setFieldTouched(alias, true, false), readOnly: readOnly, placeholder: placeholder, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -42300,11 +42546,11 @@ const PhoneInput = (_a) => {
                         width: '100%'
                     } })),
             React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
                     React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { display: 'flex' } },
-                        React__default.createElement(QuestionMarkCircledIcon, { height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || meta.error || `Required field`))))));
+                        React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const safeParseUuidFormat = (typeString) => {
@@ -42319,10 +42565,18 @@ const safeParseUuidFormat = (typeString) => {
     }
 };
 const UUIDInput = (_a) => {
-    var { alias, type = "uuid-4-4-4-4", inputLabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputVariant = 'uuid-outline', size = "2", className } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputVariant", "size", "className"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
+    var { alias, type = "uuid-4-4-4-4", inputLabel, width, delimiter = "-", format = [4, 4, 4, 4], placeholder = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputVariant = 'uuid-outline', size = "2", className, formikContext } = _a, props = __rest$1(_a, ["alias", "type", "inputLabel", "width", "delimiter", "format", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputVariant", "size", "className", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`UUIDInput '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const hasError = Boolean(fieldTouched && fieldError);
     const [copied, setCopied] = useState(false);
     const [uuidNumber, setUUIDNumber] = useState("");
     const errorId = `${alias}-error`;
@@ -42351,11 +42605,11 @@ const UUIDInput = (_a) => {
         const val = e.target.value;
         const formatted = formatUUID(val);
         setUUIDNumber(formatted);
-        setFieldValue(alias, uuidNumber);
+        setFieldValue(alias, formatted);
     };
     const handleCopy = () => {
-        if (field.value) {
-            navigator.clipboard.writeText(field.value);
+        if (fieldValue) {
+            navigator.clipboard.writeText(fieldValue);
             setCopied(true);
             setTimeout(() => setCopied(false), 2000);
         }
@@ -42364,7 +42618,7 @@ const UUIDInput = (_a) => {
     return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React__default.createElement(u, Object.assign({ size: size, name: `${alias}UUIDFormInput`, variant: "surface", color: hasError ? 'red' : undefined, className: `${variantClass} ${className || ''}` }, props),
-                React__default.createElement("input", { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, value: field.value || '', onChange: handleChange, onBlur: () => setFieldTouched(alias, true), maxLength: maxTotalLength, readOnly: readOnly, placeholder: placeholder, autoComplete: "off", spellCheck: false, style: {
+                React__default.createElement("input", { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, value: fieldValue || '', onChange: handleChange, onBlur: () => setFieldTouched(alias, true, false), maxLength: maxTotalLength, readOnly: readOnly, placeholder: placeholder, autoComplete: "off", spellCheck: false, style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -42379,13 +42633,13 @@ const UUIDInput = (_a) => {
                     } }),
                 React__default.createElement(c, null,
                     React__default.createElement(e, { content: copied ? "Copied!" : "Copy to clipboard" },
-                        React__default.createElement(o$5, { size: "1", variant: "ghost", color: copied ? "green" : "gray", onClick: handleCopy, type: "button", disabled: !field.value, style: { margin: 0 } }, copied ? React__default.createElement(CheckIcon, null) : React__default.createElement(CopyIcon, null))))),
+                        React__default.createElement(o$5, { size: "1", variant: "ghost", color: copied ? "green" : "gray", onClick: handleCopy, type: "button", disabled: !fieldValue, style: { margin: 0 } }, copied ? React__default.createElement(CheckIcon, null) : React__default.createElement(CopyIcon, null))))),
             React__default.createElement("div", null,
                 inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
                 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', marginLeft: 4 } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, errorText || meta.error || "Required field"))))));
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field")))))));
 };
 
 var FaCcVisa = {};
@@ -47592,11 +47846,19 @@ const IMaskInput = React__default.forwardRef(IMaskInputFn);
 
 const CreditCardInput = (_a) => {
     var _b;
-    var { alias, inputLabel, width, placeholder, newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputvariant = 'input-outline', className } = _a; __rest$1(_a, ["alias", "inputLabel", "width", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "className"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
-    const cardInfo = cardValidator.number(field.value);
+    var { alias, inputLabel, width, placeholder, newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputvariant = 'input-outline', className, formikContext } = _a; __rest$1(_a, ["alias", "inputLabel", "width", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "className", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`CreditCardInput '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const hasError = Boolean(fieldTouched && fieldError);
+    const cardInfo = cardValidator.number(fieldValue);
     const cardType = (_b = cardInfo.card) === null || _b === void 0 ? void 0 : _b.type;
     const maskPattern = cardType === 'american-express' ? '0000 000000 00000' : '0000 0000 0000 0000';
     const errorId = `${alias}-error`;
@@ -47622,7 +47884,7 @@ const CreditCardInput = (_a) => {
                     paddingRight: '12px',
                     cursor: 'text'
                 } },
-                React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: maskPattern, readOnly: readOnly, value: field.value, unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || '0000 0000 0000 0000', inputMode: "numeric", autoComplete: "cc-number", style: {
+                React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: maskPattern, readOnly: readOnly, value: fieldValue || '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true, false), placeholder: placeholder || '0000 0000 0000 0000', inputMode: "numeric", autoComplete: "cc-number", style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -47636,12 +47898,12 @@ const CreditCardInput = (_a) => {
                     } }),
                 React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, getCardIcon())),
             React__default.createElement("div", { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 } },
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
                 "\u00A0",
-                isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
+                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", style: { display: 'flex' } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || `Required field`))))));
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const CURRENCIES = {
@@ -47713,21 +47975,29 @@ const CURRENCIES = {
 };
 
 const CurrencyInput = (_a) => {
-    var { alias, inputtype = "currency", inputLabel, width, defaultvalue = "USD", placeholder, newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputvariant = 'input-outline', className } = _a; __rest$1(_a, ["alias", "inputtype", "inputLabel", "width", "defaultvalue", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "className"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [amountField, amountMeta] = useField(alias);
+    var { alias, inputtype = "currency", inputLabel, width, defaultvalue = "USD", placeholder, newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputvariant = 'input-outline', className, formikContext } = _a; __rest$1(_a, ["alias", "inputtype", "inputLabel", "width", "defaultvalue", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "className", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`CurrencyInput '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
     const currencyAlias = `${alias}Currency`;
-    const [currencyField, , currencyHelpers] = useField(currencyAlias);
+    const amountFieldValue = getIn(values, alias);
+    const amountFieldTouched = getIn(touched, alias);
+    const amountFieldError = getIn(errors, alias);
+    const currencyFieldValue = getIn(values, currencyAlias);
     useEffect(() => {
         if (inputtype !== "currency" && CURRENCIES[inputtype]) {
-            currencyHelpers.setValue(inputtype);
+            setFieldValue(currencyAlias, inputtype);
         }
-        else if (!currencyField.value) {
-            currencyHelpers.setValue(defaultvalue);
+        else if (!currencyFieldValue) {
+            setFieldValue(currencyAlias, defaultvalue);
         }
-    }, [inputtype, defaultvalue]);
-    const hasError = Boolean(amountMeta.touched && amountMeta.error);
-    const currentCode = currencyField.value || "USD";
+    }, [inputtype, defaultvalue, currencyFieldValue, currencyAlias, setFieldValue]);
+    const hasError = Boolean(amountFieldTouched && amountFieldError);
+    const currentCode = currencyFieldValue || "USD";
     const activeCurrency = CURRENCIES[currentCode] || CURRENCIES.USD;
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const isOutline = inputvariant === 'input-outline';
@@ -47771,7 +48041,7 @@ const CurrencyInput = (_a) => {
                     normalizeZeros: true,
                     radix: ".",
                     mapToRadix: ['.'],
-                }, { value: amountField.value !== undefined && amountField.value !== null ? String(amountField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), readOnly: readOnly, placeholder: placeholder || '0.00', style: {
+                }, { value: amountFieldValue !== undefined && amountFieldValue !== null ? String(amountFieldValue) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true, false), readOnly: readOnly, placeholder: placeholder || '0.00', style: {
                         flex: 1,
                         border: 'none',
                         outline: 'none',
@@ -47787,10 +48057,10 @@ const CurrencyInput = (_a) => {
             React__default.createElement("div", null,
                 React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
                 "\u00A0",
-                isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
+                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", style: { display: 'flex' } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || amountMeta.error || `Required field`))))));
+                hasError && (React__default.createElement(p$d, { id: errorId, size: "1", color: "red", className: 'core-input-label-error' }, errorText || (typeof amountFieldError === 'string' ? amountFieldError : `Required field`)))))));
 };
 
 var FaChartLine = {};
@@ -47811,10 +48081,18 @@ function requireFaChartLine () {
 var FaChartLineExports = /*@__PURE__*/ requireFaChartLine();
 
 const StockInput = (_a) => {
-    var { alias, inputLabel, width, defaultvalue, placeholder, newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputvariant = 'input-outline', className } = _a; __rest$1(_a, ["alias", "inputLabel", "width", "defaultvalue", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "className"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [priceField, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
+    var { alias, inputLabel, width, defaultvalue, placeholder, newRow, isHinted, hintText, hintUrl, errorText, readOnly = false, inputvariant = 'input-outline', className, formikContext } = _a; __rest$1(_a, ["alias", "inputLabel", "width", "defaultvalue", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "readOnly", "inputvariant", "className", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`StockInput '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const hasError = Boolean(fieldTouched && fieldError);
     const variantClass = inputvariant !== 'input-outline' ? `input-${inputvariant}` : '';
     const isOutline = inputvariant === 'input-outline';
     const errorId = `${alias}-error`;
@@ -47846,7 +48124,7 @@ const StockInput = (_a) => {
                 React__default.createElement(p$5, { align: "center", style: { flex: 1, height: '100%', justifyContent: 'flex-end' } },
                     React__default.createElement(IMaskInput, { id: `${alias}FormInput`, name: alias, "aria-describedby": `${alias}InputLabel`, mask: Number, scale: 2, readOnly: readOnly, 
                         // @ts-expect-error: known library type definition gap
-                        signed: String(false), thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'], value: priceField.value !== undefined && priceField.value !== null ? String(priceField.value) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true), placeholder: placeholder || "0.00", style: {
+                        signed: String(false), thousandsSeparator: ",", padFractionalZeros: true, normalizeZeros: true, radix: ".", mapToRadix: ['.'], value: fieldValue !== undefined && fieldValue !== null ? String(fieldValue) : '', unmask: true, onAccept: (val) => setFieldValue(alias, val), onBlur: () => setFieldTouched(alias, true, false), placeholder: placeholder || "0.00", style: {
                             border: 'none',
                             outline: 'none',
                             background: 'transparent',
@@ -47859,19 +48137,27 @@ const StockInput = (_a) => {
                             fontFamily: 'var(--default-font-family)',
                         }, inputMode: "decimal", autoComplete: "off" }))),
             React__default.createElement("div", null,
-                React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
+                inputLabel && (React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel)),
                 "\u00A0",
-                isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
+                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", style: { display: 'flex' } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`))))));
+                hasError && (React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`)))))));
 };
 
 const RadioGroupInput = (_a) => {
-    var { inputtype = 'radio-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, direction = 'column', columns, className } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "direction", "columns", "className"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
+    var { inputtype = 'radio-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, direction = 'column', columns, className, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "direction", "columns", "className", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`RadioGroupInput '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const errorId = `${alias}-error`;
@@ -47922,15 +48208,15 @@ const RadioGroupInput = (_a) => {
             transform: none; /* Don't scale if pressed in */
           }
         ` } })),
-            React__default.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, disabled: readOnly, value: field.value, onValueChange: (val) => {
+            React__default.createElement(I$1, { name: alias, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, disabled: readOnly, value: fieldValue !== undefined && fieldValue !== null ? String(fieldValue) : undefined, onValueChange: (val) => {
                     setFieldValue(alias, val);
-                    setTimeout(() => setFieldTouched(alias, true), 0);
+                    setTimeout(() => setFieldTouched(alias, true, false), 0);
                 } },
                 React__default.createElement(o$6, { columns: columns || (direction === 'row' ? 'repeat(auto-fit, minmax(100px, 1fr))' : '1'), gap: "3", style: neuVars }, inputOptions.map((inputoption) => {
-                    const isChecked = String(field.value) === String(inputoption.optionvalue);
-                    return (React__default.createElement(p$5, { asChild: true, key: inputoption.optionvalue, align: "center", gap: "2" },
+                    const isChecked = String(fieldValue) === String(inputoption.optionvalue);
+                    return (React__default.createElement(p$5, { asChild: true, key: String(inputoption.optionvalue), align: "center", gap: "2" },
                         React__default.createElement(p$d, { as: "label", size: "2", style: { cursor: 'pointer' } },
-                            React__default.createElement(y$1, { value: inputoption.optionvalue, className: inputtype === 'radio-neumorphic' ? 'neu-radio' : '', style: Object.assign({}, (inputtype === 'radio-outline' ? {
+                            React__default.createElement(y$1, { value: String(inputoption.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'
                                 } : {})) }),
@@ -47946,16 +48232,24 @@ const RadioGroupInput = (_a) => {
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`)) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`))) : null))));
 };
 
 const OptionSelect = (_a) => {
-    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "errorText"]);
+    var { inputtype = 'dropdown-outline', alias, readOnly, width, inputLabel, placeholder, inputOptions, style, newRow, isHinted, hintText, hintUrl, errorText, formikContext } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "inputOptions", "style", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "formikContext"]);
     const triggerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`OptionSelect '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const hasError = Boolean(fieldTouched && fieldError);
     const errorId = `${alias}-error`;
     useEffect(() => {
         if (inputtype === 'dropdown-neumorphic' && triggerRef.current) {
@@ -48033,23 +48327,23 @@ const OptionSelect = (_a) => {
               cursor: pointer;
             }
           ` } })),
-            React__default.createElement(C$1, { name: alias, disabled: readOnly, value: field.value || "", onValueChange: (val) => {
+            React__default.createElement(C$1, { name: alias, disabled: readOnly, value: fieldValue || "", onValueChange: (val) => {
                     const finalVal = val === "__RESET__" ? "" : val;
                     setFieldValue(alias, finalVal);
-                    setTimeout(() => setFieldTouched(alias, true), 0);
+                    setTimeout(() => setFieldTouched(alias, true, false), 0);
                     if (props.onValueChange)
                         props.onValueChange(finalVal);
                 }, onOpenChange: (isOpen) => {
                     if (!isOpen) {
-                        setFieldTouched(alias, true);
+                        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' : ''} ${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(o$2, { size: "4", style: { margin: '4px 0', opacity: 0.5 } }),
-                    inputOptions.map((inputoption) => (React__default.createElement(React__default.Fragment, { key: inputoption.optionid || crypto.randomUUID() }, inputoption.optionurl ? (React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' },
-                        React__default.createElement("a", { onClick: (e) => { e.stopPropagation(); openLink(inputoption.optionurl || "#"); }, style: { textDecoration: 'none', color: 'inherit' } }, inputoption.text))) : (React__default.createElement(v, { id: String(inputoption.optionid) || '', value: inputoption.optionvalue, className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
+                    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), 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), className: inputtype === 'dropdown-neumorphic' ? 'neu-select-item' : '' }, inputoption.text))))))),
             React__default.createElement("div", null,
                 React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
                 "\u00A0",
@@ -48058,18 +48352,25 @@ const OptionSelect = (_a) => {
                         React__default.createElement(e, { content: hintText || "No hint available", align: "start", sideOffset: 5, className: "core-input-tooltip" },
                             React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer" },
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
-                hasError ?
-                    React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || meta.error || "Required field")) : null))));
+                hasError && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : "Required field"))))))));
 };
 
 const MultipleSelect = (_a) => {
     var _b;
-    var { inputtype = 'multiselect-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, className } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "className"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const selectedValues = (Array.isArray(field.value) ? field.value : []);
-    const hasError = Boolean(meta.touched && meta.error);
+    var { inputtype = 'multiselect-outline', alias, readOnly, width, inputLabel, placeholder = '', newRow, isHinted, hintText, hintUrl, errorText, style, inputOptions, className, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "placeholder", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "style", "inputOptions", "className", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`MultipleSelect '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const selectedValues = (Array.isArray(fieldValue) ? fieldValue : []);
+    const hasError = Boolean(fieldTouched && fieldError);
     const triggerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const [isOpen, setIsOpen] = useState(false);
@@ -48079,11 +48380,11 @@ const MultipleSelect = (_a) => {
             ? selectedValues.filter((v) => v !== value) // Remove Unselected Values
             : [...selectedValues, value]; // Add Selected Values
         setFieldValue(alias, newValues);
-        setTimeout(() => setFieldTouched(alias, true), 0);
+        setTimeout(() => setFieldTouched(alias, true, false), 0);
     };
     const displayLabel = selectedValues.length > 0
         ? inputOptions
-            .filter(inputoption => selectedValues.includes(inputoption.optionvalue))
+            .filter(inputoption => selectedValues.includes(String(inputoption.optionvalue)))
             .map(inputoption => inputoption.text)
             .join(', ')
         : placeholder;
@@ -48124,9 +48425,14 @@ const MultipleSelect = (_a) => {
     return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "2", style: { width: '100%' } },
             React__default.createElement("input", { type: "hidden", name: alias, value: JSON.stringify(selectedValues) }),
-            React__default.createElement(P$1, { onOpenChange: setIsOpen },
+            React__default.createElement(P$1, { onOpenChange: (open) => {
+                    setIsOpen(open);
+                    if (!open) {
+                        setFieldTouched(alias, true, false);
+                    }
+                } },
                 React__default.createElement(s$1, null,
-                    React__default.createElement("button", { id: `${alias}FormInput`, type: "button", ref: triggerRef, className: className, style: Object.assign(Object.assign({}, activeTrigger), style), "aria-describedby": `${alias}InputLabel` },
+                    React__default.createElement("button", { id: `${alias}FormInput`, type: "button", ref: triggerRef, className: className, style: Object.assign(Object.assign({}, activeTrigger), style), "aria-describedby": `${alias}InputLabel`, disabled: readOnly },
                         React__default.createElement("span", { style: {
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
@@ -48139,9 +48445,12 @@ const MultipleSelect = (_a) => {
                             React__default.createElement(p$5, { direction: "column", gap: "1" }, inputOptions.map((inputoption) => {
                                 const isSelected = selectedValues.some((val) => String(val)
                                     === String(inputoption.optionvalue));
-                                return (React__default.createElement(p$5, { id: String(inputoption.optionid) || '', key: inputoption.optionid, align: "center", gap: "2", onClick: () => handleToggle(inputoption.optionvalue), style: {
+                                return (React__default.createElement(p$5, { id: String(inputoption.optionid) || '', key: inputoption.optionid, align: "center", gap: "2", onClick: () => {
+                                        if (!readOnly)
+                                            handleToggle(String(inputoption.optionvalue));
+                                    }, style: {
                                         padding: '8px',
-                                        cursor: 'pointer',
+                                        cursor: readOnly ? 'default' : 'pointer',
                                         borderRadius: '4px',
                                         backgroundColor: isSelected ? 'var(--accent-a3)' : 'transparent',
                                         transition: 'background-color 0.1s'
@@ -48159,15 +48468,23 @@ const MultipleSelect = (_a) => {
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`)) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`))) : null))));
 };
 
 const SliderInput = (_a) => {
-    var { inputtype = 'slider-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "className", "style"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const fieldValue = Array.isArray(field.value) ? field.value : [field.value || minvalue];
-    const hasError = Boolean(meta.touched && meta.error);
+    var { inputtype = 'slider-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, className, style, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "className", "style", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`SliderInput '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldVal = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const fieldValue = Array.isArray(fieldVal) ? fieldVal : [fieldVal || minvalue];
+    const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const errorId = `${alias}-error`;
@@ -48246,7 +48563,7 @@ const SliderInput = (_a) => {
             React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, value: fieldValue, onValueChange: (val) => {
                     setFieldValue(alias, val[0]);
                 }, onValueCommit: () => {
-                    setFieldTouched(alias, true);
+                    setFieldTouched(alias, true, false);
                 }, className: inputtype === 'slider-neumorphic' ? 'neu-slider' : inputtype === 'slider-outline' ? 'outline-slider' : '', style: neuVars }),
             React__default.createElement("div", null,
                 React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
@@ -48258,22 +48575,30 @@ const SliderInput = (_a) => {
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`)) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`))) : null))));
 };
 
 const RangeSlider = (_a) => {
-    var { inputtype = 'range-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, minStepsBetweenThumbs = 0, className, style } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "minStepsBetweenThumbs", "className", "style"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
+    var { inputtype = 'range-outline', alias, readOnly, width, inputLabel, newRow, isHinted, hintText, hintUrl, errorText, minvalue = 0, maxvalue = 100, stepvalue = 1, minStepsBetweenThumbs = 0, className, style, formikContext } = _a; __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "minvalue", "maxvalue", "stepvalue", "minStepsBetweenThumbs", "className", "style", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`RangeSlider '${alias}' must be used within a Formik provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldVal = getIn(values, alias);
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
     // Range Formik Logic 
     // Synopsis
     // Radix slider component requires an array. 
-    // If field.value is [20, 80] pass [20, 80].
-    // If field.value is 50 we pass [50].
-    // If field.value is undefined, default to [min] or [min, max].
-    const isRange = Array.isArray(field.value);
-    const fieldValue = isRange ? field.value : [field.value || minvalue];
-    const hasError = Boolean(meta.touched && meta.error);
+    // If field value is [20, 80] pass [20, 80].
+    // If field value is 50 we pass [50].
+    // If field value is undefined, default to [min] or [min, max].
+    const isRange = Array.isArray(fieldVal);
+    const sliderValue = isRange ? fieldVal : [fieldVal || minvalue];
+    const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({});
     const errorId = `${alias}-error`;
@@ -48291,7 +48616,7 @@ const RangeSlider = (_a) => {
     return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement(p$5, { direction: "column", gap: "3", width: "100%", ref: containerRef, style: style, className: className },
             React__default.createElement(p$5, { justify: "between", align: "center" },
-                React__default.createElement(p$d, { size: "2", color: "gray", style: { fontVariantNumeric: 'tabular-nums' } }, fieldValue.join(' - '))),
+                React__default.createElement(p$d, { size: "2", color: "gray", style: { fontVariantNumeric: 'tabular-nums' } }, sliderValue.join(' - '))),
             React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
         /* Neumorphic */
         .neu-slider .rt-SliderTrack {
@@ -48322,12 +48647,12 @@ const RangeSlider = (_a) => {
            background-color: white; border: 2px solid var(--accent-9); box-shadow: none;
         }
       ` } }),
-            React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, minStepsBetweenThumbs: minStepsBetweenThumbs, value: fieldValue, onValueChange: (val) => {
+            React__default.createElement(s, { name: alias, id: `${alias}FormInput`, disabled: readOnly, "aria-describedby": `${alias}InputLabel`, min: minvalue, max: maxvalue, step: stepvalue, minStepsBetweenThumbs: minStepsBetweenThumbs, value: sliderValue, onValueChange: (val) => {
                     // LOGIC SYNOPSIS:
                     // If Range, set value as array.
                     // If Slider, set value as first value.
                     setFieldValue(alias, isRange ? val : val[0]);
-                }, onValueCommit: () => setFieldTouched(alias, true), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
+                }, onValueCommit: () => setFieldTouched(alias, true, false), className: inputtype === 'range-neumorphic' ? 'neu-slider' : inputtype === 'range-outline' ? 'outline-slider' : '', style: neuVars }),
             React__default.createElement("div", null,
                 React__default.createElement(p$d, { id: `${alias}InputLabel`, as: "label", size: "2", weight: "bold", htmlFor: `${alias}FormInput` }, inputLabel),
                 "\u00A0",
@@ -48338,14 +48663,22 @@ const RangeSlider = (_a) => {
                                 React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))) : null,
                 hasError ?
                     React__default.createElement(React__default.Fragment, null,
-                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || `Required field`)) : null))));
+                        React__default.createElement("p", { id: errorId, className: 'core-input-label-error' }, errorText || (typeof fieldError === 'string' ? fieldError : `Required field`))) : null))));
 };
 
 const Toggle = (_a) => {
-    var { inputtype = 'toggle-neumorphic', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl, errorText, icon = 'stack' } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "icon"]);
-    const { setFieldValue, setFieldTouched } = useFormikContext();
-    const [field, meta] = useField(alias);
-    const hasError = Boolean(meta.touched && meta.error);
+    var { inputtype = 'toggle-neumorphic', alias, readOnly, width, inputLabel, style, children, newRow, isHinted, hintText, hintUrl, errorText, icon = 'layers', formikContext } = _a, props = __rest$1(_a, ["inputtype", "alias", "readOnly", "width", "inputLabel", "style", "children", "newRow", "isHinted", "hintText", "hintUrl", "errorText", "icon", "formikContext"]);
+    const defaultFormikContext = useFormikContext();
+    const activeContext = formikContext || defaultFormikContext;
+    if (!activeContext) {
+        console.error(`xForm Toggle '${alias}' must be used within a Formik context provider or receive a formikContext prop.`);
+        return null;
+    }
+    const { values, touched, errors, setFieldValue, setFieldTouched } = activeContext;
+    const fieldValue = getIn(values, alias) || false;
+    const fieldTouched = getIn(touched, alias);
+    const fieldError = getIn(errors, alias);
+    const hasError = Boolean(fieldTouched && fieldError);
     const containerRef = useRef(null);
     const [neuVars, setNeuVars] = useState({
         '--neu-bg': '#ecf0f3',
@@ -48379,14 +48712,14 @@ const Toggle = (_a) => {
     const handleToggle = (val) => {
         if (!readOnly) {
             setFieldValue(alias, val);
-            setFieldTouched(alias, true);
+            setFieldTouched(alias, true, false);
         }
     };
-    const iconColor = field.value && !readOnly ? 'var(--accent-9)' : 'var(--gray-8)';
+    const iconColor = fieldValue && !readOnly ? 'var(--accent-9)' : 'var(--gray-8)';
     return (React__default.createElement(Column, { span: width, newLine: newRow },
         React__default.createElement("div", { ref: containerRef, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: '4px' } },
             inputtype === 'toggle-neumorphic' ? (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
-                React__default.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readOnly ? 0.6 : 1, pointerEvents: readOnly ? 'none' : 'auto' }), onClick: () => handleToggle(!field.value) },
+                React__default.createElement("div", { className: "neu-toggle-wrapper", style: Object.assign(Object.assign({}, neuVars), { opacity: readOnly ? 0.6 : 1, pointerEvents: readOnly ? 'none' : 'auto' }), onClick: () => handleToggle(!fieldValue) },
                     React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
                         .neu-toggle-wrapper {
                             isolation: isolate;
@@ -48424,13 +48757,13 @@ const Toggle = (_a) => {
                             transform: translate3d(25%, 0, 0);
                         }
                     ` } }),
-                    React__default.createElement("input", { id: `${alias}FormInput`, className: "neu-toggle-state", type: "checkbox", checked: !!field.value, readOnly: true }),
+                    React__default.createElement("input", { id: `${alias}FormInput`, className: "neu-toggle-state", type: "checkbox", checked: !!fieldValue, readOnly: true }),
                     React__default.createElement("div", { className: "neu-indicator" })),
                 React__default.createElement(Icon, { name: icon, height: "20", width: "20", color: iconColor, style: {
                         transition: 'color 0.3s ease',
                         opacity: readOnly ? 0.5 : 1,
                         cursor: 'pointer'
-                    }, onClick: () => handleToggle(!field.value) }))) : (React__default.createElement(Root, { pressed: field.value, onPressedChange: handleToggle, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
+                    }, onClick: () => handleToggle(!fieldValue) }))) : (React__default.createElement(Root, { pressed: fieldValue, onPressedChange: handleToggle, name: alias, disabled: readOnly, id: `${alias}FormInput`, "aria-describedby": `${alias}InputLabel`, asChild: true },
                 React__default.createElement(o$a, Object.assign({ disabled: readOnly }, props, { className: `design-toggle ${inputtype} ${props.className || ''}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (inputtype === 'toggle' ? materialStyle : {})), (inputtype === 'toggle-material' ? materialStyle : {})), (inputtype === 'toggle-outline' ? outlineStyle : {})), type: "button" }),
                     React__default.createElement("style", { dangerouslySetInnerHTML: { __html: `
                         .design-toggle.toggle-material[data-state='on'] {
@@ -48459,7 +48792,7 @@ const Toggle = (_a) => {
                 isHinted && (React__default.createElement(e, { content: hintText || "No hint available" },
                     React__default.createElement("a", { href: hintUrl || "", target: "_blank", rel: "noopener noreferrer", style: { marginLeft: 6 } },
                         React__default.createElement(Icon, { name: "questionmarkcircled", height: "16", width: "16", style: { cursor: 'pointer', color: 'gray' } })))),
-                hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, errorText || `Required field`))))));
+                hasError && (React__default.createElement(p$d, { size: "1", color: "red", style: { display: 'block', marginTop: 2 } }, errorText || fieldError || `Required field`))))));
 };
 
 const SectionTitle = ({ title, width = 12, newRow = true, size = "5", subsize = "2", subTitle, align = "left", letterSpacing = "0.13em", withSeparator = true, className, backgroundColor, icon, titleColor, subtitleColor }) => {
@@ -48793,7 +49126,7 @@ const CodexItem = ({ stepId, children, }) => {
     return (React__default.createElement("div", { className: "v-step-content-animation", style: { width: '100%' } }, children));
 };
 
-const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLabel = "Back", finishLabel = "Submit", prevIcon = "doublearrowleft", nextIcon = "doublearrowright", finishIcon = "paperplane", onNext, onPrev, onFinish }) => {
+const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLabel = "Back", finishLabel = "Submit", prevIcon = "doublearrowleft", nextIcon = "doublearrowright", finishIcon = "paperplane", onSubmit = false, onNext, onPrev, onFinish }) => {
     const { setActiveStepId, brandColor } = useStepper();
     const handlePrev = () => {
         if (onPrev)
@@ -48818,7 +49151,7 @@ const CodexControls = ({ nextStepId, prevStepId, nextLabel = "Continue", prevLab
                 React__default.createElement(Icon, { name: prevIcon }),
                 "\u00A0")),
             prevLabel)) : (React__default.createElement("div", null)),
-        React__default.createElement(o$a, { variant: "solid", color: brandColor ? undefined : (nextStepId ? "blue" : "green"), onClick: handleNext, style: Object.assign({ cursor: 'pointer' }, (brandColor ? { backgroundColor: 'var(--codex-brand)', color: '#fff' } : {})) }, nextStepId ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(o$a, { variant: "solid", color: brandColor ? undefined : (nextStepId ? "blue" : "green"), onClick: handleNext, style: Object.assign({ cursor: 'pointer' }, (brandColor ? { backgroundColor: 'var(--codex-brand)', color: '#fff' } : {})), type: onSubmit && !nextStepId ? "submit" : "button" }, nextStepId ? (React__default.createElement(React__default.Fragment, null,
             nextIcon && React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(Icon, { name: nextIcon }),
                 "\u00A0"),
@@ -48845,22 +49178,22 @@ const phoneInputType = ["phone", "phoneinput", "phone-input", "input-phone", "in
 const creditCardInputType = ["creditcard", "creditcardinput", "creditcard-input", "input-creditcard", "inputcreditcard"];
 const currencyInputType = ["currency", "currencyinput", "currency-input", "input-currency", "inputcurrency"];
 const stockInputType = ["stock", "stockinput", "stock-input", "input-stock", "inputstock"];
-const radioInputType = ["radio", "radioinput", "radio-input", "input-radio", "inputradio"];
-const selectInputType = ["select", "selectinput", "select-input", "input-select", "inputselect"];
+const radioInputType = ["radio", "radioinput", "radio-input", "input-radio", "inputradio", "radiogroup", "radiogroup-input"];
+const selectInputType = ["select", "selectinput", "select-input", "input-select", "inputselect", "optionselect", "optionselect-input", "input-optionselect"];
 const selectMultipleInputType = ["selectmultiple", "selectmultipleinput", "selectmultiple-input", "input-selectmultiple", "inputselectmultiple"];
 const sliderInputType = ["slider", "sliderinput", "slider-input", "input-slider", "inputslider"];
 const rangeSliderInputType = ["range", "rangeslider", "rangeinput", "rangesliderinput", "rangeslider-input", "range-input", "input-rangeslider", "inputrangeslider"];
 const toggleInputType = ["toggle", "switch", "toggleinput", "toggle-input", "input-toggle", "inputtoggle"];
 const conditionalInputType = ["conditional", "conditionaltoggle", "conditionalcheckbox", "conditionalselect", "conditional-toggle", "conditional-select", "conditional-checkbox"];
 
-const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice', brandColor = "#000000" }) => {
+const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice', brandColor = "#000000", onPrev, onNext, onFinish }) => {
     const [dualToggled, setDualToggled] = useState(false);
     const [neuVars] = useState({
         '--neu-bg': '#ecf0f3',
         '--neu-shadow-light': '#ffffff',
         '--neu-shadow-dark': '#d1d9e6'
     });
-    const inputAlphaTrion = (inputAlias, inputType, inputWidth, inputLabel, inputMinValue, inputMaxValue, defaultValue, inputOptions, stepValue, inputHeight, toggledInput, newRow, inputPlaceholder, readOnly, isHinted, hintText, hintUrl, errorText, inputUID) => {
+    const inputAlphaTrion = (inputAlias, inputType, inputWidth, inputLabel, inputMinValue, inputMaxValue, defaultValue, inputOptions, stepValue, inputHeight, toggledInput, triggerValue, newRow, inputPlaceholder, readOnly, isHinted, hintText, hintUrl, errorText, inputUID) => {
         if (inputWidth == null || inputWidth > 12)
             inputWidth = 4;
         if (inputHeight == null)
@@ -48876,7 +49209,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             case buttonInputType.includes(normalizedType):
                 return React__default.createElement(ButtonInput, { alias: inputAlias, width: inputWidth, readOnly: readOnly, newRow: newRow, key: inputUID }, defaultValue);
             case checkboxInputType.includes(normalizedType):
-                return React__default.createElement(CheckboxGroupInput, { alias: inputAlias, width: inputWidth, inputLabel: inputLabel, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                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 });
             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 });
             case datePickerInputType.includes(normalizedType):
@@ -48886,7 +49219,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             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 });
             case dropdownInputType.includes(normalizedType):
-                return React__default.createElement(Dropdown, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                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 });
             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 });
             case fileMultipleInputType.includes(normalizedType):
@@ -48906,11 +49239,11 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
             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 });
             case radioInputType.includes(normalizedType):
-                return React__default.createElement(RadioGroupInput, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                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 });
             case selectInputType.includes(normalizedType):
-                return React__default.createElement(OptionSelect, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                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 });
             case selectMultipleInputType.includes(normalizedType):
-                return React__default.createElement(MultipleSelect, { alias: inputAlias, inputLabel: inputLabel, width: inputWidth, inputOptions: inputOptions, newRow: newRow, readOnly: readOnly, isHinted: isHinted, hintText: hintText, hintUrl: hintUrl, key: inputUID, errorText: errorText });
+                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 });
             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 });
             case rangeSliderInputType.includes(normalizedType):
@@ -48924,7 +49257,9 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
     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, Number(xFormelement.minValue), Number(xFormelement.maxValue), xFormelement.defaultValue, [InputOptionsPlaceholder], xFormelement.stepValue, xFormelement.inputHeight, xFormelement.toggledInput ? inputAlphaTrion(xFormelement.toggledInput.inputAlias, xFormelement.toggledInput.inputType, xFormelement.toggledInput.inputWidth, xFormelement.toggledInput.inputLabel, Number(xFormelement.toggledInput.minValue), Number(xFormelement.toggledInput.maxValue), xFormelement.toggledInput.defaultValue, [InputOptionsPlaceholder], xFormelement.toggledInput.stepValue, xFormelement.toggledInput.inputHeight, 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.newRow, xFormelement.inputPlaceholder, readOnlyMode, xFormelement.isHinted, xFormelement.hintText || "", xFormelement.hintUrl || "", xFormelement.errorText, String(xFormelement.queryId) || crypto.randomUUID()))));
+        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()))));
     };
     const renderDisplayMode = () => {
         switch (displayMode) {
@@ -48973,7 +49308,7 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
                                             ` } }),
                                 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: "stack", height: "20", width: "20", color: brandColor, style: {
+                            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'
@@ -49002,7 +49337,13 @@ const Teletraan1 = ({ xFormModel, readOnlyMode = false, displayMode = 'codice',
                         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()`) })));
+                            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()`);
+                                } })));
                     }))));
             case 'codice':
             default:
@@ -53465,12 +53806,13 @@ function superRefine(fn) {
 
 // JSON defintion (schema) for xForm object
 const InputOptionSchema = object({
-    optionId: number().or(uuid()),
+    optionid: number().or(uuid()),
     text: string(),
-    tag: string().nullish(),
-    score: number().or(float64()).nullish(),
-    note: string().nullish(),
-    optionUrl: url().nullish(),
+    optionvalue: string(),
+    tag: string().optional(),
+    score: number().or(float64()).optional(),
+    note: string().optional(),
+    optionurl: url().optional(),
 });
 const NestedQuerySchema = object({
     queryId: number().or(uuid()),
@@ -53490,9 +53832,9 @@ const NestedQuerySchema = object({
     hintText: string().nullish(),
     hintUrl: url().nullish(),
     queryResponse: any().nullable(),
-    inputOptions: array(InputOptionSchema).nullable().optional(),
+    inputOptions: array(InputOptionSchema).optional(),
     toggledInput: any().nullable().optional(),
-    toggleTrigger: any().nullable().optional(),
+    triggerValue: any().nullable().optional(),
     errorText: string().optional()
 });
 const QuerySchema = object({
@@ -53515,11 +53857,11 @@ const QuerySchema = object({
     queryResponse: any().nullable(),
     inputOptions: array(InputOptionSchema).optional(),
     toggledInput: NestedQuerySchema.nullable().optional(),
-    toggleTrigger: any().nullable().optional(),
+    triggerValue: any().nullable().optional(),
     errorText: string().optional()
 });
 const SectionSchema = object({
-    sectionId: number(),
+    sectionId: number().or(string()),
     title: string(),
     icon: string().nullable(),
     queries: array(QuerySchema)
@@ -53527,7 +53869,7 @@ const SectionSchema = object({
 const xFormSchema = object({
     uuid: uuid(),
     name: string(),
-    logo: string().nullable(),
+    logo: url().nullable(),
     brandcolor: string().nullable(),
     logoPosition: string().nullable(),
     model: array(SectionSchema),