welcome-ui 10.0.0-alpha.4 → 10.0.0-alpha.5

package/dist/2W3RN7C5-DMC82gDP.js

@@ -0,0 +1,61 @@
+"use client";
+import { c as I, _ as p, R as d, F as O, P as q, u as _, d as x, v as j, a as T, Z as Y, $ as w, j as H, h as L, a0 as V, a1 as Z, f as $, b as z } from "./OE2EFRVA-Dg1R6gaC.js";
+import { useRef as C, useState as D, useEffect as G } from "react";
+var J = "button";
+function M(a) {
+  if (!a.isTrusted) return !1;
+  const t = a.currentTarget;
+  return a.key === "Enter" ? d(t) || t.tagName === "SUMMARY" || t.tagName === "A" : a.key === " " ? d(t) || t.tagName === "SUMMARY" || t.tagName === "INPUT" || t.tagName === "SELECT" : !1;
+}
+var Q = Symbol("command"), W = I(
+  function(t) {
+    var i = t, { clickOnEnter: m = !0, clickOnSpace: u = !0 } = i, r = p(i, ["clickOnEnter", "clickOnSpace"]);
+    const c = C(null), [R, K] = D(!1);
+    G(() => {
+      c.current && K(d(c.current));
+    }, []);
+    const [U, k] = D(!1), f = C(!1), y = O(r), [E, F] = q(r, Q, !0), P = r.onKeyDown, h = _((e) => {
+      P == null || P(e);
+      const s = e.currentTarget;
+      if (e.defaultPrevented || E || y || !H(e) || L(s) || s.isContentEditable) return;
+      const o = m && e.key === "Enter", n = u && e.key === " ", b = e.key === "Enter" && !m, l = e.key === " " && !u;
+      if (b || l) {
+        e.preventDefault();
+        return;
+      }
+      if (o || n) {
+        const g = M(e);
+        if (o) {
+          if (!g) {
+            e.preventDefault();
+            const S = e, { view: X } = S, B = p(S, ["view"]), N = () => w(s, B);
+            V() ? Z(s, "keyup", N) : queueMicrotask(N);
+          }
+        } else n && (f.current = !0, g || (e.preventDefault(), k(!0)));
+      }
+    }), v = r.onKeyUp, A = _((e) => {
+      if (v == null || v(e), e.defaultPrevented || E || y || e.metaKey) return;
+      const s = u && e.key === " ";
+      if (f.current && s && (f.current = !1, !M(e))) {
+        e.preventDefault(), k(!1);
+        const o = e.currentTarget, n = e, { view: b } = n, l = p(n, ["view"]);
+        queueMicrotask(() => w(o, l));
+      }
+    });
+    return r = x(T(T({
+      "data-active": U || void 0,
+      type: R ? "button" : void 0
+    }, F), r), {
+      ref: j(c, r.ref),
+      onKeyDown: h,
+      onKeyUp: A
+    }), r = Y(r), r;
+  }
+);
+$(function(t) {
+  const i = W(t);
+  return z(J, i);
+});
+export {
+  W as u
+};

package/dist/{4I4MLMKD-z3Xm3qCo.js → 4I4MLMKD-BO6Lcy7s.js}

@@ -1,10 +1,10 @@
 "use client";
-import { u as O, a as E, P as z } from "./Y67KZUMI-BDyUNSJw.js";
-import { u as _ } from "./RTNCFSKZ-LcIdBwa8.js";
-import { c as b, _ as g, i as A, w as H, d as x, a as p, p as W, r as T, L, M as j, v as I, f as w, b as k, u as U, x as B } from "./OE2EFRVA-DkdhQLJL.js";
+import { u as z, a as E, P as H } from "./Y67KZUMI-BwLWwpNF.js";
+import { b as _ } from "./RTNCFSKZ-BywELldk.js";
+import { c as b, _ as g, i as A, l as M, d as x, a as p, v as W, r as T, m as j, O as I, y as L, f as w, b as k, u as U, k as B } from "./OE2EFRVA-Dg1R6gaC.js";
 import { useMemo as C, useState as F } from "react";
 import { jsx as l, jsxs as Z } from "react/jsx-runtime";
