beth-clarity 1.1.0 → 1.1.2

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

@@ -1,5 +1,5 @@
-import { jsx as t, jsxs as C, Fragment as Ve } from "react/jsx-runtime";
-import O, { useState as T, useRef as V, useEffect as D, forwardRef as Me, isValidElement as X, createContext as q, cloneElement as W, useContext as G, useMemo as te, useCallback as ae, useLayoutEffect as We } from "react";
+import { jsx as t, jsxs as C, Fragment as Me } from "react/jsx-runtime";
+import O, { useState as T, useRef as M, useEffect as D, forwardRef as Ve, isValidElement as X, createContext as q, cloneElement as W, useContext as G, useMemo as te, useCallback as ae, useLayoutEffect as We } from "react";
 import Fe from "react-dom";
 const dt = ({
   variant: e = "primary",
@@ -7,25 +7,25 @@ const dt = ({
   tone: l,
   size: a = "medium",
   bgColor: i,
-  textColor: r,
+  textColor: n,
   children: c,
   className: f = "",
-  rounded: n = !1,
-  outlined: m = !1,
+  rounded: r = !1,
+  outlined: u = !1,
   ...p
 }) => {
-  const y = "clarity-badge", u = !!i, d = s && l && !u;
+  const y = "clarity-badge", m = !!i, d = s && l && !m;
   let o = "";
-  u ? o = `${y}--custom-bg` : d ? o = `${y}--custom` : o = `${y}--${e}`;
+  m ? o = `${y}--custom-bg` : d ? o = `${y}--custom` : o = `${y}--${e}`;
   const N = [
     y,
     o,
     `${y}--${a}`,
-    n ? `${y}--rounded` : "",
-    m ? `${y}--outlined` : "",
+    r ? `${y}--rounded` : "",
+    u ? `${y}--outlined` : "",
     f
   ].filter(Boolean).join(" "), v = {};
-  u && (v.backgroundColor = i, r && (v.color = r));
+  m && (v.backgroundColor = i, n && (v.color = n));
   const b = d && s && l ? {
     "--custom-bg-color": `var(--clarity-${s}-${l})`,
     "--custom-text-color": l && parseInt(l) >= 500 ? "white" : `var(--clarity-${s}-800)`
@@ -48,21 +48,21 @@ const dt = ({
   tone: l,
   hoverTone: a,
   size: i = "medium",
-  disabled: r = !1,
+  disabled: n = !1,
   loading: c = !1,
   children: f,
-  onClick: n,
-  type: m = "button",
+  onClick: r,
+  type: u = "button",
   className: p = "",
   title: y,
-  ...u
+  ...m
 }) => {
   const d = "clarity-button", o = s && l, N = o ? `${d}--custom` : `${d}--${e}`, v = [
     d,
     N,
     `${d}--${i}`,
     c && `${d}--loading`,
-    r && `${d}--disabled`,
+    n && `${d}--disabled`,
     p
   ].filter(Boolean).join(" "), b = (j) => {
     const g = parseInt(j);
@@ -76,11 +76,11 @@ const dt = ({
     {
       className: v,
       style: w,
-      disabled: r || c,
-      onClick: n,
-      type: m,
+      disabled: n || c,
+      onClick: r,
+      type: u,
       title: y,
-      ...u,
+      ...m,
       children: [
         c && /* @__PURE__ */ t("div", { className: `${d}__spinner` }),
         f
@@ -93,40 +93,41 @@ const dt = ({
   label: l,
   helperText: a,
   error: i = !1,
-  errorMessage: r,
+  errorMessage: n,
   startIcon: c,
   endIcon: f,
-  className: n = "",
-  disabled: m = !1,
+  className: r = "",
+  disabled: u = !1,
   value: p,
   defaultValue: y,
-  onFocus: u,
+  onFocus: m,
   onBlur: d,
   ...o
 }, N) => {
-  const [v, b] = T(!1), [w, j] = T(!1), g = V(null);
+  const [v, b] = T(!1), [w, j] = T(!1), g = M(null);
   O.useImperativeHandle(N, () => g.current), D(() => {
     const x = g.current;
     x && j(x.value.length > 0);
   }, [p, y]);
   const _ = (x) => {
-    b(!0), u == null || u(x);
+    b(!0), m == null || m(x);
   }, k = (x) => {
     b(!1), j(x.target.value.length > 0), d == null || d(x);
-  }, E = [
+  }, L = [
     "clarity-input",
     "clarity-input--outlined",
     `clarity-input--${s}`,
     e && `clarity-input--${e}`,
     i && "clarity-input--error",
-    m && "clarity-input--disabled",
-    (v || w) && "clarity-input--focused",
+    u && "clarity-input--disabled",
+    v && "clarity-input--focused",
+    w && "clarity-input--has-value",
     c && "clarity-input--with-start-icon",
     f && "clarity-input--with-end-icon",
-    n
+    r
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: "clarity-input-wrapper", children: [
-    /* @__PURE__ */ C("div", { className: E, children: [
+    /* @__PURE__ */ C("div", { className: L, children: [
       c && /* @__PURE__ */ t("div", { className: "clarity-input__start-icon", children: c }),
       /* @__PURE__ */ C("div", { className: "clarity-input__field", children: [
         /* @__PURE__ */ t(
@@ -134,7 +135,7 @@ const dt = ({
           {
             ref: g,
             className: "clarity-input__element",
-            disabled: m,
+            disabled: u,
             value: p,
             defaultValue: y,
             onFocus: _,
@@ -146,7 +147,7 @@ const dt = ({
       ] }),
       f && /* @__PURE__ */ t("div", { className: "clarity-input__end-icon", children: f })
     ] }),
-    (a || i && r) && /* @__PURE__ */ t("div", { className: "clarity-input__helper-text", children: i && r ? r : a })
+    (a || i && n) && /* @__PURE__ */ t("div", { className: "clarity-input__helper-text", children: i && n ? n : a })
   ] });
 });
 Ue.displayName = "Input";
@@ -156,14 +157,14 @@ const ze = O.forwardRef(({
   label: l,
   helperText: a,
   error: i = !1,
-  errorMessage: r,
+  errorMessage: n,
   startIcon: c,
   endIcon: f,
-  className: n = "",
-  disabled: m = !1,
+  className: r = "",
+  disabled: u = !1,
   value: p,
   defaultValue: y,
-  onFocus: u,
+  onFocus: m,
   onBlur: d,
   rows: o = 3,
   minHeight: N,
@@ -171,27 +172,28 @@ const ze = O.forwardRef(({
   resizable: b = !0,
   ...w
 }, j) => {
-  const [g, _] = T(!1), [k, E] = T(!1), x = V(null);
+  const [g, _] = T(!1), [k, L] = T(!1), x = M(null);
   O.useImperativeHandle(j, () => x.current), D(() => {
     const $ = x.current;
-    $ && E($.value.length > 0);
+    $ && L($.value.length > 0);
   }, [p, y]);
   const B = ($) => {
-    _(!0), u == null || u($);
+    _(!0), m == null || m($);
   }, I = ($) => {
-    _(!1), E($.target.value.length > 0), d == null || d($);
+    _(!1), L($.target.value.length > 0), d == null || d($);
   }, A = [
     "clarity-textarea",
     "clarity-textarea--outlined",
     `clarity-textarea--${s}`,
     e && `clarity-textarea--${e}`,
     i && "clarity-textarea--error",
-    m && "clarity-textarea--disabled",
-    (g || k) && "clarity-textarea--focused",
+    u && "clarity-textarea--disabled",
+    g && "clarity-textarea--focused",
+    k && "clarity-textarea--has-value",
     c && "clarity-textarea--with-start-icon",
     f && "clarity-textarea--with-end-icon",
-    n
-  ].filter(Boolean).join(" "), L = {
+    r
+  ].filter(Boolean).join(" "), E = {
     resize: b ? "vertical" : "none",
     minHeight: N ? `${N}px` : void 0,
     maxHeight: v ? `${v}px` : void 0
@@ -205,13 +207,13 @@ const ze = O.forwardRef(({
           {
             ref: x,
             className: "clarity-textarea__element",
-            disabled: m,
+            disabled: u,
             value: p,
             defaultValue: y,
             onFocus: B,
             onBlur: I,
             rows: o,
-            style: L,
+            style: E,
             ...w
           }
         ),
@@ -219,7 +221,7 @@ const ze = O.forwardRef(({
       ] }),
       f && /* @__PURE__ */ t("div", { className: "clarity-textarea__end-icon", children: f })
     ] }),
-    (a || i && r) && /* @__PURE__ */ t("div", { className: "clarity-textarea__helper-text", children: i && r ? r : a })
+    (a || i && n) && /* @__PURE__ */ t("div", { className: "clarity-textarea__helper-text", children: i && n ? n : a })
   ] });
 });
 ze.displayName = "Textarea";
@@ -229,14 +231,14 @@ const qe = O.forwardRef(({
   label: l,
   helperText: a,
   error: i = !1,
-  errorMessage: r,
+  errorMessage: n,
   startIcon: c,
   endIcon: f,
-  className: n = "",
-  disabled: m = !1,
+  className: r = "",
+  disabled: u = !1,
   value: p,
   defaultValue: y,
-  onFocus: u,
+  onFocus: m,
   onBlur: d,
   onChange: o,
   options: N,
@@ -245,7 +247,7 @@ const qe = O.forwardRef(({
   isSearchable: w = !1,
   ...j
 }, g) => {
-  const [_, k] = T(!1), [E, x] = T(!1), [B, I] = T(p || y || ""), [A, L] = T(""), $ = V(null), M = V(null);
+  const [_, k] = T(!1), [L, x] = T(!1), [B, I] = T(p || y || ""), [A, E] = T(""), $ = M(null), V = M(null);
   O.useImperativeHandle(g, () => $.current), D(() => {
     p !== void 0 && I(p);
   }, [p]), D(() => {
@@ -257,44 +259,44 @@ const qe = O.forwardRef(({
   const H = w && A ? N.filter(
     (h) => h.label.toLowerCase().includes(A.toLowerCase())
   ) : N, F = () => {
-    m || (k(!_), x(!_), _ ? (d == null || d(), w && L("")) : (u == null || u(), w && setTimeout(() => {
+    u || (k(!_), x(!_), _ ? (d == null || d(), w && E("")) : (m == null || m(), w && setTimeout(() => {
       var h;
-      (h = M.current) == null || h.focus();
+      (h = V.current) == null || h.focus();
     }, 0)));
   }, Q = (h) => {
-    h.disabled || (I(h.value), k(!1), x(!1), L(""), o == null || o(h.value), d == null || d());
+    h.disabled || (I(h.value), k(!1), x(!1), E(""), o == null || o(h.value), d == null || d());
   }, K = (h) => {
-    L(h.target.value);
+    E(h.target.value);
   }, U = (h) => {
-    h.key === "Escape" ? (k(!1), x(!1), L("")) : h.key === "Enter" && H.length > 0 && H[0] && Q(H[0]);
+    h.key === "Escape" ? (k(!1), x(!1), E("")) : h.key === "Enter" && H.length > 0 && H[0] && Q(H[0]);
   }, P = N.find((h) => h.value === B), le = B !== "" && B !== void 0, ie = (h) => {
     h.stopPropagation(), I(""), o == null || o("");
-  }, ne = le || E || v || w && A, re = [
+  }, re = le || L || v || w && A, ne = [
     "clarity-select",
     "clarity-select--outlined",
     `clarity-select--${s}`,
     e && `clarity-select--${e}`,
     i && "clarity-select--error",
-    m && "clarity-select--disabled",
-    (E || _) && "clarity-select--focused",
-    ne && "clarity-select--label-up",
+    u && "clarity-select--disabled",
+    (L || _) && "clarity-select--focused",
+    re && "clarity-select--label-up",
     _ && "clarity-select--open",
     w && "clarity-select--searchable",
     c && "clarity-select--with-start-icon",
     (f || b) && "clarity-select--with-end-icon",
-    n
+    r
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: "clarity-select-wrapper", children: [
     /* @__PURE__ */ C(
       "div",
       {
         ref: $,
-        className: re,
+        className: ne,
         onClick: w ? void 0 : F,
         role: "combobox",
         "aria-expanded": _,
         "aria-haspopup": "listbox",
-        tabIndex: m || w ? -1 : 0,
+        tabIndex: u || w ? -1 : 0,
         ...j,
         children: [
           c && /* @__PURE__ */ t("div", { className: "clarity-select__start-icon", children: c }),
@@ -302,17 +304,17 @@ const qe = O.forwardRef(({
             w ? /* @__PURE__ */ t(
               "input",
               {
-                ref: M,
+                ref: V,
                 type: "text",
                 className: "clarity-select__search-input",
                 value: _ ? A : P ? P.label : "",
                 onChange: K,
                 onKeyDown: U,
                 onFocus: () => {
-                  _ || (k(!0), x(!0), u == null || u());
+                  _ || (k(!0), x(!0), m == null || m());
                 },
                 placeholder: P ? P.label : v,
-                disabled: m,
+                disabled: u,
                 readOnly: !_
               }
             ) : /* @__PURE__ */ t("div", { className: "clarity-select__display", children: P ? P.label : v }),
@@ -391,24 +393,24 @@ const qe = O.forwardRef(({
         ]
       }
     ),
-    (a || i && r) && /* @__PURE__ */ t("div", { className: "clarity-select__helper-text", children: i && r ? r : a })
+    (a || i && n) && /* @__PURE__ */ t("div", { className: "clarity-select__helper-text", children: i && n ? n : a })
   ] });
 });
 qe.displayName = "Select";
-const Ge = Me(({
+const Ge = Ve(({
   options: e = [],
   value: s = [],
   onChange: l,
   placeholder: a = "Selecione opções",
   label: i,
-  helperText: r,
+  helperText: n,
   error: c = !1,
   errorMessage: f,
-  disabled: n = !1,
-  variant: m = "primary",
+  disabled: r = !1,
+  variant: u = "primary",
   size: p = "medium",
   maxSelectedLabels: y = 3,
-  selectionLimit: u,
+  selectionLimit: m,
   className: d = "",
   id: o,
   name: N,
@@ -416,39 +418,39 @@ const Ge = Me(({
   "data-testid": b,
   ...w
 }, j) => {
-  const [g, _] = T(!1), [k, E] = T(""), [x, B] = T(!1), I = V(null), A = V(null), L = V(null), $ = (h) => {
+  const [g, _] = T(!1), [k, L] = T(""), [x, B] = T(!1), I = M(null), A = M(null), E = M(null), $ = (h) => {
     I.current = h, j && (typeof j == "function" ? j(h) : j.current = h);
   };
   D(() => {
     const h = (S) => {
-      I.current && !I.current.contains(S.target) && (_(!1), B(!1), E(""));
+      I.current && !I.current.contains(S.target) && (_(!1), B(!1), L(""));
     };
     return document.addEventListener("click", h), () => document.removeEventListener("click", h);
   }, []);
-  const M = e.filter(
+  const V = e.filter(
     (h) => h.label.toLowerCase().includes(k.toLowerCase())
   ), H = () => {
-    n || (_(!g), B(!g), g ? E("") : setTimeout(() => {
+    r || (_(!g), B(!g), g ? L("") : setTimeout(() => {
       var h;
       (h = A.current) == null || h.focus();
     }, 100));
   }, F = (h, S) => {
-    if (n)
+    if (r)
       return;
     S && (S.stopPropagation(), S.preventDefault());
     const z = s.includes(h);
     let R;
     z ? R = s.filter((ee) => ee !== h) : R = [...s, h], l && l(R);
   }, Q = (h, S) => {
-    if (S.stopPropagation(), n) return;
+    if (S.stopPropagation(), r) return;
     const z = s.filter((R) => R !== h);
     l == null || l(z);
   }, K = (h) => {
-    h.stopPropagation(), !n && (l == null || l([]));
+    h.stopPropagation(), !r && (l == null || l([]));
   }, U = (h) => {
-    E(h.target.value);
+    L(h.target.value);
   }, P = (h) => {
-    h.key === "Escape" && (_(!1), B(!1), E(""));
+    h.key === "Escape" && (_(!1), B(!1), L(""));
   }, le = x || g || s.length > 0, ie = () => {
     if (s.length === 0) return null;
     const h = s.map(
@@ -457,7 +459,7 @@ const Ge = Me(({
     return /* @__PURE__ */ C("div", { className: "clarity-multiselect__chips", children: [
       S.map((R) => /* @__PURE__ */ C("div", { className: "clarity-multiselect__chip", children: [
         /* @__PURE__ */ t("span", { className: "clarity-multiselect__chip-label", children: R.label }),
-        !n && /* @__PURE__ */ t(
+        !r && /* @__PURE__ */ t(
           "button",
           {
             type: "button",
@@ -474,26 +476,26 @@ const Ge = Me(({
         " mais"
       ] })
     ] });
-  }, ne = [
+  }, re = [
     "clarity-multiselect-wrapper",
     d
-  ].filter(Boolean).join(" "), re = [
+  ].filter(Boolean).join(" "), ne = [
     "clarity-multiselect",
-    `clarity-multiselect--${m}`,
+    `clarity-multiselect--${u}`,
     `clarity-multiselect--${p}`,
     g && "clarity-multiselect--open",
     x && "clarity-multiselect--focused",
     le && "clarity-multiselect--label-up",
     c && "clarity-multiselect--error",
-    n && "clarity-multiselect--disabled",
+    r && "clarity-multiselect--disabled",
     s.length > 0 && "clarity-multiselect--has-value"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ C("div", { className: ne, children: [
+  return /* @__PURE__ */ C("div", { className: re, children: [
     /* @__PURE__ */ C(
       "div",
       {
         ref: $,
-        className: re,
+        className: ne,
         "data-testid": b,
         ...w,
         children: [
@@ -509,7 +511,7 @@ const Ge = Me(({
                 ] }),
                 /* @__PURE__ */ t("div", { className: "clarity-multiselect__content", children: s.length > 0 ? ie() : /* @__PURE__ */ t("span", { className: "clarity-multiselect__placeholder", children: a }) }),
                 /* @__PURE__ */ C("div", { className: "clarity-multiselect__icons", children: [
-                  s.length > 0 && !n && /* @__PURE__ */ t(
+                  s.length > 0 && !r && /* @__PURE__ */ t(
                     "button",
                     {
                       type: "button",
@@ -533,7 +535,7 @@ const Ge = Me(({
               ]
             }
           ),
-          g && /* @__PURE__ */ C("div", { ref: L, className: "clarity-multiselect__dropdown", children: [
+          g && /* @__PURE__ */ C("div", { ref: E, className: "clarity-multiselect__dropdown", children: [
             /* @__PURE__ */ t("div", { className: "clarity-multiselect__search", children: /* @__PURE__ */ t(
               "input",
               {
@@ -546,8 +548,8 @@ const Ge = Me(({
                 onKeyDown: P
               }
             ) }),
-            /* @__PURE__ */ t("ul", { className: "clarity-multiselect__options", children: M.length > 0 ? M.map((h) => {
-              const S = s.includes(h.value), z = h.disabled || n;
+            /* @__PURE__ */ t("ul", { className: "clarity-multiselect__options", children: V.length > 0 ? V.map((h) => {
+              const S = s.includes(h.value), z = h.disabled || r;
               return /* @__PURE__ */ C(
                 "li",
                 {
@@ -581,7 +583,7 @@ const Ge = Me(({
         ]
       }
     ),
-    (r || c && f) && /* @__PURE__ */ t("div", { className: "clarity-multiselect__helper", children: c && f ? /* @__PURE__ */ t("span", { className: "clarity-multiselect__error-message", children: f }) : r && /* @__PURE__ */ t("span", { className: "clarity-multiselect__helper-text", children: r }) })
+    (n || c && f) && /* @__PURE__ */ t("div", { className: "clarity-multiselect__helper", children: c && f ? /* @__PURE__ */ t("span", { className: "clarity-multiselect__error-message", children: f }) : n && /* @__PURE__ */ t("span", { className: "clarity-multiselect__helper-text", children: n }) })
   ] });
 });
 Ge.displayName = "MultiSelect";
@@ -595,7 +597,7 @@ const ue = q(null), me = () => {
   className: s = "",
   title: l
 }) => {
-  const { onClose: a, variant: i, showCloseButton: r } = me(), c = [
+  const { onClose: a, variant: i, showCloseButton: n } = me(), c = [
     "clarity-modal-header",
     s,
     i && `clarity-modal-header--${i}`
@@ -606,8 +608,8 @@ const ue = q(null), me = () => {
   return /* @__PURE__ */ C("div", { className: c, children: [
     l && /* @__PURE__ */ t("h2", { className: "clarity-modal-title", children: l }),
     e,
-    r && /* @__PURE__ */ t("button", { className: f, onClick: (n) => {
-      n.stopPropagation(), a();
+    n && /* @__PURE__ */ t("button", { className: f, onClick: (r) => {
+      r.stopPropagation(), a();
     }, children: "×" })
   ] });
 };
@@ -621,8 +623,8 @@ const pe = ({ children: e, className: s = "" }) => /* @__PURE__ */ C("div", { cl
 pe.displayName = "Modal.Footer";
 const ye = ({ children: e, onClick: s, variant: l }) => W(e, {
   onClick: (a) => {
-    var i, r;
-    s == null || s(), (r = (i = e.props).onClick) == null || r.call(i, a);
+    var i, n;
+    s == null || s(), (n = (i = e.props).onClick) == null || n.call(i, a);
   },
   variant: l
 });
@@ -643,34 +645,34 @@ const Y = ({
   onOpen: l,
   children: a,
   className: i = "",
-  variant: r,
+  variant: n,
   size: c = "medium",
   showCloseButton: f = !0,
-  closeOnOverlayClick: n = !0
+  closeOnOverlayClick: r = !0
 }) => {
-  const [m, p] = T(!1), u = e !== void 0 ? e : m, d = s || (() => {
+  const [u, p] = T(!1), m = e !== void 0 ? e : u, d = s || (() => {
     p(!1);
   });
   D(() => {
-    u && (l == null || l());
-  }, [u, l]), D(() => {
+    m && (l == null || l());
+  }, [m, l]), D(() => {
     const w = (j) => {
       j.key === "Escape" && d();
     };
-    return u ? (document.addEventListener("keydown", w), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+    return m ? (document.addEventListener("keydown", w), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
       document.removeEventListener("keydown", w), document.body.style.overflow = "unset";
     };
-  }, [u, d]);
+  }, [m, d]);
   const o = (w) => {
-    n && w.target === w.currentTarget && d();
+    r && w.target === w.currentTarget && d();
   }, N = O.Children.toArray(a).find(
     (w) => X(w) && w.type.displayName === "Modal.Trigger"
   ), v = O.Children.toArray(a).filter(
     (w) => X(w) && w.type.displayName !== "Modal.Trigger"
   ), b = ["clarity-modal", i, `clarity-modal--${c}`].filter(Boolean).join(" ");
-  return /* @__PURE__ */ C(ue.Provider, { value: { onClose: d, variant: r, showCloseButton: f }, children: [
-    N && W(N, { onClick: () => p(!0), variant: r }),
-    u && /* @__PURE__ */ t("div", { className: "clarity-modal-overlay", onClick: o, children: /* @__PURE__ */ t("div", { className: b, children: v }) })
+  return /* @__PURE__ */ C(ue.Provider, { value: { onClose: d, variant: n, showCloseButton: f }, children: [
+    N && W(N, { onClick: () => p(!0), variant: n }),
+    m && /* @__PURE__ */ t("div", { className: "clarity-modal-overlay", onClick: o, children: /* @__PURE__ */ t("div", { className: b, children: v }) })
   ] });
 };
 Y.Header = fe;
@@ -684,33 +686,33 @@ const Ne = q(void 0), mt = () => {
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
   return e;
-}, Je = ({ id: e, message: s, variant: l, duration: a, onClose: i, invertColors: r }) => {
-  const [c, f] = T(!1), [n, m] = T(!1);
+}, Je = ({ id: e, message: s, variant: l, duration: a, onClose: i, invertColors: n }) => {
+  const [c, f] = T("entering");
   D(() => {
-    f(!0);
     const u = setTimeout(() => {
-      m(!0);
+      f("visible");
+    }, 10), p = setTimeout(() => {
+      f("exiting");
+    }, a * 1e3 - 300), y = setTimeout(() => {
+      i(e);
     }, a * 1e3);
     return () => {
-      clearTimeout(u);
+      clearTimeout(u), clearTimeout(p), clearTimeout(y);
     };
-  }, [a]);
-  const p = (u) => {
-    u.propertyName === "opacity" && !c && n && i(e);
-  }, y = [
-    "toast",
+  }, [e, a, i]);
+  const r = [
+    "cl-toast",
     l,
-    r ? "colored-background" : "",
-    c ? "toast-visible" : "",
-    n ? "toast-exiting" : ""
+    n ? "colored-background" : "",
+    `cl-toast-${c}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ C("div", { className: y, onTransitionEnd: p, children: [
-    /* @__PURE__ */ t("div", { className: "toast-message", children: s }),
-    /* @__PURE__ */ t("button", { onClick: () => m(!0), className: "toast-close-button", children: "×" }),
+  return /* @__PURE__ */ C("div", { className: r, children: [
+    /* @__PURE__ */ t("div", { className: "cl-toast-message", children: s }),
+    /* @__PURE__ */ t("button", { onClick: () => f("exiting"), className: "cl-toast-close-button", children: "×" }),
     /* @__PURE__ */ t(
       "div",
       {
-        className: "toast-progress-bar",
+        className: "cl-toast-progress-bar",
         style: { animationDuration: `${a}s` }
       }
     )
@@ -718,8 +720,8 @@ const Ne = q(void 0), mt = () => {
 }, ft = ({ children: e }) => {
   const [s, l] = T([]), a = te(() => {
     if (typeof document < "u") {
-      const n = document.createElement("div");
-      return n.id = "toast-portal-root", n;
+      const r = document.createElement("div");
+      return r.id = "toast-portal-root", r;
     }
     return null;
   }, []);
@@ -729,24 +731,24 @@ const Ne = q(void 0), mt = () => {
         document.body.removeChild(a);
       };
   }, [a]);
-  const i = ae((n) => {
+  const i = ae((r) => {
     const p = {
       id: (/* @__PURE__ */ new Date()).toISOString() + Math.random(),
       // duration: 5,
       // position: 'right-top',
-      ...n
+      ...r
     };
     l((y) => {
-      const u = [p, ...y];
-      return u.length > 4 ? u.slice(0, 4) : u;
+      const m = [p, ...y];
+      return m.length > 4 ? m.slice(0, 4) : m;
     });
-  }, []), r = ae((n) => {
-    l((m) => m.filter((p) => p.id !== n));
-  }, []), c = te(() => s.reduce((n, m) => (n[m.position] || (n[m.position] = []), n[m.position].push(m), n), {}), [s]), f = te(() => ({ show: i }), [i]);
+  }, []), n = ae((r) => {
+    l((u) => u.filter((p) => p.id !== r));
+  }, []), c = te(() => s.reduce((r, u) => (r[u.position] || (r[u.position] = []), r[u.position].push(u), r), {}), [s]), f = te(() => ({ show: i }), [i]);
   return /* @__PURE__ */ C(Ne.Provider, { value: f, children: [
     e,
     a && Fe.createPortal(
-      Object.entries(c).map(([n, m]) => /* @__PURE__ */ t("div", { className: `toast-container ${n}`, children: m.map((p) => /* @__PURE__ */ t(Je, { ...p, onClose: r }, p.id)) }, n)),
+      Object.entries(c).map(([r, u]) => /* @__PURE__ */ t("div", { className: `cl-toast-container ${r}`, children: u.map((p) => /* @__PURE__ */ t(Je, { ...p, onClose: n }, p.id)) }, r)),
       a
     )
   ] });
@@ -759,21 +761,21 @@ const Ne = q(void 0), mt = () => {
   children: e,
   className: s = ""
 }) => {
-  const { onClose: l, variant: a, showCloseButton: i, title: r } = _e(), c = [
+  const { onClose: l, variant: a, showCloseButton: i, title: n } = _e(), c = [
     "clarity-offcanvas-header",
     s
   ].filter(Boolean).join(" "), f = [
     "clarity-offcanvas-close",
     a && `clarity-offcanvas-close--${a}`
-  ].filter(Boolean).join(" "), n = [
+  ].filter(Boolean).join(" "), r = [
     "clarity-offcanvas-title",
     a && `clarity-offcanvas-title--${a}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: c, children: [
-    r && /* @__PURE__ */ t("h2", { className: n, children: r }),
+    n && /* @__PURE__ */ t("h2", { className: r, children: n }),
     e,
-    i && /* @__PURE__ */ t("button", { className: f, onClick: (m) => {
-      m.stopPropagation(), l();
+    i && /* @__PURE__ */ t("button", { className: f, onClick: (u) => {
+      u.stopPropagation(), l();
     }, children: "×" })
   ] });
 };
@@ -782,8 +784,8 @@ const Ce = ({ children: e, className: s = "" }) => /* @__PURE__ */ t("div", { cl
 Ce.displayName = "Offcanvas.Content";
 const ge = ({ children: e, onClick: s, variant: l }) => W(e, {
   onClick: (a) => {
-    var i, r;
-    s == null || s(), (r = (i = e.props).onClick) == null || r.call(i, a);
+    var i, n;
+    s == null || s(), (n = (i = e.props).onClick) == null || n.call(i, a);
   },
   variant: l
 });
@@ -806,13 +808,13 @@ const Z = ({
   onOpen: l,
   children: a,
   className: i = "",
-  variant: r,
+  variant: n,
   placement: c = "right",
   closeOnOverlayClick: f = !0,
-  showCloseButton: n = !0,
-  title: m
+  showCloseButton: r = !0,
+  title: u
 }) => {
-  const [p, y] = T(!1), [u, d] = T(!1), [o, N] = T(!1), v = e !== void 0, b = v ? e : p, w = ae(() => {
+  const [p, y] = T(!1), [m, d] = T(!1), [o, N] = T(!1), v = e !== void 0, b = v ? e : p, w = ae(() => {
     s ? s() : y(!1);
   }, [s]), j = ae(() => {
     v || y(!0), l == null || l();
@@ -832,8 +834,8 @@ const Z = ({
       return () => clearTimeout($);
     }
   }, [b]), D(() => {
-    const $ = (M) => {
-      M.key === "Escape" && w();
+    const $ = (V) => {
+      V.key === "Escape" && w();
     };
     return b ? (document.addEventListener("keydown", $), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", $), document.body.style.overflow = "unset"), () => {
       document.removeEventListener("keydown", $), document.body.style.overflow = "unset";
@@ -842,20 +844,20 @@ const Z = ({
   const g = ($) => {
     f && $.target === $.currentTarget && w();
   }, _ = O.Children.toArray(a);
-  let k, E, x, B, I;
+  let k, L, x, B, I;
   _.forEach(($) => {
     if (X($))
       if ($.type.displayName === "Offcanvas.Trigger")
         k = $;
       else if ($.type.displayName === "Offcanvas.Header")
-        E = $;
+        L = $;
       else if ($.type.displayName === "Offcanvas.Content") {
         x = $;
         const H = O.Children.toArray(x.props.children).filter((F) => X(F) && F.type.displayName === "Offcanvas.Close" ? (I = F, !1) : !0);
         x = W(x, { children: H });
       } else $.type.displayName === "Offcanvas.Footer" && (B = $);
   }), I && (B ? B = W(B, {
-    children: /* @__PURE__ */ C(Ve, { children: [
+    children: /* @__PURE__ */ C(Me, { children: [
       B.props.children,
       I
     ] })
@@ -864,17 +866,17 @@ const Z = ({
     "clarity-offcanvas",
     i,
     `clarity-offcanvas--${c}`,
-    r && `clarity-offcanvas--${r}`,
-    u ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
-  ].filter(Boolean).join(" "), L = [
+    n && `clarity-offcanvas--${n}`,
+    m ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
+  ].filter(Boolean).join(" "), E = [
     "clarity-offcanvas-overlay",
-    u ? "clarity-offcanvas-overlay--visible" : ""
+    m ? "clarity-offcanvas-overlay--visible" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ C(be.Provider, { value: { onClose: w, variant: r, showCloseButton: n, placement: c, title: m }, children: [
-    k && W(k, { onClick: j, variant: r }),
+  return /* @__PURE__ */ C(be.Provider, { value: { onClose: w, variant: n, showCloseButton: r, placement: c, title: u }, children: [
+    k && W(k, { onClick: j, variant: n }),
     o && // Only render if shouldRender is true
-    /* @__PURE__ */ t("div", { className: L, onClick: g, children: /* @__PURE__ */ C("div", { className: A, children: [
-      E,
+    /* @__PURE__ */ t("div", { className: E, onClick: g, children: /* @__PURE__ */ C("div", { className: A, children: [
+      L,
       x,
       B && /* @__PURE__ */ t("div", { className: "clarity-offcanvas-scroll-indicator" }),
       " ",
@@ -894,32 +896,32 @@ const Qe = O.forwardRef(({
   size: l = "medium",
   label: a,
   helperText: i,
-  error: r = !1,
+  error: n = !1,
   errorMessage: c,
   labelPosition: f = "right",
-  className: n = "",
-  disabled: m = !1,
+  className: r = "",
+  disabled: u = !1,
   checked: p,
   id: y,
-  ...u
+  ...m
 }, d) => {
   const o = y || `check-input-${Math.random().toString(36).substr(2, 9)}`, N = [
     "clarity-check-input-wrapper",
     `clarity-check-input-wrapper--${f}`,
-    m && "clarity-check-input-wrapper--disabled",
-    r && "clarity-check-input-wrapper--error"
+    u && "clarity-check-input-wrapper--disabled",
+    n && "clarity-check-input-wrapper--error"
   ].filter(Boolean).join(" "), v = [
     "clarity-check-input",
     `clarity-check-input--${e}`,
     `clarity-check-input--${l}`,
     s && `clarity-check-input--${s}`,
-    r && "clarity-check-input--error",
-    m && "clarity-check-input--disabled",
-    n
+    n && "clarity-check-input--error",
+    u && "clarity-check-input--disabled",
+    r
   ].filter(Boolean).join(" "), b = [
     "clarity-check-input__label",
     `clarity-check-input__label--${l}`,
-    m && "clarity-check-input__label--disabled"
+    u && "clarity-check-input__label--disabled"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: "clarity-check-input-container", children: [
     /* @__PURE__ */ C("label", { className: N, htmlFor: o, children: [
@@ -930,9 +932,9 @@ const Qe = O.forwardRef(({
           id: o,
           type: e,
           className: v,
-          disabled: m,
+          disabled: u,
           checked: p,
-          ...u
+          ...m
         }
       ),
       /* @__PURE__ */ C("div", { className: "clarity-check-input__custom", children: [
@@ -959,7 +961,7 @@ const Qe = O.forwardRef(({
       ] }),
       a && /* @__PURE__ */ t("span", { className: b, children: a })
     ] }),
-    (i || r && c) && /* @__PURE__ */ t("div", { className: "clarity-check-input__helper-text", children: r && c ? c : i })
+    (i || n && c) && /* @__PURE__ */ t("div", { className: "clarity-check-input__helper-text", children: n && c ? c : i })
   ] });
 });
 Qe.displayName = "CheckInput";
@@ -969,49 +971,49 @@ const Xe = O.forwardRef(({
   label: l,
   helperText: a,
   error: i = !1,
-  errorMessage: r,
+  errorMessage: n,
   labelPosition: c = "right",
   className: f = "",
-  disabled: n = !1,
-  checked: m,
+  disabled: r = !1,
+  checked: u,
   id: p,
   ...y
-}, u) => {
+}, m) => {
   const d = p || `input-switch-${Math.random().toString(36).substr(2, 9)}`, o = [
     "clarity-input-switch-wrapper",
     `clarity-input-switch-wrapper--${c}`,
-    n && "clarity-input-switch-wrapper--disabled",
+    r && "clarity-input-switch-wrapper--disabled",
     i && "clarity-input-switch-wrapper--error"
   ].filter(Boolean).join(" "), N = [
     "clarity-input-switch",
     `clarity-input-switch--${s}`,
     e && `clarity-input-switch--${e}`,
     i && "clarity-input-switch--error",
-    n && "clarity-input-switch--disabled",
+    r && "clarity-input-switch--disabled",
     f
   ].filter(Boolean).join(" "), v = [
     "clarity-input-switch__label",
     `clarity-input-switch__label--${s}`,
-    n && "clarity-input-switch__label--disabled"
+    r && "clarity-input-switch__label--disabled"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: "clarity-input-switch-container", children: [
     /* @__PURE__ */ C("label", { className: o, htmlFor: d, children: [
       /* @__PURE__ */ t(
         "input",
         {
-          ref: u,
+          ref: m,
           id: d,
           type: "checkbox",
           className: N,
-          disabled: n,
-          checked: m,
+          disabled: r,
+          checked: u,
           ...y
         }
       ),
       /* @__PURE__ */ t("div", { className: "clarity-input-switch__track", children: /* @__PURE__ */ t("div", { className: "clarity-input-switch__thumb" }) }),
       l && /* @__PURE__ */ t("span", { className: v, children: l })
     ] }),
-    (a || i && r) && /* @__PURE__ */ t("div", { className: "clarity-input-switch__helper-text", children: i && r ? r : a })
+    (a || i && n) && /* @__PURE__ */ t("div", { className: "clarity-input-switch__helper-text", children: i && n ? n : a })
   ] });
 });
 Xe.displayName = "InputSwitch";
@@ -1036,7 +1038,7 @@ const Be = ({ children: e }) => W(e, {
   }
 });
 Be.displayName = "ConfirmationDialog.Trigger";
-const Ee = ({ children: e }) => {
+const Le = ({ children: e }) => {
   const { onClose: s } = oe();
   return W(e, {
     onClick: (l) => {
@@ -1045,8 +1047,8 @@ const Ee = ({ children: e }) => {
     }
   });
 };
-Ee.displayName = "ConfirmationDialog.Close";
-const Le = ({ children: e }) => {
+Le.displayName = "ConfirmationDialog.Close";
+const Ee = ({ children: e }) => {
   const { onConfirm: s } = oe();
   return W(e, {
     onClick: (l) => {
@@ -1055,7 +1057,7 @@ const Le = ({ children: e }) => {
     }
   });
 };
-Le.displayName = "ConfirmationDialog.Confirm";
+Ee.displayName = "ConfirmationDialog.Confirm";
 const J = ({
   isOpen: e,
   onClose: s,
@@ -1063,7 +1065,7 @@ const J = ({
   variant: a = "clarity-primary",
   children: i
 }) => {
-  const [r, c] = T(!1), f = e !== void 0, n = f ? e : r, m = () => {
+  const [n, c] = T(!1), f = e !== void 0, r = f ? e : n, u = () => {
     f || c(!0);
   }, p = () => {
     s ? s() : c(!1);
@@ -1074,26 +1076,26 @@ const J = ({
     const N = (v) => {
       v.key === "Escape" && p();
     };
-    return n ? (document.addEventListener("keydown", N), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+    return r ? (document.addEventListener("keydown", N), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
       document.removeEventListener("keydown", N), document.body.style.overflow = "unset";
     };
-  }, [n, p]);
-  const u = O.Children.toArray(i).find(
+  }, [r, p]);
+  const m = O.Children.toArray(i).find(
     (N) => X(N) && N.type.displayName === "ConfirmationDialog.Trigger"
   ), d = O.Children.toArray(i).filter(
     (N) => X(N) && N.type.displayName !== "ConfirmationDialog.Trigger"
   ), o = `clarity-confirmation-dialog clarity-confirmation-dialog--${a}`;
-  return /* @__PURE__ */ C(ke.Provider, { value: { variant: a, onClose: p, onConfirm: y, onOpen: m }, children: [
-    u,
-    n && /* @__PURE__ */ t("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ t("div", { className: o, children: d }) })
+  return /* @__PURE__ */ C(ke.Provider, { value: { variant: a, onClose: p, onConfirm: y, onOpen: u }, children: [
+    m,
+    r && /* @__PURE__ */ t("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ t("div", { className: o, children: d }) })
   ] });
 };
 J.Header = xe;
 J.Content = Te;
 J.Footer = je;
 J.Trigger = Be;
-J.Close = Ee;
-J.Confirm = Le;
+J.Close = Le;
+J.Confirm = Ee;
 J.displayName = "ConfirmationDialog";
 const ht = ({
   variant: e = "primary",
@@ -1101,14 +1103,14 @@ const ht = ({
   tone: l,
   hoverTone: a,
   size: i = "medium",
-  disabled: r = !1,
+  disabled: n = !1,
   loading: c = !1,
   children: f,
-  onClick: n,
-  type: m = "button",
+  onClick: r,
+  type: u = "button",
   className: p = "",
   "aria-label": y,
-  title: u,
+  title: m,
   ...d
 }) => {
   const o = "clarity-button-icon", N = s && l, v = N ? `${o}--custom` : `${o}--${e}`, b = [
@@ -1116,7 +1118,7 @@ const ht = ({
     v,
     `${o}--${i}`,
     c && `${o}--loading`,
-    r && `${o}--disabled`,
+    n && `${o}--disabled`,
     p
   ].filter(Boolean).join(" "), w = (g) => {
     const _ = parseInt(g);
@@ -1130,11 +1132,11 @@ const ht = ({
     {
       className: b,
       style: j,
-      disabled: r || c,
-      onClick: n,
-      type: m,
+      disabled: n || c,
+      onClick: r,
+      type: u,
       "aria-label": y,
-      title: u,
+      title: m,
       ...d,
       children: [
         c && /* @__PURE__ */ t("div", { className: `${o}__spinner` }),
@@ -1148,20 +1150,20 @@ const ht = ({
   tone: l,
   hoverTone: a,
   size: i = "medium",
-  disabled: r = !1,
+  disabled: n = !1,
   children: c,
   onClick: f,
-  href: n,
-  target: m,
+  href: r,
+  target: u,
   rel: p,
   className: y = "",
-  ...u
+  ...m
 }) => {
   const d = "clarity-button-link", o = s && l, N = o ? `${d}--custom` : `${d}--${e}`, v = [
     d,
     N,
     `${d}--${i}`,
-    r && `${d}--disabled`,
+    n && `${d}--disabled`,
     y
   ].filter(Boolean).join(" "), b = (j) => {
     const g = parseInt(j);
@@ -1170,16 +1172,16 @@ const ht = ({
     "--custom-color": `var(--clarity-${s}-${l})`,
     "--custom-hover-color": `var(--clarity-${s}-${a || b(l)})`
   } : {};
-  return n ? /* @__PURE__ */ t(
+  return r ? /* @__PURE__ */ t(
     "a",
     {
-      href: n,
-      target: m,
-      rel: p || (m === "_blank" ? "noopener noreferrer" : void 0),
+      href: r,
+      target: u,
+      rel: p || (u === "_blank" ? "noopener noreferrer" : void 0),
       className: v,
       style: w,
-      onClick: r ? void 0 : f,
-      ...u,
+      onClick: n ? void 0 : f,
+      ...m,
       children: c
     }
   ) : /* @__PURE__ */ t(
@@ -1187,9 +1189,9 @@ const ht = ({
     {
       className: v,
       style: w,
-      disabled: r,
+      disabled: n,
       onClick: f,
-      ...u,
+      ...m,
       children: c
     }
   );
@@ -1204,16 +1206,16 @@ const ht = ({
   tone: l,
   hoverTone: a,
   defaultActiveKey: i,
-  alwaysOpen: r = !1,
+  alwaysOpen: n = !1,
   flush: c = !1,
   className: f = "",
-  children: n,
-  onSelect: m,
+  children: r,
+  onSelect: u,
   ...p
 }) => {
-  const [y, u] = T(() => i ? Array.isArray(i) ? i : [i] : []), d = (_) => {
+  const [y, m] = T(() => i ? Array.isArray(i) ? i : [i] : []), d = (_) => {
     let k;
-    r ? k = y.includes(_) ? y.filter((E) => E !== _) : [...y, _] : k = y.includes(_) ? [] : [_], u(k), m && m(y.includes(_) ? null : _, {});
+    n ? k = y.includes(_) ? y.filter((L) => L !== _) : [...y, _] : k = y.includes(_) ? [] : [_], m(k), u && u(y.includes(_) ? null : _, {});
   }, o = "clarity-accordion", N = s && l, v = N ? `${o}--custom` : `${o}--${e}`, b = [
     o,
     v,
@@ -1229,14 +1231,14 @@ const ht = ({
   } : {}, g = {
     activeKeys: y,
     toggleItem: d,
-    alwaysOpen: r,
+    alwaysOpen: n,
     variant: e,
     product: s,
     tone: l,
     hoverTone: a,
     flush: c
   };
-  return /* @__PURE__ */ t(Oe.Provider, { value: g, children: /* @__PURE__ */ t("div", { className: b, style: j, ...p, children: n }) });
+  return /* @__PURE__ */ t(Oe.Provider, { value: g, children: /* @__PURE__ */ t("div", { className: b, style: j, ...p, children: r }) });
 }, Ze = ({
   eventKey: e,
   disabled: s = !1,
@@ -1244,49 +1246,49 @@ const ht = ({
   children: a,
   ...i
 }) => {
-  const { activeKeys: r } = Ie(), c = "clarity-accordion", f = r.includes(e), n = [
+  const { activeKeys: n } = Ie(), c = "clarity-accordion", f = n.includes(e), r = [
     `${c}__item`,
     f && `${c}__item--active`,
     s && `${c}__item--disabled`,
     l
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ t("div", { className: n, ...i, children: O.Children.map(a, (m) => O.isValidElement(m) ? O.cloneElement(m, {
-    ...m.props,
+  return /* @__PURE__ */ t("div", { className: r, ...i, children: O.Children.map(a, (u) => O.isValidElement(u) ? O.cloneElement(u, {
+    ...u.props,
     eventKey: e,
     disabled: s,
     isActive: f
-  }) : m) });
+  }) : u) });
 }, Ke = ({
   className: e = "",
   children: s,
   onClick: l,
   eventKey: a,
   disabled: i = !1,
-  isActive: r = !1,
+  isActive: n = !1,
   ...c
 }) => {
-  const { toggleItem: f } = Ie(), n = "clarity-accordion", m = (p) => {
+  const { toggleItem: f } = Ie(), r = "clarity-accordion", u = (p) => {
     !i && a && f(a), l == null || l(p);
   };
   return /* @__PURE__ */ C(
     "button",
     {
-      className: [`${n}__header`, e].filter(Boolean).join(" "),
-      onClick: m,
+      className: [`${r}__header`, e].filter(Boolean).join(" "),
+      onClick: u,
       disabled: i,
-      "aria-expanded": r,
-      "aria-controls": a ? `${n}-collapse-${a}` : void 0,
+      "aria-expanded": n,
+      "aria-controls": a ? `${r}-collapse-${a}` : void 0,
       ...c,
       children: [
-        /* @__PURE__ */ t("span", { className: `${n}__title`, children: s }),
-        /* @__PURE__ */ t("span", { className: `${n}__icon`, children: /* @__PURE__ */ t(
+        /* @__PURE__ */ t("span", { className: `${r}__title`, children: s }),
+        /* @__PURE__ */ t("span", { className: `${r}__icon`, children: /* @__PURE__ */ t(
           "svg",
           {
             width: "16",
             height: "16",
             viewBox: "0 0 16 16",
             fill: "currentColor",
-            className: r ? `${n}__icon--rotated` : "",
+            className: n ? `${r}__icon--rotated` : "",
             children: /* @__PURE__ */ t("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" })
           }
         ) })
@@ -1300,16 +1302,16 @@ const ht = ({
   isActive: a = !1,
   ...i
 }) => {
-  const r = "clarity-accordion";
+  const n = "clarity-accordion";
   return /* @__PURE__ */ t(
     "div",
     {
-      id: l ? `${r}-collapse-${l}` : void 0,
+      id: l ? `${n}-collapse-${l}` : void 0,
       className: [
-        `${r}__collapse`,
-        a && `${r}__collapse--show`
+        `${n}__collapse`,
+        a && `${n}__collapse--show`
       ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ t("div", { className: [`${r}__body`, e].filter(Boolean).join(" "), ...i, children: s })
+      children: /* @__PURE__ */ t("div", { className: [`${n}__body`, e].filter(Boolean).join(" "), ...i, children: s })
     }
   );
 }, yt = Object.assign(Ye, {
@@ -1340,28 +1342,28 @@ const ht = ({
   const { isOpen: s, contentRef: l, styles: a } = Re();
   return s ? /* @__PURE__ */ t("div", { ref: l, className: "dropdown__content", style: a, children: e }) : null;
 }, lt = ({ children: e }) => /* @__PURE__ */ t("div", { className: "dropdown__menu", children: e }), at = ({ href: e, children: s }) => /* @__PURE__ */ t("a", { href: e, className: "dropdown__item", children: s }), it = () => /* @__PURE__ */ t("hr", { className: "dropdown__separator" }), se = ({ title: e, position: s = "bottom", children: l }) => {
-  const [a, i] = T(!1), [r, c] = T({}), f = V(null), n = V(null), m = V(null);
+  const [a, i] = T(!1), [n, c] = T({}), f = M(null), r = M(null), u = M(null);
   return We(() => {
     if (a) {
-      const p = n.current, y = m.current;
+      const p = r.current, y = u.current;
       if (!p || !y) return;
-      const u = p.getBoundingClientRect(), d = y.getBoundingClientRect(), o = window.innerHeight, N = window.innerWidth;
+      const m = p.getBoundingClientRect(), d = y.getBoundingClientRect(), o = window.innerHeight, N = window.innerWidth;
       let v = s;
-      s === "bottom" && u.bottom + d.height > o && (v = "top"), s === "top" && u.top - d.height < 0 && (v = "bottom"), s === "right" && u.right + d.width > N && (v = "left"), s === "left" && u.left - d.width < 0 && (v = "right");
+      s === "bottom" && m.bottom + d.height > o && (v = "top"), s === "top" && m.top - d.height < 0 && (v = "bottom"), s === "right" && m.right + d.width > N && (v = "left"), s === "left" && m.left - d.width < 0 && (v = "right");
       const b = {};
       switch (v) {
         case "top":
-          b.bottom = u.height + 4, b.left = u.width / 2 - d.width / 2;
+          b.bottom = m.height + 4, b.left = m.width / 2 - d.width / 2;
           break;
         case "right":
-          b.left = u.width + 4, b.top = u.height / 2 - d.height / 2;
+          b.left = m.width + 4, b.top = m.height / 2 - d.height / 2;
           break;
         case "left":
-          b.right = u.width + 4, b.top = u.height / 2 - d.height / 2;
+          b.right = m.width + 4, b.top = m.height / 2 - d.height / 2;
           break;
         case "bottom":
         default:
-          b.top = u.height + 4, b.left = u.width / 2 - d.width / 2;
+          b.top = m.height + 4, b.left = m.width / 2 - d.width / 2;
           break;
       }
       c(b);
@@ -1373,7 +1375,7 @@ const ht = ({
     return document.addEventListener("mousedown", p), () => {
       document.removeEventListener("mousedown", p);
     };
-  }, []), /* @__PURE__ */ t(Se.Provider, { value: { isOpen: a, setIsOpen: i, triggerRef: n, contentRef: m, styles: r }, children: /* @__PURE__ */ t(
+  }, []), /* @__PURE__ */ t(Se.Provider, { value: { isOpen: a, setIsOpen: i, triggerRef: r, contentRef: u, styles: n }, children: /* @__PURE__ */ t(
     "div",
     {
       ref: f,
@@ -1394,17 +1396,17 @@ const De = q(null), Ae = () => {
     throw new Error("useTabs must be used within a Tabs provider");
   return e;
 }, He = ({ id: e, label: s, className: l = "" }) => {
-  const { activeTab: a, setActiveTab: i, variant: r, orientation: c } = Ae(), f = a === e, n = [
+  const { activeTab: a, setActiveTab: i, variant: n, orientation: c } = Ae(), f = a === e, r = [
     "clarity-tab",
     l,
     f ? "active" : "",
-    f ? `variant-${r}` : "",
+    f ? `variant-${n}` : "",
     `orientation-${c}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ t(
     "button",
     {
-      className: n,
+      className: r,
       onClick: () => i(e),
       role: "tab",
       "aria-selected": f,
@@ -1414,11 +1416,11 @@ const De = q(null), Ae = () => {
 };
 He.displayName = "Tabs.Tab";
 const Pe = ({ id: e, children: s, className: l = "" }) => {
-  const { activeTab: a } = Ae(), i = a === e, r = {
+  const { activeTab: a } = Ae(), i = a === e, n = {
     visibility: i ? "visible" : "hidden",
     gridArea: "1 / 1"
   };
-  return i || (r.pointerEvents = "none"), /* @__PURE__ */ t("div", { className: `clarity-tab-content ${l}`, role: "tabpanel", style: r, children: s });
+  return i || (n.pointerEvents = "none"), /* @__PURE__ */ t("div", { className: `clarity-tab-content ${l}`, role: "tabpanel", style: n, children: s });
 };
 Pe.displayName = "Tabs.Content";
 const de = ({
@@ -1428,17 +1430,17 @@ const de = ({
   orientation: a = "horizontal",
   className: i = ""
 }) => {
-  const [r, c] = T(s), f = te(() => ({
-    activeTab: r,
+  const [n, c] = T(s), f = te(() => ({
+    activeTab: n,
     setActiveTab: c,
     variant: l,
     orientation: a
-  }), [r, l, a]), n = [
+  }), [n, l, a]), r = [
     "clarity-tabs-container",
     i,
     `orientation-${a}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ t(De.Provider, { value: f, children: /* @__PURE__ */ t("div", { className: n, children: e }) });
+  return /* @__PURE__ */ t(De.Provider, { value: f, children: /* @__PURE__ */ t("div", { className: r, children: e }) });
 };
 de.Tab = He;
 de.Content = Pe;
@@ -1449,35 +1451,35 @@ const vt = ({
   variant: l = "primary",
   product: a,
   tone: i,
-  bgColor: r,
+  bgColor: n,
   textColor: c,
   children: f,
-  className: n = "",
-  disabled: m = !1,
+  className: r = "",
+  disabled: u = !1,
   delay: p = 200,
   hideDelay: y = 100,
-  trigger: u = "hover",
+  trigger: m = "hover",
   arrow: d = !0,
   ...o
 }) => {
-  const [N, v] = T(!1), [b, w] = T(null), j = V(null), g = V(null), _ = "clarity-tooltip", k = !!r, E = a && i && !k;
+  const [N, v] = T(!1), [b, w] = T(null), j = M(null), g = M(null), _ = "clarity-tooltip", k = !!n, L = a && i && !k;
   let x = "";
-  k ? x = `${_}__content--custom-bg` : E ? x = `${_}__content--custom` : x = `${_}__content--${l}`;
+  k ? x = `${_}__content--custom-bg` : L ? x = `${_}__content--custom` : x = `${_}__content--${l}`;
   const B = [
     _,
     `${_}--${s}`,
-    n
+    r
   ].filter(Boolean).join(" "), I = [
     `${_}__content`,
     x,
     d && `${_}__content--arrow`
-  ].filter(Boolean).join(" "), A = {}, L = {};
-  k && r && (L["--tooltip-bg-color"] = r), c && (L["--tooltip-text-color"] = c), E && a && i && (L["--tooltip-product"] = a, L["--tooltip-tone"] = i);
+  ].filter(Boolean).join(" "), A = {}, E = {};
+  k && n && (E["--tooltip-bg-color"] = n), c && (E["--tooltip-text-color"] = c), L && a && i && (E["--tooltip-product"] = a, E["--tooltip-tone"] = i);
   const $ = {
     ...A,
-    ...Object.keys(L).length > 0 ? L : {}
-  }, M = () => {
-    if (m) return;
+    ...Object.keys(E).length > 0 ? E : {}
+  }, V = () => {
+    if (u) return;
     b && clearTimeout(b);
     const P = setTimeout(() => {
       v(!0);
@@ -1490,9 +1492,9 @@ const vt = ({
     }, y);
     w(P);
   }, F = () => {
-    m || v(!N);
+    u || v(!N);
   }, Q = () => {
-    m || M();
+    u || V();
   }, K = () => {
     H();
   };
@@ -1500,7 +1502,7 @@ const vt = ({
     b && clearTimeout(b);
   }, [b]);
   const U = {};
-  return u === "hover" ? (U.onMouseEnter = M, U.onMouseLeave = H) : u === "click" ? U.onClick = F : u === "focus" && (U.onFocus = Q, U.onBlur = K), /* @__PURE__ */ C(
+  return m === "hover" ? (U.onMouseEnter = V, U.onMouseLeave = H) : m === "click" ? U.onClick = F : m === "focus" && (U.onFocus = Q, U.onBlur = K), /* @__PURE__ */ C(
     "div",
     {
       ref: g,
@@ -1523,7 +1525,7 @@ const vt = ({
       ]
     }
   );
-}, nt = ({ columns: e, viewMode: s }) => {
+}, rt = ({ columns: e, viewMode: s }) => {
   const l = Array.from({ length: 5 }, (a, i) => i);
   return s === "card" ? /* @__PURE__ */ C("div", { className: "card-view-wrapper is-loading", children: [
     /* @__PURE__ */ t("div", { className: "skeleton card-view-header" }),
@@ -1538,16 +1540,16 @@ const vt = ({
   data: l,
   viewMode: a = "table",
   isScrollable: i = !1,
-  isLoading: r = !1
+  isLoading: n = !1
 }) => {
-  const [c, f] = T(null), [n, m] = T("none"), p = (o) => {
-    o.sortable && (c === o.key ? m((N) => N === "asc" ? "desc" : N === "desc" ? "none" : "asc") : (f(o.key), m("asc")));
-  }, y = te(() => n === "none" || !c ? l : [...l].sort((o, N) => {
+  const [c, f] = T(null), [r, u] = T("none"), p = (o) => {
+    o.sortable && (c === o.key ? u((N) => N === "asc" ? "desc" : N === "desc" ? "none" : "asc") : (f(o.key), u("asc")));
+  }, y = te(() => r === "none" || !c ? l : [...l].sort((o, N) => {
     const v = o[c], b = N[c];
-    return v < b ? n === "asc" ? -1 : 1 : v > b ? n === "asc" ? 1 : -1 : 0;
-  }), [l, c, n]), u = (o) => o.sortable ? c !== o.key || n === "none" ? /* @__PURE__ */ t("span", { className: "sort-icon", children: "↕" }) : n === "asc" ? /* @__PURE__ */ t("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ t("span", { className: "sort-icon", children: "↓" }) : null;
-  if (r)
-    return /* @__PURE__ */ t(nt, { columns: s, viewMode: a });
+    return v < b ? r === "asc" ? -1 : 1 : v > b ? r === "asc" ? 1 : -1 : 0;
+  }), [l, c, r]), m = (o) => o.sortable ? c !== o.key || r === "none" ? /* @__PURE__ */ t("span", { className: "sort-icon", children: "↕" }) : r === "asc" ? /* @__PURE__ */ t("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ t("span", { className: "sort-icon", children: "↓" }) : null;
+  if (n)
+    return /* @__PURE__ */ t(rt, { columns: s, viewMode: a });
   const d = `table-variant-${e} ${i ? "is-scrollable" : ""}`;
   return a === "card" ? /* @__PURE__ */ C("div", { className: `card-view-wrapper ${d}`, children: [
     /* @__PURE__ */ t("div", { className: `card-view-header table-header-cell-${e}`, children: s.map((o) => /* @__PURE__ */ C(
@@ -1558,7 +1560,7 @@ const vt = ({
         style: { minWidth: o.minWidth },
         children: [
           o.header,
-          u(o)
+          m(o)
         ]
       },
       o.key
@@ -1573,7 +1575,7 @@ const vt = ({
         style: { minWidth: o.minWidth },
         children: [
           o.header,
-          u(o)
+          m(o)
         ]
       },
       o.key
@@ -1586,34 +1588,34 @@ const vt = ({
   tone: l,
   size: a = "medium",
   color: i,
-  className: r = "",
+  className: n = "",
   "aria-label": c = "Carregando...",
   ...f
 }) => {
-  const n = "clarity-spinner", y = i ? `${n}--custom` : s && l ? `${n}--custom` : `${n}--${e}`, u = [
-    n,
-    `${n}--${a}`,
+  const r = "clarity-spinner", y = i ? `${r}--custom` : s && l ? `${r}--custom` : `${r}--${e}`, m = [
+    r,
+    `${r}--${a}`,
     y,
-    r
+    n
   ].filter(Boolean).join(" "), d = {};
   return i ? d["--spinner-color"] = i : s && l && (d["--spinner-color"] = `var(--clarity-${s}-${l})`), /* @__PURE__ */ t(
     "div",
     {
-      className: u,
+      className: m,
       style: d,
       role: "status",
       "aria-label": c,
       ...f,
-      children: /* @__PURE__ */ t("div", { className: `${n}__container`, children: /* @__PURE__ */ t(
+      children: /* @__PURE__ */ t("div", { className: `${r}__container`, children: /* @__PURE__ */ t(
         "svg",
         {
-          className: `${n}__svg`,
+          className: `${r}__svg`,
           viewBox: "0 0 50 50",
           xmlns: "http://www.w3.org/2000/svg",
           children: /* @__PURE__ */ t(
             "circle",
             {
-              className: `${n}__circle`,
+              className: `${r}__circle`,
               cx: "25",
               cy: "25",
               r: "20",