@integrigo/integrigo-ui 1.6.7-c → 1.6.10-a

package/src/components/atoms/Field/FieldWrapper.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { fieldSizeVariants } from './fieldSizeVariants';
+
+export const FieldWrapper = styled.div<{
+  withLabel: boolean;
+  sizeVariant: 'xl' | 'l' | 'm' | 's';
+}>`
+  position: relative;
+  width: 100%;
+  padding-top: ${(p) =>
+    p.withLabel ? `calc(${fieldSizeVariants[p.sizeVariant].font} + 8px)` : 0};
+`;
+
+FieldWrapper.displayName = 'InputWrapper';

package/src/components/atoms/Field/fieldSizeVariants.tsx

@@ -0,0 +1,22 @@
+export const fieldSizeVariants = {
+  xl: {
+    iconPadding: '48px',
+    padding: '16px',
+    font: '20px',
+  },
+  l: {
+    iconPadding: '40px',
+    padding: '12px',
+    font: '16px',
+  },
+  m: {
+    iconPadding: '28px',
+    padding: '8px',
+    font: '12px',
+  },
+  s: {
+    iconPadding: '16px',
+    padding: '6px',
+    font: '8px',
+  },
+};

package/src/components/atoms/Field/index.ts

@@ -0,0 +1,3 @@
+export { FieldLabel } from './FieldLabel';
+export { FieldWrapper } from './FieldWrapper';
+export { fieldSizeVariants } from './fieldSizeVariants';

package/src/components/atoms/Icon/Icon.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Icon, iconHashMap } from './Icon';
+
+export default {
+  title: 'Atoms/Icon',
+  component: Icon,
+} as ComponentMeta<typeof Icon>;
+
+const Template: ComponentStory<typeof Icon> = (args) => <Icon {...args} />;
+
+export const SimpleIcon = Template.bind({});
+SimpleIcon.args = { type: 'user-circle' };
+
+export const AllIcons = () => (
+  <div
+    style={{
+      display: 'flex',
+    }}
+  >
+    {Object.keys(iconHashMap).map((type) => (
+      <div
+        key={type}
+        style={{
+          padding: '12px',
+          borderRight: '1px solid black',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '8px',
+        }}
+      >
+        <Icon type={type as keyof typeof iconHashMap} />
+        <span>{type}</span>
+      </div>
+    ))}
+  </div>
+);

package/src/components/atoms/Icon/Icon.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { Color } from "../../../styles";
+
+import AngleDown from "./icons/AngleDown";
+import ArrowLeft from "./icons/ArrowLeft";
+import Bars from "./icons/Bars";
+import Bell from "./icons/Bell";
+import CheckCircle from "./icons/CheckCircle";
+import CheckSquare from "./icons/ChechSquare";
+import ClipboardNotes from "./icons/ClipboardNotes";
+import Close from "./icons/Close";
+import DiceFive from "./icons/DiceFive";
+import Edit from "./icons/Edit";
+import Envelope from "./icons/Envelope";
+import ExclamationCircle from "./icons/ExclamationCircle";
+import ExclamationTriangle from "./icons/ExclamationTriangle";
+import Exit from "./icons/Exit";
+import Facebook from "./icons/Facebook";
+import Home from "./icons/Home";
+import ImageEdit from "./icons/ImageEdit";
+import Instagram from "./icons/Instagram";
+import Linkedin from "./icons/Linkedin";
+import Lock from "./icons/Lock";
+import Minus from "./icons/Minus";
+import Phone from "./icons/Phone";
+import Plus from "./icons/Plus";
+import PointsCircle from "./icons/PointsCircle";
+import Process from "./icons/Process";
+import Redo from "./icons/Redo";
+import Setting from "./icons/Setting";
+import UserCircle from "./icons/UserCircle";
+import Users from "./icons/Users";
+
+export const iconHashMap = {
+  "angle-down": AngleDown,
+  "arrow-left": ArrowLeft,
+  bars: Bars,
+  bell: Bell,
+  "check-circle": CheckCircle,
+  "check-square": CheckSquare,
+  "clipboad-notes": ClipboardNotes,
+  close: Close,
+  "dice-five": DiceFive,
+  edit: Edit,
+  envelope: Envelope,
+  "exclamation-circle": ExclamationCircle,
+  "exclamation-triangle": ExclamationTriangle,
+  exit: Exit,
+  facebook: Facebook,
+  home: Home,
+  "image-edit": ImageEdit,
+  instagram: Instagram,
+  linkedin: Linkedin,
+  lock: Lock,
+  minus: Minus,
+  phone: Phone,
+  plus: Plus,
+  process: Process,
+  "points-circle": PointsCircle,
+  redo: Redo,
+  setting: Setting,
+  "user-circle": UserCircle,
+  users: Users,
+};
+
+export type IconType = keyof typeof iconHashMap;
+
+type IconProps = React.SVGProps<SVGSVGElement> & {
+  type: IconType;
+  size?:
+    | "ultra-small"
+    | "small"
+    | "medium"
+    | "big"
+    | { width: number; height: number };
+};
+
+const sizeHashMap = {
+  "ultra-small": {
+    width: 20,
+    height: 20,
+  },
+  small: {
+    width: 34,
+    height: 34,
+  },
+  medium: {
+    width: 58,
+    height: 58,
+  },
+  big: {
+    width: 84,
+    height: 84,
+  },
+};
+
+export const Icon: React.FCS<IconProps> = ({
+  className,
+  type,
+  size = "ultra-small",
+  ...props
+}) => {
+  const Component = iconHashMap[type];
+  const sizes = typeof size === "string" ? sizeHashMap[size] : size;
+
+  return (
+    <Component className={className} fill={Color.Navy} {...sizes} {...props} />
+  );
+};

