@edu-tosel/design 1.0.46 → 1.0.48

package/README.md

@@ -1,42 +1,42 @@
-# TOSEL Design Library
-
-TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
-
-## Component
-
-컴포넌트들은 기본적으로 기능 단위로만 구성한다.
-
-도메인은 구분하지 않는다. 단, Layout 컴포넌트에 대해서만 예외적으로 허용한다.
-
-### Board
-
-Board 컴포넌트는 가장 큰 단위의 컨테이너이다.
-
-일반적으로
-
-### Card
-
-Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.
-
-일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.
-
-
-### Layout
-
-Layout 컴포넌트는 여러가지 컴포넌트를 담고 있는 컨테이너이다.
-
-Layout 컴포넌트는 특정 프로젝트에서 반복적으로 사용되는 컴포넌트의 구조를 형성한다.
-
-### Navigation
-
-Navigation 컴포넌트는 여러가지 링크를 담고 있는 컨테이너이다.
-
-각각의 링크 컴포넌트의 스타일링은 buttonClassNames로 전달받는다.
-
-(Next.js의 Link Component와 React의 Link Component는 호환이 되지 않기 때문.)
-
-### Shelf
-
-Shelf 컴포넌트는 Board 컴포넌트 내부에 위치하며 여러가지 Deck 컴포넌트를 담고 있는 컨테이너이다.
-
-Shelf 컴포넌트는 담고있는 Deck 컴포넌트들을 수직 정렬한다.
+# TOSEL Design Library
+
+TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
+
+## Component
+
+컴포넌트들은 기본적으로 기능 단위로만 구성한다.
+
+도메인은 구분하지 않는다. 단, Layout 컴포넌트에 대해서만 예외적으로 허용한다.
+
+### Board
+
+Board 컴포넌트는 가장 큰 단위의 컨테이너이다.
+
+일반적으로
+
+### Card
+
+Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.
+
+일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.
+
+
+### Layout
+
+Layout 컴포넌트는 여러가지 컴포넌트를 담고 있는 컨테이너이다.
+
+Layout 컴포넌트는 특정 프로젝트에서 반복적으로 사용되는 컴포넌트의 구조를 형성한다.
+
+### Navigation
+
+Navigation 컴포넌트는 여러가지 링크를 담고 있는 컨테이너이다.
+
+각각의 링크 컴포넌트의 스타일링은 buttonClassNames로 전달받는다.
+
+(Next.js의 Link Component와 React의 Link Component는 호환이 되지 않기 때문.)
+
+### Shelf
+
+Shelf 컴포넌트는 Board 컴포넌트 내부에 위치하며 여러가지 Deck 컴포넌트를 담고 있는 컨테이너이다.
+
+Shelf 컴포넌트는 담고있는 Deck 컴포넌트들을 수직 정렬한다.

package/asset/SVG.d.ts

@@ -1,11 +1,13 @@
 import Close from "./svg/Close";
 import Direction from "./svg/Direction";
 import Email from "./svg/Email";
+import { IconProps } from "./svg/Icon";
 import Image from "./svg/Image";
 import Notification from "./svg/Notification";
 import Operation from "./svg/Operation";
 import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
