@okam/stack-ui 1.7.0 → 1.8.0

package/index.mjs

@@ -1,6 +1,6 @@
 import * as Ss from "react";
 import I, { useMemo as L, useRef as A, memo as Rn, lazy as Ts, Suspense as Es, useState as H, useEffect as W, useCallback as _, useContext as De } from "react";
-import { jsx as $, jsxs as V, Fragment as Rs } from "react/jsx-runtime";
+import { jsx as $, jsxs as z, Fragment as Rs } from "react/jsx-runtime";
 import { tv as O } from "tailwind-variants";
 import { get as ks } from "radash";
 import { useLink as Cs, useButton as Pa, useOverlay as kn, useModal as Cn, useDialog as Ja, FocusScope as Mn, mergeProps as Nn, DismissButton as wa, useOverlayTrigger as Ms, useOverlayPosition as Ns, OverlayContainer as Is, useIsSSR as Ls, useListBox as Fs, useOption as As, usePopover as Os, Overlay as Bs, useSelect as Vs, HiddenSelect as zs, useTextField as In, useLocale as Ks } from "react-aria";
@@ -656,16 +656,16 @@ const ec = (e) => ({ children: a }) => /* @__PURE__ */ $(Xs, { brandTheme: e, ch
   return /* @__PURE__ */ $(Es, { fallback: /* @__PURE__ */ $(Kn, { className: "overflow-visible pointer-events-none" }), children: /* @__PURE__ */ $(r, { ...a, className: "overflow-visible pointer-events-none", ...e }) });
 }, Ee = (e) => {
   const { icon: t, as: a = "span", tokens: r, customTheme: n, themeName: o = "icon", children: i, ...l } = e, s = F(o, r, n);
-  return typeof t != "string" ? /* @__PURE__ */ V(a, { ...l, className: s, children: [
+  return typeof t != "string" ? /* @__PURE__ */ z(a, { ...l, className: s, children: [
     i,
     t
-  ] }) : /* @__PURE__ */ V(a, { className: s, children: [
+  ] }) : /* @__PURE__ */ z(a, { className: s, children: [
     i,
     /* @__PURE__ */ $(_c, { icon: t, ...l })
   ] });
 }, up = (e) => {
   const { customTheme: t, themeName: a = "accordion", id: r, tokens: n, title: o, ariaLabel: i, onClick: l, icon: s, children: c } = e, [d, p] = H(!1), u = F(`${a}.container`, { ...n, isOpen: d }, t), m = F(`${a}.title`, { ...n, isOpen: d }, t), h = F(`${a}.icon`, { ...n, isOpen: d }, t), y = F(`${a}.region`, { ...n, isOpen: d }, t), P = F(`${a}.content`, { ...n, isOpen: d }, t);
-  return /* @__PURE__ */ V(
+  return /* @__PURE__ */ z(
     "div",
     {
       className: u,
@@ -674,7 +674,7 @@ const ec = (e) => ({ children: a }) => /* @__PURE__ */ $(Xs, { brandTheme: e, ch
       "aria-expanded": d,
       "aria-controls": `accordion-content-${r}`,
       children: [
-        /* @__PURE__ */ V(
+        /* @__PURE__ */ z(
           Ge,
           {
             themeName: `${a}.button`,
@@ -741,7 +741,7 @@ const ec = (e) => ({ children: a }) => /* @__PURE__ */ $(Xs, { brandTheme: e, ch
   } = e, [d, p] = H(!1), u = F(`${l}.container`, s, i), m = () => {
     p(!d);
   };
-  return /* @__PURE__ */ V("div", { className: u, children: [
+  return /* @__PURE__ */ z("div", { className: u, children: [
     /* @__PURE__ */ $(
       Ge,
       {
@@ -3389,7 +3389,7 @@ function br(e) {
   }), S = fe((f) => {
     let R = y.current;
     R.isPressed && (R.isOverTarget && T(he(R.target, f), R.pointerType, !1), R.isPressed = !1, R.isOverTarget = !1, R.activePointerId = null, R.pointerType = null, w(), d || Tt(R.target));
-  }), z = fe((f) => {
+  }), V = fe((f) => {
     c && S(f);
   }), C = L(() => {
     let f = y.current, R = {
@@ -3439,7 +3439,7 @@ function br(e) {
         !v.currentTarget.contains(v.target) || f.pointerType === "virtual" || v.button === 0 && ze(v, v.currentTarget) && x(v, f.pointerType || v.pointerType);
       };
       let b = (v) => {
-        v.pointerId === f.activePointerId && (ze(v, f.target) ? f.isOverTarget || (f.isOverTarget = !0, g(he(f.target, v), f.pointerType)) : f.isOverTarget && (f.isOverTarget = !1, T(he(f.target, v), f.pointerType, !1), z(v)));
+        v.pointerId === f.activePointerId && (ze(v, f.target) ? f.isOverTarget || (f.isOverTarget = !0, g(he(f.target, v), f.pointerType)) : f.isOverTarget && (f.isOverTarget = !1, T(he(f.target, v), f.pointerType, !1), V(v)));
       }, B = (v) => {
         v.pointerId === f.activePointerId && f.isPressed && v.button === 0 && (ze(v, f.target) ? T(he(f.target, v), f.pointerType) : f.isOverTarget && T(he(f.target, v), f.pointerType, !1), f.isPressed = !1, f.isOverTarget = !1, f.activePointerId = null, f.pointerType = null, w(), d || Tt(f.target));
       }, D = (v) => {
@@ -3466,7 +3466,7 @@ function br(e) {
         if (!D.currentTarget.contains(D.target))
           return;
         let v = !0;
-        f.isPressed && !f.ignoreEmulatedMouseEvents && (f.isOverTarget = !1, v = T(D, f.pointerType, !1), z(D)), v && D.stopPropagation();
+        f.isPressed && !f.ignoreEmulatedMouseEvents && (f.isOverTarget = !1, v = T(D, f.pointerType, !1), V(D)), v && D.stopPropagation();
       }, R.onMouseUp = (D) => {
         D.currentTarget.contains(D.target) && !f.ignoreEmulatedMouseEvents && D.button === 0 && x(D, f.pointerType);
       };
@@ -3494,7 +3494,7 @@ function br(e) {
           return;
         }
         let v = ln(D.nativeEvent, f.activePointerId), K = !0;
-        v && ze(v, D.currentTarget) ? f.isOverTarget || (f.isOverTarget = !0, K = g(D, f.pointerType)) : f.isOverTarget && (f.isOverTarget = !1, K = T(D, f.pointerType, !1), z(D)), K && D.stopPropagation();
+        v && ze(v, D.currentTarget) ? f.isOverTarget || (f.isOverTarget = !0, K = g(D, f.pointerType)) : f.isOverTarget && (f.isOverTarget = !1, K = T(D, f.pointerType, !1), V(D)), K && D.stopPropagation();
       }, R.onTouchEnd = (D) => {
         if (!D.currentTarget.contains(D.target))
           return;
@@ -3528,7 +3528,7 @@ function br(e) {
     w,
     d,
     S,
-    z,
+    V,
     T,
     g,
     x
@@ -4528,15 +4528,15 @@ function bn(e, t, a, r, n, o) {
   return i === l ? Math.max(0, a[l] - e[l] - e.scroll[l] + t[l] - r[l] - r[Gt[l]] - n) : Math.max(0, e[s] + e[l] + e.scroll[l] - t[l] - a[l] - a[s] - r[l] - r[Gt[l]] - n);
 }
 function Mf(e, t, a, r, n, o, i, l, s, c, d, p, u, m, h) {
-  let y = $n(e), { size: P, crossAxis: w, crossSize: g, placement: T, crossPlacement: x } = y, S = ya(t, l, a, y, c, d, s, p, m, h), z = c, C = bn(l, s, t, n, o + c, y);
+  let y = $n(e), { size: P, crossAxis: w, crossSize: g, placement: T, crossPlacement: x } = y, S = ya(t, l, a, y, c, d, s, p, m, h), V = c, C = bn(l, s, t, n, o + c, y);
   if (i && r[P] > C) {
     let M = $n(`${Gt[T]} ${x}`), U = ya(t, l, a, M, c, d, s, p, m, h);
-    bn(l, s, t, n, o + c, M) > C && (y = M, S = U, z = c);
+    bn(l, s, t, n, o + c, M) > C && (y = M, S = U, V = c);
   }
   let f = hn(w, S[w], a[g], l, o);
   S[w] += f;
   let R = Cf(S, l, s, t, n, o);
-  u && u < R && (R = u), a.height = Math.min(a.height, R), S = ya(t, l, a, y, z, d, s, p, m, h), f = hn(w, S[w], a[g], l, o), S[w] += f;
+  u && u < R && (R = u), a.height = Math.min(a.height, R), S = ya(t, l, a, y, V, d, s, p, m, h), f = hn(w, S[w], a[g], l, o), S[w] += f;
   let E = {}, b = t[w] + 0.5 * t[g] - a[w];
   const B = m / 2 + h, D = a[g] - m / 2 - h, v = t[w] - a[w] + m / 2, K = t[w] + t[g] - a[w] - m / 2, k = Sa(b, v, K);
   return E[w] = Sa(k, B, D), {
@@ -4557,8 +4557,8 @@ function Nf(e) {
   }
   let g = Ye(r), T = kf(r);
   g.width += T.left + T.right, g.height += T.top + T.bottom;
-  let x = Rf(n), S = Ef(l), z = l.tagName === "BODY" ? Ye(m) : yn(m, l);
-  return Mf(t, w, g, x, T, o, i, S, z, s, c, P, d, p, u);
+  let x = Rf(n), S = Ef(l), V = l.tagName === "BODY" ? Ye(m) : yn(m, l);
+  return Mf(t, w, g, x, T, o, i, S, V, s, c, P, d, p, u);
 }
 function Ye(e) {
   let { top: t, left: a, width: r, height: n } = e.getBoundingClientRect(), { scrollTop: o, scrollLeft: i, clientTop: l, clientLeft: s } = document.documentElement;
@@ -4681,7 +4681,7 @@ function Af(e) {
   }, [
     x
   ]);
-  let z = _(() => {
+  let V = _(() => {
     S.current || h();
   }, [
     h,
@@ -4690,7 +4690,7 @@ function Af(e) {
   return Ff({
     triggerRef: r,
     isOpen: m,
-    onClose: h && z
+    onClose: h && V
   }), {
     overlayProps: {
       style: {
@@ -5231,7 +5231,7 @@ const Qf = "fixed", Xf = ({ isVisible: e, children: t }) => qa(e, {
   }, [n.isOpen]), t ? /* @__PURE__ */ $(Yf, { children: /* @__PURE__ */ $(i, { isVisible: n.isOpen, children: /* @__PURE__ */ $(em, { isOpen: n.isOpen, onClose: l, isDismissable: !0, children: r }) }) }) : null;
 }, tm = (e) => {
   const { children: t, closeBtnRender: a, themeName: r = "sidePanel", tokens: n, customTheme: o } = e, i = F(`${r}.wrapper`, n, o), l = F(`${r}.container`, n, o), s = F(`${r}.innerContainer`, n, o), { overlayState: c } = Gc();
-  return /* @__PURE__ */ $(xi, { state: c, transitionComponent: Xc, children: /* @__PURE__ */ V(Us, { className: i, children: [
+  return /* @__PURE__ */ $(xi, { state: c, transitionComponent: Xc, children: /* @__PURE__ */ z(Us, { className: i, children: [
     a && a(),
     /* @__PURE__ */ $(qc, { isVisible: c.isOpen, children: /* @__PURE__ */ $("div", { className: l, children: /* @__PURE__ */ $("div", { className: s, children: t }) }) })
   ] }) });
@@ -5251,12 +5251,12 @@ const Qf = "fixed", Xf = ({ isVisible: e, children: t }) => qa(e, {
     n,
     o
   ), y = F(`${l}.container`, s, c);
-  return /* @__PURE__ */ V("div", { children: [
-    /* @__PURE__ */ V("div", { ref: p, ...u, ...r ? { tabIndex: -1 } : {}, children: [
+  return /* @__PURE__ */ z("div", { children: [
+    /* @__PURE__ */ z("div", { ref: p, ...u, ...r ? { tabIndex: -1 } : {}, children: [
       i && /* @__PURE__ */ $(Te, { themeName: `${l}.label`, tokens: { size: "footnotes" }, children: i }),
       a
     ] }),
-    /* @__PURE__ */ $(xi, { onCloseCallBack: o, state: d, children: /* @__PURE__ */ V("div", { children: [
+    /* @__PURE__ */ $(xi, { onCloseCallBack: o, state: d, children: /* @__PURE__ */ z("div", { children: [
       /* @__PURE__ */ $(
         tr,
         {
@@ -5280,7 +5280,7 @@ const Qf = "fixed", Xf = ({ isVisible: e, children: t }) => qa(e, {
     },
     t
   ), { modalProps: l } = Cn(), { dialogProps: s } = Ja({}, t);
-  return /* @__PURE__ */ $(Mn, { contain: !0, restoreFocus: !0, children: /* @__PURE__ */ V(
+  return /* @__PURE__ */ $(Mn, { contain: !0, restoreFocus: !0, children: /* @__PURE__ */ z(
     "div",
     {
       ...Nn(i, l, s),
@@ -5311,7 +5311,7 @@ function $p({
     offset: r,
     isOpen: n.isOpen
   }), { onPress: d, ...p } = l;
-  return /* @__PURE__ */ V(Rs, { children: [
+  return /* @__PURE__ */ z(Rs, { children: [
     /* @__PURE__ */ $(tr, { handlePress: d, ...t, ...p, ref: o, children: "Open Popover" }),
     n.isOpen && /* @__PURE__ */ $(Is, { children: /* @__PURE__ */ $(am, { ...s, ...c, ref: i, isOpen: n.isOpen, onClose: n.close, children: e }) })
   ] });
@@ -5328,7 +5328,7 @@ const bp = ({ content: e, themeName: t = "wysiwyg", ...a }) => /* @__PURE__ */ $
       })
     }
   }
-), rm = (e) => /* @__PURE__ */ V("svg", { width: 24, height: 24, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...e, children: [
+), rm = (e) => /* @__PURE__ */ z("svg", { width: 24, height: 24, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...e, children: [
   /* @__PURE__ */ $("g", { children: /* @__PURE__ */ $("path", { d: "M23.92 12.38a1 1 0 0 0 0-.76 1 1 0 0 0-.21-.33l-8-8a1.003 1.003 0 1 0-1.42 1.42l6.3 6.29H1a1 1 0 1 0 0 2h19.59l-6.3 6.29a1 1 0 0 0 0 1.42 1.002 1.002 0 0 0 1.42 0l8-8c.091-.095.162-.207.21-.33Z" }) }),
   /* @__PURE__ */ $("defs", { children: /* @__PURE__ */ $("clipPath", { children: /* @__PURE__ */ $("path", { fill: "currentColor", d: "M0 0h24v24H0z" }) }) })
 ] }), nm = Rn(rm, Zs), om = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -5359,9 +5359,9 @@ const bp = ({ content: e, themeName: t = "wysiwyg", ...a }) => /* @__PURE__ */ $
     },
     r
   );
-  return /* @__PURE__ */ V(Bs, { children: [
+  return /* @__PURE__ */ z(Bs, { children: [
     /* @__PURE__ */ $("div", { ...s, style: { position: "fixed", inset: 0 } }),
-    /* @__PURE__ */ V(er, { themeName: o, ...i, ...l, as: "div", ref: a, children: [
+    /* @__PURE__ */ z(er, { themeName: o, ...i, ...l, as: "div", ref: a, children: [
       /* @__PURE__ */ $(wa, { onDismiss: r.close }),
       n,
       /* @__PURE__ */ $(wa, { onDismiss: r.close })
@@ -5382,40 +5382,41 @@ const bp = ({ content: e, themeName: t = "wysiwyg", ...a }) => /* @__PURE__ */ $
     onSelectionChange: p,
     defaultValue: u,
     value: m,
-    ...h
-  } = e, y = A(null), P = Hs({
-    ...h,
+    icon: h,
+    ...y
+  } = e, P = A(null), w = Hs({
+    ...y,
     selectedKey: m,
     defaultSelectedKey: u,
     onSelectionChange: p
-  }), { triggerProps: w, menuProps: g, labelProps: T } = Vs({ ...h }, P, y), x = F(`${l}.wrapper`, s, c), S = F(`${l}.container`, s, c);
-  return /* @__PURE__ */ V("div", { className: x, children: [
-    d && /* @__PURE__ */ $(Te, { ...T, as: "label", themeName: `${l}.label`, children: d }),
-    /* @__PURE__ */ $(zs, { ...n, state: P, triggerRef: y, name: t, isDisabled: !0 }),
-    /* @__PURE__ */ V("div", { className: S, children: [
-      /* @__PURE__ */ V(
+  }), { triggerProps: g, menuProps: T, labelProps: x } = Vs({ ...y }, w, P), S = F(`${l}.wrapper`, s, c), V = F(`${l}.container`, s, c);
+  return /* @__PURE__ */ z("div", { className: S, children: [
+    d && /* @__PURE__ */ $(Te, { ...x, as: "label", themeName: `${l}.label`, children: d }),
+    /* @__PURE__ */ $(zs, { ...n, state: w, triggerRef: P, name: t, isDisabled: !0 }),
+    /* @__PURE__ */ z("div", { className: V, children: [
+      /* @__PURE__ */ z(
         tr,
         {
-          ...w,
-          ref: y,
+          ...g,
+          ref: P,
           disabled: r,
           themeName: `${l}.button`,
           tokens: { ...s, intent: o ? "error" : "default" },
           children: [
-            P.selectedItem ? P.selectedItem.rendered : a,
-            /* @__PURE__ */ $(Ee, { icon: "ArrowDown" })
+            w.selectedItem ? w.selectedItem.rendered : a,
+            /* @__PURE__ */ $(Ee, { icon: h ?? "ArrowDown" })
           ]
         }
       ),
-      P.isOpen && y.current && /* @__PURE__ */ $(
+      w.isOpen && P.current && /* @__PURE__ */ $(
         sm,
         {
-          state: P,
-          tokens: { width: `${y.current?.offsetWidth}` },
-          triggerRef: y,
+          state: w,
+          tokens: { width: `${P.current?.offsetWidth}` },
+          triggerRef: P,
           placement: "bottom",
           themeName: `${l}.popover`,
-          children: /* @__PURE__ */ $(lm, { ...g, themeName: l, state: P })
+          children: /* @__PURE__ */ $(lm, { ...T, themeName: l, state: w })
         }
       ),
       o && /* @__PURE__ */ $(Te, { tokens: { ...s, isError: o }, themeName: `${l}.errorMessage`, children: i })
@@ -5546,8 +5547,8 @@ const vp = (e) => {
     tokens: s,
     customTheme: c
   } = e, d = fm(e), p = A(null), { inputProps: u } = mm(e, d, p), { focusProps: m, isFocusVisible: h } = xr(), y = { ...s, selected: d.isSelected, isDisabled: r, isError: n, isFocusVisible: h }, P = F(`${l}.label`, y, c), w = F(`${l}.checkBox`, y, c), g = F(`${l}.checkMark`, y, c);
-  return /* @__PURE__ */ V("div", { children: [
-    /* @__PURE__ */ V("label", { htmlFor: t, className: P, children: [
+  return /* @__PURE__ */ z("div", { children: [
+    /* @__PURE__ */ z("label", { htmlFor: t, className: P, children: [
       /* @__PURE__ */ $(zo, { children: /* @__PURE__ */ $("input", { type: "checkbox", ref: p, "aria-label": i, ...Nn(m, u) }) }),
       /* @__PURE__ */ $(Pr, { focusRingClass: "focus-ring", children: /* @__PURE__ */ $("div", { className: w, children: /* @__PURE__ */ $("div", { className: g }) }) }),
       /* @__PURE__ */ $("span", { children: a })
@@ -5571,9 +5572,9 @@ const vp = (e) => {
     themeName: m = "textarea",
     tokens: h,
     customTheme: y
-  } = e, P = A(null), { errorMessageProps: w, inputProps: g, labelProps: T } = In(e, P), x = { ...h, isDisabled: i, isError: l != null }, S = F(`${m}.wrapper`, x, y), z = F(`${m}.input`, x, y), C = F(`${m}.label`, x, y), f = F(`${m}.container`, x, y);
-  return /* @__PURE__ */ V("div", { children: [
-    /* @__PURE__ */ V("div", { className: S, "aria-disabled": i, children: [
+  } = e, P = A(null), { errorMessageProps: w, inputProps: g, labelProps: T } = In(e, P), x = { ...h, isDisabled: i, isError: l != null }, S = F(`${m}.wrapper`, x, y), V = F(`${m}.input`, x, y), C = F(`${m}.label`, x, y), f = F(`${m}.container`, x, y);
+  return /* @__PURE__ */ z("div", { children: [
+    /* @__PURE__ */ z("div", { className: S, "aria-disabled": i, children: [
       a && /* @__PURE__ */ $("label", { className: C, ...T, children: a }),
       /* @__PURE__ */ $("div", { className: f, children: /* @__PURE__ */ $(Pr, { focusRingClass: "focus-ring", children: /* @__PURE__ */ $(
         "textarea",
@@ -5581,7 +5582,7 @@ const vp = (e) => {
           ref: (R) => {
             u?.(R), P.current = R;
           },
-          className: z,
+          className: V,
           placeholder: n,
           disabled: i,
           required: o,
@@ -5615,12 +5616,12 @@ const vp = (e) => {
     themeName: m = "textInput",
     tokens: h,
     customTheme: y
-  } = e, P = A(null), { errorMessageProps: w, inputProps: g, labelProps: T } = In(e, P), x = { ...h, isDisabled: n, isError: o != null }, S = F(`${m}.wrapper`, x, y), z = F(`${m}.label`, x, y), C = F(`${m}.input`, x, y), f = F(`${m}.container`, x, y);
-  return /* @__PURE__ */ V("div", { children: [
-    /* @__PURE__ */ V("div", { "aria-disabled": n, className: S, children: [
+  } = e, P = A(null), { errorMessageProps: w, inputProps: g, labelProps: T } = In(e, P), x = { ...h, isDisabled: n, isError: o != null }, S = F(`${m}.wrapper`, x, y), V = F(`${m}.label`, x, y), C = F(`${m}.input`, x, y), f = F(`${m}.container`, x, y);
+  return /* @__PURE__ */ z("div", { children: [
+    /* @__PURE__ */ z("div", { "aria-disabled": n, className: S, children: [
       a && // eslint-disable-next-line jsx-a11y/label-has-associated-control
-      /* @__PURE__ */ $("label", { className: z, ...T, children: a }),
-      /* @__PURE__ */ V("div", { className: f, children: [
+      /* @__PURE__ */ $("label", { className: V, ...T, children: a }),
+      /* @__PURE__ */ z("div", { className: f, children: [
         u,
         /* @__PURE__ */ $(Pr, { focusRingClass: "focus-ring", children: /* @__PURE__ */ $(
           "input",
@@ -5922,9 +5923,9 @@ function ym(e) {
     P(), c(), t.current = window.setTimeout(() => {
       (isNaN(o) || isNaN(a) || a < o) && S(60);
     }, E);
-  }), z = fe((E) => {
+  }), V = fe((E) => {
     P(), p(), t.current = window.setTimeout(() => {
-      (isNaN(n) || isNaN(a) || a > n) && z(60);
+      (isNaN(n) || isNaN(a) || a > n) && V(60);
     }, E);
   });
   let C = (E) => {
@@ -5956,7 +5957,7 @@ function ym(e) {
     },
     decrementButtonProps: {
       onPressStart: () => {
-        z(400), f(window, "contextmenu", C);
+        V(400), f(window, "contextmenu", C);
       },
       onPressEnd: () => {
         P(), R();
@@ -6958,7 +6959,7 @@ function wm(e, t, a) {
     return M.setHours(12), T.formatToParts(M).find((U) => U.type === "dayPeriod").value;
   }, [
     T
-  ]), z = me({
+  ]), V = me({
     year: "numeric",
     era: "narrow",
     timeZone: "UTC"
@@ -6971,7 +6972,7 @@ function wm(e, t, a) {
         month: 1,
         day: 1,
         era: ee
-      }).toDate("UTC"), J = z.formatToParts(ne).find((ae) => ae.type === "era").value;
+      }).toDate("UTC"), J = V.formatToParts(ne).find((ae) => ae.type === "era").value;
       return {
         era: ee,
         formatted: J
@@ -6982,7 +6983,7 @@ function wm(e, t, a) {
         ee.formatted = ee.formatted.slice(j);
     return U;
   }, [
-    z,
+    V,
     t.calendar,
     e.type
   ]), f = (M) => {
@@ -7227,14 +7228,14 @@ function Rm(e) {
     formatValue(x, S) {
       if (!s)
         return "";
-      let z = Za(S, {
+      let V = Za(S, {
         granularity: i,
         timeZone: l,
         hideTimeZone: e.hideTimeZone,
         hourCycle: e.hourCycle,
         showEra: r.calendar.identifier === "gregory" && r.era === "BC"
       });
-      return new _e(x, z).format(s);
+      return new _e(x, V).format(s);
     }
   };
 }
@@ -7667,11 +7668,11 @@ function Nm(e) {
     c,
     r,
     T
-  ]), z = L(() => Za({}, S), [
+  ]), V = L(() => Za({}, S), [
     S
-  ]), C = L(() => new _e(t, z), [
+  ]), C = L(() => new _e(t, V), [
     t,
-    z
+    V
   ]), f = L(() => C.resolvedOptions(), [
     C
   ]), R = L(() => C.formatToParts(/* @__PURE__ */ new Date()).filter((N) => Nt[N.type]).reduce((N, J) => (N[J.type] = !0, N), {}), [
@@ -8731,7 +8732,7 @@ function zm(e, t, a) {
     i
   ]), w = "";
   "anchorDate" in t && d && !t.isReadOnly && u && (t.anchorDate ? w = l.format("finishRangeSelectionPrompt") : w = l.format("startRangeSelectionPrompt"));
-  let g = rr(w), T = A(!1), x = A(!1), S = A(null), { pressProps: z, isPressed: C } = br({
+  let g = rr(w), T = A(!1), x = A(!1), S = A(null), { pressProps: V, isPressed: C } = br({
     // When dragging to select a range, we don't want dragging over the original anchor
     // again to trigger onPressStart. Cancel presses immediately when the pointer exits.
     shouldCancelOnPointerExit: "anchorDate" in t && !!t.anchorDate,
@@ -8805,7 +8806,7 @@ function zm(e, t, a) {
       "aria-selected": c || null,
       "aria-invalid": m || null
     },
-    buttonProps: te(z, {
+    buttonProps: te(V, {
       onFocus() {
         n || t.setFocusedDate(r);
       },
@@ -8914,7 +8915,7 @@ function Um(e) {
       default:
         return Tn(g, o, r, i, l);
     }
-  }), [z, C] = H(e.autoFocus || !1), f = L(() => {
+  }), [V, C] = H(e.autoFocus || !1), f = L(() => {
     let k = {
       ...o
     };
@@ -9026,7 +9027,7 @@ function Um(e) {
     selectDate(k) {
       B(k);
     },
-    isFocused: z,
+    isFocused: V,
     setFocused: C,
     isInvalid(k) {
       return Da(k, i, l);
@@ -9035,7 +9036,7 @@ function Um(e) {
       return h != null && Q(k, h) && !this.isCellDisabled(k) && !this.isCellUnavailable(k);
     },
     isCellFocused(k) {
-      return z && g && Q(k, g);
+      return V && g && Q(k, g);
     },
     isCellDisabled(k) {
       return e.isDisabled || k.compare(x) < 0 || k.compare(f) > 0 || this.isInvalid(k, i, l);
@@ -9094,7 +9095,7 @@ function jm({ themeName: e = "calendar", tokens: t, state: a, date: r }) {
     isDisabled: c,
     isRoundedLeft: P,
     isRoundedRight: w
-  }), z = F(`${e}.cellDate`, {
+  }), V = F(`${e}.cellDate`, {
     ...t,
     isSelected: l,
     isInvalid: p,
@@ -9102,11 +9103,11 @@ function jm({ themeName: e = "calendar", tokens: t, state: a, date: r }) {
     isSelectionStart: u,
     isSelectionEnd: m
   });
-  return /* @__PURE__ */ $("td", { ...o, "aria-disabled": !1, className: x, children: /* @__PURE__ */ $("div", { ...te(i, g), ref: n, hidden: s, className: S, children: /* @__PURE__ */ $("div", { className: z, children: d }) }) });
+  return /* @__PURE__ */ $("td", { ...o, "aria-disabled": !1, className: x, children: /* @__PURE__ */ $("div", { ...te(i, g), ref: n, hidden: s, className: S, children: /* @__PURE__ */ $("div", { className: V, children: d }) }) });
 }
 function Hm({ themeName: e = "calendar", customTheme: t, tokens: a, state: r, ...n }) {
   const { locale: o } = se(), { gridProps: i, headerProps: l, weekDays: s } = Vm({ ...n }, r), c = Vd(r.visibleRange.start, o), d = F(`${e}.calendarTable`, a), p = F(`${e}.dayLabel`, a);
-  return /* @__PURE__ */ V("table", { ...i, cellPadding: "0", className: d, children: [
+  return /* @__PURE__ */ z("table", { ...i, cellPadding: "0", className: d, children: [
     /* @__PURE__ */ $("thead", { ...l, children: /* @__PURE__ */ $("tr", { children: s.map((u) => /* @__PURE__ */ $("th", { className: p, children: u }, `${u}`)) }) }),
     /* @__PURE__ */ $("tbody", { children: [...new Array(c).keys()].map((u) => /* @__PURE__ */ $("tr", { children: r.getDatesInWeek(u).map((m, h) => m ? /* @__PURE__ */ $(jm, { state: r, date: m }, m?.day) : /* @__PURE__ */ $("td", {}, h)) }, u)) })
   ] });
@@ -9117,10 +9118,10 @@ function Wm({ buttons: e, tokens: t, customTheme: a, themeName: r = "calendar",
     locale: o,
     createCalendar: Eo
   }), l = A(null), { calendarProps: s, prevButtonProps: c, nextButtonProps: d, title: p } = Bm({ ...n }, i), u = F(`${r}.container`, t), m = F(`${r}.header`, t), h = F(`${r}.navigationButtonsContainer`, t);
-  return /* @__PURE__ */ V("div", { ...s, ref: l, className: u, children: [
-    /* @__PURE__ */ V("div", { className: m, children: [
+  return /* @__PURE__ */ z("div", { ...s, ref: l, className: u, children: [
+    /* @__PURE__ */ z("div", { className: m, children: [
       /* @__PURE__ */ $(Te, { as: "p", tokens: { size: "h6" }, children: p }),
-      /* @__PURE__ */ V("div", { className: h, children: [
+      /* @__PURE__ */ z("div", { className: h, children: [
         /* @__PURE__ */ $(
           Ge,
           {
@@ -9160,9 +9161,9 @@ function _m({ themeName: e = "datePicker", tokens: t, ...a }) {
     },
     n
   ), s = F(`${e}.calendarUnderlay`, t), c = F(`${e}.calendarPopover`, t);
-  return /* @__PURE__ */ V(qf, { children: [
+  return /* @__PURE__ */ z(qf, { children: [
     /* @__PURE__ */ $("div", { ...l, className: s }),
-    /* @__PURE__ */ V("div", { ...i, ref: r, className: c, children: [
+    /* @__PURE__ */ z("div", { ...i, ref: r, className: c, children: [
       /* @__PURE__ */ $(xn, { onDismiss: n.close }),
       o,
       /* @__PURE__ */ $(xn, { onDismiss: n.close })
@@ -9171,7 +9172,7 @@ function _m({ themeName: e = "datePicker", tokens: t, ...a }) {
 }
 function Ym({ segment: e, state: t }) {
   const a = A(null), { segmentProps: r } = wm(e, t, a);
-  return /* @__PURE__ */ V("div", { ...r, ref: a, children: [
+  return /* @__PURE__ */ z("div", { ...r, ref: a, children: [
     /* @__PURE__ */ $(
       "span",
       {
@@ -9210,10 +9211,10 @@ function Pp({
   ...l
 }) {
   const s = Rm({ ...l }), c = A(null), { groupProps: d, fieldProps: p, labelProps: u, descriptionProps: m, buttonProps: h, dialogProps: y, calendarProps: P } = Dm({ ...l }, s, c), { label: w } = { ...l }, g = F(`${r}.container`, t), T = F(`${r}.dateField`, t), x = F(`${r}.label`, t);
-  return /* @__PURE__ */ V("div", { className: g, children: [
+  return /* @__PURE__ */ z("div", { className: g, children: [
     w && /* @__PURE__ */ $("span", { ...u, children: w }),
     o && /* @__PURE__ */ $("div", { ...m, children: o }),
-    /* @__PURE__ */ $("div", { ...d, ref: c, children: /* @__PURE__ */ V(
+    /* @__PURE__ */ $("div", { ...d, ref: c, children: /* @__PURE__ */ z(
       Ge,
       {
         themeName: `${r}.button`,
@@ -9223,7 +9224,7 @@ function Pp({
         handlePress: h.onPress,
         children: [
           i && /* @__PURE__ */ $("p", { className: x, children: i }),
-          /* @__PURE__ */ V("div", { className: T, children: [
+          /* @__PURE__ */ z("div", { className: T, children: [
             /* @__PURE__ */ $(En, { ...p }),
             s.validationState === "invalid" && "❌"
           ] }),
@@ -9231,8 +9232,8 @@ function Pp({
         ]
       }
     ) }),
-    s.isOpen && /* @__PURE__ */ $(_m, { triggerRef: c, state: s, placement: e, children: /* @__PURE__ */ V(Zm, { ...y, children: [
-      /* @__PURE__ */ V("div", { children: [
+    s.isOpen && /* @__PURE__ */ $(_m, { triggerRef: c, state: s, placement: e, children: /* @__PURE__ */ z(Zm, { ...y, children: [
+      /* @__PURE__ */ z("div", { children: [
         /* @__PURE__ */ $(En, { ...p }),
         s.validationState === "invalid" && "❌"
       ] }),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@okam/stack-ui",
   "main": "./index.js",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "types": "./index.d.ts",
   "exports": {
     ".": {