@beydesign/storybook 0.0.38 → 0.0.40

package/dist/index.d.ts

@@ -1,32 +1,9 @@
-export { MainButton } from './stories/Button';
-export { Avatar } from './stories/Avatar';
-export { Typography } from './stories/Typography';
-export { Badge } from './stories/Bagde';
-export { Checkbox } from './stories/Checkbox';
-export { ToggleButtonGroup } from './stories/ToggleButtonGroup';
-export { ProgressIndicator } from './stories/ProgressIndicator';
-export { Logo } from './stories/Logo';
-export { Toggle } from './stories/Toggle';
-export { Header } from './stories/Header';
-export { NavItem } from './stories/NavItem';
-export { CreditsCard } from './stories/CreditsCard';
-export { Sidebar } from './stories/Sidebar';
-export { Menu } from './stories/Menu';
-export { SkeletonLoader } from './stories/SkeletonLoader';
-export { HintBubble } from './stories/HintBubble';
-export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, type MainButtonProps, } from './stories/types/button';
-export { BadgeColor, BadgeSize, type BadgeProps } from './stories/types/badge';
-export { AvatarStyle, AvatarSize, type AvatarProps, } from './stories/types/avatar';
-export { TypographySize, TypographyWeight, type TypographyProps, } from './stories/types/typography';
-export { CheckboxType, type CheckboxProps } from './stories/types/checkbox';
-export { ToggleButtonGroupSize, type ToggleButtonGroupProps, } from './stories/types/toggle-button-group';
-export { ProgressIndicatorMode, type ProgressIndicatorProps, } from './stories/types/progress-indicator';
-export { LogoVariant, type LogoProps } from './stories/types/logo';
-export { TogglePosition, type ToggleProps } from './stories/types/toggle';
-export { type HeaderProps } from './stories/types/header';
-export { NavItemState, NavItemSize, type NavItemProps, } from './stories/types/nav-item';
-export { CreditsCardSize, type CreditsCardProps, } from './stories/types/credits-card';
-export { SidebarSize, type SidebarProps, type NavItemConfig, type NavSection, } from './stories/types/sidebar';
-export { type MenuProps, type MenuItemProps } from './stories/types/menu';
-export { HintBubbleType, HintBubbleSize, type HintBubbleProps, } from './stories/types/hint-bubble';
-export { AgentCard, type AgentCardProps, type AgentState, AgentCardSkeleton, type AgentCardSkeletonProps, } from './stories/AgentCard';
+export * from './stories/UI';
+export * from './stories/Agent';
+export * from './stories/Form';
+export * from './stories/Buttons';
+export * from './stories/Typography';
+export * from './stories/Credits';
+export * from './stories/Navigation';
+export * from './stories/Typography';
+export * from './stories/UI';

package/dist/index.js

@@ -1,45 +1,9 @@
-// Components
-export { MainButton } from './stories/Button';
-export { Avatar } from './stories/Avatar';
-export { Typography } from './stories/Typography';
-export { Badge } from './stories/Bagde';
-export { Checkbox } from './stories/Checkbox';
-export { ToggleButtonGroup } from './stories/ToggleButtonGroup';
-export { ProgressIndicator } from './stories/ProgressIndicator';
-export { Logo } from './stories/Logo';
-export { Toggle } from './stories/Toggle';
-export { Header } from './stories/Header';
-export { NavItem } from './stories/NavItem';
-export { CreditsCard } from './stories/CreditsCard';
-export { Sidebar } from './stories/Sidebar';
-export { Menu } from './stories/Menu';
-export { SkeletonLoader } from './stories/SkeletonLoader';
-export { HintBubble } from './stories/HintBubble';
-// Button Types
-export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
-// Badge Types
-export { BadgeColor, BadgeSize } from './stories/types/badge';
-// Avatar Types
-export { AvatarStyle, AvatarSize, } from './stories/types/avatar';
-// Typography Types
-export { TypographySize, TypographyWeight, } from './stories/types/typography';
-// Checkbox Types
-export { CheckboxType } from './stories/types/checkbox';
-// Toggle Button Group Types
-export { ToggleButtonGroupSize, } from './stories/types/toggle-button-group';
-// Progress Indicator Types
-export { ProgressIndicatorMode, } from './stories/types/progress-indicator';
-// Logo Types
-export { LogoVariant } from './stories/types/logo';
-// Toggle Types
-export { TogglePosition } from './stories/types/toggle';
-// NavItem Types
-export { NavItemState, NavItemSize, } from './stories/types/nav-item';
-// Card Types
-export { CreditsCardSize, } from './stories/types/credits-card';
-// Sidebar Types
-export { SidebarSize, } from './stories/types/sidebar';
-// Agent Card Types
-// Hint Bubble Types
-export { HintBubbleType, HintBubbleSize, } from './stories/types/hint-bubble';
-export { AgentCard, AgentCardSkeleton, } from './stories/AgentCard';
+export * from './stories/UI';
+export * from './stories/Agent';
+export * from './stories/Form';
+export * from './stories/Buttons';
+export * from './stories/Typography';
+export * from './stories/Credits';
+export * from './stories/Navigation';
+export * from './stories/Typography';
+export * from './stories/UI';

