beth-clarity 1.1.18 → 1.1.19

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

@@ -1,7 +1,7 @@
-import { jsx as a, jsxs as _, Fragment as Ze } from "react/jsx-runtime";
-import B, { useState as x, useRef as P, useEffect as S, forwardRef as Ke, isValidElement as Z, createContext as U, cloneElement as W, useContext as q, useMemo as Y, useCallback as le, useLayoutEffect as et } from "react";
-import tt from "react-dom";
-const xt = ({
+import { jsx as a, jsxs as w, Fragment as ot } from "react/jsx-runtime";
+import E, { useState as T, useRef as M, useEffect as D, forwardRef as ct, isValidElement as se, createContext as Q, cloneElement as z, useContext as Z, useMemo as te, useCallback as ce, useLayoutEffect as dt } from "react";
+import mt from "react-dom";
+const Dt = ({
   variant: e = "primary",
   product: t,
   tone: s,
@@ -9,24 +9,24 @@ const xt = ({
   bgColor: l,
   textColor: i,
   children: d,
-  className: c = "",
+  className: o = "",
   rounded: r = !1,
-  outlined: o = !1,
-  ...u
+  outlined: c = !1,
+  ...p
 }) => {
   const v = "clarity-badge", m = !!l, f = t && s && !m;
-  let p = "";
-  m ? p = `${v}--custom-bg` : f ? p = `${v}--custom` : p = `${v}--${e}`;
+  let u = "";
+  m ? u = `${v}--custom-bg` : f ? u = `${v}--custom` : u = `${v}--${e}`;
   const h = [
     v,
-    p,
+    u,
     `${v}--${n}`,
     r ? `${v}--rounded` : "",
-    o ? `${v}--outlined` : "",
-    c
+    c ? `${v}--outlined` : "",
+    o
   ].filter(Boolean).join(" "), y = {};
   m && (y.backgroundColor = l, i && (y.color = i));
-  const N = f && t && s ? {
+  const b = f && t && s ? {
     "--custom-bg-color": `var(--clarity-${t}-${s})`,
     "--custom-text-color": s && parseInt(s) >= 500 ? "white" : `var(--clarity-${t}-800)`
   } : {};
@@ -36,13 +36,13 @@ const xt = ({
       className: h,
       style: {
         ...y,
-        ...N
+        ...b
       },
-      ...u,
+      ...p,
       children: d
     }
   );
-}, Tt = ({
+}, At = ({
   variant: e = "primary",
   size: t = "medium",
   disabled: s = !1,
@@ -50,25 +50,25 @@ const xt = ({
   children: l,
   onClick: i,
   type: d = "button",
-  className: c = "",
+  className: o = "",
   title: r,
-  customColor: o,
-  customColorHover: u,
+  customColor: c,
+  customColorHover: p,
   ...v
 }) => {
   const m = "clarity-button", f = [
     m,
-    !o && `${m}--${e}`,
+    !c && `${m}--${e}`,
     `${m}--${t}`,
     n && `${m}--loading`,
     s && `${m}--disabled`,
-    c
-  ].filter(Boolean).join(" "), p = {};
-  return o && (p["--button-bg"] = o, p["--button-hover-bg"] = u || `${o}E6`, p["--button-border"] = o, p["--button-hover-border"] = u || `${o}E6`, p["--button-fg"] = "#fff"), /* @__PURE__ */ _(
+    o
+  ].filter(Boolean).join(" "), u = {};
+  return c && (u["--button-bg"] = c, u["--button-hover-bg"] = p || `${c}E6`, u["--button-border"] = c, u["--button-hover-border"] = p || `${c}E6`, u["--button-fg"] = "#fff"), /* @__PURE__ */ w(
     "button",
     {
       className: f,
-      style: p,
+      style: u,
       disabled: s || n,
       onClick: i,
       type: d,
@@ -80,7 +80,7 @@ const xt = ({
       ]
     }
   );
-}, Bt = ({
+}, Pt = ({
   variant: e = "primary",
   size: t = "medium",
   filled: s = !0,
@@ -88,52 +88,52 @@ const xt = ({
   value: l,
   multiple: i = !1,
   disabled: d = !1,
-  onChange: c,
+  onChange: o,
   className: r = "",
-  ...o
+  ...c
 }) => {
-  const u = "clarity-button-group", v = `${u}--${e}`, m = [
-    u,
+  const p = "clarity-button-group", v = `${p}--${e}`, m = [
+    p,
     v,
-    `${u}--${t}`,
-    !s && `${u}--outline`,
-    d && `${u}--disabled`,
+    `${p}--${t}`,
+    !s && `${p}--outline`,
+    d && `${p}--disabled`,
     r
   ].filter(Boolean).join(" "), f = (h) => {
-    if (d || !c) return;
-    const y = n.find((N) => N.id === h);
+    if (d || !o) return;
+    const y = n.find((b) => b.id === h);
     if (!(y != null && y.disabled))
       if (i) {
-        const N = Array.isArray(l) ? l : [], C = N.includes(h) ? N.filter((j) => j !== h) : [...N, h];
-        c(C);
+        const b = Array.isArray(l) ? l : [], N = b.includes(h) ? b.filter((B) => B !== h) : [...b, h];
+        o(N);
       } else
-        c(h);
-  }, p = (h) => i ? Array.isArray(l) && l.includes(h) : l === h;
+        o(h);
+  }, u = (h) => i ? Array.isArray(l) && l.includes(h) : l === h;
   return /* @__PURE__ */ a(
     "div",
     {
       className: m,
       role: "group",
-      ...o,
+      ...c,
       children: n.map((h, y) => {
-        const N = p(h.id), C = [
-          `${u}__item`,
-          N && `${u}__item--selected`,
-          h.disabled && `${u}__item--disabled`,
-          y === 0 && `${u}__item--first`,
-          y === n.length - 1 && `${u}__item--last`
+        const b = u(h.id), N = [
+          `${p}__item`,
+          b && `${p}__item--selected`,
+          h.disabled && `${p}__item--disabled`,
+          y === 0 && `${p}__item--first`,
+          y === n.length - 1 && `${p}__item--last`
         ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ _(
+        return /* @__PURE__ */ w(
           "button",
           {
-            className: C,
+            className: N,
             onClick: () => f(h.id),
             disabled: d || h.disabled,
             type: "button",
-            "aria-pressed": N,
+            "aria-pressed": b,
             children: [
-              h.icon && /* @__PURE__ */ a("span", { className: `${u}__item-icon`, children: h.icon }),
-              /* @__PURE__ */ a("span", { className: `${u}__item-label`, children: h.label })
+              h.icon && /* @__PURE__ */ a("span", { className: `${p}__item-icon`, children: h.icon }),
+              /* @__PURE__ */ a("span", { className: `${p}__item-label`, children: h.label })
             ]
           },
           h.id
@@ -141,7 +141,7 @@ const xt = ({
       })
     }
   );
-}, st = B.forwardRef(({
+}, ut = E.forwardRef(({
   variant: e,
   size: t = "medium",
   label: s,
@@ -149,63 +149,63 @@ const xt = ({
   error: l = !1,
   errorMessage: i,
   startIcon: d,
-  endIcon: c,
+  endIcon: o,
   className: r = "",
-  disabled: o = !1,
-  value: u,
+  disabled: c = !1,
+  value: p,
   defaultValue: v,
   onFocus: m,
   onBlur: f,
-  ...p
+  ...u
 }, h) => {
-  const [y, N] = x(!1), [C, j] = x(!1), T = P(null);
-  B.useImperativeHandle(h, () => T.current), S(() => {
-    const k = T.current;
-    k && j(k.value.length > 0);
-  }, [u, v]);
-  const w = (k) => {
-    N(!0), m == null || m(k);
+  const [y, b] = T(!1), [N, B] = T(!1), x = M(null);
+  E.useImperativeHandle(h, () => x.current), D(() => {
+    const k = x.current;
+    k && B(k.value.length > 0);
+  }, [p, v]);
+  const _ = (k) => {
+    b(!0), m == null || m(k);
   }, $ = (k) => {
-    N(!1), j(k.target.value.length > 0), f == null || f(k);
+    b(!1), B(k.target.value.length > 0), f == null || f(k);
   }, L = [
     "clarity-input",
     "clarity-input--outlined",
     `clarity-input--${t}`,
     e && `clarity-input--${e}`,
     l && "clarity-input--error",
-    o && "clarity-input--disabled",
+    c && "clarity-input--disabled",
     y && "clarity-input--focused",
-    C && "clarity-input--has-value",
+    N && "clarity-input--has-value",
     d && "clarity-input--with-start-icon",
-    c && "clarity-input--with-end-icon",
+    o && "clarity-input--with-end-icon",
     r
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: "clarity-input-wrapper", children: [
-    /* @__PURE__ */ _("div", { className: L, children: [
+  return /* @__PURE__ */ w("div", { className: "clarity-input-wrapper", children: [
+    /* @__PURE__ */ w("div", { className: L, children: [
       d && /* @__PURE__ */ a("div", { className: "clarity-input__start-icon", children: d }),
-      /* @__PURE__ */ _("div", { className: "clarity-input__field", children: [
+      /* @__PURE__ */ w("div", { className: "clarity-input__field", children: [
         /* @__PURE__ */ a(
           "input",
           {
-            ref: T,
+            ref: x,
             className: "clarity-input__element",
-            disabled: o,
-            value: u,
+            disabled: c,
+            value: p,
             defaultValue: v,
-            onFocus: w,
+            onFocus: _,
             onBlur: $,
-            ...p
+            ...u
           }
         ),
         s && /* @__PURE__ */ a("label", { className: "clarity-input__label", children: s })
       ] }),
-      c && /* @__PURE__ */ a("div", { className: "clarity-input__end-icon", children: c })
+      o && /* @__PURE__ */ a("div", { className: "clarity-input__end-icon", children: o })
     ] }),
     (n || l && i) && /* @__PURE__ */ a("div", { className: "clarity-input__helper-text", children: l && i ? i : n })
   ] });
 });
-st.displayName = "Input";
-const at = B.forwardRef(({
+ut.displayName = "Input";
+const pt = E.forwardRef(({
   variant: e,
   size: t = "medium",
   label: s,
@@ -213,73 +213,73 @@ const at = B.forwardRef(({
   error: l = !1,
   errorMessage: i,
   startIcon: d,
-  endIcon: c,
+  endIcon: o,
   className: r = "",
-  disabled: o = !1,
-  value: u,
+  disabled: c = !1,
+  value: p,
   defaultValue: v,
   onFocus: m,
   onBlur: f,
-  rows: p = 3,
+  rows: u = 3,
   minHeight: h,
   maxHeight: y,
-  resizable: N = !0,
-  ...C
-}, j) => {
-  const [T, w] = x(!1), [$, L] = x(!1), k = P(null);
-  B.useImperativeHandle(j, () => k.current), S(() => {
+  resizable: b = !0,
+  ...N
+}, B) => {
+  const [x, _] = T(!1), [$, L] = T(!1), k = M(null);
+  E.useImperativeHandle(B, () => k.current), D(() => {
     const g = k.current;
     g && L(g.value.length > 0);
-  }, [u, v]);
-  const E = (g) => {
-    w(!0), m == null || m(g);
+  }, [p, v]);
+  const j = (g) => {
+    _(!0), m == null || m(g);
   }, I = (g) => {
-    w(!1), L(g.target.value.length > 0), f == null || f(g);
+    _(!1), L(g.target.value.length > 0), f == null || f(g);
   }, A = [
     "clarity-textarea",
     "clarity-textarea--outlined",
     `clarity-textarea--${t}`,
     e && `clarity-textarea--${e}`,
     l && "clarity-textarea--error",
-    o && "clarity-textarea--disabled",
-    T && "clarity-textarea--focused",
+    c && "clarity-textarea--disabled",
+    x && "clarity-textarea--focused",
     $ && "clarity-textarea--has-value",
     d && "clarity-textarea--with-start-icon",
-    c && "clarity-textarea--with-end-icon",
+    o && "clarity-textarea--with-end-icon",
     r
   ].filter(Boolean).join(" "), O = {
-    resize: N ? "vertical" : "none",
+    resize: b ? "vertical" : "none",
     minHeight: h ? `${h}px` : void 0,
     maxHeight: y ? `${y}px` : void 0
   };
-  return /* @__PURE__ */ _("div", { className: "clarity-textarea-wrapper", children: [
-    /* @__PURE__ */ _("div", { className: A, children: [
+  return /* @__PURE__ */ w("div", { className: "clarity-textarea-wrapper", children: [
+    /* @__PURE__ */ w("div", { className: A, children: [
       d && /* @__PURE__ */ a("div", { className: "clarity-textarea__start-icon", children: d }),
-      /* @__PURE__ */ _("div", { className: "clarity-textarea__field", children: [
+      /* @__PURE__ */ w("div", { className: "clarity-textarea__field", children: [
         /* @__PURE__ */ a(
           "textarea",
           {
             ref: k,
             className: "clarity-textarea__element",
-            disabled: o,
-            value: u,
+            disabled: c,
+            value: p,
             defaultValue: v,
-            onFocus: E,
+            onFocus: j,
             onBlur: I,
-            rows: p,
+            rows: u,
             style: O,
-            ...C
+            ...N
           }
         ),
         s && /* @__PURE__ */ a("label", { className: "clarity-textarea__label", children: s })
       ] }),
-      c && /* @__PURE__ */ a("div", { className: "clarity-textarea__end-icon", children: c })
+      o && /* @__PURE__ */ a("div", { className: "clarity-textarea__end-icon", children: o })
     ] }),
     (n || l && i) && /* @__PURE__ */ a("div", { className: "clarity-textarea__helper-text", children: l && i ? i : n })
   ] });
 });
-at.displayName = "Textarea";
-const nt = B.forwardRef(({
+pt.displayName = "Textarea";
+const ft = E.forwardRef(({
   variant: e,
   size: t = "medium",
   label: s,
@@ -287,99 +287,99 @@ const nt = B.forwardRef(({
   error: l = !1,
   errorMessage: i,
   startIcon: d,
-  endIcon: c,
+  endIcon: o,
   className: r = "",
-  disabled: o = !1,
-  value: u,
+  disabled: c = !1,
+  value: p,
   defaultValue: v,
   onFocus: m,
   onBlur: f,
-  onChange: p,
+  onChange: u,
   options: h,
   placeholder: y = "Selecione uma opção",
-  isClearable: N = !1,
-  isSearchable: C = !1,
-  ...j
-}, T) => {
-  const [w, $] = x(!1), [L, k] = x(!1), [E, I] = x(u || v || ""), [A, O] = x(""), g = P(null), H = P(null);
-  B.useImperativeHandle(T, () => g.current), S(() => {
-    u !== void 0 && I(u);
-  }, [u]), S(() => {
-    const b = (R) => {
-      g.current && !g.current.contains(R.target) && ($(!1), k(!1), f == null || f());
+  isClearable: b = !1,
+  isSearchable: N = !1,
+  ...B
+}, x) => {
+  const [_, $] = T(!1), [L, k] = T(!1), [j, I] = T(p || v || ""), [A, O] = T(""), g = M(null), V = M(null);
+  E.useImperativeHandle(x, () => g.current), D(() => {
+    p !== void 0 && I(p);
+  }, [p]), D(() => {
+    const C = (S) => {
+      g.current && !g.current.contains(S.target) && ($(!1), k(!1), f == null || f());
     };
-    return document.addEventListener("mousedown", b), () => document.removeEventListener("mousedown", b);
+    return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
   }, [f]);
-  const V = C && A ? h.filter(
-    (b) => b.label.toLowerCase().includes(A.toLowerCase())
-  ) : h, F = () => {
-    o || ($(!w), k(!w), w ? (f == null || f(), C && O("")) : (m == null || m(), C && setTimeout(() => {
-      var b;
-      (b = H.current) == null || b.focus();
+  const H = N && A ? h.filter(
+    (C) => C.label.toLowerCase().includes(A.toLowerCase())
+  ) : h, W = () => {
+    c || ($(!_), k(!_), _ ? (f == null || f(), N && O("")) : (m == null || m(), N && setTimeout(() => {
+      var C;
+      (C = V.current) == null || C.focus();
     }, 0)));
-  }, X = (b) => {
-    b.disabled || (I(b.value), $(!1), k(!1), O(""), p == null || p(b.value), f == null || f());
-  }, te = (b) => {
-    O(b.target.value);
-  }, G = (b) => {
-    b.key === "Escape" ? ($(!1), k(!1), O("")) : b.key === "Enter" && V.length > 0 && V[0] && X(V[0]);
-  }, M = h.find((b) => b.value === E), ne = E !== "" && E !== void 0, ie = (b) => {
-    b.stopPropagation(), I(""), p == null || p("");
-  }, re = ne || L || y || C && A, ce = [
+  }, q = (C) => {
+    C.disabled || (I(C.value), $(!1), k(!1), O(""), u == null || u(C.value), f == null || f());
+  }, X = (C) => {
+    O(C.target.value);
+  }, F = (C) => {
+    C.key === "Escape" ? ($(!1), k(!1), O("")) : C.key === "Enter" && H.length > 0 && H[0] && q(H[0]);
+  }, P = h.find((C) => C.value === j), Y = j !== "" && j !== void 0, le = (C) => {
+    C.stopPropagation(), I(""), u == null || u("");
+  }, re = Y || L || y || N && A, ie = [
     "clarity-select",
     "clarity-select--outlined",
     `clarity-select--${t}`,
     e && `clarity-select--${e}`,
     l && "clarity-select--error",
-    o && "clarity-select--disabled",
-    (L || w) && "clarity-select--focused",
+    c && "clarity-select--disabled",
+    (L || _) && "clarity-select--focused",
     re && "clarity-select--label-up",
-    w && "clarity-select--open",
-    C && "clarity-select--searchable",
+    _ && "clarity-select--open",
+    N && "clarity-select--searchable",
     d && "clarity-select--with-start-icon",
-    (c || N) && "clarity-select--with-end-icon",
+    (o || b) && "clarity-select--with-end-icon",
     r
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: "clarity-select-wrapper", children: [
-    /* @__PURE__ */ _(
+  return /* @__PURE__ */ w("div", { className: "clarity-select-wrapper", children: [
+    /* @__PURE__ */ w(
       "div",
       {
         ref: g,
-        className: ce,
-        onClick: C ? void 0 : F,
+        className: ie,
+        onClick: N ? void 0 : W,
         role: "combobox",
-        "aria-expanded": w,
+        "aria-expanded": _,
         "aria-haspopup": "listbox",
-        tabIndex: o || C ? -1 : 0,
-        ...j,
+        tabIndex: c || N ? -1 : 0,
+        ...B,
         children: [
           d && /* @__PURE__ */ a("div", { className: "clarity-select__start-icon", children: d }),
-          /* @__PURE__ */ _("div", { className: "clarity-select__field", children: [
-            C ? /* @__PURE__ */ a(
+          /* @__PURE__ */ w("div", { className: "clarity-select__field", children: [
+            N ? /* @__PURE__ */ a(
               "input",
               {
-                ref: H,
+                ref: V,
                 type: "text",
                 className: "clarity-select__search-input",
-                value: w ? A : M ? M.label : "",
-                onChange: te,
-                onKeyDown: G,
+                value: _ ? A : P ? P.label : "",
+                onChange: X,
+                onKeyDown: F,
                 onFocus: () => {
-                  w || ($(!0), k(!0), m == null || m());
+                  _ || ($(!0), k(!0), m == null || m());
                 },
-                placeholder: M ? M.label : y,
-                disabled: o,
-                readOnly: !w
+                placeholder: P ? P.label : y,
+                disabled: c,
+                readOnly: !_
               }
-            ) : /* @__PURE__ */ a("div", { className: "clarity-select__display", children: M ? M.label : y }),
+            ) : /* @__PURE__ */ a("div", { className: "clarity-select__display", children: P ? P.label : y }),
             s && /* @__PURE__ */ a("label", { className: "clarity-select__label", children: s })
           ] }),
-          N && ne && /* @__PURE__ */ a(
+          b && Y && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
               className: "clarity-select__clear-button",
-              onClick: ie,
+              onClick: le,
               "aria-label": "Limpar seleção",
               children: /* @__PURE__ */ a(
                 "svg",
@@ -406,8 +406,8 @@ const nt = B.forwardRef(({
             "div",
             {
               className: "clarity-select__end-icon",
-              onClick: C ? F : void 0,
-              children: c || /* @__PURE__ */ a(
+              onClick: N ? W : void 0,
+              children: o || /* @__PURE__ */ a(
                 "svg",
                 {
                   className: "clarity-select__arrow",
@@ -429,20 +429,20 @@ const nt = B.forwardRef(({
               )
             }
           ),
-          w && /* @__PURE__ */ a("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ a("ul", { className: "clarity-select__options", role: "listbox", children: V.length > 0 ? V.map((b) => /* @__PURE__ */ a(
+          _ && /* @__PURE__ */ a("div", { className: "clarity-select__dropdown", children: /* @__PURE__ */ a("ul", { className: "clarity-select__options", role: "listbox", children: H.length > 0 ? H.map((C) => /* @__PURE__ */ a(
             "li",
             {
               className: [
                 "clarity-select__option",
-                b.disabled && "clarity-select__option--disabled",
-                E === b.value && "clarity-select__option--selected"
+                C.disabled && "clarity-select__option--disabled",
+                j === C.value && "clarity-select__option--selected"
               ].filter(Boolean).join(" "),
-              onClick: () => X(b),
+              onClick: () => q(C),
               role: "option",
-              "aria-selected": E === b.value,
-              children: b.label
+              "aria-selected": j === C.value,
+              children: C.label
             },
-            b.value
+            C.value
           )) : /* @__PURE__ */ a("li", { className: "clarity-select__option clarity-select__option--no-results", children: "Nenhum resultado encontrado" }) }) })
         ]
       }
@@ -450,8 +450,8 @@ const nt = B.forwardRef(({
     (n || l && i) && /* @__PURE__ */ a("div", { className: "clarity-select__helper-text", children: l && i ? i : n })
   ] });
 });
-nt.displayName = "Select";
-const lt = Ke(({
+ft.displayName = "Select";
+const ht = ct(({
   options: e = [],
   value: t = [],
   onChange: s,
@@ -459,118 +459,118 @@ const lt = Ke(({
   label: l,
   helperText: i,
   error: d = !1,
-  errorMessage: c,
+  errorMessage: o,
   disabled: r = !1,
-  variant: o = "primary",
-  size: u = "medium",
+  variant: c = "primary",
+  size: p = "medium",
   maxSelectedLabels: v = 3,
   selectionLimit: m,
   className: f = "",
-  id: p,
+  id: u,
   name: h,
   required: y = !1,
-  "data-testid": N,
-  ...C
-}, j) => {
-  const [T, w] = x(!1), [$, L] = x(""), [k, E] = x(!1), I = P(null), A = P(null), O = P(null), g = (b) => {
-    I.current = b, j && (typeof j == "function" ? j(b) : j.current = b);
+  "data-testid": b,
+  ...N
+}, B) => {
+  const [x, _] = T(!1), [$, L] = T(""), [k, j] = T(!1), I = M(null), A = M(null), O = M(null), g = (C) => {
+    I.current = C, B && (typeof B == "function" ? B(C) : B.current = C);
   };
-  S(() => {
-    const b = (R) => {
-      I.current && !I.current.contains(R.target) && (w(!1), E(!1), L(""));
+  D(() => {
+    const C = (S) => {
+      I.current && !I.current.contains(S.target) && (_(!1), j(!1), L(""));
     };
-    return document.addEventListener("click", b), () => document.removeEventListener("click", b);
+    return document.addEventListener("click", C), () => document.removeEventListener("click", C);
   }, []);
-  const H = e.filter(
-    (b) => b.label.toLowerCase().includes($.toLowerCase())
-  ), V = () => {
-    r || (w(!T), E(!T), T ? L("") : setTimeout(() => {
-      var b;
-      (b = A.current) == null || b.focus();
+  const V = e.filter(
+    (C) => C.label.toLowerCase().includes($.toLowerCase())
+  ), H = () => {
+    r || (_(!x), j(!x), x ? L("") : setTimeout(() => {
+      var C;
+      (C = A.current) == null || C.focus();
     }, 100));
-  }, F = (b, R) => {
+  }, W = (C, S) => {
     if (r)
       return;
-    R && (R.stopPropagation(), R.preventDefault());
-    const z = t.includes(b);
-    let D;
-    z ? D = t.filter((se) => se !== b) : D = [...t, b], s && s(D);
-  }, X = (b, R) => {
-    if (R.stopPropagation(), r) return;
-    const z = t.filter((D) => D !== b);
-    s == null || s(z);
-  }, te = (b) => {
-    b.stopPropagation(), !r && (s == null || s([]));
-  }, G = (b) => {
-    L(b.target.value);
-  }, M = (b) => {
-    b.key === "Escape" && (w(!1), E(!1), L(""));
-  }, ne = k || T || t.length > 0, ie = () => {
+    S && (S.stopPropagation(), S.preventDefault());
+    const G = t.includes(C);
+    let R;
+    G ? R = t.filter((J) => J !== C) : R = [...t, C], s && s(R);
+  }, q = (C, S) => {
+    if (S.stopPropagation(), r) return;
+    const G = t.filter((R) => R !== C);
+    s == null || s(G);
+  }, X = (C) => {
+    C.stopPropagation(), !r && (s == null || s([]));
+  }, F = (C) => {
+    L(C.target.value);
+  }, P = (C) => {
+    C.key === "Escape" && (_(!1), j(!1), L(""));
+  }, Y = k || x || t.length > 0, le = () => {
     if (t.length === 0) return null;
-    const b = t.map(
-      (D) => e.find((se) => se.value === D)
-    ).filter(Boolean), R = b.slice(0, v), z = b.length - v;
-    return /* @__PURE__ */ _("div", { className: "clarity-multiselect__chips", children: [
-      R.map((D) => /* @__PURE__ */ _("div", { className: "clarity-multiselect__chip", children: [
-        /* @__PURE__ */ a("span", { className: "clarity-multiselect__chip-label", children: D.label }),
+    const C = t.map(
+      (R) => e.find((J) => J.value === R)
+    ).filter(Boolean), S = C.slice(0, v), G = C.length - v;
+    return /* @__PURE__ */ w("div", { className: "clarity-multiselect__chips", children: [
+      S.map((R) => /* @__PURE__ */ w("div", { className: "clarity-multiselect__chip", children: [
+        /* @__PURE__ */ a("span", { className: "clarity-multiselect__chip-label", children: R.label }),
         !r && /* @__PURE__ */ a(
           "button",
           {
             type: "button",
             className: "clarity-multiselect__chip-remove",
-            onClick: (se) => X(D.value, se),
-            "aria-label": `Remover ${D.label}`,
+            onClick: (J) => q(R.value, J),
+            "aria-label": `Remover ${R.label}`,
             children: "×"
           }
         )
-      ] }, D.value)),
-      z > 0 && /* @__PURE__ */ _("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
+      ] }, R.value)),
+      G > 0 && /* @__PURE__ */ w("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
         "+",
-        z,
+        G,
         " mais"
       ] })
     ] });
   }, re = [
     "clarity-multiselect-wrapper",
     f
-  ].filter(Boolean).join(" "), ce = [
+  ].filter(Boolean).join(" "), ie = [
     "clarity-multiselect",
-    `clarity-multiselect--${o}`,
-    `clarity-multiselect--${u}`,
-    T && "clarity-multiselect--open",
+    `clarity-multiselect--${c}`,
+    `clarity-multiselect--${p}`,
+    x && "clarity-multiselect--open",
     k && "clarity-multiselect--focused",
-    ne && "clarity-multiselect--label-up",
+    Y && "clarity-multiselect--label-up",
     d && "clarity-multiselect--error",
     r && "clarity-multiselect--disabled",
     t.length > 0 && "clarity-multiselect--has-value"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: re, children: [
-    /* @__PURE__ */ _(
+  return /* @__PURE__ */ w("div", { className: re, children: [
+    /* @__PURE__ */ w(
       "div",
       {
         ref: g,
-        className: ce,
-        "data-testid": N,
-        ...C,
+        className: ie,
+        "data-testid": b,
+        ...N,
         children: [
-          /* @__PURE__ */ _(
+          /* @__PURE__ */ w(
             "div",
             {
               className: "clarity-multiselect__field",
-              onClick: V,
+              onClick: H,
               children: [
-                l && /* @__PURE__ */ _("label", { className: "clarity-multiselect__label", children: [
+                l && /* @__PURE__ */ w("label", { className: "clarity-multiselect__label", children: [
                   l,
                   y && /* @__PURE__ */ a("span", { className: "clarity-multiselect__required", children: "*" })
                 ] }),
-                /* @__PURE__ */ a("div", { className: "clarity-multiselect__content", children: t.length > 0 ? ie() : /* @__PURE__ */ a("span", { className: "clarity-multiselect__placeholder", children: n }) }),
-                /* @__PURE__ */ _("div", { className: "clarity-multiselect__icons", children: [
+                /* @__PURE__ */ a("div", { className: "clarity-multiselect__content", children: t.length > 0 ? le() : /* @__PURE__ */ a("span", { className: "clarity-multiselect__placeholder", children: n }) }),
+                /* @__PURE__ */ w("div", { className: "clarity-multiselect__icons", children: [
                   t.length > 0 && !r && /* @__PURE__ */ a(
                     "button",
                     {
                       type: "button",
                       className: "clarity-multiselect__clear-button",
-                      onClick: te,
+                      onClick: X,
                       "aria-label": "Limpar seleção",
                       children: "×"
                     }
@@ -589,7 +589,7 @@ const lt = Ke(({
               ]
             }
           ),
-          T && /* @__PURE__ */ _("div", { ref: O, className: "clarity-multiselect__dropdown", children: [
+          x && /* @__PURE__ */ w("div", { ref: O, className: "clarity-multiselect__dropdown", children: [
             /* @__PURE__ */ a("div", { className: "clarity-multiselect__search", children: /* @__PURE__ */ a(
               "input",
               {
@@ -598,26 +598,26 @@ const lt = Ke(({
                 className: "clarity-multiselect__search-input",
                 placeholder: "Buscar opções...",
                 value: $,
-                onChange: G,
-                onKeyDown: M
+                onChange: F,
+                onKeyDown: P
               }
             ) }),
-            /* @__PURE__ */ a("ul", { className: "clarity-multiselect__options", children: H.length > 0 ? H.map((b) => {
-              const R = t.includes(b.value), z = b.disabled || r;
-              return /* @__PURE__ */ _(
+            /* @__PURE__ */ a("ul", { className: "clarity-multiselect__options", children: V.length > 0 ? V.map((C) => {
+              const S = t.includes(C.value), G = C.disabled || r;
+              return /* @__PURE__ */ w(
                 "li",
                 {
                   className: [
                     "clarity-multiselect__option",
-                    R && "clarity-multiselect__option--selected",
-                    z && "clarity-multiselect__option--disabled"
+                    S && "clarity-multiselect__option--selected",
+                    G && "clarity-multiselect__option--disabled"
                   ].filter(Boolean).join(" "),
-                  onClick: (D) => !z && F(b.value, D),
+                  onClick: (R) => !G && W(C.value, R),
                   children: [
                     /* @__PURE__ */ a("div", { className: "clarity-multiselect__option-checkbox", children: /* @__PURE__ */ a("div", { className: [
                       "clarity-multiselect__checkbox",
-                      R && "clarity-multiselect__checkbox--checked"
-                    ].filter(Boolean).join(" "), children: R && /* @__PURE__ */ a("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ a(
+                      S && "clarity-multiselect__checkbox--checked"
+                    ].filter(Boolean).join(" "), children: S && /* @__PURE__ */ a("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ a(
                       "path",
                       {
                         d: "M2 6L5 9L10 3",
@@ -627,72 +627,72 @@ const lt = Ke(({
                         strokeLinejoin: "round"
                       }
                     ) }) }) }),
-                    /* @__PURE__ */ a("span", { className: "clarity-multiselect__option-label", children: b.label })
+                    /* @__PURE__ */ a("span", { className: "clarity-multiselect__option-label", children: C.label })
                   ]
                 },
-                b.value
+                C.value
               );
             }) : /* @__PURE__ */ a("li", { className: "clarity-multiselect__option clarity-multiselect__option--no-results", children: "Nenhum resultado encontrado" }) })
           ] })
         ]
       }
     ),
-    (i || d && c) && /* @__PURE__ */ a("div", { className: "clarity-multiselect__helper", children: d && c ? /* @__PURE__ */ a("span", { className: "clarity-multiselect__error-message", children: c }) : i && /* @__PURE__ */ a("span", { className: "clarity-multiselect__helper-text", children: i }) })
+    (i || d && o) && /* @__PURE__ */ a("div", { className: "clarity-multiselect__helper", children: d && o ? /* @__PURE__ */ a("span", { className: "clarity-multiselect__error-message", children: o }) : i && /* @__PURE__ */ a("span", { className: "clarity-multiselect__helper-text", children: i }) })
   ] });
 });
-lt.displayName = "MultiSelect";
-const pe = U(null), fe = () => {
-  const e = q(pe);
+ht.displayName = "MultiSelect";
+const be = Q(null), Ce = () => {
+  const e = Z(be);
   if (!e)
     throw new Error("useModal must be used within a Modal provider");
   return e;
-}, he = ({
+}, Ne = ({
   children: e,
   className: t = "",
   title: s
 }) => {
-  const { onClose: n, variant: l, showCloseButton: i } = fe(), d = [
+  const { onClose: n, variant: l, showCloseButton: i } = Ce(), d = [
     "clarity-modal-header",
     t,
     l && `clarity-modal-header--${l}`
-  ].filter(Boolean).join(" "), c = [
+  ].filter(Boolean).join(" "), o = [
     "clarity-modal-close",
     l && `clarity-modal-close--${l}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: d, children: [
+  return /* @__PURE__ */ w("div", { className: d, children: [
     s && /* @__PURE__ */ a("h2", { className: "clarity-modal-title", children: s }),
     e,
-    i && /* @__PURE__ */ a("button", { className: c, onClick: (r) => {
+    i && /* @__PURE__ */ a("button", { className: o, onClick: (r) => {
       r.stopPropagation(), n();
     }, children: "×" })
   ] });
 };
-he.displayName = "Modal.Header";
-const ye = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-modal-content ${t}`, children: e });
-ye.displayName = "Modal.Content";
-const ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ _("div", { className: `clarity-modal-footer ${t}`, children: [
+Ne.displayName = "Modal.Header";
+const we = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-modal-content ${t}`, children: e });
+we.displayName = "Modal.Content";
+const _e = ({ children: e, className: t = "" }) => /* @__PURE__ */ w("div", { className: `clarity-modal-footer ${t}`, children: [
   /* @__PURE__ */ a("div", { className: "clarity-modal-scroll-indicator" }),
   e
 ] });
-ve.displayName = "Modal.Footer";
-const Ne = ({ children: e, onClick: t }) => W(e, {
+_e.displayName = "Modal.Footer";
+const ge = ({ children: e, onClick: t }) => z(e, {
   onClick: (s) => {
     var n, l;
     t == null || t(), (l = (n = e.props).onClick) == null || l.call(n, s);
   }
 });
-Ne.displayName = "Modal.Trigger";
-const be = ({ children: e }) => {
-  const { onClose: t } = fe();
-  return W(e, {
+ge.displayName = "Modal.Trigger";
+const $e = ({ children: e }) => {
+  const { onClose: t } = Ce();
+  return z(e, {
     onClick: (s) => {
       var n, l;
       t(), (l = (n = e.props).onClick) == null || l.call(n, s);
     }
   });
 };
-be.displayName = "Modal.Close";
-const J = ({
+$e.displayName = "Modal.Close";
+const K = ({
   isOpen: e,
   onClose: t,
   onOpen: s,
@@ -700,57 +700,57 @@ const J = ({
   className: l = "",
   variant: i,
   size: d = "medium",
-  showCloseButton: c = !0,
+  showCloseButton: o = !0,
   closeOnOverlayClick: r = !0
 }) => {
-  const [o, u] = x(!1), m = e !== void 0 ? e : o, f = t || (() => {
-    u(!1);
+  const [c, p] = T(!1), m = e !== void 0 ? e : c, f = t || (() => {
+    p(!1);
   });
-  S(() => {
+  D(() => {
     m && (s == null || s());
-  }, [m, s]), S(() => {
-    const C = (j) => {
-      j.key === "Escape" && f();
+  }, [m, s]), D(() => {
+    const N = (B) => {
+      B.key === "Escape" && f();
     };
-    return m ? (document.addEventListener("keydown", C), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
-      document.removeEventListener("keydown", C), document.body.style.overflow = "unset";
+    return m ? (document.addEventListener("keydown", N), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+      document.removeEventListener("keydown", N), document.body.style.overflow = "unset";
     };
   }, [m, f]);
-  const p = (C) => {
-    r && C.target === C.currentTarget && f();
-  }, h = B.Children.toArray(n).find(
-    (C) => Z(C) && C.type.displayName === "Modal.Trigger"
-  ), y = B.Children.toArray(n).filter(
-    (C) => Z(C) && C.type.displayName !== "Modal.Trigger"
-  ), N = ["clarity-modal", l, `clarity-modal--${d}`].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _(pe.Provider, { value: { onClose: f, variant: i, showCloseButton: c }, children: [
-    h && W(h, { onClick: () => u(!0) }),
-    m && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", onClick: p, children: /* @__PURE__ */ a("div", { className: N, children: y }) })
+  const u = (N) => {
+    r && N.target === N.currentTarget && f();
+  }, h = E.Children.toArray(n).find(
+    (N) => se(N) && N.type.displayName === "Modal.Trigger"
+  ), y = E.Children.toArray(n).filter(
+    (N) => se(N) && N.type.displayName !== "Modal.Trigger"
+  ), b = ["clarity-modal", l, `clarity-modal--${d}`].filter(Boolean).join(" ");
+  return /* @__PURE__ */ w(be.Provider, { value: { onClose: f, variant: i, showCloseButton: o }, children: [
+    h && z(h, { onClick: () => p(!0) }),
+    m && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", onClick: u, children: /* @__PURE__ */ a("div", { className: b, children: y }) })
   ] });
 };
-J.Header = he;
-J.Content = ye;
-J.Footer = ve;
-J.Trigger = Ne;
-J.Close = be;
-J.displayName = "Modal";
-const Ce = U(void 0), jt = () => {
-  const e = q(Ce);
+K.Header = Ne;
+K.Content = we;
+K.Footer = _e;
+K.Trigger = ge;
+K.Close = $e;
+K.displayName = "Modal";
+const ke = Q(void 0), Vt = () => {
+  const e = Z(ke);
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
   return e;
-}, it = ({ id: e, message: t, variant: s, duration: n, onClose: l, invertColors: i }) => {
-  const [d, c] = x("entering");
-  S(() => {
-    const o = setTimeout(() => {
-      c("visible");
-    }, 10), u = setTimeout(() => {
-      c("exiting");
+}, yt = ({ id: e, message: t, variant: s, duration: n, onClose: l, invertColors: i }) => {
+  const [d, o] = T("entering");
+  D(() => {
+    const c = setTimeout(() => {
+      o("visible");
+    }, 10), p = setTimeout(() => {
+      o("exiting");
     }, n * 1e3 - 300), v = setTimeout(() => {
       l(e);
     }, n * 1e3);
     return () => {
-      clearTimeout(o), clearTimeout(u), clearTimeout(v);
+      clearTimeout(c), clearTimeout(p), clearTimeout(v);
     };
   }, [e, n, l]);
   const r = [
@@ -759,9 +759,9 @@ const Ce = U(void 0), jt = () => {
     i ? "colored-background" : "",
     `cl-toast-${d}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: r, children: [
+  return /* @__PURE__ */ w("div", { className: r, children: [
     /* @__PURE__ */ a("div", { className: "cl-toast-message", children: t }),
-    /* @__PURE__ */ a("button", { onClick: () => c("exiting"), className: "cl-toast-close-button", children: "×" }),
+    /* @__PURE__ */ a("button", { onClick: () => o("exiting"), className: "cl-toast-close-button", children: "×" }),
     /* @__PURE__ */ a(
       "div",
       {
@@ -770,92 +770,92 @@ const Ce = U(void 0), jt = () => {
       }
     )
   ] });
-}, Et = ({ children: e }) => {
-  const [t, s] = x([]), n = Y(() => {
+}, Ht = ({ children: e }) => {
+  const [t, s] = T([]), n = te(() => {
     if (typeof document < "u") {
       const r = document.createElement("div");
       return r.id = "toast-portal-root", r;
     }
     return null;
   }, []);
-  S(() => {
+  D(() => {
     if (n)
       return document.body.appendChild(n), () => {
         document.body.removeChild(n);
       };
   }, [n]);
-  const l = le((r) => {
-    const u = {
+  const l = ce((r) => {
+    const p = {
       id: (/* @__PURE__ */ new Date()).toISOString() + Math.random(),
       // duration: 5,
       // position: 'right-top',
       ...r
     };
     s((v) => {
-      const m = [u, ...v];
+      const m = [p, ...v];
       return m.length > 4 ? m.slice(0, 4) : m;
     });
-  }, []), i = le((r) => {
-    s((o) => o.filter((u) => u.id !== r));
-  }, []), d = Y(() => t.reduce((r, o) => (r[o.position] || (r[o.position] = []), r[o.position].push(o), r), {}), [t]), c = Y(() => ({ show: l }), [l]);
-  return /* @__PURE__ */ _(Ce.Provider, { value: c, children: [
+  }, []), i = ce((r) => {
+    s((c) => c.filter((p) => p.id !== r));
+  }, []), d = te(() => t.reduce((r, c) => (r[c.position] || (r[c.position] = []), r[c.position].push(c), r), {}), [t]), o = te(() => ({ show: l }), [l]);
+  return /* @__PURE__ */ w(ke.Provider, { value: o, children: [
     e,
-    n && tt.createPortal(
-      Object.entries(d).map(([r, o]) => /* @__PURE__ */ a("div", { className: `cl-toast-container ${r}`, children: o.map((u) => /* @__PURE__ */ a(it, { ...u, onClose: i }, u.id)) }, r)),
+    n && mt.createPortal(
+      Object.entries(d).map(([r, c]) => /* @__PURE__ */ a("div", { className: `cl-toast-container ${r}`, children: c.map((p) => /* @__PURE__ */ a(yt, { ...p, onClose: i }, p.id)) }, r)),
       n
     )
   ] });
-}, _e = U(null), we = () => {
-  const e = q(_e);
+}, xe = Q(null), Te = () => {
+  const e = Z(xe);
   if (!e)
     throw new Error("useOffcanvas must be used within an Offcanvas provider");
   return e;
-}, ge = ({
+}, Be = ({
   children: e,
   className: t = ""
 }) => {
-  const { onClose: s, variant: n, showCloseButton: l, title: i } = we(), d = [
+  const { onClose: s, variant: n, showCloseButton: l, title: i } = Te(), d = [
     "clarity-offcanvas-header",
     t
-  ].filter(Boolean).join(" "), c = [
+  ].filter(Boolean).join(" "), o = [
     "clarity-offcanvas-close",
     n && `clarity-offcanvas-close--${n}`
   ].filter(Boolean).join(" "), r = [
     "clarity-offcanvas-title",
     n && `clarity-offcanvas-title--${n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: d, children: [
+  return /* @__PURE__ */ w("div", { className: d, children: [
     i && /* @__PURE__ */ a("h2", { className: r, children: i }),
     e,
-    l && /* @__PURE__ */ a("button", { className: c, onClick: (o) => {
-      o.stopPropagation(), s();
+    l && /* @__PURE__ */ a("button", { className: o, onClick: (c) => {
+      c.stopPropagation(), s();
     }, children: "×" })
   ] });
 };
-ge.displayName = "Offcanvas.Header";
-const $e = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-offcanvas-content ${t}`, children: e });
-$e.displayName = "Offcanvas.Content";
-const ke = ({ children: e, onClick: t, variant: s }) => W(e, {
+Be.displayName = "Offcanvas.Header";
+const je = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-offcanvas-content ${t}`, children: e });
+je.displayName = "Offcanvas.Content";
+const Ee = ({ children: e, onClick: t, variant: s }) => z(e, {
   onClick: (n) => {
     var l, i;
     t == null || t(), (i = (l = e.props).onClick) == null || i.call(l, n);
   },
   variant: s
 });
-ke.displayName = "Offcanvas.Trigger";
-const oe = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-offcanvas-footer ${t}`, children: e });
-oe.displayName = "Offcanvas.Footer";
-const xe = ({ children: e }) => {
-  const { onClose: t } = we();
-  return W(e, {
+Ee.displayName = "Offcanvas.Trigger";
+const pe = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-offcanvas-footer ${t}`, children: e });
+pe.displayName = "Offcanvas.Footer";
+const Le = ({ children: e }) => {
+  const { onClose: t } = Te();
+  return z(e, {
     onClick: (s) => {
       var n, l;
       t(), (l = (n = e.props).onClick) == null || l.call(n, s);
     }
   });
 };
-xe.displayName = "Offcanvas.Close";
-const K = ({
+Le.displayName = "Offcanvas.Close";
+const ae = ({
   isOpen: e,
   onClose: t,
   onOpen: s,
@@ -863,17 +863,17 @@ const K = ({
   className: l = "",
   variant: i,
   placement: d = "right",
-  closeOnOverlayClick: c = !0,
+  closeOnOverlayClick: o = !0,
   showCloseButton: r = !0,
-  title: o
+  title: c
 }) => {
-  const [u, v] = x(!1), [m, f] = x(!1), [p, h] = x(!1), y = e !== void 0, N = y ? e : u, C = le(() => {
+  const [p, v] = T(!1), [m, f] = T(!1), [u, h] = T(!1), y = e !== void 0, b = y ? e : p, N = ce(() => {
     t ? t() : v(!1);
-  }, [t]), j = le(() => {
+  }, [t]), B = ce(() => {
     y || v(!0), s == null || s();
   }, [y, s]);
-  S(() => {
-    if (N) {
+  D(() => {
+    if (b) {
       h(!0);
       const g = setTimeout(() => {
         f(!0);
@@ -886,35 +886,35 @@ const K = ({
       }, 300);
       return () => clearTimeout(g);
     }
-  }, [N]), S(() => {
-    const g = (H) => {
-      H.key === "Escape" && C();
+  }, [b]), D(() => {
+    const g = (V) => {
+      V.key === "Escape" && N();
     };
-    return N ? (document.addEventListener("keydown", g), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", g), document.body.style.overflow = "unset"), () => {
+    return b ? (document.addEventListener("keydown", g), document.body.style.overflow = "hidden") : (document.removeEventListener("keydown", g), document.body.style.overflow = "unset"), () => {
       document.removeEventListener("keydown", g), document.body.style.overflow = "unset";
     };
-  }, [N, C]);
-  const T = (g) => {
-    c && g.target === g.currentTarget && C();
-  }, w = B.Children.toArray(n);
-  let $, L, k, E, I;
-  w.forEach((g) => {
-    if (Z(g))
+  }, [b, N]);
+  const x = (g) => {
+    o && g.target === g.currentTarget && N();
+  }, _ = E.Children.toArray(n);
+  let $, L, k, j, I;
+  _.forEach((g) => {
+    if (se(g))
       if (g.type.displayName === "Offcanvas.Trigger")
         $ = g;
       else if (g.type.displayName === "Offcanvas.Header")
         L = g;
       else if (g.type.displayName === "Offcanvas.Content") {
         k = g;
-        const V = B.Children.toArray(k.props.children).filter((F) => Z(F) && F.type.displayName === "Offcanvas.Close" ? (I = F, !1) : !0);
-        k = W(k, { children: V });
-      } else g.type.displayName === "Offcanvas.Footer" && (E = g);
-  }), I && (E ? E = W(E, {
-    children: /* @__PURE__ */ _(Ze, { children: [
-      E.props.children,
+        const H = E.Children.toArray(k.props.children).filter((W) => se(W) && W.type.displayName === "Offcanvas.Close" ? (I = W, !1) : !0);
+        k = z(k, { children: H });
+      } else g.type.displayName === "Offcanvas.Footer" && (j = g);
+  }), I && (j ? j = z(j, {
+    children: /* @__PURE__ */ w(ot, { children: [
+      j.props.children,
       I
     ] })
-  }) : E = /* @__PURE__ */ a(oe, { children: I }));
+  }) : j = /* @__PURE__ */ a(pe, { children: I }));
   const A = [
     "clarity-offcanvas",
     l,
@@ -925,25 +925,25 @@ const K = ({
     "clarity-offcanvas-overlay",
     m ? "clarity-offcanvas-overlay--visible" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _(_e.Provider, { value: { onClose: C, variant: i, showCloseButton: r, placement: d, title: o }, children: [
-    $ && W($, { onClick: j, variant: i }),
-    p && // Only render if shouldRender is true
-    /* @__PURE__ */ a("div", { className: O, onClick: T, children: /* @__PURE__ */ _("div", { className: A, children: [
+  return /* @__PURE__ */ w(xe.Provider, { value: { onClose: N, variant: i, showCloseButton: r, placement: d, title: c }, children: [
+    $ && z($, { onClick: B, variant: i }),
+    u && // Only render if shouldRender is true
+    /* @__PURE__ */ a("div", { className: O, onClick: x, children: /* @__PURE__ */ w("div", { className: A, children: [
       L,
       k,
-      E && /* @__PURE__ */ a("div", { className: "clarity-offcanvas-scroll-indicator" }),
+      j && /* @__PURE__ */ a("div", { className: "clarity-offcanvas-scroll-indicator" }),
       " ",
-      E
+      j
     ] }) })
   ] });
 };
-K.Header = ge;
-K.Content = $e;
-K.Footer = oe;
-K.Trigger = ke;
-K.Close = xe;
-K.displayName = "Offcanvas";
-const rt = B.forwardRef(({
+ae.Header = Be;
+ae.Content = je;
+ae.Footer = pe;
+ae.Trigger = Ee;
+ae.Close = Le;
+ae.displayName = "Offcanvas";
+const vt = E.forwardRef(({
   type: e,
   variant: t = "primary",
   size: s = "medium",
@@ -951,17 +951,17 @@ const rt = B.forwardRef(({
   helperText: l,
   error: i = !1,
   errorMessage: d,
-  labelPosition: c = "right",
+  labelPosition: o = "right",
   className: r = "",
-  disabled: o = !1,
-  checked: u,
+  disabled: c = !1,
+  checked: p,
   id: v,
   ...m
 }, f) => {
-  const p = 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}`,
-    o && "clarity-check-input-wrapper--disabled",
+    `clarity-check-input-wrapper--${o}`,
+    c && "clarity-check-input-wrapper--disabled",
     i && "clarity-check-input-wrapper--error"
   ].filter(Boolean).join(" "), y = [
     "clarity-check-input",
@@ -969,28 +969,28 @@ const rt = B.forwardRef(({
     `clarity-check-input--${s}`,
     t && `clarity-check-input--${t}`,
     i && "clarity-check-input--error",
-    o && "clarity-check-input--disabled",
+    c && "clarity-check-input--disabled",
     r
-  ].filter(Boolean).join(" "), N = [
+  ].filter(Boolean).join(" "), b = [
     "clarity-check-input__label",
     `clarity-check-input__label--${s}`,
-    o && "clarity-check-input__label--disabled"
+    c && "clarity-check-input__label--disabled"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: "clarity-check-input-container", children: [
-    /* @__PURE__ */ _("label", { className: h, htmlFor: p, children: [
+  return /* @__PURE__ */ w("div", { className: "clarity-check-input-container", children: [
+    /* @__PURE__ */ w("label", { className: h, htmlFor: u, children: [
       /* @__PURE__ */ a(
         "input",
         {
           ref: f,
-          id: p,
+          id: u,
           type: e,
           className: y,
-          disabled: o,
-          checked: u,
+          disabled: c,
+          checked: p,
           ...m
         }
       ),
-      /* @__PURE__ */ _("div", { className: "clarity-check-input__custom", children: [
+      /* @__PURE__ */ w("div", { className: "clarity-check-input__custom", children: [
         e === "checkbox" && /* @__PURE__ */ a(
           "svg",
           {
@@ -1012,13 +1012,13 @@ const rt = B.forwardRef(({
         ),
         e === "radio" && /* @__PURE__ */ a("div", { className: "clarity-check-input__radio-dot" })
       ] }),
-      n && /* @__PURE__ */ a("span", { className: N, children: n })
+      n && /* @__PURE__ */ a("span", { className: b, children: n })
     ] }),
     (l || i && d) && /* @__PURE__ */ a("div", { className: "clarity-check-input__helper-text", children: i && d ? d : l })
   ] });
 });
-rt.displayName = "CheckInput";
-const ct = B.forwardRef(({
+vt.displayName = "CheckInput";
+const bt = E.forwardRef(({
   variant: e = "primary",
   size: t = "medium",
   label: s,
@@ -1026,13 +1026,13 @@ const ct = B.forwardRef(({
   error: l = !1,
   errorMessage: i,
   labelPosition: d = "right",
-  className: c = "",
+  className: o = "",
   disabled: r = !1,
-  checked: o,
-  id: u,
+  checked: c,
+  id: p,
   ...v
 }, m) => {
-  const f = u || `input-switch-${Math.random().toString(36).substr(2, 9)}`, p = [
+  const f = p || `input-switch-${Math.random().toString(36).substr(2, 9)}`, u = [
     "clarity-input-switch-wrapper",
     `clarity-input-switch-wrapper--${d}`,
     r && "clarity-input-switch-wrapper--disabled",
@@ -1043,14 +1043,14 @@ const ct = B.forwardRef(({
     e && `clarity-input-switch--${e}`,
     l && "clarity-input-switch--error",
     r && "clarity-input-switch--disabled",
-    c
+    o
   ].filter(Boolean).join(" "), y = [
     "clarity-input-switch__label",
     `clarity-input-switch__label--${t}`,
     r && "clarity-input-switch__label--disabled"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: "clarity-input-switch-container", children: [
-    /* @__PURE__ */ _("label", { className: p, htmlFor: f, children: [
+  return /* @__PURE__ */ w("div", { className: "clarity-input-switch-container", children: [
+    /* @__PURE__ */ w("label", { className: u, htmlFor: f, children: [
       /* @__PURE__ */ a(
         "input",
         {
@@ -1059,7 +1059,7 @@ const ct = B.forwardRef(({
           type: "checkbox",
           className: h,
           disabled: r,
-          checked: o,
+          checked: c,
           ...v
         }
       ),
@@ -1069,88 +1069,88 @@ const ct = B.forwardRef(({
     (n || l && i) && /* @__PURE__ */ a("div", { className: "clarity-input-switch__helper-text", children: l && i ? i : n })
   ] });
 });
-ct.displayName = "InputSwitch";
-const Te = U(null), de = () => {
-  const e = q(Te);
+bt.displayName = "InputSwitch";
+const Se = Q(null), fe = () => {
+  const e = Z(Se);
   if (!e)
     throw new Error("useConfirmationDialog must be used within a ConfirmationDialog provider");
   return e;
-}, Be = ({ children: e, className: t = "" }) => {
-  const { variant: s } = de(), n = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${s}`;
+}, Oe = ({ children: e, className: t = "" }) => {
+  const { variant: s } = fe(), n = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${s}`;
   return /* @__PURE__ */ a("div", { className: n, children: e });
 };
-Be.displayName = "ConfirmationDialog.Header";
-const je = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-confirmation-dialog-content ${t}`, children: e });
-je.displayName = "ConfirmationDialog.Content";
-const Ee = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-confirmation-dialog-footer ${t}`, children: e });
-Ee.displayName = "ConfirmationDialog.Footer";
-const Le = ({ children: e }) => W(e, {
+Oe.displayName = "ConfirmationDialog.Header";
+const Ie = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-confirmation-dialog-content ${t}`, children: e });
+Ie.displayName = "ConfirmationDialog.Content";
+const Re = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-confirmation-dialog-footer ${t}`, children: e });
+Re.displayName = "ConfirmationDialog.Footer";
+const De = ({ children: e }) => z(e, {
   onClick: (t) => {
     var s, n;
     (n = (s = e.props).onClick) == null || n.call(s, t);
   }
 });
-Le.displayName = "ConfirmationDialog.Trigger";
-const Se = ({ children: e }) => {
-  const { onClose: t } = de();
-  return W(e, {
+De.displayName = "ConfirmationDialog.Trigger";
+const Ae = ({ children: e }) => {
+  const { onClose: t } = fe();
+  return z(e, {
     onClick: (s) => {
       var n, l;
       t(), (l = (n = e.props).onClick) == null || l.call(n, s);
     }
   });
 };
-Se.displayName = "ConfirmationDialog.Close";
-const Oe = ({ children: e }) => {
-  const { onConfirm: t } = de();
-  return W(e, {
+Ae.displayName = "ConfirmationDialog.Close";
+const Pe = ({ children: e }) => {
+  const { onConfirm: t } = fe();
+  return z(e, {
     onClick: (s) => {
       var n, l;
       t(), (l = (n = e.props).onClick) == null || l.call(n, s);
     }
   });
 };
-Oe.displayName = "ConfirmationDialog.Confirm";
-const Q = ({
+Pe.displayName = "ConfirmationDialog.Confirm";
+const ee = ({
   isOpen: e,
   onClose: t,
   onConfirm: s,
   variant: n = "clarity-primary",
   children: l
 }) => {
-  const [i, d] = x(!1), c = e !== void 0, r = c ? e : i, o = () => {
-    c || d(!0);
-  }, u = () => {
+  const [i, d] = T(!1), o = e !== void 0, r = o ? e : i, c = () => {
+    o || d(!0);
+  }, p = () => {
     t ? t() : d(!1);
   }, v = () => {
-    s && s(), u();
+    s && s(), p();
   };
-  S(() => {
+  D(() => {
     const h = (y) => {
-      y.key === "Escape" && u();
+      y.key === "Escape" && p();
     };
     return r ? (document.addEventListener("keydown", h), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
       document.removeEventListener("keydown", h), document.body.style.overflow = "unset";
     };
-  }, [r, u]);
-  const m = B.Children.toArray(l).find(
-    (h) => Z(h) && h.type.displayName === "ConfirmationDialog.Trigger"
-  ), f = B.Children.toArray(l).filter(
-    (h) => Z(h) && h.type.displayName !== "ConfirmationDialog.Trigger"
-  ), p = `clarity-confirmation-dialog clarity-confirmation-dialog--${n}`;
-  return /* @__PURE__ */ _(Te.Provider, { value: { variant: n, onClose: u, onConfirm: v, onOpen: o }, children: [
+  }, [r, p]);
+  const m = E.Children.toArray(l).find(
+    (h) => se(h) && h.type.displayName === "ConfirmationDialog.Trigger"
+  ), f = E.Children.toArray(l).filter(
+    (h) => se(h) && h.type.displayName !== "ConfirmationDialog.Trigger"
+  ), u = `clarity-confirmation-dialog clarity-confirmation-dialog--${n}`;
+  return /* @__PURE__ */ w(Se.Provider, { value: { variant: n, onClose: p, onConfirm: v, onOpen: c }, children: [
     m,
-    r && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ a("div", { className: p, children: f }) })
+    r && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ a("div", { className: u, children: f }) })
   ] });
 };
-Q.Header = Be;
-Q.Content = je;
-Q.Footer = Ee;
-Q.Trigger = Le;
-Q.Close = Se;
-Q.Confirm = Oe;
-Q.displayName = "ConfirmationDialog";
-const Lt = ({
+ee.Header = Oe;
+ee.Content = Ie;
+ee.Footer = Re;
+ee.Trigger = De;
+ee.Close = Ae;
+ee.Confirm = Pe;
+ee.displayName = "ConfirmationDialog";
+const Mt = ({
   variant: e = "primary",
   size: t = "medium",
   disabled: s = !1,
@@ -1158,30 +1158,30 @@ const Lt = ({
   children: l,
   onClick: i,
   type: d = "button",
-  className: c = "",
+  className: o = "",
   "aria-label": r,
-  title: o,
-  customColor: u,
+  title: c,
+  customColor: p,
   customColorHover: v,
   ...m
 }) => {
-  const f = "clarity-button-icon", p = [
+  const f = "clarity-button-icon", u = [
     f,
-    !u && `${f}--${e}`,
+    !p && `${f}--${e}`,
     `${f}--${t}`,
     n && `${f}--loading`,
     s && `${f}--disabled`,
-    c
+    o
   ].filter(Boolean).join(" "), h = {};
-  return u && (h["--button-icon-bg"] = u, h["--button-icon-hover-bg"] = v || `${u}E6`), /* @__PURE__ */ _(
+  return p && (h["--button-icon-bg"] = p, h["--button-icon-hover-bg"] = v || `${p}E6`), /* @__PURE__ */ w(
     "button",
     {
-      className: p,
+      className: u,
       disabled: s || n,
       onClick: i,
       type: d,
       "aria-label": r,
-      title: o,
+      title: c,
       style: h,
       ...m,
       children: [
@@ -1190,7 +1190,7 @@ const Lt = ({
       ]
     }
   );
-}, St = ({
+}, Wt = ({
   variant: e = "primary",
   product: t,
   tone: s,
@@ -1198,35 +1198,35 @@ const Lt = ({
   size: l = "medium",
   disabled: i = !1,
   children: d,
-  onClick: c,
+  onClick: o,
   href: r,
-  target: o,
-  rel: u,
+  target: c,
+  rel: p,
   className: v = "",
   ...m
 }) => {
-  const f = "clarity-button-link", p = t && s, h = p ? `${f}--custom` : `${f}--${e}`, y = [
+  const f = "clarity-button-link", u = t && s, h = u ? `${f}--custom` : `${f}--${e}`, y = [
     f,
     h,
     `${f}--${l}`,
     i && `${f}--disabled`,
     v
-  ].filter(Boolean).join(" "), N = (j) => {
-    const T = parseInt(j);
-    return T >= 800 ? "900" : T >= 700 ? "800" : T >= 600 ? "700" : T >= 500 ? "600" : T >= 400 ? "500" : T >= 300 ? "400" : T >= 200 ? "300" : "200";
-  }, C = p ? {
+  ].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 = u ? {
     "--custom-color": `var(--clarity-${t}-${s})`,
-    "--custom-hover-color": `var(--clarity-${t}-${n || N(s)})`
+    "--custom-hover-color": `var(--clarity-${t}-${n || b(s)})`
   } : {};
   return r ? /* @__PURE__ */ a(
     "a",
     {
       href: r,
-      target: o,
-      rel: u || (o === "_blank" ? "noopener noreferrer" : void 0),
+      target: c,
+      rel: p || (c === "_blank" ? "noopener noreferrer" : void 0),
       className: y,
-      style: C,
-      onClick: i ? void 0 : c,
+      style: N,
+      onClick: i ? void 0 : o,
       ...m,
       children: d
     }
@@ -1234,19 +1234,19 @@ const Lt = ({
     "button",
     {
       className: y,
-      style: C,
+      style: N,
       disabled: i,
-      onClick: c,
+      onClick: o,
       ...m,
       children: d
     }
   );
-}, Ie = U(void 0), Re = () => {
-  const e = q(Ie);
+}, Ve = Q(void 0), He = () => {
+  const e = Z(Ve);
   if (!e)
     throw new Error("Accordion components must be used within an Accordion");
   return e;
-}, ot = ({
+}, Ct = ({
   variant: e = "primary",
   product: t,
   tone: s,
@@ -1254,27 +1254,27 @@ const Lt = ({
   defaultActiveKey: l,
   alwaysOpen: i = !1,
   flush: d = !1,
-  className: c = "",
+  className: o = "",
   children: r,
-  onSelect: o,
-  ...u
+  onSelect: c,
+  ...p
 }) => {
-  const [v, m] = x(() => l ? Array.isArray(l) ? l : [l] : []), f = (w) => {
+  const [v, m] = T(() => l ? Array.isArray(l) ? l : [l] : []), f = (_) => {
     let $;
-    i ? $ = v.includes(w) ? v.filter((L) => L !== w) : [...v, w] : $ = v.includes(w) ? [] : [w], m($), o && o(v.includes(w) ? null : w, {});
-  }, p = "clarity-accordion", h = t && s, y = h ? `${p}--custom` : `${p}--${e}`, N = [
-    p,
+    i ? $ = v.includes(_) ? v.filter((L) => L !== _) : [...v, _] : $ = v.includes(_) ? [] : [_], m($), c && c(v.includes(_) ? null : _, {});
+  }, u = "clarity-accordion", h = t && s, y = h ? `${u}--custom` : `${u}--${e}`, b = [
+    u,
     y,
-    d && `${p}--flush`,
-    c
-  ].filter(Boolean).join(" "), C = (w) => {
-    const $ = parseInt(w);
+    d && `${u}--flush`,
+    o
+  ].filter(Boolean).join(" "), N = (_) => {
+    const $ = parseInt(_);
     return $ >= 800 ? "900" : $ >= 700 ? "800" : $ >= 600 ? "700" : $ >= 500 ? "600" : $ >= 400 ? "500" : $ >= 300 ? "400" : $ >= 200 ? "300" : "200";
-  }, j = h ? {
+  }, B = h ? {
     "--custom-border-color": `var(--clarity-${t}-${s})`,
     "--custom-header-color": `var(--clarity-${t}-${s})`,
-    "--custom-hover-color": `var(--clarity-${t}-${n || C(s)})`
-  } : {}, T = {
+    "--custom-hover-color": `var(--clarity-${t}-${n || N(s)})`
+  } : {}, x = {
     activeKeys: v,
     toggleItem: f,
     alwaysOpen: i,
@@ -1284,27 +1284,27 @@ const Lt = ({
     hoverTone: n,
     flush: d
   };
-  return /* @__PURE__ */ a(Ie.Provider, { value: T, children: /* @__PURE__ */ a("div", { className: N, style: j, ...u, children: r }) });
-}, dt = ({
+  return /* @__PURE__ */ a(Ve.Provider, { value: x, children: /* @__PURE__ */ a("div", { className: b, style: B, ...p, children: r }) });
+}, Nt = ({
   eventKey: e,
   disabled: t = !1,
   className: s = "",
   children: n,
   ...l
 }) => {
-  const { activeKeys: i } = Re(), d = "clarity-accordion", c = i.includes(e), r = [
+  const { activeKeys: i } = He(), d = "clarity-accordion", o = i.includes(e), r = [
     `${d}__item`,
-    c && `${d}__item--active`,
+    o && `${d}__item--active`,
     t && `${d}__item--disabled`,
     s
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: r, ...l, children: B.Children.map(n, (o) => B.isValidElement(o) ? B.cloneElement(o, {
-    ...o.props,
+  return /* @__PURE__ */ a("div", { className: r, ...l, children: E.Children.map(n, (c) => E.isValidElement(c) ? E.cloneElement(c, {
+    ...c.props,
     eventKey: e,
     disabled: t,
-    isActive: c
-  }) : o) });
-}, mt = ({
+    isActive: o
+  }) : c) });
+}, wt = ({
   className: e = "",
   children: t,
   onClick: s,
@@ -1313,14 +1313,14 @@ const Lt = ({
   isActive: i = !1,
   ...d
 }) => {
-  const { toggleItem: c } = Re(), r = "clarity-accordion", o = (u) => {
-    !l && n && c(n), s == null || s(u);
+  const { toggleItem: o } = He(), r = "clarity-accordion", c = (p) => {
+    !l && n && o(n), s == null || s(p);
   };
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ w(
     "button",
     {
       className: [`${r}__header`, e].filter(Boolean).join(" "),
-      onClick: o,
+      onClick: c,
       disabled: l,
       "aria-expanded": i,
       "aria-controls": n ? `${r}-collapse-${n}` : void 0,
@@ -1341,7 +1341,7 @@ const Lt = ({
       ]
     }
   );
-}, ut = ({
+}, _t = ({
   className: e = "",
   children: t,
   eventKey: s,
@@ -1360,19 +1360,19 @@ const Lt = ({
       children: /* @__PURE__ */ a("div", { className: [`${i}__body`, e].filter(Boolean).join(" "), ...l, children: t })
     }
   );
-}, Ot = Object.assign(ot, {
-  Item: dt,
-  Header: mt,
-  Body: ut
-}), De = U(
+}, Ft = Object.assign(Ct, {
+  Item: Nt,
+  Header: wt,
+  Body: _t
+}), Me = Q(
   void 0
-), Ae = () => {
-  const e = q(De);
+), We = () => {
+  const e = Z(Me);
   if (!e)
     throw new Error("useDropdown must be used within a DropdownProvider");
   return e;
-}, pt = ({ children: e }) => {
-  const { setIsOpen: t, triggerRef: s } = Ae();
+}, gt = ({ children: e }) => {
+  const { setIsOpen: t, triggerRef: s } = We();
   return /* @__PURE__ */ a(
     "button",
     {
@@ -1384,69 +1384,69 @@ const Lt = ({
       children: e
     }
   );
-}, ft = ({ children: e }) => {
-  const { isOpen: t, contentRef: s, styles: n } = Ae();
+}, $t = ({ children: e }) => {
+  const { isOpen: t, contentRef: s, styles: n } = We();
   return t ? /* @__PURE__ */ a("div", { ref: s, className: "dropdown__content", style: n, children: e }) : null;
-}, ht = ({ children: e }) => /* @__PURE__ */ a("div", { className: "dropdown__menu", children: e }), yt = ({ as: e, children: t, ...s }) => /* @__PURE__ */ a(e || "a", { ...s, className: "dropdown__item", children: t }), vt = () => /* @__PURE__ */ a("hr", { className: "dropdown__separator" }), ae = ({ title: e, position: t = "bottom", children: s }) => {
-  const [n, l] = x(!1), [i, d] = x({}), c = P(null), r = P(null), o = P(null);
-  return et(() => {
+}, kt = ({ children: e }) => /* @__PURE__ */ a("div", { className: "dropdown__menu", children: e }), xt = ({ as: e, children: t, ...s }) => /* @__PURE__ */ a(e || "a", { ...s, className: "dropdown__item", children: t }), Tt = () => /* @__PURE__ */ a("hr", { className: "dropdown__separator" }), oe = ({ title: e, position: t = "bottom", children: s }) => {
+  const [n, l] = T(!1), [i, d] = T({}), o = M(null), r = M(null), c = M(null);
+  return dt(() => {
     if (n) {
-      const u = r.current, v = o.current;
-      if (!u || !v) return;
-      const m = u.getBoundingClientRect(), f = v.getBoundingClientRect(), p = window.innerHeight, h = window.innerWidth;
+      const p = r.current, v = c.current;
+      if (!p || !v) return;
+      const m = p.getBoundingClientRect(), f = v.getBoundingClientRect(), u = window.innerHeight, h = window.innerWidth;
       let y = t;
-      t === "bottom" && m.bottom + f.height > p && (y = "top"), t === "top" && m.top - f.height < 0 && (y = "bottom"), t === "right" && m.right + f.width > h && (y = "left"), t === "left" && m.left - f.width < 0 && (y = "right");
-      const N = {};
+      t === "bottom" && m.bottom + f.height > u && (y = "top"), t === "top" && m.top - f.height < 0 && (y = "bottom"), t === "right" && m.right + f.width > h && (y = "left"), t === "left" && m.left - f.width < 0 && (y = "right");
+      const b = {};
       switch (y) {
         case "top":
-          N.bottom = m.height + 4, N.left = m.width / 2 - f.width / 2;
+          b.bottom = m.height + 4, b.left = m.width / 2 - f.width / 2;
           break;
         case "right":
-          N.left = m.width + 4, N.top = m.height / 2 - f.height / 2;
+          b.left = m.width + 4, b.top = m.height / 2 - f.height / 2;
           break;
         case "left":
-          N.right = m.width + 4, N.top = m.height / 2 - f.height / 2;
+          b.right = m.width + 4, b.top = m.height / 2 - f.height / 2;
           break;
         case "bottom":
         default:
-          N.top = m.height + 4, N.left = m.width / 2 - f.width / 2;
+          b.top = m.height + 4, b.left = m.width / 2 - f.width / 2;
           break;
       }
-      d(N);
+      d(b);
     }
-  }, [n, t]), S(() => {
-    const u = (v) => {
-      c.current && !c.current.contains(v.target) && l(!1);
+  }, [n, t]), D(() => {
+    const p = (v) => {
+      o.current && !o.current.contains(v.target) && l(!1);
     };
-    return document.addEventListener("mousedown", u), () => {
-      document.removeEventListener("mousedown", u);
+    return document.addEventListener("mousedown", p), () => {
+      document.removeEventListener("mousedown", p);
     };
-  }, []), /* @__PURE__ */ a(De.Provider, { value: { isOpen: n, setIsOpen: l, triggerRef: r, contentRef: o, styles: i }, children: /* @__PURE__ */ a(
+  }, []), /* @__PURE__ */ a(Me.Provider, { value: { isOpen: n, setIsOpen: l, triggerRef: r, contentRef: c, styles: i }, children: /* @__PURE__ */ a(
     "div",
     {
-      ref: c,
+      ref: o,
       className: "dropdown",
       title: e,
       children: s
     }
   ) });
 };
-ae.Trigger = pt;
-ae.Content = ft;
-ae.Menu = ht;
-ae.Item = yt;
-ae.Separator = vt;
-const Pe = U(null), Ve = () => {
-  const e = q(Pe);
+oe.Trigger = gt;
+oe.Content = $t;
+oe.Menu = kt;
+oe.Item = xt;
+oe.Separator = Tt;
+const Fe = Q(null), Ge = () => {
+  const e = Z(Fe);
   if (!e)
     throw new Error("useTabs must be used within a Tabs provider");
   return e;
-}, Me = ({ id: e, label: t, className: s = "" }) => {
-  const { activeTab: n, setActiveTab: l, variant: i, orientation: d } = Ve(), c = n === e, r = [
+}, ze = ({ id: e, label: t, className: s = "" }) => {
+  const { activeTab: n, setActiveTab: l, variant: i, orientation: d } = Ge(), o = n === e, r = [
     "clarity-tab",
     s,
-    c ? "active" : "",
-    c ? `variant-${i}` : "",
+    o ? "active" : "",
+    o ? `variant-${i}` : "",
     `orientation-${d}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ a(
@@ -1455,21 +1455,21 @@ const Pe = U(null), Ve = () => {
       className: r,
       onClick: () => l(e),
       role: "tab",
-      "aria-selected": c,
+      "aria-selected": o,
       children: /* @__PURE__ */ a("span", { className: "clarity-tab-label", children: t })
     }
   );
 };
-Me.displayName = "Tabs.Tab";
-const He = ({ id: e, children: t, className: s = "" }) => {
-  const { activeTab: n } = Ve(), l = n === e, i = {
+ze.displayName = "Tabs.Tab";
+const Ue = ({ id: e, children: t, className: s = "" }) => {
+  const { activeTab: n } = Ge(), l = n === e, i = {
     visibility: l ? "visible" : "hidden",
     gridArea: "1 / 1"
   };
   return l || (i.pointerEvents = "none"), /* @__PURE__ */ a("div", { className: `clarity-tab-content ${s}`, role: "tabpanel", style: i, children: t });
 };
-He.displayName = "Tabs.Content";
-const me = ({
+Ue.displayName = "Tabs.Content";
+const he = ({
   children: e,
   defaultTab: t,
   variant: s = "primary",
@@ -1477,8 +1477,8 @@ const me = ({
   className: l = "",
   useUrl: i = !1
 }) => {
-  const d = () => window.location.hash.replace("#", ""), [c, r] = x(() => i && d() || t);
-  S(() => {
+  const d = () => window.location.hash.replace("#", ""), [o, r] = T(() => i && d() || t);
+  D(() => {
     if (i) {
       const m = () => {
         const f = d();
@@ -1489,24 +1489,24 @@ const me = ({
       };
     }
   }, [i]);
-  const o = (m) => {
+  const c = (m) => {
     i && (window.location.hash = String(m)), r(m);
-  }, u = Y(() => ({
-    activeTab: c,
-    setActiveTab: o,
+  }, p = te(() => ({
+    activeTab: o,
+    setActiveTab: c,
     variant: s,
     orientation: n
-  }), [c, s, n]), v = [
+  }), [o, s, n]), v = [
     "clarity-tabs-container",
     l,
     `orientation-${n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a(Pe.Provider, { value: u, children: /* @__PURE__ */ a("div", { className: v, children: e }) });
+  return /* @__PURE__ */ a(Fe.Provider, { value: p, children: /* @__PURE__ */ a("div", { className: v, children: e }) });
 };
-me.Tab = Me;
-me.Content = He;
-me.displayName = "Tabs";
-const It = ({
+he.Tab = ze;
+he.Content = Ue;
+he.displayName = "Tabs";
+const Gt = ({
   content: e,
   position: t = "top",
   variant: s = "primary",
@@ -1514,69 +1514,69 @@ const It = ({
   tone: l,
   bgColor: i,
   textColor: d,
-  children: c,
+  children: o,
   className: r = "",
-  disabled: o = !1,
-  delay: u = 200,
+  disabled: c = !1,
+  delay: p = 200,
   hideDelay: v = 100,
   trigger: m = "hover",
   arrow: f = !0,
-  ...p
+  ...u
 }) => {
-  const [h, y] = x(!1), [N, C] = x(null), j = P(null), T = P(null), w = "clarity-tooltip", $ = !!i, L = n && l && !$;
+  const [h, y] = T(!1), [b, N] = T(null), B = M(null), x = M(null), _ = "clarity-tooltip", $ = !!i, L = n && l && !$;
   let k = "";
-  $ ? k = `${w}__content--custom-bg` : L ? k = `${w}__content--custom` : k = `${w}__content--${s}`;
-  const E = [
-    w,
-    `${w}--${t}`,
+  $ ? k = `${_}__content--custom-bg` : L ? k = `${_}__content--custom` : k = `${_}__content--${s}`;
+  const j = [
+    _,
+    `${_}--${t}`,
     r
   ].filter(Boolean).join(" "), I = [
-    `${w}__content`,
+    `${_}__content`,
     k,
-    f && `${w}__content--arrow`
+    f && `${_}__content--arrow`
   ].filter(Boolean).join(" "), A = {}, O = {};
   $ && i && (O["--tooltip-bg-color"] = i), d && (O["--tooltip-text-color"] = d), L && n && l && (O["--tooltip-product"] = n, O["--tooltip-tone"] = l);
   const g = {
     ...A,
     ...Object.keys(O).length > 0 ? O : {}
-  }, H = () => {
-    if (o) return;
-    N && clearTimeout(N);
-    const M = setTimeout(() => {
-      y(!0);
-    }, u);
-    C(M);
   }, V = () => {
-    N && clearTimeout(N);
-    const M = setTimeout(() => {
+    if (c) return;
+    b && clearTimeout(b);
+    const P = setTimeout(() => {
+      y(!0);
+    }, p);
+    N(P);
+  }, H = () => {
+    b && clearTimeout(b);
+    const P = setTimeout(() => {
       y(!1);
     }, v);
-    C(M);
-  }, F = () => {
-    o || y(!h);
+    N(P);
+  }, W = () => {
+    c || y(!h);
+  }, q = () => {
+    c || V();
   }, X = () => {
-    o || H();
-  }, te = () => {
-    V();
+    H();
   };
-  S(() => () => {
-    N && clearTimeout(N);
-  }, [N]);
-  const G = {};
-  return m === "hover" ? (G.onMouseEnter = H, G.onMouseLeave = V) : m === "click" ? G.onClick = F : m === "focus" && (G.onFocus = X, G.onBlur = te), /* @__PURE__ */ _(
+  D(() => () => {
+    b && clearTimeout(b);
+  }, [b]);
+  const F = {};
+  return m === "hover" ? (F.onMouseEnter = V, F.onMouseLeave = H) : m === "click" ? F.onClick = W : m === "focus" && (F.onFocus = q, F.onBlur = X), /* @__PURE__ */ w(
     "div",
     {
-      ref: T,
-      className: `${w}__trigger`,
-      ...G,
-      ...p,
+      ref: x,
+      className: `${_}__trigger`,
+      ...F,
+      ...u,
       children: [
-        c,
+        o,
         h && /* @__PURE__ */ a(
           "div",
           {
-            ref: j,
-            className: E,
+            ref: B,
+            className: j,
             style: g,
             role: "tooltip",
             "aria-hidden": !h,
@@ -1586,12 +1586,12 @@ const It = ({
       ]
     }
   );
-}, We = U(null), ee = () => {
-  const e = q(We);
+}, qe = Q(null), ne = () => {
+  const e = Z(qe);
   if (!e)
     throw new Error("useCommand must be used within a Command provider");
   return e;
-}, Fe = ({
+}, Je = ({
   children: e,
   className: t = "",
   variant: s = "secondary",
@@ -1599,61 +1599,61 @@ const It = ({
   inputPlaceholder: l = "Search...",
   ...i
 }) => {
-  const [d, c] = x(""), [r, o] = x(null), [u, v] = x(!1), m = [
+  const [d, o] = T(""), [r, c] = T(null), [p, v] = T(!1), m = [
     "clarity-command",
     `clarity-command--${s}`,
     t
-  ].filter(Boolean).join(" "), f = Y(() => ({
+  ].filter(Boolean).join(" "), f = te(() => ({
     searchTerm: d,
-    setSearchTerm: c,
+    setSearchTerm: o,
     value: r,
-    setValue: o,
+    setValue: c,
     variant: s,
     texts: {
       empty: n,
       inputPlaceholder: l
     },
-    isOpen: u,
+    isOpen: p,
     setIsOpen: v
-  }), [d, r, s, n, l, u]);
-  return /* @__PURE__ */ a(We.Provider, { value: f, children: /* @__PURE__ */ a("div", { className: m, ...i, children: e }) });
+  }), [d, r, s, n, l, p]);
+  return /* @__PURE__ */ a(qe.Provider, { value: f, children: /* @__PURE__ */ a("div", { className: m, ...i, children: e }) });
 };
-Fe.displayName = "Command";
-const Ge = ({ placeholder: e = "Search...", variant: t, onClick: s }) => {
-  const { setIsOpen: n, variant: l } = ee(), [i, d] = x(!1);
-  S(() => {
+Je.displayName = "Command";
+const Qe = ({ placeholder: e = "Search...", variant: t, onClick: s }) => {
+  const { setIsOpen: n, variant: l } = ne(), [i, d] = T(!1);
+  D(() => {
     d(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
   }, []);
   const r = [
     "clarity-command-button",
     `clarity-command-button--${t || l}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("button", { className: r, onClick: (u) => {
-    n(!0), s == null || s(u);
+  return /* @__PURE__ */ w("button", { className: r, onClick: (p) => {
+    n(!0), s == null || s(p);
   }, children: [
     /* @__PURE__ */ a("span", { children: e }),
-    /* @__PURE__ */ _("kbd", { className: "clarity-command-shortcut", children: [
+    /* @__PURE__ */ w("kbd", { className: "clarity-command-shortcut", children: [
       i ? "⌘" : "Ctrl+",
       "K"
     ] })
   ] });
 };
-Ge.displayName = "Command.Button";
-const ze = ({ children: e, ...t }) => {
-  const { isOpen: s, setIsOpen: n, variant: l } = ee();
-  return S(() => {
+Qe.displayName = "Command.Button";
+const Ze = ({ children: e, ...t }) => {
+  const { isOpen: s, setIsOpen: n, variant: l } = ne();
+  return D(() => {
     const i = (d) => {
       d.key === "k" && (d.metaKey || d.ctrlKey) && (d.preventDefault(), n(!s));
     };
     return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-  }, [s, n]), /* @__PURE__ */ a(J, { isOpen: s, onClose: () => n(!1), size: "large", closeOnOverlayClick: !0, children: /* @__PURE__ */ a("div", { className: `clarity-command--${l}`, children: e }) });
+  }, [s, n]), /* @__PURE__ */ a(K, { isOpen: s, onClose: () => n(!1), size: "large", closeOnOverlayClick: !0, children: /* @__PURE__ */ a("div", { className: `clarity-command--${l}`, children: e }) });
 };
-ze.displayName = "Command.Dialog";
-const Ue = ({ className: e = "", ...t }) => {
-  const { searchTerm: s, setSearchTerm: n, variant: l, texts: i, isOpen: d } = ee(), c = P(null);
-  S(() => {
-    var o;
-    d && ((o = c.current) == null || o.focus());
+Ze.displayName = "Command.Dialog";
+const Xe = ({ className: e = "", ...t }) => {
+  const { searchTerm: s, setSearchTerm: n, variant: l, texts: i, isOpen: d } = ne(), o = M(null);
+  D(() => {
+    var c;
+    d && ((c = o.current) == null || c.focus());
   }, [d]);
   const r = [
     "clarity-command-input",
@@ -1663,84 +1663,84 @@ const Ue = ({ className: e = "", ...t }) => {
   return /* @__PURE__ */ a("div", { className: "clarity-command-input__wrapper", children: /* @__PURE__ */ a(
     "input",
     {
-      ref: c,
+      ref: o,
       className: r,
       value: s,
-      onChange: (o) => n(o.target.value),
+      onChange: (c) => n(c.target.value),
       placeholder: t.placeholder || i.inputPlaceholder,
       ...t
     }
   ) });
 };
-Ue.displayName = "Command.Input";
-const qe = ({ children: e, className: t = "", ...s }) => {
-  const { searchTerm: n } = ee();
+Xe.displayName = "Command.Input";
+const Ye = ({ children: e, className: t = "", ...s }) => {
+  const { searchTerm: n } = ne();
   let l = !1;
-  const i = (r) => B.Children.toArray(r).map((o) => {
+  const i = (r) => E.Children.toArray(r).map((c) => {
     var v;
-    if (!B.isValidElement(o)) return o;
-    const u = o.type.displayName;
-    if (u === "Command.Empty")
+    if (!E.isValidElement(c)) return c;
+    const p = c.type.displayName;
+    if (p === "Command.Empty")
       return null;
-    if (u === "Command.Item")
-      return (((v = o.props.children) == null ? void 0 : v.toString().toLowerCase()) || "").includes(n.toLowerCase()) ? (l = !0, o) : null;
-    if (u === "Command.Group") {
-      const m = i(o.props.children);
-      return B.Children.toArray(m).some((p) => B.isValidElement(p) && p.type.displayName === "Command.Item") ? B.cloneElement(o, { ...o.props, children: m }) : null;
+    if (p === "Command.Item")
+      return (((v = c.props.children) == null ? void 0 : v.toString().toLowerCase()) || "").includes(n.toLowerCase()) ? (l = !0, c) : null;
+    if (p === "Command.Group") {
+      const m = i(c.props.children);
+      return E.Children.toArray(m).some((u) => E.isValidElement(u) && u.type.displayName === "Command.Item") ? E.cloneElement(c, { ...c.props, children: m }) : null;
     }
-    return o;
-  }).filter(Boolean), d = i(e), c = ["clarity-command-list", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: c, ...s, children: [
+    return c;
+  }).filter(Boolean), d = i(e), o = ["clarity-command-list", t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ w("div", { className: o, ...s, children: [
     d,
-    !l && /* @__PURE__ */ a(ue, {})
+    !l && /* @__PURE__ */ a(ye, {})
   ] });
 };
-qe.displayName = "Command.List";
-const ue = ({ children: e, className: t = "", ...s }) => {
-  const { texts: n } = ee(), l = ["clarity-command-empty", t].filter(Boolean).join(" ");
+Ye.displayName = "Command.List";
+const ye = ({ children: e, className: t = "", ...s }) => {
+  const { texts: n } = ne(), l = ["clarity-command-empty", t].filter(Boolean).join(" ");
   return /* @__PURE__ */ a("div", { className: l, ...s, children: e || s.emptyText || n.empty });
 };
-ue.displayName = "Command.Empty";
-const Je = ({ children: e, className: t = "", ...s }) => {
+ye.displayName = "Command.Empty";
+const Ke = ({ children: e, className: t = "", ...s }) => {
   const n = ["clarity-command-group", t].filter(Boolean).join(" ");
   return /* @__PURE__ */ a("div", { className: n, ...s, children: e });
 };
-Je.displayName = "Command.Group";
-const Qe = ({ children: e, className: t = "", ...s }) => {
-  const { setValue: n, variant: l } = ee(), i = ["clarity-command-item", `clarity-command-item--${l}`, t].filter(Boolean).join(" ");
+Ke.displayName = "Command.Group";
+const et = ({ children: e, className: t = "", ...s }) => {
+  const { setValue: n, variant: l } = ne(), i = ["clarity-command-item", `clarity-command-item--${l}`, t].filter(Boolean).join(" ");
   return /* @__PURE__ */ a("div", { className: i, onClick: () => n((e == null ? void 0 : e.toString()) || ""), ...s, children: e });
 };
-Qe.displayName = "Command.Item";
-const Xe = ({ className: e = "", ...t }) => {
+et.displayName = "Command.Item";
+const tt = ({ className: e = "", ...t }) => {
   const s = ["clarity-command-separator", e].filter(Boolean).join(" ");
   return /* @__PURE__ */ a("hr", { className: s, ...t });
 };
-Xe.displayName = "Command.Separator";
-const Ye = ({ children: e, className: t = "", ...s }) => {
+tt.displayName = "Command.Separator";
+const st = ({ children: e, className: t = "", ...s }) => {
   const n = ["clarity-command-shortcut", t].filter(Boolean).join(" ");
   return /* @__PURE__ */ a("span", { className: n, ...s, children: e });
 };
-Ye.displayName = "Command.Shortcut";
-const Rt = Object.assign(Fe, {
-  Button: Ge,
-  Dialog: ze,
-  Input: Ue,
-  List: qe,
-  Empty: ue,
-  Group: Je,
-  Item: Qe,
-  Separator: Xe,
-  Shortcut: Ye
-}), Nt = ({ columns: e, viewMode: t }) => {
+st.displayName = "Command.Shortcut";
+const zt = Object.assign(Je, {
+  Button: Qe,
+  Dialog: Ze,
+  Input: Xe,
+  List: Ye,
+  Empty: ye,
+  Group: Ke,
+  Item: et,
+  Separator: tt,
+  Shortcut: st
+}), Bt = ({ columns: e, viewMode: t }) => {
   const s = Array.from({ length: 5 }, (n, l) => l);
-  return t === "card" ? /* @__PURE__ */ _("div", { className: "card-view-wrapper is-loading", children: [
+  return t === "card" ? /* @__PURE__ */ w("div", { className: "card-view-wrapper is-loading", children: [
     /* @__PURE__ */ a("div", { className: "skeleton card-view-header" }),
     /* @__PURE__ */ a("div", { className: "card-view-body", children: s.map((n) => /* @__PURE__ */ a("div", { className: "skeleton card-view-row" }, n)) })
-  ] }) : /* @__PURE__ */ a("div", { className: "table-wrapper is-loading", children: /* @__PURE__ */ _("table", { children: [
+  ] }) : /* @__PURE__ */ a("div", { className: "table-wrapper is-loading", children: /* @__PURE__ */ w("table", { children: [
     /* @__PURE__ */ a("thead", { children: /* @__PURE__ */ a("tr", { className: "table-row", children: e.map((n) => /* @__PURE__ */ a("th", { className: "table-header-cell", children: /* @__PURE__ */ a("div", { className: "skeleton skeleton-text" }) }, n.key)) }) }),
     /* @__PURE__ */ a("tbody", { children: s.map((n) => /* @__PURE__ */ a("tr", { className: "table-row", children: e.map((l) => /* @__PURE__ */ a("td", { className: "table-cell", children: /* @__PURE__ */ a("div", { className: "skeleton skeleton-text" }) }, l.key)) }, n)) })
   ] }) });
-}, Dt = ({
+}, Ut = ({
   variant: e = "secondary",
   columns: t,
   data: s,
@@ -1748,47 +1748,47 @@ const Rt = Object.assign(Fe, {
   isScrollable: l = !1,
   isLoading: i = !1
 }) => {
-  const [d, c] = x(null), [r, o] = x("none"), u = (p) => {
-    p.sortable && (d === p.key ? o((h) => h === "asc" ? "desc" : h === "desc" ? "none" : "asc") : (c(p.key), o("asc")));
-  }, v = Y(() => r === "none" || !d ? s : [...s].sort((p, h) => {
-    const y = p[d], N = h[d];
-    return y < N ? r === "asc" ? -1 : 1 : y > N ? r === "asc" ? 1 : -1 : 0;
-  }), [s, d, r]), m = (p) => p.sortable ? d !== p.key || r === "none" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↕" }) : r === "asc" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ a("span", { className: "sort-icon", children: "↓" }) : null;
+  const [d, o] = T(null), [r, c] = T("none"), p = (u) => {
+    u.sortable && (d === u.key ? c((h) => h === "asc" ? "desc" : h === "desc" ? "none" : "asc") : (o(u.key), c("asc")));
+  }, v = te(() => r === "none" || !d ? s : [...s].sort((u, h) => {
+    const y = u[d], b = h[d];
+    return y < b ? r === "asc" ? -1 : 1 : y > b ? r === "asc" ? 1 : -1 : 0;
+  }), [s, d, r]), m = (u) => u.sortable ? d !== u.key || r === "none" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↕" }) : r === "asc" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ a("span", { className: "sort-icon", children: "↓" }) : null;
   if (i)
-    return /* @__PURE__ */ a(Nt, { columns: t, viewMode: n });
+    return /* @__PURE__ */ a(Bt, { columns: t, viewMode: n });
   const f = `table-variant-${e} ${l ? "is-scrollable" : ""}`;
-  return n === "card" ? /* @__PURE__ */ _("div", { className: `card-view-wrapper ${f}`, children: [
-    /* @__PURE__ */ a("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((p) => /* @__PURE__ */ _(
+  return n === "card" ? /* @__PURE__ */ w("div", { className: `card-view-wrapper ${f}`, children: [
+    /* @__PURE__ */ a("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((u) => /* @__PURE__ */ w(
       "div",
       {
-        className: `card-view-header-cell ${p.sortable ? "sortable" : ""}`,
-        onClick: () => u(p),
-        style: { minWidth: p.minWidth },
+        className: `card-view-header-cell ${u.sortable ? "sortable" : ""}`,
+        onClick: () => p(u),
+        style: { minWidth: u.minWidth },
         children: [
-          p.header,
-          m(p)
+          u.header,
+          m(u)
         ]
       },
-      p.key
+      u.key
     )) }),
-    /* @__PURE__ */ a("div", { className: "card-view-body", children: v.map((p, h) => /* @__PURE__ */ a("div", { className: `card-view-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ a("div", { className: `card-view-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(p) : p[y.key] }, y.key)) }, h)) })
-  ] }) : /* @__PURE__ */ a("div", { className: `table-wrapper ${f}`, children: /* @__PURE__ */ _("table", { children: [
-    /* @__PURE__ */ a("thead", { className: "table-header", children: /* @__PURE__ */ a("tr", { className: "table-row", children: t.map((p) => /* @__PURE__ */ _(
+    /* @__PURE__ */ a("div", { className: "card-view-body", children: v.map((u, h) => /* @__PURE__ */ a("div", { className: `card-view-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ a("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__ */ a("div", { className: `table-wrapper ${f}`, children: /* @__PURE__ */ w("table", { children: [
+    /* @__PURE__ */ a("thead", { className: "table-header", children: /* @__PURE__ */ a("tr", { className: "table-row", children: t.map((u) => /* @__PURE__ */ w(
       "th",
       {
-        className: `table-header-cell ${p.sortable ? "sortable" : ""} table-header-cell-${e}`,
-        onClick: () => u(p),
-        style: { minWidth: p.minWidth },
+        className: `table-header-cell ${u.sortable ? "sortable" : ""} table-header-cell-${e}`,
+        onClick: () => p(u),
+        style: { minWidth: u.minWidth },
         children: [
-          p.header,
-          m(p)
+          u.header,
+          m(u)
         ]
       },
-      p.key
+      u.key
     )) }) }),
-    /* @__PURE__ */ a("tbody", { children: v.map((p, h) => /* @__PURE__ */ a("tr", { className: `table-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ a("td", { className: `table-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(p) : p[y.key] }, y.key)) }, h)) })
+    /* @__PURE__ */ a("tbody", { children: v.map((u, h) => /* @__PURE__ */ a("tr", { className: `table-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ a("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)) })
   ] }) });
-}, At = ({
+}, qt = ({
   variant: e = "primary",
   product: t,
   tone: s,
@@ -1796,7 +1796,7 @@ const Rt = Object.assign(Fe, {
   color: l,
   className: i = "",
   "aria-label": d = "Carregando...",
-  ...c
+  ...o
 }) => {
   const r = "clarity-spinner", v = l ? `${r}--custom` : t && s ? `${r}--custom` : `${r}--${e}`, m = [
     r,
@@ -1811,7 +1811,7 @@ const Rt = Object.assign(Fe, {
       style: f,
       role: "status",
       "aria-label": d,
-      ...c,
+      ...o,
       children: /* @__PURE__ */ a("div", { className: `${r}__container`, children: /* @__PURE__ */ a(
         "svg",
         {
@@ -1833,7 +1833,7 @@ const Rt = Object.assign(Fe, {
       ) })
     }
   );
-}, bt = ({
+}, jt = ({
   className: e = "",
   noGutters: t,
   justify: s,
@@ -1842,17 +1842,17 @@ const Rt = Object.assign(Fe, {
   as: i = "div",
   ...d
 }) => {
-  const c = [
+  const o = [
     "clarity-row",
     t ? "clarity-row--no-gutters" : "",
     s ? `clarity-row--justify-${s}` : "",
     n ? `clarity-row--align-${n}` : "",
     e
   ].filter(Boolean).join(" ");
-  return B.createElement(i, { className: c, ...d }, l);
+  return E.createElement(i, { className: o, ...d }, l);
 };
-bt.displayName = "Row";
-const Ct = (e) => `${e / 12 * 100}%`, _t = (e) => `${e / 12 * 100}%`, wt = ({
+jt.displayName = "Row";
+const Et = (e) => `${e / 12 * 100}%`, Lt = (e) => `${e / 12 * 100}%`, St = ({
   className: e = "",
   xs: t,
   sm: s,
@@ -1860,27 +1860,159 @@ const Ct = (e) => `${e / 12 * 100}%`, _t = (e) => `${e / 12 * 100}%`, wt = ({
   lg: l,
   xl: i,
   xxl: d,
-  offset: c,
+  offset: o,
   children: r,
-  as: o = "div",
-  style: u,
+  as: c = "div",
+  style: p,
   ...v
 }) => {
-  const m = { ...u }, f = (y, N) => {
-    if (N === void 0) return;
-    const C = `--clarity-col-width-${y}`;
-    m[C] = typeof N == "number" ? Ct(N) : "auto";
-  }, p = (y, N) => {
-    if (N === void 0) return;
-    const C = `--clarity-col-offset-${y}`;
-    m[C] = _t(N);
+  const m = { ...p }, f = (y, b) => {
+    if (b === void 0) return;
+    const N = `--clarity-col-width-${y}`;
+    m[N] = typeof b == "number" ? Et(b) : "auto";
+  }, u = (y, b) => {
+    if (b === void 0) return;
+    const N = `--clarity-col-offset-${y}`;
+    m[N] = Lt(b);
   };
-  f("xs", t), f("sm", s), f("md", n), f("lg", l), f("xl", i), f("xxl", d), p("xs", c == null ? void 0 : c.xs), p("sm", c == null ? void 0 : c.sm), p("md", c == null ? void 0 : c.md), p("lg", c == null ? void 0 : c.lg), p("xl", c == null ? void 0 : c.xl), p("xxl", c == null ? void 0 : c.xxl);
+  f("xs", t), f("sm", s), f("md", n), f("lg", l), f("xl", i), f("xxl", d), u("xs", o == null ? void 0 : o.xs), u("sm", o == null ? void 0 : o.sm), u("md", o == null ? void 0 : o.md), u("lg", o == null ? void 0 : o.lg), u("xl", o == null ? void 0 : o.xl), u("xxl", o == null ? void 0 : o.xxl);
   const h = ["clarity-col", e].filter(Boolean).join(" ");
-  return B.createElement(o, { className: h, style: m, ...v }, r);
+  return E.createElement(c, { className: h, style: m, ...v }, r);
 };
-wt.displayName = "Col";
-const Pt = {
+St.displayName = "Col";
+const ve = {
+  fontFamily: {
+    sans: ["Inter", "system-ui", "sans-serif"],
+    mono: ["Fira Code", "monospace"]
+  },
+  fontSize: {
+    xs: "12px",
+    sm: "14px",
+    base: "16px",
+    lg: "18px",
+    xl: "20px",
+    "2xl": "24px",
+    "3xl": "30px"
+  },
+  fontWeight: {
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  letterSpacing: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em"
+  }
+}, ue = (e) => {
+  if (e) {
+    if (e.includes(".")) {
+      const [t, s] = e.split(".");
+      return `var(--clarity-${t}-${s})`;
+    }
+    return `var(--clarity-${e})`;
+  }
+}, U = (e) => e !== void 0 ? `var(--clarity-spacing-${e})` : void 0, de = E.forwardRef(({
+  as: e,
+  children: t,
+  className: s,
+  display: n,
+  flexDirection: l,
+  alignItems: i,
+  justifyContent: d,
+  gap: o,
+  m: r,
+  mt: c,
+  mr: p,
+  mb: v,
+  ml: m,
+  mx: f,
+  my: u,
+  p: h,
+  pt: y,
+  pr: b,
+  pb: N,
+  pl: B,
+  px: x,
+  py: _,
+  bg: $,
+  color: L,
+  fontSize: k,
+  fontWeight: j,
+  textAlign: I,
+  lineHeight: A,
+  letterSpacing: O,
+  borderRadius: g,
+  boxShadow: V,
+  borderWidth: H,
+  borderTopWidth: W,
+  borderRightWidth: q,
+  borderBottomWidth: X,
+  borderLeftWidth: F,
+  borderXWidth: P,
+  borderYWidth: Y,
+  borderColor: le,
+  ...re
+}, ie) => {
+  const C = e || "div", S = (R, J) => {
+    if (R === void 0 || R === 0) return;
+    const rt = `var(--clarity-border-width-${R})`, it = J ? ue(J) : "currentColor";
+    return `${rt} solid ${it}`;
+  }, G = {
+    display: n,
+    flexDirection: l,
+    alignItems: i,
+    justifyContent: d,
+    gap: U(o),
+    marginTop: U(c ?? u ?? r),
+    marginRight: U(p ?? f ?? r),
+    marginBottom: U(v ?? u ?? r),
+    marginLeft: U(m ?? f ?? r),
+    paddingTop: U(y ?? _ ?? h),
+    paddingRight: U(b ?? x ?? h),
+    paddingBottom: U(N ?? _ ?? h),
+    paddingLeft: U(B ?? x ?? h),
+    backgroundColor: $ ? ue($) : void 0,
+    color: L ? ue(L) : void 0,
+    fontSize: k ? `var(--clarity-font-size-${k})` : void 0,
+    fontWeight: j ? ve.fontWeight[j] : void 0,
+    textAlign: I,
+    lineHeight: A,
+    letterSpacing: O ? ve.letterSpacing[O] : void 0,
+    borderRadius: g ? `var(--clarity-radius-${g})` : void 0,
+    boxShadow: V ? `var(--clarity-shadow-${V})` : void 0,
+    border: S(H, le),
+    borderTop: S(W ?? Y),
+    borderRight: S(q ?? P),
+    borderBottom: S(X ?? Y),
+    borderLeft: S(F ?? P)
+  };
+  return /* @__PURE__ */ a(C, { ref: ie, className: `clarity-box ${s || ""}`.trim(), style: G, ...re, children: t });
+}), at = ({ children: e, className: t }) => /* @__PURE__ */ a(de, { as: "header", p: 4, borderBottomWidth: 1, borderColor: "gray.200", className: t, children: e });
+at.displayName = "Card.Header";
+const nt = ({ children: e, className: t }) => /* @__PURE__ */ a(de, { p: 4, className: t, children: e });
+nt.displayName = "Card.Content";
+const lt = ({ children: e, className: t }) => /* @__PURE__ */ a(de, { as: "footer", p: 4, borderTopWidth: 1, borderColor: "gray.200", display: "flex", justifyContent: "flex-end", gap: 3, className: t, children: e });
+lt.displayName = "Card.Footer";
+const me = ({ children: e, ...t }) => /* @__PURE__ */ a(
+  de,
+  {
+    bg: "white",
+    borderRadius: 3,
+    boxShadow: 1,
+    overflow: "hidden",
+    ...t,
+    children: e
+  }
+);
+me.Header = at;
+me.Content = nt;
+me.Footer = lt;
+me.displayName = "Card";
+const Jt = {
   primary: {
     50: "#f0f9ff",
     100: "#e0f2fe",
@@ -1929,7 +2061,7 @@ const Pt = {
     800: "#065f46",
     900: "#064e3b"
   }
-}, Vt = {
+}, Qt = {
   xs: "4px",
   sm: "8px",
   md: "16px",
@@ -1937,56 +2069,37 @@ const Pt = {
   xl: "32px",
   "2xl": "48px",
   "3xl": "64px"
-}, Mt = {
-  fontFamily: {
-    sans: ["Inter", "system-ui", "sans-serif"],
-    mono: ["Fira Code", "monospace"]
-  },
-  fontSize: {
-    xs: "12px",
-    sm: "14px",
-    base: "16px",
-    lg: "18px",
-    xl: "20px",
-    "2xl": "24px",
-    "3xl": "30px"
-  },
-  fontWeight: {
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700
-  }
-}, Ht = (...e) => e.filter(Boolean).join(" "), Wt = () => Math.random().toString(36).substr(2, 9);
+}, Zt = (...e) => e.filter(Boolean).join(" "), Xt = () => Math.random().toString(36).substr(2, 9);
 export {
-  Ot as Accordion,
-  xt as Badge,
-  Tt as Button,
-  Bt as ButtonGroup,
-  Lt as ButtonIcon,
-  St as ButtonLink,
-  rt as CheckInput,
-  wt as Col,
-  Rt as Command,
-  Q as ConfirmationDialog,
-  ae as Dropdown,
-  st as Input,
-  ct as InputSwitch,
-  J as Modal,
-  lt as MultiSelect,
-  K as Offcanvas,
-  bt as Row,
-  nt as Select,
-  At as Spinner,
-  Dt as Table,
-  me as Tabs,
-  at as Textarea,
-  Et as ToastProvider,
-  It as Tooltip,
-  Ht as cn,
-  Pt as colors,
-  Wt as generateId,
-  Vt as spacing,
-  Mt as typography,
-  jt as useToast
+  Ft as Accordion,
+  Dt as Badge,
+  At as Button,
+  Pt as ButtonGroup,
+  Mt as ButtonIcon,
+  Wt as ButtonLink,
+  me as Card,
+  vt as CheckInput,
+  St as Col,
+  zt as Command,
+  ee as ConfirmationDialog,
+  oe as Dropdown,
+  ut as Input,
+  bt as InputSwitch,
+  K as Modal,
+  ht as MultiSelect,
+  ae as Offcanvas,
+  jt as Row,
+  ft as Select,
+  qt as Spinner,
+  Ut as Table,
+  he as Tabs,
+  pt as Textarea,
+  Ht as ToastProvider,
+  Gt as Tooltip,
+  Zt as cn,
+  Jt as colors,
+  Xt as generateId,
+  Qt as spacing,
+  ve as typography,
+  Vt as useToast
 };