@beydesign/storybook 0.2.15 → 0.2.17

package/dist/stories/Buttons/MainButton.js

@@ -90,7 +90,7 @@ const StyledButton = styled.button `
         case ButtonHierarchy.TertiaryColor:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-text-text-disabled)';
-            return 'var(--color-text-text-accent)';
+            return 'var(--color-text-text-clicable)';
         case ButtonHierarchy.WhiteText:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-text-text-inactive)';

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonCardProps } from './types';
+/**
+ * ButtonCard — a compact, clickable card with a leading accent icon, a title,
+ * a short description and an optional corner action button. Matches the Figma
+ * "Button card" component with its default and hover states.
+ */
+export declare const ButtonCard: React.FC<ButtonCardProps>;

package/dist/stories/UI/ButtonCard.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
+import { getIconComponent } from '../../utils';
+/**
+ * ButtonCard — a compact, clickable card with a leading accent icon, a title,
+ * 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, }) => {
+    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)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', 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: {
+            opacity: disabled ? 0.5 : 1,
+            cursor: isInteractive ? 'pointer' : 'default',
+            pointerEvents: disabled ? 'none' : 'auto',
+            boxShadow: '0px 2px 4px 0px var(--global-shadows-shadow-xs-color)',
+            transition: 'background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+            ...(isInteractive && {
+                '&:hover': {
+                    backgroundColor: 'var(--color-background-bg-component-hover)',
+                    boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`,
+                },
+            }),
+        }, children: [_jsxs(Box, { display: 'flex', flex: '1 0 0', minWidth: 0, alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, width: '34px', height: '34px', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: iconBackgroundColor, 
+                        // Without border-box the 34px tile grows to 50px (34 + 8px padding
+                        // each side); Figma sizes the tile at a fixed 34×34. The 24px icon
+                        // must not shrink to fit the 18px content box — like Figma it stays
+                        // 24px and overflows the nominal padding, centered in the tile.
+                        boxSizing: 'border-box', sx: { '& svg': { flexShrink: 0 } }, children: getIconComponent(icon, { size: 24, color: iconColor }) }), _jsxs(Box, { display: 'flex', flex: '1 0 0', minWidth: 0, flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', alignItems: 'flex-start', sx: { wordBreak: 'break-word' }, children: [_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: title }), description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description }))] })] }), showActionButton && (_jsx(Box, { position: 'absolute', top: '6px', right: '8px', children: _jsx(MainButton, { text: actionButtonText, hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.xxs, onClick: (e) => {
+                        e.stopPropagation();
+                        onActionClick?.();
+                    }, testId: `${cardKey}-action-button` }) }))] }));
+};

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ButtonCard } from './ButtonCard';
+declare const meta: Meta<typeof ButtonCard>;
+export default meta;
+type Story = StoryObj<typeof ButtonCard>;
+export declare const Default: Story;
+/**
+ * The four cards from the Home "Preview" section, matching the Figma design —
+ * each with its own accent color, and "Contact Us" shown on the middle two.
+ */
+export declare const PreviewSection: Story;
+export declare const WithActionButton: Story;
+export declare const SeparatelyClickable: Story;
+export declare const Disabled: Story;

package/dist/stories/UI/ButtonCard.stories.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonCard } from './ButtonCard';
+const meta = {
+    title: 'Design System/Components/UI/ButtonCard',
+    component: ButtonCard,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=5640-2170',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: { control: 'text', description: 'Card title' },
+        description: { control: 'text', description: 'Supporting description' },
+        icon: { control: 'text', description: 'Leading Phosphor icon name' },
+        iconColor: { control: 'text', description: 'Icon color' },
+        iconBackgroundColor: {
+            control: 'text',
+            description: 'Background color of the icon tile',
+        },
+        showActionButton: {
+            control: 'boolean',
+            description: 'Show the corner action button',
+        },
+        actionButtonText: {
+            control: 'text',
+            table: { defaultValue: { summary: 'Contact Us' } },
+        },
+        disabled: { control: 'boolean' },
+        width: { control: 'text', table: { defaultValue: { summary: '294px' } } },
+        onClick: { action: 'card clicked' },
+        onActionClick: { action: 'action clicked' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Create Personal Avatar',
+        description: 'Create your Digital Twin.',
+        icon: 'UserFocus',
+    },
+};
+/**
+ * The four cards from the Home "Preview" section, matching the Figma design —
+ * each with its own accent color, and "Contact Us" shown on the middle two.
+ */
+export const PreviewSection = {
+    parameters: {
+        layout: 'padded',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7018-9469',
+        },
+    },
+    render: () => (_jsxs("div", { style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+            alignItems: 'stretch',
+        }, children: [_jsx(ButtonCard, { title: "Create Agent", description: "Build and customize your digital agent.", icon: "Headset", iconColor: "var(--color-foreground-fg-accent-lemon)", iconBackgroundColor: "var(--color-background-bg-badge-accent-brand-lemon)", onClick: () => { } }), _jsx(ButtonCard, { title: "Create Personal Avatar", description: "Request your Digital Twin.", icon: "UserFocus", iconColor: "var(--color-foreground-fg-accent-pink)", iconBackgroundColor: "var(--color-background-bg-badge-accent-pink)", showActionButton: true, actionButtonText: "Contact Us", onClick: () => { }, onActionClick: () => { } }), _jsx(ButtonCard, { title: "Create Videos", description: "Generate videos with your avatars.", icon: "Video", iconColor: "var(--color-foreground-fg-accent-cyan)", iconBackgroundColor: "var(--color-background-bg-badge-accent-cyan)", showActionButton: true, actionButtonText: "Contact Us", onClick: () => { }, onActionClick: () => { } }), _jsx(ButtonCard, { title: "Create API Key", description: "Unlock access to our avatar technology with an API key.", icon: "Key", iconColor: "var(--color-foreground-fg-accent-success)", iconBackgroundColor: "var(--color-background-bg-badge-accent-success)", onClick: () => { } })] })),
+};
+export const WithActionButton = {
+    args: {
+        ...Default.args,
+        showActionButton: true,
+        actionButtonText: 'Contact Us',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A card with a corner action link — e.g. an upsell that links to sales.',
+            },
+        },
+    },
+};
+export const SeparatelyClickable = {
+    args: {
+        ...Default.args,
+        showActionButton: true,
+        actionButtonText: 'Contact Us',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The card body and the "Contact Us" link are independent click targets. ' +
+                    'Clicking the link fires `onActionClick` only — it stops propagation so the ' +
+                    'card-level `onClick` does not fire. Open the Actions panel and click each ' +
+                    'target to see which handler runs.',
+            },
+        },
+    },
+};
+export const Disabled = {
+    args: {
+        ...Default.args,
+        showActionButton: true,
+        disabled: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A disabled card is dimmed and blocks all pointer events, including the action link.',
+            },
+        },
+    },
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ConversationalAvatarsBannerProps } from './types';
+export declare const ConversationalAvatarsBanner: React.FC<ConversationalAvatarsBannerProps>;

