@beydesign/storybook 0.0.37 → 0.0.39

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

@@ -0,0 +1,88 @@
+import { TextArea } from './TextArea';
+const meta = {
+    title: 'Design System/Components/Form/TextArea',
+    component: TextArea,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The label of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'The value of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        hintText: {
+            control: 'text',
+            description: 'The hint text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        errorText: {
+            control: 'text',
+            description: 'The error text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the text input is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        onChange: {
+            description: 'The onChange function of the text input',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        maxLength: {
+            control: 'number',
+            description: 'The max length of the text input',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        showMaxLengthIndicator: {
+            control: 'boolean',
+            description: 'Whether to show the max length indicator',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        numberOfRows: {
+            control: 'number',
+            description: 'The number of rows of the text input',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Agent's name",
+        value: 'Anna',
+        onChange: () => { },
+    },
+};

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

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

package/dist/stories/Form/TextInput.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, }) => {
+    const [focused, setFocused] = useState(false);
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), _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)'
+                                : focused
+                                    ? '1px solid var(--colors-light-border-border-component-active)'
+                                    : 'transparent'}`, children: _jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
+                                    border: 'none',
+                                    outline: 'none',
+                                    width: '100%',
+                                    color: disabled
+                                        ? 'var(--colors-light-text-text-disabled)'
+                                        : 'var(--colors-light-text-text-title)',
+                                    backgroundColor: 'transparent',
+                                }, onFocus: () => setFocused(true), onBlur: () => setFocused(false) }) }), 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)' }))] }) }));
+};

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

@@ -0,0 +1,85 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./types").TextInputProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hintText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        errorText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        trailingText: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onChange: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,74 @@
+import { TextInput } from './TextInput';
+const meta = {
+    title: 'Design System/Components/Form/TextInput',
+    component: TextInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The label of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'The value of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        hintText: {
+            control: 'text',
+            description: 'The hint text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        errorText: {
+            control: 'text',
+            description: 'The error text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the text input is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        trailingText: {
+            control: 'text',
+            description: 'The trailing text of the text input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onChange: {
+            description: 'The onChange function of the text input',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Agent's name",
+        value: 'Anna',
+        onChange: () => { },
+    },
+};

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

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

package/dist/stories/{Toggle.js → Form/Toggle.js}

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TogglePosition } from './types/toggle';
+import { TogglePosition } from './types';
 import { Box, styled, Switch } from '@mui/material';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
 const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props })))(({ theme }) => ({
     width: 36,
     height: 20,
@@ -57,6 +56,3 @@ 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" }))] }))] }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Toggle" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' } })] }));
-};

package/dist/stories/{Toggle.stories.js → Form/Toggle.stories.js}

@@ -1,7 +1,7 @@
+import { TogglePosition } from './types';
 import { Toggle } from './Toggle';
-import { TogglePosition } from './types/toggle';
 const meta = {
-    title: 'Design System/Components/Toggle',
+    title: 'Design System/Components/Form/Toggle',
     component: Toggle,
     parameters: {
         layout: 'centered',

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

@@ -0,0 +1,5 @@
+export * from './Checkbox';
+export * from './Toggle';
+export * from './TextArea';
+export * from './TextInput';
+export * from './types';

package/dist/stories/Form/index.js

@@ -0,0 +1,5 @@
+export * from './Checkbox';
+export * from './Toggle';
+export * from './TextArea';
+export * from './TextInput';
+export * from './types';

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

@@ -0,0 +1,94 @@
+import { SxProps, Theme } from '@mui/material';
+/**
+ * Text area component props
+ */
+export type TextAreaProps = {
+    /** Text area label */
+    label: string;
+    /** Text area value */
+    value: string;
+    /** Text area onChange */
+    onChange: (value: string) => void;
+    /** Text input placeholder */
+    placeholder?: string;
+    /** Text input hint */
+    hintText?: string;
+    /** Text input error */
+    errorText?: string;
+    /** Text input disabled */
+    disabled?: boolean;
+    /** Text input max length */
+    maxLength?: number;
+    /** Text input show max length indicator */
+    showMaxLengthIndicator?: boolean;
+    /** Text input number of rows */
+    numberOfRows?: number;
+};
+/**
+ * Text input component props
+ */
+export type TextInputProps = {
+    /** Text input label */
+    label: string;
+    /** Text input value */
+    value: string;
+    /** Text input onChange */
+    onChange: (value: string) => void;
+    /** Text input placeholder */
+    placeholder?: string;
+    /** Text input hint */
+    hintText?: string;
+    /** Text input error */
+    errorText?: string;
+    /** Text input disabled */
+    disabled?: boolean;
+    /** Text input trailing text */
+    trailingText?: string;
+};
+/**
+ * Toggle position variants
+ */
+export declare enum TogglePosition {
+    Left = "Left",
+    Right = "Right"
+}
+/**
+ * Toggle component props
+ */
+export type ToggleProps = {
+    /** Text of the toggle */
+    text?: string;
+    /** Title of the toggle */
+    title?: string;
+    /** Whether the toggle is checked */
+    checked: boolean;
+    /** Callback function when the toggle is checked */
+    onChange: (checked: boolean) => void;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Position of the toggle */
+    togglePosition?: TogglePosition;
+    /** Style of the toggle */
+    style?: SxProps<Theme>;
+};
+export declare enum CheckboxType {
+    Radio = "Radio",
+    Checkbox = "Checkbox"
+}
+/**
+ * Checkbox component props
+ */
+export type CheckboxProps = {
+    /** Type variant of the checkbox */
+    type?: CheckboxType;
+    /** Label of the checkbox */
+    label: string;
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Whether the checkbox is read-only */
+    required?: boolean;
+    /** Event handler for the checkbox */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};

package/dist/stories/{types/toggle.js → Form/types.js}

@@ -6,3 +6,8 @@ export var TogglePosition;
     TogglePosition["Left"] = "Left";
     TogglePosition["Right"] = "Right";
 })(TogglePosition || (TogglePosition = {}));
+export var CheckboxType;
+(function (CheckboxType) {
+    CheckboxType["Radio"] = "Radio";
+    CheckboxType["Checkbox"] = "Checkbox";
+})(CheckboxType || (CheckboxType = {}));

package/dist/stories/{Colors.js → Foundations/Colors.js}

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Copy } from '@phosphor-icons/react';
 import styles from './Colors.module.css';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
 const ColorSwatch = ({ name, value }) => {
     const [copiedName, setCopiedName] = useState(false);
     const [copiedValue, setCopiedValue] = useState(false);

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

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

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>;