@beydesign/storybook 0.0.38 → 0.0.40

package/dist/stories/Foundations/index.js

@@ -0,0 +1 @@
+export * from './Colors';

package/dist/stories/{Header.d.ts → Navigation/Header.d.ts}

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

package/dist/stories/{Header.js → Navigation/Header.js}

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { MainButton } from './Button';
-import { ButtonHierarchy, ButtonSize } from './types/button';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { Avatar } from './Avatar';
-import { AvatarSize } from './types/avatar';
+import { MainButton } from '../Buttons';
+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 })] })] }));
 };

package/dist/stories/{Header.stories.js → Navigation/Header.stories.js}

@@ -1,8 +1,8 @@
 import { Header } from './Header';
-import { AvatarStyle } from './types/avatar';
+import { AvatarStyle } from '../UI';
 import styles from './Header.module.css';
 const meta = {
-    title: 'Design System/Components/Header',
+    title: 'Design System/Components/Navigation/Header',
     component: Header,
     parameters: {
         layout: 'centered',

package/dist/stories/{NavItem.d.ts → Navigation/NavItem.d.ts}

@@ -1,3 +1,3 @@
 import React from 'react';
-import { NavItemProps } from './types/nav-item';
+import { NavItemProps } from './types';
 export declare const NavItem: React.FC<NavItemProps>;

package/dist/stories/{NavItem.js → Navigation/NavItem.js}

@@ -1,12 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@emotion/styled';
-import { NavItemState, NavItemSize } from './types/nav-item';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { Badge } from './Bagde';
-import { BadgeColor, BadgeSize } from './types/badge';
+import { NavItemState, NavItemSize } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Badge, BadgeColor, BadgeSize } from '../UI';
 import { Box } from '@mui/material';
-import { getIconComponent } from '../utils/icon';
+import { getIconComponent } from '../../utils';
 const StyledNavItem = styled.div `
   display: flex;
   flex-direction: row;

package/dist/stories/{NavItem.stories.js → Navigation/NavItem.stories.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NavItem } from './NavItem';
-import { NavItemState, NavItemSize } from './types/nav-item';
+import { NavItemState, NavItemSize } from './types';
 const meta = {
-    title: 'Design System/Components/NavItem',
+    title: 'Design System/Components/Navigation/NavItem',
     component: NavItem,
     parameters: {
         layout: 'centered',

package/dist/stories/{Sidebar.d.ts → Navigation/Sidebar.d.ts}

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

package/dist/stories/{Sidebar.js → Navigation/Sidebar.js}

@@ -3,17 +3,11 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { Box } from '@mui/material';
 import { NavItem } from './NavItem';
-import { Logo } from './Logo';
-import { CreditsCard } from './CreditsCard';
-import { SidebarSize } from './types/sidebar';
-import { NavItemState, NavItemSize } from './types/nav-item';
-import { LogoVariant } from './types/logo';
-import { CreditsCardSize } from './types/credits-card';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { MainButton } from './Button';
-import { ButtonDisplayMode, ButtonHierarchy, ButtonShape, } from './types/button';
-import { ButtonSize } from './types/button';
+import { Logo, LogoVariant } from '../UI';
+import { CreditsCard, CreditsCardSize } from '../Credits';
+import { SidebarSize, NavItemSize, NavItemState, } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonShape, ButtonSize, } from '../Buttons';
 const StyledSidebar = styled.div `
   display: flex;
   flex-direction: column;

package/dist/stories/{Sidebar.stories.js → Navigation/Sidebar.stories.js}

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Sidebar } from './Sidebar';
-import { SidebarSize } from './types/sidebar';
-import { NavItemState } from './types/nav-item';
+import { SidebarSize, NavItemState } from './types';
 import { Box, Stack, Typography } from '@mui/material';
 const meta = {
-    title: 'Design System/Components/Sidebar',
+    title: 'Design System/Components/Navigation/Sidebar',
     component: Sidebar,
     parameters: {
         layout: 'fullscreen',

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

@@ -0,0 +1,4 @@
+export * from './Header';
+export * from './NavItem';
+export * from './Sidebar';
+export * from './types';

package/dist/stories/Navigation/index.js

@@ -0,0 +1,4 @@
+export * from './Header';
+export * from './NavItem';
+export * from './Sidebar';
+export * from './types';

package/dist/stories/{types/sidebar.d.ts → Navigation/types.d.ts}

@@ -1,4 +1,64 @@
-import { IconName } from '../../utils/icon';
+import { IconName } from '../../utils';
+import { AvatarProps } from '../UI';
+/**
+ * Header component props
+ */
+export type HeaderProps = {
+    /** Title of the header */
+    title: string;
+    /** Email of the logged in user */
+    email: string;
+    /** Avatar props */
+    avatarProps: AvatarProps;
+    /** Text of the back button */
+    backButtonText?: string;
+    /** CSS class name for additional styling */
+    className?: string;
+    /** Callback function to handle back button click */
+    onBackClick?: () => void;
+    /** Callback function to handle logout button click */
+    onLogoutClick?: () => void;
+};
+export declare enum NavItemState {
+    Default = "default",
+    Active = "active",
+    Disabled = "disabled"
+}
+export declare enum NavItemSize {
+    Expanded = "expanded",
+    Collapsed = "collapsed"
+}
+export interface NavItemProps {
+    /**
+     * The text to display in the navigation item
+     */
+    text: string;
+    /**
+     * The icon to display before the text
+     * Uses Phosphor Icons
+     */
+    icon: IconName;
+    /**
+     * The current state of the navigation item
+     */
+    state?: NavItemState;
+    /**
+     * The size of the navigation item
+     */
+    size?: NavItemSize;
+    /**
+     * Whether to show a "Coming Soon" badge
+     */
+    showBadge?: boolean;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+    /**
+     * Optional className for additional styling
+     */
+    className?: string;
+}
 export declare enum SidebarSize {
     Expanded = "expanded",
     Collapsed = "collapsed"

package/dist/stories/{types/nav-item.js → Navigation/types.js}

@@ -9,3 +9,8 @@ export var NavItemSize;
     NavItemSize["Expanded"] = "expanded";
     NavItemSize["Collapsed"] = "collapsed";
 })(NavItemSize || (NavItemSize = {}));
+export var SidebarSize;
+(function (SidebarSize) {
+    SidebarSize["Expanded"] = "expanded";
+    SidebarSize["Collapsed"] = "collapsed";
+})(SidebarSize || (SidebarSize = {}));

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

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

package/dist/stories/{Typography.js → Typography/Typography.js}

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TypographySize, TypographyWeight, } from './types/typography';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TypographySize, TypographyWeight } from './types';
 export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, style, }) => {
     const getTypographySizeToken = () => {
         let sizeLc = size?.toLowerCase() || '';
@@ -50,6 +50,3 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
             ...style,
         }, children: text }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Typography" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsxs("div", { children: [_jsx("h2", { children: "Size: Xl (HeadingXL)" }), _jsx(Typography, { text: "HeadingXL", size: TypographySize.HeadingXL, weight: TypographyWeight.Bold })] }) })] }));
