@beydesign/storybook 0.2.29 → 0.3.0

package/dist/index.d.ts

@@ -8,8 +8,6 @@ export * from './stories/Buttons';
 export * from './stories/Typography';
 export * from './stories/Credits';
 export * from './stories/Navigation';
-export * from './stories/Drawer';
-export * from './stories/Settings';
 export * from './stories/Typography';
 export * from './stories/UI';
 export * from './stories/StripeProduct';

package/dist/index.js

@@ -8,8 +8,6 @@ export * from './stories/Buttons';
 export * from './stories/Typography';
 export * from './stories/Credits';
 export * from './stories/Navigation';
-export * from './stories/Drawer';
-export * from './stories/Settings';
 export * from './stories/Typography';
 export * from './stories/UI';
 export * from './stories/StripeProduct';

package/dist/stories/Form/Dropdown.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { DropdownType } from './types';
-import { Box, CircularProgress, ClickAwayListener, Popper, } from '@mui/material';
+import { Box, CircularProgress, ClickAwayListener, Grow, Popper, } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
 import { Checkbox } from './Checkbox';
@@ -152,7 +152,10 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                         ? 'var(--color-border-border-brand)'
                         : 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
                         ? 'var(--color-background-bg-component-disabled)'
-                        : 'var(--color-background-bg-component)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", sx: { boxSizing: 'border-box' }, children: [_jsx(Box, { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexGrow: 1, minWidth: 0, overflow: "hidden", children: hasSelection && (hasRichSelection || hasAvatarOption) ? (_jsxs(_Fragment, { children: [hasAvatarOption && (_jsx(Box, { flexShrink: 0, display: "flex", children: _jsx(Avatar, { image: selectedOptions[0].avatar, text: selectedOptions[0].label, size: AvatarSize.xs, border: true }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
+                        : 'var(--color-background-bg-component)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", sx: {
+                        boxSizing: 'border-box',
+                        cursor: disabled ? 'not-allowed' : 'pointer',
+                    }, children: [_jsx(Box, { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexGrow: 1, minWidth: 0, overflow: "hidden", children: hasSelection && (hasRichSelection || hasAvatarOption) ? (_jsxs(_Fragment, { children: [hasAvatarOption && (_jsx(Box, { flexShrink: 0, display: "flex", children: _jsx(Avatar, { image: selectedOptions[0].avatar, text: selectedOptions[0].label, size: AvatarSize.xs, border: true }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
                                             minWidth: 0,
                                             textAlign: 'left',
                                             overflow: 'hidden',
@@ -177,8 +180,8 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                                     showClear &&
                                     hasSelection &&
                                     getIconComponent('X', {
-                                        width: '24px',
-                                        height: '24px',
+                                        width: '20px',
+                                        height: '20px',
                                         color: 'var(--color-foreground-fg-secondary)',
                                         onClick: handleClear,
                                         'aria-label': 'Clear selection',
@@ -191,33 +194,37 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                                             }
                                         },
                                     }), !disabled &&
-                                    getIconComponent(open ? 'CaretUp' : 'CaretDown', {
-                                        width: '24px',
-                                        height: '24px',
+                                    getIconComponent('CaretDown', {
+                                        width: '20px',
+                                        height: '20px',
                                         color: 'var(--color-foreground-fg-secondary)',
                                         'aria-hidden': 'true',
-                                    })] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsxs(Box, { ref: optionsContainerRef, onScroll: handleOptionsScroll, bgcolor: 'var(--color-background-bg-component)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
-                            border: '1px solid var(--color-border-border-component)',
-                        }, children: [normalizedOptions.length === 0 && !isLoadingMore ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (normalizedOptions.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', height: '36px', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-md)', onClick: () => handleOptionSelect(option.value), onMouseEnter: () => setHighlightedIndex(index), sx: {
-                                    cursor: 'pointer',
-                                    backgroundColor: highlightedIndex === index
-                                        ? 'var(--color-background-bg-secondary-action-hover)'
-                                        : 'transparent',
-                                    '&:hover': {
-                                        backgroundColor: 'var(--color-background-bg-secondary-action-hover)',
-                                    },
-                                    width: '100%',
-                                    boxSizing: 'border-box',
-                                }, role: "option", "aria-selected": isOptionSelected(option.value), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', flexGrow: 1, minWidth: 0, overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option.value), onChange: () => handleOptionSelect(option.value), style: { margin: 0, padding: 0 } }) })), hasAvatarOption && (_jsx(Box, { flexShrink: 0, display: "flex", children: _jsx(Avatar, { image: option.avatar, text: option.label, size: AvatarSize.xs, border: true }) })), _jsx(Box, { flexGrow: 1, minWidth: 0, overflow: "hidden", children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
-                                                        overflow: 'hidden',
-                                                        textOverflow: 'ellipsis',
-                                                        whiteSpace: 'nowrap',
-                                                        width: '100%',
-                                                    }, children: option.label }) }), option.badge && (_jsx(Box, { flexShrink: 0, children: _jsx(Badge, { size: BadgeSize.xs, color: BadgeColor.Default, text: option.badge }) }))] }), _jsx(Box, { flexShrink: 0, display: "flex", alignItems: "center", children: showTicks &&
-                                            isOptionSelected(option.value) &&
-                                            getIconComponent('Check', {
-                                                width: '20px',
-                                                height: '20px',
-                                                color: 'var(--color-foreground-fg-brand-primary)',
-                                            }) })] }, option.value)))), isLoadingMore && (_jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: '36px', width: '100%', role: "status", "aria-label": "Loading more options", children: _jsx(CircularProgress, { size: 20, sx: { color: 'var(--color-foreground-fg-brand-primary)' } }) }))] }) })] }) }));
+                                        style: {
+                                            transition: 'transform 200ms ease',
+                                            transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+                                        },
+                                    })] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", transition: true, style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: ({ TransitionProps }) => (_jsx(Grow, { ...TransitionProps, timeout: 200, style: { transformOrigin: 'top' }, children: _jsxs(Box, { ref: optionsContainerRef, onScroll: handleOptionsScroll, bgcolor: 'var(--color-background-bg-component)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
+                                border: '1px solid var(--color-border-border-component)',
+                            }, children: [normalizedOptions.length === 0 && !isLoadingMore ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (normalizedOptions.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', height: '36px', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-md)', onClick: () => handleOptionSelect(option.value), onMouseEnter: () => setHighlightedIndex(index), sx: {
+                                        cursor: 'pointer',
+                                        backgroundColor: highlightedIndex === index
+                                            ? 'var(--color-background-bg-secondary-action-hover)'
+                                            : 'transparent',
+                                        '&:hover': {
+                                            backgroundColor: 'var(--color-background-bg-secondary-action-hover)',
+                                        },
+                                        width: '100%',
+                                        boxSizing: 'border-box',
+                                    }, role: "option", "aria-selected": isOptionSelected(option.value), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', flexGrow: 1, minWidth: 0, overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option.value), onChange: () => handleOptionSelect(option.value), style: { margin: 0, padding: 0 } }) })), hasAvatarOption && (_jsx(Box, { flexShrink: 0, display: "flex", children: _jsx(Avatar, { image: option.avatar, text: option.label, size: AvatarSize.xs, border: true }) })), _jsx(Box, { flexGrow: 1, minWidth: 0, overflow: "hidden", children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
+                                                            overflow: 'hidden',
+                                                            textOverflow: 'ellipsis',
+                                                            whiteSpace: 'nowrap',
+                                                            width: '100%',
+                                                        }, children: option.label }) }), option.badge && (_jsx(Box, { flexShrink: 0, children: _jsx(Badge, { size: BadgeSize.xs, color: BadgeColor.Default, text: option.badge }) }))] }), _jsx(Box, { flexShrink: 0, display: "flex", alignItems: "center", children: showTicks &&
+                                                isOptionSelected(option.value) &&
+                                                getIconComponent('Check', {
+                                                    width: '20px',
+                                                    height: '20px',
+                                                    color: 'var(--color-foreground-fg-brand-primary)',
+                                                }) })] }, option.value)))), isLoadingMore && (_jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: '36px', width: '100%', role: "status", "aria-label": "Loading more options", children: _jsx(CircularProgress, { size: 20, sx: { color: 'var(--color-foreground-fg-brand-primary)' } }) }))] }) })) })] }) }));
 };

