@idds/react 1.5.46 → 1.5.47

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { createContext, useRef, useState, useCallback, useMemo, useContext, useId, useEffect, forwardRef, createElement, useImperativeHandle, Fragment as Fragment$1 } from "react";
+import React, { createContext, useRef, useState, useCallback, useMemo, useContext, useId, useEffect, forwardRef, useImperativeHandle, Fragment as Fragment$1 } from "react";
 import { createPortal } from "react-dom";
 const iddsColorTokens = {
   // Neutral Colors
@@ -816,313 +816,27 @@ function Accordion(props) {
     )
   ] });
 }
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var defaultAttributes = {
-  outline: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  },
-  filled: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    stroke: "none"
-  }
-};
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
-  const Component = forwardRef(
-    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => createElement(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes[type],
-        width: size,
-        height: size,
-        className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(" "),
-        ...{
-          strokeWidth: stroke,
-          stroke: color
-        },
-        ...rest
-      },
-      [
-        title && createElement("title", { key: "svg-title" }, title),
-        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
+const IconChevronUp = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 15l6 -6l6 6" })
       ]
-    )
+    }
   );
-  Component.displayName = `${iconNamePascal}`;
-  return Component;
 };
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$u = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 8v4", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
-const IconAlertCircle = createReactComponent("outline", "alert-circle", "AlertCircle", __iconNode$u);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$t = [["path", { "d": "M12 9v4", "key": "svg-0" }], ["path", { "d": "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
-const IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$t);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$s = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M16 15l-4 4", "key": "svg-1" }], ["path", { "d": "M8 15l4 4", "key": "svg-2" }]];
-const IconArrowNarrowDown = createReactComponent("outline", "arrow-narrow-down", "ArrowNarrowDown", __iconNode$s);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$r = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M16 9l-4 -4", "key": "svg-1" }], ["path", { "d": "M8 9l4 -4", "key": "svg-2" }]];
-const IconArrowNarrowUp = createReactComponent("outline", "arrow-narrow-up", "ArrowNarrowUp", __iconNode$r);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$q = [["path", { "d": "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z", "key": "svg-0" }], ["path", { "d": "M16 3v4", "key": "svg-1" }], ["path", { "d": "M8 3v4", "key": "svg-2" }], ["path", { "d": "M4 11h16", "key": "svg-3" }], ["path", { "d": "M11 15h1", "key": "svg-4" }], ["path", { "d": "M12 15v3", "key": "svg-5" }]];
-const IconCalendar = createReactComponent("outline", "calendar", "Calendar", __iconNode$q);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$p = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
-const IconCheck = createReactComponent("outline", "check", "Check", __iconNode$p);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$o = [["path", { "d": "M6 9l6 6l6 -6", "key": "svg-0" }]];
-const IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$o);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$n = [["path", { "d": "M15 6l-6 6l6 6", "key": "svg-0" }]];
-const IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$n);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$m = [["path", { "d": "M9 6l6 6l-6 6", "key": "svg-0" }]];
-const IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$m);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$l = [["path", { "d": "M6 15l6 -6l6 6", "key": "svg-0" }]];
-const IconChevronUp = createReactComponent("outline", "chevron-up", "ChevronUp", __iconNode$l);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$k = [["path", { "d": "M11 7l-5 5l5 5", "key": "svg-0" }], ["path", { "d": "M17 7l-5 5l5 5", "key": "svg-1" }]];
-const IconChevronsLeft = createReactComponent("outline", "chevrons-left", "ChevronsLeft", __iconNode$k);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$j = [["path", { "d": "M7 7l5 5l-5 5", "key": "svg-0" }], ["path", { "d": "M13 7l5 5l-5 5", "key": "svg-1" }]];
-const IconChevronsRight = createReactComponent("outline", "chevrons-right", "ChevronsRight", __iconNode$j);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$i = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M9 12l2 2l4 -4", "key": "svg-1" }]];
-const IconCircleCheck = createReactComponent("outline", "circle-check", "CircleCheck", __iconNode$i);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$h = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M10 10l4 4m0 -4l-4 4", "key": "svg-1" }]];
-const IconCircleX = createReactComponent("outline", "circle-x", "CircleX", __iconNode$h);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$g = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 7v5l3 3", "key": "svg-1" }]];
-const IconClock = createReactComponent("outline", "clock", "Clock", __iconNode$g);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$f = [["path", { "d": "M6 17.6l-2 -1.1v-2.5", "key": "svg-0" }], ["path", { "d": "M4 10v-2.5l2 -1.1", "key": "svg-1" }], ["path", { "d": "M10 4.1l2 -1.1l2 1.1", "key": "svg-2" }], ["path", { "d": "M18 6.4l2 1.1v2.5", "key": "svg-3" }], ["path", { "d": "M20 14v2.5l-2 1.12", "key": "svg-4" }], ["path", { "d": "M14 19.9l-2 1.1l-2 -1.1", "key": "svg-5" }], ["path", { "d": "M12 12l2 -1.1", "key": "svg-6" }], ["path", { "d": "M18 8.6l2 -1.1", "key": "svg-7" }], ["path", { "d": "M12 12l0 2.5", "key": "svg-8" }], ["path", { "d": "M12 18.5l0 2.5", "key": "svg-9" }], ["path", { "d": "M12 12l-2 -1.12", "key": "svg-10" }], ["path", { "d": "M6 8.6l-2 -1.1", "key": "svg-11" }]];
-const IconCube3dSphere = createReactComponent("outline", "cube-3d-sphere", "Cube3dSphere", __iconNode$f);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$e = [["path", { "d": "M10.585 10.587a2 2 0 0 0 2.829 2.828", "key": "svg-0" }], ["path", { "d": "M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87", "key": "svg-1" }], ["path", { "d": "M3 3l18 18", "key": "svg-2" }]];
-const IconEyeOff = createReactComponent("outline", "eye-off", "EyeOff", __iconNode$e);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$d = [["path", { "d": "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0", "key": "svg-0" }], ["path", { "d": "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6", "key": "svg-1" }]];
-const IconEye = createReactComponent("outline", "eye", "Eye", __iconNode$d);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$c = [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4", "key": "svg-1" }], ["path", { "d": "M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6", "key": "svg-2" }], ["path", { "d": "M17 18h2", "key": "svg-3" }], ["path", { "d": "M20 15h-3v6", "key": "svg-4" }], ["path", { "d": "M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1z", "key": "svg-5" }]];
-const IconFileTypePdf = createReactComponent("outline", "file-type-pdf", "FileTypePdf", __iconNode$c);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$b = [["path", { "d": "M14 3v4a1 1 0 0 0 1 1h4", "key": "svg-0" }], ["path", { "d": "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", "key": "svg-1" }]];
-const IconFile = createReactComponent("outline", "file", "File", __iconNode$b);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$a = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 9h.01", "key": "svg-1" }], ["path", { "d": "M11 12h1v4h1", "key": "svg-2" }]];
-const IconInfoCircle = createReactComponent("outline", "info-circle", "InfoCircle", __iconNode$a);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$9 = [["path", { "d": "M12 3a9 9 0 1 0 9 9", "key": "svg-0" }]];
-const IconLoader2 = createReactComponent("outline", "loader-2", "Loader2", __iconNode$9);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$8 = [["path", { "d": "M5 12l14 0", "key": "svg-0" }]];
-const IconMinus = createReactComponent("outline", "minus", "Minus", __iconNode$8);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$7 = [["path", { "d": "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z", "key": "svg-0" }]];
-const IconMoon = createReactComponent("outline", "moon", "Moon", __iconNode$7);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$6 = [["path", { "d": "M15 8h.01", "key": "svg-0" }], ["path", { "d": "M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z", "key": "svg-1" }], ["path", { "d": "M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5", "key": "svg-2" }], ["path", { "d": "M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3", "key": "svg-3" }]];
-const IconPhoto = createReactComponent("outline", "photo", "Photo", __iconNode$6);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$5 = [["path", { "d": "M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5", "key": "svg-0" }]];
-const IconRotateClockwise = createReactComponent("outline", "rotate-clockwise", "RotateClockwise", __iconNode$5);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$4 = [["path", { "d": "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", "key": "svg-0" }], ["path", { "d": "M21 21l-6 -6", "key": "svg-1" }]];
-const IconSearch = createReactComponent("outline", "search", "Search", __iconNode$4);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$3 = [["path", { "d": "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", "key": "svg-0" }], ["path", { "d": "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7", "key": "svg-1" }]];
-const IconSun = createReactComponent("outline", "sun", "Sun", __iconNode$3);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$2 = [["path", { "d": "M4 7l16 0", "key": "svg-0" }], ["path", { "d": "M10 11l0 6", "key": "svg-1" }], ["path", { "d": "M14 11l0 6", "key": "svg-2" }], ["path", { "d": "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12", "key": "svg-3" }], ["path", { "d": "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3", "key": "svg-4" }]];
-const IconTrash = createReactComponent("outline", "trash", "Trash", __iconNode$2);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$1 = [["path", { "d": "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2", "key": "svg-0" }], ["path", { "d": "M7 9l5 -5l5 5", "key": "svg-1" }], ["path", { "d": "M12 4l0 12", "key": "svg-2" }]];
-const IconUpload = createReactComponent("outline", "upload", "Upload", __iconNode$1);
-/**
- * @license @tabler/icons-react v3.35.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode = [["path", { "d": "M18 6l-12 12", "key": "svg-0" }], ["path", { "d": "M6 6l12 12", "key": "svg-1" }]];
-const IconX = createReactComponent("outline", "x", "X", __iconNode);
 function AccordionCard({
   title,
   children,
@@ -1283,6 +997,149 @@ const ActionDropdown = forwardRef(
   }
 );
 ActionDropdown.displayName = "ActionDropdown";
+const IconCheck = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 12l5 5l10 -10" })
+      ]
+    }
+  );
+};
+const IconInfoCircle = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 9h.01" }),
+        /* @__PURE__ */ jsx("path", { d: "M11 12h1v4h1" })
+      ]
+    }
+  );
+};
+const IconAlertTriangle = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 16h.01" })
+      ]
+    }
+  );
+};
+const IconX = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M18 6l-12 12" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 6l12 12" })
+      ]
+    }
+  );
+};
+const IconAlertCircle = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 8v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 16h.01" })
+      ]
+    }
+  );
+};
+const Icon3dCubeSphere = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M6 17.6l-2 -1.1v-2.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 10v-2.5l2 -1.1" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 4.1l2 -1.1l2 1.1" }),
+        /* @__PURE__ */ jsx("path", { d: "M18 6.4l2 1.1v2.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 14v2.5l-2 1.12" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 19.9l-2 1.1l-2 -1.1" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 12l2 -1.1" }),
+        /* @__PURE__ */ jsx("path", { d: "M18 8.6l2 -1.1" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 12l0 2.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 18.5l0 2.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 12l-2 -1.12" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 8.6l-2 -1.1" })
+      ]
+    }
+  );
+};
 function Alert(props) {
   const {
     variant = "info",
@@ -1295,7 +1152,7 @@ function Alert(props) {
     className = ""
   } = props;
   const ICON_MAP = {
-    neutral: /* @__PURE__ */ jsx(IconCube3dSphere, { size: 20 }),
+    neutral: /* @__PURE__ */ jsx(Icon3dCubeSphere, { size: 20 }),
     info: /* @__PURE__ */ jsx(IconInfoCircle, { size: 20 }),
     success: /* @__PURE__ */ jsx(IconCheck, { size: 20 }),
     caution: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 20 }),
@@ -1527,6 +1384,27 @@ function Card({
     variant === "horizontal" && finalMediaPosition === "right" && renderMedia()
   ] });
 }
