@beydesign/storybook 0.0.79 → 0.0.81

package/dist/stories/Agent/AgentCard.js

@@ -7,7 +7,8 @@ import { Toggle, TogglePosition } from '../Form';
 import { Badge, ProgressIndicator, ProgressIndicatorMode, BadgeColor, BadgeSize, Menu, } from '../UI';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
 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', }) => {
+import { getIconComponent } from '../../utils';
+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', agentId = '', }) => {
     const [hovered, setHovered] = useState(false);
     const [imageError, setImageError] = useState(false);
     const [isLoading, setIsLoading] = useState(!!agentImage);
@@ -40,13 +41,16 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
             img.onerror = null;
         };
     }, [agentImage]);
+    const copyToClipboard = (text) => {
+        navigator.clipboard.writeText(text);
+    };
     // Render loading state or placeholder
     const renderImageContent = () => {
         if (isLoading) {
-            return (_jsx(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)', className: "spin-animation" }), _jsx(Typography, { text: "Loading preview...", size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })] }) }));
+            return (_jsx(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)', className: "spin-animation" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: "Loading preview..." })] }) }));
         }
         if (imageError || !agentImage) {
-            return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', border: '2px solid var(--colors-light-border-border-component)', boxSizing: 'border-box', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(Typography, { text: "No Preview Available", size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }) }));
+            return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', border: '2px solid var(--colors-light-border-border-component)', boxSizing: 'border-box', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, children: "No Preview Available" }) }));
         }
         return (_jsx("img", { src: agentImage, alt: "Agent", width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' } }));
     };
@@ -77,5 +81,22 @@ 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(ArrowsClockwise, { size: 24, color: 'var(--primitives-desktop-primary-white-100)', className: "spin-animation" }), _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)' }))] }));
+                        } })), 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)', className: "spin-animation" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)', children: processingText }), 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, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)', children: "Something went wrong" })] }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, textStyle: {
+                            maxWidth: '140px',
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis',
+                        }, children: title }), agentId && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: [_jsxs(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)', textStyle: {
+                                    maxWidth: '100px',
+                                    overflow: 'hidden',
+                                    whiteSpace: 'nowrap',
+                                    textOverflow: 'ellipsis',
+                                }, title: agentId, children: ["ID ", agentId] }), getIconComponent('Copy', {
+                                width: '20px',
+                                height: '20px',
+                                weight: 'bold',
+                                color: 'var(--colors-light-text-text-accent)',
+                                style: { cursor: 'pointer' },
+                                onClick: () => copyToClipboard(agentId),
+                            })] }))] }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: date })), 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, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: description }))] }));
 };

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

