@brcarddev/frontend-commons 1.0.2

package/src/components/icons/help-circle.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function HelpCircle(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_help_circle)">
+        <path d="M7.57508 7.50002C7.771 6.94308 8.15771 6.47344 8.66671 6.1743C9.17571 5.87515 9.77416 5.7658 10.3561 5.86561C10.938 5.96543 11.4658 6.26796 11.846 6.71963C12.2262 7.1713 12.4343 7.74296 12.4334 8.33335C12.4334 10 9.93342 10.8334 9.93342 10.8334M10.0001 14.1667H10.0084M18.3334 10C18.3334 14.6024 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6024 1.66675 10C1.66675 5.39765 5.39771 1.66669 10.0001 1.66669C14.6025 1.66669 18.3334 5.39765 18.3334 10Z" stroke="currentColor" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
+      </g>
+      <defs>
+        <clipPath id="clip0_help_circle">
+          <rect width="20" height="20" fill="white"/>
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/components/icons/help-square.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function HelpSquare(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52152 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13M12 17H12.01M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/home-line.tsx

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+
+export function HomeLine(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      {...props}
+      width='100%'
+      height='100%'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M8 17H16M11.0177 2.764L4.23539 8.03912C3.78202 8.39175 3.55534 8.56806 3.39203 8.78886C3.24737 8.98444 3.1396 9.20478 3.07403 9.43905C3 9.70352 3 9.9907 3 10.5651V17.8C3 18.9201 3 19.4801 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4801 21 18.9201 21 17.8V10.5651C21 9.9907 21 9.70352 20.926 9.43905C20.8604 9.20478 20.7526 8.98444 20.608 8.78886C20.4447 8.56806 20.218 8.39175 19.7646 8.03913L12.9823 2.764C12.631 2.49075 12.4553 2.35412 12.2613 2.3016C12.0902 2.25526 11.9098 2.25526 11.7387 2.3016C11.5447 2.35412 11.369 2.49075 11.0177 2.764Z'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+}

package/src/components/icons/icons.stories.tsx

@@ -0,0 +1,199 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import * as Icons from './index';
+
+const meta: Meta = {
+  title: 'Components/General/Icons',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Complete icon library available in the design system.',
+      },
+    },
+  },
+  tags: [ 'autodocs' ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const getAllIcons = () => {
+  const iconEntries = Object.entries(Icons);
+  return iconEntries.map(([ name, IconComponent ]) => ({
+    name,
+    component: IconComponent,
+  }));
+};
+
+const IconGrid = ({ size = 24 }: { size?: number }) => {
+  const icons = getAllIcons();
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 p-5">
+      {icons.map(({ name, component: IconComponent }) => (
+        <div
+          key={name}
+          className="flex flex-col items-center p-4 border border-gray-200 rounded-lg bg-white transition-all duration-200 cursor-pointer min-h-[100px] hover:-translate-y-0.5 hover:shadow-lg"
+        >
+          <div
+            className="flex items-center justify-center mb-4"
+            style={{ width: `${size}px`, height: `${size}px` }}
+          >
+            <IconComponent className="w-full h-full" />
+          </div>
+          <div className="text-center leading-tight">
+            <span className="font-semibold text-xs text-gray-500">{name}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const AllIcons: Story = {
+  render: () => <IconGrid />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Displays all available icons in the library with their names.',
+      },
+    },
+  },
+};
+
+export const ColoredIconsDemo: Story = {
+  render: () => <ColoredIcons />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstration of how icons can be customized with different colors using the `color` property.',
+      },
+    },
+  },
+};
+
+const IndividualIconsDemo = () => {
+  const icons = getAllIcons().slice(0, 6);
+
+  return (
+    <div className="p-5">
+      <h3 className="mb-5 text-gray-800 text-lg font-semibold">
+        How to use individual icons:
+      </h3>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        {icons.map(({ name, component: IconComponent }) => (
+          <div
+            key={name}
+            className="p-5 border border-gray-200 rounded-lg bg-gray-50"
+          >
+            <div className="flex items-center gap-3 mb-3">
+              <IconComponent className="w-6 h-6" />
+              <span className="font-semibold text-gray-800">{name}</span>
+            </div>
+            <div className="text-sm text-gray-500 font-mono bg-white p-2 rounded border border-gray-200">
+              {`import { ${name} } from '@/components/icons';`}
+            </div>
+            <div className="text-sm text-gray-500 font-mono bg-white p-2 rounded border border-gray-200 mt-2">
+              {`<${name} className="w-6 h-6" />`}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const ExtraLargeIcons: Story = {
+  render: () => <IconGrid size={64} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Displays icons in extra large size (64px).',
+      },
+    },
+  },
+};
+
+export const IndividualIconsUsage: Story = {
+  render: () => <IndividualIconsDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Examples of how to import and use individual icons in your components.',
+      },
+    },
+  },
+};
+
+export const LargeIcons: Story = {
+  render: () => <IconGrid size={48} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Displays icons in large size (48px).',
+      },
+    },
+  },
+};
+
+const ColoredIcons = () => {
+  const icons = getAllIcons().slice(0, 12);
+  const colors = [
+    'var(--colors-blue-500)',
+    'var(--color-brand-500)',
+    'var(--colors-green-500)',
+    'var(--colors-orange-500)',
+    'var(--colors-violet-500)',
+    'var(--colors-pink-500)',
+    'var(--colors-cyan-500)',
+    'var(--colors-teal-500)',
+    'var(--colors-indigo-500)',
+    'var(--colors-purple-500)',
+    'var(--colors-fuchsia-500)',
+    'var(--colors-rosé-500)',
+  ];
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 p-5">
+      {icons.map(({ name, component: IconComponent }, index) => (
+        <div
+          key={name}
+          className="flex flex-col items-center p-4 border border-gray-200 rounded-lg bg-white"
+        >
+          <div className="w-8 h-8 flex items-center justify-center mb-2">
+            <IconComponent
+              className="w-full h-full"
+              style={{ color: colors[index % colors.length] }}
+            />
+          </div>
+          <div className="text-center text-xs text-gray-500 font-semibold">
+            {name}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const MediumIcons: Story = {
+  render: () => <IconGrid size={32} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Displays icons in medium size (32px).',
+      },
+    },
+  },
+};
+
+export const SmallIcons: Story = {
+  render: () => <IconGrid size={16} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Displays icons in small size (16px).',
+      },
+    },
+  },
+};