package/dist/stories/{AgentCard → Agent}/AgentCard.js

@@ -2,18 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { AgentState } from './types';
 import { Box } from '@mui/material';
-import { Typography } from '../Typography';
-import { TypographySize, TypographyWeight } from '../types/typography';
-import { Toggle } from '../Toggle';
-import { TogglePosition } from '../types/toggle';
-import { Badge } from '../Bagde';
-import { BadgeColor, BadgeSize } from '../types/badge';
-import { MainButton } from '../Button';
-import { ButtonHierarchy, ButtonSize } from '../types/button';
-import { Menu } from '../Menu';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Toggle, TogglePosition } from '../Form';
+import { Badge, ProgressIndicator, ProgressIndicatorMode, BadgeColor, BadgeSize, Menu, } from '../UI';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
 import { ArrowsCounterClockwise } from '@phosphor-icons/react';
-import { ProgressIndicator } from '../ProgressIndicator';
-import { ProgressIndicatorMode } from '../types/progress-indicator';
 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', }) => {
     const [hovered, setHovered] = useState(false);
     const [imageError, setImageError] = useState(false);

package/dist/stories/{AgentCard → Agent}/AgentCardSkeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { SkeletonLoader } from '../SkeletonLoader';
+import { SkeletonLoader } from '../UI';
 export const AgentCardSkeleton = ({ width = '300px', showDate = false, showBadges = false, showDescription = false, style, }) => {
     return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: "var(--spacing-tokens-size-in-px-spacing-md)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", bgcolor: "var(--colors-light-background-bg-component)", 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)`, style: style, children: [_jsx(Box, { width: "100%", sx: { aspectRatio: 1 }, borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", overflow: "hidden", children: _jsx(SkeletonLoader, {}) }), _jsx(SkeletonLoader, { width: "70%", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showDate && (_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })), showBadges && (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [_jsx(SkeletonLoader, { width: "60px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] })), showDescription && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", children: [_jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }))] }));
 };

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

@@ -0,0 +1,3 @@
+export * from './AgentCard';
+export * from './AgentCardSkeleton';
+export * from './types';

package/dist/stories/Agent/index.js

@@ -0,0 +1,3 @@
+export * from './AgentCard';
+export * from './AgentCardSkeleton';
+export * from './types';

package/dist/stories/{AgentCard → Agent}/types.d.ts

@@ -1,4 +1,4 @@
-import { MenuItemProps } from '../types/menu';
+import { MenuItemProps } from '../UI';
 export declare enum AgentState {
     pending = "pending",
     processing = "processing",

package/dist/stories/Buttons/MainButton.d.ts

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

package/dist/stories/{Button.js → Buttons/MainButton.js}

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircularProgress } from '@mui/material';
 import styled from '@emotion/styled';
-import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './types/button';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
-import { getIconComponent } from '../utils/icon';
+import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
 const StyledButton = styled.button `
   text-transform: none;
   padding: ${(props) => props.$displayIconMode === ButtonDisplayMode.Only
@@ -285,6 +284,3 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
     };
     return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, children: renderContent() }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Buttons" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: [_jsxs("div", { children: [_jsx("h2", { children: "Size: xl, Hierarchy: Primary" }), _jsx(MainButton, { text: "Primary Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, destructive: false, showLeadingIcon: true, showTrailingIcon: true, leadingIcon: "Circle", trailingIcon: "Circle", onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "White Variant with Icons" }), _jsx(MainButton, { text: "White Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, showLeadingIcon: true, showTrailingIcon: true, leadingIcon: "Circle", trailingIcon: "Circle", onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Loading State" }), _jsx(MainButton, { text: "Loading Button", loading: true, size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Disabled State" }), _jsx(MainButton, { text: "Disabled Button", disabled: true, size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Destructive Button" }), _jsx(MainButton, { text: "Destructive Button", destructive: true, size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Leading Icon Only" }), _jsx(MainButton, { text: "Leading Icon Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, showLeadingIcon: true, showTrailingIcon: false, leadingIcon: "Circle", onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Trailing Icon Only" }), _jsx(MainButton, { text: "Trailing Icon Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, showLeadingIcon: false, showTrailingIcon: true, trailingIcon: "Circle", onClick: () => console.log('clicked') })] })] })] }));
