@flipdish/ui-library 0.11.0 → 0.11.1

package/dist/components/molecules/Notification/index.cjs

@@ -8,6 +8,7 @@ var CloseButton = require('@flipdish/ui-library/components/atoms/CloseButton');
 var FeaturedIcon = require('@flipdish/ui-library/components/atoms/FeaturedIcon');
 var ProgressBar = require('@flipdish/ui-library/components/atoms/ProgressBar');
 var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 
 const iconMap = {
     default: uiIcons.InfoCircle,
@@ -20,23 +21,26 @@ const iconMap = {
 /**
  * @summary toast notification led by a featured icon
  */
-const IconNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, icon, progress, onClose, onConfirm, color = 'default', }) => {
+const IconNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, icon, progress, onClose, onConfirm, color = 'default', 'data-testid': dataTestId, }) => {
     const showProgress = typeof progress === 'number';
-    return (jsxRuntime.jsxs("div", { className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { icon: icon || iconMap[color], color: color === 'default' ? 'gray' : color, theme: color === 'default' ? 'modern' : 'outline', size: "md" }), jsxRuntime.jsxs("div", { className: cx.cx('flex flex-1 flex-col gap-3 md:pr-8', color !== 'default' && 'md:pt-0.5', showProgress && 'gap-4'), children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsxRuntime.jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), showProgress && jsxRuntime.jsx(ProgressBar.ProgressBar, { labelPosition: "bottom", value: progress, valueFormatter: (value) => `${value}% uploaded...` }), jsxRuntime.jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsxRuntime.jsx(Button.Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsxRuntime.jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+    const notificationTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'icon-notification', rootName: 'icon-notification' });
+    return (jsxRuntime.jsxs("div", { "data-testid": notificationTestId, className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { icon: icon || iconMap[color], color: color === 'default' ? 'gray' : color, theme: color === 'default' ? 'modern' : 'outline', size: "md" }), jsxRuntime.jsxs("div", { className: cx.cx('flex flex-1 flex-col gap-3 md:pr-8', color !== 'default' && 'md:pt-0.5', showProgress && 'gap-4'), children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsxRuntime.jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), showProgress && (jsxRuntime.jsx(ProgressBar.ProgressBar, { labelPosition: "bottom", value: progress, valueFormatter: (value) => `${value}% uploaded...`, "data-testid": testIdUtils.joinTestId(notificationTestId, 'progress') })), jsxRuntime.jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsxRuntime.jsx(Button.Button, { onClick: onClose, size: "sm", color: "link-gray", "data-testid": testIdUtils.joinTestId(notificationTestId, 'dismiss'), children: dismissLabel })), confirmLabel && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, size: "sm", color: "link-color", "data-testid": testIdUtils.joinTestId(notificationTestId, 'confirm'), children: confirmLabel }))] })] }), jsxRuntime.jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: "Dismiss", "data-testid": testIdUtils.joinTestId(notificationTestId, 'close') }) })] }));
 };
 /**
  * @summary toast notification led by a sender's avatar
  */
-const AvatarNotification = ({ name, content, avatar, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, date, onClose, onConfirm, }) => {
-    return (jsxRuntime.jsxs("div", { className: "relative z-[var(--z-index)] flex max-w-full flex-col items-start gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsxRuntime.jsx(Avatar.Avatar, { size: "md", src: avatar, alt: name, status: "online" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 pr-8", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-fg-primary", children: name }), jsxRuntime.jsx("span", { className: "text-sm text-fg-quaternary", children: date })] }), jsxRuntime.jsx("p", { className: "text-sm text-fg-secondary", children: content })] }), jsxRuntime.jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsxRuntime.jsx(Button.Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsxRuntime.jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+const AvatarNotification = ({ name, content, avatar, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, date, onClose, onConfirm, 'data-testid': dataTestId, }) => {
+    const notificationTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'avatar-notification', rootName: 'avatar-notification' });
+    return (jsxRuntime.jsxs("div", { "data-testid": notificationTestId, className: "relative z-[var(--z-index)] flex max-w-full flex-col items-start gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsxRuntime.jsx(Avatar.Avatar, { size: "md", src: avatar, alt: name, status: "online" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 pr-8", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-fg-primary", children: name }), jsxRuntime.jsx("span", { className: "text-sm text-fg-quaternary", children: date })] }), jsxRuntime.jsx("p", { className: "text-sm text-fg-secondary", children: content })] }), jsxRuntime.jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsxRuntime.jsx(Button.Button, { onClick: onClose, size: "sm", color: "link-gray", "data-testid": testIdUtils.joinTestId(notificationTestId, 'dismiss'), children: dismissLabel })), confirmLabel && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, size: "sm", color: "link-color", "data-testid": testIdUtils.joinTestId(notificationTestId, 'confirm'), children: confirmLabel }))] })] }), jsxRuntime.jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: "Dismiss", "data-testid": testIdUtils.joinTestId(notificationTestId, 'close') }) })] }));
 };
 /**
  * @summary toast notification featuring a banner image
  */
-const ImageNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, imageMobile, imageDesktop, onClose, onConfirm, }) => {
-    return (jsxRuntime.jsxs("div", { style: {
+const ImageNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, imageMobile, imageDesktop, onClose, onConfirm, 'data-testid': dataTestId, }) => {
+    const notificationTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'image-notification', rootName: 'image-notification' });
+    return (jsxRuntime.jsxs("div", { "data-testid": notificationTestId, style: {
             '--width': '496px',
-        }, className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-3 rounded-xl bg-primary_alt p-4 shadow-lg max-md:ring-1 max-md:ring-secondary_alt xs:w-[var(--width)] xs:flex-row xs:gap-0 md:p-0", children: [jsxRuntime.jsx("div", { className: "-my-px hidden w-40 shrink-0 overflow-hidden rounded-l-xl outline-1 -outline-offset-1 outline-black/10 md:block", children: jsxRuntime.jsx("img", { "aria-hidden": "true", src: imageMobile, alt: "Image Mobile", className: "size-full object-cover" }) }), jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-4 rounded-r-xl bg-primary_alt md:gap-3 md:p-4 md:pl-5 md:ring-1 md:ring-secondary_alt", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 pr-8", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsxRuntime.jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), jsxRuntime.jsx("div", { className: "h-40 w-full overflow-hidden rounded-md bg-secondary md:hidden", children: jsxRuntime.jsx("img", { src: imageDesktop, alt: "Image Desktop", className: "size-full object-cover" }) }), jsxRuntime.jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsxRuntime.jsx(Button.Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsxRuntime.jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+        }, className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-3 rounded-xl bg-primary_alt p-4 shadow-lg max-md:ring-1 max-md:ring-secondary_alt xs:w-[var(--width)] xs:flex-row xs:gap-0 md:p-0", children: [jsxRuntime.jsx("div", { className: "-my-px hidden w-40 shrink-0 overflow-hidden rounded-l-xl outline-1 -outline-offset-1 outline-black/10 md:block", children: jsxRuntime.jsx("img", { "aria-hidden": "true", src: imageMobile, alt: "Image Mobile", className: "size-full object-cover" }) }), jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-4 rounded-r-xl bg-primary_alt md:gap-3 md:p-4 md:pl-5 md:ring-1 md:ring-secondary_alt", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 pr-8", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsxRuntime.jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), jsxRuntime.jsx("div", { className: "h-40 w-full overflow-hidden rounded-md bg-secondary md:hidden", children: jsxRuntime.jsx("img", { src: imageDesktop, alt: "Image Desktop", className: "size-full object-cover" }) }), jsxRuntime.jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsxRuntime.jsx(Button.Button, { onClick: onClose, size: "sm", color: "link-gray", "data-testid": testIdUtils.joinTestId(notificationTestId, 'dismiss'), children: dismissLabel })), confirmLabel && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, size: "sm", color: "link-color", "data-testid": testIdUtils.joinTestId(notificationTestId, 'confirm'), children: confirmLabel }))] })] }), jsxRuntime.jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: "Dismiss", "data-testid": testIdUtils.joinTestId(notificationTestId, 'close') }) })] }));
 };
 
 exports.AvatarNotification = AvatarNotification;

