@edu-tosel/design 1.0.155 → 1.0.157

package/asset/svg/Eye.tsx

@@ -1,48 +1,48 @@
-import { OnClick } from "../../interface";
-import { cn } from "../../util";
-
-export interface EyeProps {
-  onClick: OnClick;
-  className?: string;
-}
-function Open({ onClick, className = "" }: EyeProps) {
-  return (
-    <svg
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="#7F7F7F"
-      className={cn(className, "size-6")}
-    >
-      <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
-      <path
-        fillRule="evenodd"
-        d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-}
-
-function Close({ onClick, className = "" }: EyeProps) {
-  return (
-    <svg
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="#7F7F7F"
-      className={cn(className, "size-6")}
-    >
-      <path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
-      <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
-      <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
-    </svg>
-  );
-}
-
-const Eye = {
-  Open,
-  Close,
-};
-
-export default Eye;
+import { OnClick } from "../../interface";
+import { cn } from "../../util";
+
+export interface EyeProps {
+  onClick: OnClick;
+  className?: string;
+}
+function Open({ onClick, className = "" }: EyeProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="#7F7F7F"
+      className={cn(className, "size-6")}
+    >
+      <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
+      <path
+        fillRule="evenodd"
+        d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+function Close({ onClick, className = "" }: EyeProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="#7F7F7F"
+      className={cn(className, "size-6")}
+    >
+      <path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
+      <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
+      <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
+    </svg>
+  );
+}
+
+const Eye = {
+  Open,
+  Close,
+};
+
+export default Eye;

package/asset/svg/Icon.tsx

@@ -1,195 +1,195 @@
-import { OnClick, Size } from "../../interface";
-import { cn } from "../../util";
-
-export interface IconProps {
-  size?: Size;
-  onClick?: OnClick;
-}
-
-const Icon = {
-  Calendar,
-  Notification,
-  Search,
-  Browser,
-  Event,
-  Document,
-};
-
-export default Icon;
-
-function Calendar({ size = "md", onClick }: IconProps) {
-  return (
-    <svg
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width={size === "lg" ? 36 : 24}
-      height={size === "lg" ? 36 : 24}
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.90326 3.23705 6.33097 3.65901 5.90901C4.08097 5.48705 4.65326 5.25 5.25 5.25H18.75C19.3467 5.25 19.919 5.48705 20.341 5.90901C20.7629 6.33097 21 6.90326 21 7.5V18.75M3 18.75C3 19.3467 3.23705 19.919 3.65901 20.341C4.08097 20.7629 4.65326 21 5.25 21H18.75C19.3467 21 19.919 20.7629 20.341 20.341C20.7629 19.919 21 19.3467 21 18.75M3 18.75V11.25C3 10.6533 3.23705 10.081 3.65901 9.65901C4.08097 9.23705 4.65326 9 5.25 9H18.75C19.3467 9 19.919 9.23705 20.341 9.65901C20.7629 10.081 21 10.6533 21 11.25V18.75"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function Notification({ size = "md", onClick }: IconProps) {
-  return (
-    <svg
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width={size === "lg" ? 36 : 24}
-      height={size === "lg" ? 36 : 24}
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M14.8565 17.082C16.7197 16.8614 18.5504 16.4217 20.3105 15.772C18.8199 14.1208 17.9962 11.9745 17.9995 9.75V9C17.9995 7.4087 17.3674 5.88258 16.2421 4.75736C15.1169 3.63214 13.5908 3 11.9995 3C10.4082 3 8.88208 3.63214 7.75686 4.75736C6.63164 5.88258 5.9995 7.4087 5.9995 9V9.75C6.00252 11.9746 5.17849 14.121 3.6875 15.772C5.4205 16.412 7.2475 16.857 9.1425 17.082M14.8565 17.082C12.9585 17.3071 11.0405 17.3071 9.1425 17.082M14.8565 17.082C15.0006 17.5319 15.0364 18.0094 14.9611 18.4757C14.8857 18.942 14.7013 19.384 14.4229 19.7656C14.1444 20.1472 13.7798 20.4576 13.3587 20.6716C12.9376 20.8856 12.4719 20.9972 11.9995 20.9972C11.5271 20.9972 11.0614 20.8856 10.6403 20.6716C10.2192 20.4576 9.85457 20.1472 9.57612 19.7656C9.29767 19.384 9.11326 18.942 9.03791 18.4757C8.96256 18.0094 8.9984 17.5319 9.1425 17.082"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function Search({ size = "md", onClick }: IconProps) {
-  return (
-    <svg
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width={size === "lg" ? 36 : 24}
-      height={size === "lg" ? 36 : 24}
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M21.0008 21L15.8038 15.803M15.8038 15.803C17.2104 14.3965 18.0006 12.4887 18.0006 10.4995C18.0006 8.51035 17.2104 6.60262 15.8038 5.19605C14.3972 3.78947 12.4895 2.99927 10.5003 2.99927C8.51108 2.99927 6.60336 3.78947 5.19678 5.19605C3.79021 6.60262 3 8.51035 3 10.4995C3 12.4887 3.79021 14.3965 5.19678 15.803C6.60336 17.2096 8.51108 17.9998 10.5003 17.9998C12.4895 17.9998 14.3972 17.2096 15.8038 15.803Z"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function Browser({ size = "md", onClick }: IconProps) {
-  return (
-    <svg
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width={size === "lg" ? 36 : 24}
-      height={size === "lg" ? 36 : 24}
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M3 8.25V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H18.75C19.3467 20.25 19.919 20.0129 20.341 19.591C20.7629 19.169 21 18.5967 21 18V8.25M3 8.25V6C3 5.40326 3.23705 4.83097 3.65901 4.40901C4.08097 3.98705 4.65326 3.75 5.25 3.75H18.75C19.3467 3.75 19.919 3.98705 20.341 4.40901C20.7629 4.83097 21 5.40326 21 6V8.25M3 8.25H21M5.25 6H5.258V6.008H5.25V6ZM7.5 6H7.508V6.008H7.5V6ZM9.75 6H9.758V6.008H9.75V6Z"
-        stroke="white"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  );
-}
-
-function Event({ size = "md", onClick }: IconProps) {
-  return (
-    <svg
-      onClick={onClick}
-      xmlns="http://www.w3.org/2000/svg"
-      width={size === "lg" ? 36 : 24}
-      height={size === "lg" ? 36 : 24}
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M21 11.25V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H5.25C4.85218 21 4.47064 20.842 4.18934 20.5607C3.90804 20.2794 3.75 19.8978 3.75 19.5V11.25M12 4.875C12 4.35583 11.846 3.84831 11.5576 3.41663C11.2692 2.98495 10.8592 2.6485 10.3795 2.44982C9.89989 2.25114 9.37209 2.19915 8.86289 2.30044C8.35369 2.40173 7.88596 2.65173 7.51884 3.01885C7.15173 3.38596 6.90172 3.85369 6.80044 4.36289C6.69915 4.87209 6.75114 5.39989 6.94982 5.87954C7.1485 6.3592 7.48495 6.76917 7.91663 7.05761C8.34831 7.34605 8.85582 7.5 9.375 7.5H12M12 4.875V7.5M12 4.875C12 4.35583 12.154 3.84831 12.4424 3.41663C12.7308 2.98495 13.1408 2.6485 13.6205 2.44982C14.1001 2.25114 14.6279 2.19915 15.1371 2.30044C15.6463 2.40173 16.114 2.65173 16.4812 3.01885C16.8483 3.38596 17.0983 3.85369 17.1996 4.36289C17.3008 4.87209 17.2489 5.39989 17.0502 5.87954C16.8515 6.3592 16.5151 6.76917 16.0834 7.05761C15.6517 7.34605 15.1442 7.5 14.625 7.5H12M12 7.5V21M3.375 11.25H21.375C21.996 11.25 22.5 10.746 22.5 10.125V8.625C22.5 8.004 21.996 7.5 21.375 7.5H3.375C2.754 7.5 2.25 8.004 2.25 8.625V10.125C2.25 10.746 2.754 11.25 3.375 11.25Z"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function Document({ theme }: { theme: "blue" | "red" }) {
-  const color = {
-    red: "#910023",
-    blue: "#173A8B",
-  };
-  return (
-    <svg
-      width="25"
-      height="25"
-      viewBox="0 0 25 25"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_3677_836)">
-        <path
-          d="M18.3495 25H1.3316C1.14591 25 1 24.8525 1 24.6647V4.61373C1 4.53326 1.03979 4.43938 1.09285 4.38573L5.33737 0.0938841C5.33737 0.0938841 5.48328 0 5.56286 0H18.3362C18.5219 0 18.6678 0.147532 18.6678 0.3353V9.2677C18.6678 9.45547 18.5219 9.603 18.3362 9.603C18.1505 9.603 18.0046 9.45547 18.0046 9.2677V0.670601H5.70877L1.66321 4.76127V24.3294H18.0179V15.8396C18.0179 15.6518 18.1638 15.5043 18.3495 15.5043C18.5352 15.5043 18.6811 15.6518 18.6811 15.8396V24.6647C18.6811 24.8525 18.5352 25 18.3495 25Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M1.33158 4.9489C1.252 4.9489 1.15915 4.92208 1.09283 4.85502C0.960187 4.7209 0.960187 4.50631 1.09283 4.3856L5.33735 0.0937542C5.46999 -0.040366 5.68222 -0.040366 5.80159 0.0937542C5.93424 0.227874 5.93424 0.442467 5.80159 0.563175L1.57034 4.85502C1.57034 4.85502 1.42443 4.9489 1.33158 4.9489Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M5.56286 4.96245H1.3316C1.14591 4.94903 1 4.8015 1 4.61373C1 4.42597 1.14591 4.27843 1.3316 4.27843H5.23126V0.3353C5.23126 0.147532 5.37716 0 5.56286 0C5.74856 0 5.89446 0.147532 5.89446 0.3353V4.62715C5.89446 4.72103 5.85467 4.8015 5.80161 4.86856C5.74856 4.93562 5.65571 4.96245 5.56286 4.96245Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M13.4019 18.0259C13.3091 18.0259 13.2295 17.9857 13.1632 17.932C13.0836 17.8516 13.0571 17.7443 13.0703 17.637L13.4417 15.719C13.4417 15.719 13.4815 15.5983 13.5346 15.5447L20.233 8.77162C20.233 8.77162 20.3789 8.67773 20.4717 8.67773C20.5646 8.67773 20.6442 8.71797 20.7105 8.77162L22.2491 10.3274C22.3818 10.4615 22.3818 10.6761 22.2491 10.7968L15.5507 17.5699C15.5507 17.5699 15.4446 17.6504 15.3783 17.6638L13.4815 18.0393C13.4815 18.0393 13.4417 18.0393 13.4152 18.0393L13.4019 18.0259ZM14.0784 15.9336L13.8264 17.2614L15.1395 17.0066L21.5328 10.542L20.4717 9.46904L14.0784 15.9336Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M22.7665 10.1129C22.6736 10.1129 22.594 10.0726 22.5277 10.019L20.9891 8.46318C20.8564 8.32906 20.8564 8.11447 20.9891 7.99376L21.891 7.08174C22.0104 6.96103 22.2359 6.96103 22.3553 7.08174L23.8939 8.63754C23.8939 8.63754 23.9868 8.78507 23.9868 8.87895C23.9868 8.97284 23.947 9.05331 23.8939 9.12037L22.992 10.0324C22.992 10.0324 22.846 10.1263 22.7532 10.1263L22.7665 10.1129ZM21.7053 8.22176L22.7665 9.29472L23.2042 8.85213L22.143 7.77917L21.7053 8.22176Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M18.4689 12.9026C18.3893 12.9026 18.2964 12.8757 18.2301 12.8087C18.0975 12.6745 18.0975 12.46 18.2301 12.3392L21.0023 9.53614C21.1349 9.40202 21.3472 9.40202 21.4665 9.53614C21.5992 9.67026 21.5992 9.88485 21.4665 10.0056L18.6943 12.8087C18.6943 12.8087 18.5484 12.9026 18.4556 12.9026H18.4689Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M15.2987 17.6504C15.2192 17.6504 15.1263 17.6235 15.06 17.5565L13.5214 16.0007C13.3887 15.8666 13.3887 15.652 13.5214 15.5313C13.654 15.3971 13.8662 15.3971 13.9856 15.5313L15.5242 17.087C15.6569 17.2212 15.6569 17.4358 15.5242 17.5565C15.4579 17.6235 15.3783 17.6504 15.2855 17.6504H15.2987Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M15.763 8.30244H3.90485C3.71915 8.30244 3.57324 8.1549 3.57324 7.96714C3.57324 7.77937 3.71915 7.63184 3.90485 7.63184H15.763C15.9487 7.63184 16.0946 7.77937 16.0946 7.96714C16.0946 8.1549 15.9487 8.30244 15.763 8.30244Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M15.763 11.32H3.90485C3.71915 11.32 3.57324 11.1725 3.57324 10.9847C3.57324 10.7969 3.71915 10.6494 3.90485 10.6494H15.763C15.9487 10.6494 16.0946 10.7969 16.0946 10.9847C16.0946 11.1725 15.9487 11.32 15.763 11.32Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M13.1102 14.3513H3.90485C3.71915 14.3513 3.57324 14.2037 3.57324 14.016C3.57324 13.8282 3.71915 13.6807 3.90485 13.6807H13.1102C13.2958 13.6807 13.4418 13.8282 13.4418 14.016C13.4418 14.2037 13.2958 14.3513 13.1102 14.3513Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M11.7837 17.3688H3.90485C3.71915 17.3688 3.57324 17.2213 3.57324 17.0335C3.57324 16.8458 3.71915 16.6982 3.90485 16.6982H11.7837C11.9694 16.6982 12.1153 16.8458 12.1153 17.0335C12.1153 17.2213 11.9694 17.3688 11.7837 17.3688Z"
-          fill={color[theme]}
-        />
-        <path
-          d="M15.763 20.3864H3.90485C3.71915 20.3864 3.57324 20.2389 3.57324 20.0511C3.57324 19.8634 3.71915 19.7158 3.90485 19.7158H15.763C15.9487 19.7158 16.0946 19.8634 16.0946 20.0511C16.0946 20.2389 15.9487 20.3864 15.763 20.3864Z"
-          fill={color[theme]}
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_3677_836">
-          <rect width="25" height="25" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
+import { OnClick, Size } from "../../interface";
+import { cn } from "../../util";
+
+export interface IconProps {
+  size?: Size;
+  onClick?: OnClick;
+}
+
+const Icon = {
+  Calendar,
+  Notification,
+  Search,
+  Browser,
+  Event,
+  Document,
+};
+
+export default Icon;
+
+function Calendar({ size = "md", onClick }: IconProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.90326 3.23705 6.33097 3.65901 5.90901C4.08097 5.48705 4.65326 5.25 5.25 5.25H18.75C19.3467 5.25 19.919 5.48705 20.341 5.90901C20.7629 6.33097 21 6.90326 21 7.5V18.75M3 18.75C3 19.3467 3.23705 19.919 3.65901 20.341C4.08097 20.7629 4.65326 21 5.25 21H18.75C19.3467 21 19.919 20.7629 20.341 20.341C20.7629 19.919 21 19.3467 21 18.75M3 18.75V11.25C3 10.6533 3.23705 10.081 3.65901 9.65901C4.08097 9.23705 4.65326 9 5.25 9H18.75C19.3467 9 19.919 9.23705 20.341 9.65901C20.7629 10.081 21 10.6533 21 11.25V18.75"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function Notification({ size = "md", onClick }: IconProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M14.8565 17.082C16.7197 16.8614 18.5504 16.4217 20.3105 15.772C18.8199 14.1208 17.9962 11.9745 17.9995 9.75V9C17.9995 7.4087 17.3674 5.88258 16.2421 4.75736C15.1169 3.63214 13.5908 3 11.9995 3C10.4082 3 8.88208 3.63214 7.75686 4.75736C6.63164 5.88258 5.9995 7.4087 5.9995 9V9.75C6.00252 11.9746 5.17849 14.121 3.6875 15.772C5.4205 16.412 7.2475 16.857 9.1425 17.082M14.8565 17.082C12.9585 17.3071 11.0405 17.3071 9.1425 17.082M14.8565 17.082C15.0006 17.5319 15.0364 18.0094 14.9611 18.4757C14.8857 18.942 14.7013 19.384 14.4229 19.7656C14.1444 20.1472 13.7798 20.4576 13.3587 20.6716C12.9376 20.8856 12.4719 20.9972 11.9995 20.9972C11.5271 20.9972 11.0614 20.8856 10.6403 20.6716C10.2192 20.4576 9.85457 20.1472 9.57612 19.7656C9.29767 19.384 9.11326 18.942 9.03791 18.4757C8.96256 18.0094 8.9984 17.5319 9.1425 17.082"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function Search({ size = "md", onClick }: IconProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M21.0008 21L15.8038 15.803M15.8038 15.803C17.2104 14.3965 18.0006 12.4887 18.0006 10.4995C18.0006 8.51035 17.2104 6.60262 15.8038 5.19605C14.3972 3.78947 12.4895 2.99927 10.5003 2.99927C8.51108 2.99927 6.60336 3.78947 5.19678 5.19605C3.79021 6.60262 3 8.51035 3 10.4995C3 12.4887 3.79021 14.3965 5.19678 15.803C6.60336 17.2096 8.51108 17.9998 10.5003 17.9998C12.4895 17.9998 14.3972 17.2096 15.8038 15.803Z"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function Browser({ size = "md", onClick }: IconProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M3 8.25V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H18.75C19.3467 20.25 19.919 20.0129 20.341 19.591C20.7629 19.169 21 18.5967 21 18V8.25M3 8.25V6C3 5.40326 3.23705 4.83097 3.65901 4.40901C4.08097 3.98705 4.65326 3.75 5.25 3.75H18.75C19.3467 3.75 19.919 3.98705 20.341 4.40901C20.7629 4.83097 21 5.40326 21 6V8.25M3 8.25H21M5.25 6H5.258V6.008H5.25V6ZM7.5 6H7.508V6.008H7.5V6ZM9.75 6H9.758V6.008H9.75V6Z"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
+
+function Event({ size = "md", onClick }: IconProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M21 11.25V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H5.25C4.85218 21 4.47064 20.842 4.18934 20.5607C3.90804 20.2794 3.75 19.8978 3.75 19.5V11.25M12 4.875C12 4.35583 11.846 3.84831 11.5576 3.41663C11.2692 2.98495 10.8592 2.6485 10.3795 2.44982C9.89989 2.25114 9.37209 2.19915 8.86289 2.30044C8.35369 2.40173 7.88596 2.65173 7.51884 3.01885C7.15173 3.38596 6.90172 3.85369 6.80044 4.36289C6.69915 4.87209 6.75114 5.39989 6.94982 5.87954C7.1485 6.3592 7.48495 6.76917 7.91663 7.05761C8.34831 7.34605 8.85582 7.5 9.375 7.5H12M12 4.875V7.5M12 4.875C12 4.35583 12.154 3.84831 12.4424 3.41663C12.7308 2.98495 13.1408 2.6485 13.6205 2.44982C14.1001 2.25114 14.6279 2.19915 15.1371 2.30044C15.6463 2.40173 16.114 2.65173 16.4812 3.01885C16.8483 3.38596 17.0983 3.85369 17.1996 4.36289C17.3008 4.87209 17.2489 5.39989 17.0502 5.87954C16.8515 6.3592 16.5151 6.76917 16.0834 7.05761C15.6517 7.34605 15.1442 7.5 14.625 7.5H12M12 7.5V21M3.375 11.25H21.375C21.996 11.25 22.5 10.746 22.5 10.125V8.625C22.5 8.004 21.996 7.5 21.375 7.5H3.375C2.754 7.5 2.25 8.004 2.25 8.625V10.125C2.25 10.746 2.754 11.25 3.375 11.25Z"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function Document({ theme }: { theme: "blue" | "red" }) {
+  const color = {
+    red: "#910023",
+    blue: "#173A8B",
+  };
+  return (
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_3677_836)">
+        <path
+          d="M18.3495 25H1.3316C1.14591 25 1 24.8525 1 24.6647V4.61373C1 4.53326 1.03979 4.43938 1.09285 4.38573L5.33737 0.0938841C5.33737 0.0938841 5.48328 0 5.56286 0H18.3362C18.5219 0 18.6678 0.147532 18.6678 0.3353V9.2677C18.6678 9.45547 18.5219 9.603 18.3362 9.603C18.1505 9.603 18.0046 9.45547 18.0046 9.2677V0.670601H5.70877L1.66321 4.76127V24.3294H18.0179V15.8396C18.0179 15.6518 18.1638 15.5043 18.3495 15.5043C18.5352 15.5043 18.6811 15.6518 18.6811 15.8396V24.6647C18.6811 24.8525 18.5352 25 18.3495 25Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M1.33158 4.9489C1.252 4.9489 1.15915 4.92208 1.09283 4.85502C0.960187 4.7209 0.960187 4.50631 1.09283 4.3856L5.33735 0.0937542C5.46999 -0.040366 5.68222 -0.040366 5.80159 0.0937542C5.93424 0.227874 5.93424 0.442467 5.80159 0.563175L1.57034 4.85502C1.57034 4.85502 1.42443 4.9489 1.33158 4.9489Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M5.56286 4.96245H1.3316C1.14591 4.94903 1 4.8015 1 4.61373C1 4.42597 1.14591 4.27843 1.3316 4.27843H5.23126V0.3353C5.23126 0.147532 5.37716 0 5.56286 0C5.74856 0 5.89446 0.147532 5.89446 0.3353V4.62715C5.89446 4.72103 5.85467 4.8015 5.80161 4.86856C5.74856 4.93562 5.65571 4.96245 5.56286 4.96245Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M13.4019 18.0259C13.3091 18.0259 13.2295 17.9857 13.1632 17.932C13.0836 17.8516 13.0571 17.7443 13.0703 17.637L13.4417 15.719C13.4417 15.719 13.4815 15.5983 13.5346 15.5447L20.233 8.77162C20.233 8.77162 20.3789 8.67773 20.4717 8.67773C20.5646 8.67773 20.6442 8.71797 20.7105 8.77162L22.2491 10.3274C22.3818 10.4615 22.3818 10.6761 22.2491 10.7968L15.5507 17.5699C15.5507 17.5699 15.4446 17.6504 15.3783 17.6638L13.4815 18.0393C13.4815 18.0393 13.4417 18.0393 13.4152 18.0393L13.4019 18.0259ZM14.0784 15.9336L13.8264 17.2614L15.1395 17.0066L21.5328 10.542L20.4717 9.46904L14.0784 15.9336Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M22.7665 10.1129C22.6736 10.1129 22.594 10.0726 22.5277 10.019L20.9891 8.46318C20.8564 8.32906 20.8564 8.11447 20.9891 7.99376L21.891 7.08174C22.0104 6.96103 22.2359 6.96103 22.3553 7.08174L23.8939 8.63754C23.8939 8.63754 23.9868 8.78507 23.9868 8.87895C23.9868 8.97284 23.947 9.05331 23.8939 9.12037L22.992 10.0324C22.992 10.0324 22.846 10.1263 22.7532 10.1263L22.7665 10.1129ZM21.7053 8.22176L22.7665 9.29472L23.2042 8.85213L22.143 7.77917L21.7053 8.22176Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M18.4689 12.9026C18.3893 12.9026 18.2964 12.8757 18.2301 12.8087C18.0975 12.6745 18.0975 12.46 18.2301 12.3392L21.0023 9.53614C21.1349 9.40202 21.3472 9.40202 21.4665 9.53614C21.5992 9.67026 21.5992 9.88485 21.4665 10.0056L18.6943 12.8087C18.6943 12.8087 18.5484 12.9026 18.4556 12.9026H18.4689Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M15.2987 17.6504C15.2192 17.6504 15.1263 17.6235 15.06 17.5565L13.5214 16.0007C13.3887 15.8666 13.3887 15.652 13.5214 15.5313C13.654 15.3971 13.8662 15.3971 13.9856 15.5313L15.5242 17.087C15.6569 17.2212 15.6569 17.4358 15.5242 17.5565C15.4579 17.6235 15.3783 17.6504 15.2855 17.6504H15.2987Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M15.763 8.30244H3.90485C3.71915 8.30244 3.57324 8.1549 3.57324 7.96714C3.57324 7.77937 3.71915 7.63184 3.90485 7.63184H15.763C15.9487 7.63184 16.0946 7.77937 16.0946 7.96714C16.0946 8.1549 15.9487 8.30244 15.763 8.30244Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M15.763 11.32H3.90485C3.71915 11.32 3.57324 11.1725 3.57324 10.9847C3.57324 10.7969 3.71915 10.6494 3.90485 10.6494H15.763C15.9487 10.6494 16.0946 10.7969 16.0946 10.9847C16.0946 11.1725 15.9487 11.32 15.763 11.32Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M13.1102 14.3513H3.90485C3.71915 14.3513 3.57324 14.2037 3.57324 14.016C3.57324 13.8282 3.71915 13.6807 3.90485 13.6807H13.1102C13.2958 13.6807 13.4418 13.8282 13.4418 14.016C13.4418 14.2037 13.2958 14.3513 13.1102 14.3513Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M11.7837 17.3688H3.90485C3.71915 17.3688 3.57324 17.2213 3.57324 17.0335C3.57324 16.8458 3.71915 16.6982 3.90485 16.6982H11.7837C11.9694 16.6982 12.1153 16.8458 12.1153 17.0335C12.1153 17.2213 11.9694 17.3688 11.7837 17.3688Z"
+          fill={color[theme]}
+        />
+        <path
+          d="M15.763 20.3864H3.90485C3.71915 20.3864 3.57324 20.2389 3.57324 20.0511C3.57324 19.8634 3.71915 19.7158 3.90485 19.7158H15.763C15.9487 19.7158 16.0946 19.8634 16.0946 20.0511C16.0946 20.2389 15.9487 20.3864 15.763 20.3864Z"
+          fill={color[theme]}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3677_836">
+          <rect width="25" height="25" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/asset/svg/Image.tsx

@@ -1,24 +1,24 @@
-interface ImageProps {
-  color?: string;
-  className?: string;
-}
-export default function Image({ color, className }: ImageProps) {
-  return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="25"
-      viewBox="0 0 25 25"
-      fill="none"
-    >
-      <path
-        d="M2.34375 16.4062L7.71771 11.0323C7.93535 10.8147 8.19372 10.642 8.47808 10.5242C8.76244 10.4064 9.06721 10.3458 9.375 10.3458C9.68279 10.3458 9.98756 10.4064 10.2719 10.5242C10.5563 10.642 10.8147 10.8147 11.0323 11.0323L16.4062 16.4062M14.8437 14.8437L16.3115 13.376C16.5291 13.1584 16.7875 12.9858 17.0718 12.868C17.3562 12.7502 17.661 12.6896 17.9687 12.6896C18.2765 12.6896 18.5813 12.7502 18.8657 12.868C19.15 12.9858 19.4084 13.1584 19.626 13.376L22.6562 16.4062M3.90625 20.3125H21.0937C21.5082 20.3125 21.9056 20.1479 22.1986 19.8549C22.4916 19.5618 22.6562 19.1644 22.6562 18.75V6.25C22.6562 5.8356 22.4916 5.43817 22.1986 5.14515C21.9056 4.85212 21.5082 4.6875 21.0937 4.6875H3.90625C3.49185 4.6875 3.09442 4.85212 2.8014 5.14515C2.50837 5.43817 2.34375 5.8356 2.34375 6.25V18.75C2.34375 19.1644 2.50837 19.5618 2.8014 19.8549C3.09442 20.1479 3.49185 20.3125 3.90625 20.3125ZM14.8437 8.59375H14.8521V8.60208H14.8437V8.59375ZM15.2344 8.59375C15.2344 8.69735 15.1932 8.79671 15.12 8.86996C15.0467 8.94322 14.9473 8.98437 14.8437 8.98437C14.7401 8.98437 14.6408 8.94322 14.5675 8.86996C14.4943 8.79671 14.4531 8.69735 14.4531 8.59375C14.4531 8.49015 14.4943 8.39079 14.5675 8.31754C14.6408 8.24428 14.7401 8.20312 14.8437 8.20312C14.9473 8.20312 15.0467 8.24428 15.12 8.31754C15.1932 8.39079 15.2344 8.49015 15.2344 8.59375Z"
-        stroke={color ?? "#FFFFFF"}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
+interface ImageProps {
+  color?: string;
+  className?: string;
+}
+export default function Image({ color, className }: ImageProps) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M2.34375 16.4062L7.71771 11.0323C7.93535 10.8147 8.19372 10.642 8.47808 10.5242C8.76244 10.4064 9.06721 10.3458 9.375 10.3458C9.68279 10.3458 9.98756 10.4064 10.2719 10.5242C10.5563 10.642 10.8147 10.8147 11.0323 11.0323L16.4062 16.4062M14.8437 14.8437L16.3115 13.376C16.5291 13.1584 16.7875 12.9858 17.0718 12.868C17.3562 12.7502 17.661 12.6896 17.9687 12.6896C18.2765 12.6896 18.5813 12.7502 18.8657 12.868C19.15 12.9858 19.4084 13.1584 19.626 13.376L22.6562 16.4062M3.90625 20.3125H21.0937C21.5082 20.3125 21.9056 20.1479 22.1986 19.8549C22.4916 19.5618 22.6562 19.1644 22.6562 18.75V6.25C22.6562 5.8356 22.4916 5.43817 22.1986 5.14515C21.9056 4.85212 21.5082 4.6875 21.0937 4.6875H3.90625C3.49185 4.6875 3.09442 4.85212 2.8014 5.14515C2.50837 5.43817 2.34375 5.8356 2.34375 6.25V18.75C2.34375 19.1644 2.50837 19.5618 2.8014 19.8549C3.09442 20.1479 3.49185 20.3125 3.90625 20.3125ZM14.8437 8.59375H14.8521V8.60208H14.8437V8.59375ZM15.2344 8.59375C15.2344 8.69735 15.1932 8.79671 15.12 8.86996C15.0467 8.94322 14.9473 8.98437 14.8437 8.98437C14.7401 8.98437 14.6408 8.94322 14.5675 8.86996C14.4943 8.79671 14.4531 8.69735 14.4531 8.59375C14.4531 8.49015 14.4943 8.39079 14.5675 8.31754C14.6408 8.24428 14.7401 8.20312 14.8437 8.20312C14.9473 8.20312 15.0467 8.24428 15.12 8.31754C15.1932 8.39079 15.2344 8.49015 15.2344 8.59375Z"
+        stroke={color ?? "#FFFFFF"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/asset/svg/Notification.tsx

@@ -1,34 +1,34 @@
-import { OnClick } from "../../interface";
-
-interface Notification {
-  onClick: OnClick;
-  flag: boolean;
-  color?: string;
-}
-export default function Notification({ onClick, color, flag }: Notification) {
-  return (
-    <button className="relative" onClick={onClick}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="25"
-        height="25"
-        viewBox="0 0 25 25"
-        fill="none"
-      >
-        <path
-          d="M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938"
-          stroke={color ?? "#910023"}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-      {flag && (
-        <div className="absolute top-0 right-0">
-          <div className="absolute w-2 h-2 rounded-full bg-red-500" />
-          <div className=" w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" />
-        </div>
-      )}
-    </button>
-  );
-}
+import { OnClick } from "../../interface";
+
+interface Notification {
+  onClick: OnClick;
+  flag: boolean;
+  color?: string;
+}
+export default function Notification({ onClick, color, flag }: Notification) {
+  return (
+    <button className="relative" onClick={onClick}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="25"
+        height="25"
+        viewBox="0 0 25 25"
+        fill="none"
+      >
+        <path
+          d="M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938"
+          stroke={color ?? "#910023"}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      {flag && (
+        <div className="absolute top-0 right-0">
+          <div className="absolute w-2 h-2 rounded-full bg-red-500" />
+          <div className=" w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" />
+        </div>
+      )}
+    </button>
+  );
+}