package/dist/stories/Form/FileUpload/FileUpload.js

@@ -55,14 +55,20 @@ export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,
             .split(',')
             .map((ext) => ext.trim())
             .filter((ext) => ext.startsWith('.'));
-        // Get unique icons for the accepted file types
-        const uniqueIcons = new Map();
+        // Collect one icon per accepted file type, de-duplicated by component
+        // identity (e.g. `.doc` and `.docx` share FileDoc) while preserving order.
+        // NB: we can't key on `IconComponent.name` — Phosphor icons are forwardRef
+        // objects with no `name`, so every entry would collapse to a single key.
+        const seen = new Set();
+        const icons = [];
         extensions.forEach((ext) => {
             const IconComponent = fileIconMap[ext] || defaultIcon;
-            // Use the component name as key to avoid duplicates
-            uniqueIcons.set(IconComponent.name, IconComponent);
+            if (!seen.has(IconComponent)) {
+                seen.add(IconComponent);
+                icons.push(IconComponent);
+            }
         });
-        return Array.from(uniqueIcons.values());
+        return icons;
     };
     const fileIcons = getFileTypeIcons();
     const handleFileSelect = (files) => {
@@ -104,25 +110,29 @@ export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,
         handleFileSelect(e.target.files);
     };
     const iconProps = {
-        height: '20px',
-        width: '20px',
+        height: '24px',
+        width: '24px',
         color: disabled
             ? 'var(--color-text-text-subtle)'
             : 'var(--color-text-text-paragraph)',
     };
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1.5px dashed ${isDragging ? 'var(--color-background-bg-brand-primary-hover)' : 'var(--color-background-bg-brand-primary)'}`, bgcolor: disabled
-            ? 'var(--color-background-bg-component-contrast-subtle)'
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1px dashed ${disabled
+            ? 'var(--color-border-border-disabled)'
+            : isDragging
+                ? 'var(--color-border-border-brand-hover)'
+                : 'var(--color-border-border-component)'}`, bgcolor: disabled
+            ? 'var(--color-background-bg-component-disabled)'
             : isDragging
                 ? 'var(--color-background-bg-component-hover)'
