@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/integrations/tanstack-router/components/task-menu/SubTask.d.ts

@@ -0,0 +1,69 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { SubTaskProps as RawSubTaskProps } from '../../../../components/task-menu/parts/RawSubTask.js';
+type SubTaskRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawSubTaskProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
+type SubTaskButtonProps = Omit<RawSubTaskProps, 'href'> & {
+    onPress: NonNullable<RawSubTaskProps['onPress']>;
+};
+export type SubTaskProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = SubTaskRouterProps<TRouter, TOptions> | SubTaskButtonProps;
+/**
+ * A subtask component that integrates with Tanstack Router for seamless navigation within task groups.
+ * Represents individual subtask items within a TaskGroup that can be either links for navigation or buttons
+ * for custom interactions, with support for various visual states including completed, uncompleted, and locked.
+ * @param {SubTaskProps} props - Either router-based props (with 'to') or button-based props (with 'onPress')
+ * @example
+ * ```tsx
+ * import { SubTask } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { TaskMenu, TaskGroup } from '@payfit/unity-components'
+ *
+ * function OnboardingTaskGroup() {
+ *   return (
+ *     <TaskMenu label="Onboarding tasks">
+ *       <TaskGroup
+ *         uniqueId="onboarding"
+ *         label="Complete Onboarding"
+ *         taskNumber={1}
+ *         taskStatus="uncompleted"
+ *       >
+ *         <SubTask
+ *           uniqueId="profile-setup"
+ *           label="Complete Profile Information"
+ *           taskStatus="uncompleted"
+ *           to="/onboarding/profile"
+ *         />
+ *         <SubTask
+ *           uniqueId="validate-email"
+ *           label="Validate Email Address"
+ *           taskStatus="completed"
+ *           onPress={() => console.log('Email validation triggered')}
+ *         />
+ *         <SubTask
+ *           uniqueId="final-approval"
+ *           label="Manager Approval"
+ *           taskStatus="locked"
+ *           to="/onboarding/approval"
+ *         />
+ *       </TaskGroup>
+ *     </TaskMenu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a link when 'to' prop is provided, or as a button when 'onPress' is provided
+ * - Supports type-safe route parameters, search params, and relative navigation with Tanstack Router
+ * - Integrates with TaskGroup component for hierarchical task organization
+ * - Provides automatic active state styling based on current route
+ * - Supports multiple task states: completed, uncompleted, and locked
+ * - Displays a dot indicator instead of a numbered badge to distinguish from main Task components
+ * - Maintains all accessibility features from the underlying RawSubTask component
+ * - SubTask selection state is automatically managed based on routing context
+ * @see {@link SubTaskProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/task-menu GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare function SubTask<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: SubTaskProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace SubTask {
+    var displayName: string;
+}
+export { SubTask };

package/dist/esm/integrations/tanstack-router/components/task-menu/SubTask.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createLink as e } from "@tanstack/react-router";
+import { RawSubTask as o } from "../../../../components/task-menu/parts/RawSubTask.js";
+const i = e(o);
+function a(r) {
+  return "to" in r || "href" in r ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ t(i, { ...r, activeProps: { "data-current": !0 } })
+  ) : /* @__PURE__ */ t(o, { ...r });
+}
+a.displayName = "SubTask";
+export {
+  a as SubTask
+};

package/dist/esm/integrations/tanstack-router/components/task-menu/Task.d.ts

