@beydesign/storybook 0.1.20 → 0.2.0

package/dist/stories/Foundations/Colors.js

@@ -34,15 +34,15 @@ const ColorSwatch = ({ name, value }) => {
     return (_jsxs("div", { className: styles.swatch, children: [_jsx("div", { className: styles.color, style: {
                     background: isGradient ? displayValue : value,
                     backgroundSize: 'cover',
-                } }), _jsxs("div", { className: styles.details, children: [_jsxs("div", { className: styles.name, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)", children: name }), _jsx(Copy, { size: 16, onClick: handleCopyName, style: {
+                } }), _jsxs("div", { className: styles.details, children: [_jsxs("div", { className: styles.name, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-label)", children: name }), _jsx(Copy, { size: 16, onClick: handleCopyName, style: {
                                     cursor: 'pointer',
-                                    color: 'var(--colors-light-text-text-subtle)',
-                                } }), copiedName && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] }), _jsxs("div", { className: styles.value, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: displayValue }), _jsx(Copy, { size: 16, onClick: handleCopyValue, style: {
+                                    color: 'var(--color-text-text-subtle)',
+                                } }), copiedName && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] }), _jsxs("div", { className: styles.value, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-subtle)", children: displayValue }), _jsx(Copy, { size: 16, onClick: handleCopyValue, style: {
                                     cursor: 'pointer',
-                                    color: 'var(--colors-light-text-text-subtle)',
+                                    color: 'var(--color-text-text-subtle)',
                                 } }), copiedValue && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] })] })] }));
 };
