[4/n][Storybook] components & icons (#22)

packages/frontend/.storybook/main.ts

@@ -26,4 +26,5 @@ const config: StorybookConfig = {
     autodocs: 'tag',
   },
 };
+
 export default config;

packages/frontend/src/components/shared/CustomIcon/index.ts

@@ -63,6 +63,10 @@ export * from './CheckRadioOutlineIcon';
 export * from './TrendingIcon';
 export * from './ChevronDoubleDownIcon';
 export * from './GearIcon';
+export * from './AppleIcon';
+export * from './CalendarDaysIcon';
+export * from './GoogleIcon';
+export * from './KeyIcon';
 
 // Templates
 export * from './templates';

packages/frontend/src/components/shared/Select/index.ts

@@ -1 +1,2 @@
 export * from './Select';
+export * from './SelectItem';

packages/frontend/src/components/shared/Tooltip/index.ts

@@ -1,2 +1,3 @@
 export * from './Tooltip';
 export * from './TooltipBase';
+export * from './TooltipContent';

packages/frontend/src/stories/Components/Avatar.stories.tsx

@@ -27,6 +27,7 @@ const meta: Meta<typeof Avatar> = {
     },
   },
 };
+
 export default meta;
 
 type Story = StoryObj<typeof Avatar>;

packages/frontend/src/stories/Components/Calendar.stories.tsx

@@ -0,0 +1,44 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Calendar } from 'components/shared/Calendar';
+
+const meta: Meta<typeof Calendar> = {
+  title: 'Components/Calendar',
+  component: Calendar,
+  tags: ['autodocs'],
+  args: {
+    wrapperProps: 'any' as unknown as any,
+    calendarWrapperProps: 'any' as unknown as any,
+    footerProps: 'any' as unknown as any,
+    actions: 'any' as unknown as any,
+    onSelect: () => {},
+    onCancel: () => {},
+    onReset: () => {},
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+  render: ({
+    wrapperProps,
+    calendarWrapperProps,
+    footerProps,
+    actions,
+    onSelect,
+    onCancel,
+    onReset,
+  }) => (
+    <Calendar
+      wrapperProps={wrapperProps}
+      calendarWrapperProps={calendarWrapperProps}
+      footerProps={footerProps}
+      actions={actions}
+      onSelect={onSelect}
+      onCancel={onCancel}
+      onReset={onReset}
+    />
+  ),
+};

packages/frontend/src/stories/Components/Checkbox.stories.tsx

@@ -0,0 +1,41 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Checkbox } from 'components/shared/Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  args: {
+    label: 'string',
+    description: 'string',
+    checked: 'CheckedState' as unknown as any,
+    defaultChecked: 'CheckedState' as unknown as any,
+    required: 'boolean' as unknown as any,
+    onCheckedChange: '(checked: CheckedState) => void' as unknown as any,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  render: ({
+    label,
+    description,
+    checked,
+    defaultChecked,
+    required,
+    onCheckedChange,
+  }) => (
+    <Checkbox
+      label={label}
+      description={description}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      required={required}
+      onCheckedChange={onCheckedChange}
+    />
+  ),
+};

packages/frontend/src/stories/Components/DatePicker.stories.tsx

@@ -0,0 +1,25 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { DatePicker } from 'components/shared/DatePicker';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+  render: ({ calendarProps, onChange, value, selectRange, onReset }) => (
+    <DatePicker
+      calendarProps={calendarProps}
+      onChange={onChange}
+      value={value}
+      selectRange={selectRange}
+      onReset={onReset}
+    />
+  ),
+};

packages/frontend/src/stories/Components/DotBorder.stories.tsx

