@payfit/unity-components 2.20.3 → 2.21.1

package/dist/esm/components/floating-action-bar/FloatingActionBar.d.ts

@@ -0,0 +1,87 @@
+import { ReactElement, RefObject } from 'react';
+export declare const floatingActionBar: import('tailwind-variants').TVReturnType<{
+    isHidden: {
+        true: string;
+        false: string;
+    };
+    reduceMotion: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    isHidden: {
+        true: string;
+        false: string;
+    };
+    reduceMotion: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isHidden: {
+        true: string;
+        false: string;
+    };
+    reduceMotion: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface FloatingActionBarProps {
+    /**
+     * Accessible label for the toolbar.
+     * @default "Page actions"
+     */
+    'aria-label'?: string;
+    /**
+     * 1 to 3 action buttons. Exceeding 3 is a type error and triggers a
+     * runtime warning in development.
+     */
+    children: ReactElement | [ReactElement, ReactElement] | [ReactElement, ReactElement, ReactElement];
+    /**
+     * Optional explicit scroll container ref. If omitted, the component
+     * auto-detects the nearest scrollable ancestor.
+     */
+    scrollContainerRef?: RefObject<Element | null>;
+}
+/**
+ * `FloatingActionBar` renders a fixed-bottom action bar on mobile viewports (`xs` and `sm`).
+ * On `md` and larger breakpoints the component renders `null`.
+ * The bar hides when the user scrolls down and reappears when they scroll up.
+ * It always snaps back into view when the user reaches the bottom of the page,
+ * ensuring actions are accessible regardless of scroll position.
+ * When placed inside a `Page` component, the page automatically adds bottom padding
+ * via `:has([data-unity-fab])` so content is never hidden behind the bar.
+ * When `prefers-reduced-motion: reduce` is active, the bar stays always visible and
+ * no CSS transitions are applied.
+ * @param props.aria-label - Accessible label for the toolbar. Announced by screen readers
+ *   when the FAB receives focus. Defaults to `"Page actions"`.
+ * @param props.children - 1 to 3 `Button` components rendered full-width and stacked
+ *   vertically. Passing more than 3 is a TypeScript type error.
+ * @param props.scrollContainerRef - Optional explicit scroll container ref. If omitted,
+ *   the component auto-detects the nearest scrollable ancestor.
+ * @example
+ * ```tsx
+ * // Single primary action
+ * <FloatingActionBar aria-label="Page actions">
+ *   <Button variant="primary" size="full">Request leave</Button>
+ * </FloatingActionBar>
+ *
+ * // Two stacked actions
+ * <FloatingActionBar aria-label="Page actions">
+ *   <Button variant="primary" size="full">Save changes</Button>
+ *   <Button variant="secondary" size="full">Cancel</Button>
+ * </FloatingActionBar>
+ * ```
+ * @remarks
+ * - Always provide an `aria-label` that describes the toolbar's purpose to screen reader users.
+ * - Buttons passed as children should use `size="full"` to fill the available width.
+ * - Place the component as the last child of a `Page` to get automatic bottom-padding.
+ * - For a custom scroll container (e.g. a modal body), pass a `scrollContainerRef` to
+ *   opt out of ancestor auto-detection.
+ * @see {@link FloatingActionBarProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/floating-action-bar GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-floatingactionbar--docs unity-components.payfit.io}
+ */
+declare const FloatingActionBar: import('react').ForwardRefExoticComponent<FloatingActionBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export { FloatingActionBar };

package/dist/esm/components/floating-action-bar/FloatingActionBar.js

@@ -0,0 +1,68 @@
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as g, useState as v, useCallback as r } from "react";
+import { uyTv as x } from "@payfit/unity-themes";
+import { Toolbar as B } from "react-aria-components";
+import { useBreakpointListener as k, isDesktopBreakpoint as F } from "../../hooks/use-breakpoint-listener.js";
+import { useMediaQuery as M } from "../../hooks/use-media-query.js";
+import { useScrollDirection as h } from "../../hooks/use-scroll-direction.js";
+const R = x({
+  base: [
+    "uy:fixed uy:bottom-0 uy:left-0 uy:right-0 uy:z-20",
+    "uy:flex uy:flex-col uy:gap-125",
+    "uy:px-200 uy:pt-300",
+    // Safe-area bottom padding — at least spacing-100
+    "uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-100))]",
+    // Gradient: transparent at top → surface-neutral at 14% → solid for the rest
+    "uy:bg-linear-to-b uy:from-surface-neutral/0 uy:from-0% uy:via-surface-neutral uy:via-9% uy:to-surface-neutral uy:to-100%"
+  ],
+  variants: {
+    isHidden: {
+      true: "uy:translate-y-full uy:focus-within:translate-0",
+      false: "uy:translate-y-0"
+    },
+    reduceMotion: {
+      true: "",
+      false: "uy:transition-transform uy:duration-300 uy:ease-in-out"
+    }
+  },
+  defaultVariants: {
+    isHidden: !1,
+    reduceMotion: !1
+  }
+}), w = g(
+  ({ children: n, "aria-label": s = "Page actions", scrollContainerRef: l }, e) => {
+    const c = k(), a = M(
+      "(prefers-reduced-motion: reduce)"
+    ), [i, f] = h(l), [y, u] = v(!1), t = !a && !y && f === "down", d = r(() => {
+      t && u(!0);
+    }, [t]), m = r(() => {
+      u(!1);
+    }, []), p = r(
+      (o) => {
+        i.current = o, typeof e == "function" ? e(o) : e && (e.current = o);
+      },
+      [i, e]
+    );
+    return F(c) ? null : /* @__PURE__ */ b(
+      B,
+      {
+        ref: p,
+        "data-unity-fab": !0,
+        "aria-label": s,
+        orientation: "vertical",
+        className: R({
+          isHidden: t,
+          reduceMotion: a
+        }),
+        onFocus: d,
+        onBlur: m,
+        children: n
+      }
+    );
+  }
+);
+w.displayName = "FloatingActionBar";
+export {
+  w as FloatingActionBar,
+  R as floatingActionBar
+};

package/dist/esm/components/floating-action-bar/figma/FloatingActionBar.figma.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export { code as example };
+    export let imports: string[];
+    export let id: string;
+}
+export default _default;
+declare const code: any;

package/dist/esm/components/page/Page.d.ts

@@ -5,7 +5,7 @@ export declare const page: import('tailwind-variants').TVReturnType<{
         default: string[];
         legacy__midnight: string[];
     };