-const ColorGroup = ({ title, colors }) => (_jsxs("div", { className: styles.group, children: [_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)", children: title }), _jsx("div", { className: styles.swatchGrid, children: Object.entries(colors).map(([name, value]) => (_jsx(ColorSwatch, { name: name, value: value }, name))) })] }));
+const ColorGroup = ({ title, colors }) => (_jsxs("div", { className: styles.group, children: [_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--color-text-text-label)", children: title }), _jsx("div", { className: styles.swatchGrid, children: Object.entries(colors).map(([name, value]) => (_jsx(ColorSwatch, { name: name, value: value }, name))) })] }));
 export const Colors = () => {
     // Group colors by their categories
     const primitives = {
@@ -184,77 +184,75 @@ export const Colors = () => {
     };
     const semanticColors = {
         Background: {
-            '--colors-light-background-bg-brand': 'var(--colors-light-background-bg-brand)',
-            '--colors-light-background-bg-brand-hover': 'var(--colors-light-background-bg-brand-hover)',
-            '--colors-light-background-bg-brand-lemon': 'var(--colors-light-background-bg-brand-lemon)',
-            '--colors-light-background-bg-brand-lemon-hover': 'var(--colors-light-background-bg-brand-lemon-hover)',
-            '--colors-light-background-bg-error': 'var(--colors-light-background-bg-error)',
-            '--colors-light-background-bg-error-solid': 'var(--colors-light-background-bg-error-solid)',
-            '--colors-light-background-bg-error-subtle': 'var(--colors-light-background-bg-error-subtle)',
-            '--colors-light-background-bg-success': 'var(--colors-light-background-bg-success)',
-            '--colors-light-background-bg-white': 'var(--colors-light-background-bg-white)',
-            '--colors-light-background-bg-page': 'var(--colors-light-background-bg-page)',
-            '--colors-light-background-bg-page-contrast': 'var(--colors-light-background-bg-page-contrast)',
-            '--colors-light-background-bg-element': 'var(--colors-light-background-bg-element)',
-            '--colors-light-background-bg-component': 'var(--colors-light-background-bg-component)',
-            '--colors-light-background-bg-component-hover': 'var(--colors-light-background-bg-component-hover)',
-            '--colors-light-background-bg-component-disabled': 'var(--colors-light-background-bg-component-disabled)',
-            '--colors-light-background-bg-component-dark': 'var(--colors-light-background-bg-component-dark)',
-            '--colors-light-background-bg-card-highlight': 'var(--colors-light-background-bg-card-highlight)',
-            '--colors-light-background-bg-card-highlight-hover': 'var(--colors-light-background-bg-card-highlight-hover)',
-            '--colors-light-background-bg-component-contrast-subtle': 'var(--colors-light-background-bg-component-contrast-subtle)',
-            '--colors-light-background-bg-component-contrast-subtle-hover': 'var(--colors-light-background-bg-component-contrast-subtle-hover)',
-            '--colors-light-background-bg-overlay-1': 'var(--colors-light-background-bg-overlay-1)',
-            '--colors-light-background-bg-badge-accent1': 'var(--colors-light-background-bg-badge-accent1)',
-            '--colors-light-background-bg-badge-accent2': 'var(--colors-light-background-bg-badge-accent2)',
-            '--colors-light-background-bg-badge-accent3': 'var(--colors-light-background-bg-badge-accent3)',
-            '--colors-light-background-bg-badge-accent4': 'var(--colors-light-background-bg-badge-accent4)',
-            '--colors-light-background-bg-badge-accent5': 'var(--colors-light-background-bg-badge-accent5)',
-            '--colors-light-background-bg-button-disabled': 'var(--colors-light-background-bg-button-disabled)',
-            '--colors-light-background-bg-overlay-2': 'var(--colors-light-background-bg-overlay-2)',
+            '--color-background-bg-brand-primary': 'var(--color-background-bg-brand-primary)',
+            '--color-background-bg-brand-primary-hover': 'var(--color-background-bg-brand-primary-hover)',
+            '--color-background-bg-brand-secondary-hover': 'var(--color-background-bg-brand-secondary-hover)',
+            '--color-background-bg-error': 'var(--color-background-bg-error)',
+            '--color-background-bg-error-solid': 'var(--color-background-bg-error-solid)',
+            '--color-background-bg-error-subtle': 'var(--color-background-bg-error-subtle)',
+            '--color-background-bg-success': 'var(--color-background-bg-success)',
+            '--color-background-bg-white': 'var(--color-background-bg-white)',
+            '--color-background-bg-page': 'var(--color-background-bg-page)',
+            '--color-background-bg-page-contrast': 'var(--color-background-bg-page-contrast)',
+            '--color-background-bg-element': 'var(--color-background-bg-element)',
+            '--color-background-bg-component': 'var(--color-background-bg-component)',
+            '--color-background-bg-component-hover': 'var(--color-background-bg-component-hover)',
+            '--color-background-bg-component-disabled': 'var(--color-background-bg-component-disabled)',
+            '--color-background-bg-component-dark': 'var(--color-background-bg-component-dark)',
+            '--color-background-bg-card-highlight': 'var(--color-background-bg-card-highlight)',
+            '--color-background-bg-card-highlight-hover': 'var(--color-background-bg-card-highlight-hover)',
+            '--color-background-bg-component-contrast-subtle': 'var(--color-background-bg-component-contrast-subtle)',
+            '--color-background-bg-component-contrast-subtle-hover': 'var(--color-background-bg-component-contrast-subtle-hover)',
+            '--color-background-bg-overlay-1': 'var(--color-background-bg-overlay-1)',
+            '--color-background-bg-badge-accent-success': 'var(--color-background-bg-badge-accent-success)',
+            '--color-background-bg-badge-accent-brand-violet': 'var(--color-background-bg-badge-accent-brand-violet)',
+            '--color-background-bg-badge-accent-red': 'var(--color-background-bg-badge-accent-red)',
+            '--color-background-bg-badge-accent-gray': 'var(--color-background-bg-badge-accent-gray)',
+            '--color-background-bg-badge-accent-yellow': 'var(--color-background-bg-badge-accent-yellow)',
+            '--color-background-bg-button-disabled': 'var(--color-background-bg-button-disabled)',
+            '--color-background-bg-overlay-2': 'var(--color-background-bg-overlay-2)',
         },
         Border: {
-            '--colors-light-border-border-brand': 'var(--colors-light-border-border-brand)',
-            '--colors-light-border-border-brand-hover': 'var(--colors-light-border-border-brand-hover)',
-            '--colors-light-border-border-divider': 'var(--colors-light-border-border-divider)',
-            '--colors-light-border-border-component': 'var(--colors-light-border-border-component)',
-            '--colors-light-border-border-component-active': 'var(--colors-light-border-border-component-active)',
-            '--colors-light-border-border-subtle': 'var(--colors-light-border-border-subtle)',
-            '--colors-light-border-border-error': 'var(--colors-light-border-border-error)',
-            '--colors-light-border-border-white': 'var(--colors-light-border-border-white)',
+            '--color-border-border-brand': 'var(--color-border-border-brand)',
+            '--color-border-border-brand-hover': 'var(--color-border-border-brand-hover)',
+            '--color-border-border-divider': 'var(--color-border-border-divider)',
+            '--color-border-border-component': 'var(--color-border-border-component)',
+            '--color-border-border-component-active': 'var(--color-border-border-component-active)',
+            '--color-border-border-subtle': 'var(--color-border-border-subtle)',
+            '--color-border-border-error': 'var(--color-border-border-error)',
+            '--color-border-border-white': 'var(--color-border-border-white)',
         },
         Text: {
-            '--colors-light-text-text-title': 'var(--colors-light-text-text-title)',
-            '--colors-light-text-text-label': 'var(--colors-light-text-text-label)',
-            '--colors-light-text-text-paragraph': 'var(--colors-light-text-text-paragraph)',
-            '--colors-light-text-text-accent': 'var(--colors-light-text-text-accent)',
-            '--colors-light-text-text-clicable': 'var(--colors-light-text-text-clicable)',
-            '--colors-light-text-text-clicable-hover': 'var(--colors-light-text-text-clicable-hover)',
-            '--colors-light-text-text-subtle': 'var(--colors-light-text-text-subtle)',
-            '--colors-light-text-text-white': 'var(--colors-light-text-text-white)',
-            '--colors-light-text-text-inactive': 'var(--colors-light-text-text-inactive)',
-            '--colors-light-text-text-disabled-white': 'var(--colors-light-text-text-disabled-white)',
-            '--colors-light-text-text-placeholder': 'var(--colors-light-text-text-placeholder)',
-            '--colors-light-text-text-error': 'var(--colors-light-text-text-error)',
-            '--colors-light-text-text-success': 'var(--colors-light-text-text-success)',
-            '--colors-light-text-text-warning': 'var(--colors-light-text-text-warning)',
-            '--colors-light-text-text-disabled': 'var(--colors-light-text-text-disabled)',
+            '--color-text-text-title': 'var(--color-text-text-title)',
+            '--color-text-text-label': 'var(--color-text-text-label)',
+            '--color-text-text-paragraph': 'var(--color-text-text-paragraph)',
+            '--color-text-text-accent': 'var(--color-text-text-accent)',
+            '--color-text-text-clicable': 'var(--color-text-text-clicable)',
+            '--color-text-text-clicable-hover': 'var(--color-text-text-clicable-hover)',
+            '--color-text-text-subtle': 'var(--color-text-text-subtle)',
+            '--color-text-text-white': 'var(--color-text-text-white)',
+            '--color-text-text-inactive': 'var(--color-text-text-inactive)',
+            '--color-text-text-placeholder': 'var(--color-text-text-placeholder)',
+            '--color-text-text-error': 'var(--color-text-text-error)',
+            '--color-text-text-success': 'var(--color-text-text-success)',
+            '--color-text-text-warning': 'var(--color-text-text-warning)',
+            '--color-text-text-disabled': 'var(--color-text-text-disabled)',
         },
         Foreground: {
-            '--colors-light-foreground-fg-white': 'var(--colors-light-foreground-fg-white)',
-            '--colors-light-foreground-fg-disabled': 'var(--colors-light-foreground-fg-disabled)',
-            '--colors-light-foreground-fg-primary': 'var(--colors-light-foreground-fg-primary)',
-            '--colors-light-foreground-fg-secondary': 'var(--colors-light-foreground-fg-secondary)',
-            '--colors-light-foreground-fg-secondary-hover': 'var(--colors-light-foreground-fg-secondary-hover)',
-            '--colors-light-foreground-fg-tertiary': 'var(--colors-light-foreground-fg-tertiary)',
-            '--colors-light-foreground-fg-tertiary-hover': 'var(--colors-light-foreground-fg-tertiary-hover)',
-            '--colors-light-foreground-fg-quaternary': 'var(--colors-light-foreground-fg-quaternary)',
-            '--colors-light-foreground-fg-quaternary-hover-brand': 'var(--colors-light-foreground-fg-quaternary-hover-brand)',
-            '--colors-light-foreground-fg-quaternary-hover': 'var(--colors-light-foreground-fg-quaternary-hover)',
-            '--colors-light-foreground-fg-error': 'var(--colors-light-foreground-fg-error)',
-            '--colors-light-foreground-fg-success': 'var(--colors-light-foreground-fg-success)',
-            '--colors-light-foreground-fg-warning': 'var(--colors-light-foreground-fg-warning)',
-            '--colors-light-foreground-fg-brand-primary': 'var(--colors-light-foreground-fg-brand-primary)',
+            '--color-foreground-fg-white': 'var(--color-foreground-fg-white)',
+            '--color-foreground-fg-disabled': 'var(--color-foreground-fg-disabled)',
+            '--color-foreground-fg-primary': 'var(--color-foreground-fg-primary)',
+            '--color-foreground-fg-secondary': 'var(--color-foreground-fg-secondary)',
+            '--color-foreground-fg-secondary-hover': 'var(--color-foreground-fg-secondary-hover)',
+            '--color-foreground-fg-tertiary': 'var(--color-foreground-fg-tertiary)',
+            '--color-foreground-fg-tertiary-hover': 'var(--color-foreground-fg-tertiary-hover)',
+            '--color-foreground-fg-quaternary': 'var(--color-foreground-fg-quaternary)',
+            '--color-foreground-fg-quaternary-hover-brand': 'var(--color-foreground-fg-quaternary-hover-brand)',
+            '--color-foreground-fg-quaternary-hover': 'var(--color-foreground-fg-quaternary-hover)',
+            '--color-foreground-fg-error': 'var(--color-foreground-fg-error)',
+            '--color-foreground-fg-success': 'var(--color-foreground-fg-success)',
+            '--color-foreground-fg-warning': 'var(--color-foreground-fg-warning)',
+            '--color-foreground-fg-brand-primary': 'var(--color-foreground-fg-brand-primary)',
         },
     };
     const gradients = {
@@ -264,5 +262,5 @@ export const Colors = () => {
             '--global-bp-gradient': 'var(--global-bp-gradient)',
         },
     };
-    return (_jsxs("div", { className: styles.container, children: [_jsx(Typography, { size: TypographySize.HeadingXL, weight: TypographyWeight.Bold, color: "var(--colors-light-text-text-title)", children: "Color System" }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)", children: "Gradients" }), Object.entries(gradients).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)", children: "Primitive Colors" }), Object.entries(primitives).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)", children: "Semantic Colors" }), Object.entries(semanticColors).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] })] }));
+    return (_jsxs("div", { className: styles.container, children: [_jsx(Typography, { size: TypographySize.HeadingXL, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: "Color System" }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-label)", children: "Gradients" }), Object.entries(gradients).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-label)", children: "Primitive Colors" }), Object.entries(primitives).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-label)", children: "Semantic Colors" }), Object.entries(semanticColors).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] })] }));
 };

package/dist/stories/Navigation/ComplexHeader.js

@@ -13,7 +13,7 @@ export const ComplexHeader = ({ title = 'Title', badgeText = '22', newButtonText
         setLayoutType(type);
         onLayoutChange?.(type);
     };
-    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--primitives-desktop-primary-gray-200)', bgcolor: 'var(--colors-light-background-bg-white)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', sx: sx, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, children: title }), badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.md, color: BadgeColor.Violet }))] }), onNewClick && (_jsx(MainButton, { text: newButtonText, hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, showTrailingIcon: true, trailingIcon: 'Plus', onClick: onNewClick }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsx(AutoComplete, { options: [], placeholder: "Search", onChange: () => { }, value: '' }), _jsx(MainButton, { text: 'Output File', hierarchy: ButtonHierarchy.SecondaryColor, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onOutputFileClick }), _jsx(MainButton, { text: 'Download All', hierarchy: ButtonHierarchy.Primary, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onDownloadAllClick }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', children: [_jsx(MainButton, { hierarchy: layoutType === LayoutType.Grid
+    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page-contrast)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', sx: sx, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, children: title }), badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.md, color: BadgeColor.Violet }))] }), onNewClick && (_jsx(MainButton, { text: newButtonText, hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, showTrailingIcon: true, trailingIcon: 'Plus', onClick: onNewClick }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsx(AutoComplete, { options: [], placeholder: "Search", onChange: () => { }, value: '' }), _jsx(MainButton, { text: 'Output File', hierarchy: ButtonHierarchy.SecondaryColor, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onOutputFileClick }), _jsx(MainButton, { text: 'Download All', hierarchy: ButtonHierarchy.Primary, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onDownloadAllClick }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', children: [_jsx(MainButton, { hierarchy: layoutType === LayoutType.Grid
                                     ? ButtonHierarchy.TertiaryColor
                                     : ButtonHierarchy.Tertiary, size: ButtonSize.sm, displayIconMode: ButtonDisplayMode.Only, displayIcon: "GridFour", onClick: () => handleLayoutChange(LayoutType.Grid) }), _jsx(MainButton, { hierarchy: layoutType === LayoutType.List
                                     ? ButtonHierarchy.TertiaryColor

package/dist/stories/Navigation/Header.js

@@ -5,5 +5,5 @@ import { ButtonHierarchy, ButtonSize } from '../Buttons';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Avatar, AvatarSize } from '../UI';
 export const Header = ({ title = 'Beyond Presence', email, avatarProps, backButtonText = 'Back', onBackClick, onLogoutClick, className, }) => {
-    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--primitives-desktop-primary-gray-200)', bgcolor: 'var(--colors-light-background-bg-white)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', children: [onBackClick ? (_jsx(MainButton, { text: backButtonText, hierarchy: ButtonHierarchy.Tertiary, showLeadingIcon: true, leadingIcon: 'ArrowLeft', onClick: onBackClick })) : (_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, children: title })), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, children: email }), _jsx(MainButton, { text: 'Log Out', size: ButtonSize.sm, hierarchy: ButtonHierarchy.Tertiary, onClick: onLogoutClick, style: { paddingInline: '0px', paddingBlock: '0.1rem' } })] }), _jsx(Avatar, { ...avatarProps, size: AvatarSize.md })] })] }));
+    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page-contrast)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', children: [onBackClick ? (_jsx(MainButton, { text: backButtonText, hierarchy: ButtonHierarchy.Tertiary, showLeadingIcon: true, leadingIcon: 'ArrowLeft', onClick: onBackClick })) : (_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, children: title })), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, children: email }), _jsx(MainButton, { text: 'Log Out', size: ButtonSize.sm, hierarchy: ButtonHierarchy.Tertiary, onClick: onLogoutClick, style: { paddingInline: '0px', paddingBlock: '0.1rem' } })] }), _jsx(Avatar, { ...avatarProps, size: AvatarSize.md })] })] }));
 };

package/dist/stories/Navigation/NavItem.js

@@ -20,14 +20,14 @@ const StyledNavItem = styled.div `
   &:hover {
     .nav-item-icon {
       color: ${({ $state }) => $state === NavItemState.Disabled
-    ? 'var(--primitives-desktop-primary-gray-500)'
-    : 'var(--colors-light-background-bg-brand-hover)'} !important;
+    ? 'var(--color-text-text-subtle)'
+    : 'var(--color-background-bg-brand-primary-hover)'} !important;
     }
 
     .nav-item-text {
       color: ${({ $state }) => $state === NavItemState.Disabled
-    ? 'var(--primitives-desktop-primary-gray-500)'
-    : 'var(--colors-light-background-bg-brand-hover)'} !important;
+    ? 'var(--color-text-text-subtle)'
+    : 'var(--color-background-bg-brand-primary-hover)'} !important;
     }
   }
 `;
@@ -35,8 +35,8 @@ const StyledNavItem = styled.div `
 const IconWrapper = styled.span `
   display: inline-flex;
   color: ${({ $state }) => $state === NavItemState.Active
-    ? 'var(--colors-light-background-bg-brand)'
-    : 'var(--colors-light-text-text-paragraph)'};
+    ? 'var(--color-background-bg-brand-primary)'
+    : 'var(--color-text-text-paragraph)'};
   transition: color 0.3s ease-in-out;
 `;
 const TextWrapper = styled.span `
@@ -51,7 +51,7 @@ export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavIt
     };
     const isCollapsed = size === NavItemSize.Collapsed;
     return (_jsxs(StyledNavItem, { "$state": state, "$size": size, onClick: handleClick, className: className, title: isCollapsed ? text : undefined, children: [_jsx("svg", { width: "5", height: "36", viewBox: "0 0 5 36", fill: state === NavItemState.Active
-                    ? 'var(--colors-light-background-bg-brand)'
+                    ? 'var(--color-background-bg-brand-primary)'
                     : 'transparent', xmlns: "http://www.w3.org/2000/svg", style: {
                     transition: 'fill 0.3s ease-in-out',
                     position: 'absolute',
@@ -61,6 +61,6 @@ export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavIt
                         }) }), !isCollapsed && (_jsx(TextWrapper, { className: "nav-item-text", children: _jsx(Typography, { size: TypographySize.TextS, weight: state === NavItemState.Active
                                 ? TypographyWeight.SemiBold
                                 : TypographyWeight.Medium, className: "nav-item-text", color: state === NavItemState.Active
-                                ? 'var(--colors-light-background-bg-brand)'
-                                : 'var(--colors-light-text-text-paragraph)', children: text }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: "Coming Soon", color: BadgeColor.Default }))] })] }));
+                                ? 'var(--color-background-bg-brand-primary)'
+                                : 'var(--color-text-text-paragraph)', children: text }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: "Coming Soon", color: BadgeColor.Default }))] })] }));
 };

