beth-clarity 1.1.26 → 1.1.27

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

@@ -1,48 +1,7 @@
-import { jsx as r, jsxs as g, Fragment as ut } from "react/jsx-runtime";
-import j, { useState as T, useRef as z, useEffect as P, forwardRef as pt, isValidElement as K, createContext as Z, cloneElement as G, useContext as Y, useMemo as oe, useCallback as de, useLayoutEffect as ft, Children as ht } from "react";
-import yt from "react-dom";
-const Vt = ({
-  variant: e = "primary",
-  product: t,
-  tone: s,
-  size: a = "medium",
-  bgColor: n,
-  textColor: o,
-  children: d,
-  className: c = "",
-  rounded: l = !1,
-  outlined: i = !1,
-  ...u
-}) => {
-  const v = "clarity-badge", p = !!n, f = t && s && !p;
-  let m = "";
-  p ? m = `${v}--custom-bg` : f ? m = `${v}--custom` : m = `${v}--${e}`;
-  const h = [
-    v,
-    m,
-    `${v}--${a}`,
-    l ? `${v}--rounded` : "",
-    i ? `${v}--outlined` : "",
-    c
-  ].filter(Boolean).join(" "), y = {};
-  p && (y.backgroundColor = n, o && (y.color = o));
-  const b = f && t && s ? {
-    "--custom-bg-color": `var(--clarity-${t}-${s})`,
-    "--custom-text-color": s && parseInt(s) >= 500 ? "white" : `var(--clarity-${t}-800)`
-  } : {};
-  return /* @__PURE__ */ r(
-    "span",
-    {
-      className: h,
-      style: {
-        ...y,
-        ...b
-      },
-      ...u,
-      children: d
-    }
-  );
-}, ge = {
+import { jsx as r, jsxs as g, Fragment as mt } from "react/jsx-runtime";
+import j, { createContext as Q, useContext as Y, useState as T, useRef as z, useEffect as P, forwardRef as ut, isValidElement as K, cloneElement as G, useMemo as oe, useCallback as de, useLayoutEffect as pt, Children as ft } from "react";
+import ht from "react-dom";
+const ge = {
   fontFamily: {
     sans: ["Inter", "system-ui", "sans-serif"],
     mono: ["Fira Code", "monospace"]
@@ -82,99 +41,101 @@ const Vt = ({
 }, X = (e) => e !== void 0 ? `var(--clarity-spacing-${e})` : void 0, me = j.forwardRef(
   (e, t) => {
     const {
-      as: s,
-      children: a,
-      className: n,
-      display: o,
-      position: d,
-      flexDirection: c,
-      alignItems: l,
-      justifyContent: i,
-      gap: u,
-      m: v,
-      mt: p,
-      mr: f,
-      mb: m,
-      ml: h,
-      mx: y,
-      my: b,
-      p: N,
-      pt: B,
-      pr: x,
-      pb: _,
-      pl: $,
-      px: L,
-      py: k,
-      bg: R,
-      color: E,
-      fontSize: D,
-      fontWeight: S,
-      textAlign: w,
-      lineHeight: H,
-      letterSpacing: W,
-      borderRadius: V,
-      borderTopLeftRadius: U,
-      borderTopRightRadius: q,
-      borderBottomLeftRadius: M,
-      borderBottomRightRadius: A,
-      boxShadow: J,
-      borderWidth: se,
-      borderTopWidth: ae,
-      borderRightWidth: re,
-      borderBottomWidth: C,
-      borderLeftWidth: O,
-      borderXWidth: F,
-      borderYWidth: I,
-      borderColor: Q,
+      children: s,
+      className: a,
+      display: n,
+      position: o,
+      flexDirection: d,
+      alignItems: c,
+      justifyContent: l,
+      gap: i,
+      m,
+      mt: v,
+      mr: p,
+      mb: f,
+      ml: u,
+      mx: h,
+      my: y,
+      p: b,
+      pt: N,
+      pr: B,
+      pb: x,
+      pl: _,
+      px: $,
+      py: L,
+      bg: k,
+      color: R,
+      fontSize: S,
+      fontWeight: I,
+      textAlign: E,
+      lineHeight: w,
+      letterSpacing: H,
+      borderRadius: W,
+      borderTopLeftRadius: V,
+      borderTopRightRadius: U,
+      borderBottomLeftRadius: q,
+      borderBottomRightRadius: M,
+      boxShadow: A,
+      borderWidth: Z,
+      borderTopWidth: se,
+      borderRightWidth: ae,
+      borderBottomWidth: re,
+      borderLeftWidth: C,
+      borderXWidth: O,
+      borderYWidth: F,
+      borderColor: D,
+      overflow: J,
       ...it
-    } = e, ot = s || "div", ie = (pe, Ne) => {
+    } = e, ie = (pe, Ne) => {
       if (pe === void 0 || pe === 0) return;
-      const dt = `var(--clarity-border-width-${pe})`, mt = Ne ? fe(Ne) : "currentColor";
-      return `${dt} solid ${mt}`;
-    }, ct = j.useMemo(() => ({
-      display: o,
-      position: d,
-      flexDirection: c,
-      alignItems: l,
-      justifyContent: i,
-      gap: X(u),
-      marginTop: X(p ?? b ?? v),
-      marginRight: X(f ?? y ?? v),
-      marginBottom: X(m ?? b ?? v),
-      marginLeft: X(h ?? y ?? v),
-      paddingTop: X(B ?? k ?? N),
-      paddingRight: X(x ?? L ?? N),
-      paddingBottom: X(_ ?? k ?? N),
-      paddingLeft: X($ ?? L ?? N),
-      backgroundColor: R ? fe(R) : void 0,
-      color: E ? fe(E) : void 0,
-      fontSize: D ? `var(--clarity-font-size-${D})` : void 0,
-      fontWeight: S ? ge.fontWeight[S] : void 0,
-      textAlign: w,
-      lineHeight: H,
-      letterSpacing: W ? ge.letterSpacing[W] : void 0,
-      borderRadius: V ? `var(--clarity-radius-${V})` : void 0,
-      borderTopLeftRadius: U ? `var(--clarity-radius-${U})` : void 0,
-      borderTopRightRadius: q ? `var(--clarity-radius-${q})` : void 0,
-      borderBottomLeftRadius: M ? `var(--clarity-radius-${M})` : void 0,
-      borderBottomRightRadius: A ? `var(--clarity-radius-${A})` : void 0,
-      boxShadow: J ? `var(--clarity-shadow-${J})` : void 0,
-      border: ie(se, Q),
-      borderTop: ie(ae ?? I),
-      borderRight: ie(re ?? F),
-      borderBottom: ie(C ?? I),
-      borderLeft: ie(O ?? F)
+      const ct = `var(--clarity-border-width-${pe})`, dt = Ne ? fe(Ne) : "currentColor";
+      return `${ct} solid ${dt}`;
+    }, ot = j.useMemo(() => ({
+      display: n,
+      position: o,
+      flexDirection: d,
+      alignItems: c,
+      justifyContent: l,
+      gap: X(i),
+      marginTop: X(v ?? y ?? m),
+      marginRight: X(p ?? h ?? m),
+      marginBottom: X(f ?? y ?? m),
+      marginLeft: X(u ?? h ?? m),
+      paddingTop: X(N ?? L ?? b),
+      paddingRight: X(B ?? $ ?? b),
+      paddingBottom: X(x ?? L ?? b),
+      paddingLeft: X(_ ?? $ ?? b),
+      backgroundColor: k ? fe(k) : void 0,
+      color: R ? fe(R) : void 0,
+      fontSize: S ? `var(--clarity-font-size-${S})` : void 0,
+      fontWeight: I ? ge.fontWeight[I] : void 0,
+      textAlign: E,
+      lineHeight: w,
+      letterSpacing: H ? ge.letterSpacing[H] : void 0,
+      borderRadius: W ? `var(--clarity-radius-${W})` : void 0,
+      borderTopLeftRadius: V ? `var(--clarity-radius-${V})` : void 0,
+      borderTopRightRadius: U ? `var(--clarity-radius-${U})` : void 0,
+      borderBottomLeftRadius: q ? `var(--clarity-radius-${q})` : void 0,
+      borderBottomRightRadius: M ? `var(--clarity-radius-${M})` : void 0,
+      boxShadow: A ? `var(--clarity-shadow-${A})` : void 0,
+      border: ie(Z, D),
+      borderTop: ie(se ?? F),
+      borderRight: ie(ae ?? O),
+      borderBottom: ie(re ?? F),
+      borderLeft: ie(C ?? O),
+      overflow: J
     }), [
+      n,
       o,
       d,
       c,
       l,
       i,
-      u,
+      m,
       v,
       p,
       f,
-      m,
+      u,
       h,
       y,
       b,
@@ -186,9 +147,9 @@ const Vt = ({
       L,
       k,
       R,
-      E,
-      D,
       S,
+      I,
+      E,
       w,
       H,
       W,
@@ -197,19 +158,114 @@ const Vt = ({
       q,
       M,
       A,
-      J,
+      Z,
       se,
       ae,
       re,
       C,
       O,
       F,
-      I,
-      Q
+      D,
+      J
     ]);
-    return /* @__PURE__ */ r(ot, { ref: t, className: `clarity-box ${n || ""}`.trim(), style: ct, ...it, children: a });
+    return /* @__PURE__ */ r("div", { ref: t, className: `clarity-box ${a || ""}`.trim(), style: ot, ...it, children: s });
   }
-), Mt = ({
+), he = Q({}), _e = ({ children: e, className: t, ...s }) => {
+  const { borderRadius: a } = Y(he);
+  return /* @__PURE__ */ r(
+    me,
+    {
+      p: 4,
+      borderBottomWidth: 1,
+      borderColor: "gray.200",
+      className: t,
+      borderTopLeftRadius: a,
+      borderTopRightRadius: a,
+      ...s,
+      children: e
+    }
+  );
+};
+_e.displayName = "Card.Header";
+const we = ({ children: e, className: t, ...s }) => /* @__PURE__ */ r(me, { p: 4, className: t, ...s, children: e });
+we.displayName = "Card.Content";
+const $e = ({ children: e, className: t, ...s }) => {
+  const { borderRadius: a } = Y(he);
+  return /* @__PURE__ */ r(
+    me,
+    {
+      p: 4,
+      borderTopWidth: 1,
+      borderColor: "gray.200",
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: 3,
+      className: t,
+      borderBottomLeftRadius: a,
+      borderBottomRightRadius: a,
+      ...s,
+      children: e
+    }
+  );
+};
+$e.displayName = "Card.Footer";
+const ue = ({ children: e, bg: t = "white", borderRadius: s = 3, ...a }) => /* @__PURE__ */ r(he.Provider, { value: { borderRadius: s }, children: /* @__PURE__ */ r(
+  me,
+  {
+    bg: t,
+    borderRadius: s,
+    boxShadow: 1,
+    overflow: "hidden",
+    ...a,
+    children: e
+  }
+) });
+ue.Header = _e;
+ue.Content = we;
+ue.Footer = $e;
+ue.displayName = "Card";
+const Ht = ({
+  variant: e = "primary",
+  product: t,
+  tone: s,
+  size: a = "medium",
+  bgColor: n,
+  textColor: o,
+  children: d,
+  className: c = "",
+  rounded: l = !1,
+  outlined: i = !1,
+  ...m
+}) => {
+  const v = "clarity-badge", p = !!n, f = t && s && !p;
+  let u = "";
+  p ? u = `${v}--custom-bg` : f ? u = `${v}--custom` : u = `${v}--${e}`;
+  const h = [
+    v,
+    u,
+    `${v}--${a}`,
+    l ? `${v}--rounded` : "",
+    i ? `${v}--outlined` : "",
+    c
+  ].filter(Boolean).join(" "), y = {};
+  p && (y.backgroundColor = n, o && (y.color = o));
+  const b = f && t && s ? {
+    "--custom-bg-color": `var(--clarity-${t}-${s})`,
+    "--custom-text-color": s && parseInt(s) >= 500 ? "white" : `var(--clarity-${t}-800)`
+  } : {};
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      className: h,
+      style: {
+        ...y,
+        ...b
+      },
+      ...m,
+      children: d
+    }
+  );
+}, Vt = ({
   variant: e = "primary",
   size: t = "medium",
   disabled: s = !1,
@@ -220,7 +276,7 @@ const Vt = ({
   className: c = "",
   title: l,
   customColor: i,
-  customColorHover: u,
+  customColorHover: m,
   ...v
 }) => {
   const p = "clarity-button", f = [
@@ -230,12 +286,12 @@ const Vt = ({
     a && `${p}--loading`,
     s && `${p}--disabled`,
     c
-  ].filter(Boolean).join(" "), m = {};
-  return i && (m["--button-bg"] = i, m["--button-hover-bg"] = u || `${i}E6`, m["--button-border"] = i, m["--button-hover-border"] = u || `${i}E6`, m["--button-fg"] = "#fff"), /* @__PURE__ */ g(
+  ].filter(Boolean).join(" "), u = {};
+  return i && (u["--button-bg"] = i, u["--button-hover-bg"] = m || `${i}E6`, u["--button-border"] = i, u["--button-hover-border"] = m || `${i}E6`, u["--button-fg"] = "#fff"), /* @__PURE__ */ g(
     "button",
     {
       className: f,
-      style: m,
+      style: u,
       disabled: s || a,
       onClick: o,
       type: d,
@@ -247,7 +303,7 @@ const Vt = ({
       ]
     }
   );
-}, Ft = ({
+}, Mt = ({
   variant: e = "primary",
   size: t = "medium",
   filled: s = !0,
@@ -259,12 +315,12 @@ const Vt = ({
   className: l = "",
   ...i
 }) => {
-  const u = "clarity-button-group", v = `${u}--${e}`, p = [
-    u,
+  const m = "clarity-button-group", v = `${m}--${e}`, p = [
+    m,
     v,
-    `${u}--${t}`,
-    !s && `${u}--outline`,
-    d && `${u}--disabled`,
+    `${m}--${t}`,
+    !s && `${m}--outline`,
+    d && `${m}--disabled`,
     l
   ].filter(Boolean).join(" "), f = (h) => {
     if (d || !c) return;
@@ -275,7 +331,7 @@ const Vt = ({
         c(N);
       } else
         c(h);
-  }, m = (h) => o ? Array.isArray(n) && n.includes(h) : n === h;
+  }, u = (h) => o ? Array.isArray(n) && n.includes(h) : n === h;
   return /* @__PURE__ */ r(
     "div",
     {
@@ -283,12 +339,12 @@ const Vt = ({
       role: "group",
       ...i,
       children: a.map((h, y) => {
-        const b = m(h.id), N = [
-          `${u}__item`,
-          b && `${u}__item--selected`,
-          h.disabled && `${u}__item--disabled`,
-          y === 0 && `${u}__item--first`,
-          y === a.length - 1 && `${u}__item--last`
+        const b = u(h.id), N = [
+          `${m}__item`,
+          b && `${m}__item--selected`,
+          h.disabled && `${m}__item--disabled`,
+          y === 0 && `${m}__item--first`,
+          y === a.length - 1 && `${m}__item--last`
         ].filter(Boolean).join(" ");
         return /* @__PURE__ */ g(
           "button",
@@ -299,8 +355,8 @@ const Vt = ({
             type: "button",
             "aria-pressed": b,
             children: [
-              h.icon && /* @__PURE__ */ r("span", { className: `${u}__item-icon`, children: h.icon }),
-              /* @__PURE__ */ r("span", { className: `${u}__item-label`, children: h.label })
+              h.icon && /* @__PURE__ */ r("span", { className: `${m}__item-icon`, children: h.icon }),
+              /* @__PURE__ */ r("span", { className: `${m}__item-label`, children: h.label })
             ]
           },
           h.id
@@ -308,7 +364,7 @@ const Vt = ({
       })
     }
   );
-}, vt = j.forwardRef(({
+}, yt = j.forwardRef(({
   variant: e,
   size: t = "medium",
   label: s,
@@ -319,17 +375,17 @@ const Vt = ({
   endIcon: c,
   className: l = "",
   disabled: i = !1,
-  value: u,
+  value: m,
   defaultValue: v,
   onFocus: p,
   onBlur: f,
-  ...m
+  ...u
 }, h) => {
   const [y, b] = T(!1), [N, B] = T(!1), x = z(null);
   j.useImperativeHandle(h, () => x.current), P(() => {
     const k = x.current;
     k && B(k.value.length > 0);
-  }, [u, v]);
+  }, [m, v]);
   const _ = (k) => {
     b(!0), p == null || p(k);
   }, $ = (k) => {
@@ -357,11 +413,11 @@ const Vt = ({
             ref: x,
             className: "clarity-input__element",
             disabled: i,
-            value: u,
+            value: m,
             defaultValue: v,
             onFocus: _,
             onBlur: $,
-            ...m
+            ...u
           }
         ),
         s && /* @__PURE__ */ r("label", { className: "clarity-input__label", children: s })
@@ -371,8 +427,8 @@ const Vt = ({
     (a || n && o) && /* @__PURE__ */ r("div", { className: "clarity-input__helper-text", children: n && o ? o : a })
   ] });
 });
-vt.displayName = "Input";
-const bt = j.forwardRef(({
+yt.displayName = "Input";
+const vt = j.forwardRef(({
   variant: e,
   size: t = "medium",
   label: s,
@@ -383,11 +439,11 @@ const bt = j.forwardRef(({
   endIcon: c,
   className: l = "",
   disabled: i = !1,
-  value: u,
+  value: m,
   defaultValue: v,
   onFocus: p,
   onBlur: f,
-  rows: m = 3,
+  rows: u = 3,
   minHeight: h,
   maxHeight: y,
   resizable: b = !0,
@@ -397,12 +453,12 @@ const bt = j.forwardRef(({
   j.useImperativeHandle(B, () => k.current), P(() => {
     const w = k.current;
     w && L(w.value.length > 0);
-  }, [u, v]);
+  }, [m, v]);
   const R = (w) => {
     _(!0), p == null || p(w);
-  }, E = (w) => {
+  }, S = (w) => {
     _(!1), L(w.target.value.length > 0), f == null || f(w);
-  }, D = [
+  }, I = [
     "clarity-textarea",
     "clarity-textarea--outlined",
     `clarity-textarea--${t}`,
@@ -414,13 +470,13 @@ const bt = j.forwardRef(({
     d && "clarity-textarea--with-start-icon",
     c && "clarity-textarea--with-end-icon",
     l
-  ].filter(Boolean).join(" "), S = {
+  ].filter(Boolean).join(" "), E = {
     resize: b ? "vertical" : "none",
     minHeight: h ? `${h}px` : void 0,
     maxHeight: y ? `${y}px` : void 0
   };
   return /* @__PURE__ */ g("div", { className: "clarity-textarea-wrapper", children: [
-    /* @__PURE__ */ g("div", { className: D, children: [
+    /* @__PURE__ */ g("div", { className: I, children: [
       d && /* @__PURE__ */ r("div", { className: "clarity-textarea__start-icon", children: d }),
       /* @__PURE__ */ g("div", { className: "clarity-textarea__field", children: [
         /* @__PURE__ */ r(
@@ -429,12 +485,12 @@ const bt = j.forwardRef(({
             ref: k,
             className: "clarity-textarea__element",
             disabled: i,
-            value: u,
+            value: m,
             defaultValue: v,
             onFocus: R,
-            onBlur: E,
-            rows: m,
-            style: S,
+            onBlur: S,
+            rows: u,
+            style: E,
             ...N
           }
         ),
@@ -445,8 +501,8 @@ const bt = j.forwardRef(({
     (a || n && o) && /* @__PURE__ */ r("div", { className: "clarity-textarea__helper-text", children: n && o ? o : a })
   ] });
 });
-bt.displayName = "Textarea";
-const Ct = j.forwardRef(({
+vt.displayName = "Textarea";
+const bt = j.forwardRef(({
   variant: e,
   size: t = "medium",
   label: s,
@@ -457,42 +513,42 @@ const Ct = j.forwardRef(({
   endIcon: c,
   className: l = "",
   disabled: i = !1,
-  value: u,
+  value: m,
   defaultValue: v,
   onFocus: p,
   onBlur: f,
-  onChange: m,
+  onChange: u,
   options: h,
   placeholder: y = "Selecione uma opção",
   isClearable: b = !1,
   isSearchable: N = !1,
   ...B
 }, x) => {
-  const [_, $] = T(!1), [L, k] = T(!1), [R, E] = T(u || v || ""), [D, S] = T(""), w = z(null), H = z(null);
+  const [_, $] = T(!1), [L, k] = T(!1), [R, S] = T(m || v || ""), [I, E] = T(""), w = z(null), H = z(null);
   j.useImperativeHandle(x, () => w.current), P(() => {
-    u !== void 0 && E(u);
-  }, [u]), P(() => {
+    m !== void 0 && S(m);
+  }, [m]), P(() => {
     const C = (O) => {
       w.current && !w.current.contains(O.target) && ($(!1), k(!1), f == null || f());
     };
     return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
   }, [f]);
-  const W = N && D ? h.filter(
-    (C) => C.label.toLowerCase().includes(D.toLowerCase())
+  const W = N && I ? h.filter(
+    (C) => C.label.toLowerCase().includes(I.toLowerCase())
   ) : h, V = () => {
-    i || ($(!_), k(!_), _ ? (f == null || f(), N && S("")) : (p == null || p(), N && setTimeout(() => {
+    i || ($(!_), k(!_), _ ? (f == null || f(), N && E("")) : (p == null || p(), N && setTimeout(() => {
       var C;
       (C = H.current) == null || C.focus();
     }, 0)));
   }, U = (C) => {
-    C.disabled || (E(C.value), $(!1), k(!1), S(""), m == null || m(C.value), f == null || f());
+    C.disabled || (S(C.value), $(!1), k(!1), E(""), u == null || u(C.value), f == null || f());
   }, q = (C) => {
-    S(C.target.value);
+    E(C.target.value);
   }, M = (C) => {
-    C.key === "Escape" ? ($(!1), k(!1), S("")) : C.key === "Enter" && W.length > 0 && W[0] && U(W[0]);
-  }, A = h.find((C) => C.value === R), J = R !== "" && R !== void 0, se = (C) => {
-    C.stopPropagation(), E(""), m == null || m("");
-  }, ae = J || L || y || N && D, re = [
+    C.key === "Escape" ? ($(!1), k(!1), E("")) : C.key === "Enter" && W.length > 0 && W[0] && U(W[0]);
+  }, A = h.find((C) => C.value === R), Z = R !== "" && R !== void 0, se = (C) => {
+    C.stopPropagation(), S(""), u == null || u("");
+  }, ae = Z || L || y || N && I, re = [
     "clarity-select",
     "clarity-select--outlined",
     `clarity-select--${t}`,
@@ -528,7 +584,7 @@ const Ct = j.forwardRef(({
                 ref: H,
                 type: "text",
                 className: "clarity-select__search-input",
-                value: _ ? D : A ? A.label : "",
+                value: _ ? I : A ? A.label : "",
                 onChange: q,
                 onKeyDown: M,
                 onFocus: () => {
@@ -541,7 +597,7 @@ const Ct = j.forwardRef(({
             ) : /* @__PURE__ */ r("div", { className: "clarity-select__display", children: A ? A.label : y }),
             s && /* @__PURE__ */ r("label", { className: "clarity-select__label", children: s })
           ] }),
-          b && J && /* @__PURE__ */ r(
+          b && Z && /* @__PURE__ */ r(
             "button",
             {
               type: "button",
@@ -617,8 +673,8 @@ const Ct = j.forwardRef(({
     (a || n && o) && /* @__PURE__ */ r("div", { className: "clarity-select__helper-text", children: n && o ? o : a })
   ] });
 });
-Ct.displayName = "Select";
-const Nt = pt(({
+bt.displayName = "Select";
+const Ct = ut(({
   options: e = [],
   value: t = [],
   onChange: s,
@@ -629,22 +685,22 @@ const Nt = pt(({
   errorMessage: c,
   disabled: l = !1,
   variant: i = "primary",
-  size: u = "medium",
+  size: m = "medium",
   maxSelectedLabels: v = 3,
   selectionLimit: p,
   className: f = "",
-  id: m,
+  id: u,
   name: h,
   required: y = !1,
   "data-testid": b,
   ...N
 }, B) => {
-  const [x, _] = T(!1), [$, L] = T(""), [k, R] = T(!1), E = z(null), D = z(null), S = z(null), w = (C) => {
-    E.current = C, B && (typeof B == "function" ? B(C) : B.current = C);
+  const [x, _] = T(!1), [$, L] = T(""), [k, R] = T(!1), S = z(null), I = z(null), E = z(null), w = (C) => {
+    S.current = C, B && (typeof B == "function" ? B(C) : B.current = C);
   };
   P(() => {
     const C = (O) => {
-      E.current && !E.current.contains(O.target) && (_(!1), R(!1), L(""));
+      S.current && !S.current.contains(O.target) && (_(!1), R(!1), L(""));
     };
     return document.addEventListener("click", C), () => document.removeEventListener("click", C);
   }, []);
@@ -653,18 +709,18 @@ const Nt = pt(({
   ), W = () => {
     l || (_(!x), R(!x), x ? L("") : setTimeout(() => {
       var C;
-      (C = D.current) == null || C.focus();
+      (C = I.current) == null || C.focus();
     }, 100));
   }, V = (C, O) => {
     if (l)
       return;
     O && (O.stopPropagation(), O.preventDefault());
     const F = t.includes(C);
-    let I;
-    F ? I = t.filter((Q) => Q !== C) : I = [...t, C], s && s(I);
+    let D;
+    F ? D = t.filter((J) => J !== C) : D = [...t, C], s && s(D);
   }, U = (C, O) => {
     if (O.stopPropagation(), l) return;
-    const F = t.filter((I) => I !== C);
+    const F = t.filter((D) => D !== C);
     s == null || s(F);
   }, q = (C) => {
     C.stopPropagation(), !l && (s == null || s([]));
@@ -672,25 +728,25 @@ const Nt = pt(({
     L(C.target.value);
   }, A = (C) => {
     C.key === "Escape" && (_(!1), R(!1), L(""));
-  }, J = k || x || t.length > 0, se = () => {
+  }, Z = k || x || t.length > 0, se = () => {
     if (t.length === 0) return null;
     const C = t.map(
-      (I) => e.find((Q) => Q.value === I)
+      (D) => e.find((J) => J.value === D)
     ).filter(Boolean), O = C.slice(0, v), F = C.length - v;
     return /* @__PURE__ */ g("div", { className: "clarity-multiselect__chips", children: [
-      O.map((I) => /* @__PURE__ */ g("div", { className: "clarity-multiselect__chip", children: [
-        /* @__PURE__ */ r("span", { className: "clarity-multiselect__chip-label", children: I.label }),
+      O.map((D) => /* @__PURE__ */ g("div", { className: "clarity-multiselect__chip", children: [
+        /* @__PURE__ */ r("span", { className: "clarity-multiselect__chip-label", children: D.label }),
         !l && /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             className: "clarity-multiselect__chip-remove",
-            onClick: (Q) => U(I.value, Q),
-            "aria-label": `Remover ${I.label}`,
+            onClick: (J) => U(D.value, J),
+            "aria-label": `Remover ${D.label}`,
             children: "×"
           }
         )
-      ] }, I.value)),
+      ] }, D.value)),
       F > 0 && /* @__PURE__ */ g("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
         "+",
         F,
@@ -703,10 +759,10 @@ const Nt = pt(({
   ].filter(Boolean).join(" "), re = [
     "clarity-multiselect",
     `clarity-multiselect--${i}`,
-    `clarity-multiselect--${u}`,
+    `clarity-multiselect--${m}`,
     x && "clarity-multiselect--open",
     k && "clarity-multiselect--focused",
-    J && "clarity-multiselect--label-up",
+    Z && "clarity-multiselect--label-up",
     d && "clarity-multiselect--error",
     l && "clarity-multiselect--disabled",
     t.length > 0 && "clarity-multiselect--has-value"
@@ -756,11 +812,11 @@ const Nt = pt(({
               ]
             }
           ),
-          x && /* @__PURE__ */ g("div", { ref: S, className: "clarity-multiselect__dropdown", children: [
+          x && /* @__PURE__ */ g("div", { ref: E, className: "clarity-multiselect__dropdown", children: [
             /* @__PURE__ */ r("div", { className: "clarity-multiselect__search", children: /* @__PURE__ */ r(
               "input",
               {
-                ref: D,
+                ref: I,
                 type: "text",
                 className: "clarity-multiselect__search-input",
                 placeholder: "Buscar opções...",
@@ -779,7 +835,7 @@ const Nt = pt(({
                     O && "clarity-multiselect__option--selected",
                     F && "clarity-multiselect__option--disabled"
                   ].filter(Boolean).join(" "),
-                  onClick: (I) => !F && V(C.value, I),
+                  onClick: (D) => !F && V(C.value, D),
                   children: [
                     /* @__PURE__ */ r("div", { className: "clarity-multiselect__option-checkbox", children: /* @__PURE__ */ r("div", { className: [
                       "clarity-multiselect__checkbox",
@@ -807,18 +863,18 @@ const Nt = pt(({
     (o || d && c) && /* @__PURE__ */ r("div", { className: "clarity-multiselect__helper", children: d && c ? /* @__PURE__ */ r("span", { className: "clarity-multiselect__error-message", children: c }) : o && /* @__PURE__ */ r("span", { className: "clarity-multiselect__helper-text", children: o }) })
   ] });
 });
-Nt.displayName = "MultiSelect";
-const _e = Z(null), we = () => {
-  const e = Y(_e);
+Ct.displayName = "MultiSelect";
+const ke = Q(null), xe = () => {
+  const e = Y(ke);
   if (!e)
     throw new Error("useModal must be used within a Modal provider");
   return e;
-}, $e = ({
+}, Te = ({
   children: e,
   className: t = "",
   title: s
 }) => {
-  const { onClose: a, variant: n, showCloseButton: o } = we(), d = [
+  const { onClose: a, variant: n, showCloseButton: o } = xe(), d = [
     "clarity-modal-header",
     t,
     n && `clarity-modal-header--${n}`
@@ -834,23 +890,23 @@ const _e = Z(null), we = () => {
     }, children: "×" })
   ] });
 };
-$e.displayName = "Modal.Header";
-const ke = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `clarity-modal-content ${t}`, children: e });
-ke.displayName = "Modal.Content";
-const xe = ({ children: e, className: t = "" }) => /* @__PURE__ */ g("div", { className: `clarity-modal-footer ${t}`, children: [
+Te.displayName = "Modal.Header";
+const Be = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `clarity-modal-content ${t}`, children: e });
+Be.displayName = "Modal.Content";
+const Re = ({ children: e, className: t = "" }) => /* @__PURE__ */ g("div", { className: `clarity-modal-footer ${t}`, children: [
   /* @__PURE__ */ r("div", { className: "clarity-modal-scroll-indicator" }),
   e
 ] });
-xe.displayName = "Modal.Footer";
-const Te = ({ children: e, onClick: t }) => G(e, {
+Re.displayName = "Modal.Footer";
+const je = ({ children: e, onClick: t }) => G(e, {
   onClick: (s) => {
     var a, n;
     t == null || t(), (n = (a = e.props).onClick) == null || n.call(a, s);
   }
 });
-Te.displayName = "Modal.Trigger";
-const Be = ({ children: e }) => {
-  const { onClose: t } = we();
+je.displayName = "Modal.Trigger";
+const Le = ({ children: e }) => {
+  const { onClose: t } = xe();
   return G(e, {
     onClick: (s) => {
       var a, n;
@@ -858,7 +914,7 @@ const Be = ({ children: e }) => {
     }
   });
 };
-Be.displayName = "Modal.Close";
+Le.displayName = "Modal.Close";
 const ee = ({
   isOpen: e,
   onClose: t,
@@ -870,8 +926,8 @@ const ee = ({
   showCloseButton: c = !0,
   closeOnOverlayClick: l = !0
 }) => {
-  const [i, u] = T(!1), p = e !== void 0 ? e : i, f = t || (() => {
-    u(!1);
+  const [i, m] = T(!1), p = e !== void 0 ? e : i, f = t || (() => {
+    m(!1);
   });
   P(() => {
     p && (s == null || s());
@@ -883,41 +939,41 @@ const ee = ({
       document.removeEventListener("keydown", N), document.body.style.overflow = "unset";
     };
   }, [p, f]);
-  const m = (N) => {
+  const u = (N) => {
     l && N.target === N.currentTarget && f();
   }, h = j.Children.toArray(a).find(
     (N) => K(N) && N.type.displayName === "Modal.Trigger"
   ), y = j.Children.toArray(a).filter(
     (N) => K(N) && N.type.displayName !== "Modal.Trigger"
   ), b = ["clarity-modal", n, `clarity-modal--${d}`].filter(Boolean).join(" ");
-  return /* @__PURE__ */ g(_e.Provider, { value: { onClose: f, variant: o, showCloseButton: c }, children: [
-    h && G(h, { onClick: () => u(!0) }),
-    p && /* @__PURE__ */ r("div", { className: "clarity-modal-overlay", onClick: m, children: /* @__PURE__ */ r("div", { className: b, children: y }) })
+  return /* @__PURE__ */ g(ke.Provider, { value: { onClose: f, variant: o, showCloseButton: c }, children: [
+    h && G(h, { onClick: () => m(!0) }),
+    p && /* @__PURE__ */ r("div", { className: "clarity-modal-overlay", onClick: u, children: /* @__PURE__ */ r("div", { className: b, children: y }) })
   ] });
 };
-ee.Header = $e;
-ee.Content = ke;
-ee.Footer = xe;
-ee.Trigger = Te;
-ee.Close = Be;
+ee.Header = Te;
+ee.Content = Be;
+ee.Footer = Re;
+ee.Trigger = je;
+ee.Close = Le;
 ee.displayName = "Modal";
-const Re = Z(void 0), zt = () => {
-  const e = Y(Re);
+const Se = Q(void 0), Ft = () => {
+  const e = Y(Se);
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
   return e;
-}, gt = ({ id: e, message: t, variant: s, duration: a, onClose: n, invertColors: o }) => {
+}, Nt = ({ id: e, message: t, variant: s, duration: a, onClose: n, invertColors: o }) => {
   const [d, c] = T("entering");
   P(() => {
     const i = setTimeout(() => {
       c("visible");
-    }, 10), u = setTimeout(() => {
+    }, 10), m = setTimeout(() => {
       c("exiting");
     }, a * 1e3 - 300), v = setTimeout(() => {
       n(e);
     }, a * 1e3);
     return () => {
-      clearTimeout(i), clearTimeout(u), clearTimeout(v);
+      clearTimeout(i), clearTimeout(m), clearTimeout(v);
     };
   }, [e, a, n]);
   const l = [
@@ -937,7 +993,7 @@ const Re = Z(void 0), zt = () => {
       }
     )
   ] });
-}, Gt = ({ children: e }) => {
+}, zt = ({ children: e }) => {
   const [t, s] = T([]), a = oe(() => {
     if (typeof document < "u") {
       const l = document.createElement("div");
@@ -952,36 +1008,36 @@ const Re = Z(void 0), zt = () => {
       };
   }, [a]);
   const n = de((l) => {
-    const u = {
+    const m = {
       id: (/* @__PURE__ */ new Date()).toISOString() + Math.random(),
       // duration: 5,
       // position: 'right-top',
       ...l
     };
     s((v) => {
-      const p = [u, ...v];
+      const p = [m, ...v];
       return p.length > 4 ? p.slice(0, 4) : p;
     });
   }, []), o = de((l) => {
-    s((i) => i.filter((u) => u.id !== l));
+    s((i) => i.filter((m) => m.id !== l));
   }, []), d = oe(() => t.reduce((l, i) => (l[i.position] || (l[i.position] = []), l[i.position].push(i), l), {}), [t]), c = oe(() => ({ show: n }), [n]);
-  return /* @__PURE__ */ g(Re.Provider, { value: c, children: [
+  return /* @__PURE__ */ g(Se.Provider, { value: c, children: [
     e,
-    a && yt.createPortal(
-      Object.entries(d).map(([l, i]) => /* @__PURE__ */ r("div", { className: `cl-toast-container ${l}`, children: i.map((u) => /* @__PURE__ */ r(gt, { ...u, onClose: o }, u.id)) }, l)),
+    a && ht.createPortal(
+      Object.entries(d).map(([l, i]) => /* @__PURE__ */ r("div", { className: `cl-toast-container ${l}`, children: i.map((m) => /* @__PURE__ */ r(Nt, { ...m, onClose: o }, m.id)) }, l)),
       a
     )
   ] });
-}, je = Z(null), Le = () => {
-  const e = Y(je);
+}, Ee = Q(null), Oe = () => {
+  const e = Y(Ee);
   if (!e)
     throw new Error("useOffcanvas must be used within an Offcanvas provider");
   return e;
-}, Se = ({
+}, Ie = ({
   children: e,
   className: t = ""
 }) => {
-  const { onClose: s, variant: a, showCloseButton: n, title: o } = Le(), d = [
+  const { onClose: s, variant: a, showCloseButton: n, title: o } = Oe(), d = [
     "clarity-offcanvas-header",
     t
   ].filter(Boolean).join(" "), c = [
@@ -999,21 +1055,21 @@ const Re = Z(void 0), zt = () => {
     }, children: "×" })
   ] });
 };
-Se.displayName = "Offcanvas.Header";
-const Ee = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `clarity-offcanvas-content ${t}`, children: e });
-Ee.displayName = "Offcanvas.Content";
-const Oe = ({ children: e, onClick: t, variant: s }) => G(e, {
+Ie.displayName = "Offcanvas.Header";
+const De = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `clarity-offcanvas-content ${t}`, children: e });
+De.displayName = "Offcanvas.Content";
+const Pe = ({ children: e, onClick: t, variant: s }) => G(e, {
   onClick: (a) => {
     var n, o;
     t == null || t(), (o = (n = e.props).onClick) == null || o.call(n, a);
   },
   variant: s
 });
-Oe.displayName = "Offcanvas.Trigger";
-const he = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `clarity-offcanvas-footer ${t}`, children: e });
-he.displayName = "Offcanvas.Footer";
-const Ie = ({ children: e }) => {
-  const { onClose: t } = Le();
+Pe.displayName = "Offcanvas.Trigger";
+const ye = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `clarity-offcanvas-footer ${t}`, children: e });
+ye.displayName = "Offcanvas.Footer";
+const We = ({ children: e }) => {
+  const { onClose: t } = Oe();
   return G(e, {
     onClick: (s) => {
       var a, n;
@@ -1021,7 +1077,7 @@ const Ie = ({ children: e }) => {
     }
   });
 };
-Ie.displayName = "Offcanvas.Close";
+We.displayName = "Offcanvas.Close";
 const ne = ({
   isOpen: e,
   onClose: t,
@@ -1034,7 +1090,7 @@ const ne = ({
   showCloseButton: l = !0,
   title: i
 }) => {
-  const [u, v] = T(!1), [p, f] = T(!1), [m, h] = T(!1), y = e !== void 0, b = y ? e : u, N = de(() => {
+  const [m, v] = T(!1), [p, f] = T(!1), [u, h] = T(!1), y = e !== void 0, b = y ? e : m, N = de(() => {
     t ? t() : v(!1);
   }, [t]), B = de(() => {
     y || v(!0), s == null || s();
@@ -1064,7 +1120,7 @@ const ne = ({
   const x = (w) => {
     c && w.target === w.currentTarget && N();
   }, _ = j.Children.toArray(a);
-  let $, L, k, R, E;
+  let $, L, k, R, S;
   _.forEach((w) => {
     if (K(w))
       if (w.type.displayName === "Offcanvas.Trigger")
@@ -1073,29 +1129,29 @@ const ne = ({
         L = w;
       else if (w.type.displayName === "Offcanvas.Content") {
         k = w;
-        const W = j.Children.toArray(k.props.children).filter((V) => K(V) && V.type.displayName === "Offcanvas.Close" ? (E = V, !1) : !0);
+        const W = j.Children.toArray(k.props.children).filter((V) => K(V) && V.type.displayName === "Offcanvas.Close" ? (S = V, !1) : !0);
         k = G(k, { children: W });
       } else w.type.displayName === "Offcanvas.Footer" && (R = w);
-  }), E && (R ? R = G(R, {
-    children: /* @__PURE__ */ g(ut, { children: [
+  }), S && (R ? R = G(R, {
+    children: /* @__PURE__ */ g(mt, { children: [
       R.props.children,
-      E
+      S
     ] })
-  }) : R = /* @__PURE__ */ r(he, { children: E }));
-  const D = [
+  }) : R = /* @__PURE__ */ r(ye, { children: S }));
+  const I = [
     "clarity-offcanvas",
     n,
     `clarity-offcanvas--${d}`,
     o && `clarity-offcanvas--${o}`,
     p ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
-  ].filter(Boolean).join(" "), S = [
+  ].filter(Boolean).join(" "), E = [
     "clarity-offcanvas-overlay",
     p ? "clarity-offcanvas-overlay--visible" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ g(je.Provider, { value: { onClose: N, variant: o, showCloseButton: l, placement: d, title: i }, children: [
+  return /* @__PURE__ */ g(Ee.Provider, { value: { onClose: N, variant: o, showCloseButton: l, placement: d, title: i }, children: [
     $ && G($, { onClick: B, variant: o }),
-    m && // Only render if shouldRender is true
-    /* @__PURE__ */ r("div", { className: S, onClick: x, children: /* @__PURE__ */ g("div", { className: D, children: [
+    u && // Only render if shouldRender is true
+    /* @__PURE__ */ r("div", { className: E, onClick: x, children: /* @__PURE__ */ g("div", { className: I, children: [
       L,
       k,
       R && /* @__PURE__ */ r("div", { className: "clarity-offcanvas-scroll-indicator" }),
@@ -1104,13 +1160,13 @@ const ne = ({
     ] }) })
   ] });
 };
-ne.Header = Se;
-ne.Content = Ee;
-ne.Footer = he;
-ne.Trigger = Oe;
-ne.Close = Ie;
+ne.Header = Ie;
+ne.Content = De;
+ne.Footer = ye;
+ne.Trigger = Pe;
+ne.Close = We;
 ne.displayName = "Offcanvas";
-const _t = j.forwardRef(({
+const gt = j.forwardRef(({
   type: e,
   variant: t = "primary",
   size: s = "medium",
@@ -1121,11 +1177,11 @@ const _t = j.forwardRef(({
   labelPosition: c = "right",
   className: l = "",
   disabled: i = !1,
-  checked: u,
+  checked: m,
   id: v,
   ...p
 }, f) => {
-  const m = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, h = [
+  const u = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, h = [
     "clarity-check-input-wrapper",
     `clarity-check-input-wrapper--${c}`,
     i && "clarity-check-input-wrapper--disabled",
@@ -1144,16 +1200,16 @@ const _t = j.forwardRef(({
     i && "clarity-check-input__label--disabled"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ g("div", { className: "clarity-check-input-container", children: [
-    /* @__PURE__ */ g("label", { className: h, htmlFor: m, children: [
+    /* @__PURE__ */ g("label", { className: h, htmlFor: u, children: [
       /* @__PURE__ */ r(
         "input",
         {
           ref: f,
-          id: m,
+          id: u,
           type: e,
           className: y,
           disabled: i,
-          checked: u,
+          checked: m,
           ...p
         }
       ),
@@ -1184,8 +1240,8 @@ const _t = j.forwardRef(({
     (n || o && d) && /* @__PURE__ */ r("div", { className: "clarity-check-input__helper-text", children: o && d ? d : n })
   ] });
 });
-_t.displayName = "CheckInput";
-const wt = j.forwardRef(({
+gt.displayName = "CheckInput";
+const _t = j.forwardRef(({
   variant: e = "primary",
   size: t = "medium",
   label: s,
@@ -1196,10 +1252,10 @@ const wt = j.forwardRef(({
   className: c = "",
   disabled: l = !1,
   checked: i,
-  id: u,
+  id: m,
   ...v
 }, p) => {
-  const f = u || `input-switch-${Math.random().toString(36).substr(2, 9)}`, m = [
+  const f = m || `input-switch-${Math.random().toString(36).substr(2, 9)}`, u = [
     "clarity-input-switch-wrapper",
     `clarity-input-switch-wrapper--${d}`,
     l && "clarity-input-switch-wrapper--disabled",
@@ -1217,7 +1273,7 @@ const wt = j.forwardRef(({
     l && "clarity-input-switch__label--disabled"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ g("div", { className: "clarity-input-switch-container", children: [
-    /* @__PURE__ */ g("label", { className: m, htmlFor: f, children: [
+    /* @__PURE__ */ g("label", { className: u, htmlFor: f, children: [
       /* @__PURE__ */ r(
         "input",
         {
@@ -1236,30 +1292,30 @@ const wt = j.forwardRef(({
     (a || n && o) && /* @__PURE__ */ r("div", { className: "clarity-input-switch__helper-text", children: n && o ? o : a })
   ] });
 });
-wt.displayName = "InputSwitch";
-const De = Z(null), ye = () => {
-  const e = Y(De);
+_t.displayName = "InputSwitch";
+const Ae = Q(null), ve = () => {
+  const e = Y(Ae);
   if (!e)
     throw new Error("useConfirmationDialog must be used within a ConfirmationDialog provider");
   return e;
-}, Pe = ({ children: e, className: t = "" }) => {
-  const { variant: s } = ye(), a = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${s}`;
+}, He = ({ children: e, className: t = "" }) => {
+  const { variant: s } = ve(), a = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${s}`;
   return /* @__PURE__ */ r("div", { className: a, children: e });
 };
-Pe.displayName = "ConfirmationDialog.Header";
-const We = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `clarity-confirmation-dialog-content ${t}`, children: e });
-We.displayName = "ConfirmationDialog.Content";
-const Ae = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `clarity-confirmation-dialog-footer ${t}`, children: e });
-Ae.displayName = "ConfirmationDialog.Footer";
-const He = ({ children: e }) => G(e, {
+He.displayName = "ConfirmationDialog.Header";
+const Ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `clarity-confirmation-dialog-content ${t}`, children: e });
+Ve.displayName = "ConfirmationDialog.Content";
+const Me = ({ children: e, className: t = "" }) => /* @__PURE__ */ r("div", { className: `clarity-confirmation-dialog-footer ${t}`, children: e });
+Me.displayName = "ConfirmationDialog.Footer";
+const Fe = ({ children: e }) => G(e, {
   onClick: (t) => {
     var s, a;
     (a = (s = e.props).onClick) == null || a.call(s, t);
   }
 });
-He.displayName = "ConfirmationDialog.Trigger";
-const Ve = ({ children: e }) => {
-  const { onClose: t } = ye();
+Fe.displayName = "ConfirmationDialog.Trigger";
+const ze = ({ children: e }) => {
+  const { onClose: t } = ve();
   return G(e, {
     onClick: (s) => {
       var a, n;
@@ -1267,9 +1323,9 @@ const Ve = ({ children: e }) => {
     }
   });
 };
-Ve.displayName = "ConfirmationDialog.Close";
-const Me = ({ children: e }) => {
-  const { onConfirm: t } = ye();
+ze.displayName = "ConfirmationDialog.Close";
+const Ge = ({ children: e }) => {
+  const { onConfirm: t } = ve();
   return G(e, {
     onClick: (s) => {
       var a, n;
@@ -1277,7 +1333,7 @@ const Me = ({ children: e }) => {
     }
   });
 };
-Me.displayName = "ConfirmationDialog.Confirm";
+Ge.displayName = "ConfirmationDialog.Confirm";
 const te = ({
   isOpen: e,
   onClose: t,
@@ -1287,37 +1343,37 @@ const te = ({
 }) => {
   const [o, d] = T(!1), c = e !== void 0, l = c ? e : o, i = () => {
     c || d(!0);
-  }, u = () => {
+  }, m = () => {
     t ? t() : d(!1);
   }, v = () => {
-    s && s(), u();
+    s && s(), m();
   };
   P(() => {
     const h = (y) => {
-      y.key === "Escape" && u();
+      y.key === "Escape" && m();
     };
     return l ? (document.addEventListener("keydown", h), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
       document.removeEventListener("keydown", h), document.body.style.overflow = "unset";
     };
-  }, [l, u]);
+  }, [l, m]);
   const p = j.Children.toArray(n).find(
     (h) => K(h) && h.type.displayName === "ConfirmationDialog.Trigger"
   ), f = j.Children.toArray(n).filter(
     (h) => K(h) && h.type.displayName !== "ConfirmationDialog.Trigger"
-  ), m = `clarity-confirmation-dialog clarity-confirmation-dialog--${a}`;
-  return /* @__PURE__ */ g(De.Provider, { value: { variant: a, onClose: u, onConfirm: v, onOpen: i }, children: [
+  ), u = `clarity-confirmation-dialog clarity-confirmation-dialog--${a}`;
+  return /* @__PURE__ */ g(Ae.Provider, { value: { variant: a, onClose: m, onConfirm: v, onOpen: i }, children: [
     p,
-    l && /* @__PURE__ */ r("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ r("div", { className: m, children: f }) })
+    l && /* @__PURE__ */ r("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ r("div", { className: u, children: f }) })
   ] });
 };
-te.Header = Pe;
-te.Content = We;
-te.Footer = Ae;
-te.Trigger = He;
-te.Close = Ve;
-te.Confirm = Me;
+te.Header = He;
+te.Content = Ve;
+te.Footer = Me;
+te.Trigger = Fe;
+te.Close = ze;
+te.Confirm = Ge;
 te.displayName = "ConfirmationDialog";
-const Ut = ({
+const Gt = ({
   variant: e = "primary",
   size: t = "medium",
   disabled: s = !1,
@@ -1328,22 +1384,22 @@ const Ut = ({
   className: c = "",
   "aria-label": l,
   title: i,
-  customColor: u,
+  customColor: m,
   customColorHover: v,
   ...p
 }) => {
-  const f = "clarity-button-icon", m = [
+  const f = "clarity-button-icon", u = [
     f,
-    !u && `${f}--${e}`,
+    !m && `${f}--${e}`,
     `${f}--${t}`,
     a && `${f}--loading`,
     s && `${f}--disabled`,
     c
   ].filter(Boolean).join(" "), h = {};
-  return u && (h["--button-icon-bg"] = u, h["--button-icon-hover-bg"] = v || `${u}E6`), /* @__PURE__ */ g(
+  return m && (h["--button-icon-bg"] = m, h["--button-icon-hover-bg"] = v || `${m}E6`), /* @__PURE__ */ g(
     "button",
     {
-      className: m,
+      className: u,
       disabled: s || a,
       onClick: o,
       type: d,
@@ -1357,7 +1413,7 @@ const Ut = ({
       ]
     }
   );
-}, qt = ({
+}, Ut = ({
   variant: e = "primary",
   product: t,
   tone: s,
@@ -1368,11 +1424,11 @@ const Ut = ({
   onClick: c,
   href: l,
   target: i,
-  rel: u,
+  rel: m,
   className: v = "",
   ...p
 }) => {
-  const f = "clarity-button-link", m = t && s, h = m ? `${f}--custom` : `${f}--${e}`, y = [
+  const f = "clarity-button-link", u = t && s, h = u ? `${f}--custom` : `${f}--${e}`, y = [
     f,
     h,
     `${f}--${n}`,
@@ -1381,7 +1437,7 @@ const Ut = ({
   ].filter(Boolean).join(" "), b = (B) => {
     const x = parseInt(B);
     return x >= 800 ? "900" : x >= 700 ? "800" : x >= 600 ? "700" : x >= 500 ? "600" : x >= 400 ? "500" : x >= 300 ? "400" : x >= 200 ? "300" : "200";
-  }, N = m ? {
+  }, N = u ? {
     "--custom-color": `var(--clarity-${t}-${s})`,
     "--custom-hover-color": `var(--clarity-${t}-${a || b(s)})`
   } : {};
@@ -1390,7 +1446,7 @@ const Ut = ({
     {
       href: l,
       target: i,
-      rel: u || (i === "_blank" ? "noopener noreferrer" : void 0),
+      rel: m || (i === "_blank" ? "noopener noreferrer" : void 0),
       className: y,
       style: N,
       onClick: o ? void 0 : c,
@@ -1408,12 +1464,12 @@ const Ut = ({
       children: d
     }
   );
-}, Fe = Z(void 0), ze = () => {
-  const e = Y(Fe);
+}, Ue = Q(void 0), qe = () => {
+  const e = Y(Ue);
   if (!e)
     throw new Error("Accordion components must be used within an Accordion");
   return e;
-}, $t = ({
+}, wt = ({
   variant: e = "primary",
   product: t,
   tone: s,
@@ -1424,15 +1480,15 @@ const Ut = ({
   className: c = "",
   children: l,
   onSelect: i,
-  ...u
+  ...m
 }) => {
   const [v, p] = T(() => n ? Array.isArray(n) ? n : [n] : []), f = (_) => {
     let $;
     o ? $ = v.includes(_) ? v.filter((L) => L !== _) : [...v, _] : $ = v.includes(_) ? [] : [_], p($), i && i(v.includes(_) ? null : _, {});
-  }, m = "clarity-accordion", h = t && s, y = h ? `${m}--custom` : `${m}--${e}`, b = [
-    m,
+  }, u = "clarity-accordion", h = t && s, y = h ? `${u}--custom` : `${u}--${e}`, b = [
+    u,
     y,
-    d && `${m}--flush`,
+    d && `${u}--flush`,
     c
   ].filter(Boolean).join(" "), N = (_) => {
     const $ = parseInt(_);
@@ -1451,15 +1507,15 @@ const Ut = ({
     hoverTone: a,
     flush: d
   };
-  return /* @__PURE__ */ r(Fe.Provider, { value: x, children: /* @__PURE__ */ r("div", { className: b, style: B, ...u, children: l }) });
-}, kt = ({
+  return /* @__PURE__ */ r(Ue.Provider, { value: x, children: /* @__PURE__ */ r("div", { className: b, style: B, ...m, children: l }) });
+}, $t = ({
   eventKey: e,
   disabled: t = !1,
   className: s = "",
   children: a,
   ...n
 }) => {
-  const { activeKeys: o } = ze(), d = "clarity-accordion", c = o.includes(e), l = [
+  const { activeKeys: o } = qe(), d = "clarity-accordion", c = o.includes(e), l = [
     `${d}__item`,
     c && `${d}__item--active`,
     t && `${d}__item--disabled`,
@@ -1471,7 +1527,7 @@ const Ut = ({
     disabled: t,
     isActive: c
   }) : i) });
-}, xt = ({
+}, kt = ({
   className: e = "",
   children: t,
   onClick: s,
@@ -1480,8 +1536,8 @@ const Ut = ({
   isActive: o = !1,
   ...d
 }) => {
-  const { toggleItem: c } = ze(), l = "clarity-accordion", i = (u) => {
-    !n && a && c(a), s == null || s(u);
+  const { toggleItem: c } = qe(), l = "clarity-accordion", i = (m) => {
+    !n && a && c(a), s == null || s(m);
   };
   return /* @__PURE__ */ g(
     "button",
@@ -1508,7 +1564,7 @@ const Ut = ({
       ]
     }
   );
-}, Tt = ({
+}, xt = ({
   className: e = "",
   children: t,
   eventKey: s,
@@ -1527,19 +1583,19 @@ const Ut = ({
       children: /* @__PURE__ */ r("div", { className: [`${o}__body`, e].filter(Boolean).join(" "), ...n, children: t })
     }
   );
-}, Xt = Object.assign($t, {
-  Item: kt,
-  Header: xt,
-  Body: Tt
-}), Ge = Z(
+}, qt = Object.assign(wt, {
+  Item: $t,
+  Header: kt,
+  Body: xt
+}), Xe = Q(
   void 0
-), Ue = () => {
-  const e = Y(Ge);
+), Ye = () => {
+  const e = Y(Xe);
   if (!e)
     throw new Error("useDropdown must be used within a DropdownProvider");
   return e;
-}, Bt = ({ children: e }) => {
-  const { setIsOpen: t, triggerRef: s } = Ue();
+}, Tt = ({ children: e }) => {
+  const { setIsOpen: t, triggerRef: s } = Ye();
   return /* @__PURE__ */ r(
     "button",
     {
@@ -1551,18 +1607,18 @@ const Ut = ({
       children: e
     }
   );
-}, Rt = ({ children: e }) => {
-  const { isOpen: t, contentRef: s, styles: a } = Ue();
+}, Bt = ({ children: e }) => {
+  const { isOpen: t, contentRef: s, styles: a } = Ye();
   return t ? /* @__PURE__ */ r("div", { ref: s, className: "dropdown__content", style: a, children: e }) : null;
-}, jt = ({ children: e }) => /* @__PURE__ */ r("div", { className: "dropdown__menu", children: e }), Lt = ({ as: e, children: t, ...s }) => /* @__PURE__ */ r(e || "a", { ...s, className: "dropdown__item", children: t }), St = () => /* @__PURE__ */ r("hr", { className: "dropdown__separator" }), ce = ({ title: e, position: t = "bottom", children: s }) => {
+}, Rt = ({ children: e }) => /* @__PURE__ */ r("div", { className: "dropdown__menu", children: e }), jt = ({ as: e, children: t, ...s }) => /* @__PURE__ */ r(e || "a", { ...s, className: "dropdown__item", children: t }), Lt = () => /* @__PURE__ */ r("hr", { className: "dropdown__separator" }), ce = ({ title: e, position: t = "bottom", children: s }) => {
   const [a, n] = T(!1), [o, d] = T({}), c = z(null), l = z(null), i = z(null);
-  return ft(() => {
+  return pt(() => {
     if (a) {
-      const u = l.current, v = i.current;
-      if (!u || !v) return;
-      const p = u.getBoundingClientRect(), f = v.getBoundingClientRect(), m = window.innerHeight, h = window.innerWidth;
+      const m = l.current, v = i.current;
+      if (!m || !v) return;
+      const p = m.getBoundingClientRect(), f = v.getBoundingClientRect(), u = window.innerHeight, h = window.innerWidth;
       let y = t;
-      t === "bottom" && p.bottom + f.height > m && (y = "top"), t === "top" && p.top - f.height < 0 && (y = "bottom"), t === "right" && p.right + f.width > h && (y = "left"), t === "left" && p.left - f.width < 0 && (y = "right");
+      t === "bottom" && p.bottom + f.height > u && (y = "top"), t === "top" && p.top - f.height < 0 && (y = "bottom"), t === "right" && p.right + f.width > h && (y = "left"), t === "left" && p.left - f.width < 0 && (y = "right");
       const b = {};
       switch (y) {
         case "top":
@@ -1582,13 +1638,13 @@ const Ut = ({
       d(b);
     }
   }, [a, t]), P(() => {
-    const u = (v) => {
+    const m = (v) => {
       c.current && !c.current.contains(v.target) && n(!1);
     };
-    return document.addEventListener("mousedown", u), () => {
-      document.removeEventListener("mousedown", u);
+    return document.addEventListener("mousedown", m), () => {
+      document.removeEventListener("mousedown", m);
     };
-  }, []), /* @__PURE__ */ r(Ge.Provider, { value: { isOpen: a, setIsOpen: n, triggerRef: l, contentRef: i, styles: o }, children: /* @__PURE__ */ r(
+  }, []), /* @__PURE__ */ r(Xe.Provider, { value: { isOpen: a, setIsOpen: n, triggerRef: l, contentRef: i, styles: o }, children: /* @__PURE__ */ r(
     "div",
     {
       ref: c,
@@ -1598,12 +1654,12 @@ const Ut = ({
     }
   ) });
 };
-ce.Trigger = Bt;
-ce.Content = Rt;
-ce.Menu = jt;
-ce.Item = Lt;
-ce.Separator = St;
-const ve = ({
+ce.Trigger = Tt;
+ce.Content = Bt;
+ce.Menu = Rt;
+ce.Item = jt;
+ce.Separator = Lt;
+const be = ({
   as: e = "button",
   id: t,
   children: s,
@@ -1636,8 +1692,8 @@ const ve = ({
     }
   );
 };
-ve.displayName = "Tabs.Tab";
-const qe = ({
+be.displayName = "Tabs.Tab";
+const Je = ({
   children: e,
   activeTab: t,
   onTabChange: s,
@@ -1650,8 +1706,8 @@ const qe = ({
     o,
     `orientation-${n}`
   ].filter(Boolean).join(" "), c = [], l = [];
-  return ht.forEach(e, (i) => {
-    K(i) && i.type === ve ? c.push(i) : l.push(i);
+  return ft.forEach(e, (i) => {
+    K(i) && i.type === be ? c.push(i) : l.push(i);
   }), /* @__PURE__ */ g("div", { className: d, children: [
     /* @__PURE__ */ r("div", { className: "clarity-tab-list", role: "tablist", children: c.map(
       (i) => G(i, {
@@ -1664,9 +1720,9 @@ const qe = ({
     l
   ] });
 };
-qe.Tab = ve;
-qe.displayName = "Tabs";
-const Yt = ({
+Je.Tab = be;
+Je.displayName = "Tabs";
+const Xt = ({
   content: e,
   position: t = "top",
   variant: s = "primary",
@@ -1677,11 +1733,11 @@ const Yt = ({
   children: c,
   className: l = "",
   disabled: i = !1,
-  delay: u = 200,
+  delay: m = 200,
   hideDelay: v = 100,
   trigger: p = "hover",
   arrow: f = !0,
-  ...m
+  ...u
 }) => {
   const [h, y] = T(!1), [b, N] = T(null), B = z(null), x = z(null), _ = "clarity-tooltip", $ = !!o, L = a && n && !$;
   let k = "";
@@ -1690,21 +1746,21 @@ const Yt = ({
     _,
     `${_}--${t}`,
     l
-  ].filter(Boolean).join(" "), E = [
+  ].filter(Boolean).join(" "), S = [
     `${_}__content`,
     k,
     f && `${_}__content--arrow`
-  ].filter(Boolean).join(" "), D = {}, S = {};
-  $ && o && (S["--tooltip-bg-color"] = o), d && (S["--tooltip-text-color"] = d), L && a && n && (S["--tooltip-product"] = a, S["--tooltip-tone"] = n);
+  ].filter(Boolean).join(" "), I = {}, E = {};
+  $ && o && (E["--tooltip-bg-color"] = o), d && (E["--tooltip-text-color"] = d), L && a && n && (E["--tooltip-product"] = a, E["--tooltip-tone"] = n);
   const w = {
-    ...D,
-    ...Object.keys(S).length > 0 ? S : {}
+    ...I,
+    ...Object.keys(E).length > 0 ? E : {}
   }, H = () => {
     if (i) return;
     b && clearTimeout(b);
     const A = setTimeout(() => {
       y(!0);
-    }, u);
+    }, m);
     N(A);
   }, W = () => {
     b && clearTimeout(b);
@@ -1729,7 +1785,7 @@ const Yt = ({
       ref: x,
       className: `${_}__trigger`,
       ...M,
-      ...m,
+      ...u,
       children: [
         c,
         h && /* @__PURE__ */ r(
@@ -1740,18 +1796,18 @@ const Yt = ({
             style: w,
             role: "tooltip",
             "aria-hidden": !h,
-            children: /* @__PURE__ */ r("div", { className: E, children: e })
+            children: /* @__PURE__ */ r("div", { className: S, children: e })
           }
         )
       ]
     }
   );
-}, Xe = Z(null), le = () => {
-  const e = Y(Xe);
+}, Qe = Q(null), le = () => {
+  const e = Y(Qe);
   if (!e)
     throw new Error("useCommand must be used within a Command provider");
   return e;
-}, Ye = ({
+}, Ze = ({
   children: e,
   className: t = "",
   variant: s = "secondary",
@@ -1759,7 +1815,7 @@ const Yt = ({
   inputPlaceholder: n = "Search...",
   ...o
 }) => {
-  const [d, c] = T(""), [l, i] = T(null), [u, v] = T(!1), p = [
+  const [d, c] = T(""), [l, i] = T(null), [m, v] = T(!1), p = [
     "clarity-command",
     `clarity-command--${s}`,
     t
@@ -1773,13 +1829,13 @@ const Yt = ({
       empty: a,
       inputPlaceholder: n
     },
-    isOpen: u,
+    isOpen: m,
     setIsOpen: v
-  }), [d, l, s, a, n, u]);
-  return /* @__PURE__ */ r(Xe.Provider, { value: f, children: /* @__PURE__ */ r("div", { className: p, ...o, children: e }) });
+  }), [d, l, s, a, n, m]);
+  return /* @__PURE__ */ r(Qe.Provider, { value: f, children: /* @__PURE__ */ r("div", { className: p, ...o, children: e }) });
 };
-Ye.displayName = "Command";
-const Je = ({ placeholder: e = "Search...", variant: t, onClick: s }) => {
+Ze.displayName = "Command";
+const Ke = ({ placeholder: e = "Search...", variant: t, onClick: s }) => {
   const { setIsOpen: a, variant: n } = le(), [o, d] = T(!1);
   P(() => {
     d(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
@@ -1788,8 +1844,8 @@ const Je = ({ placeholder: e = "Search...", variant: t, onClick: s }) => {
     "clarity-command-button",
     `clarity-command-button--${t || n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ g("button", { className: l, onClick: (u) => {
-    a(!0), s == null || s(u);
+  return /* @__PURE__ */ g("button", { className: l, onClick: (m) => {
+    a(!0), s == null || s(m);
   }, children: [
     /* @__PURE__ */ r("span", { children: e }),
     /* @__PURE__ */ g("kbd", { className: "clarity-command-shortcut", children: [
@@ -1798,8 +1854,8 @@ const Je = ({ placeholder: e = "Search...", variant: t, onClick: s }) => {
     ] })
   ] });
 };
-Je.displayName = "Command.Button";
-const Qe = ({ children: e, ...t }) => {
+Ke.displayName = "Command.Button";
+const et = ({ children: e, ...t }) => {
   const { isOpen: s, setIsOpen: a, variant: n } = le();
   return P(() => {
     const o = (d) => {
@@ -1808,8 +1864,8 @@ const Qe = ({ children: e, ...t }) => {
     return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
   }, [s, a]), /* @__PURE__ */ r(ee, { isOpen: s, onClose: () => a(!1), size: "large", closeOnOverlayClick: !0, children: /* @__PURE__ */ r("div", { className: `clarity-command--${n}`, children: e }) });
 };
-Qe.displayName = "Command.Dialog";
-const Ze = ({ className: e = "", ...t }) => {
+et.displayName = "Command.Dialog";
+const tt = ({ className: e = "", ...t }) => {
   const { searchTerm: s, setSearchTerm: a, variant: n, texts: o, isOpen: d } = le(), c = z(null);
   P(() => {
     var i;
@@ -1832,66 +1888,66 @@ const Ze = ({ className: e = "", ...t }) => {
     }
   ) });
 };
-Ze.displayName = "Command.Input";
-const Ke = ({ children: e, className: t = "", ...s }) => {
+tt.displayName = "Command.Input";
+const st = ({ children: e, className: t = "", ...s }) => {
   const { searchTerm: a } = le();
   let n = !1;
   const o = (l) => j.Children.toArray(l).map((i) => {
     var v;
     if (!j.isValidElement(i)) return i;
-    const u = i.type.displayName;
-    if (u === "Command.Empty")
+    const m = i.type.displayName;
+    if (m === "Command.Empty")
       return null;
-    if (u === "Command.Item")
+    if (m === "Command.Item")
       return (((v = i.props.children) == null ? void 0 : v.toString().toLowerCase()) || "").includes(a.toLowerCase()) ? (n = !0, i) : null;
-    if (u === "Command.Group") {
+    if (m === "Command.Group") {
       const p = o(i.props.children);
-      return j.Children.toArray(p).some((m) => j.isValidElement(m) && m.type.displayName === "Command.Item") ? j.cloneElement(i, { ...i.props, children: p }) : null;
+      return j.Children.toArray(p).some((u) => j.isValidElement(u) && u.type.displayName === "Command.Item") ? j.cloneElement(i, { ...i.props, children: p }) : null;
     }
     return i;
   }).filter(Boolean), d = o(e), c = ["clarity-command-list", t].filter(Boolean).join(" ");
   return /* @__PURE__ */ g("div", { className: c, ...s, children: [
     d,
-    !n && /* @__PURE__ */ r(be, {})
+    !n && /* @__PURE__ */ r(Ce, {})
   ] });
 };
-Ke.displayName = "Command.List";
-const be = ({ children: e, className: t = "", ...s }) => {
+st.displayName = "Command.List";
+const Ce = ({ children: e, className: t = "", ...s }) => {
   const { texts: a } = le(), n = ["clarity-command-empty", t].filter(Boolean).join(" ");
   return /* @__PURE__ */ r("div", { className: n, ...s, children: e || s.emptyText || a.empty });
 };
-be.displayName = "Command.Empty";
-const et = ({ children: e, className: t = "", ...s }) => {
+Ce.displayName = "Command.Empty";
+const at = ({ children: e, className: t = "", ...s }) => {
   const a = ["clarity-command-group", t].filter(Boolean).join(" ");
   return /* @__PURE__ */ r("div", { className: a, ...s, children: e });
 };
-et.displayName = "Command.Group";
-const tt = ({ children: e, className: t = "", ...s }) => {
+at.displayName = "Command.Group";
+const rt = ({ children: e, className: t = "", ...s }) => {
   const { setValue: a, variant: n } = le(), o = ["clarity-command-item", `clarity-command-item--${n}`, t].filter(Boolean).join(" ");
   return /* @__PURE__ */ r("div", { className: o, onClick: () => a((e == null ? void 0 : e.toString()) || ""), ...s, children: e });
 };
-tt.displayName = "Command.Item";
-const st = ({ className: e = "", ...t }) => {
+rt.displayName = "Command.Item";
+const nt = ({ className: e = "", ...t }) => {
   const s = ["clarity-command-separator", e].filter(Boolean).join(" ");
   return /* @__PURE__ */ r("hr", { className: s, ...t });
 };
-st.displayName = "Command.Separator";
-const at = ({ children: e, className: t = "", ...s }) => {
+nt.displayName = "Command.Separator";
+const lt = ({ children: e, className: t = "", ...s }) => {
   const a = ["clarity-command-shortcut", t].filter(Boolean).join(" ");
   return /* @__PURE__ */ r("span", { className: a, ...s, children: e });
 };
-at.displayName = "Command.Shortcut";
-const Jt = Object.assign(Ye, {
-  Button: Je,
-  Dialog: Qe,
-  Input: Ze,
-  List: Ke,
-  Empty: be,
-  Group: et,
-  Item: tt,
-  Separator: st,
-  Shortcut: at
-}), Et = ({ columns: e, viewMode: t }) => {
+lt.displayName = "Command.Shortcut";
+const Yt = Object.assign(Ze, {
+  Button: Ke,
+  Dialog: et,
+  Input: tt,
+  List: st,
+  Empty: Ce,
+  Group: at,
+  Item: rt,
+  Separator: nt,
+  Shortcut: lt
+}), St = ({ columns: e, viewMode: t }) => {
   const s = Array.from({ length: 5 }, (a, n) => n);
   return t === "card" ? /* @__PURE__ */ g("div", { className: "card-view-wrapper is-loading", children: [
     /* @__PURE__ */ r("div", { className: "skeleton card-view-header" }),
@@ -1900,7 +1956,7 @@ const Jt = Object.assign(Ye, {
     /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { className: "table-row", children: e.map((a) => /* @__PURE__ */ r("th", { className: "table-header-cell", children: /* @__PURE__ */ r("div", { className: "skeleton skeleton-text" }) }, a.key)) }) }),
     /* @__PURE__ */ r("tbody", { children: s.map((a) => /* @__PURE__ */ r("tr", { className: "table-row", children: e.map((n) => /* @__PURE__ */ r("td", { className: "table-cell", children: /* @__PURE__ */ r("div", { className: "skeleton skeleton-text" }) }, n.key)) }, a)) })
   ] }) });
-}, Qt = ({
+}, Jt = ({
   variant: e = "secondary",
   columns: t,
   data: s,
@@ -1908,47 +1964,47 @@ const Jt = Object.assign(Ye, {
   isScrollable: n = !1,
   isLoading: o = !1
 }) => {
-  const [d, c] = T(null), [l, i] = T("none"), u = (m) => {
-    m.sortable && (d === m.key ? i((h) => h === "asc" ? "desc" : h === "desc" ? "none" : "asc") : (c(m.key), i("asc")));
-  }, v = oe(() => l === "none" || !d ? s : [...s].sort((m, h) => {
-    const y = m[d], b = h[d];
+  const [d, c] = T(null), [l, i] = T("none"), m = (u) => {
+    u.sortable && (d === u.key ? i((h) => h === "asc" ? "desc" : h === "desc" ? "none" : "asc") : (c(u.key), i("asc")));
+  }, v = oe(() => l === "none" || !d ? s : [...s].sort((u, h) => {
+    const y = u[d], b = h[d];
     return y < b ? l === "asc" ? -1 : 1 : y > b ? l === "asc" ? 1 : -1 : 0;
-  }), [s, d, l]), p = (m) => m.sortable ? d !== m.key || l === "none" ? /* @__PURE__ */ r("span", { className: "sort-icon", children: "↕" }) : l === "asc" ? /* @__PURE__ */ r("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ r("span", { className: "sort-icon", children: "↓" }) : null;
+  }), [s, d, l]), p = (u) => u.sortable ? d !== u.key || l === "none" ? /* @__PURE__ */ r("span", { className: "sort-icon", children: "↕" }) : l === "asc" ? /* @__PURE__ */ r("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ r("span", { className: "sort-icon", children: "↓" }) : null;
   if (o)
-    return /* @__PURE__ */ r(Et, { columns: t, viewMode: a });
+    return /* @__PURE__ */ r(St, { columns: t, viewMode: a });
   const f = `table-variant-${e} ${n ? "is-scrollable" : ""}`;
   return a === "card" ? /* @__PURE__ */ g("div", { className: `card-view-wrapper ${f}`, children: [
-    /* @__PURE__ */ r("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((m) => /* @__PURE__ */ g(
+    /* @__PURE__ */ r("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((u) => /* @__PURE__ */ g(
       "div",
       {
-        className: `card-view-header-cell ${m.sortable ? "sortable" : ""}`,
-        onClick: () => u(m),
-        style: { minWidth: m.minWidth },
+        className: `card-view-header-cell ${u.sortable ? "sortable" : ""}`,
+        onClick: () => m(u),
+        style: { minWidth: u.minWidth },
         children: [
-          m.header,
-          p(m)
+          u.header,
+          p(u)
         ]
       },
-      m.key
+      u.key
     )) }),
-    /* @__PURE__ */ r("div", { className: "card-view-body", children: v.map((m, h) => /* @__PURE__ */ r("div", { className: `card-view-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ r("div", { className: `card-view-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(m) : m[y.key] }, y.key)) }, h)) })
+    /* @__PURE__ */ r("div", { className: "card-view-body", children: v.map((u, h) => /* @__PURE__ */ r("div", { className: `card-view-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ r("div", { className: `card-view-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(u) : u[y.key] }, y.key)) }, h)) })
   ] }) : /* @__PURE__ */ r("div", { className: `table-wrapper ${f}`, children: /* @__PURE__ */ g("table", { children: [
-    /* @__PURE__ */ r("thead", { className: "table-header", children: /* @__PURE__ */ r("tr", { className: "table-row", children: t.map((m) => /* @__PURE__ */ g(
+    /* @__PURE__ */ r("thead", { className: "table-header", children: /* @__PURE__ */ r("tr", { className: "table-row", children: t.map((u) => /* @__PURE__ */ g(
       "th",
       {
-        className: `table-header-cell ${m.sortable ? "sortable" : ""} table-header-cell-${e}`,
-        onClick: () => u(m),
-        style: { minWidth: m.minWidth },
+        className: `table-header-cell ${u.sortable ? "sortable" : ""} table-header-cell-${e}`,
+        onClick: () => m(u),
+        style: { minWidth: u.minWidth },
         children: [
-          m.header,
-          p(m)
+          u.header,
+          p(u)
         ]
       },
-      m.key
+      u.key
     )) }) }),
-    /* @__PURE__ */ r("tbody", { children: v.map((m, h) => /* @__PURE__ */ r("tr", { className: `table-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ r("td", { className: `table-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(m) : m[y.key] }, y.key)) }, h)) })
+    /* @__PURE__ */ r("tbody", { children: v.map((u, h) => /* @__PURE__ */ r("tr", { className: `table-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ r("td", { className: `table-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(u) : u[y.key] }, y.key)) }, h)) })
   ] }) });
-}, Zt = ({
+}, Qt = ({
   variant: e = "primary",
   product: t,
   tone: s,
@@ -1993,7 +2049,7 @@ const Jt = Object.assign(Ye, {
       ) })
     }
   );
-}, Ot = ({
+}, Et = ({
   className: e = "",
   noGutters: t,
   justify: s,
@@ -2011,8 +2067,8 @@ const Jt = Object.assign(Ye, {
   ].filter(Boolean).join(" ");
   return j.createElement(o, { className: c, ...d }, n);
 };
-Ot.displayName = "Row";
-const It = (e) => `${e / 12 * 100}%`, Dt = (e) => `${e / 12 * 100}%`, Pt = ({
+Et.displayName = "Row";
+const Ot = (e) => `${e / 12 * 100}%`, It = (e) => `${e / 12 * 100}%`, Dt = ({
   className: e = "",
   xs: t,
   sm: s,
@@ -2023,80 +2079,24 @@ const It = (e) => `${e / 12 * 100}%`, Dt = (e) => `${e / 12 * 100}%`, Pt = ({
   offset: c,
   children: l,
   as: i = "div",
-  style: u,
+  style: m,
   ...v
 }) => {
-  const p = { ...u }, f = (y, b) => {
+  const p = { ...m }, f = (y, b) => {
     if (b === void 0) return;
     const N = `--clarity-col-width-${y}`;
-    p[N] = typeof b == "number" ? It(b) : "auto";
-  }, m = (y, b) => {
+    p[N] = typeof b == "number" ? Ot(b) : "auto";
+  }, u = (y, b) => {
     if (b === void 0) return;
     const N = `--clarity-col-offset-${y}`;
-    p[N] = Dt(b);
+    p[N] = It(b);
   };
-  f("xs", t), f("sm", s), f("md", a), f("lg", n), f("xl", o), f("xxl", d), m("xs", c == null ? void 0 : c.xs), m("sm", c == null ? void 0 : c.sm), m("md", c == null ? void 0 : c.md), m("lg", c == null ? void 0 : c.lg), m("xl", c == null ? void 0 : c.xl), m("xxl", c == null ? void 0 : c.xxl);
+  f("xs", t), f("sm", s), f("md", a), f("lg", n), f("xl", o), f("xxl", d), u("xs", c == null ? void 0 : c.xs), u("sm", c == null ? void 0 : c.sm), u("md", c == null ? void 0 : c.md), u("lg", c == null ? void 0 : c.lg), u("xl", c == null ? void 0 : c.xl), u("xxl", c == null ? void 0 : c.xxl);
   const h = ["clarity-col", e].filter(Boolean).join(" ");
   return j.createElement(i, { className: h, style: p, ...v }, l);
 };
-Pt.displayName = "Col";
-const Ce = Z({}), rt = ({ children: e, className: t, ...s }) => {
-  const { borderRadius: a } = Y(Ce);
-  return /* @__PURE__ */ r(
-    me,
-    {
-      as: "header",
-      p: 4,
-      borderBottomWidth: 1,
-      borderColor: "gray.200",
-      className: t,
-      borderTopLeftRadius: a,
-      borderTopRightRadius: a,
-      ...s,
-      children: e
-    }
-  );
-};
-rt.displayName = "Card.Header";
-const nt = ({ children: e, className: t, ...s }) => /* @__PURE__ */ r(me, { p: 4, className: t, ...s, children: e });
-nt.displayName = "Card.Content";
-const lt = ({ children: e, className: t, ...s }) => {
-  const { borderRadius: a } = Y(Ce);
-  return /* @__PURE__ */ r(
-    me,
-    {
-      as: "footer",
-      p: 4,
-      borderTopWidth: 1,
-      borderColor: "gray.200",
-      display: "flex",
-      justifyContent: "flex-end",
-      gap: 3,
-      className: t,
-      borderBottomLeftRadius: a,
-      borderBottomRightRadius: a,
-      ...s,
-      children: e
-    }
-  );
-};
-lt.displayName = "Card.Footer";
-const ue = ({ children: e, bg: t = "white", borderRadius: s = 3, ...a }) => /* @__PURE__ */ r(Ce.Provider, { value: { borderRadius: s }, children: /* @__PURE__ */ r(
-  me,
-  {
-    bg: t,
-    borderRadius: s,
-    boxShadow: 1,
-    overflow: "hidden",
-    ...a,
-    children: e
-  }
-) });
-ue.Header = rt;
-ue.Content = nt;
-ue.Footer = lt;
-ue.displayName = "Card";
-const Kt = {
+Dt.displayName = "Col";
+const Zt = {
   primary: {
     50: "#f0f9ff",
     100: "#e0f2fe",
@@ -2145,7 +2145,7 @@ const Kt = {
     800: "#065f46",
     900: "#064e3b"
   }
-}, es = {
+}, Kt = {
   xs: "4px",
   sm: "8px",
   md: "16px",
@@ -2153,38 +2153,38 @@ const Kt = {
   xl: "32px",
   "2xl": "48px",
   "3xl": "64px"
-}, ts = (...e) => e.filter(Boolean).join(" "), ss = () => Math.random().toString(36).substr(2, 9);
+}, es = (...e) => e.filter(Boolean).join(" "), ts = () => Math.random().toString(36).substr(2, 9);
 export {
-  Xt as Accordion,
-  Vt as Badge,
+  qt as Accordion,
+  Ht as Badge,
   me as Box,
-  Mt as Button,
-  Ft as ButtonGroup,
-  Ut as ButtonIcon,
-  qt as ButtonLink,
+  Vt as Button,
+  Mt as ButtonGroup,
+  Gt as ButtonIcon,
+  Ut as ButtonLink,
   ue as Card,
-  _t as CheckInput,
-  Pt as Col,
-  Jt as Command,
+  gt as CheckInput,
+  Dt as Col,
+  Yt as Command,
   te as ConfirmationDialog,
   ce as Dropdown,
-  vt as Input,
-  wt as InputSwitch,
+  yt as Input,
+  _t as InputSwitch,
   ee as Modal,
-  Nt as MultiSelect,
+  Ct as MultiSelect,
   ne as Offcanvas,
-  Ot as Row,
-  Ct as Select,
-  Zt as Spinner,
-  Qt as Table,
-  qe as Tabs,
-  bt as Textarea,
-  Gt as ToastProvider,
-  Yt as Tooltip,
-  ts as cn,
-  Kt as colors,
-  ss as generateId,
-  es as spacing,
+  Et as Row,
+  bt as Select,
+  Qt as Spinner,
+  Jt as Table,
+  Je as Tabs,
+  vt as Textarea,
+  zt as ToastProvider,
+  Xt as Tooltip,
+  es as cn,
+  Zt as colors,
+  ts as generateId,
+  Kt as spacing,
   ge as typography,
-  zt as useToast
+  Ft as useToast
 };