@@ -0,0 +1,64 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { TaskProps as RawTaskProps } from '../../../../components/task-menu/parts/RawTask.js';
+type TaskRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawTaskProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
+type TaskButtonProps = Omit<RawTaskProps, 'href'> & {
+    onPress: NonNullable<RawTaskProps['onPress']>;
+};
+export type TaskProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = TaskRouterProps<TRouter, TOptions> | TaskButtonProps;
+/**
+ * A task component that integrates with Tanstack Router for seamless navigation within task menus.
+ * Represents individual task items that can be either links for navigation or buttons for custom interactions,
+ * with support for various visual states including completed, uncompleted, locked, and selected states.
+ * @param {TaskProps} props - Either router-based props (with 'to') or button-based props (with 'onPress')
+ * @example
+ * ```tsx
+ * import { Task } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { TaskMenu } from '@payfit/unity-components'
+ *
+ * function OnboardingTasks() {
+ *   return (
+ *     <TaskMenu label="Onboarding tasks">
+ *       <Task
+ *         uniqueId="setup-profile"
+ *         label="Complete Profile Setup"
+ *         taskNumber={1}
+ *         taskStatus="uncompleted"
+ *         to="/profile/setup"
+ *       />
+ *       <Task
+ *         uniqueId="validate-data"
+ *         label="Validate Information"
+ *         taskNumber={2}
+ *         taskStatus="completed"
+ *         onPress={() => console.log('Validation triggered')}
+ *       />
+ *       <Task
+ *         uniqueId="final-review"
+ *         label="Final Review"
+ *         taskNumber={3}
+ *         taskStatus="locked"
+ *         to="/review"
+ *       />
+ *     </TaskMenu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a link when 'to' prop is provided, or as a button when 'onPress' is provided
+ * - Supports type-safe route parameters, search params, and relative navigation with Tanstack Router
+ * - Integrates with TaskMenu component for consistent task navigation UI patterns
+ * - Provides automatic active state styling based on current route
+ * - Supports multiple task states: completed, uncompleted, and locked
+ * - Maintains all accessibility features from the underlying RawTask component
+ * - Task selection state is automatically managed based on routing context
+ * @see {@link TaskProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/task-menu GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare function Task<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: TaskProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace Task {
+    var displayName: string;
+}
+export { Task };

package/dist/esm/integrations/tanstack-router/components/task-menu/Task.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createLink as e } from "@tanstack/react-router";
+import { RawTask as o } from "../../../../components/task-menu/parts/RawTask.js";
+const i = e(o);
+function a(r) {
+  return "to" in r || "href" in r ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ t(i, { ...r, activeProps: { "data-current": !0 } })
+  ) : /* @__PURE__ */ t(o, { ...r });
+}
+a.displayName = "Task";
+export {
+  a as Task
+};

package/dist/esm/integrations/tanstack-router/index.d.ts

@@ -0,0 +1,19 @@
+export * from './components/breadcrumbs/Breadcrumb.js';
+export * from './components/breadcrumbs/BreadcrumbLink.js';
+export * from './components/breadcrumbs/Breadcrumbs.js';
+export * from './components/form-contextual-link/FormContextualLink.js';
+export * from './components/link/Link.js';
+export * from './components/list-view/ListView.js';
+export * from './components/list-view/parts/ListViewItem.js';
+export * from './components/menu-item/MenuItem.js';
+export * from './components/navigation-card/NavigationCard.js';
+export * from './components/nav-item/NavItem.js';
+export * from './components/pagination/PaginationLink.js';
+export * from './components/pagination/PaginationNext.js';
+export * from './components/pagination/PaginationPrevious.js';
+export * from './components/tabs/parts/Tab.js';
+export * from './components/tabs/parts/TabPanel.js';
+export * from './components/tabs/parts/TabList.js';
+export * from './components/tabs/Tabs.js';
+export * from './components/task-menu/Task.js';
+export * from './components/task-menu/SubTask.js';

package/dist/esm/integrations/tanstack-router/utils/decorators.d.ts