+const IconChevronRight = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 6l6 6l-6 6" })
+      ]
+    }
+  );
+};
 function Breadcrumb({
   items,
   separator = /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }),
@@ -1767,6 +1645,27 @@ function CircleProgressBar({
     }
   ) });
 }
+const IconMinus = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 12l14 0" })
+      ]
+    }
+  );
+};
 function Checkbox({
   id,
   label,
@@ -1829,67 +1728,69 @@ function Checkbox({
   ] });
 }
 function c(e, u, c2, i2) {
-  var a2 = this, o = useRef(null), f = useRef(0), l = useRef(0), v = useRef(null), m = useRef([]), d = useRef(), g = useRef(), p = useRef(e), w = useRef(true);
-  p.current = e;
-  var s = "undefined" != typeof window, x = !u && 0 !== u && s;
+  var l2 = this, a = useRef(null), o = useRef(0), f = useRef(0), v = useRef(null), d = useRef([]), m = useRef(), s = useRef(), g = useRef(e), h = useRef(true), x = useRef(), E = useRef();
+  g.current = e;
+  var b = "undefined" != typeof window, p = !u && 0 !== u && b;
   if ("function" != typeof e) throw new TypeError("Expected a function");
   u = +u || 0;
-  var h = !!(c2 = c2 || {}).leading, y = !("trailing" in c2) || !!c2.trailing, F = "maxWait" in c2, A = "debounceOnServer" in c2 && !!c2.debounceOnServer, D = F ? Math.max(+c2.maxWait || 0, u) : null;
-  useEffect(function() {
-    return w.current = true, function() {
-      w.current = false;
-    };
-  }, []);
-  var T = useMemo(function() {
+  var y = !!(c2 = c2 || {}).leading, w = !("trailing" in c2) || !!c2.trailing, O = !!c2.flushOnExit && w, F = "maxWait" in c2, L = "debounceOnServer" in c2 && !!c2.debounceOnServer, A = F ? Math.max(+c2.maxWait || 0, u) : null, D = useMemo(function() {
     var r2 = function(r3) {
-      var n2 = m.current, t2 = d.current;
-      return m.current = d.current = null, f.current = r3, l.current = l.current || r3, g.current = p.current.apply(t2, n2);
+      var n2 = d.current, t2 = m.current;
+      return d.current = m.current = null, o.current = r3, f.current = f.current || r3, s.current = g.current.apply(t2, n2);
     }, n = function(r3, n2) {
-      x && cancelAnimationFrame(v.current), v.current = x ? requestAnimationFrame(r3) : setTimeout(r3, n2);
+      p && cancelAnimationFrame(v.current), v.current = p ? requestAnimationFrame(r3) : setTimeout(r3, n2);
     }, t = function(r3) {
-      if (!w.current) return false;
-      var n2 = r3 - o.current;
-      return !o.current || n2 >= u || n2 < 0 || F && r3 - f.current >= D;
+      if (!h.current) return false;
+      var n2 = r3 - a.current;
+      return !a.current || n2 >= u || n2 < 0 || F && r3 - o.current >= A;
     }, e2 = function(n2) {
-      return v.current = null, y && m.current ? r2(n2) : (m.current = d.current = null, g.current);
+      return v.current = null, w && d.current ? r2(n2) : (d.current = m.current = null, s.current);
     }, c3 = function r3() {
       var c4 = Date.now();
-      if (h && l.current === f.current && T2(), t(c4)) return e2(c4);
-      if (w.current) {
-        var i3 = u - (c4 - o.current), a3 = F ? Math.min(i3, D - (c4 - f.current)) : i3;
-        n(r3, a3);
+      if (y && f.current === o.current && D2(), t(c4)) return e2(c4);
+      if (h.current) {
+        var i3 = u - (c4 - a.current), l3 = F ? Math.min(i3, A - (c4 - o.current)) : i3;
+        n(r3, l3);
       }
-    }, T2 = function() {
+    }, D2 = function() {
       i2 && i2({});
-    }, W = function() {
-      if (s || A) {
-        var e3 = Date.now(), i3 = t(e3);
-        if (m.current = [].slice.call(arguments), d.current = a2, o.current = e3, i3) {
-          if (!v.current && w.current) return f.current = o.current, n(c3, u), h ? r2(o.current) : g.current;
-          if (F) return n(c3, u), r2(o.current);
+    }, S = function() {
+      if (b || L) {
+        var e3, i3 = Date.now(), f2 = t(i3);
+        if (d.current = [].slice.call(arguments), m.current = l2, a.current = i3, O && !x.current && (x.current = function() {
+          var r3;
+          "hidden" === (null == (r3 = global.document) ? void 0 : r3.visibilityState) && E.current.flush();
+        }, null == (e3 = global.document) || null == e3.addEventListener || e3.addEventListener("visibilitychange", x.current)), f2) {
+          if (!v.current && h.current) return o.current = a.current, n(c3, u), y ? r2(a.current) : s.current;
+          if (F) return n(c3, u), r2(a.current);
         }
-        return v.current || n(c3, u), g.current;
+        return v.current || n(c3, u), s.current;
       }
     };
-    return W.cancel = function() {
+    return S.cancel = function() {
       var r3 = v.current;
-      r3 && (x ? cancelAnimationFrame(v.current) : clearTimeout(v.current)), f.current = 0, m.current = o.current = d.current = v.current = null, r3 && i2 && i2({});
-    }, W.isPending = function() {
+      r3 && (p ? cancelAnimationFrame(v.current) : clearTimeout(v.current)), o.current = 0, d.current = a.current = m.current = v.current = null, r3 && i2 && i2({});
+    }, S.isPending = function() {
       return !!v.current;
-    }, W.flush = function() {
-      return v.current ? e2(Date.now()) : g.current;
-    }, W;
-  }, [h, F, u, D, y, x, s, A, i2]);
-  return T;
+    }, S.flush = function() {
+      return v.current ? e2(Date.now()) : s.current;
+    }, S;
+  }, [y, F, u, A, w, O, p, b, L, i2]);
+  return E.current = D, useEffect(function() {
+    return h.current = true, function() {
+      var r2;
+      O && E.current.flush(), x.current && (null == (r2 = global.document) || null == r2.removeEventListener || r2.removeEventListener("visibilitychange", x.current), x.current = null), h.current = false;
+    };
+  }, [O]), D;
 }
 function i(r2, n) {
   return r2 === n;
 }
-function a(n, t, a2) {
-  var o = i, f = useRef(n), l = useState({})[1], v = c(useCallback(function(r2) {
-    f.current = r2, l({});
-  }, [l]), t, a2, l), m = useRef(n);
-  return o(m.current, n) || (v(n), m.current = n), [f.current, v];
+function l(n, t, l2) {
+  var a = i, o = useRef(n), f = useState({})[1], v = c(useCallback(function(r2) {
+    o.current = r2, f({});
+  }, [f]), t, l2, f), d = useRef(n);
+  return a(d.current, n) || (v(n), d.current = n), [o.current, v];
 }
 const HTML_ENTITIES = {
   "&": "&amp;",
@@ -2139,7 +2040,7 @@ function TextField({
     return value;
   };
   const [inner, setInner] = useState(getInitialValue());
-  const [debounced] = a(inner, debounce);
+  const [debounced] = l(inner, debounce);
   const isFirstRun = useRef(true);
   useEffect(() => {
     let newValue = value;
@@ -2368,6 +2269,27 @@ function Divider({
   );
   return /* @__PURE__ */ jsx("hr", { className: dividerClasses });
 }
+const IconChevronDown = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 9l6 6l6 -6" })
+      ]
+    }
+  );
+};
 function BasicDropdown({
   trigger,
   content,
@@ -2479,6 +2401,54 @@ function BasicDropdown({
     )
   ] });
 }
+const IconUpload = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 9l5 -5l5 5" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 4l0 12" })
+      ]
+    }
+  );
+};
+const IconTrash = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 7l16 0" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 11l0 6" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 11l0 6" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" })
+      ]
+    }
+  );
+};
 const ALLOWED_MIME_TYPES = {
   // Documents
   "application/pdf": [".pdf"],
@@ -2722,6 +2692,71 @@ async function validateMagicNumber(file, expectedMimeType) {
     reader.readAsArrayBuffer(file.slice(0, HEADER_BYTES));
   });
 }