package/src/components/icons/index.ts

@@ -0,0 +1,140 @@
+export * from './alert-circle';
+export * from './align-center';
+export * from './align-left';
+export * from './annotation';
+export * from './annotation-dots';
+export * from './annotation-question';
+export * from './announcement-01';
+export * from './announcement-02';
+export * from './apple-logo';
+export * from './arrow-circle-broken-right';
+export * from './arrow-down';
+export * from './arrow-up';
+export * from './at-sign';
+export * from './award-01';
+export * from './award-03';
+export * from './bank-note-01';
+export * from './bar-chart-square-02';
+export * from './bell-01';
+export * from './bell-04';
+export * from './bold-01';
+export * from './book-open-01';
+export * from './brackets-ellipses';
+export * from './briefcase-01';
+export * from './brush-01';
+export * from './building-02';
+export * from './building-06';
+export * from './calendar';
+export * from './calendar-minus-02';
+export * from './certificate-01';
+export * from './chart-breakout-square';
+export * from './check';
+export * from './check-circle';
+export * from './check-circle-02';
+export * from './chevron-down';
+export * from './chevron-down-double';
+export * from './chevron-left';
+export * from './chevron-left-double';
+export * from './chevron-right';
+export * from './chevron-right-double';
+export * from './chevron-up-double';
+export * from './clock-rewind';
+export * from './clock-stopwatch';
+export * from './coins-hand';
+export * from './coins-stacked-01';
+export * from './coins-stacked-02';
+export * from './container';
+export * from './copy-02';
+export * from './copy-04';
+export * from './corner-down-right';
+export * from './countries';
+export * from './dataflow-03';
+export * from './dotpoints-01';
+export * from './dots-vertical';
+export * from './download-03';
+export * from './download-cloud-02';
+export * from './drag';
+export * from './dropper';
+export * from './edit-01';
+export * from './edit-02';
+export * from './edit-03';
+export * from './eye';
+export * from './face-frown';
+export * from './face-happy';
+export * from './file-06';
+export * from './file-attachment-04';
+export * from './file-download-02';
+export * from './file-plus-02';
+export * from './file-search-01';
+export * from './file-search-03';
+export * from './filter-lines';
+export * from './first-category';
+export * from './first-stage';
+export * from './folder';
+export * from './google';
+export * from './graduation-hat-02';
+export * from './grid-01';
+export * from './help-circle';
+export * from './help-square';
+export * from './home-line';
+export * from './info-circle';
+export * from './italic-01';
+export * from './last-category';
+export * from './last-stage';
+export * from './layout-alt-04';
+export * from './lightbulb-02';
+export * from './link-01';
+export * from './link-broken-01';
+export * from './linkedin-logo';
+export * from './lock-01';
+export * from './log-out-01';
+export * from './mail-01';
+export * from './marker-pin-02';
+export * from './menu-01';
+export * from './middle-category';
+export * from './middle-stage';
+export * from './ms-outlook';
+export * from './paragraph-spacing';
+export * from './phone-01';
+export * from './pie-chart-02';
+export * from './plus-circle';
+export * from './portal-logo';
+export * from './presentation-chart-02';
+export * from './route';
+export * from './save-01';
+export * from './search-lg';
+export * from './search-sm';
+export * from './send-03';
+export * from './settings-01';
+export * from './settings-03';
+export * from './share-05';
+export * from './share-06';
+export * from './slash-circle-01';
+export * from './star-01';
+export * from './step-icon-active';
+export * from './step-icon-checked';
+export * from './step-icon-default';
+export * from './switch-horizontal-01';
+export * from './table-01';
+export * from './tag-01';
+export * from './tag-03';
+export * from './tool-02';
+export * from './trash-01';
+export * from './underline-01';
+export * from './upload-cloud-02';
+export * from './user-01';
+export * from './user-03';
+export * from './user-check-01';
+export * from './user-circle';
+export * from './user-edit';
+export * from './user-minus-02';
+export * from './user-plus-01';
+export * from './user-plus-02';
+export * from './user-square';
+export * from './users-01';
+export * from './users-plus';
+export * from './vertical-drag';
+export * from './x-circle';
+export * from './x-close';
+export * from './zap';
+export * from './zap-fast';