package/dist/components/molecules/Notification/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Notification/index.tsx"],"sourcesContent":[null],"names":["InfoCircle","AlertCircle","CheckCircle","_jsxs","_jsx","FeaturedIcon","cx","ProgressBar","Button","CloseButton","Avatar"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Notification/index.tsx"],"sourcesContent":[null],"names":["InfoCircle","AlertCircle","CheckCircle","useResolvedTestId","_jsxs","_jsx","FeaturedIcon","cx","ProgressBar","joinTestId","Button","CloseButton","Avatar"],"mappings":"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"}

package/dist/components/molecules/Notification/index.d.ts

@@ -12,11 +12,16 @@ export interface IconNotificationProps {
     progress?: number;
     onClose?: () => void;
     onConfirm?: () => void;
+    /**
+     * Overrides the `data-testid` (defaults to `fd-icon-notification`). The confirm,
+     * dismiss, close, and progress controls derive their ids from this prefix.
+     */
+    'data-testid'?: string;
 }
 /**
  * @summary toast notification led by a featured icon
  */
-export declare const IconNotification: ({ title, description, confirmLabel, dismissLabel, hideDismissLabel, icon, progress, onClose, onConfirm, color, }: IconNotificationProps) => import("react").JSX.Element;
+export declare const IconNotification: ({ title, description, confirmLabel, dismissLabel, hideDismissLabel, icon, progress, onClose, onConfirm, color, "data-testid": dataTestId, }: IconNotificationProps) => import("react").JSX.Element;
 interface AvatarNotificationProps {
     name: string;
     content: string;
@@ -31,11 +36,16 @@ interface AvatarNotificationProps {
     color?: 'default' | 'brand' | 'gray' | 'error' | 'warning' | 'success';
     onClose?: () => void;
     onConfirm?: () => void;
+    /**
+     * Overrides the `data-testid` (defaults to `fd-avatar-notification`). The confirm,
+     * dismiss, and close controls derive their ids from this prefix.
+     */
+    'data-testid'?: string;
 }
 /**
  * @summary toast notification led by a sender's avatar
  */
-export declare const AvatarNotification: ({ name, content, avatar, confirmLabel, dismissLabel, hideDismissLabel, date, onClose, onConfirm, }: AvatarNotificationProps) => import("react").JSX.Element;
+export declare const AvatarNotification: ({ name, content, avatar, confirmLabel, dismissLabel, hideDismissLabel, date, onClose, onConfirm, "data-testid": dataTestId, }: AvatarNotificationProps) => import("react").JSX.Element;
 interface ImageNotificationProps {
     title: string;
     description: string;
@@ -46,10 +56,15 @@ interface ImageNotificationProps {
     imageDesktop: string;
     onClose?: () => void;
     onConfirm?: () => void;
+    /**
+     * Overrides the `data-testid` (defaults to `fd-image-notification`). The confirm,
+     * dismiss, and close controls derive their ids from this prefix.
+     */
+    'data-testid'?: string;
 }
 /**
  * @summary toast notification featuring a banner image
  */
-export declare const ImageNotification: ({ title, description, confirmLabel, dismissLabel, hideDismissLabel, imageMobile, imageDesktop, onClose, onConfirm, }: ImageNotificationProps) => import("react").JSX.Element;
+export declare const ImageNotification: ({ title, description, confirmLabel, dismissLabel, hideDismissLabel, imageMobile, imageDesktop, onClose, onConfirm, "data-testid": dataTestId, }: ImageNotificationProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/Notification/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Notification/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAW/C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,kHAW9B,qBAAqB,gCAuCvB,CAAC;AAEF,UAAU,uBAAuB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,oGAUhC,uBAAuB,gCAiCzB,CAAC;AAEF,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,sHAU/B,sBAAsB,gCA4CxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Notification/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAW/C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,6IAY9B,qBAAqB,gCAkDvB,CAAC;AAEF,UAAU,uBAAuB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,+HAWhC,uBAAuB,gCAsCzB,CAAC;AAEF,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,iJAW/B,sBAAsB,gCA+CxB,CAAC"}

package/dist/components/molecules/Notification/index.js

@@ -6,6 +6,7 @@ import { CloseButton } from '@flipdish/ui-library/components/atoms/CloseButton';
 import { FeaturedIcon } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
 import { ProgressBar } from '@flipdish/ui-library/components/atoms/ProgressBar';
 import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 
 const iconMap = {
     default: InfoCircle,
@@ -18,23 +19,26 @@ const iconMap = {
 /**
  * @summary toast notification led by a featured icon
  */
-const IconNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, icon, progress, onClose, onConfirm, color = 'default', }) => {
+const IconNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, icon, progress, onClose, onConfirm, color = 'default', 'data-testid': dataTestId, }) => {
     const showProgress = typeof progress === 'number';
-    return (jsxs("div", { className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsx(FeaturedIcon, { icon: icon || iconMap[color], color: color === 'default' ? 'gray' : color, theme: color === 'default' ? 'modern' : 'outline', size: "md" }), jsxs("div", { className: cx('flex flex-1 flex-col gap-3 md:pr-8', color !== 'default' && 'md:pt-0.5', showProgress && 'gap-4'), children: [jsxs("div", { className: "flex flex-col gap-1", children: [jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), showProgress && jsx(ProgressBar, { labelPosition: "bottom", value: progress, valueFormatter: (value) => `${value}% uploaded...` }), jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsx(Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsx(Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsx(CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+    const notificationTestId = useResolvedTestId({ testId: dataTestId, segment: 'icon-notification', rootName: 'icon-notification' });
+    return (jsxs("div", { "data-testid": notificationTestId, className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsx(FeaturedIcon, { icon: icon || iconMap[color], color: color === 'default' ? 'gray' : color, theme: color === 'default' ? 'modern' : 'outline', size: "md" }), jsxs("div", { className: cx('flex flex-1 flex-col gap-3 md:pr-8', color !== 'default' && 'md:pt-0.5', showProgress && 'gap-4'), children: [jsxs("div", { className: "flex flex-col gap-1", children: [jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), showProgress && (jsx(ProgressBar, { labelPosition: "bottom", value: progress, valueFormatter: (value) => `${value}% uploaded...`, "data-testid": joinTestId(notificationTestId, 'progress') })), jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsx(Button, { onClick: onClose, size: "sm", color: "link-gray", "data-testid": joinTestId(notificationTestId, 'dismiss'), children: dismissLabel })), confirmLabel && (jsx(Button, { onClick: onConfirm, size: "sm", color: "link-color", "data-testid": joinTestId(notificationTestId, 'confirm'), children: confirmLabel }))] })] }), jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsx(CloseButton, { onClick: onClose, size: "sm", label: "Dismiss", "data-testid": joinTestId(notificationTestId, 'close') }) })] }));
 };
 /**
  * @summary toast notification led by a sender's avatar
  */
-const AvatarNotification = ({ name, content, avatar, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, date, onClose, onConfirm, }) => {
-    return (jsxs("div", { className: "relative z-[var(--z-index)] flex max-w-full flex-col items-start gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsx(Avatar, { size: "md", src: avatar, alt: name, status: "online" }), jsxs("div", { className: "flex flex-col gap-3 pr-8", children: [jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("p", { className: "text-sm font-semibold text-fg-primary", children: name }), jsx("span", { className: "text-sm text-fg-quaternary", children: date })] }), jsx("p", { className: "text-sm text-fg-secondary", children: content })] }), jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsx(Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsx(Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsx(CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+const AvatarNotification = ({ name, content, avatar, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, date, onClose, onConfirm, 'data-testid': dataTestId, }) => {
+    const notificationTestId = useResolvedTestId({ testId: dataTestId, segment: 'avatar-notification', rootName: 'avatar-notification' });
+    return (jsxs("div", { "data-testid": notificationTestId, className: "relative z-[var(--z-index)] flex max-w-full flex-col items-start gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsx(Avatar, { size: "md", src: avatar, alt: name, status: "online" }), jsxs("div", { className: "flex flex-col gap-3 pr-8", children: [jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("p", { className: "text-sm font-semibold text-fg-primary", children: name }), jsx("span", { className: "text-sm text-fg-quaternary", children: date })] }), jsx("p", { className: "text-sm text-fg-secondary", children: content })] }), jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsx(Button, { onClick: onClose, size: "sm", color: "link-gray", "data-testid": joinTestId(notificationTestId, 'dismiss'), children: dismissLabel })), confirmLabel && (jsx(Button, { onClick: onConfirm, size: "sm", color: "link-color", "data-testid": joinTestId(notificationTestId, 'confirm'), children: confirmLabel }))] })] }), jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsx(CloseButton, { onClick: onClose, size: "sm", label: "Dismiss", "data-testid": joinTestId(notificationTestId, 'close') }) })] }));
 };
 /**
  * @summary toast notification featuring a banner image
  */
-const ImageNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, imageMobile, imageDesktop, onClose, onConfirm, }) => {
-    return (jsxs("div", { style: {
+const ImageNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, imageMobile, imageDesktop, onClose, onConfirm, 'data-testid': dataTestId, }) => {
+    const notificationTestId = useResolvedTestId({ testId: dataTestId, segment: 'image-notification', rootName: 'image-notification' });
+    return (jsxs("div", { "data-testid": notificationTestId, style: {
             '--width': '496px',
-        }, className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-3 rounded-xl bg-primary_alt p-4 shadow-lg max-md:ring-1 max-md:ring-secondary_alt xs:w-[var(--width)] xs:flex-row xs:gap-0 md:p-0", children: [jsx("div", { className: "-my-px hidden w-40 shrink-0 overflow-hidden rounded-l-xl outline-1 -outline-offset-1 outline-black/10 md:block", children: jsx("img", { "aria-hidden": "true", src: imageMobile, alt: "Image Mobile", className: "size-full object-cover" }) }), jsxs("div", { className: "flex flex-1 flex-col gap-4 rounded-r-xl bg-primary_alt md:gap-3 md:p-4 md:pl-5 md:ring-1 md:ring-secondary_alt", children: [jsxs("div", { className: "flex flex-col gap-1 pr-8", children: [jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), jsx("div", { className: "h-40 w-full overflow-hidden rounded-md bg-secondary md:hidden", children: jsx("img", { src: imageDesktop, alt: "Image Desktop", className: "size-full object-cover" }) }), jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsx(Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsx(Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsx(CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+        }, className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-3 rounded-xl bg-primary_alt p-4 shadow-lg max-md:ring-1 max-md:ring-secondary_alt xs:w-[var(--width)] xs:flex-row xs:gap-0 md:p-0", children: [jsx("div", { className: "-my-px hidden w-40 shrink-0 overflow-hidden rounded-l-xl outline-1 -outline-offset-1 outline-black/10 md:block", children: jsx("img", { "aria-hidden": "true", src: imageMobile, alt: "Image Mobile", className: "size-full object-cover" }) }), jsxs("div", { className: "flex flex-1 flex-col gap-4 rounded-r-xl bg-primary_alt md:gap-3 md:p-4 md:pl-5 md:ring-1 md:ring-secondary_alt", children: [jsxs("div", { className: "flex flex-col gap-1 pr-8", children: [jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), jsx("div", { className: "h-40 w-full overflow-hidden rounded-md bg-secondary md:hidden", children: jsx("img", { src: imageDesktop, alt: "Image Desktop", className: "size-full object-cover" }) }), jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsx(Button, { onClick: onClose, size: "sm", color: "link-gray", "data-testid": joinTestId(notificationTestId, 'dismiss'), children: dismissLabel })), confirmLabel && (jsx(Button, { onClick: onConfirm, size: "sm", color: "link-color", "data-testid": joinTestId(notificationTestId, 'confirm'), children: confirmLabel }))] })] }), jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsx(CloseButton, { onClick: onClose, size: "sm", label: "Dismiss", "data-testid": joinTestId(notificationTestId, 'close') }) })] }));
 };
 
 export { AvatarNotification, IconNotification, ImageNotification };

package/dist/components/molecules/Notification/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Notification/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Notification/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/molecules/SectionFooter/index.cjs

@@ -2,9 +2,17 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 
-const SectionFooterRoot = ({ isCard, ...props }) => (jsxRuntime.jsx("div", { ...props, className: cx.cx('flex items-center border-t border-secondary', isCard ? 'gap-4 px-4 py-3 md:py-4 lg:px-6' : 'gap-5 pt-4 md:pt-5', props.className), children: props.children }));
-const SectionFooterActions = (props) => (jsxRuntime.jsx("div", { ...props, className: cx.cx('flex flex-1 justify-end gap-3', props.className), children: props.children }));
+const SectionFooterRoot = ({ isCard, 'data-testid': dataTestId, ...props }) => {
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'section-footer', rootName: 'section-footer' });
+    return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx("div", { ...props, "data-testid": rootTestId, className: cx.cx('flex items-center border-t border-secondary', isCard ? 'gap-4 px-4 py-3 md:py-4 lg:px-6' : 'gap-5 pt-4 md:pt-5', props.className), children: props.children }) }));
+};
+const SectionFooterActions = ({ 'data-testid': dataTestId, ...props }) => {
+    const prefix = testIdUtils.useTestIdPrefix();
+    const actionsTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'actions') : undefined);
+    return (jsxRuntime.jsx("div", { ...props, "data-testid": actionsTestId, className: cx.cx('flex flex-1 justify-end gap-3', props.className), children: props.children }));
+};
 /**
  * Layout molecule that anchors the bottom of a form section or card with a
  * top border and correctly spaced action buttons.

package/dist/components/molecules/SectionFooter/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/SectionFooter/index.tsx"],"sourcesContent":[null],"names":["_jsx","cx"],"mappings":";;;;;AAKA,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,EAAuD,MAClGA,cAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EACT,SAAS,EAAEC,KAAE,CAAC,6CAA6C,EAAE,MAAM,GAAG,iCAAiC,GAAG,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAE/I,KAAK,CAAC,QAAQ,EAAA,CACX,CACP;AAED,MAAM,oBAAoB,GAAG,CAAC,KAAmC,MAC/DD,cAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAEC,KAAE,CAAC,+BAA+B,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAC5E,KAAK,CAAC,QAAQ,EAAA,CACX,CACP;AAED;;;;;;;;AAQG;AACI,MAAM,aAAa,GAAG;AAC3B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,OAAO,EAAE,oBAAoB;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/SectionFooter/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","TestIdProvider","cx","useTestIdPrefix","joinTestId"],"mappings":";;;;;;AAYA,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAA0B,KAAI;AACpG,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;AAEnH,IAAA,QACEC,cAAA,CAACC,0BAAc,IAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BD,cAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EAAA,aAAA,EACI,UAAU,EACvB,SAAS,EAAEE,KAAE,CACX,6CAA6C,EAC7C,MAAM,GAAG,iCAAiC,GAAG,oBAAoB,EACjE,KAAK,CAAC,SAAS,CAChB,YAEA,KAAK,CAAC,QAAQ,EAAA,CACX,EAAA,CACS;AAErB,CAAC;AAOD,MAAM,oBAAoB,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAA6B,KAAI;AAClG,IAAA,MAAM,MAAM,GAAGC,2BAAe,EAAE;IAChC,MAAM,aAAa,GAAG,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;IAExF,QACEJ,2BAAS,KAAK,EAAA,aAAA,EAAe,aAAa,EAAE,SAAS,EAAEE,KAAE,CAAC,+BAA+B,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EACxG,KAAK,CAAC,QAAQ,EAAA,CACX;AAEV,CAAC;AAED;;;;;;;;AAQG;AACI,MAAM,aAAa,GAAG;AAC3B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,OAAO,EAAE,oBAAoB;;;;;"}

package/dist/components/molecules/SectionFooter/index.d.ts

@@ -1,4 +1,13 @@
 import type { ComponentPropsWithRef } from 'react';
+export interface SectionFooterRootProps extends ComponentPropsWithRef<'div'> {
+    isCard?: boolean;
+    /** Overrides the derived `data-testid` for the root (defaults to `fd-section-footer`). */
+    'data-testid'?: string;
+}
+export interface SectionFooterActionsProps extends ComponentPropsWithRef<'div'> {
+    /** Overrides the derived `data-testid` for the actions group (defaults to `<root>--actions`). */
+    'data-testid'?: string;
+}
 /**
  * Layout molecule that anchors the bottom of a form section or card with a
  * top border and correctly spaced action buttons.
@@ -9,9 +18,7 @@ import type { ComponentPropsWithRef } from 'react';
  * @summary bordered footer with aligned actions for sections and cards
  */
 export declare const SectionFooter: {
-    Root: ({ isCard, ...props }: ComponentPropsWithRef<"div"> & {
-        isCard?: boolean;
-    }) => import("react").JSX.Element;
-    Actions: (props: ComponentPropsWithRef<"div">) => import("react").JSX.Element;
+    Root: ({ isCard, "data-testid": dataTestId, ...props }: SectionFooterRootProps) => import("react").JSX.Element;
+    Actions: ({ "data-testid": dataTestId, ...props }: SectionFooterActionsProps) => import("react").JSX.Element;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/SectionFooter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SectionFooter/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAiBnD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa;iCAxBuB,qBAAqB,CAAC,KAAK,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE;qBAS/D,qBAAqB,CAAC,KAAK,CAAC;CAkBhE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SectionFooter/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0FAA0F;IAC1F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsBD,MAAM,WAAW,yBAA0B,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC7E,iGAAiG;IACjG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAaD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa;4DA7CkD,sBAAsB;uDAyB3B,yBAAyB;CAuB/F,CAAC"}

package/dist/components/molecules/SectionFooter/index.js

@@ -1,8 +1,16 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useTestIdPrefix, joinTestId, useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
 
-const SectionFooterRoot = ({ isCard, ...props }) => (jsx("div", { ...props, className: cx('flex items-center border-t border-secondary', isCard ? 'gap-4 px-4 py-3 md:py-4 lg:px-6' : 'gap-5 pt-4 md:pt-5', props.className), children: props.children }));
-const SectionFooterActions = (props) => (jsx("div", { ...props, className: cx('flex flex-1 justify-end gap-3', props.className), children: props.children }));
+const SectionFooterRoot = ({ isCard, 'data-testid': dataTestId, ...props }) => {
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'section-footer', rootName: 'section-footer' });
+    return (jsx(TestIdProvider, { value: rootTestId, children: jsx("div", { ...props, "data-testid": rootTestId, className: cx('flex items-center border-t border-secondary', isCard ? 'gap-4 px-4 py-3 md:py-4 lg:px-6' : 'gap-5 pt-4 md:pt-5', props.className), children: props.children }) }));
+};
+const SectionFooterActions = ({ 'data-testid': dataTestId, ...props }) => {
+    const prefix = useTestIdPrefix();
+    const actionsTestId = dataTestId ?? (prefix ? joinTestId(prefix, 'actions') : undefined);
+    return (jsx("div", { ...props, "data-testid": actionsTestId, className: cx('flex flex-1 justify-end gap-3', props.className), children: props.children }));
+};
 /**
  * Layout molecule that anchors the bottom of a form section or card with a
  * top border and correctly spaced action buttons.

package/dist/components/molecules/SectionFooter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/SectionFooter/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAKA,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,EAAuD,MAClGA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,MAAM,GAAG,iCAAiC,GAAG,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAE/I,KAAK,CAAC,QAAQ,EAAA,CACX,CACP;AAED,MAAM,oBAAoB,GAAG,CAAC,KAAmC,MAC/DA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAC5E,KAAK,CAAC,QAAQ,EAAA,CACX,CACP;AAED;;;;;;;;AAQG;AACI,MAAM,aAAa,GAAG;AAC3B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,OAAO,EAAE,oBAAoB;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/SectionFooter/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAYA,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAA0B,KAAI;AACpG,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;AAEnH,IAAA,QACEA,GAAA,CAAC,cAAc,IAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EAAA,aAAA,EACI,UAAU,EACvB,SAAS,EAAE,EAAE,CACX,6CAA6C,EAC7C,MAAM,GAAG,iCAAiC,GAAG,oBAAoB,EACjE,KAAK,CAAC,SAAS,CAChB,YAEA,KAAK,CAAC,QAAQ,EAAA,CACX,EAAA,CACS;AAErB,CAAC;AAOD,MAAM,oBAAoB,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAA6B,KAAI;AAClG,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAChC,MAAM,aAAa,GAAG,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;IAExF,QACEA,gBAAS,KAAK,EAAA,aAAA,EAAe,aAAa,EAAE,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EACxG,KAAK,CAAC,QAAQ,EAAA,CACX;AAEV,CAAC;AAED;;;;;;;;AAQG;AACI,MAAM,aAAa,GAAG;AAC3B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,OAAO,EAAE,oBAAoB;;;;;"}

package/dist/components/molecules/SectionHeader/index.cjs

@@ -2,12 +2,32 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 
-const SectionHeaderRoot = (props) => (jsxRuntime.jsx("div", { ...props, className: cx.cx('flex flex-col gap-5 border-b border-secondary pb-5', props.className), children: props.children }));
-const SectionHeaderGroup = (props) => (jsxRuntime.jsx("div", { ...props, className: cx.cx('relative flex flex-col items-start gap-4 md:flex-row', props.className), children: props.children }));
-const SectionHeaderActions = (props) => (jsxRuntime.jsx("div", { ...props, className: cx.cx('flex gap-3', props.className), children: props.children }));
-const SectionHeaderHeading = (props) => (jsxRuntime.jsx("h2", { ...props, className: cx.cx('text-md font-semibold text-primary', props.className), children: props.children }));
-const SectionHeaderSubheading = (props) => (jsxRuntime.jsx("p", { ...props, className: cx.cx('text-sm text-tertiary', props.className), children: props.children }));
+const SectionHeaderRoot = ({ 'data-testid': dataTestId, ...props }) => {
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'section-header', rootName: 'section-header' });
+    return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx("div", { ...props, "data-testid": rootTestId, className: cx.cx('flex flex-col gap-5 border-b border-secondary pb-5', props.className), children: props.children }) }));
+};
+const SectionHeaderGroup = ({ 'data-testid': dataTestId, ...props }) => {
+    const prefix = testIdUtils.useTestIdPrefix();
+    const groupTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'group') : undefined);
+    return (jsxRuntime.jsx("div", { ...props, "data-testid": groupTestId, className: cx.cx('relative flex flex-col items-start gap-4 md:flex-row', props.className), children: props.children }));
+};
+const SectionHeaderActions = ({ 'data-testid': dataTestId, ...props }) => {
+    const prefix = testIdUtils.useTestIdPrefix();
+    const actionsTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'actions') : undefined);
+    return (jsxRuntime.jsx("div", { ...props, "data-testid": actionsTestId, className: cx.cx('flex gap-3', props.className), children: props.children }));
+};
+const SectionHeaderHeading = ({ 'data-testid': dataTestId, ...props }) => {
+    const prefix = testIdUtils.useTestIdPrefix();
+    const headingTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'heading') : undefined);
+    return (jsxRuntime.jsx("h2", { ...props, "data-testid": headingTestId, className: cx.cx('text-md font-semibold text-primary', props.className), children: props.children }));
+};
+const SectionHeaderSubheading = ({ 'data-testid': dataTestId, ...props }) => {
+    const prefix = testIdUtils.useTestIdPrefix();
+    const subheadingTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'subheading') : undefined);
+    return (jsxRuntime.jsx("p", { ...props, "data-testid": subheadingTestId, className: cx.cx('text-sm text-tertiary', props.className), children: props.children }));
+};
 /**
  * A layout molecule that titles a page section and houses optional supporting
  * text and action buttons, separated from content below by a bottom border.

package/dist/components/molecules/SectionHeader/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/SectionHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx","cx"],"mappings":";;;;;AAKA,MAAM,iBAAiB,GAAG,CAAC,KAAmC,MAC5DA,cAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAEC,KAAE,CAAC,oDAAoD,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EACjG,KAAK,CAAC,QAAQ,EAAA,CACX,CACP;AAED,MAAM,kBAAkB,GAAG,CAAC,KAAmC,MAC7DD,cAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAEC,KAAE,CAAC,sDAAsD,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EACnG,KAAK,CAAC,QAAQ,EAAA,CACX,CACP;AAED,MAAM,oBAAoB,GAAG,CAAC,KAAmC,MAC/DD,cAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAEC,KAAE,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EACzD,KAAK,CAAC,QAAQ,EAAA,CACX,CACP;AAED,MAAM,oBAAoB,GAAG,CAAC,KAAkC,MAC9DD,cAAA,CAAA,IAAA,EAAA,EAAA,GAAQ,KAAK,EAAE,SAAS,EAAEC,KAAE,CAAC,oCAAoC,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAChF,KAAK,CAAC,QAAQ,EAAA,CACZ,CACN;AAED,MAAM,uBAAuB,GAAG,CAAC,KAAiC,MAChED,cAAA,CAAA,GAAA,EAAA,EAAA,GAAO,KAAK,EAAE,SAAS,EAAEC,KAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAClE,KAAK,CAAC,QAAQ,EAAA,CACb,CACL;AAED;;;;;AAKG;AACI,MAAM,aAAa,GAAG;AAC3B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE,kBAAkB;AACzB,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,UAAU,EAAE,uBAAuB;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/SectionHeader/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","TestIdProvider","cx","useTestIdPrefix","joinTestId"],"mappings":"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"}

package/dist/components/molecules/SectionHeader/index.d.ts

@@ -1,4 +1,24 @@
 import type { ComponentPropsWithRef } from 'react';
+export interface SectionHeaderRootProps extends ComponentPropsWithRef<'div'> {
+    /** Overrides the derived `data-testid` for the root (defaults to `fd-section-header`). */
+    'data-testid'?: string;
+}
+export interface SectionHeaderGroupProps extends ComponentPropsWithRef<'div'> {
+    /** Overrides the derived `data-testid` for the group (defaults to `<root>--group`). */
+    'data-testid'?: string;
+}
+export interface SectionHeaderActionsProps extends ComponentPropsWithRef<'div'> {
+    /** Overrides the derived `data-testid` for the actions group (defaults to `<root>--actions`). */
+    'data-testid'?: string;
+}
+export interface SectionHeaderHeadingProps extends ComponentPropsWithRef<'h2'> {
+    /** Overrides the derived `data-testid` for the heading (defaults to `<root>--heading`). */
+    'data-testid'?: string;
+}
+export interface SectionHeaderSubheadingProps extends ComponentPropsWithRef<'p'> {
+    /** Overrides the derived `data-testid` for the subheading (defaults to `<root>--subheading`). */
+    'data-testid'?: string;
+}
 /**
  * A layout molecule that titles a page section and houses optional supporting
  * text and action buttons, separated from content below by a bottom border.
@@ -6,10 +26,10 @@ import type { ComponentPropsWithRef } from 'react';
  * @summary introduce a page section with a title, description, and actions
  */
 export declare const SectionHeader: {
-    Root: (props: ComponentPropsWithRef<"div">) => import("react").JSX.Element;
-    Group: (props: ComponentPropsWithRef<"div">) => import("react").JSX.Element;
-    Actions: (props: ComponentPropsWithRef<"div">) => import("react").JSX.Element;
-    Heading: (props: ComponentPropsWithRef<"h2">) => import("react").JSX.Element;
-    Subheading: (props: ComponentPropsWithRef<"p">) => import("react").JSX.Element;
+    Root: ({ "data-testid": dataTestId, ...props }: SectionHeaderRootProps) => import("react").JSX.Element;
+    Group: ({ "data-testid": dataTestId, ...props }: SectionHeaderGroupProps) => import("react").JSX.Element;
+    Actions: ({ "data-testid": dataTestId, ...props }: SectionHeaderActionsProps) => import("react").JSX.Element;
+    Heading: ({ "data-testid": dataTestId, ...props }: SectionHeaderHeadingProps) => import("react").JSX.Element;
+    Subheading: ({ "data-testid": dataTestId, ...props }: SectionHeaderSubheadingProps) => import("react").JSX.Element;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/SectionHeader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SectionHeader/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAgCnD;;;;;GAKG;AACH,eAAO,MAAM,aAAa;kBApCQ,qBAAqB,CAAC,KAAK,CAAC;mBAM3B,qBAAqB,CAAC,KAAK,CAAC;qBAM1B,qBAAqB,CAAC,KAAK,CAAC;qBAM5B,qBAAqB,CAAC,IAAI,CAAC;wBAMxB,qBAAqB,CAAC,GAAG,CAAC;CAkBjE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SectionHeader/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC1E,0FAA0F;IAC1F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAcD,MAAM,WAAW,uBAAwB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC3E,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAaD,MAAM,WAAW,yBAA0B,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC7E,iGAAiG;IACjG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAaD,MAAM,WAAW,yBAA0B,SAAQ,qBAAqB,CAAC,IAAI,CAAC;IAC5E,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAaD,MAAM,WAAW,4BAA6B,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IAC9E,iGAAiG;IACjG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAaD;;;;;GAKG;AACH,eAAO,MAAM,aAAa;oDAlF0C,sBAAsB;qDAiBrB,uBAAuB;uDAgBrB,yBAAyB;uDAgBzB,yBAAyB;0DAgBtB,4BAA4B;CAuBrG,CAAC"}

package/dist/components/molecules/SectionHeader/index.js

@@ -1,11 +1,31 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useTestIdPrefix, joinTestId, useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
 
-const SectionHeaderRoot = (props) => (jsx("div", { ...props, className: cx('flex flex-col gap-5 border-b border-secondary pb-5', props.className), children: props.children }));
-const SectionHeaderGroup = (props) => (jsx("div", { ...props, className: cx('relative flex flex-col items-start gap-4 md:flex-row', props.className), children: props.children }));
-const SectionHeaderActions = (props) => (jsx("div", { ...props, className: cx('flex gap-3', props.className), children: props.children }));
-const SectionHeaderHeading = (props) => (jsx("h2", { ...props, className: cx('text-md font-semibold text-primary', props.className), children: props.children }));
-const SectionHeaderSubheading = (props) => (jsx("p", { ...props, className: cx('text-sm text-tertiary', props.className), children: props.children }));
+const SectionHeaderRoot = ({ 'data-testid': dataTestId, ...props }) => {
+    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'section-header', rootName: 'section-header' });
+    return (jsx(TestIdProvider, { value: rootTestId, children: jsx("div", { ...props, "data-testid": rootTestId, className: cx('flex flex-col gap-5 border-b border-secondary pb-5', props.className), children: props.children }) }));
+};
+const SectionHeaderGroup = ({ 'data-testid': dataTestId, ...props }) => {
+    const prefix = useTestIdPrefix();
+    const groupTestId = dataTestId ?? (prefix ? joinTestId(prefix, 'group') : undefined);
+    return (jsx("div", { ...props, "data-testid": groupTestId, className: cx('relative flex flex-col items-start gap-4 md:flex-row', props.className), children: props.children }));
+};
+const SectionHeaderActions = ({ 'data-testid': dataTestId, ...props }) => {
+    const prefix = useTestIdPrefix();
+    const actionsTestId = dataTestId ?? (prefix ? joinTestId(prefix, 'actions') : undefined);
+    return (jsx("div", { ...props, "data-testid": actionsTestId, className: cx('flex gap-3', props.className), children: props.children }));
+};
+const SectionHeaderHeading = ({ 'data-testid': dataTestId, ...props }) => {
+    const prefix = useTestIdPrefix();
+    const headingTestId = dataTestId ?? (prefix ? joinTestId(prefix, 'heading') : undefined);
+    return (jsx("h2", { ...props, "data-testid": headingTestId, className: cx('text-md font-semibold text-primary', props.className), children: props.children }));
+};
+const SectionHeaderSubheading = ({ 'data-testid': dataTestId, ...props }) => {
+    const prefix = useTestIdPrefix();
+    const subheadingTestId = dataTestId ?? (prefix ? joinTestId(prefix, 'subheading') : undefined);
+    return (jsx("p", { ...props, "data-testid": subheadingTestId, className: cx('text-sm text-tertiary', props.className), children: props.children }));
+};
 /**
  * A layout molecule that titles a page section and houses optional supporting
  * text and action buttons, separated from content below by a bottom border.

package/dist/components/molecules/SectionHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/SectionHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAKA,MAAM,iBAAiB,GAAG,CAAC,KAAmC,MAC5DA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,oDAAoD,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EACjG,KAAK,CAAC,QAAQ,EAAA,CACX,CACP;AAED,MAAM,kBAAkB,GAAG,CAAC,KAAmC,MAC7DA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,sDAAsD,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EACnG,KAAK,CAAC,QAAQ,EAAA,CACX,CACP;AAED,MAAM,oBAAoB,GAAG,CAAC,KAAmC,MAC/DA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EACzD,KAAK,CAAC,QAAQ,EAAA,CACX,CACP;AAED,MAAM,oBAAoB,GAAG,CAAC,KAAkC,MAC9DA,GAAA,CAAA,IAAA,EAAA,EAAA,GAAQ,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAChF,KAAK,CAAC,QAAQ,EAAA,CACZ,CACN;AAED,MAAM,uBAAuB,GAAG,CAAC,KAAiC,MAChEA,GAAA,CAAA,GAAA,EAAA,EAAA,GAAO,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAClE,KAAK,CAAC,QAAQ,EAAA,CACb,CACL;AAED;;;;;AAKG;AACI,MAAM,aAAa,GAAG;AAC3B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE,kBAAkB;AACzB,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,UAAU,EAAE,uBAAuB;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/SectionHeader/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAWA,MAAM,iBAAiB,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAA0B,KAAI;AAC5F,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;AAEnH,IAAA,QACEA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAA,aAAA,EAAe,UAAU,EAAE,SAAS,EAAE,EAAE,CAAC,oDAAoD,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAC1H,KAAK,CAAC,QAAQ,EAAA,CACX,EAAA,CACS;AAErB,CAAC;AAOD,MAAM,kBAAkB,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAA2B,KAAI;AAC9F,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAChC,MAAM,WAAW,GAAG,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;IAEpF,QACEA,gBAAS,KAAK,EAAA,aAAA,EAAe,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,sDAAsD,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAC7H,KAAK,CAAC,QAAQ,EAAA,CACX;AAEV,CAAC;AAOD,MAAM,oBAAoB,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAA6B,KAAI;AAClG,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAChC,MAAM,aAAa,GAAG,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;IAExF,QACEA,gBAAS,KAAK,EAAA,aAAA,EAAe,aAAa,EAAE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EACrF,KAAK,CAAC,QAAQ,EAAA,CACX;AAEV,CAAC;AAOD,MAAM,oBAAoB,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAA6B,KAAI;AAClG,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAChC,MAAM,aAAa,GAAG,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;IAExF,QACEA,eAAQ,KAAK,EAAA,aAAA,EAAe,aAAa,EAAE,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAC5G,KAAK,CAAC,QAAQ,EAAA,CACZ;AAET,CAAC;AAOD,MAAM,uBAAuB,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAgC,KAAI;AACxG,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAChC,MAAM,gBAAgB,GAAG,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,SAAS,CAAC;IAE9F,QACEA,cAAO,KAAK,EAAA,aAAA,EAAe,gBAAgB,EAAE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EACjG,KAAK,CAAC,QAAQ,EAAA,CACb;AAER,CAAC;AAED;;;;;AAKG;AACI,MAAM,aAAa,GAAG;AAC3B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE,kBAAkB;AACzB,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,UAAU,EAAE,uBAAuB;;;;;"}

package/dist/components/molecules/Tags/index.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var uiIcons = require('@flipdish/ui-icons');
 var Dot = require('@flipdish/ui-library/components/atoms/Dot');
 var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var tagCheckbox = require('./components/tag-checkbox.cjs');
@@ -23,8 +24,9 @@ const TagGroupContext = React.createContext({
  *
  * @summary Group interactive or display-only tags for filtering, selection, and categorisation.
  */