package/dist/stories/Navigation/NavItem.stories.js

@@ -80,7 +80,7 @@ export const SidebarExpanded = {
             flexDirection: 'column',
             gap: '8px',
             padding: '16px',
-            backgroundColor: 'var(--colors-light-background-bg-white)',
+            backgroundColor: 'var(--color-background-bg-white)',
             borderRadius: '8px',
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
         }, children: [_jsx(NavItem, { text: "Home", icon: "House", size: NavItemSize.Expanded, state: NavItemState.Active }), _jsx(NavItem, { text: "Settings", icon: "Gear", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Notifications", icon: "Bell", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Messages", icon: "ChatText", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Profile", icon: "User", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Analytics", icon: "ChartBar", size: NavItemSize.Expanded, showBadge: true, state: NavItemState.Disabled })] })),
@@ -90,7 +90,7 @@ export const SidebarCollapsed = {
             display: 'flex',
             flexDirection: 'column',
             gap: '8px',
-            backgroundColor: 'var(--colors-light-background-bg-white)',
+            backgroundColor: 'var(--color-background-bg-white)',
             borderRadius: '8px',
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
         }, children: [_jsx(NavItem, { text: "Home", icon: "House", size: NavItemSize.Collapsed, state: NavItemState.Active }), _jsx(NavItem, { text: "Settings", icon: "Gear", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Notifications", icon: "Bell", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Messages", icon: "ChatText", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Profile", icon: "User", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Analytics", icon: "ChartBar", state: NavItemState.Disabled, size: NavItemSize.Collapsed })] })),

