@beydesign/storybook 0.0.97 → 0.0.98

package/dist/stories/Buttons/MainButton.js

@@ -40,11 +40,11 @@ const StyledButton = styled.button `
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-background-bg-overlay-1)';
             return 'var(--primitives-desktop-primary-transparent-violet-50)';
-        case ButtonHierarchy.Tetriary:
+        case ButtonHierarchy.Tertiary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--primitives-desktop-primary-white-0)';
             return 'var(--primitives-desktop-primary-white-0)';
-        case ButtonHierarchy.TetriaryColor:
+        case ButtonHierarchy.TertiaryColor:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--primitives-desktop-primary-white-0)';
             return 'var(--primitives-desktop-primary-white-0)';
@@ -79,11 +79,11 @@ const StyledButton = styled.button `
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-text-text-white)';
             return 'var(--colors-light-text-text-white)';
-        case ButtonHierarchy.Tetriary:
+        case ButtonHierarchy.Tertiary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-text-text-disabled)';
             return 'var(--colors-light-text-text-title)';
-        case ButtonHierarchy.TetriaryColor:
+        case ButtonHierarchy.TertiaryColor:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-text-text-disabled)';
             return 'var(--colors-light-text-text-accent)';
@@ -119,11 +119,11 @@ const StyledButton = styled.button `
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-border-border-disabled)';
             return 'var(--colors-light-background-bg-white)';
-        case ButtonHierarchy.Tetriary:
+        case ButtonHierarchy.Tertiary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--primitives-desktop-primary-white-0)';
             return 'var(--primitives-desktop-primary-white-0)';
-        case ButtonHierarchy.TetriaryColor:
+        case ButtonHierarchy.TertiaryColor:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--primitives-desktop-primary-white-0)';
             return 'var(--primitives-desktop-primary-white-0)';
@@ -161,9 +161,9 @@ const StyledButton = styled.button `
             return 'var(--colors-light-background-bg-card-highlight-hover)';
         case ButtonHierarchy.SecondaryTransparent:
             return 'var(--colors-light-background-bg-brand-hover)';
-        case ButtonHierarchy.Tetriary:
+        case ButtonHierarchy.Tertiary:
             return 'var(--primitives-desktop-primary-white-40)';
-        case ButtonHierarchy.TetriaryColor:
+        case ButtonHierarchy.TertiaryColor:
             return 'var(--colors-light-background-bg-card-highlight-hover)';
         default:
             return 'var(--colors-light-background-bg-brand-hover)';
@@ -184,9 +184,9 @@ const StyledButton = styled.button `
             return 'var(--colors-light-background-bg-brand-hover)';
         case ButtonHierarchy.SecondaryTransparent:
             return 'var(--primitives-desktop-primary-white-100)';
-        case ButtonHierarchy.Tetriary:
+        case ButtonHierarchy.Tertiary:
             return 'var(--primitives-desktop-primary-white-0)';
-        case ButtonHierarchy.TetriaryColor:
+        case ButtonHierarchy.TertiaryColor:
             return 'var(--primitives-desktop-primary-white-0)';
         default:
             return 'var(--colors-light-background-bg-brand-hover)';

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

@@ -8,8 +8,8 @@ export declare const PrimaryLemon: Story;
 export declare const Secondary: Story;
 export declare const SecondaryColor: Story;
 export declare const SecondaryTransparent: Story;
-export declare const Tetriary: Story;
-export declare const TetriaryColor: Story;
+export declare const Tertiary: Story;
+export declare const TertiaryColor: Story;
 export declare const PrimaryHover: Story;
 export declare const PrimaryDisabled: Story;
 export declare const IconOnly: Story;

package/dist/stories/Buttons/MainButton.stories.js

@@ -36,8 +36,8 @@ const meta = {
                 'Secondary',
                 'Secondary-color',
                 'Secondary-transparent',
-                'Tetriary',
-                'Tetriary-color',
+                'Tertiary',
+                'Tertiary-color',
             ],
             description: 'Visual hierarchy of the button',
             table: {
@@ -172,18 +172,18 @@ export const SecondaryTransparent = {
         hierarchy: ButtonHierarchy.SecondaryTransparent,
     },
 };
-export const Tetriary = {
+export const Tertiary = {
     args: {
         ...Primary.args,
         text: 'Button',
-        hierarchy: ButtonHierarchy.Tetriary,
+        hierarchy: ButtonHierarchy.Tertiary,
     },
 };
-export const TetriaryColor = {
+export const TertiaryColor = {
     args: {
         ...Primary.args,
         text: 'Button',
-        hierarchy: ButtonHierarchy.TetriaryColor,
+        hierarchy: ButtonHierarchy.TertiaryColor,
     },
 };
 export const PrimaryHover = {

package/dist/stories/Buttons/ToggleButtonGroup.js

@@ -29,6 +29,6 @@ export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled,
             ...style,
         }, gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `1px solid var(--colors-light-border-border-component)`, width: 'fit-content', children: options.map((option) => {
             const isSelected = option === selectedOption;
-            return (_jsx(MainButton, { text: option, onClick: () => onChange(option), size: getButtonSize(), hierarchy: ButtonHierarchy.Tetriary, type: ButtonType.Button, style: isSelected ? selectedOptionStyle : unselectedOptionStyle, disabled: disabled }, option));
+            return (_jsx(MainButton, { text: option, onClick: () => onChange(option), size: getButtonSize(), hierarchy: ButtonHierarchy.Tertiary, type: ButtonType.Button, style: isSelected ? selectedOptionStyle : unselectedOptionStyle, disabled: disabled }, option));
         }) }));
 };

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

@@ -22,8 +22,8 @@ export declare enum ButtonHierarchy {
     Secondary = "Secondary",
     SecondaryColor = "Secondary-color",
     SecondaryTransparent = "Secondary-transparent",
-    Tetriary = "Tetriary",
-    TetriaryColor = "Tetriary-color"
+    Tertiary = "Tertiary",
+    TertiaryColor = "Tertiary-color"
 }
 /**
  * Button states

package/dist/stories/Buttons/types.js

@@ -20,8 +20,8 @@ export var ButtonHierarchy;
     ButtonHierarchy["Secondary"] = "Secondary";
     ButtonHierarchy["SecondaryColor"] = "Secondary-color";
     ButtonHierarchy["SecondaryTransparent"] = "Secondary-transparent";
-    ButtonHierarchy["Tetriary"] = "Tetriary";
-    ButtonHierarchy["TetriaryColor"] = "Tetriary-color";
+    ButtonHierarchy["Tertiary"] = "Tertiary";
+    ButtonHierarchy["TertiaryColor"] = "Tertiary-color";
 })(ButtonHierarchy || (ButtonHierarchy = {}));
 /**
  * Button states

package/dist/stories/Credits/CreditsCard.js

@@ -5,11 +5,14 @@ import { CreditsCardSize } from './types';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Box } from '@mui/material';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
+import { formatNumberShort } from '../../utils';
 const StyledCard = styled.div `
   display: flex;
   flex-direction: column;