-const TagGroup = ({ label, selectionMode = 'none', size = 'sm', children, ...otherProps }) => {
-    return (jsxRuntime.jsx(TagGroupContext.Provider, { value: { selectionMode, size }, children: jsxRuntime.jsx(reactAriaComponents.TagGroup, { "aria-label": label, selectionMode: selectionMode, disallowEmptySelection: selectionMode === 'single', ...otherProps, children: children }) }));
+const TagGroup = ({ label, selectionMode = 'none', size = 'sm', children, 'data-testid': dataTestId, ...otherProps }) => {
+    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'tag-group', rootName: 'tag-group' });
+    return (jsxRuntime.jsx(TagGroupContext.Provider, { value: { selectionMode, size }, children: jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(reactAriaComponents.TagGroup, { "aria-label": label, selectionMode: selectionMode, disallowEmptySelection: selectionMode === 'single', ...otherProps, "data-testid": rootTestId, children: children }) }) }));
 };
 const TagList = reactAriaComponents.TagList;
 const styles = {
@@ -65,10 +67,14 @@ const styles = {
         count: 'px-1.5 text-sm font-medium',
     },
 };
-const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotClassName, isDisabled, count, className, children, onClose, }) => {
+const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotClassName, isDisabled, count, className, children, onClose, 'data-testid': dataTestId, }) => {
     const context = React.useContext(TagGroupContext);
+    const prefix = testIdUtils.useTestIdPrefix();
+    const idPart = id !== undefined ? testIdUtils.slugifyTestId(String(id)) : 'tag';
+    const tagTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, `tag-${idPart}`) : undefined);
+    const closeTestId = tagTestId ? `${tagTestId}-close` : undefined;
     const leadingContent = avatarSrc ? (jsxRuntime.jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder })) : dot ? (jsxRuntime.jsx(Dot.Dot, { className: cx.cx('text-fg-success-secondary', dotClassName), size: "sm" })) : null;
