@beydesign/storybook 0.4.2 → 0.4.4

package/dist/stories/Buttons/MainButton.js

@@ -4,53 +4,121 @@ import styled from '@emotion/styled';
 import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './types';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
+const isDisabled = (props) => props.$state === ButtonState.Disabled || props.$disabled;
+const getTextColor = (props) => {
+    if (props.$destructive) {
+        if (isDisabled(props))
+            return 'var(--color-text-text-disabled)';
+        return 'var(--color-text-text-white)';
+    }
+    if (isDisabled(props))
+        return 'var(--color-text-text-inactive)';
+    switch (props.$hierarchy) {
+        case ButtonHierarchy.Primary:
+            return 'var(--color-text-text-on-accent-color)';
+        case ButtonHierarchy.PrimaryLemon:
+            return 'var(--color-text-text-title)';
+        case ButtonHierarchy.Secondary:
+            return 'var(--color-text-text-title)';
+        case ButtonHierarchy.SecondaryColor:
+            return 'var(--color-text-text-clicable)';
+        case ButtonHierarchy.SecondaryTransparent:
+            return 'var(--color-text-text-white)';
+        case ButtonHierarchy.Tertiary:
+            return 'var(--color-text-text-title)';
+        case ButtonHierarchy.TertiaryColor:
+            return 'var(--color-text-text-clicable)';
+        case ButtonHierarchy.WhiteText:
+            return 'var(--color-text-text-white)';
+        default:
+            return 'var(--color-text-text-white)';
+    }
+};
+const ICON_ONLY_SIZE = {
+    [ButtonShape.Square]: {
+        [ButtonSize.xxs]: 32,
+        [ButtonSize.xs]: 36,
+        [ButtonSize.sm]: 40,
+        [ButtonSize.md]: 44,
+        [ButtonSize.lg]: 48,
+        [ButtonSize.xl]: 56,
+    },
+    [ButtonShape.Circle]: {
+        [ButtonSize.xxs]: 28,
+        [ButtonSize.xs]: 32,
+        [ButtonSize.sm]: 36,
+        [ButtonSize.md]: 40,
+        [ButtonSize.lg]: 44,
+        [ButtonSize.xl]: 52,
+    },
+};
+// Figma sizes a text button by its height, with the label centred inside, so
+// take the height from the design rather than deriving it from padding: a
+// CSS border sits outside the box where a Figma stroke sits inside, which
+// would otherwise leave every button 2px taller than the design.
+const TEXT_BUTTON_HEIGHT = {
+    [ButtonSize.xxs]: 32,
+    [ButtonSize.xs]: 36,
+    [ButtonSize.sm]: 40,
+    [ButtonSize.md]: 44,
+    [ButtonSize.lg]: 48,
+    [ButtonSize.xl]: 52,
+};
 const StyledButton = styled.button `
   text-transform: none;
-  padding: ${(props) => props.$displayIconMode === ButtonDisplayMode.Only
-    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
-    : props.$sizeStyles.padding};
+  box-sizing: border-box;
+  ${(props) => {
+    if (props.$displayIconMode === ButtonDisplayMode.Only) {
+        const box = `${ICON_ONLY_SIZE[props.$shape][props.$size]}px`;
+        return `padding: 0;
+  width: ${box};
+  height: ${box};`;
+    }
+    // min-height, not height, so a label that ever wraps grows the button
+    // instead of spilling out of it.
+    return `padding: ${props.$sizeStyles.padding};
+  min-height: ${TEXT_BUTTON_HEIGHT[props.$size]}px;`;
+}}
   font-size: ${(props) => props.$sizeStyles.fontSize};
   border-radius: ${(props) => props.$shape === ButtonShape.Square
     ? 'var(--spacing-tokens-size-in-px-radius-radius-xs)'
     : 'var(--spacing-tokens-size-in-px-spacing-spacing-11xl)'};
   background: ${(props) => {
     if (props.$destructive) {
-        if (props.$state === ButtonState.Disabled || props.$disabled)
+        // Destructive is the one hierarchy Figma gives its own disabled fill,
+        // rather than the shared bg-button-disabled every other one uses.
+        if (isDisabled(props))
             return 'var(--color-background-bg-element)';
         return 'var(--color-background-bg-error)';
     }
+    if (isDisabled(props)) {
+        switch (props.$hierarchy) {
+            case ButtonHierarchy.Tertiary:
+            case ButtonHierarchy.TertiaryColor:
+                return 'transparent';
+            case ButtonHierarchy.WhiteText:
+                // Stays a scrim when disabled so it reads over media.
+                return 'var(--primitives-white-primary-black-10)';
+            default:
+                return 'var(--color-background-bg-button-disabled)';
+        }
+    }
     switch (props.$hierarchy) {
         case ButtonHierarchy.Primary:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-background-bg-button-disabled)';
             return 'var(--color-background-bg-brand-primary)';
         case ButtonHierarchy.PrimaryLemon:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-background-bg-element)';
             return 'var(--color-background-bg-brand-secondary)';
         case ButtonHierarchy.Secondary:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-background-bg-button-disabled)';
             return 'transparent';
         case ButtonHierarchy.SecondaryColor:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-background-bg-element)';
             return 'var(--color-background-bg-secondary-action)';
         case ButtonHierarchy.SecondaryTransparent:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-background-bg-overlay-1)';
             return 'var(--color-background-bg-button-transparent)';
         case ButtonHierarchy.Tertiary:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'transparent';
             return 'transparent';
         case ButtonHierarchy.TertiaryColor:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'transparent';
             return 'transparent';
         case ButtonHierarchy.WhiteText:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-background-bg-button-disabled)';
             // 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)';
@@ -58,89 +126,43 @@ const StyledButton = styled.button `
             return 'var(--color-background-bg-brand-primary)';
     }
 }};
