@beydesign/storybook 0.0.1 → 0.0.2

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { BadgeColor } from '../UI';
+import { ButtonHierarchy } from '../Buttons';
+/**
+ * Plan card component props — a compact, in-app subscription plan card.
+ */
+export interface PlanCardProps {
+    /** Plan name (e.g. "Pro") */
+    title: string;
+    /** Short plan description */
+    description?: string;
+    /** Price text (e.g. "€210" or "Custom") */
+    price?: string;
+    /** Price suffix shown next to the price (e.g. "/month") */
+    priceSuffix?: string;
+    /** Badge text (e.g. "Most Popular", "Current Plan") */
+    badgeText?: string;
+    /** Badge color (defaults to Lemon) */
+    badgeColor?: BadgeColor;
+    /** Highlights the card with a brand background + border */
+    highlighted?: boolean;
+    /** Heading above the feature list */
+    featuresTitle?: string;
+    /** Feature list */
+    features?: string[];
+    /** Action button label (defaults to "Upgrade"); hidden when omitted */
+    buttonText?: string;
+    /** Action button click handler */
+    onButtonClick?: () => void;
+    /** Disable the action button (e.g. for the current plan) */
+    buttonDisabled?: boolean;
+    /** Action button hierarchy (defaults to Primary) */
+    buttonHierarchy?: ButtonHierarchy;
+    /** Show a loading spinner on the action button */
+    buttonLoading?: boolean;
+    /** Width of the card */
+    width?: string | number;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test id */
+    testId?: string;
+}
+/**
+ * Plan card skeleton props
+ */
+export interface PlanCardSkeletonProps {
+    /** Whether to show the badge placeholder */
+    showBadge?: boolean;
+    /** Whether to show the button placeholder */
+    showButton?: boolean;
+    /** Whether to show the features placeholder */
+    showFeatures?: boolean;
+    /** Number of feature placeholders */
+    featuresCount?: number;
+    /** Width of the card */
+    width?: string | number;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test id */
+    testId?: string;
+}