+const IconRotateClockwise = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" })
+      ]
+    }
+  );
+};
+const IconCircleX = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 10l4 4m0 -4l-4 4" })
+      ]
+    }
+  );
+};
+const IconCircleCheck = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 12l2 2l4 -4" })
+      ]
+    }
+  );
+};
 function FileUpload({
   label,
   title = "Unggah File",
@@ -2995,7 +3030,7 @@ function FileUpload({
             children: [
               /* @__PURE__ */ jsxs("div", { className: "ina-file-upload__file-indicator", children: [
                 uploadedFile.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--uploading", children: /* @__PURE__ */ jsx(
-                  IconLoader2,
+                  IconRotateClockwise,
                   {
                     size: 20,
                     className: "ina-file-upload__file-icon--spinning"
@@ -3113,6 +3148,78 @@ function FileUpload({
     ] }, index)) })
   ] });
 }
+const IconFile = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
+        /* @__PURE__ */ jsx("path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" })
+      ]
+    }
+  );
+};
+const IconFileTypePdf = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" }),
+        /* @__PURE__ */ jsx("path", { d: "M17 18h2" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 15h-3v6" }),
+        /* @__PURE__ */ jsx("path", { d: "M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1" })
+      ]
+    }
+  );
+};
+const IconPhoto = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 8h.01" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" }),
+        /* @__PURE__ */ jsx("path", { d: "M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" })
+      ]
+    }
+  );
+};
 function SingleFileUpload({
   title = "Unggah File",
   description = "Description",
@@ -3511,6 +3618,28 @@ function FieldInputTable({
     ] })
   ] });
 }