-import { u as q } from "./ZTXFEM5L-CjFLRObi.js";
+import { u as q } from "./ZTXFEM5L-WGHY_jqg.js";
 var h = "M23 27.8C24.1 29 26.4 30 28 30H30H0H2C3.7 30 5.9 29 7 27.8L14 20.6C14.7 19.8 15.3 19.8 16 20.6L23 27.8Z", G = "div", P = 30, u = P / 2, J = {
   top: `rotate(180 ${u} ${u})`,
   right: `rotate(-90 ${u} ${u})`,
@@ -13,9 +13,9 @@ var h = "M23 27.8C24.1 29 26.4 30 28 30H30H0H2C3.7 30 5.9 29 7 27.8L14 20.6C14.7
 };
 function K(n) {
   const [o, t] = F(), e = _(n, "contentElement");
-  return L(() => {
+  return j(() => {
     if (!e) return;
-    const s = j(e).getComputedStyle(e);
+    const s = I(e).getComputedStyle(e);
     t(s);
   }, [e]), o;
 }
@@ -41,7 +41,7 @@ var Y = b(
       "size",
       "borderWidth"
     ]);
-    const m = O();
+    const m = z();
     e = e || m, A(
       e,
       process.env.NODE_ENV !== "production" && "PopoverArrow must be wrapped in a Popover component."
@@ -49,16 +49,16 @@ var Y = b(
     const i = _(
       e,
       (v) => v.currentPlacement.split("-")[0]
-    ), d = H(), c = K(e), V = X(i, c) || "none", f = (c == null ? void 0 : c.getPropertyValue("background-color")) || "none", [N, S] = C(() => {
+    ), d = M(), c = K(e), V = X(i, c) || "none", f = (c == null ? void 0 : c.getPropertyValue("background-color")) || "none", [N, y] = C(() => {
       if (s != null) return [s, !1];
       if (!c) return [0, !1];
       const v = Q(c);
       if (v) return [Number.parseInt(v, 10), !0];
-      const y = c.getPropertyValue(`border-${i}-width`);
-      return y ? [Math.ceil(Number.parseFloat(y)), !1] : [0, !1];
-    }, [s, c, i]), R = N * 2 * (P / r), $ = J[i], M = C(
-      () => /* @__PURE__ */ l("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ Z("g", { transform: $, children: [
-        !S && // When using the CSS border property, set the fill color to match
+      const $ = c.getPropertyValue(`border-${i}-width`);
+      return $ ? [Math.ceil(Number.parseFloat($)), !1] : [0, !1];
+    }, [s, c, i]), R = N * 2 * (P / r), S = J[i], O = C(
+      () => /* @__PURE__ */ l("svg", { display: "block", viewBox: "0 0 30 30", children: /* @__PURE__ */ Z("g", { transform: S, children: [
+        !y && // When using the CSS border property, set the fill color to match
         // the background behind the stroke so transparent strokes match
         // the appearance of borders on HTML elements.
         /* @__PURE__ */ l(
@@ -84,10 +84,10 @@ var Y = b(
           }
         ) })
       ] }) }),
-      [$, S, f, d]
+      [S, y, f, d]
     );
     return a = x(p({
-      children: M,
+      children: O,
       "aria-hidden": !0
     }, a), {
       ref: W(e.setArrowElement, a.ref),
@@ -103,7 +103,7 @@ var Y = b(
       }, a.style)
     }), T(a);
   }