package/dist/stories/PlanCard/types.js

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

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,24 @@
+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, bubbleTopOffset, testId, }) => {
+    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(--color-background-bg-card-highlight)'
+            : 'var(--color-background-bg-component)', border: isMostPopular ? '1.5px solid var(--color-border-border-brand)' : 'none', position: 'relative', boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, className: className, "data-testid": testId, children: [bubbleText && (_jsx(Box, { position: 'absolute', top: bubbleTopOffset || '-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(--color-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(--color-background-bg-badge-accent-brand-violet)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-sm)', children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-accent)', children: "Most popular" }) }))] }), _jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left', minHeight: '100px' }, 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(--color-text-text-title)', children: "Custom" })) : (_jsxs(React.Fragment, { children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: price }), _jsxs(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: ["/", duration] })] })) }), buttonProps && (_jsx(MainButton, { disabled: buttonProps?.disabled, loading: buttonProps?.loading, 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(--color-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(--color-text-text-title)'
+                                        : 'var(--color-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: 'For businesses with high volume and custom needs.',
+        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/StripeProductCardSkeleton.d.ts

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

package/dist/stories/StripeProduct/StripeProductCardSkeleton.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 StripeProductCardSkeleton = ({ width = 'auto', showMostPopular = false, showBubble = false, showButton = true, showFeatures = true, featuresCount = 5, style, testId, }) => {
+    return (_jsxs(Box, { width: width, 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: "var(--color-background-bg-component)", position: "relative", boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, "data-testid": testId, children: [showBubble && (_jsx(Box, { position: "absolute", top: "-4%", left: "50%", sx: { transform: 'translateX(-50%)' }, width: "50%", children: _jsx(SkeletonLoader, { height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) })), _jsxs(Box, { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(SkeletonLoader, { width: "40%", height: "28px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showMostPopular && (_jsx(SkeletonLoader, { width: "100px", height: "28px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)" }))] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", minHeight: "100px", children: [_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "95%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }), _jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "end", gap: "4px", children: [_jsx(SkeletonLoader, { width: "80px", height: "36px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "60px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }), showButton && (_jsx(Box, { margin: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) 0', children: _jsx(SkeletonLoader, { width: "100%", height: "44px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-md)" }) })), showFeatures && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", alignItems: "flex-start", children: [_jsx(SkeletonLoader, { width: "120px", 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: "flex-start", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: "100%", children: [_jsx(SkeletonLoader, { width: "18px", height: "18px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-full)" }), _jsx(SkeletonLoader, { width: index % 3 === 0 ? '85%' : index % 3 === 1 ? '75%' : '90%', height: "18px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }, index)))] }))] }));
+};

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StripeProductCardSkeleton } from './StripeProductCardSkeleton';
+declare const meta: Meta<typeof StripeProductCardSkeleton>;
+export default meta;
+type Story = StoryObj<typeof StripeProductCardSkeleton>;
+export declare const Default: Story;
+export declare const WithMostPopular: Story;
+export declare const WithBubble: Story;
+export declare const WithoutButton: Story;
+export declare const WithoutFeatures: Story;
+export declare const CustomFeaturesCount: Story;
+export declare const Complete: Story;
+export declare const CustomWidth: Story;
+export declare const PricingGrid: Story;
+export declare const LoadingState: Story;
+export declare const MinimalVariant: Story;

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

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { StripeProductCardSkeleton } from './StripeProductCardSkeleton';
+const meta = {
+    title: 'Design System/Components/StripeProduct/StripeProductCardSkeleton',
+    component: StripeProductCardSkeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        width: {
+            control: 'text',
+            description: 'Width of the skeleton card',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: 'auto' },
+            },
+        },
+        showMostPopular: {
+            control: 'boolean',
+            description: 'Show the most popular badge placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showBubble: {
+            control: 'boolean',
+            description: 'Show the bubble placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showButton: {
+            control: 'boolean',
+            description: 'Show the button placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        showFeatures: {
+            control: 'boolean',
+            description: 'Show the features section placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        featuresCount: {
+            control: 'number',
+            description: 'Number of feature items to show',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '5' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Custom style for the skeleton',
+            table: {
+                type: { summary: 'React.CSSProperties' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        width: '360px',
+    },
+};
+export const WithMostPopular = {
+    args: {
+        width: '360px',
+        showMostPopular: true,
+    },
+};
+export const WithBubble = {
+    args: {
+        width: '360px',
+        showBubble: true,
+    },
+};
+export const WithoutButton = {
+    args: {
+        width: '360px',
+        showButton: false,
+    },
+};
+export const WithoutFeatures = {
+    args: {
+        width: '360px',
+        showFeatures: false,
+    },
+};
+export const CustomFeaturesCount = {
+    args: {
+        width: '360px',
+        featuresCount: 8,
+    },
+};
+export const Complete = {
+    args: {
+        width: '360px',
+        showMostPopular: true,
+        showBubble: true,
+        showButton: true,
+        showFeatures: true,
+        featuresCount: 6,
+    },
+};
+export const CustomWidth = {
+    args: {
+        width: '500px',
+        showMostPopular: true,
+        showBubble: true,
+    },
+};
+export const PricingGrid = {
+    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 3, children: [_jsx(StripeProductCardSkeleton, { width: "360px", showFeatures: true }), _jsx(StripeProductCardSkeleton, { width: "360px", showMostPopular: true, showBubble: true, featuresCount: 7 }), _jsx(StripeProductCardSkeleton, { width: "360px", showFeatures: true })] })),
+};
+export const LoadingState = {
+    render: () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsxs(Box, { children: [_jsx("h3", { children: "Loading state example" }), _jsx("p", { children: "This demonstrates how the skeleton appears while loading pricing plans" })] }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 3, justifyContent: "center", children: Array(3)
+                    .fill(0)
+                    .map((_, index) => (_jsx(StripeProductCardSkeleton, { width: "360px", showMostPopular: index === 1, showBubble: index === 1, featuresCount: index === 1 ? 7 : 5 }, index))) })] })),
+};
+export const MinimalVariant = {
+    args: {
+        width: '360px',
+        showButton: false,
+        showFeatures: false,
+    },
+};

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

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

package/dist/stories/StripeProduct/index.js

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

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

@@ -0,0 +1,56 @@
+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;
+    /** Top offset of the bubble */
+    bubbleTopOffset?: React.CSSProperties['top'];
+    /** Style of the product */
+    style?: React.CSSProperties;
+    /** Class name of the product */
+    className?: string;
+    /** Test ID of the product */
+    testId?: string;
+}
+/**
+ * Stripe product card skeleton component props
+ */
+export interface StripeProductCardSkeletonProps {
+    /** Width of the skeleton card */
+    width?: string | number;
+    /** Show the most popular badge placeholder */
+    showMostPopular?: boolean;
+    /** Show the bubble placeholder */
+    showBubble?: boolean;
+    /** Show the button placeholder */
+    showButton?: boolean;
+    /** Show the features section placeholder */
+    showFeatures?: boolean;
+    /** Number of feature items to show */
+    featuresCount?: number;
+    /** Custom style for the skeleton */
+    style?: React.CSSProperties;
+    /** Test ID of the skeleton card */
+    testId?: string;
+}

package/dist/stories/StripeProduct/types.js

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

package/dist/stories/Typography/Typography.d.ts

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

package/dist/stories/Typography/Typography.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TypographySize, TypographyWeight } from './types';
+import { getTextStyles, getTypographySizeToken, getTypographyWeightToken, } from '../../utils';
+export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, textStyle, children, title, }) => {
+    const sizeToken = getTypographySizeToken(size);
+    const weightToken = getTypographyWeightToken(weight);
+    const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
+    const requiredColor = 'var(--color-text-text-error)';
+    return (_jsxs("span", { className: className, style: {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily + ', sans-serif',
+            lineHeight: lineHeight + 'px',
+            letterSpacing: letterSpacing,
+            textIndent: paragraphIndent,
+            marginBottom: paragraphSpacing,
+            textTransform: textTransform,
+            textDecoration: textDecoration,
+            color: color || 'var(--global-text-text-title)',
+            ...textStyle,
+        }, title: title, children: [children || text, required && _jsx("span", { style: { color: requiredColor }, children: ' *' })] }));
+};

package/dist/stories/Typography/Typography.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from './Typography';
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+export declare const HeadingXLBold: Story;
+export declare const HeadingXLSemiBold: Story;
+export declare const HeadingXLMedium: Story;
+export declare const HeadingXLRegular: Story;
+export declare const HeadingLBold: Story;
+export declare const HeadingLSemiBold: Story;
+export declare const HeadingLMedium: Story;
+export declare const HeadingLRegular: Story;
+export declare const HeadingMBold: Story;
+export declare const Heading2XSRegular: Story;
+export declare const TextLBold: Story;
+export declare const TextLSemiBold: Story;
+export declare const TextLMedium: Story;
+export declare const TextLRegular: Story;
+export declare const TextMBold: Story;
+export declare const TextMSemiBold: Story;
+export declare const TextMMedium: Story;
+export declare const TextMRegular: Story;
+export declare const TextSBold: Story;
+export declare const TextSSemiBold: Story;