-};

package/dist/stories/{Typography.stories.js → Typography/Typography.stories.js}

@@ -1,7 +1,7 @@
 import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { TypographySize, TypographyWeight } from './types';
 const meta = {
-    title: 'Design System/Foundations/Typography',
+    title: 'Design System/Foundations/Typography/Typography',
     component: Typography,
     parameters: {
         layout: 'centered',

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

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

package/dist/stories/Typography/index.js

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

package/dist/stories/{types/typography.d.ts → Typography/types.d.ts}

@@ -40,8 +40,3 @@ export interface TypographyProps {
     /** Style object for additional styling */
     style?: React.CSSProperties;
 }
-/**
- * Props for the Components wrapper
- */
-export interface ComponentsProps {
-}

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

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

package/dist/stories/{Avatar.js → UI/Avatar.js}

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AvatarImage, AvatarSize, AvatarStyle, getInitials, } from './types/avatar';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AvatarImage, AvatarSize, AvatarStyle } from './types';
 import { Avatar as MuiAvatar, } from '@mui/material';
 import { User } from '@phosphor-icons/react';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getInitials } from '../../utils';
 export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false, image = AvatarImage, size = AvatarSize.xxl, style: customStyle, text = 'Scarlett Johansson', }) => {
     const getDimensions = (avatarSize) => {
         switch (avatarSize) {
@@ -74,6 +74,3 @@ export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false,
         return (_jsx(MuiAvatar, { ...props, children: _jsx(User, { size: dimensions / 2, weight: "bold" }) }));
     }
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Avatars" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: [_jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Letters" }), _jsx(Avatar, { text: "Scarlett Johansson", size: AvatarSize.sm, avatarStyle: AvatarStyle.Letters })] }), _jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Picture" }), _jsx(Avatar, { image: AvatarImage, size: AvatarSize.sm, avatarStyle: AvatarStyle.Picture })] }), _jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Placeholder" }), _jsx(Avatar, { size: AvatarSize.sm, avatarStyle: AvatarStyle.Placeholder })] })] })] }));
-};