-  color: ${(props) => {
-    if (props.$destructive) {
-        if (props.$state === ButtonState.Disabled || props.$disabled)
-            return 'var(--color-text-text-disabled)';
-        return 'var(--color-text-text-white)';
-    }
-    switch (props.$hierarchy) {
-        case ButtonHierarchy.Primary:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-text-text-inactive)';
-            return 'var(--color-text-text-on-accent-color)';
-        case ButtonHierarchy.PrimaryLemon:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-text-text-subtle)';
-            return 'var(--color-text-text-title)';
-        case ButtonHierarchy.Secondary:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-text-text-inactive)';
-            return 'var(--color-text-text-title)';
-        case ButtonHierarchy.SecondaryColor:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-text-text-disabled)';
-            return 'var(--color-text-text-clicable)';
-        case ButtonHierarchy.SecondaryTransparent:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-text-text-white)';
-            return 'var(--color-text-text-white)';
-        case ButtonHierarchy.Tertiary:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-text-text-disabled)';
-            return 'var(--color-text-text-title)';
-        case ButtonHierarchy.TertiaryColor:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-text-text-disabled)';
-            return 'var(--color-text-text-clicable)';
-        case ButtonHierarchy.WhiteText:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-text-text-inactive)';
-            return 'var(--color-text-text-white)';
-        default:
-            return 'var(--color-text-text-white)';
-    }
-}};
+  color: ${getTextColor};
   border: 1px solid
     ${(props) => {
     if (props.$destructive) {
-        if (props.$state === ButtonState.Disabled || props.$disabled)
+        if (isDisabled(props))
             return 'var(--color-background-bg-element)';
         return 'var(--color-background-bg-error)';
     }
+    if (isDisabled(props)) {
+        switch (props.$hierarchy) {
+            case ButtonHierarchy.Tertiary:
+            case ButtonHierarchy.TertiaryColor:
+            case ButtonHierarchy.WhiteText:
+                return 'transparent';
+            default:
+                return 'var(--color-border-border-disabled)';
+        }
+    }
     switch (props.$hierarchy) {
         case ButtonHierarchy.Primary:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-border-border-disabled)';
-            return 'var(--color-background-bg-brand-primary)';
+            return 'var(--color-border-border-brand)';
         case ButtonHierarchy.PrimaryLemon:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-border-border-component)';
             return 'var(--color-background-bg-brand-secondary)';
         case ButtonHierarchy.Secondary:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-border-border-disabled)';
             return 'var(--color-border-border-component)';
         case ButtonHierarchy.SecondaryColor:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-border-border-component)';
             return 'var(--color-border-border-secondary-action)';
         case ButtonHierarchy.SecondaryTransparent:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'var(--color-border-border-disabled)';
             return 'transparent';
         case ButtonHierarchy.Tertiary:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'transparent';
             return 'transparent';
         case ButtonHierarchy.TertiaryColor:
-            if (props.$state === ButtonState.Disabled || props.$disabled)
-                return 'transparent';
             return 'transparent';
         case ButtonHierarchy.WhiteText:
             return 'transparent';
         default:
