beth-clarity 1.1.8 → 1.1.10

package/dist/clarity-design-system.es.js

@@ -1,5 +1,5 @@
-import { jsx as s, jsxs as _, Fragment as Ze } from "react/jsx-runtime";
-import L, { useState as T, useRef as A, useEffect as O, forwardRef as Ke, isValidElement as Z, createContext as z, cloneElement as W, useContext as q, useMemo as Y, useCallback as ne, useLayoutEffect as et } from "react";
+import { jsx as s, jsxs as w, Fragment as Ze } from "react/jsx-runtime";
+import L, { useState as T, useRef as P, useEffect as O, forwardRef as Ke, isValidElement as Z, createContext as z, cloneElement as W, useContext as q, useMemo as Y, useCallback as ne, useLayoutEffect as et } from "react";
 import tt from "react-dom";
 const wt = ({
   variant: e = "primary",
@@ -12,37 +12,37 @@ const wt = ({
   className: u = "",
   rounded: i = !1,
   outlined: c = !1,
-  ...p
+  ...m
 }) => {
-  const y = "clarity-badge", f = !!n, m = t && a && !f;
+  const v = "clarity-badge", p = !!n, f = t && a && !p;
   let d = "";
-  f ? d = `${y}--custom-bg` : m ? d = `${y}--custom` : d = `${y}--${e}`;
-  const C = [
-    y,
+  p ? d = `${v}--custom-bg` : f ? d = `${v}--custom` : d = `${v}--${e}`;
+  const h = [
+    v,
     d,
-    `${y}--${l}`,
-    i ? `${y}--rounded` : "",
-    c ? `${y}--outlined` : "",
+    `${v}--${l}`,
+    i ? `${v}--rounded` : "",
+    c ? `${v}--outlined` : "",
     u
-  ].filter(Boolean).join(" "), h = {};
-  f && (h.backgroundColor = n, r && (h.color = r));
-  const N = m && t && a ? {
+  ].filter(Boolean).join(" "), y = {};
+  p && (y.backgroundColor = n, r && (y.color = r));
+  const N = f && t && a ? {
     "--custom-bg-color": `var(--clarity-${t}-${a})`,
     "--custom-text-color": a && parseInt(a) >= 500 ? "white" : `var(--clarity-${t}-800)`
   } : {};
   return /* @__PURE__ */ s(
     "span",
     {
-      className: C,
+      className: h,
       style: {
-        ...h,
+        ...y,
         ...N
       },
-      ...p,
+      ...m,
       children: o
     }
   );
-}, gt = ({
+}, $t = ({
   variant: e = "primary",
   product: t,
   tone: a,
@@ -53,40 +53,101 @@ const wt = ({
   children: u,
   onClick: i,
   type: c = "button",
-  className: p = "",
-  title: y,
-  ...f
+  className: m = "",
+  title: v,
+  ...p
 }) => {
-  const m = "clarity-button", d = t && a, C = d ? `${m}--custom` : `${m}--${e}`, h = [
-    m,
-    C,
-    `${m}--${n}`,
-    o && `${m}--loading`,
-    r && `${m}--disabled`,
-    p
+  const f = "clarity-button", d = t && a, h = d ? `${f}--custom` : `${f}--${e}`, y = [
+    f,
+    h,
+    `${f}--${n}`,
+    o && `${f}--loading`,
+    r && `${f}--disabled`,
+    m
   ].filter(Boolean).join(" "), N = (B) => {
-    const g = parseInt(B);
-    return g >= 800 ? "900" : g >= 700 ? "800" : g >= 600 ? "700" : g >= 500 ? "600" : g >= 400 ? "500" : g >= 300 ? "400" : g >= 200 ? "300" : "200";
-  }, w = d ? {
+    const $ = parseInt(B);
+    return $ >= 800 ? "900" : $ >= 700 ? "800" : $ >= 600 ? "700" : $ >= 500 ? "600" : $ >= 400 ? "500" : $ >= 300 ? "400" : $ >= 200 ? "300" : "200";
+  }, b = d ? {
     "--custom-bg-color": `var(--clarity-${t}-${a})`,
     "--custom-hover-color": `var(--clarity-${t}-${l || N(a)})`
   } : {};
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ w(
     "button",
     {
-      className: h,
-      style: w,
+      className: y,
+      style: b,
       disabled: r || o,
       onClick: i,
       type: c,
-      title: y,
-      ...f,
+      title: v,
+      ...p,
       children: [
-        o && /* @__PURE__ */ s("div", { className: `${m}__spinner` }),
+        o && /* @__PURE__ */ s("div", { className: `${f}__spinner` }),
         u
       ]
     }
   );
+}, gt = ({
+  variant: e = "primary",
+  size: t = "medium",
+  filled: a = !0,
+  items: l,
+  value: n,
+  multiple: r = !1,
+  disabled: o = !1,
+  onChange: u,
+  className: i = "",
+  ...c
+}) => {
+  const m = "clarity-button-group", v = `${m}--${e}`, p = [
+    m,
+    v,
+    `${m}--${t}`,
+    !a && `${m}--outline`,
+    o && `${m}--disabled`,
+    i
+  ].filter(Boolean).join(" "), f = (h) => {
+    if (o || !u) return;
+    const y = l.find((N) => N.id === h);
+    if (!(y != null && y.disabled))
+      if (r) {
+        const N = Array.isArray(n) ? n : [], b = N.includes(h) ? N.filter((B) => B !== h) : [...N, h];
+        u(b);
+      } else
+        u(h);
+  }, d = (h) => r ? Array.isArray(n) && n.includes(h) : n === h;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: p,
+      role: "group",
+      ...c,
+      children: l.map((h, y) => {
+        const N = d(h.id), b = [
+          `${m}__item`,
+          N && `${m}__item--selected`,
+          h.disabled && `${m}__item--disabled`,
+          y === 0 && `${m}__item--first`,
+          y === l.length - 1 && `${m}__item--last`
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ w(
+          "button",
+          {
+            className: b,
+            onClick: () => f(h.id),
+            disabled: o || h.disabled,
+            type: "button",
+            "aria-pressed": N,
+            children: [
+              h.icon && /* @__PURE__ */ s("span", { className: `${m}__item-icon`, children: h.icon }),
+              /* @__PURE__ */ s("span", { className: `${m}__item-label`, children: h.label })
+            ]
+          },
+          h.id
+        );
+      })
+    }
+  );
 }, st = L.forwardRef(({
   variant: e,
   size: t = "medium",
@@ -98,21 +159,21 @@ const wt = ({
   endIcon: u,
   className: i = "",
   disabled: c = !1,
-  value: p,
-  defaultValue: y,
-  onFocus: f,
-  onBlur: m,
+  value: m,
+  defaultValue: v,
+  onFocus: p,
+  onBlur: f,
   ...d
-}, C) => {
-  const [h, N] = T(!1), [w, B] = T(!1), g = A(null);
-  L.useImperativeHandle(C, () => g.current), O(() => {
-    const x = g.current;
+}, h) => {
+  const [y, N] = T(!1), [b, B] = T(!1), $ = P(null);
+  L.useImperativeHandle(h, () => $.current), O(() => {
+    const x = $.current;
     x && B(x.value.length > 0);
-  }, [p, y]);
-  const b = (x) => {
-    N(!0), f == null || f(x);
+  }, [m, v]);
+  const _ = (x) => {
+    N(!0), p == null || p(x);
   }, k = (x) => {
-    N(!1), B(x.target.value.length > 0), m == null || m(x);
+    N(!1), B(x.target.value.length > 0), f == null || f(x);
   }, E = [
     "clarity-input",
     "clarity-input--outlined",
@@ -120,25 +181,25 @@ const wt = ({
     e && `clarity-input--${e}`,
     n && "clarity-input--error",
     c && "clarity-input--disabled",
-    h && "clarity-input--focused",
-    w && "clarity-input--has-value",
+    y && "clarity-input--focused",
+    b && "clarity-input--has-value",
     o && "clarity-input--with-start-icon",
     u && "clarity-input--with-end-icon",
     i
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: "clarity-input-wrapper", children: [
-    /* @__PURE__ */ _("div", { className: E, children: [
+  return /* @__PURE__ */ w("div", { className: "clarity-input-wrapper", children: [
+    /* @__PURE__ */ w("div", { className: E, children: [
       o && /* @__PURE__ */ s("div", { className: "clarity-input__start-icon", children: o }),
-      /* @__PURE__ */ _("div", { className: "clarity-input__field", children: [
+      /* @__PURE__ */ w("div", { className: "clarity-input__field", children: [
         /* @__PURE__ */ s(
           "input",
           {
-            ref: g,
+            ref: $,
             className: "clarity-input__element",
             disabled: c,
-            value: p,
-            defaultValue: y,
-            onFocus: b,
+            value: m,
+            defaultValue: v,
+            onFocus: _,
             onBlur: k,
             ...d
           }
@@ -162,59 +223,59 @@ const at = L.forwardRef(({
   endIcon: u,
   className: i = "",
   disabled: c = !1,
-  value: p,
-  defaultValue: y,
-  onFocus: f,
-  onBlur: m,
+  value: m,
+  defaultValue: v,
+  onFocus: p,
+  onBlur: f,
   rows: d = 3,
-  minHeight: C,
-  maxHeight: h,
+  minHeight: h,
+  maxHeight: y,
   resizable: N = !0,
-  ...w
+  ...b
 }, B) => {
-  const [g, b] = T(!1), [k, E] = T(!1), x = A(null);
+  const [$, _] = T(!1), [k, E] = T(!1), x = P(null);
   L.useImperativeHandle(B, () => x.current), O(() => {
-    const $ = x.current;
-    $ && E($.value.length > 0);
-  }, [p, y]);
-  const j = ($) => {
-    b(!0), f == null || f($);
-  }, S = ($) => {
-    b(!1), E($.target.value.length > 0), m == null || m($);
-  }, P = [
+    const g = x.current;
+    g && E(g.value.length > 0);
+  }, [m, v]);
+  const j = (g) => {
+    _(!0), p == null || p(g);
+  }, I = (g) => {
+    _(!1), E(g.target.value.length > 0), f == null || f(g);
+  }, A = [
     "clarity-textarea",
     "clarity-textarea--outlined",
     `clarity-textarea--${t}`,
     e && `clarity-textarea--${e}`,
     n && "clarity-textarea--error",
     c && "clarity-textarea--disabled",
-    g && "clarity-textarea--focused",
+    $ && "clarity-textarea--focused",
     k && "clarity-textarea--has-value",
     o && "clarity-textarea--with-start-icon",
     u && "clarity-textarea--with-end-icon",
     i
-  ].filter(Boolean).join(" "), I = {
+  ].filter(Boolean).join(" "), S = {
     resize: N ? "vertical" : "none",
-    minHeight: C ? `${C}px` : void 0,
-    maxHeight: h ? `${h}px` : void 0
+    minHeight: h ? `${h}px` : void 0,
+    maxHeight: y ? `${y}px` : void 0
   };
-  return /* @__PURE__ */ _("div", { className: "clarity-textarea-wrapper", children: [
-    /* @__PURE__ */ _("div", { className: P, children: [
+  return /* @__PURE__ */ w("div", { className: "clarity-textarea-wrapper", children: [
+    /* @__PURE__ */ w("div", { className: A, children: [
       o && /* @__PURE__ */ s("div", { className: "clarity-textarea__start-icon", children: o }),
-      /* @__PURE__ */ _("div", { className: "clarity-textarea__field", children: [
+      /* @__PURE__ */ w("div", { className: "clarity-textarea__field", children: [
         /* @__PURE__ */ s(
           "textarea",
           {
             ref: x,
             className: "clarity-textarea__element",
             disabled: c,
-            value: p,
-            defaultValue: y,
+            value: m,
+            defaultValue: v,
             onFocus: j,
-            onBlur: S,
+            onBlur: I,
             rows: d,
-            style: I,
-            ...w
+            style: S,
+            ...b
           }
         ),
         a && /* @__PURE__ */ s("label", { className: "clarity-textarea__label", children: a })
@@ -236,88 +297,88 @@ const lt = L.forwardRef(({
   endIcon: u,
   className: i = "",
   disabled: c = !1,
-  value: p,
-  defaultValue: y,
-  onFocus: f,
-  onBlur: m,
+  value: m,
+  defaultValue: v,
+  onFocus: p,
+  onBlur: f,
   onChange: d,
-  options: C,
-  placeholder: h = "Selecione uma opção",
+  options: h,
+  placeholder: y = "Selecione uma opção",
   isClearable: N = !1,
-  isSearchable: w = !1,
+  isSearchable: b = !1,
   ...B
-}, g) => {
-  const [b, k] = T(!1), [E, x] = T(!1), [j, S] = T(p || y || ""), [P, I] = T(""), $ = A(null), M = A(null);
-  L.useImperativeHandle(g, () => $.current), O(() => {
-    p !== void 0 && S(p);
-  }, [p]), O(() => {
-    const v = (D) => {
-      $.current && !$.current.contains(D.target) && (k(!1), x(!1), m == null || m());
+}, $) => {
+  const [_, k] = T(!1), [E, x] = T(!1), [j, I] = T(m || v || ""), [A, S] = T(""), g = P(null), M = P(null);
+  L.useImperativeHandle($, () => g.current), O(() => {
+    m !== void 0 && I(m);
+  }, [m]), O(() => {
+    const C = (D) => {
+      g.current && !g.current.contains(D.target) && (k(!1), x(!1), f == null || f());
     };
-    return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
-  }, [m]);
-  const V = w && P ? C.filter(
-    (v) => v.label.toLowerCase().includes(P.toLowerCase())
-  ) : C, F = () => {
-    c || (k(!b), x(!b), b ? (m == null || m(), w && I("")) : (f == null || f(), w && setTimeout(() => {
-      var v;
-      (v = M.current) == null || v.focus();
+    return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
+  }, [f]);
+  const V = b && A ? h.filter(
+    (C) => C.label.toLowerCase().includes(A.toLowerCase())
+  ) : h, F = () => {
+    c || (k(!_), x(!_), _ ? (f == null || f(), b && S("")) : (p == null || p(), b && setTimeout(() => {
+      var C;
+      (C = M.current) == null || C.focus();
     }, 0)));
-  }, X = (v) => {
-    v.disabled || (S(v.value), k(!1), x(!1), I(""), d == null || d(v.value), m == null || m());
-  }, te = (v) => {
-    I(v.target.value);
-  }, G = (v) => {
-    v.key === "Escape" ? (k(!1), x(!1), I("")) : v.key === "Enter" && V.length > 0 && V[0] && X(V[0]);
-  }, H = C.find((v) => v.value === j), le = j !== "" && j !== void 0, re = (v) => {
-    v.stopPropagation(), S(""), d == null || d("");
-  }, ie = le || E || h || w && P, oe = [
+  }, X = (C) => {
+    C.disabled || (I(C.value), k(!1), x(!1), S(""), d == null || d(C.value), f == null || f());
+  }, te = (C) => {
+    S(C.target.value);
+  }, G = (C) => {
+    C.key === "Escape" ? (k(!1), x(!1), S("")) : C.key === "Enter" && V.length > 0 && V[0] && X(V[0]);
+  }, H = h.find((C) => C.value === j), le = j !== "" && j !== void 0, re = (C) => {
+    C.stopPropagation(), I(""), d == null || d("");
+  }, ie = le || E || y || b && A, oe = [
     "clarity-select",
     "clarity-select--outlined",
     `clarity-select--${t}`,
     e && `clarity-select--${e}`,
     n && "clarity-select--error",
     c && "clarity-select--disabled",
-    (E || b) && "clarity-select--focused",
+    (E || _) && "clarity-select--focused",
     ie && "clarity-select--label-up",
-    b && "clarity-select--open",
-    w && "clarity-select--searchable",
+    _ && "clarity-select--open",
+    b && "clarity-select--searchable",
     o && "clarity-select--with-start-icon",
     (u || N) && "clarity-select--with-end-icon",
     i
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: "clarity-select-wrapper", children: [
-    /* @__PURE__ */ _(
+  return /* @__PURE__ */ w("div", { className: "clarity-select-wrapper", children: [
+    /* @__PURE__ */ w(
       "div",
       {
-        ref: $,
+        ref: g,
         className: oe,
-        onClick: w ? void 0 : F,
+        onClick: b ? void 0 : F,
         role: "combobox",
-        "aria-expanded": b,
+        "aria-expanded": _,
         "aria-haspopup": "listbox",
-        tabIndex: c || w ? -1 : 0,
+        tabIndex: c || b ? -1 : 0,
         ...B,
         children: [
           o && /* @__PURE__ */ s("div", { className: "clarity-select__start-icon", children: o }),
-          /* @__PURE__ */ _("div", { className: "clarity-select__field", children: [
-            w ? /* @__PURE__ */ s(
+          /* @__PURE__ */ w("div", { className: "clarity-select__field", children: [
+            b ? /* @__PURE__ */ s(
               "input",
               {
                 ref: M,
                 type: "text",
                 className: "clarity-select__search-input",
-                value: b ? P : H ? H.label : "",
+                value: _ ? A : H ? H.label : "",
                 onChange: te,
                 onKeyDown: G,
                 onFocus: () => {
-                  b || (k(!0), x(!0), f == null || f());
+                  _ || (k(!0), x(!0), p == null || p());
                 },
-                placeholder: H ? H.label : h,
+                placeholder: H ? H.label : y,
                 disabled: c,
-                readOnly: !b
+                readOnly: !_
               }
-            ) : /* @__PURE__ */ s("div", { className: "clarity-select__display", children: H ? H.label : h }),
+            ) : /* @__PURE__ */ s("div", { className: "clarity-select__display", children: H ? H.label : y }),
             a && /* @__PURE__ */ s("label", { className: "clarity-select__label", children: a })
           ] }),
           N && le && /* @__PURE__ */ s(
@@ -352,7 +413,7 @@ const lt = L.forwardRef(({
             "div",
             {
               className: "clarity-select__end-icon",
-              onClick: w ? F : void 0,
+              onClick: b ? F : void 0,
               children: u || /* @__PURE__ */ s(
                 "svg",
                 {
@@ -375,20 +436,20 @@ const lt = L.forwardRef(({
               )
             }
           ),
-          b && /* @__PURE__ */ s("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ s("ul", { className: "clarity-select__options", role: "listbox", children: V.length > 0 ? V.map((v) => /* @__PURE__ */ s(
+          _ && /* @__PURE__ */ s("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ s("ul", { className: "clarity-select__options", role: "listbox", children: V.length > 0 ? V.map((C) => /* @__PURE__ */ s(
             "li",
             {
               className: [
                 "clarity-select__option",
-                v.disabled && "clarity-select__option--disabled",
-                j === v.value && "clarity-select__option--selected"
+                C.disabled && "clarity-select__option--disabled",
+                j === C.value && "clarity-select__option--selected"
               ].filter(Boolean).join(" "),
-              onClick: () => X(v),
+              onClick: () => X(C),
               role: "option",
-              "aria-selected": j === v.value,
-              children: v.label
+              "aria-selected": j === C.value,
+              children: C.label
             },
-            v.value
+            C.value
           )) : /* @__PURE__ */ s("li", { className: "clarity-select__option clarity-select__option--no-results", children: "Nenhum resultado encontrado" }) }) })
         ]
       }
@@ -408,56 +469,56 @@ const nt = Ke(({
   errorMessage: u,
   disabled: i = !1,
   variant: c = "primary",
-  size: p = "medium",
-  maxSelectedLabels: y = 3,
-  selectionLimit: f,
-  className: m = "",
+  size: m = "medium",
+  maxSelectedLabels: v = 3,
+  selectionLimit: p,
+  className: f = "",
   id: d,
-  name: C,
-  required: h = !1,
+  name: h,
+  required: y = !1,
   "data-testid": N,
-  ...w
+  ...b
 }, B) => {
-  const [g, b] = T(!1), [k, E] = T(""), [x, j] = T(!1), S = A(null), P = A(null), I = A(null), $ = (v) => {
-    S.current = v, B && (typeof B == "function" ? B(v) : B.current = v);
+  const [$, _] = T(!1), [k, E] = T(""), [x, j] = T(!1), I = P(null), A = P(null), S = P(null), g = (C) => {
+    I.current = C, B && (typeof B == "function" ? B(C) : B.current = C);
   };
   O(() => {
-    const v = (D) => {
-      S.current && !S.current.contains(D.target) && (b(!1), j(!1), E(""));
+    const C = (D) => {
+      I.current && !I.current.contains(D.target) && (_(!1), j(!1), E(""));
     };
-    return document.addEventListener("click", v), () => document.removeEventListener("click", v);
+    return document.addEventListener("click", C), () => document.removeEventListener("click", C);
   }, []);
   const M = e.filter(
-    (v) => v.label.toLowerCase().includes(k.toLowerCase())
+    (C) => C.label.toLowerCase().includes(k.toLowerCase())
   ), V = () => {
-    i || (b(!g), j(!g), g ? E("") : setTimeout(() => {
-      var v;
-      (v = P.current) == null || v.focus();
+    i || (_(!$), j(!$), $ ? E("") : setTimeout(() => {
+      var C;
+      (C = A.current) == null || C.focus();
     }, 100));
-  }, F = (v, D) => {
+  }, F = (C, D) => {
     if (i)
       return;
     D && (D.stopPropagation(), D.preventDefault());
-    const U = t.includes(v);
+    const U = t.includes(C);
     let R;
-    U ? R = t.filter((se) => se !== v) : R = [...t, v], a && a(R);
-  }, X = (v, D) => {
+    U ? R = t.filter((se) => se !== C) : R = [...t, C], a && a(R);
+  }, X = (C, D) => {
     if (D.stopPropagation(), i) return;
-    const U = t.filter((R) => R !== v);
+    const U = t.filter((R) => R !== C);
     a == null || a(U);
-  }, te = (v) => {
-    v.stopPropagation(), !i && (a == null || a([]));
-  }, G = (v) => {
-    E(v.target.value);
-  }, H = (v) => {
-    v.key === "Escape" && (b(!1), j(!1), E(""));
-  }, le = x || g || t.length > 0, re = () => {
+  }, te = (C) => {
+    C.stopPropagation(), !i && (a == null || a([]));
+  }, G = (C) => {
+    E(C.target.value);
+  }, H = (C) => {
+    C.key === "Escape" && (_(!1), j(!1), E(""));
+  }, le = x || $ || t.length > 0, re = () => {
     if (t.length === 0) return null;
-    const v = t.map(
+    const C = t.map(
       (R) => e.find((se) => se.value === R)
-    ).filter(Boolean), D = v.slice(0, y), U = v.length - y;
-    return /* @__PURE__ */ _("div", { className: "clarity-multiselect__chips", children: [
-      D.map((R) => /* @__PURE__ */ _("div", { className: "clarity-multiselect__chip", children: [
+    ).filter(Boolean), D = C.slice(0, v), U = C.length - v;
+    return /* @__PURE__ */ w("div", { className: "clarity-multiselect__chips", children: [
+      D.map((R) => /* @__PURE__ */ w("div", { className: "clarity-multiselect__chip", children: [
         /* @__PURE__ */ s("span", { className: "clarity-multiselect__chip-label", children: R.label }),
         !i && /* @__PURE__ */ s(
           "button",
@@ -470,7 +531,7 @@ const nt = Ke(({
           }
         )
       ] }, R.value)),
-      U > 0 && /* @__PURE__ */ _("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
+      U > 0 && /* @__PURE__ */ w("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
         "+",
         U,
         " mais"
@@ -478,39 +539,39 @@ const nt = Ke(({
     ] });
   }, ie = [
     "clarity-multiselect-wrapper",
-    m
+    f
   ].filter(Boolean).join(" "), oe = [
     "clarity-multiselect",
     `clarity-multiselect--${c}`,
-    `clarity-multiselect--${p}`,
-    g && "clarity-multiselect--open",
+    `clarity-multiselect--${m}`,
+    $ && "clarity-multiselect--open",
     x && "clarity-multiselect--focused",
     le && "clarity-multiselect--label-up",
     o && "clarity-multiselect--error",
     i && "clarity-multiselect--disabled",
     t.length > 0 && "clarity-multiselect--has-value"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: ie, children: [
-    /* @__PURE__ */ _(
+  return /* @__PURE__ */ w("div", { className: ie, children: [
+    /* @__PURE__ */ w(
       "div",
       {
-        ref: $,
+        ref: g,
         className: oe,
         "data-testid": N,
-        ...w,
+        ...b,
         children: [
-          /* @__PURE__ */ _(
+          /* @__PURE__ */ w(
             "div",
             {
               className: "clarity-multiselect__field",
               onClick: V,
               children: [
-                n && /* @__PURE__ */ _("label", { className: "clarity-multiselect__label", children: [
+                n && /* @__PURE__ */ w("label", { className: "clarity-multiselect__label", children: [
                   n,
-                  h && /* @__PURE__ */ s("span", { className: "clarity-multiselect__required", children: "*" })
+                  y && /* @__PURE__ */ s("span", { className: "clarity-multiselect__required", children: "*" })
                 ] }),
                 /* @__PURE__ */ s("div", { className: "clarity-multiselect__content", children: t.length > 0 ? re() : /* @__PURE__ */ s("span", { className: "clarity-multiselect__placeholder", children: l }) }),
-                /* @__PURE__ */ _("div", { className: "clarity-multiselect__icons", children: [
+                /* @__PURE__ */ w("div", { className: "clarity-multiselect__icons", children: [
                   t.length > 0 && !i && /* @__PURE__ */ s(
                     "button",
                     {
@@ -535,11 +596,11 @@ const nt = Ke(({
               ]
             }
           ),
-          g && /* @__PURE__ */ _("div", { ref: I, className: "clarity-multiselect__dropdown", children: [
+          $ && /* @__PURE__ */ w("div", { ref: S, className: "clarity-multiselect__dropdown", children: [
             /* @__PURE__ */ s("div", { className: "clarity-multiselect__search", children: /* @__PURE__ */ s(
               "input",
               {
-                ref: P,
+                ref: A,
                 type: "text",
                 className: "clarity-multiselect__search-input",
                 placeholder: "Buscar opções...",
@@ -548,9 +609,9 @@ const nt = Ke(({
                 onKeyDown: H
               }
             ) }),
-            /* @__PURE__ */ s("ul", { className: "clarity-multiselect__options", children: M.length > 0 ? M.map((v) => {
-              const D = t.includes(v.value), U = v.disabled || i;
-              return /* @__PURE__ */ _(
+            /* @__PURE__ */ s("ul", { className: "clarity-multiselect__options", children: M.length > 0 ? M.map((C) => {
+              const D = t.includes(C.value), U = C.disabled || i;
+              return /* @__PURE__ */ w(
                 "li",
                 {
                   className: [
@@ -558,7 +619,7 @@ const nt = Ke(({
                     D && "clarity-multiselect__option--selected",
                     U && "clarity-multiselect__option--disabled"
                   ].filter(Boolean).join(" "),
-                  onClick: (R) => !U && F(v.value, R),
+                  onClick: (R) => !U && F(C.value, R),
                   children: [
                     /* @__PURE__ */ s("div", { className: "clarity-multiselect__option-checkbox", children: /* @__PURE__ */ s("div", { className: [
                       "clarity-multiselect__checkbox",
@@ -573,10 +634,10 @@ const nt = Ke(({
                         strokeLinejoin: "round"
                       }
                     ) }) }) }),
-                    /* @__PURE__ */ s("span", { className: "clarity-multiselect__option-label", children: v.label })
+                    /* @__PURE__ */ s("span", { className: "clarity-multiselect__option-label", children: C.label })
                   ]
                 },
-                v.value
+                C.value
               );
             }) : /* @__PURE__ */ s("li", { className: "clarity-multiselect__option clarity-multiselect__option--no-results", children: "Nenhum resultado encontrado" }) })
           ] })
@@ -605,7 +666,7 @@ const fe = z(null), pe = () => {
     "clarity-modal-close",
     n && `clarity-modal-close--${n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: o, children: [
+  return /* @__PURE__ */ w("div", { className: o, children: [
     a && /* @__PURE__ */ s("h2", { className: "clarity-modal-title", children: a }),
     e,
     r && /* @__PURE__ */ s("button", { className: u, onClick: (i) => {
@@ -616,7 +677,7 @@ const fe = z(null), pe = () => {
 he.displayName = "Modal.Header";
 const ye = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-modal-content ${t}`, children: e });
 ye.displayName = "Modal.Content";
-const ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ _("div", { className: `clarity-modal-footer ${t}`, children: [
+const ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ w("div", { className: `clarity-modal-footer ${t}`, children: [
   /* @__PURE__ */ s("div", { className: "clarity-modal-scroll-indicator" }),
   e
 ] });
@@ -650,29 +711,29 @@ const J = ({
   showCloseButton: u = !0,
   closeOnOverlayClick: i = !0
 }) => {
-  const [c, p] = T(!1), f = e !== void 0 ? e : c, m = t || (() => {
-    p(!1);
+  const [c, m] = T(!1), p = e !== void 0 ? e : c, f = t || (() => {
+    m(!1);
   });
   O(() => {
-    f && (a == null || a());
-  }, [f, a]), O(() => {
-    const w = (B) => {
-      B.key === "Escape" && m();
+    p && (a == null || a());
+  }, [p, a]), O(() => {
+    const b = (B) => {
+      B.key === "Escape" && f();
     };
-    return f ? (document.addEventListener("keydown", w), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
-      document.removeEventListener("keydown", w), document.body.style.overflow = "unset";
+    return p ? (document.addEventListener("keydown", b), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+      document.removeEventListener("keydown", b), document.body.style.overflow = "unset";
     };
-  }, [f, m]);
-  const d = (w) => {
-    i && w.target === w.currentTarget && m();
-  }, C = L.Children.toArray(l).find(
-    (w) => Z(w) && w.type.displayName === "Modal.Trigger"
-  ), h = L.Children.toArray(l).filter(
-    (w) => Z(w) && w.type.displayName !== "Modal.Trigger"
+  }, [p, f]);
+  const d = (b) => {
+    i && b.target === b.currentTarget && f();
+  }, h = L.Children.toArray(l).find(
+    (b) => Z(b) && b.type.displayName === "Modal.Trigger"
+  ), y = L.Children.toArray(l).filter(
+    (b) => Z(b) && b.type.displayName !== "Modal.Trigger"
   ), N = ["clarity-modal", n, `clarity-modal--${o}`].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _(fe.Provider, { value: { onClose: m, variant: r, showCloseButton: u }, children: [
-    C && W(C, { onClick: () => p(!0), variant: r }),
-    f && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", onClick: d, children: /* @__PURE__ */ s("div", { className: N, children: h }) })
+  return /* @__PURE__ */ w(fe.Provider, { value: { onClose: f, variant: r, showCloseButton: u }, children: [
+    h && W(h, { onClick: () => m(!0), variant: r }),
+    p && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", onClick: d, children: /* @__PURE__ */ s("div", { className: N, children: y }) })
   ] });
 };
 J.Header = he;
@@ -681,7 +742,7 @@ J.Footer = ve;
 J.Trigger = Ce;
 J.Close = Ne;
 J.displayName = "Modal";
-const be = z(void 0), $t = () => {
+const be = z(void 0), kt = () => {
   const e = q(be);
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
@@ -691,13 +752,13 @@ const be = z(void 0), $t = () => {
   O(() => {
     const c = setTimeout(() => {
       u("visible");
-    }, 10), p = setTimeout(() => {
+    }, 10), m = setTimeout(() => {
       u("exiting");
-    }, l * 1e3 - 300), y = setTimeout(() => {
+    }, l * 1e3 - 300), v = setTimeout(() => {
       n(e);
     }, l * 1e3);
     return () => {
-      clearTimeout(c), clearTimeout(p), clearTimeout(y);
+      clearTimeout(c), clearTimeout(m), clearTimeout(v);
     };
   }, [e, l, n]);
   const i = [
@@ -706,7 +767,7 @@ const be = z(void 0), $t = () => {
     r ? "colored-background" : "",
     `cl-toast-${o}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: i, children: [
+  return /* @__PURE__ */ w("div", { className: i, children: [
     /* @__PURE__ */ s("div", { className: "cl-toast-message", children: t }),
     /* @__PURE__ */ s("button", { onClick: () => u("exiting"), className: "cl-toast-close-button", children: "×" }),
     /* @__PURE__ */ s(
@@ -717,7 +778,7 @@ const be = z(void 0), $t = () => {
       }
     )
   ] });
-}, kt = ({ children: e }) => {
+}, xt = ({ children: e }) => {
   const [t, a] = T([]), l = Y(() => {
     if (typeof document < "u") {
       const i = document.createElement("div");
@@ -732,23 +793,23 @@ const be = z(void 0), $t = () => {
       };
   }, [l]);
   const n = ne((i) => {
-    const p = {
+    const m = {
       id: (/* @__PURE__ */ new Date()).toISOString() + Math.random(),
       // duration: 5,
       // position: 'right-top',
       ...i
     };
-    a((y) => {
-      const f = [p, ...y];
-      return f.length > 4 ? f.slice(0, 4) : f;
+    a((v) => {
+      const p = [m, ...v];
+      return p.length > 4 ? p.slice(0, 4) : p;
     });
   }, []), r = ne((i) => {
-    a((c) => c.filter((p) => p.id !== i));
+    a((c) => c.filter((m) => m.id !== i));
   }, []), o = Y(() => t.reduce((i, c) => (i[c.position] || (i[c.position] = []), i[c.position].push(c), i), {}), [t]), u = Y(() => ({ show: n }), [n]);
-  return /* @__PURE__ */ _(be.Provider, { value: u, children: [
+  return /* @__PURE__ */ w(be.Provider, { value: u, children: [
     e,
     l && tt.createPortal(
-      Object.entries(o).map(([i, c]) => /* @__PURE__ */ s("div", { className: `cl-toast-container ${i}`, children: c.map((p) => /* @__PURE__ */ s(rt, { ...p, onClose: r }, p.id)) }, i)),
+      Object.entries(o).map(([i, c]) => /* @__PURE__ */ s("div", { className: `cl-toast-container ${i}`, children: c.map((m) => /* @__PURE__ */ s(rt, { ...m, onClose: r }, m.id)) }, i)),
       l
     )
   ] });
@@ -757,7 +818,7 @@ const be = z(void 0), $t = () => {
   if (!e)
     throw new Error("useOffcanvas must be used within an Offcanvas provider");
   return e;
-}, ge = ({
+}, $e = ({
   children: e,
   className: t = ""
 }) => {
@@ -771,7 +832,7 @@ const be = z(void 0), $t = () => {
     "clarity-offcanvas-title",
     l && `clarity-offcanvas-title--${l}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: o, children: [
+  return /* @__PURE__ */ w("div", { className: o, children: [
     r && /* @__PURE__ */ s("h2", { className: i, children: r }),
     e,
     n && /* @__PURE__ */ s("button", { className: u, onClick: (c) => {
@@ -779,9 +840,9 @@ const be = z(void 0), $t = () => {
     }, children: "×" })
   ] });
 };
-ge.displayName = "Offcanvas.Header";
-const $e = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-offcanvas-content ${t}`, children: e });
-$e.displayName = "Offcanvas.Content";
+$e.displayName = "Offcanvas.Header";
+const ge = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-offcanvas-content ${t}`, children: e });
+ge.displayName = "Offcanvas.Content";
 const ke = ({ children: e, onClick: t, variant: a }) => W(e, {
   onClick: (l) => {
     var n, r;
@@ -814,68 +875,68 @@ const K = ({
   showCloseButton: i = !0,
   title: c
 }) => {
-  const [p, y] = T(!1), [f, m] = T(!1), [d, C] = T(!1), h = e !== void 0, N = h ? e : p, w = ne(() => {
-    t ? t() : y(!1);
+  const [m, v] = T(!1), [p, f] = T(!1), [d, h] = T(!1), y = e !== void 0, N = y ? e : m, b = ne(() => {
+    t ? t() : v(!1);
   }, [t]), B = ne(() => {
-    h || y(!0), a == null || a();
-  }, [h, a]);
+    y || v(!0), a == null || a();
+  }, [y, a]);
   O(() => {
     if (N) {
-      C(!0);
-      const $ = setTimeout(() => {
-        m(!0);
+      h(!0);
+      const g = setTimeout(() => {
+        f(!0);
       }, 50);
-      return () => clearTimeout($);
+      return () => clearTimeout(g);
     } else {
-      m(!1);
-      const $ = setTimeout(() => {
-        C(!1);
+      f(!1);
+      const g = setTimeout(() => {
+        h(!1);
       }, 300);
-      return () => clearTimeout($);
+      return () => clearTimeout(g);
     }
   }, [N]), O(() => {
-    const $ = (M) => {
-      M.key === "Escape" && w();
+    const g = (M) => {
+      M.key === "Escape" && b();
     };
-    return N ? (document.addEventListener("keydown", $), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", $), document.body.style.overflow = "unset"), () => {
-      document.removeEventListener("keydown", $), document.body.style.overflow = "unset";
+    return N ? (document.addEventListener("keydown", g), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", g), document.body.style.overflow = "unset"), () => {
+      document.removeEventListener("keydown", g), document.body.style.overflow = "unset";
     };
-  }, [N, w]);
-  const g = ($) => {
-    u && $.target === $.currentTarget && w();
-  }, b = L.Children.toArray(l);
-  let k, E, x, j, S;
-  b.forEach(($) => {
-    if (Z($))
-      if ($.type.displayName === "Offcanvas.Trigger")
-        k = $;
-      else if ($.type.displayName === "Offcanvas.Header")
-        E = $;
-      else if ($.type.displayName === "Offcanvas.Content") {
-        x = $;
-        const V = L.Children.toArray(x.props.children).filter((F) => Z(F) && F.type.displayName === "Offcanvas.Close" ? (S = F, !1) : !0);
+  }, [N, b]);
+  const $ = (g) => {
+    u && g.target === g.currentTarget && b();
+  }, _ = L.Children.toArray(l);
+  let k, E, x, j, I;
+  _.forEach((g) => {
+    if (Z(g))
+      if (g.type.displayName === "Offcanvas.Trigger")
+        k = g;
+      else if (g.type.displayName === "Offcanvas.Header")
+        E = g;
+      else if (g.type.displayName === "Offcanvas.Content") {
+        x = g;
+        const V = L.Children.toArray(x.props.children).filter((F) => Z(F) && F.type.displayName === "Offcanvas.Close" ? (I = F, !1) : !0);
         x = W(x, { children: V });
-      } else $.type.displayName === "Offcanvas.Footer" && (j = $);
-  }), S && (j ? j = W(j, {
-    children: /* @__PURE__ */ _(Ze, { children: [
+      } else g.type.displayName === "Offcanvas.Footer" && (j = g);
+  }), I && (j ? j = W(j, {
+    children: /* @__PURE__ */ w(Ze, { children: [
       j.props.children,
-      S
+      I
     ] })
-  }) : j = /* @__PURE__ */ s(ce, { children: S }));
-  const P = [
+  }) : j = /* @__PURE__ */ s(ce, { children: I }));
+  const A = [
     "clarity-offcanvas",
     n,
     `clarity-offcanvas--${o}`,
     r && `clarity-offcanvas--${r}`,
-    f ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
-  ].filter(Boolean).join(" "), I = [
+    p ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
+  ].filter(Boolean).join(" "), S = [
     "clarity-offcanvas-overlay",
-    f ? "clarity-offcanvas-overlay--visible" : ""
+    p ? "clarity-offcanvas-overlay--visible" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _(_e.Provider, { value: { onClose: w, variant: r, showCloseButton: i, placement: o, title: c }, children: [
+  return /* @__PURE__ */ w(_e.Provider, { value: { onClose: b, variant: r, showCloseButton: i, placement: o, title: c }, children: [
     k && W(k, { onClick: B, variant: r }),
     d && // Only render if shouldRender is true
-    /* @__PURE__ */ s("div", { className: I, onClick: g, children: /* @__PURE__ */ _("div", { className: P, children: [
+    /* @__PURE__ */ s("div", { className: S, onClick: $, children: /* @__PURE__ */ w("div", { className: A, children: [
       E,
       x,
       j && /* @__PURE__ */ s("div", { className: "clarity-offcanvas-scroll-indicator" }),
@@ -884,8 +945,8 @@ const K = ({
     ] }) })
   ] });
 };
-K.Header = ge;
-K.Content = $e;
+K.Header = $e;
+K.Content = ge;
 K.Footer = ce;
 K.Trigger = ke;
 K.Close = xe;
@@ -901,16 +962,16 @@ const it = L.forwardRef(({
   labelPosition: u = "right",
   className: i = "",
   disabled: c = !1,
-  checked: p,
-  id: y,
-  ...f
-}, m) => {
-  const d = y || `check-input-${Math.random().toString(36).substr(2, 9)}`, C = [
+  checked: m,
+  id: v,
+  ...p
+}, f) => {
+  const d = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, h = [
     "clarity-check-input-wrapper",
     `clarity-check-input-wrapper--${u}`,
     c && "clarity-check-input-wrapper--disabled",
     r && "clarity-check-input-wrapper--error"
-  ].filter(Boolean).join(" "), h = [
+  ].filter(Boolean).join(" "), y = [
     "clarity-check-input",
     `clarity-check-input--${e}`,
     `clarity-check-input--${a}`,
@@ -923,21 +984,21 @@ const it = L.forwardRef(({
     `clarity-check-input__label--${a}`,
     c && "clarity-check-input__label--disabled"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: "clarity-check-input-container", children: [
-    /* @__PURE__ */ _("label", { className: C, htmlFor: d, children: [
+  return /* @__PURE__ */ w("div", { className: "clarity-check-input-container", children: [
+    /* @__PURE__ */ w("label", { className: h, htmlFor: d, children: [
       /* @__PURE__ */ s(
         "input",
         {
-          ref: m,
+          ref: f,
           id: d,
           type: e,
-          className: h,
+          className: y,
           disabled: c,
-          checked: p,
-          ...f
+          checked: m,
+          ...p
         }
       ),
-      /* @__PURE__ */ _("div", { className: "clarity-check-input__custom", children: [
+      /* @__PURE__ */ w("div", { className: "clarity-check-input__custom", children: [
         e === "checkbox" && /* @__PURE__ */ s(
           "svg",
           {
@@ -976,42 +1037,42 @@ const ot = L.forwardRef(({
   className: u = "",
   disabled: i = !1,
   checked: c,
-  id: p,
-  ...y
-}, f) => {
-  const m = p || `input-switch-${Math.random().toString(36).substr(2, 9)}`, d = [
+  id: m,
+  ...v
+}, p) => {
+  const f = m || `input-switch-${Math.random().toString(36).substr(2, 9)}`, d = [
     "clarity-input-switch-wrapper",
     `clarity-input-switch-wrapper--${o}`,
     i && "clarity-input-switch-wrapper--disabled",
     n && "clarity-input-switch-wrapper--error"
-  ].filter(Boolean).join(" "), C = [
+  ].filter(Boolean).join(" "), h = [
     "clarity-input-switch",
     `clarity-input-switch--${t}`,
     e && `clarity-input-switch--${e}`,
     n && "clarity-input-switch--error",
     i && "clarity-input-switch--disabled",
     u
-  ].filter(Boolean).join(" "), h = [
+  ].filter(Boolean).join(" "), y = [
     "clarity-input-switch__label",
     `clarity-input-switch__label--${t}`,
     i && "clarity-input-switch__label--disabled"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: "clarity-input-switch-container", children: [
-    /* @__PURE__ */ _("label", { className: d, htmlFor: m, children: [
+  return /* @__PURE__ */ w("div", { className: "clarity-input-switch-container", children: [
+    /* @__PURE__ */ w("label", { className: d, htmlFor: f, children: [
       /* @__PURE__ */ s(
         "input",
         {
-          ref: f,
-          id: m,
+          ref: p,
+          id: f,
           type: "checkbox",
-          className: C,
+          className: h,
           disabled: i,
           checked: c,
-          ...y
+          ...v
         }
       ),
       /* @__PURE__ */ s("div", { className: "clarity-input-switch__track", children: /* @__PURE__ */ s("div", { className: "clarity-input-switch__thumb" }) }),
-      a && /* @__PURE__ */ s("span", { className: h, children: a })
+      a && /* @__PURE__ */ s("span", { className: y, children: a })
     ] }),
     (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-input-switch__helper-text", children: n && r ? r : l })
   ] });
@@ -1038,7 +1099,7 @@ const Ee = ({ children: e }) => W(e, {
   }
 });
 Ee.displayName = "ConfirmationDialog.Trigger";
-const Ie = ({ children: e }) => {
+const Se = ({ children: e }) => {
   const { onClose: t } = de();
   return W(e, {
     onClick: (a) => {
@@ -1047,7 +1108,7 @@ const Ie = ({ children: e }) => {
     }
   });
 };
-Ie.displayName = "ConfirmationDialog.Close";
+Se.displayName = "ConfirmationDialog.Close";
 const Oe = ({ children: e }) => {
   const { onConfirm: t } = de();
   return W(e, {
@@ -1067,37 +1128,37 @@ const Q = ({
 }) => {
   const [r, o] = T(!1), u = e !== void 0, i = u ? e : r, c = () => {
     u || o(!0);
-  }, p = () => {
+  }, m = () => {
     t ? t() : o(!1);
-  }, y = () => {
-    a && a(), p();
+  }, v = () => {
+    a && a(), m();
   };
   O(() => {
-    const C = (h) => {
-      h.key === "Escape" && p();
+    const h = (y) => {
+      y.key === "Escape" && m();
     };
-    return i ? (document.addEventListener("keydown", C), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
-      document.removeEventListener("keydown", C), document.body.style.overflow = "unset";
+    return i ? (document.addEventListener("keydown", h), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+      document.removeEventListener("keydown", h), document.body.style.overflow = "unset";
     };
-  }, [i, p]);
-  const f = L.Children.toArray(n).find(
-    (C) => Z(C) && C.type.displayName === "ConfirmationDialog.Trigger"
-  ), m = L.Children.toArray(n).filter(
-    (C) => Z(C) && C.type.displayName !== "ConfirmationDialog.Trigger"
+  }, [i, m]);
+  const p = L.Children.toArray(n).find(
+    (h) => Z(h) && h.type.displayName === "ConfirmationDialog.Trigger"
+  ), f = L.Children.toArray(n).filter(
+    (h) => Z(h) && h.type.displayName !== "ConfirmationDialog.Trigger"
   ), d = `clarity-confirmation-dialog clarity-confirmation-dialog--${l}`;
-  return /* @__PURE__ */ _(Te.Provider, { value: { variant: l, onClose: p, onConfirm: y, onOpen: c }, children: [
-    f,
-    i && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ s("div", { className: d, children: m }) })
+  return /* @__PURE__ */ w(Te.Provider, { value: { variant: l, onClose: m, onConfirm: v, onOpen: c }, children: [
+    p,
+    i && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ s("div", { className: d, children: f }) })
   ] });
 };
 Q.Header = Be;
 Q.Content = je;
 Q.Footer = Le;
 Q.Trigger = Ee;
-Q.Close = Ie;
+Q.Close = Se;
 Q.Confirm = Oe;
 Q.displayName = "ConfirmationDialog";
-const xt = ({
+const Tt = ({
   variant: e = "primary",
   product: t,
   tone: a,
@@ -1108,26 +1169,26 @@ const xt = ({
   children: u,
   onClick: i,
   type: c = "button",
-  className: p = "",
-  "aria-label": y,
-  title: f,
-  ...m
+  className: m = "",
+  "aria-label": v,
+  title: p,
+  ...f
 }) => {
-  const d = "clarity-button-icon", C = t && a, h = C ? `${d}--custom` : `${d}--${e}`, N = [
+  const d = "clarity-button-icon", h = t && a, y = h ? `${d}--custom` : `${d}--${e}`, N = [
     d,
-    h,
+    y,
     `${d}--${n}`,
     o && `${d}--loading`,
     r && `${d}--disabled`,
-    p
-  ].filter(Boolean).join(" "), w = (g) => {
-    const b = parseInt(g);
-    return b >= 800 ? "900" : b >= 700 ? "800" : b >= 600 ? "700" : b >= 500 ? "600" : b >= 400 ? "500" : b >= 300 ? "400" : b >= 200 ? "300" : "200";
-  }, B = C ? {
+    m
+  ].filter(Boolean).join(" "), b = ($) => {
+    const _ = parseInt($);
+    return _ >= 800 ? "900" : _ >= 700 ? "800" : _ >= 600 ? "700" : _ >= 500 ? "600" : _ >= 400 ? "500" : _ >= 300 ? "400" : _ >= 200 ? "300" : "200";
+  }, B = h ? {
     "--custom-bg-color": `var(--clarity-${t}-${a})`,
-    "--custom-hover-color": `var(--clarity-${t}-${l || w(a)})`
+    "--custom-hover-color": `var(--clarity-${t}-${l || b(a)})`
   } : {};
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ w(
     "button",
     {
       className: N,
@@ -1135,16 +1196,16 @@ const xt = ({
       disabled: r || o,
       onClick: i,
       type: c,
-      "aria-label": y,
-      title: f,
-      ...m,
+      "aria-label": v,
+      title: p,
+      ...f,
       children: [
         o && /* @__PURE__ */ s("div", { className: `${d}__spinner` }),
         !o && u
       ]
     }
   );
-}, Tt = ({
+}, Bt = ({
   variant: e = "primary",
   product: t,
   tone: a,
@@ -1155,20 +1216,20 @@ const xt = ({
   onClick: u,
   href: i,
   target: c,
-  rel: p,
-  className: y = "",
-  ...f
+  rel: m,
+  className: v = "",
+  ...p
 }) => {
-  const m = "clarity-button-link", d = t && a, C = d ? `${m}--custom` : `${m}--${e}`, h = [
-    m,
-    C,
-    `${m}--${n}`,
-    r && `${m}--disabled`,
-    y
+  const f = "clarity-button-link", d = t && a, h = d ? `${f}--custom` : `${f}--${e}`, y = [
+    f,
+    h,
+    `${f}--${n}`,
+    r && `${f}--disabled`,
+    v
   ].filter(Boolean).join(" "), N = (B) => {
-    const g = parseInt(B);
-    return g >= 800 ? "900" : g >= 700 ? "800" : g >= 600 ? "700" : g >= 500 ? "600" : g >= 400 ? "500" : g >= 300 ? "400" : g >= 200 ? "300" : "200";
-  }, w = d ? {
+    const $ = parseInt(B);
+    return $ >= 800 ? "900" : $ >= 700 ? "800" : $ >= 600 ? "700" : $ >= 500 ? "600" : $ >= 400 ? "500" : $ >= 300 ? "400" : $ >= 200 ? "300" : "200";
+  }, b = d ? {
     "--custom-color": `var(--clarity-${t}-${a})`,
     "--custom-hover-color": `var(--clarity-${t}-${l || N(a)})`
   } : {};
@@ -1177,26 +1238,26 @@ const xt = ({
     {
       href: i,
       target: c,
-      rel: p || (c === "_blank" ? "noopener noreferrer" : void 0),
-      className: h,
-      style: w,
+      rel: m || (c === "_blank" ? "noopener noreferrer" : void 0),
+      className: y,
+      style: b,
       onClick: r ? void 0 : u,
-      ...f,
+      ...p,
       children: o
     }
   ) : /* @__PURE__ */ s(
     "button",
     {
-      className: h,
-      style: w,
+      className: y,
+      style: b,
       disabled: r,
       onClick: u,
-      ...f,
+      ...p,
       children: o
     }
   );
-}, Se = z(void 0), De = () => {
-  const e = q(Se);
+}, Ie = z(void 0), De = () => {
+  const e = q(Ie);
   if (!e)
     throw new Error("Accordion components must be used within an Accordion");
   return e;
@@ -1211,26 +1272,26 @@ const xt = ({
   className: u = "",
   children: i,
   onSelect: c,
-  ...p
+  ...m
 }) => {
-  const [y, f] = T(() => n ? Array.isArray(n) ? n : [n] : []), m = (b) => {
+  const [v, p] = T(() => n ? Array.isArray(n) ? n : [n] : []), f = (_) => {
     let k;
-    r ? k = y.includes(b) ? y.filter((E) => E !== b) : [...y, b] : k = y.includes(b) ? [] : [b], f(k), c && c(y.includes(b) ? null : b, {});
-  }, d = "clarity-accordion", C = t && a, h = C ? `${d}--custom` : `${d}--${e}`, N = [
+    r ? k = v.includes(_) ? v.filter((E) => E !== _) : [...v, _] : k = v.includes(_) ? [] : [_], p(k), c && c(v.includes(_) ? null : _, {});
+  }, d = "clarity-accordion", h = t && a, y = h ? `${d}--custom` : `${d}--${e}`, N = [
     d,
-    h,
+    y,
     o && `${d}--flush`,
     u
-  ].filter(Boolean).join(" "), w = (b) => {
-    const k = parseInt(b);
+  ].filter(Boolean).join(" "), b = (_) => {
+    const k = parseInt(_);
     return k >= 800 ? "900" : k >= 700 ? "800" : k >= 600 ? "700" : k >= 500 ? "600" : k >= 400 ? "500" : k >= 300 ? "400" : k >= 200 ? "300" : "200";
-  }, B = C ? {
+  }, B = h ? {
     "--custom-border-color": `var(--clarity-${t}-${a})`,
     "--custom-header-color": `var(--clarity-${t}-${a})`,
-    "--custom-hover-color": `var(--clarity-${t}-${l || w(a)})`
-  } : {}, g = {
-    activeKeys: y,
-    toggleItem: m,
+    "--custom-hover-color": `var(--clarity-${t}-${l || b(a)})`
+  } : {}, $ = {
+    activeKeys: v,
+    toggleItem: f,
     alwaysOpen: r,
     variant: e,
     product: t,
@@ -1238,7 +1299,7 @@ const xt = ({
     hoverTone: l,
     flush: o
   };
-  return /* @__PURE__ */ s(Se.Provider, { value: g, children: /* @__PURE__ */ s("div", { className: N, style: B, ...p, children: i }) });
+  return /* @__PURE__ */ s(Ie.Provider, { value: $, children: /* @__PURE__ */ s("div", { className: N, style: B, ...m, children: i }) });
 }, dt = ({
   eventKey: e,
   disabled: t = !1,
@@ -1267,10 +1328,10 @@ const xt = ({
   isActive: r = !1,
   ...o
 }) => {
-  const { toggleItem: u } = De(), i = "clarity-accordion", c = (p) => {
-    !n && l && u(l), a == null || a(p);
+  const { toggleItem: u } = De(), i = "clarity-accordion", c = (m) => {
+    !n && l && u(l), a == null || a(m);
   };
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ w(
     "button",
     {
       className: [`${i}__header`, e].filter(Boolean).join(" "),
@@ -1314,19 +1375,19 @@ const xt = ({
       children: /* @__PURE__ */ s("div", { className: [`${r}__body`, e].filter(Boolean).join(" "), ...n, children: t })
     }
   );
-}, Bt = Object.assign(ct, {
+}, jt = Object.assign(ct, {
   Item: dt,
   Header: mt,
   Body: ut
 }), Re = z(
   void 0
-), Pe = () => {
+), Ae = () => {
   const e = q(Re);
   if (!e)
     throw new Error("useDropdown must be used within a DropdownProvider");
   return e;
 }, ft = ({ children: e }) => {
-  const { setIsOpen: t, triggerRef: a } = Pe();
+  const { setIsOpen: t, triggerRef: a } = Ae();
   return /* @__PURE__ */ s(
     "button",
     {
@@ -1339,41 +1400,41 @@ const xt = ({
     }
   );
 }, pt = ({ children: e }) => {
-  const { isOpen: t, contentRef: a, styles: l } = Pe();
+  const { isOpen: t, contentRef: a, styles: l } = Ae();
   return t ? /* @__PURE__ */ s("div", { ref: a, className: "dropdown__content", style: l, children: e }) : null;
-}, ht = ({ children: e }) => /* @__PURE__ */ s("div", { className: "dropdown__menu", children: e }), yt = ({ href: e, children: t }) => /* @__PURE__ */ s("a", { href: e, className: "dropdown__item", children: t }), vt = () => /* @__PURE__ */ s("hr", { className: "dropdown__separator" }), ae = ({ title: e, position: t = "bottom", children: a }) => {
-  const [l, n] = T(!1), [r, o] = T({}), u = A(null), i = A(null), c = A(null);
+}, ht = ({ children: e }) => /* @__PURE__ */ s("div", { className: "dropdown__menu", children: e }), yt = ({ as: e, children: t, ...a }) => /* @__PURE__ */ s(e || "a", { ...a, className: "dropdown__item", children: t }), vt = () => /* @__PURE__ */ s("hr", { className: "dropdown__separator" }), ae = ({ title: e, position: t = "bottom", children: a }) => {
+  const [l, n] = T(!1), [r, o] = T({}), u = P(null), i = P(null), c = P(null);
   return et(() => {
     if (l) {
-      const p = i.current, y = c.current;
-      if (!p || !y) return;
-      const f = p.getBoundingClientRect(), m = y.getBoundingClientRect(), d = window.innerHeight, C = window.innerWidth;
-      let h = t;
-      t === "bottom" && f.bottom + m.height > d && (h = "top"), t === "top" && f.top - m.height < 0 && (h = "bottom"), t === "right" && f.right + m.width > C && (h = "left"), t === "left" && f.left - m.width < 0 && (h = "right");
+      const m = i.current, v = c.current;
+      if (!m || !v) return;
+      const p = m.getBoundingClientRect(), f = v.getBoundingClientRect(), d = window.innerHeight, h = window.innerWidth;
+      let y = t;
+      t === "bottom" && p.bottom + f.height > d && (y = "top"), t === "top" && p.top - f.height < 0 && (y = "bottom"), t === "right" && p.right + f.width > h && (y = "left"), t === "left" && p.left - f.width < 0 && (y = "right");
       const N = {};
-      switch (h) {
+      switch (y) {
         case "top":
-          N.bottom = f.height + 4, N.left = f.width / 2 - m.width / 2;
+          N.bottom = p.height + 4, N.left = p.width / 2 - f.width / 2;
           break;
         case "right":
-          N.left = f.width + 4, N.top = f.height / 2 - m.height / 2;
+          N.left = p.width + 4, N.top = p.height / 2 - f.height / 2;
           break;
         case "left":
-          N.right = f.width + 4, N.top = f.height / 2 - m.height / 2;
+          N.right = p.width + 4, N.top = p.height / 2 - f.height / 2;
           break;
         case "bottom":
         default:
-          N.top = f.height + 4, N.left = f.width / 2 - m.width / 2;
+          N.top = p.height + 4, N.left = p.width / 2 - f.width / 2;
           break;
       }
       o(N);
     }
   }, [l, t]), O(() => {
-    const p = (y) => {
-      u.current && !u.current.contains(y.target) && n(!1);
+    const m = (v) => {
+      u.current && !u.current.contains(v.target) && n(!1);
     };
-    return document.addEventListener("mousedown", p), () => {
-      document.removeEventListener("mousedown", p);
+    return document.addEventListener("mousedown", m), () => {
+      document.removeEventListener("mousedown", m);
     };
   }, []), /* @__PURE__ */ s(Re.Provider, { value: { isOpen: l, setIsOpen: n, triggerRef: i, contentRef: c, styles: r }, children: /* @__PURE__ */ s(
     "div",
@@ -1390,8 +1451,8 @@ ae.Content = pt;
 ae.Menu = ht;
 ae.Item = yt;
 ae.Separator = vt;
-const Ae = z(null), Ve = () => {
-  const e = q(Ae);
+const Pe = z(null), Ve = () => {
+  const e = q(Pe);
   if (!e)
     throw new Error("useTabs must be used within a Tabs provider");
   return e;
@@ -1440,12 +1501,12 @@ const me = ({
     n,
     `orientation-${l}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s(Ae.Provider, { value: u, children: /* @__PURE__ */ s("div", { className: i, children: e }) });
+  return /* @__PURE__ */ s(Pe.Provider, { value: u, children: /* @__PURE__ */ s("div", { className: i, children: e }) });
 };
 me.Tab = He;
 me.Content = Me;
 me.displayName = "Tabs";
-const jt = ({
+const Lt = ({
   content: e,
   position: t = "top",
   variant: a = "primary",
@@ -1456,43 +1517,43 @@ const jt = ({
   children: u,
   className: i = "",
   disabled: c = !1,
-  delay: p = 200,
-  hideDelay: y = 100,
-  trigger: f = "hover",
-  arrow: m = !0,
+  delay: m = 200,
+  hideDelay: v = 100,
+  trigger: p = "hover",
+  arrow: f = !0,
   ...d
 }) => {
-  const [C, h] = T(!1), [N, w] = T(null), B = A(null), g = A(null), b = "clarity-tooltip", k = !!r, E = l && n && !k;
+  const [h, y] = T(!1), [N, b] = T(null), B = P(null), $ = P(null), _ = "clarity-tooltip", k = !!r, E = l && n && !k;
   let x = "";
-  k ? x = `${b}__content--custom-bg` : E ? x = `${b}__content--custom` : x = `${b}__content--${a}`;
+  k ? x = `${_}__content--custom-bg` : E ? x = `${_}__content--custom` : x = `${_}__content--${a}`;
   const j = [
-    b,
-    `${b}--${t}`,
+    _,
+    `${_}--${t}`,
     i
-  ].filter(Boolean).join(" "), S = [
-    `${b}__content`,
+  ].filter(Boolean).join(" "), I = [
+    `${_}__content`,
     x,
-    m && `${b}__content--arrow`
-  ].filter(Boolean).join(" "), P = {}, I = {};
-  k && r && (I["--tooltip-bg-color"] = r), o && (I["--tooltip-text-color"] = o), E && l && n && (I["--tooltip-product"] = l, I["--tooltip-tone"] = n);
-  const $ = {
-    ...P,
-    ...Object.keys(I).length > 0 ? I : {}
+    f && `${_}__content--arrow`
+  ].filter(Boolean).join(" "), A = {}, S = {};
+  k && r && (S["--tooltip-bg-color"] = r), o && (S["--tooltip-text-color"] = o), E && l && n && (S["--tooltip-product"] = l, S["--tooltip-tone"] = n);
+  const g = {
+    ...A,
+    ...Object.keys(S).length > 0 ? S : {}
   }, M = () => {
     if (c) return;
     N && clearTimeout(N);
     const H = setTimeout(() => {
-      h(!0);
-    }, p);
-    w(H);
+      y(!0);
+    }, m);
+    b(H);
   }, V = () => {
     N && clearTimeout(N);
     const H = setTimeout(() => {
-      h(!1);
-    }, y);
-    w(H);
+      y(!1);
+    }, v);
+    b(H);
   }, F = () => {
-    c || h(!C);
+    c || y(!h);
   }, X = () => {
     c || M();
   }, te = () => {
@@ -1502,24 +1563,24 @@ const jt = ({
     N && clearTimeout(N);
   }, [N]);
   const G = {};
-  return f === "hover" ? (G.onMouseEnter = M, G.onMouseLeave = V) : f === "click" ? G.onClick = F : f === "focus" && (G.onFocus = X, G.onBlur = te), /* @__PURE__ */ _(
+  return p === "hover" ? (G.onMouseEnter = M, G.onMouseLeave = V) : p === "click" ? G.onClick = F : p === "focus" && (G.onFocus = X, G.onBlur = te), /* @__PURE__ */ w(
     "div",
     {
-      ref: g,
-      className: `${b}__trigger`,
+      ref: $,
+      className: `${_}__trigger`,
       ...G,
       ...d,
       children: [
         u,
-        C && /* @__PURE__ */ s(
+        h && /* @__PURE__ */ s(
           "div",
           {
             ref: B,
             className: j,
-            style: $,
+            style: g,
             role: "tooltip",
-            "aria-hidden": !C,
-            children: /* @__PURE__ */ s("div", { className: S, children: e })
+            "aria-hidden": !h,
+            children: /* @__PURE__ */ s("div", { className: I, children: e })
           }
         )
       ]
@@ -1538,11 +1599,11 @@ const jt = ({
   inputPlaceholder: n = "Search...",
   ...r
 }) => {
-  const [o, u] = T(""), [i, c] = T(null), [p, y] = T(!1), f = [
+  const [o, u] = T(""), [i, c] = T(null), [m, v] = T(!1), p = [
     "clarity-command",
     `clarity-command--${a}`,
     t
-  ].filter(Boolean).join(" "), m = Y(() => ({
+  ].filter(Boolean).join(" "), f = Y(() => ({
     searchTerm: o,
     setSearchTerm: u,
     value: i,
@@ -1552,10 +1613,10 @@ const jt = ({
       empty: l,
       inputPlaceholder: n
     },
-    isOpen: p,
-    setIsOpen: y
-  }), [o, i, a, l, n, p]);
-  return /* @__PURE__ */ s(We.Provider, { value: m, children: /* @__PURE__ */ s("div", { className: f, ...r, children: e }) });
+    isOpen: m,
+    setIsOpen: v
+  }), [o, i, a, l, n, m]);
+  return /* @__PURE__ */ s(We.Provider, { value: f, children: /* @__PURE__ */ s("div", { className: p, ...r, children: e }) });
 };
 Fe.displayName = "Command";
 const Ge = ({ placeholder: e = "Search...", variant: t, onClick: a }) => {
@@ -1567,11 +1628,11 @@ const Ge = ({ placeholder: e = "Search...", variant: t, onClick: a }) => {
     "clarity-command-button",
     `clarity-command-button--${t || n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("button", { className: i, onClick: (p) => {
-    l(!0), a == null || a(p);
+  return /* @__PURE__ */ w("button", { className: i, onClick: (m) => {
+    l(!0), a == null || a(m);
   }, children: [
     /* @__PURE__ */ s("span", { children: e }),
-    /* @__PURE__ */ _("kbd", { className: "clarity-command-shortcut", children: [
+    /* @__PURE__ */ w("kbd", { className: "clarity-command-shortcut", children: [
       r ? "⌘" : "Ctrl+",
       "K"
     ] })
@@ -1589,7 +1650,7 @@ const Ue = ({ children: e, ...t }) => {
 };
 Ue.displayName = "Command.Dialog";
 const ze = ({ className: e = "", ...t }) => {
-  const { searchTerm: a, setSearchTerm: l, variant: n, texts: r, isOpen: o } = ee(), u = A(null);
+  const { searchTerm: a, setSearchTerm: l, variant: n, texts: r, isOpen: o } = ee(), u = P(null);
   O(() => {
     var c;
     o && ((c = u.current) == null || c.focus());
@@ -1616,20 +1677,20 @@ const qe = ({ children: e, className: t = "", ...a }) => {
   const { searchTerm: l } = ee();
   let n = !1;
   const r = (i) => L.Children.toArray(i).map((c) => {
-    var y;
+    var v;
     if (!L.isValidElement(c)) return c;
-    const p = c.type.displayName;
-    if (p === "Command.Empty")
+    const m = c.type.displayName;
+    if (m === "Command.Empty")
       return null;
-    if (p === "Command.Item")
-      return (((y = c.props.children) == null ? void 0 : y.toString().toLowerCase()) || "").includes(l.toLowerCase()) ? (n = !0, c) : null;
-    if (p === "Command.Group") {
-      const f = r(c.props.children);
-      return L.Children.toArray(f).some((d) => L.isValidElement(d) && d.type.displayName === "Command.Item") ? L.cloneElement(c, { ...c.props, children: f }) : null;
+    if (m === "Command.Item")
+      return (((v = c.props.children) == null ? void 0 : v.toString().toLowerCase()) || "").includes(l.toLowerCase()) ? (n = !0, c) : null;
+    if (m === "Command.Group") {
+      const p = r(c.props.children);
+      return L.Children.toArray(p).some((d) => L.isValidElement(d) && d.type.displayName === "Command.Item") ? L.cloneElement(c, { ...c.props, children: p }) : null;
     }
     return c;
   }).filter(Boolean), o = r(e), u = ["clarity-command-list", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: u, ...a, children: [
+  return /* @__PURE__ */ w("div", { className: u, ...a, children: [
     o,
     !n && /* @__PURE__ */ s(ue, {})
   ] });
@@ -1660,7 +1721,7 @@ const Ye = ({ children: e, className: t = "", ...a }) => {
   return /* @__PURE__ */ s("span", { className: l, ...a, children: e });
 };
 Ye.displayName = "Command.Shortcut";
-const Lt = Object.assign(Fe, {
+const Et = Object.assign(Fe, {
   Button: Ge,
   Dialog: Ue,
   Input: ze,
@@ -1672,14 +1733,14 @@ const Lt = Object.assign(Fe, {
   Shortcut: Ye
 }), Ct = ({ columns: e, viewMode: t }) => {
   const a = Array.from({ length: 5 }, (l, n) => n);
-  return t === "card" ? /* @__PURE__ */ _("div", { className: "card-view-wrapper is-loading", children: [
+  return t === "card" ? /* @__PURE__ */ w("div", { className: "card-view-wrapper is-loading", children: [
     /* @__PURE__ */ s("div", { className: "skeleton card-view-header" }),
     /* @__PURE__ */ s("div", { className: "card-view-body", children: a.map((l) => /* @__PURE__ */ s("div", { className: "skeleton card-view-row" }, l)) })
-  ] }) : /* @__PURE__ */ s("div", { className: "table-wrapper is-loading", children: /* @__PURE__ */ _("table", { children: [
+  ] }) : /* @__PURE__ */ s("div", { className: "table-wrapper is-loading", children: /* @__PURE__ */ w("table", { children: [
     /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ s("tr", { className: "table-row", children: e.map((l) => /* @__PURE__ */ s("th", { className: "table-header-cell", children: /* @__PURE__ */ s("div", { className: "skeleton skeleton-text" }) }, l.key)) }) }),
     /* @__PURE__ */ s("tbody", { children: a.map((l) => /* @__PURE__ */ s("tr", { className: "table-row", children: e.map((n) => /* @__PURE__ */ s("td", { className: "table-cell", children: /* @__PURE__ */ s("div", { className: "skeleton skeleton-text" }) }, n.key)) }, l)) })
   ] }) });
-}, Et = ({
+}, St = ({
   variant: e = "secondary",
   columns: t,
   data: a,
@@ -1687,47 +1748,47 @@ const Lt = Object.assign(Fe, {
   isScrollable: n = !1,
   isLoading: r = !1
 }) => {
-  const [o, u] = T(null), [i, c] = T("none"), p = (d) => {
-    d.sortable && (o === d.key ? c((C) => C === "asc" ? "desc" : C === "desc" ? "none" : "asc") : (u(d.key), c("asc")));
-  }, y = Y(() => i === "none" || !o ? a : [...a].sort((d, C) => {
-    const h = d[o], N = C[o];
-    return h < N ? i === "asc" ? -1 : 1 : h > N ? i === "asc" ? 1 : -1 : 0;
-  }), [a, o, i]), f = (d) => d.sortable ? o !== d.key || i === "none" ? /* @__PURE__ */ s("span", { className: "sort-icon", children: "↕" }) : i === "asc" ? /* @__PURE__ */ s("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ s("span", { className: "sort-icon", children: "↓" }) : null;
+  const [o, u] = T(null), [i, c] = T("none"), m = (d) => {
+    d.sortable && (o === d.key ? c((h) => h === "asc" ? "desc" : h === "desc" ? "none" : "asc") : (u(d.key), c("asc")));
+  }, v = Y(() => i === "none" || !o ? a : [...a].sort((d, h) => {
+    const y = d[o], N = h[o];
+    return y < N ? i === "asc" ? -1 : 1 : y > N ? i === "asc" ? 1 : -1 : 0;
+  }), [a, o, i]), p = (d) => d.sortable ? o !== d.key || i === "none" ? /* @__PURE__ */ s("span", { className: "sort-icon", children: "↕" }) : i === "asc" ? /* @__PURE__ */ s("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ s("span", { className: "sort-icon", children: "↓" }) : null;
   if (r)
     return /* @__PURE__ */ s(Ct, { columns: t, viewMode: l });
-  const m = `table-variant-${e} ${n ? "is-scrollable" : ""}`;
-  return l === "card" ? /* @__PURE__ */ _("div", { className: `card-view-wrapper ${m}`, children: [
-    /* @__PURE__ */ s("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((d) => /* @__PURE__ */ _(
+  const f = `table-variant-${e} ${n ? "is-scrollable" : ""}`;
+  return l === "card" ? /* @__PURE__ */ w("div", { className: `card-view-wrapper ${f}`, children: [
+    /* @__PURE__ */ s("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((d) => /* @__PURE__ */ w(
       "div",
       {
         className: `card-view-header-cell ${d.sortable ? "sortable" : ""}`,
-        onClick: () => p(d),
+        onClick: () => m(d),
         style: { minWidth: d.minWidth },
         children: [
           d.header,
-          f(d)
+          p(d)
         ]
       },
       d.key
     )) }),
-    /* @__PURE__ */ s("div", { className: "card-view-body", children: y.map((d, C) => /* @__PURE__ */ s("div", { className: `card-view-row table-row-${e}`, children: t.map((h) => /* @__PURE__ */ s("div", { className: `card-view-cell ${h.align ? `table-cell-align-${h.align}` : ""}`, style: { minWidth: h.minWidth }, children: h.render ? h.render(d) : d[h.key] }, h.key)) }, C)) })
-  ] }) : /* @__PURE__ */ s("div", { className: `table-wrapper ${m}`, children: /* @__PURE__ */ _("table", { children: [
-    /* @__PURE__ */ s("thead", { className: "table-header", children: /* @__PURE__ */ s("tr", { className: "table-row", children: t.map((d) => /* @__PURE__ */ _(
+    /* @__PURE__ */ s("div", { className: "card-view-body", children: v.map((d, h) => /* @__PURE__ */ s("div", { className: `card-view-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ s("div", { className: `card-view-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(d) : d[y.key] }, y.key)) }, h)) })
+  ] }) : /* @__PURE__ */ s("div", { className: `table-wrapper ${f}`, children: /* @__PURE__ */ w("table", { children: [
+    /* @__PURE__ */ s("thead", { className: "table-header", children: /* @__PURE__ */ s("tr", { className: "table-row", children: t.map((d) => /* @__PURE__ */ w(
       "th",
       {
         className: `table-header-cell ${d.sortable ? "sortable" : ""} table-header-cell-${e}`,
-        onClick: () => p(d),
+        onClick: () => m(d),
         style: { minWidth: d.minWidth },
         children: [
           d.header,
-          f(d)
+          p(d)
         ]
       },
       d.key
     )) }) }),
-    /* @__PURE__ */ s("tbody", { children: y.map((d, C) => /* @__PURE__ */ s("tr", { className: `table-row table-row-${e}`, children: t.map((h) => /* @__PURE__ */ s("td", { className: `table-cell ${h.align ? `table-cell-align-${h.align}` : ""}`, style: { minWidth: h.minWidth }, children: h.render ? h.render(d) : d[h.key] }, h.key)) }, C)) })
+    /* @__PURE__ */ s("tbody", { children: v.map((d, h) => /* @__PURE__ */ s("tr", { className: `table-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ s("td", { className: `table-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(d) : d[y.key] }, y.key)) }, h)) })
   ] }) });
-}, It = ({
+}, Ot = ({
   variant: e = "primary",
   product: t,
   tone: a,
@@ -1737,17 +1798,17 @@ const Lt = Object.assign(Fe, {
   "aria-label": o = "Carregando...",
   ...u
 }) => {
-  const i = "clarity-spinner", y = n ? `${i}--custom` : t && a ? `${i}--custom` : `${i}--${e}`, f = [
+  const i = "clarity-spinner", v = n ? `${i}--custom` : t && a ? `${i}--custom` : `${i}--${e}`, p = [
     i,
     `${i}--${l}`,
-    y,
+    v,
     r
-  ].filter(Boolean).join(" "), m = {};
-  return n ? m["--spinner-color"] = n : t && a && (m["--spinner-color"] = `var(--clarity-${t}-${a})`), /* @__PURE__ */ s(
+  ].filter(Boolean).join(" "), f = {};
+  return n ? f["--spinner-color"] = n : t && a && (f["--spinner-color"] = `var(--clarity-${t}-${a})`), /* @__PURE__ */ s(
     "div",
     {
-      className: f,
-      style: m,
+      className: p,
+      style: f,
       role: "status",
       "aria-label": o,
       ...u,
@@ -1772,7 +1833,7 @@ const Lt = Object.assign(Fe, {
       ) })
     }
   );
-}, Ot = {
+}, It = {
   primary: {
     50: "#f0f9ff",
     100: "#e0f2fe",
@@ -1821,7 +1882,7 @@ const Lt = Object.assign(Fe, {
     800: "#065f46",
     900: "#064e3b"
   }
-}, St = {
+}, Dt = {
   xs: "4px",
   sm: "8px",
   md: "16px",
@@ -1829,7 +1890,7 @@ const Lt = Object.assign(Fe, {
   xl: "32px",
   "2xl": "48px",
   "3xl": "64px"
-}, Dt = {
+}, Rt = {
   fontFamily: {
     sans: ["Inter", "system-ui", "sans-serif"],
     mono: ["Fira Code", "monospace"]
@@ -1849,15 +1910,16 @@ const Lt = Object.assign(Fe, {
     semibold: 600,
     bold: 700
   }
-}, Rt = (...e) => e.filter(Boolean).join(" "), Pt = () => Math.random().toString(36).substr(2, 9);
+}, At = (...e) => e.filter(Boolean).join(" "), Pt = () => Math.random().toString(36).substr(2, 9);
 export {
-  Bt as Accordion,
+  jt as Accordion,
   wt as Badge,
-  gt as Button,
-  xt as ButtonIcon,
-  Tt as ButtonLink,
+  $t as Button,
+  gt as ButtonGroup,
+  Tt as ButtonIcon,
+  Bt as ButtonLink,
   it as CheckInput,
-  Lt as Command,
+  Et as Command,
   Q as ConfirmationDialog,
   ae as Dropdown,
   st as Input,
@@ -1866,16 +1928,16 @@ export {
   nt as MultiSelect,
   K as Offcanvas,
   lt as Select,
-  It as Spinner,
-  Et as Table,
+  Ot as Spinner,
+  St as Table,
   me as Tabs,
   at as Textarea,
-  kt as ToastProvider,
-  jt as Tooltip,
-  Rt as cn,
-  Ot as colors,
+  xt as ToastProvider,
+  Lt as Tooltip,
+  At as cn,
+  It as colors,
   Pt as generateId,
-  St as spacing,
-  Dt as typography,
-  $t as useToast
+  Dt as spacing,
+  Rt as typography,
+  kt as useToast
 };