package/dist/stories/Navigation/Sidebar.js

@@ -11,8 +11,8 @@ import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonShape, ButtonSize
 const StyledSidebar = styled.div `
   display: flex;
   flex-direction: column;
-  background-color: var(--colors-light-background-bg-surface);
-  border-right: 1px solid var(--colors-light-border-border-default);
+  background-color: var(--color-background-bg-component);
+  border-right: 1px solid var(--color-border-border-component);
   height: 100vh;
   width: ${({ $size }) => ($size === SidebarSize.Expanded ? '280px' : '80px')};
   transition: width 0.3s ease-in-out;
@@ -59,7 +59,7 @@ const NavSection = styled.div `
   transition: all 0.3s ease-in-out;
 `;
 const SectionTitle = styled.div `
-  color: var(--colors-light-text-text-subtle);
+  color: var(--color-text-text-subtle);
   padding: ${({ $size }) => $size === SidebarSize.Expanded ? '0px 28px' : '0px'};
   display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'flex' : 'block'};
   opacity: ${({ $size }) => ($size === SidebarSize.Collapsed ? 0 : 0.5)};
@@ -67,11 +67,10 @@ const SectionTitle = styled.div `
   transition: all 0.3s ease-in-out;
 `;
 const Separator = styled.div `
-  height: 0.1px;
-  background-color: var(--primitives-desktop-primary-brand-violet-950);
+  height: 1px;
+  background-color: var(--color-border-border-divider);
   padding: ${({ $size }) => $size === SidebarSize.Collapsed ? '0px 8px' : '0px 28px'};
   margin: ${({ $size }) => $size === SidebarSize.Collapsed ? '16px 12px' : '16px 18px'};
-  opacity: 0.05;
   transition: all 0.3s ease-in-out;
 `;
 const BottomContainer = styled.div `
@@ -90,7 +89,7 @@ const NavItemWrapper = ({ item, isCollapsed, }) => {
     };
     return (_jsx(NavItem, { text: item.text, icon: item.icon, state: item.state || NavItemState.Default, size: isCollapsed ? NavItemSize.Collapsed : NavItemSize.Expanded, showBadge: isCollapsed ? false : item.showBadge, onClick: handleClick }));
 };
-export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, loadingCredits = false, onToggle, logoProps = { color: 'var(--primitives-desktop-primary-brand-violet-950)' }, }) => {
+export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, loadingCredits = false, onToggle, logoProps = { color: 'var(--color-foreground-fg-brand-logo)' }, }) => {
     const [sidebarSize, setSidebarSize] = useState(size);
     const handleToggle = () => {
         const newSize = sidebarSize === SidebarSize.Expanded
@@ -105,7 +104,7 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
     const cardSize = isCollapsed
         ? CreditsCardSize.Collapsed
         : CreditsCardSize.Expanded;
-    return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", className: isCollapsed ? 'hidden' : '', children: isCollapsed
+    return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-paragraph)", className: isCollapsed ? 'hidden' : '', children: isCollapsed
                                                     ? section.title.split(' ')[0]
                                                     : section.title }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
                                     section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [_jsx(Box, { display: 'flex', justifyContent: 'center', padding: isCollapsed ? '8px' : '0px 12px', children: loadingCredits ? (_jsx(CreditsCardSkeleton, { size: cardSize })) : credits ? (_jsx(CreditsCard, { size: cardSize, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, managedAgentsInfoText: credits.managedAgentsInfoText, speechToVideoInfoText: credits.speechToVideoInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits })) : null }), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }), _jsx(ToggleButtonWrapper, { children: isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tertiary, style: {

package/dist/stories/Navigation/Sidebar.stories.js

@@ -114,7 +114,7 @@ const defaultBottomNavItems = [
 ];
 export const InBoxContainer = {
     render: (args) => (_jsxs(Stack, { direction: 'row', height: '100%', width: '100%', children: [_jsx(Box, { height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', sx: {
-                    border: '1px solid var(--colors-light-border-border-default)',
+                    border: '1px solid var(--color-border-border-component)',
                     borderRadius: '8px',
                     boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
                     maxWidth: '280px',

package/dist/stories/PlanCard/PlanCard.d.ts

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

package/dist/stories/PlanCard/PlanCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
+import { Badge, BadgeColor, BadgeSize, CheckIcon, CheckIconColor, CheckIconSize, CheckIconType, } from '../UI';
+export const PlanCard = ({ title, description, price, priceSuffix = '/month', badgeText, badgeColor = BadgeColor.Lemon, highlighted = false, featuresTitle = 'This includes:', features = [], buttonText = 'Upgrade', onButtonClick, buttonDisabled = false, buttonHierarchy = ButtonHierarchy.Primary, buttonLoading = false, width = '286px', style, testId, }) => {
+    const planKey = title?.toLowerCase()?.replace(/\s+/g, '-');
+    return (_jsxs(Box, { width: width, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: highlighted
+            ? 'var(--color-background-bg-card-highlight)'
+            : 'var(--color-background-bg-component)', border: `1px solid ${highlighted
+            ? '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) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: feature })] }, `${index}-${feature}`)))] }))] }));
+};