package/src/components/atoms/Icon/IconAddition.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Color } from '../../../styles';
+import { Icon, IconType } from './Icon';
+
+interface IconAdditionProps {
+  disabled?: boolean;
+  icon?: IconType;
+  direction?: 'rtl' | 'ltr';
+  colorVariant?: 'grey' | 'white' | 'ghost';
+  size?: 'xl' | 'l' | 'm' | 's';
+  onClick?: () => void;
+}
+
+const sizeVariant = {
+  xl: {
+    size: 24,
+    offset: 16,
+  },
+  l: {
+    size: 20,
+    offset: 12,
+  },
+  m: {
+    size: 16,
+    offset: 8,
+  },
+  s: {
+    size: 10,
+    offset: 6,
+  },
+};
+
+export const IconAddition: React.FC<IconAdditionProps> = ({
+  disabled,
+  icon,
+  direction = 'ltr',
+  colorVariant = 'grey',
+  size = 'm',
+  onClick,
+}) => {
+  const clickable = !!onClick;
+
+  const iconColors = {
+    white: disabled ? Color.Grey60 : Color.White,
+    grey: disabled ? Color.Grey60 : Color.Grey100,
+    ghost: disabled ? Color.Grey40 : Color.Grey100,
+  };
+
+  if (!icon) {
+    return null;
+  }
+
+  return (
+    <IconWrapper
+      direction={direction}
+      clickable={clickable && !disabled}
+      size={size}
+      narrow={colorVariant === 'ghost'}
+    >
+      <Icon
+        type={icon}
+        size={{ width: sizeVariant[size].size, height: sizeVariant[size].size }}
+        fill={iconColors[colorVariant]}
+        onClick={onClick}
+      />
+    </IconWrapper>
+  );
+};
+
+const IconWrapper = styled.div<{
+  clickable?: boolean;
+  direction?: 'rtl' | 'ltr';
+  narrow: boolean;
+  size: 'xl' | 'l' | 'm' | 's';
+}>`
+  position: absolute;
+  z-index: 2;
+  bottom: calc(${(p) => sizeVariant[p.size].offset}px);
+  height: ${(p) => sizeVariant[p.size].size}px;
+  width: ${(p) => sizeVariant[p.size].size}px;
+  cursor: ${(p) => (p.clickable ? 'pointer' : 'auto')};
+  ${(p) =>
+    p.direction === 'ltr'
+      ? `left: ${p.narrow ? 0 : sizeVariant[p.size].offset}px`
+      : `right: ${p.narrow ? 0 : sizeVariant[p.size].offset}px`};
+
+  & svg {
+    transition: fill var(--transition-speed);
+    position: absolute;
+  }
+`;
+
+IconWrapper.displayName = 'IconWrapper';

package/src/components/atoms/Icon/icons/AngleDown.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const AngleDown: React.FCS = (props) => (
+  <svg viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11 1.17a1 1 0 0 0-1.41 0L6 4.71 2.46 1.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1 1 0 0 0 1.42 0L11 2.59a.998.998 0 0 0 0-1.42Z" />
+  </svg>
+);
+
+export default AngleDown;