-    return (jsxRuntime.jsx(reactAriaComponents.Tag, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, className: (state) => cx.cx('flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2', styles[context.size].root.base, 
+    return (jsxRuntime.jsx(reactAriaComponents.Tag, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, "data-testid": tagTestId, className: (state) => cx.cx('flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2', styles[context.size].root.base, 
         // With avatar
         avatarSrc && styles[context.size].root.withAvatar, 
         // With X button
@@ -80,7 +86,7 @@ const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotClassName, is
         // With checkbox
         context.selectionMode !== 'none' && styles[context.size].root.withCheckbox, 
         // Disabled
-        isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: cx.cx('flex items-center gap-1', styles[context.size].content), children: [context.selectionMode !== 'none' && jsxRuntime.jsx(tagCheckbox.TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && (jsxRuntime.jsx("span", { className: cx.cx('flex items-center justify-center rounded-[3px] bg-tertiary text-center', styles[context.size].count), children: count }))] }), (onClose || allowsRemoving) && (jsxRuntime.jsx(tagCloseX.TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()) }))] })) }));
+        isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: cx.cx('flex items-center gap-1', styles[context.size].content), children: [context.selectionMode !== 'none' && jsxRuntime.jsx(tagCheckbox.TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && (jsxRuntime.jsx("span", { className: cx.cx('flex items-center justify-center rounded-[3px] bg-tertiary text-center', styles[context.size].count), children: count }))] }), (onClose || allowsRemoving) && (jsxRuntime.jsx(tagCloseX.TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()), "data-testid": closeTestId }))] })) }));
 };
 
 exports.Tag = Tag;