-  gap: ${({ $size }) => ($size === CreditsCardSize.Collapsed ? '8px' : '16px')};
-  padding: ${({ $size }) => $size === CreditsCardSize.Collapsed ? '20px 16px' : '24px'};
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md);
+  padding: ${({ $size }) => $size === CreditsCardSize.Collapsed
+    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
   background-color: ${({ $warning }) => $warning
     ? 'var(--primitives-desktop-primary-red-50)'
     : 'var(--colors-light-background-bg-card-highlight)'};
@@ -38,26 +41,14 @@ const TextWrapper = styled.span `
   display: inline-block;
   white-space: nowrap;
 `;
-export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, creditInfoText = '1 Credit = 1 min video', overUsageEnabled = false, overUsedCredits = 0, }) => {
+export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, creditInfoText = '1 Credit = 1 min video', managedAgentsInfoText = 'Managed Agents 1 Min = 100 Credits', speechToVideoInfoText = 'Speech-to-Video 1 Min = 50 Credits', overUsageEnabled = false, overUsedCredits = 0, }) => {
     const isCollapsed = size === CreditsCardSize.Collapsed;
     const creditsLimitReached = usedCredits >= maxCredits;
     const case1 = overUsageEnabled && overUsedCredits > 0; // if over usage is enabled and over used credits are greater than 0
     const case2 = case1 || !creditsLimitReached; // if case 1 is true or credits limit is not reached
     const case3 = !overUsageEnabled && creditsLimitReached; // if over usage is not enabled and credits limit is reached
+    const case4 = !overUsageEnabled && !creditsLimitReached; // if over usage is not enabled and credits limit is not reached
     const availableCredits = creditsLimitReached ? 0 : maxCredits - usedCredits;
-    return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed &&
-                maxCredits !== undefined &&
-                availableCredits !== undefined && (_jsxs(React.Fragment, { children: [_jsxs(CreditRow, { style: {
-                            gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
-                        }, children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${availableCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "Credits Limit Reached" }) })), _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
-                                    if (onUpgradeClick) {
-                                        onUpgradeClick();
-                                    }
-                                } })] }), case1 && (_jsx(CreditRow, { children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) }) })), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: creditInfoText }) }) }) })] })), isCollapsed &&
-                maxCredits !== undefined &&
-                availableCredits !== undefined && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${availableCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Cred..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${overUsedCredits}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
-                                if (onUpgradeClick) {
-                                    onUpgradeClick();
-                                }
-                            } }) })] }))] }));
+    const isValid = maxCredits !== undefined && availableCredits !== undefined;
+    return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed && isValid && (_jsxs(React.Fragment, { children: [case4 && (_jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })), _jsxs(CreditRow, { children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${availableCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "Credits Limit Reached" }) })), !case4 && (_jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }))] }), case1 && (_jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) })), case4 ? (_jsxs(React.Fragment, { children: [_jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: managedAgentsInfoText }) }) }), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: speechToVideoInfoText }) }) })] })) : (_jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: creditInfoText }) }) }))] })), isCollapsed && isValid && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${formatNumberShort(availableCredits)}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${formatNumberShort(maxCredits)}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Cred..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${formatNumberShort(overUsedCredits)}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })] }))] }));
 };

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

