beth-clarity 1.1.22 → 1.1.23

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

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