-            return 'var(--color-background-bg-brand-primary)';
+            return 'var(--color-border-border-brand)';
     }
 }};
   display: flex;
@@ -181,9 +203,9 @@ const StyledButton = styled.button `
         case ButtonHierarchy.SecondaryTransparent:
             return 'var(--color-background-bg-button-transparent-hover)';
         case ButtonHierarchy.Tertiary:
-            return 'var(--color-background-bg-component-hover)';
+            return 'var(--color-background-bg-button-overlay)';
         case ButtonHierarchy.TertiaryColor:
-            return 'var(--color-background-bg-card-highlight-hover)';
+            return 'var(--primitives-white-primary-white-10)';
         case ButtonHierarchy.WhiteText:
             // Darken the black-40 scrim one step on hover (no black-50 exists).
             return 'var(--primitives-white-primary-black-60)';
@@ -191,6 +213,9 @@ const StyledButton = styled.button `
             return 'var(--color-background-bg-brand-primary-hover)';
     }
 }};
+    color: ${(props) => !props.$destructive && props.$hierarchy === ButtonHierarchy.TertiaryColor
+    ? 'var(--color-text-text-clicable-hover)'
+    : getTextColor(props)};
     border-color: ${(props) => {
     if (props.$destructive) {
         return 'var(--primitives-desktop-primary-red-700)';
@@ -224,58 +249,43 @@ const StyledButton = styled.button `
   }
 `;
 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, }) => {
-    const getIconSize = () => {
-        const sizes = {
-            [ButtonSize.xl]: 24,
-            [ButtonSize.lg]: 22,
-            [ButtonSize.md]: 20,
-            [ButtonSize.sm]: 18,
-            [ButtonSize.xs]: 16,
-            [ButtonSize.xxs]: 14,
-        };
-        return sizes[size] || sizes[ButtonSize.xl];
-    };
+    // Figma draws a 20px icon at every button size.
+    const iconSize = 20;
+    // Vertical padding comes from TEXT_BUTTON_HEIGHT; only the horizontal value
+    // is set here. Icon-only buttons take their box from ICON_ONLY_SIZE and
+    // ignore padding entirely.
+    //
+    // Figma leaves the sm, lg and xl horizontal padding, and the xl gap, off the
+    // spacing scale, so those are raw values with no token to point at.
     const getButtonSize = () => {
         const sizes = {
             [ButtonSize.xl]: {
-                padding: displayIconMode === ButtonDisplayMode.Only
-                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
-                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
+                padding: '0 22px',
                 fontSize: 'var(--global-font-size-3)',
-                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+                gap: '10px',
             },
             [ButtonSize.lg]: {
-                padding: displayIconMode === ButtonDisplayMode.Only
-                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
-                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)',
+                padding: '0 18px',
                 fontSize: 'var(--global-font-size-3)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             },
             [ButtonSize.md]: {
-                padding: displayIconMode === ButtonDisplayMode.Only
-                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
-                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+                padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
                 fontSize: 'var(--global-font-size-2)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             },
             [ButtonSize.sm]: {
-                padding: displayIconMode === ButtonDisplayMode.Only
-                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
-                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+                padding: '0 14px',
                 fontSize: 'var(--global-font-size-1)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             },
             [ButtonSize.xs]: {
-                padding: displayIconMode === ButtonDisplayMode.Only
-                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
-                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
                 fontSize: 'var(--global-font-size-1)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             },
             [ButtonSize.xxs]: {
-                padding: displayIconMode === ButtonDisplayMode.Only
-                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)'
-                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-md)',
                 fontSize: 'var(--global-font-size-0)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             },
@@ -283,7 +293,7 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
         return sizes[size] || sizes[ButtonSize.xl];
     };
     const iconProps = {
-        size: getIconSize(),
+        size: iconSize,
         color: disabled ? 'var(--color-text-text-disabled)' : 'currentColor',
         weight: iconWeight,
     };

package/dist/stories/EntityCard/EntityCard.js

@@ -18,6 +18,8 @@ const ASPECT_RATIO_BY_VIEW = {
     agent: '1 / 1',
     video: '16 / 9',
 };
+/** Hook the root's hover/focus rules use to reveal the action buttons. */
+const ACTIONS_CLASS = 'EntityCard-actions';
 const spin = keyframes `
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
@@ -34,19 +36,44 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
     const hasMenu = showMenu && menuItems.length > 0;
     const isProcessing = processing && !error;
     const canPreview = !!onPreview && !isProcessing && !error;
-    const showActions = hovered && (canPreview || hasMenu);
+    const showActions = canPreview || hasMenu;
     const showBadge = showStatusBadge && !!statusBadgeText;
     const showImage = !!image && !imageError;
     const resolvedTestId = testId ?? `${entityKey}-${isVideo ? 'video' : 'entity'}-card`;
+    const handlePreviewButtonClick = (event) => {
+        event.stopPropagation();
+        onPreview?.();
+    };
     return (_jsxs(Box, { width: cardWidth, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: hovered
             ? 'var(--color-background-bg-card-highlight-hover)'
-            : 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), sx: { transition: 'background-color 0.15s ease-in-out' }, "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: {
+            : 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), role: canPreview ? 'button' : undefined, tabIndex: canPreview ? 0 : undefined, "aria-label": canPreview ? (previewButtonText ?? name) : undefined, onClick: canPreview ? onPreview : undefined, onKeyDown: canPreview
+            ? (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    onPreview?.();
+                }
+            }
+            : undefined, sx: {
+            transition: 'background-color 0.15s ease-in-out',
+            cursor: canPreview ? 'pointer' : 'default',
+            [`&:hover .${ACTIONS_CLASS}, &:focus-within .${ACTIONS_CLASS}`]: {
+                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: {
                             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, { 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 }, children: [canPreview &&
-                                (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.sm }))] })), isVideo ? (_jsxs(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-lg)', sx: {
+                        } }), 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: {
+                            zIndex: 4,
+                            transition: 'opacity 0.15s ease-in-out',
+                            '@media (hover: hover)': {
+                                opacity: 0,
+                                pointerEvents: 'none',
+                            },
+                        }, children: [canPreview &&
+                                (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: handlePreviewButtonClick, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: handlePreviewButtonClick, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Box, { onClick: (event) => event.stopPropagation(), children: _jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.sm }) }))] })), isVideo ? (_jsxs(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-lg)', sx: {
                             zIndex: 2,
                             pointerEvents: 'none',
                             backgroundImage: 'linear-gradient(rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)',

package/dist/stories/Form/AutoComplete.js

@@ -118,7 +118,7 @@ export const AutoComplete = ({ options, value, onChange, leadingIcon = 'Magnifyi
     }, [options, searchText]);
     const sizeToken = getTypographySizeToken(TypographySize.TextS);
     const weightToken = getTypographyWeightToken(TypographyWeight.Regular);
-    const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
+    const { fontSize, fontWeight, fontFamily, lineHeight, paragraphIndent, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
     return (_jsxs(Box, { display: 'flex', flexDirection: 'column', position: 'relative', width: "100%", children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', alignItems: 'center', justifyContent: 'center', border: `1px solid ${focused ? 'var(--color-border-border-component-active)' : 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
                     ? 'var(--color-background-bg-component-disabled)'
                     : 'var(--color-background-bg-component)', children: [getIconComponent(leadingIcon, {
@@ -133,10 +133,8 @@ export const AutoComplete = ({ options, value, onChange, leadingIcon = 'Magnifyi
                             fontSize: fontSize,
                             fontWeight: fontWeight,
                             fontFamily: fontFamily + ', sans-serif',
-                            lineHeight: lineHeight + 'px',
-                            letterSpacing: letterSpacing,
+                            lineHeight: lineHeight,
                             textIndent: paragraphIndent,
-                            marginBottom: paragraphSpacing,
                             textTransform: textTransform,
                             textDecoration: textDecoration,
                             color: disabled

package/dist/stories/Form/Checkbox.js

@@ -2,6 +2,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Checkbox as MuiCheckbox } from '@mui/material';
 import { CheckboxType } from './types';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+/** Control is 20px; the check insets 12.5% and the radio dot 31.25% per Figma. */
+const CONTROL_SIZE = 20;
+const CHECK_SIZE = 15;
+const RADIO_DOT_SIZE = 7.5;
+const RADIUS_FULL = 'var(--spacing-tokens-size-in-px-radius-radius-full)';
+const FG_TERTIARY = 'var(--color-foreground-fg-tertiary)';
+const FG_DISABLED = 'var(--color-foreground-fg-disabled)';
+const FG_ON_ACCENT = 'var(--color-foreground-fg-on-primary-accent-color)';
+/** Class hook so the MUI root can drive the control's hover border. */
+const CONTROL_CLASS = 'BeyCheckbox-control';
+const accentFor = (type) => type === CheckboxType.Radio
+    ? 'var(--color-foreground-fg-accent-violet)'
+    : 'var(--color-foreground-fg-violet)';
+const controlStyles = (type, checked, disabled) => ({
+    boxSizing: 'border-box',
+    width: `${CONTROL_SIZE}px`,
+    height: `${CONTROL_SIZE}px`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    borderRadius: type === CheckboxType.Radio
+        ? RADIUS_FULL
+        : 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+    // Only checked + enabled is a solid fill; every other state is an outline,
+    // disabled included — so a disabled checked control stays hollow.
+    border: checked && !disabled
+        ? 'none'
+        : `1px solid ${disabled ? FG_DISABLED : FG_TERTIARY}`,
+    backgroundColor: checked && !disabled ? accentFor(type) : 'transparent',
+    transition: 'all 0.2s ease-in-out',
+});
+/** The check glyph or radio dot shown once the control is checked. */
+const ControlMark = ({ type, disabled, }) => {
+    const color = disabled ? FG_DISABLED : FG_ON_ACCENT;
+    if (type === CheckboxType.Radio) {
+        return (_jsx(Box, { sx: {
+                width: `${RADIO_DOT_SIZE}px`,
+                height: `${RADIO_DOT_SIZE}px`,
+                borderRadius: RADIUS_FULL,
+                backgroundColor: color,
+            } }));
+    }
+    return getIconComponent('Check', {
+        size: `${CHECK_SIZE}px`,
+        weight: 'bold',
+        color,
+    });
+};
 export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disabled, required, onChange, style, }) => {
     const props = {
         checked,
@@ -18,48 +68,22 @@ export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disable
             onChange(event);
         }
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', sx: style, children: [type === CheckboxType.Checkbox ? (_jsx(MuiCheckbox, { ...props, sx: {
+    // A checked control has no border, so the hover colour is a no-op there and
+    // this stays correct even when MUI owns the checked state. The checkbox is
+    // hovered via its MUI root (the input overlays the control), the radio
+    // directly.
+    const hoverBorder = { borderColor: accentFor(type) };
+    const checkboxHoverSx = disabled
+        ? undefined
+        : { [`&:hover .${CONTROL_CLASS}`]: hoverBorder };
+    const radioHoverSx = disabled ? undefined : { '&:hover': hoverBorder };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', sx: style, children: [type === CheckboxType.Checkbox ? (_jsx(MuiCheckbox, { ...props, icon: _jsx(Box, { className: CONTROL_CLASS, sx: controlStyles(type, false, !!disabled) }), checkedIcon: _jsx(Box, { className: CONTROL_CLASS, sx: controlStyles(type, true, !!disabled), children: _jsx(ControlMark, { type: type, disabled: !!disabled }) }), sx: {
                     padding: 0,
-                    '&.Mui-checked': {
-                        color: disabled
-                            ? 'var(--color-background-bg-button-disabled)'
-                            : 'var(--color-background-bg-brand-primary)',
-                        borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
-                        '&:hover': {
-                            color: 'var(--color-background-bg-brand-primary-hover)',
-                        },
-                    },
-                } })) : type === CheckboxType.Radio ? (_jsx(Box, { onClick: handleRadioClick, sx: {
-                    width: '20px',
-                    height: '20px',
-                    borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)',
-                    border: checked ? '6px solid' : '1px solid',
-                    borderColor: disabled
-                        ? 'var(--color-background-bg-button-disabled)'
-                        : checked
-                            ? 'var(--color-background-bg-brand-primary)'
-                            : 'var(--color-background-bg-button-disabled)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    '&:hover': { backgroundColor: 'transparent' },
+                    ...checkboxHoverSx,
+                } })) : type === CheckboxType.Radio ? (_jsx(Box, { onClick: handleRadioClick, className: CONTROL_CLASS, sx: {
+                    ...controlStyles(type, !!checked, !!disabled),
                     cursor: disabled ? 'not-allowed' : 'pointer',
-                    position: 'relative',
-                    backgroundColor: 'transparent',
-                    boxSizing: 'border-box',
-                    transition: 'all 0.2s ease-in-out',
-                    '&:hover': !disabled
-                        ? {
-                            borderColor: 'var(--color-background-bg-brand-primary-hover)',
-                        }
-                        : undefined,
-                    '&::after': {
-                        content: '""',
-                        position: 'absolute',
-                        width: '10px',
-                        height: '10px',
-                        borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)',
-                        backgroundColor: 'transparent',
-                        transition: 'all 0.2s ease-in-out',
-                    },
-                } })) : null, label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, children: label }))] }));
+                    ...radioHoverSx,
+                }, children: checked && _jsx(ControlMark, { type: type, disabled: !!disabled }) })) : null, label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, children: label }))] }));
 };

