@konstructio/ui 0.1.2-alpha.46 → 0.1.2-alpha.48

package/dist/components/MultiSelectDropdown/components/List/List.js

@@ -1,36 +1,29 @@
 import { jsx as e } from "react/jsx-runtime";
 import { cn as m } from "../../../../utils/index.js";
-import { Item as i } from "../Item/Item.js";
-import { wrapperVariants as p } from "./List.variants.js";
-import { useMultiSelectDropdown as c } from "../../contexts/MultiSelectDropdown.hook.js";
+import { Item as t } from "../Item/Item.js";
+import { listVariants as c } from "./List.variants.js";
 import { Typography as d } from "../../../Typography/Typography.js";
+import { useMultiSelectDropdown as p } from "../../contexts/MultiSelectDropdown.hook.js";
 const y = ({ theme: s }) => {
-  const { options: o, selectedOptions: n, isLoading: r, noOptionsText: a } = c();
-  return /* @__PURE__ */ e("ul", { role: "listbox", "data-theme": s, className: m(p()), children: r ? /* @__PURE__ */ e(
-    i,
+  const { options: i, selectedOptions: n, isLoading: l, noOptionsText: r } = p();
+  return /* @__PURE__ */ e("ul", { role: "listbox", "data-theme": s, className: m(c()), children: l ? /* @__PURE__ */ e(
+    t,
     {
       option: { id: "loading", label: "Loading..." },
       className: "select-none pointer-events-none",
       isSelected: !1
     },
     "loading"
-  ) : o.length > 0 ? o.map((t) => /* @__PURE__ */ e(
-    i,
+  ) : i.length > 0 ? i.map((o) => /* @__PURE__ */ e(
+    t,
     {
-      option: t,
+      option: o,
       isSelected: n.some(
-        (l) => l.id === t.id
+        (a) => a.id === o.id
       )
     },
-    t.id
-  )) : /* @__PURE__ */ e("li", { className: "select-none", children: /* @__PURE__ */ e(
-    d,
-    {
-      variant: "body2",
-      className: "text-zinc-800 dark:text-slate-50 italic px-2 py-2",
-      children: a ?? "No options"
-    }
-  ) }) });
+    o.id
+  )) : /* @__PURE__ */ e("li", { className: "select-none", children: /* @__PURE__ */ e(d, { variant: "body2", className: "italic px-2 py-2", children: r ?? "No options" }) }) });
 };
 export {
   y as List

package/dist/components/MultiSelectDropdown/components/List/List.variants.js

@@ -1,5 +1,5 @@
-import { c as o } from "../../../../index-D29mdTf5.js";
-const a = o([
+import { c as a } from "../../../../index-D29mdTf5.js";
+const o = a([
   "absolute",
   "bg-white",
   "border",
@@ -16,8 +16,10 @@ const a = o([
   "animate-in",
   "fade-in-50",
   "overflow-hidden",
-  "border-gray-200"
+  "border-gray-200",
+  "dark:border-metal-700",
+  "dark:bg-metal-800"
 ]);
 export {
-  a as wrapperVariants
+  o as listVariants
 };

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.js

@@ -1,82 +1,96 @@
 import "../Item/Item.js";
-import { List as N } from "../List/List.js";
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import * as c from "react";
-import { forwardRef as S, useId as b, useImperativeHandle as C } from "react";
-import { S as O } from "../../../../loader-juvMSJ9L.js";
-import { cn as t } from "../../../../utils/index.js";
-import { useMultiSelectDropdown as k } from "../../hooks/useMultiSelectDropdown.js";
-import { labelVariants as D, multiSelectDropdownVariants as M, wrapperVariants as R } from "../../MultiSelectDropdown.variants.js";
-import { C as y } from "../../../../chevron-up-DEfvgPCw.js";
-import { useMultiSelectDropdown as I } from "../../contexts/MultiSelectDropdown.hook.js";
-import { Tag as V } from "../../../Tag/Tag.js";
-const j = (r) => /* @__PURE__ */ c.createElement("svg", { width: 9, height: 9, viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ c.createElement("path", { d: "M8.16667 0.8225L7.34417 0L4.08333 3.26083L0.8225 0L0 0.8225L3.26083 4.08333L0 7.34417L0.8225 8.16667L4.08333 4.90583L7.34417 8.16667L8.16667 7.34417L4.90583 4.08333L8.16667 0.8225Z", fill: "#364153" })), E = S(
-  ({ label: r, labelClassName: p, name: l, placeholder: d = "", theme: h, wrapperClassName: f }, u) => {
-    const o = b(), {
-      selectedOptions: n,
-      isOpen: s,
-      onOpen: w,
-      onRemoveOption: L,
-      inputRef: i,
-      isLoading: g
-    } = I(), { wrapperRef: x, handleOpen: v } = k();
-    return C(u, () => i.current, [i]), /* @__PURE__ */ m(
+import { List as S } from "../List/List.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { forwardRef as k, useId as O, useImperativeHandle as C } from "react";
+import { S as D } from "../../../../loader-juvMSJ9L.js";
+import { Badge as L } from "../../../Badge/Badge.js";
+import { Typography as p } from "../../../Typography/Typography.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useMultiSelectDropdown as M } from "../../hooks/useMultiSelectDropdown.js";
+import { labelVariants as R, multiSelectDropdownVariants as I, wrapperVariants as V } from "../../MultiSelectDropdown.variants.js";
+import { X as j } from "../../../../x-BXShoIAM.js";
+import { C as W } from "../../../../chevron-up-DEfvgPCw.js";
+import { useMultiSelectDropdown as $ } from "../../contexts/MultiSelectDropdown.hook.js";
+const B = k(
+  ({
+    isRequired: c,
+    label: n,
+    labelClassName: d,
+    name: s,
+    placeholder: f = "",
+    theme: u,
+    wrapperClassName: h
+  }, x) => {
+    const N = O(), i = s ? `${N}-name` : "id", {
+      inputRef: t,
+      isLoading: w,
+      isOpen: o,
+      selectedOptions: m,
+      onOpen: g,
+      onRemoveOption: v
+    } = $(), { wrapperRef: b, handleOpen: y } = M();
+    return C(x, () => t.current, [t]), /* @__PURE__ */ l(
       "div",
       {
-        ref: x,
-        className: t(
-          R({
-            className: f
+        ref: b,
+        className: a(
+          V({
+            className: h
           })
         ),
-        "data-theme": h,
+        "data-theme": u,
         children: [
-          r ? /* @__PURE__ */ e(
-            "label",
+          n ? /* @__PURE__ */ l(
+            p,
             {
-              htmlFor: l ?? o,
-              className: t(
-                D({
-                  className: p
+              component: "label",
+              variant: "labelLarge",
+              htmlFor: i,
+              className: a(
+                R({
+                  className: d
                 })
               ),
-              onClick: () => w(!0),
-              children: r
+              onClick: () => g(!0),
+              children: [
+                n,
+                " ",
+                c && /* @__PURE__ */ e(
+                  p,
+                  {
+                    component: "span",
+                    className: "text-red-500 dark:text-red-500 text-sm font-normal",
+                    children: "*"
+                  }
+                )
+              ]
             }
           ) : null,
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ l(
             "div",
             {
-              id: l ?? o,
-              className: t(M()),
+              id: i,
+              className: a(I()),
               role: "combobox",
-              onClick: v,
-              "aria-expanded": s,
+              onClick: y,
+              "aria-expanded": o,
               children: [
-                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: d }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: n.map((a) => /* @__PURE__ */ e(
-                  V,
+                m.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: f }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: m.map((r) => /* @__PURE__ */ e(
+                  L,
                   {
-                    id: a.id,
-                    label: a.value || a.tagLabel || "",
-                    color: a.tagColor || "gray-800",
-                    className: "select-none gap-2",
-                    rightIcon: /* @__PURE__ */ e(
-                      j,
-                      {
-                        className: "w-2 h-2",
-                        onClick: () => L(a)
-                      }
-                    ),
-                    "data-value": a.label
+                    "data-value": r.label,
+                    label: r.value ?? r.label ?? "",
+                    className: "select-none",
+                    rightIcon: /* @__PURE__ */ e(j, { onClick: () => v(r) })
                   },
-                  a.id
+                  r.id
                 )) }),
-                g ? /* @__PURE__ */ e(O, { className: "w-4 h-4 text-slate-400 animate-spin shrink-0" }) : /* @__PURE__ */ e(
-                  y,
+                w ? /* @__PURE__ */ e(D, { className: "w-4 h-4 animate-spin shrink-0 text-gray-400" }) : /* @__PURE__ */ e(
+                  W,
                   {
-                    className: t(
-                      "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
-                      s ? "rotate-0" : "rotate-180"
+                    className: a(
+                      "w-4 h-4 transition-all duration-50 shrink-0 text-gray-400",
+                      o ? "rotate-0" : "rotate-180"
                     )
                   }
                 )
@@ -86,20 +100,20 @@ const j = (r) => /* @__PURE__ */ c.createElement("svg", { width: 9, height: 9, v
           /* @__PURE__ */ e(
             "input",
             {
-              ref: i,
+              ref: t,
               type: "text",
-              name: l,
+              name: s,
               className: "hidden",
               readOnly: !0
             }
           ),
-          s ? /* @__PURE__ */ e(N, {}) : null
+          o ? /* @__PURE__ */ e(S, {}) : null
         ]
       }
     );
   }
 );
-E.displayName = "MultiSelectDropdownWrapper";
+B.displayName = "MultiSelectDropdownWrapper";
 export {
-  E as Wrapper
+  B as Wrapper
 };

package/dist/components/PhoneNumberInput/components/Wrapper.js

@@ -1,8 +1,8 @@
 import "./FlagSelectorList/FlagSelectorList.js";
 import { jsxs as Z, jsx as V } from "react/jsx-runtime";
 import { i as Ae } from "../../../index-BmVmDQGH.js";
-import { useRef as ee, useMemo as Ne, forwardRef as Be, useId as Re, useImperativeHandle as Ge, useCallback as Le, useEffect as ce } from "react";
-import { Typography as se } from "../../Typography/Typography.js";
+import { useRef as te, useMemo as Ne, forwardRef as Be, useId as Re, useImperativeHandle as Ge, useCallback as Le, useEffect as se } from "react";
+import { Typography as X } from "../../Typography/Typography.js";
 import { cn as pe } from "../../../utils/index.js";
 import { labelVariants as Ve, phoneNumberInputVariants as xe } from "../PhoneNumberInput.variants.js";
 import { usePhoneNumberContext as Ke } from "../contexts/phone-number.hook.js";
@@ -90,7 +90,7 @@ function Y(e) {
 }
 function _e(e, t) {
   if (typeof t != "function" && t !== null) throw new TypeError("Super expression must either be null or a function");
-  e.prototype = Object.create(t && t.prototype, { constructor: { value: e, writable: !0, configurable: !0 } }), Object.defineProperty(e, "prototype", { writable: !1 }), t && te(e, t);
+  e.prototype = Object.create(t && t.prototype, { constructor: { value: e, writable: !0, configurable: !0 } }), Object.defineProperty(e, "prototype", { writable: !1 }), t && ne(e, t);
 }
 function we() {
   try {
@@ -140,10 +140,10 @@ function We(e, t) {
   }
   return o;
 }
-function te(e, t) {
-  return te = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(n, r) {
+function ne(e, t) {
+  return ne = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(n, r) {
     return n.__proto__ = r, n;
-  }, te(e, t);
+  }, ne(e, t);
 }
 function U(e, t) {
   var n, r = t.replacementChars, o = t.replacement, a = t.separate, l = r, u = "", i = Oe(e);
@@ -188,7 +188,7 @@ function Pe(e, t) {
 function K(e) {
   return e.length > 0 ? Se({}, e, /./) : {};
 }
-function ne(e, t) {
+function re(e, t) {
   for (var n = t.start, r = n === void 0 ? 0 : n, o = t.end, a = t.mask, l = t.replacement, u = t.separate, i = e.slice(r, o), c = a.slice(r, o), p = "", f = 0; f < c.length; f++) {
     var b = Object.prototype.hasOwnProperty.call(l, c[f]);
     b && i[f] !== void 0 && i[f] !== c[f] ? p += i[f] : b && u && (p += c[f]);
@@ -200,7 +200,7 @@ function Me(e, t) {
   return ke(U(e, { replacementChars: n.replace(a, ""), replacement: o, separate: !1 }), { mask: n, replacement: o, separate: !1, showMask: !1 });
 }
 function Ze(e, t) {
-  var n = t.mask, r = t.replacement, o = typeof r == "string" ? K(r) : r, a = ne(e, { mask: n, replacement: o, separate: !1 }), l = RegExp("[^".concat(Object.keys(o).join(""), "]"), "g");
+  var n = t.mask, r = t.replacement, o = typeof r == "string" ? K(r) : r, a = re(e, { mask: n, replacement: o, separate: !1 }), l = RegExp("[^".concat(Object.keys(o).join(""), "]"), "g");
   return U(a, { replacementChars: n.replace(l, ""), replacement: o, separate: !1 });
 }
 function Je(e, t) {
@@ -231,7 +231,7 @@ function Xe(e, t, n) {
       if (a === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
       return a;
     })(r);
-  })(e, ae() ? Reflect.construct(t, n || [], z(e).constructor) : t.apply(e, n));
+  })(e, oe() ? Reflect.construct(t, n || [], z(e).constructor) : t.apply(e, n));
 }
 function Ee(e, t) {
   if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
@@ -263,13 +263,13 @@ function tt(e, t) {
   if (typeof t != "function" && t !== null) throw new TypeError("Super expression must either be null or a function");
   e.prototype = Object.create(t && t.prototype, { constructor: { value: e, writable: !0, configurable: !0 } }), Object.defineProperty(e, "prototype", { writable: !1 }), t && H(e, t);
 }
-function ae() {
+function oe() {
   try {
     var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {
     })));
   } catch {
   }
-  return (ae = function() {
+  return (oe = function() {
     return !!e;
   })();
 }
@@ -316,9 +316,9 @@ function H(e, t) {
     return n.__proto__ = r, n;
   }, H(e, t);
 }
-function re(e) {
+function ae(e) {
   var t = typeof Map == "function" ? /* @__PURE__ */ new Map() : void 0;
-  return re = function(n) {
+  return ae = function(n) {
     if (n === null || !(function(o) {
       try {
         return Function.toString.call(o).indexOf("[native code]") !== -1;
@@ -333,7 +333,7 @@ function re(e) {
     }
     function r() {
       return (function(o, a, l) {
-        if (ae()) return Reflect.construct.apply(null, arguments);
+        if (oe()) return Reflect.construct.apply(null, arguments);
         var u = [null];
         u.push.apply(u, a);
         var i = new (o.bind.apply(o, u))();
@@ -341,7 +341,7 @@ function re(e) {
       })(n, arguments, z(this).constructor);
     }
     return r.prototype = Object.create(n.prototype, { constructor: { value: r, enumerable: !1, writable: !0, configurable: !0 } }), H(r, n);
-  }, re(e);
+  }, ae(e);
 }
 var $ = (function(e) {
   function t(n) {
@@ -349,7 +349,7 @@ var $ = (function(e) {
     return Ee(this, t), (r = Xe(this, t, [n])).name = "SyntheticChangeError", r;
   }
   return tt(t, e), Ce(t);
-})(re(Error)), ye, rt = ["options"], ge = ["text", "email", "tel", "search", "url"], je = Ce((function e(t) {
+})(ae(Error)), ye, rt = ["options"], ge = ["text", "email", "tel", "search", "url"], je = Ce((function e(t) {
   var n = t.init, r = t.tracking;
   Ee(this, e);
   var o = /* @__PURE__ */ new WeakMap();
@@ -399,7 +399,7 @@ var $ = (function(e) {
   };
 }));
 ye = je, Object.defineProperty(ye.prototype, Symbol.toStringTag, { writable: !1, enumerable: !1, configurable: !0, value: "Input" });
-var X = function(e) {
+var ee = function(e) {
   return function() {
     for (var t = arguments.length, n = new Array(t), r = 0; r < t; r++) n[r] = arguments[r];
     return new e("".concat(n.join(`
@@ -419,11 +419,11 @@ var Te = (function(e) {
       var a = o.initialValue, l = o.controlled, u = x(r), i = u.mask, c = u.replacement, p = u.separate, f = u.showMask;
       return a = l || a ? a : f ? i : "", process.env.NODE_ENV !== "production" && (function(b) {
         var M = b.initialValue, j = b.mask, h = b.replacement;
-        M.length > j.length && console.error(X(Error)("The initialized value of the `value` or `defaultValue` property is longer than the value specified in the `mask` property. Check the correctness of the initialized value in the specified property.", 'Invalid value: "'.concat(M, '".'), "To initialize an unmasked value, use the `format` utility. More details https://github.com/GoncharukOrg/react-input/tree/main/packages/mask#initializing-the-value."));
+        M.length > j.length && console.error(ee(Error)("The initialized value of the `value` or `defaultValue` property is longer than the value specified in the `mask` property. Check the correctness of the initialized value in the specified property.", 'Invalid value: "'.concat(M, '".'), "To initialize an unmasked value, use the `format` utility. More details https://github.com/GoncharukOrg/react-input/tree/main/packages/mask#initializing-the-value."));
         var m = Object.keys(h).filter((function(d) {
           return d.length > 1;
         }));
-        m.length > 0 && console.error(X(Error)("Object keys in the `replacement` property are longer than one character. Replacement keys must be one character long. Check the correctness of the value in the specified property.", "Invalid keys: ".concat(m.join(", "), "."), "To initialize an unmasked value, use the `format` utility. More details https://github.com/GoncharukOrg/react-input/tree/main/packages/mask#initializing-the-value."));
+        m.length > 0 && console.error(ee(Error)("Object keys in the `replacement` property are longer than one character. Replacement keys must be one character long. Check the correctness of the value in the specified property.", "Invalid keys: ".concat(m.join(", "), "."), "To initialize an unmasked value, use the `format` utility. More details https://github.com/GoncharukOrg/react-input/tree/main/packages/mask#initializing-the-value."));
         for (var s = j.slice(0, M.length), O = -1, S = 0; S < s.length; S++) {
           var w = Object.prototype.hasOwnProperty.call(h, s[S]);
           if (!(s[S] === M[S] || w && h[s[S]].test(M[S]))) {
@@ -431,7 +431,7 @@ var Te = (function(e) {
             break;
           }
         }
-        O !== -1 && console.error(X(Error)("An invalid character was found in the initialized property value `value` or `defaultValue` (index: ".concat(O, "). Check the correctness of the initialized value in the specified property."), 'Invalid value: "'.concat(M, '".'), "To initialize an unmasked value, use the `format` utility. More details https://github.com/GoncharukOrg/react-input/tree/main/packages/mask#initializing-the-value."));
+        O !== -1 && console.error(ee(Error)("An invalid character was found in the initialized property value `value` or `defaultValue` (index: ".concat(O, "). Check the correctness of the initialized value in the specified property."), 'Invalid value: "'.concat(M, '".'), "To initialize an unmasked value, use the `format` utility. More details https://github.com/GoncharukOrg/react-input/tree/main/packages/mask#initializing-the-value."));
       })({ initialValue: a, mask: i, replacement: c }), { value: a, options: { mask: i, replacement: c, separate: p } };
     }, tracking: function(o) {
       var a = o.inputType, l = o.previousValue, u = o.previousOptions, i = o.addedValue, c = o.changeStart, p = o.changeEnd, f = x(r), b = f.track, M = f.modify, j = We(f, at), h = j.mask, m = j.replacement, s = j.showMask, O = j.separate, S = J(J({}, a === "insert" ? { inputType: a, data: i } : { inputType: a, data: null }), {}, { value: l, selectionStart: c, selectionEnd: p }), w = b?.(S);
@@ -439,7 +439,7 @@ var Te = (function(e) {
       w === null ? i = "" : w !== !0 && w !== void 0 && (i = w);
       var d = M?.(S);
       d?.mask !== void 0 && (h = d.mask), d?.replacement !== void 0 && (m = typeof d?.replacement == "string" ? K(d?.replacement) : d.replacement), d?.showMask !== void 0 && (s = d.showMask), d?.separate !== void 0 && (O = d.separate);
-      var y = ne(l, J({ end: c }, u)), v = ne(l, J({ start: p }, u)), k = RegExp("[^".concat(Object.keys(m).join(""), "]"), "g"), P = h.replace(k, "");
+      var y = re(l, J({ end: c }, u)), v = re(l, J({ start: p }, u)), k = RegExp("[^".concat(Object.keys(m).join(""), "]"), "g"), P = h.replace(k, "");
       if (y && (y = U(y, { replacementChars: P, replacement: m, separate: O }), P = P.slice(y.length)), i && (i = U(i, { replacementChars: P, replacement: m, separate: !1 }), P = P.slice(i.length)), a === "insert" && i === "") throw new $("The character does not match the key value of the `replacement` object.");
       if (O) {
         var g = h.slice(c, p).replace(k, ""), T = g.length - i.length;
@@ -447,12 +447,12 @@ var Te = (function(e) {
       }
       v && (v = U(v, { replacementChars: P, replacement: m, separate: O }));
       var C = ke(y + i + v, { mask: h, replacement: m, separate: O, showMask: s }), E = (function(I) {
-        var N, B, D, F = I.inputType, R = I.value, _ = I.addedValue, A = I.beforeChangeValue, W = I.mask, oe = I.replacement, Ie = I.separate, Q = Pe(R, { mask: W, replacement: oe }).filter((function(q) {
-          var ue = q.type;
-          return ue === "input" || Ie && ue === "replacement";
-        })), ie = (N = Q[A.length + _.length - 1]) === null || N === void 0 ? void 0 : N.index, G = (B = Q[A.length - 1]) === null || B === void 0 ? void 0 : B.index, L = (D = Q[A.length + _.length]) === null || D === void 0 ? void 0 : D.index;
+        var N, B, D, F = I.inputType, R = I.value, _ = I.addedValue, A = I.beforeChangeValue, W = I.mask, ie = I.replacement, Ie = I.separate, Q = Pe(R, { mask: W, replacement: ie }).filter((function(q) {
+          var ce = q.type;
+          return ce === "input" || Ie && ce === "replacement";
+        })), le = (N = Q[A.length + _.length - 1]) === null || N === void 0 ? void 0 : N.index, G = (B = Q[A.length - 1]) === null || B === void 0 ? void 0 : B.index, L = (D = Q[A.length + _.length]) === null || D === void 0 ? void 0 : D.index;
         if (F === "insert") {
-          if (ie !== void 0) return ie + 1;
+          if (le !== void 0) return le + 1;
           if (L !== void 0) return L;
           if (G !== void 0) return G + 1;
         }
@@ -464,10 +464,10 @@ var Te = (function(e) {
           if (G !== void 0) return G + 1;
           if (L !== void 0) return L;
         }
-        var le = R.split("").findIndex((function(q) {
-          return Object.prototype.hasOwnProperty.call(oe, q);
+        var ue = R.split("").findIndex((function(q) {
+          return Object.prototype.hasOwnProperty.call(ie, q);
         }));
-        return le !== -1 ? le : R.length;
+        return ue !== -1 ? ue : R.length;
       })({ inputType: a, value: C, addedValue: i, beforeChangeValue: y, mask: h, replacement: m, separate: O });
       return { value: C, selectionStart: E, selectionEnd: E, options: { mask: h, replacement: m, separate: O } };
     } }])).format = function(o) {
@@ -484,7 +484,7 @@ var Te = (function(e) {
 })();
 be = Te, Object.defineProperty(be.prototype, Symbol.toStringTag, { writable: !1, enumerable: !1, configurable: !0, value: "Mask" });
 function ot() {
-  var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, t = e.mask, n = e.replacement, r = e.showMask, o = e.separate, a = e.track, l = e.modify, u = ee(null), i = ee({ mask: t, replacement: n, showMask: r, separate: o, track: a, modify: l });
+  var e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, t = e.mask, n = e.replacement, r = e.showMask, o = e.separate, a = e.track, l = e.modify, u = te(null), i = te({ mask: t, replacement: n, showMask: r, separate: o, track: a, modify: l });
   return i.current.mask = t, i.current.replacement = n, i.current.showMask = r, i.current.separate = o, i.current.track = a, i.current.modify = l, Ne((function() {
     return qe(u, new Te(i.current));
   }), []);
@@ -512,7 +512,7 @@ const Ot = Be(
     showPlaceHolder: M,
     ...j
   }, h) => {
-    const m = u ?? Re(), s = ee(null), {
+    const m = u ?? Re(), s = te(null), {
       isOpenSelector: O,
       value: S,
       selectedCountry: w,
@@ -529,7 +529,7 @@ const Ot = Be(
       },
       [w.prefix, d]
     );
-    return ce(() => {
+    return se(() => {
       const g = new AbortController(), T = (E) => {
         E.key === "Escape" && y(!1);
       }, C = (E) => {
@@ -550,7 +550,7 @@ const Ot = Be(
       ), () => {
         g.abort();
       };
-    }, [y, s]), ce(() => {
+    }, [y, s]), se(() => {
       k.current && (k.current.value = w.prefix + " ");
     }, [w.code]), /* @__PURE__ */ Z("div", { className: "w-full flex flex-col gap-2", children: [
       a ? /* @__PURE__ */ Z(
@@ -561,7 +561,14 @@ const Ot = Be(
           onClick: () => !e && k.current?.focus(),
           children: [
             a,
-            o && /* @__PURE__ */ V("span", { className: "text-red-600 ml-1", children: "*" })
+            o && /* @__PURE__ */ V(
+              X,
+              {
+                component: "span",
+                className: "text-red-600 dark:text-red-500 ml-1",
+                children: "*"
+              }
+            )
           ]
         }
       ) : null,
@@ -618,7 +625,7 @@ const Ot = Be(
         }
       ),
       t ? /* @__PURE__ */ V(
-        se,
+        X,
         {
           component: "span",
           className: "text-xs text-red-700 dark:text-red-500",
@@ -626,7 +633,7 @@ const Ot = Be(
         }
       ) : null,
       !t && n ? /* @__PURE__ */ V(
-        se,
+        X,
         {
           component: "span",
           className: pe(

package/dist/components/Radio/Radio.js

@@ -1,53 +1,54 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { forwardRef as g, useId as j, useCallback as w } from "react";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { forwardRef as V, useId as j, useCallback as w } from "react";
+import { Typography as d } from "../Typography/Typography.js";
 import { cn as a } from "../../utils/index.js";
-import { radioVariants as y, labelRadioVariants as t, wrapperRadioVariants as F } from "./Radio.variants.js";
-const $ = g(
+import { radioVariants as F, labelRadioVariants as p, wrapperRadioVariants as $ } from "./Radio.variants.js";
+const C = V(
   ({
     checked: r = !1,
-    className: p,
-    defaultChecked: o,
+    className: f,
+    defaultChecked: l,
     disabled: e,
-    label: f,
-    labelTextClassName: N,
-    description: l,
-    descriptionClassName: h,
-    name: i,
-    theme: x,
-    value: m,
-    wrapperClassName: R,
-    onChange: c
-  }, u) => {
-    const d = `${j()}-${i}`, b = w(
-      (V) => {
-        c?.(V);
+    label: N,
+    labelTextClassName: h,
+    description: o,
+    descriptionClassName: x,
+    name: m,
+    theme: R,
+    value: n,
+    wrapperClassName: u,
+    onChange: i
+  }, y) => {
+    const t = `${j()}-${m}`, b = w(
+      (g) => {
+        i?.(g);
       },
-      [c]
+      [i]
     );
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ c(
       "label",
       {
-        htmlFor: d,
+        htmlFor: t,
         className: a(
-          F({
-            className: R,
+          $({
+            className: u,
             disabled: e || !1
           })
         ),
-        "data-theme": x,
+        "data-theme": R,
         children: [
           /* @__PURE__ */ s(
             "input",
             {
-              ref: u,
-              id: d,
+              ref: y,
+              id: t,
               type: "radio",
-              name: i,
-              value: m,
+              name: m,
+              value: n,
               checked: r,
-              defaultChecked: o,
+              defaultChecked: l,
               className: "hidden peer",
-              onChange: () => b(m),
+              onChange: () => b(n),
               disabled: e
             }
           ),
@@ -55,31 +56,33 @@ const $ = g(
             "span",
             {
               className: a(
-                y({
-                  className: p,
+                F({
+                  className: f,
                   disabled: e || !1,
-                  checked: r || o || !1
+                  checked: r || l || !1
                 })
               )
             }
           ),
-          /* @__PURE__ */ n("div", { className: a(l && "flex flex-col gap-1"), children: [
+          /* @__PURE__ */ c("div", { className: a(o && "flex flex-col gap-1"), children: [
             /* @__PURE__ */ s(
-              "span",
+              d,
               {
+                component: "span",
                 className: a(
-                  t({ className: N })
+                  p({ className: h })
                 ),
-                children: f
+                children: N
               }
             ),
-            l && /* @__PURE__ */ s(
-              "span",
+            o && /* @__PURE__ */ s(
+              d,
               {
+                component: "span",
                 className: a(
-                  t({ className: h })
+                  p({ className: x })
                 ),
-                children: l
+                children: o
               }
             )
           ] })
@@ -88,7 +91,7 @@ const $ = g(
     );
   }
 );
-$.displayName = "KonstructRadio";
+C.displayName = "KonstructRadio";
 export {
-  $ as Radio
+  C as Radio
 };