@beydesign/storybook 0.4.6 → 0.4.8

package/dist/stories/Buttons/MainButton.js

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

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

@@ -105,6 +105,13 @@ export interface MainButtonProps {
     leadingIcon?: IconName;
     /** Icon to show at the end of the button */
     trailingIcon?: IconName;
+    /**
+     * Custom node rendered in place of the name-based trailing icon. When
+     * provided (and `showTrailingIcon` is true) this takes precedence over
+     * `trailingIcon`, letting callers slot in an animated/custom icon while
+     * keeping the button's icon slot and spacing intact.
+     */
+    trailingIconSlot?: React.ReactNode;
     /** Test Id */
     testId?: string;
 }

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

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * The avatar bust silhouette shown as the empty-state placeholder (no image),
+ * mirroring the Figma "Empty" state. Fills its container and is anchored to the
+ * bottom, so the shoulders bleed off the card edge. Uses `currentColor` so the
+ * fill can be driven by a design token from the parent.
+ */
+export declare const AvatarSilhouette: React.FC;

package/dist/stories/EntityCard/AvatarSilhouette.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The avatar bust silhouette shown as the empty-state placeholder (no image),
+ * mirroring the Figma "Empty" state. Fills its container and is anchored to the
+ * bottom, so the shoulders bleed off the card edge. Uses `currentColor` so the
+ * fill can be driven by a design token from the parent.
+ */
+export const AvatarSilhouette = () => (_jsx("svg", { viewBox: '0 0 206 224', width: '100%', height: '100%', preserveAspectRatio: 'none', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { display: 'block' }, "aria-hidden": 'true', focusable: 'false', children: _jsx("path", { d: 'M99.3964 0.0456982C113.077 -0.455929 125.202 3.14652 135.525 12.1236C148.651 23.5376 147.776 38.5586 145.834 54.3326C145.588 56.3287 145.199 58.4767 144.991 60.4808C149.483 60.7505 150.277 64.6019 149.882 68.4009C149.333 73.6891 147.427 80.6122 143.514 84.4206C142.672 85.1879 140.346 86.2549 140.073 86.8043C139.095 88.7733 138.467 91.5773 137.716 93.6661C135.881 98.7729 133.492 103.4 129.918 107.52C128.811 108.796 127.72 109.764 126.634 110.938C125.107 116.921 126.767 127.746 129.952 133.133C134.695 141.159 144.185 143.686 152.658 146.232C158.101 147.813 163.51 149.514 168.878 151.329C178.708 154.699 189.396 158.77 194.713 168.238C197.991 174.074 199.3 179.931 200.599 186.435C201.789 192.393 202.659 198.373 203.549 204.377C204.13 208.372 204.663 212.376 205.146 216.386C205.449 218.83 205.845 221.556 206 224H0L0.0225427 223.877C0.483937 221.262 0.77993 216.99 1.11962 214.171C1.77914 208.761 2.57988 203.368 3.5213 198C4.96167 189.348 6.76585 179.033 10.363 171.015C12.2654 166.773 15.904 162.193 19.855 159.538C29.5517 153.12 41.2795 150.131 52.2751 146.656C59.2908 144.439 66.4763 142.872 72.352 138.147C79.5078 132.395 81.5098 119.718 79.8167 111.052L79.7425 110.962C78.8337 109.888 77.6063 108.78 76.5931 107.611C73.4593 103.966 71.0023 99.7957 69.3371 95.2959C68.78 93.7779 68.2501 92.2503 67.7476 90.7137C66.0041 85.3616 66.4977 87.0427 62.1073 84.1196C56.9385 80.6782 51.0027 60.6731 61.2827 60.467C61.0959 57.2634 60.4807 53.6568 60.1419 50.3502C58.9309 38.5311 59.2264 24.9218 67.4846 15.453C70.7115 11.7529 73.9771 10.0768 78.4209 8.59052C79.0166 8.39123 81.4647 5.42845 82.4273 5.1527C87.3821 1.81482 93.4351 0.264287 99.3964 0.0456982Z', fill: 'currentColor' }) }));

package/dist/stories/EntityCard/EntityCard.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box } from '@mui/material';
 import { keyframes } from '@emotion/react';
-import { UserCircle, FilmSlate, ArrowsClockwise, Warning, } from '@phosphor-icons/react';
+import { ArrowsClockwise, Warning } from '@phosphor-icons/react';
+import { AvatarSilhouette } from './AvatarSilhouette';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Menu, Badge, BadgeColor, BadgeSize } from '../UI';
 import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
@@ -37,8 +38,8 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
     const isProcessing = processing && !error;
     const canPreview = !!onPreview && !isProcessing && !error;
     const showActions = canPreview || hasMenu;