-                : 'var(--color-background-bg-element)', sx: { cursor: disabled ? 'not-allowed' : 'pointer', ...sx }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, accept: acceptedFileTypes, onChange: handleInputChange, disabled: disabled }), _jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `2px solid ${disabled
-                    ? 'var(--color-border-border-component)'
-                    : isDragging
-                        ? 'var(--color-background-bg-brand-primary-hover)'
-                        : 'var(--color-background-bg-brand-primary)'}`, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-component)', children: _jsx(UploadSimple, { height: '20px', width: '20px', weight: "bold", color: disabled
+                : 'var(--color-background-bg-element)', sx: { cursor: disabled ? 'not-allowed' : 'pointer', ...sx }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, accept: acceptedFileTypes, onChange: handleInputChange, disabled: disabled }), _jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `1px solid ${disabled
+                    ? 'var(--color-border-border-disabled)'
+                    : 'var(--color-border-border-component)'}`, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: disabled
+                    ? 'var(--color-background-bg-button-disabled)'
+                    : 'var(--color-background-bg-element)', children: _jsx(UploadSimple, { height: '20px', width: '20px', weight: "bold", color: disabled
                         ? 'var(--color-foreground-fg-disabled)'
                         : 'var(--color-foreground-fg-brand-primary)' }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: disabled
+                            ? 'var(--color-text-text-inactive)'
+                            : 'var(--color-text-text-clicable)', textStyle: { cursor: disabled ? 'not-allowed' : 'pointer' }, children: "Click to upload" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
                             ? 'var(--color-text-text-disabled)'
-                            : 'var(--color-text-text-accent)', textStyle: { cursor: disabled ? 'not-allowed' : 'pointer' }, children: "Click to upload" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
-                            ? 'var(--color-text-text-subtle)'
                             : 'var(--color-text-text-paragraph)', children: "or drag and drop" }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [fileIcons.map((Icon, index) => (_jsx(Icon, { ...iconProps }, index))), fileIcons.length === 0 && _jsx(FileCode, { ...iconProps })] })] })] }));
 };

