beth-clarity 1.1.17 → 1.1.18

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

@@ -1,31 +1,31 @@
 import { jsx as a, jsxs as _, Fragment as Ze } from "react/jsx-runtime";
-import B, { useState as x, useRef as P, useEffect as S, forwardRef as Ke, isValidElement as Z, createContext as z, cloneElement as W, useContext as q, useMemo as Y, useCallback as ne, useLayoutEffect as et } from "react";
+import B, { useState as x, useRef as P, useEffect as S, forwardRef as Ke, isValidElement as Z, createContext as U, cloneElement as W, useContext as q, useMemo as Y, useCallback as le, useLayoutEffect as et } from "react";
 import tt from "react-dom";
 const xt = ({
   variant: e = "primary",
   product: t,
   tone: s,
-  size: l = "medium",
-  bgColor: n,
+  size: n = "medium",
+  bgColor: l,
   textColor: i,
-  children: o,
+  children: d,
   className: c = "",
   rounded: r = !1,
-  outlined: d = !1,
+  outlined: o = !1,
   ...u
 }) => {
-  const v = "clarity-badge", p = !!n, f = t && s && !p;
-  let m = "";
-  p ? m = `${v}--custom-bg` : f ? m = `${v}--custom` : m = `${v}--${e}`;
-  const y = [
+  const v = "clarity-badge", m = !!l, f = t && s && !m;
+  let p = "";
+  m ? p = `${v}--custom-bg` : f ? p = `${v}--custom` : p = `${v}--${e}`;
+  const h = [
     v,
-    m,
-    `${v}--${l}`,
+    p,
+    `${v}--${n}`,
     r ? `${v}--rounded` : "",
-    d ? `${v}--outlined` : "",
+    o ? `${v}--outlined` : "",
     c
-  ].filter(Boolean).join(" "), h = {};
-  p && (h.backgroundColor = n, i && (h.color = i));
+  ].filter(Boolean).join(" "), y = {};
+  m && (y.backgroundColor = l, i && (y.color = i));
   const N = f && t && s ? {
     "--custom-bg-color": `var(--clarity-${t}-${s})`,
     "--custom-text-color": s && parseInt(s) >= 500 ? "white" : `var(--clarity-${t}-800)`
@@ -33,50 +33,50 @@ const xt = ({
   return /* @__PURE__ */ a(
     "span",
     {
-      className: y,
+      className: h,
       style: {
-        ...h,
+        ...y,
         ...N
       },
       ...u,
-      children: o
+      children: d
     }
   );
 }, Tt = ({
   variant: e = "primary",
   size: t = "medium",
   disabled: s = !1,
-  loading: l = !1,
-  children: n,
+  loading: n = !1,
+  children: l,
   onClick: i,
-  type: o = "button",
+  type: d = "button",
   className: c = "",
   title: r,
-  customColor: d,
+  customColor: o,
   customColorHover: u,
   ...v
 }) => {
-  const p = "clarity-button", f = [
-    p,
-    !d && `${p}--${e}`,
-    `${p}--${t}`,
-    l && `${p}--loading`,
-    s && `${p}--disabled`,
+  const m = "clarity-button", f = [
+    m,
+    !o && `${m}--${e}`,
+    `${m}--${t}`,
+    n && `${m}--loading`,
+    s && `${m}--disabled`,
     c
-  ].filter(Boolean).join(" "), m = {};
-  return d && (m["--button-bg"] = d, m["--button-hover-bg"] = u || `${d}E6`, m["--button-border"] = d, m["--button-hover-border"] = u || `${d}E6`, m["--button-fg"] = "#fff"), /* @__PURE__ */ _(
+  ].filter(Boolean).join(" "), p = {};
+  return o && (p["--button-bg"] = o, p["--button-hover-bg"] = u || `${o}E6`, p["--button-border"] = o, p["--button-hover-border"] = u || `${o}E6`, p["--button-fg"] = "#fff"), /* @__PURE__ */ _(
     "button",
     {
       className: f,
-      style: m,
-      disabled: s || l,
+      style: p,
+      disabled: s || n,
       onClick: i,
-      type: o,
+      type: d,
       title: r,
       ...v,
       children: [
-        l && /* @__PURE__ */ a("div", { className: `${p}__spinner` }),
-        n
+        n && /* @__PURE__ */ a("div", { className: `${m}__spinner` }),
+        l
       ]
     }
   );
@@ -84,59 +84,59 @@ const xt = ({
   variant: e = "primary",
   size: t = "medium",
   filled: s = !0,
-  items: l,
-  value: n,
+  items: n,
+  value: l,
   multiple: i = !1,
-  disabled: o = !1,
+  disabled: d = !1,
   onChange: c,
   className: r = "",
-  ...d
+  ...o
 }) => {
-  const u = "clarity-button-group", v = `${u}--${e}`, p = [
+  const u = "clarity-button-group", v = `${u}--${e}`, m = [
     u,
     v,
     `${u}--${t}`,
     !s && `${u}--outline`,
-    o && `${u}--disabled`,
+    d && `${u}--disabled`,
     r
-  ].filter(Boolean).join(" "), f = (y) => {
-    if (o || !c) return;
-    const h = l.find((N) => N.id === y);
-    if (!(h != null && h.disabled))
+  ].filter(Boolean).join(" "), f = (h) => {
+    if (d || !c) return;
+    const y = n.find((N) => N.id === h);
+    if (!(y != null && y.disabled))
       if (i) {
-        const N = Array.isArray(n) ? n : [], C = N.includes(y) ? N.filter((j) => j !== y) : [...N, y];
+        const N = Array.isArray(l) ? l : [], C = N.includes(h) ? N.filter((j) => j !== h) : [...N, h];
         c(C);
       } else
-        c(y);
-  }, m = (y) => i ? Array.isArray(n) && n.includes(y) : n === y;
+        c(h);
+  }, p = (h) => i ? Array.isArray(l) && l.includes(h) : l === h;
   return /* @__PURE__ */ a(
     "div",
     {
-      className: p,
+      className: m,
       role: "group",
-      ...d,
-      children: l.map((y, h) => {
-        const N = m(y.id), C = [
+      ...o,
+      children: n.map((h, y) => {
+        const N = p(h.id), C = [
           `${u}__item`,
           N && `${u}__item--selected`,
-          y.disabled && `${u}__item--disabled`,
-          h === 0 && `${u}__item--first`,
-          h === l.length - 1 && `${u}__item--last`
+          h.disabled && `${u}__item--disabled`,
+          y === 0 && `${u}__item--first`,
+          y === n.length - 1 && `${u}__item--last`
         ].filter(Boolean).join(" ");
         return /* @__PURE__ */ _(
           "button",
           {
             className: C,
-            onClick: () => f(y.id),
-            disabled: o || y.disabled,
+            onClick: () => f(h.id),
+            disabled: d || h.disabled,
             type: "button",
             "aria-pressed": N,
             children: [
-              y.icon && /* @__PURE__ */ a("span", { className: `${u}__item-icon`, children: y.icon }),
-              /* @__PURE__ */ a("span", { className: `${u}__item-label`, children: y.label })
+              h.icon && /* @__PURE__ */ a("span", { className: `${u}__item-icon`, children: h.icon }),
+              /* @__PURE__ */ a("span", { className: `${u}__item-label`, children: h.label })
             ]
           },
-          y.id
+          h.id
         );
       })
     }
@@ -145,26 +145,26 @@ const xt = ({
   variant: e,
   size: t = "medium",
   label: s,
-  helperText: l,
-  error: n = !1,
+  helperText: n,
+  error: l = !1,
   errorMessage: i,
-  startIcon: o,
+  startIcon: d,
   endIcon: c,
   className: r = "",
-  disabled: d = !1,
+  disabled: o = !1,
   value: u,
   defaultValue: v,
-  onFocus: p,
+  onFocus: m,
   onBlur: f,
-  ...m
-}, y) => {
-  const [h, N] = x(!1), [C, j] = x(!1), T = P(null);
-  B.useImperativeHandle(y, () => T.current), S(() => {
+  ...p
+}, h) => {
+  const [y, N] = x(!1), [C, j] = x(!1), T = P(null);
+  B.useImperativeHandle(h, () => T.current), S(() => {
     const k = T.current;
     k && j(k.value.length > 0);
   }, [u, v]);
   const w = (k) => {
-    N(!0), p == null || p(k);
+    N(!0), m == null || m(k);
   }, $ = (k) => {
     N(!1), j(k.target.value.length > 0), f == null || f(k);
   }, L = [
@@ -172,36 +172,36 @@ const xt = ({
     "clarity-input--outlined",
     `clarity-input--${t}`,
     e && `clarity-input--${e}`,
-    n && "clarity-input--error",
-    d && "clarity-input--disabled",
-    h && "clarity-input--focused",
+    l && "clarity-input--error",
+    o && "clarity-input--disabled",
+    y && "clarity-input--focused",
     C && "clarity-input--has-value",
-    o && "clarity-input--with-start-icon",
+    d && "clarity-input--with-start-icon",
     c && "clarity-input--with-end-icon",
     r
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("div", { className: "clarity-input-wrapper", children: [
     /* @__PURE__ */ _("div", { className: L, children: [
-      o && /* @__PURE__ */ a("div", { className: "clarity-input__start-icon", children: o }),
+      d && /* @__PURE__ */ a("div", { className: "clarity-input__start-icon", children: d }),
       /* @__PURE__ */ _("div", { className: "clarity-input__field", children: [
         /* @__PURE__ */ a(
           "input",
           {
             ref: T,
             className: "clarity-input__element",
-            disabled: d,
+            disabled: o,
             value: u,
             defaultValue: v,
             onFocus: w,
             onBlur: $,
-            ...m
+            ...p
           }
         ),
         s && /* @__PURE__ */ a("label", { className: "clarity-input__label", children: s })
       ] }),
       c && /* @__PURE__ */ a("div", { className: "clarity-input__end-icon", children: c })
     ] }),
-    (l || n && i) && /* @__PURE__ */ a("div", { className: "clarity-input__helper-text", children: n && i ? i : l })
+    (n || l && i) && /* @__PURE__ */ a("div", { className: "clarity-input__helper-text", children: l && i ? i : n })
   ] });
 });
 st.displayName = "Input";
@@ -209,20 +209,20 @@ const at = B.forwardRef(({
   variant: e,
   size: t = "medium",
   label: s,
-  helperText: l,
-  error: n = !1,
+  helperText: n,
+  error: l = !1,
   errorMessage: i,
-  startIcon: o,
+  startIcon: d,
   endIcon: c,
   className: r = "",
-  disabled: d = !1,
+  disabled: o = !1,
   value: u,
   defaultValue: v,
-  onFocus: p,
+  onFocus: m,
   onBlur: f,
-  rows: m = 3,
-  minHeight: y,
-  maxHeight: h,
+  rows: p = 3,
+  minHeight: h,
+  maxHeight: y,
   resizable: N = !0,
   ...C
 }, j) => {
@@ -232,7 +232,7 @@ const at = B.forwardRef(({
     g && L(g.value.length > 0);
   }, [u, v]);
   const E = (g) => {
-    w(!0), p == null || p(g);
+    w(!0), m == null || m(g);
   }, I = (g) => {
     w(!1), L(g.target.value.length > 0), f == null || f(g);
   }, A = [
@@ -240,33 +240,33 @@ const at = B.forwardRef(({
     "clarity-textarea--outlined",
     `clarity-textarea--${t}`,
     e && `clarity-textarea--${e}`,
-    n && "clarity-textarea--error",
-    d && "clarity-textarea--disabled",
+    l && "clarity-textarea--error",
+    o && "clarity-textarea--disabled",
     T && "clarity-textarea--focused",
     $ && "clarity-textarea--has-value",
-    o && "clarity-textarea--with-start-icon",
+    d && "clarity-textarea--with-start-icon",
     c && "clarity-textarea--with-end-icon",
     r
   ].filter(Boolean).join(" "), O = {
     resize: N ? "vertical" : "none",
-    minHeight: y ? `${y}px` : void 0,
-    maxHeight: h ? `${h}px` : void 0
+    minHeight: h ? `${h}px` : void 0,
+    maxHeight: y ? `${y}px` : void 0
   };
   return /* @__PURE__ */ _("div", { className: "clarity-textarea-wrapper", children: [
     /* @__PURE__ */ _("div", { className: A, children: [
-      o && /* @__PURE__ */ a("div", { className: "clarity-textarea__start-icon", children: o }),
+      d && /* @__PURE__ */ a("div", { className: "clarity-textarea__start-icon", children: d }),
       /* @__PURE__ */ _("div", { className: "clarity-textarea__field", children: [
         /* @__PURE__ */ a(
           "textarea",
           {
             ref: k,
             className: "clarity-textarea__element",
-            disabled: d,
+            disabled: o,
             value: u,
             defaultValue: v,
             onFocus: E,
             onBlur: I,
-            rows: m,
+            rows: p,
             style: O,
             ...C
           }
@@ -275,28 +275,28 @@ const at = B.forwardRef(({
       ] }),
       c && /* @__PURE__ */ a("div", { className: "clarity-textarea__end-icon", children: c })
     ] }),
-    (l || n && i) && /* @__PURE__ */ a("div", { className: "clarity-textarea__helper-text", children: n && i ? i : l })
+    (n || l && i) && /* @__PURE__ */ a("div", { className: "clarity-textarea__helper-text", children: l && i ? i : n })
   ] });
 });
 at.displayName = "Textarea";
-const lt = B.forwardRef(({
+const nt = B.forwardRef(({
   variant: e,
   size: t = "medium",
   label: s,
-  helperText: l,
-  error: n = !1,
+  helperText: n,
+  error: l = !1,
   errorMessage: i,
-  startIcon: o,
+  startIcon: d,
   endIcon: c,
   className: r = "",
-  disabled: d = !1,
+  disabled: o = !1,
   value: u,
   defaultValue: v,
-  onFocus: p,
+  onFocus: m,
   onBlur: f,
-  onChange: m,
-  options: y,
-  placeholder: h = "Selecione uma opção",
+  onChange: p,
+  options: h,
+  placeholder: y = "Selecione uma opção",
   isClearable: N = !1,
   isSearchable: C = !1,
   ...j
@@ -310,33 +310,33 @@ const lt = B.forwardRef(({
     };
     return document.addEventListener("mousedown", b), () => document.removeEventListener("mousedown", b);
   }, [f]);
-  const V = C && A ? y.filter(
+  const V = C && A ? h.filter(
     (b) => b.label.toLowerCase().includes(A.toLowerCase())
-  ) : y, F = () => {
-    d || ($(!w), k(!w), w ? (f == null || f(), C && O("")) : (p == null || p(), C && setTimeout(() => {
+  ) : h, F = () => {
+    o || ($(!w), k(!w), w ? (f == null || f(), C && O("")) : (m == null || m(), C && setTimeout(() => {
       var b;
       (b = H.current) == null || b.focus();
     }, 0)));
   }, X = (b) => {
-    b.disabled || (I(b.value), $(!1), k(!1), O(""), m == null || m(b.value), f == null || f());
+    b.disabled || (I(b.value), $(!1), k(!1), O(""), p == null || p(b.value), f == null || f());
   }, te = (b) => {
     O(b.target.value);
   }, G = (b) => {
     b.key === "Escape" ? ($(!1), k(!1), O("")) : b.key === "Enter" && V.length > 0 && V[0] && X(V[0]);
-  }, M = y.find((b) => b.value === E), le = E !== "" && E !== void 0, ie = (b) => {
-    b.stopPropagation(), I(""), m == null || m("");
-  }, re = le || L || h || C && A, ce = [
+  }, M = h.find((b) => b.value === E), ne = E !== "" && E !== void 0, ie = (b) => {
+    b.stopPropagation(), I(""), p == null || p("");
+  }, re = ne || L || y || C && A, ce = [
     "clarity-select",
     "clarity-select--outlined",
     `clarity-select--${t}`,
     e && `clarity-select--${e}`,
-    n && "clarity-select--error",
-    d && "clarity-select--disabled",
+    l && "clarity-select--error",
+    o && "clarity-select--disabled",
     (L || w) && "clarity-select--focused",
     re && "clarity-select--label-up",
     w && "clarity-select--open",
     C && "clarity-select--searchable",
-    o && "clarity-select--with-start-icon",
+    d && "clarity-select--with-start-icon",
     (c || N) && "clarity-select--with-end-icon",
     r
   ].filter(Boolean).join(" ");
@@ -350,10 +350,10 @@ const lt = B.forwardRef(({
         role: "combobox",
         "aria-expanded": w,
         "aria-haspopup": "listbox",
-        tabIndex: d || C ? -1 : 0,
+        tabIndex: o || C ? -1 : 0,
         ...j,
         children: [
-          o && /* @__PURE__ */ a("div", { className: "clarity-select__start-icon", children: o }),
+          d && /* @__PURE__ */ a("div", { className: "clarity-select__start-icon", children: d }),
           /* @__PURE__ */ _("div", { className: "clarity-select__field", children: [
             C ? /* @__PURE__ */ a(
               "input",
@@ -365,16 +365,16 @@ const lt = B.forwardRef(({
                 onChange: te,
                 onKeyDown: G,
                 onFocus: () => {
-                  w || ($(!0), k(!0), p == null || p());
+                  w || ($(!0), k(!0), m == null || m());
                 },
-                placeholder: M ? M.label : h,
-                disabled: d,
+                placeholder: M ? M.label : y,
+                disabled: o,
                 readOnly: !w
               }
-            ) : /* @__PURE__ */ a("div", { className: "clarity-select__display", children: M ? M.label : h }),
+            ) : /* @__PURE__ */ a("div", { className: "clarity-select__display", children: M ? M.label : y }),
             s && /* @__PURE__ */ a("label", { className: "clarity-select__label", children: s })
           ] }),
-          N && le && /* @__PURE__ */ a(
+          N && ne && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
@@ -447,28 +447,28 @@ const lt = B.forwardRef(({
         ]
       }
     ),
-    (l || n && i) && /* @__PURE__ */ a("div", { className: "clarity-select__helper-text", children: n && i ? i : l })
+    (n || l && i) && /* @__PURE__ */ a("div", { className: "clarity-select__helper-text", children: l && i ? i : n })
   ] });
 });
-lt.displayName = "Select";
-const nt = Ke(({
+nt.displayName = "Select";
+const lt = Ke(({
   options: e = [],
   value: t = [],
   onChange: s,
-  placeholder: l = "Selecione opções",
-  label: n,
+  placeholder: n = "Selecione opções",
+  label: l,
   helperText: i,
-  error: o = !1,
+  error: d = !1,
   errorMessage: c,
   disabled: r = !1,
-  variant: d = "primary",
+  variant: o = "primary",
   size: u = "medium",
   maxSelectedLabels: v = 3,
-  selectionLimit: p,
+  selectionLimit: m,
   className: f = "",
-  id: m,
-  name: y,
-  required: h = !1,
+  id: p,
+  name: h,
+  required: y = !1,
   "data-testid": N,
   ...C
 }, j) => {
@@ -492,24 +492,24 @@ const nt = Ke(({
     if (r)
       return;
     R && (R.stopPropagation(), R.preventDefault());
-    const U = t.includes(b);
+    const z = t.includes(b);
     let D;
-    U ? D = t.filter((se) => se !== b) : D = [...t, b], s && s(D);
+    z ? D = t.filter((se) => se !== b) : D = [...t, b], s && s(D);
   }, X = (b, R) => {
     if (R.stopPropagation(), r) return;
-    const U = t.filter((D) => D !== b);
-    s == null || s(U);
+    const z = t.filter((D) => D !== b);
+    s == null || s(z);
   }, te = (b) => {
     b.stopPropagation(), !r && (s == null || s([]));
   }, G = (b) => {
     L(b.target.value);
   }, M = (b) => {
     b.key === "Escape" && (w(!1), E(!1), L(""));
-  }, le = k || T || t.length > 0, ie = () => {
+  }, ne = k || T || t.length > 0, ie = () => {
     if (t.length === 0) return null;
     const b = t.map(
       (D) => e.find((se) => se.value === D)
-    ).filter(Boolean), R = b.slice(0, v), U = b.length - v;
+    ).filter(Boolean), R = b.slice(0, v), z = b.length - v;
     return /* @__PURE__ */ _("div", { className: "clarity-multiselect__chips", children: [
       R.map((D) => /* @__PURE__ */ _("div", { className: "clarity-multiselect__chip", children: [
         /* @__PURE__ */ a("span", { className: "clarity-multiselect__chip-label", children: D.label }),
@@ -524,9 +524,9 @@ const nt = Ke(({
           }
         )
       ] }, D.value)),
-      U > 0 && /* @__PURE__ */ _("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
+      z > 0 && /* @__PURE__ */ _("div", { className: "clarity-multiselect__chip clarity-multiselect__chip--count", children: [
         "+",
-        U,
+        z,
         " mais"
       ] })
     ] });
@@ -535,12 +535,12 @@ const nt = Ke(({
     f
   ].filter(Boolean).join(" "), ce = [
     "clarity-multiselect",
-    `clarity-multiselect--${d}`,
+    `clarity-multiselect--${o}`,
     `clarity-multiselect--${u}`,
     T && "clarity-multiselect--open",
     k && "clarity-multiselect--focused",
-    le && "clarity-multiselect--label-up",
-    o && "clarity-multiselect--error",
+    ne && "clarity-multiselect--label-up",
+    d && "clarity-multiselect--error",
     r && "clarity-multiselect--disabled",
     t.length > 0 && "clarity-multiselect--has-value"
   ].filter(Boolean).join(" ");
@@ -559,11 +559,11 @@ const nt = Ke(({
               className: "clarity-multiselect__field",
               onClick: V,
               children: [
-                n && /* @__PURE__ */ _("label", { className: "clarity-multiselect__label", children: [
-                  n,
-                  h && /* @__PURE__ */ a("span", { className: "clarity-multiselect__required", children: "*" })
+                l && /* @__PURE__ */ _("label", { className: "clarity-multiselect__label", children: [
+                  l,
+                  y && /* @__PURE__ */ a("span", { className: "clarity-multiselect__required", children: "*" })
                 ] }),
-                /* @__PURE__ */ a("div", { className: "clarity-multiselect__content", children: t.length > 0 ? ie() : /* @__PURE__ */ a("span", { className: "clarity-multiselect__placeholder", children: l }) }),
+                /* @__PURE__ */ a("div", { className: "clarity-multiselect__content", children: t.length > 0 ? ie() : /* @__PURE__ */ a("span", { className: "clarity-multiselect__placeholder", children: n }) }),
                 /* @__PURE__ */ _("div", { className: "clarity-multiselect__icons", children: [
                   t.length > 0 && !r && /* @__PURE__ */ a(
                     "button",
@@ -603,16 +603,16 @@ const nt = Ke(({
               }
             ) }),
             /* @__PURE__ */ a("ul", { className: "clarity-multiselect__options", children: H.length > 0 ? H.map((b) => {
-              const R = t.includes(b.value), U = b.disabled || r;
+              const R = t.includes(b.value), z = b.disabled || r;
               return /* @__PURE__ */ _(
                 "li",
                 {
                   className: [
                     "clarity-multiselect__option",
                     R && "clarity-multiselect__option--selected",
-                    U && "clarity-multiselect__option--disabled"
+                    z && "clarity-multiselect__option--disabled"
                   ].filter(Boolean).join(" "),
-                  onClick: (D) => !U && F(b.value, D),
+                  onClick: (D) => !z && F(b.value, D),
                   children: [
                     /* @__PURE__ */ a("div", { className: "clarity-multiselect__option-checkbox", children: /* @__PURE__ */ a("div", { className: [
                       "clarity-multiselect__checkbox",
@@ -637,39 +637,39 @@ const nt = Ke(({
         ]
       }
     ),
-    (i || o && c) && /* @__PURE__ */ a("div", { className: "clarity-multiselect__helper", children: o && c ? /* @__PURE__ */ a("span", { className: "clarity-multiselect__error-message", children: c }) : i && /* @__PURE__ */ a("span", { className: "clarity-multiselect__helper-text", children: i }) })
+    (i || d && c) && /* @__PURE__ */ a("div", { className: "clarity-multiselect__helper", children: d && c ? /* @__PURE__ */ a("span", { className: "clarity-multiselect__error-message", children: c }) : i && /* @__PURE__ */ a("span", { className: "clarity-multiselect__helper-text", children: i }) })
   ] });
 });
-nt.displayName = "MultiSelect";
-const pe = z(null), fe = () => {
+lt.displayName = "MultiSelect";
+const pe = U(null), fe = () => {
   const e = q(pe);
   if (!e)
     throw new Error("useModal must be used within a Modal provider");
   return e;
-}, ye = ({
+}, he = ({
   children: e,
   className: t = "",
   title: s
 }) => {
-  const { onClose: l, variant: n, showCloseButton: i } = fe(), o = [
+  const { onClose: n, variant: l, showCloseButton: i } = fe(), d = [
     "clarity-modal-header",
     t,
-    n && `clarity-modal-header--${n}`
+    l && `clarity-modal-header--${l}`
   ].filter(Boolean).join(" "), c = [
     "clarity-modal-close",
-    n && `clarity-modal-close--${n}`
+    l && `clarity-modal-close--${l}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: o, children: [
+  return /* @__PURE__ */ _("div", { className: d, children: [
     s && /* @__PURE__ */ a("h2", { className: "clarity-modal-title", children: s }),
     e,
     i && /* @__PURE__ */ a("button", { className: c, onClick: (r) => {
-      r.stopPropagation(), l();
+      r.stopPropagation(), n();
     }, children: "×" })
   ] });
 };
-ye.displayName = "Modal.Header";
-const he = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-modal-content ${t}`, children: e });
-he.displayName = "Modal.Content";
+he.displayName = "Modal.Header";
+const ye = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-modal-content ${t}`, children: e });
+ye.displayName = "Modal.Content";
 const ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ _("div", { className: `clarity-modal-footer ${t}`, children: [
   /* @__PURE__ */ a("div", { className: "clarity-modal-scroll-indicator" }),
   e
@@ -677,8 +677,8 @@ const ve = ({ children: e, className: t = "" }) => /* @__PURE__ */ _("div", { cl
 ve.displayName = "Modal.Footer";
 const Ne = ({ children: e, onClick: t }) => W(e, {
   onClick: (s) => {
-    var l, n;
-    t == null || t(), (n = (l = e.props).onClick) == null || n.call(l, s);
+    var n, l;
+    t == null || t(), (l = (n = e.props).onClick) == null || l.call(n, s);
   }
 });
 Ne.displayName = "Modal.Trigger";
@@ -686,8 +686,8 @@ const be = ({ children: e }) => {
   const { onClose: t } = fe();
   return W(e, {
     onClick: (s) => {
-      var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, s);
+      var n, l;
+      t(), (l = (n = e.props).onClick) == null || l.call(n, s);
     }
   });
 };
@@ -696,68 +696,68 @@ const J = ({
   isOpen: e,
   onClose: t,
   onOpen: s,
-  children: l,
-  className: n = "",
+  children: n,
+  className: l = "",
   variant: i,
-  size: o = "medium",
+  size: d = "medium",
   showCloseButton: c = !0,
   closeOnOverlayClick: r = !0
 }) => {
-  const [d, u] = x(!1), p = e !== void 0 ? e : d, f = t || (() => {
+  const [o, u] = x(!1), m = e !== void 0 ? e : o, f = t || (() => {
     u(!1);
   });
   S(() => {
-    p && (s == null || s());
-  }, [p, s]), S(() => {
+    m && (s == null || s());
+  }, [m, s]), S(() => {
     const C = (j) => {
       j.key === "Escape" && f();
     };
-    return p ? (document.addEventListener("keydown", C), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+    return m ? (document.addEventListener("keydown", C), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
       document.removeEventListener("keydown", C), document.body.style.overflow = "unset";
     };
-  }, [p, f]);
-  const m = (C) => {
+  }, [m, f]);
+  const p = (C) => {
     r && C.target === C.currentTarget && f();
-  }, y = B.Children.toArray(l).find(
+  }, h = B.Children.toArray(n).find(
     (C) => Z(C) && C.type.displayName === "Modal.Trigger"
-  ), h = B.Children.toArray(l).filter(
+  ), y = B.Children.toArray(n).filter(
     (C) => Z(C) && C.type.displayName !== "Modal.Trigger"
-  ), N = ["clarity-modal", n, `clarity-modal--${o}`].filter(Boolean).join(" ");
+  ), N = ["clarity-modal", l, `clarity-modal--${d}`].filter(Boolean).join(" ");
   return /* @__PURE__ */ _(pe.Provider, { value: { onClose: f, variant: i, showCloseButton: c }, children: [
-    y && W(y, { onClick: () => u(!0) }),
-    p && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", onClick: m, children: /* @__PURE__ */ a("div", { className: N, children: h }) })
+    h && W(h, { onClick: () => u(!0) }),
+    m && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", onClick: p, children: /* @__PURE__ */ a("div", { className: N, children: y }) })
   ] });
 };
-J.Header = ye;
-J.Content = he;
+J.Header = he;
+J.Content = ye;
 J.Footer = ve;
 J.Trigger = Ne;
 J.Close = be;
 J.displayName = "Modal";
-const Ce = z(void 0), jt = () => {
+const Ce = U(void 0), jt = () => {
   const e = q(Ce);
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
   return e;
-}, it = ({ id: e, message: t, variant: s, duration: l, onClose: n, invertColors: i }) => {
-  const [o, c] = x("entering");
+}, it = ({ id: e, message: t, variant: s, duration: n, onClose: l, invertColors: i }) => {
+  const [d, c] = x("entering");
   S(() => {
-    const d = setTimeout(() => {
+    const o = setTimeout(() => {
       c("visible");
     }, 10), u = setTimeout(() => {
       c("exiting");
-    }, l * 1e3 - 300), v = setTimeout(() => {
-      n(e);
-    }, l * 1e3);
+    }, n * 1e3 - 300), v = setTimeout(() => {
+      l(e);
+    }, n * 1e3);
     return () => {
-      clearTimeout(d), clearTimeout(u), clearTimeout(v);
+      clearTimeout(o), clearTimeout(u), clearTimeout(v);
     };
-  }, [e, l, n]);
+  }, [e, n, l]);
   const r = [
     "cl-toast",
     s,
     i ? "colored-background" : "",
-    `cl-toast-${o}`
+    `cl-toast-${d}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("div", { className: r, children: [
     /* @__PURE__ */ a("div", { className: "cl-toast-message", children: t }),
@@ -766,12 +766,12 @@ const Ce = z(void 0), jt = () => {
       "div",
       {
         className: "cl-toast-progress-bar",
-        style: { animationDuration: `${l}s` }
+        style: { animationDuration: `${n}s` }
       }
     )
   ] });
 }, Et = ({ children: e }) => {
-  const [t, s] = x([]), l = Y(() => {
+  const [t, s] = x([]), n = Y(() => {
     if (typeof document < "u") {
       const r = document.createElement("div");
       return r.id = "toast-portal-root", r;
@@ -779,12 +779,12 @@ const Ce = z(void 0), jt = () => {
     return null;
   }, []);
   S(() => {
-    if (l)
-      return document.body.appendChild(l), () => {
-        document.body.removeChild(l);
+    if (n)
+      return document.body.appendChild(n), () => {
+        document.body.removeChild(n);
       };
-  }, [l]);
-  const n = ne((r) => {
+  }, [n]);
+  const l = le((r) => {
     const u = {
       id: (/* @__PURE__ */ new Date()).toISOString() + Math.random(),
       // duration: 5,
@@ -792,20 +792,20 @@ const Ce = z(void 0), jt = () => {
       ...r
     };
     s((v) => {
-      const p = [u, ...v];
-      return p.length > 4 ? p.slice(0, 4) : p;
+      const m = [u, ...v];
+      return m.length > 4 ? m.slice(0, 4) : m;
     });
-  }, []), i = ne((r) => {
-    s((d) => d.filter((u) => u.id !== r));
-  }, []), o = Y(() => t.reduce((r, d) => (r[d.position] || (r[d.position] = []), r[d.position].push(d), r), {}), [t]), c = Y(() => ({ show: n }), [n]);
+  }, []), i = le((r) => {
+    s((o) => o.filter((u) => u.id !== r));
+  }, []), d = Y(() => t.reduce((r, o) => (r[o.position] || (r[o.position] = []), r[o.position].push(o), r), {}), [t]), c = Y(() => ({ show: l }), [l]);
   return /* @__PURE__ */ _(Ce.Provider, { value: c, children: [
     e,
-    l && tt.createPortal(
-      Object.entries(o).map(([r, d]) => /* @__PURE__ */ a("div", { className: `cl-toast-container ${r}`, children: d.map((u) => /* @__PURE__ */ a(it, { ...u, onClose: i }, u.id)) }, r)),
-      l
+    n && tt.createPortal(
+      Object.entries(d).map(([r, o]) => /* @__PURE__ */ a("div", { className: `cl-toast-container ${r}`, children: o.map((u) => /* @__PURE__ */ a(it, { ...u, onClose: i }, u.id)) }, r)),
+      n
     )
   ] });
-}, _e = z(null), we = () => {
+}, _e = U(null), we = () => {
   const e = q(_e);
   if (!e)
     throw new Error("useOffcanvas must be used within an Offcanvas provider");
@@ -814,21 +814,21 @@ const Ce = z(void 0), jt = () => {
   children: e,
   className: t = ""
 }) => {
-  const { onClose: s, variant: l, showCloseButton: n, title: i } = we(), o = [
+  const { onClose: s, variant: n, showCloseButton: l, title: i } = we(), d = [
     "clarity-offcanvas-header",
     t
   ].filter(Boolean).join(" "), c = [
     "clarity-offcanvas-close",
-    l && `clarity-offcanvas-close--${l}`
+    n && `clarity-offcanvas-close--${n}`
   ].filter(Boolean).join(" "), r = [
     "clarity-offcanvas-title",
-    l && `clarity-offcanvas-title--${l}`
+    n && `clarity-offcanvas-title--${n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("div", { className: o, children: [
+  return /* @__PURE__ */ _("div", { className: d, children: [
     i && /* @__PURE__ */ a("h2", { className: r, children: i }),
     e,
-    n && /* @__PURE__ */ a("button", { className: c, onClick: (d) => {
-      d.stopPropagation(), s();
+    l && /* @__PURE__ */ a("button", { className: c, onClick: (o) => {
+      o.stopPropagation(), s();
     }, children: "×" })
   ] });
 };
@@ -836,9 +836,9 @@ ge.displayName = "Offcanvas.Header";
 const $e = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-offcanvas-content ${t}`, children: e });
 $e.displayName = "Offcanvas.Content";
 const ke = ({ children: e, onClick: t, variant: s }) => W(e, {
-  onClick: (l) => {
-    var n, i;
-    t == null || t(), (i = (n = e.props).onClick) == null || i.call(n, l);
+  onClick: (n) => {
+    var l, i;
+    t == null || t(), (i = (l = e.props).onClick) == null || i.call(l, n);
   },
   variant: s
 });
@@ -849,8 +849,8 @@ const xe = ({ children: e }) => {
   const { onClose: t } = we();
   return W(e, {
     onClick: (s) => {
-      var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, s);
+      var n, l;
+      t(), (l = (n = e.props).onClick) == null || l.call(n, s);
     }
   });
 };
@@ -859,22 +859,22 @@ const K = ({
   isOpen: e,
   onClose: t,
   onOpen: s,
-  children: l,
-  className: n = "",
+  children: n,
+  className: l = "",
   variant: i,
-  placement: o = "right",
+  placement: d = "right",
   closeOnOverlayClick: c = !0,
   showCloseButton: r = !0,
-  title: d
+  title: o
 }) => {
-  const [u, v] = x(!1), [p, f] = x(!1), [m, y] = x(!1), h = e !== void 0, N = h ? e : u, C = ne(() => {
+  const [u, v] = x(!1), [m, f] = x(!1), [p, h] = x(!1), y = e !== void 0, N = y ? e : u, C = le(() => {
     t ? t() : v(!1);
-  }, [t]), j = ne(() => {
-    h || v(!0), s == null || s();
-  }, [h, s]);
+  }, [t]), j = le(() => {
+    y || v(!0), s == null || s();
+  }, [y, s]);
   S(() => {
     if (N) {
-      y(!0);
+      h(!0);
       const g = setTimeout(() => {
         f(!0);
       }, 50);
@@ -882,7 +882,7 @@ const K = ({
     } else {
       f(!1);
       const g = setTimeout(() => {
-        y(!1);
+        h(!1);
       }, 300);
       return () => clearTimeout(g);
     }
@@ -896,7 +896,7 @@ const K = ({
   }, [N, C]);
   const T = (g) => {
     c && g.target === g.currentTarget && C();
-  }, w = B.Children.toArray(l);
+  }, w = B.Children.toArray(n);
   let $, L, k, E, I;
   w.forEach((g) => {
     if (Z(g))
@@ -917,17 +917,17 @@ const K = ({
   }) : E = /* @__PURE__ */ a(oe, { children: I }));
   const A = [
     "clarity-offcanvas",
-    n,
-    `clarity-offcanvas--${o}`,
+    l,
+    `clarity-offcanvas--${d}`,
     i && `clarity-offcanvas--${i}`,
-    p ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
+    m ? "clarity-offcanvas--open" : "clarity-offcanvas--closed"
   ].filter(Boolean).join(" "), O = [
     "clarity-offcanvas-overlay",
-    p ? "clarity-offcanvas-overlay--visible" : ""
+    m ? "clarity-offcanvas-overlay--visible" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _(_e.Provider, { value: { onClose: C, variant: i, showCloseButton: r, placement: o, title: d }, children: [
+  return /* @__PURE__ */ _(_e.Provider, { value: { onClose: C, variant: i, showCloseButton: r, placement: d, title: o }, children: [
     $ && W($, { onClick: j, variant: i }),
-    m && // Only render if shouldRender is true
+    p && // Only render if shouldRender is true
     /* @__PURE__ */ a("div", { className: O, onClick: T, children: /* @__PURE__ */ _("div", { className: A, children: [
       L,
       k,
@@ -947,47 +947,47 @@ const rt = B.forwardRef(({
   type: e,
   variant: t = "primary",
   size: s = "medium",
-  label: l,
-  helperText: n,
+  label: n,
+  helperText: l,
   error: i = !1,
-  errorMessage: o,
+  errorMessage: d,
   labelPosition: c = "right",
   className: r = "",
-  disabled: d = !1,
+  disabled: o = !1,
   checked: u,
   id: v,
-  ...p
+  ...m
 }, f) => {
-  const m = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, y = [
+  const p = v || `check-input-${Math.random().toString(36).substr(2, 9)}`, h = [
     "clarity-check-input-wrapper",
     `clarity-check-input-wrapper--${c}`,
-    d && "clarity-check-input-wrapper--disabled",
+    o && "clarity-check-input-wrapper--disabled",
     i && "clarity-check-input-wrapper--error"
-  ].filter(Boolean).join(" "), h = [
+  ].filter(Boolean).join(" "), y = [
     "clarity-check-input",
     `clarity-check-input--${e}`,
     `clarity-check-input--${s}`,
     t && `clarity-check-input--${t}`,
     i && "clarity-check-input--error",
-    d && "clarity-check-input--disabled",
+    o && "clarity-check-input--disabled",
     r
   ].filter(Boolean).join(" "), N = [
     "clarity-check-input__label",
     `clarity-check-input__label--${s}`,
-    d && "clarity-check-input__label--disabled"
+    o && "clarity-check-input__label--disabled"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("div", { className: "clarity-check-input-container", children: [
-    /* @__PURE__ */ _("label", { className: y, htmlFor: m, children: [
+    /* @__PURE__ */ _("label", { className: h, htmlFor: p, children: [
       /* @__PURE__ */ a(
         "input",
         {
           ref: f,
-          id: m,
+          id: p,
           type: e,
-          className: h,
-          disabled: d,
+          className: y,
+          disabled: o,
           checked: u,
-          ...p
+          ...m
         }
       ),
       /* @__PURE__ */ _("div", { className: "clarity-check-input__custom", children: [
@@ -1012,9 +1012,9 @@ const rt = B.forwardRef(({
         ),
         e === "radio" && /* @__PURE__ */ a("div", { className: "clarity-check-input__radio-dot" })
       ] }),
-      l && /* @__PURE__ */ a("span", { className: N, children: l })
+      n && /* @__PURE__ */ a("span", { className: N, children: n })
     ] }),
-    (n || i && o) && /* @__PURE__ */ a("div", { className: "clarity-check-input__helper-text", children: i && o ? o : n })
+    (l || i && d) && /* @__PURE__ */ a("div", { className: "clarity-check-input__helper-text", children: i && d ? d : l })
   ] });
 });
 rt.displayName = "CheckInput";
@@ -1022,62 +1022,62 @@ const ct = B.forwardRef(({
   variant: e = "primary",
   size: t = "medium",
   label: s,
-  helperText: l,
-  error: n = !1,
+  helperText: n,
+  error: l = !1,
   errorMessage: i,
-  labelPosition: o = "right",
+  labelPosition: d = "right",
   className: c = "",
   disabled: r = !1,
-  checked: d,
+  checked: o,
   id: u,
   ...v
-}, p) => {
-  const f = u || `input-switch-${Math.random().toString(36).substr(2, 9)}`, m = [
+}, m) => {
+  const f = u || `input-switch-${Math.random().toString(36).substr(2, 9)}`, p = [
     "clarity-input-switch-wrapper",
-    `clarity-input-switch-wrapper--${o}`,
+    `clarity-input-switch-wrapper--${d}`,
     r && "clarity-input-switch-wrapper--disabled",
-    n && "clarity-input-switch-wrapper--error"
-  ].filter(Boolean).join(" "), y = [
+    l && "clarity-input-switch-wrapper--error"
+  ].filter(Boolean).join(" "), h = [
     "clarity-input-switch",
     `clarity-input-switch--${t}`,
     e && `clarity-input-switch--${e}`,
-    n && "clarity-input-switch--error",
+    l && "clarity-input-switch--error",
     r && "clarity-input-switch--disabled",
     c
-  ].filter(Boolean).join(" "), h = [
+  ].filter(Boolean).join(" "), y = [
     "clarity-input-switch__label",
     `clarity-input-switch__label--${t}`,
     r && "clarity-input-switch__label--disabled"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("div", { className: "clarity-input-switch-container", children: [
-    /* @__PURE__ */ _("label", { className: m, htmlFor: f, children: [
+    /* @__PURE__ */ _("label", { className: p, htmlFor: f, children: [
       /* @__PURE__ */ a(
         "input",
         {
-          ref: p,
+          ref: m,
           id: f,
           type: "checkbox",
-          className: y,
+          className: h,
           disabled: r,
-          checked: d,
+          checked: o,
           ...v
         }
       ),
       /* @__PURE__ */ a("div", { className: "clarity-input-switch__track", children: /* @__PURE__ */ a("div", { className: "clarity-input-switch__thumb" }) }),
-      s && /* @__PURE__ */ a("span", { className: h, children: s })
+      s && /* @__PURE__ */ a("span", { className: y, children: s })
     ] }),
-    (l || n && i) && /* @__PURE__ */ a("div", { className: "clarity-input-switch__helper-text", children: n && i ? i : l })
+    (n || l && i) && /* @__PURE__ */ a("div", { className: "clarity-input-switch__helper-text", children: l && i ? i : n })
   ] });
 });
 ct.displayName = "InputSwitch";
-const Te = z(null), de = () => {
+const Te = U(null), de = () => {
   const e = q(Te);
   if (!e)
     throw new Error("useConfirmationDialog must be used within a ConfirmationDialog provider");
   return e;
 }, Be = ({ children: e, className: t = "" }) => {
-  const { variant: s } = de(), l = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${s}`;
-  return /* @__PURE__ */ a("div", { className: l, children: e });
+  const { variant: s } = de(), n = `clarity-confirmation-dialog-header ${t} clarity-confirmation-dialog-header--${s}`;
+  return /* @__PURE__ */ a("div", { className: n, children: e });
 };
 Be.displayName = "ConfirmationDialog.Header";
 const je = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { className: `clarity-confirmation-dialog-content ${t}`, children: e });
@@ -1086,162 +1086,162 @@ const Ee = ({ children: e, className: t = "" }) => /* @__PURE__ */ a("div", { cl
 Ee.displayName = "ConfirmationDialog.Footer";
 const Le = ({ children: e }) => W(e, {
   onClick: (t) => {
-    var s, l;
-    (l = (s = e.props).onClick) == null || l.call(s, t);
+    var s, n;
+    (n = (s = e.props).onClick) == null || n.call(s, t);
   }
 });
 Le.displayName = "ConfirmationDialog.Trigger";
-const Oe = ({ children: e }) => {
+const Se = ({ children: e }) => {
   const { onClose: t } = de();
   return W(e, {
     onClick: (s) => {
-      var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, s);
+      var n, l;
+      t(), (l = (n = e.props).onClick) == null || l.call(n, s);
     }
   });
 };
-Oe.displayName = "ConfirmationDialog.Close";
-const Se = ({ children: e }) => {
+Se.displayName = "ConfirmationDialog.Close";
+const Oe = ({ children: e }) => {
   const { onConfirm: t } = de();
   return W(e, {
     onClick: (s) => {
-      var l, n;
-      t(), (n = (l = e.props).onClick) == null || n.call(l, s);
+      var n, l;
+      t(), (l = (n = e.props).onClick) == null || l.call(n, s);
     }
   });
 };
-Se.displayName = "ConfirmationDialog.Confirm";
+Oe.displayName = "ConfirmationDialog.Confirm";
 const Q = ({
   isOpen: e,
   onClose: t,
   onConfirm: s,
-  variant: l = "clarity-primary",
-  children: n
+  variant: n = "clarity-primary",
+  children: l
 }) => {
-  const [i, o] = x(!1), c = e !== void 0, r = c ? e : i, d = () => {
-    c || o(!0);
+  const [i, d] = x(!1), c = e !== void 0, r = c ? e : i, o = () => {
+    c || d(!0);
   }, u = () => {
-    t ? t() : o(!1);
+    t ? t() : d(!1);
   }, v = () => {
     s && s(), u();
   };
   S(() => {
-    const y = (h) => {
-      h.key === "Escape" && u();
+    const h = (y) => {
+      y.key === "Escape" && u();
     };
-    return r ? (document.addEventListener("keydown", y), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
-      document.removeEventListener("keydown", y), document.body.style.overflow = "unset";
+    return r ? (document.addEventListener("keydown", h), document.body.style.overflow = "hidden") : document.body.style.overflow = "unset", () => {
+      document.removeEventListener("keydown", h), document.body.style.overflow = "unset";
     };
   }, [r, u]);
-  const p = B.Children.toArray(n).find(
-    (y) => Z(y) && y.type.displayName === "ConfirmationDialog.Trigger"
-  ), f = B.Children.toArray(n).filter(
-    (y) => Z(y) && y.type.displayName !== "ConfirmationDialog.Trigger"
-  ), m = `clarity-confirmation-dialog clarity-confirmation-dialog--${l}`;
-  return /* @__PURE__ */ _(Te.Provider, { value: { variant: l, onClose: u, onConfirm: v, onOpen: d }, children: [
-    p,
-    r && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ a("div", { className: m, children: f }) })
+  const m = B.Children.toArray(l).find(
+    (h) => Z(h) && h.type.displayName === "ConfirmationDialog.Trigger"
+  ), f = B.Children.toArray(l).filter(
+    (h) => Z(h) && h.type.displayName !== "ConfirmationDialog.Trigger"
+  ), p = `clarity-confirmation-dialog clarity-confirmation-dialog--${n}`;
+  return /* @__PURE__ */ _(Te.Provider, { value: { variant: n, onClose: u, onConfirm: v, onOpen: o }, children: [
+    m,
+    r && /* @__PURE__ */ a("div", { className: "clarity-modal-overlay", children: /* @__PURE__ */ a("div", { className: p, children: f }) })
   ] });
 };
 Q.Header = Be;
 Q.Content = je;
 Q.Footer = Ee;
 Q.Trigger = Le;
-Q.Close = Oe;
-Q.Confirm = Se;
+Q.Close = Se;
+Q.Confirm = Oe;
 Q.displayName = "ConfirmationDialog";
 const Lt = ({
   variant: e = "primary",
   size: t = "medium",
   disabled: s = !1,
-  loading: l = !1,
-  children: n,
+  loading: n = !1,
+  children: l,
   onClick: i,
-  type: o = "button",
+  type: d = "button",
   className: c = "",
   "aria-label": r,
-  title: d,
+  title: o,
   customColor: u,
   customColorHover: v,
-  ...p
+  ...m
 }) => {
-  const f = "clarity-button-icon", m = [
+  const f = "clarity-button-icon", p = [
     f,
     !u && `${f}--${e}`,
     `${f}--${t}`,
-    l && `${f}--loading`,
+    n && `${f}--loading`,
     s && `${f}--disabled`,
     c
-  ].filter(Boolean).join(" "), y = {};
-  return u && (y["--button-icon-bg"] = u, y["--button-icon-hover-bg"] = v || `${u}E6`), /* @__PURE__ */ _(
+  ].filter(Boolean).join(" "), h = {};
+  return u && (h["--button-icon-bg"] = u, h["--button-icon-hover-bg"] = v || `${u}E6`), /* @__PURE__ */ _(
     "button",
     {
-      className: m,
-      disabled: s || l,
+      className: p,
+      disabled: s || n,
       onClick: i,
-      type: o,
+      type: d,
       "aria-label": r,
-      title: d,
-      style: y,
-      ...p,
+      title: o,
+      style: h,
+      ...m,
       children: [
-        l && /* @__PURE__ */ a("div", { className: `${f}__spinner` }),
-        !l && n
+        n && /* @__PURE__ */ a("div", { className: `${f}__spinner` }),
+        !n && l
       ]
     }
   );
-}, Ot = ({
+}, St = ({
   variant: e = "primary",
   product: t,
   tone: s,
-  hoverTone: l,
-  size: n = "medium",
+  hoverTone: n,
+  size: l = "medium",
   disabled: i = !1,
-  children: o,
+  children: d,
   onClick: c,
   href: r,
-  target: d,
+  target: o,
   rel: u,
   className: v = "",
-  ...p
+  ...m
 }) => {
-  const f = "clarity-button-link", m = t && s, y = m ? `${f}--custom` : `${f}--${e}`, h = [
+  const f = "clarity-button-link", p = t && s, h = p ? `${f}--custom` : `${f}--${e}`, y = [
     f,
-    y,
-    `${f}--${n}`,
+    h,
+    `${f}--${l}`,
     i && `${f}--disabled`,
     v
   ].filter(Boolean).join(" "), N = (j) => {
     const T = parseInt(j);
     return T >= 800 ? "900" : T >= 700 ? "800" : T >= 600 ? "700" : T >= 500 ? "600" : T >= 400 ? "500" : T >= 300 ? "400" : T >= 200 ? "300" : "200";
-  }, C = m ? {
+  }, C = p ? {
     "--custom-color": `var(--clarity-${t}-${s})`,
-    "--custom-hover-color": `var(--clarity-${t}-${l || N(s)})`
+    "--custom-hover-color": `var(--clarity-${t}-${n || N(s)})`
   } : {};
   return r ? /* @__PURE__ */ a(
     "a",
     {
       href: r,
-      target: d,
-      rel: u || (d === "_blank" ? "noopener noreferrer" : void 0),
-      className: h,
+      target: o,
+      rel: u || (o === "_blank" ? "noopener noreferrer" : void 0),
+      className: y,
       style: C,
       onClick: i ? void 0 : c,
-      ...p,
-      children: o
+      ...m,
+      children: d
     }
   ) : /* @__PURE__ */ a(
     "button",
     {
-      className: h,
+      className: y,
       style: C,
       disabled: i,
       onClick: c,
-      ...p,
-      children: o
+      ...m,
+      children: d
     }
   );
-}, Ie = z(void 0), Re = () => {
+}, Ie = U(void 0), Re = () => {
   const e = q(Ie);
   if (!e)
     throw new Error("Accordion components must be used within an Accordion");
@@ -1250,30 +1250,30 @@ const Lt = ({
   variant: e = "primary",
   product: t,
   tone: s,
-  hoverTone: l,
-  defaultActiveKey: n,
+  hoverTone: n,
+  defaultActiveKey: l,
   alwaysOpen: i = !1,
-  flush: o = !1,
+  flush: d = !1,
   className: c = "",
   children: r,
-  onSelect: d,
+  onSelect: o,
   ...u
 }) => {
-  const [v, p] = x(() => n ? Array.isArray(n) ? n : [n] : []), f = (w) => {
+  const [v, m] = x(() => l ? Array.isArray(l) ? l : [l] : []), f = (w) => {
     let $;
-    i ? $ = v.includes(w) ? v.filter((L) => L !== w) : [...v, w] : $ = v.includes(w) ? [] : [w], p($), d && d(v.includes(w) ? null : w, {});
-  }, m = "clarity-accordion", y = t && s, h = y ? `${m}--custom` : `${m}--${e}`, N = [
-    m,
-    h,
-    o && `${m}--flush`,
+    i ? $ = v.includes(w) ? v.filter((L) => L !== w) : [...v, w] : $ = v.includes(w) ? [] : [w], m($), o && o(v.includes(w) ? null : w, {});
+  }, p = "clarity-accordion", h = t && s, y = h ? `${p}--custom` : `${p}--${e}`, N = [
+    p,
+    y,
+    d && `${p}--flush`,
     c
   ].filter(Boolean).join(" "), C = (w) => {
     const $ = parseInt(w);
     return $ >= 800 ? "900" : $ >= 700 ? "800" : $ >= 600 ? "700" : $ >= 500 ? "600" : $ >= 400 ? "500" : $ >= 300 ? "400" : $ >= 200 ? "300" : "200";
-  }, j = y ? {
+  }, j = h ? {
     "--custom-border-color": `var(--clarity-${t}-${s})`,
     "--custom-header-color": `var(--clarity-${t}-${s})`,
-    "--custom-hover-color": `var(--clarity-${t}-${l || C(s)})`
+    "--custom-hover-color": `var(--clarity-${t}-${n || C(s)})`
   } : {}, T = {
     activeKeys: v,
     toggleItem: f,
@@ -1281,50 +1281,50 @@ const Lt = ({
     variant: e,
     product: t,
     tone: s,
-    hoverTone: l,
-    flush: o
+    hoverTone: n,
+    flush: d
   };
   return /* @__PURE__ */ a(Ie.Provider, { value: T, children: /* @__PURE__ */ a("div", { className: N, style: j, ...u, children: r }) });
 }, dt = ({
   eventKey: e,
   disabled: t = !1,
   className: s = "",
-  children: l,
-  ...n
+  children: n,
+  ...l
 }) => {
-  const { activeKeys: i } = Re(), o = "clarity-accordion", c = i.includes(e), r = [
-    `${o}__item`,
-    c && `${o}__item--active`,
-    t && `${o}__item--disabled`,
+  const { activeKeys: i } = Re(), d = "clarity-accordion", c = i.includes(e), r = [
+    `${d}__item`,
+    c && `${d}__item--active`,
+    t && `${d}__item--disabled`,
     s
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: r, ...n, children: B.Children.map(l, (d) => B.isValidElement(d) ? B.cloneElement(d, {
-    ...d.props,
+  return /* @__PURE__ */ a("div", { className: r, ...l, children: B.Children.map(n, (o) => B.isValidElement(o) ? B.cloneElement(o, {
+    ...o.props,
     eventKey: e,
     disabled: t,
     isActive: c
-  }) : d) });
+  }) : o) });
 }, mt = ({
   className: e = "",
   children: t,
   onClick: s,
-  eventKey: l,
-  disabled: n = !1,
+  eventKey: n,
+  disabled: l = !1,
   isActive: i = !1,
-  ...o
+  ...d
 }) => {
-  const { toggleItem: c } = Re(), r = "clarity-accordion", d = (u) => {
-    !n && l && c(l), s == null || s(u);
+  const { toggleItem: c } = Re(), r = "clarity-accordion", o = (u) => {
+    !l && n && c(n), s == null || s(u);
   };
   return /* @__PURE__ */ _(
     "button",
     {
       className: [`${r}__header`, e].filter(Boolean).join(" "),
-      onClick: d,
-      disabled: n,
+      onClick: o,
+      disabled: l,
       "aria-expanded": i,
-      "aria-controls": l ? `${r}-collapse-${l}` : void 0,
-      ...o,
+      "aria-controls": n ? `${r}-collapse-${n}` : void 0,
+      ...d,
       children: [
         /* @__PURE__ */ a("span", { className: `${r}__title`, children: t }),
         /* @__PURE__ */ a("span", { className: `${r}__icon`, children: /* @__PURE__ */ a(
@@ -1345,8 +1345,8 @@ const Lt = ({
   className: e = "",
   children: t,
   eventKey: s,
-  isActive: l = !1,
-  ...n
+  isActive: n = !1,
+  ...l
 }) => {
   const i = "clarity-accordion";
   return /* @__PURE__ */ a(
@@ -1355,16 +1355,16 @@ const Lt = ({
       id: s ? `${i}-collapse-${s}` : void 0,
       className: [
         `${i}__collapse`,
-        l && `${i}__collapse--show`
+        n && `${i}__collapse--show`
       ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ a("div", { className: [`${i}__body`, e].filter(Boolean).join(" "), ...n, children: t })
+      children: /* @__PURE__ */ a("div", { className: [`${i}__body`, e].filter(Boolean).join(" "), ...l, children: t })
     }
   );
-}, St = Object.assign(ot, {
+}, Ot = Object.assign(ot, {
   Item: dt,
   Header: mt,
   Body: ut
-}), De = z(
+}), De = U(
   void 0
 ), Ae = () => {
   const e = q(De);
@@ -1379,49 +1379,49 @@ const Lt = ({
       type: "button",
       ref: s,
       className: "dropdown__trigger",
-      onClick: () => t((l) => !l),
+      onClick: () => t((n) => !n),
       "aria-haspopup": "true",
       children: e
     }
   );
 }, ft = ({ children: e }) => {
-  const { isOpen: t, contentRef: s, styles: l } = Ae();
-  return t ? /* @__PURE__ */ a("div", { ref: s, className: "dropdown__content", style: l, children: e }) : null;
-}, yt = ({ children: e }) => /* @__PURE__ */ a("div", { className: "dropdown__menu", children: e }), ht = ({ as: e, children: t, ...s }) => /* @__PURE__ */ a(e || "a", { ...s, className: "dropdown__item", children: t }), vt = () => /* @__PURE__ */ a("hr", { className: "dropdown__separator" }), ae = ({ title: e, position: t = "bottom", children: s }) => {
-  const [l, n] = x(!1), [i, o] = x({}), c = P(null), r = P(null), d = P(null);
+  const { isOpen: t, contentRef: s, styles: n } = Ae();
+  return t ? /* @__PURE__ */ a("div", { ref: s, className: "dropdown__content", style: n, children: e }) : null;
+}, ht = ({ children: e }) => /* @__PURE__ */ a("div", { className: "dropdown__menu", children: e }), yt = ({ as: e, children: t, ...s }) => /* @__PURE__ */ a(e || "a", { ...s, className: "dropdown__item", children: t }), vt = () => /* @__PURE__ */ a("hr", { className: "dropdown__separator" }), ae = ({ title: e, position: t = "bottom", children: s }) => {
+  const [n, l] = x(!1), [i, d] = x({}), c = P(null), r = P(null), o = P(null);
   return et(() => {
-    if (l) {
-      const u = r.current, v = d.current;
+    if (n) {
+      const u = r.current, v = o.current;
       if (!u || !v) return;
-      const p = u.getBoundingClientRect(), f = v.getBoundingClientRect(), m = window.innerHeight, y = window.innerWidth;
-      let h = t;
-      t === "bottom" && p.bottom + f.height > m && (h = "top"), t === "top" && p.top - f.height < 0 && (h = "bottom"), t === "right" && p.right + f.width > y && (h = "left"), t === "left" && p.left - f.width < 0 && (h = "right");
+      const m = u.getBoundingClientRect(), f = v.getBoundingClientRect(), p = window.innerHeight, h = window.innerWidth;
+      let y = t;
+      t === "bottom" && m.bottom + f.height > p && (y = "top"), t === "top" && m.top - f.height < 0 && (y = "bottom"), t === "right" && m.right + f.width > h && (y = "left"), t === "left" && m.left - f.width < 0 && (y = "right");
       const N = {};
-      switch (h) {
+      switch (y) {
         case "top":
-          N.bottom = p.height + 4, N.left = p.width / 2 - f.width / 2;
+          N.bottom = m.height + 4, N.left = m.width / 2 - f.width / 2;
           break;
         case "right":
-          N.left = p.width + 4, N.top = p.height / 2 - f.height / 2;
+          N.left = m.width + 4, N.top = m.height / 2 - f.height / 2;
           break;
         case "left":
-          N.right = p.width + 4, N.top = p.height / 2 - f.height / 2;
+          N.right = m.width + 4, N.top = m.height / 2 - f.height / 2;
           break;
         case "bottom":
         default:
-          N.top = p.height + 4, N.left = p.width / 2 - f.width / 2;
+          N.top = m.height + 4, N.left = m.width / 2 - f.width / 2;
           break;
       }
-      o(N);
+      d(N);
     }
-  }, [l, t]), S(() => {
+  }, [n, t]), S(() => {
     const u = (v) => {
-      c.current && !c.current.contains(v.target) && n(!1);
+      c.current && !c.current.contains(v.target) && l(!1);
     };
     return document.addEventListener("mousedown", u), () => {
       document.removeEventListener("mousedown", u);
     };
-  }, []), /* @__PURE__ */ a(De.Provider, { value: { isOpen: l, setIsOpen: n, triggerRef: r, contentRef: d, styles: i }, children: /* @__PURE__ */ a(
+  }, []), /* @__PURE__ */ a(De.Provider, { value: { isOpen: n, setIsOpen: l, triggerRef: r, contentRef: o, styles: i }, children: /* @__PURE__ */ a(
     "div",
     {
       ref: c,
@@ -1433,27 +1433,27 @@ const Lt = ({
 };
 ae.Trigger = pt;
 ae.Content = ft;
-ae.Menu = yt;
-ae.Item = ht;
+ae.Menu = ht;
+ae.Item = yt;
 ae.Separator = vt;
-const Pe = z(null), Ve = () => {
+const Pe = U(null), Ve = () => {
   const e = q(Pe);
   if (!e)
     throw new Error("useTabs must be used within a Tabs provider");
   return e;
 }, Me = ({ id: e, label: t, className: s = "" }) => {
-  const { activeTab: l, setActiveTab: n, variant: i, orientation: o } = Ve(), c = l === e, r = [
+  const { activeTab: n, setActiveTab: l, variant: i, orientation: d } = Ve(), c = n === e, r = [
     "clarity-tab",
     s,
     c ? "active" : "",
     c ? `variant-${i}` : "",
-    `orientation-${o}`
+    `orientation-${d}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ a(
     "button",
     {
       className: r,
-      onClick: () => n(e),
+      onClick: () => l(e),
       role: "tab",
       "aria-selected": c,
       children: /* @__PURE__ */ a("span", { className: "clarity-tab-label", children: t })
@@ -1462,31 +1462,46 @@ const Pe = z(null), Ve = () => {
 };
 Me.displayName = "Tabs.Tab";
 const He = ({ id: e, children: t, className: s = "" }) => {
-  const { activeTab: l } = Ve(), n = l === e, i = {
-    visibility: n ? "visible" : "hidden",
+  const { activeTab: n } = Ve(), l = n === e, i = {
+    visibility: l ? "visible" : "hidden",
     gridArea: "1 / 1"
   };
-  return n || (i.pointerEvents = "none"), /* @__PURE__ */ a("div", { className: `clarity-tab-content ${s}`, role: "tabpanel", style: i, children: t });
+  return l || (i.pointerEvents = "none"), /* @__PURE__ */ a("div", { className: `clarity-tab-content ${s}`, role: "tabpanel", style: i, children: t });
 };
 He.displayName = "Tabs.Content";
 const me = ({
   children: e,
   defaultTab: t,
   variant: s = "primary",
-  orientation: l = "horizontal",
-  className: n = ""
+  orientation: n = "horizontal",
+  className: l = "",
+  useUrl: i = !1
 }) => {
-  const [i, o] = x(t), c = Y(() => ({
-    activeTab: i,
+  const d = () => window.location.hash.replace("#", ""), [c, r] = x(() => i && d() || t);
+  S(() => {
+    if (i) {
+      const m = () => {
+        const f = d();
+        f && r(f);
+      };
+      return window.addEventListener("hashchange", m), () => {
+        window.removeEventListener("hashchange", m);
+      };
+    }
+  }, [i]);
+  const o = (m) => {
+    i && (window.location.hash = String(m)), r(m);
+  }, u = Y(() => ({
+    activeTab: c,
     setActiveTab: o,
     variant: s,
-    orientation: l
-  }), [i, s, l]), r = [
+    orientation: n
+  }), [c, s, n]), v = [
     "clarity-tabs-container",
-    n,
-    `orientation-${l}`
+    l,
+    `orientation-${n}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a(Pe.Provider, { value: c, children: /* @__PURE__ */ a("div", { className: r, children: e }) });
+  return /* @__PURE__ */ a(Pe.Provider, { value: u, children: /* @__PURE__ */ a("div", { className: v, children: e }) });
 };
 me.Tab = Me;
 me.Content = He;
@@ -1495,20 +1510,20 @@ const It = ({
   content: e,
   position: t = "top",
   variant: s = "primary",
-  product: l,
-  tone: n,
+  product: n,
+  tone: l,
   bgColor: i,
-  textColor: o,
+  textColor: d,
   children: c,
   className: r = "",
-  disabled: d = !1,
+  disabled: o = !1,
   delay: u = 200,
   hideDelay: v = 100,
-  trigger: p = "hover",
+  trigger: m = "hover",
   arrow: f = !0,
-  ...m
+  ...p
 }) => {
-  const [y, h] = x(!1), [N, C] = x(null), j = P(null), T = P(null), w = "clarity-tooltip", $ = !!i, L = l && n && !$;
+  const [h, y] = x(!1), [N, C] = x(null), j = P(null), T = P(null), w = "clarity-tooltip", $ = !!i, L = n && l && !$;
   let k = "";
   $ ? k = `${w}__content--custom-bg` : L ? k = `${w}__content--custom` : k = `${w}__content--${s}`;
   const E = [
@@ -1520,27 +1535,27 @@ const It = ({
     k,
     f && `${w}__content--arrow`
   ].filter(Boolean).join(" "), A = {}, O = {};
-  $ && i && (O["--tooltip-bg-color"] = i), o && (O["--tooltip-text-color"] = o), L && l && n && (O["--tooltip-product"] = l, O["--tooltip-tone"] = n);
+  $ && i && (O["--tooltip-bg-color"] = i), d && (O["--tooltip-text-color"] = d), L && n && l && (O["--tooltip-product"] = n, O["--tooltip-tone"] = l);
   const g = {
     ...A,
     ...Object.keys(O).length > 0 ? O : {}
   }, H = () => {
-    if (d) return;
+    if (o) return;
     N && clearTimeout(N);
     const M = setTimeout(() => {
-      h(!0);
+      y(!0);
     }, u);
     C(M);
   }, V = () => {
     N && clearTimeout(N);
     const M = setTimeout(() => {
-      h(!1);
+      y(!1);
     }, v);
     C(M);
   }, F = () => {
-    d || h(!y);
+    o || y(!h);
   }, X = () => {
-    d || H();
+    o || H();
   }, te = () => {
     V();
   };
@@ -1548,30 +1563,30 @@ const It = ({
     N && clearTimeout(N);
   }, [N]);
   const G = {};
-  return p === "hover" ? (G.onMouseEnter = H, G.onMouseLeave = V) : p === "click" ? G.onClick = F : p === "focus" && (G.onFocus = X, G.onBlur = te), /* @__PURE__ */ _(
+  return m === "hover" ? (G.onMouseEnter = H, G.onMouseLeave = V) : m === "click" ? G.onClick = F : m === "focus" && (G.onFocus = X, G.onBlur = te), /* @__PURE__ */ _(
     "div",
     {
       ref: T,
       className: `${w}__trigger`,
       ...G,
-      ...m,
+      ...p,
       children: [
         c,
-        y && /* @__PURE__ */ a(
+        h && /* @__PURE__ */ a(
           "div",
           {
             ref: j,
             className: E,
             style: g,
             role: "tooltip",
-            "aria-hidden": !y,
+            "aria-hidden": !h,
             children: /* @__PURE__ */ a("div", { className: I, children: e })
           }
         )
       ]
     }
   );
-}, We = z(null), ee = () => {
+}, We = U(null), ee = () => {
   const e = q(We);
   if (!e)
     throw new Error("useCommand must be used within a Command provider");
@@ -1580,41 +1595,41 @@ const It = ({
   children: e,
   className: t = "",
   variant: s = "secondary",
-  emptyText: l = "No results found.",
-  inputPlaceholder: n = "Search...",
+  emptyText: n = "No results found.",
+  inputPlaceholder: l = "Search...",
   ...i
 }) => {
-  const [o, c] = x(""), [r, d] = x(null), [u, v] = x(!1), p = [
+  const [d, c] = x(""), [r, o] = x(null), [u, v] = x(!1), m = [
     "clarity-command",
     `clarity-command--${s}`,
     t
   ].filter(Boolean).join(" "), f = Y(() => ({
-    searchTerm: o,
+    searchTerm: d,
     setSearchTerm: c,
     value: r,
-    setValue: d,
+    setValue: o,
     variant: s,
     texts: {
-      empty: l,
-      inputPlaceholder: n
+      empty: n,
+      inputPlaceholder: l
     },
     isOpen: u,
     setIsOpen: v
-  }), [o, r, s, l, n, u]);
-  return /* @__PURE__ */ a(We.Provider, { value: f, children: /* @__PURE__ */ a("div", { className: p, ...i, children: e }) });
+  }), [d, r, s, n, l, u]);
+  return /* @__PURE__ */ a(We.Provider, { value: f, children: /* @__PURE__ */ a("div", { className: m, ...i, children: e }) });
 };
 Fe.displayName = "Command";
 const Ge = ({ placeholder: e = "Search...", variant: t, onClick: s }) => {
-  const { setIsOpen: l, variant: n } = ee(), [i, o] = x(!1);
+  const { setIsOpen: n, variant: l } = ee(), [i, d] = x(!1);
   S(() => {
-    o(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
+    d(/Mac|iPod|iPhone|iPad/.test(navigator.platform));
   }, []);
   const r = [
     "clarity-command-button",
-    `clarity-command-button--${t || n}`
+    `clarity-command-button--${t || l}`
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("button", { className: r, onClick: (u) => {
-    l(!0), s == null || s(u);
+    n(!0), s == null || s(u);
   }, children: [
     /* @__PURE__ */ a("span", { children: e }),
     /* @__PURE__ */ _("kbd", { className: "clarity-command-shortcut", children: [
@@ -1624,25 +1639,25 @@ const Ge = ({ placeholder: e = "Search...", variant: t, onClick: s }) => {
   ] });
 };
 Ge.displayName = "Command.Button";
-const Ue = ({ children: e, ...t }) => {
-  const { isOpen: s, setIsOpen: l, variant: n } = ee();
+const ze = ({ children: e, ...t }) => {
+  const { isOpen: s, setIsOpen: n, variant: l } = ee();
   return S(() => {
-    const i = (o) => {
-      o.key === "k" && (o.metaKey || o.ctrlKey) && (o.preventDefault(), l(!s));
+    const i = (d) => {
+      d.key === "k" && (d.metaKey || d.ctrlKey) && (d.preventDefault(), n(!s));
     };
     return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-  }, [s, l]), /* @__PURE__ */ a(J, { isOpen: s, onClose: () => l(!1), size: "large", closeOnOverlayClick: !0, children: /* @__PURE__ */ a("div", { className: `clarity-command--${n}`, children: e }) });
+  }, [s, n]), /* @__PURE__ */ a(J, { isOpen: s, onClose: () => n(!1), size: "large", closeOnOverlayClick: !0, children: /* @__PURE__ */ a("div", { className: `clarity-command--${l}`, children: e }) });
 };
-Ue.displayName = "Command.Dialog";
-const ze = ({ className: e = "", ...t }) => {
-  const { searchTerm: s, setSearchTerm: l, variant: n, texts: i, isOpen: o } = ee(), c = P(null);
+ze.displayName = "Command.Dialog";
+const Ue = ({ className: e = "", ...t }) => {
+  const { searchTerm: s, setSearchTerm: n, variant: l, texts: i, isOpen: d } = ee(), c = P(null);
   S(() => {
-    var d;
-    o && ((d = c.current) == null || d.focus());
-  }, [o]);
+    var o;
+    d && ((o = c.current) == null || o.focus());
+  }, [d]);
   const r = [
     "clarity-command-input",
-    `clarity-command-input--${n}`,
+    `clarity-command-input--${l}`,
     e
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ a("div", { className: "clarity-command-input__wrapper", children: /* @__PURE__ */ a(
@@ -1651,49 +1666,49 @@ const ze = ({ className: e = "", ...t }) => {
       ref: c,
       className: r,
       value: s,
-      onChange: (d) => l(d.target.value),
+      onChange: (o) => n(o.target.value),
       placeholder: t.placeholder || i.inputPlaceholder,
       ...t
     }
   ) });
 };
-ze.displayName = "Command.Input";
+Ue.displayName = "Command.Input";
 const qe = ({ children: e, className: t = "", ...s }) => {
-  const { searchTerm: l } = ee();
-  let n = !1;
-  const i = (r) => B.Children.toArray(r).map((d) => {
+  const { searchTerm: n } = ee();
+  let l = !1;
+  const i = (r) => B.Children.toArray(r).map((o) => {
     var v;
-    if (!B.isValidElement(d)) return d;
-    const u = d.type.displayName;
+    if (!B.isValidElement(o)) return o;
+    const u = o.type.displayName;
     if (u === "Command.Empty")
       return null;
     if (u === "Command.Item")
-      return (((v = d.props.children) == null ? void 0 : v.toString().toLowerCase()) || "").includes(l.toLowerCase()) ? (n = !0, d) : null;
+      return (((v = o.props.children) == null ? void 0 : v.toString().toLowerCase()) || "").includes(n.toLowerCase()) ? (l = !0, o) : null;
     if (u === "Command.Group") {
-      const p = i(d.props.children);
-      return B.Children.toArray(p).some((m) => B.isValidElement(m) && m.type.displayName === "Command.Item") ? B.cloneElement(d, { ...d.props, children: p }) : null;
+      const m = i(o.props.children);
+      return B.Children.toArray(m).some((p) => B.isValidElement(p) && p.type.displayName === "Command.Item") ? B.cloneElement(o, { ...o.props, children: m }) : null;
     }
-    return d;
-  }).filter(Boolean), o = i(e), c = ["clarity-command-list", t].filter(Boolean).join(" ");
+    return o;
+  }).filter(Boolean), d = i(e), c = ["clarity-command-list", t].filter(Boolean).join(" ");
   return /* @__PURE__ */ _("div", { className: c, ...s, children: [
-    o,
-    !n && /* @__PURE__ */ a(ue, {})
+    d,
+    !l && /* @__PURE__ */ a(ue, {})
   ] });
 };
 qe.displayName = "Command.List";
 const ue = ({ children: e, className: t = "", ...s }) => {
-  const { texts: l } = ee(), n = ["clarity-command-empty", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: n, ...s, children: e || s.emptyText || l.empty });
+  const { texts: n } = ee(), l = ["clarity-command-empty", t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("div", { className: l, ...s, children: e || s.emptyText || n.empty });
 };
 ue.displayName = "Command.Empty";
 const Je = ({ children: e, className: t = "", ...s }) => {
-  const l = ["clarity-command-group", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: l, ...s, children: e });
+  const n = ["clarity-command-group", t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("div", { className: n, ...s, children: e });
 };
 Je.displayName = "Command.Group";
 const Qe = ({ children: e, className: t = "", ...s }) => {
-  const { setValue: l, variant: n } = ee(), i = ["clarity-command-item", `clarity-command-item--${n}`, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("div", { className: i, onClick: () => l((e == null ? void 0 : e.toString()) || ""), ...s, children: e });
+  const { setValue: n, variant: l } = ee(), i = ["clarity-command-item", `clarity-command-item--${l}`, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("div", { className: i, onClick: () => n((e == null ? void 0 : e.toString()) || ""), ...s, children: e });
 };
 Qe.displayName = "Command.Item";
 const Xe = ({ className: e = "", ...t }) => {
@@ -1702,14 +1717,14 @@ const Xe = ({ className: e = "", ...t }) => {
 };
 Xe.displayName = "Command.Separator";
 const Ye = ({ children: e, className: t = "", ...s }) => {
-  const l = ["clarity-command-shortcut", t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("span", { className: l, ...s, children: e });
+  const n = ["clarity-command-shortcut", t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("span", { className: n, ...s, children: e });
 };
 Ye.displayName = "Command.Shortcut";
 const Rt = Object.assign(Fe, {
   Button: Ge,
-  Dialog: Ue,
-  Input: ze,
+  Dialog: ze,
+  Input: Ue,
   List: qe,
   Empty: ue,
   Group: Je,
@@ -1717,85 +1732,85 @@ const Rt = Object.assign(Fe, {
   Separator: Xe,
   Shortcut: Ye
 }), Nt = ({ columns: e, viewMode: t }) => {
-  const s = Array.from({ length: 5 }, (l, n) => n);
+  const s = Array.from({ length: 5 }, (n, l) => l);
   return t === "card" ? /* @__PURE__ */ _("div", { className: "card-view-wrapper is-loading", children: [
     /* @__PURE__ */ a("div", { className: "skeleton card-view-header" }),
-    /* @__PURE__ */ a("div", { className: "card-view-body", children: s.map((l) => /* @__PURE__ */ a("div", { className: "skeleton card-view-row" }, l)) })
+    /* @__PURE__ */ a("div", { className: "card-view-body", children: s.map((n) => /* @__PURE__ */ a("div", { className: "skeleton card-view-row" }, n)) })
   ] }) : /* @__PURE__ */ a("div", { className: "table-wrapper is-loading", children: /* @__PURE__ */ _("table", { children: [
-    /* @__PURE__ */ a("thead", { children: /* @__PURE__ */ a("tr", { className: "table-row", children: e.map((l) => /* @__PURE__ */ a("th", { className: "table-header-cell", children: /* @__PURE__ */ a("div", { className: "skeleton skeleton-text" }) }, l.key)) }) }),
-    /* @__PURE__ */ a("tbody", { children: s.map((l) => /* @__PURE__ */ a("tr", { className: "table-row", children: e.map((n) => /* @__PURE__ */ a("td", { className: "table-cell", children: /* @__PURE__ */ a("div", { className: "skeleton skeleton-text" }) }, n.key)) }, l)) })
+    /* @__PURE__ */ a("thead", { children: /* @__PURE__ */ a("tr", { className: "table-row", children: e.map((n) => /* @__PURE__ */ a("th", { className: "table-header-cell", children: /* @__PURE__ */ a("div", { className: "skeleton skeleton-text" }) }, n.key)) }) }),
+    /* @__PURE__ */ a("tbody", { children: s.map((n) => /* @__PURE__ */ a("tr", { className: "table-row", children: e.map((l) => /* @__PURE__ */ a("td", { className: "table-cell", children: /* @__PURE__ */ a("div", { className: "skeleton skeleton-text" }) }, l.key)) }, n)) })
   ] }) });
 }, Dt = ({
   variant: e = "secondary",
   columns: t,
   data: s,
-  viewMode: l = "table",
-  isScrollable: n = !1,
+  viewMode: n = "table",
+  isScrollable: l = !1,
   isLoading: i = !1
 }) => {
-  const [o, c] = x(null), [r, d] = x("none"), u = (m) => {
-    m.sortable && (o === m.key ? d((y) => y === "asc" ? "desc" : y === "desc" ? "none" : "asc") : (c(m.key), d("asc")));
-  }, v = Y(() => r === "none" || !o ? s : [...s].sort((m, y) => {
-    const h = m[o], N = y[o];
-    return h < N ? r === "asc" ? -1 : 1 : h > N ? r === "asc" ? 1 : -1 : 0;
-  }), [s, o, r]), p = (m) => m.sortable ? o !== m.key || r === "none" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↕" }) : r === "asc" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ a("span", { className: "sort-icon", children: "↓" }) : null;
+  const [d, c] = x(null), [r, o] = x("none"), u = (p) => {
+    p.sortable && (d === p.key ? o((h) => h === "asc" ? "desc" : h === "desc" ? "none" : "asc") : (c(p.key), o("asc")));
+  }, v = Y(() => r === "none" || !d ? s : [...s].sort((p, h) => {
+    const y = p[d], N = h[d];
+    return y < N ? r === "asc" ? -1 : 1 : y > N ? r === "asc" ? 1 : -1 : 0;
+  }), [s, d, r]), m = (p) => p.sortable ? d !== p.key || r === "none" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↕" }) : r === "asc" ? /* @__PURE__ */ a("span", { className: "sort-icon", children: "↑" }) : /* @__PURE__ */ a("span", { className: "sort-icon", children: "↓" }) : null;
   if (i)
-    return /* @__PURE__ */ a(Nt, { columns: t, viewMode: l });
-  const f = `table-variant-${e} ${n ? "is-scrollable" : ""}`;
-  return l === "card" ? /* @__PURE__ */ _("div", { className: `card-view-wrapper ${f}`, children: [
-    /* @__PURE__ */ a("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((m) => /* @__PURE__ */ _(
+    return /* @__PURE__ */ a(Nt, { columns: t, viewMode: n });
+  const f = `table-variant-${e} ${l ? "is-scrollable" : ""}`;
+  return n === "card" ? /* @__PURE__ */ _("div", { className: `card-view-wrapper ${f}`, children: [
+    /* @__PURE__ */ a("div", { className: `card-view-header table-header-cell-${e}`, children: t.map((p) => /* @__PURE__ */ _(
       "div",
       {
-        className: `card-view-header-cell ${m.sortable ? "sortable" : ""}`,
-        onClick: () => u(m),
-        style: { minWidth: m.minWidth },
+        className: `card-view-header-cell ${p.sortable ? "sortable" : ""}`,
+        onClick: () => u(p),
+        style: { minWidth: p.minWidth },
         children: [
-          m.header,
-          p(m)
+          p.header,
+          m(p)
         ]
       },
-      m.key
+      p.key
     )) }),
-    /* @__PURE__ */ a("div", { className: "card-view-body", children: v.map((m, y) => /* @__PURE__ */ a("div", { className: `card-view-row table-row-${e}`, children: t.map((h) => /* @__PURE__ */ a("div", { className: `card-view-cell ${h.align ? `table-cell-align-${h.align}` : ""}`, style: { minWidth: h.minWidth }, children: h.render ? h.render(m) : m[h.key] }, h.key)) }, y)) })
+    /* @__PURE__ */ a("div", { className: "card-view-body", children: v.map((p, h) => /* @__PURE__ */ a("div", { className: `card-view-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ a("div", { className: `card-view-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(p) : p[y.key] }, y.key)) }, h)) })
   ] }) : /* @__PURE__ */ a("div", { className: `table-wrapper ${f}`, children: /* @__PURE__ */ _("table", { children: [
-    /* @__PURE__ */ a("thead", { className: "table-header", children: /* @__PURE__ */ a("tr", { className: "table-row", children: t.map((m) => /* @__PURE__ */ _(
+    /* @__PURE__ */ a("thead", { className: "table-header", children: /* @__PURE__ */ a("tr", { className: "table-row", children: t.map((p) => /* @__PURE__ */ _(
       "th",
       {
-        className: `table-header-cell ${m.sortable ? "sortable" : ""} table-header-cell-${e}`,
-        onClick: () => u(m),
-        style: { minWidth: m.minWidth },
+        className: `table-header-cell ${p.sortable ? "sortable" : ""} table-header-cell-${e}`,
+        onClick: () => u(p),
+        style: { minWidth: p.minWidth },
         children: [
-          m.header,
-          p(m)
+          p.header,
+          m(p)
         ]
       },
-      m.key
+      p.key
     )) }) }),
-    /* @__PURE__ */ a("tbody", { children: v.map((m, y) => /* @__PURE__ */ a("tr", { className: `table-row table-row-${e}`, children: t.map((h) => /* @__PURE__ */ a("td", { className: `table-cell ${h.align ? `table-cell-align-${h.align}` : ""}`, style: { minWidth: h.minWidth }, children: h.render ? h.render(m) : m[h.key] }, h.key)) }, y)) })
+    /* @__PURE__ */ a("tbody", { children: v.map((p, h) => /* @__PURE__ */ a("tr", { className: `table-row table-row-${e}`, children: t.map((y) => /* @__PURE__ */ a("td", { className: `table-cell ${y.align ? `table-cell-align-${y.align}` : ""}`, style: { minWidth: y.minWidth }, children: y.render ? y.render(p) : p[y.key] }, y.key)) }, h)) })
   ] }) });
 }, At = ({
   variant: e = "primary",
   product: t,
   tone: s,
-  size: l = "medium",
-  color: n,
+  size: n = "medium",
+  color: l,
   className: i = "",
-  "aria-label": o = "Carregando...",
+  "aria-label": d = "Carregando...",
   ...c
 }) => {
-  const r = "clarity-spinner", v = n ? `${r}--custom` : t && s ? `${r}--custom` : `${r}--${e}`, p = [
+  const r = "clarity-spinner", v = l ? `${r}--custom` : t && s ? `${r}--custom` : `${r}--${e}`, m = [
     r,
-    `${r}--${l}`,
+    `${r}--${n}`,
     v,
     i
   ].filter(Boolean).join(" "), f = {};
-  return n ? f["--spinner-color"] = n : t && s && (f["--spinner-color"] = `var(--clarity-${t}-${s})`), /* @__PURE__ */ a(
+  return l ? f["--spinner-color"] = l : t && s && (f["--spinner-color"] = `var(--clarity-${t}-${s})`), /* @__PURE__ */ a(
     "div",
     {
-      className: p,
+      className: m,
       style: f,
       role: "status",
-      "aria-label": o,
+      "aria-label": d,
       ...c,
       children: /* @__PURE__ */ a("div", { className: `${r}__container`, children: /* @__PURE__ */ a(
         "svg",
@@ -1822,47 +1837,47 @@ const Rt = Object.assign(Fe, {
   className: e = "",
   noGutters: t,
   justify: s,
-  align: l,
-  children: n,
+  align: n,
+  children: l,
   as: i = "div",
-  ...o
+  ...d
 }) => {
   const c = [
     "clarity-row",
     t ? "clarity-row--no-gutters" : "",
     s ? `clarity-row--justify-${s}` : "",
-    l ? `clarity-row--align-${l}` : "",
+    n ? `clarity-row--align-${n}` : "",
     e
   ].filter(Boolean).join(" ");
-  return B.createElement(i, { className: c, ...o }, n);
+  return B.createElement(i, { className: c, ...d }, l);
 };
 bt.displayName = "Row";
 const Ct = (e) => `${e / 12 * 100}%`, _t = (e) => `${e / 12 * 100}%`, wt = ({
   className: e = "",
   xs: t,
   sm: s,
-  md: l,
-  lg: n,
+  md: n,
+  lg: l,
   xl: i,
-  xxl: o,
+  xxl: d,
   offset: c,
   children: r,
-  as: d = "div",
+  as: o = "div",
   style: u,
   ...v
 }) => {
-  const p = { ...u }, f = (h, N) => {
+  const m = { ...u }, f = (y, N) => {
     if (N === void 0) return;
-    const C = `--clarity-col-width-${h}`;
-    p[C] = typeof N == "number" ? Ct(N) : "auto";
-  }, m = (h, N) => {
+    const C = `--clarity-col-width-${y}`;
+    m[C] = typeof N == "number" ? Ct(N) : "auto";
+  }, p = (y, N) => {
     if (N === void 0) return;
-    const C = `--clarity-col-offset-${h}`;
-    p[C] = _t(N);
+    const C = `--clarity-col-offset-${y}`;
+    m[C] = _t(N);
   };
-  f("xs", t), f("sm", s), f("md", l), f("lg", n), f("xl", i), f("xxl", o), 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 y = ["clarity-col", e].filter(Boolean).join(" ");
-  return B.createElement(d, { className: y, style: p, ...v }, r);
+  f("xs", t), f("sm", s), f("md", n), f("lg", l), f("xl", i), f("xxl", d), p("xs", c == null ? void 0 : c.xs), p("sm", c == null ? void 0 : c.sm), p("md", c == null ? void 0 : c.md), p("lg", c == null ? void 0 : c.lg), p("xl", c == null ? void 0 : c.xl), p("xxl", c == null ? void 0 : c.xxl);
+  const h = ["clarity-col", e].filter(Boolean).join(" ");
+  return B.createElement(o, { className: h, style: m, ...v }, r);
 };
 wt.displayName = "Col";
 const Pt = {
@@ -1944,12 +1959,12 @@ const Pt = {
   }
 }, Ht = (...e) => e.filter(Boolean).join(" "), Wt = () => Math.random().toString(36).substr(2, 9);
 export {
-  St as Accordion,
+  Ot as Accordion,
   xt as Badge,
   Tt as Button,
   Bt as ButtonGroup,
   Lt as ButtonIcon,
-  Ot as ButtonLink,
+  St as ButtonLink,
   rt as CheckInput,
   wt as Col,
   Rt as Command,
@@ -1958,10 +1973,10 @@ export {
   st as Input,
   ct as InputSwitch,
   J as Modal,
-  nt as MultiSelect,
+  lt as MultiSelect,
   K as Offcanvas,
   bt as Row,
-  lt as Select,
+  nt as Select,
   At as Spinner,
   Dt as Table,
   me as Tabs,