beth-clarity 1.1.14 → 1.1.16

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

@@ -7,10 +7,10 @@ const wt = ({
   tone: a,
   size: l = "medium",
   bgColor: n,
-  textColor: i,
+  textColor: r,
   children: c,
   className: f = "",
-  rounded: r = !1,
+  rounded: i = !1,
   outlined: o = !1,
   ...d
 }) => {
@@ -21,11 +21,11 @@ const wt = ({
     v,
     u,
     `${v}--${l}`,
-    r ? `${v}--rounded` : "",
+    i ? `${v}--rounded` : "",
     o ? `${v}--outlined` : "",
     f
   ].filter(Boolean).join(" "), y = {};
-  m && (y.backgroundColor = n, i && (y.color = i));
+  m && (y.backgroundColor = n, r && (y.color = r));
   const b = p && t && a ? {
     "--custom-bg-color": `var(--clarity-${t}-${a})`,
     "--custom-text-color": a && parseInt(a) >= 500 ? "white" : `var(--clarity-${t}-800)`
@@ -48,10 +48,10 @@ const wt = ({
   disabled: a = !1,
   loading: l = !1,
   children: n,
-  onClick: i,
+  onClick: r,
   type: c = "button",
   className: f = "",
-  title: r,
+  title: i,
   customColor: o,
   customColorHover: d,
   ...v
@@ -70,9 +70,9 @@ const wt = ({
       className: p,
       style: u,
       disabled: a || l,
-      onClick: i,
+      onClick: r,
       type: c,
-      title: r,
+      title: i,
       ...v,
       children: [
         l && /* @__PURE__ */ s("div", { className: `${m}__spinner` }),
@@ -86,10 +86,10 @@ const wt = ({
   filled: a = !0,
   items: l,
   value: n,
-  multiple: i = !1,
+  multiple: r = !1,
   disabled: c = !1,
   onChange: f,
-  className: r = "",
+  className: i = "",
   ...o
 }) => {
   const d = "clarity-button-group", v = `${d}--${e}`, m = [
@@ -98,17 +98,17 @@ const wt = ({
     `${d}--${t}`,
     !a && `${d}--outline`,
     c && `${d}--disabled`,
-    r
+    i
   ].filter(Boolean).join(" "), p = (h) => {
     if (c || !f) return;
     const y = l.find((b) => b.id === h);
     if (!(y != null && y.disabled))
-      if (i) {
+      if (r) {
         const b = Array.isArray(n) ? n : [], _ = b.includes(h) ? b.filter((B) => B !== h) : [...b, h];
         f(_);
       } else
         f(h);
-  }, u = (h) => i ? Array.isArray(n) && n.includes(h) : n === h;
+  }, u = (h) => r ? Array.isArray(n) && n.includes(h) : n === h;
   return /* @__PURE__ */ s(
     "div",
     {
@@ -147,10 +147,10 @@ const wt = ({
   label: a,
   helperText: l,
   error: n = !1,
-  errorMessage: i,
+  errorMessage: r,
   startIcon: c,
   endIcon: f,
-  className: r = "",
+  className: i = "",
   disabled: o = !1,
   value: d,
   defaultValue: v,
@@ -178,7 +178,7 @@ const wt = ({
     _ && "clarity-input--has-value",
     c && "clarity-input--with-start-icon",
     f && "clarity-input--with-end-icon",
-    r
+    i
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: "clarity-input-wrapper", children: [
     /* @__PURE__ */ C("div", { className: L, children: [
@@ -201,7 +201,7 @@ const wt = ({
       ] }),
       f && /* @__PURE__ */ s("div", { className: "clarity-input__end-icon", children: f })
     ] }),
-    (l || n && i) && /* @__PURE__ */ s("div", { className: "clarity-input__helper-text", children: n && i ? i : l })
+    (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-input__helper-text", children: n && r ? r : l })
   ] });
 });
 st.displayName = "Input";
@@ -211,10 +211,10 @@ const at = E.forwardRef(({
   label: a,
   helperText: l,
   error: n = !1,
-  errorMessage: i,
+  errorMessage: r,
   startIcon: c,
   endIcon: f,
-  className: r = "",
+  className: i = "",
   disabled: o = !1,
   value: d,
   defaultValue: v,
@@ -246,7 +246,7 @@ const at = E.forwardRef(({
     $ && "clarity-textarea--has-value",
     c && "clarity-textarea--with-start-icon",
     f && "clarity-textarea--with-end-icon",
-    r
+    i
   ].filter(Boolean).join(" "), O = {
     resize: b ? "vertical" : "none",
     minHeight: h ? `${h}px` : void 0,
@@ -275,7 +275,7 @@ const at = E.forwardRef(({
       ] }),
       f && /* @__PURE__ */ s("div", { className: "clarity-textarea__end-icon", children: f })
     ] }),
-    (l || n && i) && /* @__PURE__ */ s("div", { className: "clarity-textarea__helper-text", children: n && i ? i : l })
+    (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-textarea__helper-text", children: n && r ? r : l })
   ] });
 });
 at.displayName = "Textarea";
@@ -285,10 +285,10 @@ const lt = E.forwardRef(({
   label: a,
   helperText: l,
   error: n = !1,
-  errorMessage: i,
+  errorMessage: r,
   startIcon: c,
   endIcon: f,
-  className: r = "",
+  className: i = "",
   disabled: o = !1,
   value: d,
   defaultValue: v,
@@ -338,7 +338,7 @@ const lt = E.forwardRef(({
     _ && "clarity-select--searchable",
     c && "clarity-select--with-start-icon",
     (f || b) && "clarity-select--with-end-icon",
-    r
+    i
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: "clarity-select-wrapper", children: [
     /* @__PURE__ */ C(
@@ -447,7 +447,7 @@ const lt = E.forwardRef(({
         ]
       }
     ),
-    (l || n && i) && /* @__PURE__ */ s("div", { className: "clarity-select__helper-text", children: n && i ? i : l })
+    (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-select__helper-text", children: n && r ? r : l })
   ] });
 });
 lt.displayName = "Select";
@@ -457,10 +457,10 @@ const nt = Ke(({
   onChange: a,
   placeholder: l = "Selecione opções",
   label: n,
-  helperText: i,
+  helperText: r,
   error: c = !1,
   errorMessage: f,
-  disabled: r = !1,
+  disabled: i = !1,
   variant: o = "primary",
   size: d = "medium",
   maxSelectedLabels: v = 3,
@@ -484,23 +484,23 @@ const nt = Ke(({
   const H = e.filter(
     (N) => N.label.toLowerCase().includes($.toLowerCase())
   ), V = () => {
-    r || (w(!T), j(!T), T ? L("") : setTimeout(() => {
+    i || (w(!T), j(!T), T ? L("") : setTimeout(() => {
       var N;
       (N = A.current) == null || N.focus();
     }, 100));
   }, F = (N, D) => {
-    if (r)
+    if (i)
       return;
     D && (D.stopPropagation(), D.preventDefault());
     const U = t.includes(N);
     let R;
     U ? R = t.filter((se) => se !== N) : R = [...t, N], a && a(R);
   }, X = (N, D) => {
-    if (D.stopPropagation(), r) return;
+    if (D.stopPropagation(), i) return;
     const U = t.filter((R) => R !== N);
     a == null || a(U);
   }, te = (N) => {
-    N.stopPropagation(), !r && (a == null || a([]));
+    N.stopPropagation(), !i && (a == null || a([]));
   }, G = (N) => {
     L(N.target.value);
   }, M = (N) => {
@@ -513,7 +513,7 @@ const nt = Ke(({
     return /* @__PURE__ */ C("div", { className: "clarity-multiselect__chips", children: [
       D.map((R) => /* @__PURE__ */ C("div", { className: "clarity-multiselect__chip", children: [
         /* @__PURE__ */ s("span", { className: "clarity-multiselect__chip-label", children: R.label }),
-        !r && /* @__PURE__ */ s(
+        !i && /* @__PURE__ */ s(
           "button",
           {
             type: "button",
@@ -541,7 +541,7 @@ const nt = Ke(({
     k && "clarity-multiselect--focused",
     le && "clarity-multiselect--label-up",
     c && "clarity-multiselect--error",
-    r && "clarity-multiselect--disabled",
+    i && "clarity-multiselect--disabled",
     t.length > 0 && "clarity-multiselect--has-value"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: re, children: [
@@ -565,7 +565,7 @@ const nt = Ke(({
                 ] }),
                 /* @__PURE__ */ s("div", { className: "clarity-multiselect__content", children: t.length > 0 ? ie() : /* @__PURE__ */ s("span", { className: "clarity-multiselect__placeholder", children: l }) }),
                 /* @__PURE__ */ C("div", { className: "clarity-multiselect__icons", children: [
-                  t.length > 0 && !r && /* @__PURE__ */ s(
+                  t.length > 0 && !i && /* @__PURE__ */ s(
                     "button",
                     {
                       type: "button",
@@ -603,7 +603,7 @@ const nt = Ke(({
               }
             ) }),
             /* @__PURE__ */ s("ul", { className: "clarity-multiselect__options", children: H.length > 0 ? H.map((N) => {
-              const D = t.includes(N.value), U = N.disabled || r;
+              const D = t.includes(N.value), U = N.disabled || i;
               return /* @__PURE__ */ C(
                 "li",
                 {
@@ -637,7 +637,7 @@ const nt = Ke(({
         ]
       }
     ),
-    (i || c && f) && /* @__PURE__ */ s("div", { className: "clarity-multiselect__helper", children: c && f ? /* @__PURE__ */ s("span", { className: "clarity-multiselect__error-message", children: f }) : i && /* @__PURE__ */ s("span", { className: "clarity-multiselect__helper-text", children: i }) })
+    (r || c && f) && /* @__PURE__ */ s("div", { className: "clarity-multiselect__helper", children: c && f ? /* @__PURE__ */ s("span", { className: "clarity-multiselect__error-message", children: f }) : r && /* @__PURE__ */ s("span", { className: "clarity-multiselect__helper-text", children: r }) })
   ] });
 });
 nt.displayName = "MultiSelect";
@@ -651,7 +651,7 @@ const fe = z(null), pe = () => {
   className: t = "",
   title: a
 }) => {
-  const { onClose: l, variant: n, showCloseButton: i } = pe(), c = [
+  const { onClose: l, variant: n, showCloseButton: r } = pe(), c = [
     "clarity-modal-header",
     t,
     n && `clarity-modal-header--${n}`
@@ -662,8 +662,8 @@ const fe = z(null), pe = () => {
   return /* @__PURE__ */ C("div", { className: c, children: [
     a && /* @__PURE__ */ s("h2", { className: "clarity-modal-title", children: a }),
     e,
-    i && /* @__PURE__ */ s("button", { className: f, onClick: (r) => {
-      r.stopPropagation(), l();
+    r && /* @__PURE__ */ s("button", { className: f, onClick: (i) => {
+      i.stopPropagation(), l();
     }, children: "×" })
   ] });
 };
@@ -675,12 +675,11 @@ const ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ C("div", { cl
   e
 ] });
 ve.displayName = "Modal.Footer";
-const Ne = ({ children: e, onClick: t, variant: a }) => W(e, {
-  onClick: (l) => {
-    var n, i;
-    t == null || t(), (i = (n = e.props).onClick) == null || i.call(n, l);
-  },
-  variant: a
+const Ne = ({ children: e, onClick: t }) => W(e, {
+  onClick: (a) => {
+    var l, n;
+    t == null || t(), (n = (l = e.props).onClick) == null || n.call(l, a);
+  }
 });
 Ne.displayName = "Modal.Trigger";
 const be = ({ children: e }) => {
@@ -699,10 +698,10 @@ const J = ({
   onOpen: a,
   children: l,
   className: n = "",
-  variant: i,
+  variant: r,
   size: c = "medium",
   showCloseButton: f = !0,
-  closeOnOverlayClick: r = !0
+  closeOnOverlayClick: i = !0
 }) => {
   const [o, d] = x(!1), m = e !== void 0 ? e : o, p = t || (() => {
     d(!1);
@@ -718,14 +717,14 @@ const J = ({
     };
   }, [m, p]);
   const u = (_) => {
-    r && _.target === _.currentTarget && p();
+    i && _.target === _.currentTarget && p();
   }, h = E.Children.toArray(l).find(
     (_) => Z(_) && _.type.displayName === "Modal.Trigger"
   ), y = E.Children.toArray(l).filter(
     (_) => Z(_) && _.type.displayName !== "Modal.Trigger"
   ), b = ["clarity-modal", n, `clarity-modal--${c}`].filter(Boolean).join(" ");
-  return /* @__PURE__ */ C(fe.Provider, { value: { onClose: p, variant: i, showCloseButton: f }, children: [
-    h && W(h, { onClick: () => d(!0), variant: i }),
+  return /* @__PURE__ */ C(fe.Provider, { value: { onClose: p, variant: r, showCloseButton: f }, children: [
+    h && W(h, { onClick: () => d(!0) }),
     m && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", onClick: u, children: /* @__PURE__ */ s("div", { className: b, children: y }) })
   ] });
 };
@@ -740,7 +739,7 @@ const Ce = z(void 0), kt = () => {
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
   return e;
-}, it = ({ id: e, message: t, variant: a, duration: l, onClose: n, invertColors: i }) => {
+}, it = ({ id: e, message: t, variant: a, duration: l, onClose: n, invertColors: r }) => {
   const [c, f] = x("entering");
   S(() => {
     const o = setTimeout(() => {
@@ -754,13 +753,13 @@ const Ce = z(void 0), kt = () => {
       clearTimeout(o), clearTimeout(d), clearTimeout(v);
     };
   }, [e, l, n]);
-  const r = [
+  const i = [
     "cl-toast",
     a,
-    i ? "colored-background" : "",
+    r ? "colored-background" : "",
     `cl-toast-${c}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ C("div", { className: r, children: [
+  return /* @__PURE__ */ C("div", { className: i, children: [
     /* @__PURE__ */ s("div", { className: "cl-toast-message", children: t }),
     /* @__PURE__ */ s("button", { onClick: () => f("exiting"), className: "cl-toast-close-button", children: "×" }),
     /* @__PURE__ */ s(
@@ -774,8 +773,8 @@ const Ce = z(void 0), kt = () => {
 }, xt = ({ children: e }) => {
   const [t, a] = x([]), l = Y(() => {
     if (typeof document < "u") {
-      const r = document.createElement("div");
-      return r.id = "toast-portal-root", r;
+      const i = document.createElement("div");
+      return i.id = "toast-portal-root", i;
     }
     return null;
   }, []);
@@ -785,24 +784,24 @@ const Ce = z(void 0), kt = () => {
         document.body.removeChild(l);
       };
   }, [l]);
-  const n = ne((r) => {
+  const n = ne((i) => {
     const d = {
       id: (/* @__PURE__ */ new Date()).toISOString() + Math.random(),
       // duration: 5,
       // position: 'right-top',
-      ...r
+      ...i
     };
     a((v) => {
       const m = [d, ...v];
       return m.length > 4 ? m.slice(0, 4) : m;
     });
-  }, []), i = ne((r) => {
-    a((o) => o.filter((d) => d.id !== r));
-  }, []), c = Y(() => t.reduce((r, o) => (r[o.position] || (r[o.position] = []), r[o.position].push(o), r), {}), [t]), f = Y(() => ({ show: n }), [n]);
+  }, []), r = ne((i) => {
+    a((o) => o.filter((d) => d.id !== i));
+  }, []), c = Y(() => t.reduce((i, o) => (i[o.position] || (i[o.position] = []), i[o.position].push(o), i), {}), [t]), f = Y(() => ({ show: n }), [n]);
   return /* @__PURE__ */ C(Ce.Provider, { value: f, children: [
     e,
     l && tt.createPortal(
-      Object.entries(c).map(([r, o]) => /* @__PURE__ */ s("div", { className: `cl-toast-container ${r}`, children: o.map((d) => /* @__PURE__ */ s(it, { ...d, onClose: i }, d.id)) }, r)),
+      Object.entries(c).map(([i, o]) => /* @__PURE__ */ s("div", { className: `cl-toast-container ${i}`, children: o.map((d) => /* @__PURE__ */ s(it, { ...d, onClose: r }, d.id)) }, i)),
       l
     )
   ] });
@@ -815,18 +814,18 @@ const Ce = z(void 0), kt = () => {
   children: e,
   className: t = ""
 }) => {
-  const { onClose: a, variant: l, showCloseButton: n, title: i } = we(), c = [
+  const { onClose: a, variant: l, showCloseButton: n, title: r } = we(), c = [
     "clarity-offcanvas-header",
     t
   ].filter(Boolean).join(" "), f = [
     "clarity-offcanvas-close",
     l && `clarity-offcanvas-close--${l}`
-  ].filter(Boolean).join(" "), r = [
+  ].filter(Boolean).join(" "), i = [
     "clarity-offcanvas-title",
     l && `clarity-offcanvas-title--${l}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: c, children: [
-    i && /* @__PURE__ */ s("h2", { className: r, children: i }),
+    r && /* @__PURE__ */ s("h2", { className: i, children: r }),
     e,
     n && /* @__PURE__ */ s("button", { className: f, onClick: (o) => {
       o.stopPropagation(), a();
@@ -838,8 +837,8 @@ const $e = ({ children: e, className: t = "" }) => /* @__PURE__ */ s("div", { cl
 $e.displayName = "Offcanvas.Content";
 const ke = ({ children: e, onClick: t, variant: a }) => W(e, {
   onClick: (l) => {
-    var n, i;
-    t == null || t(), (i = (n = e.props).onClick) == null || i.call(n, l);
+    var n, r;
+    t == null || t(), (r = (n = e.props).onClick) == null || r.call(n, l);
   },
   variant: a
 });
@@ -862,10 +861,10 @@ const K = ({
   onOpen: a,
   children: l,
   className: n = "",
-  variant: i,
+  variant: r,
   placement: c = "right",
   closeOnOverlayClick: f = !0,
-  showCloseButton: r = !0,
+  showCloseButton: i = !0,
   title: o
 }) => {
   const [d, v] = x(!1), [m, p] = x(!1), [u, h] = x(!1), y = e !== void 0, b = y ? e : d, _ = ne(() => {
@@ -920,14 +919,14 @@ const K = ({
     "clarity-offcanvas",
     n,
     `clarity-offcanvas--${c}`,
-    i && `clarity-offcanvas--${i}`,
+    r && `clarity-offcanvas--${r}`,
     m ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
   ].filter(Boolean).join(" "), O = [
     "clarity-offcanvas-overlay",
     m ? "clarity-offcanvas-overlay--visible" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ C(_e.Provider, { value: { onClose: _, variant: i, showCloseButton: r, placement: c, title: o }, children: [
-    $ && W($, { onClick: B, variant: i }),
+  return /* @__PURE__ */ C(_e.Provider, { value: { onClose: _, variant: r, showCloseButton: i, placement: c, title: o }, children: [
+    $ && W($, { onClick: B, variant: r }),
     u && // Only render if shouldRender is true
     /* @__PURE__ */ s("div", { className: O, onClick: T, children: /* @__PURE__ */ C("div", { className: A, children: [
       L,
@@ -950,10 +949,10 @@ const rt = E.forwardRef(({
   size: a = "medium",
   label: l,
   helperText: n,
-  error: i = !1,
+  error: r = !1,
   errorMessage: c,
   labelPosition: f = "right",
-  className: r = "",
+  className: i = "",
   disabled: o = !1,
   checked: d,
   id: v,
@@ -963,15 +962,15 @@ const rt = E.forwardRef(({
     "clarity-check-input-wrapper",
     `clarity-check-input-wrapper--${f}`,
     o && "clarity-check-input-wrapper--disabled",
-    i && "clarity-check-input-wrapper--error"
+    r && "clarity-check-input-wrapper--error"
   ].filter(Boolean).join(" "), y = [
     "clarity-check-input",
     `clarity-check-input--${e}`,
     `clarity-check-input--${a}`,
     t && `clarity-check-input--${t}`,
-    i && "clarity-check-input--error",
+    r && "clarity-check-input--error",
     o && "clarity-check-input--disabled",
-    r
+    i
   ].filter(Boolean).join(" "), b = [
     "clarity-check-input__label",
     `clarity-check-input__label--${a}`,
@@ -1015,7 +1014,7 @@ const rt = E.forwardRef(({
       ] }),
       l && /* @__PURE__ */ s("span", { className: b, children: l })
     ] }),
-    (n || i && c) && /* @__PURE__ */ s("div", { className: "clarity-check-input__helper-text", children: i && c ? c : n })
+    (n || r && c) && /* @__PURE__ */ s("div", { className: "clarity-check-input__helper-text", children: r && c ? c : n })
   ] });
 });
 rt.displayName = "CheckInput";
@@ -1025,10 +1024,10 @@ const ot = E.forwardRef(({
   label: a,
   helperText: l,
   error: n = !1,
-  errorMessage: i,
+  errorMessage: r,
   labelPosition: c = "right",
   className: f = "",
-  disabled: r = !1,
+  disabled: i = !1,
   checked: o,
   id: d,
   ...v
@@ -1036,19 +1035,19 @@ const ot = E.forwardRef(({
   const p = d || `input-switch-${Math.random().toString(36).substr(2, 9)}`, u = [
     "clarity-input-switch-wrapper",
     `clarity-input-switch-wrapper--${c}`,
-    r && "clarity-input-switch-wrapper--disabled",
+    i && "clarity-input-switch-wrapper--disabled",
     n && "clarity-input-switch-wrapper--error"
   ].filter(Boolean).join(" "), h = [
     "clarity-input-switch",
     `clarity-input-switch--${t}`,
     e && `clarity-input-switch--${e}`,
     n && "clarity-input-switch--error",
-    r && "clarity-input-switch--disabled",
+    i && "clarity-input-switch--disabled",
     f
   ].filter(Boolean).join(" "), y = [
     "clarity-input-switch__label",
     `clarity-input-switch__label--${t}`,
-    r && "clarity-input-switch__label--disabled"
+    i && "clarity-input-switch__label--disabled"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: "clarity-input-switch-container", children: [
     /* @__PURE__ */ C("label", { className: u, htmlFor: p, children: [
@@ -1059,7 +1058,7 @@ const ot = E.forwardRef(({
           id: p,
           type: "checkbox",
           className: h,
-          disabled: r,
+          disabled: i,
           checked: o,
           ...v
         }
@@ -1067,7 +1066,7 @@ const ot = E.forwardRef(({
       /* @__PURE__ */ s("div", { className: "clarity-input-switch__track", children: /* @__PURE__ */ s("div", { className: "clarity-input-switch__thumb" }) }),
       a && /* @__PURE__ */ s("span", { className: y, children: a })
     ] }),
-    (l || n && i) && /* @__PURE__ */ s("div", { className: "clarity-input-switch__helper-text", children: n && i ? i : l })
+    (l || n && r) && /* @__PURE__ */ s("div", { className: "clarity-input-switch__helper-text", children: n && r ? r : l })
   ] });
 });
 ot.displayName = "InputSwitch";
@@ -1119,7 +1118,7 @@ const Q = ({
   variant: l = "clarity-primary",
   children: n
 }) => {
-  const [i, c] = x(!1), f = e !== void 0, r = f ? e : i, o = () => {
+  const [r, c] = x(!1), f = e !== void 0, i = f ? e : r, o = () => {
     f || c(!0);
   }, d = () => {
     t ? t() : c(!1);
@@ -1130,10 +1129,10 @@ const Q = ({
     const h = (y) => {
       y.key === "Escape" && d();
     };
-    return r ? (document.addEventListener("keydown", h), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+    return i ? (document.addEventListener("keydown", h), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
       document.removeEventListener("keydown", h), document.body.style.overflow = "unset";
     };
-  }, [r, d]);
+  }, [i, d]);
   const m = E.Children.toArray(n).find(
     (h) => Z(h) && h.type.displayName === "ConfirmationDialog.Trigger"
   ), p = E.Children.toArray(n).filter(
@@ -1141,7 +1140,7 @@ const Q = ({
   ), u = `clarity-confirmation-dialog clarity-confirmation-dialog--${l}`;
   return /* @__PURE__ */ C(Te.Provider, { value: { variant: l, onClose: d, onConfirm: v, onOpen: o }, children: [
     m,
-    r && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ s("div", { className: u, children: p }) })
+    i && /* @__PURE__ */ s("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ s("div", { className: u, children: p }) })
   ] });
 };
 Q.Header = Be;
@@ -1157,10 +1156,10 @@ const Tt = ({
   disabled: a = !1,
   loading: l = !1,
   children: n,
-  onClick: i,
+  onClick: r,
   type: c = "button",
   className: f = "",
-  "aria-label": r,
+  "aria-label": i,
   title: o,
   customColor: d,
   customColorHover: v,
@@ -1179,9 +1178,9 @@ const Tt = ({
     {
       className: u,
       disabled: a || l,
-      onClick: i,
+      onClick: r,
       type: c,
-      "aria-label": r,
+      "aria-label": i,
       title: o,
       style: h,
       ...m,
@@ -1197,10 +1196,10 @@ const Tt = ({
   tone: a,
   hoverTone: l,
   size: n = "medium",
-  disabled: i = !1,
+  disabled: r = !1,
   children: c,
   onClick: f,
-  href: r,
+  href: i,
   target: o,
   rel: d,
   className: v = "",
@@ -1210,7 +1209,7 @@ const Tt = ({
     p,
     h,
     `${p}--${n}`,
-    i && `${p}--disabled`,
+    r && `${p}--disabled`,
     v
   ].filter(Boolean).join(" "), b = (B) => {
     const T = parseInt(B);
@@ -1219,15 +1218,15 @@ const Tt = ({
     "--custom-color": `var(--clarity-${t}-${a})`,
     "--custom-hover-color": `var(--clarity-${t}-${l || b(a)})`
   } : {};
-  return r ? /* @__PURE__ */ s(
+  return i ? /* @__PURE__ */ s(
     "a",
     {
-      href: r,
+      href: i,
       target: o,
       rel: d || (o === "_blank" ? "noopener noreferrer" : void 0),
       className: y,
       style: _,
-      onClick: i ? void 0 : f,
+      onClick: r ? void 0 : f,
       ...m,
       children: c
     }
@@ -1236,7 +1235,7 @@ const Tt = ({
     {
       className: y,
       style: _,
-      disabled: i,
+      disabled: r,
       onClick: f,
       ...m,
       children: c
@@ -1253,16 +1252,16 @@ const Tt = ({
   tone: a,
   hoverTone: l,
   defaultActiveKey: n,
-  alwaysOpen: i = !1,
+  alwaysOpen: r = !1,
   flush: c = !1,
   className: f = "",
-  children: r,
+  children: i,
   onSelect: o,
   ...d
 }) => {
   const [v, m] = x(() => n ? Array.isArray(n) ? n : [n] : []), p = (w) => {
     let $;
-    i ? $ = v.includes(w) ? v.filter((L) => L !== w) : [...v, w] : $ = v.includes(w) ? [] : [w], m($), o && o(v.includes(w) ? null : w, {});
+    r ? $ = v.includes(w) ? v.filter((L) => L !== w) : [...v, w] : $ = v.includes(w) ? [] : [w], m($), o && o(v.includes(w) ? null : w, {});
   }, u = "clarity-accordion", h = t && a, y = h ? `${u}--custom` : `${u}--${e}`, b = [
     u,
     y,
@@ -1278,14 +1277,14 @@ const Tt = ({
   } : {}, T = {
     activeKeys: v,
     toggleItem: p,
-    alwaysOpen: i,
+    alwaysOpen: r,
     variant: e,
     product: t,
     tone: a,
     hoverTone: l,
     flush: c
   };
-  return /* @__PURE__ */ s(Ie.Provider, { value: T, children: /* @__PURE__ */ s("div", { className: b, style: B, ...d, children: r }) });
+  return /* @__PURE__ */ s(Ie.Provider, { value: T, children: /* @__PURE__ */ s("div", { className: b, style: B, ...d, children: i }) });
 }, dt = ({
   eventKey: e,
   disabled: t = !1,
@@ -1293,13 +1292,13 @@ const Tt = ({
   children: l,
   ...n
 }) => {
-  const { activeKeys: i } = De(), c = "clarity-accordion", f = i.includes(e), r = [
+  const { activeKeys: r } = De(), c = "clarity-accordion", f = r.includes(e), i = [
     `${c}__item`,
     f && `${c}__item--active`,
     t && `${c}__item--disabled`,
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: r, ...n, children: E.Children.map(l, (o) => E.isValidElement(o) ? E.cloneElement(o, {
+  return /* @__PURE__ */ s("div", { className: i, ...n, children: E.Children.map(l, (o) => E.isValidElement(o) ? E.cloneElement(o, {
     ...o.props,
     eventKey: e,
     disabled: t,
@@ -1311,31 +1310,31 @@ const Tt = ({
   onClick: a,
   eventKey: l,
   disabled: n = !1,
-  isActive: i = !1,
+  isActive: r = !1,
   ...c
 }) => {
-  const { toggleItem: f } = De(), r = "clarity-accordion", o = (d) => {
+  const { toggleItem: f } = De(), i = "clarity-accordion", o = (d) => {
     !n && l && f(l), a == null || a(d);
   };
   return /* @__PURE__ */ C(
     "button",
     {
-      className: [`${r}__header`, e].filter(Boolean).join(" "),
+      className: [`${i}__header`, e].filter(Boolean).join(" "),
       onClick: o,
       disabled: n,
-      "aria-expanded": i,
-      "aria-controls": l ? `${r}-collapse-${l}` : void 0,
+      "aria-expanded": r,
+      "aria-controls": l ? `${i}-collapse-${l}` : void 0,
       ...c,
       children: [
-        /* @__PURE__ */ s("span", { className: `${r}__title`, children: t }),
-        /* @__PURE__ */ s("span", { className: `${r}__icon`, children: /* @__PURE__ */ s(
+        /* @__PURE__ */ s("span", { className: `${i}__title`, children: t }),
+        /* @__PURE__ */ s("span", { className: `${i}__icon`, children: /* @__PURE__ */ s(
           "svg",
           {
             width: "16",
             height: "16",
             viewBox: "0 0 16 16",
             fill: "currentColor",
-            className: i ? `${r}__icon--rotated` : "",
+            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" })
           }
         ) })
@@ -1349,16 +1348,16 @@ const Tt = ({
   isActive: l = !1,
   ...n
 }) => {
-  const i = "clarity-accordion";
+  const r = "clarity-accordion";
   return /* @__PURE__ */ s(
     "div",
     {
-      id: a ? `${i}-collapse-${a}` : void 0,
+      id: a ? `${r}-collapse-${a}` : void 0,
       className: [
-        `${i}__collapse`,
-        l && `${i}__collapse--show`
+        `${r}__collapse`,
+        l && `${r}__collapse--show`
       ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ s("div", { className: [`${i}__body`, e].filter(Boolean).join(" "), ...n, children: t })
+      children: /* @__PURE__ */ s("div", { className: [`${r}__body`, e].filter(Boolean).join(" "), ...n, children: t })
     }
   );
 }, jt = Object.assign(ct, {
@@ -1389,10 +1388,10 @@ const Tt = ({
   const { isOpen: t, contentRef: a, styles: l } = Ae();
   return t ? /* @__PURE__ */ s("div", { ref: a, className: "dropdown__content", style: l, children: e }) : null;
 }, ht = ({ children: e }) => /* @__PURE__ */ s("div", { className: "dropdown__menu", children: e }), yt = ({ as: e, children: t, ...a }) => /* @__PURE__ */ s(e || "a", { ...a, className: "dropdown__item", children: t }), vt = () => /* @__PURE__ */ s("hr", { className: "dropdown__separator" }), ae = ({ title: e, position: t = "bottom", children: a }) => {
-  const [l, n] = x(!1), [i, c] = x({}), f = P(null), r = P(null), o = P(null);
+  const [l, n] = x(!1), [r, c] = x({}), f = P(null), i = P(null), o = P(null);
   return et(() => {
     if (l) {
-      const d = r.current, v = o.current;
+      const d = i.current, v = o.current;
       if (!d || !v) return;
       const m = d.getBoundingClientRect(), p = v.getBoundingClientRect(), u = window.innerHeight, h = window.innerWidth;
       let y = t;
@@ -1422,7 +1421,7 @@ const Tt = ({
     return document.addEventListener("mousedown", d), () => {
       document.removeEventListener("mousedown", d);
     };
-  }, []), /* @__PURE__ */ s(Re.Provider, { value: { isOpen: l, setIsOpen: n, triggerRef: r, contentRef: o, styles: i }, children: /* @__PURE__ */ s(
+  }, []), /* @__PURE__ */ s(Re.Provider, { value: { isOpen: l, setIsOpen: n, triggerRef: i, contentRef: o, styles: r }, children: /* @__PURE__ */ s(
     "div",
     {
       ref: f,
@@ -1443,17 +1442,17 @@ const Pe = z(null), Ve = () => {
     throw new Error("useTabs must be used within a Tabs provider");
   return e;
 }, Me = ({ id: e, label: t, className: a = "" }) => {
-  const { activeTab: l, setActiveTab: n, variant: i, orientation: c } = Ve(), f = l === e, r = [
+  const { activeTab: l, setActiveTab: n, variant: r, orientation: c } = Ve(), f = l === e, i = [
     "clarity-tab",
     a,
     f ? "active" : "",
-    f ? `variant-${i}` : "",
+    f ? `variant-${r}` : "",
     `orientation-${c}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ s(
     "button",
     {
-      className: r,
+      className: i,
       onClick: () => n(e),
       role: "tab",
       "aria-selected": f,
@@ -1463,11 +1462,11 @@ const Pe = z(null), Ve = () => {
 };
 Me.displayName = "Tabs.Tab";
 const He = ({ id: e, children: t, className: a = "" }) => {
-  const { activeTab: l } = Ve(), n = l === e, i = {
+  const { activeTab: l } = Ve(), n = l === e, r = {
     visibility: n ? "visible" : "hidden",
     gridArea: "1 / 1"
   };
-  return n || (i.pointerEvents = "none"), /* @__PURE__ */ s("div", { className: `clarity-tab-content ${a}`, role: "tabpanel", style: i, children: t });
+  return n || (r.pointerEvents = "none"), /* @__PURE__ */ s("div", { className: `clarity-tab-content ${a}`, role: "tabpanel", style: r, children: t });
 };
 He.displayName = "Tabs.Content";
 const me = ({
@@ -1477,17 +1476,17 @@ const me = ({
   orientation: l = "horizontal",
   className: n = ""
 }) => {
-  const [i, c] = x(t), f = Y(() => ({
-    activeTab: i,
+  const [r, c] = x(t), f = Y(() => ({
+    activeTab: r,
     setActiveTab: c,
     variant: a,
     orientation: l
-  }), [i, a, l]), r = [
+  }), [r, a, l]), i = [
     "clarity-tabs-container",
     n,
     `orientation-${l}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s(Pe.Provider, { value: f, children: /* @__PURE__ */ s("div", { className: r, children: e }) });
+  return /* @__PURE__ */ s(Pe.Provider, { value: f, children: /* @__PURE__ */ s("div", { className: i, children: e }) });
 };
 me.Tab = Me;
 me.Content = He;
@@ -1498,10 +1497,10 @@ const Et = ({
   variant: a = "primary",
   product: l,
   tone: n,
-  bgColor: i,
+  bgColor: r,
   textColor: c,
   children: f,
-  className: r = "",
+  className: i = "",
   disabled: o = !1,
   delay: d = 200,
   hideDelay: v = 100,
@@ -1509,19 +1508,19 @@ const Et = ({
   arrow: p = !0,
   ...u
 }) => {
-  const [h, y] = x(!1), [b, _] = x(null), B = P(null), T = P(null), w = "clarity-tooltip", $ = !!i, L = l && n && !$;
+  const [h, y] = x(!1), [b, _] = x(null), B = P(null), T = P(null), w = "clarity-tooltip", $ = !!r, L = l && n && !$;
   let k = "";
   $ ? k = `${w}__content--custom-bg` : L ? k = `${w}__content--custom` : k = `${w}__content--${a}`;
   const j = [
     w,
     `${w}--${t}`,
-    r
+    i
   ].filter(Boolean).join(" "), I = [
     `${w}__content`,
     k,
     p && `${w}__content--arrow`
   ].filter(Boolean).join(" "), A = {}, O = {};
-  $ && i && (O["--tooltip-bg-color"] = i), c && (O["--tooltip-text-color"] = c), L && l && n && (O["--tooltip-product"] = l, O["--tooltip-tone"] = n);
+  $ && r && (O["--tooltip-bg-color"] = r), c && (O["--tooltip-text-color"] = c), L && l && n && (O["--tooltip-product"] = l, O["--tooltip-tone"] = n);
   const g = {
     ...A,
     ...Object.keys(O).length > 0 ? O : {}
@@ -1583,16 +1582,16 @@ const Et = ({
   variant: a = "secondary",
   emptyText: l = "No results found.",
   inputPlaceholder: n = "Search...",
-  ...i
+  ...r
 }) => {
-  const [c, f] = x(""), [r, o] = x(null), [d, v] = x(!1), m = [
+  const [c, f] = x(""), [i, o] = x(null), [d, v] = x(!1), m = [
     "clarity-command",
     `clarity-command--${a}`,
     t
   ].filter(Boolean).join(" "), p = Y(() => ({
     searchTerm: c,
     setSearchTerm: f,
-    value: r,
+    value: i,
     setValue: o,
     variant: a,
     texts: {
@@ -1601,25 +1600,25 @@ const Et = ({
     },
     isOpen: d,
     setIsOpen: v
-  }), [c, r, a, l, n, d]);
-  return /* @__PURE__ */ s(We.Provider, { value: p, children: /* @__PURE__ */ s("div", { className: m, ...i, children: e }) });
+  }), [c, i, a, l, n, d]);
+  return /* @__PURE__ */ s(We.Provider, { value: p, children: /* @__PURE__ */ s("div", { className: m, ...r, children: e }) });
 };
 Fe.displayName = "Command";
 const Ge = ({ placeholder: e = "Search...", variant: t, onClick: a }) => {
-  const { setIsOpen: l, variant: n } = ee(), [i, c] = x(!1);
+  const { setIsOpen: l, variant: n } = ee(), [r, c] = x(!1);
   S(() => {
     c(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
   }, []);
-  const r = [
+  const i = [
     "clarity-command-button",
     `clarity-command-button--${t || n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ C("button", { className: r, onClick: (d) => {
+  return /* @__PURE__ */ C("button", { className: i, onClick: (d) => {
     l(!0), a == null || a(d);
   }, children: [
     /* @__PURE__ */ s("span", { children: e }),
     /* @__PURE__ */ C("kbd", { className: "clarity-command-shortcut", children: [
-      i ? "⌘" : "Ctrl+",
+      r ? "⌘" : "Ctrl+",
       "K"
     ] })
   ] });
@@ -1628,20 +1627,20 @@ Ge.displayName = "Command.Button";
 const Ue = ({ children: e, ...t }) => {
   const { isOpen: a, setIsOpen: l, variant: n } = ee();
   return S(() => {
-    const i = (c) => {
+    const r = (c) => {
       c.key === "k" && (c.metaKey || c.ctrlKey) && (c.preventDefault(), l(!a));
     };
-    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+    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 }) });
 };
 Ue.displayName = "Command.Dialog";
 const ze = ({ className: e = "", ...t }) => {
-  const { searchTerm: a, setSearchTerm: l, variant: n, texts: i, isOpen: c } = ee(), f = P(null);
+  const { searchTerm: a, setSearchTerm: l, variant: n, texts: r, isOpen: c } = ee(), f = P(null);
   S(() => {
     var o;
     c && ((o = f.current) == null || o.focus());
   }, [c]);
-  const r = [
+  const i = [
     "clarity-command-input",
     `clarity-command-input--${n}`,
     e
@@ -1650,10 +1649,10 @@ const ze = ({ className: e = "", ...t }) => {
     "input",
     {
       ref: f,
-      className: r,
+      className: i,
       value: a,
       onChange: (o) => l(o.target.value),
-      placeholder: t.placeholder || i.inputPlaceholder,
+      placeholder: t.placeholder || r.inputPlaceholder,
       ...t
     }
   ) });
@@ -1662,7 +1661,7 @@ ze.displayName = "Command.Input";
 const qe = ({ children: e, className: t = "", ...a }) => {
   const { searchTerm: l } = ee();
   let n = !1;
-  const i = (r) => E.Children.toArray(r).map((o) => {
+  const r = (i) => E.Children.toArray(i).map((o) => {
     var v;
     if (!E.isValidElement(o)) return o;
     const d = o.type.displayName;
@@ -1671,11 +1670,11 @@ const qe = ({ children: e, className: t = "", ...a }) => {
     if (d === "Command.Item")
       return (((v = o.props.children) == null ? void 0 : v.toString().toLowerCase()) || "").includes(l.toLowerCase()) ? (n = !0, o) : null;
     if (d === "Command.Group") {
-      const m = i(o.props.children);
+      const m = r(o.props.children);
       return E.Children.toArray(m).some((u) => E.isValidElement(u) && u.type.displayName === "Command.Item") ? E.cloneElement(o, { ...o.props, children: m }) : null;
     }
     return o;
-  }).filter(Boolean), c = i(e), f = ["clarity-command-list", t].filter(Boolean).join(" ");
+  }).filter(Boolean), c = r(e), f = ["clarity-command-list", t].filter(Boolean).join(" ");
   return /* @__PURE__ */ C("div", { className: f, ...a, children: [
     c,
     !n && /* @__PURE__ */ s(ue, {})
@@ -1693,8 +1692,8 @@ const Je = ({ children: e, className: t = "", ...a }) => {
 };
 Je.displayName = "Command.Group";
 const Qe = ({ children: e, className: t = "", ...a }) => {
-  const { setValue: l, variant: n } = ee(), i = ["clarity-command-item", `clarity-command-item--${n}`, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: i, onClick: () => l((e == null ? void 0 : e.toString()) || ""), ...a, children: e });
+  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 });
 };
 Qe.displayName = "Command.Item";
 const Xe = ({ className: e = "", ...t }) => {
@@ -1732,15 +1731,15 @@ const Lt = Object.assign(Fe, {
   data: a,
   viewMode: l = "table",
   isScrollable: n = !1,
-  isLoading: i = !1
+  isLoading: r = !1
 }) => {
-  const [c, f] = x(null), [r, o] = x("none"), d = (u) => {
+  const [c, f] = x(null), [i, o] = x("none"), d = (u) => {
     u.sortable && (c === u.key ? o((h) => h === "asc" ? "desc" : h === "desc" ? "none" : "asc") : (f(u.key), o("asc")));
-  }, v = Y(() => r === "none" || !c ? a : [...a].sort((u, h) => {
+  }, v = Y(() => i === "none" || !c ? a : [...a].sort((u, h) => {
     const y = u[c], b = h[c];
-    return y < b ? r === "asc" ? -1 : 1 : y > b ? r === "asc" ? 1 : -1 : 0;
-  }), [a, c, r]), m = (u) => u.sortable ? c !== u.key || r === "none" ? /* @__PURE__ */ s("span", { className: "sort-icon", children: "↕" }) : r === "asc" ? /* @__PURE__ */ s("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ s("span", { className: "sort-icon", children: "↓" }) : null;
-  if (i)
+    return y < b ? i === "asc" ? -1 : 1 : y > b ? i === "asc" ? 1 : -1 : 0;
+  }), [a, c, i]), m = (u) => u.sortable ? c !== u.key || i === "none" ? /* @__PURE__ */ s("span", { className: "sort-icon", children: "↕" }) : i === "asc" ? /* @__PURE__ */ s("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ s("span", { className: "sort-icon", children: "↓" }) : null;
+  if (r)
     return /* @__PURE__ */ s(Nt, { columns: t, viewMode: l });
   const p = `table-variant-${e} ${n ? "is-scrollable" : ""}`;
   return l === "card" ? /* @__PURE__ */ C("div", { className: `card-view-wrapper ${p}`, children: [
@@ -1780,15 +1779,15 @@ const Lt = Object.assign(Fe, {
   tone: a,
   size: l = "medium",
   color: n,
-  className: i = "",
+  className: r = "",
   "aria-label": c = "Carregando...",
   ...f
 }) => {
-  const r = "clarity-spinner", v = n ? `${r}--custom` : t && a ? `${r}--custom` : `${r}--${e}`, m = [
-    r,
-    `${r}--${l}`,
+  const i = "clarity-spinner", v = n ? `${i}--custom` : t && a ? `${i}--custom` : `${i}--${e}`, m = [
+    i,
+    `${i}--${l}`,
     v,
-    i
+    r
   ].filter(Boolean).join(" "), p = {};
   return n ? p["--spinner-color"] = n : t && a && (p["--spinner-color"] = `var(--clarity-${t}-${a})`), /* @__PURE__ */ s(
     "div",
@@ -1798,16 +1797,16 @@ const Lt = Object.assign(Fe, {
       role: "status",
       "aria-label": c,
       ...f,
-      children: /* @__PURE__ */ s("div", { className: `${r}__container`, children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ s("div", { className: `${i}__container`, children: /* @__PURE__ */ s(
         "svg",
         {
-          className: `${r}__svg`,
+          className: `${i}__svg`,
           viewBox: "0 0 50 50",
           xmlns: "http://www.w3.org/2000/svg",
           children: /* @__PURE__ */ s(
             "circle",
             {
-              className: `${r}__circle`,
+              className: `${i}__circle`,
               cx: "25",
               cy: "25",
               r: "20",