package/dist/stories/Form/DatePicker.js

@@ -24,6 +24,7 @@ const COLOR = {
     component: 'var(--color-background-bg-component)',
     borderComponent: 'var(--color-border-border-component)',
     borderBrand: 'var(--color-border-border-brand)',
+    borderDarkOnly: 'var(--color-border-border-only-for-dark-mode)',
     fgSecondary: 'var(--color-foreground-fg-secondary)',
 };
 const RADIUS_FULL = 'var(--spacing-tokens-size-in-px-radius-radius-full)';
@@ -106,7 +107,7 @@ const CalendarCell = ({ label, onClick, disabled = false, muted = false, today =
             boxSizing: 'border-box',
             cursor: interactive ? 'pointer' : 'default',
             ...hoverSx,
-        }, children: _jsx(Box, { className: "datepicker-cell-inner", display: "flex", alignItems: "center", justifyContent: "center", width: "28px", height: "28px", borderRadius: "14px", bgcolor: innerBg, children: _jsx(Typography, { className: "datepicker-cell-label", size: TypographySize.TextS, weight: TypographyWeight.Regular, color: textColor, textStyle: { lineHeight: '20px' }, children: label }) }) }));
+        }, children: _jsx(Box, { className: "datepicker-cell-inner", display: "flex", alignItems: "center", justifyContent: "center", width: "28px", height: "28px", borderRadius: "14px", bgcolor: innerBg, children: _jsx(Typography, { className: "datepicker-cell-label", size: TypographySize.TextS, weight: TypographyWeight.Regular, color: textColor, children: label }) }) }));
 };
 const CalendarHeader = ({ title, onPrev, onNext, onTitleClick, }) => {
     const caretButton = (icon, onClick) => (_jsx(Box, { onClick: onClick, display: "flex", alignItems: "center", justifyContent: "center", padding: "10px", borderRadius: RADIUS_XS, flexShrink: 0, sx: {
@@ -279,7 +280,7 @@ export const DatePicker = ({ label = 'Select date', placeholder = 'Select a date
                                 'aria-label': 'Clear date',
                                 role: 'button',
                                 tabIndex: 0,
-                            }) }))] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { zIndex: 1300 }, children: _jsxs(Box, { bgcolor: COLOR.card, borderRadius: SPACING_MD, mt: "4px", paddingX: "24px", paddingY: "20px", width: "328px", role: "dialog", sx: {
+                            }) }))] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { zIndex: 1300 }, children: _jsxs(Box, { bgcolor: COLOR.card, border: `1px solid ${COLOR.borderDarkOnly}`, borderRadius: SPACING_MD, mt: "4px", paddingX: "24px", paddingY: "20px", width: "330px", role: "dialog", sx: {
                             boxSizing: 'border-box',
                             boxShadow: '0px 20px 24px -4px rgba(34, 7, 56, 0.08)',
                         }, children: [view === 'date' && renderDateView(), view === 'month' && renderMonthView(), view === 'year' && renderYearView()] }) })] }) }));