package/src/components/atoms/Icon/icons/ArrowLeft.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ArrowLeft: React.FCS = (props) => (
+  <svg viewBox="0 0 12 14" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11 6H3.41l3.3-3.29a1.004 1.004 0 0 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1 1 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L3.41 8H11a1 1 0 1 0 0-2Z" />
+  </svg>
+);
+
+export default ArrowLeft;

package/src/components/atoms/Icon/icons/Bars.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Bars: React.FCS = (props) => (
+  <svg viewBox="0 0 20 12" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M1 2h18a1 1 0 1 0 0-2H1a1 1 0 0 0 0 2Zm18 8H1a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H1a1 1 0 0 0 0 2h18a1 1 0 1 0 0-2Z" />
+  </svg>
+);
+
+export default Bars;

package/src/components/atoms/Icon/icons/Bell.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Bell: React.FCS = (props) => (
+  <svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M14 11.18V8a6 6 0 0 0-5-5.91V1a1 1 0 0 0-2 0v1.09A6 6 0 0 0 2 8v3.18A3 3 0 0 0 0 14v2a1 1 0 0 0 1 1h3.14a4 4 0 0 0 7.72 0H15a1 1 0 0 0 1-1v-2a3 3 0 0 0-2-2.82ZM4 8a4 4 0 0 1 8 0v3H4V8Zm4 10a2 2 0 0 1-1.72-1h3.44A2 2 0 0 1 8 18Zm6-3H2v-1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1Z" />
+  </svg>
+);
+
+export default Bell;

package/src/components/atoms/Icon/icons/ChechSquare.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CheckSquare: React.FCS = (props) => (
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8.21 12.75a1 1 0 0 0 1.42 0l4.08-4.08a1.004 1.004 0 1 0-1.42-1.42l-3.37 3.38-1.21-1.22a1.004 1.004 0 0 0-1.42 1.42l1.92 1.92ZM19 0H1a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1Zm-1 18H2V2h16v16Z" />
+  </svg>
+);
+
+export default CheckSquare;

package/src/components/atoms/Icon/icons/CheckCircle.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CheckCircle: React.FCS = (props) => (
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="m12.72 6.79-4.29 4.3-1.65-1.65a1 1 0 1 0-1.41 1.41l2.35 2.36a1 1 0 0 0 1.41 0l5-5a1 1 0 1 0-1.41-1.42ZM10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z" />
+  </svg>
+);
+
+export default CheckCircle;

package/src/components/atoms/Icon/icons/ClipboardNotes.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ClipboardNotes: React.FCS = (props) => (
+  <svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M9 12H5a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2Zm4-10h-1.18A3 3 0 0 0 9 0H7a3 3 0 0 0-2.82 2H3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3ZM6 3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1H6V3Zm8 14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h1v1a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4h1a1 1 0 0 1 1 1v12Zm-3-9H5a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2Z" />
+  </svg>
+);
+
+export default ClipboardNotes;

package/src/components/atoms/Icon/icons/Close.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Close: React.FCS = (props) => (
+  <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="m8.41 7 4.3-4.29a1.004 1.004 0 1 0-1.42-1.42L7 5.59l-4.29-4.3a1.004 1.004 0 0 0-1.42 1.42L5.59 7l-4.3 4.29a1 1 0 0 0 0 1.42.998.998 0 0 0 1.42 0L7 8.41l4.29 4.3a.998.998 0 0 0 1.42 0 .997.997 0 0 0 .219-1.095.998.998 0 0 0-.22-.325L8.41 7Z" />
+  </svg>
+);
+
+export default Close;

package/src/components/atoms/Icon/icons/DiceFive.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const DiceFive: React.FCS = (props) => (
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15 0H5a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10ZM6 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm4-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm8 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-8a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z" />
+  </svg>
+);
+
+export default DiceFive;

package/src/components/atoms/Icon/icons/Edit.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Edit: React.FCS = (props) => (
+  <svg viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3 17h4.24a.999.999 0 0 0 .71-.29l6.92-6.93L17.71 7a1.001 1.001 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0L9.23 4.12l-6.94 6.93a1.001 1.001 0 0 0-.29.71V16a1 1 0 0 0 1 1Zm9.76-13.59 2.83 2.83-1.42 1.42-2.83-2.83 1.42-1.42ZM4 12.17l5.93-5.93 2.83 2.83L6.83 15H4v-2.83ZM19 19H1a1 1 0 0 0 0 2h18a1 1 0 1 0 0-2Z" />
+  </svg>
+);
+
+export default Edit;

