beth-clarity 1.1.8 → 1.1.9

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

@@ -1,10 +1,10 @@
-import { jsx as s, jsxs as _, Fragment as Ze } from "react/jsx-runtime";
+import { jsx as a, jsxs as _, Fragment as Ze } from "react/jsx-runtime";
 import L, { useState as T, useRef as A, useEffect as O, forwardRef as Ke, isValidElement as Z, createContext as z, cloneElement as W, useContext as q, useMemo as Y, useCallback as ne, useLayoutEffect as et } from "react";
 import tt from "react-dom";
 const wt = ({
   variant: e = "primary",
   product: t,
-  tone: a,
+  tone: s,
   size: l = "medium",
   bgColor: n,
   textColor: r,
@@ -14,7 +14,7 @@ const wt = ({
   outlined: c = !1,
   ...p
 }) => {
-  const y = "clarity-badge", f = !!n, m = t && a && !f;
+  const y = "clarity-badge", f = !!n, m = t && s && !f;
   let d = "";
   f ? d = `${y}--custom-bg` : m ? d = `${y}--custom` : d = `${y}--${e}`;
   const C = [
@@ -26,11 +26,11 @@ const wt = ({
     u
   ].filter(Boolean).join(" "), h = {};
   f && (h.backgroundColor = n, r && (h.color = r));
-  const N = m && t && a ? {
-    "--custom-bg-color": `var(--clarity-${t}-${a})`,
-    "--custom-text-color": a && parseInt(a) >= 500 ? "white" : `var(--clarity-${t}-800)`
+  const N = m && t && s ? {
+    "--custom-bg-color": `var(--clarity-${t}-${s})`,
+    "--custom-text-color": s && parseInt(s) >= 500 ? "white" : `var(--clarity-${t}-800)`
   } : {};
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ a(
     "span",
     {
       className: C,
@@ -45,7 +45,7 @@ const wt = ({
 }, gt = ({
   variant: e = "primary",
   product: t,
-  tone: a,
+  tone: s,
   hoverTone: l,
   size: n = "medium",
   disabled: r = !1,
@@ -57,7 +57,7 @@ const wt = ({
   title: y,
   ...f
 }) => {
-  const m = "clarity-button", d = t && a, C = d ? `${m}--custom` : `${m}--${e}`, h = [
+  const m = "clarity-button", d = t && s, C = d ? `${m}--custom` : `${m}--${e}`, h = [
     m,
     C,
     `${m}--${n}`,
@@ -68,8 +68,8 @@ const wt = ({
     const g = parseInt(B);
     return g >= 800 ? "900" : g >= 700 ? "800" : g >= 600 ? "700" : g >= 500 ? "600" : g >= 400 ? "500" : g >= 300 ? "400" : g >= 200 ? "300" : "200";
   }, w = d ? {
-    "--custom-bg-color": `var(--clarity-${t}-${a})`,
-    "--custom-hover-color": `var(--clarity-${t}-${l || N(a)})`
+    "--custom-bg-color": `var(--clarity-${t}-${s})`,
+    "--custom-hover-color": `var(--clarity-${t}-${l || N(s)})`
   } : {};
   return /* @__PURE__ */ _(
     "button",
@@ -82,7 +82,7 @@ const wt = ({
       title: y,
       ...f,
       children: [
-        o && /* @__PURE__ */ s("div", { className: `${m}__spinner` }),
+        o && /* @__PURE__ */ a("div", { className: `${m}__spinner` }),
         u
       ]
     }
@@ -90,7 +90,7 @@ const wt = ({
 }, st = L.forwardRef(({
   variant: e,
   size: t = "medium",
-  label: a,
+  label: s,
   helperText: l,
   error: n = !1,
   errorMessage: r,
@@ -128,9 +128,9 @@ const wt = ({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("div", { className: "clarity-input-wrapper", children: [
     /* @__PURE__ */ _("div", { className: E, children: [
-      o && /* @__PURE__ */ s("div", { className: "clarity-input__start-icon", children: o }),
+      o && /* @__PURE__ */ a("div", { className: "clarity-input__start-icon", children: o }),
       /* @__PURE__ */ _("div", { className: "clarity-input__field", children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ a(
           "input",
           {
             ref: g,
@@ -143,18 +143,18 @@ const wt = ({
             ...d
           }
         ),
-        a && /* @__PURE__ */ s("label", { className: "clarity-input__label", children: a })
+        s && /* @__PURE__ */ a("label", { className: "clarity-input__label", children: s })
       ] }),
-      u && /* @__PURE__ */ s("div", { className: "clarity-input__end-icon", children: u })
+      u && /* @__PURE__ */ a("div", { className: "clarity-input__end-icon", children: u })
     ] }),
-    (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-input__helper-text", children: n && r ? r : l })
+    (l || n && r) && /* @__PURE__ */ a("div", { className: "clarity-input__helper-text", children: n && r ? r : l })
   ] });
 });
 st.displayName = "Input";
 const at = L.forwardRef(({
   variant: e,
   size: t = "medium",
-  label: a,
+  label: s,
   helperText: l,
   error: n = !1,
   errorMessage: r,
@@ -200,9 +200,9 @@ const at = L.forwardRef(({
   };
   return /* @__PURE__ */ _("div", { className: "clarity-textarea-wrapper", children: [
     /* @__PURE__ */ _("div", { className: P, children: [
-      o && /* @__PURE__ */ s("div", { className: "clarity-textarea__start-icon", children: o }),
+      o && /* @__PURE__ */ a("div", { className: "clarity-textarea__start-icon", children: o }),
       /* @__PURE__ */ _("div", { className: "clarity-textarea__field", children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ a(
           "textarea",
           {
             ref: x,
@@ -217,18 +217,18 @@ const at = L.forwardRef(({
             ...w
           }
         ),
-        a && /* @__PURE__ */ s("label", { className: "clarity-textarea__label", children: a })
+        s && /* @__PURE__ */ a("label", { className: "clarity-textarea__label", children: s })
       ] }),
-      u && /* @__PURE__ */ s("div", { className: "clarity-textarea__end-icon", children: u })
+      u && /* @__PURE__ */ a("div", { className: "clarity-textarea__end-icon", children: u })
     ] }),
-    (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-textarea__helper-text", children: n && r ? r : l })
+    (l || n && r) && /* @__PURE__ */ a("div", { className: "clarity-textarea__helper-text", children: n && r ? r : l })
   ] });
 });
 at.displayName = "Textarea";
 const lt = L.forwardRef(({
   variant: e,
   size: t = "medium",
-  label: a,
+  label: s,
   helperText: l,
   error: n = !1,
   errorMessage: r,
@@ -299,9 +299,9 @@ const lt = L.forwardRef(({
         tabIndex: c || w ? -1 : 0,
         ...B,
         children: [
-          o && /* @__PURE__ */ s("div", { className: "clarity-select__start-icon", children: o }),
+          o && /* @__PURE__ */ a("div", { className: "clarity-select__start-icon", children: o }),
           /* @__PURE__ */ _("div", { className: "clarity-select__field", children: [
-            w ? /* @__PURE__ */ s(
+            w ? /* @__PURE__ */ a(
               "input",
               {
                 ref: M,
@@ -317,24 +317,24 @@ const lt = L.forwardRef(({
                 disabled: c,
                 readOnly: !b
               }
-            ) : /* @__PURE__ */ s("div", { className: "clarity-select__display", children: H ? H.label : h }),
-            a && /* @__PURE__ */ s("label", { className: "clarity-select__label", children: a })
+            ) : /* @__PURE__ */ a("div", { className: "clarity-select__display", children: H ? H.label : h }),
+            s && /* @__PURE__ */ a("label", { className: "clarity-select__label", children: s })
           ] }),
-          N && le && /* @__PURE__ */ s(
+          N && le && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
               className: "clarity-select__clear-button",
               onClick: re,
               "aria-label": "Limpar seleção",
-              children: /* @__PURE__ */ s(
+              children: /* @__PURE__ */ a(
                 "svg",
                 {
                   width: "16",
                   height: "16",
                   viewBox: "0 0 16 16",
                   fill: "none",
-                  children: /* @__PURE__ */ s(
+                  children: /* @__PURE__ */ a(
                     "path",
                     {
                       d: "M12 4L4 12M4 4L12 12",
@@ -348,12 +348,12 @@ const lt = L.forwardRef(({
               )
             }
           ),
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ a(
             "div",
             {
               className: "clarity-select__end-icon",
               onClick: w ? F : void 0,
-              children: u || /* @__PURE__ */ s(
+              children: u || /* @__PURE__ */ a(
                 "svg",
                 {
                   className: "clarity-select__arrow",
@@ -361,7 +361,7 @@ const lt = L.forwardRef(({
                   height: "16",
                   viewBox: "0 0 16 16",
                   fill: "none",
-                  children: /* @__PURE__ */ s(
+                  children: /* @__PURE__ */ a(
                     "path",
                     {
                       d: "M4 6L8 10L12 6",
@@ -375,7 +375,7 @@ const lt = L.forwardRef(({
               )
             }
           ),
-          b && /* @__PURE__ */ s("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ s("ul", { className: "clarity-select__options", role: "listbox", children: V.length > 0 ? V.map((v) => /* @__PURE__ */ s(
+          b && /* @__PURE__ */ a("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ a("ul", { className: "clarity-select__options", role: "listbox", children: V.length > 0 ? V.map((v) => /* @__PURE__ */ a(
             "li",
             {
               className: [
@@ -389,18 +389,18 @@ const lt = L.forwardRef(({
               children: v.label
             },
             v.value
-          )) : /* @__PURE__ */ s("li", { className: "clarity-select__option clarity-select__option--no-results", children: "Nenhum resultado encontrado" }) }) })
+          )) : /* @__PURE__ */ a("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 })
+    (l || n && r) && /* @__PURE__ */ a("div", { className: "clarity-select__helper-text", children: n && r ? r : l })
   ] });
 });
 lt.displayName = "Select";
 const nt = Ke(({
   options: e = [],
   value: t = [],
-  onChange: a,
+  onChange: s,
   placeholder: l = "Selecione opções",
   label: n,
   helperText: r,
@@ -440,13 +440,13 @@ const nt = Ke(({
     D && (D.stopPropagation(), D.preventDefault());
     const U = t.includes(v);
     let R;
-    U ? R = t.filter((se) => se !== v) : R = [...t, v], a && a(R);
+    U ? R = t.filter((se) => se !== v) : R = [...t, v], s && s(R);
   }, X = (v, D) => {
     if (D.stopPropagation(), i) return;
     const U = t.filter((R) => R !== v);
-    a == null || a(U);
+    s == null || s(U);
   }, te = (v) => {
-    v.stopPropagation(), !i && (a == null || a([]));
+    v.stopPropagation(), !i && (s == null || s([]));
   }, G = (v) => {
     E(v.target.value);
   }, H = (v) => {
@@ -458,8 +458,8 @@ const nt = Ke(({
     ).filter(Boolean), D = v.slice(0, y), U = v.length - y;
     return /* @__PURE__ */ _("div", { className: "clarity-multiselect__chips", children: [
       D.map((R) => /* @__PURE__ */ _("div", { className: "clarity-multiselect__chip", children: [
-        /* @__PURE__ */ s("span", { className: "clarity-multiselect__chip-label", children: R.label }),
-        !i && /* @__PURE__ */ s(
+        /* @__PURE__ */ a("span", { className: "clarity-multiselect__chip-label", children: R.label }),
+        !i && /* @__PURE__ */ a(
           "button",
           {
             type: "button",
@@ -507,11 +507,11 @@ const nt = Ke(({
               children: [
                 n && /* @__PURE__ */ _("label", { className: "clarity-multiselect__label", children: [
                   n,
-                  h && /* @__PURE__ */ s("span", { className: "clarity-multiselect__required", children: "*" })
+                  h && /* @__PURE__ */ a("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__ */ a("div", { className: "clarity-multiselect__content", children: t.length > 0 ? re() : /* @__PURE__ */ a("span", { className: "clarity-multiselect__placeholder", children: l }) }),
                 /* @__PURE__ */ _("div", { className: "clarity-multiselect__icons", children: [
-                  t.length > 0 && !i && /* @__PURE__ */ s(
+                  t.length > 0 && !i && /* @__PURE__ */ a(
                     "button",
                     {
                       type: "button",
@@ -521,7 +521,7 @@ const nt = Ke(({
                       children: "×"
                     }
                   ),
-                  /* @__PURE__ */ s("div", { className: "clarity-multiselect__dropdown-icon", children: /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ s(
+                  /* @__PURE__ */ a("div", { className: "clarity-multiselect__dropdown-icon", children: /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ a(
                     "path",
                     {
                       d: "M4 6L8 10L12 6",
@@ -536,7 +536,7 @@ const nt = Ke(({
             }
           ),
           g && /* @__PURE__ */ _("div", { ref: I, className: "clarity-multiselect__dropdown", children: [
-            /* @__PURE__ */ s("div", { className: "clarity-multiselect__search", children: /* @__PURE__ */ s(
+            /* @__PURE__ */ a("div", { className: "clarity-multiselect__search", children: /* @__PURE__ */ a(
               "input",
               {
                 ref: P,
@@ -548,7 +548,7 @@ const nt = Ke(({
                 onKeyDown: H
               }
             ) }),
-            /* @__PURE__ */ s("ul", { className: "clarity-multiselect__options", children: M.length > 0 ? M.map((v) => {
+            /* @__PURE__ */ a("ul", { className: "clarity-multiselect__options", children: M.length > 0 ? M.map((v) => {
               const D = t.includes(v.value), U = v.disabled || i;
               return /* @__PURE__ */ _(
                 "li",
@@ -560,10 +560,10 @@ const nt = Ke(({
                   ].filter(Boolean).join(" "),
                   onClick: (R) => !U && F(v.value, R),
                   children: [
-                    /* @__PURE__ */ s("div", { className: "clarity-multiselect__option-checkbox", children: /* @__PURE__ */ s("div", { className: [
+                    /* @__PURE__ */ a("div", { className: "clarity-multiselect__option-checkbox", children: /* @__PURE__ */ a("div", { className: [
                       "clarity-multiselect__checkbox",
                       D && "clarity-multiselect__checkbox--checked"
-                    ].filter(Boolean).join(" "), children: D && /* @__PURE__ */ s("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ s(
+                    ].filter(Boolean).join(" "), children: D && /* @__PURE__ */ a("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ a(
                       "path",
                       {
                         d: "M2 6L5 9L10 3",
@@ -573,17 +573,17 @@ const nt = Ke(({
                         strokeLinejoin: "round"
                       }
                     ) }) }) }),
-                    /* @__PURE__ */ s("span", { className: "clarity-multiselect__option-label", children: v.label })
+                    /* @__PURE__ */ a("span", { className: "clarity-multiselect__option-label", children: v.label })
                   ]
                 },
                 v.value
               );
-            }) : /* @__PURE__ */ s("li", { className: "clarity-multiselect__option clarity-multiselect__option--no-results", children: "Nenhum resultado encontrado" }) })
+            }) : /* @__PURE__ */ a("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 && u) && /* @__PURE__ */ a("div", { className: "clarity-multiselect__helper", children: o && u ? /* @__PURE__ */ a("span", { className: "clarity-multiselect__error-message", children: u }) : r && /* @__PURE__ */ a("span", { className: "clarity-multiselect__helper-text", children: r }) })
   ] });
 });
 nt.displayName = "MultiSelect";
@@ -595,7 +595,7 @@ const fe = z(null), pe = () => {
 }, he = ({
   children: e,
   className: t = "",
-  title: a
+  title: s
 }) => {
   const { onClose: l, variant: n, showCloseButton: r } = pe(), o = [
     "clarity-modal-header",
@@ -606,35 +606,35 @@ const fe = z(null), pe = () => {
     n && `clarity-modal-close--${n}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("div", { className: o, children: [
-    a && /* @__PURE__ */ s("h2", { className: "clarity-modal-title", children: a }),
+    s && /* @__PURE__ */ a("h2", { className: "clarity-modal-title", children: s }),
     e,
-    r && /* @__PURE__ */ s("button", { className: u, onClick: (i) => {
+    r && /* @__PURE__ */ a("button", { className: u, onClick: (i) => {
       i.stopPropagation(), l();
     }, children: "×" })
   ] });
 };
 he.displayName = "Modal.Header";
-const ye = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-modal-content ${t}`, children: e });
+const ye = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-modal-content ${t}`, children: e });
 ye.displayName = "Modal.Content";
 const ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ _("div", { className: `clarity-modal-footer ${t}`, children: [
-  /* @__PURE__ */ s("div", { className: "clarity-modal-scroll-indicator" }),
+  /* @__PURE__ */ a("div", { className: "clarity-modal-scroll-indicator" }),
   e
 ] });
 ve.displayName = "Modal.Footer";
-const Ce = ({ children: e, onClick: t, variant: a }) => W(e, {
+const Ce = ({ children: e, onClick: t, variant: s }) => W(e, {
   onClick: (l) => {
     var n, r;
     t == null || t(), (r = (n = e.props).onClick) == null || r.call(n, l);
   },
-  variant: a
+  variant: s
 });
 Ce.displayName = "Modal.Trigger";
 const Ne = ({ children: e }) => {
   const { onClose: t } = pe();
   return W(e, {
-    onClick: (a) => {
+    onClick: (s) => {
       var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, a);
+      t(), (n = (l = e.props).onClick) == null || n.call(l, s);
     }
   });
 };
@@ -642,7 +642,7 @@ Ne.displayName = "Modal.Close";
 const J = ({
   isOpen: e,
   onClose: t,
-  onOpen: a,
+  onOpen: s,
   children: l,
   className: n = "",
   variant: r,
@@ -654,8 +654,8 @@ const J = ({
     p(!1);
   });
   O(() => {
-    f && (a == null || a());
-  }, [f, a]), O(() => {
+    f && (s == null || s());
+  }, [f, s]), O(() => {
     const w = (B) => {
       B.key === "Escape" && m();
     };
@@ -672,7 +672,7 @@ const J = ({
   ), N = ["clarity-modal", n, `clarity-modal--${o}`].filter(Boolean).join(" ");
   return /* @__PURE__ */ _(fe.Provider, { value: { onClose: m, variant: r, showCloseButton: u }, children: [
     C && W(C, { onClick: () => p(!0), variant: r }),
-    f && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", onClick: d, children: /* @__PURE__ */ s("div", { className: N, children: h }) })
+    f && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", onClick: d, children: /* @__PURE__ */ a("div", { className: N, children: h }) })
   ] });
 };
 J.Header = he;
@@ -686,7 +686,7 @@ const be = z(void 0), $t = () => {
   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 }) => {
+}, rt = ({ id: e, message: t, variant: s, duration: l, onClose: n, invertColors: r }) => {
   const [o, u] = T("entering");
   O(() => {
     const c = setTimeout(() => {
@@ -702,14 +702,14 @@ const be = z(void 0), $t = () => {
   }, [e, l, n]);
   const i = [
     "cl-toast",
-    a,
+    s,
     r ? "colored-background" : "",
     `cl-toast-${o}`
   ].filter(Boolean).join(" ");
   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(
+    /* @__PURE__ */ a("div", { className: "cl-toast-message", children: t }),
+    /* @__PURE__ */ a("button", { onClick: () => u("exiting"), className: "cl-toast-close-button", children: "×" }),
+    /* @__PURE__ */ a(
       "div",
       {
         className: "cl-toast-progress-bar",
@@ -718,7 +718,7 @@ const be = z(void 0), $t = () => {
     )
   ] });
 }, kt = ({ children: e }) => {
-  const [t, a] = T([]), l = Y(() => {
+  const [t, s] = T([]), l = Y(() => {
     if (typeof document < "u") {
       const i = document.createElement("div");
       return i.id = "toast-portal-root", i;
@@ -738,17 +738,17 @@ const be = z(void 0), $t = () => {
       // position: 'right-top',
       ...i
     };
-    a((y) => {
+    s((y) => {
       const f = [p, ...y];
       return f.length > 4 ? f.slice(0, 4) : f;
     });
   }, []), r = ne((i) => {
-    a((c) => c.filter((p) => p.id !== i));
+    s((c) => c.filter((p) => p.id !== i));
   }, []), o = Y(() => t.reduce((i, c) => (i[c.position] || (i[c.position] = []), i[c.position].push(c), i), {}), [t]), u = Y(() => ({ show: n }), [n]);
   return /* @__PURE__ */ _(be.Provider, { value: u, children: [
     e,
     l && tt.createPortal(
-      Object.entries(o).map(([i, c]) => /* @__PURE__ */ s("div", { className: `cl-toast-container ${i}`, children: c.map((p) => /* @__PURE__ */ s(rt, { ...p, onClose: r }, p.id)) }, i)),
+      Object.entries(o).map(([i, c]) => /* @__PURE__ */ a("div", { className: `cl-toast-container ${i}`, children: c.map((p) => /* @__PURE__ */ a(rt, { ...p, onClose: r }, p.id)) }, i)),
       l
     )
   ] });
@@ -761,7 +761,7 @@ const be = z(void 0), $t = () => {
   children: e,
   className: t = ""
 }) => {
-  const { onClose: a, variant: l, showCloseButton: n, title: r } = we(), o = [
+  const { onClose: s, variant: l, showCloseButton: n, title: r } = we(), o = [
     "clarity-offcanvas-header",
     t
   ].filter(Boolean).join(" "), u = [
@@ -772,32 +772,32 @@ const be = z(void 0), $t = () => {
     l && `clarity-offcanvas-title--${l}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("div", { className: o, children: [
-    r && /* @__PURE__ */ s("h2", { className: i, children: r }),
+    r && /* @__PURE__ */ a("h2", { className: i, children: r }),
     e,
-    n && /* @__PURE__ */ s("button", { className: u, onClick: (c) => {
-      c.stopPropagation(), a();
+    n && /* @__PURE__ */ a("button", { className: u, onClick: (c) => {
+      c.stopPropagation(), s();
     }, children: "×" })
   ] });
 };
 ge.displayName = "Offcanvas.Header";
-const $e = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-offcanvas-content ${t}`, children: e });
+const $e = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-offcanvas-content ${t}`, children: e });
 $e.displayName = "Offcanvas.Content";
-const ke = ({ children: e, onClick: t, variant: a }) => W(e, {
+const ke = ({ children: e, onClick: t, variant: s }) => W(e, {
   onClick: (l) => {
     var n, r;
     t == null || t(), (r = (n = e.props).onClick) == null || r.call(n, l);
   },
-  variant: a
+  variant: s
 });
 ke.displayName = "Offcanvas.Trigger";
-const ce = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-offcanvas-footer ${t}`, children: e });
+const ce = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-offcanvas-footer ${t}`, children: e });
 ce.displayName = "Offcanvas.Footer";
 const xe = ({ children: e }) => {
   const { onClose: t } = we();
   return W(e, {
-    onClick: (a) => {
+    onClick: (s) => {
       var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, a);
+      t(), (n = (l = e.props).onClick) == null || n.call(l, s);
     }
   });
 };
@@ -805,7 +805,7 @@ xe.displayName = "Offcanvas.Close";
 const K = ({
   isOpen: e,
   onClose: t,
-  onOpen: a,
+  onOpen: s,
   children: l,
   className: n = "",
   variant: r,
@@ -817,8 +817,8 @@ const K = ({
   const [p, y] = T(!1), [f, m] = T(!1), [d, C] = T(!1), h = e !== void 0, N = h ? e : p, w = ne(() => {
     t ? t() : y(!1);
   }, [t]), B = ne(() => {
-    h || y(!0), a == null || a();
-  }, [h, a]);
+    h || y(!0), s == null || s();
+  }, [h, s]);
   O(() => {
     if (N) {
       C(!0);
@@ -861,7 +861,7 @@ const K = ({
       j.props.children,
       S
     ] })
-  }) : j = /* @__PURE__ */ s(ce, { children: S }));
+  }) : j = /* @__PURE__ */ a(ce, { children: S }));
   const P = [
     "clarity-offcanvas",
     n,
@@ -875,10 +875,10 @@ const K = ({
   return /* @__PURE__ */ _(_e.Provider, { value: { onClose: w, variant: r, showCloseButton: i, placement: o, title: c }, children: [
     k && W(k, { onClick: B, variant: r }),
     d && // Only render if shouldRender is true
-    /* @__PURE__ */ s("div", { className: I, onClick: g, children: /* @__PURE__ */ _("div", { className: P, children: [
+    /* @__PURE__ */ a("div", { className: I, onClick: g, children: /* @__PURE__ */ _("div", { className: P, children: [
       E,
       x,
-      j && /* @__PURE__ */ s("div", { className: "clarity-offcanvas-scroll-indicator" }),
+      j && /* @__PURE__ */ a("div", { className: "clarity-offcanvas-scroll-indicator" }),
       " ",
       j
     ] }) })
@@ -893,7 +893,7 @@ K.displayName = "Offcanvas";
 const it = L.forwardRef(({
   type: e,
   variant: t = "primary",
-  size: a = "medium",
+  size: s = "medium",
   label: l,
   helperText: n,
   error: r = !1,
@@ -913,19 +913,19 @@ const it = L.forwardRef(({
   ].filter(Boolean).join(" "), h = [
     "clarity-check-input",
     `clarity-check-input--${e}`,
-    `clarity-check-input--${a}`,
+    `clarity-check-input--${s}`,
     t && `clarity-check-input--${t}`,
     r && "clarity-check-input--error",
     c && "clarity-check-input--disabled",
     i
   ].filter(Boolean).join(" "), N = [
     "clarity-check-input__label",
-    `clarity-check-input__label--${a}`,
+    `clarity-check-input__label--${s}`,
     c && "clarity-check-input__label--disabled"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("div", { className: "clarity-check-input-container", children: [
     /* @__PURE__ */ _("label", { className: C, htmlFor: d, children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ a(
         "input",
         {
           ref: m,
@@ -938,14 +938,14 @@ const it = L.forwardRef(({
         }
       ),
       /* @__PURE__ */ _("div", { className: "clarity-check-input__custom", children: [
-        e === "checkbox" && /* @__PURE__ */ s(
+        e === "checkbox" && /* @__PURE__ */ a(
           "svg",
           {
             className: "clarity-check-input__icon",
             viewBox: "0 0 16 16",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ s(
+            children: /* @__PURE__ */ a(
               "path",
               {
                 d: "M13.5 4.5L6 12L2.5 8.5",
@@ -957,18 +957,18 @@ const it = L.forwardRef(({
             )
           }
         ),
-        e === "radio" && /* @__PURE__ */ s("div", { className: "clarity-check-input__radio-dot" })
+        e === "radio" && /* @__PURE__ */ a("div", { className: "clarity-check-input__radio-dot" })
       ] }),
-      l && /* @__PURE__ */ s("span", { className: N, children: l })
+      l && /* @__PURE__ */ a("span", { className: N, children: l })
     ] }),
-    (n || r && o) && /* @__PURE__ */ s("div", { className: "clarity-check-input__helper-text", children: r && o ? o : n })
+    (n || r && o) && /* @__PURE__ */ a("div", { className: "clarity-check-input__helper-text", children: r && o ? o : n })
   ] });
 });
 it.displayName = "CheckInput";
 const ot = L.forwardRef(({
   variant: e = "primary",
   size: t = "medium",
-  label: a,
+  label: s,
   helperText: l,
   error: n = !1,
   errorMessage: r,
@@ -998,7 +998,7 @@ const ot = L.forwardRef(({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("div", { className: "clarity-input-switch-container", children: [
     /* @__PURE__ */ _("label", { className: d, htmlFor: m, children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ a(
         "input",
         {
           ref: f,
@@ -1010,10 +1010,10 @@ const ot = L.forwardRef(({
           ...y
         }
       ),
-      /* @__PURE__ */ s("div", { className: "clarity-input-switch__track", children: /* @__PURE__ */ s("div", { className: "clarity-input-switch__thumb" }) }),
-      a && /* @__PURE__ */ s("span", { className: h, children: a })
+      /* @__PURE__ */ a("div", { className: "clarity-input-switch__track", children: /* @__PURE__ */ a("div", { className: "clarity-input-switch__thumb" }) }),
+      s && /* @__PURE__ */ a("span", { className: h, children: s })
     ] }),
-    (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-input-switch__helper-text", children: n && r ? r : l })
+    (l || n && r) && /* @__PURE__ */ a("div", { className: "clarity-input-switch__helper-text", children: n && r ? r : l })
   ] });
 });
 ot.displayName = "InputSwitch";
@@ -1023,27 +1023,27 @@ 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: s } = de(), l = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${s}`;
+  return /* @__PURE__ */ a("div", { className: l, children: e });
 };
 Be.displayName = "ConfirmationDialog.Header";
-const je = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { className: `clarity-confirmation-dialog-content ${t}`, children: e });
+const je = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("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 });
+const Le = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-confirmation-dialog-footer ${t}`, children: e });
 Le.displayName = "ConfirmationDialog.Footer";
 const Ee = ({ children: e }) => W(e, {
   onClick: (t) => {
-    var a, l;
-    (l = (a = e.props).onClick) == null || l.call(a, t);
+    var s, l;
+    (l = (s = e.props).onClick) == null || l.call(s, t);
   }
 });
 Ee.displayName = "ConfirmationDialog.Trigger";
 const Ie = ({ children: e }) => {
   const { onClose: t } = de();
   return W(e, {
-    onClick: (a) => {
+    onClick: (s) => {
       var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, a);
+      t(), (n = (l = e.props).onClick) == null || n.call(l, s);
     }
   });
 };
@@ -1051,9 +1051,9 @@ Ie.displayName = "ConfirmationDialog.Close";
 const Oe = ({ children: e }) => {
   const { onConfirm: t } = de();
   return W(e, {
-    onClick: (a) => {
+    onClick: (s) => {
       var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, a);
+      t(), (n = (l = e.props).onClick) == null || n.call(l, s);
     }
   });
 };
@@ -1061,7 +1061,7 @@ Oe.displayName = "ConfirmationDialog.Confirm";
 const Q = ({
   isOpen: e,
   onClose: t,
-  onConfirm: a,
+  onConfirm: s,
   variant: l = "clarity-primary",
   children: n
 }) => {
@@ -1070,7 +1070,7 @@ const Q = ({
   }, p = () => {
     t ? t() : o(!1);
   }, y = () => {
-    a && a(), p();
+    s && s(), p();
   };
   O(() => {
     const C = (h) => {
@@ -1087,7 +1087,7 @@ const Q = ({
   ), d = `clarity-confirmation-dialog clarity-confirmation-dialog--${l}`;
   return /* @__PURE__ */ _(Te.Provider, { value: { variant: l, onClose: p, onConfirm: y, onOpen: c }, children: [
     f,
-    i && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ s("div", { className: d, children: m }) })
+    i && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ a("div", { className: d, children: m }) })
   ] });
 };
 Q.Header = Be;
@@ -1100,7 +1100,7 @@ Q.displayName = "ConfirmationDialog";
 const xt = ({
   variant: e = "primary",
   product: t,
-  tone: a,
+  tone: s,
   hoverTone: l,
   size: n = "medium",
   disabled: r = !1,
@@ -1113,7 +1113,7 @@ const xt = ({
   title: f,
   ...m
 }) => {
-  const d = "clarity-button-icon", C = t && a, h = C ? `${d}--custom` : `${d}--${e}`, N = [
+  const d = "clarity-button-icon", C = t && s, h = C ? `${d}--custom` : `${d}--${e}`, N = [
     d,
     h,
     `${d}--${n}`,
@@ -1124,8 +1124,8 @@ const xt = ({
     const b = parseInt(g);
     return b >= 800 ? "900" : b >= 700 ? "800" : b >= 600 ? "700" : b >= 500 ? "600" : b >= 400 ? "500" : b >= 300 ? "400" : b >= 200 ? "300" : "200";
   }, B = C ? {
-    "--custom-bg-color": `var(--clarity-${t}-${a})`,
-    "--custom-hover-color": `var(--clarity-${t}-${l || w(a)})`
+    "--custom-bg-color": `var(--clarity-${t}-${s})`,
+    "--custom-hover-color": `var(--clarity-${t}-${l || w(s)})`
   } : {};
   return /* @__PURE__ */ _(
     "button",
@@ -1139,7 +1139,7 @@ const xt = ({
       title: f,
       ...m,
       children: [
-        o && /* @__PURE__ */ s("div", { className: `${d}__spinner` }),
+        o && /* @__PURE__ */ a("div", { className: `${d}__spinner` }),
         !o && u
       ]
     }
@@ -1147,7 +1147,7 @@ const xt = ({
 }, Tt = ({
   variant: e = "primary",
   product: t,
-  tone: a,
+  tone: s,
   hoverTone: l,
   size: n = "medium",
   disabled: r = !1,
@@ -1159,7 +1159,7 @@ const xt = ({
   className: y = "",
   ...f
 }) => {
-  const m = "clarity-button-link", d = t && a, C = d ? `${m}--custom` : `${m}--${e}`, h = [
+  const m = "clarity-button-link", d = t && s, C = d ? `${m}--custom` : `${m}--${e}`, h = [
     m,
     C,
     `${m}--${n}`,
@@ -1169,10 +1169,10 @@ const xt = ({
     const g = parseInt(B);
     return g >= 800 ? "900" : g >= 700 ? "800" : g >= 600 ? "700" : g >= 500 ? "600" : g >= 400 ? "500" : g >= 300 ? "400" : g >= 200 ? "300" : "200";
   }, w = d ? {
-    "--custom-color": `var(--clarity-${t}-${a})`,
-    "--custom-hover-color": `var(--clarity-${t}-${l || N(a)})`
+    "--custom-color": `var(--clarity-${t}-${s})`,
+    "--custom-hover-color": `var(--clarity-${t}-${l || N(s)})`
   } : {};
-  return i ? /* @__PURE__ */ s(
+  return i ? /* @__PURE__ */ a(
     "a",
     {
       href: i,
@@ -1184,7 +1184,7 @@ const xt = ({
       ...f,
       children: o
     }
-  ) : /* @__PURE__ */ s(
+  ) : /* @__PURE__ */ a(
     "button",
     {
       className: h,
@@ -1203,7 +1203,7 @@ const xt = ({
 }, ct = ({
   variant: e = "primary",
   product: t,
-  tone: a,
+  tone: s,
   hoverTone: l,
   defaultActiveKey: n,
   alwaysOpen: r = !1,
@@ -1216,7 +1216,7 @@ const xt = ({
   const [y, f] = T(() => n ? Array.isArray(n) ? n : [n] : []), m = (b) => {
     let k;
     r ? k = y.includes(b) ? y.filter((E) => E !== b) : [...y, b] : k = y.includes(b) ? [] : [b], f(k), c && c(y.includes(b) ? null : b, {});
-  }, d = "clarity-accordion", C = t && a, h = C ? `${d}--custom` : `${d}--${e}`, N = [
+  }, d = "clarity-accordion", C = t && s, h = C ? `${d}--custom` : `${d}--${e}`, N = [
     d,
     h,
     o && `${d}--flush`,
@@ -1225,24 +1225,24 @@ const xt = ({
     const k = parseInt(b);
     return k >= 800 ? "900" : k >= 700 ? "800" : k >= 600 ? "700" : k >= 500 ? "600" : k >= 400 ? "500" : k >= 300 ? "400" : k >= 200 ? "300" : "200";
   }, B = C ? {
-    "--custom-border-color": `var(--clarity-${t}-${a})`,
-    "--custom-header-color": `var(--clarity-${t}-${a})`,
-    "--custom-hover-color": `var(--clarity-${t}-${l || w(a)})`
+    "--custom-border-color": `var(--clarity-${t}-${s})`,
+    "--custom-header-color": `var(--clarity-${t}-${s})`,
+    "--custom-hover-color": `var(--clarity-${t}-${l || w(s)})`
   } : {}, g = {
     activeKeys: y,
     toggleItem: m,
     alwaysOpen: r,
     variant: e,
     product: t,
-    tone: a,
+    tone: s,
     hoverTone: l,
     flush: o
   };
-  return /* @__PURE__ */ s(Se.Provider, { value: g, children: /* @__PURE__ */ s("div", { className: N, style: B, ...p, children: i }) });
+  return /* @__PURE__ */ a(Se.Provider, { value: g, children: /* @__PURE__ */ a("div", { className: N, style: B, ...p, children: i }) });
 }, dt = ({
   eventKey: e,
   disabled: t = !1,
-  className: a = "",
+  className: s = "",
   children: l,
   ...n
 }) => {
@@ -1250,9 +1250,9 @@ const xt = ({
     `${o}__item`,
     u && `${o}__item--active`,
     t && `${o}__item--disabled`,
-    a
+    s
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: i, ...n, children: L.Children.map(l, (c) => L.isValidElement(c) ? L.cloneElement(c, {
+  return /* @__PURE__ */ a("div", { className: i, ...n, children: L.Children.map(l, (c) => L.isValidElement(c) ? L.cloneElement(c, {
     ...c.props,
     eventKey: e,
     disabled: t,
@@ -1261,14 +1261,14 @@ const xt = ({
 }, mt = ({
   className: e = "",
   children: t,
-  onClick: a,
+  onClick: s,
   eventKey: l,
   disabled: n = !1,
   isActive: r = !1,
   ...o
 }) => {
   const { toggleItem: u } = De(), i = "clarity-accordion", c = (p) => {
-    !n && l && u(l), a == null || a(p);
+    !n && l && u(l), s == null || s(p);
   };
   return /* @__PURE__ */ _(
     "button",
@@ -1280,8 +1280,8 @@ const xt = ({
       "aria-controls": l ? `${i}-collapse-${l}` : void 0,
       ...o,
       children: [
-        /* @__PURE__ */ s("span", { className: `${i}__title`, children: t }),
-        /* @__PURE__ */ s("span", { className: `${i}__icon`, children: /* @__PURE__ */ s(
+        /* @__PURE__ */ a("span", { className: `${i}__title`, children: t }),
+        /* @__PURE__ */ a("span", { className: `${i}__icon`, children: /* @__PURE__ */ a(
           "svg",
           {
             width: "16",
@@ -1289,7 +1289,7 @@ const xt = ({
             viewBox: "0 0 16 16",
             fill: "currentColor",
             className: r ? `${i}__icon--rotated` : "",
-            children: /* @__PURE__ */ s("path", { d: "M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z" })
+            children: /* @__PURE__ */ a("path", { d: "M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z" })
           }
         ) })
       ]
@@ -1298,20 +1298,20 @@ const xt = ({
 }, ut = ({
   className: e = "",
   children: t,
-  eventKey: a,
+  eventKey: s,
   isActive: l = !1,
   ...n
 }) => {
   const r = "clarity-accordion";
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ a(
     "div",
     {
-      id: a ? `${r}-collapse-${a}` : void 0,
+      id: s ? `${r}-collapse-${s}` : void 0,
       className: [
         `${r}__collapse`,
         l && `${r}__collapse--show`
       ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ s("div", { className: [`${r}__body`, e].filter(Boolean).join(" "), ...n, children: t })
+      children: /* @__PURE__ */ a("div", { className: [`${r}__body`, e].filter(Boolean).join(" "), ...n, children: t })
     }
   );
 }, Bt = Object.assign(ct, {
@@ -1326,12 +1326,12 @@ const xt = ({
     throw new Error("useDropdown must be used within a DropdownProvider");
   return e;
 }, ft = ({ children: e }) => {
-  const { setIsOpen: t, triggerRef: a } = Pe();
-  return /* @__PURE__ */ s(
+  const { setIsOpen: t, triggerRef: s } = Pe();
+  return /* @__PURE__ */ a(
     "button",
     {
       type: "button",
-      ref: a,
+      ref: s,
       className: "dropdown__trigger",
       onClick: () => t((l) => !l),
       "aria-haspopup": "true",
@@ -1339,9 +1339,9 @@ const xt = ({
     }
   );
 }, pt = ({ children: e }) => {
-  const { isOpen: t, contentRef: a, styles: l } = Pe();
-  return t ? /* @__PURE__ */ s("div", { ref: a, className: "dropdown__content", style: l, children: e }) : null;
-}, ht = ({ children: e }) => /* @__PURE__ */ s("div", { className: "dropdown__menu", children: e }), yt = ({ href: e, children: t }) => /* @__PURE__ */ s("a", { href: e, className: "dropdown__item", children: t }), vt = () => /* @__PURE__ */ s("hr", { className: "dropdown__separator" }), ae = ({ title: e, position: t = "bottom", children: a }) => {
+  const { isOpen: t, contentRef: s, styles: l } = Pe();
+  return t ? /* @__PURE__ */ a("div", { ref: s, className: "dropdown__content", style: l, children: e }) : null;
+}, ht = ({ children: e }) => /* @__PURE__ */ a("div", { className: "dropdown__menu", children: e }), yt = ({ as: e, children: t, ...s }) => /* @__PURE__ */ a(e || "a", { ...s, className: "dropdown__item", children: t }), vt = () => /* @__PURE__ */ a("hr", { className: "dropdown__separator" }), ae = ({ title: e, position: t = "bottom", children: s }) => {
   const [l, n] = T(!1), [r, o] = T({}), u = A(null), i = A(null), c = A(null);
   return et(() => {
     if (l) {
@@ -1375,13 +1375,13 @@ const xt = ({
     return document.addEventListener("mousedown", p), () => {
       document.removeEventListener("mousedown", p);
     };
-  }, []), /* @__PURE__ */ s(Re.Provider, { value: { isOpen: l, setIsOpen: n, triggerRef: i, contentRef: c, styles: r }, children: /* @__PURE__ */ s(
+  }, []), /* @__PURE__ */ a(Re.Provider, { value: { isOpen: l, setIsOpen: n, triggerRef: i, contentRef: c, styles: r }, children: /* @__PURE__ */ a(
     "div",
     {
       ref: u,
       className: "dropdown",
       title: e,
-      children: a
+      children: s
     }
   ) });
 };
@@ -1395,52 +1395,52 @@ const Ae = 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 = "" }) => {
+}, He = ({ id: e, label: t, className: s = "" }) => {
   const { activeTab: l, setActiveTab: n, variant: r, orientation: o } = Ve(), u = l === e, i = [
     "clarity-tab",
-    a,
+    s,
     u ? "active" : "",
     u ? `variant-${r}` : "",
     `orientation-${o}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ a(
     "button",
     {
       className: i,
       onClick: () => n(e),
       role: "tab",
       "aria-selected": u,
-      children: /* @__PURE__ */ s("span", { className: "clarity-tab-label", children: t })
+      children: /* @__PURE__ */ a("span", { className: "clarity-tab-label", children: t })
     }
   );
 };
 He.displayName = "Tabs.Tab";
-const Me = ({ id: e, children: t, className: a = "" }) => {
+const Me = ({ id: e, children: t, className: s = "" }) => {
   const { activeTab: l } = Ve(), n = l === e, r = {
     visibility: n ? "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 n || (r.pointerEvents = "none"), /* @__PURE__ */ a("div", { className: `clarity-tab-content ${s}`, role: "tabpanel", style: r, children: t });
 };
 Me.displayName = "Tabs.Content";
 const me = ({
   children: e,
   defaultTab: t,
-  variant: a = "primary",
+  variant: s = "primary",
   orientation: l = "horizontal",
   className: n = ""
 }) => {
   const [r, o] = T(t), u = Y(() => ({
     activeTab: r,
     setActiveTab: o,
-    variant: a,
+    variant: s,
     orientation: l
-  }), [r, a, l]), i = [
+  }), [r, s, l]), i = [
     "clarity-tabs-container",
     n,
     `orientation-${l}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s(Ae.Provider, { value: u, children: /* @__PURE__ */ s("div", { className: i, children: e }) });
+  return /* @__PURE__ */ a(Ae.Provider, { value: u, children: /* @__PURE__ */ a("div", { className: i, children: e }) });
 };
 me.Tab = He;
 me.Content = Me;
@@ -1448,7 +1448,7 @@ me.displayName = "Tabs";
 const jt = ({
   content: e,
   position: t = "top",
-  variant: a = "primary",
+  variant: s = "primary",
   product: l,
   tone: n,
   bgColor: r,
@@ -1464,7 +1464,7 @@ const jt = ({
 }) => {
   const [C, h] = T(!1), [N, w] = T(null), B = A(null), g = A(null), b = "clarity-tooltip", k = !!r, E = l && n && !k;
   let x = "";
-  k ? x = `${b}__content--custom-bg` : E ? x = `${b}__content--custom` : x = `${b}__content--${a}`;
+  k ? x = `${b}__content--custom-bg` : E ? x = `${b}__content--custom` : x = `${b}__content--${s}`;
   const j = [
     b,
     `${b}--${t}`,
@@ -1511,7 +1511,7 @@ const jt = ({
       ...d,
       children: [
         u,
-        C && /* @__PURE__ */ s(
+        C && /* @__PURE__ */ a(
           "div",
           {
             ref: B,
@@ -1519,7 +1519,7 @@ const jt = ({
             style: $,
             role: "tooltip",
             "aria-hidden": !C,
-            children: /* @__PURE__ */ s("div", { className: S, children: e })
+            children: /* @__PURE__ */ a("div", { className: S, children: e })
           }
         )
       ]
@@ -1533,32 +1533,32 @@ const jt = ({
 }, Fe = ({
   children: e,
   className: t = "",
-  variant: a = "secondary",
+  variant: s = "secondary",
   emptyText: l = "No results found.",
   inputPlaceholder: n = "Search...",
   ...r
 }) => {
   const [o, u] = T(""), [i, c] = T(null), [p, y] = T(!1), f = [
     "clarity-command",
-    `clarity-command--${a}`,
+    `clarity-command--${s}`,
     t
   ].filter(Boolean).join(" "), m = Y(() => ({
     searchTerm: o,
     setSearchTerm: u,
     value: i,
     setValue: c,
-    variant: a,
+    variant: s,
     texts: {
       empty: l,
       inputPlaceholder: n
     },
     isOpen: p,
     setIsOpen: y
-  }), [o, i, a, l, n, p]);
-  return /* @__PURE__ */ s(We.Provider, { value: m, children: /* @__PURE__ */ s("div", { className: f, ...r, children: e }) });
+  }), [o, i, s, l, n, p]);
+  return /* @__PURE__ */ a(We.Provider, { value: m, children: /* @__PURE__ */ a("div", { className: f, ...r, children: e }) });
 };
 Fe.displayName = "Command";
-const Ge = ({ placeholder: e = "Search...", variant: t, onClick: a }) => {
+const Ge = ({ placeholder: e = "Search...", variant: t, onClick: s }) => {
   const { setIsOpen: l, variant: n } = ee(), [r, o] = T(!1);
   O(() => {
     o(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
@@ -1568,9 +1568,9 @@ const Ge = ({ placeholder: e = "Search...", variant: t, onClick: a }) => {
     `clarity-command-button--${t || n}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("button", { className: i, onClick: (p) => {
-    l(!0), a == null || a(p);
+    l(!0), s == null || s(p);
   }, children: [
-    /* @__PURE__ */ s("span", { children: e }),
+    /* @__PURE__ */ a("span", { children: e }),
     /* @__PURE__ */ _("kbd", { className: "clarity-command-shortcut", children: [
       r ? "⌘" : "Ctrl+",
       "K"
@@ -1579,17 +1579,17 @@ 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();
+  const { isOpen: s, setIsOpen: l, variant: n } = ee();
   return O(() => {
     const r = (o) => {
-      o.key === "k" && (o.metaKey || o.ctrlKey) && (o.preventDefault(), l(!a));
+      o.key === "k" && (o.metaKey || o.ctrlKey) && (o.preventDefault(), l(!s));
     };
     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 }) });
+  }, [s, l]), /* @__PURE__ */ a(J, { isOpen: s, onClose: () => l(!1), size: "large", closeOnOverlayClick: !0, children: /* @__PURE__ */ a("div", { className: `clarity-command--${n}`, children: e }) });
 };
 Ue.displayName = "Command.Dialog";
 const ze = ({ className: e = "", ...t }) => {
-  const { searchTerm: a, setSearchTerm: l, variant: n, texts: r, isOpen: o } = ee(), u = A(null);
+  const { searchTerm: s, setSearchTerm: l, variant: n, texts: r, isOpen: o } = ee(), u = A(null);
   O(() => {
     var c;
     o && ((c = u.current) == null || c.focus());
@@ -1599,12 +1599,12 @@ const ze = ({ className: e = "", ...t }) => {
     `clarity-command-input--${n}`,
     e
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: "clarity-command-input__wrapper", children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ a("div", { className: "clarity-command-input__wrapper", children: /* @__PURE__ */ a(
     "input",
     {
       ref: u,
       className: i,
-      value: a,
+      value: s,
       onChange: (c) => l(c.target.value),
       placeholder: t.placeholder || r.inputPlaceholder,
       ...t
@@ -1612,7 +1612,7 @@ const ze = ({ className: e = "", ...t }) => {
   ) });
 };
 ze.displayName = "Command.Input";
-const qe = ({ children: e, className: t = "", ...a }) => {
+const qe = ({ children: e, className: t = "", ...s }) => {
   const { searchTerm: l } = ee();
   let n = !1;
   const r = (i) => L.Children.toArray(i).map((c) => {
@@ -1629,35 +1629,35 @@ const qe = ({ children: e, className: t = "", ...a }) => {
     }
     return c;
   }).filter(Boolean), o = r(e), u = ["clarity-command-list", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: u, ...a, children: [
+  return /* @__PURE__ */ _("div", { className: u, ...s, children: [
     o,
-    !n && /* @__PURE__ */ s(ue, {})
+    !n && /* @__PURE__ */ a(ue, {})
   ] });
 };
 qe.displayName = "Command.List";
-const ue = ({ children: e, className: t = "", ...a }) => {
+const ue = ({ children: e, className: t = "", ...s }) => {
   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 });
+  return /* @__PURE__ */ a("div", { className: n, ...s, children: e || s.emptyText || l.empty });
 };
 ue.displayName = "Command.Empty";
-const Je = ({ children: e, className: t = "", ...a }) => {
+const Je = ({ children: e, className: t = "", ...s }) => {
   const l = ["clarity-command-group", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: l, ...a, children: e });
+  return /* @__PURE__ */ a("div", { className: l, ...s, children: e });
 };
 Je.displayName = "Command.Group";
-const Qe = ({ children: e, className: t = "", ...a }) => {
+const Qe = ({ children: e, className: t = "", ...s }) => {
   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 });
+  return /* @__PURE__ */ a("div", { className: r, onClick: () => l((e == null ? void 0 : e.toString()) || ""), ...s, children: e });
 };
 Qe.displayName = "Command.Item";
 const Xe = ({ className: e = "", ...t }) => {
-  const a = ["clarity-command-separator", e].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("hr", { className: a, ...t });
+  const s = ["clarity-command-separator", e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("hr", { className: s, ...t });
 };
 Xe.displayName = "Command.Separator";
-const Ye = ({ children: e, className: t = "", ...a }) => {
+const Ye = ({ children: e, className: t = "", ...s }) => {
   const l = ["clarity-command-shortcut", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("span", { className: l, ...a, children: e });
+  return /* @__PURE__ */ a("span", { className: l, ...s, children: e });
 };
 Ye.displayName = "Command.Shortcut";
 const Lt = Object.assign(Fe, {
@@ -1671,33 +1671,33 @@ const Lt = Object.assign(Fe, {
   Separator: Xe,
   Shortcut: Ye
 }), Ct = ({ columns: e, viewMode: t }) => {
-  const a = Array.from({ length: 5 }, (l, n) => n);
+  const s = Array.from({ length: 5 }, (l, n) => n);
   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__ */ _("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__ */ a("div", { className: "skeleton card-view-header" }),
+    /* @__PURE__ */ a("div", { className: "card-view-body", children: s.map((l) => /* @__PURE__ */ a("div", { className: "skeleton card-view-row" }, l)) })
+  ] }) : /* @__PURE__ */ a("div", { className: "table-wrapper is-loading", children: /* @__PURE__ */ _("table", { children: [
+    /* @__PURE__ */ a("thead", { children: /* @__PURE__ */ a("tr", { className: "table-row", children: e.map((l) => /* @__PURE__ */ a("th", { className: "table-header-cell", children: /* @__PURE__ */ a("div", { className: "skeleton skeleton-text" }) }, l.key)) }) }),
+    /* @__PURE__ */ a("tbody", { children: s.map((l) => /* @__PURE__ */ a("tr", { className: "table-row", children: e.map((n) => /* @__PURE__ */ a("td", { className: "table-cell", children: /* @__PURE__ */ a("div", { className: "skeleton skeleton-text" }) }, n.key)) }, l)) })
   ] }) });
 }, Et = ({
   variant: e = "secondary",
   columns: t,
-  data: a,
+  data: s,
   viewMode: l = "table",
   isScrollable: n = !1,
   isLoading: r = !1
 }) => {
   const [o, u] = T(null), [i, c] = T("none"), p = (d) => {
     d.sortable && (o === d.key ? c((C) => C === "asc" ? "desc" : C === "desc" ? "none" : "asc") : (u(d.key), c("asc")));
-  }, y = Y(() => i === "none" || !o ? a : [...a].sort((d, C) => {
+  }, y = Y(() => i === "none" || !o ? s : [...s].sort((d, C) => {
     const h = d[o], N = C[o];
     return h < N ? i === "asc" ? -1 : 1 : h > N ? i === "asc" ? 1 : -1 : 0;
-  }), [a, o, i]), f = (d) => d.sortable ? o !== d.key || i === "none" ? /* @__PURE__ */ s("span", { className: "sort-icon", children: "↕" }) : i === "asc" ? /* @__PURE__ */ s("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ s("span", { className: "sort-icon", children: "↓" }) : null;
+  }), [s, o, i]), f = (d) => d.sortable ? o !== d.key || i === "none" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↕" }) : i === "asc" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ a("span", { className: "sort-icon", children: "↓" }) : null;
   if (r)
-    return /* @__PURE__ */ s(Ct, { columns: t, viewMode: l });
+    return /* @__PURE__ */ a(Ct, { columns: t, viewMode: l });
   const m = `table-variant-${e} ${n ? "is-scrollable" : ""}`;
   return l === "card" ? /* @__PURE__ */ _("div", { className: `card-view-wrapper ${m}`, children: [
-    /* @__PURE__ */ s("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((d) => /* @__PURE__ */ _(
+    /* @__PURE__ */ a("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((d) => /* @__PURE__ */ _(
       "div",
       {
         className: `card-view-header-cell ${d.sortable ? "sortable" : ""}`,
@@ -1710,9 +1710,9 @@ const Lt = Object.assign(Fe, {
       },
       d.key
     )) }),
-    /* @__PURE__ */ s("div", { className: "card-view-body", children: y.map((d, C) => /* @__PURE__ */ s("div", { className: `card-view-row table-row-${e}`, children: t.map((h) => /* @__PURE__ */ s("div", { className: `card-view-cell ${h.align ? `table-cell-align-${h.align}` : ""}`, style: { minWidth: h.minWidth }, children: h.render ? h.render(d) : d[h.key] }, h.key)) }, C)) })
-  ] }) : /* @__PURE__ */ s("div", { className: `table-wrapper ${m}`, children: /* @__PURE__ */ _("table", { children: [
-    /* @__PURE__ */ s("thead", { className: "table-header", children: /* @__PURE__ */ s("tr", { className: "table-row", children: t.map((d) => /* @__PURE__ */ _(
+    /* @__PURE__ */ a("div", { className: "card-view-body", children: y.map((d, C) => /* @__PURE__ */ a("div", { className: `card-view-row table-row-${e}`, children: t.map((h) => /* @__PURE__ */ a("div", { className: `card-view-cell ${h.align ? `table-cell-align-${h.align}` : ""}`, style: { minWidth: h.minWidth }, children: h.render ? h.render(d) : d[h.key] }, h.key)) }, C)) })
+  ] }) : /* @__PURE__ */ a("div", { className: `table-wrapper ${m}`, children: /* @__PURE__ */ _("table", { children: [
+    /* @__PURE__ */ a("thead", { className: "table-header", children: /* @__PURE__ */ a("tr", { className: "table-row", children: t.map((d) => /* @__PURE__ */ _(
       "th",
       {
         className: `table-header-cell ${d.sortable ? "sortable" : ""} table-header-cell-${e}`,
@@ -1725,25 +1725,25 @@ const Lt = Object.assign(Fe, {
       },
       d.key
     )) }) }),
-    /* @__PURE__ */ s("tbody", { children: y.map((d, C) => /* @__PURE__ */ s("tr", { className: `table-row table-row-${e}`, children: t.map((h) => /* @__PURE__ */ s("td", { className: `table-cell ${h.align ? `table-cell-align-${h.align}` : ""}`, style: { minWidth: h.minWidth }, children: h.render ? h.render(d) : d[h.key] }, h.key)) }, C)) })
+    /* @__PURE__ */ a("tbody", { children: y.map((d, C) => /* @__PURE__ */ a("tr", { className: `table-row table-row-${e}`, children: t.map((h) => /* @__PURE__ */ a("td", { className: `table-cell ${h.align ? `table-cell-align-${h.align}` : ""}`, style: { minWidth: h.minWidth }, children: h.render ? h.render(d) : d[h.key] }, h.key)) }, C)) })
   ] }) });
 }, It = ({
   variant: e = "primary",
   product: t,
-  tone: a,
+  tone: s,
   size: l = "medium",
   color: n,
   className: r = "",
   "aria-label": o = "Carregando...",
   ...u
 }) => {
-  const i = "clarity-spinner", y = n ? `${i}--custom` : t && a ? `${i}--custom` : `${i}--${e}`, f = [
+  const i = "clarity-spinner", y = n ? `${i}--custom` : t && s ? `${i}--custom` : `${i}--${e}`, f = [
     i,
     `${i}--${l}`,
     y,
     r
   ].filter(Boolean).join(" "), m = {};
-  return n ? m["--spinner-color"] = n : t && a && (m["--spinner-color"] = `var(--clarity-${t}-${a})`), /* @__PURE__ */ s(
+  return n ? m["--spinner-color"] = n : t && s && (m["--spinner-color"] = `var(--clarity-${t}-${s})`), /* @__PURE__ */ a(
     "div",
     {
       className: f,
@@ -1751,13 +1751,13 @@ const Lt = Object.assign(Fe, {
       role: "status",
       "aria-label": o,
       ...u,
-      children: /* @__PURE__ */ s("div", { className: `${i}__container`, children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ a("div", { className: `${i}__container`, children: /* @__PURE__ */ a(
         "svg",
         {
           className: `${i}__svg`,
           viewBox: "0 0 50 50",
           xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ s(
+          children: /* @__PURE__ */ a(
             "circle",
             {
               className: `${i}__circle`,