@beydesign/storybook 0.0.98 → 0.1.0

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export * from './stories/Credits';
 export * from './stories/Navigation';
 export * from './stories/Typography';
 export * from './stories/UI';
+export * from './stories/StripeProduct';

package/dist/index.js

@@ -7,3 +7,4 @@ export * from './stories/Credits';
 export * from './stories/Navigation';
 export * from './stories/Typography';
 export * from './stories/UI';
+export * from './stories/StripeProduct';

package/dist/stories/Credits/CreditsCard.js

@@ -41,14 +41,13 @@ 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', managedAgentsInfoText = 'Managed Agents 1 Min = 100 Credits', speechToVideoInfoText = 'Speech-to-Video 1 Min = 50 Credits', overUsageEnabled = false, overUsedCredits = 0, }) => {
+export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, 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;
     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?.() }) })] }))] }));
+    return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed && isValid && (_jsxs(React.Fragment, { children: [case2 && (_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" }) })), !case2 && (_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}` }) }) })), _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 }) }) })] })), 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/CreditsCard.stories.js

@@ -14,7 +14,8 @@ const meta = {
         },
         maxCredits: { control: 'number' },
         usedCredits: { control: 'number' },
-        creditInfoText: { control: 'text' },
+        managedAgentsInfoText: { control: 'text' },
+        speechToVideoInfoText: { control: 'text' },
         overUsageEnabled: { control: 'boolean' },
         overUsedCredits: { control: 'number' },
     },

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

@@ -28,10 +28,6 @@ export interface CreditsCardProps {
      * Function to handle upgrade button click
      */
     onUpgradeClick?: () => void;
-    /**
-     * 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")
      */

package/dist/stories/Navigation/Sidebar.js

@@ -111,7 +111,7 @@ 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.Tertiary, style: {
+                                            : CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, managedAgentsInfoText: credits.managedAgentsInfoText, speechToVideoInfoText: credits.speechToVideoInfoText, 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.Tertiary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
                         boxShadow: '2px 4px 8px 0px #1D142814',

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

@@ -121,7 +121,6 @@ export const InBoxContainer = {
                 }, children: _jsx(Sidebar, { ...args, size: SidebarSize.Expanded, navSections: defaultNavSections.slice(0, 3), bottomNavItems: defaultBottomNavItems, credits: {
                         maxCredits: 50,
                         usedCredits: 130,
-                        creditInfoText: '1 Credit = 1 min video',
                         overUsageEnabled: true,
                         overUsedCredits: 20,
                     } }) }), _jsx(Box, { sx: { height: '100dvh', width: 'calc(100dvw)', overflow: 'hidden' }, children: _jsx(Typography, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." }) })] })),
@@ -134,7 +133,6 @@ export const Expanded = {
         credits: {
             maxCredits: 50,
             usedCredits: 10,
-            creditInfoText: '1 Credit = 1 min video',
         },
     },
 };
@@ -146,7 +144,6 @@ export const Collapsed = {
         credits: {
             maxCredits: 50,
             usedCredits: 102,
-            creditInfoText: '1 Credit = 1 min video',
             overUsageEnabled: true,
             overUsedCredits: 20,
         },

package/dist/stories/StripeProduct/StripeProduct.d.ts

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

package/dist/stories/StripeProduct/StripeProduct.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
+import { getIconComponent } from '../../utils';
+import React from 'react';
+import { Badge, BadgeColor, BadgeSize } from '../UI';
+export const StripeProduct = ({ className, description, features, isMostPopular, isEnterprisePlan, style, title, duration, price, buttonProps, bubbleText, bubbleTooltip, }) => {
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', bgcolor: isMostPopular
+            ? 'var(--primitives-desktop-primary-brand-violet-50)'
+            : 'var(--colors-light-background-bg-white)', border: isMostPopular
+            ? '1.5px solid var(--colors-light-border-border-brand)'
+            : 'none', position: 'relative', boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, className: className, children: [bubbleText && (_jsx(Box, { position: 'absolute', top: '-4%', right: 0, left: 0, children: _jsx(Badge, { text: bubbleText, color: BadgeColor.Yellow, children: bubbleTooltip, size: BadgeSize.xs, fill: true }) })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: title }), isMostPopular && (_jsx(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', bgcolor: 'var(--primitives-desktop-primary-brand-violet-200)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-sm)', children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-accent)', children: "Most popular" }) }))] }), _jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description }), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'end', children: isEnterprisePlan ? (_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: "Custom" })) : (_jsxs(React.Fragment, { children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: price }), _jsxs(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: ["/", duration] })] })) }), buttonProps && (_jsx(MainButton, { disabled: buttonProps?.disabled, onClick: buttonProps?.onClick, text: buttonProps?.text, size: buttonProps?.size || ButtonSize.lg, hierarchy: buttonProps?.hierarchy || ButtonHierarchy.Primary, style: {
+                    margin: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) 0',
+                } })), features && features?.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)', children: "This includes:" }), features.map((feature, index) => {
+                        const isHeading = feature?.startsWith('-');
+                        return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [!isHeading && (_jsx(Box, { width: '18px', height: '18px', bgcolor: 'var(--primitives-desktop-primary-brand-violet-100)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: getIconComponent('Check', {
+                                        size: '12px',
+                                        color: 'var(--primitives-desktop-primary-brand-violet-500)',
+                                    }) })), _jsx(Typography, { size: TypographySize.TextS, weight: isHeading
+                                        ? TypographyWeight.Medium
+                                        : TypographyWeight.Regular, color: isHeading
+                                        ? 'var(--colors-light-text-text-title)'
+                                        : 'var(--colors-light-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: isHeading ? feature?.slice(1)?.trim() : feature })] }, `${index}`));
+                    })] }))] }));
+};