package/dist/stories/PlanCard/PlanCard.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlanCard } from './PlanCard';
+declare const meta: Meta<typeof PlanCard>;
+export default meta;
+type Story = StoryObj<typeof PlanCard>;
+export declare const Pro: Story;
+export declare const Free: Story;
+export declare const Personal: Story;
+export declare const Custom: Story;

package/dist/stories/PlanCard/PlanCard.stories.js

@@ -0,0 +1,125 @@
+import { PlanCard } from './PlanCard';
+import { BadgeColor } from '../UI';
+import { ButtonHierarchy } from '../Buttons';
+const meta = {
+    title: 'Design System/Components/PlanCard/PlanCard',
+    component: PlanCard,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7002-19848',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: { control: 'text', description: 'Plan name' },
+        description: { control: 'text', description: 'Short plan description' },
+        price: {
+            control: 'text',
+            description: 'Price text (e.g. "€210" or "Custom")',
+        },
+        priceSuffix: {
+            control: 'text',
+            description: 'Price suffix',
+            table: { defaultValue: { summary: '/month' } },
+        },
+        badgeText: { control: 'text', description: 'Badge text' },
+        badgeColor: {
+            control: 'select',
+            options: Object.values(BadgeColor),
+            description: 'Badge color',
+            table: { defaultValue: { summary: BadgeColor.Lemon } },
+        },
+        highlighted: {
+            control: 'boolean',
+            description: 'Brand background + border highlight',
+        },
+        featuresTitle: {
+            control: 'text',
+            table: { defaultValue: { summary: 'This includes:' } },
+        },
+        features: { control: 'object', description: 'Feature list' },
+        buttonText: {
+            control: 'text',
+            table: { defaultValue: { summary: 'Upgrade' } },
+        },
+        buttonDisabled: { control: 'boolean' },
+        buttonHierarchy: {
+            control: 'select',
+            options: Object.values(ButtonHierarchy),
+            table: { defaultValue: { summary: ButtonHierarchy.Primary } },
+        },
+        buttonLoading: { control: 'boolean' },
+        width: {
+            control: 'text',
+            table: { defaultValue: { summary: '286px' } },
+        },
+    },
+};
+export default meta;
+export const Pro = {
+    args: {
+        title: 'Pro',
+        description: 'Designed for professionals looking to expand their reach.',
+        price: '€210',
+        priceSuffix: '/month',
+        badgeText: 'Most Popular',
+        badgeColor: BadgeColor.Lemon,
+        highlighted: true,
+        buttonText: 'Upgrade',
+        features: [
+            '300 credits (300 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+            '3 active Conversational Agents',
+            'Priority support',
+        ],
+    },
+};
+export const Free = {
+    args: {
+        title: 'Free',
+        description: 'Discover what Beyond Presence has to offer.',
+        price: '€0',
+        priceSuffix: '/month',
+        badgeText: 'Current Plan',
+        badgeColor: BadgeColor.Green,
+        buttonText: 'Current plan',
+        buttonDisabled: true,
+        features: [
+            '1 credit (1 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+        ],
+    },
+};
+export const Personal = {
+    args: {
+        title: 'Personal',
+        description: 'Tailored for personal projects and independent creators.',
+        price: '€50',
+        priceSuffix: '/month',
+        buttonText: 'Upgrade',
+        features: [
+            '50 credits (50 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+            '1 active Conversational Agent',
+        ],
+    },
+};
+export const Custom = {
+    args: {
+        title: 'Professional',
+        description: 'For businesses with high volume and custom needs.',
+        price: 'Custom',
+        priceSuffix: '',
+        buttonText: 'Upgrade',
+        features: ['5000+ credits (5000+ min of Conversational Agent video)'],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A custom-priced plan — the price suffix is omitted.',
+            },
+        },
+    },
+};