package/dist/stories/UI/ConversationalAvatarsBanner.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
+import { BANNER_AVATARS, AVATAR_TILE_BACKGROUND, AVATAR_TILE_WIDTH, } from './bannerAvatars';
+const DEFAULT_BACKGROUND = 'linear-gradient(180deg, rgba(194, 171, 252, 0.08) 0%, rgba(128, 96, 198, 0.2) 100%)';
+// The avatar column stays on the right at every breakpoint (unlike FeatureBanner
+// which stacks its media), so the banner only reduces its padding/gap on mobile.
+const MOBILE = '@media (max-width: 640px)';
+// Height the card holds so the avatar collage shows the hero tile plus a sliver
+// of the tiles above/below.
+const BANNER_MIN_HEIGHT = 198;
+// Figma tile size — 130×150; the 198px card centers the middle (hero) tile and
+// clips the tiles above/below to slivers.
+const TILE_HEIGHT = 150;
+// On mobile the tighter card can't fit a full tile, so the collage bleeds this
+// many extra pixels past the right edge — the tile's right side (and rounded
+// corner) is clipped, matching the Figma mobile layout.
+const MOBILE_TILE_CUTOFF = 15;
+// Avatars shown in the collage column (reused from the PromoBanner set). The
+// middle tile is the fully-visible hero; the rest are clipped by the height.
+const IMAGE_COLUMN = [
+    BANNER_AVATARS.fjolla,
+    BANNER_AVATARS.micheal,
+    BANNER_AVATARS.yuruo,
+];
+export const ConversationalAvatarsBanner = ({ title, description, actions = [], background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
+    const renderAction = (action, index) => (_jsx(MainButton, { text: action.text, size: ButtonSize.md, hierarchy: action.primary
+            ? ButtonHierarchy.Primary
+            : ButtonHierarchy.SecondaryColor, onClick: action.onClick, testId: testId ? `${testId}-action-${index}` : undefined }, `${action.text}-${index}`));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "40px", width: "100%", minHeight: `${BANNER_MIN_HEIGHT}px`, overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: {
+            background,
+            boxSizing: 'border-box',
+            [MOBILE]: {
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+            },
+            ...customStyle,
+        }, "data-testid": testId, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [title && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: title })), description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-label)", children: description }))] }), actions.length > 0 && (_jsx(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: actions.map(renderAction) }))] }), _jsx(Box, { flexShrink: 0, alignSelf: "stretch", position: "relative", overflow: "hidden", width: `${AVATAR_TILE_WIDTH}px`, sx: {
+                    marginY: 'calc(-1 * var(--spacing-tokens-size-in-px-spacing-spacing-3xl))',
+                    [MOBILE]: {
+                        marginY: 'calc(-1 * var(--spacing-tokens-size-in-px-spacing-spacing-xl))',
+                        // Push the strip past the right edge so the tile is clipped there.
+                        marginRight: `calc(-1 * var(--spacing-tokens-size-in-px-spacing-spacing-lg) - ${MOBILE_TILE_CUTOFF}px)`,
+                    },
+                }, children: _jsx(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", position: "absolute", left: 0, right: 0, top: "50%", sx: { transform: 'translateY(-50%)' }, children: IMAGE_COLUMN.map((image, index) => (_jsx(Box, { component: "img", src: image, alt: "", width: "100%", height: `${TILE_HEIGHT}px`, flexShrink: 0, sx: {
+                            objectFit: 'cover',
+                            borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                            background: AVATAR_TILE_BACKGROUND,
+                            display: 'block',
+                        } }, index))) }) })] }));
+};

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConversationalAvatarsBanner } from './ConversationalAvatarsBanner';
+declare const meta: Meta<typeof ConversationalAvatarsBanner>;
+export default meta;
+type Story = StoryObj<typeof ConversationalAvatarsBanner>;
+export declare const Default: Story;
+export declare const Mobile: Story;

package/dist/stories/UI/ConversationalAvatarsBanner.stories.js

