@beydesign/storybook 0.2.16 → 0.2.18

package/dist/stories/Buttons/MainButton.js

@@ -51,7 +51,9 @@ const StyledButton = styled.button `
         case ButtonHierarchy.WhiteText:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--color-background-bg-button-disabled)';
-            return 'var(--color-background-bg-overlay-1)';
+            // Figma "White-text" fill is the Primary/Black/40 primitive
+            // (rgba(0,0,0,0.4)) — a dark scrim over media, not an overlay token.
+            return 'var(--primitives-white-primary-black-40)';
         default:
             return 'var(--color-background-bg-brand-primary)';
     }
@@ -183,7 +185,8 @@ const StyledButton = styled.button `
         case ButtonHierarchy.TertiaryColor:
             return 'var(--color-background-bg-card-highlight-hover)';
         case ButtonHierarchy.WhiteText:
-            return 'var(--color-background-bg-overlay-2)';
+            // Darken the black-40 scrim one step on hover (no black-50 exists).
+            return 'var(--primitives-white-primary-black-60)';
         default:
             return 'var(--color-background-bg-brand-primary-hover)';
     }

package/dist/stories/UI/ButtonCard.js

@@ -23,7 +23,12 @@ export const ButtonCard = ({ title, description, icon = 'UserFocus', iconColor =
                     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, 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) => {
+        }, 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/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,31 +1,65 @@
 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 stacks vertically to match the Figma mobile
-// layout (side images hidden, promo code + CTA stacked full-width).
-const MOBILE = '@media (max-width: 640px)';
+// 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', [MOBILE]: { display: 'none' } } }));
+        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,
@@ -36,17 +70,21 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
                 paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
             },
             ...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)", sx: {