+const IconSearch = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 21l-6 -6" })
+      ]
+    }
+  );
+};
 function onlyDecimalNumber(event, ...ignore) {
   const ASCIICode = event.which ? event.which : event.keyCode;
   const key = event.key;
@@ -3586,7 +3715,7 @@ function InputSearch({
   disabled = false
 }) {
   const [inputValue, setInputValue] = useState(value);
-  const [debouncedValue] = a(inputValue, debounce);
+  const [debouncedValue] = l(inputValue, debounce);
   const handleChangeInput = (event) => {
     const { value: newValue } = event.target;
     if (onlyAlphanumeric(newValue) || newValue === "") {
@@ -3803,6 +3932,71 @@ function Modal({
   );
   return createPortal(modal, portalTarget);
 }
+const IconChevronLeft = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 6l-6 6l6 6" })
+      ]
+    }
+  );
+};
+const IconChevronsLeft = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M11 7l-5 5l5 5" }),
+        /* @__PURE__ */ jsx("path", { d: "M17 7l-5 5l5 5" })
+      ]
+    }
+  );
+};
+const IconChevronsRight = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 7l5 5l-5 5" }),
+        /* @__PURE__ */ jsx("path", { d: "M13 7l5 5l-5 5" })
+      ]
+    }
+  );
+};
 function Pagination({
   currentPage,
   totalPages,
@@ -4083,6 +4277,51 @@ function TableProgressBar({
     }
   ) });
 }
