@konstructio/ui 0.1.2-alpha.105 → 0.1.2-alpha.107

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.105",
+  "version": "0.1.2-alpha.107",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -92,19 +92,19 @@
     "@radix-ui/react-visually-hidden": "^1.2.11",
     "@react-input/mask": "^2.0.4",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.8",
+    "@tanstack/react-virtual": "^3.14.10",
     "chart.js": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "countries-and-timezones": "^3.9.0",
+    "countries-and-timezones": "^3.10.0",
     "country-flag-icons": "^1.6.20",
     "country-locale-map": "^1.9.13",
-    "google-libphonenumber": "^3.2.44",
+    "google-libphonenumber": "^3.2.46",
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.8",
-    "lucide-react": "^1.27.0",
-    "motion": "^12.42.2",
+    "lucide-react": "^1.34.0",
+    "motion": "^13.1.1",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^10.0.1",
     "react-feather": "^2.0.10",
@@ -145,50 +145,50 @@
     }
   },
   "devDependencies": {
-    "@faker-js/faker": "^10.5.0",
+    "@faker-js/faker": "^10.6.0",
     "@rollup/plugin-alias": "^6.0.0",
-    "@storybook/addon-docs": "^10.5.5",
-    "@storybook/addon-links": "^10.5.5",
-    "@storybook/react-vite": "^10.5.5",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-links": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
     "@tailwindcss/vite": "^4.3.3",
-    "@tanstack/react-query": "^5.101.4",
-    "@testing-library/jest-dom": "^7.0.0",
+    "@tanstack/react-query": "^5.102.2",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/google-libphonenumber": "^7.4.30",
+    "@testing-library/user-event": "^14.6.6",
+    "@types/google-libphonenumber": "^7.4.31",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.24",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.65.0",
-    "@typescript-eslint/parser": "^8.65.0",
+    "@types/lodash": "^4.17.25",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@typescript-eslint/eslint-plugin": "^8.67.0",
+    "@typescript-eslint/parser": "^8.67.0",
     "@vitejs/plugin-react": "^6.0.3",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.11",
     "autoprefixer": "^10.5.4",
     "eslint": "^9.39.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.3",
-    "eslint-plugin-storybook": "^10.5.5",
+    "eslint-plugin-react-refresh": "^0.5.4",
+    "eslint-plugin-storybook": "^10.5.10",
     "eslint-plugin-vitest": "^0.5.4",
     "glob": "^13.0.6",
     "husky": "^9.1.7",
     "jest-axe": "^11.0.0",
-    "jsdom": "^30.0.0",
+    "jsdom": "^30.0.1",
     "lodash": "^4.18.1",
-    "postcss": "^8.5.23",
+    "postcss": "^8.5.26",
     "prettier": "^3.9.6",
     "rimraf": "^6.1.3",
-    "storybook": "^10.5.5",
+    "storybook": "^10.5.10",
     "tailwindcss": "^4.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.3",
-    "vite": "^8.1.5",
+    "vite": "^8.2.2",
     "vite-plugin-dts": "^5.0.3",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^5.2.0",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   },
   "overrides": {
     "storybook": "$storybook",

package/dist/Input-Cf44DzfE.js

@@ -1,188 +0,0 @@
-import { o as W } from "./rolldown-runtime-Ck3dxwZt.js";
-import { t as $ } from "./prop-types-CfEYxTbR.js";
-import { t as i } from "./utils-Cx-WzRZF.js";
-import { SearchIcon as S } from "./assets/icons/components/Search.js";
-import { WarningIcon as T } from "./assets/icons/components/Warning.js";
-import { Typography as m } from "./components/Typography/Typography.js";
-import { inputVariants as M } from "./components/Input/Input.variants.js";
-import p, { forwardRef as y, useId as C, useRef as R, useState as A } from "react";
-import { jsx as s, jsxs as h } from "react/jsx-runtime";
-var l = /* @__PURE__ */ W($());
-function g() {
-  return g = Object.assign || function(t) {
-    for (var r = 1; r < arguments.length; r++) {
-      var n = arguments[r];
-      for (var e in n) Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
-    }
-    return t;
-  }, g.apply(this, arguments);
-}
-function B(t, r) {
-  if (t == null) return {};
-  var n = q(t, r), e, a;
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(t);
-    for (a = 0; a < o.length; a++)
-      e = o[a], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
-  }
-  return n;
-}
-function q(t, r) {
-  if (t == null) return {};
-  var n = {}, e = Object.keys(t), a, o;
-  for (o = 0; o < e.length; o++)
-    a = e[o], !(r.indexOf(a) >= 0) && (n[a] = t[a]);
-  return n;
-}
-var x = y(function(t, r) {
-  var n = t.color, e = n === void 0 ? "currentColor" : n, a = t.size, o = a === void 0 ? 24 : a, c = B(t, ["color", "size"]);
-  return /* @__PURE__ */ p.createElement("svg", g({
-    ref: r,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: e,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ p.createElement("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), /* @__PURE__ */ p.createElement("line", {
-    x1: "1",
-    y1: "1",
-    x2: "23",
-    y2: "23"
-  }));
-});
-x.propTypes = {
-  color: l.default.string,
-  size: l.default.oneOfType([l.default.string, l.default.number])
-};
-x.displayName = "EyeOff";
-function v() {
-  return v = Object.assign || function(t) {
-    for (var r = 1; r < arguments.length; r++) {
-      var n = arguments[r];
-      for (var e in n) Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
-    }
-    return t;
-  }, v.apply(this, arguments);
-}
-function D(t, r) {
-  if (t == null) return {};
-  var n = F(t, r), e, a;
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(t);
-    for (a = 0; a < o.length; a++)
-      e = o[a], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
-  }
-  return n;
-}
-function F(t, r) {
-  if (t == null) return {};
-  var n = {}, e = Object.keys(t), a, o;
-  for (o = 0; o < e.length; o++)
-    a = e[o], !(r.indexOf(a) >= 0) && (n[a] = t[a]);
-  return n;
-}
-var w = y(function(t, r) {
-  var n = t.color, e = n === void 0 ? "currentColor" : n, a = t.size, o = a === void 0 ? 24 : a, c = D(t, ["color", "size"]);
-  return /* @__PURE__ */ p.createElement("svg", v({
-    ref: r,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: e,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ p.createElement("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), /* @__PURE__ */ p.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3"
-  }));
-});
-w.propTypes = {
-  color: l.default.string,
-  size: l.default.oneOfType([l.default.string, l.default.number])
-};
-w.displayName = "Eye";
-var H = y(({ className: t, error: r, helperText: n, helperTextClassName: e, isRequired: a = !1, isSearch: o = !1, label: c, labelAction: O, labelClassName: j, labelWrapperClassName: k, name: N, theme: E, type: f = "text", ...P }, _) => {
-  const b = C(), z = R(f === "password"), [d, I] = A(() => f !== "password"), u = typeof r == "string" && r.length >= 0, L = d ? w : x;
-  return /* @__PURE__ */ h("div", {
-    className: "flex flex-col gap-2 w-full relative",
-    "data-theme": E,
-    children: [
-      c ? /* @__PURE__ */ h("div", {
-        className: i("flex items-center justify-between", k),
-        children: [/* @__PURE__ */ h(m, {
-          component: "label",
-          variant: "labelLarge",
-          htmlFor: b,
-          className: i("cursor-pointer", "flex", "gap-1", "text-sm", "font-medium", j),
-          children: [
-            c,
-            " ",
-            a && /* @__PURE__ */ s(m, {
-              component: "span",
-              className: i("text-red-600", "dark:text-red-500", "text-xs", "mt-0.5"),
-              children: "*"
-            })
-          ]
-        }), O]
-      }) : null,
-      /* @__PURE__ */ h("div", {
-        className: "relative",
-        children: [
-          o ? /* @__PURE__ */ s("i", {
-            className: i("absolute", "left-2.5", "top-1/2", "-translate-y-1/2", "text-slate-400", "dark:text-metal-400", { "text-red-700": u }),
-            children: /* @__PURE__ */ s(S, { className: "w-5 h-5" })
-          }) : null,
-          /* @__PURE__ */ s("input", {
-            id: c ? b : void 0,
-            ref: _,
-            name: N,
-            type: d ? z.current ? "text" : f : "password",
-            "data-error": u,
-            className: i(M({
-              className: t,
-              variant: u ? "error" : "default"
-            }), {
-              "pr-10": f === "password" || u,
-              "pl-8": o
-            }),
-            ...P
-          }),
-          u ? /* @__PURE__ */ s("i", {
-            className: i("-translate-y-1/2", "absolute", "right-3", "text-red-700", "top-1/2", "dark:text-red-500"),
-            children: /* @__PURE__ */ s(T, { className: "w-5 h-5" })
-          }) : null,
-          f === "password" && !r ? /* @__PURE__ */ s("button", {
-            type: "button",
-            "aria-label": d ? "Hide password" : "Show password",
-            className: i("-translate-y-1/2", "absolute", "cursor-pointer", "right-3", "text-slate-400", "top-1/2"),
-            onClick: () => I(!d),
-            children: /* @__PURE__ */ s(L, { className: "w-5 h-5" })
-          }) : null
-        ]
-      }),
-      r ? /* @__PURE__ */ s(m, {
-        component: "span",
-        className: i("text-xs", "tracking-normal", "text-red-700", "dark:text-red-400"),
-        children: r
-      }) : null,
-      !r && n ? /* @__PURE__ */ s(m, {
-        component: "span",
-        variant: "body1",
-        className: i("text-xs", "text-slate-600", "dark:text-slate-200", "select-none", "tracking-normal", e),
-        children: n
-      }) : null
-    ]
-  });
-});
-H.displayName = "KonstructInput";
-export {
-  H as t
-};

package/dist/Switch-aPhL5rNG.js

@@ -1,196 +0,0 @@
-import { a as H } from "./dist-xCbHbMLA.js";
-import { t as y } from "./dist-CCdbu9GU.js";
-import { t as x } from "./utils-Cx-WzRZF.js";
-import { i as D, r as $, t as G } from "./dist-D-yS0HN8.js";
-import { Typography as U } from "./components/Typography/Typography.js";
-import { t as V } from "./dist-pWlMx4Fi2.js";
-import { switchVariants as W, thumbVariants as X } from "./components/Switch/Switch.variants.js";
-import * as r from "react";
-import { forwardRef as J, useEffect as K, useId as Q, useImperativeHandle as Y, useRef as Z } from "react";
-import { Fragment as ee, jsx as p, jsxs as E } from "react/jsx-runtime";
-var te = Object.defineProperty, g = (c, s) => te(c, "name", {
-  value: s,
-  configurable: !0
-}), T = "Switch", [re, ve] = D(T), [ne, N] = re(T);
-function q(c) {
-  const { __scopeSwitch: s, checked: h, children: n, defaultChecked: a, disabled: o, form: e, name: d, onCheckedChange: t, required: i, value: w = "on", internal_do_not_use_render: m } = c, [u, b] = G({
-    prop: h,
-    defaultProp: a ?? !1,
-    onChange: t,
-    caller: T
-  }), [S, l] = r.useState(null), [v, k] = r.useState(null), R = r.useRef(!1), [f, C] = r.useReducer((P) => P + 1, 0), I = {
-    checked: u,
-    setChecked: b,
-    disabled: o,
-    control: S,
-    setControl: l,
-    name: d,
-    form: e,
-    value: w,
-    hasConsumerStoppedPropagationRef: R,
-    userInteractionCount: f,
-    onUserInteraction: C,
-    required: i,
-    defaultChecked: a,
-    isFormControl: S ? !!e || !!S.closest("form") : !0,
-    bubbleInput: v,
-    setBubbleInput: k
-  };
-  return /* @__PURE__ */ p(ne, {
-    scope: s,
-    ...I,
-    children: L(m) ? m(I) : n
-  });
-}
-g(q, "SwitchProvider");
-var oe = "SwitchTrigger", ce = /* @__PURE__ */ r.forwardRef(/* @__PURE__ */ g(function({ __scopeSwitch: s, onClick: h, ...n }, a) {
-  const { control: o, form: e, value: d, disabled: t, checked: i, required: w, setControl: m, setChecked: u, hasConsumerStoppedPropagationRef: b, onUserInteraction: S, isFormControl: l, bubbleInput: v } = N(oe, s), k = H(a, m), R = r.useRef(i);
-  return r.useEffect(() => {
-    const f = e ? o?.ownerDocument.getElementById(e) : o?.form;
-    if (f instanceof HTMLFormElement) {
-      const C = /* @__PURE__ */ g(() => u(R.current), "reset");
-      return f.addEventListener("reset", C), () => f.removeEventListener("reset", C);
-    }
-  }, [
-    o,
-    e,
-    u
-  ]), /* @__PURE__ */ p(y.button, {
-    type: "button",
-    role: "switch",
-    "aria-checked": i,
-    "aria-required": w,
-    "data-state": B(i),
-    "data-disabled": t ? "" : void 0,
-    disabled: t,
-    value: d,
-    ...n,
-    ref: k,
-    onClick: $(h, (f) => {
-      S(), u((C) => !C), v && l && (b.current = f.isPropagationStopped(), b.current || f.stopPropagation());
-    })
-  });
-}, "SwitchTrigger")), se = /* @__PURE__ */ r.forwardRef(/* @__PURE__ */ g(function(s, h) {
-  const { __scopeSwitch: n, name: a, checked: o, defaultChecked: e, required: d, disabled: t, value: i, onCheckedChange: w, form: m, ...u } = s;
-  return /* @__PURE__ */ p(q, {
-    __scopeSwitch: n,
-    checked: o,
-    defaultChecked: e,
-    disabled: t,
-    required: d,
-    onCheckedChange: w,
-    name: a,
-    form: m,
-    value: i,
-    internal_do_not_use_render: ({ isFormControl: b }) => /* @__PURE__ */ E(ee, { children: [/* @__PURE__ */ p(ce, {
-      ...u,
-      ref: h,
-      __scopeSwitch: n
-    }), b && /* @__PURE__ */ p(de, { __scopeSwitch: n })] })
-  });
-}, "Switch")), ae = "SwitchThumb", ie = /* @__PURE__ */ r.forwardRef(/* @__PURE__ */ g(function(s, h) {
-  const { __scopeSwitch: n, ...a } = s, o = N(ae, n);
-  return /* @__PURE__ */ p(y.span, {
-    "data-state": B(o.checked),
-    "data-disabled": o.disabled ? "" : void 0,
-    ...a,
-    ref: h
-  });
-}, "SwitchThumb")), ue = "SwitchBubbleInput", de = /* @__PURE__ */ r.forwardRef(/* @__PURE__ */ g(function({ __scopeSwitch: s, onClick: h, ...n }, a) {
-  const { control: o, hasConsumerStoppedPropagationRef: e, userInteractionCount: d, checked: t, defaultChecked: i, required: w, disabled: m, name: u, value: b, form: S, bubbleInput: l, setBubbleInput: v } = N(ue, s), k = H(a, v), R = V(o), f = r.useRef(!1), C = r.useRef(t), I = r.useRef(d);
-  r.useEffect(() => {
-    const _ = l;
-    if (!_) return;
-    const j = window.HTMLInputElement.prototype, F = Object.getOwnPropertyDescriptor(j, "checked").set, M = d !== I.current;
-    I.current = d;
-    const A = C.current !== t;
-    C.current = t;
-    const z = !(M && e.current);
-    if (A && F) {
-      f.current = !M;
-      const O = new Event("click", { bubbles: z });
-      F.call(_, t), _.dispatchEvent(O), f.current = !1;
-    }
-  }, [
-    l,
-    t,
-    e,
-    d
-  ]);
-  const P = r.useRef(t);
-  return /* @__PURE__ */ p(y.input, {
-    type: "checkbox",
-    "aria-hidden": !0,
-    defaultChecked: i ?? P.current,
-    required: w,
-    disabled: m,
-    name: u,
-    value: b,
-    form: S,
-    ...n,
-    tabIndex: -1,
-    ref: k,
-    onClick: $(h, (_) => {
-      f.current && _.stopPropagation();
-    }),
-    style: {
-      ...n.style,
-      ...R,
-      position: "absolute",
-      pointerEvents: "none",
-      opacity: 0,
-      margin: 0,
-      transform: "translateX(-100%)"
-    }
-  });
-}, "SwitchBubbleInput"));
-function L(c) {
-  return typeof c == "function";
-}
-g(L, "isFunction");
-function B(c) {
-  return c ? "checked" : "unchecked";
-}
-g(B, "getState");
-var ke = J(({ alignment: c = "horizontal", className: s, defaultChecked: h, disabled: n = !1, helperText: a, helperTextClassName: o, label: e, labelClassName: d, labelWrapperClassName: t, name: i, theme: w, thumbClassName: m, value: u, onChange: b }, S) => {
-  const l = Z(null), v = Q(), k = i ? `${v}-${i}` : v;
-  return Y(S, () => l.current, [l]), K(() => {
-    l.current && (l.current.value = `${u}`);
-  }, [u]), /* @__PURE__ */ E("div", {
-    className: x("w-full", "flex", "gap-3", c === "vertical" ? "flex-col" : "flex-row", t),
-    "data-theme": w,
-    children: [
-      /* @__PURE__ */ p(se, {
-        id: k,
-        defaultChecked: h,
-        checked: u,
-        onCheckedChange: (R) => b?.(R),
-        className: x(W({ className: s })),
-        "aria-label": e,
-        disabled: n,
-        children: /* @__PURE__ */ p(ie, { className: X({ className: m }) })
-      }),
-      e ? /* @__PURE__ */ E(U, {
-        component: "label",
-        className: x("flex", "flex-col", "text-sm", "dark:text-white", "select-none", d),
-        htmlFor: k,
-        style: { paddingRight: 15 },
-        children: [e, a ? /* @__PURE__ */ p(U, {
-          component: "span",
-          className: x("text-xs", "select-none", "text-slate-600", "dark:text-metal-400", o),
-          children: a
-        }) : null]
-      }) : null,
-      /* @__PURE__ */ p("input", {
-        ref: l,
-        name: i,
-        type: "text",
-        className: "hidden",
-        "aria-hidden": "true"
-      })
-    ]
-  });
-});
-export {
-  ke as t
-};

package/dist/Wrapper-R8fik3ah.js

@@ -1,182 +0,0 @@
-import { t as r } from "./utils-Cx-WzRZF.js";
-import { LoaderIcon as oe } from "./assets/icons/components/Loader.js";
-import { t as se } from "./createLucideIcon-MbzNWCaI.js";
-import { t as ie } from "./chevron-up-Bjpvg6ui.js";
-import { Typography as ce } from "./components/Typography/Typography.js";
-import { useSelectContext as ue } from "./components/Select/contexts/select.hook.js";
-import { List as me } from "./components/Select/components/List/List.js";
-import { inputVariants as fe, labelVariants as pe, selectVariants as de } from "./components/Select/Select.variants.js";
-import { useSelect as xe } from "./components/Select/hooks/useSelect.js";
-import { forwardRef as he, useEffect as we, useId as Ne, useImperativeHandle as ge, useMemo as ve, useRef as h } from "react";
-import { jsx as n, jsxs as i } from "react/jsx-runtime";
-var ye = [["path", {
-  d: "m21 21-4.34-4.34",
-  key: "14j7rj"
-}], ["circle", {
-  cx: "11",
-  cy: "11",
-  r: "8",
-  key: "4ej97u"
-}]], ke = se("search", ye), Se = he(({ additionalOptions: R, className: D, defaultValue: w, disabled: a = !1, error: p, groupedOptions: T, iconClassName: S, inputClassName: E, isInfiniteScrollEnabled: F = !1, isLoading: k, isRequired: N, label: g, labelAction: K, labelClassName: M, labelWrapperClassName: W, listClassName: _, listItemClassName: $, listItemSecondRowClassName: q, name: d, noOptionsText: A, placeholder: v, searchable: C = !1, showSearchIcon: y, theme: H, visibleItems: P, wrapperClassName: U, onFetchMoreOptions: B, onBlur: G, onSearchChange: J, ...I }, Q) => {
-  const j = Ne(), c = h(null), L = h(null), O = h(null), X = h(0), { isOpen: o, options: l, searchTerm: Y, value: s, setCanFilter: Z, setSearchTerm: ee, setValue: u, toggleOpen: te } = ue(), t = ve(() => l.find(({ value: e }) => e === s), [l, s]), { wrapperRef: ae, wrapperInputRef: V, handleOpen: x } = xe({
-    inputRef: c,
-    searchInputRef: L,
-    internalValue: t,
-    onBlur: G
-  }), b = () => {
-    if (!a) {
-      if (o) {
-        te(!1);
-        return;
-      }
-      x();
-    }
-  }, re = (e) => {
-    if (!a) {
-      if (e.key === "ArrowDown") {
-        if (e.preventDefault(), !o) {
-          x();
-          return;
-        }
-        O.current?.querySelector("li")?.focus();
-        return;
-      }
-      e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), b());
-    }
-  }, m = d ? `${j}-${d}` : j;
-  ge(Q, () => c.current, [c]), we(() => {
-    if (w && !s) {
-      const e = l && l.find((f) => f.value === w);
-      e && u(e.value);
-    }
-  }, [
-    w,
-    l,
-    u,
-    s
-  ]);
-  const ne = (e) => {
-    const f = e.target.value;
-    Z(!0), u(""), ee(f ?? ""), J?.(f);
-    const z = l.find((le) => le.value.toLocaleLowerCase() === f.toLocaleLowerCase());
-    u(z ? z.value : t?.value ?? "");
-  };
-  return /* @__PURE__ */ i("div", {
-    ref: ae,
-    className: r("flex flex-col gap-2 w-full relative", U),
-    "data-theme": H,
-    children: [
-      g ? /* @__PURE__ */ i("div", {
-        className: r("flex items-center justify-between", W),
-        children: [/* @__PURE__ */ i("label", {
-          id: m,
-          className: r(pe({ className: M })),
-          htmlFor: m,
-          onClick: () => !a && x(),
-          children: [g, N && /* @__PURE__ */ n("span", {
-            className: "text-red-600 dark:text-red-500 ml-1",
-            children: "*"
-          })]
-        }), K]
-      }) : null,
-      /* @__PURE__ */ i("div", {
-        ref: V,
-        id: m,
-        className: r(de({
-          className: D,
-          hasError: !!p,
-          disabled: a
-        })),
-        role: "combobox",
-        onClick: b,
-        onKeyDown: re,
-        "aria-expanded": o,
-        tabIndex: X.current,
-        "aria-labelledby": m,
-        children: [/* @__PURE__ */ i("div", {
-          className: "flex gap-2.5 items-center flex-1",
-          children: [
-            t?.leftIcon && !y && /* @__PURE__ */ n("span", {
-              className: "w-4 h-4 flex justify-center items-center dark:text-metal-50",
-              children: t.leftIcon
-            }),
-            y && /* @__PURE__ */ n(ke, { className: r("w-4", "h-4", "text-zinc-500", "select-none", "transition-colors", "duration-300", "dark:text-metal-300", "dark:group-focus-within:text-metal-50") }),
-            C ? /* @__PURE__ */ n("input", {
-              ref: L,
-              type: "text",
-              value: o ? Y : t?.label ?? s ?? "",
-              onChange: ne,
-              placeholder: v,
-              className: r(fe({ className: E }), { "text-red-700 placeholder:text-red-700": !!p }),
-              onClick: (e) => {
-                e.stopPropagation(), a || x();
-              },
-              "aria-label": g || v,
-              "aria-labelledby": m,
-              required: N,
-              autoComplete: "off",
-              autoCapitalize: "words",
-              disabled: a,
-              tabIndex: -1,
-              ...I
-            }) : /* @__PURE__ */ i(ce, {
-              variant: "body2",
-              className: r("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
-                "text-red-700": !!p,
-                "select-none": !t,
-                "text-metal-800 dark:text-metal-50": t,
-                "text-metal-400/50 dark:text-metal-50/50": a
-              }, t?.wrapperClassNameOnSelectedValue),
-              children: [
-                t?.label || v,
-                " ",
-                t?.showRightComponentOnselectedValue ? t?.rightComponent : null
-              ]
-            })
-          ]
-        }), k ? /* @__PURE__ */ n(oe, {
-          size: 16,
-          className: "text-metal-400 animate-spin select-none"
-        }) : !y && /* @__PURE__ */ n(ie, {
-          "data-state": o ? "open" : "closed",
-          className: r("w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50", S, {
-            "text-red-700": !!p,
-            "text-metal-400/50 dark:group-focus-within:text-zinc-500": a
-          })
-        })]
-      }),
-      /* @__PURE__ */ n("input", {
-        ref: c,
-        type: "text",
-        name: d,
-        className: "hidden",
-        "aria-hidden": "true",
-        required: N,
-        inert: !0,
-        defaultValue: t?.value ?? s ?? void 0,
-        ...I
-      }),
-      o && /* @__PURE__ */ n(me, {
-        ref: O,
-        additionalOptions: R,
-        className: _,
-        groupedOptions: T,
-        itemClassName: $,
-        name: d,
-        wrapperInputRef: V,
-        inputRef: c,
-        options: l,
-        isLoading: !!k,
-        searchable: C,
-        listItemSecondRowClassName: q,
-        isInfiniteScrollEnabled: F,
-        onFetchMoreOptions: B,
-        noOptionsText: A,
-        visibleItems: P
-      })
-    ]
-  });
-});
-export {
-  Se as t
-};