@@ -12,6 +12,13 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {
+        agentId: {
+            control: 'text',
+            description: 'The id of the agent',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
         agentImage: {
             control: 'text',
             description: 'Image of the agent',
@@ -167,7 +174,7 @@ const meta = {
 export default meta;
 export const Placeholder = {
     args: {
-        title: 'Agent Card',
+        title: 'Agent Card Title',
         active: true,
         showActiveToggle: true,
         showDate: true,
@@ -189,6 +196,7 @@ export const Placeholder = {
         agentState: AgentState.ready,
         showStatusBadge: true,
         statusBadgeText: 'Active',
+        agentId: '112657154',
     },
 };
 export const CustomPreviewText = {

package/dist/stories/Agent/CreateNewCard.js

@@ -18,7 +18,7 @@ export const CreateNewCard = ({ text, onClick, }) => {
             position: 'relative',
             overflow: 'hidden',
             boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`,
-        }, onClick: onClick, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '24px', sx: { gap: '16px' }, children: [_jsx(Typography, { text: text, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--colors-light-background-bg-brand)' }), _jsx(Box, { display: 'flex', width: '48px', height: '48px', borderRadius: '50%', sx: {
+        }, onClick: onClick, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '24px', sx: { gap: '16px' }, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--colors-light-background-bg-brand)', children: text }), _jsx(Box, { display: 'flex', width: '48px', height: '48px', borderRadius: '50%', sx: {
                         alignItems: 'center',
                         justifyContent: 'center',
                     }, children: _jsx(Plus, { size: 36, weight: "fill", color: 'var(--colors-light-background-bg-brand)' }) })] }) }));

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

@@ -9,6 +9,8 @@ export declare enum AgentState {
  * Agent card component props
  */
 export type AgentCardProps = {
+    /** Agent id */
+    agentId: string;
     /** Agent image */
     agentImage?: string;
     /** Show date */

package/dist/stories/Buttons/MainButton.js

@@ -278,7 +278,7 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             }, children: [showLeadingIcon &&
                     leadingIcon &&
-                    getIconComponent(leadingIcon, iconProps), text && (_jsx(Typography, { text: text, size: getTextSize(), weight: TypographyWeight.SemiBold })), showTrailingIcon &&
+                    getIconComponent(leadingIcon, iconProps), text && (_jsx(Typography, { size: getTextSize(), weight: TypographyWeight.SemiBold, children: text })), showTrailingIcon &&
                     trailingIcon &&
                     getIconComponent(trailingIcon, iconProps)] }));
     };

package/dist/stories/Credits/CreditsCard.js

@@ -39,9 +39,9 @@ export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCre
     const isCollapsed = size === CreditsCardSize.Collapsed;
     return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, children: [!isCollapsed &&
                 maxCredits !== undefined &&
-                usedCredits !== undefined && (_jsxs(_Fragment, { children: [_jsxs(CreditRow, { children: [_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { text: "My Credits: ", size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { text: `${usedCredits}/`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { text: `${maxCredits}`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)" }) })] }), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
+                usedCredits !== undefined && (_jsxs(_Fragment, { children: [_jsxs(CreditRow, { children: [_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: `${usedCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] }), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
                                         if (onUpgradeClick) {
                                             onUpgradeClick();
                                         }
-                                    } }) })] }), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { text: creditInfoText, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsx(_Fragment, { children: _jsx(CreditRow, { "$collapsed": true, children: _jsx(Box, { display: "flex", flexDirection: "row", gap: "2px", children: _jsx(TextWrapper, { children: _jsx(Typography, { text: `${usedCredits}`, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }) }) }) }))] }));
+                                    } }) })] }), _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 && usedCredits !== undefined && (_jsx(_Fragment, { children: _jsx(CreditRow, { "$collapsed": true, children: _jsx(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: `${usedCredits}` }) }) }) }) }))] }));
 };

package/dist/stories/Form/AutoComplete.js

@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
-import { getTypographySizeToken, getTypographyWeightToken, getTextStyles, getTextTransform, } from '../../utils';
+import { getTypographySizeToken, getTypographyWeightToken, getTextStyles, } from '../../utils';
 export const AutoComplete = ({ options, value, onChange, leadingIcon = 'MagnifyingGlass', placeholder = 'Search', disabled = false, onBlur, onFocus, }) => {
     const [searchText, setSearchText] = useState('');
     const [focused, setFocused] = useState(false);
@@ -118,8 +118,7 @@ export const AutoComplete = ({ options, value, onChange, leadingIcon = 'Magnifyi
     }, [options, searchText]);
     const sizeToken = getTypographySizeToken(TypographySize.TextS);
     const weightToken = getTypographyWeightToken(TypographyWeight.Regular);
-    const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, } = getTextStyles(sizeToken, weightToken);
-    const textTransform = getTextTransform(sizeToken, weightToken);
+    const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
     return (_jsxs(Box, { display: 'flex', flexDirection: 'column', position: 'relative', width: "100%", children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', alignItems: 'center', justifyContent: 'center', border: `1px solid ${focused ? 'var(--colors-light-border-border-component-active)' : 'var(--colors-light-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
                     ? 'var(--primitives-desktop-primary-gray-25)'
                     : 'var(--primitives-desktop-primary-white-100)', children: [getIconComponent(leadingIcon, {
@@ -152,7 +151,7 @@ export const AutoComplete = ({ options, value, onChange, leadingIcon = 'Magnifyi
                             onClick: handleClear,
                             style: { cursor: disabled ? 'default' : 'pointer' },
                             'aria-label': 'Clear input',
-                        })] }), focused && (_jsx(Box, { id: "autocomplete-options", ref: optionsContainerRef, position: 'absolute', top: '100%', left: 0, zIndex: 1000, bgcolor: 'var(--primitives-desktop-primary-white-100)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", children: filteredOptions.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { text: "No results found", size: TypographySize.TextS, weight: TypographyWeight.Regular }) })) : (filteredOptions.map((option, index) => (_jsx(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', onClick: () => handleOptionSelect(option), sx: {
+                        })] }), focused && (_jsx(Box, { id: "autocomplete-options", ref: optionsContainerRef, position: 'absolute', top: '100%', left: 0, zIndex: 1000, bgcolor: 'var(--primitives-desktop-primary-white-100)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", children: filteredOptions.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No results found" }) })) : (filteredOptions.map((option, index) => (_jsx(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', onClick: () => handleOptionSelect(option), sx: {
                         cursor: 'pointer',
                         backgroundColor: highlightedIndex === index
                             ? 'var(--primitives-desktop-primary-gray-25)'
@@ -160,5 +159,5 @@ export const AutoComplete = ({ options, value, onChange, leadingIcon = 'Magnifyi
                         '&:hover': {
                             backgroundColor: 'var(--primitives-desktop-primary-gray-25)',
                         },
-                    }, role: "option", "aria-selected": highlightedIndex === index, tabIndex: -1, children: _jsx(Typography, { text: option, size: TypographySize.TextS, weight: TypographyWeight.Regular }) }, option)))) }))] }));
+                    }, role: "option", "aria-selected": highlightedIndex === index, tabIndex: -1, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: option }) }, option)))) }))] }));
 };

