@cfx-dev/ui-components 5.0.24 → 5.0.26

package/dist/components/BurgerMenu/BurgerMenu.js

@@ -1,104 +1,117 @@
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { useState as x, useCallback as b } from "react";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { useState as S, useCallback as f } from "react";
 import r from "../Flex/Flex.js";
-import { clsx as u } from "../../utils/clsx.js";
-import { Icon as N } from "../Icon/Icon.js";
-import { Interactive as f } from "../Interactive/Interactive.js";
-import { Text as S } from "../Text/Text.js";
+import { clsx as i } from "../../utils/clsx.js";
+import { Icon as g } from "../Icon/Icon.js";
+import { Interactive as y } from "../Interactive/Interactive.js";
+import { Text as D } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { s as i } from "../../BurgerMenu.module-DzFXW4p3.js";
-function P({
-  items: a,
-  onItemClick: c,
-  isOpen: g,
-  className: y,
-  menuClassName: C,
-  subItemContainerClassName: k,
+import { s as u } from "../../BurgerMenu.module-Dy-zFg88.js";
+function z({
+  items: c,
+  onItemClick: a,
+  isOpen: k,
+  className: w,
+  menuClassName: x,
+  subItemContainerClassName: C,
   itemInteractiveClassName: s,
-  itemClassName: t
+  itemClassName: t,
+  highlightedItemClassname: d
 }) {
-  const [d, w] = x(() => {
-    const e = {};
-    return a.forEach((n) => {
-      n.openByDefault && (e[n.id] = !0);
-    }), e;
-  }), l = b((e) => {
-    c(e);
-  }, [c]), m = b((e) => {
-    w((n) => ({
-      ...n,
-      [e]: !n[e]
+  const [h, N] = S(() => {
+    const n = {};
+    return c.forEach((e) => {
+      e.openByDefault && (n[e.id] = !0);
+    }), n;
+  }), l = f((n) => {
+    a(n);
+  }, [a]), p = f((n) => {
+    N((e) => ({
+      ...e,
+      [n]: !e[n]
     }));
   }, []);
   return /* @__PURE__ */ o(
     r,
     {
-      className: u(i.burgerMenuContentContainer, y),
+      className: i(u.burgerMenuContentContainer, w),
       direction: "column",
-      children: g && /* @__PURE__ */ o(r, { direction: "column", className: u(i.menu, C), children: a.map((e) => /* @__PURE__ */ p("div", { children: [
+      children: k && /* @__PURE__ */ o(r, { direction: "column", className: i(u.menu, x), children: c.map((n) => /* @__PURE__ */ m("div", { children: [
         /* @__PURE__ */ o(
-          f,
+          y,
           {
             showPointer: !0,
             "aria-label": "Toggle item",
             role: "button",
             onClick: () => {
-              e.submenu ? m(e.id) : l(e.id);
+              n.submenu ? p(n.id) : l(n.id);
             },
-            onKeyDown: (n) => {
-              (n.key === "Enter" || n.key === " ") && (e.submenu ? m(e.id) : l(e.id));
+            onKeyDown: (e) => {
+              (e.key === "Enter" || e.key === " ") && (n.submenu ? p(n.id) : l(n.id));
             },
             className: s,
-            children: /* @__PURE__ */ p(r, { p: 2, justifyContent: "space-between", className: t, children: [
-              /* @__PURE__ */ o(
-                S,
-                {
-                  size: "xsmall",
-                  weight: e.highlighted ? "bold" : "regular",
-                  children: e.label
-                }
-              ),
-              e.submenu && /* @__PURE__ */ o(
-                N,
-                {
-                  name: d[e.id] ? "UpChevron" : "DownChevron"
-                }
-              )
-            ] })
+            children: /* @__PURE__ */ m(
+              r,
+              {
+                p: 2,
+                justifyContent: "space-between",
+                className: i(
+                  n.highlighted && d ? d : null,
+                  t
+                ),
+                children: [
+                  /* @__PURE__ */ o(
+                    D,
+                    {
+                      size: "xsmall",
+                      weight: n.highlighted ? "bold" : "regular",
+                      children: n.label
+                    }
+                  ),
+                  n.submenu && /* @__PURE__ */ o(
+                    g,
+                    {
+                      name: h[n.id] ? "UpChevron" : "DownChevron"
+                    }
+                  ),
+                  n.icon && /* @__PURE__ */ o(g, { name: n.icon })
+                ]
+              }
+            )
           }
         ),
-        e.submenu && /* @__PURE__ */ o(
+        n.submenu && /* @__PURE__ */ o(
           r,
           {
-            className: u(
-              i.subItemContainer,
-              k,
+            className: i(
+              u.subItemContainer,
+              C,
               {
-                [i.subItemContainerOpen]: d[e.id]
+                [u.subItemContainerOpen]: h[n.id]
               }
             ),
             direction: "column",
-            children: e.submenu.map((n) => /* @__PURE__ */ o(
-              f,
+            children: n.submenu.map((e) => /* @__PURE__ */ o(
+              y,
               {
                 showPointer: !0,
                 "aria-label": "Toggle sub item",
                 role: "button",
-                onClick: () => l(n.id),
-                onKeyDown: (h) => {
-                  (h.key === "Enter" || h.key === " ") && l(n.id);
+                onClick: () => l(e.id),
+                onKeyDown: (b) => {
+                  (b.key === "Enter" || b.key === " ") && l(e.id);
                 },
                 className: s,
-                children: /* @__PURE__ */ o(r, { p: 2, className: t, children: n.label })
+                children: /* @__PURE__ */ o(r, { p: 2, className: t, children: e.label })
               },
-              n.id
+              e.id
             ))
           }
         )
-      ] }, e.id)) })
+      ] }, n.id)) })
     }
   );
 }
 export {
-  P as BurgerMenu
+  z as BurgerMenu
 };

package/dist/components/BurgerMenu/BurgerMenuButton.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import u from "../Flex/Flex.js";
 import { clsx as o } from "../../utils/clsx.js";
 import { Interactive as m } from "../Interactive/Interactive.js";
-import { s as r } from "../../BurgerMenu.module-DzFXW4p3.js";
+import { s as r } from "../../BurgerMenu.module-Dy-zFg88.js";
 function g({
   isOpen: n,
   onToggle: t,

package/dist/components/BurgerMenu/BurgerMenuShowcase.js

@@ -1,11 +1,12 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import u, { useState as a, useCallback as s } from "react";
-import t from "../Flex/Flex.js";
-import { Text as m } from "../Text/Text.js";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import d, { useState as h, useCallback as p } from "react";
+import i from "../Flex/Flex.js";
+import { Text as o } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { BurgerMenu as c } from "./BurgerMenu.js";
-import { BurgerMenuButton as d } from "./BurgerMenuButton.js";
-const g = [
+import { BurgerMenu as n } from "./BurgerMenu.js";
+import { BurgerMenuButton as s } from "./BurgerMenuButton.js";
+import { s as m } from "../../BurgerMenu.module-Dy-zFg88.js";
+const a = [
   {
     id: "1",
     label: "Account",
@@ -31,29 +32,46 @@ const g = [
   },
   {
     id: "4",
-    label: "Settings"
+    label: "Settings",
+    icon: "ExternalLink"
   }
-], p = (e) => {
+], u = (e) => {
   console.log(`Item clicked: ${e}`);
 };
-function f() {
-  const [e, l] = a(!1), o = s(() => {
-    l((n) => !n);
+function b() {
+  const [e, c] = h(!1), l = p(() => {
+    c((g) => !g);
   }, []);
-  return /* @__PURE__ */ r(t, { gap: "large", vertical: !0, pb: 20, children: /* @__PURE__ */ i(t, { gap: "medium", vertical: !0, children: [
-    /* @__PURE__ */ r(m, { children: "Burger Menu" }),
-    /* @__PURE__ */ r(d, { isOpen: e, onToggle: o }),
-    /* @__PURE__ */ r(
-      c,
-      {
-        items: g,
-        onItemClick: p,
-        isOpen: e
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ r(i, { gap: "large", vertical: !0, pb: 20, children: [
+    /* @__PURE__ */ r(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ t(o, { children: "Burger Menu" }),
+      /* @__PURE__ */ t(s, { isOpen: e, onToggle: l }),
+      /* @__PURE__ */ t(
+        n,
+        {
+          items: a,
+          onItemClick: u,
+          isOpen: e
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ t(o, { children: "Burger Menu With highlighted borders to show custom styling" }),
+      /* @__PURE__ */ t(s, { isOpen: e, onToggle: l }),
+      /* @__PURE__ */ t(
+        n,
+        {
+          items: a,
+          onItemClick: u,
+          isOpen: e,
+          highlightedItemClassname: m.highlightTest,
+          itemClassName: m.borderTest
+        }
+      )
+    ] })
+  ] });
 }
-const I = u.memo(f);
+const C = d.memo(b);
 export {
-  I as default
+  C as default
 };

package/dist/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
 
-export type ButtonTheme = 'primary' | 'secondary' | 'on-light' | 'tertiary' | 'linked' | 'quicklink';
+export type ButtonTheme = 'primary' | 'secondary' | 'tertiary' | 'on-light' | 'linked' | 'quicklink';
 export interface ButtonProps<T = HTMLButtonElement> {
     text?: React.ReactNode;
     title?: string;
@@ -16,6 +16,7 @@ export interface ButtonProps<T = HTMLButtonElement> {
     fullWidth?: boolean;
     disabled?: boolean;
     autofocus?: boolean;
+    borderShredded?: boolean;
     onClick?: (event: React.MouseEvent<T>) => void;
     onMouseDown?: (event: React.MouseEvent<T>) => void;
     onMouseUp?: (event: React.MouseEvent<T>) => void;

package/dist/components/Button/Button.js

@@ -1,86 +1,91 @@
-import { jsx as a, jsxs as q, Fragment as I } from "react/jsx-runtime";
-import x from "react";
-import { Icon as h } from "../Icon/Icon.js";
-import { clsx as b } from "../../utils/clsx.js";
-import { noop as m } from "../../utils/functional.js";
-const M = "cfxui__Button__unsetAll__44b96", j = "cfxui__Button__root__e2ace", F = "cfxui__Button__fullWidth__f61d9", v = "cfxui__Button__primary__1c59f", w = "cfxui__Button__secondary__b2b84", D = "cfxui__Button__linked__330cb", P = "cfxui__Button__quicklink__204ac", R = "cfxui__Button__icon__44e51", U = "cfxui__Button__icononly__4f786", $ = "cfxui__Button__decorator__39a9b", t = {
+import { jsx as r, jsxs as q, Fragment as I } from "react/jsx-runtime";
+import b from "react";
+import { Icon as k } from "../Icon/Icon.js";
+import { clsx as h } from "../../utils/clsx.js";
+import { noop as x } from "../../utils/functional.js";
+const M = "cfxui__Button__unsetAll__44b96", j = "cfxui__Button__root__e2ace", F = "cfxui__Button__fullWidth__f61d9", v = "cfxui__Button__borderShredded__2388c", w = "cfxui__Button__primary__1c59f", D = "cfxui__Button__secondary__b2b84", P = "cfxui__Button__linked__330cb", R = "cfxui__Button__quicklink__204ac", U = "cfxui__Button__icon__44e51", $ = "cfxui__Button__icononly__4f786", z = "cfxui__Button__decorator__39a9b", o = {
   unsetAll: M,
   root: j,
   fullWidth: F,
-  primary: v,
-  secondary: w,
+  borderShredded: v,
+  primary: w,
+  secondary: D,
   "on-light": "cfxui__Button__on-light__ae69c",
-  linked: D,
-  quicklink: P,
-  icon: R,
-  icononly: U,
-  decorator: $
+  linked: P,
+  quicklink: R,
+  icon: U,
+  icononly: $,
+  decorator: z
 };
-function z(l) {
+function E(l) {
   const {
-    text: o = null,
+    text: t = null,
     icon: n,
     iconLeft: e,
-    iconClassName: u,
+    iconClassName: _,
     decorator: i = null
   } = l;
   return /* @__PURE__ */ q(I, { children: [
-    !!e && /* @__PURE__ */ a(h, { name: e, className: b(t.icon, u) }),
-    o,
-    !!n && /* @__PURE__ */ a(h, { name: n, className: b(t.icon, u) }),
-    !!i && /* @__PURE__ */ a("div", { className: t.decorator, children: i })
+    !!e && /* @__PURE__ */ r(k, { name: e, className: h(o.icon, _) }),
+    t,
+    !!n && /* @__PURE__ */ r(k, { name: n, className: h(o.icon, _) }),
+    !!i && /* @__PURE__ */ r("div", { className: o.decorator, children: i })
   ] });
 }
-function E(l) {
+function G(l) {
   const {
-    text: o = null,
+    text: t = null,
     icon: n,
     iconLeft: e,
-    theme: u = "tertiary",
+    theme: _ = "tertiary",
     disabled: i = !1,
-    className: r = "",
+    className: d = "",
     autofocus: s = !1,
-    fullWidth: _ = !1,
-    tabIndex: c
+    fullWidth: u = !1,
+    borderShredded: c = !1,
+    tabIndex: a
   } = l;
-  return b(t.unsetAll, t.root, t[u], r, {
-    [t.disabled]: i,
-    [t.icononly]: (!!n || !!e) && (o === null || typeof o > "u"),
-    [t.text]: !!o,
-    [t.autofocus]: s || typeof c < "u",
-    [t.fullWidth]: _
+  return h(o.unsetAll, o.root, o[_], d, {
+    [o.disabled]: i,
+    [o.icononly]: (!!n || !!e) && (t === null || typeof t > "u"),
+    [o.text]: !!t,
+    [o.autofocus]: s || typeof a < "u",
+    [o.fullWidth]: u,
+    [o.borderShredded]: c
   });
 }
-function G(l) {
+function H(l) {
   const {
-    text: o = null,
+    text: t = null,
     icon: n,
     iconLeft: e,
-    iconClassName: u,
+    iconClassName: _,
     title: i = "",
-    type: r = "button",
+    type: d = "button",
     className: s = "",
-    theme: _ = "tertiary",
+    theme: u = "tertiary",
     disabled: c = !1,
-    onClick: y = m,
-    onMouseDown: k = m,
-    onMouseUp: p = m,
+    onClick: a = x,
+    onMouseDown: p = x,
+    onMouseUp: N = x,
     autofocus: f = !1,
-    tabIndex: d,
+    tabIndex: m,
     fullWidth: B = !1,
-    ariaLabel: N = "",
-    ref: C,
+    ariaLabel: C = "",
+    borderShredded: y = !1,
+    ref: S,
     ...W
-  } = l, g = x.useMemo(() => E({
-    text: o,
+  } = l, g = b.useMemo(() => G({
+    text: t,
     icon: n,
     iconLeft: e,
-    theme: _,
+    theme: u,
     disabled: c,
     className: s,
     autofocus: f,
     fullWidth: B,
-    tabIndex: d
+    tabIndex: m,
+    borderShredded: y
   }), [
     f,
     s,
@@ -88,34 +93,35 @@ function G(l) {
     c,
     n,
     e,
-    d,
-    o,
-    _
-  ]), A = x.useCallback((L) => {
-    c || y(L);
-  }, [c, y]);
-  return /* @__PURE__ */ a(
+    m,
+    t,
+    u,
+    y
+  ]), A = b.useCallback((L) => {
+    c || a(L);
+  }, [c, a]);
+  return /* @__PURE__ */ r(
     "button",
     {
-      ref: C,
+      ref: S,
       disabled: c,
       className: g,
       onClick: A,
-      onMouseDown: k,
-      onMouseUp: p,
+      onMouseDown: p,
+      onMouseUp: N,
       autoFocus: f,
-      tabIndex: d,
+      tabIndex: m,
       title: i,
-      type: r,
-      "aria-label": N,
+      type: d,
+      "aria-label": C,
       ...W,
-      children: /* @__PURE__ */ a(z, { ...l })
+      children: /* @__PURE__ */ r(E, { ...l })
     }
   );
 }
-const S = x.memo(G);
+const V = b.memo(H);
 export {
-  z as ButtonContent,
-  S as default,
-  E as getButtonClassName
+  E as ButtonContent,
+  V as default,
+  G as getButtonClassName
 };

package/dist/components/Button/ButtonShowcase.js

@@ -1,14 +1,14 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import c from "react";
-import r from "../Flex/Flex.js";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import d from "react";
+import t from "../Flex/Flex.js";
 import { Text as n } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import i from "./Button.js";
-import { ButtonBar as d } from "./ButtonBar.js";
+import { ButtonBar as c } from "./ButtonBar.js";
 import { LinkButton as l } from "./LinkButton.js";
 function h() {
-  return /* @__PURE__ */ t(r, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+  return /* @__PURE__ */ r(t, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Default Icon Right" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -19,7 +19,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Default Icon Left" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -30,7 +30,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Primary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -41,7 +41,31 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Primary With Border Shredded" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        i,
+        {
+          text: "Sign In",
+          theme: "primary",
+          icon: "Users",
+          borderShredded: !0
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Secondary With Border Shredded" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        i,
+        {
+          text: "Sign In",
+          theme: "secondary",
+          icon: "Users",
+          borderShredded: !0
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Secondary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -52,7 +76,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Tertiary (Default)" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -63,7 +87,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "On Light" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -74,7 +98,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Quick Link" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -85,7 +109,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "No Icon" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -95,7 +119,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Disabled" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -107,7 +131,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Full Width" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -119,9 +143,9 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Linked" }),
-      /* @__PURE__ */ t(r, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
+      /* @__PURE__ */ r(t, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
         /* @__PURE__ */ e(
           i,
           {
@@ -141,7 +165,7 @@ function h() {
         )
       ] })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "LinkButton - look like button but its anchor" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         l,
@@ -153,16 +177,16 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Button Bar" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ t(d, { children: [
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(c, { children: [
         /* @__PURE__ */ e(i, { text: "Sign In", theme: "primary", icon: "Users" }),
         /* @__PURE__ */ e(i, { text: "Register", theme: "secondary", icon: "Users" }),
         /* @__PURE__ */ e(i, { text: "Sign Out", theme: "on-light", icon: "Users" }),
         /* @__PURE__ */ e(i, { text: "Create Account", theme: "tertiary", icon: "Users" })
       ] }) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Long text" }),
       /* @__PURE__ */ e("div", { style: { maxWidth: "300px" }, children: /* @__PURE__ */ e(
         i,
@@ -175,7 +199,7 @@ function h() {
     ] })
   ] });
 }
-const x = c.memo(h);
+const x = d.memo(h);
 export {
   x as default
 };