package/dist/stories/PlanCard/PlanCardSkeleton.d.ts

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

package/dist/stories/PlanCard/PlanCardSkeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SkeletonLoader } from '../UI';
+export const PlanCardSkeleton = ({ showBadge = true, showButton = true, showFeatures = true, featuresCount = 4, width = '286px', style, testId, }) => {
+    return (_jsxs(Box, { width: width, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: 'var(--color-background-bg-component)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', style: style, "data-testid": testId, 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', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(SkeletonLoader, { width: '40%', height: '24px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), showBadge && (_jsx(SkeletonLoader, { width: '88px', height: '24px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)' }))] }), _jsx(SkeletonLoader, { width: '100%', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), _jsx(SkeletonLoader, { width: '50%', height: '32px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }), showButton && (_jsx(SkeletonLoader, { width: '100%', height: '36px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)' })), showFeatures && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(SkeletonLoader, { width: '96px', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), Array.from({ length: featuresCount }).map((_, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(SkeletonLoader, { width: '20px', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)' }), _jsx(SkeletonLoader, { width: index % 2 === 0 ? '80%' : '60%', height: '18px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }, index)))] }))] }));
+};

package/dist/stories/PlanCard/PlanCardSkeleton.stories.d.ts

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

package/dist/stories/PlanCard/PlanCardSkeleton.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { PlanCardSkeleton } from './PlanCardSkeleton';
+const meta = {
+    title: 'Design System/Components/PlanCard/PlanCardSkeleton',
+    component: PlanCardSkeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        showBadge: {
+            control: 'boolean',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        showButton: {
+            control: 'boolean',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        showFeatures: {
+            control: 'boolean',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        featuresCount: {
+            control: 'number',
+            table: { defaultValue: { summary: '4' } },
+        },
+        width: {
+            control: 'text',
+            table: { defaultValue: { summary: '286px' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+export const Grid = {
+    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(PlanCardSkeleton, {}), _jsx(PlanCardSkeleton, { featuresCount: 3 }), _jsx(PlanCardSkeleton, { featuresCount: 5 })] })),
+};

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

@@ -0,0 +1,3 @@
+export * from './PlanCard';
+export * from './PlanCardSkeleton';
+export * from './types';

package/dist/stories/PlanCard/index.js

@@ -0,0 +1,3 @@
+export * from './PlanCard';
+export * from './PlanCardSkeleton';
+export * from './types';