@@ -0,0 +1,23 @@
+import { Decorator, StoryContext } from '@storybook/react-vite';
+import { AnyContext, LoaderFnContext, RootRoute, RouteComponent } from '@tanstack/react-router';
+interface RouteConfig {
+    path: string;
+    element: RouteComponent | 'story';
+    loader?: ((ctx: LoaderFnContext<RootRoute<undefined, object, AnyContext, AnyContext, object>, any, any, any, AnyContext, any, any>) => any) | undefined;
+    children?: RouteConfig[];
+    beforeLoad?: ((ctx: LoaderFnContext<RootRoute<undefined, object, AnyContext, AnyContext, object>, any, any, any, AnyContext, any, any>) => any) | undefined;
+    validateSearch?: (search: Record<string, unknown>) => any;
+    loaderDeps?: (deps: Record<string, unknown>) => Record<string, unknown>;
+}
+export interface TanstackRouterDecoratorContext extends StoryContext {
+    parameters: {
+        router?: {
+            initialPath?: string;
+            renderRootRoute?: (Story: Parameters<Decorator>[0]) => React.ReactNode;
+            routes: RouteConfig[];
+        };
+        enableTanstackRouterDevTools?: boolean;
+    };
+}
+export declare const TanstackRouterDecorator: Decorator;
+export {};

package/dist/esm/integrations/tanstack-router.js

@@ -0,0 +1,40 @@
+import { BreadcrumbLink as e } from "./tanstack-router/components/breadcrumbs/BreadcrumbLink.js";
+import { FormContextualLink as m } from "./tanstack-router/components/form-contextual-link/FormContextualLink.js";
+import { Link as x } from "./tanstack-router/components/link/Link.js";
+import { ListView as p } from "./tanstack-router/components/list-view/ListView.js";
+import { ListViewItem as n } from "./tanstack-router/components/list-view/parts/ListViewItem.js";
+import { MenuItem as s } from "./tanstack-router/components/menu-item/MenuItem.js";
+import { NavigationCard as L } from "./tanstack-router/components/navigation-card/NavigationCard.js";
+import { NavItem as T } from "./tanstack-router/components/nav-item/NavItem.js";
+import { PaginationLink as d } from "./tanstack-router/components/pagination/PaginationLink.js";
+import { PaginationNext as c } from "./tanstack-router/components/pagination/PaginationNext.js";
+import { PaginationPrevious as B } from "./tanstack-router/components/pagination/PaginationPrevious.js";
+import { Tab as N } from "./tanstack-router/components/tabs/parts/Tab.js";
+import { TabPanel as w } from "./tanstack-router/components/tabs/parts/TabPanel.js";
+import { Tabs as V } from "./tanstack-router/components/tabs/Tabs.js";
+import { Task as M } from "./tanstack-router/components/task-menu/Task.js";
+import { SubTask as h } from "./tanstack-router/components/task-menu/SubTask.js";
+import { Breadcrumb as q } from "../components/breadcrumbs/parts/Breadcrumb.js";
+import { Breadcrumbs as z } from "../components/breadcrumbs/Breadcrumbs.js";
+import { TabList as D } from "../components/tabs/parts/TabList.js";
+export {
+  q as Breadcrumb,
+  e as BreadcrumbLink,
+  z as Breadcrumbs,
+  m as FormContextualLink,
+  x as Link,
+  p as ListView,
+  n as ListViewItem,
+  s as MenuItem,
+  T as NavItem,
+  L as NavigationCard,
+  d as PaginationLink,
+  c as PaginationNext,
+  B as PaginationPrevious,
+  h as SubTask,
+  N as Tab,
+  D as TabList,
+  w as TabPanel,
+  V as Tabs,
+  M as Task
+};

package/dist/esm/mocks/employees.d.ts

@@ -8,10 +8,6 @@ export type Employee = {
     startWorkingDate: string;
     endWorkingDate: string;
     status: 'active' | 'onboarding' | 'offboarding' | 'inactive' | 'retired';
-    manager: {
-        name: string;
-        position: string;
-        team: string;
-    } | null;
+    manager: Pick<Employee, 'name' | 'position' | 'team'> | null;
 };
 export declare const mockEmployees: Employee[];