@@ -0,0 +1,76 @@
+import { ConversationalAvatarsBanner } from './ConversationalAvatarsBanner';
+const meta = {
+    title: 'Design System/Components/UI/ConversationalAvatarsBanner',
+    component: ConversationalAvatarsBanner,
+    parameters: {
+        layout: 'padded',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7081-24780',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the banner',
+            table: { type: { summary: 'string' } },
+        },
+        description: {
+            control: 'text',
+            description: 'Description shown below the title',
+            table: { type: { summary: 'string' } },
+        },
+        actions: {
+            control: 'object',
+            description: 'Action buttons — set primary: true for the brand (violet) button',
+            table: { type: { summary: 'BannerAction[]' } },
+        },
+        background: {
+            control: 'text',
+            description: 'Background of the banner',
+            table: { type: { summary: 'string' } },
+        },
+        style: {
+            control: 'object',
+            description: 'Custom style for the banner',
+            table: { type: { summary: 'object' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Introducing Conversational Avatars',
+        description: 'Bring your ideas to life with intelligent conversational avatars.',
+        actions: [{ text: 'Create New Agent' }],
+    },
+};
+const FIGMA_MOBILE_VIEWPORT = {
+    viewport: {
+        viewports: {
+            figmaMobile: {
+                name: 'Figma Mobile (375px)',
+                styles: { width: '375px', height: '812px' },
+            },
+        },
+        defaultViewport: 'figmaMobile',
+    },
+};
+export const Mobile = {
+    args: {
+        ...Default.args,
+    },
+    parameters: {
+        layout: 'padded',
+        ...FIGMA_MOBILE_VIEWPORT,
+        docs: {
+            description: {
+                story: 'The avatar banner on the mobile Home screen — unlike the feature ' +
+                    'banner it keeps the avatar collage as a narrow strip on the right ' +
+                    'instead of stacking. Best viewed in the Canvas with the preset ' +
+                    'mobile viewport.',
+            },
+        },
+    },
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ConversationalVoiceAgentsBannerProps } from './types';
+export declare const ConversationalVoiceAgentsBanner: React.FC<ConversationalVoiceAgentsBannerProps>;

package/dist/stories/UI/ConversationalVoiceAgentsBanner.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
+import { BANNER_VIDEO_PREVIEW } from './bannerAvatars';
+const PINK_GRADIENT = 'linear-gradient(90deg, rgba(235, 205, 240, 0.05) 0%, rgba(202, 59, 224, 0.15) 100%)';
+// Below this width the banner stacks vertically to match the Figma mobile
+// layout (text + actions on top, video preview full-width below).
+const MOBILE = '@media (max-width: 640px)';
+// The video preview keeps the Figma 296×150 tile on desktop.
+const PREVIEW_WIDTH = 296;
+const PREVIEW_HEIGHT = 150;
+export const ConversationalVoiceAgentsBanner = ({ title, description, actions = [], previewImage = BANNER_VIDEO_PREVIEW, onPlayClick, previewCtaText, onPreviewCtaClick, background = PINK_GRADIENT, style: customStyle, testId, }) => {
+    const renderAction = (action, index) => (_jsx(MainButton, { text: action.text, size: ButtonSize.md, hierarchy: action.primary
+            ? ButtonHierarchy.Primary
+            : ButtonHierarchy.SecondaryColor, onClick: action.onClick, testId: testId ? `${testId}-action-${index}` : undefined }, `${action.text}-${index}`));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "40px", width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: {
+            background,
+            boxSizing: 'border-box',
+            [MOBILE]: {
+                flexDirection: 'column',
+                alignItems: 'stretch',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
+                padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+            },
+            ...customStyle,
+        }, "data-testid": testId, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [title && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: title })), description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-label)", children: description }))] }), actions.length > 0 && (_jsx(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", sx: {
+                            // On mobile the two actions split the row into equal-width
+                            // buttons, matching the Figma mobile layout.
+                            [MOBILE]: {
+                                width: '100%',
+                                '& > *': { flex: 1, minWidth: 0 },
+                                '& button': { width: '100%' },
+                            },
+                        }, children: actions.map(renderAction) }))] }), _jsxs(Box, { position: "relative", flexShrink: 0, overflow: "hidden", width: `${PREVIEW_WIDTH}px`, height: `${PREVIEW_HEIGHT}px`, borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)", sx: {
+                    [MOBILE]: {
+                        width: '100%',
+                        height: 'auto',
+                        aspectRatio: `${PREVIEW_WIDTH} / ${PREVIEW_HEIGHT}`,
+                    },
+                }, children: [_jsx(Box, { component: "img", src: previewImage, alt: "", width: "100%", height: "100%", sx: { objectFit: 'cover', display: 'block' } }), _jsx(Box, { position: "absolute", left: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bottom: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: _jsx(MainButton, { size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, displayIconMode: ButtonDisplayMode.Only, displayIcon: "Play", onClick: onPlayClick, style: { border: 'none' }, testId: testId ? `${testId}-play` : undefined }) }), previewCtaText && (_jsx(Box, { position: "absolute", right: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bottom: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: _jsx(MainButton, { text: previewCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, onClick: onPreviewCtaClick, style: { border: 'none' }, testId: testId ? `${testId}-preview-cta` : undefined }) }))] })] }));
+};

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConversationalVoiceAgentsBanner } from './ConversationalVoiceAgentsBanner';
+declare const meta: Meta<typeof ConversationalVoiceAgentsBanner>;
+export default meta;
+type Story = StoryObj<typeof ConversationalVoiceAgentsBanner>;
+export declare const Default: Story;
+export declare const Mobile: Story;

package/dist/stories/UI/ConversationalVoiceAgentsBanner.stories.js

