@payfit/unity-components 2.26.1 → 2.28.0

package/dist/esm/components/breadcrumbs/Breadcrumbs.d.ts

@@ -4,6 +4,8 @@ import { BreadcrumbsProps as AriaBreadcrumbsProps } from 'react-aria-components/
 import { AriaBreadcrumbsProps as AriaAriaBreadcrumbsProps } from 'react-aria/useBreadcrumbs';
 import { Breadcrumb } from './parts/Breadcrumb.js';
 import { breadcrumbsVariant } from './Breadcrumbs.variant.js';
+type BreadcrumbWrap = VariantProps<typeof breadcrumbsVariant>['wrap'];
+export type BreadcrumbType = 'collapsed' | 'non-collapsed';
 export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<never>, 'onAction'> {
     items?: never;
     /**
@@ -11,9 +13,14 @@ export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBre
      */
     children: ReactNode;
     /**
-     * Whether the breadcrumbs should wrap or not
+     * Controls breadcrumbs layout: wrap or nowrap
      */
-    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+    wrap: BreadcrumbWrap;
+    /**
+     * Defines breadcrumb rendering strategy.
+     * @default 'non-collapsed'
+     */
+    type?: BreadcrumbType;
 }
 export interface BreadcrumbsWithItemProps<TItem extends {
     label: string;
@@ -27,9 +34,14 @@ export interface BreadcrumbsWithItemProps<TItem extends {
      */
     children: (item: TItem) => ReactElement<ComponentPropsWithoutRef<typeof Breadcrumb>>;
     /**
-     * Whether the breadcrumbs should wrap or not
+     * Controls breadcrumbs layout: wrap or nowrap
+     */
+    wrap: BreadcrumbWrap;
+    /**
+     * Defines breadcrumb rendering strategy.
+     * @default 'non-collapsed'
      */
-    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+    type?: BreadcrumbType;
 }
 declare const Breadcrumbs: (<TItem extends {
     label: string;

package/dist/esm/components/breadcrumbs/Breadcrumbs.js

@@ -1,41 +1,162 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as d, Fragment as m } from "react";
-import { Breadcrumbs as p } from "react-aria-components/Breadcrumbs";
-import { useBreakpointListener as u } from "../../hooks/use-breakpoint-listener.js";
-import { BreadcrumbsProvider as l } from "./Breadcrumbs.context.js";
-import { breadcrumbsVariant as f } from "./Breadcrumbs.variant.js";
-const b = (a, o, n) => a ? o.length === 0 ? null : n(o.at(o.length === 1 ? 0 : -2)) : o.map((r, t) => {
-  const e = "id" in r && r.id && typeof r.id == "string" ? r.id : `${r.label}-${t}`;
-  return /* @__PURE__ */ s(m, { children: n(r) }, e);
+import { jsxs as b, Fragment as x, jsx as a } from "react/jsx-runtime";
+import { forwardRef as O, cloneElement as g, Children as S, isValidElement as f } from "react";
+import { Breadcrumbs as N, Breadcrumb as R } from "react-aria-components/Breadcrumbs";
+import { Button as $ } from "react-aria-components/Button";
+import { useIntl as j } from "react-intl";
+import { useBreakpointListener as D } from "../../hooks/use-breakpoint-listener.js";
+import { Icon as h } from "../icon/Icon.js";
+import { Menu as T } from "../menu/Menu.js";
+import { MenuContent as H } from "../menu/parts/MenuContent.js";
+import { MenuTrigger as K } from "../menu/parts/MenuTrigger.js";
+import { RawMenuItem as L } from "../menu/parts/RawMenuItem.js";
+import { BreadcrumbsProvider as U } from "./Breadcrumbs.context.js";
+import { breadcrumbsVariant as V } from "./Breadcrumbs.variant.js";
+const W = /* @__PURE__ */ new Set([
+  "href",
+  "target",
+  "rel",
+  "download",
+  "isDisabled",
+  "onClick",
+  "onPress",
+  "onPressStart",
+  "onPressEnd",
+  "onPressChange",
+  "onPressUp",
+  "onFocus",
+  "onBlur",
+  "onKeyDown",
+  "onKeyUp",
+  "onHoverStart",
+  "onHoverChange",
+  "onHoverEnd",
+  "id"
+]), _ = (r) => {
+  const t = {};
+  if (!f(r))
+    return { menuItemProps: t, originalOnAction: void 0 };
+  const n = r.props;
+  for (const [e, s] of Object.entries(n))
+    e !== "children" && e !== "onAction" && (W.has(e) || e.startsWith("aria-") || e.startsWith("data-")) && (t[e] = s);
+  const o = typeof n.onAction == "function" ? n.onAction : void 0;
+  return { menuItemProps: t, originalOnAction: o };
+}, F = (r, t) => "id" in r && r.id && typeof r.id == "string" ? r.id : `${r.label}-${t}`, z = (r, t) => r ? r.map((n, o) => {
+  if (typeof t != "function")
+    return null;
+  const e = t(n), s = F(n, o);
+  return f(e) ? g(e, { key: s }) : null;
+}).filter((n) => n !== null) : typeof t == "function" ? [] : S.toArray(t).filter(
+  f
+), q = (r, t) => r.slice(1, -1).map((o, e) => {
+  const s = o.props.children, { menuItemProps: l, originalOnAction: u } = _(s), c = o.props.id ?? o.key, d = typeof c == "string" || typeof c == "number" ? c : `collapsed-breadcrumb-${e}`, m = f(s) && typeof s.props.children == "string" ? s.props.children : t(e + 2);
+  return { key: d, label: m, menuItemProps: l, originalOnAction: u };
 });
-function B({
-  items: a,
-  children: o,
+function G({
+  menuItems: r,
+  onAction: t,
+  breadcrumbClassName: n,
+  triggerAriaLabel: o
+}) {
+  return /* @__PURE__ */ b(R, { className: n, children: [
+    /* @__PURE__ */ b(T, { children: [
+      /* @__PURE__ */ a(K, { asChild: !0, children: /* @__PURE__ */ a(
+        $,
+        {
+          "aria-label": o,
+          className: "uy:flex uy:h-300 uy:w-300 uy:cursor-pointer uy:items-center uy:justify-center uy:rounded-75 uy:text-content-neutral-enabled uy:hover:bg-surface-neutral-hover uy:hover:text-content-neutral-hover uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:text-content-neutral-pressed uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring",
+          children: /* @__PURE__ */ a(
+            h,
+            {
+              src: "DotsThreeOutlined",
+              "aria-hidden": "true",
+              color: "inherit",
+              size: 20
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ a(H, { width: 248, placement: "bottom start", children: r.map((e) => /* @__PURE__ */ a(
+        L,
+        {
+          ...e.menuItemProps,
+          onAction: () => {
+            e.originalOnAction?.(), t?.(e.key);
+          },
+          children: e.label
+        },
+        e.key
+      )) })
+    ] }),
+    /* @__PURE__ */ a(
+      h,
+      {
+        src: "CaretRightOutlined",
+        "aria-hidden": "true",
+        color: "content.neutral.lowest"
+      }
+    )
+  ] });
+}
+function J({
+  items: r,
+  children: t,
   wrap: n = "nowrap",
-  ...r
-}, t) {
-  const { base: e } = f({ wrap: n }), i = u(), c = i === "xs" || i === "sm";
-  return /* @__PURE__ */ s(
-    l,
+  type: o = "non-collapsed",
+  ...e
+}, s) {
+  const l = D(), u = j(), c = l === "xs" || l === "sm", d = o === "collapsed", m = d ? "nowrap" : n, { base: v, breadcrumb: B } = V({ wrap: m }), C = r === void 0, i = z(r, t), y = d && i.length > 2, I = Math.max(i.length - 2, 0), M = u.formatMessage(
+    {
+      id: "unity:component:breadcrumbs:collapsed:trigger:label",
+      defaultMessage: "Show {count} more breadcrumbs"
+    },
+    { count: I }
+  ), w = y ? q(
+    i,
+    (p) => u.formatMessage(
+      {
+        id: "unity:component:breadcrumbs:collapsed:item:fallback",
+        defaultMessage: "Level {level}"
+      },
+      { level: p }
+    )
+  ) : [], P = i.at(0), k = i.at(-1), A = y ? /* @__PURE__ */ b(x, { children: [
+    P,
+    /* @__PURE__ */ a(
+      G,
+      {
+        menuItems: w,
+        onAction: e.onAction,
+        breadcrumbClassName: B(),
+        triggerAriaLabel: M
+      }
+    ),
+    k
+  ] }) : i.map(
+    (p, E) => g(p, {
+      key: `visible-${String(p.key ?? E)}`
+    })
+  );
+  return /* @__PURE__ */ a(
+    U,
     {
-      wrap: n,
+      wrap: m,
       isMobile: c,
-      isStaticApi: a === void 0,
-      children: /* @__PURE__ */ s(
-        p,
+      isStaticApi: C,
+      children: /* @__PURE__ */ a(
+        N,
         {
           "data-dd-privacy": "allow",
-          ref: t,
-          className: e(),
-          ...r,
-          children: a ? b(c, a, o) : o
+          ref: s,
+          className: v(),
+          ...e,
+          children: A
         }
       )
     }
   );
 }
-const y = d(B);
-y.displayName = "Breadcrumbs";
+const Q = O(J);
+Q.displayName = "Breadcrumbs";
 export {
-  y as Breadcrumbs
+  Q as Breadcrumbs
 };

package/dist/esm/components/breadcrumbs/Breadcrumbs.variant.js

@@ -1,8 +1,8 @@
 import { uyTv as a } from "@payfit/unity-themes";
 const r = a({
   slots: {
-    base: "uy:flex uy:gap-50 uy:list-none uy:text-content-neutral-enabled uy:typography-action",
-    breadcrumb: "uy:flex uy:gap-50 uy:sm:leading-[1.75] uy:items-center"
+    base: "uy:flex uy:gap-50 uy:list-none uy:text-content-neutral-enabled uy:typography-action-large uy:sm:typography-action",
+    breadcrumb: "uy:flex uy:gap-50 uy:items-center uy:leading-[1.5] uy:sm:leading-[1.75]"
   },
   variants: {
     wrap: {

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.d.ts

@@ -27,7 +27,6 @@ export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children' |
  * - Only accepts a single BreadcrumbLink component as a child
  * - Automatically handles current page styling (disabled state)
  * - Displays caret icons as separators between breadcrumb items
- * - On mobile, displays a back arrow for the previous breadcrumb
  * @see {@link BreadcrumbProps} for all available props
  */
 declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLLIElement>>;

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.js

@@ -1,30 +1,31 @@
-import { jsxs as i, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { Breadcrumb as n } from "react-aria-components/Breadcrumbs";
-import { Icon as s } from "../../icon/Icon.js";
-import { useBreadcrumbsContext as f } from "../Breadcrumbs.context.js";
-import { breadcrumbsVariant as h } from "../Breadcrumbs.variant.js";
-const x = b(
-  ({ children: r, ...t }, a) => {
-    const { wrap: c, isMobile: m, isStaticApi: u } = f(), { breadcrumb: o } = h({ wrap: c });
-    return m && !u ? /* @__PURE__ */ i(n, { ref: a, ...t, className: o(), children: [
-      /* @__PURE__ */ e(s, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
-      r
-    ] }) : /* @__PURE__ */ e(n, { ref: a, ...t, className: o(), children: ({ isCurrent: d }) => {
-      const l = typeof r.props.children == "string" ? r.props.children : "";
-      return d ? /* @__PURE__ */ e(
-        "span",
-        {
-          className: "uy:text-nowrap uy:text-content-neutral-lowest",
-          role: "link",
-          "aria-disabled": "true",
-          "aria-current": "page",
-          children: l
-        }
-      ) : /* @__PURE__ */ i(p, { children: [
+import { jsx as t, jsxs as s, Fragment as u } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { Breadcrumb as d } from "react-aria-components/Breadcrumbs";
+import { Icon as l } from "../../icon/Icon.js";
+import { useBreadcrumbsContext as p } from "../Breadcrumbs.context.js";
+import { breadcrumbsVariant as b } from "../Breadcrumbs.variant.js";
+const f = 280;
+function x({ content: r }) {
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      title: typeof r == "string" ? r : void 0,
+      className: "uy:text-nowrap uy:text-content-neutral-lowest uy:truncate",
+      style: { maxWidth: `${f}px` },
+      "aria-current": "page",
+      children: r
+    }
+  );
+}
+const B = i(
+  ({ children: r, ...e }, a) => {
+    const { wrap: o } = p(), { breadcrumb: n } = b({ wrap: o });
+    return /* @__PURE__ */ t(d, { ref: a, ...e, className: n(), children: ({ isCurrent: c }) => {
+      const m = r.props.children;
+      return c ? /* @__PURE__ */ t(x, { content: m }) : /* @__PURE__ */ s(u, { children: [
         r,
-        /* @__PURE__ */ e(
-          s,
+        /* @__PURE__ */ t(
+          l,
           {
             src: "CaretRightOutlined",
             "aria-hidden": "true",
@@ -35,7 +36,7 @@ const x = b(
     } });
   }
 );
-x.displayName = "Breadcrumb";
+B.displayName = "Breadcrumb";
 export {
-  x as Breadcrumb
+  B as Breadcrumb
 };

package/dist/esm/components/breadcrumbs/parts/RawBreadcrumbLink.d.ts

@@ -1,9 +1,9 @@
 import { RawLinkProps } from '../../link/RawLink.js';
-export declare const BREADCRUMB_CONTENT_MAX_LENGTH = 25;
+export declare const BREADCRUMB_ITEM_MAX_WIDTH = 180;
 export type RawBreadcrumbLinkProps = RawLinkProps;
 /**
  * A styled link component for breadcrumbs that enforces Unity design system styling.
- * This component automatically truncates long text and displays a tooltip when the content exceeds 25 characters.
+ * This component truncates long labels with a fixed max width and displays a tooltip when overflow happens.
  * @param props - Link props from RawLink {@see {@link RawLinkProps}}
  * @example
  * ```tsx
@@ -19,7 +19,8 @@ export type RawBreadcrumbLinkProps = RawLinkProps;
  * ```
  * @remarks
  * - The component enforces breadcrumb-specific styling that cannot be overridden
- * - Text longer than 25 characters is automatically truncated with a tooltip
+ * - Labels are truncated with a max width of 180px
+ * - Tooltip is displayed only when rendered text actually overflows
  * - Uses the 'secondary' color variant for breadcrumb links
  * @see {@link RawBreadcrumbLinkProps} for all available props
  */
@@ -33,5 +34,6 @@ declare const RawBreadcrumbLink: import('react').ForwardRefExoticComponent<Omit<
     isCurrent?: Pick<import('react').HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
     isExact?: boolean;
     maxCharactersTruncation?: number;
+    maxWidthTruncation?: import('react').CSSProperties["maxWidth"];
 } & import('react').RefAttributes<HTMLAnchorElement>>;
 export { RawBreadcrumbLink };

package/dist/esm/components/breadcrumbs/parts/RawBreadcrumbLink.js

@@ -1,36 +1,62 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { RawLink as e } from "../../link/RawLink.js";
-import { Tooltip as m } from "../../tooltip/Tooltip.js";
-const t = 25, u = i(
-  ({ children: o, href: a, ...n }, s) => {
-    const c = typeof o == "string" ? o : "";
-    return c.length > t ? /* @__PURE__ */ r(m, { title: c, children: /* @__PURE__ */ r(
-      e,
-      {
-        isExact: !0,
-        href: a,
-        color: "secondary",
-        maxCharactersTruncation: t,
-        ref: s,
-        ...n,
-        children: o
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as w, useState as R, useRef as E, useCallback as d, useLayoutEffect as L, useEffect as i } from "react";
+import { RawLink as b } from "../../link/RawLink.js";
+import { Tooltip as y } from "../../tooltip/Tooltip.js";
+const T = 180, k = w(
+  ({ children: r, href: l, ...m }, n) => {
+    const o = typeof r == "string" ? r : "", [p, c] = R(!1), s = E(null), t = d(() => {
+      const e = s.current;
+      if (!e || !o) {
+        c(!1);
+        return;
       }
-    ) }) : /* @__PURE__ */ r(
-      e,
+      c(e.scrollWidth > e.clientWidth);
+    }, [o]), v = d(
+      (e) => {
+        s.current = e, typeof n == "function" ? n(e) : n && (n.current = e);
+      },
+      [n]
+    );
+    L(() => {
+      t();
+    }, [t, r]), i(() => {
+      const e = s.current;
+      if (!e || typeof ResizeObserver > "u")
+        return;
+      const f = new ResizeObserver(t);
+      return f.observe(e), () => {
+        f.disconnect();
+      };
+    }, [t]), i(() => {
+      if (!(typeof window > "u"))
+        return window.addEventListener("resize", t), () => {
+          window.removeEventListener("resize", t);
+        };
+    }, [t]), i(() => {
+      if (!("fonts" in document))
+        return;
+      const e = document.fonts;
+      return e.addEventListener("loadingdone", t), () => {
+        e.removeEventListener("loadingdone", t);
+      };
+    }, [t]);
+    const u = /* @__PURE__ */ a(
+      b,
       {
         isExact: !0,
-        href: a,
+        href: l,
         color: "secondary",
-        maxCharactersTruncation: t,
-        ...n,
-        children: o
+        maxWidthTruncation: T,
+        ref: v,
+        ...m,
+        children: r
       }
     );
+    return p && o ? /* @__PURE__ */ a(y, { title: o, children: u }) : u;
   }
 );
-u.displayName = "BreadcrumbLink";
+k.displayName = "BreadcrumbLink";
 export {
-  t as BREADCRUMB_CONTENT_MAX_LENGTH,
-  u as RawBreadcrumbLink
+  T as BREADCRUMB_ITEM_MAX_WIDTH,
+  k as RawBreadcrumbLink
 };

package/dist/esm/components/link/RawLink.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from '@payfit/unity-themes';
-import { HTMLAttributes } from 'react';
+import { CSSProperties, HTMLAttributes } from 'react';
 import { LinkProps as AriaLinkProps } from 'react-aria-components/Link';
 export declare const link: import('tailwind-variants').TVReturnType<{
     variant: {
@@ -208,6 +208,7 @@ export type RawLinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
      */
     isExact?: boolean;
     maxCharactersTruncation?: number;
+    maxWidthTruncation?: CSSProperties['maxWidth'];
 };
 /**
  * Links allow users to navigate to different pages or sections.
@@ -252,6 +253,7 @@ declare const RawLink: import('react').ForwardRefExoticComponent<Omit<AriaLinkPr
      */
     isExact?: boolean;
     maxCharactersTruncation?: number;
+    maxWidthTruncation?: CSSProperties["maxWidth"];
 } & {
     children?: import('react').ReactNode | undefined;
 } & import('react').RefAttributes<HTMLAnchorElement>>;

package/dist/esm/components/link/RawLink.js

@@ -1,11 +1,11 @@
-import { jsxs as h, jsx as g } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { IconSprite as k } from "@payfit/unity-icons";
-import { uyTv as D } from "@payfit/unity-themes";
-import { Link as z } from "react-aria-components/Link";
-import { useRouter as A } from "../../providers/router/RouterProvider.js";
-import { isExternalUrl as E } from "./utils.js";
-const L = D({
+import { jsxs as h, jsx as w } from "react/jsx-runtime";
+import { forwardRef as k } from "react";
+import { IconSprite as D } from "@payfit/unity-icons";
+import { uyTv as z } from "@payfit/unity-themes";
+import { Link as A } from "react-aria-components/Link";
+import { useRouter as E } from "../../providers/router/RouterProvider.js";
+import { isExternalUrl as L } from "./utils.js";
+const N = z({
   slots: {
     base: [
       "uy:rounded-50 uy:underline uy:transition-colors uy:underline-offset-3",
@@ -83,51 +83,52 @@ const L = D({
     isDisabled: !1,
     size: "inherit"
   }
-}), N = w(
+}), R = k(
   ({
-    href: a,
-    children: s,
-    variant: u = "inline",
-    color: l = "primary",
-    isDisabled: o = !1,
-    isExact: c = !1,
-    isCurrent: y,
-    isExternal: d,
-    maxCharactersTruncation: r,
-    size: p = "inherit",
-    ...e
-  }, b) => {
-    const i = A(), t = d ?? E(a), n = !t && i ? i.isActive(a.toString(), c) : y, { base: m, icon: x } = L({
-      variant: u,
-      color: l,
-      isDisabled: o,
-      size: p,
-      isTruncated: !!r
-    }), f = !!r, v = i && {
-      ...n !== void 0 && {
-        "data-current": n,
-        "aria-current": n ? "page" : void 0
+    href: r,
+    children: u,
+    variant: y = "inline",
+    color: c = "primary",
+    isDisabled: s = !1,
+    isExact: d = !1,
+    isCurrent: p,
+    isExternal: b,
+    maxCharactersTruncation: i,
+    maxWidthTruncation: e,
+    size: m = "inherit",
+    ...t
+  }, v) => {
+    const n = E(), a = b ?? L(r), o = !a && n ? n.isActive(r.toString(), d) : p, { base: f, icon: x } = N({
+      variant: y,
+      color: c,
+      isDisabled: s,
+      size: m,
+      isTruncated: !!i || !!e
+    }), l = i !== void 0 ? `${i}ch` : e !== void 0 ? typeof e == "number" ? `${e}px` : e : void 0, g = n && {
+      ...o !== void 0 && {
+        "data-current": o,
+        "aria-current": o ? "page" : void 0
       }
     };
     return /* @__PURE__ */ h(
-      z,
+      A,
       {
         "data-dd-privacy": "allow",
-        ...e,
-        href: a,
-        ref: b,
-        style: f ? {
-          "--uy-link-max-w": `${r}ch`
+        ...t,
+        href: r,
+        ref: v,
+        style: l ? {
+          "--uy-link-max-w": l
         } : {},
-        className: m(),
-        isDisabled: o,
-        target: t ? "_blank" : e.target,
-        rel: t && !e.rel ? "noopener noreferrer" : e.rel,
-        ...v,
+        className: f(),
+        isDisabled: s,
+        target: a ? "_blank" : t.target,
+        rel: a && !t.rel ? "noopener noreferrer" : t.rel,
+        ...g,
         children: [
-          s,
-          t && /* @__PURE__ */ g(
-            k,
+          u,
+          a && /* @__PURE__ */ w(
+            D,
             {
               src: "ArrowSquareOutOutlined",
               color: "currentColor",
@@ -142,8 +143,8 @@ const L = D({
     );
   }
 );
-N.displayName = "Link";
+R.displayName = "Link";
 export {
-  N as RawLink,
-  L as link
+  R as RawLink,
+  N as link
 };

package/dist/esm/components/menu/parts/MenuContent.js

@@ -1,24 +1,24 @@
-import { jsx as u } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { Popover as a, Menu as y } from "react-aria-components/Menu";
-function s({
+function d({
   children: r,
   placement: o,
-  width: e,
+  width: u,
   triggerRef: t
 }) {
-  const n = e ? `uy:w-[${e}px]` : "";
-  return /* @__PURE__ */ u(
+  const n = u ? `uy:w-[${u}px] uy:min-w-[${u}px]` : "";
+  return /* @__PURE__ */ e(
     a,
     {
       triggerRef: t,
       placement: o,
       className: "uy:flex uy:flex-col uy:justify-end uy:items-start uy:p-100 uy:rounded-100 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:shadow-300",
       "data-dd-privacy": "allow",
-      children: /* @__PURE__ */ u(y, { autoFocus: "first", className: `uy:min-w-[320px] ${n}`, children: r })
+      children: /* @__PURE__ */ e(y, { autoFocus: "first", className: `${u ? "" : "uy:min-w-[320px]"} ${n}`, children: r })
     }
   );
 }
-s.displayName = "MenuContent";
+d.displayName = "MenuContent";
 export {
-  s as MenuContent
+  d as MenuContent
 };

package/dist/esm/index.js

@@ -10,13 +10,13 @@ import { AlertTitle as T } from "./components/alert/parts/AlertTitle.js";
 import { Anchor as P } from "./components/anchor/Anchor.js";
 import { AppLayout as A } from "./components/app-layout/AppLayout.js";
 import { AppMenu as R } from "./components/app-menu/AppMenu.js";
-import { AppMenuContext as I, AppMenuContextProvider as D, useAppMenuContext as G } from "./components/app-menu/parts/AppMenu.context.js";
-import { AppMenuFooter as y } from "./components/app-menu/parts/AppMenuFooter.js";
-import { AppMenuHeader as E } from "./components/app-menu/parts/AppMenuHeader.js";
-import { AppMenuNavContent as M } from "./components/app-menu/parts/AppMenuNavContent.js";
-import { Autocomplete as H } from "./components/autocomplete/Autocomplete.js";
+import { AppMenuContext as w, AppMenuContextProvider as D, useAppMenuContext as h } from "./components/app-menu/parts/AppMenu.context.js";
+import { AppMenuFooter as G } from "./components/app-menu/parts/AppMenuFooter.js";
+import { AppMenuHeader as M } from "./components/app-menu/parts/AppMenuHeader.js";
+import { AppMenuNavContent as E } from "./components/app-menu/parts/AppMenuNavContent.js";
+import { Autocomplete as N } from "./components/autocomplete/Autocomplete.js";
 import { AutocompleteItem as V, autocompleteItem as _ } from "./components/autocomplete/parts/AutocompleteItem.js";
-import { AutocompleteItemGroup as K, autocompleteItemGroup as Q } from "./components/autocomplete/parts/AutocompleteItemGroup.js";
+import { AutocompleteItemGroup as K, autocompleteItemGroup as W } from "./components/autocomplete/parts/AutocompleteItemGroup.js";
 import { Avatar as q } from "./components/avatar/Avatar.js";
 import { AvatarFallback as X } from "./components/avatar/parts/AvatarFallback.js";
 import { AvatarIcon as z } from "./components/avatar/parts/AvatarIcon.js";
@@ -30,16 +30,16 @@ import { BottomSheetFooter as uo, bottomSheetFooter as co } from "./components/b
 import { BottomSheetHeader as so, bottomSheetHeader as So } from "./components/bottom-sheet/parts/BottomSheetHeader.js";
 import { Breadcrumbs as Co } from "./components/breadcrumbs/Breadcrumbs.js";
 import { Breadcrumb as Fo } from "./components/breadcrumbs/parts/Breadcrumb.js";
-import { BREADCRUMB_CONTENT_MAX_LENGTH as Bo, RawBreadcrumbLink as Ao } from "./components/breadcrumbs/parts/RawBreadcrumbLink.js";
+import { BREADCRUMB_ITEM_MAX_WIDTH as Bo, RawBreadcrumbLink as Ao } from "./components/breadcrumbs/parts/RawBreadcrumbLink.js";
 import { Button as Ro } from "./components/button/Button.js";
-import { Card as Io, card as Do } from "./components/card/Card.js";
-import { CardTitle as ho } from "./components/card/parts/CardTitle.js";
+import { Card as wo, card as Do } from "./components/card/Card.js";
+import { CardTitle as yo } from "./components/card/parts/CardTitle.js";
 import { CardContent as Lo } from "./components/card/parts/CardContent.js";
-import { CheckboxGroup as vo, checkboxGroup as Mo } from "./components/checkbox-group/CheckboxGroup.js";
-import { Checkbox as Ho } from "./components/checkbox/Checkbox.js";
+import { CheckboxGroup as vo, checkboxGroup as Eo } from "./components/checkbox-group/CheckboxGroup.js";
+import { Checkbox as No } from "./components/checkbox/Checkbox.js";
 import { CheckboxStandalone as Vo } from "./components/checkbox/CheckboxStandalone.js";
 import { Collapsible as Uo } from "./components/collapsible/Collapsible.js";
-import { CollapsibleContent as Qo } from "./components/collapsible/parts/CollapsibleContent.js";
+import { CollapsibleContent as Wo } from "./components/collapsible/parts/CollapsibleContent.js";
 import { CollapsibleTitle as qo } from "./components/collapsible/parts/CollapsibleTitle.js";
 import { DataTable as Xo } from "./components/data-table/DataTable.js";
 import { DataTableRoot as zo, dataTableRoot as Yo } from "./components/data-table/parts/DataTableRoot.js";
@@ -56,16 +56,16 @@ import { DialogContent as be } from "./components/dialog/parts/DialogContent.js"
 import { DialogTitle as Te } from "./components/dialog/parts/DialogTitle.js";
 import { PromoDialog as Pe, promoDialog as Be } from "./components/promo-dialog/PromoDialog.js";
 import { PromoDialogHero as ke } from "./components/promo-dialog/parts/PromoDialogHero.js";
-import { PromoDialogSubtitle as we } from "./components/promo-dialog/parts/PromoDialogSubtitle.js";
+import { PromoDialogSubtitle as Ie } from "./components/promo-dialog/parts/PromoDialogSubtitle.js";
 import { PromoDialogContent as De } from "./components/promo-dialog/parts/PromoDialogContent.js";
-import { PromoDialogActions as he } from "./components/promo-dialog/parts/PromoDialogActions.js";
+import { PromoDialogActions as ye } from "./components/promo-dialog/parts/PromoDialogActions.js";
 import { PromoDialogTitle as Le } from "./components/promo-dialog/parts/PromoDialogTitle.js";
 import { EmptyState as ve } from "./components/empty-state/EmptyState.js";
-import { EmptyStateIcon as Ne } from "./components/empty-state/parts/EmptyStateIcon.js";
+import { EmptyStateIcon as He } from "./components/empty-state/parts/EmptyStateIcon.js";
 import { EmptyStateContent as Oe } from "./components/empty-state/parts/EmptyStateContent.js";
 import { EmptyStateActions as _e } from "./components/empty-state/parts/EmptyStateActions.js";
 import { EmptyStateGetStarted as Ke } from "./components/empty-state/presets/EmptyStateGetStarted.js";
-import { EmptyStateWaitingForData as We } from "./components/empty-state/presets/EmptyStateWaitingForData.js";
+import { EmptyStateWaitingForData as Qe } from "./components/empty-state/presets/EmptyStateWaitingForData.js";
 import { EmptyStateGoodJob as Je } from "./components/empty-state/presets/EmptyStateGoodJob.js";
 import { EmptyStateUpgradeRequired as je } from "./components/empty-state/presets/EmptyStateUpgradeRequired.js";
 import { EmptyStateNoSearchResults as Ye } from "./components/empty-state/presets/EmptyStateNoSearchResults.js";
@@ -78,13 +78,13 @@ import { FloatingActionBar as gr, floatingActionBar as sr } from "./components/f
 import { FilterToolbar as br, filterToolbar as Cr } from "./components/filter-toolbar/FilterToolbar.js";
 import { Flex as Fr, Stack as Pr } from "./components/flex/Flex.js";
 import { flex as Ar, flexItem as kr } from "./components/flex/Flex.variants.js";
-import { FlexItem as wr, StackItem as Ir } from "./components/flex/FlexItem.js";
-import { Form as Gr } from "./components/form/Form.js";
-import { FullPageLoader as yr, fullPageLoader as Lr } from "./components/full-page-loader/FullPageLoader.js";
-import { FunnelLayout as vr, funnelLayout as Mr } from "./components/funnel-layout/FunnelLayout.js";
-import { FunnelBody as Hr, funnelBody as Or } from "./components/funnel-layout/parts/FunnelBody.js";
+import { FlexItem as Ir, StackItem as wr } from "./components/flex/FlexItem.js";
+import { Form as hr } from "./components/form/Form.js";
+import { FullPageLoader as Gr, fullPageLoader as Lr } from "./components/full-page-loader/FullPageLoader.js";
+import { FunnelLayout as vr, funnelLayout as Er } from "./components/funnel-layout/FunnelLayout.js";
+import { FunnelBody as Nr, funnelBody as Or } from "./components/funnel-layout/parts/FunnelBody.js";
 import { FunnelPage as _r, funnelPage as Ur } from "./components/funnel-layout/parts/FunnelPage.js";
-import { FunnelPageAction as Qr } from "./components/funnel-layout/parts/FunnelPageAction.js";
+import { FunnelPageAction as Wr } from "./components/funnel-layout/parts/FunnelPageAction.js";
 import { FunnelPageActions as qr, funnelPageActions as Jr } from "./components/funnel-layout/parts/FunnelPageActions.js";
 import { FunnelPageContent as jr, funnelPageContent as zr } from "./components/funnel-layout/parts/FunnelPageContent.js";
 import { FunnelBackButton as Zr } from "./components/funnel-layout/parts/FunnelBackButton.js";
@@ -99,14 +99,14 @@ import { IconButton as Ct } from "./components/icon-button/IconButton.js";
 import { CircularIconButton as Ft, circularIconButton as Pt } from "./components/icon-button/CircularIconButton.js";
 import { Icon as At } from "./components/icon/Icon.js";
 import { Input as Rt } from "./components/input/Input.js";
-import { Label as It } from "./components/label/Label.js";
-import { RawLink as Gt, link as ht } from "./components/link/RawLink.js";
+import { Label as wt } from "./components/label/Label.js";
+import { RawLink as ht, link as yt } from "./components/link/RawLink.js";
 import { RawLinkButton as Lt } from "./components/link-button/RawLinkButton.js";
 import { ListView as vt } from "./components/list-view/ListView.js";
-import { RawListViewItem as Nt, listViewItem as Ht } from "./components/list-view/parts/RawListViewItem.js";
+import { RawListViewItem as Ht, listViewItem as Nt } from "./components/list-view/parts/RawListViewItem.js";
 import { ListViewSection as Vt, listViewSection as _t } from "./components/list-view/parts/ListViewSection.js";
 import { ListViewItemLabel as Kt } from "./components/list-view/parts/ListViewItemLabel.js";
-import { ListViewItemText as Wt } from "./components/list-view/parts/ListViewItemText.js";
+import { ListViewItemText as Qt } from "./components/list-view/parts/ListViewItemText.js";
 import { Menu as Jt } from "./components/menu/Menu.js";
 import { MenuContent as jt } from "./components/menu/parts/MenuContent.js";
 import { MenuHeader as Yt } from "./components/menu/parts/MenuHeader.js";
@@ -123,13 +123,13 @@ import { RawNavigationCard as bp } from "./components/navigation-card/Navigation
 import { NavigationCardGroup as Tp, navigationCardGroup as Fp } from "./components/navigation-card/parts/NavigationCardGroup.js";
 import { NavigationCardLabel as Bp } from "./components/navigation-card/parts/NavigationCardLabel.js";
 import { NavigationCardDescription as kp } from "./components/navigation-card/parts/NavigationCardDescription.js";
-import { NumberInput as wp, numberInput as Ip } from "./components/number-input/NumberInput.js";
-import { Page as Gp, page as hp } from "./components/page/Page.js";
-import { PageHeader as Lp, pageHeader as Ep } from "./components/page/parts/PageHeader.js";
-import { PageHeading as Mp } from "./components/page/parts/PageHeading.js";
-import { Pagination as Hp, pagination as Op } from "./components/pagination/Pagination.js";
+import { NumberInput as Ip, numberInput as wp } from "./components/number-input/NumberInput.js";
+import { Page as hp, page as yp } from "./components/page/Page.js";
+import { PageHeader as Lp, pageHeader as Mp } from "./components/page/parts/PageHeader.js";
+import { PageHeading as Ep } from "./components/page/parts/PageHeading.js";
+import { Pagination as Np, pagination as Op } from "./components/pagination/Pagination.js";
 import { PaginationContent as _p, paginationContent as Up } from "./components/pagination/parts/PaginationContent.js";
-import { PaginationItem as Qp } from "./components/pagination/parts/PaginationItem.js";
+import { PaginationItem as Wp } from "./components/pagination/parts/PaginationItem.js";
 import { RawPaginationLink as qp, paginationLink as Jp } from "./components/pagination/parts/RawPaginationLink.js";
 import { RawPaginationPrevious as jp } from "./components/pagination/parts/RawPaginationPrevious.js";
 import { RawPaginationNext as Yp } from "./components/pagination/parts/RawPaginationNext.js";
@@ -146,15 +146,15 @@ import { RadioButtonGroup as Sa } from "./components/radio-button-group/RadioBut
 import { RadioButton as Ca, radioButton as Ta } from "./components/radio-button-group/parts/RadioButton.js";
 import { RadioButtonHelper as Pa } from "./components/radio-button-group/parts/RadioButtonHelper.js";
 import { Search as Aa, search as ka } from "./components/search/Search.js";
-import { SegmentedButtonGroup as wa } from "./components/segmented-button-group/SegmentedButtonGroup.js";
+import { SegmentedButtonGroup as Ia } from "./components/segmented-button-group/SegmentedButtonGroup.js";
 import { ToggleButton as Da } from "./components/segmented-button-group/parts/ToggleButton.js";
-import { SelectableButtonGroup as ha, selectableButtonGroup as ya } from "./components/selectable-button-group/SelectableButtonGroup.js";
-import { SelectableButton as Ea, selectableButton as va } from "./components/selectable-button-group/parts/SelectableButton.js";
-import { SelectableCardCheckboxGroup as Na } from "./components/selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.js";
+import { SelectableButtonGroup as ya, selectableButtonGroup as Ga } from "./components/selectable-button-group/SelectableButtonGroup.js";
+import { SelectableButton as Ma, selectableButton as va } from "./components/selectable-button-group/parts/SelectableButton.js";
+import { SelectableCardCheckboxGroup as Ha } from "./components/selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.js";
 import { SelectableCardCheckbox as Oa } from "./components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.js";
 import { SelectableCardRadioGroup as _a } from "./components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js";
 import { SelectableCardRadio as Ka } from "./components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js";
-import { Select as Wa } from "./components/select/Select.js";
+import { Select as Qa } from "./components/select/Select.js";
 import { SelectButton as Ja } from "./components/select/parts/SelectButton.js";
 import { SelectOption as ja } from "./components/select/parts/SelectOption.js";
 import { SelectOptionGroup as Ya } from "./components/select/parts/SelectOptionGroup.js";
@@ -168,11 +168,11 @@ import { Spinner as sm } from "./components/spinner/Spinner.js";
 import { Table as bm, TableRoot as Cm } from "./components/table/Table.js";
 import { TableBody as Fm, tableBody as Pm } from "./components/table/parts/TableBody.js";
 import { TableCell as Am, tableCell as km } from "./components/table/parts/TableCell.js";
-import { TableColumnHeader as wm, tableColumnHeader as Im } from "./components/table/parts/TableColumnHeader.js";
-import { TableEmptyState as Gm, TableEmptyStateError as hm, TableEmptyStateLoading as ym, TableEmptyStateNoData as Lm, TableEmptyStateText as Em, TableNoSearchResults as vm, tableEmptyState as Mm } from "./components/table/parts/TableEmptyState.js";
-import { TableHeader as Hm, tableHeader as Om } from "./components/table/parts/TableHeader.js";
+import { TableColumnHeader as Im, tableColumnHeader as wm } from "./components/table/parts/TableColumnHeader.js";
+import { TableEmptyState as hm, TableEmptyStateError as ym, TableEmptyStateLoading as Gm, TableEmptyStateNoData as Lm, TableEmptyStateText as Mm, TableNoSearchResults as vm, tableEmptyState as Em } from "./components/table/parts/TableEmptyState.js";
+import { TableHeader as Nm, tableHeader as Om } from "./components/table/parts/TableHeader.js";
 import { TablePagination as _m, tablePagination as Um } from "./components/table/parts/TablePagination.js";
-import { TableRow as Qm, tableRow as Wm } from "./components/table/parts/TableRow.js";
+import { TableRow as Wm, tableRow as Qm } from "./components/table/parts/TableRow.js";
 import { Tabs as Jm } from "./components/tabs/Tabs.js";
 import { RawTab as jm } from "./components/tabs/parts/RawTab.js";
 import { TabList as Ym } from "./components/tabs/parts/TabList.js";
@@ -188,12 +188,12 @@ import { Timeline as Cx } from "./components/timeline/Timeline.js";
 import { TimelineStep as Fx } from "./components/timeline/parts/TimelineStep.js";
 import { TimelineStepHeader as Bx } from "./components/timeline/parts/TimelineStepHeader.js";
 import { TimelineStepDescription as kx } from "./components/timeline/parts/TimelineStepDescription.js";
-import { TOAST_CONFIG as wx, ToastManager as Ix } from "./components/toast/ToastManager.js";
-import { toast as Gx } from "./components/toast/toast.js";
-import { ToggleSwitchGroup as yx, toggleSwitchGroup as Lx } from "./components/toggle-switch-group/ToggleSwitchGroup.js";
-import { ToggleSwitch as vx, toggleSwitch as Mx } from "./components/toggle-switch/ToggleSwitch.js";
-import { Tooltip as Hx } from "./components/tooltip/Tooltip.js";
-import { DESKTOP_BREAKPOINTS as Vx, MOBILE_BREAKPOINTS as _x, isDesktopBreakpoint as Ux, isMobileBreakpoint as Kx, useBreakpointListener as Qx } from "./hooks/use-breakpoint-listener.js";
+import { TOAST_CONFIG as Ix, ToastManager as wx } from "./components/toast/ToastManager.js";
+import { toast as hx } from "./components/toast/toast.js";
+import { ToggleSwitchGroup as Gx, toggleSwitchGroup as Lx } from "./components/toggle-switch-group/ToggleSwitchGroup.js";
+import { ToggleSwitch as vx, toggleSwitch as Ex } from "./components/toggle-switch/ToggleSwitch.js";
+import { Tooltip as Nx } from "./components/tooltip/Tooltip.js";
+import { DESKTOP_BREAKPOINTS as Vx, MOBILE_BREAKPOINTS as _x, isDesktopBreakpoint as Ux, isMobileBreakpoint as Kx, useBreakpointListener as Wx } from "./hooks/use-breakpoint-listener.js";
 import { useContainerQueryLevel as qx } from "./hooks/use-container-query-level.js";
 import { useMediaQuery as Xx } from "./hooks/use-media-query.js";
 import { useUnityForm as zx } from "./hooks/use-form.js";
@@ -211,14 +211,14 @@ import { NumberField as Cn, numberField as Tn } from "./components/number-field/
 import { RadioButtonGroupField as Pn } from "./components/radio-button-group-field/RadioButtonGroupField.js";
 import { SelectableButtonGroupField as An } from "./components/selectable-button-group-field/SelectableButtonGroupField.js";
 import { SelectableCardCheckboxGroupField as Rn } from "./components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.js";
-import { SelectableCardRadioGroupField as In } from "./components/selectable-card-radio-group-field/SelectableCardRadioGroupField.js";
-import { SelectField as Gn } from "./components/select-field/SelectField.js";
-import { TextField as yn } from "./components/text-field/TextField.js";
-import { ToggleSwitchField as En } from "./components/toggle-switch-field/ToggleSwitchField.js";
-import { ToggleSwitchGroupField as Mn } from "./components/toggle-switch-group-field/ToggleSwitchGroupField.js";
-import { useTanstackUnityForm as Hn, withFieldGroup as On, withForm as Vn } from "./hooks/use-tanstack-form.js";
+import { SelectableCardRadioGroupField as wn } from "./components/selectable-card-radio-group-field/SelectableCardRadioGroupField.js";
+import { SelectField as hn } from "./components/select-field/SelectField.js";
+import { TextField as Gn } from "./components/text-field/TextField.js";
+import { ToggleSwitchField as Mn } from "./components/toggle-switch-field/ToggleSwitchField.js";
+import { ToggleSwitchGroupField as En } from "./components/toggle-switch-group-field/ToggleSwitchGroupField.js";
+import { useTanstackUnityForm as Nn, withFieldGroup as On, withForm as Vn } from "./hooks/use-tanstack-form.js";
 import { useFieldContext as Un, useFormContext as Kn } from "./hooks/tanstack-form-context.js";
-import { useFieldA11yContext as Wn } from "./components/form-field/TanstackFormField.context.js";
+import { useFieldA11yContext as Qn } from "./components/form-field/TanstackFormField.context.js";
 import { fieldRevalidateLogic as Jn } from "./utils/field-revalidate-logic.js";
 import { NoopRouterProvider as jn, RouterProvider as zn, useRouter as Yn } from "./providers/router/RouterProvider.js";
 import { Carousel as $n, carousel as of } from "./components/carousel/Carousel.js";
@@ -243,12 +243,12 @@ export {
   P as Anchor,
   A as AppLayout,
   R as AppMenu,
-  I as AppMenuContext,
+  w as AppMenuContext,
   D as AppMenuContextProvider,
-  y as AppMenuFooter,
-  E as AppMenuHeader,
-  M as AppMenuNavContent,
-  H as Autocomplete,
+  G as AppMenuFooter,
+  M as AppMenuHeader,
+  E as AppMenuNavContent,
+  N as Autocomplete,
   V as AutocompleteItem,
   K as AutocompleteItemGroup,
   q as Avatar,
@@ -256,7 +256,7 @@ export {
   z as AvatarIcon,
   Z as AvatarImage,
   oo as AvatarPair,
-  Bo as BREADCRUMB_CONTENT_MAX_LENGTH,
+  Bo as BREADCRUMB_ITEM_MAX_WIDTH,
   po as Badge,
   mo as BottomSheet,
   fo as BottomSheetContent,
@@ -265,22 +265,22 @@ export {
   Fo as Breadcrumb,
   Co as Breadcrumbs,
   Ro as Button,
-  Io as Card,
+  wo as Card,
   Lo as CardContent,
-  ho as CardTitle,
+  yo as CardTitle,
   $n as Carousel,
   nf as CarouselContent,
   rf as CarouselHeader,
   af as CarouselNav,
   uf as CarouselSlide,
-  Ho as Checkbox,
+  No as Checkbox,
   Zx as CheckboxField,
   vo as CheckboxGroup,
   on as CheckboxGroupField,
   Vo as CheckboxStandalone,
   Ft as CircularIconButton,
   Uo as Collapsible,
-  Qo as CollapsibleContent,
+  Wo as CollapsibleContent,
   qo as CollapsibleTitle,
   Vx as DESKTOP_BREAKPOINTS,
   Xo as DataTable,
@@ -303,11 +303,11 @@ export {
   Oe as EmptyStateContent,
   Ke as EmptyStateGetStarted,
   Je as EmptyStateGoodJob,
-  Ne as EmptyStateIcon,
+  He as EmptyStateIcon,
   Ye as EmptyStateNoSearchResults,
   je as EmptyStateUpgradeRequired,
   $e as EmptyStateUseDesktop,
-  We as EmptyStateWaitingForData,
+  Qe as EmptyStateWaitingForData,
   er as ErrorState,
   xr as FieldGroup,
   pr as Fieldset,
@@ -317,20 +317,20 @@ export {
   lr as FilterLabels,
   br as FilterToolbar,
   Fr as Flex,
-  wr as FlexItem,
+  Ir as FlexItem,
   gr as FloatingActionBar,
-  Gr as Form,
+  hr as Form,
   nn as FormControl,
   ln as FormFeedbackText,
   pn as FormField,
   dn as FormHelperText,
   gn as FormLabel,
-  yr as FullPageLoader,
+  Gr as FullPageLoader,
   Zr as FunnelBackButton,
-  Hr as FunnelBody,
+  Nr as FunnelBody,
   vr as FunnelLayout,
   _r as FunnelPage,
-  Qr as FunnelPageAction,
+  Wr as FunnelPageAction,
   qr as FunnelPageActions,
   jr as FunnelPageContent,
   ot as FunnelPageFooter,
@@ -342,10 +342,10 @@ export {
   At as Icon,
   Ct as IconButton,
   Rt as Input,
-  It as Label,
+  wt as Label,
   vt as ListView,
   Kt as ListViewItemLabel,
-  Wt as ListViewItemText,
+  Qt as ListViewItemText,
   Vt as ListViewSection,
   _x as MOBILE_BREAKPOINTS,
   Jt as Menu,
@@ -364,14 +364,14 @@ export {
   Bp as NavigationCardLabel,
   jn as NoopRouterProvider,
   Cn as NumberField,
-  wp as NumberInput,
-  Gp as Page,
+  Ip as NumberInput,
+  hp as Page,
   Lp as PageHeader,
-  Mp as PageHeading,
-  Hp as Pagination,
+  Ep as PageHeading,
+  Np as Pagination,
   _p as PaginationContent,
   $p as PaginationEllipsis,
-  Qp as PaginationItem,
+  Wp as PaginationItem,
   aa as PayFitBrand,
   xa as PayFitBrandPreprod,
   fa as PhoneNumberInput,
@@ -380,10 +380,10 @@ export {
   sf as PopoverTrigger,
   ga as ProgressBar,
   Pe as PromoDialog,
-  he as PromoDialogActions,
+  ye as PromoDialogActions,
   De as PromoDialogContent,
   ke as PromoDialogHero,
-  we as PromoDialogSubtitle,
+  Ie as PromoDialogSubtitle,
   Le as PromoDialogTitle,
   Ca as RadioButton,
   Sa as RadioButtonGroup,
@@ -391,9 +391,9 @@ export {
   Pa as RadioButtonHelper,
   Ao as RawBreadcrumbLink,
   mn as RawFormContextualLink,
-  Gt as RawLink,
+  ht as RawLink,
   Lt as RawLinkButton,
-  Nt as RawListViewItem,
+  Ht as RawListViewItem,
   $t as RawMenuItem,
   gp as RawNavItem,
   bp as RawNavigationCard,
@@ -405,22 +405,22 @@ export {
   xx as RawTask,
   zn as RouterProvider,
   Aa as Search,
-  wa as SegmentedButtonGroup,
-  Wa as Select,
+  Ia as SegmentedButtonGroup,
+  Qa as Select,
   Ja as SelectButton,
-  Gn as SelectField,
+  hn as SelectField,
   ja as SelectOption,
   Ya as SelectOptionGroup,
   $a as SelectOptionHelper,
-  Ea as SelectableButton,
-  ha as SelectableButtonGroup,
+  Ma as SelectableButton,
+  ya as SelectableButtonGroup,
   An as SelectableButtonGroupField,
   Oa as SelectableCardCheckbox,
-  Na as SelectableCardCheckboxGroup,
+  Ha as SelectableCardCheckboxGroup,
   Rn as SelectableCardCheckboxGroupField,
   Ka as SelectableCardRadio,
   _a as SelectableCardRadioGroup,
-  In as SelectableCardRadioGroupField,
+  wn as SelectableCardRadioGroupField,
   em as SidePanel,
   pm as SidePanelContent,
   xm as SidePanelFooter,
@@ -429,44 +429,44 @@ export {
   cm as SkipLinks,
   sm as Spinner,
   Pr as Stack,
-  Ir as StackItem,
-  wx as TOAST_CONFIG,
+  wr as StackItem,
+  Ix as TOAST_CONFIG,
   Ym as TabList,
   $m as TabPanel,
   bm as Table,
   Fm as TableBody,
   Am as TableCell,
-  wm as TableColumnHeader,
-  Gm as TableEmptyState,
-  hm as TableEmptyStateError,
-  ym as TableEmptyStateLoading,
+  Im as TableColumnHeader,
+  hm as TableEmptyState,
+  ym as TableEmptyStateError,
+  Gm as TableEmptyStateLoading,
   Lm as TableEmptyStateNoData,
-  Em as TableEmptyStateText,
-  Hm as TableHeader,
+  Mm as TableEmptyStateText,
+  Nm as TableHeader,
   vm as TableNoSearchResults,
   _m as TablePagination,
   Cm as TableRoot,
-  Qm as TableRow,
+  Wm as TableRow,
   Jm as Tabs,
   ix as TaskGroup,
   ex as TaskMenu,
   gx as Text,
   ux as TextArea,
-  yn as TextField,
+  Gn as TextField,
   Cx as Timeline,
   Fx as TimelineStep,
   kx as TimelineStepDescription,
   Bx as TimelineStepHeader,
-  Ix as ToastManager,
+  wx as ToastManager,
   Da as ToggleButton,
   vx as ToggleSwitch,
-  En as ToggleSwitchField,
-  yx as ToggleSwitchGroup,
-  Mn as ToggleSwitchGroupField,
-  Hx as Tooltip,
+  Mn as ToggleSwitchField,
+  Gx as ToggleSwitchGroup,
+  En as ToggleSwitchGroupField,
+  Nx as Tooltip,
   u as actionBarRoot,
   _ as autocompleteItem,
-  Q as autocompleteItemGroup,
+  W as autocompleteItemGroup,
   xo as bottomSheet,
   io as bottomSheetContent,
   co as bottomSheetFooter,
@@ -477,7 +477,7 @@ export {
   tf as carouselHeader,
   mf as carouselNav,
   df as carouselSlide,
-  Mo as checkboxGroup,
+  Eo as checkboxGroup,
   Pt as circularIconButton,
   Yo as dataTableRoot,
   ue as dialog,
@@ -492,7 +492,7 @@ export {
   sr as floatingActionBar,
   Lr as fullPageLoader,
   Or as funnelBody,
-  Mr as funnelLayout,
+  Er as funnelLayout,
   Ur as funnelPage,
   Jr as funnelPageActions,
   zr as funnelPageContent,
@@ -505,15 +505,15 @@ export {
   gt as gridItem,
   Ux as isDesktopBreakpoint,
   Kx as isMobileBreakpoint,
-  ht as link,
-  Ht as listViewItem,
+  yt as link,
+  Nt as listViewItem,
   _t as listViewSection,
   sp as navItemBase,
   Fp as navigationCardGroup,
   Tn as numberField,
-  Ip as numberInput,
-  hp as page,
-  Ep as pageHeader,
+  wp as numberInput,
+  yp as page,
+  Mp as pageHeader,
   Op as pagination,
   Up as paginationContent,
   Jp as paginationLink,
@@ -523,36 +523,36 @@ export {
   nx as rawTask,
   ka as search,
   va as selectableButton,
-  ya as selectableButtonGroup,
+  Ga as selectableButtonGroup,
   rm as sidePanel,
   am as sidePanelContent,
   nm as sidePanelFooter,
   lm as sidePanelHeader,
   Pm as tableBody,
   km as tableCell,
-  Im as tableColumnHeader,
-  Mm as tableEmptyState,
+  wm as tableColumnHeader,
+  Em as tableEmptyState,
   Om as tableHeader,
   Um as tablePagination,
-  Wm as tableRow,
+  Qm as tableRow,
   rx as taskMenu,
   Sx as text,
   dx as textArea,
-  Gx as toast,
-  Mx as toggleSwitch,
+  hx as toast,
+  Ex as toggleSwitch,
   Lx as toggleSwitchGroup,
-  G as useAppMenuContext,
+  h as useAppMenuContext,
   Tf as useAsyncList,
-  Qx as useBreakpointListener,
+  Wx as useBreakpointListener,
   qx as useContainerQueryLevel,
-  Wn as useFieldA11yContext,
+  Qn as useFieldA11yContext,
   Un as useFieldContext,
   Kn as useFormContext,
   Xx as useMediaQuery,
   ta as usePaginationState,
   ea as usePaginationWindow,
   Yn as useRouter,
-  Hn as useTanstackUnityForm,
+  Nn as useTanstackUnityForm,
   zx as useUnityForm,
   On as withFieldGroup,
   Vn as withForm

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.26.1",
+  "version": "2.28.0",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-illustrations": "2.26.1",
+    "@payfit/unity-illustrations": "2.28.0",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.28.0",
@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.26.1",
-    "@payfit/unity-themes": "2.26.1",
+    "@payfit/unity-icons": "2.28.0",
+    "@payfit/unity-themes": "2.28.0",
     "@storybook/react-vite": "^10.3.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -89,13 +89,15 @@
     "@figma/code-connect": "1.4.1",
     "@hookform/devtools": "4.4.0",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-icons": "2.26.1",
-    "@payfit/unity-illustrations": "2.26.1",
-    "@payfit/unity-themes": "2.26.1",
+    "@payfit/unity-icons": "2.28.0",
+    "@payfit/unity-illustrations": "2.28.0",
+    "@payfit/unity-themes": "2.28.0",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-designs": "11.1.3",
     "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-links": "10.3.5",
+    "@storybook/addon-mcp": "0.6.0",
+    "@storybook/addon-themes": "10.3.5",
     "@storybook/addon-vitest": "10.3.5",
     "@storybook/react-vite": "10.3.5",
     "@tanstack/react-devtools": "0.10.1",