-), ce = I(
+), ce = L(
   w(function(o) {
     const t = Y(o);
     return k(G, t);
@@ -133,7 +133,7 @@ var re = "button", oe = b(function(o) {
   });
   return r = B(
     r,
-    (i) => /* @__PURE__ */ l(z, { value: e, children: i }),
+    (i) => /* @__PURE__ */ l(H, { value: e, children: i }),
     [e]
   ), r = x(p({}, r), {
     onClick: m

package/dist/Accordion.js

@@ -1,29 +1,30 @@
 "use client";
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { D as d } from "./NMGNQVTG-BgAqqGOq.js";
-import { D as a } from "./T22PY7TE-CzEDuEn1.js";
-import { u as b } from "./T22PY7TE-CzEDuEn1.js";
+import './Accordion.css';
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { D as m } from "./NMGNQVTG-DRO2uXZT.js";
+import { D as a } from "./T22PY7TE-gLuJpoOm.js";
+import { u as b } from "./T22PY7TE-gLuJpoOm.js";
 import { forwardRef as u } from "react";
-import { Icon as _ } from "./Icon.js";
-import { Text as p } from "./Text.js";
+import { Icon as p } from "./Icon.js";
+import { Text as _ } from "./Text.js";
 import { c as h } from "./index-PAaZGbyz.js";
-const f = "_root_1ugpw_2", g = "_icon_1ugpw_11", w = "_disclosure_1ugpw_23", v = {
+const f = "_root_1ugpw_2", g = "_icon_1ugpw_11", N = "_disclosure_1ugpw_23", v = {
   root: f,
   icon: g,
-  disclosure: w,
+  disclosure: N,
   "disclosure-content": "_disclosure-content_1ugpw_48",
   "content-child": "_content-child_1ugpw_63"
-}, s = h(v), z = u(
-  ({ children: t, className: n, dataTestId: c, store: r, title: e, ...l }, m) => /* @__PURE__ */ i("div", { className: s("root", n), ref: m, ...l, children: [
-    /* @__PURE__ */ i(
-      d,
+}, s = h(v), w = u(
+  ({ children: t, className: n, dataTestId: c, store: i, title: e, ...l }, d) => /* @__PURE__ */ r("div", { className: s("root", n), ref: d, ...l, children: [
+    /* @__PURE__ */ r(
+      m,
       {
         className: s("disclosure"),
         "data-testid": c ? `${c}-title` : void 0,
-        store: r,
+        store: i,
         children: [
-          /* @__PURE__ */ o(p, { as: "h5", variant: "heading-sm-strong", children: e }),
-          /* @__PURE__ */ o("div", { className: s("icon"), children: /* @__PURE__ */ o(_, { name: "arrow-right", size: "sm" }) })
+          /* @__PURE__ */ o(_, { as: "h5", variant: "heading-sm-strong", children: e }),
+          /* @__PURE__ */ o("div", { className: s("icon"), children: /* @__PURE__ */ o(p, { name: "angle-right", size: "lg" }) })
         ]
       }
     ),
@@ -32,13 +33,14 @@ const f = "_root_1ugpw_2", g = "_icon_1ugpw_11", w = "_disclosure_1ugpw_23", v =
       {
         className: s("disclosure-content"),
         "data-testid": c ? `${c}-content` : void 0,
-        store: r,
+        store: i,
         children: /* @__PURE__ */ o("div", { className: s("content-child"), children: t })
       }
     )
   ] })
 );
+w.displayName = "Accordion";
 export {
-  z as Accordion,
+  w as Accordion,
   b as useAccordion
 };

package/dist/Alert.js

@@ -1,13 +1,14 @@
 "use client";
+import './Alert.css';
 import { jsx as i, jsxs as m } from "react/jsx-runtime";
-import l, { forwardRef as w, Children as p, cloneElement as u } from "react";
+import p, { forwardRef as w, Children as u, cloneElement as h } from "react";
 import { CloseButton as E } from "./CloseButton.js";
-import { Icon as S } from "./Icon.js";
-import { Text as v } from "./Text.js";
-import { c as y } from "./index-PAaZGbyz.js";
+import { Icon as V } from "./Icon.js";
+import { Text as N } from "./Text.js";
+import { c as A } from "./index-PAaZGbyz.js";
 import { Button as b } from "./Button.js";
-const V = "_root_hm7mj_2", I = "_content_hm7mj_21", N = {
-  root: V,
+const I = "_root_hm7mj_2", O = "_content_hm7mj_21", x = {
+  root: I,
   "size-md": "_size-md_hm7mj_18",
   "content-actions": "_content-actions_hm7mj_21",
   "without-title": "_without-title_hm7mj_24",
@@ -19,7 +20,7 @@ const V = "_root_hm7mj_2", I = "_content_hm7mj_21", N = {
   "variant-success": "_variant-success_hm7mj_49",
   "variant-warning": "_variant-warning_hm7mj_54",
   "full-width": "_full-width_hm7mj_59",
-  content: I,
+  content: O,
   "content-text": "_content-text_hm7mj_70",
   "title-close-button": "_title-close-button_hm7mj_87",
   "title-with-icon": "_title-with-icon_hm7mj_90",
@@ -29,70 +30,78 @@ const V = "_root_hm7mj_2", I = "_content_hm7mj_21", N = {
   "icon-wrapper-info": "_icon-wrapper-info_hm7mj_117",
   "icon-wrapper-warning": "_icon-wrapper-warning_hm7mj_123",
   "icon-wrapper-ai": "_icon-wrapper-ai_hm7mj_127"
-}, x = w(
+}, d = w(
   ({ variant: t = "primary", ...o }, n) => /* @__PURE__ */ i(b, { className: "shrink-0 w-fit", ref: n, variant: t, ...o })
-), A = w(
+);
+d.displayName = "Alert.Button";
+const f = w(
   ({ variant: t = "secondary", ...o }, n) => /* @__PURE__ */ i(b, { className: "shrink-0 w-fit", ref: n, variant: t, ...o })
-), O = y(N), h = ({ children: t, hasCloseButton: o, ...n }) => /* @__PURE__ */ i(v, { as: "span", className: O(o && "title-close-button"), ...n, children: t }), a = y(N), R = {
+);
+f.displayName = "Alert.SecondaryButton";
+const R = A(x), l = ({ children: t, hasCloseButton: o, ...n }) => /* @__PURE__ */ i(N, { as: "span", className: R(o && "title-close-button"), ...n, children: t });
+l.displayName = "Alert.Title";
+const a = A(x), z = {
   ai: "sparkles",
   brand: "lightbulb-alt",
   danger: "exclamation-octagon",
   info: "info-circle",
   success: "check-circle",
   warning: "exclamation-triangle"
-}, z = w(
-  ({ children: t, className: o, cta: n, handleClose: _, isFullWidth: B, size: c = "md", variant: s = "brand", ...$ }, k) => {
-    const C = s === "ai", f = p.toArray(t).some((r) => l.isValidElement(r) ? r.type === h : !1), j = /* @__PURE__ */ i("div", { className: a("icon-wrapper", `icon-wrapper-${s}`), children: /* @__PURE__ */ i(S, { name: R[s] }) }), T = p.toArray(t).map((r) => r.type === h ? /* @__PURE__ */ m("div", { className: a("title-with-icon"), children: [
-      j,
-      u(r, {
+}, B = w(
+  ({ children: t, className: o, cta: n, handleClose: _, isFullWidth: $, size: c = "md", variant: s = "brand", ...k }, T) => {
+    const C = s === "ai", j = u.toArray(t).some((e) => p.isValidElement(e) ? e.type === l : !1), y = /* @__PURE__ */ i("div", { className: a("icon-wrapper", `icon-wrapper-${s}`), children: /* @__PURE__ */ i(V, { name: z[s] }) }), S = u.toArray(t).map((e) => e.type === l ? /* @__PURE__ */ m("div", { className: a("title-with-icon"), children: [
+      y,
+      h(e, {
         hasCloseButton: !!_,
         variant: `body-${c}-strong`
       })
-    ] }) : r), d = (r) => p.toArray(r).flatMap((e) => l.isValidElement(e) && e.type === l.Fragment ? d(e.props.children) : e.type === x ? u(e, {
+    ] }) : e), g = (e) => u.toArray(e).flatMap((r) => p.isValidElement(r) && r.type === p.Fragment ? g(r.props.children) : r.type === d ? h(r, {
       size: c,
       variant: C ? "primary-ai" : void 0
-    }) : e.type === A ? u(e, {
+    }) : r.type === f ? h(r, {
       size: c
-    }) : e), g = !!n && d(n);
+    }) : r), v = !!n && g(n);
     return /* @__PURE__ */ m(
       "div",
       {
         className: a(
           "root",
-          B && "full-width",
+          $ && "full-width",
           `size-${c}`,
           s && `variant-${s}`,
           o
         ),
-        ref: k,
-        ...$,
+        ref: T,
+        ...k,
         children: [
           !!_ && /* @__PURE__ */ i(E, { className: a("close-button"), onClick: _ }),
           /* @__PURE__ */ m("div", { className: a("content"), children: [
             /* @__PURE__ */ m(
-              v,
+              N,
               {
                 as: "div",
-                className: a("content-text", !f && "without-title"),
+                className: a("content-text", !j && "without-title"),
                 variant: `body-${c}`,
                 children: [
-                  !f && j,
-                  T
+                  !j && y,
+                  S
                 ]
               }
             ),
-            !!g && /* @__PURE__ */ i("div", { className: a("content-actions"), children: g })
+            !!v && /* @__PURE__ */ i("div", { className: a("content-actions"), children: v })
           ] })
         ]
       }
     );
   }
-), K = Object.assign(z, {
-  Button: x,
-  SecondaryButton: A,
-  Title: h
+);
+B.displayName = "Alert";
+const K = Object.assign(B, {
+  Button: d,
+  SecondaryButton: f,
+  Title: l
 });
 export {
   K as Alert,
-  R as ICON
+  z as ICON
 };

package/dist/AspectRatio.js

@@ -1,4 +1,5 @@
 "use client";
+import './AspectRatio.css';
 import { jsx as i } from "react/jsx-runtime";
 import { c } from "./index-PAaZGbyz.js";
 import { f as e } from "./forwardRefWithAs-8eP3ZN15.js";

package/dist/Avatar.js

@@ -1,4 +1,5 @@
 "use client";
+import './Avatar.css';
 import { jsxs as _, jsx as n } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
 import { Icon as u } from "./Icon.js";
@@ -27,8 +28,8 @@ const b = "_root_2qaar_2", y = "_placeholder_2qaar_36", h = {
   "secondary-violet"
 ];
 function k(o = "", e) {
-  const [r, a] = o.split(" ");
-  return e === "xs" || e === "sm" ? r.charAt(0).toUpperCase() : a ? `${r.charAt(0).toUpperCase()}${a.charAt(0).toUpperCase()}` : r.substring(0, 2).toUpperCase();
+  const [a, r] = o.split(" ");
+  return e === "xs" || e === "sm" ? a.charAt(0).toUpperCase() : r ? `${a.charAt(0).toUpperCase()}${r.charAt(0).toUpperCase()}` : a.substring(0, 2).toUpperCase();
 }
 const x = (o) => {
   if (!o) return;
@@ -44,16 +45,16 @@ const x = (o) => {
   md: "label-xl",
   sm: "label-lg",
   xs: "label-sm-strong"
-}, U = g(
-  ({ className: o, getInitials: e = k, name: r, size: a = "md", src: s }, i) => {
-    const c = x(r), t = !s && !r;
+}, v = g(
+  ({ className: o, getInitials: e = k, name: a, size: r = "md", src: s }, i) => {
+    const c = x(a), t = !s && !a;
     return /* @__PURE__ */ _(
       "div",
       {
-        "aria-label": r,
+        "aria-label": a,
         className: l(
           "root",
-          `size-${a}`,
+          `size-${r}`,
           c && `background-${c}`,
           t && "placeholder",
           o
@@ -61,14 +62,15 @@ const x = (o) => {
         ref: i,
         role: "img",
         children: [
-          t ? /* @__PURE__ */ n(u, { className: l("placeholder-icon"), name: "user", size: q[a] }) : null,
-          s ? /* @__PURE__ */ n("img", { alt: r, src: s }) : null,
-          !s && r ? /* @__PURE__ */ n(m, { as: "span", className: l("initials"), variant: f[a], children: e(r, a) }) : null
+          t ? /* @__PURE__ */ n(u, { className: l("placeholder-icon"), name: "user", size: q[r] }) : null,
+          s ? /* @__PURE__ */ n("img", { alt: a, src: s }) : null,
+          !s && a ? /* @__PURE__ */ n(m, { as: "span", className: l("initials"), variant: f[r], children: e(a, r) }) : null
         ]
       }
     );
   }
 );
+v.displayName = "Avatar";
 export {
-  U as Avatar
+  v as Avatar
 };

package/dist/{B7UTNDHN-BDa2-8JK.js → B7UTNDHN-BghjolIs.js}

@@ -1,13 +1,13 @@
 "use client";
-import { H as S, G as C, T as Q, I as L, s as X, g as Z, K as p } from "./OE2EFRVA-DkdhQLJL.js";
-import { t as ee, c as O, s as R, i as te, f as G, d as h, a as ne } from "./RTNCFSKZ-LcIdBwa8.js";
+import { z as S, A as R, V as Q, B as L, s as X, g as Z, C as p } from "./OE2EFRVA-Dg1R6gaC.js";
+import { t as ee, c as z, s as M, i as te, f as U, a as h, d as ne } from "./RTNCFSKZ-BywELldk.js";
 function re(t) {
   const i = [];
   for (const e of t)
     i.push(...e);
   return i;
 }
-function U(t) {
+function $(t) {
   return t.slice().reverse();
 }
 function ie(t) {
@@ -35,16 +35,16 @@ function oe(t = {}) {
   ), s = new Map(o.map((r) => [r.id, r])), a = {
     items: o,
     renderedItems: S(e == null ? void 0 : e.renderedItems, [])
-  }, d = se(t.store), u = O(
+  }, d = se(t.store), u = z(
     { items: o, renderedItems: a.renderedItems },
     d
-  ), n = O(a, t.store), b = (r) => {
+  ), n = z(a, t.store), b = (r) => {
     const l = X(r, (c) => c.element);
     u.setState("renderedItems", l), n.setState("renderedItems", l);
   };
-  R(n, () => te(u)), R(u, () => G(u, ["items"], (r) => {
+  M(n, () => te(u)), M(u, () => U(u, ["items"], (r) => {
     n.setState("items", r.items);
-  })), R(u, () => G(u, ["renderedItems"], (r) => {
+  })), M(u, () => U(u, ["renderedItems"], (r) => {
     let l = !0, c = requestAnimationFrame(() => {
       const { renderedItems: m } = n.getState();
       r.renderedItems !== m && b(r.renderedItems);
@@ -90,7 +90,7 @@ function oe(t = {}) {
     (l) => u.setState("items", l),
     !0
   );
-  return C(L({}, n), {
+  return R(L({}, n), {
     registerItem: P,
     renderItem: (r) => Q(
       P(r),
@@ -122,7 +122,7 @@ function _(t, i) {
 function de(t, i) {
   return t.filter((e) => i ? !e.disabled && e.id !== i : !e.disabled);
 }
-function $(t, i) {
+function G(t, i) {
   return t.filter((e) => e.rowId === i);
 }
 function ce(t, i, e = !1) {
@@ -133,7 +133,7 @@ function ce(t, i, e = !1) {
     ...t.slice(0, o)
   ];
 }
-function H(t) {
+function Y(t) {
   const i = [];
   for (const e of t) {
     const o = i.find((s) => {
@@ -144,7 +144,7 @@ function H(t) {
   }
   return i;
 }
-function K(t) {
+function j(t) {
   let i = 0;
   for (const { length: e } of t)
     e > i && (i = e);
@@ -158,7 +158,7 @@ function ue(t) {
   };
 }
 function fe(t, i, e) {
-  const o = K(t);
+  const o = j(t);
   for (const s of t)
     for (let a = 0; a < o; a += 1) {
       const d = s[a];
@@ -170,11 +170,11 @@ function fe(t, i, e) {
   return t;
 }
 function me(t) {
-  const i = H(t), e = K(i), o = [];
+  const i = Y(t), e = j(i), o = [];
   for (let s = 0; s < e; s += 1)
     for (const a of i) {
       const d = a[s];
-      d && o.push(C(L({}, d), {
+      d && o.push(R(L({}, d), {
         // If there's no rowId, it means that it's not a grid composite, but
         // a single row instead. So, instead of verticalizing it, that is,
         // assigning a different rowId based on the column index, we keep it
@@ -191,7 +191,7 @@ function Se(t = {}) {
     t.activeId,
     e == null ? void 0 : e.activeId,
     t.defaultActiveId
-  ), a = C(L({}, o.getState()), {
+  ), a = R(L({}, o.getState()), {
     id: S(
       t.id,
       e == null ? void 0 : e.id,
@@ -219,8 +219,8 @@ function Se(t = {}) {
     focusLoop: S(t.focusLoop, e == null ? void 0 : e.focusLoop, !1),
     focusWrap: S(t.focusWrap, e == null ? void 0 : e.focusWrap, !1),
     focusShift: S(t.focusShift, e == null ? void 0 : e.focusShift, !1)
-  }), d = O(a, o, t.store);
-  R(
+  }), d = z(a, o, t.store);
+  M(
     d,
     () => ne(d, ["renderedItems", "activeId"], (n) => {
       d.setState("activeId", (b) => {
@@ -240,27 +240,27 @@ function Se(t = {}) {
       includesBaseElement: m = r.includesBaseElement,
       renderedItems: w = r.renderedItems,
       rtl: x = r.rtl
-    } = b, y = n === "up" || n === "down", z = n === "next" || n === "down", Y = z ? x && !y : !x || y, j = g && !l;
+    } = b, y = n === "up" || n === "down", O = n === "next" || n === "down", H = O ? x && !y : !x || y, J = g && !l;
     let v = y ? re(
-      fe(H(w), c, j)
+      fe(Y(w), c, J)
     ) : w;
-    if (v = Y ? U(v) : v, v = y ? me(v) : v, c == null)
+    if (v = H ? $(v) : v, v = y ? me(v) : v, c == null)
       return (E = _(v)) == null ? void 0 : E.id;
-    const M = v.find((I) => I.id === c);
-    if (!M)
+    const C = v.find((I) => I.id === c);
+    if (!C)
       return (P = _(v)) == null ? void 0 : P.id;
-    const D = v.some((I) => I.rowId), J = v.indexOf(M), N = v.slice(J + 1), W = $(N, M.rowId);
+    const D = v.some((I) => I.rowId), K = v.indexOf(C), N = v.slice(K + 1), W = G(N, C.rowId);
     if (l) {
       const I = de(W, c), B = I.slice(l)[0] || // If we can't find an item, just return the last one.
       I[I.length - 1];
       return B == null ? void 0 : B.id;
     }
-    const T = F && (y ? F !== "horizontal" : F !== "vertical"), V = D && f && (y ? f !== "horizontal" : f !== "vertical"), A = z ? (!D || y) && T && m : y ? m : !1;
-    if (T) {
-      const I = V && !A ? v : $(v, M.rowId), B = ce(I, c, A), q = _(B, c);
+    const V = F && (y ? F !== "horizontal" : F !== "vertical"), T = D && f && (y ? f !== "horizontal" : f !== "vertical"), A = O ? (!D || y) && V && m : y ? m : !1;
+    if (V) {
+      const I = T && !A ? v : G(v, C.rowId), B = ce(I, c, A), q = _(B, c);
       return q == null ? void 0 : q.id;
     }
-    if (V) {
+    if (T) {
       const I = _(
         // We can use nextItems, which contains all the next items, including
         // items from other rows, to wrap between rows. However, if there is a
@@ -276,7 +276,7 @@ function Se(t = {}) {
     const k = _(W, c);
     return !k && A ? null : k == null ? void 0 : k.id;
   };
-  return C(L(L({}, o), d), {
+  return R(L(L({}, o), d), {
     setBaseElement: (n) => d.setState("baseElement", n),
     setActiveId: (n) => d.setState("activeId", n),
     move: (n) => {
@@ -288,7 +288,7 @@ function Se(t = {}) {
     },
     last: () => {
       var n;
-      return (n = _(U(d.getState().renderedItems))) == null ? void 0 : n.id;
+      return (n = _($(d.getState().renderedItems))) == null ? void 0 : n.id;
     },
     next: (n) => (n !== void 0 && typeof n == "number" && (n = { skip: n }), u("next", n)),
     previous: (n) => (n !== void 0 && typeof n == "number" && (n = { skip: n }), u("previous", n)),
@@ -303,6 +303,6 @@ export {
   oe as a,
   Se as c,
   re as f,
-  U as r,
+  $ as r,
   ge as u
 };

package/dist/Badge.js

@@ -1,4 +1,5 @@
 "use client";
+import './Badge.css';
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
 import { Text as d } from "./Text.js";