@beydesign/storybook 0.4.11 → 0.5.0

package/dist/App.js

@@ -148,7 +148,7 @@ function App() {
                     gap: '16px',
                 }, children: avatars
                     .slice(0, 4)
-                    .map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "agent" }, `agent-${avatar.id}`)) : (_jsx(EntityCard, { view: "agent", name: `${avatar.name} Customer Support`, image: avatar.image, showStatusBadge: true, statusBadgeText: "Active", onPreview: () => console.log('Join', avatar.name), previewButtonText: "Join", previewIcon: "VideoCamera", showMenu: true, menuItems: agentMenuItems }, `agent-${avatar.id}`))) }), _jsx("h2", { style: {
+                    .map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "agent" }, `agent-${avatar.id}`)) : (_jsx(EntityCard, { view: "agent", name: `${avatar.name} Customer Support`, image: avatar.image, stockAgent: true, onPreview: () => console.log('Join', avatar.name), previewButtonText: "Join", previewIcon: "VideoCamera", showMenu: true, menuItems: agentMenuItems }, `agent-${avatar.id}`))) }), _jsx("h2", { style: {
                     fontFamily: 'Figtree, sans-serif',
                     color: 'var(--color-text-text-title)',
                     margin: '40px 0 4px',

package/dist/stories/Buttons/MainButton.js

@@ -248,7 +248,7 @@ const StyledButton = styled.button `
       var(--global-shadows-shadow-xs-color);
   }
 `;
-export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, iconWeight = 'regular', displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', trailingIconSlot, testId, }) => {
+export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, iconWeight = 'regular', displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', trailingIconSlot, id, className, testId, }) => {
     // Figma draws a 20px icon at every button size.
     const iconSize = 20;
     // Vertical padding comes from TEXT_BUTTON_HEIGHT; only the horizontal value
@@ -332,5 +332,5 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                     (trailingIconSlot ??
                         (trailingIcon && getIconComponent(trailingIcon, iconProps)))] }));
     };
-    return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, "data-testid": testId, children: renderContent() }));
+    return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, id: id, className: className, "data-testid": testId, children: renderContent() }));
 };

package/dist/stories/Buttons/types.d.ts

@@ -112,6 +112,10 @@ export interface MainButtonProps {
      * keeping the button's icon slot and spacing intact.
      */
     trailingIconSlot?: React.ReactNode;
+    /** DOM id set on the rendered `<button>` — used by analytics click triggers */
+    id?: string;
+    /** Extra class names merged onto the rendered `<button>` */
+    className?: string;
     /** Test Id */
     testId?: string;
 }

package/dist/stories/EntityCard/EntityCard.js

@@ -19,6 +19,24 @@ const ASPECT_RATIO_BY_VIEW = {
     agent: '264 / 268',
     video: '16 / 9',
 };