-    const showBadge = showStatusBadge && !!statusBadgeText;
-    const showImage = !!image && !imageError;
+    const showBadge = showStatusBadge && !!statusBadgeText && !error;
+    const showImage = !!image && !imageError && !error;
     const resolvedTestId = testId ?? `${entityKey}-${isVideo ? 'video' : 'entity'}-card`;
     const handlePreviewButtonClick = (event) => {
         event.stopPropagation();
@@ -60,12 +61,19 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
                 opacity: 1,
                 pointerEvents: 'auto',
             },
-        }, "data-testid": resolvedTestId, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: isVideo ? (_jsx(FilmSlate, { size: 64, weight: 'thin', color: 'var(--color-text-text-subtle)' })) : (_jsx(UserCircle, { size: 74, weight: 'thin', color: 'var(--color-text-text-subtle)' })) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
+        }, "data-testid": resolvedTestId, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [error ? (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-badge-accent-red)', display: 'flex', justifyContent: 'center', alignItems: 'center', role: 'img', "aria-label": errorText, title: errorText, children: _jsx(Warning, { size: 50, color: 'var(--color-foreground-fg-error)' }) })) : showImage ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { position: 'relative', width: '100%', height: '100%', overflow: 'hidden', bgcolor: 'var(--color-background-bg-button-disabled)', children: _jsx(Box, { position: 'absolute', bottom: 0, left: '50%', sx: {
+                                transform: 'translateX(-50%)',
+                                color: 'var(--color-border-border-subtle)',
+                                aspectRatio: '206 / 224',
+                                ...(isVideo
+                                    ? { height: '100%', maxWidth: '100%' }
+                                    : { width: '206px', height: '224px' }),
+                            }, children: _jsx(AvatarSilhouette, {}) }) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
                             backgroundImage: 'linear-gradient(180deg, rgba(21, 0, 73, 0) 0%, rgba(72, 29, 180, 0.152) 16.76%, rgba(32, 13, 82, 0.36) 100%)',
                             opacity: hovered && !isProcessing && !error ? 1 : 0,
                             transition: 'opacity 0.15s ease-in-out',
                             pointerEvents: 'none',