+import { SymbolProps } from "./svg/Symbol";
 import TOSEL from "./svg/TOSEL";
 declare const SVG: {
     TOSEL: typeof TOSEL;
@@ -14,6 +16,13 @@ declare const SVG: {
         Right: ({ className }: Direction) => import("react/jsx-runtime").JSX.Element;
     };
     Email: typeof Email;
+    Icon: {
+        Calendar: () => import("react/jsx-runtime").JSX.Element;
+        Notification: () => import("react/jsx-runtime").JSX.Element;
+        Search: () => import("react/jsx-runtime").JSX.Element;
+        Browser: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
+        Gift: () => import("react/jsx-runtime").JSX.Element;
+    };
     Image: typeof Image;
     Notification: typeof Notification;
     Operation: {
@@ -22,5 +31,9 @@ declare const SVG: {
     };
     Phone: typeof Phone;
     Profile: typeof Profile;
+    Symbol: {
+        LessThan: ({ className, onClick }: SymbolProps) => import("react/jsx-runtime").JSX.Element;
+        GreaterThan: ({ className, onClick }: SymbolProps) => import("react/jsx-runtime").JSX.Element;
+    };
 };
 export default SVG;

package/asset/SVG.js

@@ -1,21 +1,25 @@
 import Close from "./svg/Close";
 import Direction from "./svg/Direction";
 import Email from "./svg/Email";
+import Icon from "./svg/Icon";
 import Image from "./svg/Image";
 import Notification from "./svg/Notification";
 import Operation from "./svg/Operation";
 import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
+import Symbol from "./svg/Symbol";
 import TOSEL from "./svg/TOSEL";
 const SVG = {
     TOSEL,
     Close,
     Direction,
     Email,
+    Icon,
     Image,
     Notification,
     Operation,
     Phone,
     Profile,
+    Symbol,
 };
 export default SVG;

package/asset/SVG.tsx

@@ -1,23 +1,27 @@
-import Close from "./svg/Close";
-import Direction from "./svg/Direction";
-import Email from "./svg/Email";
-import Image from "./svg/Image";
-import Notification from "./svg/Notification";
-import Operation from "./svg/Operation";
-import Phone from "./svg/Phone";
-import Profile from "./svg/Profile";
-import TOSEL from "./svg/TOSEL";
-
-const SVG = {
-  TOSEL,
-  Close,
-  Direction,
-  Email,
-  Image,
-  Notification,
-  Operation,
-  Phone,
-  Profile,
-};
-
-export default SVG;
+import Close from "./svg/Close";
+import Direction from "./svg/Direction";
+import Email from "./svg/Email";
+import Icon, { IconProps } from "./svg/Icon";
+import Image from "./svg/Image";
+import Notification from "./svg/Notification";
+import Operation from "./svg/Operation";
+import Phone from "./svg/Phone";
+import Profile from "./svg/Profile";
+import Symbol, { SymbolProps } from "./svg/Symbol";
+import TOSEL from "./svg/TOSEL";
+
+const SVG = {
+  TOSEL,
+  Close,
+  Direction,
+  Email,
+  Icon,
+  Image,
+  Notification,
+  Operation,
+  Phone,
+  Profile,
+  Symbol,
+};
+
+export default SVG;

package/asset/svg/Close.tsx

@@ -1,32 +1,32 @@
-import { OnClick } from "../../interface";
-import { cn } from "../../util";
-
-export default function Close({
-  onClick,
-  className,
-}: {
-  onClick?: OnClick;
-  className?: string;
-}) {
-  const container = {
-    styles: onClick ? "cursor-pointer" : "",
-    className,
-  };
-  return (
-    <svg
-      onClick={onClick}
-      className={cn(container)}
-      xmlns="http://www.w3.org/2000/svg"
-      width="36"
-      height="36"
-      viewBox="0 0 36 36"
-      fill="none"
-    >
-      <circle cx="18" cy="18" r="18" fill="#F0F0F0" />
-      <path
-        d="M19.7797 17.6997L23.8497 13.6397C24.4797 13.0997 24.5597 12.1597 24.0197 11.5297C23.4797 10.8997 22.5397 10.8197 21.9097 11.3597C21.8497 11.4097 21.7997 11.4597 21.7497 11.5197L17.6697 15.5797L13.5997 11.5097C13.0297 10.9097 12.0797 10.8697 11.4797 11.4397C10.8697 11.9997 10.8397 12.9497 11.3997 13.5597C11.4197 13.5897 11.4497 13.6097 11.4697 13.6297L15.5297 17.6997L11.4697 21.7597C10.8897 22.3497 10.8897 23.2897 11.4697 23.8797C12.0597 24.4697 13.0097 24.4697 13.5997 23.8797L17.6597 19.8197L21.7197 23.8897C21.9997 24.1797 22.3797 24.3397 22.7797 24.3297C23.6097 24.3297 24.2797 23.6597 24.2797 22.8297C24.2797 22.4297 24.1197 22.0497 23.8397 21.7697L19.7797 17.6997Z"
-        fill="#7F7F7F"
-      />
-    </svg>
-  );
-}
+import { OnClick } from "../../interface";
+import { cn } from "../../util";
+
+export default function Close({
+  onClick,
+  className,
+}: {
+  onClick?: OnClick;
+  className?: string;
+}) {
+  const container = {
+    styles: onClick ? "cursor-pointer" : "",
+    className,
+  };
+  return (
+    <svg
+      onClick={onClick}
+      className={cn(container)}
+      xmlns="http://www.w3.org/2000/svg"
+      width="36"
+      height="36"
+      viewBox="0 0 36 36"
+      fill="none"
+    >
+      <circle cx="18" cy="18" r="18" fill="#F0F0F0" />
+      <path
+        d="M19.7797 17.6997L23.8497 13.6397C24.4797 13.0997 24.5597 12.1597 24.0197 11.5297C23.4797 10.8997 22.5397 10.8197 21.9097 11.3597C21.8497 11.4097 21.7997 11.4597 21.7497 11.5197L17.6697 15.5797L13.5997 11.5097C13.0297 10.9097 12.0797 10.8697 11.4797 11.4397C10.8697 11.9997 10.8397 12.9497 11.3997 13.5597C11.4197 13.5897 11.4497 13.6097 11.4697 13.6297L15.5297 17.6997L11.4697 21.7597C10.8897 22.3497 10.8897 23.2897 11.4697 23.8797C12.0597 24.4697 13.0097 24.4697 13.5997 23.8797L17.6597 19.8197L21.7197 23.8897C21.9997 24.1797 22.3797 24.3397 22.7797 24.3297C23.6097 24.3297 24.2797 23.6597 24.2797 22.8297C24.2797 22.4297 24.1197 22.0497 23.8397 21.7697L19.7797 17.6997Z"
+        fill="#7F7F7F"
+      />
+    </svg>
+  );
+}

package/asset/svg/Direction.tsx

@@ -1,36 +1,36 @@
-interface Direction {
-  className?: string;
-}
-function Right({ className }: Direction) {
-  return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
-        fill="#105652"
-        stroke="#105652"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M12.75 15L15.75 12M15.75 12L12.75 9M15.75 12H8.25"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-const Direction = {
-  Right,
-};
-export default Direction;
+interface Direction {
+  className?: string;
+}
+function Right({ className }: Direction) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
+        fill="#105652"
+        stroke="#105652"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.75 15L15.75 12M15.75 12L12.75 9M15.75 12H8.25"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+const Direction = {
+  Right,
+};
+export default Direction;

package/asset/svg/Email.tsx