@@ -0,0 +1,104 @@
+import { ConversationalVoiceAgentsBanner } from './ConversationalVoiceAgentsBanner';
+const meta = {
+    title: 'Design System/Components/UI/ConversationalVoiceAgentsBanner',
+    component: ConversationalVoiceAgentsBanner,
+    parameters: {
+        layout: 'padded',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6938-20061',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the banner',
+            table: { type: { summary: 'string' } },
+        },
+        description: {
+            control: 'text',
+            description: 'Description shown below the title',
+            table: { type: { summary: 'string' } },
+        },
+        actions: {
+            control: 'object',
+            description: 'Action buttons — set primary: true for the brand (violet) button',
+            table: { type: { summary: 'BannerAction[]' } },
+        },
+        previewImage: {
+            control: 'text',
+            description: 'Thumbnail/poster image URL for the video preview',
+            table: { type: { summary: 'string' } },
+        },
+        onPlayClick: {
+            action: 'play clicked',
+            description: 'Called when the play button on the video preview is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        previewCtaText: {
+            control: 'text',
+            description: 'CTA text overlaid on the video preview',
+            table: { type: { summary: 'string' } },
+        },
+        onPreviewCtaClick: {
+            action: 'preview cta clicked',
+            description: 'Called when the preview CTA is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        background: {
+            control: 'text',
+            description: 'Background of the banner',
+            table: { type: { summary: 'string' } },
+        },
+        style: {
+            control: 'object',
+            description: 'Custom style for the banner',
+            table: { type: { summary: 'object' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Add a Human Face to your Conversational Voice Agents',
+        description: 'Bring your ideas to life with intelligent conversational avatars.',
+        actions: [
+            { text: 'Create API Key' },
+            { text: 'Go to Docs', primary: true },
+        ],
+        previewCtaText: 'How to Get Started',
+    },
+};
+const FIGMA_MOBILE_VIEWPORT = {
+    viewport: {
+        viewports: {
+            figmaMobile: {
+                name: 'Figma Mobile (375px)',
+                styles: { width: '375px', height: '812px' },
+            },
+        },
+        defaultViewport: 'figmaMobile',
+    },
+};
+export const Mobile = {
+    args: {
+        ...Default.args,
+    },
+    parameters: {
+        layout: 'padded',
+        ...FIGMA_MOBILE_VIEWPORT,
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7081-24780',
+        },
+        docs: {
+            description: {
+                story: 'The conversational agents banner on the mobile Home screen — text ' +
+                    'and actions stack on top, the video preview spans full-width below. ' +
+                    'Below 640px the component reflows automatically; best viewed in the ' +
+                    'Canvas with the preset mobile viewport.',
+            },
+        },
+    },
+};

package/dist/stories/UI/PromoBanner.js

@@ -1,34 +1,90 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
+import { Box, useMediaQuery } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
+import { BANNER_AVATARS as AVATARS, AVATAR_TILE_BACKGROUND, } from './bannerAvatars';
 const DEFAULT_BACKGROUND = 'linear-gradient(180deg, rgba(194, 171, 252, 0.08) 0%, rgba(128, 96, 198, 0.2) 100%)';
+// Below this width the banner switches to the Figma mobile variant: text
+// centered, features/footer hidden, promo code + CTA stacked, and the mobile*
+// content overrides applied.
+const MOBILE_QUERY = '(max-width: 640px)';
+const MOBILE = `@media ${MOBILE_QUERY}`;
+// The side collages only fit alongside the 458px content column at the Figma
+// frame width (~1122px). Below that they would crush the content and overflow
+// the buttons, so hide them and let the content center on its own.
+const HIDE_COLLAGE = '@media (max-width: 1121px)';
+// Width of the Figma text/content column. Capping the middle content keeps the
+// side collages adjacent to the text on wide (e.g. Full HD) viewports instead
+// of stretching apart; the row stays centered so extra space becomes gutters.
+const CONTENT_MAX_WIDTH = '458px';
+// The middle tile of each column is the fully-visible "hero"; the first and
+// last tiles are clipped to slivers above/below by the banner height. Columns
+// are centered in the banner, then `offset` shifts them vertically (negative =
+// up) so the two columns of each side interlock, matching the Figma layout.
+const LEFT_COLUMNS = [
+    { offset: 0, images: [AVATARS.jerome, AVATARS.micheal, AVATARS.jerome] },
+    { offset: -40, images: [AVATARS.laura, AVATARS.nelly, AVATARS.fjolla] },
+];
+const RIGHT_COLUMNS = [
+    { offset: 0, images: [AVATARS.jerome, AVATARS.fjolla, AVATARS.yuruo] },
+    { offset: -20, images: [AVATARS.micheal, AVATARS.laura, AVATARS.nelly] },
+];
 export const PromoBanner = ({ title = 'Real-time AI avatars for every conversation.', description = 'Trusted by developers, startups, educators, and enterprises to build engaging AI experiences at scale:', features = [
     'Real-Time',
     'Multilingual',
     'API-first',
     'Enterprise-ready',
     'GDPR Compliant',
-], promoCode, promoCodeLabel = 'YOUR PROMO CODE', onCopyPromoCode, ctaText, onCtaClick, footerText, leftImage, rightImage, showImages = true, background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
+], promoCode, promoCodeLabel = 'YOUR PROMO CODE', onCopyPromoCode, ctaText, onCtaClick, footerText, mobileTitle, mobileDescription, mobileCtaText, showImages = true, background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
+    // Below 640px the banner renders the Figma mobile variant, swapping to any
+    // provided mobile* copy and falling back to the desktop content otherwise.
+    const isMobile = useMediaQuery(MOBILE_QUERY);
+    const resolvedTitle = isMobile && mobileTitle ? mobileTitle : title;
+    const resolvedDescription = isMobile && mobileDescription ? mobileDescription : description;
+    const resolvedCtaText = isMobile && mobileCtaText ? mobileCtaText : ctaText;
     const handleCopyPromoCode = () => {
         if (!promoCode)
             return;
         navigator.clipboard?.writeText(promoCode);
         onCopyPromoCode?.(promoCode);
     };
-    const featuresText = features?.length
+    // Features are part of the desktop-only layout (hidden on the mobile variant).
+    const featuresText = !isMobile && features?.length
         ? features.map((feature) => `✓ ${feature}`).join(', ') + '.'
         : '';
-    const renderSideImage = (image) => {
-        if (!showImages || !image)
+    const renderAvatarMatrix = (columns) => {
+        if (!showImages)
             return null;
-        return (_jsx(Box, { component: "img", src: image, alt: "", height: "100%", flexShrink: 0, sx: { objectFit: 'contain' } }));
+        return (_jsx(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", height: "100%", flexShrink: 0, overflow: "hidden", sx: { [HIDE_COLLAGE]: { display: 'none' } }, children: columns.map((column, columnIndex) => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", flexShrink: 0, sx: { transform: `translateY(${column.offset}px)` }, children: column.images.map((image, imageIndex) => (_jsx(Box, { component: "img", src: image, alt: "", width: "130px", height: "150px", flexShrink: 0, sx: {
+                        objectFit: 'cover',
+                        borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                        background: AVATAR_TILE_BACKGROUND,
+                    } }, imageIndex))) }, columnIndex))) }));
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "40px", height: "220px", width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", paddingX: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: { background, boxSizing: 'border-box', ...customStyle }, "data-testid": testId, children: [renderSideImage(leftImage), _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", flex: 1, minWidth: 0, paddingY: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl)", children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: "100%", children: [title && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", textStyle: { textAlign: 'center' }, children: title })), (description || featuresText) && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", children: description })), featuresText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: featuresText }))] }))] }), (promoCode || ctaText) && (_jsxs(Box, { display: "flex", justifyContent: "center", alignItems: "stretch", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryColor, showTrailingIcon: true, trailingIcon: "Copy", onClick: handleCopyPromoCode, style: {
-                                            border: '1px dashed var(--color-border-border-component)',
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "40px", height: "220px", width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", paddingX: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: {
+            background,
+            boxSizing: 'border-box',
+            [MOBILE]: {
+                height: 'auto',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
+                paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+            },
+            ...customStyle,
+        }, "data-testid": testId, children: [renderAvatarMatrix(LEFT_COLUMNS), _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", flex: 1, minWidth: 0, maxWidth: CONTENT_MAX_WIDTH, paddingY: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl)", children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: "100%", 
+                        // Text is centered on the mobile variant (inherited by the children).
+                        sx: { [MOBILE]: { textAlign: 'center' } }, children: [resolvedTitle && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", textStyle: { textAlign: 'center' }, children: resolvedTitle })), (resolvedDescription || featuresText) && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [resolvedDescription && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", children: resolvedDescription })), featuresText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: featuresText }))] }))] }), (promoCode || resolvedCtaText) && (_jsxs(Box, { display: "flex", justifyContent: "center", alignItems: "stretch", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", sx: {
+                            // On mobile the promo code + CTA stack and share the wider CTA's
+                            // width (centered), matching Figma — not stretched full-width.
+                            [MOBILE]: {
+                                flexDirection: 'column',
+                                width: 'fit-content',
+                                '& button': { width: '100%' },
+                            },
+                        }, children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryColor, showTrailingIcon: true, trailingIcon: "Copy", onClick: handleCopyPromoCode, style: {
+                                            border: '1px dashed var(--color-border-border-secondary-action)',
                                             height: '100%',
                                         }, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", bgcolor: "var(--color-background-bg-icon-badge)", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xxs) var(--spacing-tokens-size-in-px-spacing-spacing-sm)", whiteSpace: "nowrap", zIndex: 1, children: _jsx(Typography, { size: TypographySize.Text2XS, weight: TypographyWeight.SemiBold, 
                                             // Invariant violet label (bg-icon-badge) -> pin to the
                                             // invariant dark text so it stays legible in both themes.
-                                            color: "var(--color-text-text-dark)", children: promoCodeLabel }) }))] })), ctaText && (_jsx(MainButton, { text: ctaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, testId: testId ? `${testId}-cta` : undefined }))] })), footerText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: { width: '100%' }, children: footerText }))] }), renderSideImage(rightImage)] }));
+                                            color: "var(--color-text-text-dark)", children: promoCodeLabel }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, testId: testId ? `${testId}-cta` : undefined }))] })), !isMobile && footerText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: { width: '100%' }, children: footerText }))] }), renderAvatarMatrix(RIGHT_COLUMNS)] }));
 };

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

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const WithoutImages: Story;
 export declare const WithoutPromoCode: Story;
 export declare const TitleAndCtaOnly: Story;