-                        } }), isProcessing && (_jsxs(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-overlay-2)', sx: { zIndex: 1 }, children: [_jsx(Spinner, {}), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: processingText })] })), error && (_jsxs(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-error-solid)', sx: { zIndex: 3, opacity: 0.7 }, children: [_jsx(Warning, { size: 74, color: 'var(--color-text-text-white)' }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: errorText })] })), showBadge && (_jsx(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', left: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: _jsx(Badge, { text: statusBadgeText, color: statusBadgeColor, size: BadgeSize.md, showIcon: true, icon: 'Circle', iconWeight: 'fill', iconSize: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)' }) })), showActions && (_jsxs(Box, { className: ACTIONS_CLASS, position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', right: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: {
+                        } }), isProcessing && (_jsxs(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-overlay-2)', sx: { zIndex: 1 }, children: [_jsx(Spinner, {}), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: processingText })] })), showBadge && (_jsx(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', left: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: _jsx(Badge, { text: statusBadgeText, color: statusBadgeColor, size: BadgeSize.md, showIcon: true, icon: 'Circle', iconWeight: 'fill', iconSize: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)' }) })), showActions && (_jsxs(Box, { className: ACTIONS_CLASS, position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', right: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: {
                             zIndex: 4,
                             transition: 'opacity 0.15s ease-in-out',
                             '@media (hover: hover)': {

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

@@ -69,12 +69,12 @@ const meta = {
         },
         error: {
             control: 'boolean',
-            description: 'Show the error overlay (warning icon + label)',
+            description: 'Show the error state (tinted media area + warning icon)',
             table: { type: { summary: 'boolean' } },
         },
         errorText: {
             control: 'text',
-            description: 'Error overlay label',
+            description: "Accessible label for the error state (the warning icon's aria-label/title)",
             table: {
                 type: { summary: 'string' },
                 defaultValue: { summary: 'Something went wrong' },
@@ -303,7 +303,7 @@ export const ErrorState = {
     parameters: {
         docs: {
             description: {
-                story: 'An error overlay (warning icon + label) covers the image while the preview action is suppressed. The menu stays accessible so the item can still be retried or removed. Works across every view.',
+                story: 'The media area is replaced by a tinted error surface with a warning icon; the name stays visible and the preview action is suppressed. The menu stays accessible so the item can still be retried or removed. Works across every view.',
             },
         },
     },

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

@@ -29,9 +29,9 @@ export interface EntityCardProps {
     processing?: boolean;
     /** Processing overlay label. Defaults to "Please wait" */
     processingText?: string;
-    /** Show the error overlay (warning icon + label) over the image */
+    /** Show the error state (tinted media area + warning icon) in place of the image */
     error?: boolean;
-    /** Error overlay label. Defaults to "Something went wrong" */
+    /** Accessible label for the error state — exposed as the warning icon's aria-label/title. Defaults to "Something went wrong" */
     errorText?: string;
     /** Preview handler — renders the action button on hover */
     onPreview?: () => void;

package/dist/stories/UI/ConversationalAvatarsBanner.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
+import { Box, useMediaQuery } from '@mui/material';
+import { keyframes } from '@emotion/react';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
 import { BANNER_AVATARS, AVATAR_TILE_BACKGROUND, AVATAR_TILE_WIDTH, } from './bannerAvatars';
@@ -24,7 +25,35 @@ const IMAGE_COLUMN = [
     BANNER_AVATARS.micheal,
     BANNER_AVATARS.yuruo,
 ];
-export const ConversationalAvatarsBanner = ({ title, description, actions = [], background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
+// A longer, de-duplicated sequence used only when the collage animates: every
+// avatar appears, no two adjacent tiles repeat, and the first tile differs from
+// the last so doubling it for the seamless loop never places identical tiles
+// next to each other at the seam.
+const MARQUEE_COLUMN = [
+    BANNER_AVATARS.fjolla,
+    BANNER_AVATARS.micheal,
+    BANNER_AVATARS.yuruo,
+    BANNER_AVATARS.jerome,
+    BANNER_AVATARS.nelly,
+    BANNER_AVATARS.laura,
+];
+// One full loop of the marquee — slow enough to read as ambient motion.
+const MARQUEE_DURATION = '360s';
+// The animated track is top-aligned (so it always overflows both edges of the
+// clipped window and can never expose a gap) and nudged up by this much so the
+// top tile clips into a sliver, matching the "bleed" look of the static column.
+const MARQUEE_TOP_BLEED = 90;
+// Vertical marquee: the track stacks two identical image sets, so translating by
+// exactly one set height (-50% of the doubled track) lands on a pixel-identical
+// frame and loops seamlessly.
+const marqueeUp = keyframes `
+  from { transform: translateY(0); }
+  to { transform: translateY(-50%); }
+`;
+export const ConversationalAvatarsBanner = ({ title, description, actions = [], animateAvatars = false, background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
+    // Users who ask their OS to minimize motion get the static collage.
+    const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+    const avatarsAnimated = animateAvatars && !prefersReducedMotion;
     const renderAction = (action, index) => (_jsx(MainButton, { text: action.text, size: ButtonSize.xxs, hierarchy: action.primary
             ? ButtonHierarchy.Primary
             : ButtonHierarchy.SecondaryColor, onClick: action.onClick, testId: testId ? `${testId}-action-${index}` : undefined }, `${action.text}-${index}`));
@@ -46,10 +75,34 @@ export const ConversationalAvatarsBanner = ({ title, description, actions = [],
                         // 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))) }) })] }));
+                }, children: _jsx(Box, { display: "flex", flexDirection: "column", position: "absolute", left: 0, right: 0, 
+                    // Static: vertically centered (Figma hero tile). Animated: top-aligned
+                    // and nudged up by the bleed so the top tile clips into a sliver — a
+                    // top-anchored track always overflows both edges, so the marquee can
+                    // never scroll a gap into view.
+                    top: avatarsAnimated ? 0 : '50%', sx: {
+                        transform: avatarsAnimated
+                            ? `translateY(-${MARQUEE_TOP_BLEED}px)`
+                            : 'translateY(-50%)',
+                    }, children: _jsx(Box, { display: "flex", flexDirection: "column", 
+                        // Animated tracks space tiles with marginBottom (on every tile,
+                        // including the last) so the duplicated seam is uniform and the -50%
+                        // loop is pixel-perfect; the static column uses gap.
+                        gap: avatarsAnimated
+                            ? 0
+                            : 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: {
+                            animation: avatarsAnimated
+                                ? `${marqueeUp} ${MARQUEE_DURATION} linear infinite`
+                                : undefined,
+                        }, children: (avatarsAnimated
+                            ? [...MARQUEE_COLUMN, ...MARQUEE_COLUMN]
+                            : 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',
+                                ...(avatarsAnimated && {
+                                    marginBottom: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                                }),
+                            } }, index))) }) }) })] }));
 };

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

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof ConversationalAvatarsBanner>;
 export default meta;
 type Story = StoryObj<typeof ConversationalAvatarsBanner>;
 export declare const Default: Story;
+export declare const Animated: Story;
 export declare const Mobile: Story;

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

@@ -26,6 +26,14 @@ const meta = {
             description: 'Action buttons — set primary: true for the brand (violet) button',
             table: { type: { summary: 'BannerAction[]' } },
         },
+        animateAvatars: {
+            control: 'boolean',
+            description: 'Continuously scroll (marquee) the avatar collage column. Honors prefers-reduced-motion.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
         background: {
             control: 'text',
             description: 'Background of the banner',
@@ -46,6 +54,22 @@ export const Default = {
         actions: [{ text: 'Create New Agent' }],
     },
 };
+export const Animated = {
+    args: {
+        ...Default.args,
+        animateAvatars: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The same banner with animateAvatars on: the collage column scrolls ' +
+                    'as a seamless vertical marquee (top and bottom tiles bleed off the ' +
+                    'clipped edges, no gap or repeated tile at the loop seam). ' +
+                    'Automatically suppressed for users with prefers-reduced-motion.',
+            },
+        },
+    },
+};
 const FIGMA_MOBILE_VIEWPORT = {
     viewport: {
         viewports: {

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DissolveIconProps } from './types';
+/**
+ * An icon that dissolves into dust and reforms whenever its `icon` changes.
+ *
+ * The effect is a pure SVG filter: `feTurbulence` generates a static noise field
+ * that `feDisplacementMap` uses to shove the glyph's pixels around. Driving the
+ * displacement `scale` from 0 up to a peak (while fading + blurring + drifting)
+ * makes the icon crumble into particles; swapping the glyph at the peak and
+ * running the scale back down makes the new icon coalesce from the same dust.
+ */
+export declare const DissolveIcon: React.FC<DissolveIconProps>;

package/dist/stories/UI/DissolveIcon.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useMediaQuery } from '@mui/material';
+import { getIconComponent } from '../../utils';
+// Peak displacement (as a fraction of the icon size) that the turbulence pushes
+// the glyph's pixels apart at the midpoint of the transition — strong enough to
+// read as scattering particles, gentle enough that the shape stays recognizable
+// on the way out and in.
+const DISPLACEMENT_RATIO = 0.7;
+// Layered on top of the raw displacement to sell "dust lifting away" rather than
+// just noise: the glyph drifts up slightly and softens as it scatters.
+const DRIFT_PX = 3;
+const MAX_BLUR_PX = 1.2;
+// Smoothstep so the scatter eases in and out instead of moving linearly.
+const easeInOut = (t) => t * t * (3 - 2 * t);
+/**
+ * An icon that dissolves into dust and reforms whenever its `icon` changes.
+ *
+ * The effect is a pure SVG filter: `feTurbulence` generates a static noise field
+ * that `feDisplacementMap` uses to shove the glyph's pixels around. Driving the
+ * displacement `scale` from 0 up to a peak (while fading + blurring + drifting)
+ * makes the icon crumble into particles; swapping the glyph at the peak and
+ * running the scale back down makes the new icon coalesce from the same dust.
+ */
+export const DissolveIcon = ({ icon, size = 20, weight = 'regular', color = 'currentColor', durationMs = 600, style, testId, }) => {
+    const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+    // Colons from useId aren't valid inside a `url(#id)` filter reference, so strip
+    // them; the result is still unique per instance (avoids filter collisions when
+    // several DissolveIcons render on the same page).
+    const filterId = `dissolve-${React.useId().replace(/:/g, '')}`;
+    const maxScale = size * DISPLACEMENT_RATIO;
+    // `displayedIcon` is what actually renders; `progress` runs 0 (fully formed) ->
+    // 1 (fully dust) -> 0 as the transition plays, with the glyph swapped at 1.
+    const [displayedIcon, setDisplayedIcon] = React.useState(icon);
+    const [progress, setProgress] = React.useState(0);
+    // Tracked in a ref (not effect deps) so mid-animation state updates don't tear
+    // down and restart the running rAF loop.
+    const displayedIconRef = React.useRef(icon);
+    const frameRef = React.useRef();
+    React.useEffect(() => {
+        if (icon === displayedIconRef.current)
+            return;
+        if (prefersReducedMotion) {
+            displayedIconRef.current = icon;
+            setDisplayedIcon(icon);
+            setProgress(0);
+            return;
+        }
+        const start = performance.now();
+        const half = durationMs / 2;
+        let swapped = false;
+        const tick = (now) => {
+            const elapsed = now - start;
+            if (elapsed < half) {
+                // Dissolve the outgoing glyph out (0 -> 1).
+                setProgress(Math.min(1, elapsed / half));
+            }
+            else if (elapsed < durationMs) {
+                // At the peak, swap to the new glyph, then reform it (1 -> 0).
+                if (!swapped) {
+                    swapped = true;
+                    displayedIconRef.current = icon;
+                    setDisplayedIcon(icon);
+                }
+                setProgress(Math.max(0, 1 - (elapsed - half) / half));
+            }
+            else {
+                if (!swapped) {
+                    displayedIconRef.current = icon;
+                    setDisplayedIcon(icon);
+                }
+                setProgress(0);
+                return;
+            }
+            frameRef.current = requestAnimationFrame(tick);
+        };
+        frameRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (frameRef.current)
+                cancelAnimationFrame(frameRef.current);
+        };
+    }, [icon, durationMs, prefersReducedMotion]);
+    const eased = easeInOut(progress);
+    const scale = maxScale * eased;
+    const active = eased > 0;
+    return (_jsxs("span", { "data-testid": testId, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: size,
+            height: size,
+            lineHeight: 0,
+            color,
+            // Only pay for the filter while the transition is running; a crisp,
+            // unfiltered glyph the rest of the time.
+            filter: active
+                ? `url(#${filterId}) blur(${MAX_BLUR_PX * eased}px)`
+                : 'none',
+            opacity: 1 - eased,
+            transform: `translateY(${-DRIFT_PX * eased}px)`,
+            ...style,
+        }, children: [_jsx("svg", { "aria-hidden": true, width: 0, height: 0, style: { position: 'absolute' }, children: _jsxs("filter", { id: filterId, x: "-50%", y: "-50%", width: "200%", height: "200%", colorInterpolationFilters: "sRGB", children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.9", numOctaves: 2, seed: 7, result: "noise" }), _jsx("feDisplacementMap", { in: "SourceGraphic", in2: "noise", scale: scale, xChannelSelector: "R", yChannelSelector: "G" })] }) }), getIconComponent(displayedIcon, {
+                size,
+                weight,
+                color: 'currentColor',
+            })] }));
+};

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DissolveIcon } from './DissolveIcon';
+declare const meta: Meta<typeof DissolveIcon>;
+export default meta;
+type Story = StoryObj<typeof DissolveIcon>;
+/**
+ * Change the `icon` control (e.g. from `Copy` to `Check`) to watch the glyph
+ * scatter into dust and reform.
+ */
+export declare const Playground: Story;
+/**
+ * The copy-confirmation use case: tap the button to toggle between the Copy and
+ * Check icons and see them dissolve into one another.
+ */
+export declare const CopyToCheck: Story;
+/**
+ * Auto-cycles through a set of icons to show the effect works for any glyph
+ * change, not just a two-state toggle.
+ */
+export declare const Cycle: Story;

package/dist/stories/UI/DissolveIcon.stories.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DissolveIcon } from './DissolveIcon';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
+const meta = {
+    title: 'Design System/Components/UI/DissolveIcon',
+    component: DissolveIcon,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        icon: {
+            control: 'text',
+            description: 'The icon to display. Changing this triggers the dust dissolve/reform transition.',
+            table: { type: { summary: 'IconName' } },
+        },
+        size: {
+            control: { type: 'number' },
+            description: 'Pixel size of the square icon',
+            table: { type: { summary: 'number' }, defaultValue: { summary: '20' } },
+        },
+        weight: {
+            control: 'select',
+            options: ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'],
+            description: 'Phosphor icon weight',
+            table: {
+                type: { summary: 'IconWeight' },
+                defaultValue: { summary: 'regular' },
+            },
+        },
+        color: {
+            control: 'text',
+            description: 'Icon color (any CSS color or design token)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'currentColor' },
+            },
+        },
+        durationMs: {
+            control: { type: 'number' },
+            description: 'Total duration of the dissolve-out + reform-in transition',
+            table: { type: { summary: 'number' }, defaultValue: { summary: '600' } },
+        },
+    },
+};
+export default meta;
+/**
+ * Change the `icon` control (e.g. from `Copy` to `Check`) to watch the glyph
+ * scatter into dust and reform.
+ */
+export const Playground = {
+    args: {
+        icon: 'Copy',
+        size: 32,
+        color: 'var(--color-foreground-fg-primary)',
+        durationMs: 600,
+    },
+};
+const COPY_STATES = ['Copy', 'Check'];
+/**
+ * The copy-confirmation use case: tap the button to toggle between the Copy and
+ * Check icons and see them dissolve into one another.
+ */
+export const CopyToCheck = {
+    render: (args) => {
+        const CopyDemo = () => {
+            const [index, setIndex] = useState(0);
+            const icon = COPY_STATES[index];
+            return (_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 24,
+                }, children: [_jsx(DissolveIcon, { ...args, icon: icon, size: 40, color: "var(--color-foreground-fg-success)" }), _jsx(MainButton, { text: icon === 'Check' ? 'Copied!' : 'Copy code', size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryColor, onClick: () => setIndex((i) => (i + 1) % COPY_STATES.length) })] }));
+        };
+        return _jsx(CopyDemo, {});
+    },
+};
+const CYCLE_ICONS = ['Sun', 'Moon', 'Star', 'Heart', 'Lightning'];
+/**
+ * Auto-cycles through a set of icons to show the effect works for any glyph
+ * change, not just a two-state toggle.
+ */
+export const Cycle = {
+    render: (args) => {
+        const CycleDemo = () => {
+            const [index, setIndex] = useState(0);
+            return (_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 24,
+                }, children: [_jsx(DissolveIcon, { ...args, icon: CYCLE_ICONS[index], size: 48, color: "var(--color-foreground-fg-primary)" }), _jsx(MainButton, { text: "Next icon", size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: () => setIndex((i) => (i + 1) % CYCLE_ICONS.length) })] }));
+        };
+        return _jsx(CycleDemo, {});
+    },
+};