package/src/components/atoms/Icon/icons/Envelope.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Envelope: React.FCS = (props) => (
+  <svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M17 0H3a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3Zm-.41 2-5.88 5.88a1 1 0 0 1-1.42 0L3.41 2h13.18ZM18 13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.41l5.88 5.88a3 3 0 0 0 4.24 0L18 3.41V13Z" />
+  </svg>
+);
+
+export default Envelope;

package/src/components/atoms/Icon/icons/ExclamationCircle.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ExclamationCircle: React.FCS = (props) => (
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M10 5a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Zm.92 8.62a.758.758 0 0 0-.09-.18l-.12-.15a.999.999 0 0 0-1.09-.21 1.15 1.15 0 0 0-.33.21 1 1 0 0 0-.21 1.09.9.9 0 0 0 .54.54.94.94 0 0 0 .76 0 .9.9 0 0 0 .54-.54c.051-.12.078-.25.08-.38a1.362 1.362 0 0 0 0-.2.639.639 0 0 0-.08-.18ZM10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z" />
+  </svg>
+);
+
+export default ExclamationCircle;

package/src/components/atoms/Icon/icons/ExclamationTriangle.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ExclamationTriangle: React.FCS = (props) => (
+  <svg viewBox="0 0 24 21" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M12 15C11.8022 15 11.6088 15.0587 11.4444 15.1686C11.2799 15.2784 11.1518 15.4346 11.0761 15.6173C11.0004 15.8001 10.9806 16.0011 11.0192 16.1951C11.0578 16.3891 11.153 16.5673 11.2929 16.7071C11.4327 16.847 11.6109 16.9422 11.8049 16.9808C11.9989 17.0194 12.1999 16.9996 12.3827 16.9239C12.5654 16.8482 12.7216 16.72 12.8314 16.5556C12.9413 16.3911 13 16.1978 13 16C13 15.7348 12.8946 15.4805 12.7071 15.2929C12.5195 15.1054 12.2652 15 12 15ZM22.67 16.47L14.62 2.47003C14.3598 2.00354 13.9798 1.61498 13.5192 1.3445C13.0586 1.07401 12.5341 0.931396 12 0.931396C11.4658 0.931396 10.9414 1.07401 10.4808 1.3445C10.0202 1.61498 9.64016 2.00354 9.37997 2.47003L1.37997 16.47C1.11076 16.924 0.96611 17.441 0.960612 17.9688C0.955114 18.4966 1.08897 19.0166 1.34865 19.4761C1.60834 19.9356 1.98467 20.3185 2.43965 20.5861C2.89463 20.8536 3.41215 20.9964 3.93997 21H20.06C20.592 21.0053 21.1159 20.8689 21.5779 20.6049C22.0399 20.341 22.4233 19.9589 22.6889 19.4978C22.9546 19.0368 23.0928 18.5134 23.0895 17.9814C23.0861 17.4493 22.9414 16.9277 22.67 16.47ZM20.94 18.47C20.8523 18.626 20.7244 18.7556 20.5697 18.8453C20.4149 18.935 20.2389 18.9815 20.06 18.98H3.93997C3.76108 18.9815 3.58507 18.935 3.43029 18.8453C3.2755 18.7556 3.14762 18.626 3.05997 18.47C2.9722 18.318 2.92599 18.1456 2.92599 17.97C2.92599 17.7945 2.9722 17.622 3.05997 17.47L11.06 3.47003C11.1439 3.30623 11.2714 3.16876 11.4284 3.07277C11.5854 2.97678 11.7659 2.92599 11.95 2.92599C12.134 2.92599 12.3145 2.97678 12.4715 3.07277C12.6286 3.16876 12.7561 3.30623 12.84 3.47003L20.89 17.47C20.9892 17.6199 21.0462 17.7937 21.055 17.9732C21.0638 18.1527 21.0241 18.3312 20.94 18.49V18.47ZM12 7.00003C11.7348 7.00003 11.4804 7.10538 11.2929 7.29292C11.1053 7.48046 11 7.73481 11 8.00003V12C11 12.2652 11.1053 12.5196 11.2929 12.7071C11.4804 12.8947 11.7348 13 12 13C12.2652 13 12.5195 12.8947 12.7071 12.7071C12.8946 12.5196 13 12.2652 13 12V8.00003C13 7.73481 12.8946 7.48046 12.7071 7.29292C12.5195 7.10538 12.2652 7.00003 12 7.00003Z" />
+  </svg>
+);
+
+export default ExclamationTriangle;