package/dist/stories/Form/FileUpload/FileUploading.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
 import { FileUploadingStatus, FileUploadingProgressMode, } from '../types';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../../Typography';
@@ -7,7 +6,18 @@ import { getIconComponent } from '../../../utils';
 import { Player } from '@lottiefiles/react-lottie-player';
 import loadingAnimation from '../../../assets/animations/loading-animation.json';
 import { ProgressIndicator, ProgressIndicatorMode } from '../../UI';
-export const FileUploading = ({ uploadProgress, uploadingStatus, progressMode = FileUploadingProgressMode.Animation, sx, onCancel, onRetry, fileName, showCancel, showRetry, }) => {
+// Transparent, subtly shadowed frame that wraps a trailing action icon,
+// matching the "Button" node in the Figma design.
+const actionButtonSx = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+    borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)',
+    boxShadow: '0px 1px 1px rgba(25, 28, 31, 0.05)',
+    backgroundColor: 'transparent',
+};
+export const FileUploading = ({ uploadProgress, uploadingStatus, progressMode = FileUploadingProgressMode.Percentage, sx, onCancel, onRetry, fileName, showCancel, showRetry, }) => {
     const isUploading = uploadingStatus === FileUploadingStatus.Uploading;
     const isSuccess = uploadingStatus === FileUploadingStatus.Success;
     const isError = uploadingStatus === FileUploadingStatus.Error;
@@ -23,27 +33,27 @@ export const FileUploading = ({ uploadProgress, uploadingStatus, progressMode =
             return 'FileTxt';
         return 'File';
     };
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1px solid ${isError ? 'var(--color-border-border-error)' : 'var(--color-border-border-component)'}`, bgcolor: 'var(--color-background-bg-component-contrast-subtle)', minWidth: '300px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [getIconComponent(getFileIcon(), {
-                                width: '24px',
-                                height: '24px',
-                                color: isError
-                                    ? 'var(--color-text-text-error)'
-                                    : 'var(--color-foreground-fg-primary)',
-                            }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: isError
-                                    ? 'var(--color-text-text-error)'
-                                    : 'var(--color-text-text-title)', children: fileName })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showCancel &&
-                                onCancel &&
-                                isUploading &&
-                                getIconComponent('X', {
-                                    width: '24px',
-                                    height: '24px',
-                                    color: 'var(--color-text-text-title)',
-                                    onClick: onCancel,
-                                    style: { cursor: 'pointer' },
-                                }), isSuccess &&
-                                getIconComponent('Check', {
-                                    width: '24px',
-                                    height: '24px',
-                                    color: 'var(--color-foreground-fg-success)',
-                                })] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: '100%', children: [isUploading && isAnimationProgress && (_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation, style: { height: '100%', width: '100%' } })), isUploading && isPercentageProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress || 0, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%', height: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: "Upload failed, please try again." }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-error)', children: "Try again" }) }))] }))] })] }));
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1px solid ${isError ? 'var(--color-border-border-error)' : 'var(--color-border-border-divider)'}`, bgcolor: isError
+            ? 'var(--color-background-bg-badge-accent-red)'
+            : 'var(--color-background-bg-component-contrast-subtle)', minWidth: '300px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [getIconComponent(getFileIcon(), {
+                        width: '24px',
+                        height: '24px',
+                        color: isError
+                            ? 'var(--color-text-text-error)'
+                            : 'var(--color-foreground-fg-primary)',
+                    }), _jsx(Box, { flex: 1, minWidth: 0, children: _jsx(Typography, { size: TypographySize.TextS, weight: isError ? TypographyWeight.SemiBold : TypographyWeight.Regular, color: isError
+                                ? 'var(--color-text-text-error)'
+                                : 'var(--color-text-text-title)', children: fileName }) }), isUploading && showCancel && onCancel && (_jsx(Box, { onClick: onCancel, sx: { ...actionButtonSx, cursor: 'pointer' }, children: getIconComponent('X', {
+                            width: '20px',
+                            height: '20px',
+                            color: 'var(--color-text-text-title)',
+                        }) })), isSuccess && (_jsx(Box, { sx: actionButtonSx, children: getIconComponent('CheckCircle', {
+                            width: '20px',
+                            height: '20px',
+                            weight: 'fill',
+                            color: 'var(--color-foreground-fg-success)',
+                        }) }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: '100%', children: [isUploading && isAnimationProgress && (_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation, style: { height: '100%', width: '100%' } })), ((isUploading && isPercentageProgress) || isSuccess) && (_jsx(ProgressIndicator, { currentValue: isSuccess ? 100 : uploadProgress || 0, maxValue: 100, mode: ProgressIndicatorMode.Percentage, fillColor: 'var(--color-foreground-fg-violet)', backgroundColor: 'var(--color-background-bg-element)', textColor: 'var(--color-text-text-paragraph)', minWidth: 0, style: {
+                            width: '100%',
+                            gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                        } })), isError && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: "Upload failed, please try again" }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-error)', children: "Try again" }) }))] }))] })] }));
 };