-}, undefined, "uy:min-h-dvh uy:flex uy:flex-col uy:gap-400", {
+}, undefined, string[], {
     variant: {
         default: string[];
         legacy__midnight: string[];
@@ -15,7 +15,7 @@ export declare const page: import('tailwind-variants').TVReturnType<{
         default: string[];
         legacy__midnight: string[];
     };
-}, undefined, "uy:min-h-dvh uy:flex uy:flex-col uy:gap-400", unknown, unknown, undefined>>;
+}, undefined, string[], unknown, unknown, undefined>>;
 export interface PageProps extends PropsWithChildren {
     /**
      * The variant of the page.

package/dist/esm/components/page/Page.js

@@ -1,8 +1,12 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { uyTv as o } from "@payfit/unity-themes";
-const t = o({
-  base: "uy:min-h-dvh uy:flex uy:flex-col uy:gap-400",
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+const o = m({
+  base: [
+    "uy:min-h-dvh uy:flex uy:flex-col uy:gap-400",
+    // When a FloatingActionBar is present add safe scroll space on mobile
+    "uy:[&:has([data-unity-fab])]:pb-[200px] uy:[&:has([data-unity-fab])]:md:pb-0"
+  ],
   variants: {
     variant: {
       default: [
@@ -22,10 +26,10 @@ const t = o({
   defaultVariants: {
     variant: "default"
   }
-}), l = m(
+}), l = e(
   ({ children: r, variant: a, ...u }, d) => {
-    const y = t({ variant: a });
-    return /* @__PURE__ */ e(
+    const y = o({ variant: a });
+    return /* @__PURE__ */ t(
       "main",
       {
         ...u,
@@ -41,5 +45,5 @@ const t = o({
 l.displayName = "Page";
 export {
   l as Page,
-  t as page
+  o as page
 };

package/dist/esm/hooks/use-scroll-direction.d.ts

@@ -0,0 +1,13 @@
+import { MutableRefObject, RefObject } from 'react';
+export type ScrollDirection = 'up' | 'down' | 'idle';
+/**
+ * Detects the scroll direction from the nearest scrollable ancestor.
+ * @param scrollContainerRef - Optional explicit scroll container. If omitted, the
+ *   hook walks the DOM from the returned `elementRef` to find the nearest scrollable
+ *   ancestor, falling back to `window`.
+ * @returns A tuple of `[elementRef, direction]`. Attach `elementRef` to the
+ *   component's root element to enable auto-detection.
+ * @remarks
+ * - When `prefers-reduced-motion` is active, direction is always `'idle'`.
+ */
+export declare function useScrollDirection(scrollContainerRef?: RefObject<Element | null>): [MutableRefObject<Element | null>, ScrollDirection];

package/dist/esm/hooks/use-scroll-direction.js

@@ -0,0 +1,56 @@
+import { useState as m, useRef as s, useEffect as a } from "react";
+import { useMediaQuery as S } from "./use-media-query.js";
+const f = 10;
+function E(r) {
+  let e = r.parentElement;
+  for (; e; ) {
+    const c = getComputedStyle(e).overflowY;
+    if (c === "auto" || c === "scroll")
+      return e;
+    e = e.parentElement;
+  }
+  return null;
+}
+function p(r) {
+  return r === window ? window.scrollY : r.scrollTop;
+}
+function h(r) {
+  if (r === window)
+    return window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 1;
+  const e = r;
+  return e.scrollTop + e.clientHeight >= e.scrollHeight - 1;
+}
+function T(r) {
+  const e = S("(prefers-reduced-motion: reduce)"), [c, u] = m("idle"), i = s(null), l = s(0), t = s(0);
+  return a(() => {
+    if (e) {
+      u("idle");
+      return;
+    }
+    const o = (() => {
+      if (r?.current) return r.current;
+      if (i.current) {
+        const n = E(i.current);
+        if (n) return n;
+      }
+      return window;
+    })();
+    l.current = p(o), t.current = 0;
+    const d = () => {
+      const n = p(o);
+      if (n < 0) return;
+      if (h(o)) {
+        t.current = 0, l.current = n, u("up");
+        return;
+      }
+      const w = n - l.current;
+      t.current += w, l.current = n, t.current > f ? (t.current = 0, u("down")) : t.current < -f && (t.current = 0, u("up"));
+    };
+    return o.addEventListener("scroll", d, { passive: !0 }), () => {
+      o.removeEventListener("scroll", d);
+    };
+  }, [e, r]), [i, e ? "idle" : c];
+}
+export {
+  T as useScrollDirection
+};

package/dist/esm/index.d.ts

@@ -72,6 +72,7 @@ export * from './components/error-state/ErrorState.js';
 export * from './components/fieldset/Fieldset.js';
 export * from './components/fieldset/parts/FieldGroup.js';
 export * from './components/filter/Filter.js';
+export * from './components/floating-action-bar/FloatingActionBar.js';
 export * from './components/filter-toolbar/FilterToolbar.js';
 export * from './components/flex/Flex.js';
 export * from './components/flex/Flex.variants.js';

package/dist/esm/index.js

@@ -72,159 +72,160 @@ import { ErrorState as Ye, errorState as Ze } from "./components/error-state/Err
 import { Fieldset as or, fieldset as er } from "./components/fieldset/Fieldset.js";
 import { FieldGroup as tr } from "./components/fieldset/parts/FieldGroup.js";
 import { Filter as ar, FilterControls as mr, FilterLabels as xr, filterContainer as nr, filterDismissButton as fr } from "./components/filter/Filter.js";
-import { FilterToolbar as lr, filterToolbar as ur } from "./components/filter-toolbar/FilterToolbar.js";
-import { Flex as cr, Stack as sr } from "./components/flex/Flex.js";
-import { flex as Sr, flexItem as br } from "./components/flex/Flex.variants.js";
-import { FlexItem as Cr, StackItem as Fr } from "./components/flex/FlexItem.js";
-import { Form as Br } from "./components/form/Form.js";
-import { FullPageLoader as kr, fullPageLoader as Rr } from "./components/full-page-loader/FullPageLoader.js";
-import { FunnelLayout as wr, funnelLayout as Gr } from "./components/funnel-layout/FunnelLayout.js";
-import { FunnelBody as yr, funnelBody as Dr } from "./components/funnel-layout/parts/FunnelBody.js";
-import { FunnelPage as Er, funnelPage as vr } from "./components/funnel-layout/parts/FunnelPage.js";
-import { FunnelPageAction as Nr } from "./components/funnel-layout/parts/FunnelPageAction.js";
-import { FunnelPageActions as Or, funnelPageActions as Vr } from "./components/funnel-layout/parts/FunnelPageActions.js";
-import { FunnelPageContent as Ur, funnelPageContent as Kr } from "./components/funnel-layout/parts/FunnelPageContent.js";
-import { FunnelBackButton as Wr } from "./components/funnel-layout/parts/FunnelBackButton.js";
-import { FunnelPageFooter as Jr, funnelPageFooter as Xr } from "./components/funnel-layout/parts/FunnelPageFooter.js";
-import { FunnelPageHeader as zr, funnelPageHeader as Yr } from "./components/funnel-layout/parts/FunnelPageHeader.js";
-import { FunnelSidebar as $r, funnelSidebar as ot } from "./components/funnel-layout/parts/FunnelSidebar.js";
-import { FunnelTopBar as rt, funnelTopBar as tt } from "./components/funnel-layout/parts/FunnelTopBar.js";
-import { Grid as at } from "./components/grid/Grid.js";
-import { grid as xt, gridItem as nt } from "./components/grid/Grid.variants.js";
-import { GridItem as it } from "./components/grid/GridItem.js";
-import { IconButton as ut } from "./components/icon-button/IconButton.js";
-import { CircularIconButton as ct, circularIconButton as st } from "./components/icon-button/CircularIconButton.js";
-import { Icon as St } from "./components/icon/Icon.js";
-import { Input as Tt } from "./components/input/Input.js";
-import { Label as Ft } from "./components/label/Label.js";
-import { RawLink as Bt, link as At } from "./components/link/RawLink.js";
-import { ListView as Rt } from "./components/list-view/ListView.js";
-import { RawListViewItem as wt, listViewItem as Gt } from "./components/list-view/parts/RawListViewItem.js";
-import { ListViewSection as yt, listViewSection as Dt } from "./components/list-view/parts/ListViewSection.js";
-import { ListViewItemLabel as Et } from "./components/list-view/parts/ListViewItemLabel.js";
-import { ListViewItemText as Mt } from "./components/list-view/parts/ListViewItemText.js";
-import { Menu as Ht } from "./components/menu/Menu.js";
-import { MenuContent as Vt } from "./components/menu/parts/MenuContent.js";
-import { MenuHeader as Ut } from "./components/menu/parts/MenuHeader.js";
-import { RawMenuItem as Qt } from "./components/menu/parts/RawMenuItem.js";
-import { MenuSeparator as qt } from "./components/menu/parts/MenuSeparator.js";
-import { MenuTrigger as Xt } from "./components/menu/parts/MenuTrigger.js";
-import { MultiSelect as zt } from "./components/multi-select/MultiSelect.js";
-import { MultiSelectOptGroup as Zt } from "./components/multi-select/parts/MultiSelectOptGroup.js";
-import { MultiSelectOption as op } from "./components/multi-select/parts/MultiSelectOption.js";
-import { Nav as rp } from "./components/nav/Nav.js";
-import { NavGroup as pp } from "./components/nav/parts/NavGroup.js";
-import { RawNavItem as mp, navItemBase as xp } from "./components/nav/parts/RawNavItem.js";
-import { RawNavigationCard as fp } from "./components/navigation-card/NavigationCard.js";
-import { NavigationCardGroup as lp, navigationCardGroup as up } from "./components/navigation-card/parts/NavigationCardGroup.js";
-import { NavigationCardLabel as cp } from "./components/navigation-card/parts/NavigationCardLabel.js";
-import { NavigationCardDescription as gp } from "./components/navigation-card/parts/NavigationCardDescription.js";
-import { NumberInput as bp, numberInput as Tp } from "./components/number-input/NumberInput.js";
-import { Page as Fp, page as Pp } from "./components/page/Page.js";
-import { PageHeader as Ap, pageHeader as kp } from "./components/page/parts/PageHeader.js";
-import { PageHeading as Ip } from "./components/page/parts/PageHeading.js";
-import { Pagination as Gp, pagination as hp } from "./components/pagination/Pagination.js";
-import { PaginationContent as Dp, paginationContent as Lp } from "./components/pagination/parts/PaginationContent.js";
-import { PaginationItem as vp } from "./components/pagination/parts/PaginationItem.js";
-import { RawPaginationLink as Np, paginationLink as Hp } from "./components/pagination/parts/RawPaginationLink.js";
-import { RawPaginationPrevious as Vp } from "./components/pagination/parts/RawPaginationPrevious.js";
-import { RawPaginationNext as Up } from "./components/pagination/parts/RawPaginationNext.js";
-import { PaginationEllipsis as Qp } from "./components/pagination/parts/PaginationEllipsis.js";
-import { usePaginationWindow as qp } from "./components/pagination/hooks/use-pagination-window.js";
-import { usePaginationState as Xp } from "./components/pagination/hooks/use-pagination-state.js";
-import { PayFitBrand as zp } from "./components/payfit-brand/PayFitBrand.js";
-import { PayFitBrandPreprod as Zp } from "./components/payfit-brand/PayFitPreprod.js";
-import { PhoneNumberInput as oa } from "./components/phone-number/PhoneNumberInput.js";
-import { Pill as ra } from "./components/pill/Pill.js";
-import { Popover as pa } from "./components/popover/Popover.js";
-import { ProgressBar as ma } from "./components/progress-bar/ProgressBar.js";
-import { RadioButtonGroup as na } from "./components/radio-button-group/RadioButtonGroup.js";
-import { RadioButton as ia, radioButton as la } from "./components/radio-button-group/parts/RadioButton.js";
-import { RadioButtonHelper as da } from "./components/radio-button-group/parts/RadioButtonHelper.js";
-import { Search as sa, search as ga } from "./components/search/Search.js";
-import { SegmentedButtonGroup as ba } from "./components/segmented-button-group/SegmentedButtonGroup.js";
-import { ToggleButton as Ca } from "./components/segmented-button-group/parts/ToggleButton.js";
-import { SelectableButtonGroup as Pa, selectableButtonGroup as Ba } from "./components/selectable-button-group/SelectableButtonGroup.js";
-import { SelectableButton as ka, selectableButton as Ra } from "./components/selectable-button-group/parts/SelectableButton.js";
-import { SelectableCardCheckboxGroup as wa } from "./components/selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.js";
-import { SelectableCardCheckbox as ha } from "./components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.js";
-import { SelectableCardRadioGroup as Da } from "./components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js";
-import { SelectableCardRadio as Ea } from "./components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js";
-import { Select as Ma } from "./components/select/Select.js";
-import { SelectButton as Ha } from "./components/select/parts/SelectButton.js";
-import { SelectOption as Va } from "./components/select/parts/SelectOption.js";
-import { SelectOptionGroup as Ua } from "./components/select/parts/SelectOptionGroup.js";
-import { SelectOptionHelper as Qa } from "./components/select/parts/SelectOptionHelper.js";
-import { SidePanel as qa, sidePanel as Ja } from "./components/side-panel/SidePanel.js";
-import { SidePanelContent as ja, sidePanelContent as za } from "./components/side-panel/parts/SidePanelContent.js";
-import { SidePanelFooter as Za, sidePanelFooter as $a } from "./components/side-panel/parts/SidePanelFooter.js";
-import { SidePanelHeader as em, sidePanelHeader as rm } from "./components/side-panel/parts/SidePanelHeader.js";
-import { SkipLink as pm, SkipLinks as am } from "./components/skip-links/SkipLinks.js";
-import { Spinner as xm } from "./components/spinner/Spinner.js";
-import { Table as fm, TableRoot as im } from "./components/table/Table.js";
-import { TableBody as um, tableBody as dm } from "./components/table/parts/TableBody.js";
-import { TableCell as sm, tableCell as gm } from "./components/table/parts/TableCell.js";
-import { TableColumnHeader as bm, tableColumnHeader as Tm } from "./components/table/parts/TableColumnHeader.js";
-import { TableEmptyState as Fm, TableEmptyStateError as Pm, TableEmptyStateLoading as Bm, TableEmptyStateNoData as Am, TableEmptyStateText as km, TableNoSearchResults as Rm, tableEmptyState as Im } from "./components/table/parts/TableEmptyState.js";
-import { TableHeader as Gm, tableHeader as hm } from "./components/table/parts/TableHeader.js";
-import { TablePagination as Dm, tablePagination as Lm } from "./components/table/parts/TablePagination.js";
-import { TableRow as vm, tableRow as Mm } from "./components/table/parts/TableRow.js";
-import { Tabs as Hm } from "./components/tabs/Tabs.js";
-import { RawTab as Vm } from "./components/tabs/parts/RawTab.js";
-import { TabList as Um } from "./components/tabs/parts/TabList.js";
-import { TabPanel as Qm } from "./components/tabs/parts/TabPanel.js";
-import { TaskMenu as qm, taskMenu as Jm } from "./components/task-menu/TaskMenu.js";
-import { RawSubTask as jm, rawSubTask as zm } from "./components/task-menu/parts/RawSubTask.js";
-import { RawTask as Zm, rawTask as $m } from "./components/task-menu/parts/RawTask.js";
-import { TaskGroup as ex } from "./components/task-menu/parts/TaskGroup.js";
-import { TextArea as tx, textArea as px } from "./components/text-area/TextArea.js";
-import { Text as mx } from "./components/text/Text.js";
-import { text as nx } from "./components/text/Text.variants.js";
-import { Timeline as ix } from "./components/timeline/Timeline.js";
-import { TimelineStep as ux } from "./components/timeline/parts/TimelineStep.js";
-import { TimelineStepHeader as cx } from "./components/timeline/parts/TimelineStepHeader.js";
-import { TimelineStepDescription as gx } from "./components/timeline/parts/TimelineStepDescription.js";
-import { TOAST_CONFIG as bx, ToastManager as Tx } from "./components/toast/ToastManager.js";
-import { toast as Fx } from "./components/toast/toast.js";
-import { ToggleSwitchGroup as Bx, toggleSwitchGroup as Ax } from "./components/toggle-switch-group/ToggleSwitchGroup.js";
-import { ToggleSwitch as Rx, toggleSwitch as Ix } from "./components/toggle-switch/ToggleSwitch.js";
-import { Tooltip as Gx } from "./components/tooltip/Tooltip.js";
-import { DESKTOP_BREAKPOINTS as yx, MOBILE_BREAKPOINTS as Dx, isDesktopBreakpoint as Lx, isMobileBreakpoint as Ex, useBreakpointListener as vx } from "./hooks/use-breakpoint-listener.js";
-import { useContainerQueryLevel as Nx } from "./hooks/use-container-query-level.js";
-import { useMediaQuery as Ox } from "./hooks/use-media-query.js";
-import { useUnityForm as _x } from "./hooks/use-form.js";
-import { CheckboxField as Kx } from "./components/checkbox-field/CheckboxField.js";
-import { CheckboxGroupField as Wx } from "./components/checkbox-group-field/CheckboxGroupField.js";
-import { DatePickerField as Jx } from "./components/date-picker-field/DatePickerField.js";
-import { FormField as jx } from "./components/form-field/FormField.js";
-import { RawFormContextualLink as Yx } from "./components/form-field/parts/RawFormContextualLink.js";
-import { FormControl as $x } from "./components/form-field/parts/FormControl.js";
-import { FormFeedbackText as en } from "./components/form-field/parts/FormFeedbackText.js";
-import { FormHelperText as tn } from "./components/form-field/parts/FormHelperText.js";
-import { FormLabel as an } from "./components/form-field/parts/FormLabel.js";
-import { MultiSelectField as xn } from "./components/multi-select-field/MultiSelectField.js";
-import { NumberField as fn, numberField as ln } from "./components/number-field/NumberField.js";
-import { RadioButtonGroupField as dn } from "./components/radio-button-group-field/RadioButtonGroupField.js";
-import { SelectableButtonGroupField as sn } from "./components/selectable-button-group-field/SelectableButtonGroupField.js";
-import { SelectableCardCheckboxGroupField as Sn } from "./components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.js";
-import { SelectableCardRadioGroupField as Tn } from "./components/selectable-card-radio-group-field/SelectableCardRadioGroupField.js";
-import { SelectField as Fn } from "./components/select-field/SelectField.js";
-import { TextField as Bn } from "./components/text-field/TextField.js";
-import { ToggleSwitchField as kn } from "./components/toggle-switch-field/ToggleSwitchField.js";
-import { ToggleSwitchGroupField as In } from "./components/toggle-switch-group-field/ToggleSwitchGroupField.js";
-import { useTanstackUnityForm as Gn, withFieldGroup as hn, withForm as yn } from "./hooks/use-tanstack-form.js";
-import { useFieldContext as Ln, useFormContext as En } from "./hooks/tanstack-form-context.js";
-import { useFieldA11yContext as Mn } from "./components/form-field/TanstackFormField.context.js";
-import { fieldRevalidateLogic as Hn } from "./utils/field-revalidate-logic.js";
-import { NoopRouterProvider as Vn, RouterProvider as _n, useRouter as Un } from "./providers/router/RouterProvider.js";
-import { Carousel as Qn, carousel as Wn } from "./components/carousel/Carousel.js";
-import { CarouselHeader as Jn, carouselHeader as Xn } from "./components/carousel/parts/CarouselHeader.js";
-import { CarouselNav as zn, carouselNav as Yn } from "./components/carousel/parts/CarouselNav.js";
-import { CarouselContent as $n, carouselContent as of } from "./components/carousel/parts/CarouselContent.js";
-import { CarouselSlide as rf, carouselSlide as tf } from "./components/carousel/parts/CarouselSlide.js";
-import { DialogTrigger as af, DialogTrigger as mf } from "react-aria-components";
-import { FilterAdapters as nf } from "./components/filter-toolbar/utils/filter-adapters.js";
-import { useAsyncList as lf } from "react-stately";
+import { FloatingActionBar as lr, floatingActionBar as ur } from "./components/floating-action-bar/FloatingActionBar.js";
+import { FilterToolbar as cr, filterToolbar as sr } from "./components/filter-toolbar/FilterToolbar.js";
+import { Flex as Sr, Stack as br } from "./components/flex/Flex.js";
+import { flex as Cr, flexItem as Fr } from "./components/flex/Flex.variants.js";
+import { FlexItem as Br, StackItem as Ar } from "./components/flex/FlexItem.js";
+import { Form as Rr } from "./components/form/Form.js";
+import { FullPageLoader as wr, fullPageLoader as Gr } from "./components/full-page-loader/FullPageLoader.js";
+import { FunnelLayout as yr, funnelLayout as Dr } from "./components/funnel-layout/FunnelLayout.js";
+import { FunnelBody as Er, funnelBody as vr } from "./components/funnel-layout/parts/FunnelBody.js";
+import { FunnelPage as Nr, funnelPage as Hr } from "./components/funnel-layout/parts/FunnelPage.js";
+import { FunnelPageAction as Vr } from "./components/funnel-layout/parts/FunnelPageAction.js";
+import { FunnelPageActions as Ur, funnelPageActions as Kr } from "./components/funnel-layout/parts/FunnelPageActions.js";
+import { FunnelPageContent as Wr, funnelPageContent as qr } from "./components/funnel-layout/parts/FunnelPageContent.js";
+import { FunnelBackButton as Xr } from "./components/funnel-layout/parts/FunnelBackButton.js";
+import { FunnelPageFooter as zr, funnelPageFooter as Yr } from "./components/funnel-layout/parts/FunnelPageFooter.js";
+import { FunnelPageHeader as $r, funnelPageHeader as ot } from "./components/funnel-layout/parts/FunnelPageHeader.js";
+import { FunnelSidebar as rt, funnelSidebar as tt } from "./components/funnel-layout/parts/FunnelSidebar.js";
+import { FunnelTopBar as at, funnelTopBar as mt } from "./components/funnel-layout/parts/FunnelTopBar.js";
+import { Grid as nt } from "./components/grid/Grid.js";
+import { grid as it, gridItem as lt } from "./components/grid/Grid.variants.js";
+import { GridItem as dt } from "./components/grid/GridItem.js";
+import { IconButton as st } from "./components/icon-button/IconButton.js";
+import { CircularIconButton as St, circularIconButton as bt } from "./components/icon-button/CircularIconButton.js";
+import { Icon as Ct } from "./components/icon/Icon.js";
+import { Input as Pt } from "./components/input/Input.js";
+import { Label as At } from "./components/label/Label.js";
+import { RawLink as Rt, link as It } from "./components/link/RawLink.js";
+import { ListView as Gt } from "./components/list-view/ListView.js";
+import { RawListViewItem as yt, listViewItem as Dt } from "./components/list-view/parts/RawListViewItem.js";
+import { ListViewSection as Et, listViewSection as vt } from "./components/list-view/parts/ListViewSection.js";
+import { ListViewItemLabel as Nt } from "./components/list-view/parts/ListViewItemLabel.js";
+import { ListViewItemText as Ot } from "./components/list-view/parts/ListViewItemText.js";
+import { Menu as _t } from "./components/menu/Menu.js";
+import { MenuContent as Kt } from "./components/menu/parts/MenuContent.js";
+import { MenuHeader as Wt } from "./components/menu/parts/MenuHeader.js";
+import { RawMenuItem as Jt } from "./components/menu/parts/RawMenuItem.js";
+import { MenuSeparator as jt } from "./components/menu/parts/MenuSeparator.js";
+import { MenuTrigger as Yt } from "./components/menu/parts/MenuTrigger.js";
+import { MultiSelect as $t } from "./components/multi-select/MultiSelect.js";
+import { MultiSelectOptGroup as ep } from "./components/multi-select/parts/MultiSelectOptGroup.js";
+import { MultiSelectOption as tp } from "./components/multi-select/parts/MultiSelectOption.js";
+import { Nav as ap } from "./components/nav/Nav.js";
+import { NavGroup as xp } from "./components/nav/parts/NavGroup.js";
+import { RawNavItem as fp, navItemBase as ip } from "./components/nav/parts/RawNavItem.js";
+import { RawNavigationCard as up } from "./components/navigation-card/NavigationCard.js";
+import { NavigationCardGroup as cp, navigationCardGroup as sp } from "./components/navigation-card/parts/NavigationCardGroup.js";
+import { NavigationCardLabel as Sp } from "./components/navigation-card/parts/NavigationCardLabel.js";
+import { NavigationCardDescription as Tp } from "./components/navigation-card/parts/NavigationCardDescription.js";
+import { NumberInput as Fp, numberInput as Pp } from "./components/number-input/NumberInput.js";
+import { Page as Ap, page as kp } from "./components/page/Page.js";
+import { PageHeader as Ip, pageHeader as wp } from "./components/page/parts/PageHeader.js";
+import { PageHeading as hp } from "./components/page/parts/PageHeading.js";
+import { Pagination as Dp, pagination as Lp } from "./components/pagination/Pagination.js";
+import { PaginationContent as vp, paginationContent as Mp } from "./components/pagination/parts/PaginationContent.js";
+import { PaginationItem as Hp } from "./components/pagination/parts/PaginationItem.js";
+import { RawPaginationLink as Vp, paginationLink as _p } from "./components/pagination/parts/RawPaginationLink.js";
+import { RawPaginationPrevious as Kp } from "./components/pagination/parts/RawPaginationPrevious.js";
+import { RawPaginationNext as Wp } from "./components/pagination/parts/RawPaginationNext.js";
+import { PaginationEllipsis as Jp } from "./components/pagination/parts/PaginationEllipsis.js";
+import { usePaginationWindow as jp } from "./components/pagination/hooks/use-pagination-window.js";
+import { usePaginationState as Yp } from "./components/pagination/hooks/use-pagination-state.js";
+import { PayFitBrand as $p } from "./components/payfit-brand/PayFitBrand.js";
+import { PayFitBrandPreprod as ea } from "./components/payfit-brand/PayFitPreprod.js";
+import { PhoneNumberInput as ta } from "./components/phone-number/PhoneNumberInput.js";
+import { Pill as aa } from "./components/pill/Pill.js";
+import { Popover as xa } from "./components/popover/Popover.js";
+import { ProgressBar as fa } from "./components/progress-bar/ProgressBar.js";
+import { RadioButtonGroup as la } from "./components/radio-button-group/RadioButtonGroup.js";
+import { RadioButton as da, radioButton as ca } from "./components/radio-button-group/parts/RadioButton.js";
+import { RadioButtonHelper as ga } from "./components/radio-button-group/parts/RadioButtonHelper.js";
+import { Search as ba, search as Ta } from "./components/search/Search.js";
+import { SegmentedButtonGroup as Fa } from "./components/segmented-button-group/SegmentedButtonGroup.js";
+import { ToggleButton as Ba } from "./components/segmented-button-group/parts/ToggleButton.js";
+import { SelectableButtonGroup as ka, selectableButtonGroup as Ra } from "./components/selectable-button-group/SelectableButtonGroup.js";
+import { SelectableButton as wa, selectableButton as Ga } from "./components/selectable-button-group/parts/SelectableButton.js";
+import { SelectableCardCheckboxGroup as ya } from "./components/selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.js";
+import { SelectableCardCheckbox as La } from "./components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.js";
+import { SelectableCardRadioGroup as va } from "./components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js";
+import { SelectableCardRadio as Na } from "./components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js";
+import { Select as Oa } from "./components/select/Select.js";
+import { SelectButton as _a } from "./components/select/parts/SelectButton.js";
+import { SelectOption as Ka } from "./components/select/parts/SelectOption.js";
+import { SelectOptionGroup as Wa } from "./components/select/parts/SelectOptionGroup.js";
+import { SelectOptionHelper as Ja } from "./components/select/parts/SelectOptionHelper.js";
+import { SidePanel as ja, sidePanel as za } from "./components/side-panel/SidePanel.js";
+import { SidePanelContent as Za, sidePanelContent as $a } from "./components/side-panel/parts/SidePanelContent.js";
+import { SidePanelFooter as em, sidePanelFooter as rm } from "./components/side-panel/parts/SidePanelFooter.js";
+import { SidePanelHeader as pm, sidePanelHeader as am } from "./components/side-panel/parts/SidePanelHeader.js";
+import { SkipLink as xm, SkipLinks as nm } from "./components/skip-links/SkipLinks.js";
+import { Spinner as im } from "./components/spinner/Spinner.js";
+import { Table as um, TableRoot as dm } from "./components/table/Table.js";
+import { TableBody as sm, tableBody as gm } from "./components/table/parts/TableBody.js";
+import { TableCell as bm, tableCell as Tm } from "./components/table/parts/TableCell.js";
+import { TableColumnHeader as Fm, tableColumnHeader as Pm } from "./components/table/parts/TableColumnHeader.js";
+import { TableEmptyState as Am, TableEmptyStateError as km, TableEmptyStateLoading as Rm, TableEmptyStateNoData as Im, TableEmptyStateText as wm, TableNoSearchResults as Gm, tableEmptyState as hm } from "./components/table/parts/TableEmptyState.js";
+import { TableHeader as Dm, tableHeader as Lm } from "./components/table/parts/TableHeader.js";
+import { TablePagination as vm, tablePagination as Mm } from "./components/table/parts/TablePagination.js";
+import { TableRow as Hm, tableRow as Om } from "./components/table/parts/TableRow.js";
+import { Tabs as _m } from "./components/tabs/Tabs.js";
+import { RawTab as Km } from "./components/tabs/parts/RawTab.js";
+import { TabList as Wm } from "./components/tabs/parts/TabList.js";
+import { TabPanel as Jm } from "./components/tabs/parts/TabPanel.js";
+import { TaskMenu as jm, taskMenu as zm } from "./components/task-menu/TaskMenu.js";
+import { RawSubTask as Zm, rawSubTask as $m } from "./components/task-menu/parts/RawSubTask.js";
+import { RawTask as ex, rawTask as rx } from "./components/task-menu/parts/RawTask.js";
+import { TaskGroup as px } from "./components/task-menu/parts/TaskGroup.js";
+import { TextArea as mx, textArea as xx } from "./components/text-area/TextArea.js";
+import { Text as fx } from "./components/text/Text.js";
+import { text as lx } from "./components/text/Text.variants.js";
+import { Timeline as dx } from "./components/timeline/Timeline.js";
+import { TimelineStep as sx } from "./components/timeline/parts/TimelineStep.js";
+import { TimelineStepHeader as Sx } from "./components/timeline/parts/TimelineStepHeader.js";
+import { TimelineStepDescription as Tx } from "./components/timeline/parts/TimelineStepDescription.js";
+import { TOAST_CONFIG as Fx, ToastManager as Px } from "./components/toast/ToastManager.js";
+import { toast as Ax } from "./components/toast/toast.js";
+import { ToggleSwitchGroup as Rx, toggleSwitchGroup as Ix } from "./components/toggle-switch-group/ToggleSwitchGroup.js";
+import { ToggleSwitch as Gx, toggleSwitch as hx } from "./components/toggle-switch/ToggleSwitch.js";
+import { Tooltip as Dx } from "./components/tooltip/Tooltip.js";
+import { DESKTOP_BREAKPOINTS as Ex, MOBILE_BREAKPOINTS as vx, isDesktopBreakpoint as Mx, isMobileBreakpoint as Nx, useBreakpointListener as Hx } from "./hooks/use-breakpoint-listener.js";
+import { useContainerQueryLevel as Vx } from "./hooks/use-container-query-level.js";
+import { useMediaQuery as Ux } from "./hooks/use-media-query.js";
+import { useUnityForm as Qx } from "./hooks/use-form.js";
+import { CheckboxField as qx } from "./components/checkbox-field/CheckboxField.js";
+import { CheckboxGroupField as Xx } from "./components/checkbox-group-field/CheckboxGroupField.js";
+import { DatePickerField as zx } from "./components/date-picker-field/DatePickerField.js";
+import { FormField as Zx } from "./components/form-field/FormField.js";
+import { RawFormContextualLink as on } from "./components/form-field/parts/RawFormContextualLink.js";
+import { FormControl as rn } from "./components/form-field/parts/FormControl.js";
+import { FormFeedbackText as pn } from "./components/form-field/parts/FormFeedbackText.js";
+import { FormHelperText as mn } from "./components/form-field/parts/FormHelperText.js";
+import { FormLabel as nn } from "./components/form-field/parts/FormLabel.js";
+import { MultiSelectField as ln } from "./components/multi-select-field/MultiSelectField.js";
+import { NumberField as dn, numberField as cn } from "./components/number-field/NumberField.js";
+import { RadioButtonGroupField as gn } from "./components/radio-button-group-field/RadioButtonGroupField.js";
+import { SelectableButtonGroupField as bn } from "./components/selectable-button-group-field/SelectableButtonGroupField.js";
+import { SelectableCardCheckboxGroupField as Cn } from "./components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.js";
+import { SelectableCardRadioGroupField as Pn } from "./components/selectable-card-radio-group-field/SelectableCardRadioGroupField.js";
+import { SelectField as An } from "./components/select-field/SelectField.js";
+import { TextField as Rn } from "./components/text-field/TextField.js";
+import { ToggleSwitchField as wn } from "./components/toggle-switch-field/ToggleSwitchField.js";
+import { ToggleSwitchGroupField as hn } from "./components/toggle-switch-group-field/ToggleSwitchGroupField.js";
+import { useTanstackUnityForm as Dn, withFieldGroup as Ln, withForm as En } from "./hooks/use-tanstack-form.js";
+import { useFieldContext as Mn, useFormContext as Nn } from "./hooks/tanstack-form-context.js";
+import { useFieldA11yContext as On } from "./components/form-field/TanstackFormField.context.js";
+import { fieldRevalidateLogic as _n } from "./utils/field-revalidate-logic.js";
+import { NoopRouterProvider as Kn, RouterProvider as Qn, useRouter as Wn } from "./providers/router/RouterProvider.js";
+import { Carousel as Jn, carousel as Xn } from "./components/carousel/Carousel.js";
+import { CarouselHeader as zn, carouselHeader as Yn } from "./components/carousel/parts/CarouselHeader.js";
+import { CarouselNav as $n, carouselNav as of } from "./components/carousel/parts/CarouselNav.js";
+import { CarouselContent as rf, carouselContent as tf } from "./components/carousel/parts/CarouselContent.js";
+import { CarouselSlide as af, carouselSlide as mf } from "./components/carousel/parts/CarouselSlide.js";
+import { DialogTrigger as nf, DialogTrigger as ff } from "react-aria-components";
+import { FilterAdapters as uf } from "./components/filter-toolbar/utils/filter-adapters.js";
+import { useAsyncList as cf } from "react-stately";
 export {
   p as ActionBar,
   m as ActionBarAction,
@@ -264,34 +265,34 @@ export {
   wo as Card,
   Lo as CardContent,
   yo as CardTitle,
-  Qn as Carousel,
-  $n as CarouselContent,
-  Jn as CarouselHeader,
-  zn as CarouselNav,
-  rf as CarouselSlide,
+  Jn as Carousel,
+  rf as CarouselContent,
+  zn as CarouselHeader,
+  $n as CarouselNav,
+  af as CarouselSlide,
   Ho as Checkbox,
-  Kx as CheckboxField,
+  qx as CheckboxField,
   vo as CheckboxGroup,
-  Wx as CheckboxGroupField,
+  Xx as CheckboxGroupField,
   Vo as CheckboxStandalone,
-  ct as CircularIconButton,
+  St as CircularIconButton,
   Uo as Collapsible,
   Qo as CollapsibleContent,
   qo as CollapsibleTitle,
-  yx as DESKTOP_BREAKPOINTS,
+  Ex as DESKTOP_BREAKPOINTS,
   Xo as DataTable,
   $o as DataTableBulkActions,
   zo as DataTableRoot,
   ee as DateCalendar,
   te as DatePicker,
-  Jx as DatePickerField,
+  zx as DatePickerField,
   ae as DefinitionTooltip,
   xe as Dialog,
   ie as DialogActions,
   ue as DialogButton,
   ce as DialogContent,
   ge as DialogTitle,
-  af as DialogTrigger,
+  nf as DialogTrigger,
   ye as EmptyState,
   Ne as EmptyStateActions,
   ve as EmptyStateContent,
@@ -306,156 +307,157 @@ export {
   tr as FieldGroup,
   or as Fieldset,
   ar as Filter,
-  nf as FilterAdapters,
+  uf as FilterAdapters,
   mr as FilterControls,
   xr as FilterLabels,
-  lr as FilterToolbar,
-  cr as Flex,
-  Cr as FlexItem,
-  Br as Form,
-  $x as FormControl,
-  en as FormFeedbackText,
-  jx as FormField,
-  tn as FormHelperText,
-  an as FormLabel,
-  kr as FullPageLoader,
-  Wr as FunnelBackButton,
-  yr as FunnelBody,
-  wr as FunnelLayout,
-  Er as FunnelPage,
-  Nr as FunnelPageAction,
-  Or as FunnelPageActions,
-  Ur as FunnelPageContent,
-  Jr as FunnelPageFooter,
-  zr as FunnelPageHeader,
-  $r as FunnelSidebar,
-  rt as FunnelTopBar,
-  at as Grid,
-  it as GridItem,
-  St as Icon,
-  ut as IconButton,
-  Tt as Input,
-  Ft as Label,
-  Rt as ListView,
-  Et as ListViewItemLabel,
-  Mt as ListViewItemText,
-  yt as ListViewSection,
-  Dx as MOBILE_BREAKPOINTS,
-  Ht as Menu,
-  Vt as MenuContent,
-  Ut as MenuHeader,
-  qt as MenuSeparator,
-  Xt as MenuTrigger,
-  zt as MultiSelect,
-  xn as MultiSelectField,
-  Zt as MultiSelectOptGroup,
-  op as MultiSelectOption,
-  rp as Nav,
-  pp as NavGroup,
-  gp as NavigationCardDescription,
-  lp as NavigationCardGroup,
-  cp as NavigationCardLabel,
-  Vn as NoopRouterProvider,
-  fn as NumberField,
-  bp as NumberInput,
-  Fp as Page,
-  Ap as PageHeader,
-  Ip as PageHeading,
-  Gp as Pagination,
-  Dp as PaginationContent,
-  Qp as PaginationEllipsis,
-  vp as PaginationItem,
-  zp as PayFitBrand,
-  Zp as PayFitBrandPreprod,
-  oa as PhoneNumberInput,
-  ra as Pill,
-  pa as Popover,
-  mf as PopoverTrigger,
-  ma as ProgressBar,
+  cr as FilterToolbar,
+  Sr as Flex,
+  Br as FlexItem,
+  lr as FloatingActionBar,
+  Rr as Form,
+  rn as FormControl,
+  pn as FormFeedbackText,
+  Zx as FormField,
+  mn as FormHelperText,
+  nn as FormLabel,
+  wr as FullPageLoader,
+  Xr as FunnelBackButton,
+  Er as FunnelBody,
+  yr as FunnelLayout,
+  Nr as FunnelPage,
+  Vr as FunnelPageAction,
+  Ur as FunnelPageActions,
+  Wr as FunnelPageContent,
+  zr as FunnelPageFooter,
+  $r as FunnelPageHeader,
+  rt as FunnelSidebar,
+  at as FunnelTopBar,
+  nt as Grid,
+  dt as GridItem,
+  Ct as Icon,
+  st as IconButton,
+  Pt as Input,
+  At as Label,
+  Gt as ListView,
+  Nt as ListViewItemLabel,
+  Ot as ListViewItemText,
+  Et as ListViewSection,
+  vx as MOBILE_BREAKPOINTS,
+  _t as Menu,
+  Kt as MenuContent,
+  Wt as MenuHeader,
+  jt as MenuSeparator,
+  Yt as MenuTrigger,
+  $t as MultiSelect,
+  ln as MultiSelectField,
+  ep as MultiSelectOptGroup,
+  tp as MultiSelectOption,
+  ap as Nav,
+  xp as NavGroup,
+  Tp as NavigationCardDescription,
+  cp as NavigationCardGroup,
+  Sp as NavigationCardLabel,
+  Kn as NoopRouterProvider,
+  dn as NumberField,
+  Fp as NumberInput,
+  Ap as Page,
+  Ip as PageHeader,
+  hp as PageHeading,
+  Dp as Pagination,
+  vp as PaginationContent,
+  Jp as PaginationEllipsis,
+  Hp as PaginationItem,
+  $p as PayFitBrand,
+  ea as PayFitBrandPreprod,
+  ta as PhoneNumberInput,
+  aa as Pill,
+  xa as Popover,
+  ff as PopoverTrigger,
+  fa as ProgressBar,
   be as PromoDialog,
   Ie as PromoDialogActions,
   ke as PromoDialogContent,
   Fe as PromoDialogHero,
   Be as PromoDialogSubtitle,
   Ge as PromoDialogTitle,
-  ia as RadioButton,
-  na as RadioButtonGroup,
-  dn as RadioButtonGroupField,
-  da as RadioButtonHelper,
+  da as RadioButton,
+  la as RadioButtonGroup,
+  gn as RadioButtonGroupField,
+  ga as RadioButtonHelper,
   Ao as RawBreadcrumbLink,
-  Yx as RawFormContextualLink,
-  Bt as RawLink,
-  wt as RawListViewItem,
-  Qt as RawMenuItem,
-  mp as RawNavItem,
-  fp as RawNavigationCard,
-  Np as RawPaginationLink,
-  Up as RawPaginationNext,
-  Vp as RawPaginationPrevious,
-  jm as RawSubTask,
-  Vm as RawTab,
-  Zm as RawTask,
-  _n as RouterProvider,
-  sa as Search,
-  ba as SegmentedButtonGroup,
-  Ma as Select,
-  Ha as SelectButton,
-  Fn as SelectField,
-  Va as SelectOption,
-  Ua as SelectOptionGroup,
-  Qa as SelectOptionHelper,
-  ka as SelectableButton,
-  Pa as SelectableButtonGroup,
-  sn as SelectableButtonGroupField,
-  ha as SelectableCardCheckbox,
-  wa as SelectableCardCheckboxGroup,
-  Sn as SelectableCardCheckboxGroupField,
-  Ea as SelectableCardRadio,
-  Da as SelectableCardRadioGroup,
-  Tn as SelectableCardRadioGroupField,
-  qa as SidePanel,
-  ja as SidePanelContent,
-  Za as SidePanelFooter,
-  em as SidePanelHeader,
-  pm as SkipLink,
-  am as SkipLinks,
-  xm as Spinner,
-  sr as Stack,
-  Fr as StackItem,
-  bx as TOAST_CONFIG,
-  Um as TabList,
-  Qm as TabPanel,
-  fm as Table,
-  um as TableBody,
-  sm as TableCell,
-  bm as TableColumnHeader,
-  Fm as TableEmptyState,
-  Pm as TableEmptyStateError,
-  Bm as TableEmptyStateLoading,
-  Am as TableEmptyStateNoData,
-  km as TableEmptyStateText,
-  Gm as TableHeader,
-  Rm as TableNoSearchResults,
-  Dm as TablePagination,
-  im as TableRoot,
-  vm as TableRow,
-  Hm as Tabs,
-  ex as TaskGroup,
-  qm as TaskMenu,
-  mx as Text,
-  tx as TextArea,
-  Bn as TextField,
-  ix as Timeline,
-  ux as TimelineStep,
-  gx as TimelineStepDescription,
-  cx as TimelineStepHeader,
-  Tx as ToastManager,
-  Ca as ToggleButton,
-  Rx as ToggleSwitch,
-  kn as ToggleSwitchField,
-  Bx as ToggleSwitchGroup,
-  In as ToggleSwitchGroupField,
-  Gx as Tooltip,
+  on as RawFormContextualLink,
+  Rt as RawLink,
+  yt as RawListViewItem,
+  Jt as RawMenuItem,
+  fp as RawNavItem,
+  up as RawNavigationCard,
+  Vp as RawPaginationLink,
+  Wp as RawPaginationNext,
+  Kp as RawPaginationPrevious,
+  Zm as RawSubTask,
+  Km as RawTab,
+  ex as RawTask,
+  Qn as RouterProvider,
+  ba as Search,
+  Fa as SegmentedButtonGroup,
+  Oa as Select,
+  _a as SelectButton,
+  An as SelectField,
+  Ka as SelectOption,
+  Wa as SelectOptionGroup,
+  Ja as SelectOptionHelper,
+  wa as SelectableButton,
+  ka as SelectableButtonGroup,
+  bn as SelectableButtonGroupField,
+  La as SelectableCardCheckbox,
+  ya as SelectableCardCheckboxGroup,
+  Cn as SelectableCardCheckboxGroupField,
+  Na as SelectableCardRadio,
+  va as SelectableCardRadioGroup,
+  Pn as SelectableCardRadioGroupField,
+  ja as SidePanel,
+  Za as SidePanelContent,
+  em as SidePanelFooter,
+  pm as SidePanelHeader,
+  xm as SkipLink,
+  nm as SkipLinks,
+  im as Spinner,
+  br as Stack,
+  Ar as StackItem,
+  Fx as TOAST_CONFIG,
+  Wm as TabList,
+  Jm as TabPanel,
+  um as Table,
+  sm as TableBody,
+  bm as TableCell,
+  Fm as TableColumnHeader,
+  Am as TableEmptyState,
+  km as TableEmptyStateError,
+  Rm as TableEmptyStateLoading,
+  Im as TableEmptyStateNoData,
+  wm as TableEmptyStateText,
+  Dm as TableHeader,
+  Gm as TableNoSearchResults,
+  vm as TablePagination,
+  dm as TableRoot,
+  Hm as TableRow,
+  _m as Tabs,
+  px as TaskGroup,
+  jm as TaskMenu,
+  fx as Text,
+  mx as TextArea,
+  Rn as TextField,
+  dx as Timeline,
+  sx as TimelineStep,
+  Tx as TimelineStepDescription,
+  Sx as TimelineStepHeader,
+  Px as ToastManager,
+  Ba as ToggleButton,
+  Gx as ToggleSwitch,
+  wn as ToggleSwitchField,
+  Rx as ToggleSwitchGroup,
+  hn as ToggleSwitchGroupField,
+  Dx as Tooltip,
   u as actionBarRoot,
   _ as autocompleteItem,
   Q as autocompleteItemGroup,
@@ -464,87 +466,88 @@ export {
   co as bottomSheetFooter,
   So as bottomSheetHeader,
   Go as card,
-  Wn as carousel,
-  of as carouselContent,
-  Xn as carouselHeader,
-  Yn as carouselNav,
-  tf as carouselSlide,
+  Xn as carousel,
+  tf as carouselContent,
+  Yn as carouselHeader,
+  of as carouselNav,
+  mf as carouselSlide,
   Mo as checkboxGroup,
-  st as circularIconButton,
+  bt as circularIconButton,
   Yo as dataTableRoot,
   ne as dialog,
   Ze as errorState,
-  Hn as fieldRevalidateLogic,
+  _n as fieldRevalidateLogic,
   er as fieldset,
   nr as filterContainer,
   fr as filterDismissButton,
-  ur as filterToolbar,
-  Sr as flex,
-  br as flexItem,
-  Rr as fullPageLoader,
-  Dr as funnelBody,
-  Gr as funnelLayout,
-  vr as funnelPage,
-  Vr as funnelPageActions,
-  Kr as funnelPageContent,
-  Xr as funnelPageFooter,
-  Yr as funnelPageHeader,
-  ot as funnelSidebar,
-  tt as funnelTopBar,
+  sr as filterToolbar,
+  Cr as flex,
+  Fr as flexItem,
+  ur as floatingActionBar,
+  Gr as fullPageLoader,
+  vr as funnelBody,
+  Dr as funnelLayout,
+  Hr as funnelPage,
+  Kr as funnelPageActions,
+  qr as funnelPageContent,
+  Yr as funnelPageFooter,
+  ot as funnelPageHeader,
+  tt as funnelSidebar,
+  mt as funnelTopBar,
   ro as getInitials,
-  xt as grid,
-  nt as gridItem,
-  Lx as isDesktopBreakpoint,
-  Ex as isMobileBreakpoint,
-  At as link,
-  Gt as listViewItem,
-  Dt as listViewSection,
-  xp as navItemBase,
-  up as navigationCardGroup,
-  ln as numberField,
-  Tp as numberInput,
-  Pp as page,
-  kp as pageHeader,
-  hp as pagination,
-  Lp as paginationContent,
-  Hp as paginationLink,
+  it as grid,
+  lt as gridItem,
+  Mx as isDesktopBreakpoint,
+  Nx as isMobileBreakpoint,
+  It as link,
+  Dt as listViewItem,
+  vt as listViewSection,
+  ip as navItemBase,
+  sp as navigationCardGroup,
+  cn as numberField,
+  Pp as numberInput,
+  kp as page,
+  wp as pageHeader,
+  Lp as pagination,
+  Mp as paginationContent,
+  _p as paginationLink,
   Te as promoDialog,
-  la as radioButton,
-  zm as rawSubTask,
-  $m as rawTask,
-  ga as search,
-  Ra as selectableButton,
-  Ba as selectableButtonGroup,
-  Ja as sidePanel,
-  za as sidePanelContent,
-  $a as sidePanelFooter,
-  rm as sidePanelHeader,
-  dm as tableBody,
-  gm as tableCell,
-  Tm as tableColumnHeader,
-  Im as tableEmptyState,
-  hm as tableHeader,
-  Lm as tablePagination,
-  Mm as tableRow,
-  Jm as taskMenu,
-  nx as text,
-  px as textArea,
-  Fx as toast,
-  Ix as toggleSwitch,
-  Ax as toggleSwitchGroup,
+  ca as radioButton,
+  $m as rawSubTask,
+  rx as rawTask,
+  Ta as search,
+  Ga as selectableButton,
+  Ra as selectableButtonGroup,
+  za as sidePanel,
+  $a as sidePanelContent,
+  rm as sidePanelFooter,
+  am as sidePanelHeader,
+  gm as tableBody,
+  Tm as tableCell,
+  Pm as tableColumnHeader,
+  hm as tableEmptyState,
+  Lm as tableHeader,
+  Mm as tablePagination,
+  Om as tableRow,
+  zm as taskMenu,
+  lx as text,
+  xx as textArea,
+  Ax as toast,
+  hx as toggleSwitch,
+  Ix as toggleSwitchGroup,
   h as useAppMenuContext,
-  lf as useAsyncList,
-  vx as useBreakpointListener,
-  Nx as useContainerQueryLevel,
-  Mn as useFieldA11yContext,
-  Ln as useFieldContext,
-  En as useFormContext,
-  Ox as useMediaQuery,
-  Xp as usePaginationState,
-  qp as usePaginationWindow,
-  Un as useRouter,
-  Gn as useTanstackUnityForm,
-  _x as useUnityForm,
-  hn as withFieldGroup,
-  yn as withForm
+  cf as useAsyncList,
+  Hx as useBreakpointListener,
+  Vx as useContainerQueryLevel,
+  On as useFieldA11yContext,
+  Mn as useFieldContext,
+  Nn as useFormContext,
+  Ux as useMediaQuery,
+  Yp as usePaginationState,
+  jp as usePaginationWindow,
+  Wn as useRouter,
+  Dn as useTanstackUnityForm,
+  Qx as useUnityForm,
+  Ln as withFieldGroup,
+  En as withForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.20.3",
+  "version": "2.21.1",
   "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.0",
-    "@payfit/unity-illustrations": "2.20.3",
+    "@payfit/unity-illustrations": "2.21.1",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.27.1",
@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.20.3",
-    "@payfit/unity-themes": "2.20.3",
+    "@payfit/unity-icons": "2.21.1",
+    "@payfit/unity-themes": "2.21.1",
     "@storybook/react-vite": "^10.3.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -95,9 +95,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.20.3",
-    "@payfit/unity-illustrations": "2.20.3",
-    "@payfit/unity-themes": "2.20.3",
+    "@payfit/unity-icons": "2.21.1",
+    "@payfit/unity-illustrations": "2.21.1",
+    "@payfit/unity-themes": "2.21.1",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.3.2",
     "@storybook/addon-designs": "11.1.2",