@@ -32,6 +32,14 @@ export interface CreditsCardProps {
      * Text explaining credit usage (e.g., "1 Credit = 1 min video")
      */
     creditInfoText?: string;
+    /**
+     * Text explaining speech to video usage (e.g., "1 Min = 100 Credits")
+     */
+    speechToVideoInfoText?: string;
+    /**
+     * Text explaining managed agents usage (e.g., "Managed Agents 1 Min = 100 Credits")
+     */
+    managedAgentsInfoText?: string;
     /**
      * Whether to enable over usage
      */

package/dist/stories/Navigation/ComplexHeader.js

@@ -14,8 +14,8 @@ export const ComplexHeader = ({ title = 'Title', badgeText = '22', newButtonText
         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
-                                    ? ButtonHierarchy.TetriaryColor
-                                    : ButtonHierarchy.Tetriary, size: ButtonSize.sm, displayIconMode: ButtonDisplayMode.Only, displayIcon: "GridFour", onClick: () => handleLayoutChange(LayoutType.Grid) }), _jsx(MainButton, { hierarchy: layoutType === LayoutType.List
-                                    ? ButtonHierarchy.TetriaryColor
-                                    : ButtonHierarchy.Tetriary, size: ButtonSize.sm, displayIconMode: ButtonDisplayMode.Only, displayIcon: "List", onClick: () => handleLayoutChange(LayoutType.List) })] })] })] }));
+                                    ? ButtonHierarchy.TertiaryColor
+                                    : ButtonHierarchy.Tertiary, size: ButtonSize.sm, displayIconMode: ButtonDisplayMode.Only, displayIcon: "GridFour", onClick: () => handleLayoutChange(LayoutType.Grid) }), _jsx(MainButton, { hierarchy: layoutType === LayoutType.List
+                                    ? ButtonHierarchy.TertiaryColor
+                                    : ButtonHierarchy.Tertiary, size: ButtonSize.sm, displayIconMode: ButtonDisplayMode.Only, displayIcon: "List", onClick: () => handleLayoutChange(LayoutType.List) })] })] })] }));
 };

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.Tetriary, 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.Tetriary, 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(--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 })] })] }));
 };

package/dist/stories/Navigation/ProcessHeader.js

@@ -7,5 +7,5 @@ export const ProcessHeader = ({ title, currentStep, subtitle, totalSteps, header
     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.TetriaryColor, trailingIcon: 'X', showTrailingIcon: true }))] }));
+    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/Sidebar.js

@@ -111,9 +111,9 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
                                         padding: isCollapsed ? '8px' : '0px 12px',
                                     }, children: _jsx(CreditsCard, { size: isCollapsed
                                             ? CreditsCardSize.Collapsed
-                                            : CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, creditInfoText: credits.creditInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits }) })), 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.Tetriary, style: {
+                                            : CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, creditInfoText: credits.creditInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits }) })), 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: {
                         boxShadow: '2px 4px 8px 0px #1D142814',
-                    } })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tetriary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
+                    } })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tertiary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
                         boxShadow: '2px 4px 8px 0px #1D142814',
                     }, shape: ButtonShape.Circle })) })] }));
 };

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

@@ -1,6 +1,7 @@
 import { SxProps, Theme } from '@mui/material';
 import { IconName } from '../../utils';
 import { AvatarProps } from '../UI';
+import { CreditsCardProps } from '../Credits';
 /**
  * Header component props
  */
@@ -148,14 +149,7 @@ export interface SidebarProps {
     /**
      * Credits information
      */
-    credits?: {
-        maxCredits: number;
-        usedCredits: number;
-        creditInfoText?: string;
-        onUpgradeClick?: () => void;
-        overUsageEnabled?: boolean;
-        overUsedCredits?: number;
-    };
+    credits?: Omit<CreditsCardProps, 'size' | 'className'>;
     /**
      * Optional callback when sidebar is toggled
      */

package/dist/utils/common.d.ts

@@ -1 +1,2 @@
 export declare const getInitials: (text: string) => string;
+export declare const formatNumberShort: (num: number) => string;

package/dist/utils/common.js

@@ -6,3 +6,16 @@ export const getInitials = (text) => {
         .map((word) => word[0]?.toUpperCase())
         .join('');
 };
+export const formatNumberShort = (num) => {
+    const sign = num < 0 ? '-' : '';
+    num = Math.abs(num);
+    if (num < 1000)
+        return `${sign}${num}`;
+    const units = ['', 'K', 'M', 'B', 'T', 'Q'];
+    const tier = Math.min(Math.floor(Math.log10(num) / 3), units.length - 1);
+    const suffix = units[tier];
+    const scale = Math.pow(10, tier * 3);
+    const scaled = num / scale;
+    const formatted = scaled % 1 === 0 ? scaled.toString() : scaled.toFixed(1);
+    return `${sign}${formatted}${suffix}`;
+};

package/package.json

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