@payfit/unity-components 3.4.16 → 3.4.18

package/dist/esm/core/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,68 @@
+import { ComponentPropsWithoutRef, ReactNode, UIEventHandler } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
+import { ScrollAreaAxis } from '../../utils/scroll-edges.js';
+import { scrollArea } from './ScrollArea.variants.js';
+/**
+ * Chooses the logical edges that may show a fade when content remains beyond
+ * the viewport.
+ *
+ * - `none` renders no fades.
+ * - `start` renders a fade at the logical start edge.
+ * - `end` renders a fade at the logical end edge.
+ * - `both` renders fades at both logical edges.
+ */
+export type ScrollAreaFade = 'none' | 'start' | 'end' | 'both';
+/** Configures a native scroll viewport and its optional edge fades. */
+export interface ScrollAreaProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'onScroll' | 'style'> {
+    /** Renders the semantic content inside the native scroll viewport. */
+    children: ReactNode;
+    /** Chooses the permitted logical scroll axes. @default 'block' */
+    axis?: ScrollAreaAxis;
+    /** Selects which logical edge fades may appear. @default 'none' */
+    fade?: ScrollAreaFade;
+    /**
+     * Sets the Unity surface token used as the fade source.
+     * @default 'surface.neutral'
+     */
+    fadeColor?: VariantProps<typeof scrollArea>['fadeColor'];
+    /** Applies layout styling to the positioned ScrollArea root. */
+    className?: string;
+    /** Receives native scroll events from the viewport. */
+    onScroll?: UIEventHandler<HTMLDivElement>;
+}
+/**
+ * Keeps clipped content understandable by signalling where people can keep
+ * scrolling.
+ * The component renders a native viewport and can show token-backed fades at
+ * its logical inline or block edges. Set `axis` to the scroll direction, use
+ * `fade` to choose the visible edge cues, and match `fadeColor` to the
+ * surrounding Unity surface.
+ * @param props - Viewport content, scroll-axis, and edge-fade options.
+ * @see {@link ScrollAreaProps} for all available props.
+ * @example
+ * ```tsx
+ * import { ScrollArea } from '@payfit/unity-components'
+ *
+ * export function AttachmentPreview() {
+ *   return (
+ *     <ScrollArea
+ *       axis="inline"
+ *       fade="both"
+ *       className="uy:h-500 uy:w-[320px] uy:bg-surface-neutral"
+ *     >
+ *       <div className="uy:flex uy:w-max uy:gap-100 uy:p-50">
+ *         <span>Attachment 1</span>
+ *         <span>Attachment 2</span>
+ *       </div>
+ *     </ScrollArea>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component does not add a role or focusability, so children own their
+ *   semantics and keyboard behavior.
+ * - Fades are decorative and never receive pointer events.
+ * - The forwarded ref and `onScroll` target the native viewport rather than
+ *   the positioned root.
+ */
+export declare const ScrollArea: import('react').ForwardRefExoticComponent<ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/esm/core/components/scroll-area/ScrollArea.js