+        }, "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: '100%',
+                                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-component)',
+                                            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.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,8 +160,6 @@ export const TitleAndCtaOnly = {
         description: undefined,
         features: [],
         ctaText: 'Get Started',
-        leftImage: bannerAvatarsLeft,
-        rightImage: bannerAvatarsRight,
     },
 };
 const FIGMA_MOBILE_VIEWPORT = {
@@ -169,15 +174,10 @@ const FIGMA_MOBILE_VIEWPORT = {
     },
 };
 export const Mobile = {
+    // Same props as Default — below 640px the component swaps to the mobile*
+    // content overrides and the Figma mobile layout automatically.
     args: {
-        title: 'Welcome! Get your free Starter plan for 1 month',
-        description: "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.",
-        features: [],
-        promoCode: 'PKAJ2HGO',
-        promoCodeLabel: 'YOUR PROMO CODE',
-        ctaText: 'Activate My Free Starter Plan',
-        footerText: undefined,
-        showImages: false,
+        ...Default.args,
     },
     parameters: {
         layout: 'padded',
@@ -188,10 +188,11 @@ export const Mobile = {
         },
         docs: {
             description: {
-                story: 'The promo banner on the mobile Home screen — side images hidden, ' +
-                    'auto height, promo code and CTA stacked full-width. Below 640px the ' +
-                    'component reflows automatically; best viewed in the Canvas with the ' +
-                    'preset mobile viewport.',
+                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/SelectAvatarCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectAvatarCardProps } from './types';
+/**
+ * SelectAvatarCard — a media card for the currently selected avatar. Mirrors the
+ * Figma "Selected Avatar" component with its Filled (Default + Hover), Empty and
+ * Error states. In the Filled state the Change action is always visible and the
+ * Preview action is revealed on hover.
+ */
+export declare const SelectAvatarCard: React.FC<SelectAvatarCardProps>;

package/dist/stories/UI/SelectAvatarCard.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SelectAvatarCardState } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { MainButton, ButtonHierarchy, ButtonSize, ButtonShape, } from '../Buttons';
+import { getIconComponent } from '../../utils';
+// Scrim behind the avatar name, matching the Figma "name section" gradient
+// (transparent at the top, fading to ~64% #2d2637 at the bottom).
+const NAME_GRADIENT = 'linear-gradient(180deg, rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.047) 11%, rgba(45, 38, 55, 0.094) 20%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)';
+/**
+ * SelectAvatarCard — a media card for the currently selected avatar. Mirrors the
+ * Figma "Selected Avatar" component with its Filled (Default + Hover), Empty and
+ * Error states. In the Filled state the Change action is always visible and the
+ * Preview action is revealed on hover.
+ */
+export const SelectAvatarCard = ({ state = SelectAvatarCardState.Filled, showHeader = true, headerTitle = 'Selected Avatar', avatarImage, avatarName, showChangeButton = true, changeButtonText = 'Change', onChange, showPreviewButton = true, previewButtonText = 'Preview', onPreview, selectButtonText = 'Select Avatar', onSelect, width = '552px', height = '344px', style, testId, }) => {
+    const isFilled = state === SelectAvatarCardState.Filled;
+    const isEmpty = state === SelectAvatarCardState.Empty;
+    const isError = state === SelectAvatarCardState.Error;
+    const mediaBackground = isEmpty
+        ? 'var(--color-background-bg-element)'
+        : isError
+            ? 'var(--color-background-bg-button-disabled)'
+            : 'transparent';
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: width, height: height, boxSizing: "border-box", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bgcolor: "var(--color-background-bg-page-contrast)", sx: {
+            border: '1px solid var(--color-border-border-subtle)',
+            boxShadow: '0px 2px 4px 0px var(--global-shadows-shadow-xs-color)',
+            // Reveal the Preview pill when the card is hovered.
+            '&:hover .select-avatar-card__preview': {
+                opacity: 1,
+                visibility: 'visible',
+            },
+            ...style,
+        }, "data-testid": testId ?? 'select-avatar-card', children: [showHeader && (_jsx(Box, { display: "flex", alignItems: "center", width: "100%", children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", textStyle: { flex: '1 0 0', minWidth: 0, wordBreak: 'break-word' }, children: headerTitle }) })), _jsxs(Box, { position: "relative", flex: "1 0 0", minHeight: 0, width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)", bgcolor: mediaBackground, children: [isFilled && (_jsxs(_Fragment, { children: [avatarImage && (_jsx(Box, { component: "img", src: avatarImage, alt: avatarName ?? '', position: "absolute", sx: {
+                                    inset: 0,
+                                    width: '100%',
+                                    height: '100%',
+                                    objectFit: 'cover',
+                                    pointerEvents: 'none',
+                                } })), _jsxs(Box, { position: "absolute", top: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", right: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", display: "flex", alignItems: "flex-start", justifyContent: "flex-end", gap: "10px", children: [showPreviewButton && (_jsx(Box, { className: "select-avatar-card__preview", sx: {
+                                            opacity: 0,
+                                            visibility: 'hidden',
+                                            transition: 'opacity 0.15s ease-in-out',
+                                        }, children: _jsx(MainButton, { text: previewButtonText, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, showLeadingIcon: true, leadingIcon: "Play", onClick: onPreview, testId: testId ? `${testId}-preview` : undefined }) })), showChangeButton && (_jsx(MainButton, { text: changeButtonText, size: ButtonSize.md, hierarchy: ButtonHierarchy.WhiteText, showLeadingIcon: true, leadingIcon: "ArrowsLeftRight", onClick: onChange, testId: testId ? `${testId}-change` : undefined }))] }), avatarName && (_jsx(Box, { position: "absolute", left: 0, right: 0, bottom: 0, display: "flex", alignItems: "center", padding: "24px 12px 12px", sx: { background: NAME_GRADIENT }, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-white)", textStyle: {
+                                        flex: '1 0 0',
+                                        minWidth: 0,
+                                        wordBreak: 'break-word',
+                                    }, children: avatarName }) }))] })), isEmpty && (_jsx(Box, { position: "absolute", sx: {
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                        }, children: _jsx(MainButton, { text: selectButtonText, hierarchy: ButtonHierarchy.PrimaryLemon, size: ButtonSize.xs, shape: ButtonShape.Square, onClick: onSelect, testId: testId ? `${testId}-select` : undefined }) })), isError && (_jsx(Box, { position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", sx: {
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                        }, children: getIconComponent('Warning', {
+                            size: 182,
+                            weight: 'regular',
+                            color: 'var(--color-foreground-fg-disabled)',
+                        }) }))] })] }));
+};

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SelectAvatarCard } from './SelectAvatarCard';
+declare const meta: Meta<typeof SelectAvatarCard>;
+export default meta;
+type Story = StoryObj<typeof SelectAvatarCard>;
+/**
+ * An avatar is selected. The Change action is always visible; hover the card to
+ * reveal the Preview action.
+ */
+export declare const Default: Story;
+/** No avatar picked yet — a centered call to action to select one. */
+export declare const Empty: Story;
+/** The preview could not be loaded — a centered warning icon. */
+export declare const Error: Story;
+/** The Filled card without its header, e.g. when embedded under another label. */
+export declare const WithoutHeader: Story;
+/**
+ * All four states side by side, matching the Figma frame. Hover the first card
+ * to reveal its Preview action.
+ */
+export declare const AllStates: Story;