package/dist/stories/UI/PromoBanner.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Box, useMediaQuery } from '@mui/material';
+import { keyframes } from '@emotion/react';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
 import { BANNER_AVATARS as AVATARS, AVATAR_TILE_BACKGROUND, } from './bannerAvatars';
+import { DissolveIcon } from './DissolveIcon';
 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*
@@ -17,17 +20,70 @@ const HIDE_COLLAGE = '@media (max-width: 1121px)';
 // 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';
+// One full loop of the avatar marquee. Slow enough to read as ambient motion
+// rather than a distraction.
+const MARQUEE_DURATION = '180s';
+// When the collage animates, the track is top-aligned (so it always overflows
+// both edges of the 220px window and can never expose a gap) and nudged up by
+// this much so the top row of tiles is clipped into a sliver, matching the
+// "bleed" look of the static collage instead of sitting flush against the edge.
+const MARQUEE_TOP_BLEED = 90;
+// How long the copy-confirmation state (Check icon + pulse) lingers before the
+// button reverts to its idle Copy state.
+const COPY_FEEDBACK_MS = 1200;
+// Vertical marquee: the track holds two identical image sets stacked, so
+// translating by exactly one set height (-50% of the doubled track) lands on a
+// pixel-identical frame and loops seamlessly. Even columns scroll up, odd
+// columns scroll down, so adjacent columns drift in opposite directions.
+const marqueeUp = keyframes `
+  from { transform: translateY(0); }
+  to { transform: translateY(-50%); }
+`;
+const marqueeDown = keyframes `
+  from { transform: translateY(-50%); }
+  to { transform: translateY(0); }
+`;
+// A restrained pop the promo-code *label* plays as it morphs to "COPIED!" — a
+// small, tasteful scale on the pill only (never the whole button), so the copy
+// confirmation reads as a deliberate success state rather than a bounce.
+const labelPop = keyframes `
+  0% { transform: scale(1); }
+  40% { transform: scale(1.08); }
+  100% { transform: scale(1); }
+`;
 // 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.