@@ -1,20 +1,20 @@
-export default function Email() {
-  return (
-    <svg
-      className="mr-3"
-      xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="25"
-      viewBox="0 0 25 25"
-      fill="none"
-    >
-      <path
-        d="M22.6562 9.37501V10.3188C22.6563 10.7419 22.5417 11.1572 22.3248 11.5205C22.1078 11.8838 21.7965 12.1816 21.424 12.3823L14.676 16.0156M2.34375 9.37501V10.3188C2.34373 10.7419 2.45828 11.1572 2.67525 11.5205C2.89221 11.8838 3.20348 12.1816 3.57604 12.3823L10.324 16.0156M10.324 16.0156L11.3885 15.4427C11.7301 15.2587 12.112 15.1624 12.5 15.1624C12.888 15.1624 13.2699 15.2587 13.6115 15.4427L14.6771 16.0156L19.5312 18.6302M10.324 16.0156L5.46875 18.6302M22.6562 20.3125C22.6562 20.9341 22.4093 21.5303 21.9698 21.9698C21.5302 22.4093 20.9341 22.6563 20.3125 22.6563H4.6875C4.0659 22.6563 3.46976 22.4093 3.03022 21.9698C2.59068 21.5303 2.34375 20.9341 2.34375 20.3125V9.21251C2.34373 8.78934 2.45828 8.37407 2.67525 8.01075C2.89221 7.64744 3.20348 7.34964 3.57604 7.14897L11.3885 2.94168C11.7301 2.75769 12.112 2.66138 12.5 2.66138C12.888 2.66138 13.2699 2.75769 13.6115 2.94168L21.424 7.14897C21.7964 7.34956 22.1075 7.64719 22.3245 8.01031C22.5414 8.37342 22.6561 8.78848 22.6562 9.21147V20.3125Z"
-        stroke="#105652"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
+export default function Email() {
+  return (
+    <svg
+      className="mr-3"
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M22.6562 9.37501V10.3188C22.6563 10.7419 22.5417 11.1572 22.3248 11.5205C22.1078 11.8838 21.7965 12.1816 21.424 12.3823L14.676 16.0156M2.34375 9.37501V10.3188C2.34373 10.7419 2.45828 11.1572 2.67525 11.5205C2.89221 11.8838 3.20348 12.1816 3.57604 12.3823L10.324 16.0156M10.324 16.0156L11.3885 15.4427C11.7301 15.2587 12.112 15.1624 12.5 15.1624C12.888 15.1624 13.2699 15.2587 13.6115 15.4427L14.6771 16.0156L19.5312 18.6302M10.324 16.0156L5.46875 18.6302M22.6562 20.3125C22.6562 20.9341 22.4093 21.5303 21.9698 21.9698C21.5302 22.4093 20.9341 22.6563 20.3125 22.6563H4.6875C4.0659 22.6563 3.46976 22.4093 3.03022 21.9698C2.59068 21.5303 2.34375 20.9341 2.34375 20.3125V9.21251C2.34373 8.78934 2.45828 8.37407 2.67525 8.01075C2.89221 7.64744 3.20348 7.34964 3.57604 7.14897L11.3885 2.94168C11.7301 2.75769 12.112 2.66138 12.5 2.66138C12.888 2.66138 13.2699 2.75769 13.6115 2.94168L21.424 7.14897C21.7964 7.34956 22.1075 7.64719 22.3245 8.01031C22.5414 8.37342 22.6561 8.78848 22.6562 9.21147V20.3125Z"
+        stroke="#105652"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/asset/svg/Icon.d.ts

@@ -0,0 +1,17 @@
+import { OnClick } from "../../interface";
+export interface IconProps {
+    onClick: OnClick;
+}
+declare const Icon: {
+    Calendar: typeof Calendar;
+    Notification: typeof Notification;
+    Search: typeof Search;
+    Browser: typeof Browser;
+    Gift: typeof Gift;
+};
+export default Icon;
+declare function Calendar(): import("react/jsx-runtime").JSX.Element;
+declare function Notification(): import("react/jsx-runtime").JSX.Element;
+declare function Search(): import("react/jsx-runtime").JSX.Element;
+declare function Browser({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Gift(): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Icon.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+const Icon = {
+    Calendar,
+    Notification,
+    Search,
+    Browser,
+    Gift,
+};
+export default Icon;
+function Calendar() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "35", height: "35", viewBox: "0 0 35 35", fill: "none", children: [_jsx("path", { d: "M25.1064 33.8412C20.0919 33.8412 15.9928 29.7599 15.9928 24.723C15.9928 19.686 20.072 15.6047 25.1064 15.6047C30.1408 15.6047 34.2201 19.686 34.2201 24.723C34.2201 29.7599 30.1408 33.8412 25.1064 33.8412ZM25.1064 16.6001C20.6292 16.6001 16.9877 20.2435 16.9877 24.723C16.9877 29.2025 20.6292 32.8458 25.1064 32.8458C29.5837 32.8458 33.2251 29.2025 33.2251 24.723C33.2251 20.2435 29.5837 16.6001 25.1064 16.6001Z", fill: "white" }), _jsx("path", { d: "M29.2454 29.3019C29.126 29.3019 28.9867 29.2621 28.8872 29.1626L24.8279 25.1012C24.8279 25.1012 24.6886 24.8822 24.6886 24.7428V20.0642C24.6886 19.7855 24.9075 19.5665 25.1861 19.5665C25.4647 19.5665 25.6835 19.7855 25.6835 20.0642V24.5437L29.6036 28.4658C29.8026 28.6648 29.8026 28.9834 29.6036 29.1626C29.5041 29.2621 29.3847 29.3019 29.2454 29.3019Z", fill: "white" }), _jsx("path", { d: "M20.6491 5.11266H8.57059C8.29201 5.11266 8.07312 4.89366 8.07312 4.61493C8.07312 4.33621 8.29201 4.11721 8.57059 4.11721H20.6491C20.9277 4.11721 21.1466 4.33621 21.1466 4.61493C21.1466 4.89366 20.9277 5.11266 20.6491 5.11266Z", fill: "white" }), _jsx("path", { d: "M28.6286 11.2446H0.611116C0.332534 11.2446 0.113647 11.0256 0.113647 10.7469V4.61493C0.113647 4.33621 0.332534 4.11721 0.611116 4.11721H5.06844C5.34702 4.11721 5.56591 4.33621 5.56591 4.61493C5.56591 4.89366 5.34702 5.11266 5.06844 5.11266H1.10859V10.2492H28.1311V5.11266H24.1712C23.8927 5.11266 23.6738 4.89366 23.6738 4.61493C23.6738 4.33621 23.8927 4.11721 24.1712 4.11721H28.6286C28.9072 4.11721 29.126 4.33621 29.126 4.61493V10.7469C29.126 11.0256 28.9072 11.2446 28.6286 11.2446Z", fill: "white" }), _jsx("path", { d: "M16.4902 26.5944H2.00394C1.72536 26.5944 1.50647 26.3754 1.50647 26.0967V10.747C1.50647 10.4682 1.72536 10.2492 2.00394 10.2492H27.2157C27.4942 10.2492 27.7131 10.4682 27.7131 10.747V16.3812C27.7131 16.6599 27.4942 16.8789 27.2157 16.8789C26.9371 16.8789 26.7182 16.6599 26.7182 16.3812V11.2447H2.50141V25.599H16.4902C16.7688 25.599 16.9877 25.818 16.9877 26.0967C16.9877 26.3754 16.7688 26.5944 16.4902 26.5944Z", fill: "white" }), _jsx("path", { d: "M24.1514 8.17859H20.6492C20.3706 8.17859 20.1517 7.95959 20.1517 7.68086V1.54892C20.1517 1.2702 20.3706 1.0512 20.6492 1.0512H24.1514C24.43 1.0512 24.6489 1.2702 24.6489 1.54892V7.68086C24.6489 7.95959 24.43 8.17859 24.1514 8.17859ZM21.1467 7.18314H23.6539V2.04665H21.1467V7.18314Z", fill: "white" }), _jsx("path", { d: "M8.57057 8.17859H5.06839C4.78981 8.17859 4.57092 7.95959 4.57092 7.68086V1.54892C4.57092 1.2702 4.78981 1.0512 5.06839 1.0512H8.57057C8.84916 1.0512 9.06804 1.2702 9.06804 1.54892V7.68086C9.06804 7.95959 8.84916 8.17859 8.57057 8.17859ZM5.56586 7.18314H8.0731V2.04665H5.56586V7.18314Z", fill: "white" })] }));
+}
+function Notification() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "35", height: "35", viewBox: "0 0 35 35", fill: "none", children: [_jsx("path", { d: "M25.4008 28.4473H8.58633C7.92967 28.4473 7.3128 28.1088 6.97452 27.5514C6.63624 26.9939 6.59645 26.2971 6.89493 25.6998C8.42713 22.6737 9.22309 19.2693 9.22309 15.8847V15.6458C9.22309 13.5355 10.0389 11.5844 11.5512 10.1112C13.0436 8.63791 15.0335 7.86146 17.1428 7.88137C21.3414 7.96101 24.764 11.5446 24.764 15.8847C24.764 19.2693 25.5799 22.6737 27.0922 25.6998C27.3906 26.2971 27.3708 26.9939 27.0126 27.5514C26.6544 28.1088 26.0574 28.4473 25.4008 28.4473ZM17.0035 8.85691C15.2126 8.85691 13.5411 9.53381 12.2676 10.7881C10.9543 12.0821 10.2379 13.7943 10.2379 15.6259V15.8648C10.2379 19.4086 9.40217 22.9723 7.79037 26.1378C7.65108 26.4166 7.65108 26.755 7.83017 27.0138C7.98936 27.2925 8.28784 27.4518 8.60622 27.4518H25.4207C25.7391 27.4518 26.0176 27.2925 26.1967 27.0138C26.3559 26.7351 26.3758 26.4166 26.2365 26.1378C24.6446 22.9723 23.789 19.4086 23.789 15.8648C23.789 12.0622 20.8042 8.91663 17.1428 8.85691C17.103 8.85691 17.0632 8.85691 17.0234 8.85691H17.0035Z", fill: "white" }), _jsx("path", { d: "M17.0035 32.0704C15.1927 32.0704 13.7401 30.5971 13.7401 28.8053V27.9493C13.7401 27.6705 13.959 27.4515 14.2376 27.4515C14.5162 27.4515 14.7351 27.6705 14.7351 27.9493V28.8053C14.7351 30.0596 15.7499 31.075 17.0035 31.075C18.2571 31.075 19.272 30.0596 19.272 28.8053V27.9493C19.272 27.6705 19.4909 27.4515 19.7694 27.4515C20.048 27.4515 20.2669 27.6705 20.2669 27.9493V28.8053C20.2669 30.6171 18.7944 32.0704 17.0035 32.0704Z", fill: "white" }), _jsx("path", { d: "M17.0035 8.85671C15.4514 8.85671 14.1978 7.60245 14.1978 6.04956C14.1978 4.49666 15.4514 3.2424 17.0035 3.2424C18.5556 3.2424 19.8092 4.49666 19.8092 6.04956C19.8092 7.60245 18.5556 8.85671 17.0035 8.85671ZM17.0035 4.23785C16.0085 4.23785 15.1927 5.05411 15.1927 6.04956C15.1927 7.045 16.0085 7.86127 17.0035 7.86127C17.9984 7.86127 18.8143 7.045 18.8143 6.04956C18.8143 5.05411 17.9984 4.23785 17.0035 4.23785Z", fill: "white" })] }));
+}
+function Search() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "35", height: "36", viewBox: "0 0 35 36", fill: "none", children: [_jsx("path", { d: "M28.9758 32.4908C28.4983 32.4908 28.0008 32.3116 27.6426 31.9334L19.1658 23.4522C18.8673 23.1535 18.8673 22.6757 19.1658 22.3771L21.673 19.8686C21.9715 19.5699 22.449 19.5699 22.7475 19.8686L31.2244 28.3498C31.9607 29.0864 31.9607 30.3008 31.2244 31.0375L30.3091 31.9533C29.931 32.3315 29.4534 32.5107 28.9758 32.5107V32.4908ZM20.0214 22.9146L28.3391 31.2365C28.6973 31.5949 29.2743 31.5949 29.6126 31.2365L30.5279 30.3207C30.8861 29.9624 30.8861 29.385 30.5279 29.0466L22.2103 20.7246L20.0214 22.9146Z", fill: "white" }), _jsx("path", { d: "M19.8424 22.8748C19.723 22.8748 19.5837 22.835 19.4842 22.7355L17.7132 20.9636C17.5142 20.7645 17.5142 20.446 17.7132 20.2668C17.9122 20.0876 18.2306 20.0677 18.4097 20.2668L19.8225 21.6803L20.9567 20.5455L19.5439 19.132C19.3449 18.9329 19.3449 18.6143 19.5439 18.4352C19.7429 18.256 20.0613 18.2361 20.2403 18.4352L22.0113 20.2071C22.0113 20.2071 22.1506 20.4261 22.1506 20.5654C22.1506 20.7048 22.0909 20.8242 22.0113 20.9238L20.1807 22.7554C20.1807 22.7554 19.9618 22.8948 19.8225 22.8948L19.8424 22.8748Z", fill: "white" }), _jsx("path", { d: "M12.241 23.0939C9.63424 23.0939 7.04741 22.0984 5.05754 20.1274C1.09768 16.1656 1.09768 9.73499 5.05754 5.77312C9.01739 1.81124 15.4447 1.81124 19.4045 5.77312C23.3644 9.73499 23.3644 16.1656 19.4045 20.1274C17.4346 22.0984 14.8278 23.0939 12.2211 23.0939H12.241ZM12.241 3.78223C9.89293 3.78223 7.54487 4.67813 5.77389 6.46993C2.21201 10.0336 2.21201 15.847 5.77389 19.4306C9.33576 22.9943 15.1462 22.9943 18.728 19.4306C22.2899 15.8669 22.2899 10.0535 18.728 6.46993C16.9371 4.67813 14.589 3.78223 12.2609 3.78223H12.241Z", fill: "white" })] }));
+}
+function Browser({ onClick }) {
+    const container = {
+        cursor: "cursor-pointer",
+    };
+    return (_jsxs("svg", { className: cn(container), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "35", height: "35", viewBox: "0 0 35 35", fill: "none", children: [_jsx("path", { d: "M29.0718 28.5227H5.31267C3.89986 28.5227 2.74573 27.368 2.74573 25.9544V7.87715C2.74573 6.46362 3.89986 5.3089 5.31267 5.3089H29.0718C30.4846 5.3089 31.6387 6.46362 31.6387 7.87715V25.9544C31.6387 27.368 30.4846 28.5227 29.0718 28.5227ZM5.31267 6.30434C4.43712 6.30434 3.74067 7.00116 3.74067 7.87715V25.9544C3.74067 26.8304 4.43712 27.5272 5.31267 27.5272H29.0718C29.9473 27.5272 30.6438 26.8304 30.6438 25.9544V7.87715C30.6438 7.00116 29.9473 6.30434 29.0718 6.30434H5.31267Z", fill: "white" }), _jsx("path", { d: "M31.1413 10.4056H3.2432C2.96461 10.4056 2.74573 10.1866 2.74573 9.90788C2.74573 9.62915 2.96461 9.41016 3.2432 9.41016H31.1413C31.4198 9.41016 31.6387 9.62915 31.6387 9.90788C31.6387 10.1866 31.4198 10.4056 31.1413 10.4056Z", fill: "white" }), _jsx("path", { d: "M28.7932 8.43452C28.7932 8.43452 28.7335 8.43452 28.6937 8.43452C28.6539 8.43452 28.6341 8.43452 28.5943 8.41461C28.5744 8.41461 28.5346 8.3947 28.5147 8.37479C28.4948 8.37479 28.455 8.33497 28.4351 8.31506C28.3356 8.23543 28.2958 8.09606 28.2958 7.9567C28.2958 7.89698 28.2958 7.83725 28.3356 7.77752C28.3555 7.7178 28.3953 7.65807 28.4351 7.61825C28.5744 7.47889 28.7932 7.43907 28.9723 7.51871C29.032 7.53862 29.0917 7.57843 29.1315 7.61825C29.1713 7.65807 29.2111 7.7178 29.231 7.77752C29.2509 7.83725 29.2708 7.89698 29.2708 7.9567C29.2708 8.09606 29.2111 8.21552 29.1315 8.31506C29.0519 8.41461 28.9126 8.45442 28.7932 8.45442V8.43452Z", fill: "white" }), _jsx("path", { d: "M26.9228 8.43461C26.9228 8.43461 26.8631 8.43461 26.8233 8.43461C26.8034 8.43461 26.7636 8.43461 26.7238 8.4147C26.7039 8.4147 26.6641 8.39479 26.6442 8.37488C26.6243 8.37488 26.6044 8.33506 26.5646 8.31515C26.4651 8.21561 26.4253 8.09615 26.4253 7.95679C26.4253 7.89707 26.4253 7.83734 26.4651 7.77761C26.485 7.71789 26.5248 7.65816 26.5646 7.61834C26.684 7.49889 26.8432 7.45907 27.0024 7.47898C27.0422 7.47898 27.0621 7.49889 27.1019 7.5188C27.1218 7.5188 27.1615 7.53871 27.1814 7.55861C27.2013 7.57852 27.2411 7.59843 27.261 7.61834C27.3008 7.65816 27.3406 7.71789 27.3605 7.77761C27.3804 7.83734 27.4003 7.89707 27.4003 7.95679C27.4003 8.09615 27.3406 8.21561 27.261 8.31515C27.2411 8.33506 27.2212 8.35497 27.1814 8.37488C27.1615 8.37488 27.1218 8.4147 27.1019 8.4147C27.082 8.4147 27.0422 8.4147 27.0024 8.43461C26.9825 8.43461 26.9427 8.43461 26.9029 8.43461H26.9228Z", fill: "white" }), _jsx("path", { d: "M25.0722 8.43453C24.9528 8.43453 24.8135 8.39471 24.714 8.29517C24.6145 8.19562 24.5747 8.07617 24.5747 7.93681C24.5747 7.87708 24.5747 7.81735 24.6145 7.75762C24.6344 7.6979 24.6742 7.63817 24.714 7.59835C24.7538 7.55854 24.8135 7.51872 24.8732 7.49881C25.0523 7.41917 25.2712 7.45899 25.4105 7.59835C25.4502 7.63817 25.4901 7.6979 25.51 7.75762C25.5298 7.81735 25.5497 7.87708 25.5497 7.93681C25.5497 8.07617 25.49 8.19562 25.4105 8.29517C25.3906 8.31507 25.3508 8.33498 25.3309 8.35489C25.311 8.35489 25.2712 8.39471 25.2513 8.39471C25.2314 8.39471 25.1916 8.39471 25.1518 8.41462C25.1319 8.41462 25.0921 8.41462 25.0523 8.41462L25.0722 8.43453Z", fill: "white" })] }));
+}
+function Gift() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "35", height: "35", viewBox: "0 0 35 35", fill: "none", children: [_jsx("path", { d: "M30.0283 19.8574H3.90128C3.62269 19.8574 3.40381 19.6384 3.40381 19.3597V14.5219C3.40381 14.2431 3.62269 14.0241 3.90128 14.0241H30.0283C30.3069 14.0241 30.5258 14.2431 30.5258 14.5219V19.3597C30.5258 19.6384 30.3069 19.8574 30.0283 19.8574ZM4.39875 18.862H29.5309V15.0196H4.39875V18.862Z", fill: "white" }), _jsx("path", { d: "M28.9141 31.6831H5.03555C4.75697 31.6831 4.53809 31.4641 4.53809 31.1854V19.3794C4.53809 19.1007 4.75697 18.8817 5.03555 18.8817H28.9141C29.1926 18.8817 29.4115 19.1007 29.4115 19.3794V31.1854C29.4115 31.4641 29.1926 31.6831 28.9141 31.6831ZM5.53302 30.6877H28.4166V19.8772H5.53302V30.6877Z", fill: "white" }), _jsx("path", { d: "M28.9141 31.6831H5.03555C4.75697 31.6831 4.53809 31.4641 4.53809 31.1854V19.3794C4.53809 19.1007 4.75697 18.8817 5.03555 18.8817H28.9141C29.1926 18.8817 29.4115 19.1007 29.4115 19.3794V31.1854C29.4115 31.4641 29.1926 31.6831 28.9141 31.6831ZM5.53302 30.6877H28.4166V19.8772H5.53302V30.6877Z", fill: "white" }), _jsx("path", { d: "M16.2385 15.0392H11.4628C9.91073 15.0392 8.6571 13.7849 8.6571 12.2321C8.6571 10.6792 9.91073 9.4249 11.4628 9.4249H11.6021C12.0996 9.4249 12.5971 9.50453 13.0547 9.64389C15.2237 10.281 16.736 12.3117 16.736 14.5614C16.736 14.8401 16.5171 15.0591 16.2385 15.0591V15.0392ZM11.4628 10.4004C10.4679 10.4004 9.63214 11.2167 9.63214 12.2321C9.63214 13.2474 10.448 14.0637 11.4628 14.0637H15.7013C15.5023 12.451 14.3481 11.0574 12.7761 10.5796C12.3981 10.4602 12.0001 10.4004 11.6021 10.4004H11.4628Z", fill: "white" }), _jsx("path", { d: "M22.0091 15.0394H16.2384C15.9599 15.0394 15.741 14.8204 15.741 14.5416C15.741 11.177 18.487 8.4296 21.8499 8.4296H22.0091C22.9642 8.4296 23.8796 8.84768 24.4964 9.5644C25.0138 10.1617 25.2924 10.9381 25.2924 11.7345C25.2924 13.5462 23.8199 15.0394 21.9892 15.0394H22.0091ZM16.7558 14.0439H22.0091C23.2826 14.0439 24.3173 13.0086 24.3173 11.7345C24.3173 11.177 24.1183 10.6395 23.7602 10.2214C23.3224 9.72367 22.6856 9.42504 22.0091 9.42504H21.8499C19.2034 9.42504 17.0145 11.4557 16.7558 14.0439Z", fill: "white" }), _jsx("path", { d: "M19.1038 31.6833H14.9649C14.6863 31.6833 14.4674 31.4643 14.4674 31.1856V14.5418C14.4674 14.263 14.6863 14.044 14.9649 14.044H19.1038C19.3824 14.044 19.6013 14.263 19.6013 14.5418V31.1856C19.6013 31.4643 19.3824 31.6833 19.1038 31.6833ZM15.4623 30.6879H18.6064V15.0395H15.4623V30.6879Z", fill: "white" }), _jsx("path", { d: "M17.0544 12.1326C16.7758 12.1326 16.5569 11.9136 16.5569 11.6349V4.0496C16.5569 3.77088 16.7758 3.55188 17.0544 3.55188C17.3329 3.55188 17.5518 3.77088 17.5518 4.0496V11.6349C17.5518 11.9136 17.3329 12.1326 17.0544 12.1326Z", fill: "white" })] }));
+}