package/dist/esm/providers/router/RouterProvider.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, PropsWithChildren } from 'react';
 import { RouterProvider as AriaRouterProvider } from 'react-aria-components';
 export interface ExtendedRouterContextValue {
     /**
@@ -26,7 +26,7 @@ export interface RouterProviderProps extends ComponentProps<typeof AriaRouterPro
     isActive: (to: string) => boolean;
 }
 /**
- * The `RouterProvider` component is a provider that allows for integrations between Unity components that render links (such as `Link`, `NavItem`, etc.) and any client-side routing library in a single or multi-page application.
+ * The `RouterProvider` component is a provider that allows for integrations between Unity components that render links (such as `RawLink`, `RawNavItem`, etc.) and any client-side routing library in a single or multi-page application.
  *
  * By default, links perform native browser navigation when they are interacted with. However, many apps and frameworks use client side routers to avoid a full page reload when navigating between pages. The `RouterProvider` component configures all Unity components that support it to navigate using the client side router you provide. Set this up once in the root of your app, and any component with the href prop will automatically navigate using your router.
  */
@@ -34,4 +34,9 @@ export declare function RouterProvider({ isActive, children, ...routerProps }: R
 export declare namespace RouterProvider {
     var displayName: string;
 }
+/**
+ * The `NoopRouterProvider` should only be use when transitioning between routers to bail out of the previous provider
+ * that is rendered upper in the react tree.
+ */
+export declare function NoopRouterProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/providers/router/RouterProvider.js

@@ -1,18 +1,22 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useContext as u, createContext as i } from "react";
+import { useContext as n, createContext as i } from "react";
 import { RouterProvider as d } from "react-aria-components";
 const o = i(
   null
-), R = () => u(o);
-function m({
-  isActive: t,
-  children: n,
-  ...r
+), a = () => n(o);
+function v({
+  isActive: r,
+  children: u,
+  ...t
 }) {
-  return /* @__PURE__ */ e(o.Provider, { value: { isActive: t, ...r }, children: /* @__PURE__ */ e(d, { ...r, children: n }) });
+  return /* @__PURE__ */ e(o.Provider, { value: { isActive: r, ...t }, children: /* @__PURE__ */ e(d, { ...t, children: u }) });
 }
-m.displayName = "RouterProvider";
+function c({ children: r }) {
+  return /* @__PURE__ */ e(o.Provider, { value: null, children: r });
+}
+v.displayName = "RouterProvider";
 export {
-  m as RouterProvider,
-  R as useRouter
+  c as NoopRouterProvider,
+  v as RouterProvider,
+  a as useRouter
 };

package/dist/esm/storybook-testing.js

@@ -1,6 +1,12 @@
 import { getTestingUtilsDatePicker as i } from "./components/date-picker-field/test-utils.js";
-import { getTestingUtilsSelect as g } from "./components/select-field/test-utils.js";
+import { getTestingUtilsMultiSelect as g } from "./components/multi-select-field/test-utils.js";
+import { getTestingUtilsSelect as s } from "./components/select-field/test-utils.js";
+import { getTestingUtilsToast as T } from "./components/toast/test-utils.js";
+import { getTestingUtilsDialog as m } from "./components/dialog/test-utils.js";
 export {
   i as getTestingUtilsDatePicker,
-  g as getTestingUtilsSelect
+  m as getTestingUtilsDialog,
+  g as getTestingUtilsMultiSelect,
+  s as getTestingUtilsSelect,
+  T as getTestingUtilsToast
 };

package/dist/esm/storybook-utilities/previewTransform.d.ts

@@ -1 +1,2 @@
 export declare const previewTransform: (code: string) => Promise<string>;
+export declare const extractRenderProperty: (code: string) => string;

package/dist/esm/types/DataAttributes.d.ts

@@ -1 +1 @@
-export type DataAttributes = Record<`data-${string}`, string | number>;
+export type DataAttributes = Record<`data-${string}`, unknown>;

package/dist/esm/utils/scroll-detection.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Strategy for detecting scrollable content
+ */
+export type ScrollDetectionStrategy = 'size' | 'style' | 'both';
+/**
+ * Detailed detection results for both size and style methods
+ */
+export interface DetectionMethod {
+    size: {
+        vertical: boolean;
+        horizontal: boolean;
+    };
+    style: {
+        vertical: boolean;
+        horizontal: boolean;
+    };
+}
+/**
+ * Result of scroll detection
+ */
+export interface ScrollDetectionResult {
+    hasVerticalScroll: boolean;
+    hasHorizontalScroll: boolean;
+    hasAnyScroll: boolean;
+    detectionMethod: DetectionMethod;
+}
+/**
+ * Detects if an element has scrollable content using the specified strategy.
+ * This is a pure function with no side effects, making it easy to test
+ * and reuse in different contexts (React hooks, vanilla JS, etc.)
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {ScrollDetectionResult} Detailed scroll detection result
+ * @example
+ * ```ts
+ * const element = document.getElementById('container');
+ * const result = detectScroll(element, 'size');
+ * if (result.hasVerticalScroll) {
+ *   console.log('Element has vertical scroll');
+ * }
+ * ```
+ * @example
+ * ```ts
+ * // Check both strategies for debugging
+ * const result = detectScroll(element, 'both');
+ * console.log('Size detection:', result.detectionMethod.size);
+ * console.log('Style detection:', result.detectionMethod.style);
+ * ```
+ */
+export declare function detectScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): ScrollDetectionResult;
+/**
+ * Simplified helper to check if element has any scrollable content
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {boolean} True if element has any scrollable content
+ * @example
+ * ```ts
+ * if (hasScroll(document.getElementById('container'))) {
+ *   console.log('Has scroll');
+ * }
+ * ```
+ */
+export declare function hasScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): boolean;
+/**
+ * Check if element has vertical scrollable content
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {boolean} True if element has vertical scrollable content
+ */
+export declare function hasVerticalScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): boolean;
+/**
+ * Check if element has horizontal scrollable content
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {boolean} True if element has horizontal scrollable content
+ */
+export declare function hasHorizontalScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): boolean;

