@konstructio/ui 0.1.2-alpha.112 → 0.1.2-alpha.113

package/dist/{HamburgerTrigger-DjHmNEJD.js → HamburgerTrigger-BgeS_nBA.js}

@@ -1,19 +1,19 @@
 import { o as m } from "./rolldown-runtime-Dw9YIBcH.js";
 import { t as c } from "./prop-types-BCUW56rg.js";
-import { t as g } from "./dist-DX0sBG3Q.js";
-import { t as y } from "./utils-DnIJruo0.js";
-import { hamburgerTriggerVariants as d } from "./components/Sidebar/components/HamburgerTrigger/HamburgerTrigger.variants.js";
+import { t as g } from "./dist-C_jtUTU9.js";
+import { t as d } from "./utils-DnIJruo0.js";
+import { hamburgerTriggerVariants as y } from "./components/Sidebar/components/HamburgerTrigger/HamburgerTrigger.variants.js";
 import a, { forwardRef as v } from "react";
 import { jsx as u, jsxs as b } from "react/jsx-runtime";
-var p = /* @__PURE__ */ m(c());
-function s() {
-  return s = Object.assign || function(r) {
+var s = /* @__PURE__ */ m(c());
+function l() {
+  return l = Object.assign || function(r) {
     for (var n = 1; n < arguments.length; n++) {
       var t = arguments[n];
       for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && (r[e] = t[e]);
     }
     return r;
-  }, s.apply(this, arguments);
+  }, l.apply(this, arguments);
 }
 function h(r, n) {
   if (r == null) return {};
@@ -31,9 +31,9 @@ function x(r, n) {
     o = e[i], !(n.indexOf(o) >= 0) && (t[o] = r[o]);
   return t;
 }
-var l = v(function(r, n) {
+var p = v(function(r, n) {
   var t = r.color, e = t === void 0 ? "currentColor" : t, o = r.size, i = o === void 0 ? 24 : o, f = h(r, ["color", "size"]);
-  return /* @__PURE__ */ a.createElement("svg", s({
+  return /* @__PURE__ */ a.createElement("svg", l({
     ref: n,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
@@ -61,19 +61,19 @@ var l = v(function(r, n) {
     y2: "18"
   }));
 });
-l.propTypes = {
-  color: p.default.string,
-  size: p.default.oneOfType([p.default.string, p.default.number])
+p.propTypes = {
+  color: s.default.string,
+  size: s.default.oneOfType([s.default.string, s.default.number])
 };
-l.displayName = "Menu";
+p.displayName = "Menu";
 var O = ({ isOpen: r, onClick: n, className: t, openNavigationLabel: e = "Open navigation" }) => /* @__PURE__ */ b("button", {
   type: "button",
   "aria-label": e,
   "aria-expanded": r,
   "aria-haspopup": "menu",
-  className: y(d({ className: t })),
+  className: d(y({ className: t })),
   onClick: n,
-  children: [/* @__PURE__ */ u(l, {
+  children: [/* @__PURE__ */ u(p, {
     size: 20,
     "aria-hidden": "true"
   }), /* @__PURE__ */ u(g, { children: e })]

package/dist/Modal-CysTe3zL.js

@@ -0,0 +1,83 @@
+import { t as k } from "./x-Vur_9PXW.js";
+import { t as w } from "./dist-C_jtUTU9.js";
+import { t as h } from "./utils-DnIJruo0.js";
+import { t as A } from "./Combination-CnMM05mt.js";
+import { Body as H } from "./components/Modal/components/Body/Body.js";
+import { Footer as x } from "./components/Modal/components/Footer/Footer.js";
+import { Header as B } from "./components/Modal/components/Header/Header.js";
+import { t as C } from "./es2015-B_07N-UL.js";
+import { buttonCloseVariants as E, modalVariants as R } from "./components/Modal/components/Wrapper/Wrapper.variants.js";
+import { Children as l, isValidElement as m, useEffect as g, useRef as V, useState as j } from "react";
+import { createPortal as D } from "react-dom";
+import { Fragment as S, jsx as a, jsxs as c } from "react/jsx-runtime";
+import { motion as z } from "motion/react";
+var I = ({ ariaLabel: f, ariaLabelledBy: n, buttonCloseClassName: s, children: r, className: p, containerClassName: i, showCloseButton: u = !0, theme: y, transition: o, onClose: d }) => {
+  const b = l.toArray(r).find((e) => m(e) && e.type === t.Header), v = l.toArray(r).find((e) => m(e) && e.type === t.Body), F = l.toArray(r).find((e) => m(e) && e.type === t.Footer), N = l.toArray(r).filter((e) => !m(e) || ![
+    t.Header,
+    t.Body,
+    t.Footer
+  ].includes(e.type));
+  return /* @__PURE__ */ a(A, { children: /* @__PURE__ */ c("div", {
+    className: h("fixed inset-0 grid place-content-center", i),
+    "data-theme": y,
+    children: [/* @__PURE__ */ a("div", {
+      className: "absolute inset-0 bg-black opacity-70 dark:opacity-85 animate-in fade-in-0",
+      onClick: d,
+      role: "presentation"
+    }), /* @__PURE__ */ a(C, {
+      returnFocus: !0,
+      className: "contents",
+      children: /* @__PURE__ */ c(z.div, {
+        className: h(R({ className: p })),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": f,
+        "aria-labelledby": n,
+        layout: "size",
+        transition: o ?? {
+          duration: 0.25,
+          ease: "easeInOut"
+        },
+        children: [
+          b,
+          u && /* @__PURE__ */ c("button", {
+            className: h(E({ className: s })),
+            onClick: d,
+            children: [/* @__PURE__ */ a(k, {}), /* @__PURE__ */ a(w, { children: "Dismiss modal" })]
+          }),
+          v ?? N,
+          F
+        ]
+      })
+    })]
+  }) });
+}, t = ({ isOpen: f, onClose: n, container: s, theme: r, ...p }) => {
+  const i = V(null), [u, y] = j(null);
+  return g(() => {
+    if (!i.current || r || s) return;
+    const o = i.current.closest("[data-theme]");
+    o && y(o);
+  }, [r, s]), g(() => {
+    const o = new AbortController(), d = (b) => {
+      b.code === "Escape" && n?.();
+    };
+    return window.addEventListener("keydown", d, { signal: o.signal }), () => {
+      o.abort();
+    };
+  }, [n]), /* @__PURE__ */ c(S, { children: [/* @__PURE__ */ a("span", {
+    ref: i,
+    "data-testid": "modal-anchor",
+    hidden: !0
+  }), f && D(/* @__PURE__ */ a(I, {
+    ...p,
+    theme: r,
+    onClose: n
+  }), s || u || document.body)] });
+};
+t.Header = B;
+t.Body = H;
+t.Footer = x;
+export {
+  I as n,
+  t
+};

package/dist/Spinner-CTonkSzG.js

@@ -0,0 +1,47 @@
+"use client";
+import { t as f } from "./dist-C_jtUTU9.js";
+import { t } from "./utils-DnIJruo0.js";
+import { Typography as u } from "./components/Typography/Typography.js";
+import { spinnerIconVariants as k, spinnerVariants as g } from "./components/Spinner/Spinner.variants.js";
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+var s = "data:image/svg+xml,%3csvg%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M85.2%2083.9L85.6%2085.1L85.9%2086.5L85.9%2088L85.6%2089.6L85%2091.1L84.1%2092.6L82.9%2094L81.4%2095.2L79.6%2096.2L77.6%2096.9L75.4%2097.2L73.2%2097.2L70.8%2096.7L68.5%2095.9L66.3%2094.6L64.3%2092.9L62.5%2090.9L61%2088.4L60%2085.7L59.3%2082.8L59.2%2079.7L59.5%2076.5L60.4%2073.4L61.9%2070.3L63.9%2067.5L66.4%2065L69.3%2062.8L72.6%2061.1L76.3%2060L80.1%2059.4L84.1%2059.5L88.1%2060.3L92%2061.7L95.8%2063.8L99.2%2066.6L102.1%2069.9L104.6%2073.7L106.4%2078L107.6%2082.6L108%2087.4L107.6%2092.3L106.4%2097.2L104.4%20101.9L101.6%20106.3L98.1%20110.2L93.9%20113.6L89.2%20116.3L84%20118.3L78.5%20119.4L72.7%20119.6L67%20118.8L61.3%20117.1L55.9%20114.5L50.9%20111L46.5%20106.7L42.8%20101.6L39.8%2095.9L37.9%2089.8L36.9%2083.3L36.9%2076.6L38.1%2069.9L40.3%2063.4L43.5%2057.3L47.8%2051.7L53%2046.8L58.9%2042.8L65.5%2039.7L72.6%2037.7L80.1%2036.9L87.6%2037.2L95.1%2038.8L102.3%2041.7L109.1%2045.6L115.2%2050.7L120.4%2056.8L124.7%2063.7L127.9%2071.3L129.8%2079.4L130.5%2087.8L129.7%2096.2L127.6%20104.6L124.2%20112.6L119.5%20120L113.6%20126.6L106.7%20132.2L98.8%20136.8L90.3%20140L81.3%20141.8L72%20142.2L62.7%20141L53.6%20138.4L44.9%20134.3L36.9%20128.7L29.9%20122L24%20114.1L19.3%20105.2L16.1%2095.7L14.4%2085.7L14.4%2075.4L16%2065.2L19.3%2055.3L24.1%2045.9L30.4%2037.4L38%2029.9L46.8%2023.7L56.6%2018.9L67.1%2015.8L78.1%2014.3L89.2%2014.6L100.2%2016.8L110.9%2020.7L120.8%2026.3L129.8%2033.5L137.6%2042.1L144%2051.9L148.8%2062.7L151.8%2074.2L85.2%2083.9Z'%20stroke='url(%23spinner-fade)'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='spinner-fade'%20x1='83.6'%20y1='14.2'%20x2='83.6'%20y2='142.2'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2300FF6F'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e", i = null, o = (L) => typeof L == "number" ? L : null, v = (L) => {
+  if (!(!L || typeof L.getAnimations != "function"))
+    for (const e of L.getAnimations({ subtree: !0 }))
+      i === null && (i = o(e.startTime) ?? o(document.timeline?.currentTime) ?? 0), e.startTime = i;
+}, y = ({ className: L, spinnerClassName: e, textClassName: l, textVariant: m = "subtitle2", text: n, srLabel: c = "Loading", theme: p, size: r, ...d }) => /* @__PURE__ */ h("div", {
+  ref: v,
+  role: "status",
+  "aria-label": "Loading",
+  "data-theme": p,
+  className: t(g({
+    size: r,
+    className: L
+  })),
+  ...d,
+  children: [
+    /* @__PURE__ */ a("span", {
+      "aria-hidden": "true",
+      className: t(k({ size: r }), e),
+      style: {
+        maskImage: `url("${s}")`,
+        maskSize: "contain",
+        maskRepeat: "no-repeat",
+        maskPosition: "center",
+        WebkitMaskImage: `url("${s}")`,
+        WebkitMaskSize: "contain",
+        WebkitMaskRepeat: "no-repeat",
+        WebkitMaskPosition: "center"
+      }
+    }),
+    n && /* @__PURE__ */ a(u, {
+      variant: m,
+      className: t("text-slate-700 dark:text-slate-200", l),
+      children: n
+    }),
+    /* @__PURE__ */ a(f, { children: c })
+  ]
+});
+y.displayName = "KonstructSpinner";
+export {
+  y as t
+};

package/dist/Switch-5cdUxbhX.js

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

package/dist/{Wrapper-MmlrJppS.js → Wrapper-BCi_pLOr.js}

@@ -3,14 +3,14 @@ import { LoaderIcon as he } from "./assets/icons/components/Loader.js";
 import { t as ve } from "./createLucideIcon-C7E_xycG.js";
 import { t as ge } from "./chevron-up-B8hiVgxZ.js";
 import { Typography as we } from "./components/Typography/Typography.js";
-import { i as ye, n as Ce, r as Ne, t as ke } from "./dist-LRkZdylX.js";
+import { i as ye, n as Ce, r as Ne, t as ke } from "./dist-CQSCPpFc.js";
 import { useSelectContext as be } from "./components/Select/contexts/select.hook.js";
 import { List as Ie } from "./components/Select/components/List/List.js";
 import { inputVariants as Oe, labelVariants as ze, selectVariants as De } from "./components/Select/Select.variants.js";
 import { useSelect as je } from "./components/Select/hooks/useSelect.js";
-import { forwardRef as Le, useEffect as Re, useImperativeHandle as Ve, useMemo as Te, useRef as w } from "react";
+import { forwardRef as Le, useEffect as Ve, useImperativeHandle as Re, useMemo as Te, useRef as w } from "react";
 import { jsx as a, jsxs as s } from "react/jsx-runtime";
-var E = {
+var S = {
   name: "search",
   size: 24,
   node: [["path", {
@@ -23,25 +23,25 @@ var E = {
     key: "4ej97u"
   }]]
 };
-E.node;
-var Fe = ve(E), Ge = Le(({ additionalOptions: $, className: B, defaultValue: y, describedBy: b, fieldId: C, disabled: n = !1, error: c, groupedOptions: K, iconClassName: M, inputClassName: W, isInfiniteScrollEnabled: _ = !1, isLoading: I, isPortal: f = !1, isRequired: x, loadingText: q, label: l, labelAction: H, labelClassName: U, labelWrapperClassName: G, listClassName: J, listItemClassName: P, listItemSecondRowClassName: Q, name: O, noOptionsText: X, placeholder: h, portalClassName: Y, searchable: z = !1, showSearchIcon: N, theme: Z, visibleItems: ee, wrapperClassName: te, onFetchMoreOptions: ae, onBlur: re, onSearchChange: ne, ...D }, oe) => {
-  const v = `${C}-label`, j = `${C}-control`, L = `${C}-listbox`, d = w(null), R = w(null), k = w(null), le = w(0), { isOpen: o, options: i, searchTerm: ie, value: u, setCanFilter: se, setSearchTerm: ce, setValue: m, toggleOpen: V } = be(), t = Te(() => i.find(({ value: e }) => e === u), [i, u]), { isInside: ue, wrapperRef: de, wrapperInputRef: T, handleOpen: g } = je({
+S.node;
+var Fe = ve(S), Ue = Le(({ additionalOptions: E, className: $, defaultValue: y, describedBy: b, fieldId: C, disabled: n = !1, error: c, groupedOptions: B, iconClassName: K, inputClassName: M, isInfiniteScrollEnabled: W = !1, isLoading: I, isPortal: f = !1, isRequired: x, loadingText: _, label: l, labelAction: q, labelClassName: H, labelWrapperClassName: U, listClassName: G, listItemClassName: J, listItemSecondRowClassName: Q, name: O, noOptionsText: X, placeholder: h, portalClassName: Y, searchable: z = !1, showSearchIcon: N, theme: Z, visibleItems: ee, wrapperClassName: te, onFetchMoreOptions: ae, onBlur: re, onSearchChange: ne, ...D }, oe) => {
+  const v = `${C}-label`, j = `${C}-control`, L = `${C}-listbox`, d = w(null), V = w(null), k = w(null), le = w(0), { isOpen: o, options: i, searchTerm: ie, value: u, setCanFilter: se, setSearchTerm: ce, setValue: p, toggleOpen: R } = be(), t = Te(() => i.find(({ value: e }) => e === u), [i, u]), { isInside: ue, wrapperRef: de, wrapperInputRef: T, handleOpen: g } = je({
     inputRef: d,
-    searchInputRef: R,
+    searchInputRef: V,
     internalValue: t,
     listRef: k,
     onBlur: re
-  }), me = (e) => {
-    ue(e.relatedTarget) || V(!1);
+  }), pe = (e) => {
+    ue(e.relatedTarget) || R(!1);
   }, F = () => {
     if (!n) {
       if (o) {
-        V(!1);
+        R(!1);
         return;
       }
       g();
     }
-  }, pe = (e) => {
+  }, me = (e) => {
     if (!n) {
       if (e.key === "ArrowDown") {
         if (e.preventDefault(), !o) {
@@ -54,30 +54,30 @@ var Fe = ve(E), Ge = Le(({ additionalOptions: $, className: B, defaultValue: y,
       e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
     }
   };
-  Ve(oe, () => d.current, [d]), Re(() => {
+  Re(oe, () => d.current, [d]), Ve(() => {
     if (y && !u) {
-      const e = i && i.find((p) => p.value === y);
-      e && m(e.value);
+      const e = i && i.find((m) => m.value === y);
+      e && p(e.value);
     }
   }, [
     y,
     i,
-    m,
+    p,
     u
   ]);
   const fe = (e) => {
-    const p = e.target.value;
-    se(!0), m(""), ce(p ?? ""), ne?.(p);
-    const S = i.find((xe) => xe.value.toLocaleLowerCase() === p.toLocaleLowerCase());
-    m(S ? S.value : t?.value ?? "");
+    const m = e.target.value;
+    se(!0), p(""), ce(m ?? ""), ne?.(m);
+    const P = i.find((xe) => xe.value.toLocaleLowerCase() === m.toLocaleLowerCase());
+    p(P ? P.value : t?.value ?? "");
   }, A = /* @__PURE__ */ a(Ie, {
     ref: k,
     id: L,
     labelledBy: l ? v : void 0,
-    additionalOptions: $,
-    className: r(f && "static top-auto mt-0", J),
-    groupedOptions: K,
-    itemClassName: P,
+    additionalOptions: E,
+    className: r(f && "static top-auto mt-0", G),
+    groupedOptions: B,
+    itemClassName: J,
     name: O,
     wrapperInputRef: T,
     inputRef: d,
@@ -85,10 +85,10 @@ var Fe = ve(E), Ge = Le(({ additionalOptions: $, className: B, defaultValue: y,
     isLoading: !!I,
     searchable: z,
     listItemSecondRowClassName: Q,
-    isInfiniteScrollEnabled: _,
+    isInfiniteScrollEnabled: W,
     onFetchMoreOptions: ae,
     noOptionsText: X,
-    loadingText: q,
+    loadingText: _,
     visibleItems: ee
   });
   return /* @__PURE__ */ s("div", {
@@ -96,10 +96,10 @@ var Fe = ve(E), Ge = Le(({ additionalOptions: $, className: B, defaultValue: y,
     className: r("flex flex-col gap-2 w-full relative", te),
     "data-theme": Z,
     children: [l ? /* @__PURE__ */ s("div", {
-      className: r("flex items-center justify-between", G),
+      className: r("flex items-center justify-between", U),
       children: [/* @__PURE__ */ s("label", {
         id: v,
-        className: r(ze({ className: U })),
+        className: r(ze({ className: H })),
         htmlFor: j,
         onClick: () => !n && g(),
         children: [l, x && /* @__PURE__ */ a("span", {
@@ -107,23 +107,23 @@ var Fe = ve(E), Ge = Le(({ additionalOptions: $, className: B, defaultValue: y,
           className: "text-red-600 dark:text-red-500 ml-1",
           children: "*"
         })]
-      }), H]
-    }) : null, /* @__PURE__ */ s(ye, {
+      }), q]
+    }) : null, /* @__PURE__ */ s(ke, {
       open: f && o,
       children: [
-        /* @__PURE__ */ a(ke, {
+        /* @__PURE__ */ a(Ce, {
           asChild: !0,
           children: /* @__PURE__ */ s("div", {
             ref: T,
             id: j,
             className: r(De({
-              className: B,
+              className: $,
               hasError: !!c,
               disabled: n
             })),
             role: "combobox",
             onClick: F,
-            onKeyDown: pe,
+            onKeyDown: me,
             "aria-expanded": o,
             tabIndex: le.current,
             "aria-labelledby": l ? v : void 0,
@@ -143,12 +143,12 @@ var Fe = ve(E), Ge = Le(({ additionalOptions: $, className: B, defaultValue: y,
                 }),
                 N && /* @__PURE__ */ a(Fe, { 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") }),
                 z ? /* @__PURE__ */ a("input", {
-                  ref: R,
+                  ref: V,
                   type: "text",
                   value: o ? ie : t?.label ?? u ?? "",
                   onChange: fe,
                   placeholder: h,
-                  className: r(Oe({ className: W }), { "text-red-700 placeholder:text-red-700": !!c }),
+                  className: r(Oe({ className: M }), { "text-red-700 placeholder:text-red-700": !!c }),
                   onClick: (e) => {
                     e.stopPropagation(), n || g();
                   },
@@ -182,7 +182,7 @@ var Fe = ve(E), Ge = Le(({ additionalOptions: $, className: B, defaultValue: y,
               className: "text-metal-400 animate-spin select-none"
             }) : !N && /* @__PURE__ */ a(ge, {
               "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", M, {
+              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", K, {
                 "text-red-700": !!c,
                 "text-metal-400/50 dark:group-focus-within:text-zinc-500": n
               })
@@ -201,7 +201,7 @@ var Fe = ve(E), Ge = Le(({ additionalOptions: $, className: B, defaultValue: y,
           ...D
         }),
         o && !f && A,
-        f && /* @__PURE__ */ a(Ne, { children: /* @__PURE__ */ a(Ce, {
+        f && /* @__PURE__ */ a(ye, { children: /* @__PURE__ */ a(Ne, {
           role: "presentation",
           align: "start",
           sideOffset: 4,
@@ -212,7 +212,7 @@ var Fe = ve(E), Ge = Le(({ additionalOptions: $, className: B, defaultValue: y,
           onCloseAutoFocus: (e) => {
             e.preventDefault();
           },
-          onBlur: me,
+          onBlur: pe,
           children: A
         }) })
       ]
@@ -220,5 +220,5 @@ var Fe = ve(E), Ge = Le(({ additionalOptions: $, className: B, defaultValue: y,
   });
 });
 export {
-  Ge as t
+  Ue as t
 };

package/dist/{Wrapper-BxfB3BDa.js → Wrapper-ThpRi_Gg.js}

@@ -2,10 +2,10 @@ import { o as Ne } from "./rolldown-runtime-Dw9YIBcH.js";
 import { n as Be, t as X } from "./utils-DnIJruo0.js";
 import { useClickOutside as Re } from "./hooks/useClickOutside.js";
 import { Typography as ee } from "./components/Typography/Typography.js";
-import { n as Ge } from "./phone-number.provider-BASl9fGG.js";
-import { usePhoneNumberContext as Le } from "./components/PhoneNumberInput/contexts/phone-number.hook.js";
-import { labelVariants as xe, phoneNumberInputVariants as Ve } from "./components/PhoneNumberInput/PhoneNumberInput.variants.js";
-import { getPhoneMask as Ke } from "./components/PhoneNumberInput/utils/index.js";
+import { labelVariants as Ge, phoneNumberInputVariants as Le } from "./components/PhoneNumberInput/PhoneNumberInput.variants.js";
+import { getPhoneMask as xe } from "./components/PhoneNumberInput/utils/index.js";
+import { n as Ve } from "./phone-number.provider-DnuL-yYF.js";
+import { usePhoneNumberContext as Ke } from "./components/PhoneNumberInput/contexts/phone-number.hook.js";
 import { FlagContent as De } from "./components/PhoneNumberInput/components/FlagContent/FlagContent.js";
 import { FlagSelectorWrapper as Fe } from "./components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.js";
 import { forwardRef as Ue, useCallback as pe, useEffect as de, useId as _e, useImperativeHandle as $e, useMemo as ze, useRef as te } from "react";
@@ -688,7 +688,7 @@ function un() {
     return nn(c, new Ie(i.current));
   }), []);
 }
-var sn = /* @__PURE__ */ Ne(Ge(), 1);
+var sn = /* @__PURE__ */ Ne(Ve(), 1);
 var pn = {
   AF: "Afghanistan",
   AL: "Albania",
@@ -973,8 +973,8 @@ var pn = {
 };
 sn.registerLocale(dn);
 var Pn = Ue(({ disabled: e = !1, error: n, helperText: t, helperTextClassName: r, id: o, isRequired: a, label: l, labelClassName: c, labelWrapperClassName: i, name: u, placeholder: s, showFlagOnSearch: d = !0, showInputFilter: g = !0, showNameOnSearch: j = !0, wrapperClassName: A, showPlaceHolder: h, onChange: v, ...p }, O) => {
-  const S = _e(), M = o ?? S, f = `${M}-error`, y = `${M}-helper-text`, m = te(null), { isOpenSelector: T, value: P, selectedCountry: b, onChangeValue: B, handleOpenSelector: w } = Le(), k = typeof n == "string" && n.length > 0, I = !k && !!t, R = Be(k && f, I && y), E = un({
-    mask: Ke(b),
+  const S = _e(), M = o ?? S, f = `${M}-error`, y = `${M}-helper-text`, m = te(null), { isOpenSelector: T, value: P, selectedCountry: b, onChangeValue: B, handleOpenSelector: w } = Ke(), k = typeof n == "string" && n.length > 0, I = !k && !!t, R = Be(k && f, I && y), E = un({
+    mask: xe(b),
     replacement: { _: /\d/ }
   });
   $e(O, () => E.current, [E]);
@@ -1005,7 +1005,7 @@ var Pn = Ue(({ disabled: e = !1, error: n, helperText: t, helperTextClassName: r
         className: X(i),
         children: /* @__PURE__ */ Z("label", {
           htmlFor: M,
-          className: xe({ className: c }),
+          className: Ge({ className: c }),
           onClick: () => !e && E.current?.focus(),
           children: [l, a && /* @__PURE__ */ V(ee, {
             component: "span",
@@ -1018,7 +1018,7 @@ var Pn = Ue(({ disabled: e = !1, error: n, helperText: t, helperTextClassName: r
       /* @__PURE__ */ Z("div", {
         ref: m,
         "data-state": T ? "open" : "closed",
-        className: Ve({
+        className: Le({
           className: A,
           variant: k ? "error" : "default"
         }),