package/dist/stories/UI/SelectAvatarCard.stories.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectAvatarCard } from './SelectAvatarCard';
+import { SelectAvatarCardState } from './types';
+import { BANNER_AVATARS } from './bannerAvatars';
+const SAMPLE_AVATAR = BANNER_AVATARS.nelly;
+const meta = {
+    title: 'Design System/Components/UI/SelectAvatarCard',
+    component: SelectAvatarCard,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4644-15058',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        state: {
+            control: 'select',
+            options: Object.values(SelectAvatarCardState),
+            description: 'Visual state of the card',
+        },
+        showHeader: { control: 'boolean' },
+        headerTitle: { control: 'text' },
+        avatarImage: { control: 'text', description: 'Preview image URL (Filled)' },
+        avatarName: { control: 'text', description: 'Avatar name (Filled)' },
+        showChangeButton: { control: 'boolean' },
+        changeButtonText: { control: 'text' },
+        showPreviewButton: {
+            control: 'boolean',
+            description: 'Reveal the Preview action on hover (Filled)',
+        },
+        previewButtonText: { control: 'text' },
+        selectButtonText: { control: 'text' },
+        width: { control: 'text', table: { defaultValue: { summary: '552px' } } },
+        height: { control: 'text', table: { defaultValue: { summary: '344px' } } },
+        onChange: { action: 'change clicked' },
+        onPreview: { action: 'preview clicked' },
+        onSelect: { action: 'select clicked' },
+    },
+};
+export default meta;
+/**
+ * An avatar is selected. The Change action is always visible; hover the card to
+ * reveal the Preview action.
+ */
+export const Default = {
+    args: {
+        state: SelectAvatarCardState.Filled,
+        avatarImage: SAMPLE_AVATAR,
+        avatarName: 'Anna',
+    },
+};
+/** No avatar picked yet — a centered call to action to select one. */
+export const Empty = {
+    args: {
+        state: SelectAvatarCardState.Empty,
+    },
+};
+/** The preview could not be loaded — a centered warning icon. */
+export const Error = {
+    args: {
+        state: SelectAvatarCardState.Error,
+    },
+};
+/** The Filled card without its header, e.g. when embedded under another label. */
+export const WithoutHeader = {
+    args: {
+        ...Default.args,
+        showHeader: false,
+    },
+};
+/**
+ * All four states side by side, matching the Figma frame. Hover the first card
+ * to reveal its Preview action.
+ */
+export const AllStates = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+            alignItems: 'flex-start',
+        }, children: [_jsx(SelectAvatarCard, { state: SelectAvatarCardState.Filled, avatarImage: SAMPLE_AVATAR, avatarName: "Anna", onChange: () => { }, onPreview: () => { } }), _jsx(SelectAvatarCard, { state: SelectAvatarCardState.Empty, onSelect: () => { } }), _jsx(SelectAvatarCard, { state: SelectAvatarCardState.Error })] })),
+};

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,14 +1,16 @@
 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';
 export * from './Popover';
 export * from './ProgressIndicator';
 export * from './PromoBanner';
+export * from './SelectAvatarCard';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';

package/dist/stories/UI/index.js

@@ -1,14 +1,16 @@
 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';
 export * from './Popover';
 export * from './ProgressIndicator';
 export * from './PromoBanner';
+export * from './SelectAvatarCard';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';

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

@@ -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,6 +500,59 @@ export interface TabMenuProps {
     /** Test ID of the tab menu. */
     testId?: string;
 }