+/** Empty-state label per view variant, shown over the silhouette when there is no image. */
+const EMPTY_TEXT_BY_VIEW = {
+    avatar: 'Avatar is not available',
+    agent: 'Agent is not available',
+    video: 'Video is not available',
+};
+/**
+ * Height of the empty-state silhouette (avatar/agent views). The empty-state
+ * label sits on the silhouette's vertical midpoint, i.e. half of this up from
+ * the bottom of the media area.
+ */
+const SILHOUETTE_HEIGHT = 224;
+/** Copy for the stock-agent badge — the card's only badge. */
+const STOCK_AGENT_BADGE_TEXT = 'Stock Agent';
+/** Label shown beneath the spinner while the entity is processing. */
+const PROCESSING_TEXT = 'Processing...';
+/** Accessible label for the error state, on the warning icon. */
+const ERROR_TEXT = 'Something went wrong';
 /** Hook the root's hover/focus rules use to reveal the action buttons. */
 const ACTIONS_CLASS = 'EntityCard-actions';
 const spin = keyframes `
@@ -27,11 +45,12 @@ const spin = keyframes `
 `;
 /** A continuously rotating refresh icon, matching the AgentCard processing spinner. */
 const Spinner = () => (_jsx(Box, { display: 'flex', sx: { animation: `${spin} 1.5s linear infinite` }, children: _jsx(ArrowsClockwise, { size: 24, color: 'var(--color-text-text-white)' }) }));
-export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, date, aspectRatio, processing = false, processingText = 'Please wait', error = false, errorText = 'Something went wrong', onPreview, previewButtonText, previewIcon = 'Play', showStatusBadge = false, statusBadgeText = '', statusBadgeColor = BadgeColor.Green, menuItems = [], showMenu = false, width, testId, }) => {
+export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, date, aspectRatio, processing = false, error = false, onPreview, previewButtonText, previewIcon = 'Play', previewButtonClassName, stockAgent = false, menuItems = [], showMenu = false, width, testId, }) => {
     const [hovered, setHovered] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
     const [imageError, setImageError] = useState(false);
     const isVideo = view === 'video';
+    const isAgent = view === 'agent';
     const cardWidth = width ?? WIDTH_BY_VIEW[view];
     const imageAspectRatio = aspectRatio ?? ASPECT_RATIO_BY_VIEW[view];
     const entityKey = name?.toLowerCase()?.replace(/\s+/g, '-');
@@ -40,8 +59,9 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
     const canPreview = !!onPreview && !isProcessing && !error;
     const showActions = canPreview || hasMenu;
     const active = hovered || menuOpen;
-    const showBadge = showStatusBadge && !!statusBadgeText && !error;
+    const showBadge = isAgent && stockAgent && !error;
     const showImage = !!image && !imageError && !error;
+    const emptyText = EMPTY_TEXT_BY_VIEW[view];
     const resolvedTestId = testId ?? `${entityKey}-${isVideo ? 'video' : 'entity'}-card`;
     const handlePreviewButtonClick = (event) => {
         event.stopPropagation();
@@ -63,21 +83,24 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
                 opacity: 1,
                 pointerEvents: 'auto',
             },
-        }, "data-testid": resolvedTestId, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [error ? (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-badge-accent-red)', display: 'flex', justifyContent: 'center', alignItems: 'center', role: 'img', "aria-label": errorText, title: errorText, children: _jsx(Warning, { size: 50, color: 'var(--color-foreground-fg-error)' }) })) : showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { position: 'relative', width: '100%', height: '100%', overflow: 'hidden', bgcolor: view === 'agent'
+        }, "data-testid": resolvedTestId, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [error ? (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-badge-accent-red)', display: 'flex', justifyContent: 'center', alignItems: 'center', role: 'img', "aria-label": ERROR_TEXT, title: ERROR_TEXT, children: _jsx(Warning, { size: 50, color: 'var(--color-foreground-fg-error)' }) })) : showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsxs(Box, { position: 'relative', width: '100%', height: '100%', overflow: 'hidden', bgcolor: view === 'agent'
                             ? 'var(--color-background-bg-component-disabled)'
-                            : 'var(--color-background-bg-button-disabled)', children: _jsx(Box, { position: 'absolute', bottom: 0, left: '50%', sx: {
-                                transform: 'translateX(-50%)',
-                                color: 'var(--color-border-border-subtle)',
-                                aspectRatio: '206 / 224',
-                                ...(isVideo
-                                    ? { height: '100%', maxWidth: '100%' }
-                                    : { width: '206px', height: '224px' }),
-                            }, children: _jsx(AvatarSilhouette, {}) }) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
+                            : 'var(--color-background-bg-button-disabled)', children: [_jsx(Box, { position: 'absolute', bottom: 0, left: '50%', sx: {
+                                    transform: 'translateX(-50%)',
+                                    color: 'var(--color-border-border-subtle)',
+                                    aspectRatio: '206 / 224',
+                                    ...(isVideo
+                                        ? { height: '100%', maxWidth: '100%' }
+                                        : { width: '206px', height: `${SILHOUETTE_HEIGHT}px` }),
+                                }, children: _jsx(AvatarSilhouette, {}) }), !!emptyText && (_jsx(Box, { position: 'absolute', left: 0, right: 0, bottom: isVideo ? '50%' : `${SILHOUETTE_HEIGHT / 2}px`, display: 'flex', justifyContent: 'center', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', boxSizing: 'border-box', children: _jsx(Typography, { text: emptyText, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-subtle)', textStyle: {
+                                        textAlign: 'center',
+                                        wordBreak: 'break-word',
+                                    } }) }))] })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
                             backgroundImage: 'linear-gradient(180deg, rgba(21, 0, 73, 0) 0%, rgba(72, 29, 180, 0.152) 16.76%, rgba(32, 13, 82, 0.36) 100%)',
                             opacity: active && !isProcessing && !error ? 1 : 0,
                             transition: 'opacity 0.15s ease-in-out',
                             pointerEvents: 'none',
-                        } }), isProcessing && (_jsxs(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-overlay-2)', sx: { zIndex: 1 }, children: [_jsx(Spinner, {}), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: processingText })] })), showBadge && (_jsx(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', left: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: _jsx(Badge, { text: statusBadgeText, color: statusBadgeColor, size: BadgeSize.md, showIcon: true, icon: 'Circle', iconWeight: 'fill', iconSize: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)' }) })), showActions && (_jsxs(Box, { className: ACTIONS_CLASS, position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', right: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: {
+                        } }), isProcessing && (_jsxs(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-overlay-2)', sx: { zIndex: 1 }, children: [_jsx(Spinner, {}), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: PROCESSING_TEXT })] })), showBadge && (_jsx(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', left: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: _jsx(Badge, { text: STOCK_AGENT_BADGE_TEXT, color: BadgeColor.Violet, size: BadgeSize.md, testId: `${entityKey}-stock-agent-badge` }) })), showActions && (_jsxs(Box, { className: ACTIONS_CLASS, position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', right: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: {
                             zIndex: 4,
                             transition: 'opacity 0.15s ease-in-out',
                             ...(menuOpen
@@ -89,7 +112,7 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
                                     },
                                 }),
                         }, children: [canPreview &&
-                                (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.xxs, onClick: handlePreviewButtonClick, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.xxs, onClick: handlePreviewButtonClick, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Box, { onClick: (event) => event.stopPropagation(), children: _jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.xxs, onOpenChange: setMenuOpen }) }))] })), isVideo ? (_jsxs(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-lg)', sx: {
+                                (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.xxs, onClick: handlePreviewButtonClick, className: previewButtonClassName, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.xxs, onClick: handlePreviewButtonClick, className: previewButtonClassName, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Box, { onClick: (event) => event.stopPropagation(), children: _jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.xxs, onOpenChange: setMenuOpen }) }))] })), isVideo ? (_jsxs(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-lg)', sx: {
                             zIndex: 2,
                             pointerEvents: 'none',
                             backgroundImage: 'linear-gradient(rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)',

package/dist/stories/EntityCard/EntityCard.stories.js

@@ -1,5 +1,4 @@
 import { EntityCard } from './EntityCard';
-import { BadgeColor } from '../UI';
 const meta = {
     title: 'Design System/Components/EntityCard/EntityCard',
     component: EntityCard,
@@ -59,27 +58,11 @@ const meta = {
             description: 'Show the processing overlay (spinner + label)',
             table: { type: { summary: 'boolean' } },
         },
-        processingText: {
-            control: 'text',
-            description: 'Processing overlay label',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'Please wait' },
-            },
-        },
         error: {
             control: 'boolean',
             description: 'Show the error state (tinted media area + warning icon)',
             table: { type: { summary: 'boolean' } },
         },
-        errorText: {
-            control: 'text',
-            description: "Accessible label for the error state (the warning icon's aria-label/title)",
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'Something went wrong' },
-            },
-        },
         showMenu: {
             control: 'boolean',
             description: 'Whether to show the menu on hover',
@@ -102,23 +85,12 @@ const meta = {
                 defaultValue: { summary: 'Play' },
             },
         },
-        showStatusBadge: {
+        stockAgent: {
             control: 'boolean',
-            description: 'Whether to show the status badge (top-left)',
-            table: { type: { summary: 'boolean' } },
-        },
-        statusBadgeText: {
-            control: 'text',
-            description: 'Status badge text (e.g. "Active")',
-            table: { type: { summary: 'string' } },
-        },
-        statusBadgeColor: {
-            control: 'select',
-            options: Object.values(BadgeColor),
-            description: 'Status badge color',
+            description: 'Marks the entity as a stock agent — renders the "Stock Agent" badge (top-left). `agent` view only',
             table: {
-                type: { summary: 'BadgeColor' },
-                defaultValue: { summary: BadgeColor.Green },
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
             },
         },
         menuItems: {
@@ -158,8 +130,7 @@ export const AgentView = {
         onPreview: () => { },
         previewButtonText: 'Join',
         previewIcon: 'VideoCamera',
-        showStatusBadge: true,
-        statusBadgeText: 'Active',
+        stockAgent: true,
         showMenu: true,
         menuItems: [
             { label: 'Conversation Link', icon: 'ShareNetwork', onClick: () => { } },
@@ -177,7 +148,7 @@ export const AgentView = {
         },
         docs: {
             description: {
-                story: 'The agent view — wider, square image, a persistent status badge, and a labelled "Join" action. Hover to reveal the action row.',
+                story: 'The agent view — wider, square image, the "Stock Agent" badge, and a labelled "Join" action. Hover to reveal the action row.',
             },
         },
     },
@@ -213,13 +184,13 @@ export const NoActions = {
 export const NoImage = {
     args: {
         ...Default.args,
-        name: 'No Image',
+        name: 'Nelly Customer Support',
         image: undefined,
     },
     parameters: {
         docs: {
             description: {
-                story: 'Fallback placeholder shown when no image is provided or it fails to load.',
+                story: 'Fallback placeholder shown when no image is provided or it fails to load — the avatar silhouette plus an "Avatar is not available" label sitting on the silhouette\'s midpoint. The `video` view reads "Video is not available".',
             },
         },
     },

package/dist/stories/EntityCard/types.d.ts

@@ -1,9 +1,9 @@
-import { MenuItemProps, BadgeColor } from '../UI';
+import { MenuItemProps } from '../UI';
 import { IconName } from '../../utils';
 /**
  * Entity card view variants.
  * - `avatar`: portrait avatar tile (icon-only preview action)
- * - `agent`: wider, square agent tile (labelled action + status badge)
+ * - `agent`: wider, square agent tile (labelled action + stock-agent badge)
  * - `video`: landscape media tile (name + date footer, optional processing overlay)
  */
 export type EntityCardView = 'avatar' | 'agent' | 'video';
@@ -27,24 +27,18 @@ export interface EntityCardProps {
     aspectRatio?: string;
     /** Show the processing overlay (spinner + label) over the image */
     processing?: boolean;
-    /** Processing overlay label. Defaults to "Please wait" */
-    processingText?: string;
     /** Show the error state (tinted media area + warning icon) in place of the image */
     error?: boolean;
-    /** Accessible label for the error state — exposed as the warning icon's aria-label/title. Defaults to "Something went wrong" */
-    errorText?: string;
     /** Preview handler — renders the action button on hover */
     onPreview?: () => void;
     /** Label for the action button; when set it renders text + icon, otherwise icon-only */
     previewButtonText?: string;
     /** Icon for the action button (defaults to `Play`) */
     previewIcon?: IconName;
-    /** Whether to show the status badge (top-left) */
-    showStatusBadge?: boolean;
-    /** Status badge text (e.g. "Active") */
-    statusBadgeText?: string;
-    /** Status badge color (defaults to Green) */
-    statusBadgeColor?: BadgeColor;
+    /** Extra class names merged onto the action button — used by analytics click triggers */
+    previewButtonClassName?: string;
+    /** Marks the entity as a stock agent — renders the "Stock Agent" badge (top-left). `agent` view only */
+    stockAgent?: boolean;
     /** Menu items for the dropdown — renders the menu button on hover */
     menuItems?: MenuItemProps[];
     /** Whether to show the menu */

package/dist/stories/UI/ButtonCard.js

@@ -8,13 +8,13 @@ import { getIconComponent } from '../../utils';
  * a short description and an optional corner action button. Matches the Figma
  * "Button card" component with its default and hover states.
  */
-export const ButtonCard = ({ title, description, icon = 'UserFocus', iconColor = 'var(--color-foreground-fg-accent-yellow)', iconBackgroundColor = 'var(--color-background-bg-badge-accent-yellow)', onClick, showActionButton = false, actionButtonText = 'Contact Us', onActionClick, disabled = false, width = '294px', style, testId, }) => {
+export const ButtonCard = ({ title, description, icon = 'UserFocus', iconColor = 'var(--color-foreground-fg-accent-yellow)', iconBackgroundColor = 'var(--color-background-bg-badge-accent-yellow)', onClick, showActionButton = false, actionButtonText = 'Contact Us', onActionClick, disabled = false, width = '294px', style, id, testId, }) => {
     const cardKey = title?.toLowerCase()?.replace(/\s+/g, '-');
     const isInteractive = !disabled && !!onClick;
     return (_jsxs(Box, { width: width, display: 'flex', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingTop: {
             xs: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)',
             sm: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
-        }, paddingBottom: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-component)', boxSizing: 'border-box', position: 'relative', onClick: isInteractive ? onClick : undefined, style: style, "data-testid": testId ?? `${cardKey}-button-card`, sx: {
+        }, paddingBottom: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-component)', boxSizing: 'border-box', position: 'relative', onClick: isInteractive ? onClick : undefined, style: style, id: id, "data-testid": testId ?? `${cardKey}-button-card`, sx: {
             opacity: disabled ? 0.5 : 1,
             cursor: isInteractive ? 'pointer' : 'default',
             pointerEvents: disabled ? 'none' : 'auto',

package/dist/stories/UI/types.d.ts

@@ -598,6 +598,8 @@ export interface ButtonCardProps {
     width?: string | number;
     /** Custom style */
     style?: CSSProperties;
+    /** DOM id set on the card root — used by analytics click triggers */
+    id?: string;
     /** Test id */
     testId?: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.4.11",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",