@payfit/unity-components 2.67.46 → 2.68.1

package/dist/esm/ai-kit.js

@@ -0,0 +1,3 @@
+import { aiGradientEffect as e, aiGradientSurfaceEffect as t } from "./modules/ai-kit/utils/ai-gradient-effect.js";
+import { AIButton as n } from "./modules/ai-kit/components/ai-button/AIButton.js";
+export { n as AIButton, e as aiGradientEffect, t as aiGradientSurfaceEffect };

package/dist/esm/components/app-layout/AppLayout.js

@@ -16,7 +16,7 @@ var a = t({
 		],
 		contentWrapper: ["uy:flex uy:min-w-0 uy:flex-1 uy:flex-col uy:relative", "uy:md:[&:has([data-unity-page])]:pl-0"],
 		contentHeader: "uy:hidden uy:md:contents",
-		content: ["uy:flex uy:flex-1 uy:flex-col", "uy:md:[&:has([data-unity-page])]:pr-0 uy:md:[&:has([data-unity-page])]:pt-0"],
+		content: ["uy:isolate uy:flex uy:flex-1 uy:flex-col", "uy:md:[&:has([data-unity-page])]:pr-0 uy:md:[&:has([data-unity-page])]:pt-0"],
 		footer: "uy:hidden uy:md:block"
 	},
 	variants: { withoutContentPadding: {

package/dist/esm/components/button/Button.variants.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from '@payfit/unity-themes';
-declare const buttonBase: import('tailwind-variants').TVReturnType<{
+export declare const buttonBase: import('tailwind-variants').TVReturnType<{
     isDisabled: {
         true: "uy:disabled:cursor-not-allowed";
         false: "";
@@ -308,4 +308,3 @@ export type ButtonBase = VariantProps<typeof buttonBase>;
 export type ButtonFilled = VariantProps<typeof buttonFilled>;
 export type ButtonOutlined = VariantProps<typeof buttonOutlined>;
 export type ButtonGhost = VariantProps<typeof buttonGhost>;
-export {};

package/dist/esm/components/button/Button.variants.js

@@ -184,4 +184,4 @@ var t = e({
 	}]
 });
 //#endregion
-export { n as buttonFilled, i as buttonGhost, r as buttonOutlined };
+export { t as buttonBase, n as buttonFilled, i as buttonGhost, r as buttonOutlined };

package/dist/esm/modules/ai-kit/components/ai-button/AIButton.d.ts

@@ -0,0 +1,198 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
+/**
+ * Defines the visual states shared by `AIButton` instances.
+ *
+ * Render `AIButton` instead of applying these classes directly so the surface,
+ * loading, disabled, and accessibility behavior stay synchronized.
+ */
+export declare const aiButton: import('tailwind-variants').TVReturnType<{
+    variant: {
+        outlined: string[];
+        ghost: string[];
+    };
+    isDisabled: {
+        true: string[];
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: "uy:disabled:cursor-not-allowed";
+        false: "";
+    };
+    isLoading: {
+        true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
+        false: "";
+    };
+    size: {
+        default: "uy:w-auto uy:grow-0 uy:basis-auto";
+        full: "uy:grow-1 uy:w-full uy:basis-full";
+    };
+    mode: {
+        default: string[];
+        compact: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: "uy:disabled:cursor-not-allowed";
+        false: "";
+    };
+    isLoading: {
+        true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
+        false: "";
+    };
+    size: {
+        default: "uy:w-auto uy:grow-0 uy:basis-auto";
+        full: "uy:grow-1 uy:w-full uy:basis-full";
+    };
+    mode: {
+        default: string[];
+        compact: string[];
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: "uy:disabled:cursor-not-allowed";
+        false: "";
+    };
+    isLoading: {
+        true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
+        false: "";
+    };
+    size: {
+        default: "uy:w-auto uy:grow-0 uy:basis-auto";
+        full: "uy:grow-1 uy:w-full uy:basis-full";
+    };
+    mode: {
+        default: string[];
+        compact: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
+    isDisabled: {
+        true: "uy:disabled:cursor-not-allowed";
+        false: "";
+    };
+    isLoading: {
+        true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled";
+        false: "";
+    };
+    size: {
+        default: "uy:w-auto uy:grow-0 uy:basis-auto";
+        full: "uy:grow-1 uy:w-full uy:basis-full";
+    };
+    mode: {
+        default: string[];
+        compact: string[];
+    };
+}, undefined>>>;
+/**
+ * Configures an AI-assisted action and inherits standard React Aria button
+ * behavior such as `onPress`, `isDisabled`, and `type`.
+ */
+export type AIButtonProps = PropsWithChildren<Omit<AriaButtonProps, 'children' | 'className' | 'style'> & {
+    /**
+     * Selects the AI button appearance.
+     * - `outlined` keeps a visible AI gradient border while idle.
+     * - `ghost` reveals the AI treatment during interaction.
+     * @default 'outlined'
+     */
+    variant?: 'outlined' | 'ghost';
+    /**
+     * Controls the button density.
+     * - `default` uses the standard action size.
+     * - `compact` uses the dense action size.
+     * @default 'default'
+     */
+    mode?: 'default' | 'compact';
+    /**
+     * Shows a spinner and disables the action while it is in progress.
+     * The label remains visible to preserve the button's accessible name.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Sets the accessible label announced by the loading spinner.
+     * @default The translated Unity loading label.
+     */
+    loadingLabel?: string;
+    /** Renders a Unity icon before the label. */
+    prefixIcon?: UnityIcon;
+    /** Renders a Unity icon after the label. */
+    suffixIcon?: UnityIcon;
+    /**
+     * Truncates the visible label after the specified number of characters.
+     * The complete label remains available to assistive technology.
+     */
+    truncateLabelLength?: number;
+}>;
+/**
+ * Triggers an AI-assisted action with Unity's dedicated visual language.
+ *
+ * Use `AIButton` for agentic actions such as drafting, rewriting, or
+ * summarizing. Pass `variant="outlined"` for a persistent gradient border or
+ * `variant="ghost"` for a quieter resting treatment. Use `isLoading` while an
+ * action runs; it disables the button, displays a spinner, and keeps the
+ * label visible.
+ * @param props - React Aria button props and AI Button presentation options.
+ * @see {@link AIButtonProps} for the available appearance, loading, icon, and
+ * truncation options.
+ * @example
+ * ```tsx
+ * import { AIButton } from '@payfit/unity-components/ai-kit'
+ *
+ * export function DraftContractButton() {
+ *   return (
+ *     <AIButton
+ *       onPress={() => undefined}
+ *       prefixIcon="AIEditOutlined"
+ *       variant="outlined"
+ *     >
+ *       Draft with AI
+ *     </AIButton>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - `AIButton` renders a native button through React Aria. It supports pointer,
+ * Enter, and Space activation. Prefix and suffix icons are decorative; use
+ * the text label to provide the accessible name.
+ * - `AIButton` applies a glowing, rotating gradient effect on hover and focus.
+ * For users with reduced motion activated, the rotation is disabled.
+ */
+export declare const AIButton: import('react').ForwardRefExoticComponent<Omit<AriaButtonProps, "style" | "children" | "className"> & {
+    /**
+     * Selects the AI button appearance.
+     * - `outlined` keeps a visible AI gradient border while idle.
+     * - `ghost` reveals the AI treatment during interaction.
+     * @default 'outlined'
+     */
+    variant?: "outlined" | "ghost";
+    /**
+     * Controls the button density.
+     * - `default` uses the standard action size.
+     * - `compact` uses the dense action size.
+     * @default 'default'
+     */
+    mode?: "default" | "compact";
+    /**
+     * Shows a spinner and disables the action while it is in progress.
+     * The label remains visible to preserve the button's accessible name.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Sets the accessible label announced by the loading spinner.
+     * @default The translated Unity loading label.
+     */
+    loadingLabel?: string;
+    /** Renders a Unity icon before the label. */
+    prefixIcon?: UnityIcon;
+    /** Renders a Unity icon after the label. */
+    suffixIcon?: UnityIcon;
+    /**
+     * Truncates the visible label after the specified number of characters.
+     * The complete label remains available to assistive technology.
+     */
+    truncateLabelLength?: number;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/esm/modules/ai-kit/components/ai-button/AIButton.js

@@ -0,0 +1,164 @@
+import { Icon as e } from "../../../../components/icon/Icon.js";
+import { Spinner as t } from "../../../../components/spinner/Spinner.js";
+import { buttonBase as n } from "../../../../components/button/Button.variants.js";
+import { aiGradientEffect as r, aiGradientSurfaceEffect as i } from "../../utils/ai-gradient-effect.js";
+import { forwardRef as a, useMemo as o } from "react";
+import { uyTv as s } from "@payfit/unity-themes";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useIntl as u } from "react-intl";
+import { Button as d } from "react-aria-components/Button";
+//#region src/modules/ai-kit/components/ai-button/AIButton.tsx
+var f = s({
+	extend: n,
+	base: ["uy:relative uy:isolate uy:border-2 uy:border-transparent", "uy:[--uy-ai-gradient-effect-surface-radius:var(--uy-radius-75)] uy:sm:[--uy-ai-gradient-effect-surface-radius:var(--uy-radius-50)]"],
+	variants: {
+		variant: {
+			outlined: [
+				"uy:text-content-neutral-enabled",
+				"uy:enabled:data-[hovered=\"true\"]:text-content-neutral-hover",
+				"uy:enabled:active:text-content-neutral-active",
+				"uy:enabled:data-[pressed=\"true\"]:text-content-neutral-pressed",
+				"uy:enabled:data-[focus-visible=\"true\"]:text-content-neutral-focus"
+			],
+			ghost: [
+				"uy:bg-transparent uy:text-content-neutral-enabled",
+				"uy:enabled:data-[hovered=\"true\"]:text-content-neutral-hover",
+				"uy:enabled:active:text-content-neutral-active",
+				"uy:enabled:data-[pressed=\"true\"]:text-content-neutral-pressed",
+				"uy:enabled:data-[focus-visible=\"true\"]:text-content-neutral-focus"
+			]
+		},
+		isDisabled: { true: [
+			"uy:disabled:text-content-neutral-disabled",
+			"uy:disabled:bg-transparent",
+			"uy:data-[loading]:text-content-neutral-disabled",
+			"uy:data-[loading]:bg-transparent"
+		] }
+	},
+	compoundVariants: [
+		{
+			isDisabled: !1,
+			variant: "outlined",
+			className: r({ variant: "outlined" })
+		},
+		{
+			isDisabled: !1,
+			variant: "ghost",
+			className: r({ variant: "ghost" })
+		},
+		{
+			isDisabled: !0,
+			variant: "outlined",
+			className: "uy:disabled:border-1 uy:disabled:border-border-neutral-high-disabled uy:data-[loading]:border-1 uy:data-[loading]:border-border-neutral-high-disabled"
+		},
+		{
+			isDisabled: !0,
+			variant: "ghost",
+			className: "uy:disabled:bg-surface-neutral-disabled uy:data-[loading]:bg-surface-neutral-disabled"
+		}
+	],
+	defaultVariants: { variant: "outlined" }
+}), p = s({
+	base: ["uy:pointer-events-none uy:absolute uy:-inset-px uy:z-10 uy:rounded-[var(--uy-ai-gradient-effect-surface-radius)]", "uy:group-data-[hovered=\"true\"]:inset-0 uy:group-active:inset-0 uy:group-data-[pressed=\"true\"]:inset-0 uy:group-data-[focus-visible=\"true\"]:inset-0"],
+	variants: {
+		variant: {
+			outlined: "uy:bg-surface-neutral",
+			ghost: "uy:bg-transparent uy:group-data-[focus-visible=\"true\"]:bg-surface-neutral"
+		},
+		isDisabled: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			isDisabled: !1,
+			variant: "outlined",
+			className: i()
+		},
+		{
+			isDisabled: !1,
+			variant: "ghost",
+			className: i()
+		},
+		{
+			isDisabled: !0,
+			variant: "outlined",
+			className: "uy:inset-0 uy:bg-surface-neutral-disabled"
+		},
+		{
+			isDisabled: !0,
+			variant: "ghost",
+			className: "uy:bg-surface-neutral-disabled"
+		}
+	],
+	defaultVariants: {
+		isDisabled: !1,
+		variant: "outlined"
+	}
+}), m = (n, r, i) => n ? /* @__PURE__ */ c(t, {
+	size: "small",
+	color: "inherit",
+	label: r
+}) : i ? /* @__PURE__ */ c(e, {
+	"aria-hidden": "true",
+	color: "inherit",
+	"data-unity-icon": "prefix",
+	role: "presentation",
+	size: 20,
+	src: i
+}) : null, h = a(({ children: t, isDisabled: n = !1, isLoading: r = !1, loadingLabel: i, mode: a, prefixIcon: s, suffixIcon: h, truncateLabelLength: g, variant: _, ...v }, y) => {
+	let b = u(), x = n || r, S = (i?.trim() ? i : void 0) ?? b.formatMessage({
+		id: "unity:component:common:loading:label",
+		defaultMessage: "Loading..."
+	}), C = o(() => f({
+		isDisabled: x,
+		isLoading: r,
+		mode: a === "compact" ? "compact" : "default",
+		size: "default",
+		variant: _
+	}), [
+		x,
+		r,
+		a,
+		_
+	]);
+	return /* @__PURE__ */ l(d, {
+		...v,
+		ref: y,
+		"data-dd-privacy": "allow",
+		"data-loading": r || void 0,
+		isDisabled: n,
+		isPending: r,
+		className: C,
+		children: [/* @__PURE__ */ c("span", {
+			"aria-hidden": "true",
+			className: p({
+				isDisabled: x,
+				variant: _
+			}),
+			"data-unity-slot": "surface"
+		}), /* @__PURE__ */ l("span", {
+			className: "uy:relative uy:z-20 uy:inline-flex uy:gap-50 uy:items-center",
+			children: [
+				m(r, S, s),
+				g && g > 0 ? /* @__PURE__ */ c("span", {
+					style: { "--uy-button-label-truncation-length": `${g}ch` },
+					className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
+					children: t
+				}) : t,
+				h && /* @__PURE__ */ c(e, {
+					"aria-hidden": "true",
+					color: "inherit",
+					"data-unity-icon": "suffix",
+					role: "presentation",
+					size: 20,
+					src: h
+				})
+			]
+		})]
+	});
+});
+h.displayName = "AIButton";
+//#endregion
+export { h as AIButton, f as aiButton };

package/dist/esm/modules/ai-kit/components/ai-button/figma/AIButton.figma.d.ts

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/modules/ai-kit/index.d.ts

@@ -0,0 +1,2 @@
+export { AIButton, type AIButtonProps } from './components/ai-button/AIButton.js';
+export { aiGradientEffect, aiGradientSurfaceEffect, } from './utils/ai-gradient-effect.js';

package/dist/esm/modules/ai-kit/utils/ai-gradient-effect.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Adds the animated PayFit AI gradient treatment to an enabled interactive
+ * host without requiring decorative markup.
+ *
+ * The host must be `uy:relative`, `uy:isolate`, and `uy:group`; its opaque
+ * surface must be layered above the pseudo-elements. Set
+ * `--uy-ai-gradient-effect-surface-radius` to the surface's actual corner
+ * radius. This utility expands that radius for its layers so their curvature
+ * stays aligned when they extend outside the surface.
+ *
+ * `::before` is the low-opacity, blurred glow. It extends by `spacing-100`
+ * around the host and becomes visible on hover and focus-visible. `::after`
+ * is the sharp gradient border: outlined controls show a resting border,
+ * hover and focus-visible expand it to 2px, and pressed contracts it to 1px.
+ * Both layers read `--uy-ai-gradient-angle`; the `gradient-rotate` animation
+ * updates that typed custom property, so the gradient continues rotating when
+ * a hover or focus-visible interaction becomes pressed.
+ *
+ * Apply this utility only while the host is enabled. Disabled and loading
+ * controls must provide their own non-animated border and surface tokens.
+ * Pair it with {@link aiGradientSurfaceEffect} on the opaque surface for the
+ * 6% interior overlay.
+ * @example
+ * ```tsx
+ * const aiAction = uyTv({
+ *   base: [
+ *     'uy:relative uy:isolate uy:group uy:border-2 uy:border-transparent',
+ *     'uy:[--uy-ai-gradient-effect-surface-radius:var(--uy-radius-75)]',
+ *   ],
+ *   compoundVariants: [
+ *     {
+ *       isDisabled: false,
+ *       className: aiGradientEffect({ variant: 'outlined' }),
+ *     },
+ *   ],
+ * })
+ *
+ * const aiActionSurface = uyTv({
+ *   base: [
+ *     'uy:absolute uy:z-10 uy:rounded-[var(--uy-ai-gradient-effect-surface-radius)]',
+ *     'uy:bg-surface-neutral',
+ *   ],
+ *   compoundVariants: [
+ *     {
+ *       isDisabled: false,
+ *       className: aiGradientSurfaceEffect(),
+ *     },
+ *   ],
+ * })
+ * ```
+ */
+export declare const aiGradientEffect: import('tailwind-variants').TVReturnType<{
+    variant: {
+        outlined: "uy:after:opacity-100";
+        ghost: "";
+    };
+}, undefined, string[], {
+    variant: {
+        outlined: "uy:after:opacity-100";
+        ghost: "";
+    };
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
+    variant: {
+        outlined: "uy:after:opacity-100";
+        ghost: "";
+    };
+}, undefined>>;
+/**
+ * Adds the 6% PayFit AI gradient overlay for hovered, active, and pressed
+ * states of an enabled surface.
+ *
+ * Apply it to the opaque surface layered above {@link aiGradientEffect}. It
+ * deliberately does not set a resting or disabled background: the consuming
+ * component owns those surface tokens and must only apply this utility while
+ * enabled.
+ */
+export declare const aiGradientSurfaceEffect: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;

package/dist/esm/modules/ai-kit/utils/ai-gradient-effect.js

@@ -0,0 +1,25 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/modules/ai-kit/utils/ai-gradient-effect.ts
+var t = e({
+	base: [
+		"uy:[--uy-ai-gradient-angle:45deg] uy:transition-all",
+		"uy:before:content-[''] uy:before:pointer-events-none uy:before:absolute uy:before:-inset-100 uy:before:z-0 uy:before:rounded-[calc(var(--uy-ai-gradient-effect-surface-radius)+var(--uy-spacing-100))] uy:before:opacity-0 uy:before:blur-sm uy:before:[background:linear-gradient(var(--uy-ai-gradient-angle),var(--uy-gradient-payfit-ai))]",
+		"uy:after:content-[''] uy:after:pointer-events-none uy:after:absolute uy:after:-inset-[2px] uy:after:z-0 uy:after:rounded-[calc(var(--uy-ai-gradient-effect-surface-radius)+1px)] uy:after:opacity-0 uy:after:[background:linear-gradient(var(--uy-ai-gradient-angle),var(--uy-gradient-payfit-ai))]",
+		"uy:motion-safe:enabled:data-[hovered=\"true\"]:animate-gradient-rotate uy:motion-safe:enabled:data-[focus-visible=\"true\"]:animate-gradient-rotate",
+		"uy:enabled:data-[hovered=\"true\"]:before:opacity-10 uy:enabled:data-[focus-visible=\"true\"]:before:opacity-10",
+		"uy:enabled:data-[hovered=\"true\"]:after:opacity-100 uy:enabled:data-[focus-visible=\"true\"]:after:opacity-100 uy:enabled:data-[pressed=\"true\"]:after:opacity-100",
+		"uy:enabled:data-[pressed=\"true\"]:after:-inset-px",
+		"uy:enabled:data-[hovered=\"true\"]:after:rounded-[calc(var(--uy-ai-gradient-effect-surface-radius)+2px)] uy:enabled:data-[pressed=\"true\"]:after:rounded-[calc(var(--uy-ai-gradient-effect-surface-radius)+2px)] uy:enabled:data-[focus-visible=\"true\"]:after:rounded-[calc(var(--uy-ai-gradient-effect-surface-radius)+2px)]"
+	],
+	variants: { variant: {
+		outlined: "uy:after:opacity-100",
+		ghost: ""
+	} },
+	defaultVariants: { variant: "outlined" }
+}), n = e({ base: [
+	"uy:group-data-[hovered=\"true\"]:[background:linear-gradient(45deg,color-mix(in_srgb,var(--uy-color-yellow-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-plum-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-blue-l4)_6%,transparent)),var(--uy-color-surface-neutral)]",
+	"uy:group-active:[background:linear-gradient(45deg,color-mix(in_srgb,var(--uy-color-yellow-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-plum-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-blue-l4)_6%,transparent)),var(--uy-color-surface-neutral)]",
+	"uy:group-data-[pressed=\"true\"]:[background:linear-gradient(45deg,color-mix(in_srgb,var(--uy-color-yellow-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-plum-l5)_6%,transparent),color-mix(in_srgb,var(--uy-color-blue-l4)_6%,transparent)),var(--uy-color-surface-neutral)]"
+] });
+//#endregion
+export { t as aiGradientEffect, n as aiGradientSurfaceEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.67.46",
+  "version": "2.68.1",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -37,6 +37,18 @@
         "default": "./dist/esm/integrations/tanstack-router.js"
       }
     },
+    "./ai-kit": {
+      "import": {
+        "hrAppsLocalDev": "./src/modules/ai-kit/index.ts",
+        "types": "./dist/esm/modules/ai-kit/index.d.ts",
+        "default": "./dist/esm/ai-kit.js"
+      },
+      "module-sync": {
+        "types": "./dist/esm/modules/ai-kit/index.d.ts",
+        "hrAppsLocalDev": "./dist/esm/ai-kit.js",
+        "default": "./dist/esm/ai-kit.js"
+      }
+    },
     "./testing-utils/storybook": {
       "import": {
         "hrAppsLocalDev": "./src/index.storybook-testing.ts",
@@ -65,7 +77,7 @@
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.12.4",
     "minimatch": "10.2.5",
-    "@payfit/unity-illustrations": "2.67.46",
+    "@payfit/unity-illustrations": "2.68.1",
     "@radix-ui/react-avatar": "1.2.6",
     "@radix-ui/react-slot": "1.3.3",
     "@react-aria/interactions": "3.28.1",
@@ -100,8 +112,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.67.46",
-    "@payfit/unity-themes": "2.67.46",
+    "@payfit/unity-icons": "2.68.1",
+    "@payfit/unity-themes": "2.68.1",
     "@storybook/react-vite": "^10",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -121,9 +133,9 @@
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.67.46",
-    "@payfit/unity-illustrations": "2.67.46",
-    "@payfit/unity-themes": "2.67.46",
+    "@payfit/unity-icons": "2.68.1",
+    "@payfit/unity-illustrations": "2.68.1",
+    "@payfit/unity-themes": "2.68.1",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.5.8",
     "@storybook/addon-designs": "11.1.4",

package/src/agent-references/component-catalog.json

@@ -1,5 +1,30 @@
 {
   "components": [
+    {
+      "description": "Triggers AI-assisted actions with a dedicated outlined or ghost treatment.",
+      "docsHref": "?path=/docs/ai-kit-ai-button--docs",
+      "id": "ai-kit-ai-button",
+      "keywords": [
+        "ai",
+        "agent",
+        "action",
+        "button",
+        "AI action button",
+        "Agent action button"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "default",
+        "storyId": "ai-kit-ai-button--default"
+      },
+      "related": [],
+      "section": "components",
+      "tags": [
+        "type:component",
+        "category:actions"
+      ],
+      "title": "AI Button"
+    },
     {
       "description": "Groups high-priority page actions in a responsive toolbar for bulk or contextual workflows.",
       "docsHref": "?path=/docs/component-reference-actionbar--docs",