-};

package/dist/stories/{Button.stories.d.ts → Buttons/MainButton.stories.d.ts}

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

package/dist/stories/{Button.stories.js → Buttons/MainButton.stories.js}

@@ -1,10 +1,7 @@
-import { MainButton } from './Button';
-import { ButtonShape, ButtonState } from './types/button';
-import { ButtonDisplayMode } from './types/button';
-import { ButtonHierarchy } from './types/button';
-import { ButtonSize } from './types/button';
+import { MainButton } from './MainButton';
+import { ButtonHierarchy, ButtonSize, ButtonState, ButtonDisplayMode, ButtonShape, } from './types';
 const meta = {
-    title: 'Design System/Components/Button',
+    title: 'Design System/Components/Buttons/MainButton',
     component: MainButton,
     parameters: {
         layout: 'centered',

package/dist/stories/Buttons/ToggleButtonGroup.d.ts

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

package/dist/stories/{ToggleButtonGroup.js → Buttons/ToggleButtonGroup.js}

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToggleButtonGroupSize, } from './types/toggle-button-group';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggleButtonGroupSize, ButtonHierarchy, ButtonSize, ButtonType, } from './types';
 import { Box } from '@mui/material';
-import { MainButton } from './Button';
-import { ButtonHierarchy, ButtonSize, ButtonType, } from './types/button';
+import { MainButton } from './MainButton';
 export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled, size = ToggleButtonGroupSize.lg, }) => {
     const selectedOptionStyle = {
         backgroundColor: 'var(--colors-light-background-bg-card-highlight-hover)',
@@ -32,6 +31,3 @@ export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled,
             return (_jsx(MainButton, { text: option, onClick: () => onChange(option), size: getButtonSize(), hierarchy: ButtonHierarchy.Tetriary, type: ButtonType.Button, style: isSelected ? selectedOptionStyle : unselectedOptionStyle, disabled: disabled }, option));
         }) }));
 };
-export const Components = () => {
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Toggle Buttons" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsx(ToggleButtonGroup, { options: ['Option 1', 'Option 2', 'Option 3'], selectedOption: "Option 1", onChange: () => { } }) })] }));
-};

package/dist/stories/{ToggleButtonGroup.stories.js → Buttons/ToggleButtonGroup.stories.js}

@@ -1,7 +1,7 @@
 import { ToggleButtonGroup } from './ToggleButtonGroup';