package/src/components/atoms/Icon/icons/Exit.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Exit: React.FCS = (props) => (
+  <svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M0 10a1 1 0 0 0 1 1h7.59l-2.3 2.29a1 1 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l4-4a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76 1 1 0 0 0-.21-.33l-4-4a1.004 1.004 0 1 0-1.42 1.42L8.59 9H1a1 1 0 0 0-1 1ZM13 0H3a3 3 0 0 0-3 3v3a1 1 0 0 0 2 0V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 1 0-2 0v3a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3Z" />
+  </svg>
+);
+
+export default Exit;

package/src/components/atoms/Icon/icons/Facebook.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Facebook: React.FCS = (props) => (
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M18.9 0H1.1C0.808262 0 0.528473 0.115893 0.322183 0.322183C0.115893 0.528473 0 0.808262 0 1.1V18.9C0 19.0445 0.0284524 19.1875 0.0837326 19.321C0.139013 19.4544 0.220038 19.5757 0.322183 19.6778C0.424327 19.78 0.54559 19.861 0.679048 19.9163C0.812506 19.9715 0.955546 20 1.1 20H10.68V12.25H8.08V9.25H10.68V7C10.6261 6.47176 10.6885 5.93813 10.8627 5.43654C11.0369 4.93495 11.3188 4.47755 11.6885 4.09641C12.0582 3.71528 12.5068 3.41964 13.0028 3.23024C13.4989 3.04083 14.0304 2.96225 14.56 3C15.3383 2.99521 16.1163 3.03528 16.89 3.12V5.82H15.3C14.04 5.82 13.8 6.42 13.8 7.29V9.22H16.8L16.41 12.22H13.8V20H18.9C19.0445 20 19.1875 19.9715 19.321 19.9163C19.4544 19.861 19.5757 19.78 19.6778 19.6778C19.78 19.5757 19.861 19.4544 19.9163 19.321C19.9715 19.1875 20 19.0445 20 18.9V1.1C20 0.955546 19.9715 0.812506 19.9163 0.679048C19.861 0.54559 19.78 0.424327 19.6778 0.322183C19.5757 0.220038 19.4544 0.139013 19.321 0.0837326C19.1875 0.0284524 19.0445 0 18.9 0Z" />
+  </svg>
+);
+
+export default Facebook;

package/src/components/atoms/Icon/icons/Home.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Home: React.FCS = (props) => (
+  <svg viewBox="0 0 18 21" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="m17 7-6-5.26a3 3 0 0 0-4 0L1 7a3 3 0 0 0-1 2.26V18a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V9.25A3 3 0 0 0 17 7Zm-6 12H7v-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5Zm5-1a1 1 0 0 1-1 1h-2v-5a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v5H3a1 1 0 0 1-1-1V9.25a1 1 0 0 1 .34-.75l6-5.25a1 1 0 0 1 1.32 0l6 5.25a1 1 0 0 1 .34.75V18Z" />
+  </svg>
+);
+
+export default Home;

package/src/components/atoms/Icon/icons/ImageEdit.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const ImageEdit: React.FCS = (props) => (
+  <svg viewBox="0 0 21 22" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M17 10.48a1 1 0 0 0-1 1v2.39l-1.5-1.48a2.83 2.83 0 0 0-3.92 0l-.7.7-2.49-2.49a2.78 2.78 0 0 0-3.92 0L2 12.09V6.48a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-7a1 1 0 0 0-1-1Zm-14 9a1 1 0 0 1-1-1v-3.56L4.88 12A.78.78 0 0 1 6 12l3.17 3.17 4.26 4.26L3 19.48Zm13-1a1 1 0 0 1-.17.54l-4.54-4.52.7-.69a.78.78 0 0 1 1.1 0L16 16.7v1.78Zm3.72-15.25L17.3.81a1 1 0 0 0-1.41 0l-4.58 4.58a1 1 0 0 0-.31.71v2.42a1 1 0 0 0 1 1h2.42a1 1 0 0 0 .7-.29l4.58-4.58a1.001 1.001 0 0 0 .02-1.42ZM14 7.52h-1v-1l3.6-3.59 1 1L14 7.52Z" />
+  </svg>
+);
+
+export default ImageEdit;