+//
+// The two columns on a side hold DISJOINT sets of avatars (there are exactly 6
+// avatars, split 3/3), so the same face never shows up in both columns of a
+// side — statically or while the marquee scrolls. Each column's `marqueeImages`
+// is therefore just its 3 avatars; doubling that set for the seamless loop keeps
+// no two adjacent tiles (or seam tiles) identical since the three are distinct.
 const LEFT_COLUMNS = [
-    { offset: 0, images: [AVATARS.jerome, AVATARS.micheal, AVATARS.jerome] },
-    { offset: -40, images: [AVATARS.laura, AVATARS.nelly, AVATARS.fjolla] },
+    {
+        offset: -40,
+        images: [AVATARS.micheal, AVATARS.nelly, AVATARS.fjolla],
+        marqueeImages: [AVATARS.nelly, AVATARS.micheal, AVATARS.fjolla],
+    },
+    {
+        offset: 0,
+        images: [AVATARS.laura, AVATARS.jerome, AVATARS.yuruo],
+        marqueeImages: [AVATARS.laura, AVATARS.jerome, AVATARS.yuruo],
+    },
 ];
 const RIGHT_COLUMNS = [
-    { offset: 0, images: [AVATARS.jerome, AVATARS.fjolla, AVATARS.yuruo] },
-    { offset: -20, images: [AVATARS.micheal, AVATARS.laura, AVATARS.nelly] },
+    {
+        offset: -20,
+        images: [AVATARS.laura, AVATARS.yuruo, AVATARS.jerome],
+        marqueeImages: [AVATARS.yuruo, AVATARS.laura, AVATARS.jerome],
+    },
+    {
+        offset: 0,
+        images: [AVATARS.fjolla, AVATARS.yuruo, AVATARS.nelly],
+        marqueeImages: [AVATARS.fjolla, AVATARS.yuruo, 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',
@@ -35,18 +91,38 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
     'API-first',
     'Enterprise-ready',
     'GDPR Compliant',
-], promoCode, promoCodeLabel = 'YOUR PROMO CODE', onCopyPromoCode, ctaText, onCtaClick, ctaLoading, ctaDisabled, footerText, mobileTitle, mobileDescription, mobileCtaText, showImages = true, background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
+], promoCode, promoCodeLabel = 'YOUR PROMO CODE', onCopyPromoCode, ctaText, onCtaClick, ctaLoading, ctaDisabled, footerText, mobileTitle, mobileDescription, mobileCtaText, showImages = true, animateAvatars = false, animateActions = false, 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;
+    // Users who ask their OS to minimize motion get a static banner: the marquee
+    // and the hover-lift/pulse are suppressed, while the (non-motion) copy->check
+    // icon swap still fires as feedback.
+    const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+    const avatarsAnimated = animateAvatars && !prefersReducedMotion;
+    const actionsMotion = animateActions && !prefersReducedMotion;
+    // Tracks the just-copied state so the promo-code button can show a Check icon
+    // (and, when motion is allowed, a pulse) for a moment after a copy.
+    const [copied, setCopied] = React.useState(false);
+    const copyResetTimer = React.useRef();
+    React.useEffect(() => () => {
+        if (copyResetTimer.current)
+            clearTimeout(copyResetTimer.current);
+    }, []);
     const handleCopyPromoCode = () => {
         if (!promoCode)
             return;
         navigator.clipboard?.writeText(promoCode);
         onCopyPromoCode?.(promoCode);
+        if (animateActions) {
+            setCopied(true);
+            if (copyResetTimer.current)
+                clearTimeout(copyResetTimer.current);
+            copyResetTimer.current = setTimeout(() => setCopied(false), COPY_FEEDBACK_MS);
+        }
     };
     // Features are part of the desktop-only layout (hidden on the mobile variant).
     const featuresText = !isMobile && features?.length
@@ -55,11 +131,47 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
     const renderAvatarMatrix = (columns) => {
         if (!showImages)
             return null;
-        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 (_jsx(Box, { display: "flex", 
+            // Static collage is vertically centered (Figma "hero middle tile"), but
+            // an animated track must be top-aligned: centering a track only two sets
+            // tall lets its bottom edge scroll into the window and expose a gap, so
+            // we pin it to the top where it always overflows both edges instead.
+            alignItems: avatarsAnimated ? 'flex-start' : '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) => {
+                // When animating, the track holds two copies of the (de-duplicated,
+                // full-length) marquee sequence so it can scroll one set's worth and
+                // loop seamlessly with no repeated tile at the seam. Even columns
+                // scroll up, odd columns scroll down.
+                const trackImages = avatarsAnimated
+                    ? [...column.marqueeImages, ...column.marqueeImages]
+                    : column.images;
+                const trackAnimation = avatarsAnimated
+                    ? `${columnIndex % 2 === 0 ? marqueeUp : marqueeDown} ${MARQUEE_DURATION} linear infinite`
+                    : undefined;
+                return (
+                // Outer wrapper carries the static positioning; the inner track
+                // carries the marquee animation so the two transforms don't clash.
+                // When animating we still layer the per-column interlock `offset` on
+                // top of the top-bleed nudge, so the two columns stay staggered
+                // (never aligned tile-for-tile) instead of starting in lockstep.
+                _jsx(Box, { display: "flex", flexDirection: "column", flexShrink: 0, sx: {
+                        transform: `translateY(${avatarsAnimated
+                            ? -MARQUEE_TOP_BLEED + column.offset
+                            : column.offset}px)`,
+                    }, children: _jsx(Box, { display: "flex", flexDirection: "column", 
+                        // Animated tracks space tiles with marginBottom (applied to every
+                        // tile, including the last) so the duplicated seam is uniform and
+                        // the -50% loop is pixel-perfect; the static layout uses gap.
+                        gap: avatarsAnimated
+                            ? 0
+                            : 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { animation: trackAnimation }, children: trackImages.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,
+                                ...(avatarsAnimated && {
+                                    marginBottom: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                                }),
+                            } }, 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,
@@ -80,11 +192,28 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
                                 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: {
+                        }, children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryColor, showTrailingIcon: true, trailingIcon: copied ? 'Check' : 'Copy', trailingIconSlot: actionsMotion ? (_jsx(DissolveIcon, { icon: copied ? 'Check' : 'Copy', size: 20, color: "currentColor" })) : undefined, 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 }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, loading: ctaLoading, disabled: ctaDisabled, 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)] }));
+                                        }, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", 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, sx: {
+                                            // On copy the pill morphs from the violet "promo code"
+                                            // badge into the DS success badge, easing the colour so the
+                                            // state change feels intentional rather than an instant swap.
+                                            backgroundColor: copied
+                                                ? 'var(--color-background-bg-badge-accent-success)'
+                                                : 'var(--color-background-bg-icon-badge)',
+                                            transition: 'background-color 0.25s ease',
+                                            // The pop is motion, so it's gated on actionsMotion; the
+                                            // colour/label morph above is a non-motion state change and
+                                            // still fires for reduced-motion users as feedback.
+                                            ...(actionsMotion &&
+                                                copied && {
+                                                animation: `${labelPop} 0.35s ease`,
+                                            }),
+                                        }, children: _jsx(Typography, { size: TypographySize.Text2XS, weight: TypographyWeight.SemiBold, 
+                                            // Both the violet and success badge fills are invariant, so
+                                            // pin the label to the matching on-colour text token.
+                                            color: copied
+                                                ? 'var(--color-text-text-success-on-color)'
+                                                : 'var(--color-text-text-dark)', children: copied ? 'COPIED!' : promoCodeLabel }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, loading: ctaLoading, disabled: ctaDisabled, 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,4 +7,5 @@ export declare const Default: Story;
 export declare const WithoutImages: Story;
 export declare const WithoutPromoCode: Story;
 export declare const TitleAndCtaOnly: Story;
+export declare const Animated: Story;
 export declare const Mobile: Story;

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

@@ -102,6 +102,22 @@ const meta = {
                 type: { summary: 'boolean' },
             },
         },