package/dist/stories/Navigation/Drawer/DrawerCreditsCard.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DrawerCreditsCardProps } from './types';
 /**
- * Compact "Upgrade plan" credits card for the {@link Drawer} footer. Shows a
+ * Compact "Upgrade Plan" credits card for the {@link Drawer} footer. Shows a
  * progress bar and a credits caption, with an info tooltip listing the credit
  * conversion rates. When collapsed it shrinks to the gem glyph and reveals the
  * full details (and an upgrade action) in a hover popover. Fully theme-aware.

package/dist/stories/Navigation/Drawer/DrawerCreditsCard.js

@@ -128,13 +128,13 @@ const PopoverGroup = styled.div `
 `;
 const InfoLines = ({ lines }) => (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: lines.map((line, i) => (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-white)", children: line }, i))) }));
 /**
- * Compact "Upgrade plan" credits card for the {@link Drawer} footer. Shows a
+ * Compact "Upgrade Plan" credits card for the {@link Drawer} footer. Shows a
  * progress bar and a credits caption, with an info tooltip listing the credit
  * conversion rates. When collapsed it shrinks to the gem glyph and reveals the
  * full details (and an upgrade action) in a hover popover. Fully theme-aware.
  */
-export const DrawerCreditsCard = ({ size = DrawerSize.Expanded, usedCredits = 0, maxCredits = 0, upgradeLabel = 'Upgrade plan', creditsCaption, icon, infoLines = DEFAULT_INFO_LINES, onUpgradeClick, className, style, testId, }) => {
-    const caption = creditsCaption ?? `${usedCredits} credits used from ${maxCredits}`;
+export const DrawerCreditsCard = ({ size = DrawerSize.Expanded, usedCredits = 0, maxCredits = 0, upgradeLabel = 'Upgrade Plan', creditsCaption, icon, infoLines = DEFAULT_INFO_LINES, onUpgradeClick, className, style, testId, }) => {
+    const caption = creditsCaption ?? `${usedCredits} credits used of ${maxCredits}`;
     const glyph = icon ? (getIconComponent(icon, { size: 20 })) : (_jsx(GemIcon, { size: 20 }));
     if (size === DrawerSize.Collapsed) {
         return (_jsx(Popover, { placement: "right", content: _jsxs(PopoverBody, { children: [_jsx(PopoverButton, { type: "button", onClick: () => onUpgradeClick?.(), children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-on-accent-color)", children: upgradeLabel }) }), _jsxs(PopoverGroup, { children: [_jsx(CreditsBar, { used: usedCredits, max: maxCredits }), _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-white)", children: caption })] }), _jsx(InfoLines, { lines: infoLines })] }), children: _jsx(CollapsedBox, { className: className, style: style, "data-testid": testId, onClick: () => onUpgradeClick?.(), children: glyph }) }));