@@ -0,0 +1,15 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { DotBorder } from 'components/shared/DotBorder';
+
+const meta: Meta<typeof DotBorder> = {
+  title: 'Components/DotBorder',
+  component: DotBorder,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DotBorder>;
+
+export const Default: Story = {};

packages/frontend/src/stories/Components/Heading.stories.tsx

@@ -0,0 +1,15 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Heading } from 'components/shared/Heading';
+
+const meta: Meta<typeof Heading> = {
+  title: 'Components/Heading',
+  component: Heading,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Heading>;
+
+export const Default: Story = {};

packages/frontend/src/stories/Components/IconWithFrame.stories.tsx

@@ -0,0 +1,32 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { PlusIcon } from 'components/shared/CustomIcon';
+
+import { IconWithFrame } from 'components/shared/IconWithFrame';
+
+const meta: Meta<typeof IconWithFrame> = {
+  title: 'Components/IconWithFrame',
+  component: IconWithFrame,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      control: 'object',
+    },
+    hasHighlight: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof IconWithFrame>;
+
+export const Default: Story = {
+  render: ({ icon, hasHighlight }) => (
+    <IconWithFrame icon={icon} hasHighlight={hasHighlight} />
+  ),
+  args: {
+    hasHighlight: true,
+    icon: <PlusIcon />,
+  },
+};

packages/frontend/src/stories/Components/Icons/AppleIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { AppleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof AppleIcon> = {
+  title: 'Icons/AppleIcon',
+  component: AppleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AppleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <AppleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ArrowLeftCircleFilledIcon.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ArrowLeftCircleFilledIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ArrowLeftCircleFilledIcon> = {
+  title: 'Icons/ArrowLeftCircleFilledIcon',
+  component: ArrowLeftCircleFilledIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ArrowLeftCircleFilledIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => (
+    <ArrowLeftCircleFilledIcon size={size} name={name} />
+  ),
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ArrowRightCircleFilledIcon.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ArrowRightCircleFilledIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ArrowRightCircleFilledIcon> = {
+  title: 'Icons/ArrowRightCircleFilledIcon',
+  component: ArrowRightCircleFilledIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ArrowRightCircleFilledIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => (
+    <ArrowRightCircleFilledIcon size={size} name={name} />
+  ),
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ArrowRightCircleIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ArrowRightCircleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ArrowRightCircleIcon> = {
+  title: 'Icons/ArrowRightCircleIcon',
+  component: ArrowRightCircleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ArrowRightCircleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ArrowRightCircleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/BranchIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BranchIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof BranchIcon> = {
+  title: 'Icons/BranchIcon',
+  component: BranchIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BranchIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <BranchIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/BranchStrokeIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BranchStrokeIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof BranchStrokeIcon> = {
+  title: 'Icons/BranchStrokeIcon',
+  component: BranchStrokeIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BranchStrokeIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <BranchStrokeIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/BuildingIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BuildingIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof BuildingIcon> = {
+  title: 'Icons/BuildingIcon',
+  component: BuildingIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BuildingIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <BuildingIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CalendarDaysIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CalendarDaysIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CalendarDaysIcon> = {
+  title: 'Icons/CalendarDaysIcon',
+  component: CalendarDaysIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CalendarDaysIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CalendarDaysIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CalendarIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CalendarIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CalendarIcon> = {
+  title: 'Icons/CalendarIcon',
+  component: CalendarIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CalendarIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CalendarIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CheckIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CheckIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CheckIcon> = {
+  title: 'Icons/CheckIcon',
+  component: CheckIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CheckIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CheckRadioIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CheckRadioIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CheckRadioIcon> = {
+  title: 'Icons/CheckRadioIcon',
+  component: CheckRadioIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckRadioIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CheckRadioIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CheckRadioOutlineIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CheckRadioOutlineIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CheckRadioOutlineIcon> = {
+  title: 'Icons/CheckRadioOutlineIcon',
+  component: CheckRadioOutlineIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckRadioOutlineIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CheckRadioOutlineIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CheckRoundFilledIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CheckRoundFilledIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CheckRoundFilledIcon> = {
+  title: 'Icons/CheckRoundFilledIcon',
+  component: CheckRoundFilledIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckRoundFilledIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CheckRoundFilledIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ChevronDoubleDownIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronDoubleDownIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ChevronDoubleDownIcon> = {
+  title: 'Icons/ChevronDoubleDownIcon',
+  component: ChevronDoubleDownIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronDoubleDownIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ChevronDoubleDownIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ChevronDownIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronDownIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ChevronDownIcon> = {
+  title: 'Icons/ChevronDownIcon',
+  component: ChevronDownIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronDownIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ChevronDownIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ChevronGrabberHorizontal.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronGrabberHorizontal } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ChevronGrabberHorizontal> = {
+  title: 'Icons/ChevronGrabberHorizontal',
+  component: ChevronGrabberHorizontal,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronGrabberHorizontal>;
+
+export const Default: Story = {
+  render: ({ size, name }) => (
+    <ChevronGrabberHorizontal size={size} name={name} />
+  ),
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ChevronLeft.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronLeft } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ChevronLeft> = {
+  title: 'Icons/ChevronLeft',
+  component: ChevronLeft,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronLeft>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ChevronLeft size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ChevronRight.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronRight } from '../../../components/shared/CustomIcon/ChevronRight';
+
+const meta: Meta<typeof ChevronRight> = {
+  title: 'Icons/ChevronRight',
+  component: ChevronRight,
+  tags: ['autodocs'],
+  args: {
+    size: 'string | number' as unknown as any,
+    name: 'string',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronRight>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ChevronRight size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ChevronUpDown.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronUpDown } from 'components/shared/CustomIcon/ChevronUpDown';
+
+const meta: Meta<typeof ChevronUpDown> = {
+  title: 'Icons/ChevronUpDown',
+  component: ChevronUpDown,
+  tags: ['autodocs'],
+  args: {
+    size: 'string | number' as unknown as any,
+    name: 'string',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChevronUpDown>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ChevronUpDown size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CirclePlaceholderOnIcon.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CirclePlaceholderOnIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CirclePlaceholderOnIcon> = {
+  title: 'Icons/CirclePlaceholderOnIcon',
+  component: CirclePlaceholderOnIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CirclePlaceholderOnIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => (
+    <CirclePlaceholderOnIcon size={size} name={name} />
+  ),
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ClockIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ClockIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ClockIcon> = {
+  title: 'Icons/ClockIcon',
+  component: ClockIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ClockIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ClockIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/ClockOutlineIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ClockOutlineIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof ClockOutlineIcon> = {
+  title: 'Icons/ClockOutlineIcon',
+  component: ClockOutlineIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ClockOutlineIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <ClockOutlineIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CommitIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CommitIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CommitIcon> = {
+  title: 'Icons/CommitIcon',
+  component: CommitIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CommitIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CommitIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CopyIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CopyIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CopyIcon> = {
+  title: 'Icons/CopyIcon',
+  component: CopyIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CopyIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CopyIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CrossCircleIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CrossCircleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CrossCircleIcon> = {
+  title: 'Icons/CrossCircleIcon',
+  component: CrossCircleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CrossCircleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CrossCircleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CrossIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CrossIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CrossIcon> = {
+  title: 'Icons/CrossIcon',
+  component: CrossIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CrossIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CrossIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/CursorBoxIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CursorBoxIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CursorBoxIcon> = {
+  title: 'Icons/CursorBoxIcon',
+  component: CursorBoxIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CursorBoxIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CursorBoxIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/EllipseIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { EllipseIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof EllipseIcon> = {
+  title: 'Icons/EclipseIcon',
+  component: EllipseIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EllipseIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <EllipseIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/EllipsesIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { EllipsesIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof EllipsesIcon> = {
+  title: 'Icons/EllipsesIcon',
+  component: EllipsesIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EllipsesIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <EllipsesIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/FolderIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { FolderIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof FolderIcon> = {
+  title: 'Icons/FolderIcon',
+  component: FolderIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FolderIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <FolderIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/GearIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GearIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GearIcon> = {
+  title: 'Icons/GearIcon',
+  component: GearIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GearIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GearIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GitHubLogo } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GitHubLogo> = {
+  title: 'Icons/GitHubLogo',
+  component: GitHubLogo,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GitHubLogo>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GitHubLogo size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/GitIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GitIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GitIcon> = {
+  title: 'Icons/GitIcon',
+  component: GitIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GitIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GitIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/GitTeaIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GitTeaIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GitTeaIcon> = {
+  title: 'Icons/GitTeaIcon',
+  component: GitTeaIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GitTeaIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GitTeaIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/GithubIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GithubIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GithubIcon> = {
+  title: 'Icons/GithubIcon',
+  component: GithubIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GithubIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GithubIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/GithubStrokeIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GithubStrokeIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GithubStrokeIcon> = {
+  title: 'Icons/GithubStrokeLogo',
+  component: GithubStrokeIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GithubStrokeIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GithubStrokeIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/GlobeIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GlobeIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GlobeIcon> = {
+  title: 'Icons/GlobeIcon',
+  component: GlobeIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GlobeIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GlobeIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/GoogleIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GoogleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GoogleIcon> = {
+  title: 'Icons/GoogleIcon',
+  component: GoogleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GoogleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GoogleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/HorizontalDotIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { HorizontalDotIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof HorizontalDotIcon> = {
+  title: 'Icons/HorizontalDotIcon',
+  component: HorizontalDotIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HorizontalDotIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <HorizontalDotIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/InfoRoundFilledIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { InfoRoundFilledIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof InfoRoundFilledIcon> = {
+  title: 'Icons/InfoRoundFilledIcon',
+  component: InfoRoundFilledIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InfoRoundFilledIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <InfoRoundFilledIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/InfoSquareIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { InfoSquareIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof InfoSquareIcon> = {
+  title: 'Icons/InfoSquareIcon',
+  component: InfoSquareIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InfoSquareIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <InfoSquareIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/KeyIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { KeyIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof KeyIcon> = {
+  title: 'Icons/KeyIcon',
+  component: KeyIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof KeyIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <KeyIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/LifeBuoyIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LifeBuoyIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LifeBuoyIcon> = {
+  title: 'Icons/LifeBuoyIcon',
+  component: LifeBuoyIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LifeBuoyIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LifeBuoyIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/LinkChainIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LinkChainIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LinkChainIcon> = {
+  title: 'Icons/LinkChainIcon',
+  component: LinkChainIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LinkChainIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LinkChainIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/LinkIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LinkIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LinkIcon> = {
+  title: 'Icons/LinkIcon',
+  component: LinkIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LinkIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LinkIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/LoaderIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LoaderIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LoaderIcon> = {
+  title: 'Icons/LoaderIcon',
+  component: LoaderIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoaderIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LoaderIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/LoadingIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LoadingIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LoadingIcon> = {
+  title: 'Icons/LoadingIcon',
+  component: LoadingIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoadingIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LoadingIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/LockIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LockIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LockIcon> = {
+  title: 'Icons/LockIcon',
+  component: LockIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LockIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LockIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/LogoutIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { LogoutIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof LogoutIcon> = {
+  title: 'Icons/LogoutIcon',
+  component: LogoutIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LogoutIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <LogoutIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/MenuIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { MenuIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof MenuIcon> = {
+  title: 'Icons/MenuIcon',
+  component: MenuIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MenuIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <MenuIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/MinusCircleIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { MinusCircleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof MinusCircleIcon> = {
+  title: 'Icons/MinusCircleIcon',
+  component: MinusCircleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MinusCircleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <MinusCircleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/NotificationBellIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { NotificationBellIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof NotificationBellIcon> = {
+  title: 'Icons/NotificationBellIcon',
+  component: NotificationBellIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationBellIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <NotificationBellIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/PencilIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { PencilIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof PencilIcon> = {
+  title: 'Icons/PencilIcon',
+  component: PencilIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PencilIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <PencilIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/PlusIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { PlusIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof PlusIcon> = {
+  title: 'Icons/PlusIcon',
+  component: PlusIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PlusIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <PlusIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/QuestionMarkRoundFilledIcon.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { QuestionMarkRoundFilledIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof QuestionMarkRoundFilledIcon> = {
+  title: 'Icons/QuestionMarkRoundFilledIcon',
+  component: QuestionMarkRoundFilledIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof QuestionMarkRoundFilledIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => (
+    <QuestionMarkRoundFilledIcon size={size} name={name} />
+  ),
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/QuestionMarkRoundIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { QuestionMarkRoundIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof QuestionMarkRoundIcon> = {
+  title: 'Icons/QuestionMarkRoundIcon',
+  component: QuestionMarkRoundIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof QuestionMarkRoundIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <QuestionMarkRoundIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/RefreshIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { RefreshIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof RefreshIcon> = {
+  title: 'Icons/RefreshIcon',
+  component: RefreshIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RefreshIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <RefreshIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/RocketIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { RocketIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof RocketIcon> = {
+  title: 'Icons/RocketIcon',
+  component: RocketIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RocketIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <RocketIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/SearchIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SearchIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof SearchIcon> = {
+  title: 'Icons/SearchIcon',
+  component: SearchIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SearchIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <SearchIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/SettingsSlidersIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SettingsSlidersIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof SettingsSlidersIcon> = {
+  title: 'Icons/SettingsSlidersIcon',
+  component: SettingsSlidersIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SettingsSlidersIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <SettingsSlidersIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/SnowballIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SnowballIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof SnowballIcon> = {
+  title: 'Icons/SnowballIcon',
+  component: SnowballIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SnowballIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <SnowballIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/StorageIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { StorageIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof StorageIcon> = {
+  title: 'Icons/StorageIcon',
+  component: StorageIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StorageIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <StorageIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/TrendingIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TrendingIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof TrendingIcon> = {
+  title: 'Icons/TrendingIcon',
+  component: TrendingIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TrendingIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <TrendingIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/UndoIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { UndoIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof UndoIcon> = {
+  title: 'Icons/UndoIcon',
+  component: UndoIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UndoIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <UndoIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/WarningDiamondIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { WarningDiamondIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof WarningDiamondIcon> = {
+  title: 'Icons/WarningDiamondIcon',
+  component: WarningDiamondIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WarningDiamondIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <WarningDiamondIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/WarningIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { WarningIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof WarningIcon> = {
+  title: 'Icons/WarningIcon',
+  component: WarningIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WarningIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <WarningIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/Icons/WarningTriangleIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { WarningTriangleIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof WarningTriangleIcon> = {
+  title: 'Icons/WarningTriangleIcon',
+  component: WarningTriangleIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WarningTriangleIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <WarningTriangleIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};

packages/frontend/src/stories/Components/InlineNotification.stories.tsx

@@ -0,0 +1,89 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { PlusIcon } from 'components/shared/CustomIcon';
+
+import { InlineNotification } from 'components/shared/InlineNotification';
+
+const inlineNotificationVariants = [
+  'info',
+  'danger',
+  'warning',
+  'success',
+  'generic',
+];
+const inlineNotificationSizes = ['md', 'sm'];
+
+const meta: Meta<typeof InlineNotification> = {
+  title: 'Components/InlineNotification',
+  component: InlineNotification,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    icon: {
+      control: 'object',
+    },
+    variant: {
+      control: 'select',
+      options: inlineNotificationVariants,
+    },
+    size: {
+      control: 'select',
+      options: inlineNotificationSizes,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InlineNotification>;
+
+export const Default: Story = {
+  render: ({ title, description, icon, variant, ...args }) => (
+    <InlineNotification
+      title={title}
+      description={description}
+      icon={icon}
+      variant={variant}
+      {...args}
+    />
+  ),
+  args: {
+    title: 'title is required',
+    variant: 'generic',
+    size: 'md',
+  },
+};
+
+export const WithDescription: Story = {
+  render: ({ title, description, icon, ...args }) => (
+    <InlineNotification
+      title={title}
+      description={description}
+      icon={icon}
+      {...args}
+    />
+  ),
+  args: {
+    ...Default.args,
+    description: 'string',
+  },
+};
+
+export const WithIcon: Story = {
+  render: ({ title, description, icon, ...args }) => (
+    <InlineNotification
+      title={title}
+      description={description}
+      icon={icon}
+      {...args}
+    />
+  ),
+  args: {
+    ...Default.args,
+    icon: <PlusIcon />,
+  },
+};

packages/frontend/src/stories/Components/Input.stories.tsx

@@ -0,0 +1,123 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Input } from 'components/shared/Input';
+import { PlusIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    helperText: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  render: ({ label, description, leftIcon, rightIcon, helperText }) => (
+    <Input
+      label={label}
+      description={description}
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      helperText={helperText}
+    />
+  ),
+};
+
+export const WithLeftIcon: Story = {
+  render: ({ label, description, leftIcon }) => (
+    <Input label={label} description={description} leftIcon={leftIcon} />
+  ),
+  args: {
+    ...Default.args,
+    leftIcon: <PlusIcon />,
+  },
+};
+
+export const WithRightIcon: Story = {
+  render: ({ label, description, rightIcon }) => (
+    <Input label={label} description={description} rightIcon={rightIcon} />
+  ),
+  args: {
+    ...Default.args,
+    rightIcon: <PlusIcon />,
+  },
+};
+
+export const WithLeftAndRightIcon: Story = {
+  render: ({ label, description, leftIcon, rightIcon }) => (
+    <Input
+      label={label}
+      description={description}
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+    />
+  ),
+  args: {
+    ...Default.args,
+    leftIcon: <PlusIcon />,
+    rightIcon: <PlusIcon />,
+  },
+};
+
+export const WithDescription: Story = {
+  render: ({ label, description }) => (
+    <Input label={label} description={description} />
+  ),
+  args: {
+    ...Default.args,
+    description: 'description',
+  },
+};
+
+export const WithHelperText: Story = {
+  render: ({ helperText }) => <Input helperText={helperText} />,
+  args: {
+    ...Default.args,
+    helperText: 'helper text',
+  },
+};
+
+export const WithLabel: Story = {
+  render: ({ label }) => <Input label={label} />,
+  args: {
+    ...Default.args,
+    label: 'label',
+  },
+};
+
+export const WithPlaceholder: Story = {
+  render: ({ placeholder }) => <Input placeholder={placeholder} />,
+  args: {
+    ...Default.args,
+    placeholder: 'placeholder',
+  },
+};
+
+export const WithValue: Story = {
+  render: ({ value }) => <Input value={value} />,
+  args: {
+    ...Default.args,
+    value: 'Value',
+  },
+};
+
+export const WithDisabled: Story = {
+  render: ({ disabled }) => <Input disabled={disabled} />,
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};

packages/frontend/src/stories/Components/Modal.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Modal } from 'components/shared/Modal';
+import { Button } from 'components/shared/Button';
+
+const meta: Meta<typeof Modal> = {
+  component: Modal,
+  title: 'Components/Modal',
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <Modal>
+        <Modal.Trigger asChild>
+          <Button>Open modal</Button>
+        </Modal.Trigger>
+        <Modal.Content>
+          <Modal.Header>Modal title</Modal.Header>
+          <Modal.Body>
+            <p>Modal content</p>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button>Close</Button>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+    );
+  },
+};

packages/frontend/src/stories/Components/OverflownText.stories.tsx

@@ -0,0 +1,33 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { OverflownText } from 'components/shared/OverflownText';
+
+const meta: Meta<typeof OverflownText> = {
+  title: 'Components/OverflownText',
+  component: OverflownText,
+  tags: ['autodocs'],
+  argTypes: {
+    content: {
+      control: 'text',
+    },
+    children: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OverflownText>;
+
+export const Default: Story = {
+  render: ({ children, content }) => (
+    <OverflownText content={content}>{children}</OverflownText>
+  ),
+  args: {
+    children:
+      'This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. ',
+    content:
+      'This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. ',
+  },
+};

packages/frontend/src/stories/Components/SegmentedControls.stories.tsx

@@ -0,0 +1,38 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { SegmentedControls } from 'components/shared/SegmentedControls';
+
+const meta: Meta<typeof SegmentedControls> = {
+  title: 'Components/SegmentedControls',
+  component: SegmentedControls,
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+      control: 'object',
+    },
+    value: {
+      control: 'text',
+    },
+    onChange: {
+      action: 'onChange',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SegmentedControls>;
+
+export const Default: Story = {
+  render: ({ options, value, onChange }) => (
+    <SegmentedControls options={options} value={value} onChange={onChange} />
+  ),
+  args: {
+    options: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' },
+    ],
+    value: '1',
+  },
+};

packages/frontend/src/stories/Components/Select.stories.tsx

@@ -0,0 +1,105 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Select } from 'components/shared/Select';
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+      control: 'object',
+    },
+    label: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    multiple: {
+      control: 'boolean',
+    },
+    searchable: {
+      control: 'boolean',
+    },
+    clearable: {
+      control: 'boolean',
+    },
+    leftIcon: {
+      control: 'text',
+    },
+    rightIcon: {
+      control: 'text',
+    },
+    helperText: {
+      control: 'text',
+    },
+    hideValues: {
+      control: 'boolean',
+    },
+    value: {
+      control: 'object',
+    },
+    onClear: {
+      action: 'clear',
+    },
+    onChange: {
+      action: 'change',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  render: ({
+    options,
+    label,
+    description,
+    multiple,
+    searchable,
+    clearable,
+    leftIcon,
+    rightIcon,
+    helperText,
+    hideValues,
+    value,
+    onClear,
+    onChange,
+  }) => (
+    <Select
+      options={options}
+      label={label}
+      description={description}
+      multiple={multiple}
+      searchable={searchable}
+      clearable={clearable}
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      helperText={helperText}
+      hideValues={hideValues}
+      value={value}
+      onClear={onClear}
+      onChange={onChange}
+    />
+  ),
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    label: 'Select',
+    description: 'Select an option',
+    multiple: false,
+    searchable: false,
+    clearable: false,
+    leftIcon: '',
+    rightIcon: '',
+    helperText: '',
+    hideValues: false,
+    value: { label: 'Option 1', value: 'option1' },
+  },
+};

packages/frontend/src/stories/Components/Steps.stories.tsx

@@ -0,0 +1,74 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Steps } from 'components/shared/Steps';
+
+const meta: Meta<typeof Steps> = {
+  title: 'Components/Steps',
+  component: Steps,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+    },
+    currentIndex: {
+      control: 'number',
+    },
+    steps: {
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Steps>;
+
+export const Default: Story = {
+  render: ({ orientation, currentIndex, steps }) => (
+    <Steps
+      currentIndex={currentIndex}
+      steps={steps}
+      orientation={orientation}
+    />
+  ),
+  args: {
+    currentIndex: 0,
+    steps: [
+      {
+        label: 'Create repository',
+      },
+      {
+        label: 'Deploy',
+      },
+      {
+        label: `What's next?`,
+      },
+    ],
+  },
+};
+
+export const Horizontal: Story = {
+  render: ({ orientation, currentIndex, steps }) => (
+    <Steps
+      currentIndex={currentIndex}
+      steps={steps}
+      orientation={orientation}
+    />
+  ),
+  args: {
+    currentIndex: 0,
+    steps: [
+      {
+        label: 'Create repository',
+      },
+      {
+        label: 'Deploy',
+      },
+      {
+        label: `What's next?`,
+      },
+    ],
+    orientation: 'horizontal',
+  },
+};

packages/frontend/src/stories/Components/Switch.stories.tsx

@@ -0,0 +1,51 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Switch } from 'components/shared/Switch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    wrapperProps: {
+      control: 'object',
+    },
+    onCheckedChange: {
+      action: 'onCheckedChange',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  render: ({ label, description, wrapperProps, onCheckedChange }) => (
+    <Switch
+      label={label}
+      description={description}
+      wrapperProps={wrapperProps}
+      checked={false}
+      onCheckedChange={onCheckedChange}
+    />
+  ),
+};
+
+export const Checked: Story = {
+  render: ({ label, description, wrapperProps, onCheckedChange }) => (
+    <Switch
+      label={label}
+      description={description}
+      wrapperProps={wrapperProps}
+      checked={true}
+      onCheckedChange={onCheckedChange}
+    />
+  ),
+};

packages/frontend/src/stories/Components/Tabs.stories.tsx

@@ -0,0 +1,85 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Tabs } from 'components/shared/Tabs';
+import { Badge } from 'components/shared/Badge';
+import { GlobeIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+const tabs = Array.from({ length: 8 });
+
+export const Default: Story = {
+  render: ({ orientation }) => (
+    <Tabs defaultValue="A" orientation={orientation}>
+      <Tabs.List>
+        {tabs.map((_, index) => (
+          <Tabs.Trigger key={index} value={index.toString()}>
+            Tab item {index}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+    </Tabs>
+  ),
+  args: {
+    orientation: 'horizontal',
+  },
+};
+
+export const WithBages: Story = {
+  render: ({ orientation }) => (
+    <Tabs defaultValue="A" orientation={orientation}>
+      <Tabs.List>
+        {tabs.map((_, index) => (
+          <Tabs.Trigger
+            key={index}
+            value={index.toString()}
+            icon={<Badge variant="tertiary">{index}</Badge>}
+          >
+            Tab item
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+    </Tabs>
+  ),
+  args: {
+    ...Default.args,
+  },
+};
+
+export const Vertical: Story = {
+  render: ({ orientation }) => (
+    <Tabs defaultValue="A" orientation={orientation}>
+      <Tabs.List>
+        {tabs.slice(0, 4).map((_, index) => (
+          <Tabs.Trigger
+            key={index}
+            icon={<GlobeIcon />}
+            value={index.toString()}
+          >
+            Tab item {index}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+    </Tabs>
+  ),
+  args: {
+    orientation: 'vertical',
+  },
+};

packages/frontend/src/stories/Components/Tag.stories.tsx

@@ -0,0 +1,77 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Tag } from 'components/shared/Tag';
+import { CheckIcon, PlusIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    leftIcon: {
+      control: 'object',
+    },
+    rightIcon: {
+      control: 'object',
+    },
+    type: {
+      control: 'select',
+      options: ['attention', 'negative', 'positive', 'emphasized', 'neutral'],
+    },
+    style: {
+      control: 'select',
+      options: ['default', 'outlined'],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  render: ({ children, leftIcon, rightIcon, type, style, size, ...arg }) => (
+    <Tag
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      style={style}
+      type={type}
+      size={size}
+      {...arg}
+    >
+      {children}
+    </Tag>
+  ),
+  args: {
+    children: 'Tag',
+    style: 'default',
+    type: 'attention',
+    size: 'sm',
+  },
+};
+
+export const WithLeftIcon: Story = {
+  render: ({ ...arg }) => <Tag {...arg} />,
+  args: {
+    ...Default.args,
+    leftIcon: <CheckIcon />,
+  },
+};
+
+export const WithRightIcon: Story = {
+  render: ({ ...arg }) => <Tag {...arg} />,
+  args: {
+    ...Default.args,
+    rightIcon: <PlusIcon />,
+  },
+};

packages/frontend/src/stories/Components/Toast.stories.tsx

@@ -0,0 +1,101 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { Toaster, useToast } from 'components/shared/Toast';
+import { Button } from 'components/shared/Button';
+
+const meta: Meta<typeof Toaster> = {
+  title: 'Components/Toaster',
+  component: Toaster,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toaster>;
+
+// trigger the toast
+const Toast = () => {
+  const { toast, dismiss } = useToast();
+
+  return (
+    <div className="flex gap-10">
+      {(['success', 'error', 'warning', 'info', 'loading'] as const).map(
+        (variant, index) => (
+          <Button
+            onClick={() =>
+              toast({
+                onDismiss: dismiss,
+                id: `${variant}_${index}`,
+                title: 'Project created',
+                variant,
+              })
+            }
+            key={`${variant}_${index}`}
+          >
+            {variant}
+          </Button>
+        ),
+      )}
+    </div>
+  );
+};
+
+// trigger the toast with cta
+const ToastWithCta = () => {
+  const { toast, dismiss } = useToast();
+
+  return (
+    <div className="flex gap-10">
+      {(['success', 'error', 'warning', 'info', 'loading'] as const).map(
+        (variant, index) => (
+          <Button
+            onClick={() =>
+              toast({
+                onDismiss: dismiss,
+                id: `${variant}_${index}`,
+                title: 'Project created',
+                cta: [
+                  {
+                    buttonLabel: 'Button',
+                    size: 'xs',
+                    variant: 'tertiary',
+                  },
+                  {
+                    buttonLabel: 'Button',
+                    size: 'xs',
+                  },
+                ],
+                variant,
+              })
+            }
+            key={`${variant}_${index}`}
+          >
+            {variant} with cta
+          </Button>
+        ),
+      )}
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: ({}) => (
+    <div className="flex gap-10">
+      <Toast />
+      <Toaster />
+    </div>
+  ),
+};
+
+export const WithCta: Story = {
+  render: ({}) => (
+    <>
+      <ToastWithCta />
+      <Toaster />
+    </>
+  ),
+};

packages/frontend/src/stories/Components/Tooltip.stories.tsx

@@ -0,0 +1,71 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { ContentProps, Tooltip } from 'components/shared/Tooltip';
+
+const alignments: ContentProps['align'][] = ['start', 'center', 'end'];
+const sides: ContentProps['side'][] = ['left', 'top', 'bottom', 'right'];
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    contentProps: {
+      control: 'object',
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  render: ({ contentProps, children }) => (
+    <Tooltip contentProps={contentProps} content="Tooltip content">
+      {children}
+    </Tooltip>
+  ),
+  args: {
+    contentProps: {
+      align: 'center',
+      side: 'top',
+    },
+    children: <button>Hover me</button>,
+  },
+};
+
+export const AllAlignments: Story = {
+  render: () => (
+    <div className="flex gap-10">
+      {alignments.map((align) => (
+        <Tooltip
+          key={align}
+          content={`Tooltip content ${align}`}
+          contentProps={{ align }}
+        >
+          <button>Hover me</button>
+        </Tooltip>
+      ))}
+    </div>
+  ),
+};
+
+export const AllSides: Story = {
+  render: () => (
+    <div className="flex gap-10">
+      {sides.map((side) => (
+        <Tooltip
+          key={side}
+          content={`Tooltip content ${side}`}
+          contentProps={{ side }}
+        >
+          <button>Hover me</button>
+        </Tooltip>
+      ))}
+    </div>
+  ),
+};

packages/frontend/src/stories/Components/WavyBorder.stories.tsx

@@ -0,0 +1,20 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { WavyBorder } from 'components/shared/WavyBorder';
+
+const meta: Meta<typeof WavyBorder> = {
+  title: 'Components/WavyBorder',
+  component: WavyBorder,
+  tags: ['autodocs'],
+  args: {
+    variant: 'stroke',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WavyBorder>;
+
+export const Default: Story = {
+  render: ({ variant }) => <WavyBorder variant={variant} />,
+};

yarn.lock

@@ -2513,18 +2513,6 @@
   dependencies:
     multiformats "^13.1.0"
 
-"@isaacs/cliui@^8.0.2":
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
-  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
-  dependencies:
-    string-width "^5.1.2"
-    string-width-cjs "npm:string-width@^4.2.0"
-    strip-ansi "^7.0.1"
-    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
-    wrap-ansi "^8.1.0"
-    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
-
 "@jest/expect-utils@^29.7.0":
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.7.0.tgz#023efe5d26a8a70f21677d0a1afc0f0a44e3a1c6"
@@ -5027,7 +5015,7 @@
     "@stablelib/random" "^1.0.2"
     "@stablelib/wipe" "^1.0.1"
 
-"@storybook/addon-actions@8.0.10":
+"@storybook/addon-actions@8.0.10", "@storybook/addon-actions@^8.0.10":
   version "8.0.10"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-8.0.10.tgz#df9fde0d234174eda5eb1c7af942da8e01924b50"
   integrity sha512-IEuc30UAFl7Ws0GwaY/whjBnGaViVEVjmPc+MXUym2wwwJbnCbI+BKJxPoYi/I7QJb5aUNToAE6pl2pDda2g3Q==
@@ -5131,7 +5119,7 @@
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@8.0.10":
+"@storybook/addon-measure@8.0.10", "@storybook/addon-measure@^8.0.10":
   version "8.0.10"
   resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-8.0.10.tgz#e59121634ee35c6fe128292456df4faaed0fed01"
   integrity sha512-quXQwmZJUhOxDIlbXTH6aKYQkwkDpL0UQRkUZn1xuZ2sVKJeaee73QSWqw8HDD4Rz9huS+OrAdVoq/Cz5FoC6A==
@@ -5144,7 +5132,7 @@
   resolved "https://registry.yarnpkg.com/@storybook/addon-onboarding/-/addon-onboarding-8.0.10.tgz#578f8b004e65882906f52157ae9ebf6e1966125d"
   integrity sha512-pcSBjOi944rg52bzaEt5jveFNTPbENna1FDUti8PK+vXgg7iAK6pIoZZiy7APU2N/YO/DxLgT276auVbPweEZg==
 
-"@storybook/addon-outline@8.0.10":
+"@storybook/addon-outline@8.0.10", "@storybook/addon-outline@^8.0.10":
   version "8.0.10"
   resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-8.0.10.tgz#d520e6ff4afea51efb056eeca88032df88c85394"
   integrity sha512-1eDO2s/vHhhSJo7W5SetqjleUBTZLI08VNP89c4j7vdRKiMZ1DYhr0dqUGIC3w7cDsawI/nQ24wancHHayAnqw==
@@ -5152,6 +5140,13 @@
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
+"@storybook/addon-themes@^8.0.10":
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-themes/-/addon-themes-8.0.10.tgz#2aa6c3475d0141c9ff2b8aedf30167314d9920c8"
+  integrity sha512-1aRpUmTjxYMZhlQVIFHYtC5oVgrKZXRB2yQlIp39LzNwZLlH+M7EgqMDiz7/BTGAHeEQV14Yj5aPVnOKgpaKnA==
+  dependencies:
+    ts-dedent "^2.0.0"
+
 "@storybook/addon-toolbars@8.0.10":
   version "8.0.10"
   resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-8.0.10.tgz#753c7d3895ad84d8589fbf7c29baaf64249688b7"
@@ -7370,11 +7365,6 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-ansi-styles@^6.1.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
-  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
-
 any-promise@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -9356,11 +9346,6 @@ duplexify@^4.1.2:
     readable-stream "^3.1.1"
     stream-shift "^1.0.2"
 
-eastasianwidth@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
-  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
-
 ecdsa-sig-formatter@1.0.11:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
@@ -9423,11 +9408,6 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emoji-regex@^9.2.2:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
-  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
-
 encode-utf8@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/encode-utf8/-/encode-utf8-1.0.3.tgz#f30fdd31da07fb596f281beb2f6b027851994cda"
@@ -11817,12 +11797,12 @@ it-to-stream@^1.0.0:
     p-fifo "^1.0.0"
     readable-stream "^3.6.0"
 
-jackspeak@^2.3.6:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
-  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+jackspeak@2.1.1, jackspeak@^2.3.6:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.1.1.tgz#2a42db4cfbb7e55433c28b6f75d8b796af9669cd"
+  integrity sha512-juf9stUEwUaILepraGOWIJTLwg48bUnBmRqd2ln2Os1sW987zeoj/hzhbvRB95oMuS2ZTpjULmdwHNX4rzZIZw==
   dependencies:
-    "@isaacs/cliui" "^8.0.2"
+    cliui "^8.0.1"
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
@@ -15808,7 +15788,7 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -15817,15 +15797,6 @@ strict-uri-encode@^2.0.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.1, string-width@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
-  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
-  dependencies:
-    eastasianwidth "^0.2.0"
-    emoji-regex "^9.2.2"
-    strip-ansi "^7.0.1"
-
 string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@@ -15845,14 +15816,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1, strip-ansi@^7.1.0:
+strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
   integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
@@ -17080,15 +17051,6 @@ workspace@^0.0.1-preview.1:
   resolved "https://registry.yarnpkg.com/workspace/-/workspace-0.0.1-preview.1.tgz#0ba0a6b92b3dbc7f1502dd12bc27a37b1eec9083"
   integrity sha512-oPpEvU7NIQ0MW7ReL+EigMUI2JPNp05kmqzWS6zXVUaSq5KxuQzfgxGd8wuurBulBkTaOnEcGge+2rriyDVHkw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
@@ -17098,14 +17060,14 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
-  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   dependencies:
-    ansi-styles "^6.1.0"
-    string-width "^5.0.1"
-    strip-ansi "^7.0.1"
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
 
 wrappy@1:
   version "1.0.2"