+const IconEye = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" })
+      ]
+    }
+  );
+};
+const IconEyeOff = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M10.585 10.587a2 2 0 0 0 2.829 2.828" }),
+        /* @__PURE__ */ jsx("path", { d: "M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 3l18 18" })
+      ]
+    }
+  );
+};
 function PasswordInput({
   value,
   onChange,
@@ -4104,7 +4343,7 @@ function PasswordInput({
 }) {
   const [inner, setInner] = useState(value);
   const [show, setShow] = useState(false);
-  const [debounced] = a(inner, debounce);
+  const [debounced] = l(inner, debounce);
   const isFirstRun = useRef(true);
   useEffect(() => {
     setInner(value);
@@ -5826,7 +6065,13 @@ const SelectDropdown = ({
                     }),
                     filteredOptions.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__empty", children: "No results" }),
                     loading && /* @__PURE__ */ jsxs("div", { className: "ina-select-dropdown__loading", children: [
-                      /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__loading-spinner", children: /* @__PURE__ */ jsx(IconLoader2, { size: 20 }) }),
+                      /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__loading-spinner", children: /* @__PURE__ */ jsx(
+                        IconRotateClockwise,
+                        {
+                          size: 20,
+                          className: "ina-select-dropdown__loading-icon--spinning"
+                        }
+                      ) }),
                       /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__loading-text", children: "Loading..." })
                     ] })
                   ]
@@ -6030,6 +6275,52 @@ function Spinner({
     ] })
   ] });
 }
+const IconArrowNarrowUp = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 5l0 14" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 9l-4 -4" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 9l4 -4" })
+      ]
+    }
+  );
+};
+const IconArrowNarrowDown = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 5l0 14" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 15l-4 4" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 15l4 4" })
+      ]
+    }
+  );
+};
 function Table({
   columns,
   fetchData,
@@ -6436,7 +6727,7 @@ function TextArea({
     return value;
   };
   const [inner, setInner] = useState(getInitialValue());
-  const [debounced] = a(inner, debounce);
+  const [debounced] = l(inner, debounce);
   const isFirst = useRef(true);
   const taRef = useRef(null);
   const [rows, setRows] = useState(minRows);
@@ -6717,6 +7008,28 @@ function OneTimePassword({
     )
   ] });
 }
