@payfit/unity-components 2.24.2 → 2.25.1

package/dist/esm/components/actionable/Actionable.d.ts

@@ -57,5 +57,5 @@ export interface ActionableProps extends AriaButtonProps {
  * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/actionable GitHub}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/primitives-actionable--docs unity-components.payfit.io}
  */
-declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLButtonElement | HTMLDivElement | HTMLSpanElement>>;
+declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLSpanElement | HTMLButtonElement | HTMLDivElement>>;
 export { Actionable };

package/dist/esm/components/avatar/parts/AvatarIcon.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as c from "react";
 import { IconSprite as p } from "@payfit/unity-icons";
-import * as a from "@payfit/unity-themes/tokens/spacings.json";
+import * as a from "@payfit/unity-themes/tokens/common/spacings.json";
 import { useAvatarContext as u } from "../Avatar.context.js";
 const r = (e) => parseInt(e.replace("px", "").trim(), 10), m = {
   xl: r(a.spacing[500].$value),

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

@@ -23,7 +23,7 @@ export type RawBreadcrumbLinkProps = RawLinkProps;
  * - Uses the 'secondary' color variant for breadcrumb links
  * @see {@link RawBreadcrumbLinkProps} for all available props
  */
-declare const RawBreadcrumbLink: import('react').ForwardRefExoticComponent<Omit<import('react-aria-components').LinkProps, "className" | "style"> & {
+declare const RawBreadcrumbLink: import('react').ForwardRefExoticComponent<Omit<import('react-aria-components').LinkProps, "style" | "className"> & {
     href: HTMLAnchorElement["href"];
     id?: import('react').HTMLAttributes<HTMLAnchorElement>["id"];
     size?: "default" | "small" | "inherit" | "large" | undefined;

package/dist/esm/components/carousel/parts/CarouselHeader.d.ts

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 export declare const carouselHeader: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            slot?: import('tailwind-merge').ClassNameValue;
             nav?: import('tailwind-merge').ClassNameValue;
+            slot?: import('tailwind-merge').ClassNameValue;
             title?: import('tailwind-merge').ClassNameValue;
             root?: import('tailwind-merge').ClassNameValue;
         };
@@ -11,8 +11,8 @@ export declare const carouselHeader: import('tailwind-variants').TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import('tailwind-merge').ClassNameValue | {
-            slot?: import('tailwind-merge').ClassNameValue;
             nav?: import('tailwind-merge').ClassNameValue;
+            slot?: import('tailwind-merge').ClassNameValue;
             title?: import('tailwind-merge').ClassNameValue;
             root?: import('tailwind-merge').ClassNameValue;
         };
@@ -25,8 +25,8 @@ export declare const carouselHeader: import('tailwind-variants').TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            slot?: import('tailwind-merge').ClassNameValue;
             nav?: import('tailwind-merge').ClassNameValue;
+            slot?: import('tailwind-merge').ClassNameValue;
             title?: import('tailwind-merge').ClassNameValue;
             root?: import('tailwind-merge').ClassNameValue;
         };

package/dist/esm/components/form-field/parts/RawFormContextualLink.d.ts

@@ -18,5 +18,5 @@ interface FormContextualLinkActionProps {
  * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
  * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
-declare const RawFormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const RawFormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { RawFormContextualLink };

package/dist/esm/components/form-field/parts/TanstackRawFormContextualLink.d.ts

@@ -22,5 +22,5 @@ export type TanstackRawFormContextualLinkProps = PropsWithChildren<FormContextua
  * - an anchor (`RawLink`) when `href` is provided; or
  * - a button (from `react-aria-components`) when `onPress` is provided.
  */
-declare const TanstackRawFormContextualLink: import('react').ForwardRefExoticComponent<TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const TanstackRawFormContextualLink: import('react').ForwardRefExoticComponent<TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { TanstackRawFormContextualLink };

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

@@ -212,7 +212,7 @@ export type RawLinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
 /**
  * Links allow users to navigate to different pages or sections.
  */
-declare const RawLink: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "className" | "style"> & {
+declare const RawLink: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "style" | "className"> & {
     /**
      * The URL the link navigates to.
      */

package/dist/esm/components/navigation-card/NavigationCard.d.ts

@@ -41,6 +41,6 @@ import { NavigationCardProps } from './NavigationCard.types.js';
  * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/navigation-navigationcard--docs unity-components.payfit.io}
  */
-declare const RawNavigationCard: import('react').ForwardRefExoticComponent<NavigationCardProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const RawNavigationCard: import('react').ForwardRefExoticComponent<NavigationCardProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { RawNavigationCard };
 export type { NavigationCardProps } from './NavigationCard.types.js';

package/dist/esm/components/popover/parts/PopoverHeader.js

@@ -3,7 +3,7 @@ import { forwardRef as u, useContext as y } from "react";
 import { uyTv as d } from "@payfit/unity-themes";
 import { OverlayTriggerStateContext as p, Heading as f } from "react-aria-components";
 import { useIntl as g } from "react-intl";
-import { IconButton as h } from "../../icon-button/IconButton.js";
+import { CircularIconButton as h } from "../../icon-button/CircularIconButton.js";
 const v = d({
   slots: {
     base: "uy:flex uy:justify-between",
@@ -16,43 +16,44 @@ const v = d({
         heading: "uy:sr-only"
       },
       false: {
-        base: "uy:mb-150",
-        heading: "uy:typography-h2 uy:min-h-500 uy:align-center"
+        base: "uy:mb-200",
+        heading: "uy:typography-h4 uy:min-h-400 uy:align-center"
       }
     }
   }
-}), b = u(
-  ({ title: o, isTitleSrOnly: t, displayCloseButton: n }, a) => {
-    const r = y(p), s = g(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: t });
+}), x = u(
+  ({ title: o, isTitleSrOnly: t, displayCloseButton: n }, r) => {
+    const s = y(p), a = g(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: t });
     return /* @__PURE__ */ m("div", { className: l(), children: [
       /* @__PURE__ */ e(
         f,
         {
-          ref: a,
+          ref: r,
           slot: "title",
           className: i(),
           "data-dd-privacy": "allow",
+          level: 4,
           children: o
         }
       ),
       n && /* @__PURE__ */ e(
         h,
         {
-          variant: "ghost",
-          color: "neutral",
           className: c(),
-          label: s.formatMessage({
+          title: a.formatMessage({
             id: "unity:component:common:close:label",
             defaultMessage: "Close"
           }),
+          color: "content.neutral.low",
           icon: "CloseOutlined",
-          onClick: () => r?.close()
+          onPress: () => s?.close(),
+          size: "large"
         }
       )
     ] });
   }
 );
-b.displayName = "PopoverTitle";
+x.displayName = "PopoverTitle";
 export {
-  b as PopoverHeader
+  x as PopoverHeader
 };

package/dist/esm/components/select-list/constants.js

@@ -1,4 +1,4 @@
-import * as t from "@payfit/unity-themes/tokens/spacings.json";
+import * as t from "@payfit/unity-themes/tokens/common/spacings.json";
 import { ListLayout as s } from "react-aria-components";
 const a = (o) => parseInt(o.replace("px", "").trim(), 10), i = a(t.spacing[500].$value), n = a(t.spacing[400].$value), p = {
   layout: s,

package/dist/esm/hooks/use-container-query-level.js

@@ -1,4 +1,4 @@
-import s from "@payfit/unity-themes/tokens/sizes.json";
+import s from "@payfit/unity-themes/tokens/common/sizes.json";
 import { useResizeObserver as c } from "usehooks-ts";
 const i = () => {
   const n = s.container, o = {

package/dist/esm/hooks/use-tanstack-form.d.ts

@@ -3,7 +3,7 @@ export declare const useTanstackUnityForm: <TFormData, TOnMount extends import('
     readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldLabel: import('react').ForwardRefExoticComponent<import('../index.js').LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
-    readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+    readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     readonly Field: typeof import('../components/form-field/TanstackFormField.js').TanstackFormField;
     readonly CheckboxGroupInput: import('react').ForwardRefExoticComponent<import('../components/checkbox-group/TanstackCheckboxGroup.js').TanstackCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
     readonly CheckboxInput: import('react').ForwardRefExoticComponent<import('../components/checkbox/TanstackCheckbox.js').TanstackCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
@@ -81,7 +81,7 @@ export declare const withForm: <TFormData, TOnMount extends import('@tanstack/fo
     readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldLabel: import('react').ForwardRefExoticComponent<import('../index.js').LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
-    readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+    readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     readonly Field: typeof import('../components/form-field/TanstackFormField.js').TanstackFormField;
     readonly CheckboxGroupInput: import('react').ForwardRefExoticComponent<import('../components/checkbox-group/TanstackCheckboxGroup.js').TanstackCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
     readonly CheckboxInput: import('react').ForwardRefExoticComponent<import('../components/checkbox/TanstackCheckbox.js').TanstackCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
@@ -159,7 +159,7 @@ export declare const withForm: <TFormData, TOnMount extends import('@tanstack/fo
         readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldLabel: import('react').ForwardRefExoticComponent<import('../index.js').LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
-        readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+        readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
         readonly Field: typeof import('../components/form-field/TanstackFormField.js').TanstackFormField;
         readonly CheckboxGroupInput: import('react').ForwardRefExoticComponent<import('../components/checkbox-group/TanstackCheckboxGroup.js').TanstackCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
         readonly CheckboxInput: import('react').ForwardRefExoticComponent<import('../components/checkbox/TanstackCheckbox.js').TanstackCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
@@ -238,7 +238,7 @@ export declare const withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps
     readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
     readonly FieldLabel: import('react').ForwardRefExoticComponent<import('../index.js').LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
-    readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+    readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     readonly Field: typeof import('../components/form-field/TanstackFormField.js').TanstackFormField;
     readonly CheckboxGroupInput: import('react').ForwardRefExoticComponent<import('../components/checkbox-group/TanstackCheckboxGroup.js').TanstackCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
     readonly CheckboxInput: import('react').ForwardRefExoticComponent<import('../components/checkbox/TanstackCheckbox.js').TanstackCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
@@ -316,7 +316,7 @@ export declare const withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps
         readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldLabel: import('react').ForwardRefExoticComponent<import('../index.js').LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
-        readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+        readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
         readonly Field: typeof import('../components/form-field/TanstackFormField.js').TanstackFormField;
         readonly CheckboxGroupInput: import('react').ForwardRefExoticComponent<import('../components/checkbox-group/TanstackCheckboxGroup.js').TanstackCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
         readonly CheckboxInput: import('react').ForwardRefExoticComponent<import('../components/checkbox/TanstackCheckbox.js').TanstackCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
@@ -393,7 +393,7 @@ export declare const withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps
         readonly FieldFeedbackText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormFeedbackText.js').TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldHelperText: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackFormHelperText.js').TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
         readonly FieldLabel: import('react').ForwardRefExoticComponent<import('../index.js').LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
-        readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+        readonly FieldRawContextualLink: import('react').ForwardRefExoticComponent<import('../components/form-field/parts/TanstackRawFormContextualLink.js').TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
         readonly Field: typeof import('../components/form-field/TanstackFormField.js').TanstackFormField;
         readonly CheckboxGroupInput: import('react').ForwardRefExoticComponent<import('../components/checkbox-group/TanstackCheckboxGroup.js').TanstackCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
         readonly CheckboxInput: import('react').ForwardRefExoticComponent<import('../components/checkbox/TanstackCheckbox.js').TanstackCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.24.2",
+  "version": "2.25.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.24.2",
+    "@payfit/unity-illustrations": "2.25.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.24.2",
-    "@payfit/unity-themes": "2.24.2",
+    "@payfit/unity-icons": "2.25.1",
+    "@payfit/unity-themes": "2.25.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.24.2",
-    "@payfit/unity-illustrations": "2.24.2",
-    "@payfit/unity-themes": "2.24.2",
+    "@payfit/unity-icons": "2.25.1",
+    "@payfit/unity-illustrations": "2.25.1",
+    "@payfit/unity-themes": "2.25.1",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-designs": "11.1.3",

package/dist/esm/components/popover/parts/PopoverContent.d.ts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react';
-export type PopoverContentProps = PropsWithChildren<object>;
-declare const PopoverContent: import('react').ForwardRefExoticComponent<object & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLDivElement>>;
-export { PopoverContent };