@integrigo/integrigo-ui 1.6.17 → 1.6.18-a

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { Chip, ChipVariant, ChipSize } from './Chip';
+import { Chip } from './Chip';
 
 export default {
   title: 'Atoms/Chip',
@@ -24,8 +24,8 @@ export default {
       control: {
         type: 'select',
       },
-      options: Object.keys(ChipSize),
-      defaultValue: ChipSize.xl,
+      options: ['s', 'm', 'l', 'xl'],
+      defaultValue: 'xl',
     },
     variant: {
       name: 'variant',
@@ -36,8 +36,8 @@ export default {
       control: {
         type: 'select',
       },
-      options: Object.keys(ChipVariant),
-      defaultValue: ChipVariant.primary,
+      options: ['transparent', 'white', 'primary', 'secondary', 'grey'],
+      defaultValue: 'primary',
     },
     onClick: {
       name: 'onClick',
@@ -50,9 +50,7 @@ export default {
   },
 } as ComponentMeta<typeof Chip>;
 
-const Template: ComponentStory<typeof Chip> = (args) => (
-  <Chip {...args} />
-);
+const Template: ComponentStory<typeof Chip> = (args) => <Chip {...args} />;
 
 export const Basic = Template.bind({});
 

package/src/components/atoms/Chip/Chip.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, FC } from "react";
+import { MouseEvent } from "react";
 import styled from "styled-components";
 import { Icon, IconType } from "../Icon";
 
@@ -7,9 +7,10 @@ type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
 export interface ChipProps {
   iconLeft?: IconType;
   iconRight?: IconType;
-  size?: 's' | 'm' | 'l' | 'xl';
+  iconColor?: string;
+  size?: "s" | "m" | "l" | "xl";
   label: React.ReactNode;
-  variant?: 'transparent' | 'white' | 'primary' | 'secondary' | 'grey';
+  variant?: "transparent" | "white" | "primary" | "secondary" | "grey";
   onClick?: OnClickFunctionType;
 }
 
@@ -82,23 +83,30 @@ const colorVariant = {
   },
 };
 
