@beydesign/storybook 0.0.46 → 0.0.48

package/dist/stories/Agent/AgentCard.js

@@ -6,8 +6,8 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Toggle, TogglePosition } from '../Form';
 import { Badge, ProgressIndicator, ProgressIndicatorMode, BadgeColor, BadgeSize, Menu, } from '../UI';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
-import { ArrowsCounterClockwise, Warning } from '@phosphor-icons/react';
-export const AgentCard = ({ title, description = '', date = '', showDate = false, badges = [], showBadges = false, showTimeBadge = false, showDescription = false, showMenu = false, menuItems = [], active = false, showActiveToggle = false, onActiveToggleChange, activeToggleDisabled = false, agentImage, time, onPreview, agentState, previewButtonText = 'Preview', showStatusBadge = false, statusBadgeText = '', }) => {
+import { ArrowsClockwise, Warning } from '@phosphor-icons/react';
+export const AgentCard = ({ title, description = '', date = '', showDate = false, badges = [], showBadges = false, showTimeBadge = false, showDescription = false, showMenu = false, menuItems = [], active = false, showActiveToggle = false, onActiveToggleChange, activeToggleDisabled = false, agentImage, time, onPreview, agentState, previewButtonText = 'Preview', showStatusBadge = false, statusBadgeText = '', showProgressIndicator = false, progressValue = 50, processingText = 'Creation in progress', }) => {
     const [hovered, setHovered] = useState(false);
     const [imageError, setImageError] = useState(false);
     const [isLoading, setIsLoading] = useState(!!agentImage);
@@ -43,7 +43,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
     // Render loading state or placeholder
     const renderImageContent = () => {
         if (isLoading) {
-            return (_jsxs(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsCounterClockwise, { size: 24, weight: "bold", color: 'var(--colors-light-text-text-subtle)', style: { animation: 'spin 1.5s linear infinite' } }), _jsx(Typography, { text: "Loading preview...", size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })] }), _jsx("style", { children: `
+            return (_jsxs(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--colors-light-text-text-subtle)', style: { animation: 'spin 1.5s linear infinite' } }), _jsx(Typography, { text: "Loading preview...", size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })] }), _jsx("style", { children: `
             @keyframes spin {
               0% {
                 transform: rotate(0deg);
@@ -78,5 +78,5 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
                             position: 'absolute',
                             right: '8px',
                             top: '8px',
-                        } })), isReady && hovered && onPreview && active && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsCounterClockwise, { size: 24, weight: "bold", color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Agent creation in progress", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: 50, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' })] })), isError && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-error-solid)', style: { zIndex: 1, opacity: 0.7 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Warning, { size: 74, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Something went wrong", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' })] }))] }), _jsx(Typography, { text: title, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { flex: 1 } })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { text: description, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }))] }));
+                        } })), isReady && hovered && onPreview && active && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--primitives-desktop-primary-white-100)', style: { animation: 'spin 1.5s linear infinite' } }), _jsx(Typography, { text: processingText, size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), showProgressIndicator && (_jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: progressValue, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' }))] })), isError && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-error-solid)', style: { zIndex: 1, opacity: 0.7 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Warning, { size: 74, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Something went wrong", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' })] }))] }), _jsx(Typography, { text: title, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { flex: 1 } })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { text: description, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }))] }));
 };

package/dist/stories/Agent/AgentCard.stories.d.ts

@@ -9,3 +9,5 @@ export declare const LoadingPreview: Story;
 export declare const NoImage: Story;
 export declare const WithStatusBadge: Story;
 export declare const NoStatusBadge: Story;
+export declare const Processing: Story;
+export declare const ProcessingWithoutProgress: Story;

package/dist/stories/Agent/AgentCard.stories.js

@@ -138,6 +138,30 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
+        showProgressIndicator: {
+            control: 'boolean',
+            description: 'Whether to show the progress indicator in processing state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        progressValue: {
+            control: 'number',
+            description: 'Current progress value (0-100)',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '50' },
+            },
+        },
+        processingText: {
+            control: 'text',
+            description: 'Text to display in processing state',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Agent creation in progress' },
+            },
+        },
     },
 };
 export default meta;
@@ -235,3 +259,36 @@ export const NoStatusBadge = {
         },
     },
 };
+export const Processing = {
+    args: {
+        ...Placeholder.args,
+        title: 'Processing Example',
+        agentState: AgentState.processing,
+        showProgressIndicator: true,
+        progressValue: 75,
+        processingText: 'Training in progress',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the agent card in processing state with a custom progress value and text.',
+            },
+        },
+    },
+};
+export const ProcessingWithoutProgress = {
+    args: {
+        ...Placeholder.args,
+        title: 'Processing Without Progress',
+        agentState: AgentState.processing,
+        showProgressIndicator: false,
+        processingText: 'Please wait...',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example shows the processing state without the progress indicator.',
+            },
+        },
+    },
+};

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