package/dist/stories/{Avatar.stories.js → UI/Avatar.stories.js}

@@ -1,7 +1,7 @@
 import { Avatar } from './Avatar';
-import { AvatarImage, AvatarSize, AvatarStyle } from './types/avatar';
+import { AvatarStyle, AvatarSize, AvatarImage } from './types';
 const meta = {
-    title: 'Design System/Components/Avatar',
+    title: 'Design System/Components/UI/Avatar',
     component: Avatar,
     parameters: {
         layout: 'centered',

package/dist/stories/{Bagde.d.ts → UI/Badge.d.ts}

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

package/dist/stories/{Bagde.js → UI/Badge.js}

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BadgeColor, BadgeSize } from './types/badge';
+import { BadgeColor, BadgeSize } from './types';
 import { Box } from '@mui/material';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { getIconComponent } from '../utils/icon';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
 export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, }) => {
     const getBackgroundColor = (color) => {
         switch (color) {

package/dist/stories/{Badge.stories.d.ts → UI/Badge.stories.d.ts}

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Badge } from './Bagde';
+import { Badge } from './Badge';
 declare const meta: Meta<typeof Badge>;
 export default meta;
 type Story = StoryObj<typeof Badge>;

package/dist/stories/{Badge.stories.js → UI/Badge.stories.js}

@@ -1,7 +1,7 @@
-import { Badge } from './Bagde';
-import { BadgeColor, BadgeSize } from './types/badge';
+import { Badge } from './Badge';
+import { BadgeColor, BadgeSize } from './types';
 const meta = {
-    title: 'Design System/Components/Badge',
+    title: 'Design System/Components/UI/Badge',
     component: Badge,
     parameters: {
         layout: 'centered',

package/dist/stories/{HintBubble.d.ts → UI/HintBubble.d.ts}

@@ -1,3 +1,3 @@
 import React from 'react';
-import { HintBubbleProps } from './types/hint-bubble';
+import { HintBubbleProps } from './types';
 export declare const HintBubble: React.FC<HintBubbleProps>;

package/dist/stories/{HintBubble.js → UI/HintBubble.js}

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { HintBubbleSize, HintBubbleType, } from './types/hint-bubble';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { HintBubbleSize, HintBubbleType } from './types';
 export const HintBubble = ({ text, size = HintBubbleSize.md, type = HintBubbleType.Info, }) => {
     const getPadding = () => {
         if (size === HintBubbleSize.sm) {

package/dist/stories/{HintBubble.stories.js → UI/HintBubble.stories.js}

@@ -1,7 +1,7 @@
 import { HintBubble } from './HintBubble';
-import { HintBubbleSize, HintBubbleType } from './types/hint-bubble';
+import { HintBubbleSize, HintBubbleType } from './types';
 const meta = {
-    title: 'Design System/Components/HintBubble',
+    title: 'Design System/Components/UI/HintBubble',
     component: HintBubble,
     parameters: {
         layout: 'centered',

package/dist/stories/{Logo.d.ts → UI/Logo.d.ts}

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

package/dist/stories/{Logo.js → UI/Logo.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogoVariant } from './types/logo';
+import { LogoVariant } from './types';
 export const Logo = ({ variant = LogoVariant.Horizontal, color = 'var(--colors-light-background-bg-brand)', gradient, className = '', svgUrl, }) => {
     const logoColor = gradient ? 'url(#gradient)' : color;
     if (svgUrl) {

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Logo } from './Logo';
+declare const meta: Meta<typeof Logo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const Icon: Story;
+export declare const CustomColor: Story;
+export declare const WithGradient: Story;
+export declare const ExternalSvg: Story;

package/dist/stories/{Logo.stories.js → UI/Logo.stories.js}

@@ -1,7 +1,7 @@
 import { Logo } from './Logo';
-import { LogoVariant } from './types/logo';
+import { LogoVariant } from './types';
 const meta = {
-    title: 'Design System/Foundations/Logo',
+    title: 'Design System/Foundations/UI/Logo',
     component: Logo,
     parameters: {
         layout: 'centered',

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

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

package/dist/stories/{Menu.js → UI/Menu.js}

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem as MuiMenuItem, Menu as MuiMenu, } from '@mui/material';
 import { Fragment, useState } from 'react';
-import { MainButton } from './Button';
-import { ButtonDisplayMode, ButtonHierarchy, ButtonType } from './types/button';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { getIconComponent } from '../utils/icon';
+import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonType, } from '../Buttons';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
 export const Menu = ({ icon = 'DotsThree', items, style, }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
@@ -49,9 +47,3 @@ export const Menu = ({ icon = 'DotsThree', items, style, }) => {
                     }
                 }) })] }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Menu" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsx(Menu, { icon: "DotsThree", items: [
-                        { label: 'Edit', onClick: () => { }, icon: 'Pencil' },
-                        { label: 'Delete', onClick: () => { }, icon: 'Trash' },
-                    ] }) })] }));
-};

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Menu } from './Menu';
+declare const meta: Meta<typeof Menu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/{Menu.stories.js → UI/Menu.stories.js}