+/**
+ * Visual state of the {@link SelectAvatarCard}.
+ * - `Filled`: an avatar is selected — shows the preview image, its name and the
+ *   Change action (Preview appears on hover).
+ * - `Empty`: no avatar yet — shows a centered "Select Avatar" button.
+ * - `Error`: the preview failed to load — shows a centered warning icon.
+ */
+export declare enum SelectAvatarCardState {
+    Filled = "Filled",
+    Empty = "Empty",
+    Error = "Error"
+}
+/**
+ * SelectAvatarCard component props — a media card that shows the currently
+ * selected avatar (with Change / Preview actions), an empty state prompting the
+ * user to pick one, or an error state.
+ */
+export interface SelectAvatarCardProps {
+    /** Visual state of the card. Defaults to `Filled`. */
+    state?: SelectAvatarCardState;
+    /** Show the card header. Defaults to `true`. */
+    showHeader?: boolean;
+    /** Header title. Defaults to "Selected Avatar". */
+    headerTitle?: string;
+    /** Avatar preview image URL (used in the `Filled` state). */
+    avatarImage?: string;
+    /** Avatar name shown over the bottom gradient (used in the `Filled` state). */
+    avatarName?: string;
+    /** Show the Change action in the `Filled` state. Defaults to `true`. */
+    showChangeButton?: boolean;
+    /** Change button label. Defaults to "Change". */
+    changeButtonText?: string;
+    /** Called when the Change button is clicked. */
+    onChange?: () => void;
+    /** Reveal the Preview action on hover in the `Filled` state. Defaults to `true`. */
+    showPreviewButton?: boolean;
+    /** Preview button label. Defaults to "Preview". */
+    previewButtonText?: string;
+    /** Called when the Preview button is clicked. */
+    onPreview?: () => void;
+    /** Empty-state button label. Defaults to "Select Avatar". */
+    selectButtonText?: string;
+    /** Called when the empty-state Select Avatar button is clicked. */
+    onSelect?: () => void;
+    /** Width of the card. Defaults to "552px". */
+    width?: string | number;
+    /** Height of the card. Defaults to "344px". */
+    height?: string | number;
+    /** Custom style. */
+    style?: SxProps<Theme>;
+    /** Test id. */
+    testId?: string;
+}
 /**
  * Button card component props — a compact, clickable card with a leading icon,
  * title, description and an optional corner action button.

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
  */
@@ -127,3 +118,16 @@ export var TabMenuSize;
     TabMenuSize["md"] = "md";
     TabMenuSize["sm"] = "sm";
 })(TabMenuSize || (TabMenuSize = {}));
+/**
+ * Visual state of the {@link SelectAvatarCard}.
+ * - `Filled`: an avatar is selected — shows the preview image, its name and the
+ *   Change action (Preview appears on hover).
+ * - `Empty`: no avatar yet — shows a centered "Select Avatar" button.
+ * - `Error`: the preview failed to load — shows a centered warning icon.
+ */
+export var SelectAvatarCardState;
+(function (SelectAvatarCardState) {
+    SelectAvatarCardState["Filled"] = "Filled";
+    SelectAvatarCardState["Empty"] = "Empty";
+    SelectAvatarCardState["Error"] = "Error";
+})(SelectAvatarCardState || (SelectAvatarCardState = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.2.16",
+  "version": "0.2.18",
   "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,50 +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%)';
-// Below this width the banner stacks vertically to match the Figma mobile
-// layout (text + actions on top, media full-width below).
-const MOBILE = '@media (max-width: 640px)';
-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)", sx: {
-                    [MOBILE]: {
-                        width: '100%',
-                        height: 'auto',
-                        aspectRatio: '296 / 150',
-                    },
-                }, 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))',
-                [MOBILE]: { marginY: 0, maxWidth: '100%' },
-            } }));
-    };
-    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',
-            [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)", children: actions.map(renderAction) }))] }), renderMedia()] }));
-};

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

@@ -1,10 +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 Mobile: Story;
-export declare const HomeLayout: Story;

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

@@ -1,163 +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,
-    },
-};
-const FIGMA_MOBILE_VIEWPORT = {
-    viewport: {
-        viewports: {
-            figmaMobile: {
-                name: 'Figma Mobile (375px)',
-                styles: { width: '375px', height: '812px' },
-            },
-        },
-        defaultViewport: 'figmaMobile',
-    },
-};
-export const Mobile = {
-    args: {
-        ...Video.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 feature banner on the mobile Home screen — text and actions ' +
-                    'stack on top, media spans full-width below. Below 640px the component ' +
-                    'reflows automatically; best viewed in the Canvas with the preset ' +
-                    'mobile viewport.',
-            },
-        },
-    },
-};
-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 }) })] })),
-};