beth-clarity 1.1.10 → 1.1.11

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

@@ -1,5 +1,5 @@
-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 b, Fragment as Ze } from "react/jsx-runtime";
+import E, { useState as T, 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 ne, useLayoutEffect as et } from "react";
 import tt from "react-dom";
 const wt = ({
   variant: e = "primary",
@@ -12,20 +12,20 @@ const wt = ({
   className: u = "",
   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 v = "clarity-badge", m = !!n, f = t && a && !m;
+  let p = "";
+  m ? p = `${v}--custom-bg` : f ? p = `${v}--custom` : p = `${v}--${e}`;
   const h = [
     v,
-    d,
+    p,
     `${v}--${l}`,
     i ? `${v}--rounded` : "",
     c ? `${v}--outlined` : "",
     u
   ].filter(Boolean).join(" "), y = {};
-  p && (y.backgroundColor = n, r && (y.color = r));
+  m && (y.backgroundColor = n, r && (y.color = r));
   const N = f && t && a ? {
     "--custom-bg-color": `var(--clarity-${t}-${a})`,
     "--custom-text-color": a && parseInt(a) >= 500 ? "white" : `var(--clarity-${t}-800)`
@@ -38,11 +38,11 @@ const wt = ({
         ...y,
         ...N
       },
-      ...m,
+      ...d,
       children: o
     }
   );
-}, $t = ({
+}, gt = ({
   variant: e = "primary",
   product: t,
   tone: a,
@@ -53,41 +53,41 @@ const wt = ({
   children: u,
   onClick: i,
   type: c = "button",
-  className: m = "",
+  className: d = "",
   title: v,
-  ...p
+  ...m
 }) => {
-  const f = "clarity-button", d = t && a, h = d ? `${f}--custom` : `${f}--${e}`, y = [
+  const f = "clarity-button", p = t && a, h = p ? `${f}--custom` : `${f}--${e}`, y = [
     f,
     h,
     `${f}--${n}`,
     o && `${f}--loading`,
     r && `${f}--disabled`,
-    m
+    d
   ].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 ? {
+  }, _ = p ? {
     "--custom-bg-color": `var(--clarity-${t}-${a})`,
     "--custom-hover-color": `var(--clarity-${t}-${l || N(a)})`
   } : {};
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ b(
     "button",
     {
       className: y,
-      style: b,
+      style: _,
       disabled: r || o,
       onClick: i,
       type: c,
       title: v,
-      ...p,
+      ...m,
       children: [
         o && /* @__PURE__ */ s("div", { className: `${f}__spinner` }),
         u
       ]
     }
   );
-}, gt = ({
+}, $t = ({
   variant: e = "primary",
   size: t = "medium",
   filled: a = !0,
@@ -99,48 +99,48 @@ const wt = ({
   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);
     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 N = Array.isArray(n) ? n : [], _ = N.includes(h) ? N.filter((B) => B !== h) : [...N, h];
+        u(_);
       } else
         u(h);
-  }, d = (h) => r ? Array.isArray(n) && n.includes(h) : n === h;
+  }, p = (h) => r ? Array.isArray(n) && n.includes(h) : n === h;
   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`
+        const N = p(h.id), _ = [
+          `${d}__item`,
+          N && `${d}__item--selected`,
+          h.disabled && `${d}__item--disabled`,
+          y === 0 && `${d}__item--first`,
+          y === l.length - 1 && `${d}__item--last`
         ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ w(
+        return /* @__PURE__ */ b(
           "button",
           {
-            className: b,
+            className: _,
             onClick: () => f(h.id),
             disabled: o || h.disabled,
             type: "button",
             "aria-pressed": N,
             children: [
-              h.icon && /* @__PURE__ */ s("span", { className: `${m}__item-icon`, children: h.icon }),
-              /* @__PURE__ */ s("span", { className: `${m}__item-label`, children: h.label })
+              h.icon && /* @__PURE__ */ s("span", { className: `${d}__item-icon`, children: h.icon }),
+              /* @__PURE__ */ s("span", { className: `${d}__item-label`, children: h.label })
             ]
           },
           h.id
@@ -148,7 +148,7 @@ const wt = ({
       })
     }
   );
-}, st = L.forwardRef(({
+}, st = E.forwardRef(({
   variant: e,
   size: t = "medium",
   label: a,
@@ -159,22 +159,22 @@ const wt = ({
   endIcon: u,
   className: i = "",
   disabled: c = !1,
-  value: m,
+  value: d,
   defaultValue: v,
-  onFocus: p,
+  onFocus: m,
   onBlur: f,
-  ...d
+  ...p
 }, h) => {
-  const [y, N] = T(!1), [b, B] = T(!1), $ = P(null);
-  L.useImperativeHandle(h, () => $.current), O(() => {
+  const [y, N] = T(!1), [_, B] = T(!1), $ = P(null);
+  E.useImperativeHandle(h, () => $.current), S(() => {
     const x = $.current;
     x && B(x.value.length > 0);
-  }, [m, v]);
-  const _ = (x) => {
-    N(!0), p == null || p(x);
+  }, [d, v]);
+  const w = (x) => {
+    N(!0), m == null || m(x);
   }, k = (x) => {
     N(!1), B(x.target.value.length > 0), f == null || f(x);
-  }, E = [
+  }, L = [
     "clarity-input",
     "clarity-input--outlined",
     `clarity-input--${t}`,
@@ -182,26 +182,26 @@ const wt = ({
     n && "clarity-input--error",
     c && "clarity-input--disabled",
     y && "clarity-input--focused",
-    b && "clarity-input--has-value",
+    _ && "clarity-input--has-value",
     o && "clarity-input--with-start-icon",
     u && "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__ */ b("div", { className: "clarity-input-wrapper", children: [
+    /* @__PURE__ */ b("div", { className: L, children: [
       o && /* @__PURE__ */ s("div", { className: "clarity-input__start-icon", children: o }),
-      /* @__PURE__ */ w("div", { className: "clarity-input__field", children: [
+      /* @__PURE__ */ b("div", { className: "clarity-input__field", children: [
         /* @__PURE__ */ s(
           "input",
           {
             ref: $,
             className: "clarity-input__element",
             disabled: c,
-            value: m,
+            value: d,
             defaultValue: v,
-            onFocus: _,
+            onFocus: w,
             onBlur: k,
-            ...d
+            ...p
           }
         ),
         a && /* @__PURE__ */ s("label", { className: "clarity-input__label", children: a })
@@ -212,7 +212,7 @@ const wt = ({
   ] });
 });
 st.displayName = "Input";
-const at = L.forwardRef(({
+const at = E.forwardRef(({
   variant: e,
   size: t = "medium",
   label: a,
@@ -223,25 +223,25 @@ const at = L.forwardRef(({
   endIcon: u,
   className: i = "",
   disabled: c = !1,
-  value: m,
+  value: d,
   defaultValue: v,
-  onFocus: p,
+  onFocus: m,
   onBlur: f,
-  rows: d = 3,
+  rows: p = 3,
   minHeight: h,
   maxHeight: y,
   resizable: N = !0,
-  ...b
+  ..._
 }, B) => {
-  const [$, _] = T(!1), [k, E] = T(!1), x = P(null);
-  L.useImperativeHandle(B, () => x.current), O(() => {
+  const [$, w] = T(!1), [k, L] = T(!1), x = P(null);
+  E.useImperativeHandle(B, () => 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);
+    w(!0), m == null || m(g);
   }, I = (g) => {
-    _(!1), E(g.target.value.length > 0), f == null || f(g);
+    w(!1), L(g.target.value.length > 0), f == null || f(g);
   }, A = [
     "clarity-textarea",
     "clarity-textarea--outlined",
@@ -254,28 +254,28 @@ const at = L.forwardRef(({
     o && "clarity-textarea--with-start-icon",
     u && "clarity-textarea--with-end-icon",
     i
-  ].filter(Boolean).join(" "), S = {
+  ].filter(Boolean).join(" "), O = {
     resize: N ? "vertical" : "none",
     minHeight: h ? `${h}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__ */ b("div", { className: "clarity-textarea-wrapper", children: [
+    /* @__PURE__ */ b("div", { className: A, children: [
       o && /* @__PURE__ */ s("div", { className: "clarity-textarea__start-icon", children: o }),
-      /* @__PURE__ */ w("div", { className: "clarity-textarea__field", children: [
+      /* @__PURE__ */ b("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: p,
+            style: O,
+            ..._
           }
         ),
         a && /* @__PURE__ */ s("label", { className: "clarity-textarea__label", children: a })
@@ -286,7 +286,7 @@ const at = L.forwardRef(({
   ] });
 });
 at.displayName = "Textarea";
-const lt = L.forwardRef(({
+const lt = E.forwardRef(({
   variant: e,
   size: t = "medium",
   label: a,
@@ -297,86 +297,86 @@ const lt = L.forwardRef(({
   endIcon: u,
   className: i = "",
   disabled: c = !1,
-  value: m,
+  value: d,
   defaultValue: v,
-  onFocus: p,
+  onFocus: m,
   onBlur: f,
-  onChange: d,
+  onChange: p,
   options: h,
   placeholder: y = "Selecione uma opção",
   isClearable: N = !1,
-  isSearchable: b = !1,
+  isSearchable: _ = !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 [w, k] = T(!1), [L, x] = T(!1), [j, I] = T(d || v || ""), [A, O] = T(""), g = P(null), M = P(null);
+  E.useImperativeHandle($, () => g.current), S(() => {
+    d !== void 0 && I(d);
+  }, [d]), S(() => {
     const C = (D) => {
       g.current && !g.current.contains(D.target) && (k(!1), x(!1), f == null || f());
     };
     return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
   }, [f]);
-  const V = b && A ? h.filter(
+  const V = _ && 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(() => {
+    c || (k(!w), x(!w), w ? (f == null || f(), _ && O("")) : (m == null || m(), _ && setTimeout(() => {
       var C;
       (C = M.current) == null || C.focus();
     }, 0)));
   }, X = (C) => {
-    C.disabled || (I(C.value), k(!1), x(!1), S(""), d == null || d(C.value), f == null || f());
+    C.disabled || (I(C.value), k(!1), x(!1), O(""), p == null || p(C.value), f == null || f());
   }, te = (C) => {
-    S(C.target.value);
+    O(C.target.value);
   }, G = (C) => {
-    C.key === "Escape" ? (k(!1), x(!1), S("")) : C.key === "Enter" && V.length > 0 && V[0] && X(V[0]);
+    C.key === "Escape" ? (k(!1), x(!1), O("")) : 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 = [
+    C.stopPropagation(), I(""), p == null || p("");
+  }, ie = le || L || y || _ && A, oe = [
     "clarity-select",
     "clarity-select--outlined",
     `clarity-select--${t}`,
     e && `clarity-select--${e}`,
     n && "clarity-select--error",
     c && "clarity-select--disabled",
-    (E || _) && "clarity-select--focused",
+    (L || w) && "clarity-select--focused",
     ie && "clarity-select--label-up",
-    _ && "clarity-select--open",
-    b && "clarity-select--searchable",
+    w && "clarity-select--open",
+    _ && "clarity-select--searchable",
     o && "clarity-select--with-start-icon",
     (u || N) && "clarity-select--with-end-icon",
     i
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: "clarity-select-wrapper", children: [
-    /* @__PURE__ */ w(
+  return /* @__PURE__ */ b("div", { className: "clarity-select-wrapper", children: [
+    /* @__PURE__ */ b(
       "div",
       {
         ref: g,
         className: oe,
-        onClick: b ? void 0 : F,
+        onClick: _ ? void 0 : F,
         role: "combobox",
-        "aria-expanded": _,
+        "aria-expanded": w,
         "aria-haspopup": "listbox",
-        tabIndex: c || b ? -1 : 0,
+        tabIndex: c || _ ? -1 : 0,
         ...B,
         children: [
           o && /* @__PURE__ */ s("div", { className: "clarity-select__start-icon", children: o }),
-          /* @__PURE__ */ w("div", { className: "clarity-select__field", children: [
-            b ? /* @__PURE__ */ s(
+          /* @__PURE__ */ b("div", { className: "clarity-select__field", children: [
+            _ ? /* @__PURE__ */ s(
               "input",
               {
                 ref: M,
                 type: "text",
                 className: "clarity-select__search-input",
-                value: _ ? A : H ? H.label : "",
+                value: w ? A : H ? H.label : "",
                 onChange: te,
                 onKeyDown: G,
                 onFocus: () => {
-                  _ || (k(!0), x(!0), p == null || p());
+                  w || (k(!0), x(!0), m == null || m());
                 },
                 placeholder: H ? H.label : y,
                 disabled: c,
-                readOnly: !_
+                readOnly: !w
               }
             ) : /* @__PURE__ */ s("div", { className: "clarity-select__display", children: H ? H.label : y }),
             a && /* @__PURE__ */ s("label", { className: "clarity-select__label", children: a })
@@ -413,7 +413,7 @@ const lt = L.forwardRef(({
             "div",
             {
               className: "clarity-select__end-icon",
-              onClick: b ? F : void 0,
+              onClick: _ ? F : void 0,
               children: u || /* @__PURE__ */ s(
                 "svg",
                 {
@@ -436,7 +436,7 @@ 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(
+          w && /* @__PURE__ */ s("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ s("ul", { className: "clarity-select__options", role: "listbox", children: V.length > 0 ? V.map((C) => /* @__PURE__ */ s(
             "li",
             {
               className: [
@@ -469,29 +469,29 @@ const nt = Ke(({
   errorMessage: u,
   disabled: i = !1,
   variant: c = "primary",
-  size: m = "medium",
+  size: d = "medium",
   maxSelectedLabels: v = 3,
-  selectionLimit: p,
+  selectionLimit: m,
   className: f = "",
-  id: d,
+  id: p,
   name: h,
   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) => {
+  const [$, w] = T(!1), [k, L] = T(""), [x, j] = T(!1), I = P(null), A = P(null), O = P(null), g = (C) => {
     I.current = C, B && (typeof B == "function" ? B(C) : B.current = C);
   };
-  O(() => {
+  S(() => {
     const C = (D) => {
-      I.current && !I.current.contains(D.target) && (_(!1), j(!1), E(""));
+      I.current && !I.current.contains(D.target) && (w(!1), j(!1), L(""));
     };
     return document.addEventListener("click", C), () => document.removeEventListener("click", C);
   }, []);
   const M = e.filter(
     (C) => C.label.toLowerCase().includes(k.toLowerCase())
   ), V = () => {
-    i || (_(!$), j(!$), $ ? E("") : setTimeout(() => {
+    i || (w(!$), j(!$), $ ? L("") : setTimeout(() => {
       var C;
       (C = A.current) == null || C.focus();
     }, 100));
@@ -509,16 +509,16 @@ const nt = Ke(({
   }, te = (C) => {
     C.stopPropagation(), !i && (a == null || a([]));
   }, G = (C) => {
-    E(C.target.value);
+    L(C.target.value);
   }, H = (C) => {
-    C.key === "Escape" && (_(!1), j(!1), E(""));
+    C.key === "Escape" && (w(!1), j(!1), L(""));
   }, le = x || $ || t.length > 0, re = () => {
     if (t.length === 0) return null;
     const C = 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: [
+    return /* @__PURE__ */ b("div", { className: "clarity-multiselect__chips", children: [
+      D.map((R) => /* @__PURE__ */ b("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__ */ b("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
         "+",
         U,
         " mais"
@@ -543,7 +543,7 @@ const nt = Ke(({
   ].filter(Boolean).join(" "), oe = [
     "clarity-multiselect",
     `clarity-multiselect--${c}`,
-    `clarity-multiselect--${m}`,
+    `clarity-multiselect--${d}`,
     $ && "clarity-multiselect--open",
     x && "clarity-multiselect--focused",
     le && "clarity-multiselect--label-up",
@@ -551,27 +551,27 @@ const nt = Ke(({
     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__ */ b("div", { className: ie, children: [
+    /* @__PURE__ */ b(
       "div",
       {
         ref: g,
         className: oe,
         "data-testid": N,
-        ...b,
+        ..._,
         children: [
-          /* @__PURE__ */ w(
+          /* @__PURE__ */ b(
             "div",
             {
               className: "clarity-multiselect__field",
               onClick: V,
               children: [
-                n && /* @__PURE__ */ w("label", { className: "clarity-multiselect__label", children: [
+                n && /* @__PURE__ */ b("label", { className: "clarity-multiselect__label", children: [
                   n,
                   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__ */ b("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: [
+          $ && /* @__PURE__ */ b("div", { ref: O, className: "clarity-multiselect__dropdown", children: [
             /* @__PURE__ */ s("div", { className: "clarity-multiselect__search", children: /* @__PURE__ */ s(
               "input",
               {
@@ -611,7 +611,7 @@ const nt = Ke(({
             ) }),
             /* @__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(
+              return /* @__PURE__ */ b(
                 "li",
                 {
                   className: [
@@ -666,7 +666,7 @@ const fe = z(null), pe = () => {
     "clarity-modal-close",
     n && `clarity-modal-close--${n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: o, children: [
+  return /* @__PURE__ */ b("div", { className: o, children: [
     a && /* @__PURE__ */ s("h2", { className: "clarity-modal-title", children: a }),
     e,
     r && /* @__PURE__ */ s("button", { className: u, onClick: (i) => {
@@ -677,7 +677,7 @@ const fe = z(null), pe = () => {
 he.displayName = "Modal.Header";
 const ye = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-modal-content ${t}`, children: e });
 ye.displayName = "Modal.Content";
-const ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ w("div", { className: `clarity-modal-footer ${t}`, children: [
+const ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ b("div", { className: `clarity-modal-footer ${t}`, children: [
   /* @__PURE__ */ s("div", { className: "clarity-modal-scroll-indicator" }),
   e
 ] });
@@ -711,29 +711,29 @@ const J = ({
   showCloseButton: u = !0,
   closeOnOverlayClick: i = !0
 }) => {
-  const [c, m] = T(!1), p = e !== void 0 ? e : c, f = t || (() => {
-    m(!1);
+  const [c, d] = T(!1), m = e !== void 0 ? e : c, f = t || (() => {
+    d(!1);
   });
-  O(() => {
-    p && (a == null || a());
-  }, [p, a]), O(() => {
-    const b = (B) => {
+  S(() => {
+    m && (a == null || a());
+  }, [m, a]), S(() => {
+    const _ = (B) => {
       B.key === "Escape" && f();
     };
-    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", _), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+      document.removeEventListener("keydown", _), 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"
+  }, [m, f]);
+  const p = (_) => {
+    i && _.target === _.currentTarget && f();
+  }, h = E.Children.toArray(l).find(
+    (_) => Z(_) && _.type.displayName === "Modal.Trigger"
+  ), y = E.Children.toArray(l).filter(
+    (_) => Z(_) && _.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 }) })
+  return /* @__PURE__ */ b(fe.Provider, { value: { onClose: f, variant: r, showCloseButton: u }, children: [
+    h && W(h, { onClick: () => d(!0), variant: r }),
+    m && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", onClick: p, children: /* @__PURE__ */ s("div", { className: N, children: y }) })
   ] });
 };
 J.Header = he;
@@ -749,16 +749,16 @@ const be = z(void 0), kt = () => {
   return e;
 }, rt = ({ id: e, message: t, variant: a, duration: l, onClose: n, invertColors: r }) => {
   const [o, u] = T("entering");
-  O(() => {
+  S(() => {
     const c = setTimeout(() => {
       u("visible");
-    }, 10), m = setTimeout(() => {
+    }, 10), d = setTimeout(() => {
       u("exiting");
     }, l * 1e3 - 300), v = setTimeout(() => {
       n(e);
     }, l * 1e3);
     return () => {
-      clearTimeout(c), clearTimeout(m), clearTimeout(v);
+      clearTimeout(c), clearTimeout(d), clearTimeout(v);
     };
   }, [e, l, n]);
   const i = [
@@ -767,7 +767,7 @@ const be = z(void 0), kt = () => {
     r ? "colored-background" : "",
     `cl-toast-${o}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: i, children: [
+  return /* @__PURE__ */ b("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(
@@ -786,30 +786,30 @@ const be = z(void 0), kt = () => {
     }
     return null;
   }, []);
-  O(() => {
+  S(() => {
     if (l)
       return document.body.appendChild(l), () => {
         document.body.removeChild(l);
       };
   }, [l]);
   const n = ne((i) => {
-    const m = {
+    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));
+    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]), u = Y(() => ({ show: n }), [n]);
-  return /* @__PURE__ */ w(be.Provider, { value: u, children: [
+  return /* @__PURE__ */ b(be.Provider, { value: u, children: [
     e,
     l && tt.createPortal(
-      Object.entries(o).map(([i, c]) => /* @__PURE__ */ s("div", { className: `cl-toast-container ${i}`, children: c.map((m) => /* @__PURE__ */ s(rt, { ...m, onClose: r }, m.id)) }, i)),
+      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)),
       l
     )
   ] });
@@ -818,7 +818,7 @@ 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 = ""
 }) => {
@@ -832,7 +832,7 @@ const be = z(void 0), kt = () => {
     "clarity-offcanvas-title",
     l && `clarity-offcanvas-title--${l}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("div", { className: o, children: [
+  return /* @__PURE__ */ b("div", { className: o, children: [
     r && /* @__PURE__ */ s("h2", { className: i, children: r }),
     e,
     n && /* @__PURE__ */ s("button", { className: u, onClick: (c) => {
@@ -840,9 +840,9 @@ const be = z(void 0), kt = () => {
     }, 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;
@@ -875,12 +875,12 @@ const K = ({
   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] = T(!1), [m, f] = T(!1), [p, h] = T(!1), y = e !== void 0, N = y ? e : d, _ = ne(() => {
     t ? t() : v(!1);
   }, [t]), B = ne(() => {
     y || v(!0), a == null || a();
   }, [y, a]);
-  O(() => {
+  S(() => {
     if (N) {
       h(!0);
       const g = setTimeout(() => {
@@ -894,31 +894,31 @@ const K = ({
       }, 300);
       return () => clearTimeout(g);
     }
-  }, [N]), O(() => {
+  }, [N]), S(() => {
     const g = (M) => {
-      M.key === "Escape" && b();
+      M.key === "Escape" && _();
     };
     return N ? (document.addEventListener("keydown", g), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", g), document.body.style.overflow = "unset"), () => {
       document.removeEventListener("keydown", g), document.body.style.overflow = "unset";
     };
-  }, [N, b]);
+  }, [N, _]);
   const $ = (g) => {
-    u && g.target === g.currentTarget && b();
-  }, _ = L.Children.toArray(l);
-  let k, E, x, j, I;
-  _.forEach((g) => {
+    u && g.target === g.currentTarget && _();
+  }, w = E.Children.toArray(l);
+  let k, L, x, j, I;
+  w.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__ */ b(Ze, { children: [
       j.props.children,
       I
     ] })
@@ -928,16 +928,16 @@ const K = ({
     n,
     `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: [
+  return /* @__PURE__ */ b(_e.Provider, { value: { onClose: _, 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,
+    p && // Only render if shouldRender is true
+    /* @__PURE__ */ s("div", { className: O, onClick: $, children: /* @__PURE__ */ b("div", { className: A, children: [
+      L,
       x,
       j && /* @__PURE__ */ s("div", { className: "clarity-offcanvas-scroll-indicator" }),
       " ",
@@ -945,13 +945,13 @@ 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",
@@ -962,11 +962,11 @@ const it = L.forwardRef(({
   labelPosition: u = "right",
   className: i = "",
   disabled: c = !1,
-  checked: m,
+  checked: d,
   id: v,
-  ...p
+  ...m
 }, f) => {
-  const d = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, h = [
+  const p = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, h = [
     "clarity-check-input-wrapper",
     `clarity-check-input-wrapper--${u}`,
     c && "clarity-check-input-wrapper--disabled",
@@ -984,21 +984,21 @@ const it = L.forwardRef(({
     `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__ */ b("div", { className: "clarity-check-input-container", children: [
+    /* @__PURE__ */ b("label", { className: h, htmlFor: p, children: [
       /* @__PURE__ */ s(
         "input",
         {
           ref: f,
-          id: d,
+          id: p,
           type: e,
           className: y,
           disabled: c,
-          checked: m,
-          ...p
+          checked: d,
+          ...m
         }
       ),
-      /* @__PURE__ */ w("div", { className: "clarity-check-input__custom", children: [
+      /* @__PURE__ */ b("div", { className: "clarity-check-input__custom", children: [
         e === "checkbox" && /* @__PURE__ */ s(
           "svg",
           {
@@ -1026,7 +1026,7 @@ const it = L.forwardRef(({
   ] });
 });
 it.displayName = "CheckInput";
-const ot = L.forwardRef(({
+const ot = E.forwardRef(({
   variant: e = "primary",
   size: t = "medium",
   label: a,
@@ -1037,10 +1037,10 @@ const ot = L.forwardRef(({
   className: u = "",
   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 f = d || `input-switch-${Math.random().toString(36).substr(2, 9)}`, p = [
     "clarity-input-switch-wrapper",
     `clarity-input-switch-wrapper--${o}`,
     i && "clarity-input-switch-wrapper--disabled",
@@ -1057,12 +1057,12 @@ const ot = L.forwardRef(({
     `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__ */ b("div", { className: "clarity-input-switch-container", children: [
+    /* @__PURE__ */ b("label", { className: p, htmlFor: f, children: [
       /* @__PURE__ */ s(
         "input",
         {
-          ref: p,
+          ref: m,
           id: f,
           type: "checkbox",
           className: h,
@@ -1090,16 +1090,16 @@ const Te = z(null), de = () => {
 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);
   }
 });
-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) => {
@@ -1108,8 +1108,8 @@ const Se = ({ children: e }) => {
     }
   });
 };
-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) => {
@@ -1118,7 +1118,7 @@ const Oe = ({ children: e }) => {
     }
   });
 };
-Oe.displayName = "ConfirmationDialog.Confirm";
+Se.displayName = "ConfirmationDialog.Confirm";
 const Q = ({
   isOpen: e,
   onClose: t,
@@ -1128,80 +1128,76 @@ const Q = ({
 }) => {
   const [r, o] = T(!1), u = e !== void 0, i = u ? e : r, c = () => {
     u || o(!0);
-  }, m = () => {
+  }, d = () => {
     t ? t() : o(!1);
   }, v = () => {
-    a && a(), m();
+    a && a(), d();
   };
-  O(() => {
+  S(() => {
     const h = (y) => {
-      y.key === "Escape" && m();
+      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";
     };
-  }, [i, m]);
-  const p = L.Children.toArray(n).find(
+  }, [i, d]);
+  const m = E.Children.toArray(n).find(
     (h) => Z(h) && h.type.displayName === "ConfirmationDialog.Trigger"
-  ), f = L.Children.toArray(n).filter(
+  ), f = E.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 }) })
+  ), p = `clarity-confirmation-dialog clarity-confirmation-dialog--${l}`;
+  return /* @__PURE__ */ b(Te.Provider, { value: { variant: l, onClose: d, onConfirm: v, onOpen: c }, children: [
+    m,
+    i && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ s("div", { className: p, children: f }) })
   ] });
 };
 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: l = !1,
+  children: n,
+  onClick: r,
+  type: o = "button",
+  className: u = "",
+  "aria-label": i,
+  title: c,
+  customColor: d,
+  ...v
 }) => {
-  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)})`
+  const m = "clarity-button-icon", f = [
+    m,
+    !d && `${m}--${e}`,
+    `${m}--${t}`,
+    l && `${m}--loading`,
+    a && `${m}--disabled`,
+    u
+  ].filter(Boolean).join(" "), p = d ? {
+    "--button-icon-bg": d,
+    "--button-icon-hover-bg": `${d}E6`
+    // Add some transparency for hover
   } : {};
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ b(
     "button",
     {
-      className: N,
-      style: B,
-      disabled: r || o,
-      onClick: i,
-      type: c,
-      "aria-label": v,
-      title: p,
-      ...f,
+      className: f,
+      disabled: a || l,
+      onClick: r,
+      type: o,
+      "aria-label": i,
+      title: c,
+      style: p,
+      ...v,
       children: [
-        o && /* @__PURE__ */ s("div", { className: `${d}__spinner` }),
-        !o && u
+        l && /* @__PURE__ */ s("div", { className: `${m}__spinner` }),
+        !l && n
       ]
     }
   );
@@ -1216,11 +1212,11 @@ const Tt = ({
   onClick: u,
   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 = [
+  const f = "clarity-button-link", p = t && a, h = p ? `${f}--custom` : `${f}--${e}`, y = [
     f,
     h,
     `${f}--${n}`,
@@ -1229,7 +1225,7 @@ const Tt = ({
   ].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 ? {
+  }, _ = p ? {
     "--custom-color": `var(--clarity-${t}-${a})`,
     "--custom-hover-color": `var(--clarity-${t}-${l || N(a)})`
   } : {};
@@ -1238,21 +1234,21 @@ const Tt = ({
     {
       href: i,
       target: c,
-      rel: m || (c === "_blank" ? "noopener noreferrer" : void 0),
+      rel: d || (c === "_blank" ? "noopener noreferrer" : void 0),
       className: y,
-      style: b,
+      style: _,
       onClick: r ? void 0 : u,
-      ...p,
+      ...m,
       children: o
     }
   ) : /* @__PURE__ */ s(
     "button",
     {
       className: y,
-      style: b,
+      style: _,
       disabled: r,
       onClick: u,
-      ...p,
+      ...m,
       children: o
     }
   );
@@ -1272,23 +1268,23 @@ const Tt = ({
   className: u = "",
   children: i,
   onSelect: c,
-  ...m
+  ...d
 }) => {
-  const [v, p] = T(() => n ? Array.isArray(n) ? n : [n] : []), f = (_) => {
+  const [v, m] = T(() => n ? Array.isArray(n) ? n : [n] : []), f = (w) => {
     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(w) ? v.filter((L) => L !== w) : [...v, w] : k = v.includes(w) ? [] : [w], m(k), c && c(v.includes(w) ? null : w, {});
+  }, p = "clarity-accordion", h = t && a, y = h ? `${p}--custom` : `${p}--${e}`, N = [
+    p,
     y,
-    o && `${d}--flush`,
+    o && `${p}--flush`,
     u
-  ].filter(Boolean).join(" "), b = (_) => {
-    const k = parseInt(_);
+  ].filter(Boolean).join(" "), _ = (w) => {
+    const k = parseInt(w);
     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 ? {
     "--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}-${l || _(a)})`
   } : {}, $ = {
     activeKeys: v,
     toggleItem: f,
@@ -1299,7 +1295,7 @@ const Tt = ({
     hoverTone: l,
     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: $, children: /* @__PURE__ */ s("div", { className: N, style: B, ...d, children: i }) });
 }, dt = ({
   eventKey: e,
   disabled: t = !1,
@@ -1313,7 +1309,7 @@ const Tt = ({
     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, ...n, children: E.Children.map(l, (c) => E.isValidElement(c) ? E.cloneElement(c, {
     ...c.props,
     eventKey: e,
     disabled: t,
@@ -1328,10 +1324,10 @@ const Tt = ({
   isActive: r = !1,
   ...o
 }) => {
-  const { toggleItem: u } = De(), i = "clarity-accordion", c = (m) => {
-    !n && l && u(l), a == null || a(m);
+  const { toggleItem: u } = De(), i = "clarity-accordion", c = (d) => {
+    !n && l && u(l), a == null || a(d);
   };
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ b(
     "button",
     {
       className: [`${i}__header`, e].filter(Boolean).join(" "),
@@ -1406,35 +1402,35 @@ const Tt = ({
   const [l, n] = T(!1), [r, o] = T({}), u = 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;
+      const d = i.current, v = c.current;
+      if (!d || !v) return;
+      const m = d.getBoundingClientRect(), f = v.getBoundingClientRect(), p = window.innerHeight, h = window.innerWidth;
       let y = t;
-      t === "bottom" && p.bottom + f.height > d && (y = "top"), t === "top" && p.top - f.height < 0 && (y = "bottom"), t === "right" && p.right + f.width > h && (y = "left"), t === "left" && p.left - f.width < 0 && (y = "right");
+      t === "bottom" && m.bottom + f.height > p && (y = "top"), t === "top" && m.top - f.height < 0 && (y = "bottom"), t === "right" && m.right + f.width > h && (y = "left"), t === "left" && m.left - f.width < 0 && (y = "right");
       const N = {};
       switch (y) {
         case "top":
-          N.bottom = p.height + 4, N.left = p.width / 2 - f.width / 2;
+          N.bottom = m.height + 4, N.left = m.width / 2 - f.width / 2;
           break;
         case "right":
-          N.left = p.width + 4, N.top = p.height / 2 - f.height / 2;
+          N.left = m.width + 4, N.top = m.height / 2 - f.height / 2;
           break;
         case "left":
-          N.right = p.width + 4, N.top = p.height / 2 - f.height / 2;
+          N.right = m.width + 4, N.top = m.height / 2 - f.height / 2;
           break;
         case "bottom":
         default:
-          N.top = p.height + 4, N.left = p.width / 2 - f.width / 2;
+          N.top = m.height + 4, N.left = m.width / 2 - f.width / 2;
           break;
       }
       o(N);
     }
-  }, [l, t]), O(() => {
-    const m = (v) => {
+  }, [l, t]), S(() => {
+    const d = (v) => {
       u.current && !u.current.contains(v.target) && n(!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(
     "div",
@@ -1506,7 +1502,7 @@ const me = ({
 me.Tab = He;
 me.Content = Me;
 me.displayName = "Tabs";
-const Lt = ({
+const Et = ({
   content: e,
   position: t = "top",
   variant: a = "primary",
@@ -1517,41 +1513,41 @@ const Lt = ({
   children: u,
   className: i = "",
   disabled: c = !1,
-  delay: m = 200,
+  delay: d = 200,
   hideDelay: v = 100,
-  trigger: p = "hover",
+  trigger: m = "hover",
   arrow: f = !0,
-  ...d
+  ...p
 }) => {
-  const [h, y] = T(!1), [N, b] = T(null), B = P(null), $ = P(null), _ = "clarity-tooltip", k = !!r, E = l && n && !k;
+  const [h, y] = T(!1), [N, _] = T(null), B = P(null), $ = P(null), w = "clarity-tooltip", k = !!r, L = l && n && !k;
   let x = "";
-  k ? x = `${_}__content--custom-bg` : E ? x = `${_}__content--custom` : x = `${_}__content--${a}`;
+  k ? x = `${w}__content--custom-bg` : L ? x = `${w}__content--custom` : x = `${w}__content--${a}`;
   const j = [
-    _,
-    `${_}--${t}`,
+    w,
+    `${w}--${t}`,
     i
   ].filter(Boolean).join(" "), I = [
-    `${_}__content`,
+    `${w}__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);
+    f && `${w}__content--arrow`
+  ].filter(Boolean).join(" "), A = {}, O = {};
+  k && r && (O["--tooltip-bg-color"] = r), o && (O["--tooltip-text-color"] = o), L && l && n && (O["--tooltip-product"] = l, O["--tooltip-tone"] = n);
   const g = {
     ...A,
-    ...Object.keys(S).length > 0 ? S : {}
+    ...Object.keys(O).length > 0 ? O : {}
   }, M = () => {
     if (c) return;
     N && clearTimeout(N);
     const H = setTimeout(() => {
       y(!0);
-    }, m);
-    b(H);
+    }, d);
+    _(H);
   }, V = () => {
     N && clearTimeout(N);
     const H = setTimeout(() => {
       y(!1);
     }, v);
-    b(H);
+    _(H);
   }, F = () => {
     c || y(!h);
   }, X = () => {
@@ -1559,17 +1555,17 @@ const Lt = ({
   }, te = () => {
     V();
   };
-  O(() => () => {
+  S(() => () => {
     N && clearTimeout(N);
   }, [N]);
   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 = M, G.onMouseLeave = V) : m === "click" ? G.onClick = F : m === "focus" && (G.onFocus = X, G.onBlur = te), /* @__PURE__ */ b(
     "div",
     {
       ref: $,
-      className: `${_}__trigger`,
+      className: `${w}__trigger`,
       ...G,
-      ...d,
+      ...p,
       children: [
         u,
         h && /* @__PURE__ */ s(
@@ -1599,7 +1595,7 @@ const Lt = ({
   inputPlaceholder: n = "Search...",
   ...r
 }) => {
-  const [o, u] = T(""), [i, c] = T(null), [m, v] = T(!1), p = [
+  const [o, u] = T(""), [i, c] = T(null), [d, v] = T(!1), m = [
     "clarity-command",
     `clarity-command--${a}`,
     t
@@ -1613,26 +1609,26 @@ const Lt = ({
       empty: l,
       inputPlaceholder: n
     },
-    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, l, n, d]);
+  return /* @__PURE__ */ s(We.Provider, { value: f, 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(() => {
+  S(() => {
     o(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
   }, []);
   const i = [
     "clarity-command-button",
     `clarity-command-button--${t || n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ w("button", { className: i, onClick: (m) => {
-    l(!0), a == null || a(m);
+  return /* @__PURE__ */ b("button", { className: i, onClick: (d) => {
+    l(!0), a == null || a(d);
   }, children: [
     /* @__PURE__ */ s("span", { children: e }),
-    /* @__PURE__ */ w("kbd", { className: "clarity-command-shortcut", children: [
+    /* @__PURE__ */ b("kbd", { className: "clarity-command-shortcut", children: [
       r ? "⌘" : "Ctrl+",
       "K"
     ] })
@@ -1641,7 +1637,7 @@ 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(() => {
+  return S(() => {
     const r = (o) => {
       o.key === "k" && (o.metaKey || o.ctrlKey) && (o.preventDefault(), l(!a));
     };
@@ -1651,7 +1647,7 @@ const Ue = ({ children: e, ...t }) => {
 Ue.displayName = "Command.Dialog";
 const ze = ({ className: e = "", ...t }) => {
   const { searchTerm: a, setSearchTerm: l, variant: n, texts: r, isOpen: o } = ee(), u = P(null);
-  O(() => {
+  S(() => {
     var c;
     o && ((c = u.current) == null || c.focus());
   }, [o]);
@@ -1676,21 +1672,21 @@ 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 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")
+    if (d === "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.Group") {
+      const m = r(c.props.children);
+      return E.Children.toArray(m).some((p) => E.isValidElement(p) && p.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: [
+  return /* @__PURE__ */ b("div", { className: u, ...a, children: [
     o,
     !n && /* @__PURE__ */ s(ue, {})
   ] });
@@ -1721,7 +1717,7 @@ const Ye = ({ children: e, className: t = "", ...a }) => {
   return /* @__PURE__ */ s("span", { className: l, ...a, children: e });
 };
 Ye.displayName = "Command.Shortcut";
-const Et = Object.assign(Fe, {
+const Lt = Object.assign(Fe, {
   Button: Ge,
   Dialog: Ue,
   Input: ze,
@@ -1733,14 +1729,14 @@ const Et = Object.assign(Fe, {
   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: [
+  return t === "card" ? /* @__PURE__ */ b("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("div", { className: "table-wrapper is-loading", children: /* @__PURE__ */ b("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)) })
   ] }) });
-}, St = ({
+}, Ot = ({
   variant: e = "secondary",
   columns: t,
   data: a,
@@ -1748,47 +1744,47 @@ const Et = Object.assign(Fe, {
   isScrollable: n = !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];
+  const [o, u] = T(null), [i, c] = T("none"), d = (p) => {
+    p.sortable && (o === p.key ? c((h) => h === "asc" ? "desc" : h === "desc" ? "none" : "asc") : (u(p.key), c("asc")));
+  }, v = Y(() => i === "none" || !o ? a : [...a].sort((p, h) => {
+    const y = p[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;
+  }), [a, o, i]), m = (p) => p.sortable ? o !== p.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 l === "card" ? /* @__PURE__ */ b("div", { className: `card-view-wrapper ${f}`, children: [
+    /* @__PURE__ */ s("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((p) => /* @__PURE__ */ b(
       "div",
       {
-        className: `card-view-header-cell ${d.sortable ? "sortable" : ""}`,
-        onClick: () => m(d),
-        style: { minWidth: d.minWidth },
+        className: `card-view-header-cell ${p.sortable ? "sortable" : ""}`,
+        onClick: () => d(p),
+        style: { minWidth: p.minWidth },
         children: [
-          d.header,
-          p(d)
+          p.header,
+          m(p)
         ]
       },
-      d.key
+      p.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((p, 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(p) : p[y.key] }, y.key)) }, h)) })
+  ] }) : /* @__PURE__ */ s("div", { className: `table-wrapper ${f}`, children: /* @__PURE__ */ b("table", { children: [
+    /* @__PURE__ */ s("thead", { className: "table-header", children: /* @__PURE__ */ s("tr", { className: "table-row", children: t.map((p) => /* @__PURE__ */ b(
       "th",
       {
-        className: `table-header-cell ${d.sortable ? "sortable" : ""} table-header-cell-${e}`,
-        onClick: () => m(d),
-        style: { minWidth: d.minWidth },
+        className: `table-header-cell ${p.sortable ? "sortable" : ""} table-header-cell-${e}`,
+        onClick: () => d(p),
+        style: { minWidth: p.minWidth },
         children: [
-          d.header,
-          p(d)
+          p.header,
+          m(p)
         ]
       },
-      d.key
+      p.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((p, 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(p) : p[y.key] }, y.key)) }, h)) })
   ] }) });
-}, Ot = ({
+}, St = ({
   variant: e = "primary",
   product: t,
   tone: a,
@@ -1798,7 +1794,7 @@ const Et = Object.assign(Fe, {
   "aria-label": o = "Carregando...",
   ...u
 }) => {
-  const i = "clarity-spinner", v = n ? `${i}--custom` : t && a ? `${i}--custom` : `${i}--${e}`, p = [
+  const i = "clarity-spinner", v = n ? `${i}--custom` : t && a ? `${i}--custom` : `${i}--${e}`, m = [
     i,
     `${i}--${l}`,
     v,
@@ -1807,7 +1803,7 @@ const Et = Object.assign(Fe, {
   return n ? f["--spinner-color"] = n : t && a && (f["--spinner-color"] = `var(--clarity-${t}-${a})`), /* @__PURE__ */ s(
     "div",
     {
-      className: p,
+      className: m,
       style: f,
       role: "status",
       "aria-label": o,
@@ -1914,12 +1910,12 @@ 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,
@@ -1928,12 +1924,12 @@ export {
   nt as MultiSelect,
   K as Offcanvas,
   lt as Select,
-  Ot as Spinner,
-  St as Table,
+  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,