-import { ToggleButtonGroupSize } from './types/toggle-button-group';
+import { ToggleButtonGroupSize } from './types';
 const meta = {
-    title: 'Design System/Components/ToggleButtonGroup',
+    title: 'Design System/Components/Buttons/ToggleButtonGroup',
     component: ToggleButtonGroup,
     parameters: {
         layout: 'centered',

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

@@ -0,0 +1,3 @@
+export * from './MainButton';
+export * from './ToggleButtonGroup';
+export * from './types';

package/dist/stories/Buttons/index.js

@@ -0,0 +1,3 @@
+export * from './MainButton';
+export * from './ToggleButtonGroup';
+export * from './types';

package/dist/stories/{types/button.d.ts → Buttons/types.d.ts}

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import { IconName } from '../../utils/icon';
+import { IconName } from '../../utils';
 /**
  * Button size variants
  */
@@ -100,7 +100,25 @@ export interface MainButtonProps {
     trailingIcon?: IconName;
 }
 /**
- * Props for the Components wrapper
+ * Toggle button size variants
  */
-export interface ComponentsProps {
+export declare enum ToggleButtonGroupSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm"
 }
+/**
+ * Toggle button component props
+ */
+export type ToggleButtonGroupProps = {
+    /** Size variant of the toggle button */
+    size?: ToggleButtonGroupSize;
+    /** Selected option of the toggle button */
+    selectedOption: string;
+    /** Options of the toggle button */
+    options: string[];
+    /** Whether the toggle button is disabled */
+    disabled?: boolean;
+    /** Callback function when the toggle button is selected */
+    onChange: (option: string) => void;
+};

package/dist/stories/{types/button.js → Buttons/types.js}

@@ -56,3 +56,12 @@ export var ButtonType;
     ButtonType["Submit"] = "submit";
     ButtonType["Reset"] = "reset";
 })(ButtonType || (ButtonType = {}));
+/**
+ * Toggle button size variants
+ */
+export var ToggleButtonGroupSize;
+(function (ToggleButtonGroupSize) {
+    ToggleButtonGroupSize["lg"] = "lg";
+    ToggleButtonGroupSize["md"] = "md";
+    ToggleButtonGroupSize["sm"] = "sm";
+})(ToggleButtonGroupSize || (ToggleButtonGroupSize = {}));

package/dist/stories/{CreditsCard.d.ts → Credits/CreditsCard.d.ts}

@@ -1,3 +1,3 @@
 import React from 'react';
-import { CreditsCardProps } from './types/credits-card';
+import { CreditsCardProps } from './types';
 export declare const CreditsCard: React.FC<CreditsCardProps>;

package/dist/stories/{CreditsCard.js → Credits/CreditsCard.js}

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from '@emotion/styled';
-import { CreditsCardSize } from './types/credits-card';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { CreditsCardSize } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Box } from '@mui/material';
-import { MainButton } from './Button';
-import { ButtonHierarchy, ButtonSize } from './types/button';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
 const StyledCard = styled.div `
   display: flex;
   flex-direction: column;

package/dist/stories/{CreditsCard.stories.js → Credits/CreditsCard.stories.js}

@@ -1,7 +1,7 @@
 import { CreditsCard } from './CreditsCard';
-import { CreditsCardSize } from './types/credits-card';
+import { CreditsCardSize } from './types';
 const meta = {
-    title: 'Design System/Components/CreditsCard',
+    title: 'Design System/Components/Credits/CreditsCard',
     component: CreditsCard,
     parameters: {
         layout: 'centered',

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

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

package/dist/stories/Credits/index.js

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

package/dist/stories/{Checkbox.d.ts → Form/Checkbox.d.ts}

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

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Checkbox as MuiCheckbox } from '@mui/material';
-import { CheckboxType } from './types/checkbox';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { CheckboxType } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
 export const Checkbox = ({ type = CheckboxType.Checkbox, label, checked, disabled, required, onChange, }) => {
     const props = {
         checked,

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

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

package/dist/stories/{TextArea.d.ts → Form/TextArea.d.ts}

@@ -1,3 +1,3 @@
 import React from 'react';
-import { TextAreaProps } from './types/text-area';
+import { TextAreaProps } from './types';
 export declare const TextArea: React.FC<TextAreaProps>;

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box } from '@mui/material';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
 export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, }) => {
     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 }), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText

package/dist/stories/{TextArea.stories.d.ts → Form/TextArea.stories.d.ts}

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import("./types/text-area").TextAreaProps>;
+    component: import("react").FC<import("./types").TextAreaProps>;
     parameters: {
         layout: string;
     };

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

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

package/dist/stories/{TextInput.d.ts → Form/TextInput.d.ts}

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

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box } from '@mui/material';
-import { Typography } from './Typography';
-import { TypographySize, TypographyWeight } from './types/typography';
+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

package/dist/stories/{TextInput.stories.d.ts → Form/TextInput.stories.d.ts}

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import("./types/text-input").TextInputProps>;
+    component: import("react").FC<import("./types").TextInputProps>;
     parameters: {
         layout: string;
     };

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

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

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