@beydesign/storybook 0.6.2 → 0.7.1

package/README.md

@@ -1,6 +1,6 @@
 # BeyDesign Storybook
-[![Lint](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml)   [![Deploy Storybook to GitHub Pages](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml)   [![Publish Package to NPM](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml)  
 
+[![Lint](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml) [![Deploy Storybook to GitHub Pages](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml) [![Publish Package to NPM](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml)
 
 A React component library implementing the Beyond Presence Design System. This package provides a collection of reusable components that follow the design specifications from our [Figma Design System](https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4295-3110&p=f&m=dev).
 
@@ -48,6 +48,35 @@ function App() {
 }
 ```
 
+## Color pairing
+
+Color tokens come in three families, and they are not interchangeable. Pick the
+text token by the surface it sits on:
+
+| Surface      | Example                                          | Text token                                                   |
+| ------------ | ------------------------------------------------ | ------------------------------------------------------------ |
+| Solid fill   | `bg-success`, `bg-error`                         | `text-success-on-color`, `text-red-on-color`                 |
+| Subtle tint  | `bg-badge-accent-success`, `bg-badge-accent-red` | `text-success`, `text-error`                                 |
+| Page or card | `bg-page`, `bg-page-contrast`                    | `text-success`, `text-error`, `text-title`, `text-paragraph` |
+
+The trap: a solid fill and its accent text resolve to the **same** primitive.
+`bg-success` and `text-success` are both `Primary.Success.500`, so pairing them
+renders invisible text. That is what the `-on-color` family is for — it is the
+darker step (`Primary.Success.800`) meant to sit on the solid fill.
+
+There is an `-on-color` token per accent: `text-success-on-color`,
+`text-red-on-color`, `text-yellow-on-color`, `text-violet-on-color`,
+`text-lemon-on-color`, `text-blue-on-color`, `text-cyan-on-color` and
+`text-pink-on-color`.
+
+Two related notes:
+
+- Some tokens are relative to the page rather than absolute. `bg-error-subtle`
+  is a near-white `Red.25` in light but a solid `Red.700` in dark — subtle
+  _against its own page_, not subtle in isolation. Check both themes.
+- `bg-component` is pure white in light, so it disappears on a card
+  (`bg-page-contrast`). Use `bg-element` for insets on a card.
+
 ## Development
 
 To run the Storybook development environment locally:

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

@@ -44,6 +44,12 @@ const fileIconMap = {
 };
 // Default icon for unknown file types
 const defaultIcon = FileCode;
+/**
+ * Figma draws the upload glyph in a 28px frame with the stroke inside it.
+ * Deriving the box from padding puts the CSS border outside, leaving it 2px
+ * oversized, so pin the frame and let border-box absorb the stroke.
+ */
+const ICON_BOX_SIZE = 28;
 export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,.txt', maxFileSizeMB = 10, onFileSelect, hintText, showFileTypeIcons = true, }) => {
     const [isDragging, setIsDragging] = useState(false);
     const fileInputRef = useRef(null);
@@ -124,7 +130,7 @@ export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,
             ? '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: `1px solid ${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: 'center', width: ICON_BOX_SIZE, height: ICON_BOX_SIZE, boxSizing: 'border-box', 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)'

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

@@ -6,5 +6,4 @@ export * from './MobileNavBar';
 export * from './NavItem';
 export * from './Sidebar';
 export * from './types';
-export * from './ProcessHeader';
 export * from './ComplexHeader';

package/dist/stories/Navigation/index.js

@@ -6,5 +6,4 @@ export * from './MobileNavBar';
 export * from './NavItem';
 export * from './Sidebar';
 export * from './types';
-export * from './ProcessHeader';
 export * from './ComplexHeader';

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

@@ -168,24 +168,6 @@ export interface SidebarProps {
         color?: string;
     };
 }
-export interface ProcessHeaderProps {
-    /** The title of the process */
-    title: string;
-    /** The subtitle of the process */
-    subtitle: string;
-    /** The current step of the process */
-    currentStep: number;
-    /** The total steps of the process */
-    totalSteps: number;
-    /** The text to display in the header right */
-    headerRightText?: string;
-    /** The callback to handle the cancel button click */
-    onCancelClick?: () => void;
-    /** The style object to apply to the component */
-    sx?: SxProps<Theme>;
-    /** The class name to apply to the component */
-    className?: string;
-}
 /**
  * Props for the {@link MobileNav} overlay — the single navigation panel used
  * below the mobile breakpoint, which holds the `Drawer` and any `subNav` as

package/dist/stories/UI/Badge.js

@@ -3,6 +3,18 @@ import { BadgeColor, BadgeSize } from './types';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
+/**
+ * Figma sizes a badge by its height, with the label centred inside and the
+ * 1px stroke drawn within that box. A CSS border sits outside instead, so
+ * deriving the height from vertical padding leaves every badge 2px taller
+ * than the design. Pin the height and let border-box absorb the stroke —
+ * the same fix MainButton applies to text buttons.
+ */
+const BADGE_HEIGHT = {
+    [BadgeSize.lg]: 32,
+    [BadgeSize.md]: 28,
+    [BadgeSize.xs]: 24,
+};
 export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, children, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, iconWeight = 'regular', iconSize, iconColor, testId, }) => {
     const getBackgroundColor = (color) => {
         switch (color) {
@@ -82,14 +94,14 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
                 return '1px solid rgba(0, 0, 0, 0.3)';
         }
     };
-    const getPadding = (size) => {
+    const getPaddingX = (size) => {
         switch (size) {
             case BadgeSize.lg:
-                return 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
             case BadgeSize.md:
-                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 10px';
+                return '10px';
             case BadgeSize.xs:
-                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) var(--spacing-tokens-size-in-px-spacing-spacing-md)';
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-md)';
         }
     };
     const getIconSize = (size) => {
@@ -114,11 +126,14 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
     };
     const backgroundColor = getBackgroundColor(color);
     const border = getBorder(color);
-    const padding = getPadding(size);
+    // Figma measures padding from the frame edge with the stroke drawn inside
+    // it, so subtract the border to keep the label the same distance in.
+    const figmaPaddingX = getPaddingX(size);
+    const paddingX = fill ? `calc(${figmaPaddingX} - 1px)` : figmaPaddingX;
     const iconProps = {
         size: iconSize || getIconSize(size),
         color: iconColor || getTextColor(),
         weight: iconWeight,
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, margin: 0, gap: "4px", sx: customStyle, "data-testid": testId, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor(), children: text })), children] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', height: BADGE_HEIGHT[size], boxSizing: "border-box", paddingX: paddingX, margin: 0, gap: "4px", sx: customStyle, "data-testid": testId, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor(), children: text })), children] }));
 };