+export declare const Mobile: Story;

package/dist/stories/UI/PromoBanner.stories.js

@@ -1,6 +1,4 @@
 import { PromoBanner } from './PromoBanner';
-import bannerAvatarsLeft from '../assets/banner/banner-avatars-left.png';
-import bannerAvatarsRight from '../assets/banner/banner-avatars-right.png';
 const meta = {
     title: 'Design System/Components/UI/PromoBanner',
     component: PromoBanner,
@@ -76,23 +74,30 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
-        leftImage: {
+        mobileTitle: {
             control: 'text',
-            description: 'Image URL of the avatar collage shown on the left side',
+            description: 'Title override used on the mobile variant (< 640px)',
             table: {
                 type: { summary: 'string' },
             },
         },
-        rightImage: {
+        mobileDescription: {
             control: 'text',
-            description: 'Image URL of the avatar collage shown on the right side',
+            description: 'Description override used on the mobile variant (< 640px)',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        mobileCtaText: {
+            control: 'text',
+            description: 'CTA text override used on the mobile variant (< 640px)',
             table: {
                 type: { summary: 'string' },
             },
         },
         showImages: {
             control: 'boolean',
-            description: 'Whether to show the avatar images',
+            description: 'Whether to show the avatar collage on both sides',
             table: {
                 type: { summary: 'boolean' },
             },
@@ -129,8 +134,10 @@ export const Default = {
         promoCodeLabel: 'YOUR PROMO CODE',
         ctaText: 'Enjoy 1 month free on Starter',
         footerText: 'Use Promo code at checkout and get 90 End-to-End API minutes or 180 Audio-to-Video API minutes free.',
-        leftImage: bannerAvatarsLeft,
-        rightImage: bannerAvatarsRight,
+        // Below 640px the banner renders the Figma mobile variant with this copy.
+        mobileTitle: 'Welcome! Get your free Starter plan for 1 month',
+        mobileDescription: "For a limited time, enjoy 1 month free on our starter plan (worth $50). That's 9k credits for 90 End-to-End API minutes or 180 Audio-to-Video API minutes. Just apply the code below at checkout.",
+        mobileCtaText: 'Activate My Free Starter Plan',
     },
 };
 export const WithoutImages = {
@@ -153,7 +160,40 @@ export const TitleAndCtaOnly = {
         description: undefined,
         features: [],
         ctaText: 'Get Started',
-        leftImage: bannerAvatarsLeft,
-        rightImage: bannerAvatarsRight,
+    },
+};
+const FIGMA_MOBILE_VIEWPORT = {
+    viewport: {
+        viewports: {
+            figmaMobile: {
+                name: 'Figma Mobile (375px)',
+                styles: { width: '375px', height: '812px' },
+            },
+        },
+        defaultViewport: 'figmaMobile',
+    },
+};
+export const Mobile = {
+    // Same props as Default — below 640px the component swaps to the mobile*
+    // content overrides and the Figma mobile layout automatically.
+    args: {
+        ...Default.args,
+    },
+    parameters: {
+        layout: 'padded',
+        ...FIGMA_MOBILE_VIEWPORT,
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7080-14298',
+        },
+        docs: {
+            description: {
+                story: 'The same PromoBanner as Default, viewed below 640px. The component ' +
+                    'renders the Figma mobile variant: side collages and features/footer ' +
+                    'hidden, text centered, promo code and CTA stacked full-width, and the ' +
+                    'mobileTitle / mobileDescription / mobileCtaText copy applied. Best ' +
+                    'viewed in the Canvas with the preset mobile viewport.',
+            },
+        },
     },
 };

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

@@ -0,0 +1,12 @@
+export declare const BANNER_AVATARS: {
+    nelly: string;
+    micheal: string;
+    fjolla: string;
+    laura: string;
+    yuruo: string;
+    jerome: string;
+};
+export declare const AVATAR_TILE_BACKGROUND = "linear-gradient(180deg, #e9e9e9 0%, #beb1df 100%)";
+export declare const BANNER_VIDEO_PREVIEW = "https://storage.googleapis.com/bey-dev-public/yuruo-preview.png";
+export declare const AVATAR_TILE_WIDTH = 130;
+export declare const AVATAR_TILE_HEIGHT = 150;

package/dist/stories/UI/bannerAvatars.js

@@ -0,0 +1,20 @@
+// Shared avatar imagery used by the banner collages (PromoBanner side columns
+// and ConversationalAvatarsBanner collage column). Keeping them here lets both components reuse
+// the same set of avatars.
+const AVATAR_BASE = 'https://storage.googleapis.com/bey-dev-public';
+export const BANNER_AVATARS = {
+    nelly: `${AVATAR_BASE}/nelly.jpg`,
+    micheal: `${AVATAR_BASE}/micheal.jpg`,
+    fjolla: `${AVATAR_BASE}/fjolla.png`,
+    laura: `${AVATAR_BASE}/laura.png`,
+    yuruo: `${AVATAR_BASE}/yuruo.png`,
+    jerome: `${AVATAR_BASE}/jerome.png`,
+};
+// Placeholder gradient shown behind avatars with transparent areas so every
+// tile has a consistent backdrop (matches the Figma image tile fill).
+export const AVATAR_TILE_BACKGROUND = 'linear-gradient(180deg, #e9e9e9 0%, #beb1df 100%)';
+// Poster/thumbnail shown in the ConversationalVoiceAgentsBanner video preview.
+export const BANNER_VIDEO_PREVIEW = `${AVATAR_BASE}/yuruo-preview.png`;
+// Size of a single avatar tile in the collages.
+export const AVATAR_TILE_WIDTH = 130;
+export const AVATAR_TILE_HEIGHT = 150;

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

@@ -1,7 +1,9 @@
 export * from './Badge';
+export * from './ButtonCard';
 export * from './Avatar';
+export * from './ConversationalAvatarsBanner';
 export * from './CheckIcon';
-export * from './FeatureBanner';
+export * from './ConversationalVoiceAgentsBanner';
 export * from './HintBubble';
 export * from './Logo';
 export * from './Menu';

package/dist/stories/UI/index.js

@@ -1,7 +1,9 @@
 export * from './Badge';
+export * from './ButtonCard';
 export * from './Avatar';
+export * from './ConversationalAvatarsBanner';
 export * from './CheckIcon';
-export * from './FeatureBanner';
+export * from './ConversationalVoiceAgentsBanner';
 export * from './HintBubble';
 export * from './Logo';
 export * from './Menu';

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

@@ -1,5 +1,5 @@
 import { Theme, SxProps, TooltipProps } from '@mui/material';
-import { ReactElement, ReactNode } from 'react';
+import { CSSProperties, ReactElement, ReactNode } from 'react';
 import type { IconWeight } from '@phosphor-icons/react';
 import { IconName } from '../../utils';
 import { ButtonSize, ButtonHierarchy } from '../Buttons';
@@ -354,13 +354,15 @@ export interface PromoBannerProps {
     ctaText?: string;
     /** Called when the call-to-action button is clicked */
     onCtaClick?: () => void;
-    /** Footer note shown below the actions */
+    /** Footer note shown below the actions (desktop only) */
     footerText?: string;
-    /** Image URL of the avatar collage shown on the left side */
-    leftImage?: string;
-    /** Image URL of the avatar collage shown on the right side */
-    rightImage?: string;
-    /** Whether to show the avatar images */
+    /** Title override used on the mobile variant (falls back to `title`) */
+    mobileTitle?: string;
+    /** Description override used on the mobile variant (falls back to `description`) */
+    mobileDescription?: string;
+    /** CTA text override used on the mobile variant (falls back to `ctaText`) */
+    mobileCtaText?: string;
+    /** Whether to show the avatar collage on both sides of the banner */
     showImages?: boolean;
     /** Background of the banner */
     background?: string;
@@ -370,17 +372,10 @@ export interface PromoBannerProps {
     testId?: string;
 }
 /**
- * FeatureBanner media variants
+ * Shared banner action button, used by ConversationalAvatarsBanner and
+ * ConversationalVoiceAgentsBanner.
  */
-export declare enum FeatureBannerMedia {
-    Video = "Video",
-    Image = "Image",
-    None = "None"
-}
-/**
- * FeatureBanner action button
- */
-export interface FeatureBannerAction {
+export interface BannerAction {
     /** Button text */
     text: string;
     /** Called when the button is clicked */
@@ -389,25 +384,44 @@ export interface FeatureBannerAction {
     primary?: boolean;
 }
 /**
- * FeatureBanner component props
+ * ConversationalAvatarsBanner component props — a feature card whose media is a collage column
+ * of avatars (reused from the PromoBanner set) that stays on the right at all
+ * breakpoints.
  */
-export interface FeatureBannerProps {
+export interface ConversationalAvatarsBannerProps {
     /** Title of the banner */
     title?: string;
     /** Description shown below the title */
     description?: string;
     /** Action buttons */
-    actions?: FeatureBannerAction[];
-    /** Media shown on the right side of the banner */
-    media?: FeatureBannerMedia;
-    /** Image URL for the media (video thumbnail or image column) */
-    mediaImage?: string;
+    actions?: BannerAction[];
+    /** Background of the banner */
+    background?: string;
+    /** Custom style of the banner */
+    style?: SxProps<Theme>;
+    /** Test ID of the banner */
+    testId?: string;
+}
+/**
+ * ConversationalVoiceAgentsBanner component props — a feature card whose media is a
+ * video preview (thumbnail with a play button and an optional CTA pill). Text
+ * and actions sit on the left on desktop and stack above the preview on mobile.
+ */
+export interface ConversationalVoiceAgentsBannerProps {
+    /** Title of the banner */
+    title?: string;
+    /** Description shown below the title */
+    description?: string;
+    /** Action buttons */
+    actions?: BannerAction[];
+    /** Thumbnail/poster image URL for the video preview */
+    previewImage?: string;
     /** Called when the play button on the video preview is clicked */
     onPlayClick?: () => void;
     /** CTA text overlaid on the video preview */
-    mediaCtaText?: string;
-    /** Called when the media CTA is clicked */
-    onMediaCtaClick?: () => void;
+    previewCtaText?: string;
+    /** Called when the preview CTA is clicked */
+    onPreviewCtaClick?: () => void;
     /** Background of the banner */
     background?: string;
     /** Custom style of the banner */
@@ -486,3 +500,35 @@ export interface TabMenuProps {
     /** Test ID of the tab menu. */
     testId?: string;
 }
+/**
+ * Button card component props — a compact, clickable card with a leading icon,
+ * title, description and an optional corner action button.
+ */
+export interface ButtonCardProps {
+    /** Card title (e.g. "Create Personal Avatar") */
+    title: string;
+    /** Short supporting description shown under the title */
+    description?: string;
+    /** Leading icon rendered inside the accent tile (defaults to "UserFocus") */
+    icon?: IconName;
+    /** Icon color (defaults to the yellow accent foreground) */
+    iconColor?: string;
+    /** Background color of the icon tile (defaults to the yellow accent background) */
+    iconBackgroundColor?: string;
+    /** Card click handler */
+    onClick?: () => void;
+    /** Show the corner action button (e.g. "Contact Us") */
+    showActionButton?: boolean;
+    /** Corner action button label (defaults to "Contact Us") */
+    actionButtonText?: string;
+    /** Corner action button click handler */
+    onActionClick?: () => void;
+    /** Disable the card (dims it and blocks the click handler) */
+    disabled?: boolean;
+    /** Width of the card (defaults to "294px") */
+    width?: string | number;
+    /** Custom style */
+    style?: CSSProperties;
+    /** Test id */
+    testId?: string;
+}

package/dist/stories/UI/types.js

@@ -110,15 +110,6 @@ export var ProgressIndicatorMode;
     /** Renders only the bar, with no accompanying value text. */
     ProgressIndicatorMode["Bar"] = "Bar";
 })(ProgressIndicatorMode || (ProgressIndicatorMode = {}));
-/**
- * FeatureBanner media variants
- */
-export var FeatureBannerMedia;
-(function (FeatureBannerMedia) {
-    FeatureBannerMedia["Video"] = "Video";
-    FeatureBannerMedia["Image"] = "Image";
-    FeatureBannerMedia["None"] = "None";
-})(FeatureBannerMedia || (FeatureBannerMedia = {}));
 /**
  * TabMenu size variants
  */

package/package.json

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

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

@@ -1,3 +0,0 @@
-import React from 'react';
-import { FeatureBannerProps } from './types';
-export declare const FeatureBanner: React.FC<FeatureBannerProps>;

package/dist/stories/UI/FeatureBanner.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { FeatureBannerMedia, } from './types';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
-const VIOLET_GRADIENT = 'linear-gradient(180deg, rgba(194, 171, 252, 0.08) 0%, rgba(128, 96, 198, 0.2) 100%)';
-const PINK_GRADIENT = 'linear-gradient(90deg, rgba(235, 205, 240, 0.05) 0%, rgba(202, 59, 224, 0.15) 100%)';
-export const FeatureBanner = ({ title, description, actions = [], media = FeatureBannerMedia.None, mediaImage, onPlayClick, mediaCtaText, onMediaCtaClick, background, style: customStyle, testId, }) => {
-    const bannerBackground = background ||
-        (media === FeatureBannerMedia.Video ? PINK_GRADIENT : VIOLET_GRADIENT);
-    const renderAction = (action, index) => (_jsx(MainButton, { text: action.text, size: ButtonSize.md, hierarchy: action.primary
-            ? ButtonHierarchy.Primary
-            : ButtonHierarchy.SecondaryColor, onClick: action.onClick, style: action.primary
-            ? undefined
-            : {
-                border: '1px solid var(--color-border-border-component)',
-            }, testId: testId ? `${testId}-action-${index}` : undefined }, `${action.text}-${index}`));
-    const renderMedia = () => {
-        if (media === FeatureBannerMedia.None || !mediaImage)
-            return null;
-        if (media === FeatureBannerMedia.Video) {
-            return (_jsxs(Box, { position: "relative", width: "296px", height: "150px", flexShrink: 0, overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)", children: [_jsx(Box, { component: "img", src: mediaImage, alt: "", width: "100%", height: "100%", sx: { objectFit: 'cover', display: 'block' } }), _jsx(Box, { position: "absolute", left: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bottom: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: _jsx(MainButton, { size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, displayIconMode: ButtonDisplayMode.Only, displayIcon: "Play", onClick: onPlayClick, style: { border: 'none' }, testId: testId ? `${testId}-play` : undefined }) }), mediaCtaText && (_jsx(Box, { position: "absolute", right: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bottom: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: _jsx(MainButton, { text: mediaCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, onClick: onMediaCtaClick, style: { border: 'none' }, testId: testId ? `${testId}-media-cta` : undefined }) }))] }));
-        }
-        // Image media spans the full banner height by escaping the vertical padding
-        return (_jsx(Box, { component: "img", src: mediaImage, alt: "", flexShrink: 0, sx: {
-                marginY: 'calc(-1 * var(--spacing-tokens-size-in-px-spacing-spacing-3xl))',
-            } }));
-    };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "40px", width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: {
-            background: bannerBackground,
-            boxSizing: 'border-box',
-            ...customStyle,
-        }, "data-testid": testId, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [title && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: title })), description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-label)", children: description }))] }), actions.length > 0 && (_jsx(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: actions.map(renderAction) }))] }), renderMedia()] }));
-};

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

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { FeatureBanner } from './FeatureBanner';
-declare const meta: Meta<typeof FeatureBanner>;
-export default meta;
-type Story = StoryObj<typeof FeatureBanner>;
-export declare const Video: Story;
-export declare const Image: Story;
-export declare const TextOnly: Story;
-export declare const HomeLayout: Story;

package/dist/stories/UI/FeatureBanner.stories.js

@@ -1,131 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FeatureBanner } from './FeatureBanner';
-import { FeatureBannerMedia } from './types';
-import videoPreview from '../assets/banner/video-preview.png';
-import avatarsColumn from '../assets/banner/banner-avatars-column.png';
-const meta = {
-    title: 'Design System/Components/UI/FeatureBanner',
-    component: FeatureBanner,
-    parameters: {
-        layout: 'padded',
-        design: {
-            type: 'figspec',
-            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7011-27024',
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        title: {
-            control: 'text',
-            description: 'Title of the banner',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        description: {
-            control: 'text',
-            description: 'Description shown below the title',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        actions: {
-            control: 'object',
-            description: 'Action buttons — set primary: true for the brand (violet) button',
-            table: {
-                type: { summary: 'FeatureBannerAction[]' },
-            },
-        },
-        media: {
-            control: 'select',
-            description: 'Media shown on the right side of the banner',
-            options: Object.values(FeatureBannerMedia),
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        mediaImage: {
-            control: 'text',
-            description: 'Image URL for the media (video thumbnail or image column)',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        onPlayClick: {
-            action: 'play clicked',
-            description: 'Called when the play button on the video preview is clicked',
-            table: {
-                type: { summary: 'function' },
-            },
-        },
-        mediaCtaText: {
-            control: 'text',
-            description: 'CTA text overlaid on the video preview',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        onMediaCtaClick: {
-            action: 'media cta clicked',
-            description: 'Called when the media CTA is clicked',
-            table: {
-                type: { summary: 'function' },
-            },
-        },
-        background: {
-            control: 'text',
-            description: 'Background of the banner',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        style: {
-            control: 'object',
-            description: 'Custom style for the banner',
-            table: {
-                type: { summary: 'object' },
-            },
-        },
-    },
-};
-export default meta;
-export const Video = {
-    args: {
-        title: 'Add a Human Face to your Conversational Voice Agents',
-        description: 'Bring your ideas to life with intelligent conversational avatars.',
-        actions: [
-            { text: 'Create API Key' },
-            { text: 'Go to Docs', primary: true },
-        ],
-        media: FeatureBannerMedia.Video,
-        mediaImage: videoPreview,
-        mediaCtaText: 'How to Get Started',
-    },
-};
-export const Image = {
-    args: {
-        title: 'Introducing Conversational Avatars',
-        description: 'Bring your ideas to life with intelligent conversational avatars.',
-        actions: [{ text: 'Create New Agent' }],
-        media: FeatureBannerMedia.Image,
-        mediaImage: avatarsColumn,
-    },
-};
-export const TextOnly = {
-    args: {
-        title: 'Introducing Conversational Avatars',
-        description: 'Bring your ideas to life with intelligent conversational avatars.',
-        actions: [{ text: 'Create New Agent' }],
-        media: FeatureBannerMedia.None,
-    },
-};
-export const HomeLayout = {
-    parameters: {
-        docs: {
-            description: {
-                story: 'Both banners side by side as they appear on the Home screen of the app.',
-            },
-        },
-    },
-    render: () => (_jsxs("div", { style: { display: 'flex', gap: '12px', alignItems: 'stretch' }, children: [_jsx("div", { style: { flex: 3, minWidth: 0, display: 'flex' }, children: _jsx(FeatureBanner, { ...Video.args }) }), _jsx("div", { style: { flex: 2, minWidth: 0, display: 'flex' }, children: _jsx(FeatureBanner, { ...Image.args }) })] })),
-};