package/src/components/atoms/Icon/icons/Instagram.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Instagram: React.FCS = (props) => (
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15.34 3.46a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Zm4.6 2.42a7.588 7.588 0 0 0-.46-2.43 4.94 4.94 0 0 0-1.16-1.77A4.7 4.7 0 0 0 16.55.53a7.3 7.3 0 0 0-2.43-.47C13.06 0 12.72 0 10 0S6.94 0 5.88.06a7.3 7.3 0 0 0-2.43.47 4.78 4.78 0 0 0-1.77 1.15A4.7 4.7 0 0 0 .53 3.45a7.3 7.3 0 0 0-.47 2.43C0 6.94 0 7.28 0 10s0 3.06.06 4.12a7.3 7.3 0 0 0 .47 2.43 4.7 4.7 0 0 0 1.15 1.77 4.78 4.78 0 0 0 1.77 1.15 7.3 7.3 0 0 0 2.43.47C6.94 20 7.28 20 10 20s3.06 0 4.12-.06a7.3 7.3 0 0 0 2.43-.47 4.7 4.7 0 0 0 1.77-1.15 4.85 4.85 0 0 0 1.16-1.77c.285-.78.44-1.6.46-2.43 0-1.06.06-1.4.06-4.12s0-3.06-.06-4.12ZM18.14 14a5.61 5.61 0 0 1-.34 1.86 3.06 3.06 0 0 1-.75 1.15c-.324.33-.717.586-1.15.75a5.61 5.61 0 0 1-1.86.34c-1 .05-1.37.06-4 .06s-3 0-4-.06a5.73 5.73 0 0 1-1.94-.3 3.27 3.27 0 0 1-1.1-.75 3 3 0 0 1-.74-1.15 5.54 5.54 0 0 1-.4-1.9c0-1-.06-1.37-.06-4s0-3 .06-4a5.54 5.54 0 0 1 .35-1.9A3 3 0 0 1 3 3a3.14 3.14 0 0 1 1.1-.8A5.73 5.73 0 0 1 6 1.86c1 0 1.37-.06 4-.06s3 0 4 .06a5.61 5.61 0 0 1 1.86.34 3.06 3.06 0 0 1 1.19.8c.328.307.584.683.75 1.1.222.609.337 1.252.34 1.9.05 1 .06 1.37.06 4s-.01 3-.06 4ZM10 4.87A5.13 5.13 0 1 0 15.14 10 5.12 5.12 0 0 0 10 4.87Zm0 8.46a3.33 3.33 0 1 1 0-6.66 3.33 3.33 0 0 1 0 6.66Z" />
+  </svg>
+);
+
+export default Instagram;

package/src/components/atoms/Icon/icons/Linkedin.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Linkedin: React.FCS = (props) => (
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M18.47 0H1.53A1.45 1.45 0 0 0 .06 1.43v17.14A1.45 1.45 0 0 0 1.53 20h16.94a1.451 1.451 0 0 0 1.47-1.43V1.43A1.45 1.45 0 0 0 18.47 0ZM6.09 16.74h-3v-9h3v9ZM4.59 6.48a1.56 1.56 0 0 1 0-3.12 1.57 1.57 0 1 1 0 3.12Zm12.32 10.26h-3v-4.83c0-1.21-.43-2-1.52-2A1.65 1.65 0 0 0 10.85 11a1.998 1.998 0 0 0-.1.73v5h-3v-9h3V9a3 3 0 0 1 2.71-1.5c2 0 3.45 1.29 3.45 4.06v5.18Z" />
+  </svg>
+);
+
+export default Linkedin;

package/src/components/atoms/Icon/icons/Lock.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Lock: React.FCS = (props) => (
+  <svg viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 11a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0v-3a1 1 0 0 0-1-1Zm5-4V5A5 5 0 0 0 3 5v2a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3ZM5 5a3 3 0 1 1 6 0v2H5V5Zm9 12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7Z" />
+  </svg>
+);
+
+export default Lock;

package/src/components/atoms/Icon/icons/Minus.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Minus: React.FCS = (props) => (
+  <svg viewBox="0 0 16 2" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15 0H1a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2Z" />
+  </svg>
+);
+
+export default Minus;

package/src/components/atoms/Icon/icons/Phone.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Phone: React.FCS = (props) => (
+  <svg viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M18.44 11c-.22 0-.45-.07-.67-.12a9.439 9.439 0 0 1-1.31-.39 2 2 0 0 0-2.48 1l-.22.45a12.18 12.18 0 0 1-2.66-2 12.178 12.178 0 0 1-2-2.66L9.52 7a2 2 0 0 0 1-2.48 10.32 10.32 0 0 1-.39-1.31c-.05-.22-.09-.45-.12-.68a3 3 0 0 0-3-2.49h-3a3 3 0 0 0-3 3.41 19 19 0 0 0 16.52 16.46h.38a3 3 0 0 0 2.741-1.778c.173-.388.26-.808.259-1.232v-3a3 3 0 0 0-2.47-2.9Zm.5 6a1 1 0 0 1-.723.962 1.05 1.05 0 0 1-.437.038A17 17 0 0 1 3.07 3.22a1.09 1.09 0 0 1 .25-.82 1 1 0 0 1 .75-.34h3a1 1 0 0 1 1 .79c.04.273.09.543.15.81.115.527.27 1.045.46 1.55l-1.4.65a1 1 0 0 0-.49 1.33 14.49 14.49 0 0 0 7 7 1 1 0 0 0 .76 0 1 1 0 0 0 .57-.52l.62-1.4a13.68 13.68 0 0 0 1.58.46c.267.06.537.11.81.15a1 1 0 0 1 .79 1l.02 3.12Z" />
+  </svg>
+);
+
+export default Phone;