package/dist/stories/UI/CheckIcon.js

@@ -28,6 +28,7 @@ const FRAME_MAP = {
     [CheckIconSize.sm]: 20,
     [CheckIconSize.md]: 24,
     [CheckIconSize.lg]: 28,
+    [CheckIconSize.xl]: 32,
 };
 /**
  * Figma draws the glyph on a grid of 32 units per frame, with the ink inset

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

@@ -15,5 +15,4 @@ export * from './SelectAvatarCard';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';
-export * from './Stepper';
 export * from './TabMenu';

package/dist/stories/UI/index.js

@@ -15,5 +15,4 @@ export * from './SelectAvatarCard';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';
-export * from './Stepper';
 export * from './TabMenu';

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

@@ -237,7 +237,8 @@ export declare enum CheckIconSize {
     xs = "xs",
     sm = "sm",
     md = "md",
-    lg = "lg"
+    lg = "lg",
+    xl = "xl"
 }
 /**
  * Check icon type variants.
@@ -448,38 +449,6 @@ export interface ConversationalVoiceAgentsBannerProps {
     /** Test ID of the banner */
     testId?: string;
 }
-export interface StepProps {
-    /** Current step of the stepper */
-    currentStep: number;
-    /** Total steps of the stepper */
-    totalSteps: number;
-    /** Index of the step */
-    index: number;
-    /** Title of the step */
-    title: string;
-    /** On click of the step */
-    onClick?: () => void;
-    /** Connector width of the step */
-    connectorWidth?: string | number;
-    /** Style of the step */
-    stepStyle?: SxProps<Theme>;
-}
-export interface StepperProps {
-    /** Steps of the stepper */
-    steps: string[];
-    /** Current step of the stepper */
-    currentStep: number;
-    /** On click of the step */
-    onStepClick?: (step: number) => void;
-    /** Style of the stepper */
-    style?: SxProps<Theme>;
-    /** Style of the step */
-    stepStyle?: SxProps<Theme>;
-    /** Test ID of the stepper */
-    testId?: string;
-    /** Connector width of the stepper */
-    connectorWidth?: string | number;
-}
 /**
  * TabMenu size variants
  */