@@ -0,0 +1,65 @@
+import { useScrollEdges as e } from "../../hooks/use-scroll-edges.js";
+import { scrollArea as t } from "./ScrollArea.variants.js";
+import { forwardRef as n, useCallback as r } from "react";
+import { uyMerge as i } from "@payfit/unity-themes";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/core/components/scroll-area/ScrollArea.tsx
+function s(e) {
+	return e === "inline" || e === "both";
+}
+function c(e) {
+	return e === "block" || e === "both";
+}
+function l(e, t) {
+	return e === "both" || e === t;
+}
+var u = n(({ axis: n = "block", children: u, className: d, fade: f = "none", fadeColor: p, onScroll: m, ...h }, g) => {
+	let { onScroll: _, scrollEdges: v, scrollRef: y } = e({ axis: n }), { blockEndFade: b, blockStartFade: x, inlineEndFade: S, inlineStartFade: C, root: w, viewport: T } = t({
+		axis: n,
+		fadeColor: p
+	}), E = r((e) => {
+		y.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+	}, [g, y]), D = r((e) => {
+		_(e), m?.(e);
+	}, [m, _]);
+	return /* @__PURE__ */ o("div", {
+		...h,
+		className: i(w(), d),
+		"data-axis": n,
+		"data-overflow-inline": v.hasOverflowInline || void 0,
+		"data-overflow-block": v.hasOverflowBlock || void 0,
+		"data-scrollable-inline-start": v.canScrollInlineStart || void 0,
+		"data-scrollable-inline-end": v.canScrollInlineEnd || void 0,
+		"data-scrollable-block-start": v.canScrollBlockStart || void 0,
+		"data-scrollable-block-end": v.canScrollBlockEnd || void 0,
+		"data-unity-component": "scroll-area",
+		children: [
+			/* @__PURE__ */ a("div", {
+				ref: E,
+				className: T(),
+				"data-unity-slot": "scroll-area.viewport",
+				onScroll: D,
+				children: u
+			}),
+			s(n) && l(f, "start") && /* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				className: C()
+			}),
+			s(n) && l(f, "end") && /* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				className: S()
+			}),
+			c(n) && l(f, "start") && /* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				className: x()
+			}),
+			c(n) && l(f, "end") && /* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				className: b()
+			})
+		]
+	});
+});
+u.displayName = "ScrollArea";
+//#endregion
+export { u as ScrollArea };

package/dist/esm/core/components/scroll-area/ScrollArea.variants.d.ts

@@ -0,0 +1,424 @@
+export declare const scrollArea: import('tailwind-variants').TVReturnType<{
+    axis: {
+        inline: {
+            viewport: string;
+        };
+        block: {
+            viewport: string;
+        };
+        both: {
+            viewport: string;
+        };
+    };
+    fadeColor: {
+        'surface.neutral': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.neutral.low': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.neutral.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.neutral.highest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.inverted': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.primary': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.primary.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.success': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.success.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.info': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.info.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.warning': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.warning.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.danger': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.danger.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.promo': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-teal': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-purple': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-plum': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-orange': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+    inlineStartFade: string[];
+    inlineEndFade: string[];
+    blockStartFade: string[];
+    blockEndFade: string[];
+}, undefined, {
+    axis: {
+        inline: {
+            viewport: string;
+        };
+        block: {
+            viewport: string;
+        };
+        both: {
+            viewport: string;
+        };
+    };
+    fadeColor: {
+        'surface.neutral': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.neutral.low': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.neutral.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.neutral.highest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.inverted': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.primary': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.primary.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.success': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.success.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.info': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.info.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.warning': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.warning.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.danger': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.danger.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.promo': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-teal': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-purple': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-plum': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-orange': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+    inlineStartFade: string[];
+    inlineEndFade: string[];
+    blockStartFade: string[];
+    blockEndFade: string[];
+}, import('tailwind-variants').TVReturnTypeLike<{
+    axis: {
+        inline: {
+            viewport: string;
+        };
+        block: {
+            viewport: string;
+        };
+        both: {
+            viewport: string;
+        };
+    };
+    fadeColor: {
+        'surface.neutral': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.neutral.low': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.neutral.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.neutral.highest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.inverted': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.primary': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.primary.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.success': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.success.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.info': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.info.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.warning': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.warning.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.danger': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.danger.lowest': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.promo': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-teal': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-purple': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-plum': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+        'surface.decorative-orange': {
+            inlineStartFade: string;
+            inlineEndFade: string;
+            blockStartFade: string;
+            blockEndFade: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+    inlineStartFade: string[];
+    inlineEndFade: string[];
+    blockStartFade: string[];
+    blockEndFade: string[];
+}>>;

package/dist/esm/core/components/scroll-area/ScrollArea.variants.js

@@ -0,0 +1,65 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/core/components/scroll-area/ScrollArea.variants.ts
+var t = (e) => ({
+	inlineStartFade: e,
+	inlineEndFade: e,
+	blockStartFade: e,
+	blockEndFade: e
+}), n = e({
+	slots: {
+		root: "uy:relative uy:group/scroll-area",
+		viewport: "uy:size-full uy:min-h-0 uy:min-w-0 uy:scrollbar-thin uy:scrollbar-thumb:rounded-pill uy:scrollbar-thumb:bg-surface-neutral-low",
+		inlineStartFade: [
+			"uy:pointer-events-none uy:absolute uy:inset-y-0 uy:start-0 uy:z-10 uy:w-300",
+			"uy:bg-gradient-to-r uy:to-transparent uy:rtl:bg-gradient-to-l uy:opacity-0",
+			"uy:group-data-[scrollable-inline-start=true]/scroll-area:opacity-100"
+		],
+		inlineEndFade: [
+			"uy:pointer-events-none uy:absolute uy:inset-y-0 uy:end-0 uy:z-10 uy:w-300",
+			"uy:bg-gradient-to-l uy:to-transparent uy:rtl:bg-gradient-to-r uy:opacity-0",
+			"uy:group-data-[scrollable-inline-end=true]/scroll-area:opacity-100"
+		],
+		blockStartFade: [
+			"uy:pointer-events-none uy:absolute uy:inset-x-0 uy:top-0 uy:z-10 uy:h-300",
+			"uy:bg-gradient-to-b uy:to-transparent uy:opacity-0",
+			"uy:group-data-[scrollable-block-start=true]/scroll-area:opacity-100"
+		],
+		blockEndFade: [
+			"uy:pointer-events-none uy:absolute uy:inset-x-0 uy:bottom-0 uy:z-10 uy:h-300",
+			"uy:bg-gradient-to-t uy:to-transparent uy:opacity-0",
+			"uy:group-data-[scrollable-block-end=true]/scroll-area:opacity-100"
+		]
+	},
+	variants: {
+		axis: {
+			inline: { viewport: "uy:overflow-x-auto uy:overflow-y-hidden" },
+			block: { viewport: "uy:overflow-x-hidden uy:overflow-y-auto" },
+			both: { viewport: "uy:overflow-auto" }
+		},
+		fadeColor: {
+			"surface.neutral": t("uy:from-surface-neutral"),
+			"surface.neutral.low": t("uy:from-surface-neutral-low"),
+			"surface.neutral.lowest": t("uy:from-surface-neutral-lowest"),
+			"surface.neutral.highest": t("uy:from-surface-neutral-highest"),
+			"surface.inverted": t("uy:from-surface-inverted"),
+			"surface.primary": t("uy:from-surface-primary"),
+			"surface.primary.lowest": t("uy:from-surface-primary-lowest"),
+			"surface.success": t("uy:from-surface-success"),
+			"surface.success.lowest": t("uy:from-surface-success-lowest"),
+			"surface.info": t("uy:from-surface-info"),
+			"surface.info.lowest": t("uy:from-surface-info-lowest"),
+			"surface.warning": t("uy:from-surface-warning"),
+			"surface.warning.lowest": t("uy:from-surface-warning-lowest"),
+			"surface.danger": t("uy:from-surface-danger"),
+			"surface.danger.lowest": t("uy:from-surface-danger-lowest"),
+			"surface.promo": t("uy:from-surface-promo"),
+			"surface.decorative-teal": t("uy:from-surface-decorative-teal"),
+			"surface.decorative-purple": t("uy:from-surface-decorative-purple"),
+			"surface.decorative-plum": t("uy:from-surface-decorative-plum"),
+			"surface.decorative-orange": t("uy:from-surface-decorative-orange")
+		}
+	},
+	defaultVariants: { fadeColor: "surface.neutral" }
+});
+//#endregion
+export { n as scrollArea };

package/dist/esm/core/hooks/use-scroll-edges.d.ts

@@ -0,0 +1,17 @@
+import { MutableRefObject, UIEventHandler } from 'react';
+import { ScrollAreaAxis, ScrollEdges } from '../utils/scroll-edges.js';
+export interface UseScrollEdgesOptions {
+    axis?: ScrollAreaAxis;
+}
+export interface UseScrollEdgesResult<T extends HTMLElement> {
+    scrollEdges: ScrollEdges;
+    scrollRef: MutableRefObject<T | null>;
+    refreshScrollEdges: () => void;
+    onScroll: UIEventHandler<T>;
+}
+/**
+ * Measures a native scroll viewport and reports whether content remains at its
+ * logical inline and block edges. It intentionally owns no visual treatment,
+ * so native scrollers such as textareas can reuse it.
+ */
+export declare function useScrollEdges<T extends HTMLElement = HTMLDivElement>({ axis, }?: UseScrollEdgesOptions): UseScrollEdgesResult<T>;

package/dist/esm/core/hooks/use-scroll-edges.js

@@ -0,0 +1,36 @@
+import { areScrollEdgesEqual as e, emptyScrollEdges as t, getScrollEdges as n } from "../utils/scroll-edges.js";
+import { useCallback as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+//#region src/core/hooks/use-scroll-edges.ts
+function s({ axis: s = "both" } = {}) {
+	let c = a(null), [l, u] = o(t), d = r(() => {
+		let r = c.current, i = r ? n(r, s) : t;
+		u((t) => e(t, i) ? t : i);
+	}, [s]), f = r(() => {
+		d();
+	}, [d]);
+	return i(() => {
+		let e = c.current;
+		if (!e) return;
+		d();
+		let t = requestAnimationFrame(d), n = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(d), r = typeof MutationObserver > "u" ? void 0 : new MutationObserver(() => {
+			i(), d();
+		}), i = () => {
+			n?.disconnect(), n?.observe(e), e.querySelectorAll("*").forEach((e) => n?.observe(e));
+		};
+		return i(), r?.observe(e, {
+			attributes: !0,
+			childList: !0,
+			subtree: !0,
+			characterData: !0
+		}), () => {
+			cancelAnimationFrame(t), n?.disconnect(), r?.disconnect();
+		};
+	}, [d]), {
+		scrollEdges: l,
+		scrollRef: c,
+		refreshScrollEdges: d,
+		onScroll: f
+	};
+}
+//#endregion
+export { s as useScrollEdges };

package/dist/esm/core/index.d.ts

@@ -215,3 +215,4 @@ export * from './hooks/use-breakpoint-listener.js';
 export * from './hooks/use-container-query-level.js';
 export * from './hooks/use-media-query.js';
 export * from './providers/router/RouterProvider.js';
+export * from './components/scroll-area/ScrollArea.js';

package/dist/esm/core/index.js

@@ -216,4 +216,5 @@ import { toast as Pi } from "./components/toast/toast.js";
 import { ToggleSwitchGroup as Fi, toggleSwitchGroup as Ii } from "./components/toggle-switch-group/ToggleSwitchGroup.js";
 import { ToggleSwitch as Li, toggleSwitch as Ri } from "./components/toggle-switch/ToggleSwitch.js";
 import { useAsyncList as zi } from "./hooks/use-async-list.js";
-export { v as ActionBar, u as ActionBarButton, p as ActionBarIconButton, y as ActionBarRoot, e as Actionable, C as Alert, w as AlertActions, D as AlertContent, O as AlertTitle, k as Anchor, A as AppLayout, F as AppMenu, M as AppMenuContext, N as AppMenuContextProvider, W as AppMenuFooter, J as AppMenuHeader, Y as AppMenuNavContent, U as AppProfileMenuButton, j as AppTopBar, X as Autocomplete, Z as AutocompleteItem, $ as AutocompleteItemGroup, z as Avatar, V as AvatarFallback, oe as AvatarGroup, ae as AvatarGroupCount, re as AvatarIcon, H as AvatarImage, ie as AvatarPair, te as AvatarWithTooltip, G as BRAND_ASSETS, Ce as BREADCRUMB_ITEM_MAX_WIDTH, R as Badge, se as BadgeDot, ce as BottomSheet, ue as BottomSheetContent, fe as BottomSheetFooter, me as BottomSheetHeader, _e as Breadcrumb, ge as Breadcrumbs, l as Button, Fe as Card, Re as CardContent, Le as CardTitle, De as Carousel, je as CarouselContent, ke as CarouselHeader, Te as CarouselNav, Ne as CarouselSlide, He as Checkbox, Be as CheckboxGroup, Ue as CheckboxStandalone, x as CircularIconButton, We as Collapsible, Ge as CollapsibleContent, qe as CollapsibleGroup, Ke as CollapsibleTitle, n as DESKTOP_BREAKPOINTS, Je as DateCalendar, Ye as DatePicker, Xe as DateRangeCalendar, Ze as DateRangePicker, $e as DefinitionItem, Qe as DefinitionList, et as DefinitionTooltip, nt as Dialog, at as DialogActions, tt as DialogButton, ot as DialogContent, st as DialogTitle, rt as DialogTrigger, ht as EmptyState, vt as EmptyStateActions, _t as EmptyStateContent, yt as EmptyStateGetStarted, xt as EmptyStateGoodJob, gt as EmptyStateIcon, Ct as EmptyStateNoSearchResults, St as EmptyStateUpgradeRequired, wt as EmptyStateUseDesktop, bt as EmptyStateWaitingForData, Et as ErrorState, At as FieldGroup, Ot as Fieldset, jt as Filter, Mt as FilterControls, Nt as FilterLabels, Rt as FilterToolbar, Ht as Flex, Wt as FlexItem, It as FloatingActionBar, Kt as FullPageLoader, cn as FunnelBackButton, Qt as FunnelBody, Xt as FunnelLayout, en as FunnelPage, nn as FunnelPageAction, rn as FunnelPageActions, on as FunnelPageContent, ln as FunnelPageFooter, dn as FunnelPageHeader, pn as FunnelSidebar, hn as FunnelTopBar, yn as Grid, bn as GridItem, s as Icon, f as IconButton, xn as Input, ne as InteractiveAvatar, ze as Label, Cn as ListView, On as ListViewItemLabel, kn as ListViewItemText, En as ListViewSection, r as MOBILE_BREAKPOINTS, m as Menu, h as MenuContent, L as MenuHeader, An as MenuSection, I as MenuSeparator, g as MenuTrigger, Nn as MultiSelect, Pn as MultiSelectOptGroup, Fn as MultiSelectOption, In as Nav, zn as NavGroup, Wn as NavigationCardDescription, Vn as NavigationCardGroup, Un as NavigationCardLabel, ve as NoopRouterProvider, Gn as NumberInput, qn as Page, Yn as PageHeader, Zn as PageHeading, Qn as Pagination, er as PaginationContent, sr as PaginationEllipsis, nr as PaginationItem, K as PayFitBrand, q as PayFitBrandPreprod, ur as PhoneNumberInput, dr as Pill, fr as Popover, pr as PopoverTrigger, mr as ProgressBar, dt as PromoDialog, ct as PromoDialogActions, mt as PromoDialogContent, lt as PromoDialogHero, pt as PromoDialogSubtitle, ut as PromoDialogTitle, vr as RadioButton, hr as RadioButtonGroup, gr as RadioButtonHelper, _r as RadioIndicator, we as RawBreadcrumbLink, xe as RawLink, Sn as RawLinkButton, wn as RawListViewItem, _ as RawMenuItem, Ln as RawNavItem, Bn as RawNavigationCard, rr as RawPaginationLink, or as RawPaginationNext, ar as RawPaginationPrevious, xi as RawSubTask, hi as RawTab, Ci as RawTask, ye as RouterProvider, jn as Search, xr as SegmentedButtonGroup, Mr as Select, jr as SelectButton, Nr as SelectOption, Pr as SelectOptionGroup, Fr as SelectOptionHelper, Tr as SelectableButton, Cr as SelectableButtonGroup, Or as SelectableCardCheckbox, Dr as SelectableCardCheckboxGroup, Ar as SelectableCardRadio, kr as SelectableCardRadioGroup, Ir as SidePanel, Rr as SidePanelContent, Br as SidePanelFooter, Hr as SidePanelHeader, br as Skeleton, Jt as SkipLink, Yt as SkipLinks, c as Spinner, Ut as Stack, Gt as StackItem, Gr as Step, Wr as Stepper, Mi as TOAST_CONFIG, gi as TabList, _i as TabPanel, vi as TabPanels, qr as Table, Yr as TableBody, Zr as TableCell, $r as TableColumnHeader, ti as TableEmptyState, ni as TableEmptyStateError, ri as TableEmptyStateLoading, ii as TableEmptyStateNoData, ai as TableEmptyStateText, ci as TableHeader, oi as TableNoSearchResults, ui as TablePagination, Jr as TableRoot, fi as TableRow, mi as Tabs, Ti as TaskGroup, yi as TaskMenu, E as Text, Ei as TextArea, Oi as Timeline, ki as TimelineStep, ji as TimelineStepDescription, Ai as TimelineStepHeader, Ni as ToastManager, Sr as ToggleButton, Li as ToggleSwitch, Fi as ToggleSwitchGroup, d as Tooltip, b as actionBarRoot, Q as autocompleteItem, ee as autocompleteItemGroup, le as bottomSheet, de as bottomSheetContent, pe as bottomSheetFooter, he as bottomSheetHeader, Ie as card, Oe as carousel, Me as carouselContent, Ae as carouselHeader, Ee as carouselNav, Pe as carouselSlide, Ve as checkboxGroup, S as circularIconButton, it as dialog, Dt as errorState, kt as fieldset, Pt as filterContainer, Ft as filterDismissButton, zt as filterToolbar, Bt as flex, Vt as flexItem, Lt as floatingActionBar, qt as fullPageLoader, $t as funnelBody, Zt as funnelLayout, tn as funnelPage, an as funnelPageActions, sn as funnelPageContent, un as funnelPageFooter, fn as funnelPageHeader, mn as funnelSidebar, gn as funnelTopBar, B as getInitials, _n as grid, vn as gridItem, i as isDesktopBreakpoint, a as isMobileBreakpoint, Se as link, Tn as listViewItem, Dn as listViewSection, Rn as navItemBase, Hn as navigationCardGroup, Kn as numberInput, Jn as page, Xn as pageHeader, $n as pagination, tr as paginationContent, ir as paginationLink, ft as promoDialog, yr as radioButton, Si as rawSubTask, wi as rawTask, Mn as search, Er as selectableButton, wr as selectableButtonGroup, Lr as sidePanel, zr as sidePanelContent, Vr as sidePanelFooter, Ur as sidePanelHeader, Xr as tableBody, Qr as tableCell, ei as tableColumnHeader, si as tableEmptyState, li as tableHeader, di as tablePagination, pi as tableRow, bi as taskMenu, T as text, Di as textArea, Pi as toast, Ri as toggleSwitch, Ii as toggleSwitchGroup, P as useAppMenuContext, zi as useAsyncList, o as useBreakpointListener, Tt as useContainerQueryLevel, t as useMediaQuery, lr as usePaginationState, cr as usePaginationWindow, be as useRouter, Kr as useStepper };
+import { ScrollArea as Bi } from "./components/scroll-area/ScrollArea.js";
+export { v as ActionBar, u as ActionBarButton, p as ActionBarIconButton, y as ActionBarRoot, e as Actionable, C as Alert, w as AlertActions, D as AlertContent, O as AlertTitle, k as Anchor, A as AppLayout, F as AppMenu, M as AppMenuContext, N as AppMenuContextProvider, W as AppMenuFooter, J as AppMenuHeader, Y as AppMenuNavContent, U as AppProfileMenuButton, j as AppTopBar, X as Autocomplete, Z as AutocompleteItem, $ as AutocompleteItemGroup, z as Avatar, V as AvatarFallback, oe as AvatarGroup, ae as AvatarGroupCount, re as AvatarIcon, H as AvatarImage, ie as AvatarPair, te as AvatarWithTooltip, G as BRAND_ASSETS, Ce as BREADCRUMB_ITEM_MAX_WIDTH, R as Badge, se as BadgeDot, ce as BottomSheet, ue as BottomSheetContent, fe as BottomSheetFooter, me as BottomSheetHeader, _e as Breadcrumb, ge as Breadcrumbs, l as Button, Fe as Card, Re as CardContent, Le as CardTitle, De as Carousel, je as CarouselContent, ke as CarouselHeader, Te as CarouselNav, Ne as CarouselSlide, He as Checkbox, Be as CheckboxGroup, Ue as CheckboxStandalone, x as CircularIconButton, We as Collapsible, Ge as CollapsibleContent, qe as CollapsibleGroup, Ke as CollapsibleTitle, n as DESKTOP_BREAKPOINTS, Je as DateCalendar, Ye as DatePicker, Xe as DateRangeCalendar, Ze as DateRangePicker, $e as DefinitionItem, Qe as DefinitionList, et as DefinitionTooltip, nt as Dialog, at as DialogActions, tt as DialogButton, ot as DialogContent, st as DialogTitle, rt as DialogTrigger, ht as EmptyState, vt as EmptyStateActions, _t as EmptyStateContent, yt as EmptyStateGetStarted, xt as EmptyStateGoodJob, gt as EmptyStateIcon, Ct as EmptyStateNoSearchResults, St as EmptyStateUpgradeRequired, wt as EmptyStateUseDesktop, bt as EmptyStateWaitingForData, Et as ErrorState, At as FieldGroup, Ot as Fieldset, jt as Filter, Mt as FilterControls, Nt as FilterLabels, Rt as FilterToolbar, Ht as Flex, Wt as FlexItem, It as FloatingActionBar, Kt as FullPageLoader, cn as FunnelBackButton, Qt as FunnelBody, Xt as FunnelLayout, en as FunnelPage, nn as FunnelPageAction, rn as FunnelPageActions, on as FunnelPageContent, ln as FunnelPageFooter, dn as FunnelPageHeader, pn as FunnelSidebar, hn as FunnelTopBar, yn as Grid, bn as GridItem, s as Icon, f as IconButton, xn as Input, ne as InteractiveAvatar, ze as Label, Cn as ListView, On as ListViewItemLabel, kn as ListViewItemText, En as ListViewSection, r as MOBILE_BREAKPOINTS, m as Menu, h as MenuContent, L as MenuHeader, An as MenuSection, I as MenuSeparator, g as MenuTrigger, Nn as MultiSelect, Pn as MultiSelectOptGroup, Fn as MultiSelectOption, In as Nav, zn as NavGroup, Wn as NavigationCardDescription, Vn as NavigationCardGroup, Un as NavigationCardLabel, ve as NoopRouterProvider, Gn as NumberInput, qn as Page, Yn as PageHeader, Zn as PageHeading, Qn as Pagination, er as PaginationContent, sr as PaginationEllipsis, nr as PaginationItem, K as PayFitBrand, q as PayFitBrandPreprod, ur as PhoneNumberInput, dr as Pill, fr as Popover, pr as PopoverTrigger, mr as ProgressBar, dt as PromoDialog, ct as PromoDialogActions, mt as PromoDialogContent, lt as PromoDialogHero, pt as PromoDialogSubtitle, ut as PromoDialogTitle, vr as RadioButton, hr as RadioButtonGroup, gr as RadioButtonHelper, _r as RadioIndicator, we as RawBreadcrumbLink, xe as RawLink, Sn as RawLinkButton, wn as RawListViewItem, _ as RawMenuItem, Ln as RawNavItem, Bn as RawNavigationCard, rr as RawPaginationLink, or as RawPaginationNext, ar as RawPaginationPrevious, xi as RawSubTask, hi as RawTab, Ci as RawTask, ye as RouterProvider, Bi as ScrollArea, jn as Search, xr as SegmentedButtonGroup, Mr as Select, jr as SelectButton, Nr as SelectOption, Pr as SelectOptionGroup, Fr as SelectOptionHelper, Tr as SelectableButton, Cr as SelectableButtonGroup, Or as SelectableCardCheckbox, Dr as SelectableCardCheckboxGroup, Ar as SelectableCardRadio, kr as SelectableCardRadioGroup, Ir as SidePanel, Rr as SidePanelContent, Br as SidePanelFooter, Hr as SidePanelHeader, br as Skeleton, Jt as SkipLink, Yt as SkipLinks, c as Spinner, Ut as Stack, Gt as StackItem, Gr as Step, Wr as Stepper, Mi as TOAST_CONFIG, gi as TabList, _i as TabPanel, vi as TabPanels, qr as Table, Yr as TableBody, Zr as TableCell, $r as TableColumnHeader, ti as TableEmptyState, ni as TableEmptyStateError, ri as TableEmptyStateLoading, ii as TableEmptyStateNoData, ai as TableEmptyStateText, ci as TableHeader, oi as TableNoSearchResults, ui as TablePagination, Jr as TableRoot, fi as TableRow, mi as Tabs, Ti as TaskGroup, yi as TaskMenu, E as Text, Ei as TextArea, Oi as Timeline, ki as TimelineStep, ji as TimelineStepDescription, Ai as TimelineStepHeader, Ni as ToastManager, Sr as ToggleButton, Li as ToggleSwitch, Fi as ToggleSwitchGroup, d as Tooltip, b as actionBarRoot, Q as autocompleteItem, ee as autocompleteItemGroup, le as bottomSheet, de as bottomSheetContent, pe as bottomSheetFooter, he as bottomSheetHeader, Ie as card, Oe as carousel, Me as carouselContent, Ae as carouselHeader, Ee as carouselNav, Pe as carouselSlide, Ve as checkboxGroup, S as circularIconButton, it as dialog, Dt as errorState, kt as fieldset, Pt as filterContainer, Ft as filterDismissButton, zt as filterToolbar, Bt as flex, Vt as flexItem, Lt as floatingActionBar, qt as fullPageLoader, $t as funnelBody, Zt as funnelLayout, tn as funnelPage, an as funnelPageActions, sn as funnelPageContent, un as funnelPageFooter, fn as funnelPageHeader, mn as funnelSidebar, gn as funnelTopBar, B as getInitials, _n as grid, vn as gridItem, i as isDesktopBreakpoint, a as isMobileBreakpoint, Se as link, Tn as listViewItem, Dn as listViewSection, Rn as navItemBase, Hn as navigationCardGroup, Kn as numberInput, Jn as page, Xn as pageHeader, $n as pagination, tr as paginationContent, ir as paginationLink, ft as promoDialog, yr as radioButton, Si as rawSubTask, wi as rawTask, Mn as search, Er as selectableButton, wr as selectableButtonGroup, Lr as sidePanel, zr as sidePanelContent, Vr as sidePanelFooter, Ur as sidePanelHeader, Xr as tableBody, Qr as tableCell, ei as tableColumnHeader, si as tableEmptyState, li as tableHeader, di as tablePagination, pi as tableRow, bi as taskMenu, T as text, Di as textArea, Pi as toast, Ri as toggleSwitch, Ii as toggleSwitchGroup, P as useAppMenuContext, zi as useAsyncList, o as useBreakpointListener, Tt as useContainerQueryLevel, t as useMediaQuery, lr as usePaginationState, cr as usePaginationWindow, be as useRouter, Kr as useStepper };

package/dist/esm/core/utils/scroll-edges.d.ts

@@ -0,0 +1,15 @@
+export type ScrollAreaAxis = 'inline' | 'block' | 'both';
+export type RtlScrollOffsetType = 'default' | 'negative' | 'reverse';
+export interface ScrollEdges {
+    hasOverflowInline: boolean;
+    hasOverflowBlock: boolean;
+    canScrollInlineStart: boolean;
+    canScrollInlineEnd: boolean;
+    canScrollBlockStart: boolean;
+    canScrollBlockEnd: boolean;
+}
+export declare const SCROLL_EDGE_TOLERANCE = 1;
+export declare const emptyScrollEdges: ScrollEdges;
+export declare function getLogicalInlineScrollOffset(element: Pick<HTMLElement, 'clientWidth' | 'scrollLeft' | 'scrollWidth'>, direction: 'ltr' | 'rtl', rtlOffsetType?: RtlScrollOffsetType): number;
+export declare function getScrollEdges(element: HTMLElement, axis?: ScrollAreaAxis): ScrollEdges;
+export declare function areScrollEdgesEqual(current: ScrollEdges, next: ScrollEdges): boolean;

package/dist/esm/core/utils/scroll-edges.js

@@ -0,0 +1,48 @@
+var e = {
+	hasOverflowInline: !1,
+	hasOverflowBlock: !1,
+	canScrollInlineStart: !1,
+	canScrollInlineEnd: !1,
+	canScrollBlockStart: !1,
+	canScrollBlockEnd: !1
+}, t;
+function n() {
+	if (t) return t;
+	if (typeof document > "u") return "negative";
+	let e = document.createElement("div"), n = document.createElement("div");
+	return e.dir = "rtl", e.style.cssText = "width:4px;height:1px;overflow:scroll;visibility:hidden;position:absolute;top:-9999px;", n.style.width = "8px", e.append(n), document.body.append(e), e.scrollLeft > 0 ? t = "default" : (e.scrollLeft = 1, t = e.scrollLeft === 0 ? "negative" : "reverse"), e.remove(), t;
+}
+function r(e, t) {
+	return Math.min(Math.max(e, 0), t);
+}
+function i(e, t, i = n()) {
+	let a = Math.max(e.scrollWidth - e.clientWidth, 0);
+	if (t === "ltr") return r(e.scrollLeft, a);
+	switch (i) {
+		case "default": return r(a - e.scrollLeft, a);
+		case "negative": return r(-e.scrollLeft, a);
+		case "reverse": return r(e.scrollLeft, a);
+	}
+}
+function a(e) {
+	return e > 1;
+}
+function o(e, t) {
+	return t - e > 1;
+}
+function s(e, t = "both") {
+	let n = t === "inline" || t === "both", s = t === "block" || t === "both", c = Math.max(e.scrollWidth - e.clientWidth, 0), l = Math.max(e.scrollHeight - e.clientHeight, 0), u = i(e, getComputedStyle(e).direction === "rtl" ? "rtl" : "ltr"), d = r(e.scrollTop, l), f = n && c > 1, p = s && l > 1;
+	return {
+		hasOverflowInline: f,
+		hasOverflowBlock: p,
+		canScrollInlineStart: f && a(u),
+		canScrollInlineEnd: f && o(u, c),
+		canScrollBlockStart: p && a(d),
+		canScrollBlockEnd: p && o(d, l)
+	};
+}
+function c(e, t) {
+	return e.hasOverflowInline === t.hasOverflowInline && e.hasOverflowBlock === t.hasOverflowBlock && e.canScrollInlineStart === t.canScrollInlineStart && e.canScrollInlineEnd === t.canScrollInlineEnd && e.canScrollBlockStart === t.canScrollBlockStart && e.canScrollBlockEnd === t.canScrollBlockEnd;
+}
+//#endregion
+export { c as areScrollEdgesEqual, e as emptyScrollEdges, i as getLogicalInlineScrollOffset, s as getScrollEdges };

package/dist/esm/docs/reference/catalog/catalog.generated.d.ts

@@ -646,6 +646,24 @@ export declare const catalogEntries: ({
     tags: ("type:component" | "category:inputs" | "behavior:editing" | "behavior:multi-selection" | "behavior:selection")[];
     title: string;
     principal?: undefined;
+} | {
+    description: string;
+    docsHref: string;
+    id: string;
+    keywords: string[];
+    preview: {
+        type: "story";
+        story: string;
+        storyId: string;
+        zoom?: undefined;
+        src?: undefined;
+        alt?: undefined;
+    };
+    related: never[];
+    section: "components";
+    tags: ("type:component" | "category:layout")[];
+    title: string;
+    principal?: undefined;
 } | {
     description: string;
     docsHref: string;

package/dist/esm/index.js

@@ -216,17 +216,18 @@ import { toast as Pi } from "./core/components/toast/toast.js";
 import { ToggleSwitchGroup as Fi, toggleSwitchGroup as Ii } from "./core/components/toggle-switch-group/ToggleSwitchGroup.js";
 import { ToggleSwitch as Li, toggleSwitch as Ri } from "./core/components/toggle-switch/ToggleSwitch.js";
 import { useAsyncList as zi } from "./core/hooks/use-async-list.js";
-import { useFieldContext as Bi, useFormContext as Vi } from "./modules/tanstack-form/hooks/tanstack-form-context.js";
-import { useTanstackUnityForm as Hi, withFieldGroup as Ui, withForm as Wi } from "./modules/tanstack-form/hooks/use-tanstack-form.js";
-import { tanstackFormDefaultValues as Gi } from "./modules/tanstack-form/hooks/tanstack-form-default-values.js";
-import { useFieldA11yContext as Ki } from "./modules/tanstack-form/components/form-field/TanstackFormField.context.js";
-import { fieldRevalidateLogic as qi } from "./modules/tanstack-form/utils/field-revalidate-logic.js";
-import { StandardSchemaAdapter as Ji } from "./modules/tanstack-form/adapters/standardSchemaAdapter.js";
-import { ZodV3SchemaAdapter as Yi, ZodV4SchemaAdapter as Xi } from "./modules/tanstack-form/adapters/zodAdapter.js";
-import { createSchemaAdapter as Zi } from "./modules/tanstack-form/utils/createSchemaAdapter.js";
-import { ColumnSortHeader as Qi, isSortableHeader as $i } from "./modules/tanstack-table/components/data-table/parts/ColumnSortHeader.js";
-import { DataTable as ea } from "./modules/tanstack-table/components/data-table/DataTable.js";
-import { DataTableRoot as ta, dataTableRoot as na } from "./modules/tanstack-table/components/data-table/parts/DataTableRoot.js";
-import { DataTableBulkActions as ra } from "./modules/tanstack-table/components/data-table-bulk-actions/DataTableBulkActions.js";
-import { FilterAdapters as ia } from "./modules/tanstack-table/adapters/filter-adapters.js";
-export { v as ActionBar, u as ActionBarButton, p as ActionBarIconButton, y as ActionBarRoot, e as Actionable, C as Alert, w as AlertActions, D as AlertContent, O as AlertTitle, k as Anchor, A as AppLayout, F as AppMenu, M as AppMenuContext, N as AppMenuContextProvider, W as AppMenuFooter, J as AppMenuHeader, Y as AppMenuNavContent, U as AppProfileMenuButton, j as AppTopBar, X as Autocomplete, Z as AutocompleteItem, $ as AutocompleteItemGroup, z as Avatar, V as AvatarFallback, oe as AvatarGroup, ae as AvatarGroupCount, re as AvatarIcon, H as AvatarImage, ie as AvatarPair, te as AvatarWithTooltip, G as BRAND_ASSETS, Ce as BREADCRUMB_ITEM_MAX_WIDTH, R as Badge, se as BadgeDot, ce as BottomSheet, ue as BottomSheetContent, fe as BottomSheetFooter, me as BottomSheetHeader, _e as Breadcrumb, ge as Breadcrumbs, l as Button, Fe as Card, Re as CardContent, Le as CardTitle, De as Carousel, je as CarouselContent, ke as CarouselHeader, Te as CarouselNav, Ne as CarouselSlide, He as Checkbox, Be as CheckboxGroup, Ue as CheckboxStandalone, x as CircularIconButton, We as Collapsible, Ge as CollapsibleContent, qe as CollapsibleGroup, Ke as CollapsibleTitle, Qi as ColumnSortHeader, n as DESKTOP_BREAKPOINTS, ea as DataTable, ra as DataTableBulkActions, ta as DataTableRoot, Je as DateCalendar, Ye as DatePicker, Xe as DateRangeCalendar, Ze as DateRangePicker, $e as DefinitionItem, Qe as DefinitionList, et as DefinitionTooltip, nt as Dialog, at as DialogActions, tt as DialogButton, ot as DialogContent, st as DialogTitle, rt as DialogTrigger, ht as EmptyState, vt as EmptyStateActions, _t as EmptyStateContent, yt as EmptyStateGetStarted, xt as EmptyStateGoodJob, gt as EmptyStateIcon, Ct as EmptyStateNoSearchResults, St as EmptyStateUpgradeRequired, wt as EmptyStateUseDesktop, bt as EmptyStateWaitingForData, Et as ErrorState, At as FieldGroup, Ot as Fieldset, jt as Filter, ia as FilterAdapters, Mt as FilterControls, Nt as FilterLabels, Rt as FilterToolbar, Ht as Flex, Wt as FlexItem, It as FloatingActionBar, Kt as FullPageLoader, cn as FunnelBackButton, Qt as FunnelBody, Xt as FunnelLayout, en as FunnelPage, nn as FunnelPageAction, rn as FunnelPageActions, on as FunnelPageContent, ln as FunnelPageFooter, dn as FunnelPageHeader, pn as FunnelSidebar, hn as FunnelTopBar, yn as Grid, bn as GridItem, s as Icon, f as IconButton, xn as Input, ne as InteractiveAvatar, ze as Label, Cn as ListView, On as ListViewItemLabel, kn as ListViewItemText, En as ListViewSection, r as MOBILE_BREAKPOINTS, m as Menu, h as MenuContent, L as MenuHeader, An as MenuSection, I as MenuSeparator, g as MenuTrigger, Nn as MultiSelect, Pn as MultiSelectOptGroup, Fn as MultiSelectOption, In as Nav, zn as NavGroup, Wn as NavigationCardDescription, Vn as NavigationCardGroup, Un as NavigationCardLabel, ve as NoopRouterProvider, Gn as NumberInput, qn as Page, Yn as PageHeader, Zn as PageHeading, Qn as Pagination, er as PaginationContent, sr as PaginationEllipsis, nr as PaginationItem, K as PayFitBrand, q as PayFitBrandPreprod, ur as PhoneNumberInput, dr as Pill, fr as Popover, pr as PopoverTrigger, mr as ProgressBar, dt as PromoDialog, ct as PromoDialogActions, mt as PromoDialogContent, lt as PromoDialogHero, pt as PromoDialogSubtitle, ut as PromoDialogTitle, vr as RadioButton, hr as RadioButtonGroup, gr as RadioButtonHelper, _r as RadioIndicator, we as RawBreadcrumbLink, xe as RawLink, Sn as RawLinkButton, wn as RawListViewItem, _ as RawMenuItem, Ln as RawNavItem, Bn as RawNavigationCard, rr as RawPaginationLink, or as RawPaginationNext, ar as RawPaginationPrevious, xi as RawSubTask, hi as RawTab, Ci as RawTask, ye as RouterProvider, jn as Search, xr as SegmentedButtonGroup, Mr as Select, jr as SelectButton, Nr as SelectOption, Pr as SelectOptionGroup, Fr as SelectOptionHelper, Tr as SelectableButton, Cr as SelectableButtonGroup, Or as SelectableCardCheckbox, Dr as SelectableCardCheckboxGroup, Ar as SelectableCardRadio, kr as SelectableCardRadioGroup, Ir as SidePanel, Rr as SidePanelContent, Br as SidePanelFooter, Hr as SidePanelHeader, br as Skeleton, Jt as SkipLink, Yt as SkipLinks, c as Spinner, Ut as Stack, Gt as StackItem, Ji as StandardSchemaAdapter, Gr as Step, Wr as Stepper, Mi as TOAST_CONFIG, gi as TabList, _i as TabPanel, vi as TabPanels, qr as Table, Yr as TableBody, Zr as TableCell, $r as TableColumnHeader, ti as TableEmptyState, ni as TableEmptyStateError, ri as TableEmptyStateLoading, ii as TableEmptyStateNoData, ai as TableEmptyStateText, ci as TableHeader, oi as TableNoSearchResults, ui as TablePagination, Jr as TableRoot, fi as TableRow, mi as Tabs, Ti as TaskGroup, yi as TaskMenu, E as Text, Ei as TextArea, Oi as Timeline, ki as TimelineStep, ji as TimelineStepDescription, Ai as TimelineStepHeader, Ni as ToastManager, Sr as ToggleButton, Li as ToggleSwitch, Fi as ToggleSwitchGroup, d as Tooltip, Yi as ZodV3SchemaAdapter, Xi as ZodV4SchemaAdapter, b as actionBarRoot, Q as autocompleteItem, ee as autocompleteItemGroup, le as bottomSheet, de as bottomSheetContent, pe as bottomSheetFooter, he as bottomSheetHeader, Ie as card, Oe as carousel, Me as carouselContent, Ae as carouselHeader, Ee as carouselNav, Pe as carouselSlide, Ve as checkboxGroup, S as circularIconButton, Zi as createSchemaAdapter, na as dataTableRoot, it as dialog, Dt as errorState, qi as fieldRevalidateLogic, kt as fieldset, Pt as filterContainer, Ft as filterDismissButton, zt as filterToolbar, Bt as flex, Vt as flexItem, Lt as floatingActionBar, qt as fullPageLoader, $t as funnelBody, Zt as funnelLayout, tn as funnelPage, an as funnelPageActions, sn as funnelPageContent, un as funnelPageFooter, fn as funnelPageHeader, mn as funnelSidebar, gn as funnelTopBar, B as getInitials, _n as grid, vn as gridItem, i as isDesktopBreakpoint, a as isMobileBreakpoint, $i as isSortableHeader, Se as link, Tn as listViewItem, Dn as listViewSection, Rn as navItemBase, Hn as navigationCardGroup, Kn as numberInput, Jn as page, Xn as pageHeader, $n as pagination, tr as paginationContent, ir as paginationLink, ft as promoDialog, yr as radioButton, Si as rawSubTask, wi as rawTask, Mn as search, Er as selectableButton, wr as selectableButtonGroup, Lr as sidePanel, zr as sidePanelContent, Vr as sidePanelFooter, Ur as sidePanelHeader, Xr as tableBody, Qr as tableCell, ei as tableColumnHeader, si as tableEmptyState, li as tableHeader, di as tablePagination, pi as tableRow, Gi as tanstackFormDefaultValues, bi as taskMenu, T as text, Di as textArea, Pi as toast, Ri as toggleSwitch, Ii as toggleSwitchGroup, P as useAppMenuContext, zi as useAsyncList, o as useBreakpointListener, Tt as useContainerQueryLevel, Ki as useFieldA11yContext, Bi as useFieldContext, Vi as useFormContext, t as useMediaQuery, lr as usePaginationState, cr as usePaginationWindow, be as useRouter, Kr as useStepper, Hi as useTanstackUnityForm, Ui as withFieldGroup, Wi as withForm };
+import { ScrollArea as Bi } from "./core/components/scroll-area/ScrollArea.js";
+import { useFieldContext as Vi, useFormContext as Hi } from "./modules/tanstack-form/hooks/tanstack-form-context.js";
+import { useTanstackUnityForm as Ui, withFieldGroup as Wi, withForm as Gi } from "./modules/tanstack-form/hooks/use-tanstack-form.js";
+import { tanstackFormDefaultValues as Ki } from "./modules/tanstack-form/hooks/tanstack-form-default-values.js";
+import { useFieldA11yContext as qi } from "./modules/tanstack-form/components/form-field/TanstackFormField.context.js";
+import { fieldRevalidateLogic as Ji } from "./modules/tanstack-form/utils/field-revalidate-logic.js";
+import { StandardSchemaAdapter as Yi } from "./modules/tanstack-form/adapters/standardSchemaAdapter.js";
+import { ZodV3SchemaAdapter as Xi, ZodV4SchemaAdapter as Zi } from "./modules/tanstack-form/adapters/zodAdapter.js";
+import { createSchemaAdapter as Qi } from "./modules/tanstack-form/utils/createSchemaAdapter.js";
+import { ColumnSortHeader as $i, isSortableHeader as ea } from "./modules/tanstack-table/components/data-table/parts/ColumnSortHeader.js";
+import { DataTable as ta } from "./modules/tanstack-table/components/data-table/DataTable.js";
+import { DataTableRoot as na, dataTableRoot as ra } from "./modules/tanstack-table/components/data-table/parts/DataTableRoot.js";
+import { DataTableBulkActions as ia } from "./modules/tanstack-table/components/data-table-bulk-actions/DataTableBulkActions.js";
+import { FilterAdapters as aa } from "./modules/tanstack-table/adapters/filter-adapters.js";
+export { v as ActionBar, u as ActionBarButton, p as ActionBarIconButton, y as ActionBarRoot, e as Actionable, C as Alert, w as AlertActions, D as AlertContent, O as AlertTitle, k as Anchor, A as AppLayout, F as AppMenu, M as AppMenuContext, N as AppMenuContextProvider, W as AppMenuFooter, J as AppMenuHeader, Y as AppMenuNavContent, U as AppProfileMenuButton, j as AppTopBar, X as Autocomplete, Z as AutocompleteItem, $ as AutocompleteItemGroup, z as Avatar, V as AvatarFallback, oe as AvatarGroup, ae as AvatarGroupCount, re as AvatarIcon, H as AvatarImage, ie as AvatarPair, te as AvatarWithTooltip, G as BRAND_ASSETS, Ce as BREADCRUMB_ITEM_MAX_WIDTH, R as Badge, se as BadgeDot, ce as BottomSheet, ue as BottomSheetContent, fe as BottomSheetFooter, me as BottomSheetHeader, _e as Breadcrumb, ge as Breadcrumbs, l as Button, Fe as Card, Re as CardContent, Le as CardTitle, De as Carousel, je as CarouselContent, ke as CarouselHeader, Te as CarouselNav, Ne as CarouselSlide, He as Checkbox, Be as CheckboxGroup, Ue as CheckboxStandalone, x as CircularIconButton, We as Collapsible, Ge as CollapsibleContent, qe as CollapsibleGroup, Ke as CollapsibleTitle, $i as ColumnSortHeader, n as DESKTOP_BREAKPOINTS, ta as DataTable, ia as DataTableBulkActions, na as DataTableRoot, Je as DateCalendar, Ye as DatePicker, Xe as DateRangeCalendar, Ze as DateRangePicker, $e as DefinitionItem, Qe as DefinitionList, et as DefinitionTooltip, nt as Dialog, at as DialogActions, tt as DialogButton, ot as DialogContent, st as DialogTitle, rt as DialogTrigger, ht as EmptyState, vt as EmptyStateActions, _t as EmptyStateContent, yt as EmptyStateGetStarted, xt as EmptyStateGoodJob, gt as EmptyStateIcon, Ct as EmptyStateNoSearchResults, St as EmptyStateUpgradeRequired, wt as EmptyStateUseDesktop, bt as EmptyStateWaitingForData, Et as ErrorState, At as FieldGroup, Ot as Fieldset, jt as Filter, aa as FilterAdapters, Mt as FilterControls, Nt as FilterLabels, Rt as FilterToolbar, Ht as Flex, Wt as FlexItem, It as FloatingActionBar, Kt as FullPageLoader, cn as FunnelBackButton, Qt as FunnelBody, Xt as FunnelLayout, en as FunnelPage, nn as FunnelPageAction, rn as FunnelPageActions, on as FunnelPageContent, ln as FunnelPageFooter, dn as FunnelPageHeader, pn as FunnelSidebar, hn as FunnelTopBar, yn as Grid, bn as GridItem, s as Icon, f as IconButton, xn as Input, ne as InteractiveAvatar, ze as Label, Cn as ListView, On as ListViewItemLabel, kn as ListViewItemText, En as ListViewSection, r as MOBILE_BREAKPOINTS, m as Menu, h as MenuContent, L as MenuHeader, An as MenuSection, I as MenuSeparator, g as MenuTrigger, Nn as MultiSelect, Pn as MultiSelectOptGroup, Fn as MultiSelectOption, In as Nav, zn as NavGroup, Wn as NavigationCardDescription, Vn as NavigationCardGroup, Un as NavigationCardLabel, ve as NoopRouterProvider, Gn as NumberInput, qn as Page, Yn as PageHeader, Zn as PageHeading, Qn as Pagination, er as PaginationContent, sr as PaginationEllipsis, nr as PaginationItem, K as PayFitBrand, q as PayFitBrandPreprod, ur as PhoneNumberInput, dr as Pill, fr as Popover, pr as PopoverTrigger, mr as ProgressBar, dt as PromoDialog, ct as PromoDialogActions, mt as PromoDialogContent, lt as PromoDialogHero, pt as PromoDialogSubtitle, ut as PromoDialogTitle, vr as RadioButton, hr as RadioButtonGroup, gr as RadioButtonHelper, _r as RadioIndicator, we as RawBreadcrumbLink, xe as RawLink, Sn as RawLinkButton, wn as RawListViewItem, _ as RawMenuItem, Ln as RawNavItem, Bn as RawNavigationCard, rr as RawPaginationLink, or as RawPaginationNext, ar as RawPaginationPrevious, xi as RawSubTask, hi as RawTab, Ci as RawTask, ye as RouterProvider, Bi as ScrollArea, jn as Search, xr as SegmentedButtonGroup, Mr as Select, jr as SelectButton, Nr as SelectOption, Pr as SelectOptionGroup, Fr as SelectOptionHelper, Tr as SelectableButton, Cr as SelectableButtonGroup, Or as SelectableCardCheckbox, Dr as SelectableCardCheckboxGroup, Ar as SelectableCardRadio, kr as SelectableCardRadioGroup, Ir as SidePanel, Rr as SidePanelContent, Br as SidePanelFooter, Hr as SidePanelHeader, br as Skeleton, Jt as SkipLink, Yt as SkipLinks, c as Spinner, Ut as Stack, Gt as StackItem, Yi as StandardSchemaAdapter, Gr as Step, Wr as Stepper, Mi as TOAST_CONFIG, gi as TabList, _i as TabPanel, vi as TabPanels, qr as Table, Yr as TableBody, Zr as TableCell, $r as TableColumnHeader, ti as TableEmptyState, ni as TableEmptyStateError, ri as TableEmptyStateLoading, ii as TableEmptyStateNoData, ai as TableEmptyStateText, ci as TableHeader, oi as TableNoSearchResults, ui as TablePagination, Jr as TableRoot, fi as TableRow, mi as Tabs, Ti as TaskGroup, yi as TaskMenu, E as Text, Ei as TextArea, Oi as Timeline, ki as TimelineStep, ji as TimelineStepDescription, Ai as TimelineStepHeader, Ni as ToastManager, Sr as ToggleButton, Li as ToggleSwitch, Fi as ToggleSwitchGroup, d as Tooltip, Xi as ZodV3SchemaAdapter, Zi as ZodV4SchemaAdapter, b as actionBarRoot, Q as autocompleteItem, ee as autocompleteItemGroup, le as bottomSheet, de as bottomSheetContent, pe as bottomSheetFooter, he as bottomSheetHeader, Ie as card, Oe as carousel, Me as carouselContent, Ae as carouselHeader, Ee as carouselNav, Pe as carouselSlide, Ve as checkboxGroup, S as circularIconButton, Qi as createSchemaAdapter, ra as dataTableRoot, it as dialog, Dt as errorState, Ji as fieldRevalidateLogic, kt as fieldset, Pt as filterContainer, Ft as filterDismissButton, zt as filterToolbar, Bt as flex, Vt as flexItem, Lt as floatingActionBar, qt as fullPageLoader, $t as funnelBody, Zt as funnelLayout, tn as funnelPage, an as funnelPageActions, sn as funnelPageContent, un as funnelPageFooter, fn as funnelPageHeader, mn as funnelSidebar, gn as funnelTopBar, B as getInitials, _n as grid, vn as gridItem, i as isDesktopBreakpoint, a as isMobileBreakpoint, ea as isSortableHeader, Se as link, Tn as listViewItem, Dn as listViewSection, Rn as navItemBase, Hn as navigationCardGroup, Kn as numberInput, Jn as page, Xn as pageHeader, $n as pagination, tr as paginationContent, ir as paginationLink, ft as promoDialog, yr as radioButton, Si as rawSubTask, wi as rawTask, Mn as search, Er as selectableButton, wr as selectableButtonGroup, Lr as sidePanel, zr as sidePanelContent, Vr as sidePanelFooter, Ur as sidePanelHeader, Xr as tableBody, Qr as tableCell, ei as tableColumnHeader, si as tableEmptyState, li as tableHeader, di as tablePagination, pi as tableRow, Ki as tanstackFormDefaultValues, bi as taskMenu, T as text, Di as textArea, Pi as toast, Ri as toggleSwitch, Ii as toggleSwitchGroup, P as useAppMenuContext, zi as useAsyncList, o as useBreakpointListener, Tt as useContainerQueryLevel, qi as useFieldA11yContext, Vi as useFieldContext, Hi as useFormContext, t as useMediaQuery, lr as usePaginationState, cr as usePaginationWindow, be as useRouter, Kr as useStepper, Ui as useTanstackUnityForm, Wi as withFieldGroup, Gi as withForm };

package/dist/esm/modules/ai-kit/components/ai-composer/AIComposer.variants.js

@@ -4,51 +4,53 @@ import { uyTv as n } from "@payfit/unity-themes";
 var r = n({
 	slots: {
 		base: [
-			"uy:flex uy:min-h-[120px] uy:rounded-200 uy:border-2 uy:px-200 uy:py-150 uy:not-data-[state=\"disabled\"]:shadow-100",
+			"uy:flex uy:min-h-15 uy:rounded-200 uy:border-1 uy:px-200 uy:py-150 uy:data-[state=\"enabled\"]:shadow-100",
 			"uy:bg-surface-neutral",
-			"uy:[--uy-ai-gradient-border-width:2px]",
+			"uy:[--uy-ai-gradient-border-width:1px]",
 			"uy:[--uy-ai-gradient-border-opacity:0]",
 			"uy:[--uy-ai-gradient-surface-opacity:0]",
 			"uy:[--uy-ai-gradient-animation-play-state:paused]",
 			"uy:[--uy-ai-gradient-glow-opacity:0%]",
 			"uy:data-[state=\"enabled\"]:border-border-neutral",
 			"uy:data-[state=\"disabled\"]:cursor-not-allowed uy:data-[state=\"disabled\"]:bg-surface-neutral-disabled uy:data-[state=\"disabled\"]:border-border-neutral-disabled",
-			"uy:hover:border-border-neutral-hover",
-			"uy:data-[hovered=\"true\"]:border-border-neutral-hover",
-			"uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-offset-2 uy:focus-within:outline-utility-focus-ring",
-			"uy:data-[focus-visible=\"true\"]:outline-2 uy:data-[focus-visible=\"true\"]:outline-solid uy:data-[focus-visible=\"true\"]:outline-offset-2 uy:data-[focus-visible=\"true\"]:outline-utility-focus-ring",
-			"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:not-data-[state='disabled']:hover:border-border-neutral-hover uy:not-data-[state='disabled']:hover:shadow-200",
+			"uy:has-data-[focus-visible=\"true\"]:outline-2 uy:has-data-[focus-visible=\"true\"]:outline-solid uy:has-data-[focus-visible=\"true\"]:outline-offset-2 uy:has-data-[focus-visible=\"true\"]:outline-utility-focus-ring",
+			"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:1px]",
 			"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
 			"uy:data-[focus-within=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
-			"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-width:1px]",
 			"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
 			"uy:data-[focus-visible=\"true\"]:[--uy-ai-gradient-animation-play-state:paused]",
-			"uy:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:1px]",
 			"uy:data-[has-value=\"true\"]:[--uy-ai-gradient-border-opacity:1]",
-			"uy:data-[has-value=\"true\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[has-value=\"true\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:1px]",
 			"uy:data-[has-value=\"true\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-animation-play-state:running]",
-			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:not-data-[state=\"disabled\"]:data-[has-value=\"true\"]:shadow-300",
+			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-border-width:1px]",
 			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-border-opacity:1]",
-			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-surface-opacity:0.06]",
+			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-surface-opacity:0]",
 			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-animation-play-state:running]",
-			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-glow-opacity:20%]",
+			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-glow-opacity:5%]",
 			"uy:data-[state=\"loading\"]:[--uy-ai-gradient-glow-visibility:1]",
-			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-border-width:1px]",
 			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-border-opacity:1]",
-			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-surface-opacity:0.06]",
+			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-surface-opacity:0.02]",
 			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-animation-play-state:running]",
-			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-glow-opacity:20%]",
+			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-glow-opacity:5%]",
 			"uy:data-[state=\"streaming\"]:[--uy-ai-gradient-glow-visibility:1]",