@@ -1,6 +1,6 @@
 import { Menu } from './Menu';
 const meta = {
-    title: 'Design System/Components/Menu',
+    title: 'Design System/Components/UI/Menu',
     component: Menu,
     parameters: {
         layout: 'centered',

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

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

package/dist/stories/{ProgressIndicator.js → UI/ProgressIndicator.js}

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ProgressIndicatorMode, } from './types/progress-indicator';
+import { ProgressIndicatorMode } from './types';
 import { Box } from '@mui/material';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
 export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentValue = 40, maxValue = 100, fillColor = 'var(--colors-light-background-bg-brand)', backgroundColor = 'var(--colors-light-background-bg-white)', text = 'used', textColor = 'var(--colors-light-text-text-primary)', style, }) => {
     let errorText = '';
     const calculateFill = () => {
@@ -35,6 +34,3 @@ export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentV
     }
     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} / ${maxValue} ${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}%`, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor }))] }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Progress Indicator" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' } })] }));
-};

package/dist/stories/{ProgressIndicator.stories.js → UI/ProgressIndicator.stories.js}

@@ -1,7 +1,7 @@
 import { ProgressIndicator } from './ProgressIndicator';
-import { ProgressIndicatorMode } from './types/progress-indicator';
+import { ProgressIndicatorMode } from './types';
 const meta = {
-    title: 'Design System/Components/ProgressIndicator',
+    title: 'Design System/Components/UI/ProgressIndicator',
     component: ProgressIndicator,
     parameters: {
         layout: 'centered',

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

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

package/dist/stories/{SkeletonLoader.stories.js → UI/SkeletonLoader.stories.js}

@@ -1,6 +1,6 @@
 import { SkeletonLoader } from './SkeletonLoader';
 const meta = {
-    title: 'Design System/Components/SkeletonLoader',
+    title: 'Design System/Components/UI/SkeletonLoader',
     component: SkeletonLoader,
     parameters: {
         layout: 'centered',

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

@@ -0,0 +1,8 @@
+export * from './Badge';
+export * from './Avatar';
+export * from './HintBubble';
+export * from './Logo';
+export * from './Menu';
+export * from './ProgressIndicator';
+export * from './SkeletonLoader';
+export * from './types';

package/dist/stories/UI/index.js

@@ -0,0 +1,8 @@
+export * from './Badge';
+export * from './Avatar';
+export * from './HintBubble';
+export * from './Logo';
+export * from './Menu';
+export * from './ProgressIndicator';
+export * from './SkeletonLoader';
+export * from './types';