@@ -51,6 +51,12 @@ export type AgentCardProps = {
     showStatusBadge?: boolean;
     /** Status badge text */
     statusBadgeText?: string;
+    /** Show progress indicator in processing state */
+    showProgressIndicator?: boolean;
+    /** Current progress value (0-100) */
+    progressValue?: number;
+    /** Processing state text */
+    processingText?: string;
 };
 export interface AgentCardSkeletonProps {
     /**

package/dist/stories/Form/TextArea.js

@@ -3,9 +3,9 @@ import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
-export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, }) => {
+export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, }) => {
     const [focused, setFocused] = useState(false);
-    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, trailingElement: labelTrailingElement })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText
                         ? 'var(--colors-light-border-border-error)'
                         : focused
                             ? 'var(--colors-light-border-border-component-active)'

package/dist/stories/Form/TextArea.stories.d.ts

@@ -132,6 +132,15 @@ declare const meta: {
                 };
             };
         };
+        labelTrailingElement: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;

package/dist/stories/Form/TextArea.stories.js

@@ -104,6 +104,13 @@ const meta = {
                 type: { summary: 'object' },
             },
         },
+        labelTrailingElement: {
+            control: 'object',
+            description: 'The trailing element of the label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
     },
 };
 export default meta;

package/dist/stories/Form/TextInput.js

@@ -3,9 +3,9 @@ import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
-export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, }) => {
+export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, }) => {
     const [focused, setFocused] = useState(false);
-    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, trailingElement: labelTrailingElement })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
                         ? 'none'
                         : '1px solid var(--colors-light-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Box, { display: 'flex', flexDirection: 'row', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
                                 ? '1px solid var(--colors-light-border-border-error)'

package/dist/stories/Form/TextInput.stories.d.ts

@@ -114,6 +114,15 @@ declare const meta: {
                 };
             };
         };
+        labelTrailingElement: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;

package/dist/stories/Form/TextInput.stories.js

@@ -90,6 +90,13 @@ const meta = {
                 type: { summary: 'object' },
             },
         },
+        labelTrailingElement: {
+            control: 'object',
+            description: 'The trailing element of the label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
     },
 };
 export default meta;

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

@@ -32,6 +32,8 @@ export type TextAreaProps = {
     style?: SxProps<Theme>;
     /** Whether the text area is required */
     required?: boolean;
+    /** Text area label trailing element */
+    labelTrailingElement?: React.ReactNode;
 };
 /**
  * Text input component props
@@ -61,6 +63,8 @@ export type TextInputProps = {
     style?: SxProps<Theme>;
     /** Whether the text input is required */
     required?: boolean;
+    /** Text input label trailing element */
+    labelTrailingElement?: React.ReactNode;
 };
 /**
  * Toggle position variants

package/dist/stories/Typography/Typography.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TypographySize, TypographyWeight } from './types';
-export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, style, }) => {
+import { Box } from '@mui/material';
+export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, style, trailingElement = null, }) => {
     const getTypographySizeToken = () => {
         let sizeLc = size?.toLowerCase() || '';
         if (sizeLc.includes('heading')) {
@@ -29,26 +30,33 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
     const paragraphIndent = `var(--global-${sizeToken}-${weightToken}-paragraph-indent)`;
     const paragraphSpacing = `var(--global-${sizeToken}-${weightToken}-paragraph-spacing)`;
     const textDecoration = `var(--global-${sizeToken}-${weightToken}-text-decoration)`;
+    const requiredColor = 'var(--colors-light-text-text-error)';
     const getTextTransform = () => {
         const computedValue = getComputedStyle(document.documentElement)
             .getPropertyValue(`--global-${sizeToken}-${weightToken}-text-case`)
             .trim();
         return (computedValue === 'uppercase' ? 'uppercase' : 'none');
     };
-    return (_jsxs("span", { className: className, style: {
-            display: 'flex',
-            alignItems: 'center',
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily + ', sans-serif',
-            lineHeight: lineHeight + 'px',
-            letterSpacing: letterSpacing,
-            textIndent: paragraphIndent,
-            marginBottom: paragraphSpacing,
-            textTransform: getTextTransform(),
-            textDecoration: textDecoration,
-            color: color || 'var(--global-text-text-title)',
-            gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
-            ...style,
-        }, children: [text, required && (_jsx("span", { style: { color: 'var(--colors-light-text-text-error)' }, children: "*" }))] }));
+    const Label = () => {
+        return (_jsxs("span", { className: className, style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+                fontSize: fontSize,
+                fontWeight: fontWeight,
+                fontFamily: fontFamily + ', sans-serif',
+                lineHeight: lineHeight + 'px',
+                letterSpacing: letterSpacing,
+                textIndent: paragraphIndent,
+                marginBottom: paragraphSpacing,
+                textTransform: getTextTransform(),
+                textDecoration: textDecoration,
+                color: color || 'var(--global-text-text-title)',
+                ...style,
+            }, children: [text, required && _jsx("span", { style: { color: requiredColor }, children: "*" })] }));
+    };
+    if (!trailingElement) {
+        return _jsx(Label, {});
+    }
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "flex-start", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)", children: [_jsx(Label, {}), trailingElement] }));
 };

package/dist/stories/Typography/Typography.stories.js

@@ -1,5 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from './Typography';
 import { TypographySize, TypographyWeight } from './types';
+import { Info } from '@phosphor-icons/react';
 const meta = {
     title: 'Design System/Components/Typography/Typography',
     component: Typography,
@@ -65,6 +67,12 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
+        trailingElement: {
+            description: 'Trailing element of the typography',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
     },
 };
 export default meta;
@@ -73,6 +81,8 @@ export const HeadingXLBold = {
         text: 'Typography',
         size: TypographySize.HeadingXL,
         weight: TypographyWeight.Bold,
+        trailingElement: _jsx(Info, { size: 24 }),
+        required: true,
     },
 };
 export const HeadingXLSemiBold = {

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

@@ -41,4 +41,6 @@ export interface TypographyProps {
     style?: React.CSSProperties;
     /** Whether the typography is required */
     required?: boolean;
+    /** Whether the typography has a trailing element */
+    trailingElement?: React.ReactNode;
 }

package/package.json

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