package/dist/esm/utils/scroll-detection.js

@@ -0,0 +1,33 @@
+function S(o, z = "size") {
+  const r = o.scrollHeight > o.clientHeight, e = o.scrollWidth > o.clientWidth, s = window.getComputedStyle(o), h = s.overflowY, n = s.overflowX, c = s.overflow, a = h === "scroll" || h === "auto" || c === "scroll" || c === "auto", i = n === "scroll" || n === "auto" || c === "scroll" || c === "auto";
+  let t, l;
+  switch (z) {
+    case "size":
+      t = r, l = e;
+      break;
+    case "style":
+      t = a, l = i;
+      break;
+    case "both":
+      t = r && a, l = e && i;
+      break;
+  }
+  return {
+    hasVerticalScroll: t,
+    hasHorizontalScroll: l,
+    hasAnyScroll: t || l,
+    detectionMethod: {
+      size: {
+        vertical: r,
+        horizontal: e
+      },
+      style: {
+        vertical: a,
+        horizontal: i
+      }
+    }
+  };
+}
+export {
+  S as detectScroll
+};

package/dist/esm/utils/spacing.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Spacing token utilities for Unity components.
+ * Internal utilities for processing spacing tokens for use with tailwind-variants.
+ */
+/**
+ * Unity spacing token with dollar sign prefix.
+ * Matches the Unity themes spacing scale.
+ */
+export type SpacingToken = '$0' | '$25' | '$50' | '$75' | '$100' | '$125' | '$150' | '$200' | '$250' | '$300' | '$400' | '$500' | '$600' | '$800' | '$1000';
+/**
+ * Individual padding configuration for each side.
+ * All properties are optional, allowing partial specification.
+ */
+export type PaddingObject = {
+    top?: SpacingToken;
+    right?: SpacingToken;
+    bottom?: SpacingToken;
+    left?: SpacingToken;
+};
+/**
+ * Processed padding variants ready for tailwind-variants.
+ * Used to pass values to the tv() function.
+ */
+export type PaddingVariants = {
+    padding?: SpacingToken;
+    paddingBlock?: SpacingToken;
+    paddingInline?: SpacingToken;
+    paddingTop?: SpacingToken;
+    paddingRight?: SpacingToken;
+    paddingBottom?: SpacingToken;
+    paddingLeft?: SpacingToken;
+};
+/**
+ * Processes padding props to determine which variant values to apply.
+ * Handles three input types:
+ * 1. Simple token string - applies to all sides
+ * 2. Block/Inline tokens - applies to vertical/horizontal directions
+ * 3. Object with individual sides - applies to specific sides
+ *
+ * Priority order (highest to lowest):
+ * - Individual padding properties (top, right, bottom, left)
+ * - paddingBlock and paddingInline
+ * - padding (all sides)
+ * @param padding - Padding for all directions or object with individual sides
+ * @param paddingBlock - Padding for block direction (top & bottom)
+ * @param paddingInline - Padding for inline direction (left & right)
+ * @returns Padding variant values for use with tv() function
+ * @example
+ * ```ts
+ * // All sides
+ * processPaddingProp('$200')
+ * // { padding: '$200' }
+ *
+ * // Block/Inline
+ * processPaddingProp(undefined, '$300', '$200')
+ * // { paddingBlock: '$300', paddingInline: '$200' }
+ *
+ * // Individual sides
+ * processPaddingProp({ top: '$300', right: '$200', bottom: '$300', left: '$200' })
+ * // { paddingTop: '$300', paddingRight: '$200', paddingBottom: '$300', paddingLeft: '$200' }
+ * ```
+ */
+export declare function processPaddingProp(padding?: SpacingToken | PaddingObject, paddingBlock?: SpacingToken, paddingInline?: SpacingToken): PaddingVariants;