+        animateAvatars: {
+            control: 'boolean',
+            description: 'Continuously scroll (marquee) the side avatar collages. Honors prefers-reduced-motion.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        animateActions: {
+            control: 'boolean',
+            description: 'Enable the premium copy confirmation: the promo-code label morphs into a success "COPIED!" state (Copy->Check icon swap + subtle pop). Honors prefers-reduced-motion.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
         background: {
             control: 'text',
             description: 'Background of the banner',
@@ -162,6 +178,28 @@ export const TitleAndCtaOnly = {
         ctaText: 'Get Started',
     },
 };
+export const Animated = {
+    args: {
+        ...Default.args,
+        animateAvatars: true,
+        animateActions: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The same PromoBanner as Default with both optional animations on: ' +
+                    'the side avatar collages scroll as a seamless vertical marquee ' +
+                    '(adjacent columns drift in opposite directions), and copying the ' +
+                    'promo code morphs its label pill into a success "COPIED!" state with ' +
+                    'a Copy->Check icon swap and a subtle pop. Both are gated ' +
+                    'independently via animateAvatars / animateActions and are ' +
+                    'automatically suppressed for users with prefers-reduced-motion (the ' +
+                    'label/colour morph and Copy->Check swap still fire as non-motion ' +
+                    'feedback; only the marquee and the pop are dropped).',
+            },
+        },
+    },
+};
 const FIGMA_MOBILE_VIEWPORT = {
     viewport: {
         viewports: {

package/dist/stories/UI/bannerAvatars.js

@@ -3,12 +3,12 @@
 // 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`,
+    nelly: `${AVATAR_BASE}/nelly.webp`,
+    micheal: `${AVATAR_BASE}/micheal.webp`,
+    fjolla: `${AVATAR_BASE}/fjolla.webp`,
+    laura: `${AVATAR_BASE}/laura.webp`,
+    yuruo: `${AVATAR_BASE}/yuruo.webp`,
+    jerome: `${AVATAR_BASE}/jerome.webp`,
 };
 // Placeholder gradient shown behind avatars with transparent areas so every
 // tile has a consistent backdrop (matches the Figma image tile fill).

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

@@ -4,6 +4,7 @@ export * from './Avatar';
 export * from './ConversationalAvatarsBanner';
 export * from './CheckIcon';
 export * from './ConversationalVoiceAgentsBanner';
+export * from './DissolveIcon';
 export * from './HintBubble';
 export * from './Logo';
 export * from './Menu';

package/dist/stories/UI/index.js

@@ -4,6 +4,7 @@ export * from './Avatar';
 export * from './ConversationalAvatarsBanner';
 export * from './CheckIcon';
 export * from './ConversationalVoiceAgentsBanner';
+export * from './DissolveIcon';
 export * from './HintBubble';
 export * from './Logo';
 export * from './Menu';

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

@@ -374,6 +374,10 @@ export interface PromoBannerProps {
     mobileCtaText?: string;
     /** Whether to show the avatar collage on both sides of the banner */
     showImages?: boolean;
+    /** Whether to continuously scroll (marquee) the side avatar collages. Honors prefers-reduced-motion. Defaults to false. */
+    animateAvatars?: boolean;
+    /** Whether to enable the premium copy confirmation: the promo-code label pill morphs into a success "COPIED!" state (with a subtle pop) and the button icon swaps Copy→Check. Honors prefers-reduced-motion. Defaults to false. */
+    animateActions?: boolean;
     /** Background of the banner */
     background?: string;
     /** Custom style of the banner */
@@ -405,6 +409,8 @@ export interface ConversationalAvatarsBannerProps {
     description?: string;
     /** Action buttons */
     actions?: BannerAction[];
+    /** Whether to continuously scroll (marquee) the avatar collage column. Honors prefers-reduced-motion. Defaults to false. */
+    animateAvatars?: boolean;
     /** Background of the banner */
     background?: string;
     /** Custom style of the banner */
@@ -595,3 +601,26 @@ export interface ButtonCardProps {
     /** Test id */
     testId?: string;
 }
+/**
+ * {@link DissolveIcon} props. Renders a single icon that, when the `icon` prop
+ * changes, animates a "turn to dust and reform" transition: the outgoing glyph
+ * scatters into particles (SVG turbulence displacement) and fades out, then the
+ * incoming glyph coalesces back from the same dust. Honors prefers-reduced-motion
+ * (falls back to an instant swap).
+ */
+export interface DissolveIconProps {
+    /** The icon to display. Changing this triggers the dust dissolve/reform transition. */
+    icon: IconName;
+    /** Pixel size of the (square) icon. Defaults to 20. */
+    size?: number;
+    /** Phosphor icon weight. Defaults to 'regular'. */
+    weight?: IconWeight;
+    /** Icon color — any CSS color or design token. Defaults to 'currentColor'. */
+    color?: string;
+    /** Total duration of the dissolve-out + reform-in transition, in ms. Defaults to 600. */
+    durationMs?: number;
+    /** Custom style applied to the icon wrapper. */
+    style?: CSSProperties;
+    /** Test ID applied to the icon wrapper. */
+    testId?: string;
+}

package/package.json

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