beth-clarity 1.1.10 → 1.1.12

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

@@ -1,387 +1,387 @@
-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 { jsx as s, jsxs as _, Fragment as Ze } from "react/jsx-runtime";
+import E, { useState as B, useRef as P, useEffect as S, forwardRef as Ke, isValidElement as Z, createContext as z, cloneElement as W, useContext as q, useMemo as Y, useCallback as le, useLayoutEffect as et } from "react";
 import tt from "react-dom";
 const wt = ({
   variant: e = "primary",
   product: t,
   tone: a,
-  size: l = "medium",
-  bgColor: n,
+  size: n = "medium",
+  bgColor: l,
   textColor: r,
   children: o,
-  className: u = "",
+  className: f = "",
   rounded: i = !1,
   outlined: c = !1,
-  ...m
+  ...d
 }) => {
-  const v = "clarity-badge", p = !!n, f = t && a && !p;
-  let d = "";
-  p ? d = `${v}--custom-bg` : f ? d = `${v}--custom` : d = `${v}--${e}`;
-  const h = [
+  const v = "clarity-badge", m = !!l, p = t && a && !m;
+  let h = "";
+  m ? h = `${v}--custom-bg` : p ? h = `${v}--custom` : h = `${v}--${e}`;
+  const u = [
     v,
-    d,
-    `${v}--${l}`,
+    h,
+    `${v}--${n}`,
     i ? `${v}--rounded` : "",
     c ? `${v}--outlined` : "",
-    u
+    f
   ].filter(Boolean).join(" "), y = {};
-  p && (y.backgroundColor = n, r && (y.color = r));
-  const N = f && t && a ? {
+  m && (y.backgroundColor = l, r && (y.color = r));
+  const b = p && 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: h,
+      className: u,
       style: {
         ...y,
-        ...N
+        ...b
       },
-      ...m,
+      ...d,
       children: o
     }
   );
-}, $t = ({
+}, gt = ({
   variant: e = "primary",
   product: t,
   tone: a,
-  hoverTone: l,
-  size: n = "medium",
+  hoverTone: n,
+  size: l = "medium",
   disabled: r = !1,
   loading: o = !1,
-  children: u,
+  children: f,
   onClick: i,
   type: c = "button",
-  className: m = "",
+  className: d = "",
   title: v,
-  ...p
+  customColor: m,
+  customColorHover: p,
+  ...h
 }) => {
-  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 $ = 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__ */ w(
+  const u = "clarity-button", y = t && a && !m, b = [
+    u,
+    !y && !m && `${u}--${e}`,
+    y && `${u}--custom`,
+    `${u}--${l}`,
+    o && `${u}--loading`,
+    r && `${u}--disabled`,
+    d
+  ].filter(Boolean).join(" "), w = (T) => {
+    const C = parseInt(T);
+    return C >= 800 ? "900" : C >= 700 ? "800" : C >= 600 ? "700" : C >= 500 ? "600" : C >= 400 ? "500" : C >= 300 ? "400" : C >= 200 ? "300" : "200";
+  }, $ = {};
+  return m ? ($["--button-bg"] = m, $["--button-hover-bg"] = p || `${m}E6`, $["--button-border"] = m, $["--button-hover-border"] = p || `${m}E6`, $["--button-fg"] = "#fff") : y && ($["--custom-bg-color"] = `var(--clarity-${t}-${a})`, $["--custom-hover-color"] = `var(--clarity-${t}-${n || w(a)})`), /* @__PURE__ */ _(
     "button",
     {
-      className: y,
-      style: b,
+      className: b,
+      style: $,
       disabled: r || o,
       onClick: i,
       type: c,
       title: v,
-      ...p,
+      ...h,
       children: [
-        o && /* @__PURE__ */ s("div", { className: `${f}__spinner` }),
-        u
+        o && /* @__PURE__ */ s("div", { className: `${u}__spinner` }),
+        f
       ]
     }
   );
-}, gt = ({
+}, $t = ({
   variant: e = "primary",
   size: t = "medium",
   filled: a = !0,
-  items: l,
-  value: n,
+  items: n,
+  value: l,
   multiple: r = !1,
   disabled: o = !1,
-  onChange: u,
+  onChange: f,
   className: i = "",
   ...c
 }) => {
-  const m = "clarity-button-group", v = `${m}--${e}`, p = [
-    m,
+  const d = "clarity-button-group", v = `${d}--${e}`, m = [
+    d,
     v,
-    `${m}--${t}`,
-    !a && `${m}--outline`,
-    o && `${m}--disabled`,
+    `${d}--${t}`,
+    !a && `${d}--outline`,
+    o && `${d}--disabled`,
     i
-  ].filter(Boolean).join(" "), f = (h) => {
-    if (o || !u) return;
-    const y = l.find((N) => N.id === h);
+  ].filter(Boolean).join(" "), p = (u) => {
+    if (o || !f) return;
+    const y = n.find((b) => b.id === u);
     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);
+        const b = Array.isArray(l) ? l : [], w = b.includes(u) ? b.filter(($) => $ !== u) : [...b, u];
+        f(w);
       } else
-        u(h);
-  }, d = (h) => r ? Array.isArray(n) && n.includes(h) : n === h;
+        f(u);
+  }, h = (u) => r ? Array.isArray(l) && l.includes(u) : l === u;
   return /* @__PURE__ */ s(
     "div",
     {
-      className: p,
+      className: m,
       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`
+      children: n.map((u, y) => {
+        const b = h(u.id), w = [
+          `${d}__item`,
+          b && `${d}__item--selected`,
+          u.disabled && `${d}__item--disabled`,
+          y === 0 && `${d}__item--first`,
+          y === n.length - 1 && `${d}__item--last`
         ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ w(
+        return /* @__PURE__ */ _(
           "button",
           {
-            className: b,
-            onClick: () => f(h.id),
-            disabled: o || h.disabled,
+            className: w,
+            onClick: () => p(u.id),
+            disabled: o || u.disabled,
             type: "button",
-            "aria-pressed": N,
+            "aria-pressed": b,
             children: [
-              h.icon && /* @__PURE__ */ s("span", { className: `${m}__item-icon`, children: h.icon }),
-              /* @__PURE__ */ s("span", { className: `${m}__item-label`, children: h.label })
+              u.icon && /* @__PURE__ */ s("span", { className: `${d}__item-icon`, children: u.icon }),
+              /* @__PURE__ */ s("span", { className: `${d}__item-label`, children: u.label })
             ]
           },
-          h.id
+          u.id
         );
       })
     }
   );
-}, st = L.forwardRef(({
+}, st = E.forwardRef(({
   variant: e,
   size: t = "medium",
   label: a,
-  helperText: l,
-  error: n = !1,
+  helperText: n,
+  error: l = !1,
   errorMessage: r,
   startIcon: o,
-  endIcon: u,
+  endIcon: f,
   className: i = "",
   disabled: c = !1,
-  value: m,
+  value: d,
   defaultValue: v,
-  onFocus: p,
-  onBlur: f,
-  ...d
-}, 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);
-  }, [m, v]);
-  const _ = (x) => {
-    N(!0), p == null || p(x);
+  onFocus: m,
+  onBlur: p,
+  ...h
+}, u) => {
+  const [y, b] = B(!1), [w, $] = B(!1), T = P(null);
+  E.useImperativeHandle(u, () => T.current), S(() => {
+    const x = T.current;
+    x && $(x.value.length > 0);
+  }, [d, v]);
+  const C = (x) => {
+    b(!0), m == null || m(x);
   }, k = (x) => {
-    N(!1), B(x.target.value.length > 0), f == null || f(x);
-  }, E = [
+    b(!1), $(x.target.value.length > 0), p == null || p(x);
+  }, L = [
     "clarity-input",
     "clarity-input--outlined",
     `clarity-input--${t}`,
     e && `clarity-input--${e}`,
-    n && "clarity-input--error",
+    l && "clarity-input--error",
     c && "clarity-input--disabled",
     y && "clarity-input--focused",
-    b && "clarity-input--has-value",
+    w && "clarity-input--has-value",
     o && "clarity-input--with-start-icon",
-    u && "clarity-input--with-end-icon",
+    f && "clarity-input--with-end-icon",
     i
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: "clarity-input-wrapper", children: [
-    /* @__PURE__ */ w("div", { className: E, children: [
+  return /* @__PURE__ */ _("div", { className: "clarity-input-wrapper", children: [
+    /* @__PURE__ */ _("div", { className: L, children: [
       o && /* @__PURE__ */ s("div", { className: "clarity-input__start-icon", children: o }),
-      /* @__PURE__ */ w("div", { className: "clarity-input__field", children: [
+      /* @__PURE__ */ _("div", { className: "clarity-input__field", children: [
         /* @__PURE__ */ s(
           "input",
           {
-            ref: $,
+            ref: T,
             className: "clarity-input__element",
             disabled: c,
-            value: m,
+            value: d,
             defaultValue: v,
-            onFocus: _,
+            onFocus: C,
             onBlur: k,
-            ...d
+            ...h
           }
         ),
         a && /* @__PURE__ */ s("label", { className: "clarity-input__label", children: a })
       ] }),
-      u && /* @__PURE__ */ s("div", { className: "clarity-input__end-icon", children: u })
+      f && /* @__PURE__ */ s("div", { className: "clarity-input__end-icon", children: f })
     ] }),
-    (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-input__helper-text", children: n && r ? r : l })
+    (n || l && r) && /* @__PURE__ */ s("div", { className: "clarity-input__helper-text", children: l && r ? r : n })
   ] });
 });
 st.displayName = "Input";
-const at = L.forwardRef(({
+const at = E.forwardRef(({
   variant: e,
   size: t = "medium",
   label: a,
-  helperText: l,
-  error: n = !1,
+  helperText: n,
+  error: l = !1,
   errorMessage: r,
   startIcon: o,
-  endIcon: u,
+  endIcon: f,
   className: i = "",
   disabled: c = !1,
-  value: m,
+  value: d,
   defaultValue: v,
-  onFocus: p,
-  onBlur: f,
-  rows: d = 3,
-  minHeight: h,
+  onFocus: m,
+  onBlur: p,
+  rows: h = 3,
+  minHeight: u,
   maxHeight: y,
-  resizable: N = !0,
-  ...b
-}, B) => {
-  const [$, _] = T(!1), [k, E] = T(!1), x = P(null);
-  L.useImperativeHandle(B, () => x.current), O(() => {
+  resizable: b = !0,
+  ...w
+}, $) => {
+  const [T, C] = B(!1), [k, L] = B(!1), x = P(null);
+  E.useImperativeHandle($, () => x.current), S(() => {
     const g = x.current;
-    g && E(g.value.length > 0);
-  }, [m, v]);
+    g && L(g.value.length > 0);
+  }, [d, v]);
   const j = (g) => {
-    _(!0), p == null || p(g);
+    C(!0), m == null || m(g);
   }, I = (g) => {
-    _(!1), E(g.target.value.length > 0), f == null || f(g);
+    C(!1), L(g.target.value.length > 0), p == null || p(g);
   }, A = [
     "clarity-textarea",
     "clarity-textarea--outlined",
     `clarity-textarea--${t}`,
     e && `clarity-textarea--${e}`,
-    n && "clarity-textarea--error",
+    l && "clarity-textarea--error",
     c && "clarity-textarea--disabled",
-    $ && "clarity-textarea--focused",
+    T && "clarity-textarea--focused",
     k && "clarity-textarea--has-value",
     o && "clarity-textarea--with-start-icon",
-    u && "clarity-textarea--with-end-icon",
+    f && "clarity-textarea--with-end-icon",
     i
-  ].filter(Boolean).join(" "), S = {
-    resize: N ? "vertical" : "none",
-    minHeight: h ? `${h}px` : void 0,
+  ].filter(Boolean).join(" "), O = {
+    resize: b ? "vertical" : "none",
+    minHeight: u ? `${u}px` : void 0,
     maxHeight: y ? `${y}px` : void 0
   };
-  return /* @__PURE__ */ w("div", { className: "clarity-textarea-wrapper", children: [
-    /* @__PURE__ */ w("div", { className: A, children: [
+  return /* @__PURE__ */ _("div", { className: "clarity-textarea-wrapper", children: [
+    /* @__PURE__ */ _("div", { className: A, children: [
       o && /* @__PURE__ */ s("div", { className: "clarity-textarea__start-icon", children: o }),
-      /* @__PURE__ */ w("div", { className: "clarity-textarea__field", children: [
+      /* @__PURE__ */ _("div", { className: "clarity-textarea__field", children: [
         /* @__PURE__ */ s(
           "textarea",
           {
             ref: x,
             className: "clarity-textarea__element",
             disabled: c,
-            value: m,
+            value: d,
             defaultValue: v,
             onFocus: j,
             onBlur: I,
-            rows: d,
-            style: S,
-            ...b
+            rows: h,
+            style: O,
+            ...w
           }
         ),
         a && /* @__PURE__ */ s("label", { className: "clarity-textarea__label", children: a })
       ] }),
-      u && /* @__PURE__ */ s("div", { className: "clarity-textarea__end-icon", children: u })
+      f && /* @__PURE__ */ s("div", { className: "clarity-textarea__end-icon", children: f })
     ] }),
-    (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-textarea__helper-text", children: n && r ? r : l })
+    (n || l && r) && /* @__PURE__ */ s("div", { className: "clarity-textarea__helper-text", children: l && r ? r : n })
   ] });
 });
 at.displayName = "Textarea";
-const lt = L.forwardRef(({
+const nt = E.forwardRef(({
   variant: e,
   size: t = "medium",
   label: a,
-  helperText: l,
-  error: n = !1,
+  helperText: n,
+  error: l = !1,
   errorMessage: r,
   startIcon: o,
-  endIcon: u,
+  endIcon: f,
   className: i = "",
   disabled: c = !1,
-  value: m,
+  value: d,
   defaultValue: v,
-  onFocus: p,
-  onBlur: f,
-  onChange: d,
-  options: h,
+  onFocus: m,
+  onBlur: p,
+  onChange: h,
+  options: u,
   placeholder: y = "Selecione uma opção",
-  isClearable: N = !1,
-  isSearchable: b = !1,
-  ...B
-}, $) => {
-  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());
+  isClearable: b = !1,
+  isSearchable: w = !1,
+  ...$
+}, T) => {
+  const [C, k] = B(!1), [L, x] = B(!1), [j, I] = B(d || v || ""), [A, O] = B(""), g = P(null), H = P(null);
+  E.useImperativeHandle(T, () => g.current), S(() => {
+    d !== void 0 && I(d);
+  }, [d]), S(() => {
+    const N = (D) => {
+      g.current && !g.current.contains(D.target) && (k(!1), x(!1), p == null || p());
     };
-    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();
+    return document.addEventListener("mousedown", N), () => document.removeEventListener("mousedown", N);
+  }, [p]);
+  const V = w && A ? u.filter(
+    (N) => N.label.toLowerCase().includes(A.toLowerCase())
+  ) : u, F = () => {
+    c || (k(!C), x(!C), C ? (p == null || p(), w && O("")) : (m == null || m(), w && setTimeout(() => {
+      var N;
+      (N = H.current) == null || N.focus();
     }, 0)));
-  }, 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 = [
+  }, X = (N) => {
+    N.disabled || (I(N.value), k(!1), x(!1), O(""), h == null || h(N.value), p == null || p());
+  }, te = (N) => {
+    O(N.target.value);
+  }, G = (N) => {
+    N.key === "Escape" ? (k(!1), x(!1), O("")) : N.key === "Enter" && V.length > 0 && V[0] && X(V[0]);
+  }, M = u.find((N) => N.value === j), ne = j !== "" && j !== void 0, re = (N) => {
+    N.stopPropagation(), I(""), h == null || h("");
+  }, ie = ne || L || y || w && A, oe = [
     "clarity-select",
     "clarity-select--outlined",
     `clarity-select--${t}`,
     e && `clarity-select--${e}`,
-    n && "clarity-select--error",
+    l && "clarity-select--error",
     c && "clarity-select--disabled",
-    (E || _) && "clarity-select--focused",
+    (L || C) && "clarity-select--focused",
     ie && "clarity-select--label-up",
-    _ && "clarity-select--open",
-    b && "clarity-select--searchable",
+    C && "clarity-select--open",
+    w && "clarity-select--searchable",
     o && "clarity-select--with-start-icon",
-    (u || N) && "clarity-select--with-end-icon",
+    (f || b) && "clarity-select--with-end-icon",
     i
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: "clarity-select-wrapper", children: [
-    /* @__PURE__ */ w(
+  return /* @__PURE__ */ _("div", { className: "clarity-select-wrapper", children: [
+    /* @__PURE__ */ _(
       "div",
       {
         ref: g,
         className: oe,
-        onClick: b ? void 0 : F,
+        onClick: w ? void 0 : F,
         role: "combobox",
-        "aria-expanded": _,
+        "aria-expanded": C,
         "aria-haspopup": "listbox",
-        tabIndex: c || b ? -1 : 0,
-        ...B,
+        tabIndex: c || w ? -1 : 0,
+        ...$,
         children: [
           o && /* @__PURE__ */ s("div", { className: "clarity-select__start-icon", children: o }),
-          /* @__PURE__ */ w("div", { className: "clarity-select__field", children: [
-            b ? /* @__PURE__ */ s(
+          /* @__PURE__ */ _("div", { className: "clarity-select__field", children: [
+            w ? /* @__PURE__ */ s(
               "input",
               {
-                ref: M,
+                ref: H,
                 type: "text",
                 className: "clarity-select__search-input",
-                value: _ ? A : H ? H.label : "",
+                value: C ? A : M ? M.label : "",
                 onChange: te,
                 onKeyDown: G,
                 onFocus: () => {
-                  _ || (k(!0), x(!0), p == null || p());
+                  C || (k(!0), x(!0), m == null || m());
                 },
-                placeholder: H ? H.label : y,
+                placeholder: M ? M.label : y,
                 disabled: c,
-                readOnly: !_
+                readOnly: !C
               }
-            ) : /* @__PURE__ */ s("div", { className: "clarity-select__display", children: H ? H.label : y }),
+            ) : /* @__PURE__ */ s("div", { className: "clarity-select__display", children: M ? M.label : y }),
             a && /* @__PURE__ */ s("label", { className: "clarity-select__label", children: a })
           ] }),
-          N && le && /* @__PURE__ */ s(
+          b && ne && /* @__PURE__ */ s(
             "button",
             {
               type: "button",
@@ -413,8 +413,8 @@ const lt = L.forwardRef(({
             "div",
             {
               className: "clarity-select__end-icon",
-              onClick: b ? F : void 0,
-              children: u || /* @__PURE__ */ s(
+              onClick: w ? F : void 0,
+              children: f || /* @__PURE__ */ s(
                 "svg",
                 {
                   className: "clarity-select__arrow",
@@ -436,89 +436,89 @@ const lt = L.forwardRef(({
               )
             }
           ),
-          _ && /* @__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(
+          C && /* @__PURE__ */ s("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ s("ul", { className: "clarity-select__options", role: "listbox", children: V.length > 0 ? V.map((N) => /* @__PURE__ */ s(
             "li",
             {
               className: [
                 "clarity-select__option",
-                C.disabled && "clarity-select__option--disabled",
-                j === C.value && "clarity-select__option--selected"
+                N.disabled && "clarity-select__option--disabled",
+                j === N.value && "clarity-select__option--selected"
               ].filter(Boolean).join(" "),
-              onClick: () => X(C),
+              onClick: () => X(N),
               role: "option",
-              "aria-selected": j === C.value,
-              children: C.label
+              "aria-selected": j === N.value,
+              children: N.label
             },
-            C.value
+            N.value
           )) : /* @__PURE__ */ s("li", { className: "clarity-select__option clarity-select__option--no-results", children: "Nenhum resultado encontrado" }) }) })
         ]
       }
     ),
-    (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-select__helper-text", children: n && r ? r : l })
+    (n || l && r) && /* @__PURE__ */ s("div", { className: "clarity-select__helper-text", children: l && r ? r : n })
   ] });
 });
-lt.displayName = "Select";
-const nt = Ke(({
+nt.displayName = "Select";
+const lt = Ke(({
   options: e = [],
   value: t = [],
   onChange: a,
-  placeholder: l = "Selecione opções",
-  label: n,
+  placeholder: n = "Selecione opções",
+  label: l,
   helperText: r,
   error: o = !1,
-  errorMessage: u,
+  errorMessage: f,
   disabled: i = !1,
   variant: c = "primary",
-  size: m = "medium",
+  size: d = "medium",
   maxSelectedLabels: v = 3,
-  selectionLimit: p,
-  className: f = "",
-  id: d,
-  name: h,
+  selectionLimit: m,
+  className: p = "",
+  id: h,
+  name: u,
   required: y = !1,
-  "data-testid": N,
-  ...b
-}, B) => {
-  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);
+  "data-testid": b,
+  ...w
+}, $) => {
+  const [T, C] = B(!1), [k, L] = B(""), [x, j] = B(!1), I = P(null), A = P(null), O = P(null), g = (N) => {
+    I.current = N, $ && (typeof $ == "function" ? $(N) : $.current = N);
   };
-  O(() => {
-    const C = (D) => {
-      I.current && !I.current.contains(D.target) && (_(!1), j(!1), E(""));
+  S(() => {
+    const N = (D) => {
+      I.current && !I.current.contains(D.target) && (C(!1), j(!1), L(""));
     };
-    return document.addEventListener("click", C), () => document.removeEventListener("click", C);
+    return document.addEventListener("click", N), () => document.removeEventListener("click", N);
   }, []);
-  const M = e.filter(
-    (C) => C.label.toLowerCase().includes(k.toLowerCase())
+  const H = e.filter(
+    (N) => N.label.toLowerCase().includes(k.toLowerCase())
   ), V = () => {
-    i || (_(!$), j(!$), $ ? E("") : setTimeout(() => {
-      var C;
-      (C = A.current) == null || C.focus();
+    i || (C(!T), j(!T), T ? L("") : setTimeout(() => {
+      var N;
+      (N = A.current) == null || N.focus();
     }, 100));
-  }, F = (C, D) => {
+  }, F = (N, D) => {
     if (i)
       return;
     D && (D.stopPropagation(), D.preventDefault());
-    const U = t.includes(C);
+    const U = t.includes(N);
     let R;
-    U ? R = t.filter((se) => se !== C) : R = [...t, C], a && a(R);
-  }, X = (C, D) => {
+    U ? R = t.filter((se) => se !== N) : R = [...t, N], a && a(R);
+  }, X = (N, D) => {
     if (D.stopPropagation(), i) return;
-    const U = t.filter((R) => R !== C);
+    const U = t.filter((R) => R !== N);
     a == null || a(U);
-  }, 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 = () => {
+  }, te = (N) => {
+    N.stopPropagation(), !i && (a == null || a([]));
+  }, G = (N) => {
+    L(N.target.value);
+  }, M = (N) => {
+    N.key === "Escape" && (C(!1), j(!1), L(""));
+  }, ne = x || T || t.length > 0, re = () => {
     if (t.length === 0) return null;
-    const C = t.map(
+    const N = t.map(
       (R) => e.find((se) => se.value === R)
-    ).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: [
+    ).filter(Boolean), D = N.slice(0, v), U = N.length - v;
+    return /* @__PURE__ */ _("div", { className: "clarity-multiselect__chips", children: [
+      D.map((R) => /* @__PURE__ */ _("div", { className: "clarity-multiselect__chip", children: [
         /* @__PURE__ */ s("span", { className: "clarity-multiselect__chip-label", children: R.label }),
         !i && /* @__PURE__ */ s(
           "button",
@@ -531,7 +531,7 @@ const nt = Ke(({
           }
         )
       ] }, R.value)),
-      U > 0 && /* @__PURE__ */ w("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
+      U > 0 && /* @__PURE__ */ _("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
         "+",
         U,
         " mais"
@@ -539,39 +539,39 @@ const nt = Ke(({
     ] });
   }, ie = [
     "clarity-multiselect-wrapper",
-    f
+    p
   ].filter(Boolean).join(" "), oe = [
     "clarity-multiselect",
     `clarity-multiselect--${c}`,
-    `clarity-multiselect--${m}`,
-    $ && "clarity-multiselect--open",
+    `clarity-multiselect--${d}`,
+    T && "clarity-multiselect--open",
     x && "clarity-multiselect--focused",
-    le && "clarity-multiselect--label-up",
+    ne && "clarity-multiselect--label-up",
     o && "clarity-multiselect--error",
     i && "clarity-multiselect--disabled",
     t.length > 0 && "clarity-multiselect--has-value"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: ie, children: [
-    /* @__PURE__ */ w(
+  return /* @__PURE__ */ _("div", { className: ie, children: [
+    /* @__PURE__ */ _(
       "div",
       {
         ref: g,
         className: oe,
-        "data-testid": N,
-        ...b,
+        "data-testid": b,
+        ...w,
         children: [
-          /* @__PURE__ */ w(
+          /* @__PURE__ */ _(
             "div",
             {
               className: "clarity-multiselect__field",
               onClick: V,
               children: [
-                n && /* @__PURE__ */ w("label", { className: "clarity-multiselect__label", children: [
-                  n,
+                l && /* @__PURE__ */ _("label", { className: "clarity-multiselect__label", children: [
+                  l,
                   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__ */ w("div", { className: "clarity-multiselect__icons", children: [
+                /* @__PURE__ */ s("div", { className: "clarity-multiselect__content", children: t.length > 0 ? re() : /* @__PURE__ */ s("span", { className: "clarity-multiselect__placeholder", children: n }) }),
+                /* @__PURE__ */ _("div", { className: "clarity-multiselect__icons", children: [
                   t.length > 0 && !i && /* @__PURE__ */ s(
                     "button",
                     {
@@ -596,7 +596,7 @@ const nt = Ke(({
               ]
             }
           ),
-          $ && /* @__PURE__ */ w("div", { ref: S, className: "clarity-multiselect__dropdown", children: [
+          T && /* @__PURE__ */ _("div", { ref: O, className: "clarity-multiselect__dropdown", children: [
             /* @__PURE__ */ s("div", { className: "clarity-multiselect__search", children: /* @__PURE__ */ s(
               "input",
               {
@@ -606,12 +606,12 @@ const nt = Ke(({
                 placeholder: "Buscar opções...",
                 value: k,
                 onChange: G,
-                onKeyDown: H
+                onKeyDown: M
               }
             ) }),
-            /* @__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(
+            /* @__PURE__ */ s("ul", { className: "clarity-multiselect__options", children: H.length > 0 ? H.map((N) => {
+              const D = t.includes(N.value), U = N.disabled || i;
+              return /* @__PURE__ */ _(
                 "li",
                 {
                   className: [
@@ -619,7 +619,7 @@ const nt = Ke(({
                     D && "clarity-multiselect__option--selected",
                     U && "clarity-multiselect__option--disabled"
                   ].filter(Boolean).join(" "),
-                  onClick: (R) => !U && F(C.value, R),
+                  onClick: (R) => !U && F(N.value, R),
                   children: [
                     /* @__PURE__ */ s("div", { className: "clarity-multiselect__option-checkbox", children: /* @__PURE__ */ s("div", { className: [
                       "clarity-multiselect__checkbox",
@@ -634,20 +634,20 @@ const nt = Ke(({
                         strokeLinejoin: "round"
                       }
                     ) }) }) }),
-                    /* @__PURE__ */ s("span", { className: "clarity-multiselect__option-label", children: C.label })
+                    /* @__PURE__ */ s("span", { className: "clarity-multiselect__option-label", children: N.label })
                   ]
                 },
-                C.value
+                N.value
               );
             }) : /* @__PURE__ */ s("li", { className: "clarity-multiselect__option clarity-multiselect__option--no-results", children: "Nenhum resultado encontrado" }) })
           ] })
         ]
       }
     ),
-    (r || o && u) && /* @__PURE__ */ s("div", { className: "clarity-multiselect__helper", children: o && u ? /* @__PURE__ */ s("span", { className: "clarity-multiselect__error-message", children: u }) : r && /* @__PURE__ */ s("span", { className: "clarity-multiselect__helper-text", children: r }) })
+    (r || o && f) && /* @__PURE__ */ s("div", { className: "clarity-multiselect__helper", children: o && f ? /* @__PURE__ */ s("span", { className: "clarity-multiselect__error-message", children: f }) : r && /* @__PURE__ */ s("span", { className: "clarity-multiselect__helper-text", children: r }) })
   ] });
 });
-nt.displayName = "MultiSelect";
+lt.displayName = "MultiSelect";
 const fe = z(null), pe = () => {
   const e = q(fe);
   if (!e)
@@ -658,159 +658,159 @@ const fe = z(null), pe = () => {
   className: t = "",
   title: a
 }) => {
-  const { onClose: l, variant: n, showCloseButton: r } = pe(), o = [
+  const { onClose: n, variant: l, showCloseButton: r } = pe(), o = [
     "clarity-modal-header",
     t,
-    n && `clarity-modal-header--${n}`
-  ].filter(Boolean).join(" "), u = [
+    l && `clarity-modal-header--${l}`
+  ].filter(Boolean).join(" "), f = [
     "clarity-modal-close",
-    n && `clarity-modal-close--${n}`
+    l && `clarity-modal-close--${l}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: o, children: [
+  return /* @__PURE__ */ _("div", { className: o, children: [
     a && /* @__PURE__ */ s("h2", { className: "clarity-modal-title", children: a }),
     e,
-    r && /* @__PURE__ */ s("button", { className: u, onClick: (i) => {
-      i.stopPropagation(), l();
+    r && /* @__PURE__ */ s("button", { className: f, onClick: (i) => {
+      i.stopPropagation(), n();
     }, children: "×" })
   ] });
 };
 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__ */ w("div", { className: `clarity-modal-footer ${t}`, children: [
+const ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ _("div", { className: `clarity-modal-footer ${t}`, children: [
   /* @__PURE__ */ s("div", { className: "clarity-modal-scroll-indicator" }),
   e
 ] });
 ve.displayName = "Modal.Footer";
-const Ce = ({ children: e, onClick: t, variant: a }) => W(e, {
-  onClick: (l) => {
-    var n, r;
-    t == null || t(), (r = (n = e.props).onClick) == null || r.call(n, l);
+const Ne = ({ children: e, onClick: t, variant: a }) => W(e, {
+  onClick: (n) => {
+    var l, r;
+    t == null || t(), (r = (l = e.props).onClick) == null || r.call(l, n);
   },
   variant: a
 });
-Ce.displayName = "Modal.Trigger";
-const Ne = ({ children: e }) => {
+Ne.displayName = "Modal.Trigger";
+const be = ({ children: e }) => {
   const { onClose: t } = pe();
   return W(e, {
     onClick: (a) => {
-      var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, a);
+      var n, l;
+      t(), (l = (n = e.props).onClick) == null || l.call(n, a);
     }
   });
 };
-Ne.displayName = "Modal.Close";
+be.displayName = "Modal.Close";
 const J = ({
   isOpen: e,
   onClose: t,
   onOpen: a,
-  children: l,
-  className: n = "",
+  children: n,
+  className: l = "",
   variant: r,
   size: o = "medium",
-  showCloseButton: u = !0,
+  showCloseButton: f = !0,
   closeOnOverlayClick: i = !0
 }) => {
-  const [c, m] = T(!1), p = e !== void 0 ? e : c, f = t || (() => {
-    m(!1);
+  const [c, d] = B(!1), m = e !== void 0 ? e : c, p = t || (() => {
+    d(!1);
   });
-  O(() => {
-    p && (a == null || a());
-  }, [p, a]), O(() => {
-    const b = (B) => {
-      B.key === "Escape" && f();
+  S(() => {
+    m && (a == null || a());
+  }, [m, a]), S(() => {
+    const w = ($) => {
+      $.key === "Escape" && p();
     };
-    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";
+    return m ? (document.addEventListener("keydown", w), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+      document.removeEventListener("keydown", w), document.body.style.overflow = "unset";
     };
-  }, [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__ */ 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 }) })
+  }, [m, p]);
+  const h = (w) => {
+    i && w.target === w.currentTarget && p();
+  }, u = E.Children.toArray(n).find(
+    (w) => Z(w) && w.type.displayName === "Modal.Trigger"
+  ), y = E.Children.toArray(n).filter(
+    (w) => Z(w) && w.type.displayName !== "Modal.Trigger"
+  ), b = ["clarity-modal", l, `clarity-modal--${o}`].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _(fe.Provider, { value: { onClose: p, variant: r, showCloseButton: f }, children: [
+    u && W(u, { onClick: () => d(!0), variant: r }),
+    m && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", onClick: h, children: /* @__PURE__ */ s("div", { className: b, children: y }) })
   ] });
 };
 J.Header = he;
 J.Content = ye;
 J.Footer = ve;
-J.Trigger = Ce;
-J.Close = Ne;
+J.Trigger = Ne;
+J.Close = be;
 J.displayName = "Modal";
-const be = z(void 0), kt = () => {
-  const e = q(be);
+const Ce = z(void 0), kt = () => {
+  const e = q(Ce);
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
   return e;
-}, rt = ({ id: e, message: t, variant: a, duration: l, onClose: n, invertColors: r }) => {
-  const [o, u] = T("entering");
-  O(() => {
+}, rt = ({ id: e, message: t, variant: a, duration: n, onClose: l, invertColors: r }) => {
+  const [o, f] = B("entering");
+  S(() => {
     const c = setTimeout(() => {
-      u("visible");
-    }, 10), m = setTimeout(() => {
-      u("exiting");
-    }, l * 1e3 - 300), v = setTimeout(() => {
-      n(e);
-    }, l * 1e3);
+      f("visible");
+    }, 10), d = setTimeout(() => {
+      f("exiting");
+    }, n * 1e3 - 300), v = setTimeout(() => {
+      l(e);
+    }, n * 1e3);
     return () => {
-      clearTimeout(c), clearTimeout(m), clearTimeout(v);
+      clearTimeout(c), clearTimeout(d), clearTimeout(v);
     };
-  }, [e, l, n]);
+  }, [e, n, l]);
   const i = [
     "cl-toast",
     a,
     r ? "colored-background" : "",
     `cl-toast-${o}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: i, children: [
+  return /* @__PURE__ */ _("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("button", { onClick: () => f("exiting"), className: "cl-toast-close-button", children: "×" }),
     /* @__PURE__ */ s(
       "div",
       {
         className: "cl-toast-progress-bar",
-        style: { animationDuration: `${l}s` }
+        style: { animationDuration: `${n}s` }
       }
     )
   ] });
 }, xt = ({ children: e }) => {
-  const [t, a] = T([]), l = Y(() => {
+  const [t, a] = B([]), n = Y(() => {
     if (typeof document < "u") {
       const i = document.createElement("div");
       return i.id = "toast-portal-root", i;
     }
     return null;
   }, []);
-  O(() => {
-    if (l)
-      return document.body.appendChild(l), () => {
-        document.body.removeChild(l);
+  S(() => {
+    if (n)
+      return document.body.appendChild(n), () => {
+        document.body.removeChild(n);
       };
-  }, [l]);
-  const n = ne((i) => {
-    const m = {
+  }, [n]);
+  const l = le((i) => {
+    const d = {
       id: (/* @__PURE__ */ new Date()).toISOString() + Math.random(),
       // duration: 5,
       // position: 'right-top',
       ...i
     };
     a((v) => {
-      const p = [m, ...v];
-      return p.length > 4 ? p.slice(0, 4) : p;
+      const m = [d, ...v];
+      return m.length > 4 ? m.slice(0, 4) : m;
     });
-  }, []), r = ne((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__ */ w(be.Provider, { value: u, children: [
+  }, []), r = le((i) => {
+    a((c) => c.filter((d) => d.id !== i));
+  }, []), o = Y(() => t.reduce((i, c) => (i[c.position] || (i[c.position] = []), i[c.position].push(c), i), {}), [t]), f = Y(() => ({ show: l }), [l]);
+  return /* @__PURE__ */ _(Ce.Provider, { value: f, children: [
     e,
-    l && tt.createPortal(
-      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
+    n && tt.createPortal(
+      Object.entries(o).map(([i, c]) => /* @__PURE__ */ s("div", { className: `cl-toast-container ${i}`, children: c.map((d) => /* @__PURE__ */ s(rt, { ...d, onClose: r }, d.id)) }, i)),
+      n
     )
   ] });
 }, _e = z(null), we = () => {
@@ -818,35 +818,35 @@ const be = z(void 0), kt = () => {
   if (!e)
     throw new Error("useOffcanvas must be used within an Offcanvas provider");
   return e;
-}, $e = ({
+}, ge = ({
   children: e,
   className: t = ""
 }) => {
-  const { onClose: a, variant: l, showCloseButton: n, title: r } = we(), o = [
+  const { onClose: a, variant: n, showCloseButton: l, title: r } = we(), o = [
     "clarity-offcanvas-header",
     t
-  ].filter(Boolean).join(" "), u = [
+  ].filter(Boolean).join(" "), f = [
     "clarity-offcanvas-close",
-    l && `clarity-offcanvas-close--${l}`
+    n && `clarity-offcanvas-close--${n}`
   ].filter(Boolean).join(" "), i = [
     "clarity-offcanvas-title",
-    l && `clarity-offcanvas-title--${l}`
+    n && `clarity-offcanvas-title--${n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: o, children: [
+  return /* @__PURE__ */ _("div", { className: o, children: [
     r && /* @__PURE__ */ s("h2", { className: i, children: r }),
     e,
-    n && /* @__PURE__ */ s("button", { className: u, onClick: (c) => {
+    l && /* @__PURE__ */ s("button", { className: f, onClick: (c) => {
       c.stopPropagation(), a();
     }, children: "×" })
   ] });
 };
-$e.displayName = "Offcanvas.Header";
-const ge = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-offcanvas-content ${t}`, children: e });
-ge.displayName = "Offcanvas.Content";
+ge.displayName = "Offcanvas.Header";
+const $e = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-offcanvas-content ${t}`, children: e });
+$e.displayName = "Offcanvas.Content";
 const ke = ({ children: e, onClick: t, variant: a }) => W(e, {
-  onClick: (l) => {
-    var n, r;
-    t == null || t(), (r = (n = e.props).onClick) == null || r.call(n, l);
+  onClick: (n) => {
+    var l, r;
+    t == null || t(), (r = (l = e.props).onClick) == null || r.call(l, n);
   },
   variant: a
 });
@@ -857,8 +857,8 @@ const xe = ({ children: e }) => {
   const { onClose: t } = we();
   return W(e, {
     onClick: (a) => {
-      var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, a);
+      var n, l;
+      t(), (l = (n = e.props).onClick) == null || l.call(n, a);
     }
   });
 };
@@ -867,77 +867,77 @@ const K = ({
   isOpen: e,
   onClose: t,
   onOpen: a,
-  children: l,
-  className: n = "",
+  children: n,
+  className: l = "",
   variant: r,
   placement: o = "right",
-  closeOnOverlayClick: u = !0,
+  closeOnOverlayClick: f = !0,
   showCloseButton: i = !0,
   title: c
 }) => {
-  const [m, v] = T(!1), [p, f] = T(!1), [d, h] = T(!1), y = e !== void 0, N = y ? e : m, b = ne(() => {
+  const [d, v] = B(!1), [m, p] = B(!1), [h, u] = B(!1), y = e !== void 0, b = y ? e : d, w = le(() => {
     t ? t() : v(!1);
-  }, [t]), B = ne(() => {
+  }, [t]), $ = le(() => {
     y || v(!0), a == null || a();
   }, [y, a]);
-  O(() => {
-    if (N) {
-      h(!0);
+  S(() => {
+    if (b) {
+      u(!0);
       const g = setTimeout(() => {
-        f(!0);
+        p(!0);
       }, 50);
       return () => clearTimeout(g);
     } else {
-      f(!1);
+      p(!1);
       const g = setTimeout(() => {
-        h(!1);
+        u(!1);
       }, 300);
       return () => clearTimeout(g);
     }
-  }, [N]), O(() => {
-    const g = (M) => {
-      M.key === "Escape" && b();
+  }, [b]), S(() => {
+    const g = (H) => {
+      H.key === "Escape" && w();
     };
-    return N ? (document.addEventListener("keydown", g), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", g), document.body.style.overflow = "unset"), () => {
+    return b ? (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, b]);
-  const $ = (g) => {
-    u && g.target === g.currentTarget && b();
-  }, _ = L.Children.toArray(l);
-  let k, E, x, j, I;
-  _.forEach((g) => {
+  }, [b, w]);
+  const T = (g) => {
+    f && g.target === g.currentTarget && w();
+  }, C = E.Children.toArray(n);
+  let k, L, x, j, I;
+  C.forEach((g) => {
     if (Z(g))
       if (g.type.displayName === "Offcanvas.Trigger")
         k = g;
       else if (g.type.displayName === "Offcanvas.Header")
-        E = g;
+        L = 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);
+        const V = E.Children.toArray(x.props.children).filter((F) => Z(F) && F.type.displayName === "Offcanvas.Close" ? (I = F, !1) : !0);
         x = W(x, { children: V });
       } else g.type.displayName === "Offcanvas.Footer" && (j = g);
   }), I && (j ? j = W(j, {
-    children: /* @__PURE__ */ w(Ze, { children: [
+    children: /* @__PURE__ */ _(Ze, { children: [
       j.props.children,
       I
     ] })
   }) : j = /* @__PURE__ */ s(ce, { children: I }));
   const A = [
     "clarity-offcanvas",
-    n,
+    l,
     `clarity-offcanvas--${o}`,
     r && `clarity-offcanvas--${r}`,
-    p ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
-  ].filter(Boolean).join(" "), S = [
+    m ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
+  ].filter(Boolean).join(" "), O = [
     "clarity-offcanvas-overlay",
-    p ? "clarity-offcanvas-overlay--visible" : ""
+    m ? "clarity-offcanvas-overlay--visible" : ""
   ].filter(Boolean).join(" ");
-  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: S, onClick: $, children: /* @__PURE__ */ w("div", { className: A, children: [
-      E,
+  return /* @__PURE__ */ _(_e.Provider, { value: { onClose: w, variant: r, showCloseButton: i, placement: o, title: c }, children: [
+    k && W(k, { onClick: $, variant: r }),
+    h && // Only render if shouldRender is true
+    /* @__PURE__ */ s("div", { className: O, onClick: T, children: /* @__PURE__ */ _("div", { className: A, children: [
+      L,
       x,
       j && /* @__PURE__ */ s("div", { className: "clarity-offcanvas-scroll-indicator" }),
       " ",
@@ -945,30 +945,30 @@ const K = ({
     ] }) })
   ] });
 };
-K.Header = $e;
-K.Content = ge;
+K.Header = ge;
+K.Content = $e;
 K.Footer = ce;
 K.Trigger = ke;
 K.Close = xe;
 K.displayName = "Offcanvas";
-const it = L.forwardRef(({
+const it = E.forwardRef(({
   type: e,
   variant: t = "primary",
   size: a = "medium",
-  label: l,
-  helperText: n,
+  label: n,
+  helperText: l,
   error: r = !1,
   errorMessage: o,
-  labelPosition: u = "right",
+  labelPosition: f = "right",
   className: i = "",
   disabled: c = !1,
-  checked: m,
+  checked: d,
   id: v,
-  ...p
-}, f) => {
-  const d = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, h = [
+  ...m
+}, p) => {
+  const h = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, u = [
     "clarity-check-input-wrapper",
-    `clarity-check-input-wrapper--${u}`,
+    `clarity-check-input-wrapper--${f}`,
     c && "clarity-check-input-wrapper--disabled",
     r && "clarity-check-input-wrapper--error"
   ].filter(Boolean).join(" "), y = [
@@ -979,26 +979,26 @@ const it = L.forwardRef(({
     r && "clarity-check-input--error",
     c && "clarity-check-input--disabled",
     i
-  ].filter(Boolean).join(" "), N = [
+  ].filter(Boolean).join(" "), b = [
     "clarity-check-input__label",
     `clarity-check-input__label--${a}`,
     c && "clarity-check-input__label--disabled"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: "clarity-check-input-container", children: [
-    /* @__PURE__ */ w("label", { className: h, htmlFor: d, children: [
+  return /* @__PURE__ */ _("div", { className: "clarity-check-input-container", children: [
+    /* @__PURE__ */ _("label", { className: u, htmlFor: h, children: [
       /* @__PURE__ */ s(
         "input",
         {
-          ref: f,
-          id: d,
+          ref: p,
+          id: h,
           type: e,
           className: y,
           disabled: c,
-          checked: m,
-          ...p
+          checked: d,
+          ...m
         }
       ),
-      /* @__PURE__ */ w("div", { className: "clarity-check-input__custom", children: [
+      /* @__PURE__ */ _("div", { className: "clarity-check-input__custom", children: [
         e === "checkbox" && /* @__PURE__ */ s(
           "svg",
           {
@@ -1020,52 +1020,52 @@ const it = L.forwardRef(({
         ),
         e === "radio" && /* @__PURE__ */ s("div", { className: "clarity-check-input__radio-dot" })
       ] }),
-      l && /* @__PURE__ */ s("span", { className: N, children: l })
+      n && /* @__PURE__ */ s("span", { className: b, children: n })
     ] }),
-    (n || r && o) && /* @__PURE__ */ s("div", { className: "clarity-check-input__helper-text", children: r && o ? o : n })
+    (l || r && o) && /* @__PURE__ */ s("div", { className: "clarity-check-input__helper-text", children: r && o ? o : l })
   ] });
 });
 it.displayName = "CheckInput";
-const ot = L.forwardRef(({
+const ot = E.forwardRef(({
   variant: e = "primary",
   size: t = "medium",
   label: a,
-  helperText: l,
-  error: n = !1,
+  helperText: n,
+  error: l = !1,
   errorMessage: r,
   labelPosition: o = "right",
-  className: u = "",
+  className: f = "",
   disabled: i = !1,
   checked: c,
-  id: m,
+  id: d,
   ...v
-}, p) => {
-  const f = m || `input-switch-${Math.random().toString(36).substr(2, 9)}`, d = [
+}, m) => {
+  const p = d || `input-switch-${Math.random().toString(36).substr(2, 9)}`, h = [
     "clarity-input-switch-wrapper",
     `clarity-input-switch-wrapper--${o}`,
     i && "clarity-input-switch-wrapper--disabled",
-    n && "clarity-input-switch-wrapper--error"
-  ].filter(Boolean).join(" "), h = [
+    l && "clarity-input-switch-wrapper--error"
+  ].filter(Boolean).join(" "), u = [
     "clarity-input-switch",
     `clarity-input-switch--${t}`,
     e && `clarity-input-switch--${e}`,
-    n && "clarity-input-switch--error",
+    l && "clarity-input-switch--error",
     i && "clarity-input-switch--disabled",
-    u
+    f
   ].filter(Boolean).join(" "), y = [
     "clarity-input-switch__label",
     `clarity-input-switch__label--${t}`,
     i && "clarity-input-switch__label--disabled"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: "clarity-input-switch-container", children: [
-    /* @__PURE__ */ w("label", { className: d, htmlFor: f, children: [
+  return /* @__PURE__ */ _("div", { className: "clarity-input-switch-container", children: [
+    /* @__PURE__ */ _("label", { className: h, htmlFor: p, children: [
       /* @__PURE__ */ s(
         "input",
         {
-          ref: p,
-          id: f,
+          ref: m,
+          id: p,
           type: "checkbox",
-          className: h,
+          className: u,
           disabled: i,
           checked: c,
           ...v
@@ -1074,7 +1074,7 @@ const ot = L.forwardRef(({
       /* @__PURE__ */ s("div", { className: "clarity-input-switch__track", children: /* @__PURE__ */ s("div", { className: "clarity-input-switch__thumb" }) }),
       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 })
+    (n || l && r) && /* @__PURE__ */ s("div", { className: "clarity-input-switch__helper-text", children: l && r ? r : n })
   ] });
 });
 ot.displayName = "InputSwitch";
@@ -1084,124 +1084,117 @@ const Te = z(null), de = () => {
     throw new Error("useConfirmationDialog must be used within a ConfirmationDialog provider");
   return e;
 }, Be = ({ children: e, className: t = "" }) => {
-  const { variant: a } = de(), l = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${a}`;
-  return /* @__PURE__ */ s("div", { className: l, children: e });
+  const { variant: a } = de(), n = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${a}`;
+  return /* @__PURE__ */ s("div", { className: n, children: e });
 };
 Be.displayName = "ConfirmationDialog.Header";
 const je = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-confirmation-dialog-content ${t}`, children: e });
 je.displayName = "ConfirmationDialog.Content";
-const Le = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-confirmation-dialog-footer ${t}`, children: e });
-Le.displayName = "ConfirmationDialog.Footer";
-const Ee = ({ children: e }) => W(e, {
+const Ee = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-confirmation-dialog-footer ${t}`, children: e });
+Ee.displayName = "ConfirmationDialog.Footer";
+const Le = ({ children: e }) => W(e, {
   onClick: (t) => {
-    var a, l;
-    (l = (a = e.props).onClick) == null || l.call(a, t);
+    var a, n;
+    (n = (a = e.props).onClick) == null || n.call(a, t);
   }
 });
-Ee.displayName = "ConfirmationDialog.Trigger";
-const Se = ({ children: e }) => {
+Le.displayName = "ConfirmationDialog.Trigger";
+const Oe = ({ children: e }) => {
   const { onClose: t } = de();
   return W(e, {
     onClick: (a) => {
-      var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, a);
+      var n, l;
+      t(), (l = (n = e.props).onClick) == null || l.call(n, a);
     }
   });
 };
-Se.displayName = "ConfirmationDialog.Close";
-const Oe = ({ children: e }) => {
+Oe.displayName = "ConfirmationDialog.Close";
+const Se = ({ children: e }) => {
   const { onConfirm: t } = de();
   return W(e, {
     onClick: (a) => {
-      var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, a);
+      var n, l;
+      t(), (l = (n = e.props).onClick) == null || l.call(n, a);
     }
   });
 };
-Oe.displayName = "ConfirmationDialog.Confirm";
+Se.displayName = "ConfirmationDialog.Confirm";
 const Q = ({
   isOpen: e,
   onClose: t,
   onConfirm: a,
-  variant: l = "clarity-primary",
-  children: n
+  variant: n = "clarity-primary",
+  children: l
 }) => {
-  const [r, o] = T(!1), u = e !== void 0, i = u ? e : r, c = () => {
-    u || o(!0);
-  }, m = () => {
+  const [r, o] = B(!1), f = e !== void 0, i = f ? e : r, c = () => {
+    f || o(!0);
+  }, d = () => {
     t ? t() : o(!1);
   }, v = () => {
-    a && a(), m();
+    a && a(), d();
   };
-  O(() => {
-    const h = (y) => {
-      y.key === "Escape" && m();
+  S(() => {
+    const u = (y) => {
+      y.key === "Escape" && d();
     };
-    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";
+    return i ? (document.addEventListener("keydown", u), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+      document.removeEventListener("keydown", u), document.body.style.overflow = "unset";
     };
-  }, [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__ */ 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 }) })
+  }, [i, d]);
+  const m = E.Children.toArray(l).find(
+    (u) => Z(u) && u.type.displayName === "ConfirmationDialog.Trigger"
+  ), p = E.Children.toArray(l).filter(
+    (u) => Z(u) && u.type.displayName !== "ConfirmationDialog.Trigger"
+  ), h = `clarity-confirmation-dialog clarity-confirmation-dialog--${n}`;
+  return /* @__PURE__ */ _(Te.Provider, { value: { variant: n, onClose: d, onConfirm: v, onOpen: c }, children: [
+    m,
+    i && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ s("div", { className: h, children: p }) })
   ] });
 };
 Q.Header = Be;
 Q.Content = je;
-Q.Footer = Le;
-Q.Trigger = Ee;
-Q.Close = Se;
-Q.Confirm = Oe;
+Q.Footer = Ee;
+Q.Trigger = Le;
+Q.Close = Oe;
+Q.Confirm = Se;
 Q.displayName = "ConfirmationDialog";
 const Tt = ({
   variant: e = "primary",
-  product: t,
-  tone: a,
-  hoverTone: l,
-  size: n = "medium",
-  disabled: r = !1,
-  loading: o = !1,
-  children: u,
-  onClick: i,
-  type: c = "button",
-  className: m = "",
-  "aria-label": v,
-  title: p,
-  ...f
+  size: t = "medium",
+  disabled: a = !1,
+  loading: n = !1,
+  children: l,
+  onClick: r,
+  type: o = "button",
+  className: f = "",
+  "aria-label": i,
+  title: c,
+  customColor: d,
+  customColorHover: v,
+  ...m
 }) => {
-  const d = "clarity-button-icon", h = t && a, y = h ? `${d}--custom` : `${d}--${e}`, N = [
-    d,
-    y,
-    `${d}--${n}`,
-    o && `${d}--loading`,
-    r && `${d}--disabled`,
-    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 || b(a)})`
-  } : {};
-  return /* @__PURE__ */ w(
+  const p = "clarity-button-icon", h = [
+    p,
+    !d && `${p}--${e}`,
+    `${p}--${t}`,
+    n && `${p}--loading`,
+    a && `${p}--disabled`,
+    f
+  ].filter(Boolean).join(" "), u = {};
+  return d && (u["--button-icon-bg"] = d, u["--button-icon-hover-bg"] = v || `${d}E6`), /* @__PURE__ */ _(
     "button",
     {
-      className: N,
-      style: B,
-      disabled: r || o,
-      onClick: i,
-      type: c,
-      "aria-label": v,
-      title: p,
-      ...f,
+      className: h,
+      disabled: a || n,
+      onClick: r,
+      type: o,
+      "aria-label": i,
+      title: c,
+      style: u,
+      ...m,
       children: [
-        o && /* @__PURE__ */ s("div", { className: `${d}__spinner` }),
-        !o && u
+        n && /* @__PURE__ */ s("div", { className: `${p}__spinner` }),
+        !n && l
       ]
     }
   );
@@ -1209,50 +1202,50 @@ const Tt = ({
   variant: e = "primary",
   product: t,
   tone: a,
-  hoverTone: l,
-  size: n = "medium",
+  hoverTone: n,
+  size: l = "medium",
   disabled: r = !1,
   children: o,
-  onClick: u,
+  onClick: f,
   href: i,
   target: c,
-  rel: m,
+  rel: d,
   className: v = "",
-  ...p
+  ...m
 }) => {
-  const f = "clarity-button-link", d = t && a, h = d ? `${f}--custom` : `${f}--${e}`, y = [
-    f,
-    h,
-    `${f}--${n}`,
-    r && `${f}--disabled`,
+  const p = "clarity-button-link", h = t && a, u = h ? `${p}--custom` : `${p}--${e}`, y = [
+    p,
+    u,
+    `${p}--${l}`,
+    r && `${p}--disabled`,
     v
-  ].filter(Boolean).join(" "), N = (B) => {
-    const $ = parseInt(B);
-    return $ >= 800 ? "900" : $ >= 700 ? "800" : $ >= 600 ? "700" : $ >= 500 ? "600" : $ >= 400 ? "500" : $ >= 300 ? "400" : $ >= 200 ? "300" : "200";
-  }, b = d ? {
+  ].filter(Boolean).join(" "), b = ($) => {
+    const T = parseInt($);
+    return T >= 800 ? "900" : T >= 700 ? "800" : T >= 600 ? "700" : T >= 500 ? "600" : T >= 400 ? "500" : T >= 300 ? "400" : T >= 200 ? "300" : "200";
+  }, w = h ? {
     "--custom-color": `var(--clarity-${t}-${a})`,
-    "--custom-hover-color": `var(--clarity-${t}-${l || N(a)})`
+    "--custom-hover-color": `var(--clarity-${t}-${n || b(a)})`
   } : {};
   return i ? /* @__PURE__ */ s(
     "a",
     {
       href: i,
       target: c,
-      rel: m || (c === "_blank" ? "noopener noreferrer" : void 0),
+      rel: d || (c === "_blank" ? "noopener noreferrer" : void 0),
       className: y,
-      style: b,
-      onClick: r ? void 0 : u,
-      ...p,
+      style: w,
+      onClick: r ? void 0 : f,
+      ...m,
       children: o
     }
   ) : /* @__PURE__ */ s(
     "button",
     {
       className: y,
-      style: b,
+      style: w,
       disabled: r,
-      onClick: u,
-      ...p,
+      onClick: f,
+      ...m,
       children: o
     }
   );
@@ -1265,80 +1258,80 @@ const Tt = ({
   variant: e = "primary",
   product: t,
   tone: a,
-  hoverTone: l,
-  defaultActiveKey: n,
+  hoverTone: n,
+  defaultActiveKey: l,
   alwaysOpen: r = !1,
   flush: o = !1,
-  className: u = "",
+  className: f = "",
   children: i,
   onSelect: c,
-  ...m
+  ...d
 }) => {
-  const [v, p] = T(() => n ? Array.isArray(n) ? n : [n] : []), f = (_) => {
+  const [v, m] = B(() => l ? Array.isArray(l) ? l : [l] : []), p = (C) => {
     let k;
-    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,
+    r ? k = v.includes(C) ? v.filter((L) => L !== C) : [...v, C] : k = v.includes(C) ? [] : [C], m(k), c && c(v.includes(C) ? null : C, {});
+  }, h = "clarity-accordion", u = t && a, y = u ? `${h}--custom` : `${h}--${e}`, b = [
+    h,
     y,
-    o && `${d}--flush`,
-    u
-  ].filter(Boolean).join(" "), b = (_) => {
-    const k = parseInt(_);
+    o && `${h}--flush`,
+    f
+  ].filter(Boolean).join(" "), w = (C) => {
+    const k = parseInt(C);
     return k >= 800 ? "900" : k >= 700 ? "800" : k >= 600 ? "700" : k >= 500 ? "600" : k >= 400 ? "500" : k >= 300 ? "400" : k >= 200 ? "300" : "200";
-  }, B = h ? {
+  }, $ = u ? {
     "--custom-border-color": `var(--clarity-${t}-${a})`,
     "--custom-header-color": `var(--clarity-${t}-${a})`,
-    "--custom-hover-color": `var(--clarity-${t}-${l || b(a)})`
-  } : {}, $ = {
+    "--custom-hover-color": `var(--clarity-${t}-${n || w(a)})`
+  } : {}, T = {
     activeKeys: v,
-    toggleItem: f,
+    toggleItem: p,
     alwaysOpen: r,
     variant: e,
     product: t,
     tone: a,
-    hoverTone: l,
+    hoverTone: n,
     flush: o
   };
-  return /* @__PURE__ */ s(Ie.Provider, { value: $, children: /* @__PURE__ */ s("div", { className: N, style: B, ...m, children: i }) });
+  return /* @__PURE__ */ s(Ie.Provider, { value: T, children: /* @__PURE__ */ s("div", { className: b, style: $, ...d, children: i }) });
 }, dt = ({
   eventKey: e,
   disabled: t = !1,
   className: a = "",
-  children: l,
-  ...n
+  children: n,
+  ...l
 }) => {
-  const { activeKeys: r } = De(), o = "clarity-accordion", u = r.includes(e), i = [
+  const { activeKeys: r } = De(), o = "clarity-accordion", f = r.includes(e), i = [
     `${o}__item`,
-    u && `${o}__item--active`,
+    f && `${o}__item--active`,
     t && `${o}__item--disabled`,
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: i, ...n, children: L.Children.map(l, (c) => L.isValidElement(c) ? L.cloneElement(c, {
+  return /* @__PURE__ */ s("div", { className: i, ...l, children: E.Children.map(n, (c) => E.isValidElement(c) ? E.cloneElement(c, {
     ...c.props,
     eventKey: e,
     disabled: t,
-    isActive: u
+    isActive: f
   }) : c) });
 }, mt = ({
   className: e = "",
   children: t,
   onClick: a,
-  eventKey: l,
-  disabled: n = !1,
+  eventKey: n,
+  disabled: l = !1,
   isActive: r = !1,
   ...o
 }) => {
-  const { toggleItem: u } = De(), i = "clarity-accordion", c = (m) => {
-    !n && l && u(l), a == null || a(m);
+  const { toggleItem: f } = De(), i = "clarity-accordion", c = (d) => {
+    !l && n && f(n), a == null || a(d);
   };
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ _(
     "button",
     {
       className: [`${i}__header`, e].filter(Boolean).join(" "),
       onClick: c,
-      disabled: n,
+      disabled: l,
       "aria-expanded": r,
-      "aria-controls": l ? `${i}-collapse-${l}` : void 0,
+      "aria-controls": n ? `${i}-collapse-${n}` : void 0,
       ...o,
       children: [
         /* @__PURE__ */ s("span", { className: `${i}__title`, children: t }),
@@ -1360,8 +1353,8 @@ const Tt = ({
   className: e = "",
   children: t,
   eventKey: a,
-  isActive: l = !1,
-  ...n
+  isActive: n = !1,
+  ...l
 }) => {
   const r = "clarity-accordion";
   return /* @__PURE__ */ s(
@@ -1370,9 +1363,9 @@ const Tt = ({
       id: a ? `${r}-collapse-${a}` : void 0,
       className: [
         `${r}__collapse`,
-        l && `${r}__collapse--show`
+        n && `${r}__collapse--show`
       ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ s("div", { className: [`${r}__body`, e].filter(Boolean).join(" "), ...n, children: t })
+      children: /* @__PURE__ */ s("div", { className: [`${r}__body`, e].filter(Boolean).join(" "), ...l, children: t })
     }
   );
 }, jt = Object.assign(ct, {
@@ -1394,52 +1387,52 @@ const Tt = ({
       type: "button",
       ref: a,
       className: "dropdown__trigger",
-      onClick: () => t((l) => !l),
+      onClick: () => t((n) => !n),
       "aria-haspopup": "true",
       children: e
     }
   );
 }, pt = ({ children: e }) => {
-  const { isOpen: t, contentRef: a, styles: l } = Ae();
-  return t ? /* @__PURE__ */ s("div", { ref: a, className: "dropdown__content", style: l, children: e }) : null;
+  const { isOpen: t, contentRef: a, styles: n } = Ae();
+  return t ? /* @__PURE__ */ s("div", { ref: a, className: "dropdown__content", style: n, children: e }) : 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);
+  const [n, l] = B(!1), [r, o] = B({}), f = P(null), i = P(null), c = P(null);
   return et(() => {
-    if (l) {
-      const m = i.current, v = c.current;
-      if (!m || !v) return;
-      const p = m.getBoundingClientRect(), f = v.getBoundingClientRect(), d = window.innerHeight, h = window.innerWidth;
+    if (n) {
+      const d = i.current, v = c.current;
+      if (!d || !v) return;
+      const m = d.getBoundingClientRect(), p = v.getBoundingClientRect(), h = window.innerHeight, u = 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 = {};
+      t === "bottom" && m.bottom + p.height > h && (y = "top"), t === "top" && m.top - p.height < 0 && (y = "bottom"), t === "right" && m.right + p.width > u && (y = "left"), t === "left" && m.left - p.width < 0 && (y = "right");
+      const b = {};
       switch (y) {
         case "top":
-          N.bottom = p.height + 4, N.left = p.width / 2 - f.width / 2;
+          b.bottom = m.height + 4, b.left = m.width / 2 - p.width / 2;
           break;
         case "right":
-          N.left = p.width + 4, N.top = p.height / 2 - f.height / 2;
+          b.left = m.width + 4, b.top = m.height / 2 - p.height / 2;
           break;
         case "left":
-          N.right = p.width + 4, N.top = p.height / 2 - f.height / 2;
+          b.right = m.width + 4, b.top = m.height / 2 - p.height / 2;
           break;
         case "bottom":
         default:
-          N.top = p.height + 4, N.left = p.width / 2 - f.width / 2;
+          b.top = m.height + 4, b.left = m.width / 2 - p.width / 2;
           break;
       }
-      o(N);
+      o(b);
     }
-  }, [l, t]), O(() => {
-    const m = (v) => {
-      u.current && !u.current.contains(v.target) && n(!1);
+  }, [n, t]), S(() => {
+    const d = (v) => {
+      f.current && !f.current.contains(v.target) && l(!1);
     };
-    return document.addEventListener("mousedown", m), () => {
-      document.removeEventListener("mousedown", m);
+    return document.addEventListener("mousedown", d), () => {
+      document.removeEventListener("mousedown", d);
     };
-  }, []), /* @__PURE__ */ s(Re.Provider, { value: { isOpen: l, setIsOpen: n, triggerRef: i, contentRef: c, styles: r }, children: /* @__PURE__ */ s(
+  }, []), /* @__PURE__ */ s(Re.Provider, { value: { isOpen: n, setIsOpen: l, triggerRef: i, contentRef: c, styles: r }, children: /* @__PURE__ */ s(
     "div",
     {
-      ref: u,
+      ref: f,
       className: "dropdown",
       title: e,
       children: a
@@ -1456,130 +1449,130 @@ const Pe = z(null), Ve = () => {
   if (!e)
     throw new Error("useTabs must be used within a Tabs provider");
   return e;
-}, He = ({ id: e, label: t, className: a = "" }) => {
-  const { activeTab: l, setActiveTab: n, variant: r, orientation: o } = Ve(), u = l === e, i = [
+}, Me = ({ id: e, label: t, className: a = "" }) => {
+  const { activeTab: n, setActiveTab: l, variant: r, orientation: o } = Ve(), f = n === e, i = [
     "clarity-tab",
     a,
-    u ? "active" : "",
-    u ? `variant-${r}` : "",
+    f ? "active" : "",
+    f ? `variant-${r}` : "",
     `orientation-${o}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ s(
     "button",
     {
       className: i,
-      onClick: () => n(e),
+      onClick: () => l(e),
       role: "tab",
-      "aria-selected": u,
+      "aria-selected": f,
       children: /* @__PURE__ */ s("span", { className: "clarity-tab-label", children: t })
     }
   );
 };
-He.displayName = "Tabs.Tab";
-const Me = ({ id: e, children: t, className: a = "" }) => {
-  const { activeTab: l } = Ve(), n = l === e, r = {
-    visibility: n ? "visible" : "hidden",
+Me.displayName = "Tabs.Tab";
+const He = ({ id: e, children: t, className: a = "" }) => {
+  const { activeTab: n } = Ve(), l = n === e, r = {
+    visibility: l ? "visible" : "hidden",
     gridArea: "1 / 1"
   };
-  return n || (r.pointerEvents = "none"), /* @__PURE__ */ s("div", { className: `clarity-tab-content ${a}`, role: "tabpanel", style: r, children: t });
+  return l || (r.pointerEvents = "none"), /* @__PURE__ */ s("div", { className: `clarity-tab-content ${a}`, role: "tabpanel", style: r, children: t });
 };
-Me.displayName = "Tabs.Content";
+He.displayName = "Tabs.Content";
 const me = ({
   children: e,
   defaultTab: t,
   variant: a = "primary",
-  orientation: l = "horizontal",
-  className: n = ""
+  orientation: n = "horizontal",
+  className: l = ""
 }) => {
-  const [r, o] = T(t), u = Y(() => ({
+  const [r, o] = B(t), f = Y(() => ({
     activeTab: r,
     setActiveTab: o,
     variant: a,
-    orientation: l
-  }), [r, a, l]), i = [
+    orientation: n
+  }), [r, a, n]), i = [
     "clarity-tabs-container",
-    n,
-    `orientation-${l}`
+    l,
+    `orientation-${n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s(Pe.Provider, { value: u, children: /* @__PURE__ */ s("div", { className: i, children: e }) });
+  return /* @__PURE__ */ s(Pe.Provider, { value: f, children: /* @__PURE__ */ s("div", { className: i, children: e }) });
 };
-me.Tab = He;
-me.Content = Me;
+me.Tab = Me;
+me.Content = He;
 me.displayName = "Tabs";
-const Lt = ({
+const Et = ({
   content: e,
   position: t = "top",
   variant: a = "primary",
-  product: l,
-  tone: n,
+  product: n,
+  tone: l,
   bgColor: r,
   textColor: o,
-  children: u,
+  children: f,
   className: i = "",
   disabled: c = !1,
-  delay: m = 200,
+  delay: d = 200,
   hideDelay: v = 100,
-  trigger: p = "hover",
-  arrow: f = !0,
-  ...d
+  trigger: m = "hover",
+  arrow: p = !0,
+  ...h
 }) => {
-  const [h, y] = T(!1), [N, b] = T(null), B = P(null), $ = P(null), _ = "clarity-tooltip", k = !!r, E = l && n && !k;
+  const [u, y] = B(!1), [b, w] = B(null), $ = P(null), T = P(null), C = "clarity-tooltip", k = !!r, L = n && l && !k;
   let x = "";
-  k ? x = `${_}__content--custom-bg` : E ? x = `${_}__content--custom` : x = `${_}__content--${a}`;
+  k ? x = `${C}__content--custom-bg` : L ? x = `${C}__content--custom` : x = `${C}__content--${a}`;
   const j = [
-    _,
-    `${_}--${t}`,
+    C,
+    `${C}--${t}`,
     i
   ].filter(Boolean).join(" "), I = [
-    `${_}__content`,
+    `${C}__content`,
     x,
-    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);
+    p && `${C}__content--arrow`
+  ].filter(Boolean).join(" "), A = {}, O = {};
+  k && r && (O["--tooltip-bg-color"] = r), o && (O["--tooltip-text-color"] = o), L && n && l && (O["--tooltip-product"] = n, O["--tooltip-tone"] = l);
   const g = {
     ...A,
-    ...Object.keys(S).length > 0 ? S : {}
-  }, M = () => {
+    ...Object.keys(O).length > 0 ? O : {}
+  }, H = () => {
     if (c) return;
-    N && clearTimeout(N);
-    const H = setTimeout(() => {
+    b && clearTimeout(b);
+    const M = setTimeout(() => {
       y(!0);
-    }, m);
-    b(H);
+    }, d);
+    w(M);
   }, V = () => {
-    N && clearTimeout(N);
-    const H = setTimeout(() => {
+    b && clearTimeout(b);
+    const M = setTimeout(() => {
       y(!1);
     }, v);
-    b(H);
+    w(M);
   }, F = () => {
-    c || y(!h);
+    c || y(!u);
   }, X = () => {
-    c || M();
+    c || H();
   }, te = () => {
     V();
   };
-  O(() => () => {
-    N && clearTimeout(N);
-  }, [N]);
+  S(() => () => {
+    b && clearTimeout(b);
+  }, [b]);
   const G = {};
-  return p === "hover" ? (G.onMouseEnter = M, G.onMouseLeave = V) : p === "click" ? G.onClick = F : p === "focus" && (G.onFocus = X, G.onBlur = te), /* @__PURE__ */ w(
+  return m === "hover" ? (G.onMouseEnter = H, G.onMouseLeave = V) : m === "click" ? G.onClick = F : m === "focus" && (G.onFocus = X, G.onBlur = te), /* @__PURE__ */ _(
     "div",
     {
-      ref: $,
-      className: `${_}__trigger`,
+      ref: T,
+      className: `${C}__trigger`,
       ...G,
-      ...d,
+      ...h,
       children: [
-        u,
-        h && /* @__PURE__ */ s(
+        f,
+        u && /* @__PURE__ */ s(
           "div",
           {
-            ref: B,
+            ref: $,
             className: j,
             style: g,
             role: "tooltip",
-            "aria-hidden": !h,
+            "aria-hidden": !u,
             children: /* @__PURE__ */ s("div", { className: I, children: e })
           }
         )
@@ -1595,44 +1588,44 @@ const Lt = ({
   children: e,
   className: t = "",
   variant: a = "secondary",
-  emptyText: l = "No results found.",
-  inputPlaceholder: n = "Search...",
+  emptyText: n = "No results found.",
+  inputPlaceholder: l = "Search...",
   ...r
 }) => {
-  const [o, u] = T(""), [i, c] = T(null), [m, v] = T(!1), p = [
+  const [o, f] = B(""), [i, c] = B(null), [d, v] = B(!1), m = [
     "clarity-command",
     `clarity-command--${a}`,
     t
-  ].filter(Boolean).join(" "), f = Y(() => ({
+  ].filter(Boolean).join(" "), p = Y(() => ({
     searchTerm: o,
-    setSearchTerm: u,
+    setSearchTerm: f,
     value: i,
     setValue: c,
     variant: a,
     texts: {
-      empty: l,
-      inputPlaceholder: n
+      empty: n,
+      inputPlaceholder: l
     },
-    isOpen: m,
+    isOpen: d,
     setIsOpen: v
-  }), [o, i, a, l, n, m]);
-  return /* @__PURE__ */ s(We.Provider, { value: f, children: /* @__PURE__ */ s("div", { className: p, ...r, children: e }) });
+  }), [o, i, a, n, l, d]);
+  return /* @__PURE__ */ s(We.Provider, { value: p, children: /* @__PURE__ */ s("div", { className: m, ...r, children: e }) });
 };
 Fe.displayName = "Command";
 const Ge = ({ placeholder: e = "Search...", variant: t, onClick: a }) => {
-  const { setIsOpen: l, variant: n } = ee(), [r, o] = T(!1);
-  O(() => {
+  const { setIsOpen: n, variant: l } = ee(), [r, o] = B(!1);
+  S(() => {
     o(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
   }, []);
   const i = [
     "clarity-command-button",
-    `clarity-command-button--${t || n}`
+    `clarity-command-button--${t || l}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("button", { className: i, onClick: (m) => {
-    l(!0), a == null || a(m);
+  return /* @__PURE__ */ _("button", { className: i, onClick: (d) => {
+    n(!0), a == null || a(d);
   }, children: [
     /* @__PURE__ */ s("span", { children: e }),
-    /* @__PURE__ */ w("kbd", { className: "clarity-command-shortcut", children: [
+    /* @__PURE__ */ _("kbd", { className: "clarity-command-shortcut", children: [
       r ? "⌘" : "Ctrl+",
       "K"
     ] })
@@ -1640,33 +1633,33 @@ const Ge = ({ placeholder: e = "Search...", variant: t, onClick: a }) => {
 };
 Ge.displayName = "Command.Button";
 const Ue = ({ children: e, ...t }) => {
-  const { isOpen: a, setIsOpen: l, variant: n } = ee();
-  return O(() => {
+  const { isOpen: a, setIsOpen: n, variant: l } = ee();
+  return S(() => {
     const r = (o) => {
-      o.key === "k" && (o.metaKey || o.ctrlKey) && (o.preventDefault(), l(!a));
+      o.key === "k" && (o.metaKey || o.ctrlKey) && (o.preventDefault(), n(!a));
     };
     return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [a, l]), /* @__PURE__ */ s(J, { isOpen: a, onClose: () => l(!1), size: "large", closeOnOverlayClick: !0, children: /* @__PURE__ */ s("div", { className: `clarity-command--${n}`, children: e }) });
+  }, [a, n]), /* @__PURE__ */ s(J, { isOpen: a, onClose: () => n(!1), size: "large", closeOnOverlayClick: !0, children: /* @__PURE__ */ s("div", { className: `clarity-command--${l}`, children: e }) });
 };
 Ue.displayName = "Command.Dialog";
 const ze = ({ className: e = "", ...t }) => {
-  const { searchTerm: a, setSearchTerm: l, variant: n, texts: r, isOpen: o } = ee(), u = P(null);
-  O(() => {
+  const { searchTerm: a, setSearchTerm: n, variant: l, texts: r, isOpen: o } = ee(), f = P(null);
+  S(() => {
     var c;
-    o && ((c = u.current) == null || c.focus());
+    o && ((c = f.current) == null || c.focus());
   }, [o]);
   const i = [
     "clarity-command-input",
-    `clarity-command-input--${n}`,
+    `clarity-command-input--${l}`,
     e
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ s("div", { className: "clarity-command-input__wrapper", children: /* @__PURE__ */ s(
     "input",
     {
-      ref: u,
+      ref: f,
       className: i,
       value: a,
-      onChange: (c) => l(c.target.value),
+      onChange: (c) => n(c.target.value),
       placeholder: t.placeholder || r.inputPlaceholder,
       ...t
     }
@@ -1674,41 +1667,41 @@ const ze = ({ className: e = "", ...t }) => {
 };
 ze.displayName = "Command.Input";
 const qe = ({ children: e, className: t = "", ...a }) => {
-  const { searchTerm: l } = ee();
-  let n = !1;
-  const r = (i) => L.Children.toArray(i).map((c) => {
+  const { searchTerm: n } = ee();
+  let l = !1;
+  const r = (i) => E.Children.toArray(i).map((c) => {
     var v;
-    if (!L.isValidElement(c)) return c;
-    const m = c.type.displayName;
-    if (m === "Command.Empty")
+    if (!E.isValidElement(c)) return c;
+    const d = c.type.displayName;
+    if (d === "Command.Empty")
       return 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;
+    if (d === "Command.Item")
+      return (((v = c.props.children) == null ? void 0 : v.toString().toLowerCase()) || "").includes(n.toLowerCase()) ? (l = !0, c) : null;
+    if (d === "Command.Group") {
+      const m = r(c.props.children);
+      return E.Children.toArray(m).some((h) => E.isValidElement(h) && h.type.displayName === "Command.Item") ? E.cloneElement(c, { ...c.props, children: m }) : null;
     }
     return c;
-  }).filter(Boolean), o = r(e), u = ["clarity-command-list", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: u, ...a, children: [
+  }).filter(Boolean), o = r(e), f = ["clarity-command-list", t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _("div", { className: f, ...a, children: [
     o,
-    !n && /* @__PURE__ */ s(ue, {})
+    !l && /* @__PURE__ */ s(ue, {})
   ] });
 };
 qe.displayName = "Command.List";
 const ue = ({ children: e, className: t = "", ...a }) => {
-  const { texts: l } = ee(), n = ["clarity-command-empty", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: n, ...a, children: e || a.emptyText || l.empty });
+  const { texts: n } = ee(), l = ["clarity-command-empty", t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s("div", { className: l, ...a, children: e || a.emptyText || n.empty });
 };
 ue.displayName = "Command.Empty";
 const Je = ({ children: e, className: t = "", ...a }) => {
-  const l = ["clarity-command-group", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: l, ...a, children: e });
+  const n = ["clarity-command-group", t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s("div", { className: n, ...a, children: e });
 };
 Je.displayName = "Command.Group";
 const Qe = ({ children: e, className: t = "", ...a }) => {
-  const { setValue: l, variant: n } = ee(), r = ["clarity-command-item", `clarity-command-item--${n}`, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: r, onClick: () => l((e == null ? void 0 : e.toString()) || ""), ...a, children: e });
+  const { setValue: n, variant: l } = ee(), r = ["clarity-command-item", `clarity-command-item--${l}`, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s("div", { className: r, onClick: () => n((e == null ? void 0 : e.toString()) || ""), ...a, children: e });
 };
 Qe.displayName = "Command.Item";
 const Xe = ({ className: e = "", ...t }) => {
@@ -1717,11 +1710,11 @@ const Xe = ({ className: e = "", ...t }) => {
 };
 Xe.displayName = "Command.Separator";
 const Ye = ({ children: e, className: t = "", ...a }) => {
-  const l = ["clarity-command-shortcut", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("span", { className: l, ...a, children: e });
+  const n = ["clarity-command-shortcut", t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s("span", { className: n, ...a, children: e });
 };
 Ye.displayName = "Command.Shortcut";
-const Et = Object.assign(Fe, {
+const Lt = Object.assign(Fe, {
   Button: Ge,
   Dialog: Ue,
   Input: ze,
@@ -1731,87 +1724,87 @@ const Et = Object.assign(Fe, {
   Item: Qe,
   Separator: Xe,
   Shortcut: Ye
-}), Ct = ({ columns: e, viewMode: t }) => {
-  const a = Array.from({ length: 5 }, (l, n) => n);
-  return t === "card" ? /* @__PURE__ */ w("div", { className: "card-view-wrapper is-loading", children: [
+}), Nt = ({ columns: e, viewMode: t }) => {
+  const a = Array.from({ length: 5 }, (n, l) => l);
+  return t === "card" ? /* @__PURE__ */ _("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__ */ 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)) })
+    /* @__PURE__ */ s("div", { className: "card-view-body", children: a.map((n) => /* @__PURE__ */ s("div", { className: "skeleton card-view-row" }, n)) })
+  ] }) : /* @__PURE__ */ s("div", { className: "table-wrapper is-loading", children: /* @__PURE__ */ _("table", { children: [
+    /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ s("tr", { className: "table-row", children: e.map((n) => /* @__PURE__ */ s("th", { className: "table-header-cell", children: /* @__PURE__ */ s("div", { className: "skeleton skeleton-text" }) }, n.key)) }) }),
+    /* @__PURE__ */ s("tbody", { children: a.map((n) => /* @__PURE__ */ s("tr", { className: "table-row", children: e.map((l) => /* @__PURE__ */ s("td", { className: "table-cell", children: /* @__PURE__ */ s("div", { className: "skeleton skeleton-text" }) }, l.key)) }, n)) })
   ] }) });
-}, St = ({
+}, Ot = ({
   variant: e = "secondary",
   columns: t,
   data: a,
-  viewMode: l = "table",
-  isScrollable: n = !1,
+  viewMode: n = "table",
+  isScrollable: l = !1,
   isLoading: r = !1
 }) => {
-  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;
+  const [o, f] = B(null), [i, c] = B("none"), d = (h) => {
+    h.sortable && (o === h.key ? c((u) => u === "asc" ? "desc" : u === "desc" ? "none" : "asc") : (f(h.key), c("asc")));
+  }, v = Y(() => i === "none" || !o ? a : [...a].sort((h, u) => {
+    const y = h[o], b = u[o];
+    return y < b ? i === "asc" ? -1 : 1 : y > b ? i === "asc" ? 1 : -1 : 0;
+  }), [a, o, i]), m = (h) => h.sortable ? o !== h.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 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(
+    return /* @__PURE__ */ s(Nt, { columns: t, viewMode: n });
+  const p = `table-variant-${e} ${l ? "is-scrollable" : ""}`;
+  return n === "card" ? /* @__PURE__ */ _("div", { className: `card-view-wrapper ${p}`, children: [
+    /* @__PURE__ */ s("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((h) => /* @__PURE__ */ _(
       "div",
       {
-        className: `card-view-header-cell ${d.sortable ? "sortable" : ""}`,
-        onClick: () => m(d),
-        style: { minWidth: d.minWidth },
+        className: `card-view-header-cell ${h.sortable ? "sortable" : ""}`,
+        onClick: () => d(h),
+        style: { minWidth: h.minWidth },
         children: [
-          d.header,
-          p(d)
+          h.header,
+          m(h)
         ]
       },
-      d.key
+      h.key
     )) }),
-    /* @__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(
+    /* @__PURE__ */ s("div", { className: "card-view-body", children: v.map((h, u) => /* @__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(h) : h[y.key] }, y.key)) }, u)) })
+  ] }) : /* @__PURE__ */ s("div", { className: `table-wrapper ${p}`, children: /* @__PURE__ */ _("table", { children: [
+    /* @__PURE__ */ s("thead", { className: "table-header", children: /* @__PURE__ */ s("tr", { className: "table-row", children: t.map((h) => /* @__PURE__ */ _(
       "th",
       {
-        className: `table-header-cell ${d.sortable ? "sortable" : ""} table-header-cell-${e}`,
-        onClick: () => m(d),
-        style: { minWidth: d.minWidth },
+        className: `table-header-cell ${h.sortable ? "sortable" : ""} table-header-cell-${e}`,
+        onClick: () => d(h),
+        style: { minWidth: h.minWidth },
         children: [
-          d.header,
-          p(d)
+          h.header,
+          m(h)
         ]
       },
-      d.key
+      h.key
     )) }) }),
-    /* @__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)) })
+    /* @__PURE__ */ s("tbody", { children: v.map((h, u) => /* @__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(h) : h[y.key] }, y.key)) }, u)) })
   ] }) });
-}, Ot = ({
+}, St = ({
   variant: e = "primary",
   product: t,
   tone: a,
-  size: l = "medium",
-  color: n,
+  size: n = "medium",
+  color: l,
   className: r = "",
   "aria-label": o = "Carregando...",
-  ...u
+  ...f
 }) => {
-  const i = "clarity-spinner", v = n ? `${i}--custom` : t && a ? `${i}--custom` : `${i}--${e}`, p = [
+  const i = "clarity-spinner", v = l ? `${i}--custom` : t && a ? `${i}--custom` : `${i}--${e}`, m = [
     i,
-    `${i}--${l}`,
+    `${i}--${n}`,
     v,
     r
-  ].filter(Boolean).join(" "), f = {};
-  return n ? f["--spinner-color"] = n : t && a && (f["--spinner-color"] = `var(--clarity-${t}-${a})`), /* @__PURE__ */ s(
+  ].filter(Boolean).join(" "), p = {};
+  return l ? p["--spinner-color"] = l : t && a && (p["--spinner-color"] = `var(--clarity-${t}-${a})`), /* @__PURE__ */ s(
     "div",
     {
-      className: p,
-      style: f,
+      className: m,
+      style: p,
       role: "status",
       "aria-label": o,
-      ...u,
+      ...f,
       children: /* @__PURE__ */ s("div", { className: `${i}__container`, children: /* @__PURE__ */ s(
         "svg",
         {
@@ -1914,26 +1907,26 @@ const Et = Object.assign(Fe, {
 export {
   jt as Accordion,
   wt as Badge,
-  $t as Button,
-  gt as ButtonGroup,
+  gt as Button,
+  $t as ButtonGroup,
   Tt as ButtonIcon,
   Bt as ButtonLink,
   it as CheckInput,
-  Et as Command,
+  Lt as Command,
   Q as ConfirmationDialog,
   ae as Dropdown,
   st as Input,
   ot as InputSwitch,
   J as Modal,
-  nt as MultiSelect,
+  lt as MultiSelect,
   K as Offcanvas,
-  lt as Select,
-  Ot as Spinner,
-  St as Table,
+  nt as Select,
+  St as Spinner,
+  Ot as Table,
   me as Tabs,
   at as Textarea,
   xt as ToastProvider,
-  Lt as Tooltip,
+  Et as Tooltip,
   At as cn,
   It as colors,
   Pt as generateId,