package/dist/esm/utils/spacing.js

@@ -0,0 +1,15 @@
+function r(t, o, e) {
+  return typeof t == "object" && t !== null ? {
+    paddingTop: t.top,
+    paddingRight: t.right,
+    paddingBottom: t.bottom,
+    paddingLeft: t.left
+  } : {
+    padding: t,
+    paddingBlock: o,
+    paddingInline: e
+  };
+}
+export {
+  r as processPaddingProp
+};

package/i18n/en-GB.json

@@ -3,9 +3,11 @@
   "unity:component:common:clear:title": "Clear",
   "unity:component:common:close:label": "Close",
   "unity:component:common:loading:label": "Loading...",
+  "unity:component:common:unknown": "unknown",
   "unity:component:common:previous": "Previous",
   "unity:component:common:next": "Next",
   "unity:component:common:customer-support:url": "https://support.payfit.com/en/inbox/",
+  "unity:component:common:scrollable-content:label": "Scrollable content",
   "unity:component:action-bar:toolbar-label": "Bulk actions toolbar",
   "unity:component:action-bar:selection-count-text": "{selectionCount, plural, =0 {no items} one {{selectionCount} item} other {{selectionCount} items}} selected",
   "unity:component:action-bar:key-shortcuts-text": "Use {keyShortcuts} to focus the action bar",
@@ -19,20 +21,28 @@
   "unity:component:autocomplete:placeholder": "Search",
   "unity:component:autocomplete:panel:empty:label": "No results found",
   "unity:component:autocomplete:panel:loading:label": "Loading results",
-  "unity:component:error-state:404:main-description": "This item may have been moved or deleted.<br></br>You can try searching for it manually or start again from your dashboard.",
-  "unity:component:error-state:404-alternative:main-description": "The page or document you’re looking for may have been moved or deleted.",
-  "unity:component:error-state:404:main-title": "Sorry, we couldn’t find what you’re looking for",
-  "unity:component:error-state:404-alternative:main-title": "Oops, we couldn't find this item",
+  "unity:component:dialog:actions:label": "Dialog Actions",
+  "unity:component:error-state:404:main-description": "The page or document you’re looking for may have been moved or deleted.<br></br>You can try searching for it manually or start again from your dashboard.",
+  "unity:component:error-state:404:main-title": "Sorry, we couldn't find this item",
+  "unity:component:error-state:known:main-description": "Please refresh the page or try logging in again.<br></br>We’ve been informed of the issue and are working to fix it as quickly as possible.",
   "unity:component:error-state:button:label": "Go to dashboard",
