feat use library icons in stories

.ladle/Icons.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { Icon, IconProps } from '../src/assets/Icons';
+
+type Props = Omit<IconProps, 'id'>;
+
+export const Minus = (props: Props) => <Icon id="minus" {...props} />;
+export const Plus = (props: Props) => <Icon id="plus" {...props} />;

src/Inputs/inputs-controlled.stories.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
-import { Minus, Plus } from 'react-feather';
 import { Section } from 'utils';
 
+import { Minus, Plus } from '../../.ladle/Icons';
 import { Button } from '../Button';
 import { TextInput } from './TextInput';
 

src/Inputs/number-input-controlled.stories.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
-import { Minus, Plus } from 'react-feather';
 import { Section } from 'utils';
 
+import { Minus, Plus } from '../../.ladle/Icons';
 import { Button } from '../Button';
 import { NumberInput } from './NumberInput';
 

src/Modal/modal.stories.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
-import { X } from 'react-feather';
 
+import { Icon } from '../assets/Icons';
 import { Button } from '../Button';
 import { Modal, type ModalRef } from './index';
 
@@ -41,7 +41,7 @@ export const ModalStory = () => {
             </li>
             <li>Clicking outside of the modal,</li>
             <li>
-              Clicking the <X /> Button at the top-right of the modal,
+              Clicking the <Icon id="x" /> Button at the top-right of the modal,
             </li>
             <li>Clicking either button below.</li>
           </ol>

src/assets/Icons.tsx

@@ -2,7 +2,7 @@ import { type SVGProps } from 'react';
 
 const icons = ['minus', 'plus', 'check', 'chevron-down', 'x'] as const;
 
-interface IconProps extends SVGProps<SVGSVGElement> {
+export interface IconProps extends SVGProps<SVGSVGElement> {
   id: (typeof icons)[number];
 }