-			"uy:data-[state=\"loading\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:2px]",
-			"uy:data-[state=\"loading\"]:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:2px]",
-			"uy:data-[state=\"streaming\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:2px]",
-			"uy:data-[state=\"streaming\"]:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:2px]",
-			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-border-width:2px]",
+			"uy:data-[state=\"loading\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:1px]",
+			"uy:data-[state=\"loading\"]:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:1px]",
+			"uy:data-[state=\"loading\"]:shadow-none",
+			"uy:data-[state=\"streaming\"]:data-[focus-within=\"true\"]:[--uy-ai-gradient-border-width:1px]",
+			"uy:data-[state=\"streaming\"]:data-[has-value=\"true\"]:[--uy-ai-gradient-border-width:1px]",
+			"uy:data-[state=\"streaming\"]:shadow-none",
+			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-border-width:1px]",
 			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-border-opacity:0]",
 			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-surface-opacity:0]",
 			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-animation-play-state:paused]",
 			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-glow-opacity:0%]",
 			"uy:data-[state=\"disabled\"]:[--uy-ai-gradient-glow-visibility:0]",
+			"uy:data-[state=\"disabled\"]:shadow-none",
 			e({
 				gradient: "linear",
 				glow: !0

package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerAlert.js

@@ -5,11 +5,11 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 var a = n({
 	slots: {
 		base: "uy:flex uy:items-start uy:gap-50",
-		alertMessage: "uy:min-w-0 uy:whitespace-pre-wrap"
+		alertMessage: "uy:min-w-0 uy:whitespace-pre-wrap uy:typography-body-small-strong"
 	},
 	variants: { variant: {
-		warning: { alertMessage: "uy:typography-body-small uy:text-content-warning-high" },
-		error: { alertMessage: "uy:typography-body-small uy:text-content-danger" }
+		warning: { alertMessage: "uy:text-content-warning-high" },
+		error: { alertMessage: "uy:text-content-danger" }
 	} }
 }), o = ({ children: n, variant: o, className: s, ...c }) => {
 	let { base: l, alertMessage: u } = a({ variant: o }), d = o === "error" ? "WarningCircleFilled" : "WarningFilled", f = o === "error" ? "content.danger" : "content.warning";

package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerAttachmentsGroup.js

@@ -1,39 +1,38 @@
-import { forwardRef as e } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { jsx as n } from "react/jsx-runtime";
-import { useIntl as r } from "react-intl";
-import { TagGroup as i, TagList as a } from "react-aria-components/TagGroup";
+import { ScrollArea as e } from "../../../../../core/components/scroll-area/ScrollArea.js";
+import { forwardRef as t } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r } from "react/jsx-runtime";
+import { useIntl as i } from "react-intl";
+import { TagGroup as a, TagList as o } from "react-aria-components/TagGroup";
 //#region src/modules/ai-kit/components/ai-composer/parts/AIComposerAttachmentsGroup.tsx
-var o = t({ slots: {
-	clip: "uy:w-full uy:min-w-0 uy:overflow-hidden uy:[contain:paint]",
-	base: [
-		"uy:flex uy:w-full uy:min-w-0 uy:flex-nowrap uy:items-start uy:gap-50 uy:mb-125 uy:p-50",
-		"uy:overflow-x-auto uy:overflow-y-hidden uy:scrollbar-thin",
-		"uy:scrollbar:h-1 uy:scrollbar-thumb:rounded-pill uy:scrollbar-thumb:bg-surface-neutral-low"
-	]
-} }), s = e(({ children: e, items: t, onRemove: s, renderEmptyState: c, "aria-label": l, ...u }, d) => {
-	let f = r(), { base: p, clip: m } = o();
-	return /* @__PURE__ */ n(i, {
-		ref: d,
-		...u,
+var s = n({ slots: {
+	scrollArea: "uy:w-full uy:min-w-0 uy:[contain:paint]",
+	base: ["uy:flex uy:w-full uy:min-w-0 uy:flex-nowrap uy:items-start uy:gap-50 uy:mb-125 uy:p-50"]
+} }), c = t(({ children: t, items: n, onRemove: c, renderEmptyState: l, "aria-label": u, ...d }, f) => {
+	let p = i(), { base: m, scrollArea: h } = s();
+	return /* @__PURE__ */ r(a, {
+		ref: f,
+		...d,
 		className: "uy:w-full uy:min-w-0",
 		selectionMode: "none",
-		onRemove: s,
-		"aria-label": l ?? f.formatMessage({
+		onRemove: c,
+		"aria-label": u ?? p.formatMessage({
 			id: "unity:module:ai-kit:composer:attachment-group",
 			defaultMessage: "Attachments"
 		}),
-		children: /* @__PURE__ */ n("div", {
-			className: m(),
-			children: /* @__PURE__ */ n(a, {
+		children: /* @__PURE__ */ r(e, {
+			axis: "inline",
+			fade: "both",
+			className: h(),
+			children: /* @__PURE__ */ r(o, {
 				"data-unity-slot": "attachments",
-				items: t,
-				renderEmptyState: c,
-				className: p(),
-				children: e
+				items: n,
+				renderEmptyState: l,
+				className: m(),
+				children: t
 			})
 		})
 	});
 });
 //#endregion
-export { s as AIComposerAttachmentsGroup };
+export { c as AIComposerAttachmentsGroup };

package/dist/esm/modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.js

@@ -6,9 +6,9 @@ import { useResizeObserver as l } from "usehooks-ts";
 import { TextArea as u } from "react-aria-components/TextArea";
 //#region src/modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.tsx
 var d = o({ slots: {
-	wrapper: "uy:relative uy:group/textarea uy:flex uy:min-h-0 uy:flex-1",
+	wrapper: "uy:relative uy:group/textarea uy:flex uy:min-h-0 uy:flex-1 uy:min-h-[2lh]",
 	base: [
-		"uy:field-sizing-content uy:min-h-10 uy:max-h-[240px] uy:flex-1 uy:resize-none uy:overflow-y-auto uy:p-0",
+		"uy:field-sizing-content uy:max-h-30 uy:flex-1 uy:resize-none uy:overflow-y-auto uy:p-0",
 		"uy:typography-body uy:text-content-neutral uy:placeholder:text-content-neutral-lowest",
 		"uy:disabled:cursor-not-allowed uy:disabled:text-content-neutral-disabled",
 		"uy:disabled:placeholder:text-content-neutral-low-disabled",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "3.4.16",
+  "version": "3.4.18",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -103,7 +103,7 @@
     "@formatjs/intl": "4.1.12",
     "@internationalized/date": "3.12.4",
     "minimatch": "10.2.5",
-    "@payfit/unity-illustrations": "3.4.16",
+    "@payfit/unity-illustrations": "3.4.18",
     "@radix-ui/react-avatar": "1.2.6",
     "@radix-ui/react-slot": "1.3.3",
     "@react-aria/interactions": "3.28.1",
@@ -132,8 +132,8 @@
     "zod": "4.6.5"
   },
   "peerDependencies": {
-    "@payfit/unity-icons": "3.4.16",
-    "@payfit/unity-themes": "3.4.16",
+    "@payfit/unity-icons": "3.4.18",
+    "@payfit/unity-themes": "3.4.18",
     "@storybook/react-vite": "^10",
     "@tanstack/react-query": "^5",
     "@tanstack/form-core": "1.33.5",
@@ -156,9 +156,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": "3.4.16",
-    "@payfit/unity-illustrations": "3.4.16",
-    "@payfit/unity-themes": "3.4.16",
+    "@payfit/unity-icons": "3.4.18",
+    "@payfit/unity-illustrations": "3.4.18",
+    "@payfit/unity-themes": "3.4.18",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-designs": "11.1.4",

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

@@ -2656,6 +2656,29 @@
       ],
       "title": "RadioButtonInput"
     },
+    {
+      "description": "Adds edge cues to a native scroll viewport.",
+      "docsHref": "?path=/docs/component-reference-scrollarea--docs",
+      "id": "component-reference-scrollarea",
+      "keywords": [
+        "scroll",
+        "overflow",
+        "fade",
+        "viewport"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "primary",
+        "storyId": "component-reference-scrollarea--primary"
+      },
+      "related": [],
+      "section": "components",
+      "tags": [
+        "category:layout",
+        "type:component"
+      ],
+      "title": "ScrollArea"
+    },
     {
       "description": "Captures query text for search and filtering flows with clear affordances.",
       "docsHref": "?path=/docs/component-reference-search--docs",