package/src/components/atoms/Icon/icons/Plus.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Plus: React.FCS = (props) => (
+  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15 7H9V1a1 1 0 0 0-2 0v6H1a1 1 0 0 0 0 2h6v6a1 1 0 1 0 2 0V9h6a1 1 0 1 0 0-2Z" />
+  </svg>
+);
+
+export default Plus;

package/src/components/atoms/Icon/icons/PointsCircle.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const PointsCircle: React.FCS = (props) => (
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11 5H8C7.73479 5 7.48043 5.10536 7.2929 5.29289C7.10536 5.48043 7 5.73478 7 6V14C7 14.2652 7.10536 14.5196 7.2929 14.7071C7.48043 14.8946 7.73479 15 8 15C8.26522 15 8.51957 14.8946 8.70711 14.7071C8.89465 14.5196 9 14.2652 9 14V12H11C11.7957 12 12.5587 11.6839 13.1213 11.1213C13.6839 10.5587 14 9.79565 14 9V8C14 7.20435 13.6839 6.44129 13.1213 5.87868C12.5587 5.31607 11.7957 5 11 5ZM12 9C12 9.26522 11.8946 9.51957 11.7071 9.70711C11.5196 9.89464 11.2652 10 11 10H9V7H11C11.2652 7 11.5196 7.10536 11.7071 7.29289C11.8946 7.48043 12 7.73478 12 8V9ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0V0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18V18Z" />
+  </svg>
+);
+
+export default PointsCircle;

package/src/components/atoms/Icon/icons/Process.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Process: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.973 7.973 0 0 1-2-5.282c0-.294.017-.588.052-.88a1 1 0 1 0-1.985-.24 9.176 9.176 0 0 0-.067 1.12 9.965 9.965 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.982.982 0 0 0 .794-.422c.011-.015.026-.027.037-.043.007-.01.007-.022.013-.032a.965.965 0 0 0 .106-.258.95.95 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1Zm1.5-8.5H6.709a7.974 7.974 0 0 1 5.283-2c.294 0 .587.017.88.053a1 1 0 0 0 .24-1.987 9.226 9.226 0 0 0-1.12-.066 9.964 9.964 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4c.006.066.02.131.039.195a.97.97 0 0 0 .141.346l.012.017c.066.096.149.18.244.246.011.008.017.02.028.028.014.01.03.012.045.021a.96.96 0 0 0 .441.137c.018 0 .032.01.05.01h4a1 1 0 1 0 0-2Zm11.96 10.804a.968.968 0 0 0-.141-.345l-.011-.017a.972.972 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028-.01-.007-.023-.008-.034-.014a1.152 1.152 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.973 7.973 0 0 1-5.282 2c-.294 0-.588-.018-.88-.054a1 1 0 0 0-.24 1.986c.37.045.745.068 1.12.068a9.964 9.964 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a.956.956 0 0 0-.04-.195Zm.54-11.304a1 1 0 1 0 0-2h-4a.95.95 0 0 0-.192.039l-.007.001a.969.969 0 0 0-.34.14l-.02.013a.975.975 0 0 0-.245.244c-.008.01-.02.016-.028.027-.007.01-.007.023-.014.034a1.145 1.145 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 0 0 2 0V6.719a7.975 7.975 0 0 1 2 5.283c0 .294-.018.588-.053.88a1.001 1.001 0 0 0 1.985.24c.046-.372.068-.746.068-1.12a9.964 9.964 0 0 0-2.417-6.5h1.417Z" />
+  </svg>
+);
+
+export default Process;