+const IconClock = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 3" })
+      ]
+    }
+  );
+};
 const TimePicker = forwardRef(
   ({
     defaultValue = "",
@@ -7442,6 +7755,49 @@ function Tooltip({
     /* @__PURE__ */ jsx("div", { className: contentClasses, role: "tooltip", children: renderContent() })
   ] });
 }
+const IconSun = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" })
+      ]
+    }
+  );
+};
+const IconMoon = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" })
+      ]
+    }
+  );
+};
 function ThemeToggle({
   className = "",
   size = "md",
@@ -7625,25 +7981,23 @@ var isPlainObject = (tempObject) => {
 };
 var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
 function cloneObject(data) {
-  let copy;
-  const isArray = Array.isArray(data);
-  const isFileListInstance = typeof FileList !== "undefined" ? data instanceof FileList : false;
   if (data instanceof Date) {
-    copy = new Date(data);
-  } else if (!(isWeb && (data instanceof Blob || isFileListInstance)) && (isArray || isObject(data))) {
-    copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
-    if (!isArray && !isPlainObject(data)) {
-      copy = data;
-    } else {
-      for (const key in data) {
-        if (data.hasOwnProperty(key)) {
-          copy[key] = cloneObject(data[key]);
-        }
-      }
-    }
-  } else {
+    return new Date(data);
+  }
+  const isFileListInstance = typeof FileList !== "undefined" && data instanceof FileList;
+  if (isWeb && (data instanceof Blob || isFileListInstance)) {
+    return data;
+  }
+  const isArray = Array.isArray(data);
+  if (!isArray && !(isObject(data) && isPlainObject(data))) {
     return data;
   }
+  const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+  for (const key in data) {
+    if (Object.prototype.hasOwnProperty.call(data, key)) {
+      copy[key] = cloneObject(data[key]);
+    }
+  }
   return copy;
 }
 var isKey = (value) => /^\w*$/.test(value);
@@ -7658,6 +8012,7 @@ var get = (object, path, defaultValue) => {
   return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
 };
 var isBoolean = (value) => typeof value === "boolean";
+var isFunction = (value) => typeof value === "function";
 var set = (object, path, value) => {
   let index = -1;
   const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -7698,13 +8053,9 @@ const INPUT_VALIDATION_RULES = {
   required: "required",
   validate: "validate"
 };
-const HookFormContext = React.createContext(null);
-HookFormContext.displayName = "HookFormContext";
-const useFormContext = () => React.useContext(HookFormContext);
-const FormProvider$1 = (props) => {
-  const { children, ...data } = props;
-  return React.createElement(HookFormContext.Provider, { value: data }, children);
-};
+const HookFormControlContext = React.createContext(null);
+HookFormControlContext.displayName = "HookFormControlContext";
+const useFormControlContext = () => React.useContext(HookFormControlContext);
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
   const result = {
     defaultValues: control._defaultValues
@@ -7725,8 +8076,8 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
 };
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function useFormState(props) {
-  const methods = useFormContext();
-  const { control = methods.control, disabled, name, exact } = props || {};
+  const formControl = useFormControlContext();
+  const { control = formControl, disabled, name, exact } = props || {};
   const [formState, updateFormState] = React.useState(control._formState);
   const _localProxyFormState = React.useRef({
     isDirty: false,
@@ -7769,10 +8120,10 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new WeakSet()) {
   if (isPrimitive(object1) || isPrimitive(object2)) {
-    return object1 === object2;
+    return Object.is(object1, object2);
   }
   if (isDateObject(object1) && isDateObject(object2)) {
-    return object1.getTime() === object2.getTime();
+    return Object.is(object1.getTime(), object2.getTime());
   }
   const keys1 = Object.keys(object1);
   const keys2 = Object.keys(object2);
@@ -7791,7 +8142,7 @@ function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new Wea
     }
     if (key !== "ref") {
       const val2 = object2[key];
-      if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : val1 !== val2) {
+      if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : !Object.is(val1, val2)) {
         return false;
       }
     }
@@ -7799,53 +8150,81 @@ function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new Wea
   return true;
 }
 function useWatch(props) {
-  const methods = useFormContext();
-  const { control = methods.control, name, defaultValue, disabled, exact, compute } = props || {};
+  const formControl = useFormControlContext();
+  const { control = formControl, name, defaultValue, disabled, exact, compute } = props || {};
   const _defaultValue = React.useRef(defaultValue);
   const _compute = React.useRef(compute);
   const _computeFormValues = React.useRef(void 0);
+  const _prevControl = React.useRef(control);
+  const _prevName = React.useRef(name);
   _compute.current = compute;
-  const defaultValueMemo = React.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
-  const [value, updateValue] = React.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
-  useIsomorphicLayoutEffect(() => control._subscribe({
-    name,
-    formState: {
-      values: true
-    },
-    exact,
-    callback: (formState) => {
-      if (!disabled) {
-        const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
-        if (_compute.current) {
-          const computedFormValues = _compute.current(formValues);
-          if (!deepEqual(computedFormValues, _computeFormValues.current)) {
-            updateValue(computedFormValues);
-            _computeFormValues.current = computedFormValues;
-          }
-        } else {
-          updateValue(formValues);
+  const [value, updateValue] = React.useState(() => {
+    const defaultValue2 = control._getWatch(name, _defaultValue.current);
+    return _compute.current ? _compute.current(defaultValue2) : defaultValue2;
+  });
+  const getCurrentOutput = React.useCallback((values) => {
+    const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+    return _compute.current ? _compute.current(formValues) : formValues;
+  }, [control._formValues, control._names, name]);
+  const refreshValue = React.useCallback((values) => {
+    if (!disabled) {
+      const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+      if (_compute.current) {
+        const computedFormValues = _compute.current(formValues);
+        if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+          updateValue(computedFormValues);
+          _computeFormValues.current = computedFormValues;
         }
+      } else {
+        updateValue(formValues);
       }
     }
-  }), [control, disabled, name, exact]);
+  }, [control._formValues, control._names, disabled, name]);
+  useIsomorphicLayoutEffect(() => {
+    if (_prevControl.current !== control || !deepEqual(_prevName.current, name)) {
+      _prevControl.current = control;
+      _prevName.current = name;
+      refreshValue();
+    }
+    return control._subscribe({
+      name,
+      formState: {
+        values: true
+      },
+      exact,
+      callback: (formState) => {
+        refreshValue(formState.values);
+      }
+    });
+  }, [control, exact, name, refreshValue]);
   React.useEffect(() => control._removeUnmounted());
-  return value;
+  const controlChanged = _prevControl.current !== control;
+  const prevName = _prevName.current;
+  const computedOutput = React.useMemo(() => {
+    if (disabled) {
+      return null;
+    }
+    const nameChanged = !controlChanged && !deepEqual(prevName, name);
+    const shouldReturnImmediate = controlChanged || nameChanged;
+    return shouldReturnImmediate ? getCurrentOutput() : null;
+  }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
+  return computedOutput !== null ? computedOutput : value;
 }
 function useController(props) {
-  const methods = useFormContext();
-  const { name, disabled, control = methods.control, shouldUnregister, defaultValue } = props;
+  const formControl = useFormControlContext();
+  const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true } = props;
   const isArrayField = isNameInFieldArray(control._names.array, name);
   const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
   const value = useWatch({
     control,
     name,
     defaultValue: defaultValueMemo,
-    exact: true
+    exact
   });
   const formState = useFormState({
     control,
     name,
-    exact: true
+    exact
   });
   const _props = React.useRef(props);
   const _previousNameRef = React.useRef(void 0);
@@ -7893,12 +8272,12 @@ function useController(props) {
   }), [name, control._formValues]);
   const ref = React.useCallback((elm) => {
     const field2 = get(control._fields, name);
-    if (field2 && elm) {
+    if (field2 && field2._f && elm) {
       field2._f.ref = {
-        focus: () => elm.focus && elm.focus(),
-        select: () => elm.select && elm.select(),
-        setCustomValidity: (message) => elm.setCustomValidity(message),
-        reportValidity: () => elm.reportValidity()
+        focus: () => isFunction(elm.focus) && elm.focus(),
+        select: () => isFunction(elm.select) && elm.select(),
+        setCustomValidity: (message) => isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
+        reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity()
       };
     }
   }, [control._fields, name]);
@@ -7953,6 +8332,50 @@ function useController(props) {
   }), [field, formState, fieldState]);
 }
 const Controller = (props) => props.render(useController(props));
+const HookFormContext = React.createContext(null);
+HookFormContext.displayName = "HookFormContext";
+const FormProvider$1 = (props) => {
+  const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe } = props;
+  return React.createElement(
+    HookFormContext.Provider,
+    { value: React.useMemo(() => ({
+      watch,
+      getValues,
+      getFieldState,
+      setError,
+      clearErrors,
+      setValue,
+      trigger,
+      formState,
+      resetField,
+      reset,
+      handleSubmit,
+      unregister,
+      control,
+      register,
+      setFocus,
+      subscribe
+    }), [
+      clearErrors,
+      control,
+      formState,
+      getFieldState,
+      getValues,
+      handleSubmit,
+      register,
+      reset,
+      resetField,
+      setError,
+      setFocus,
+      setValue,
+      subscribe,
+      trigger,
+      unregister,
+      watch
+    ]) },
+    React.createElement(HookFormControlContext.Provider, { value: control }, children)
+  );
+};
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria ? {
   ...errors[name],
   types: {
@@ -8008,7 +8431,6 @@ function extractFormValues(fieldsState, formValues) {
 }
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 var isFileInput = (element) => element.type === "file";
-var isFunction = (value) => typeof value === "function";
 var isHTMLElement = (value) => {
   if (!isWeb) {
     return false;
@@ -8062,10 +8484,11 @@ function isTraversable(value) {
 }
 function markFieldsDirty(data, fields = {}) {
   for (const key in data) {
-    if (isTraversable(data[key])) {
-      fields[key] = Array.isArray(data[key]) ? [] : {};
-      markFieldsDirty(data[key], fields[key]);
-    } else if (!isNullOrUndefined(data[key])) {
+    const value = data[key];
+    if (isTraversable(value)) {
+      fields[key] = Array.isArray(value) ? [] : {};
+      markFieldsDirty(value, fields[key]);
+    } else if (!isUndefined(value)) {
       fields[key] = true;
     }
   }
@@ -8076,14 +8499,16 @@ function getDirtyFields(data, formValues, dirtyFieldsFromValues) {
     dirtyFieldsFromValues = markFieldsDirty(formValues);
   }
   for (const key in data) {
-    if (isTraversable(data[key])) {
+    const value = data[key];
+    if (isTraversable(value)) {
       if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
-        dirtyFieldsFromValues[key] = markFieldsDirty(data[key], Array.isArray(data[key]) ? [] : {});
+        dirtyFieldsFromValues[key] = markFieldsDirty(value, Array.isArray(value) ? [] : {});
       } else {
-        getDirtyFields(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
+        getDirtyFields(value, isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
       }
     } else {
-      dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+      const formValue = formValues[key];
+      dirtyFieldsFromValues[key] = !deepEqual(value, formValue);
     }
   }
   return dirtyFieldsFromValues;
@@ -8435,7 +8860,8 @@ function createFormControl(props = {}) {
   let _state = {
     action: false,
     mount: false,
-    watch: false
+    watch: false,
+    keepIsValid: false
   };
   let _names = {
     mount: /* @__PURE__ */ new Set(),
@@ -8446,7 +8872,7 @@ function createFormControl(props = {}) {
   };
   let delayErrorCallback;
   let timer = 0;
-  const _proxyFormState = {
+  const defaultProxyFormState = {
     isDirty: false,
     dirtyFields: false,
     validatingFields: false,
@@ -8455,6 +8881,9 @@ function createFormControl(props = {}) {
     isValid: false,
     errors: false
   };
+  const _proxyFormState = {
+    ...defaultProxyFormState
+  };
   let _proxySubscribeFormState = {
     ..._proxyFormState
   };
@@ -8468,8 +8897,17 @@ function createFormControl(props = {}) {
     timer = setTimeout(callback, wait);
   };
   const _setValid = async (shouldUpdateValid) => {
+    if (_state.keepIsValid) {
+      return;
+    }
     if (!_options.disabled && (_proxyFormState.isValid || _proxySubscribeFormState.isValid || shouldUpdateValid)) {
-      const isValid = _options.resolver ? isEmptyObject((await _runSchema()).errors) : await executeBuiltInValidation(_fields, true);
+      let isValid;
+      if (_options.resolver) {
+        isValid = isEmptyObject((await _runSchema()).errors);
+        _updateIsValidating();
+      } else {
+        isValid = await executeBuiltInValidation(_fields, true);
+      }
       if (isValid !== _formState.isValid) {
         _subjects.state.next({
           isValid
@@ -8538,7 +8976,7 @@ function createFormControl(props = {}) {
     if (field) {
       const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
       isUndefined(defaultValue) || ref && ref.defaultChecked || shouldSkipSetValueAs ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) : setFieldValue(name, defaultValue);
-      _state.mount && _setValid();
+      _state.mount && !_state.action && _setValid();
     }
   };
   const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
@@ -8600,11 +9038,11 @@ function createFormControl(props = {}) {
   const _runSchema = async (name) => {
     _updateIsValidating(name, true);
     const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
-    _updateIsValidating(name);
     return result;
   };
   const executeSchemaAndUpdateState = async (names) => {
     const { errors } = await _runSchema(names);
+    _updateIsValidating(names);
     if (names) {
       for (const name of names) {
         const error = get(errors, name);
@@ -8634,7 +9072,7 @@ function createFormControl(props = {}) {
           }
           if (fieldError[_f.name]) {
             context.valid = false;
-            if (shouldOnlyCheckValid) {
+            if (shouldOnlyCheckValid || props.shouldUseNativeValidation) {
               break;
             }
           }
@@ -8728,11 +9166,18 @@ function createFormControl(props = {}) {
     } else {
       field && !field._f && !isNullOrUndefined(cloneValue) ? setValues(name, cloneValue, options) : setFieldValue(name, cloneValue, options);
     }
-    isWatched(name, _names) && _subjects.state.next({ ..._formState, name });
-    _subjects.state.next({
-      name: _state.mount ? name : void 0,
-      values: cloneObject(_formValues)
-    });
+    if (isWatched(name, _names)) {
+      _subjects.state.next({
+        ..._formState,
+        name,
+        values: cloneObject(_formValues)
+      });
+    } else {
+      _subjects.state.next({
+        name: _state.mount ? name : void 0,
+        values: cloneObject(_formValues)
+      });
+    }
   };
   const onChange = async (event) => {
     _state.mount = true;
@@ -8783,6 +9228,7 @@ function createFormControl(props = {}) {
       !isBlurEvent && watched && _subjects.state.next({ ..._formState });
       if (_options.resolver) {
         const { errors } = await _runSchema([name]);
+        _updateIsValidating([name]);
         _updateIsFieldValueUpdated(fieldValue);
         if (isFieldValueUpdated) {
           const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
@@ -8903,7 +9349,10 @@ function createFormControl(props = {}) {
     };
     return _subscribe({
       ...props2,
-      formState: _proxySubscribeFormState
+      formState: {
+        ...defaultProxyFormState,
+        ...props2.formState
+      }
     });
   };
   const unregister = (name, options = {}) => {
@@ -8931,7 +9380,11 @@ function createFormControl(props = {}) {
   };
   const _setDisabledField = ({ disabled, name }) => {
     if (isBoolean(disabled) && _state.mount || !!disabled || _names.disabled.has(name)) {
+      const wasDisabled = _names.disabled.has(name);
+      const isDisabled = !!disabled;
+      const disabledStateChanged = wasDisabled !== isDisabled;
       disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
+      disabledStateChanged && _state.mount && !_state.action && _setValid();
     }
   };
   const register = (name, options = {}) => {
@@ -9031,6 +9484,7 @@ function createFormControl(props = {}) {
     });
     if (_options.resolver) {
       const { errors, values } = await _runSchema();
+      _updateIsValidating();
       _formState.errors = errors;
       fieldValues = cloneObject(values);
     } else {
@@ -9106,7 +9560,14 @@ function createFormControl(props = {}) {
           ...Object.keys(getDirtyFields(_defaultValues, _formValues))
         ]);
         for (const fieldName of Array.from(fieldsToCheck)) {
-          get(_formState.dirtyFields, fieldName) ? set(values, fieldName, get(_formValues, fieldName)) : setValue(fieldName, get(values, fieldName));
+          const isDirty = get(_formState.dirtyFields, fieldName);
+          const existingValue = get(_formValues, fieldName);
+          const newValue = get(values, fieldName);
+          if (isDirty && !isUndefined(existingValue)) {
+            set(values, fieldName, existingValue);
+          } else if (!isDirty && !isUndefined(newValue)) {
+            setValue(fieldName, newValue);
+          }
         }
       } else {
         if (isWeb && isUndefined(formValues)) {
@@ -9149,8 +9610,13 @@ function createFormControl(props = {}) {
       watchAll: false,
       focus: ""
     };
-    _state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid || !!keepStateOptions.keepDirtyValues;
+    _state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid || !!keepStateOptions.keepDirtyValues || !_options.shouldUnregister && !isEmptyObject(values);
     _state.watch = !!_options.shouldUnregister;
+    _state.keepIsValid = !!keepStateOptions.keepIsValid;
+    _state.action = false;
+    if (!keepStateOptions.keepErrors) {
+      _formState.errors = {};
+    }
     _subjects.state.next({
       submitCount: keepStateOptions.keepSubmitCount ? _formState.submitCount : 0,
       isDirty: isEmptyResetValues ? false : keepStateOptions.keepDirty ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual(formValues, _defaultValues)),
@@ -9163,15 +9629,17 @@ function createFormControl(props = {}) {
       defaultValues: _defaultValues
     });
   };
-  const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues) ? formValues(_formValues) : formValues, keepStateOptions);
+  const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues) ? formValues(_formValues) : formValues, { ..._options.resetOptions, ...keepStateOptions });
   const setFocus = (name, options = {}) => {
     const field = get(_fields, name);
     const fieldReference = field && field._f;
     if (fieldReference) {
       const fieldRef = fieldReference.refs ? fieldReference.refs[0] : fieldReference.ref;
       if (fieldRef.focus) {
-        fieldRef.focus();
-        options.shouldSelect && isFunction(fieldRef.select) && fieldRef.select();
+        setTimeout(() => {
+          fieldRef.focus();
+          options.shouldSelect && isFunction(fieldRef.select) && fieldRef.select();
+        });
       }
     }
   };
@@ -9196,6 +9664,7 @@ function createFormControl(props = {}) {
       setError,
       _subscribe,
       _runSchema,
+      _updateIsValidating,
       _focusError,
       _getWatch,
       _getDirty,
@@ -9347,11 +9816,15 @@ function useForm$1(props = {}) {
     }
   }, [control, formState.isDirty]);
   React.useEffect(() => {
+    var _a;
     if (props.values && !deepEqual(props.values, _values.current)) {
       control._reset(props.values, {
         keepFieldsRef: true,
         ...control._options.resetOptions
       });
+      if (!((_a = control._options.resetOptions) === null || _a === void 0 ? void 0 : _a.keepIsValid)) {
+        control._setValid();
+      }
       _values.current = props.values;
       updateFormState((state) => ({ ...state }));
     } else {
@@ -9369,7 +9842,7 @@ function useForm$1(props = {}) {
     }
     control._removeUnmounted();
   });
-  _formControl.current.formState = getProxyFormState(formState, control);
+  _formControl.current.formState = React.useMemo(() => getProxyFormState(formState, control), [control, formState]);
   return _formControl.current;
 }
 function useForm(options) {
@@ -9390,6 +9863,32 @@ function FormField({
     }
   );
 }
+const IconCalendar = ({ size = 24, stroke = 2, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: stroke,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 3v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 3v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 11h16" }),
+        /* @__PURE__ */ jsx("path", { d: "M11 15h1" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 15v3" })
+      ]
+    }
+  );
+};
 function YearPicker({
   value,
   defaultValue,
@@ -11128,8 +11627,8 @@ function MultipleChoiceGrid({
   disabled = false,
   name = "multiple-choice-grid"
 }) {
-  const sortedColumns = [...columns].sort((a2, b) => a2.order - b.order);
-  const sortedRows = [...rows].sort((a2, b) => a2.order - b.order);
+  const sortedColumns = [...columns].sort((a, b) => a.order - b.order);
+  const sortedRows = [...rows].sort((a, b) => a.order - b.order);
   const handleSelection = useCallback(
     (rowId, columnId) => {
       if (disabled) return;