package/src/components/icons/info-circle.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export function InfoCircle(props: ComponentProps<'svg'>) {
+  return (
+    <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/italic-01.tsx

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export function Italic01(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M19 4H10M14 20H5M15 4L9 20"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icons/last-category.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+
+export function LastCategory(props: ComponentProps<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" {...props}>
+      <path opacity="0.5" d="M4 11V6L12 8L20 6V11L12 13L4 11Z" fill="currentColor"/>
+      <path opacity="0.5" d="M4 4V6L12 8L20 6V4L12 2L4 4Z" fill="currentColor"/>
+      <path d="M20 5C20 6.65685 16.4183 8 12 8C7.58172 8 4 6.65685 4 5M20 5C20 3.34315 16.4183 2 12 2C7.58172 2 4 3.34315 4 5M20 5V19C20 20.6569 16.4183 22 12 22C7.58172 22 4 20.6569 4 19V5M20 9.6666C20 11.3235 16.4183 12.6666 12 12.6666C7.58172 12.6666 4 11.3235 4 9.6666M20 14.33C20 15.9869 16.4183 17.33 12 17.33C7.58172 17.33 4 15.9869 4 14.33" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/last-stage.tsx

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+
+export function LastStage(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path opacity="0.5" d="M3 20V15H13V20H3Z" fill="currentColor"/>
+      <path d="M13 15V18C13 19.1046 12.1046 20 11 20H5C3.89543 20 3 19.1046 3 18V15H13Z" stroke="currentColor" strokeWidth="2"/>
+      <path d="M17 10V13C17 14.1046 16.1046 15 15 15H3V10H17Z" stroke="currentColor" strokeWidth="2"/>
+      <path d="M5 4H19C20.1046 4 21 4.89543 21 6V8C21 9.10457 20.1046 10 19 10H3V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" strokeWidth="2"/>
+    </svg>
+  );
+}

package/src/components/icons/layout-alt-04.tsx

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+
+export function LayoutAlt04(props: ComponentProps<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" {...props}>
+      <path d="M9 9L16.5 9M9 1.5L9 16.5M5.5 1.5H12.5C13.9001 1.5 14.6002 1.5 15.135 1.77248C15.6054 2.01217 15.9878 2.39462 16.2275 2.86502C16.5 3.3998 16.5 4.09987 16.5 5.5V12.5C16.5 13.9001 16.5 14.6002 16.2275 15.135C15.9878 15.6054 15.6054 15.9878 15.135 16.2275C14.6002 16.5 13.9001 16.5 12.5 16.5H5.5C4.09987 16.5 3.3998 16.5 2.86502 16.2275C2.39462 15.9878 2.01217 15.6054 1.77248 15.135C1.5 14.6002 1.5 13.9001 1.5 12.5V5.5C1.5 4.09987 1.5 3.3998 1.77248 2.86502C2.01217 2.39462 2.39462 2.01217 2.86502 1.77248C3.3998 1.5 4.09987 1.5 5.5 1.5Z" stroke="currentColor" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/lightbulb-02.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function Lightbulb02(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M10 17.6586V20C10 21.1046 10.8954 22 12 22C13.1046 22 14 21.1046 14 20V17.6586M12 2V3M3 12H2M5.5 5.5L4.8999 4.8999M18.5 5.5L19.1002 4.8999M22 12H21M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/link-01.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function Link01(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12.7076 18.3639L11.2933 19.7781C9.34072 21.7308 6.1749 21.7308 4.22228 19.7781C2.26966 17.8255 2.26966 14.6597 4.22228 12.7071L5.63649 11.2929M18.3644 12.7071L19.7786 11.2929C21.7312 9.34024 21.7312 6.17441 19.7786 4.22179C17.826 2.26917 14.6602 2.26917 12.7076 4.22179L11.2933 5.636M8.50045 15.4999L15.5005 8.49994" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/link-broken-01.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function LinkBroken01(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M9 4V2M15 20V22M4 9H2M20 15H22M4.91421 4.91421L3.5 3.5M19.0858 19.0858L20.5 20.5M12 17.6569L9.87868 19.7782C8.31658 21.3403 5.78392 21.3403 4.22183 19.7782C2.65973 18.2161 2.65973 15.6834 4.22183 14.1213L6.34315 12M17.6569 12L19.7782 9.87868C21.3403 8.31658 21.3403 5.78392 19.7782 4.22183C18.2161 2.65973 15.6834 2.65973 14.1213 4.22183L12 6.34315" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/linkedin-logo.tsx

@@ -0,0 +1,17 @@
+import { ComponentProps } from 'react';
+
+export function LinkedinLogo(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_2205_399)">
+        <path d="M22.2234 0H1.77187C0.792187 0 0 0.773438 0 1.72969V22.2656C0 23.2219 0.792187 24 1.77187 24H22.2234C23.2031 24 24 23.2219 24 22.2703V1.72969C24 0.773438 23.2031 0 22.2234 0ZM7.12031 20.4516H3.55781V8.99531H7.12031V20.4516ZM5.33906 7.43438C4.19531 7.43438 3.27188 6.51094 3.27188 5.37187C3.27188 4.23281 4.19531 3.30937 5.33906 3.30937C6.47813 3.30937 7.40156 4.23281 7.40156 5.37187C7.40156 6.50625 6.47813 7.43438 5.33906 7.43438ZM20.4516 20.4516H16.8937V14.8828C16.8937 13.5562 16.8703 11.8453 15.0422 11.8453C13.1906 11.8453 12.9094 13.2937 12.9094 14.7891V20.4516H9.35625V8.99531H12.7687V10.5609H12.8156C13.2891 9.66094 14.4516 8.70938 16.1813 8.70938C19.7859 8.70938 20.4516 11.0813 20.4516 14.1656V20.4516Z" fill="currentColor"/>
+      </g>
+      <defs>
+        <clipPath id="clip0_2205_399">
+          <rect width="24" height="24" fill="white"/>
+        </clipPath>
+      </defs>
+    </svg>
+
+  );
+}

package/src/components/icons/lock-01.tsx

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+
+export function Lock01(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      {...props}
+      width='100%'
+      height='100%'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M17 10V8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8V10M12 14.5V16.5M8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C17.7202 10 16.8802 10 15.2 10H8.8C7.11984 10 6.27976 10 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21Z'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+}

package/src/components/icons/log-out-01.tsx

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+
+export function LogOut01(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="100%" height="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6M6 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.7157 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.0799 14 5.2 14H6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/mail-01.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function Mail01(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M2 7L10.1649 12.7154C10.8261 13.1783 11.1567 13.4097 11.5163 13.4993C11.8339 13.5785 12.1661 13.5785 12.4837 13.4993C12.8433 13.4097 13.1739 13.1783 13.8351 12.7154L22 7M6.8 20H17.2C18.8802 20 19.7202 20 20.362 19.673C20.9265 19.3854 21.3854 18.9265 21.673 18.362C22 17.7202 22 16.8802 22 15.2V8.8C22 7.11984 22 6.27976 21.673 5.63803C21.3854 5.07354 20.9265 4.6146 20.362 4.32698C19.7202 4 18.8802 4 17.2 4H6.8C5.11984 4 4.27976 4 3.63803 4.32698C3.07354 4.6146 2.6146 5.07354 2.32698 5.63803C2 6.27976 2 7.11984 2 8.8V15.2C2 16.8802 2 17.7202 2.32698 18.362C2.6146 18.9265 3.07354 19.3854 3.63803 19.673C4.27976 20 5.11984 20 6.8 20Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/marker-pin-02.tsx

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+
+export function MarkerPin02(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 12.5C13.6569 12.5 15 11.1569 15 9.5C15 7.84315 13.6569 6.5 12 6.5C10.3431 6.5 9 7.84315 9 9.5C9 11.1569 10.3431 12.5 12 12.5Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M12 22C14 18 20 15.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 15.4183 10 18 12 22Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/menu-01.tsx

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+
+export function Menu01(props: ComponentProps<'svg'>) {
+  return (
+    <svg {...props} width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.5 10H17.5M2.5 5H17.5M2.5 15H17.5" stroke="currentColor" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/middle-category.tsx

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+
+export function MiddleCategory(props: ComponentProps<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" {...props}>
+      <path opacity="0.5" d="M4.5 16V11L12.5 13L20.5 11V16L12.5 18L4.5 16Z" fill="currentColor"/>
+      <path d="M20.5 5C20.5 6.65685 16.9183 8 12.5 8C8.08172 8 4.5 6.65685 4.5 5M20.5 5C20.5 3.34315 16.9183 2 12.5 2C8.08172 2 4.5 3.34315 4.5 5M20.5 5V19C20.5 20.6569 16.9183 22 12.5 22C8.08172 22 4.5 20.6569 4.5 19V5M20.5 9.6666C20.5 11.3235 16.9183 12.6666 12.5 12.6666C8.08172 12.6666 4.5 11.3235 4.5 9.6666M20.5 14.33C20.5 15.9869 16.9183 17.33 12.5 17.33C8.08172 17.33 4.5 15.9869 4.5 14.33" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}

package/src/components/icons/middle-stage.tsx

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+
+export function MiddleStage(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path opacity="0.5" d="M3 15V10H17V15H3Z" fill="currentColor"/>
+      <path d="M13 15V18C13 19.1046 12.1046 20 11 20H5C3.89543 20 3 19.1046 3 18V15H13Z" stroke="currentColor" strokeWidth="2"/>
+      <path d="M17 10V13C17 14.1046 16.1046 15 15 15H3V10H17Z" stroke="currentColor" strokeWidth="2"/>
+      <path d="M5 4H19C20.1046 4 21 4.89543 21 6V8C21 9.10457 20.1046 10 19 10H3V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" strokeWidth="2"/>
+    </svg>
+  );
+}