package/dist/stories/Navigation/Drawer/types.d.ts

@@ -48,10 +48,10 @@ export interface DrawerCreditsCardProps {
     usedCredits?: number;
     /** Total credits available in the plan. */
     maxCredits?: number;
-    /** Title/link label. Defaults to "Upgrade plan". */
+    /** Title/link label. Defaults to "Upgrade Plan". */
     upgradeLabel?: string;
     /**
-     * Overrides the auto-generated "{used} credits used from {max}" caption.
+     * Overrides the auto-generated "{used} credits used of {max}" caption.
      */
     creditsCaption?: string;
     /** Leading icon. Defaults to the gem glyph. */

package/dist/stories/PlanCard/PlanCard.js

@@ -11,7 +11,7 @@ export const PlanCard = ({ title, description, price, priceSuffix = '/month', ba
             ? 'var(--color-border-border-brand)'
             : 'var(--color-border-border-subtle)'}`, boxSizing: 'border-box', style: style, "data-testid": testId ?? `${planKey}-plan-card`, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', minHeight: '24px', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: title }), badgeText && (_jsx(Badge, { text: badgeText, color: badgeColor, size: BadgeSize.xs, fill: true }))] }), description && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description })), price && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: '2px', children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: price }), priceSuffix && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: priceSuffix }))] }))] }), buttonText && (_jsx(MainButton, { text: buttonText, hierarchy: buttonHierarchy, size: ButtonSize.md, disabled: buttonDisabled, loading: buttonLoading, onClick: onButtonClick, style: { width: '100%' }, testId: `${planKey}-plan-button` })), features.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--color-text-text-paragraph)', children: featuresTitle }), features.map((feature, index) => {
                         const isHeading = feature?.startsWith('-');
-                        return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [!isHeading && (_jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone })), _jsx(Typography, { size: TypographySize.TextM, weight: isHeading
+                        return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [!isHeading && (_jsx(Box, { display: 'flex', alignItems: 'center', flexShrink: 0, height: '1lh', fontFamily: 'var(--global-text-m-regular-font-family), sans-serif', fontSize: 'var(--global-text-m-regular-font-size)', lineHeight: 'calc(var(--global-text-m-regular-line-height) * 1px)', children: _jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone }) })), _jsx(Typography, { size: TypographySize.TextM, weight: isHeading
                                         ? TypographyWeight.Medium
                                         : TypographyWeight.Regular, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: isHeading ? feature?.slice(1)?.trim() : feature })] }, `${index}-${feature}`));
                     })] }))] }));

package/dist/stories/Typography/Typography.js

@@ -4,19 +4,17 @@ import { getTextStyles, getTypographySizeToken, getTypographyWeightToken, } from
 export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, textStyle, children, title, }) => {
     const sizeToken = getTypographySizeToken(size);
     const weightToken = getTypographyWeightToken(weight);
-    const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
+    const { fontSize, fontWeight, fontFamily, lineHeight, paragraphIndent, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
     const requiredColor = 'var(--color-text-text-error)';
     return (_jsxs("span", { className: className, style: {
             fontSize: fontSize,
             fontWeight: fontWeight,
             fontFamily: fontFamily + ', sans-serif',
-            lineHeight: lineHeight + 'px',
-            letterSpacing: letterSpacing,
+            lineHeight: lineHeight,
             textIndent: paragraphIndent,
-            marginBottom: paragraphSpacing,
             textTransform: textTransform,
             textDecoration: textDecoration,
-            color: color || 'var(--global-text-text-title)',
+            color: color,
             ...textStyle,
         }, title: title, children: [children || text, required && _jsx("span", { style: { color: requiredColor }, children: ' *' })] }));
 };

package/dist/stories/UI/ConversationalAvatarsBanner.js

@@ -36,7 +36,10 @@ export const ConversationalAvatarsBanner = ({ title, description, actions = [],
                 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: {
+        }, "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: {
+                            flexWrap: 'wrap',
+                            '& button': { whiteSpace: 'nowrap' },
+                        }, 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))',

package/dist/stories/UI/ConversationalVoiceAgentsBanner.js

@@ -25,12 +25,11 @@ export const ConversationalVoiceAgentsBanner = ({ title, description, actions =
             },
             ...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.
+                            flexWrap: 'wrap',
+                            '& button': { whiteSpace: 'nowrap' },
                             [MOBILE]: {
                                 width: '100%',
-                                '& > *': { flex: 1, minWidth: 0 },
-                                '& button': { width: '100%' },
+                                '& > *': { flex: '1 1 auto' },
                             },
                         }, 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]: {

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

@@ -8,5 +8,5 @@ export declare const BANNER_AVATARS: {
 };
 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_WIDTH = 120;
 export declare const AVATAR_TILE_HEIGHT = 150;

package/dist/stories/UI/bannerAvatars.js

@@ -16,5 +16,5 @@ export const AVATAR_TILE_BACKGROUND = 'linear-gradient(180deg, #e9e9e9 0%, #beb1
 // 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_WIDTH = 120;
 export const AVATAR_TILE_HEIGHT = 150;

package/dist/utils/typography.d.ts

@@ -6,9 +6,7 @@ export declare const getTextStyles: (sizeToken: string, weightToken: string) =>
     fontWeight: string;
     fontFamily: string;
     lineHeight: string;
-    letterSpacing: string;
     paragraphIndent: string;
-    paragraphSpacing: string;
     textDecoration: string;
     textTransform: "uppercase" | "none";
 };

package/dist/utils/typography.js

@@ -26,10 +26,11 @@ export const getTextStyles = (sizeToken, weightToken) => {
     const fontSize = `var(--global-${sizeToken}-${weightToken}-font-size)`;
     const fontWeight = `var(--global-${sizeToken}-${weightToken}-font-weight)`;
     const fontFamily = `var(--global-${sizeToken}-${weightToken}-font-family)`;
-    const lineHeight = `var(--global-${sizeToken}-${weightToken}-line-height)`;
-    const letterSpacing = `var(--global-${sizeToken}-${weightToken}-letter-spacing)`;
+    // The line-height tokens are unitless numbers, and var() substitutes tokens
+    // rather than text: `var(--x)px` yields `24 px`, not `24px`. calc() is what
+    // actually attaches the unit.
+    const lineHeight = `calc(var(--global-${sizeToken}-${weightToken}-line-height) * 1px)`;
     const paragraphIndent = `var(--global-${sizeToken}-${weightToken}-paragraph-indent)`;
-    const paragraphSpacing = `var(--global-${sizeToken}-${weightToken}-paragraph-spacing)`;
     const textDecoration = `var(--global-${sizeToken}-${weightToken}-text-decoration)`;
     const textTransform = getTextTransform(sizeToken, weightToken);
     return {
@@ -37,9 +38,7 @@ export const getTextStyles = (sizeToken, weightToken) => {
         fontWeight,
         fontFamily,
         lineHeight,
-        letterSpacing,
         paragraphIndent,
-        paragraphSpacing,
         textDecoration,
         textTransform,
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.4.2",
+  "version": "0.4.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@beydesign/tokens": "^0.1.1",
+    "@beydesign/tokens": "^0.1.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",