package/src/components/atoms/Icon/icons/Redo.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Redo: React.FCS = (props) => (
+  <svg viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M19 10a1 1 0 0 0-1 1 8.05 8.05 0 1 1-2.22-5.5h-2.4a1 1 0 1 0 0 2h4.53a1 1 0 0 0 1-1V2a1 1 0 0 0-2 0v1.77A10 10 0 1 0 20 11a1 1 0 0 0-1-1Z" />
+  </svg>
+);
+
+export default Redo;

package/src/components/atoms/Icon/icons/Setting.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Setting: React.FCS = (props) => (
+  <svg viewBox="0 0 21 22" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M18.9 11.66a1 1 0 0 1 0-1.32l1.28-1.44a1 1 0 0 0 .12-1.17l-2-3.46a1 1 0 0 0-1.07-.48l-1.88.38a1 1 0 0 1-1.15-.66l-.61-1.83a1 1 0 0 0-.95-.68h-4a1 1 0 0 0-1 .68l-.56 1.83a1 1 0 0 1-1.15.66L4 3.79a1 1 0 0 0-1 .48L1 7.73a1 1 0 0 0 .1 1.17l1.27 1.44a1 1 0 0 1 0 1.32L1.1 13.1a1 1 0 0 0-.1 1.17l2 3.46a1 1 0 0 0 1.07.48l1.88-.38a1 1 0 0 1 1.15.66l.61 1.83a1 1 0 0 0 1 .68h4a1 1 0 0 0 .95-.68l.61-1.83a1 1 0 0 1 1.15-.66l1.88.38a1 1 0 0 0 1.07-.48l2-3.46a1 1 0 0 0-.12-1.17l-1.35-1.44ZM17.41 13l.8.9-1.28 2.22-1.18-.24a3 3 0 0 0-3.45 2L11.92 19H9.36L9 17.86a3 3 0 0 0-3.45-2l-1.18.24-1.3-2.21.8-.9a3 3 0 0 0 0-4l-.8-.9 1.28-2.2 1.18.24a3 3 0 0 0 3.45-2L9.36 3h2.56l.38 1.14a3 3 0 0 0 3.45 2l1.18-.24 1.28 2.22-.8.9a3 3 0 0 0 0 3.98Zm-6.77-6a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 6a2 2 0 1 1 0-4.001 2 2 0 0 1 0 4.001Z" />
+  </svg>
+);
+
+export default Setting;

package/src/components/atoms/Icon/icons/UserCircle.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const UserCircle: React.FCS = (props) => (
+  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M10 0a10 10 0 0 0-7.35 16.76 10.001 10.001 0 0 0 14.7 0A9.999 9.999 0 0 0 10 0Zm0 18a8 8 0 0 1-5.55-2.25 6 6 0 0 1 11.1 0A8 8 0 0 1 10 18ZM8 8a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm8.91 6A8 8 0 0 0 13 10.62a4 4 0 1 0-6 0A8 8 0 0 0 3.09 14 7.92 7.92 0 0 1 2 10a8 8 0 1 1 16 0 7.92 7.92 0 0 1-1.09 4Z" />
+  </svg>
+);
+
+export default UserCircle;

package/src/components/atoms/Icon/icons/Users.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Users: React.FCS = (props) => (
+  <svg viewBox="0 0 22 18" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11.3 9.22A4.92 4.92 0 0 0 13 5.5a5 5 0 0 0-10 0 4.92 4.92 0 0 0 1.7 3.72A8 8 0 0 0 0 16.5a1 1 0 1 0 2 0 6 6 0 1 1 12 0 1 1 0 0 0 2 0 8 8 0 0 0-4.7-7.28ZM8 8.5a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm9.74.32A5 5 0 0 0 14 .5a1 1 0 1 0 0 2 3 3 0 0 1 3 3 3 3 0 0 1-1.5 2.59 1 1 0 0 0-.05 1.7l.39.26.13.07a7 7 0 0 1 4 6.38 1 1 0 0 0 2 0 9 9 0 0 0-4.23-7.68Z" />
+  </svg>
+);
+
+export default Users;

package/src/components/atoms/Icon/index.ts

@@ -0,0 +1,3 @@
+export { Icon } from './Icon';
+export { IconAddition } from './IconAddition';
+export type { IconType } from './Icon';

package/src/components/atoms/Initials/Initials.stories.tsx

@@ -0,0 +1,23 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Initials } from './Initials';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Atoms/Initials',
+  component: Initials,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['s', 'm', 'l', 'xl', 'xxl'],
+      defaultValue: 'm',
+    },
+  },
+} as ComponentMeta<typeof Initials>;
+
+const Template: ComponentStory<typeof Initials> = (args) => <Initials {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  text: 'jk',
+};