-  "unity:component:error-state:detail-description": "Here's the technical error detail.<br></br><br></br>If the problem continues, you can send it to <Link>our customer support</Link> so we can help unblock you:",
-  "unity:component:error-state:known:main-description": "Please refresh the page or check your connection.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible.",
+  "unity:component:error-state:detail-description": "Here's the technical error detail. If the problem continues, you can send it to <Link>our customer support</Link> so we can help unblock you:",
   "unity:component:error-state:common:main-title": "Something went wrong",
   "unity:component:error-state:common:icon:alt": "Something went wrong",
   "unity:component:error-state:common:illustration:alt": "Something went wrong",
-  "unity:component:error-state:common:main-description-component": "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible.",
+  "unity:component:error-state:common:main-description-component": "Please refresh the page or try logging in again.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible.",
   "unity:component:error-state:collapsible:title": "Show details",
   "unity:component:error-state:unknown:back-link:label": "Go back to previous page",
-  "unity:component:error-state:unknown:main-description": "Please refresh the page or try signing in again.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible.<br></br>If the problem continues, please contact <Link>our customer support</Link>.",
+  "unity:component:error-state:unknown:main-description": "Please refresh the page or try logging in again.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible.<br></br><br></br>If the problem continues, please contact <Link>our customer support</Link>.",
+  "unity:component:filter:action:apply": "Apply",
+  "unity:component:filter:dismiss:title": "Remove filter",
+  "unity:component:filter:label:values-count": "{count, plural, =0 {no values} one {one value} other {{count} values selected}}",
+  "unity:component:filter-toolbar:label": "Filter toolbar",
+  "unity:component:filter-toolbar:filter-list:label": "Applied filters",
+  "unity:component:filter-toolbar:filter-controls:label": "Filter controls",
+  "unity:component:filter-toolbar:clear-filters:label": "Clear filters",
+  "unity:component:filter-toolbar:add-filter:label": "Add filter",
+  "unity:component:filter-toolbar:add-filter:popover:label": "Select a filter to add",
   "unity:component:form-field:date-picker:calendar-button": "Open calendar",
   "unity:component:form-field:date-picker:segment-select:month:label": "Change current month",
   "unity:component:form-field:date-picker:segment-select:month:description": "Press Enter or Space to change month, then use up and down arrows to select a month",
@@ -41,6 +51,9 @@
   "unity:component:form-field:form-input:spinner:label": "Loading",
   "unity:component:form-field:form-input:error:alt": "Error",
   "unity:component:form-field:number-input:decrement:title": "decrement",
+  "unity:component:phone-number:country-selector:label": "Select country code, {country} {dialCode}",
+  "unity:component:phone-number:empty-country:alt": "No country selected",
+  "unity:component:phone-number:selected:label": "Selected",
   "unity:component:form-field:number-input:increment:title": "increment",
   "unity:component:form-field:textarea:resize-handle:label": "Resize textarea",
   "unity:component:full-page-loader:label": "Content is loading...",
@@ -57,6 +70,7 @@
   "unity:component:pagination:jump-dialog:action:cancel": "Cancel",
   "unity:component:pagination:jump-dialog:action:go": "Go",
   "unity:component:search:placeholder": "Search",
+  "unity:component:select:search:label": "Search options",
   "unity:component:skip-links:label": "Skip to:",
   "unity:component:table:empty-state:loading:title": "Just a moment",
   "unity:component:table:empty-state:no-data:title": "We couldn't find any results",