package/dist/stories/Form/FileUpload/UploadedFile.js

@@ -1,12 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { FileType } from '../types';
 import { Box } from '@mui/material';
 import { File } from '@phosphor-icons/react';
 import { Typography, TypographySize, TypographyWeight } from '../../Typography';
-import { ButtonDisplayMode, ButtonHierarchy, ButtonSize, MainButton, } from '../../Buttons';
-export const UploadedFile = ({ type = FileType.Default, showDelete = true, onDelete, showDownload = true, onDownload, fileName, sx, }) => {
+import { Menu } from '../../UI';
+import { ButtonHierarchy, ButtonSize } from '../../Buttons';
+export const UploadedFile = ({ type = FileType.Default, showMenu = true, menuItems, fileName, sx, }) => {
     const isSampleFile = type === FileType.Sample;
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', paddingLeft: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: isSampleFile
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    // While its overflow menu is open, the row takes on the active highlight so
+    // it stands out from the other files in the list.
+    const backgroundColor = isMenuOpen
+        ? 'var(--color-background-bg-component-hover)'
+        : isSampleFile
             ? 'var(--color-background-bg-card-highlight)'
-            : 'var(--color-background-bg-component-contrast-subtle)', minWidth: '240px', minHeight: '36px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(File, { width: '24px', height: '24px', color: 'var(--color-foreground-fg-primary)' }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--color-foreground-fg-primary)', children: fileName })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showDownload && onDownload && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "DownloadSimple", onClick: onDownload })), showDelete && onDelete && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "X", onClick: onDelete }))] })] }));
+            : 'var(--color-background-bg-element)';
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', paddingLeft: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingRight: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', bgcolor: backgroundColor, minWidth: '240px', sx: { ...sx }, children: _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', flex: 1, minWidth: 0, children: [_jsx(File, { width: '20px', height: '20px', color: 'var(--color-foreground-fg-secondary)' }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-title)', children: fileName })] }), showMenu && (_jsx(Menu, { icon: "DotsThree", iconWeight: "bold", items: menuItems, size: ButtonSize.xs, hierarchy: ButtonHierarchy.Tertiary, onOpenChange: setIsMenuOpen, style: {
+                        background: 'transparent',
+                        boxShadow: '0px 1px 1px rgba(25, 28, 31, 0.05)',
+                    } }))] }) }));
 };