-export const Chip: FC<ChipProps> = (props: ChipProps) => {
+export const Chip: React.FCS<ChipProps> = (props) => {
   const {
+    className,
     iconLeft,
     iconRight,
+    iconColor,
     label,
-    size = 'm',
-    variant = 'primary',
+    size = "m",
+    variant = "primary",
     onClick,
   } = props;
 
   return (
-    <ChipWrapper size={size} variant={variant} onClick={onClick}>
+    <ChipWrapper
+      size={size}
+      variant={variant}
+      onClick={onClick}
+      className={className}
+    >
       {iconLeft && (
         <IconWrapper>
           <Icon
             type={iconLeft}
-            fill={colorVariant[variant].fontColor}
+            fill={iconColor || colorVariant[variant].fontColor}
             size={sizeVariant[size].iconSize}
           />
         </IconWrapper>
@@ -117,9 +125,12 @@ export const Chip: FC<ChipProps> = (props: ChipProps) => {
   );
 };
 
-const getVariantStyles = (variant: ChipProps['variant'], clickable: boolean): string => {
+const getVariantStyles = (
+  variant: ChipProps["variant"],
+  clickable: boolean
+): string => {
   switch (variant) {
-    case 'secondary':
+    case "secondary":
       return `
         background-color: var(--color-white);
         opacity: 0.9;
@@ -141,7 +152,7 @@ const getVariantStyles = (variant: ChipProps['variant'], clickable: boolean): st
         `
         }
       `;
-    case 'transparent':
+    case "transparent":
       return `        
         ${
           clickable &&
@@ -156,7 +167,7 @@ const getVariantStyles = (variant: ChipProps['variant'], clickable: boolean): st
         `
         }
       `;
-    case 'grey':
+    case "grey":
       return `
         background-color: var(--shades-of-grey-20);
         
@@ -173,7 +184,7 @@ const getVariantStyles = (variant: ChipProps['variant'], clickable: boolean): st
         `
         }
       `;
-    case 'white':
+    case "white":
       return `
         background-color: var(--color-white);
         border-color: var(--shades-of-grey-40);
@@ -192,7 +203,7 @@ const getVariantStyles = (variant: ChipProps['variant'], clickable: boolean): st
         `
         }
       `;
-    case 'primary':
+    case "primary":
     default:
       return `
         background-color: var(--color-orange);
@@ -218,8 +229,8 @@ const getVariantStyles = (variant: ChipProps['variant'], clickable: boolean): st
 Chip.displayName = "Chip";
 
 const ChipWrapper = styled.div<{
-  size: Exclude<ChipProps['size'], undefined>;
-  variant: Exclude<ChipProps['variant'], undefined>;
+  size: Exclude<ChipProps["size"], undefined>;
+  variant: Exclude<ChipProps["variant"], undefined>;
   onClick?: OnClickFunctionType;
 }>`
   border-radius: 100px;
@@ -249,7 +260,7 @@ const IconWrapper = styled.span`
 IconWrapper.displayName = "IconWrapper";
 
 const Text = styled.span<{
-  size: Exclude<ChipProps['size'], undefined>;
+  size: Exclude<ChipProps["size"], undefined>;
 }>`
   color: inherit;
   font-weight: bold;

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

@@ -6,13 +6,17 @@ import ArrowLeft from "./icons/ArrowLeft";
 import ArrowRight from "./icons/ArrowRight";
 import Bars from "./icons/Bars";
 import Bell from "./icons/Bell";
+import Calendar from "./icons/Calendar";
 import CalendarSlash from "./icons/CalendarSlash";
 import CheckCircle from "./icons/CheckCircle";
 import CheckSquare from "./icons/CheckSquare";
 import ClipboardNotes from "./icons/ClipboardNotes";
 import Close from "./icons/Close";
+import CloseSquare from "./icons/CloseSquare";
+import CommentDots from "./icons/CommentDots";
 import CreateDashboard from "./icons/CreateDashboard";
 import DiceFive from "./icons/DiceFive";
+import DiceOne from "./icons/DiceOne";
 import Edit from "./icons/Edit";
 import EllipsisVertical from "./icons/EllipsisVertical";
 import EllipsisHorizontal from "./icons/EllipsisHorizontal";
@@ -20,8 +24,12 @@ import Envelope from "./icons/Envelope";
 import ExclamationCircle from "./icons/ExclamationCircle";
 import ExclamationTriangle from "./icons/ExclamationTriangle";
 import Exit from "./icons/Exit";
+import Eye from "./icons/Eye";
 import Facebook from "./icons/Facebook";
+import Heart from "./icons/Heart";
+import HeartAlt from "./icons/HeartAlt";
 import Home from "./icons/Home";
+import HourGlass from "./icons/HourGlass";
 import ImageEdit from "./icons/ImageEdit";
 import Instagram from "./icons/Instagram";
 import Linkedin from "./icons/Linkedin";
@@ -31,7 +39,9 @@ import Phone from "./icons/Phone";
 import Plus from "./icons/Plus";
 import PointsCircle from "./icons/PointsCircle";
 import Process from "./icons/Process";
+import QuestionCircle from "./icons/QuestionCircle";
 import Redo from "./icons/Redo";
+import Rocket from "./icons/Rocket";
 import Setting from "./icons/Setting";
 import User from "./icons/User";
 import UserCircle from "./icons/UserCircle";
@@ -44,13 +54,17 @@ export const iconHashMap = {
   "arrow-right": ArrowRight,
   bars: Bars,
   bell: Bell,
+  calendar: Calendar,
   "calendar-slash": CalendarSlash,
   "check-circle": CheckCircle,
   "check-square": CheckSquare,
   "clipboad-notes": ClipboardNotes,
   close: Close,
+  "close-square": CloseSquare,
+  "comment-dots": CommentDots,
   "create-dashboard": CreateDashboard,
   "dice-five": DiceFive,
+  "dice-one": DiceOne,
   edit: Edit,
   "ellipsis-horizontal": EllipsisHorizontal,
   "ellipsis-vertical": EllipsisVertical,
@@ -58,8 +72,12 @@ export const iconHashMap = {
   "exclamation-circle": ExclamationCircle,
   "exclamation-triangle": ExclamationTriangle,
   exit: Exit,
+  eye: Eye,
   facebook: Facebook,
+  heart: Heart,
+  "heart-alt": HeartAlt,
   home: Home,
+  "hour-glass": HourGlass,
   "image-edit": ImageEdit,
   instagram: Instagram,
   linkedin: Linkedin,
@@ -67,9 +85,11 @@ export const iconHashMap = {
   minus: Minus,
   phone: Phone,
   plus: Plus,
-  process: Process,
   "points-circle": PointsCircle,
+  process: Process,
+  "question-circle": QuestionCircle,
   redo: Redo,
+  rocket: Rocket,
   setting: Setting,
   user: User,
   "user-circle": UserCircle,

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

@@ -1,25 +1,25 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Color } from '../../../styles';
-import { Icon, IconType } from './Icon';
+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';
+  direction?: "rtl" | "ltr";
+  colorVariant?: "grey" | "white" | "ghost";
+  size?: "xl" | "l" | "m" | "s";
   onClick?: () => void;
 }
 
 const sizeVariant = {
   xl: {
     size: 24,
-    offset: 16,
+    offset: 14,
   },
   l: {
     size: 20,
-    offset: 12,
+    offset: 10,
   },
   m: {
     size: 16,
@@ -27,16 +27,16 @@ const sizeVariant = {
   },
   s: {
     size: 10,
-    offset: 6,
+    offset: 5,
   },
 };
 
 export const IconAddition: React.FC<IconAdditionProps> = ({
   disabled,
   icon,
-  direction = 'ltr',
-  colorVariant = 'grey',
-  size = 'm',
+  direction = "ltr",
+  colorVariant = "grey",
+  size = "m",
   onClick,
 }) => {
   const clickable = !!onClick;
@@ -56,7 +56,7 @@ export const IconAddition: React.FC<IconAdditionProps> = ({
       direction={direction}
       clickable={clickable && !disabled}
       size={size}
-      narrow={colorVariant === 'ghost'}
+      narrow={colorVariant === "ghost"}
     >
       <Icon
         type={icon}
@@ -70,18 +70,20 @@ export const IconAddition: React.FC<IconAdditionProps> = ({
 
 const IconWrapper = styled.div<{
   clickable?: boolean;
-  direction?: 'rtl' | 'ltr';
+  direction?: "rtl" | "ltr";
   narrow: boolean;
-  size: 'xl' | 'l' | 'm' | 's';
+  size: "xl" | "l" | "m" | "s";
 }>`
   position: absolute;
   z-index: 2;
-  bottom: calc(${(p) => sizeVariant[p.size].offset}px);
+  top: 50%;
+  transform: translateY(-50%);
   height: ${(p) => sizeVariant[p.size].size}px;
   width: ${(p) => sizeVariant[p.size].size}px;
-  cursor: ${(p) => (p.clickable ? 'pointer' : 'auto')};
+  cursor: ${(p) => (p.clickable ? "pointer" : "auto")};
+
   ${(p) =>
-    p.direction === 'ltr'
+    p.direction === "ltr"
       ? `left: ${p.narrow ? 0 : sizeVariant[p.size].offset}px`
       : `right: ${p.narrow ? 0 : sizeVariant[p.size].offset}px`};
 
@@ -91,4 +93,4 @@ const IconWrapper = styled.div<{
   }
 `;
 
-IconWrapper.displayName = 'IconWrapper';
+IconWrapper.displayName = "IconWrapper";

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Calendar: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M19 4H17V3C17 2.73478 16.8946 2.48043 16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2C15.7348 2 15.4804 2.10536 15.2929 2.29289C15.1054 2.48043 15 2.73478 15 3V4H9V3C9 2.73478 8.89464 2.48043 8.70711 2.29289C8.51957 2.10536 8.26522 2 8 2C7.73478 2 7.48043 2.10536 7.29289 2.29289C7.10536 2.48043 7 2.73478 7 3V4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V12H20V19ZM20 10H4V7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6H7V7C7 7.26522 7.10536 7.51957 7.29289 7.70711C7.48043 7.89464 7.73478 8 8 8C8.26522 8 8.51957 7.89464 8.70711 7.70711C8.89464 7.51957 9 7.26522 9 7V6H15V7C15 7.26522 15.1054 7.51957 15.2929 7.70711C15.4804 7.89464 15.7348 8 16 8C16.2652 8 16.5196 7.89464 16.7071 7.70711C16.8946 7.51957 17 7.26522 17 7V6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7V10Z" />
+  </svg>
+);
+
+export default Calendar;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CloseSquare: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15.71 8.29C15.617 8.19627 15.5064 8.12188 15.3846 8.07111C15.2627 8.02034 15.132 7.9942 15 7.9942C14.868 7.9942 14.7373 8.02034 14.6154 8.07111C14.4936 8.12188 14.383 8.19627 14.29 8.29L12 10.59L9.71 8.29C9.5217 8.1017 9.2663 7.99591 9 7.99591C8.7337 7.99591 8.4783 8.1017 8.29 8.29C8.1017 8.4783 7.99591 8.7337 7.99591 9C7.99591 9.2663 8.1017 9.5217 8.29 9.71L10.59 12L8.29 14.29C8.19627 14.383 8.12188 14.4936 8.07111 14.6154C8.02034 14.7373 7.9942 14.868 7.9942 15C7.9942 15.132 8.02034 15.2627 8.07111 15.3846C8.12188 15.5064 8.19627 15.617 8.29 15.71C8.38296 15.8037 8.49356 15.8781 8.61542 15.9289C8.73728 15.9797 8.86799 16.0058 9 16.0058C9.13201 16.0058 9.26272 15.9797 9.38458 15.9289C9.50644 15.8781 9.61704 15.8037 9.71 15.71L12 13.41L14.29 15.71C14.383 15.8037 14.4936 15.8781 14.6154 15.9289C14.7373 15.9797 14.868 16.0058 15 16.0058C15.132 16.0058 15.2627 15.9797 15.3846 15.9289C15.5064 15.8781 15.617 15.8037 15.71 15.71C15.8037 15.617 15.8781 15.5064 15.9289 15.3846C15.9797 15.2627 16.0058 15.132 16.0058 15C16.0058 14.868 15.9797 14.7373 15.9289 14.6154C15.8781 14.4936 15.8037 14.383 15.71 14.29L13.41 12L15.71 9.71C15.8037 9.61704 15.8781 9.50644 15.9289 9.38458C15.9797 9.26272 16.0058 9.13201 16.0058 9C16.0058 8.86799 15.9797 8.73728 15.9289 8.61542C15.8781 8.49356 15.8037 8.38296 15.71 8.29ZM19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19Z" />
+  </svg>
+);
+
+export default CloseSquare;

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const CommentDots: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M7.99999 11C7.80221 11 7.60887 11.0586 7.44442 11.1685C7.27997 11.2784 7.1518 11.4346 7.07611 11.6173C7.00042 11.8 6.98062 12.0011 7.0192 12.1951C7.05779 12.3891 7.15303 12.5673 7.29288 12.7071C7.43273 12.847 7.61092 12.9422 7.8049 12.9808C7.99888 13.0194 8.19995 12.9996 8.38267 12.9239C8.5654 12.8482 8.72158 12.72 8.83146 12.5556C8.94134 12.3911 8.99999 12.1978 8.99999 12C8.99999 11.7348 8.89463 11.4804 8.70709 11.2929C8.51956 11.1054 8.2652 11 7.99999 11ZM12 11C11.8022 11 11.6089 11.0586 11.4444 11.1685C11.28 11.2784 11.1518 11.4346 11.0761 11.6173C11.0004 11.8 10.9806 12.0011 11.0192 12.1951C11.0578 12.3891 11.153 12.5673 11.2929 12.7071C11.4327 12.847 11.6109 12.9422 11.8049 12.9808C11.9989 13.0194 12.1999 12.9996 12.3827 12.9239C12.5654 12.8482 12.7216 12.72 12.8315 12.5556C12.9413 12.3911 13 12.1978 13 12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11ZM16 11C15.8022 11 15.6089 11.0586 15.4444 11.1685C15.28 11.2784 15.1518 11.4346 15.0761 11.6173C15.0004 11.8 14.9806 12.0011 15.0192 12.1951C15.0578 12.3891 15.153 12.5673 15.2929 12.7071C15.4327 12.847 15.6109 12.9422 15.8049 12.9808C15.9989 13.0194 16.1999 12.9996 16.3827 12.9239C16.5654 12.8482 16.7216 12.72 16.8315 12.5556C16.9413 12.3911 17 12.1978 17 12C17 11.7348 16.8946 11.4804 16.7071 11.2929C16.5196 11.1054 16.2652 11 16 11ZM12 2C10.6868 2 9.38641 2.25866 8.17315 2.7612C6.9599 3.26375 5.85751 4.00035 4.92892 4.92893C3.05356 6.8043 1.99999 9.34784 1.99999 12C1.99125 14.3091 2.79078 16.5485 4.25999 18.33L2.25999 20.33C2.12123 20.4706 2.02723 20.6492 1.98986 20.8432C1.95249 21.0372 1.97341 21.2379 2.04999 21.42C2.13305 21.5999 2.26769 21.7511 2.43683 21.8544C2.60598 21.9577 2.80199 22.0083 2.99999 22H12C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2ZM12 20H5.40999L6.33999 19.07C6.43448 18.9774 6.50965 18.8669 6.56114 18.7451C6.61264 18.6232 6.63944 18.4923 6.63999 18.36C6.63623 18.0962 6.5284 17.8446 6.33999 17.66C5.03057 16.352 4.21516 14.6305 4.03268 12.7888C3.8502 10.947 4.31193 9.09901 5.33922 7.55952C6.3665 6.02004 7.89578 4.88436 9.6665 4.34597C11.4372 3.80759 13.3398 3.8998 15.0502 4.60691C16.7606 5.31402 18.1728 6.59227 19.0464 8.22389C19.92 9.85551 20.2009 11.7395 19.8411 13.555C19.4814 15.3705 18.5033 17.005 17.0735 18.1802C15.6438 19.3554 13.8508 19.9985 12 20Z" />
+  </svg>
+);
+
+export default CommentDots;

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const DiceOne: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M17 2H7C5.67392 2 4.40215 2.52678 3.46447 3.46447C2.52678 4.40215 2 5.67392 2 7V17C2 18.3261 2.52678 19.5979 3.46447 20.5355C4.40215 21.4732 5.67392 22 7 22H17C18.3261 22 19.5979 21.4732 20.5355 20.5355C21.4732 19.5979 22 18.3261 22 17V7C22 5.67392 21.4732 4.40215 20.5355 3.46447C19.5979 2.52678 18.3261 2 17 2ZM20 17C20 17.7956 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7956 20 17 20H7C6.20435 20 5.44129 19.6839 4.87868 19.1213C4.31607 18.5587 4 17.7956 4 17V7C4 6.20435 4.31607 5.44129 4.87868 4.87868C5.44129 4.31607 6.20435 4 7 4H17C17.7956 4 18.5587 4.31607 19.1213 4.87868C19.6839 5.44129 20 6.20435 20 7V17ZM12 11C11.8022 11 11.6089 11.0586 11.4444 11.1685C11.28 11.2784 11.1518 11.4346 11.0761 11.6173C11.0004 11.8 10.9806 12.0011 11.0192 12.1951C11.0578 12.3891 11.153 12.5673 11.2929 12.7071C11.4327 12.847 11.6109 12.9422 11.8049 12.9808C11.9989 13.0194 12.2 12.9996 12.3827 12.9239C12.5654 12.8482 12.7216 12.72 12.8315 12.5556C12.9414 12.3911 13 12.1978 13 12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11Z" />
+  </svg>
+);
+
+export default DiceOne;

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Eye: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M21.9199 11.6C19.8999 6.91 16.0999 4 11.9999 4C7.89994 4 4.09994 6.91 2.07994 11.6C2.02488 11.7262 1.99646 11.8623 1.99646 12C1.99646 12.1377 2.02488 12.2738 2.07994 12.4C4.09994 17.09 7.89994 20 11.9999 20C16.0999 20 19.8999 17.09 21.9199 12.4C21.975 12.2738 22.0034 12.1377 22.0034 12C22.0034 11.8623 21.975 11.7262 21.9199 11.6ZM11.9999 18C8.82994 18 5.82994 15.71 4.09994 12C5.82994 8.29 8.82994 6 11.9999 6C15.1699 6 18.1699 8.29 19.8999 12C18.1699 15.71 15.1699 18 11.9999 18ZM11.9999 8C11.2088 8 10.4355 8.2346 9.77766 8.67412C9.11987 9.11365 8.60718 9.73836 8.30443 10.4693C8.00168 11.2002 7.92246 12.0044 8.0768 12.7804C8.23114 13.5563 8.61211 14.269 9.17152 14.8284C9.73093 15.3878 10.4437 15.7688 11.2196 15.9231C11.9955 16.0775 12.7998 15.9983 13.5307 15.6955C14.2616 15.3928 14.8863 14.8801 15.3258 14.2223C15.7653 13.5645 15.9999 12.7911 15.9999 12C15.9999 10.9391 15.5785 9.92172 14.8284 9.17157C14.0782 8.42143 13.0608 8 11.9999 8ZM11.9999 14C11.6044 14 11.2177 13.8827 10.8888 13.6629C10.5599 13.4432 10.3036 13.1308 10.1522 12.7654C10.0008 12.3999 9.9612 11.9978 10.0384 11.6098C10.1155 11.2219 10.306 10.8655 10.5857 10.5858C10.8654 10.3061 11.2218 10.1156 11.6098 10.0384C11.9977 9.96126 12.3999 10.0009 12.7653 10.1522C13.1308 10.3036 13.4431 10.56 13.6629 10.8889C13.8826 11.2178 13.9999 11.6044 13.9999 12C13.9999 12.5304 13.7892 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 11.9999 14Z" />
+  </svg>
+);
+
+export default Eye;

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Heart: React.FCS = (props) => (
+  <svg viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15.4964 5.10418C15.4864 5.72418 15.3564 6.33418 15.1164 6.90418C14.8764 7.47418 14.5164 7.98418 14.0764 8.42418L9.5764 12.9642C9.1564 13.3842 8.58639 13.6142 7.98639 13.6142C7.38639 13.6142 6.81639 13.3842 6.39639 12.9642L1.8964 8.42418C1.0564 7.58418 0.556395 6.45418 0.506395 5.26418C0.466395 4.08418 0.866395 2.91418 1.6464 2.01418C2.4264 1.11418 3.50639 0.544184 4.69639 0.414184C5.87639 0.284184 7.0664 0.604184 8.0164 1.31418C8.9264 0.644184 10.0364 0.324184 11.1564 0.404184C12.2764 0.484184 13.3364 0.964184 14.1364 1.75418C14.5764 2.19418 14.9164 2.71418 15.1464 3.29418C15.3764 3.86418 15.4964 4.48418 15.4964 5.10418Z" />
+  </svg>
+);
+
+export default Heart;

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const HeartAlt: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M20.16 4.61C19.0983 3.548 17.6908 2.90232 16.1933 2.79038C14.6958 2.67843 13.2078 3.10766 12 4C10.7277 3.05363 9.14402 2.62451 7.56795 2.79903C5.99188 2.97356 4.54047 3.73877 3.506 4.94058C2.47154 6.14239 1.93085 7.69152 1.99283 9.27601C2.05481 10.8605 2.71485 12.3627 3.84003 13.48L11.29 20.93C11.383 21.0237 11.4936 21.0981 11.6155 21.1489C11.7373 21.1997 11.868 21.2258 12 21.2258C12.132 21.2258 12.2627 21.1997 12.3846 21.1489C12.5065 21.0981 12.6171 21.0237 12.71 20.93L20.16 13.48C20.7427 12.8977 21.2049 12.2063 21.5202 11.4454C21.8356 10.6844 21.9979 9.86873 21.9979 9.045C21.9979 8.22127 21.8356 7.40561 21.5202 6.64463C21.2049 5.88365 20.7427 5.19227 20.16 4.61ZM18.75 12.07L12 18.81L5.25003 12.07C4.65521 11.4727 4.25001 10.713 4.08526 9.88634C3.92052 9.05963 4.00356 8.20268 4.32398 7.42299C4.6444 6.6433 5.18793 5.97559 5.88638 5.50362C6.58483 5.03165 7.40709 4.77644 8.25003 4.77C9.37614 4.77276 10.4551 5.22233 11.25 6.02C11.343 6.11373 11.4536 6.18812 11.5755 6.23889C11.6973 6.28966 11.828 6.3158 11.96 6.3158C12.092 6.3158 12.2227 6.28966 12.3446 6.23889C12.4665 6.18812 12.5771 6.11373 12.67 6.02C13.4884 5.31088 14.5455 4.93914 15.6276 4.98002C16.7096 5.0209 17.7357 5.47134 18.4982 6.24019C19.2607 7.00903 19.7026 8.03884 19.7345 9.12119C19.7664 10.2035 19.3859 11.2576 18.67 12.07H18.75Z" />
+  </svg>
+);
+
+export default HeartAlt;

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const HourGlass: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M18.9917 21.002H17.9917V19.335C17.9886 18.7627 17.8873 18.1953 17.6921 17.6573C17.6812 17.6279 17.6697 17.6007 17.6562 17.5727C17.4943 17.1311 17.2705 16.7148 16.9917 16.336L15.5918 14.4688C15.2034 13.9486 14.9929 13.3172 14.9917 12.668V11.6582C14.994 10.8631 15.3096 10.101 15.8701 9.53711L16.5273 8.87988C17.291 8.11213 17.7815 7.11497 17.9236 6.0415C17.9242 6.02759 17.9316 6.01599 17.9316 6.00195L17.9288 5.98822C17.9636 5.7753 17.9846 5.56036 17.9917 5.34473V3.002H18.9917C19.2569 3.002 19.5113 2.89664 19.6988 2.70911C19.8864 2.52157 19.9917 2.26722 19.9917 2.002C19.9917 1.73678 19.8864 1.48243 19.6988 1.29489C19.5113 1.10736 19.2569 1.002 18.9917 1.002H4.99171C4.72649 1.002 4.47214 1.10736 4.2846 1.29489C4.09707 1.48243 3.99171 1.73678 3.99171 2.002C3.99171 2.26722 4.09707 2.52157 4.2846 2.70911C4.47214 2.89664 4.72649 3.002 4.99171 3.002H5.99171V5.34473C5.99881 5.56036 6.01981 5.7753 6.05458 5.98822L6.05176 6.002C6.05176 6.016 6.0592 6.02764 6.05976 6.04155C6.20192 7.11502 6.69245 8.11217 7.45606 8.87993L8.11329 9.53716C8.67378 10.101 8.9894 10.8631 8.9917 11.6582V12.668C8.9904 13.3171 8.78015 13.9485 8.39209 14.4688L6.99121 16.3359C6.71245 16.7149 6.48878 17.1314 6.32684 17.5731C6.31354 17.6008 6.30212 17.6277 6.29132 17.6568C6.09618 18.1949 5.99483 18.7626 5.9917 19.335V21.002H4.9917C4.72648 21.002 4.47213 21.1074 4.28459 21.2949C4.09706 21.4824 3.9917 21.7368 3.9917 22.002C3.9917 22.2672 4.09706 22.5216 4.28459 22.7091C4.47213 22.8966 4.72648 23.002 4.9917 23.002H18.9917C19.2569 23.002 19.5113 22.8966 19.6988 22.7091C19.8863 22.5216 19.9917 22.2672 19.9917 22.002C19.9917 21.7368 19.8863 21.4824 19.6988 21.2949C19.5113 21.1074 19.2569 21.002 18.9917 21.002ZM7.9917 5.002V3.002H15.9917V5.002H7.9917ZM8.87012 7.46587C8.72921 7.32431 8.60294 7.1689 8.49323 7.002H15.4902C15.3805 7.1689 15.2542 7.32431 15.1133 7.46587L14.456 8.1231C13.676 8.89855 13.1758 9.91126 13.0342 11.002H10.9492C10.8075 9.91123 10.3074 8.89848 9.52734 8.123L8.87012 7.46587ZM9.99219 15.668C10.5708 14.8927 10.9139 13.9671 10.9805 13.002H13.0029C13.0694 13.9672 13.4127 14.8928 13.9917 15.668L14.9918 17.002H8.99133L9.99219 15.668ZM15.9917 21.002H7.9917V19.335C7.99448 19.2236 8.00357 19.1124 8.01892 19.002H15.9645C15.9798 19.1124 15.9889 19.2236 15.9917 19.335V21.002Z" />
+  </svg>
+);
+
+export default HourGlass;

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const QuestionCircle: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11.29 15.29C11.247 15.3375 11.2069 15.3876 11.17 15.44C11.1322 15.4957 11.1019 15.5563 11.08 15.62C11.0512 15.6767 11.031 15.7374 11.02 15.8C11.0151 15.8666 11.0151 15.9334 11.02 16C11.0166 16.1312 11.044 16.2613 11.1 16.38C11.1449 16.5041 11.2166 16.6168 11.3099 16.7101C11.4032 16.8034 11.5159 16.8751 11.64 16.92C11.7597 16.9729 11.8891 17.0002 12.02 17.0002C12.1509 17.0002 12.2803 16.9729 12.4 16.92C12.5241 16.8751 12.6368 16.8034 12.7301 16.7101C12.8234 16.6168 12.8951 16.5041 12.94 16.38C12.9844 16.2584 13.0048 16.1294 13 16C13.0008 15.8684 12.9755 15.7379 12.9258 15.6161C12.876 15.4943 12.8027 15.3834 12.71 15.29C12.617 15.1963 12.5064 15.1219 12.3846 15.0711C12.2627 15.0203 12.132 14.9942 12 14.9942C11.868 14.9942 11.7373 15.0203 11.6154 15.0711C11.4936 15.1219 11.383 15.1963 11.29 15.29ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20ZM12 7C11.4731 6.99966 10.9553 7.13812 10.4989 7.40144C10.0425 7.66476 9.66347 8.04366 9.4 8.5C9.32765 8.61382 9.27907 8.7411 9.25718 8.87418C9.23529 9.00726 9.24055 9.14339 9.27263 9.27439C9.30472 9.40538 9.36297 9.52854 9.44389 9.63643C9.52481 9.74433 9.62671 9.83475 9.74348 9.90224C9.86024 9.96974 9.98945 10.0129 10.1233 10.0292C10.2572 10.0454 10.393 10.0345 10.5225 9.99688C10.6521 9.9593 10.7727 9.89591 10.8771 9.81052C10.9814 9.72513 11.0675 9.6195 11.13 9.5C11.2181 9.3474 11.345 9.22078 11.4978 9.13298C11.6505 9.04518 11.8238 8.9993 12 9C12.2652 9 12.5196 9.10536 12.7071 9.29289C12.8946 9.48043 13 9.73478 13 10C13 10.2652 12.8946 10.5196 12.7071 10.7071C12.5196 10.8946 12.2652 11 12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V13C11 13.2652 11.1054 13.5196 11.2929 13.7071C11.4804 13.8946 11.7348 14 12 14C12.2652 14 12.5196 13.8946 12.7071 13.7071C12.8946 13.5196 13 13.2652 13 13V12.82C13.6614 12.58 14.2174 12.1152 14.5708 11.5069C14.9242 10.8985 15.0525 10.1853 14.9334 9.49189C14.8143 8.79849 14.4552 8.16902 13.919 7.71352C13.3828 7.25801 12.7035 7.00546 12 7Z" />
+  </svg>
+);
+
+export default QuestionCircle;

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Rocket: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M22.601 2.06205C22.5559 1.89077 22.4661 1.73453 22.3409 1.60929C22.2156 1.48404 22.0594 1.39428 21.8881 1.34916C19.8368 0.816345 17.6766 0.873732 15.6564 1.51471C13.6362 2.15569 11.8381 3.35419 10.4692 4.97222L9.35426 6.29605L6.74946 5.66757C6.1162 5.4468 5.42444 5.46262 4.80194 5.71212C4.17943 5.96161 3.66823 6.42793 3.36274 7.02495L1.16255 10.9248C1.08546 11.0614 1.04158 11.2143 1.03447 11.371C1.02737 11.5277 1.05722 11.6838 1.12163 11.8268C1.18603 11.9699 1.28318 12.0957 1.40523 12.1943C1.52727 12.2928 1.67078 12.3612 1.82417 12.394L4.89692 13.0527C4.63663 13.8451 4.45077 14.66 4.34175 15.4868C4.32198 15.6387 4.33737 15.7931 4.38673 15.9382C4.43608 16.0832 4.51808 16.2149 4.62641 16.3232L7.72651 19.4233C7.81933 19.5162 7.92954 19.5899 8.05085 19.6402C8.17216 19.6905 8.30219 19.7163 8.43351 19.7163C8.46232 19.7163 8.49113 19.7149 8.52043 19.7124C9.36577 19.6364 10.2008 19.4722 11.012 19.2224L11.6557 22.2256C11.6886 22.379 11.7571 22.5224 11.8556 22.6444C11.9542 22.7664 12.08 22.8635 12.223 22.9279C12.366 22.9923 12.5221 23.0222 12.6788 23.0151C12.8355 23.0081 12.9883 22.9642 13.1249 22.8872L17.0302 20.6846C17.5798 20.3506 18.0092 19.8507 18.2563 19.2569C18.5034 18.6631 18.5556 18.0062 18.4052 17.3809L17.7365 14.6219L18.9735 13.4844C20.5976 12.1193 21.8007 10.3211 22.4429 8.299C23.0851 6.27692 23.1399 4.11407 22.601 2.06205ZM3.57222 10.7232L5.12837 7.96343C5.22502 7.77607 5.3897 7.63279 5.58862 7.56297C5.78754 7.49315 6.00564 7.50208 6.19819 7.58794L7.9156 8.00414L7.2656 8.77593C6.64936 9.5145 6.11637 10.3187 5.67628 11.174L3.57222 10.7232ZM16.0424 18.9454L13.3266 20.477L12.8971 18.4724C13.7677 18.0382 14.5789 17.4938 15.3105 16.8525L16.054 16.1689L16.4575 17.8335C16.5098 18.039 16.4981 18.2557 16.4239 18.4544C16.3497 18.6531 16.2166 18.8244 16.0424 18.9454ZM17.6567 11.98L13.9721 15.3663C12.5137 16.6276 10.7147 17.4293 8.80171 17.6705L6.39741 15.2662C6.72033 13.3482 7.54912 11.551 8.79829 10.0602L10.4766 8.0675C10.5046 8.03824 10.5307 8.00726 10.5548 7.97473L11.9897 6.27105C13.0507 5.01794 14.4252 4.06885 15.9729 3.52069C17.5206 2.97253 19.1861 2.84493 20.7993 3.15093C21.1127 4.76915 20.9864 6.44179 20.4337 7.99465C19.881 9.5475 18.922 10.9238 17.6567 11.98ZM16.7337 5.81629C16.437 5.81629 16.147 5.90426 15.9003 6.06908C15.6537 6.2339 15.4614 6.46817 15.3479 6.74226C15.2343 7.01635 15.2046 7.31795 15.2625 7.60892C15.3204 7.89989 15.4632 8.16717 15.673 8.37695C15.8828 8.58672 16.1501 8.72959 16.4411 8.78746C16.732 8.84534 17.0336 8.81564 17.3077 8.70211C17.5818 8.58857 17.8161 8.39632 17.9809 8.14964C18.1457 7.90297 18.2337 7.61296 18.2337 7.31629C18.2337 7.1193 18.1949 6.92423 18.1195 6.74223C18.0442 6.56024 17.9337 6.39487 17.7944 6.25558C17.6551 6.11628 17.4897 6.00579 17.3077 5.93042C17.1257 5.85504 16.9306 5.81625 16.7336 5.81627L16.7337 5.81629Z" />
+  </svg>
+);
+
+export default Rocket;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Search: React.FCS = (props) => (
+  <svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M25.1375 23.3625L20.5 18.7625C22.3001 16.518 23.1719 13.6691 22.936 10.8016C22.7001 7.93413 21.3746 5.26598 19.2319 3.34581C17.0892 1.42564 14.2923 0.39939 11.4162 0.478091C8.54005 0.556791 5.8034 1.73445 3.76893 3.76893C1.73445 5.8034 0.556791 8.54005 0.478091 11.4162C0.39939 14.2923 1.42564 17.0892 3.34581 19.2319C5.26598 21.3746 7.93413 22.7001 10.8016 22.936C13.6691 23.1719 16.518 22.3001 18.7625 20.5L23.3625 25.1C23.4787 25.2172 23.617 25.3102 23.7693 25.3736C23.9216 25.4371 24.085 25.4697 24.25 25.4697C24.415 25.4697 24.5784 25.4371 24.7307 25.3736C24.883 25.3102 25.0213 25.2172 25.1375 25.1C25.3628 24.8669 25.4887 24.5554 25.4887 24.2313C25.4887 23.9071 25.3628 23.5956 25.1375 23.3625ZM11.75 20.5C10.0194 20.5 8.32769 19.9868 6.88876 19.0254C5.44983 18.0639 4.32832 16.6973 3.66606 15.0985C3.00379 13.4996 2.83051 11.7403 3.16813 10.043C3.50575 8.34563 4.33911 6.78653 5.56282 5.56282C6.78653 4.33911 8.34563 3.50575 10.043 3.16813C11.7403 2.83051 13.4996 3.00379 15.0985 3.66606C16.6973 4.32832 18.0639 5.44983 19.0254 6.88876C19.9868 8.32769 20.5 10.0194 20.5 11.75C20.5 14.0706 19.5781 16.2962 17.9372 17.9372C16.2962 19.5781 14.0706 20.5 11.75 20.5Z" fill="#595959"/>
+  </svg>
+);
+
+export default Search;

package/src/components/atoms/Typography/Hero.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 export interface HeroProps {
-  size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
+  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 }
 
-const SIZE_MAP: Record<string, 'h1' | 'h2' | 'h3' | 'h4' | 'h5'> = {
+const SIZE_MAP: Record<string, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> = {
+  xs: 'h6',
   s: 'h5',
   m: 'h4',
   l: 'h3',

package/src/components/atoms/index.ts

@@ -2,6 +2,7 @@ export { Alert } from "./Alert";
 export { Avatar } from "./Avatar";
 export { Card } from "./Card";
 export { Divider } from "./Divider";
+export { DateTime } from "./DateTime";
 export { Icon } from "./Icon";
 export { Pill } from "./Pill";
 export { Typography } from "./Typography";

package/src/components/molecules/Button/BasicButton.tsx

@@ -14,7 +14,7 @@ export const sizeVariants = {
     font: '16px',
   },
   m: {
-    iconPadding: '28px',
+    iconPadding: '32px',
     padding: '10px 16px',
     ghostPadding: '20px',
     font: '12px',
@@ -65,6 +65,7 @@ export const BasicButton = styled.div<{
   padding: ${(p) => sizeVariants[p.sizeVariant].padding};
   font-weight: var(--font-bold);
   font-size: ${(p) => sizeVariants[p.sizeVariant].font};
+  line-height: ${(p) => sizeVariants[p.sizeVariant].font};
   cursor: pointer;
   overflow: hidden;
   position: relative;

package/src/components/molecules/Button/Button.tsx

@@ -72,7 +72,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {direction !== 'rtl' && (
-          <IconOffset size={size} ghost={Boolean(props.ghost)}>
+          // <IconOffset size={size} ghost={Boolean(props.ghost)}>
             <IconAddition
               icon={icon}
               size={size}
@@ -81,7 +81,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               direction={direction}
               onClick={onIconClick}
             />
-          </IconOffset>
+          // </IconOffset>
         )}
 
         <ButtonComponent
@@ -103,7 +103,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         </ButtonComponent>
 
         {direction === 'rtl' && (
-          <IconOffset size={size} ghost={Boolean(props.ghost)} right>
+          // <IconOffset size={size} ghost={Boolean(props.ghost)} right>
             <IconAddition
               icon={icon}
               size={size}
@@ -112,7 +112,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               direction={direction}
               onClick={onIconClick}
             />
-          </IconOffset>
+          // </IconOffset>
         )}
       </ButtonWrapper>
     );
@@ -152,6 +152,7 @@ const IconOffset = styled.div<{
 }>`
   position: absolute;
   bottom: 0;
+  
   ${(p) =>
     p.right
       ? `right: ${p.ghost ? 0 : sizeVariant[p.size]}`