package/dist/stories/Form/Checkbox.js

@@ -61,5 +61,5 @@ export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disable
                         backgroundColor: 'transparent',
                         transition: 'all 0.2s ease-in-out',
                     },
-                } })) : null, _jsx(Typography, { text: label, size: TypographySize.TextS, weight: TypographyWeight.Medium })] }));
+                } })) : null, _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, children: label })] }));
 };

package/dist/stories/Form/FileUpload/FileUpload.js

@@ -120,9 +120,9 @@ export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,
                         ? 'var(--colors-light-background-bg-brand-hover)'
                         : 'var(--colors-light-background-bg-brand)'}`, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--primitives-desktop-primary-white-100)', children: _jsx(UploadSimple, { height: '20px', width: '20px', weight: "bold", color: disabled
                         ? 'var(--colors-light-foreground-fg-disabled)'
-                        : 'var(--colors-light-foreground-fg-brand-primary)' }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Typography, { text: 'Click to upload', size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: disabled
+                        : 'var(--colors-light-foreground-fg-brand-primary)' }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: disabled
                             ? 'var(--colors-light-text-text-disabled)'
-                            : 'var(--colors-light-text-text-accent)', style: { cursor: disabled ? 'not-allowed' : 'pointer' } }), _jsx(Typography, { text: 'or drag and drop', size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
+                            : 'var(--colors-light-text-text-accent)', textStyle: { cursor: disabled ? 'not-allowed' : 'pointer' }, children: "Click to upload" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
                             ? 'var(--colors-light-text-text-subtle)'
-                            : 'var(--colors-light-text-text-paragraph)' }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [fileIcons.map((Icon, index) => (_jsx(Icon, { ...iconProps }, index))), fileIcons.length === 0 && _jsx(FileCode, { ...iconProps })] })] })] }));
+                            : 'var(--colors-light-text-text-paragraph)', children: "or drag and drop" }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [fileIcons.map((Icon, index) => (_jsx(Icon, { ...iconProps }, index))), fileIcons.length === 0 && _jsx(FileCode, { ...iconProps })] })] })] }));
 };

package/dist/stories/Form/FileUpload/FileUploading.js

@@ -25,9 +25,9 @@ export const FileUploading = ({ uploadProgress, uploadingStatus, sx, onCancel, o
                                 color: isError
                                     ? 'var(--colors-light-text-text-error)'
                                     : 'var(--colors-light-foreground-fg-primary)',
-                            }), _jsx(Typography, { text: fileName, size: TypographySize.TextM, weight: TypographyWeight.Regular, color: isError
+                            }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: isError
                                     ? 'var(--colors-light-text-text-error)'
-                                    : 'var(--primitives-desktop-primary-gray-950)' })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showCancel &&
+                                    : 'var(--primitives-desktop-primary-gray-950)', children: fileName })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showCancel &&
                                 onCancel &&
                                 isUploading &&
                                 getIconComponent('X', {
@@ -41,5 +41,5 @@ export const FileUploading = ({ uploadProgress, uploadingStatus, sx, onCancel, o
                                     width: '24px',
                                     height: '24px',
                                     color: 'var(--colors-light-foreground-fg-success)',
-                                })] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [!isError && uploadProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { text: 'Upload failed, please try again.', size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', style: { lineHeight: '16px' } }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { text: 'Try again', size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--colors-light-text-text-error)', style: { lineHeight: '16px' } }) }))] }))] })] }));
+                                })] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [!isError && uploadProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', children: "Upload failed, please try again." }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--colors-light-text-text-error)', children: "Try again" }) }))] }))] })] }));
 };

package/dist/stories/Form/FileUpload/UploadedFile.js

@@ -8,5 +8,5 @@ export const UploadedFile = ({ type = FileType.Default, showDelete = true, onDel
     const isSampleFile = type === FileType.Sample;
     return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', paddingLeft: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: isSampleFile
             ? 'var(--colors-light-background-bg-card-highlight)'
-            : 'var(--colors-light-background-bg-component-contrast-subtle)', minWidth: '240px', minHeight: '36px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(File, { width: '24px', height: '24px', color: 'var(--colors-light-foreground-fg-primary)' }), _jsx(Typography, { text: fileName, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--colors-light-foreground-fg-primary)' })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showDownload && onDownload && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "DownloadSimple", onClick: onDownload })), showDelete && onDelete && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "X", onClick: onDelete }))] })] }));
+            : 'var(--colors-light-background-bg-component-contrast-subtle)', minWidth: '240px', minHeight: '36px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(File, { width: '24px', height: '24px', color: 'var(--colors-light-foreground-fg-primary)' }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--colors-light-foreground-fg-primary)', children: fileName })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showDownload && onDownload && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "DownloadSimple", onClick: onDownload })), showDelete && onDelete && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "X", onClick: onDelete }))] })] }));
 };

package/dist/stories/Form/TextArea.js

@@ -5,7 +5,7 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
 export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, allowMaxLength = false, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, labelContainerStyle, }) => {
     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, trailingElement: labelTrailingElement, style: labelContainerStyle })), 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 && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), 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)'
@@ -19,5 +19,5 @@ export const TextArea = ({ label, value, onChange, placeholder, hintText, errorT
                                 : 'var(--colors-light-text-text-title)',
                             backgroundColor: 'transparent',
                             resize: 'none',
-                        }, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })) : hintText ? (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && allowMaxLength && maxLength && (_jsx(Typography, { text: `${maxLength - value.length}`, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { alignSelf: 'flex-end' } }))] })] }) }));
+                        }, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', children: errorText })) : hintText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: hintText })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && allowMaxLength && maxLength && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: `${maxLength - value.length}` }))] })] }) }));
 };

package/dist/stories/Form/TextInput.js

@@ -5,7 +5,7 @@ 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, labelTrailingElement, labelContainerStyle, }) => {
     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, trailingElement: labelTrailingElement, style: labelContainerStyle })), 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 && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), 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)'
@@ -19,5 +19,5 @@ export const TextInput = ({ label, value, onChange, placeholder, hintText, error
                                         ? 'var(--colors-light-text-text-disabled)'
                                         : 'var(--colors-light-text-text-title)',
                                     backgroundColor: 'transparent',
-                                }, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--colors-light-border-border-component)', children: _jsx(Typography, { text: trailingText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }) }))] }), errorText && (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })), hintText && !errorText && (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' }))] }) }));
+                                }, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--colors-light-border-border-component)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: hintText }))] }) }));
 };

package/dist/stories/Form/Toggle.js

@@ -53,5 +53,5 @@ const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui
     },
 }));
 export const Toggle = ({ checked, onChange, text = 'Click me', title, disabled = false, togglePosition = TogglePosition.Left, style, }) => {
-    return (_jsxs(Box, { display: "flex", alignItems: "flex-start", flexDirection: togglePosition === TogglePosition.Left ? 'row' : 'row-reverse', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, children: [_jsx(IOSSwitch, { checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled }), text && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { text: text, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)' }), title && (_jsx(Typography, { text: title, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "#475467" }))] }))] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "flex-start", flexDirection: togglePosition === TogglePosition.Left ? 'row' : 'row-reverse', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, children: [_jsx(IOSSwitch, { checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled }), text && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)', children: text }), title && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "#475467", children: title }))] }))] }));
 };

package/dist/stories/Foundations/Colors.js

@@ -34,15 +34,15 @@ const ColorSwatch = ({ name, value }) => {
     return (_jsxs("div", { className: styles.swatch, children: [_jsx("div", { className: styles.color, style: {
                     background: isGradient ? displayValue : value,
                     backgroundSize: 'cover',
-                } }), _jsxs("div", { className: styles.details, children: [_jsxs("div", { className: styles.name, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { text: name, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)" }), _jsx(Copy, { size: 16, onClick: handleCopyName, style: {
+                } }), _jsxs("div", { className: styles.details, children: [_jsxs("div", { className: styles.name, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)", children: name }), _jsx(Copy, { size: 16, onClick: handleCopyName, style: {
                                     cursor: 'pointer',
                                     color: 'var(--colors-light-text-text-subtle)',
-                                } }), copiedName && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] }), _jsxs("div", { className: styles.value, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { text: displayValue, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }), _jsx(Copy, { size: 16, onClick: handleCopyValue, style: {
+                                } }), copiedName && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] }), _jsxs("div", { className: styles.value, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: displayValue }), _jsx(Copy, { size: 16, onClick: handleCopyValue, style: {
                                     cursor: 'pointer',
                                     color: 'var(--colors-light-text-text-subtle)',
                                 } }), copiedValue && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] })] })] }));
 };
-const ColorGroup = ({ title, colors }) => (_jsxs("div", { className: styles.group, children: [_jsx(Typography, { text: title, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)" }), _jsx("div", { className: styles.swatchGrid, children: Object.entries(colors).map(([name, value]) => (_jsx(ColorSwatch, { name: name, value: value }, name))) })] }));
+const ColorGroup = ({ title, colors }) => (_jsxs("div", { className: styles.group, children: [_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)", children: title }), _jsx("div", { className: styles.swatchGrid, children: Object.entries(colors).map(([name, value]) => (_jsx(ColorSwatch, { name: name, value: value }, name))) })] }));
 export const Colors = () => {
     // Group colors by their categories
     const primitives = {
@@ -264,5 +264,5 @@ export const Colors = () => {
             '--global-bp-gradient': 'var(--global-bp-gradient)',
         },
     };
-    return (_jsxs("div", { className: styles.container, children: [_jsx(Typography, { text: "Color System", size: TypographySize.HeadingXL, weight: TypographyWeight.Bold, color: "var(--colors-light-text-text-title)" }), _jsxs("section", { children: [_jsx(Typography, { text: "Gradients", size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)" }), Object.entries(gradients).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { text: "Primitive Colors", size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)" }), Object.entries(primitives).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { text: "Semantic Colors", size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)" }), Object.entries(semanticColors).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] })] }));
+    return (_jsxs("div", { className: styles.container, children: [_jsx(Typography, { size: TypographySize.HeadingXL, weight: TypographyWeight.Bold, color: "var(--colors-light-text-text-title)", children: "Color System" }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)", children: "Gradients" }), Object.entries(gradients).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)", children: "Primitive Colors" }), Object.entries(primitives).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)", children: "Semantic Colors" }), Object.entries(semanticColors).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] })] }));
 };

package/dist/stories/Navigation/ComplexHeader.js

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

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, { text: title, size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold })), _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, { text: email, size: TypographySize.TextS, weight: TypographyWeight.SemiBold }), _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.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 })] })] }));
 };

package/dist/stories/Navigation/NavItem.js

@@ -58,9 +58,9 @@ export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavIt
                     left: '0',
                 }, children: _jsx("path", { d: "M0 0C2.76142 0 5 2.23858 5 5V31C5 33.7614 2.76142 36 0 36V0Z" }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "8px", sx: { transition: 'gap 0.3s ease-in-out' }, children: [_jsx(IconWrapper, { className: "nav-item-icon", "$state": state, children: getIconComponent(icon, {
                             size: 20,
-                        }) }), !isCollapsed && (_jsx(TextWrapper, { className: "nav-item-text", children: _jsx(Typography, { text: text, size: TypographySize.TextS, weight: state === NavItemState.Active
+                        }) }), !isCollapsed && (_jsx(TextWrapper, { className: "nav-item-text", children: _jsx(Typography, { size: TypographySize.TextS, weight: state === NavItemState.Active
                                 ? TypographyWeight.SemiBold
                                 : TypographyWeight.Medium, className: "nav-item-text", color: state === NavItemState.Active
                                 ? 'var(--colors-light-background-bg-brand)'
-                                : 'var(--colors-light-text-text-paragraph)' }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: "Coming Soon", color: BadgeColor.Default }))] })] }));
+                                : 'var(--colors-light-text-text-paragraph)', children: text }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: "Coming Soon", color: BadgeColor.Default }))] })] }));
 };

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, { text: `${title}.`, size: TypographySize.TextM, weight: TypographyWeight.SemiBold })), subtitle && (_jsx(Typography, { text: subtitle, size: TypographySize.TextS, weight: TypographyWeight.Regular }))] })] }), 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.TetriaryColor, trailingIcon: 'X', showTrailingIcon: true }))] }));
 };

package/dist/stories/Navigation/Sidebar.js

@@ -104,9 +104,9 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
         }
     };
     const isCollapsed = sidebarSize === SidebarSize.Collapsed;
-    return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { text: isCollapsed
+    return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", className: isCollapsed ? 'hidden' : '', children: isCollapsed
                                                     ? section.title.split(' ')[0]
-                                                    : section.title, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", className: isCollapsed ? 'hidden' : '' }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
+                                                    : section.title }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
                                     section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_jsx(Box, { sx: {
                                         display: 'flex',
                                         justifyContent: 'center',

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

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

package/dist/stories/Typography/Typography.js

@@ -1,33 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TypographySize, TypographyWeight } from './types';
-import { Box } from '@mui/material';
-import { getTextStyles, getTextTransform, getTypographySizeToken, getTypographyWeightToken, } from '../../utils';
-export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, style, trailingElement = null, textStyle, }) => {
+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, } = getTextStyles(sizeToken, weightToken);
-    const textTransform = getTextTransform(sizeToken, weightToken);
+    const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
     const requiredColor = 'var(--colors-light-text-text-error)';
-    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: textTransform,
-                textDecoration: textDecoration,
-                color: color || 'var(--global-text-text-title)',
-                ...textStyle,
-            }, 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)", sx: style, children: [_jsx(Label, {}), trailingElement] }));
+    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.js

@@ -1,7 +1,5 @@
-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,
@@ -16,7 +14,14 @@ const meta = {
     argTypes: {
         text: {
             control: 'text',
-            description: 'Typography text content',
+            description: 'Text content of the typography',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        children: {
+            control: 'text',
+            description: 'Text content of the typography',
             table: {
                 type: { summary: 'string' },
             },
@@ -53,13 +58,6 @@ const meta = {
                 type: { summary: 'boolean' },
             },
         },
-        style: {
-            control: 'object',
-            description: 'Style of the typography',
-            table: {
-                type: { summary: 'object' },
-            },
-        },
         className: {
             control: 'text',
             description: 'Class name of the typography',
@@ -67,10 +65,11 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
-        trailingElement: {
-            description: 'Trailing element of the typography',
+        textStyle: {
+            control: 'object',
+            description: 'Style object of the typography',
             table: {
-                type: { summary: 'ReactNode' },
+                type: { summary: 'object' },
             },
         },
     },
@@ -78,142 +77,141 @@ const meta = {
 export default meta;
 export const HeadingXLBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.HeadingXL,
         weight: TypographyWeight.Bold,
-        trailingElement: _jsx(Info, { size: 24 }),
         required: true,
     },
 };
 export const HeadingXLSemiBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.HeadingXL,
         weight: TypographyWeight.SemiBold,
     },
 };
 export const HeadingXLMedium = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.HeadingXL,
         weight: TypographyWeight.Medium,
     },
 };
 export const HeadingXLRegular = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.HeadingXL,
         weight: TypographyWeight.Regular,
     },
 };
 export const HeadingLBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.HeadingL,
         weight: TypographyWeight.Bold,
     },
 };
 export const HeadingLSemiBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.HeadingL,
         weight: TypographyWeight.SemiBold,
     },
 };
 export const HeadingLMedium = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.HeadingL,
         weight: TypographyWeight.Medium,
     },
 };
 export const HeadingLRegular = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.HeadingL,
         weight: TypographyWeight.Regular,
     },
 };
 export const HeadingMBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.HeadingM,
         weight: TypographyWeight.Bold,
     },
 };
 export const Heading2XSRegular = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.Heading2XS,
         weight: TypographyWeight.Regular,
     },
 };
 export const TextLBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.TextL,
         weight: TypographyWeight.Bold,
     },
 };
 export const TextLSemiBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.TextL,
         weight: TypographyWeight.SemiBold,
     },
 };
 export const TextLMedium = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.TextL,
         weight: TypographyWeight.Medium,
     },
 };
 export const TextLRegular = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.TextL,
         weight: TypographyWeight.Regular,
     },
 };
 export const TextMBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.TextM,
         weight: TypographyWeight.Bold,
     },
 };
 export const TextMSemiBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.TextM,
         weight: TypographyWeight.SemiBold,
     },
 };
 export const TextMMedium = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.TextM,
         weight: TypographyWeight.Medium,
     },
 };
 export const TextMRegular = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.TextM,
         weight: TypographyWeight.Regular,
     },
 };
 export const TextSBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.TextS,
         weight: TypographyWeight.Bold,
     },
 };
 export const TextSSemiBold = {
     args: {
-        text: 'Typography',
+        children: 'Typography',
         size: TypographySize.TextS,
         weight: TypographyWeight.SemiBold,
     },

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

@@ -1,4 +1,3 @@
-import { Theme, SxProps } from '@mui/material';
 /**
  * Typography size variants
  */
@@ -29,7 +28,7 @@ export declare enum TypographyWeight {
  */
 export interface TypographyProps {
     /** Text content of the typography */
-    text: string;
+    text?: string;
     /** Size variant of the typography */
     size?: TypographySize;
     /** Weight variant of the typography */
@@ -38,12 +37,10 @@ export interface TypographyProps {
     color?: string;
     /** CSS class name for additional styling */
     className?: string;
-    /** Style object for the container */
-    style?: SxProps<Theme>;
     /** Style object for the text */
     textStyle?: React.CSSProperties;
     /** Whether the typography is required */
     required?: boolean;
-    /** Whether the typography has a trailing element */
-    trailingElement?: React.ReactNode;
+    /** Title for the typography */
+    title?: string;
 }

package/dist/stories/UI/Avatar.js

@@ -65,7 +65,7 @@ export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false,
         },
     };
     if (avatarStyle === AvatarStyle.Letters) {
-        return (_jsx(MuiAvatar, { ...props, children: _jsx(Typography, { text: getInitials(text), size: getTextSize(), weight: TypographyWeight.Medium }) }));
+        return (_jsx(MuiAvatar, { ...props, children: _jsx(Typography, { size: getTextSize(), weight: TypographyWeight.Medium, children: getInitials(text) }) }));
     }
     else if (avatarStyle === AvatarStyle.Picture) {
         return _jsx(MuiAvatar, { ...props, src: image });

package/dist/stories/UI/Badge.js

@@ -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, { text: text, size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor() }))] }));
+    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 }))] }));
 };

package/dist/stories/UI/HintBubble.js

@@ -24,5 +24,5 @@ export const HintBubble = ({ text, size = HintBubbleSize.md, type = HintBubbleTy
             return 'var(--colors-light-text-text-error)';
         return 'var(--colors-light-text-text-title)';
     };
-    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--colors-light-background-bg-card-highlight)', padding: getPadding(), gap: '10px', sx: style, children: _jsx(Typography, { text: text, size: getTypographySize(), weight: getTypographyWeight(), color: getTypographyColor() }) }));
+    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--colors-light-background-bg-card-highlight)', padding: getPadding(), gap: '10px', sx: style, children: _jsx(Typography, { size: getTypographySize(), weight: getTypographyWeight(), color: getTypographyColor(), children: text }) }));
 };

package/dist/stories/UI/Menu.js

@@ -43,7 +43,7 @@ export const Menu = ({ icon = 'DotsThree', items, style, }) => {
                                         width: '20px',
                                         height: '20px',
                                         color: getColor(action),
-                                    }), action?.label && (_jsx(Typography, { text: action.label, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: getColor(action) }))] }, index));
+                                    }), action?.label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: getColor(action), children: action.label }))] }, index));
                     }
                 }) })] }));
 };

package/dist/stories/UI/ProgressIndicator.js

@@ -25,7 +25,7 @@ export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentV
         }
     }
     if (errorText) {
-        return (_jsx(Typography, { text: errorText, size: TypographySize.TextXS, weight: TypographyWeight.Regular }));
+        return (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, children: errorText }));
     }
-    return (_jsxs(Box, { display: "flex", flexDirection: mode === ProgressIndicatorMode.Value ? 'column' : 'row', justifyContent: 'space-between', alignItems: mode === ProgressIndicatorMode.Value ? 'flex-end' : 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, minWidth: 200, children: [mode === ProgressIndicatorMode.Value && (_jsx(Typography, { text: `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} / ${maxValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} ${text}`, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor })), _jsx(Box, { display: "flex", flexGrow: 1, flexDirection: "row", alignItems: "center", borderRadius: '4px', sx: { backgroundColor, overflow: 'hidden' }, height: '4px', width: '100%', children: _jsx(Box, { height: '100%', borderRadius: '4px', sx: { backgroundColor: fillColor, width: `${calculateFill()}%` } }) }), mode === ProgressIndicatorMode.Percentage && (_jsx(Typography, { text: `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}%`, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor }))] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: mode === ProgressIndicatorMode.Value ? 'column' : 'row', justifyContent: 'space-between', alignItems: mode === ProgressIndicatorMode.Value ? 'flex-end' : 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, minWidth: 200, children: [mode === ProgressIndicatorMode.Value && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, children: `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} / ${maxValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} ${text}` })), _jsx(Box, { display: "flex", flexGrow: 1, flexDirection: "row", alignItems: "center", borderRadius: '4px', sx: { backgroundColor, overflow: 'hidden' }, height: '4px', width: '100%', children: _jsx(Box, { height: '100%', borderRadius: '4px', sx: { backgroundColor: fillColor, width: `${calculateFill()}%` } }) }), mode === ProgressIndicatorMode.Percentage && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, children: `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}%` }))] }));
 };

package/dist/stories/UI/Topbar.js

@@ -5,5 +5,5 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Badge } from './Badge';
 import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
 export const Topbar = ({ title, badgeText, newButtonText, onNewButtonClick, newButtonHidden, className, style, }) => {
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', className: className, sx: style, minWidth: '400px', children: [_jsx(Typography, { text: title, size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, trailingElement: badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.xs, color: BadgeColor.Violet, style: { marginBottom: '10px' } })), style: { gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)' } }), !newButtonHidden && (_jsx(MainButton, { size: ButtonSize.lg, text: newButtonText, onClick: onNewButtonClick, hierarchy: ButtonHierarchy.Primary, trailingIcon: 'Plus', showTrailingIcon: true }))] }));
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', className: className, sx: style, minWidth: '400px', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: [_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, children: title }), badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.xs, color: BadgeColor.Violet, style: { marginBottom: '10px' } }))] }), !newButtonHidden && (_jsx(MainButton, { size: ButtonSize.lg, text: newButtonText, onClick: onNewButtonClick, hierarchy: ButtonHierarchy.Primary, trailingIcon: 'Plus', showTrailingIcon: true }))] }));
 };

package/dist/utils/typography.d.ts

@@ -10,5 +10,5 @@ export declare const getTextStyles: (sizeToken: string, weightToken: string) =>
     paragraphIndent: string;
     paragraphSpacing: string;
     textDecoration: string;
+    textTransform: "uppercase" | "none";
 };
-export declare const getTextTransform: (sizeToken: string, weightToken: string) => "uppercase" | "none";

package/dist/utils/typography.js

@@ -16,6 +16,12 @@ export const getTypographyWeightToken = (weight) => {
     }
     return weightLc;
 };
+const getTextTransform = (sizeToken, weightToken) => {
+    const computedValue = getComputedStyle(document.documentElement)
+        .getPropertyValue(`--global-${sizeToken}-${weightToken}-text-case`)
+        .trim();
+    return computedValue === 'uppercase' ? 'uppercase' : 'none';
+};
 export const getTextStyles = (sizeToken, weightToken) => {
     const fontSize = `var(--global-${sizeToken}-${weightToken}-font-size)`;
     const fontWeight = `var(--global-${sizeToken}-${weightToken}-font-weight)`;
@@ -25,6 +31,7 @@ export const getTextStyles = (sizeToken, weightToken) => {
     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 textTransform = getTextTransform(sizeToken, weightToken);
     return {
         fontSize,
         fontWeight,
@@ -34,11 +41,6 @@ export const getTextStyles = (sizeToken, weightToken) => {
         paragraphIndent,
         paragraphSpacing,
         textDecoration,
+        textTransform,
     };
 };
-export const getTextTransform = (sizeToken, weightToken) => {
-    const computedValue = getComputedStyle(document.documentElement)
-        .getPropertyValue(`--global-${sizeToken}-${weightToken}-text-case`)
-        .trim();
-    return computedValue === 'uppercase' ? 'uppercase' : 'none';
-};

package/package.json

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