package/asset/svg/Icon.tsx

@@ -0,0 +1,186 @@
+import { OnClick } from "../../interface";
+import { cn } from "../../util";
+
+export interface IconProps {
+  onClick: OnClick;
+}
+
+const Icon = {
+  Calendar,
+  Notification,
+  Search,
+  Browser,
+  Gift,
+};
+
+export default Icon;
+
+function Calendar() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="35"
+      height="35"
+      viewBox="0 0 35 35"
+      fill="none"
+    >
+      <path
+        d="M25.1064 33.8412C20.0919 33.8412 15.9928 29.7599 15.9928 24.723C15.9928 19.686 20.072 15.6047 25.1064 15.6047C30.1408 15.6047 34.2201 19.686 34.2201 24.723C34.2201 29.7599 30.1408 33.8412 25.1064 33.8412ZM25.1064 16.6001C20.6292 16.6001 16.9877 20.2435 16.9877 24.723C16.9877 29.2025 20.6292 32.8458 25.1064 32.8458C29.5837 32.8458 33.2251 29.2025 33.2251 24.723C33.2251 20.2435 29.5837 16.6001 25.1064 16.6001Z"
+        fill="white"
+      />
+      <path
+        d="M29.2454 29.3019C29.126 29.3019 28.9867 29.2621 28.8872 29.1626L24.8279 25.1012C24.8279 25.1012 24.6886 24.8822 24.6886 24.7428V20.0642C24.6886 19.7855 24.9075 19.5665 25.1861 19.5665C25.4647 19.5665 25.6835 19.7855 25.6835 20.0642V24.5437L29.6036 28.4658C29.8026 28.6648 29.8026 28.9834 29.6036 29.1626C29.5041 29.2621 29.3847 29.3019 29.2454 29.3019Z"
+        fill="white"
+      />
+      <path
+        d="M20.6491 5.11266H8.57059C8.29201 5.11266 8.07312 4.89366 8.07312 4.61493C8.07312 4.33621 8.29201 4.11721 8.57059 4.11721H20.6491C20.9277 4.11721 21.1466 4.33621 21.1466 4.61493C21.1466 4.89366 20.9277 5.11266 20.6491 5.11266Z"
+        fill="white"
+      />
+      <path
+        d="M28.6286 11.2446H0.611116C0.332534 11.2446 0.113647 11.0256 0.113647 10.7469V4.61493C0.113647 4.33621 0.332534 4.11721 0.611116 4.11721H5.06844C5.34702 4.11721 5.56591 4.33621 5.56591 4.61493C5.56591 4.89366 5.34702 5.11266 5.06844 5.11266H1.10859V10.2492H28.1311V5.11266H24.1712C23.8927 5.11266 23.6738 4.89366 23.6738 4.61493C23.6738 4.33621 23.8927 4.11721 24.1712 4.11721H28.6286C28.9072 4.11721 29.126 4.33621 29.126 4.61493V10.7469C29.126 11.0256 28.9072 11.2446 28.6286 11.2446Z"
+        fill="white"
+      />
+      <path
+        d="M16.4902 26.5944H2.00394C1.72536 26.5944 1.50647 26.3754 1.50647 26.0967V10.747C1.50647 10.4682 1.72536 10.2492 2.00394 10.2492H27.2157C27.4942 10.2492 27.7131 10.4682 27.7131 10.747V16.3812C27.7131 16.6599 27.4942 16.8789 27.2157 16.8789C26.9371 16.8789 26.7182 16.6599 26.7182 16.3812V11.2447H2.50141V25.599H16.4902C16.7688 25.599 16.9877 25.818 16.9877 26.0967C16.9877 26.3754 16.7688 26.5944 16.4902 26.5944Z"
+        fill="white"
+      />
+      <path
+        d="M24.1514 8.17859H20.6492C20.3706 8.17859 20.1517 7.95959 20.1517 7.68086V1.54892C20.1517 1.2702 20.3706 1.0512 20.6492 1.0512H24.1514C24.43 1.0512 24.6489 1.2702 24.6489 1.54892V7.68086C24.6489 7.95959 24.43 8.17859 24.1514 8.17859ZM21.1467 7.18314H23.6539V2.04665H21.1467V7.18314Z"
+        fill="white"
+      />
+      <path
+        d="M8.57057 8.17859H5.06839C4.78981 8.17859 4.57092 7.95959 4.57092 7.68086V1.54892C4.57092 1.2702 4.78981 1.0512 5.06839 1.0512H8.57057C8.84916 1.0512 9.06804 1.2702 9.06804 1.54892V7.68086C9.06804 7.95959 8.84916 8.17859 8.57057 8.17859ZM5.56586 7.18314H8.0731V2.04665H5.56586V7.18314Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+function Notification() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="35"
+      height="35"
+      viewBox="0 0 35 35"
+      fill="none"
+    >
+      <path
+        d="M25.4008 28.4473H8.58633C7.92967 28.4473 7.3128 28.1088 6.97452 27.5514C6.63624 26.9939 6.59645 26.2971 6.89493 25.6998C8.42713 22.6737 9.22309 19.2693 9.22309 15.8847V15.6458C9.22309 13.5355 10.0389 11.5844 11.5512 10.1112C13.0436 8.63791 15.0335 7.86146 17.1428 7.88137C21.3414 7.96101 24.764 11.5446 24.764 15.8847C24.764 19.2693 25.5799 22.6737 27.0922 25.6998C27.3906 26.2971 27.3708 26.9939 27.0126 27.5514C26.6544 28.1088 26.0574 28.4473 25.4008 28.4473ZM17.0035 8.85691C15.2126 8.85691 13.5411 9.53381 12.2676 10.7881C10.9543 12.0821 10.2379 13.7943 10.2379 15.6259V15.8648C10.2379 19.4086 9.40217 22.9723 7.79037 26.1378C7.65108 26.4166 7.65108 26.755 7.83017 27.0138C7.98936 27.2925 8.28784 27.4518 8.60622 27.4518H25.4207C25.7391 27.4518 26.0176 27.2925 26.1967 27.0138C26.3559 26.7351 26.3758 26.4166 26.2365 26.1378C24.6446 22.9723 23.789 19.4086 23.789 15.8648C23.789 12.0622 20.8042 8.91663 17.1428 8.85691C17.103 8.85691 17.0632 8.85691 17.0234 8.85691H17.0035Z"
+        fill="white"
+      />
+      <path
+        d="M17.0035 32.0704C15.1927 32.0704 13.7401 30.5971 13.7401 28.8053V27.9493C13.7401 27.6705 13.959 27.4515 14.2376 27.4515C14.5162 27.4515 14.7351 27.6705 14.7351 27.9493V28.8053C14.7351 30.0596 15.7499 31.075 17.0035 31.075C18.2571 31.075 19.272 30.0596 19.272 28.8053V27.9493C19.272 27.6705 19.4909 27.4515 19.7694 27.4515C20.048 27.4515 20.2669 27.6705 20.2669 27.9493V28.8053C20.2669 30.6171 18.7944 32.0704 17.0035 32.0704Z"
+        fill="white"
+      />
+      <path
+        d="M17.0035 8.85671C15.4514 8.85671 14.1978 7.60245 14.1978 6.04956C14.1978 4.49666 15.4514 3.2424 17.0035 3.2424C18.5556 3.2424 19.8092 4.49666 19.8092 6.04956C19.8092 7.60245 18.5556 8.85671 17.0035 8.85671ZM17.0035 4.23785C16.0085 4.23785 15.1927 5.05411 15.1927 6.04956C15.1927 7.045 16.0085 7.86127 17.0035 7.86127C17.9984 7.86127 18.8143 7.045 18.8143 6.04956C18.8143 5.05411 17.9984 4.23785 17.0035 4.23785Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+function Search() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="35"
+      height="36"
+      viewBox="0 0 35 36"
+      fill="none"
+    >
+      <path
+        d="M28.9758 32.4908C28.4983 32.4908 28.0008 32.3116 27.6426 31.9334L19.1658 23.4522C18.8673 23.1535 18.8673 22.6757 19.1658 22.3771L21.673 19.8686C21.9715 19.5699 22.449 19.5699 22.7475 19.8686L31.2244 28.3498C31.9607 29.0864 31.9607 30.3008 31.2244 31.0375L30.3091 31.9533C29.931 32.3315 29.4534 32.5107 28.9758 32.5107V32.4908ZM20.0214 22.9146L28.3391 31.2365C28.6973 31.5949 29.2743 31.5949 29.6126 31.2365L30.5279 30.3207C30.8861 29.9624 30.8861 29.385 30.5279 29.0466L22.2103 20.7246L20.0214 22.9146Z"
+        fill="white"
+      />
+      <path
+        d="M19.8424 22.8748C19.723 22.8748 19.5837 22.835 19.4842 22.7355L17.7132 20.9636C17.5142 20.7645 17.5142 20.446 17.7132 20.2668C17.9122 20.0876 18.2306 20.0677 18.4097 20.2668L19.8225 21.6803L20.9567 20.5455L19.5439 19.132C19.3449 18.9329 19.3449 18.6143 19.5439 18.4352C19.7429 18.256 20.0613 18.2361 20.2403 18.4352L22.0113 20.2071C22.0113 20.2071 22.1506 20.4261 22.1506 20.5654C22.1506 20.7048 22.0909 20.8242 22.0113 20.9238L20.1807 22.7554C20.1807 22.7554 19.9618 22.8948 19.8225 22.8948L19.8424 22.8748Z"
+        fill="white"
+      />
+      <path
+        d="M12.241 23.0939C9.63424 23.0939 7.04741 22.0984 5.05754 20.1274C1.09768 16.1656 1.09768 9.73499 5.05754 5.77312C9.01739 1.81124 15.4447 1.81124 19.4045 5.77312C23.3644 9.73499 23.3644 16.1656 19.4045 20.1274C17.4346 22.0984 14.8278 23.0939 12.2211 23.0939H12.241ZM12.241 3.78223C9.89293 3.78223 7.54487 4.67813 5.77389 6.46993C2.21201 10.0336 2.21201 15.847 5.77389 19.4306C9.33576 22.9943 15.1462 22.9943 18.728 19.4306C22.2899 15.8669 22.2899 10.0535 18.728 6.46993C16.9371 4.67813 14.589 3.78223 12.2609 3.78223H12.241Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+function Browser({ onClick }: IconProps) {
+  const container = {
+    cursor: "cursor-pointer",
+  };
+  return (
+    <svg
+      className={cn(container)}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width="35"
+      height="35"
+      viewBox="0 0 35 35"
+      fill="none"
+    >
+      <path
+        d="M29.0718 28.5227H5.31267C3.89986 28.5227 2.74573 27.368 2.74573 25.9544V7.87715C2.74573 6.46362 3.89986 5.3089 5.31267 5.3089H29.0718C30.4846 5.3089 31.6387 6.46362 31.6387 7.87715V25.9544C31.6387 27.368 30.4846 28.5227 29.0718 28.5227ZM5.31267 6.30434C4.43712 6.30434 3.74067 7.00116 3.74067 7.87715V25.9544C3.74067 26.8304 4.43712 27.5272 5.31267 27.5272H29.0718C29.9473 27.5272 30.6438 26.8304 30.6438 25.9544V7.87715C30.6438 7.00116 29.9473 6.30434 29.0718 6.30434H5.31267Z"
+        fill="white"
+      />
+      <path
+        d="M31.1413 10.4056H3.2432C2.96461 10.4056 2.74573 10.1866 2.74573 9.90788C2.74573 9.62915 2.96461 9.41016 3.2432 9.41016H31.1413C31.4198 9.41016 31.6387 9.62915 31.6387 9.90788C31.6387 10.1866 31.4198 10.4056 31.1413 10.4056Z"
+        fill="white"
+      />
+      <path
+        d="M28.7932 8.43452C28.7932 8.43452 28.7335 8.43452 28.6937 8.43452C28.6539 8.43452 28.6341 8.43452 28.5943 8.41461C28.5744 8.41461 28.5346 8.3947 28.5147 8.37479C28.4948 8.37479 28.455 8.33497 28.4351 8.31506C28.3356 8.23543 28.2958 8.09606 28.2958 7.9567C28.2958 7.89698 28.2958 7.83725 28.3356 7.77752C28.3555 7.7178 28.3953 7.65807 28.4351 7.61825C28.5744 7.47889 28.7932 7.43907 28.9723 7.51871C29.032 7.53862 29.0917 7.57843 29.1315 7.61825C29.1713 7.65807 29.2111 7.7178 29.231 7.77752C29.2509 7.83725 29.2708 7.89698 29.2708 7.9567C29.2708 8.09606 29.2111 8.21552 29.1315 8.31506C29.0519 8.41461 28.9126 8.45442 28.7932 8.45442V8.43452Z"
+        fill="white"
+      />
+      <path
+        d="M26.9228 8.43461C26.9228 8.43461 26.8631 8.43461 26.8233 8.43461C26.8034 8.43461 26.7636 8.43461 26.7238 8.4147C26.7039 8.4147 26.6641 8.39479 26.6442 8.37488C26.6243 8.37488 26.6044 8.33506 26.5646 8.31515C26.4651 8.21561 26.4253 8.09615 26.4253 7.95679C26.4253 7.89707 26.4253 7.83734 26.4651 7.77761C26.485 7.71789 26.5248 7.65816 26.5646 7.61834C26.684 7.49889 26.8432 7.45907 27.0024 7.47898C27.0422 7.47898 27.0621 7.49889 27.1019 7.5188C27.1218 7.5188 27.1615 7.53871 27.1814 7.55861C27.2013 7.57852 27.2411 7.59843 27.261 7.61834C27.3008 7.65816 27.3406 7.71789 27.3605 7.77761C27.3804 7.83734 27.4003 7.89707 27.4003 7.95679C27.4003 8.09615 27.3406 8.21561 27.261 8.31515C27.2411 8.33506 27.2212 8.35497 27.1814 8.37488C27.1615 8.37488 27.1218 8.4147 27.1019 8.4147C27.082 8.4147 27.0422 8.4147 27.0024 8.43461C26.9825 8.43461 26.9427 8.43461 26.9029 8.43461H26.9228Z"
+        fill="white"
+      />
+      <path
+        d="M25.0722 8.43453C24.9528 8.43453 24.8135 8.39471 24.714 8.29517C24.6145 8.19562 24.5747 8.07617 24.5747 7.93681C24.5747 7.87708 24.5747 7.81735 24.6145 7.75762C24.6344 7.6979 24.6742 7.63817 24.714 7.59835C24.7538 7.55854 24.8135 7.51872 24.8732 7.49881C25.0523 7.41917 25.2712 7.45899 25.4105 7.59835C25.4502 7.63817 25.4901 7.6979 25.51 7.75762C25.5298 7.81735 25.5497 7.87708 25.5497 7.93681C25.5497 8.07617 25.49 8.19562 25.4105 8.29517C25.3906 8.31507 25.3508 8.33498 25.3309 8.35489C25.311 8.35489 25.2712 8.39471 25.2513 8.39471C25.2314 8.39471 25.1916 8.39471 25.1518 8.41462C25.1319 8.41462 25.0921 8.41462 25.0523 8.41462L25.0722 8.43453Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+function Gift() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="35"
+      height="35"
+      viewBox="0 0 35 35"
+      fill="none"
+    >
+      <path
+        d="M30.0283 19.8574H3.90128C3.62269 19.8574 3.40381 19.6384 3.40381 19.3597V14.5219C3.40381 14.2431 3.62269 14.0241 3.90128 14.0241H30.0283C30.3069 14.0241 30.5258 14.2431 30.5258 14.5219V19.3597C30.5258 19.6384 30.3069 19.8574 30.0283 19.8574ZM4.39875 18.862H29.5309V15.0196H4.39875V18.862Z"
+        fill="white"
+      />
+      <path
+        d="M28.9141 31.6831H5.03555C4.75697 31.6831 4.53809 31.4641 4.53809 31.1854V19.3794C4.53809 19.1007 4.75697 18.8817 5.03555 18.8817H28.9141C29.1926 18.8817 29.4115 19.1007 29.4115 19.3794V31.1854C29.4115 31.4641 29.1926 31.6831 28.9141 31.6831ZM5.53302 30.6877H28.4166V19.8772H5.53302V30.6877Z"
+        fill="white"
+      />
+      <path
+        d="M28.9141 31.6831H5.03555C4.75697 31.6831 4.53809 31.4641 4.53809 31.1854V19.3794C4.53809 19.1007 4.75697 18.8817 5.03555 18.8817H28.9141C29.1926 18.8817 29.4115 19.1007 29.4115 19.3794V31.1854C29.4115 31.4641 29.1926 31.6831 28.9141 31.6831ZM5.53302 30.6877H28.4166V19.8772H5.53302V30.6877Z"
+        fill="white"
+      />
+      <path
+        d="M16.2385 15.0392H11.4628C9.91073 15.0392 8.6571 13.7849 8.6571 12.2321C8.6571 10.6792 9.91073 9.4249 11.4628 9.4249H11.6021C12.0996 9.4249 12.5971 9.50453 13.0547 9.64389C15.2237 10.281 16.736 12.3117 16.736 14.5614C16.736 14.8401 16.5171 15.0591 16.2385 15.0591V15.0392ZM11.4628 10.4004C10.4679 10.4004 9.63214 11.2167 9.63214 12.2321C9.63214 13.2474 10.448 14.0637 11.4628 14.0637H15.7013C15.5023 12.451 14.3481 11.0574 12.7761 10.5796C12.3981 10.4602 12.0001 10.4004 11.6021 10.4004H11.4628Z"
+        fill="white"
+      />
+      <path
+        d="M22.0091 15.0394H16.2384C15.9599 15.0394 15.741 14.8204 15.741 14.5416C15.741 11.177 18.487 8.4296 21.8499 8.4296H22.0091C22.9642 8.4296 23.8796 8.84768 24.4964 9.5644C25.0138 10.1617 25.2924 10.9381 25.2924 11.7345C25.2924 13.5462 23.8199 15.0394 21.9892 15.0394H22.0091ZM16.7558 14.0439H22.0091C23.2826 14.0439 24.3173 13.0086 24.3173 11.7345C24.3173 11.177 24.1183 10.6395 23.7602 10.2214C23.3224 9.72367 22.6856 9.42504 22.0091 9.42504H21.8499C19.2034 9.42504 17.0145 11.4557 16.7558 14.0439Z"
+        fill="white"
+      />
+      <path
+        d="M19.1038 31.6833H14.9649C14.6863 31.6833 14.4674 31.4643 14.4674 31.1856V14.5418C14.4674 14.263 14.6863 14.044 14.9649 14.044H19.1038C19.3824 14.044 19.6013 14.263 19.6013 14.5418V31.1856C19.6013 31.4643 19.3824 31.6833 19.1038 31.6833ZM15.4623 30.6879H18.6064V15.0395H15.4623V30.6879Z"
+        fill="white"
+      />
+      <path
+        d="M17.0544 12.1326C16.7758 12.1326 16.5569 11.9136 16.5569 11.6349V4.0496C16.5569 3.77088 16.7758 3.55188 17.0544 3.55188C17.3329 3.55188 17.5518 3.77088 17.5518 4.0496V11.6349C17.5518 11.9136 17.3329 12.1326 17.0544 12.1326Z"
+        fill="white"
+      />
+    </svg>
+  );
+}