package/dist/stories/UI/types.js

@@ -90,6 +90,7 @@ export var CheckIconSize;
     CheckIconSize["sm"] = "sm";
     CheckIconSize["md"] = "md";
     CheckIconSize["lg"] = "lg";
+    CheckIconSize["xl"] = "xl";
 })(CheckIconSize || (CheckIconSize = {}));
 /**
  * Check icon type variants.

package/package.json

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

package/dist/stories/Navigation/ProcessHeader.d.ts

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

package/dist/stories/Navigation/ProcessHeader.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { Badge, BadgeColor, BadgeSize } from '../UI';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
-export const ProcessHeader = ({ title, currentStep, subtitle, totalSteps, headerRightText, onCancelClick, sx, className, }) => {
-    const stepChecks = () => {
-        return (currentStep && totalSteps && currentStep >= 1 && currentStep <= totalSteps);
-    };
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: sx, className: className, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [headerRightText && (_jsx(Badge, { text: headerRightText, size: BadgeSize.lg, color: BadgeColor.Green })), stepChecks() && (_jsx(Badge, { text: `Step ${currentStep} of ${totalSteps}`, size: BadgeSize.lg, color: BadgeColor.Violet }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [title && (_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.SemiBold, children: `${title}.` })), subtitle && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: subtitle }))] })] }), onCancelClick && (_jsx(MainButton, { text: 'Cancel Process', onClick: onCancelClick, size: ButtonSize.md, hierarchy: ButtonHierarchy.TertiaryColor, trailingIcon: 'X', showTrailingIcon: true }))] }));
-};

package/dist/stories/Navigation/ProcessHeader.stories.d.ts

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

package/dist/stories/Navigation/ProcessHeader.stories.js

@@ -1,76 +0,0 @@
-import { ProcessHeader } from './ProcessHeader';
-import styles from './Header.module.css';
-const meta = {
-    title: 'Design System/Components/Navigation/ProcessHeader',
-    component: ProcessHeader,
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figspec',
-            url: 'https://www.figma.com/design/Ze4bBHgBQYinBDZr1COHuk/Agents?node-id=1928-68769&t=ff7acatvxaY98hGj-1',
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        title: {
-            control: 'text',
-            description: 'Title of the header',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        subtitle: {
-            control: 'text',
-            description: 'Subtitle of the header',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        currentStep: {
-            control: 'number',
-            description: 'Current step of the process',
-            table: {
-                type: { summary: 'number' },
-            },
-        },
-        totalSteps: {
-            control: 'number',
-            description: 'Total steps of the process',
-            table: {
-                type: { summary: 'number' },
-            },
-        },
-        headerRightText: {
-            control: 'text',
-            description: 'Text to display in the header right',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-        onCancelClick: {
-            description: 'Callback to handle the cancel button click',
-            table: {
-                type: { summary: 'function' },
-            },
-        },
-        sx: {
-            control: 'object',
-            description: 'Style object to apply to the component',
-            table: {
-                type: { summary: 'object' },
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        title: 'Train Agent',
-        subtitle: 'Please fill in the necessary information for your agent & upload knowledge files.',
-        currentStep: 3,
-        totalSteps: 3,
-        headerRightText: 'New Agent',
-        onCancelClick: () => { },
-        className: styles['responsive-width'],
-    },
-};

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

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

package/dist/stories/UI/Stepper.js

@@ -1,67 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { getIconComponent } from '../../utils';
-export const Stepper = ({ steps, currentStep, onStepClick, style, testId, connectorWidth, stepStyle, }) => {
-    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, "data-testid": testId, display: 'flex', flexDirection: 'row', alignItems: 'center', children: steps.map((step, index) => (_jsx(Step, { currentStep: currentStep, index: index, title: step, onClick: onStepClick ? () => onStepClick(index + 1) : undefined, totalSteps: steps.length, connectorWidth: connectorWidth, stepStyle: stepStyle }, index))) }));
-};
-const Step = ({ currentStep, totalSteps, index, title, onClick, connectorWidth = '70px', stepStyle, }) => {
-    const thisStep = index + 1;
-    const isDisabled = currentStep < thisStep;
-    const isCurrent = currentStep === thisStep;
-    const isCompleted = currentStep > thisStep;
-    const getTextColor = () => {
-        if (isDisabled)
-            return 'var(--color-text-text-paragraph)';
-        else if (isCurrent)
-            return 'var(--color-text-text-clicable)';
-        else if (isCompleted)
-            return 'var(--color-text-text-title)';
-        else
-            return 'var(--color-text-text-paragraph)';
-    };
-    const getIconColor = () => {
-        if (isDisabled)
-            return 'var(--color-foreground-fg-disabled)';
-        else if (isCurrent)
-            return 'var(--color-background-bg-brand-primary)';
-        else if (isCompleted)
-            return 'var(--color-background-bg-brand-primary)';
-        else
-            return 'var(--color-foreground-fg-secondary)';
-    };
-    const IconComponent = getIconComponent('CheckCircle', {
-        size: '24px',
-        color: getIconColor(),
-        weight: isCompleted ? 'fill' : 'regular',
-        onClick: () => onClick?.(),
-        style: { cursor: onClick ? 'pointer' : 'default' },
-    });
-    const getConnectorColor = (position) => {
-        if (position === 'left') {
-            if (thisStep === 1)
-                return 'transparent';
-            else if (thisStep <= currentStep)
-                return 'var(--color-background-bg-brand-primary)';
-            else
-                return 'var(--color-foreground-fg-disabled)';
-        }
-        else if (position === 'right') {
-            if (thisStep === totalSteps)
-                return 'transparent';
-            else if (thisStep < currentStep)
-                return 'var(--color-background-bg-brand-primary)';
-            else
-                return 'var(--color-foreground-fg-disabled)';
-        }
-    };
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', onClick: onClick ? () => onClick() : undefined, sx: {
-            cursor: onClick ? 'pointer' : 'default',
-            '&:hover': {
-                border: '1px solid #6938EF33',
-                borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
-                backgroundColor: '#6938EF1A',
-            },
-            ...stepStyle,
-        }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Box, { height: '1px', bgcolor: getConnectorColor('left'), width: connectorWidth, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), IconComponent, _jsx(Box, { height: '1px', bgcolor: getConnectorColor('right'), width: connectorWidth, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.SemiBold, color: getTextColor(), children: title })] }));
-};

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

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

package/dist/stories/UI/Stepper.stories.js

@@ -1,65 +0,0 @@
-import { Stepper } from './Stepper';
-const meta = {
-    title: 'Design System/Components/UI/Stepper',
-    component: Stepper,
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figspec',
-            url: '',
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        currentStep: {
-            control: 'number',
-            description: 'Current step of the stepper',
-            table: {
-                type: { summary: 'number' },
-            },
-        },
-        steps: {
-            control: 'object',
-            description: 'Steps of the stepper',
-            table: {
-                type: { summary: 'object' },
-            },
-        },
-        onStepClick: {
-            description: 'Function to call when a step is clicked',
-            table: {
-                type: { summary: 'function' },
-            },
-        },
-        style: {
-            control: 'object',
-            description: 'Style of the stepper',
-            table: {
-                type: { summary: 'object' },
-            },
-        },
-        testId: {
-            control: 'text',
-            description: 'Test ID of the stepper',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        currentStep: 1,
-        steps: [
-            'Lighting, Audio & Setup',
-            'Beginning',
-            'Speaking Phase',
-            'Ending',
-            'Final Checklist',
-        ],
-        onStepClick: () => { },
-        style: {},
-        testId: 'stepper',
-    },
-};