package/dist/stories/Form/FileUpload/UploadedFile.stories.js

@@ -23,25 +23,15 @@ const meta = {
             description: 'The type of the file',
             table: { type: { summary: 'string' } },
         },
-        showDelete: {
+        showMenu: {
             control: 'boolean',
-            description: 'Whether to show the delete button',
+            description: 'Whether to show the trailing overflow-menu (kebab) button',
             table: { type: { summary: 'boolean' } },
         },
-        showDownload: {
-            control: 'boolean',
-            description: 'Whether to show the download button',
-            table: { type: { summary: 'boolean' } },
-        },
-        onDelete: {
-            action: 'onDelete',
-            description: 'Callback function when the delete button is clicked',
-            table: { type: { summary: 'function' } },
-        },
-        onDownload: {
-            action: 'onDownload',
-            description: 'Callback function when the download button is clicked',
-            table: { type: { summary: 'function' } },
+        menuItems: {
+            control: 'object',
+            description: 'Items rendered in the overflow (kebab) menu',
+            table: { type: { summary: 'MenuItemProps[]' } },
         },
         sx: {
             control: 'object',
@@ -51,23 +41,28 @@ const meta = {
     },
 };
 export default meta;
+const sampleMenuItems = [
+    { label: 'Download', icon: 'DownloadSimple', onClick: () => { } },
+    {
+        label: 'Delete',
+        icon: 'Trash',
+        onClick: () => { },
+        destructive: true,
+    },
+];
 export const Default = {
     args: {
-        fileName: 'example.pdf',
+        fileName: 'File name sample.csv',
         type: FileType.Default,
-        showDelete: true,
-        showDownload: true,
-        onDelete: () => { },
-        onDownload: () => { },
+        showMenu: true,
+        menuItems: sampleMenuItems,
     },
 };
 export const Sample = {
     args: {
-        fileName: 'sample.txt',
+        fileName: 'File name sample.csv',
         type: FileType.Sample,
-        showDelete: false,
-        showDownload: false,
-        onDelete: () => { },
-        onDownload: () => { },
+        showMenu: true,
+        menuItems: sampleMenuItems,
     },
 };

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

@@ -1,5 +1,5 @@
 import { SxProps, Theme } from '@mui/material';
-import { HintBubbleProps } from '../UI';
+import { HintBubbleProps, MenuItemProps } from '../UI';
 import { IconName } from '../../utils';
 import React from 'react';
 /**
@@ -165,14 +165,10 @@ export interface UploadedFileProps {
     type?: FileType;
     /** File name */
     fileName: string;
-    /** Whether to show the delete button */
-    showDelete?: boolean;
-    /** Callback function when the delete button is clicked */
-    onDelete?: () => void;
-    /** Whether to show the download button */
-    showDownload?: boolean;
-    /** Callback function when the download button is clicked */
-    onDownload?: () => void;
+    /** Whether to show the trailing overflow-menu (kebab) button */
+    showMenu?: boolean;
+    /** Items rendered in the overflow (kebab) menu, e.g. Download / Delete */
+    menuItems?: MenuItemProps[];
     /** Style of the uploaded file */
     sx?: SxProps<Theme>;
 }

package/dist/stories/{Drawer → Navigation/Drawer}/Drawer.d.ts

@@ -6,5 +6,9 @@ import { DrawerProps } from './types';
  * toggle. Collapse state can be controlled (`collapsed` + `onToggle`) or left
  * uncontrolled (`defaultCollapsed`). Every colour, space and radius resolves to
  * `@beydesign/tokens` CSS variables, so it renders correctly in light and dark.
+ *
+ * Below the mobile breakpoint there is no room for this beside a settings
+ * sub-nav — use `MobileNav`, which renders the same {@link DrawerBody} as one
+ * pane of a single overlay.
  */
 export declare const Drawer: React.FC<DrawerProps>;

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { DrawerSize } from './types';
+import { DrawerBody } from './DrawerBody';
+import { NavPanel } from '../internal';
+import { getIconComponent } from '../../../utils';
+const EXPANDED_WIDTH = '238px';
+const COLLAPSED_WIDTH = '68px';
+/** Composed from the semantic `shadow-sm` design token. */
+const SHADOW_SM = 'var(--global-shadows-shadow-sm-offset-x) var(--global-shadows-shadow-sm-offset-y) var(--global-shadows-shadow-sm-blur) var(--global-shadows-shadow-sm-spread) var(--global-shadows-shadow-sm-color)';
+/**
+ * Non-clipping outer shell. The toggle lives here (a sibling of the panel) so
+ * it can overhang the right edge without being clipped by the panel's
+ * `overflow`.
+ */
+const Shell = styled.aside `
+  position: relative;
+  flex-shrink: 0;
+  height: 100vh;
+  width: ${({ $collapsed }) => ($collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH)};
+  transition: width 0.3s ease-in-out;
+`;
+const ToggleButton = styled.button `
+  appearance: none;
+  position: absolute;
+  top: 52px;
+  right: -16px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--color-border-border-subtle);
+  border-radius: var(--spacing-tokens-size-in-px-radius-radius-full);
+  background-color: var(--color-background-bg-element);
+  color: var(--color-text-text-paragraph);
+  cursor: pointer;
+  box-shadow: ${SHADOW_SM};
+  transition: color 0.2s ease-in-out;
+
+  &:hover {
+    color: var(--color-text-text-clicable);
+  }
+`;
+/** Rotates the chevron smoothly between expanded (◀) and collapsed (▶). */
+const ToggleIcon = styled.span `
+  display: inline-flex;
+  transform: rotate(${({ $collapsed }) => ($collapsed ? '180deg' : '0deg')});
+  transition: transform 0.3s ease-in-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+/**
+ * Composed application sidebar ("Drawer"): logo header, navigation list,
+ * credits card and user-profile footer, with a floating collapse/expand
+ * toggle. Collapse state can be controlled (`collapsed` + `onToggle`) or left
+ * uncontrolled (`defaultCollapsed`). Every colour, space and radius resolves to
+ * `@beydesign/tokens` CSS variables, so it renders correctly in light and dark.
+ *
+ * Below the mobile breakpoint there is no room for this beside a settings
+ * sub-nav — use `MobileNav`, which renders the same {@link DrawerBody} as one
+ * pane of a single overlay.
+ */
+export const Drawer = ({ navItems, activeKey, collapsed, defaultCollapsed = false, onToggle, showToggle = true, credits, creditsLoading = false, profile, profileLoading = false, logo, className, style, testId, }) => {
+    const isControlled = collapsed !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const isCollapsed = isControlled ? collapsed : internalCollapsed;
+    const drawerSize = isCollapsed ? DrawerSize.Collapsed : DrawerSize.Expanded;
+    const handleToggle = () => {
+        const next = !isCollapsed;
+        if (!isControlled)
+            setInternalCollapsed(next);
+        onToggle?.(next);
+    };
+    return (_jsxs(Shell, { "$collapsed": isCollapsed, className: className, style: style, "data-testid": testId, children: [_jsx(NavPanel, { children: _jsx(DrawerBody, { navItems: navItems, activeKey: activeKey, size: drawerSize, credits: credits, creditsLoading: creditsLoading, profile: profile, profileLoading: profileLoading, logo: logo }) }), showToggle && (_jsx(ToggleButton, { type: "button", onClick: handleToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: _jsx(ToggleIcon, { "$collapsed": isCollapsed, children: getIconComponent('CaretLeft', { size: 16, weight: 'bold' }) }) }))] }));
+};

package/dist/stories/{Drawer → Navigation/Drawer}/Drawer.stories.js

@@ -17,7 +17,7 @@ const navItems = [
     { key: 'developers', text: 'Developers', icon: 'BracketsCurly' },
 ];
 const meta = {
-    title: 'Design System/Components/Drawer/Drawer',
+    title: 'Design System/Components/Navigation/Drawer',
     component: Drawer,
     parameters: {
         layout: 'fullscreen',

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DrawerBodyProps } from './types';
+/**
+ * The Drawer's content — logo header, navigation list, credits card and profile
+ * footer — without any panel chrome. `Drawer` wraps it in a `NavPanel` beside a
+ * collapse toggle; `MobileNav` renders the very same body as the root pane of
+ * its overlay, which is why the two never drift apart.
+ */
+export declare const DrawerBody: React.FC<DrawerBodyProps>;

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { DrawerNavItemHierarchy, DrawerNavItemState, DrawerSize, } from './types';
+import { DrawerNavItem } from './DrawerNavItem';
+import { DrawerCreditsCard } from './DrawerCreditsCard';
+import { DrawerCreditsCardSkeleton } from './DrawerCreditsCardSkeleton';
+import { DrawerProfile } from './DrawerProfile';
+import { DrawerProfileSkeleton } from './DrawerProfileSkeleton';
+import { Logo, LogoVariant } from '../../UI';
+const LogoHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
+  height: 38px;
+  min-height: 38px;
+  margin-bottom: 40px;
+`;
+const Nav = styled.nav `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
+`;
+const NavTop = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-lg, 12px);
+`;
+const Footer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
+`;
+const FooterSlot = styled.div `
+  display: flex;
+  justify-content: center;
+`;
+const resolveState = (item, activeKey) => {
+    if (item.state)
+        return item.state;
+    if (item.disabled)
+        return DrawerNavItemState.Disabled;
+    const key = item.key ?? item.text;
+    if (activeKey !== undefined && key === activeKey) {
+        return DrawerNavItemState.Active;
+    }
+    return DrawerNavItemState.Inactive;
+};
+/**
+ * The Drawer's content — logo header, navigation list, credits card and profile
+ * footer — without any panel chrome. `Drawer` wraps it in a `NavPanel` beside a
+ * collapse toggle; `MobileNav` renders the very same body as the root pane of
+ * its overlay, which is why the two never drift apart.
+ */
+export const DrawerBody = ({ navItems, activeKey, size = DrawerSize.Expanded, credits, creditsLoading = false, profile, profileLoading = false, logo, onSubNavOpen, }) => {
+    const isCollapsed = size === DrawerSize.Collapsed;
+    const handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        if (item.subNav && onSubNavOpen) {
+            onSubNavOpen(item);
+            return;
+        }
+        if (item.link) {
+            window.location.href = item.link;
+        }
+        else {
+            item.onClick?.();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(LogoHeader, { "$collapsed": isCollapsed, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl }) }), _jsxs(Nav, { children: [_jsx(NavTop, { children: navItems.map((item) => (_jsx(DrawerNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), size: size, hierarchy: item.hierarchy ?? DrawerNavItemHierarchy.First, showBadge: item.showBadge, badgeText: item.badgeText, showSubNavCaret: Boolean(item.subNav && onSubNavOpen), onClick: () => handleItemClick(item) }, item.key ?? item.text))) }), (credits || creditsLoading || profile || profileLoading) && (_jsxs(Footer, { children: [(credits || creditsLoading) && (_jsx(FooterSlot, { children: creditsLoading ? (_jsx(DrawerCreditsCardSkeleton, { size: size })) : (_jsx(DrawerCreditsCard, { ...credits, size: size })) })), (profile || profileLoading) && (_jsx(FooterSlot, { children: profileLoading ? (_jsx(DrawerProfileSkeleton, { size: size })) : (profile && _jsx(DrawerProfile, { ...profile, size: size })) }))] }))] })] }));
+};