package/dist/stories/StripeProduct/StripeProduct.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StripeProduct } from './StripeProduct';
+declare const meta: Meta<typeof StripeProduct>;
+export default meta;
+type Story = StoryObj<typeof StripeProduct>;
+export declare const DefaultWithSubheadings: Story;
+export declare const Default: Story;
+export declare const MostPopular: Story;
+export declare const EnterprisePlan: Story;
+export declare const WithBubble: Story;

package/dist/stories/StripeProduct/StripeProduct.stories.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StripeProduct } from './StripeProduct';
+import { Tooltip } from '@mui/material';
+import { Info } from '@phosphor-icons/react';
+const meta = {
+    title: 'Design System/Components/StripeProduct/StripeProduct',
+    component: StripeProduct,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/LMfTHn8ncZVSVlEUGYSz4Q/Settings?node-id=3593-20344&m=dev',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export const DefaultWithSubheadings = {
+    args: {
+        title: 'Starter',
+        description: 'Tailored for personal projects and independent creators.',
+        price: '$100',
+        duration: 'month',
+        features: [
+            '-E2E Agent API',
+            'Included Mins: 90',
+            'Bundle $/min: $0.54',
+            'Overage $/min: $0.33',
+            '-A2V Api',
+            'Included mins: 180',
+            'Bundle $/min: $0.27',
+            'Overage $/min: $0.18',
+        ],
+        isMostPopular: false,
+        buttonProps: {
+            text: 'Select',
+            onClick: () => { },
+        },
+    },
+};
+export const Default = {
+    args: {
+        title: 'Starter',
+        description: 'Tailored for personal projects and independent creators.',
+        price: '$100',
+        duration: 'month',
+        features: [
+            '1 credit (1 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+        ],
+        isMostPopular: false,
+        buttonProps: {
+            text: 'Select',
+            onClick: () => { },
+        },
+    },
+};
+export const MostPopular = {
+    args: {
+        title: 'Growth',
+        description: 'Designed for professionals looking to expand their reach.',
+        price: '$149',
+        duration: 'month',
+        features: [
+            '300 credits (300 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+            '3 active Conversational Agents',
+            'Priority support',
+        ],
+        isMostPopular: true,
+        buttonProps: {
+            text: 'Select',
+            onClick: () => { },
+        },
+    },
+};
+export const EnterprisePlan = {
+    args: {
+        title: 'Enterprise',
+        description: 'Customized for large organizations and enterprise clients.',
+        price: 'Custom',
+        duration: 'month',
+        features: [
+            '5000+ credits (5000+ min of Conversational Agent video)',
+            'Integration support',
+            'Full customization',
+        ],
+        isMostPopular: false,
+        isEnterprisePlan: true,
+        buttonProps: {
+            text: 'Contact us',
+            onClick: () => { },
+        },
+    },
+};
+export const WithBubble = {
+    args: {
+        title: 'Starter',
+        description: 'Tailored for personal projects and independent creators.',
+        price: '$100',
+        duration: 'month',
+        features: [
+            '1 credit (1 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+        ],
+        bubbleText: "You're currently on the monthly plan",
+        bubbleTooltip: (_jsx(Tooltip, { title: "You're currently on the monthly plan", placement: "top", children: _jsx(Info, {}) })),
+    },
+};

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

@@ -0,0 +1,2 @@
+export * from './StripeProduct';
+export * from './types';

package/dist/stories/StripeProduct/index.js

@@ -0,0 +1,2 @@
+export * from './StripeProduct';
+export * from './types';

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

@@ -0,0 +1,31 @@
+import { MainButtonProps } from '../Buttons';
+import React from 'react';
+/**
+ * Stripe product component props
+ */
+export interface StripeProductProps {
+    /** Title of the product */
+    title: string;
+    /** Description of the product */
+    description: string;
+    /** Price of the product */
+    price: string;
+    /** Duration of the product */
+    duration: string;
+    /** Features of the product */
+    features?: string[];
+    /** Whether the product is the most popular */
+    isMostPopular?: boolean;
+    /** Whether the product is the enterprise plan */
+    isEnterprisePlan?: boolean;
+    /** Props for the button */
+    buttonProps?: MainButtonProps;
+    /** Text of the bubble */
+    bubbleText?: string;
+    /** Tooltip of the bubble */
+    bubbleTooltip?: JSX.Element;
+    /** Style of the product */
+    style?: React.CSSProperties;
+    /** Class name of the product */
+    className?: string;
+}

package/dist/stories/StripeProduct/types.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/stories/UI/Badge.js

@@ -3,7 +3,7 @@ import { BadgeColor, BadgeSize } from './types';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
-export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, iconWeight = 'regular', iconSize, iconColor, }) => {
+export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, children, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, iconWeight = 'regular', iconSize, iconColor, }) => {
     const getBackgroundColor = (color) => {
         switch (color) {
             case BadgeColor.Default:
@@ -114,5 +114,5 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, s
         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, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor(), children: text }))] }));
+    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, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor(), children: text })), children] }));
 };

package/dist/utils/common.js

@@ -10,12 +10,11 @@ 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'];
+        return `${sign}${Math.floor(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}`;
+    const scaled = Math.floor(num / scale);
+    return `${sign}${scaled}${suffix}`;
 };

package/package.json

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