gwan-design-system 0.1.1

package/src/components/carousel/index.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import Banner, { IBanner } from "../banner";
+
+export interface ICarousel {
+  slides: IBanner[];
+  interval?: number;
+}
+
+const Carousel = ({ slides, interval = 3000 }: ICarousel) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % slides.length);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [slides.length, interval]);
+
+  return (
+    <div className="relative w-full h-[484px] overflow-hidden">
+      {slides.map(
+        (
+          {
+            title,
+            titleClassName,
+            subTitle,
+            subTitleClassName,
+            backgroundImage,
+            backgroundColor,
+            contentPlacement,
+          },
+          index
+        ) => {
+          return (
+            <div
+              key={index}
+              className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
+                index === currentIndex ? "opacity-100 z-10" : "opacity-0 z-0"
+              }`}
+            >
+              <Banner
+                title={title}
+                titleClassName={titleClassName}
+                subTitle={subTitle}
+                subTitleClassName={subTitleClassName}
+                contentPlacement={contentPlacement}
+                backgroundImage={backgroundImage}
+                backgroundColor={backgroundColor}
+              />
+            </div>
+          );
+        }
+      )}
+    </div>
+  );
+};
+
+export default Carousel;

package/src/components/checkbox/index.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { CheckSVG } from "../icons";
+
+export interface ICheckbox {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+const Checkbox = ({ label, checked = false, onChange }: ICheckbox) => {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  const handleToggle = () => {
+    setIsChecked(!isChecked);
+    if (onChange) {
+      onChange(!isChecked);
+    }
+  };
+
+  return (
+    <label className="flex items-center gap-2 cursor-pointer">
+      <input
+        type="checkbox"
+        checked={isChecked}
+        onChange={handleToggle}
+        className="hidden"
+      />
+      <div
+        className={`w-5 h-5 flex items-center justify-center border-2 rounded-md transition-all 
+          ${
+            isChecked
+              ? "bg-primary-500 border-primary-600"
+              : "bg-white border-neutrola-500"
+          }
+        `}
+      >
+        {isChecked && (
+          <div className="size-4 text-white">
+            <CheckSVG />
+          </div>
+        )}
+      </div>
+      {label && <span className="text-black">{label}</span>}
+    </label>
+  );
+};
+
+export default Checkbox;

package/src/components/chip/index.tsx

@@ -0,0 +1,22 @@
+import { CrossSVG } from "../icons";
+
+interface IChip {
+  label: string;
+  onClear: () => void;
+}
+
+const Chip = ({ label, onClear }: IChip) => {
+  return (
+    <div className="flex flex-row gap-2 items-center bg-neutrola-700 w-fit px-4 py-2 rounded-full">
+      <div
+        className="size-3 cursor-pointer text-neutral-200 hover:text-white"
+        onClick={onClear}
+      >
+        <CrossSVG />
+      </div>
+      <p className="text-neutral-200 text-base font-semibold">{label}</p>
+    </div>
+  );
+};
+
+export default Chip;

package/src/components/ellipsis/index.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Tooltip, { TOOLTIP_POSITION } from "../tooltip";
+
+export interface IEllipsis {
+  label: string;
+  tooltipPosition?: TOOLTIP_POSITION;
+  tooltipWidth?: string;
+}
+
+const Ellipsis = ({
+  label,
+  tooltipPosition = TOOLTIP_POSITION.RIGHT,
+  tooltipWidth = "w-40",
+}: IEllipsis) => {
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+
+  return (
+    <div
+      className="relative"
+      onMouseEnter={() => setIsTooltipVisible(true)}
+      onMouseLeave={() => setIsTooltipVisible(false)}
+    >
+      <p className="text-ellipsis w-32 overflow-hidden whitespace-nowrap">
+        {label}
+      </p>
+      <Tooltip
+        label={label}
+        position={tooltipPosition}
+        isVisible={isTooltipVisible}
+        toolTipWidth={tooltipWidth}
+      />
+    </div>
+  );
+};
+
+export default Ellipsis;

package/src/components/fileUploader/index.tsx

@@ -0,0 +1,54 @@
+import { useRef } from "react";
+import { UploadSVG } from "../icons";
+
+export interface IFileUploader {
+  title: string;
+  subTitle1?: string;
+  subTitle2?: string;
+  handleAttachment: (file: File) => void;
+  accept?: string;
+}
+
+const FileUploader = ({
+  title,
+  subTitle1 = "",
+  subTitle2 = "",
+  handleAttachment,
+  accept = ".jpg,.jpeg,.png",
+}: IFileUploader) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files && files.length > 0) {
+      handleAttachment(files[0]);
+    }
+  };
+
+  return (
+    <div className="flex flex-row gap-4 items-start border border-dashed border-neutral-200 p-4 rounded-lg">
+      <div
+        className="bg-primary-500 hover:bg-primary-600 text-white px-6 py-8 rounded-lg cursor-pointer"
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <div className="size-10">
+          <UploadSVG />
+        </div>
+      </div>
+      <input
+        type="file"
+        ref={fileInputRef}
+        accept={accept}
+        className="hidden"
+        onChange={handleFileUpload}
+      />
+      <div className="flex-1 flex flex-col">
+        <p className="text-lg">{title}</p>
+        <p className="text-sm text-neutrola-400">{subTitle1}</p>
+        <p className="text-sm text-neutrola-400">{subTitle2}</p>
+      </div>
+    </div>
+  );
+};
+
+export default FileUploader;

package/src/components/filterDropdown/index.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { ChevDownSVG, FilterSVG } from "../icons";
+
+export interface IFilterOption {
+  label: string;
+  value: string;
+  isChecked?: boolean;
+}
+
+export interface IFilterCategory {
+  category: string;
+  options: IFilterOption[];
+}
+
+export interface IFilter {
+  children: (closeDropdown: () => void) => React.ReactNode;
+}
+
+const FilterDropdown = ({ children }: IFilter) => {
+  const [isChildrenVisible, setIsChildrenVisible] = useState<boolean>(false);
+
+  const closeDropdown = () => setIsChildrenVisible(false);
+
+  return (
+    <div className="relative">
+      <div
+        className="flex flex-row gap-4 items-center w-fit border border-neutrola-300 hover:border-neutrola-400 group p-2 rounded-lg cursor-pointer"
+        onClick={() => setIsChildrenVisible(!isChildrenVisible)}
+      >
+        <div className="size-5 text-neutrola-300 group-hover:text-neutrola-400">
+          <FilterSVG />
+        </div>
+        <p className="text-neutrola-300 text-base group-hover:text-neutrola-400">
+          Filter
+        </p>
+        <div className="size-5 text-neutrola-300 group-hover:text-neutrola-400">
+          <ChevDownSVG />
+        </div>
+      </div>
+      {isChildrenVisible && (
+        <div className="border border-neutrola-300 rounded-lg shadow-lg overflow-y-auto absolute top-full bg-white z-10">
+          {children(closeDropdown)}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FilterDropdown;

package/src/components/icons/arrowLeftSVG/index.tsx

@@ -0,0 +1,14 @@
+const ArrowLeft = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.7501 14.3752H7.83136L13.6026 8.60396L12.7189 7.72021L6.82261 13.6165C6.06011 14.379 6.06011 15.6215 6.82261 16.384L12.7201 22.2815L13.6039 21.3977L7.83261 15.6265H23.7501V14.3765V14.3752Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export { ArrowLeft };

package/src/components/icons/checkSVG/index.tsx

@@ -0,0 +1,14 @@
+const Check = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        d="M4.293 12.293a1 1 0 011.414 0L10 16.586l8.293-8.293a1 1 0 111.414 1.414l-9 9a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z"
+        clipRule="evenodd"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export { Check };

package/src/components/icons/chevDownSVG/index.tsx

@@ -0,0 +1,14 @@
+const ChevDown = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15 20.0923C14.5 20.0923 14.0288 19.8973 13.6738 19.5436L7.07251 12.9423L7.95626 12.0586L14.5575 18.6598C14.7938 18.8961 15.205 18.8961 15.4413 18.6598L22.0425 12.0586L22.9263 12.9423L16.325 19.5436C15.9713 19.8973 15.5 20.0923 14.9988 20.0923H15Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export { ChevDown };

package/src/components/icons/chevLeftSVG/index.tsx

@@ -0,0 +1,14 @@
+const ChevLeft = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.6261 23.6916L10.8048 16.8703C10.4393 16.5048 10.2378 16.0178 10.2378 15.4999C10.2378 14.9819 10.4393 14.4962 10.8048 14.1294L17.6261 7.30811L18.5393 8.22131L11.718 15.0426C11.5966 15.1653 11.5295 15.3268 11.5295 15.4999C11.5295 15.6729 11.5966 15.8344 11.718 15.9571L18.5393 22.7784L17.6261 23.6916Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export { ChevLeft };

package/src/components/icons/chevRightSVG/index.tsx

@@ -0,0 +1,14 @@
+const ChevRight = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.277 23.6916L12.3638 22.7784L19.1851 15.9571C19.3065 15.8344 19.3736 15.6729 19.3736 15.4999C19.3736 15.3268 19.3065 15.1653 19.1851 15.0426L12.3638 8.22131L13.277 7.30811L20.0983 14.1294C20.4638 14.4949 20.6653 14.9819 20.6653 15.4999C20.6653 16.0178 20.4638 16.5035 20.0983 16.8703L13.277 23.6916Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export { ChevRight };

package/src/components/icons/circleSVG/index.tsx

@@ -0,0 +1,14 @@
+const Circle = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 30 30">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m12,0C5.383,0,0,5.383,0,12s5.383,12,12,12,12-5.383,12-12S18.617,0,12,0Zm0,23c-6.065,0-11-4.935-11-11S5.935,1,12,1s11,4.935,11,11-4.935,11-11,11Zm0-16c-2.757,0-5,2.243-5,5s2.243,5,5,5,5-2.243,5-5-2.243-5-5-5Zm0,9c-2.206,0-4-1.794-4-4s1.794-4,4-4,4,1.794,4,4-1.794,4-4,4Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export { Circle };

package/src/components/icons/colorsSVG/index.tsx

@@ -0,0 +1,21 @@
+const Colors = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_897_109)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M26.25 5V3.125C26.25 1.40125 24.8475 0 23.125 0H3.125C1.4025 0 0 1.40125 0 3.125V8.125C0 9.84875 1.4025 11.25 3.125 11.25H23.125C24.8475 11.25 26.25 9.84875 26.25 8.125V6.25C27.6287 6.25 28.75 7.37125 28.75 8.75V11.25C28.75 12.6287 27.6287 13.75 26.25 13.75H16.875C14.4625 13.75 12.5 15.7125 12.5 18.125V18.8125C11.075 19.1025 10 20.365 10 21.875V26.875C10 28.5987 11.4025 30 13.125 30C14.8475 30 16.25 28.5987 16.25 26.875V21.875C16.25 20.365 15.175 19.1038 13.75 18.8125V18.125C13.75 16.4013 15.1525 15 16.875 15H26.25C28.3175 15 30 13.3175 30 11.25V8.75C30 6.6825 28.3175 5 26.25 5ZM25 8.125C25 9.15875 24.1588 10 23.125 10H3.125C2.09125 10 1.25 9.15875 1.25 8.125V3.125C1.25 2.09125 2.09125 1.25 3.125 1.25H23.125C24.1588 1.25 25 2.09125 25 3.125V8.125ZM15 21.875V26.875C15 27.9088 14.1587 28.75 13.125 28.75C12.0913 28.75 11.25 27.9088 11.25 26.875V21.875C11.25 20.8412 12.0913 20 13.125 20C14.1587 20 15 20.8412 15 21.875Z"
+          fill="currentcolor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_897_109">
+          <rect width="30" height="30" fill="currentcolor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export { Colors };

package/src/components/icons/coversSVG/index.tsx

@@ -0,0 +1,21 @@
+const Covers = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_897_107)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M30 4.37504V21.8263C30 24.3425 28.3075 26.5713 25.8825 27.245L16.9825 29.7213C15.685 30.0813 14.3138 30.0825 13.0163 29.7213L4.11625 27.245C1.6925 26.57 -2.36592e-07 24.3425 -2.36592e-07 21.8263V5.62504C-0.0125002 4.81379 1.2625 4.81379 1.25 5.62504V21.8263C1.25 23.7825 2.56625 25.5163 4.4525 26.0413L13.3538 28.5175C14.4312 28.8175 15.57 28.8175 16.6488 28.5175L25.5487 26.04C27.435 25.5163 28.7512 23.7825 28.7512 21.825V4.37504C28.7387 3.56379 30.0125 3.56379 30 4.37504ZM3.75 19.8888V4.37504C3.75 2.99004 4.38375 1.71629 5.49 0.882541C6.59625 0.0487912 7.995 -0.212459 9.32625 0.167541L13.3575 1.32004C14.03 1.51129 14.5988 1.92004 14.9987 2.45504C15.3987 1.92004 15.9688 1.51129 16.64 1.32004L20.6712 0.167541C22.0037 -0.212459 23.4025 0.0475412 24.5075 0.882541C25.6138 1.71629 26.2475 2.99004 26.2475 4.37504V19.8888C26.2475 21.8313 24.9425 23.5613 23.075 24.0963L16.0637 26.1C15.3663 26.2988 14.6288 26.2988 13.9313 26.1L6.92125 24.0963C5.0525 23.5625 3.7475 21.8313 3.7475 19.8888H3.75ZM15.625 4.32504V24.9225C15.6575 24.915 22.7337 22.8938 22.7337 22.8938C24.0675 22.5125 25 21.2775 25 19.8888V4.37504C25 3.38504 24.5475 2.47629 23.7562 1.88004C22.9637 1.28129 21.9562 1.09879 21.0162 1.37004L16.985 2.52254C16.1838 2.75129 15.625 3.49254 15.625 4.32504ZM5 19.8888C5 21.2763 5.9325 22.5125 7.26625 22.8938C7.26625 22.8938 14.3425 24.915 14.375 24.9225V4.32504C14.375 3.49254 13.8162 2.75129 13.015 2.52254L8.98375 1.37004C7.0725 0.758791 4.93875 2.36129 5 4.37504V19.8888Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_897_107">
+          <rect width="30" height="30" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export { Covers };

package/src/components/icons/crossSVG/index.tsx

@@ -0,0 +1,16 @@
+const Cross = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 600 600">
+      <g>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M286.161,255.867L505.745,36.283c8.185-8.474,7.951-21.98-0.523-30.165c-8.267-7.985-21.375-7.985-29.642,0   L255.995,225.702L36.411,6.118c-8.475-8.185-21.98-7.95-30.165,0.524c-7.985,8.267-7.985,21.374,0,29.641L225.83,255.867   L6.246,475.451c-8.328,8.331-8.328,21.835,0,30.165l0,0c8.331,8.328,21.835,8.328,30.165,0l219.584-219.584l219.584,219.584   c8.331,8.328,21.835,8.328,30.165,0l0,0c8.328-8.331,8.328-21.835,0-30.165L286.161,255.867z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export { Cross };

package/src/components/icons/dashboardSVG/index.tsx

@@ -0,0 +1,14 @@
+const Dashboard = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+        d="M15 1.25C6.72875 1.25 0 7.97875 0 16.25C0 21.14 2.435 25.77 6.51625 28.6362L6.6775 28.75H23.3225L23.4838 28.6362C27.565 25.77 30 21.14 30 16.25C30 7.97875 23.2712 1.25 15 1.25ZM22.925 27.5H7.075C3.4775 24.895 1.25 20.6012 1.25 16.25C1.25 8.66875 7.41875 2.5 15 2.5C22.5812 2.5 28.75 8.66875 28.75 16.25C28.75 20.6012 26.5225 24.895 22.925 27.5ZM22.4613 9.6725L21.5775 8.78875L16.2688 14.0975C15.8963 13.8775 15.4625 13.75 15 13.75C13.6213 13.75 12.5 14.8713 12.5 16.25C12.5 17.6287 13.6213 18.75 15 18.75C16.3787 18.75 17.5 17.6287 17.5 16.25C17.5 15.7875 17.3725 15.3537 17.1525 14.9812L22.4613 9.6725ZM15 17.5C14.31 17.5 13.75 16.94 13.75 16.25C13.75 15.56 14.31 15 15 15C15.69 15 16.25 15.56 16.25 16.25C16.25 16.94 15.69 17.5 15 17.5ZM8.8125 10.0625C5.40125 13.4738 5.40125 19.0263 8.8125 22.4375L7.92875 23.3212C4.03125 19.4225 4.03125 13.0775 7.92875 9.17875C11.0562 6.05125 15.7537 5.43875 19.5037 7.3275L18.5637 8.2675C15.35 6.83875 11.4462 7.43 8.8125 10.0612V10.0625ZM22.0712 23.3212L21.1875 22.4375C23.8188 19.805 24.4113 15.9012 22.9813 12.6863L23.9212 11.7463C25.8087 15.4963 25.1962 20.1937 22.0712 23.3212Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export { Dashboard };

package/src/components/icons/filterSVG/index.tsx

@@ -0,0 +1,21 @@
+const Filter = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_918_510)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M22.4456 0H5.55342C3.13492 0 1.16675 1.96933 1.16675 4.38783C1.16675 5.4635 1.55991 6.4995 2.27508 7.30217L10.5001 16.5562V23.9178C10.5001 24.1232 10.6074 24.3133 10.7836 24.4183L16.6169 27.9183C16.7091 27.9743 16.8129 28.0012 16.9167 28.0012C17.0159 28.0012 17.1151 27.9767 17.2037 27.9265C17.3869 27.8227 17.5001 27.6278 17.5001 27.4178V16.5562L25.7263 7.30217C26.4403 6.4995 26.8334 5.4635 26.8334 4.38783C26.8334 1.96933 24.8641 0 22.4456 0ZM24.8524 6.5275L16.4792 15.946C16.3847 16.0533 16.3322 16.191 16.3322 16.3333V26.3865L11.6656 23.5865V16.3333C11.6656 16.191 11.6131 16.0533 11.5186 15.946L3.14658 6.5275C2.62158 5.93717 2.33341 5.17767 2.33341 4.38783C2.33341 2.61217 3.77775 1.16667 5.55342 1.16667H22.4456C24.2212 1.16667 25.6667 2.611 25.6667 4.38783C25.6667 5.17767 25.3774 5.93717 24.8524 6.5275Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_918_510">
+          <rect width="28" height="28" rx="8" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export { Filter };

package/src/components/icons/index.tsx

@@ -0,0 +1,17 @@
+export { Dashboard as DashboardSVG } from "./dashboardSVG";
+export { Orders as OrdersSVG } from "./ordersSVG";
+export { Products as ProductsSVG } from "./productsSVG";
+export { Templates as TemplatesSVG } from "./templatesSVG";
+export { Covers as CoversSVG } from "./coversSVG";
+export { Colors as ColorsSVG } from "./colorsSVG";
+export { SignOut as SignOutSVG } from "./signOutSVG";
+export { Filter as FilterSVG } from "./filterSVG";
+export { ChevDown as ChevDownSVG } from "./chevDownSVG";
+export { Cross as CrossSVG } from "./crossSVG";
+export { OrderInfo as OrderInfoSVG } from "./orderInfoSVG";
+export { ChevLeft as ChevLeftSVG } from "./chevLeftSVG";
+export { ChevRight as ChevRightSVG } from "./chevRightSVG";
+export { Check as CheckSVG } from "./checkSVG";
+export { Circle as CircleSVG } from "./circleSVG";
+export { Upload as UploadSVG } from "./uploadSVG";
+export { ArrowLeft as ArrowLeftSVG } from "./arrowLeftSVG";

package/src/components/icons/orderInfoSVG/index.tsx

@@ -0,0 +1,21 @@
+const OrderInfo = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_907_32)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.875 26.25H5.625C3.2125 26.25 1.25 24.2875 1.25 21.875V5.625C1.25 3.2125 3.2125 1.25 5.625 1.25H13.75V5.625C13.75 7.35 15.15 8.75 16.875 8.75H21.25V10.625C21.25 10.975 21.525 11.25 21.875 11.25C22.225 11.25 22.5 10.975 22.5 10.625C22.5 10.625 22.5125 8 22.5 7.95C22.3875 6.9625 21.925 6.0375 21.2125 5.3375L17.1625 1.2875C16.35 0.475 15.225 0 14.075 0H5.625C2.525 0 0 2.525 0 5.625V21.875C0 24.975 2.525 27.5 5.625 27.5H11.875C12.225 27.5 12.5 27.225 12.5 26.875C12.5 26.525 12.225 26.25 11.875 26.25ZM20.3375 6.2125C20.7 6.575 20.9625 7.0125 21.1125 7.5H16.875C15.8375 7.5 15 6.6625 15 5.625V1.3875C15.475 1.5375 15.925 1.8 16.2875 2.1625L20.3375 6.2125ZM21.875 13.75C17.4 13.75 13.75 17.4 13.75 21.875C13.75 26.35 17.4 30 21.875 30C26.35 30 30 26.35 30 21.875C30 17.4 26.35 13.75 21.875 13.75ZM21.875 28.75C18.0875 28.75 15 25.6625 15 21.875C15 18.0875 18.0875 15 21.875 15C25.6625 15 28.75 18.0875 28.75 21.875C28.75 25.6625 25.6625 28.75 21.875 28.75ZM23.125 18.75C23.125 19.4375 22.5625 20 21.875 20C21.1875 20 20.625 19.4375 20.625 18.75C20.625 18.0625 21.1875 17.5 21.875 17.5C22.5625 17.5 23.125 18.0625 23.125 18.75ZM22.5 21.875V25.625C22.5 25.975 22.225 26.25 21.875 26.25C21.525 26.25 21.25 25.975 21.25 25.625V21.875C21.25 21.525 21.525 21.25 21.875 21.25C22.225 21.25 22.5 21.525 22.5 21.875Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_907_32">
+          <rect width="30" height="30" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export { OrderInfo };

package/src/components/icons/ordersSVG/index.tsx

@@ -0,0 +1,21 @@
+const Orders = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_897_101)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5 21.875V3.125C5 1.40125 3.5975 0 1.875 0H0V1.25H1.875C2.90875 1.25 3.75 2.09125 3.75 3.125V21.875C3.75 23.5987 5.1525 25 6.875 25H7.5V26.25C7.5 28.3175 9.1825 30 11.25 30C13.3175 30 15 28.3175 15 26.25V25H20V26.25C20 28.3175 21.6825 30 23.75 30C25.8175 30 27.5 28.3175 27.5 26.25V25H30V23.75H6.875C5.84125 23.75 5 22.9088 5 21.875ZM13.75 26.25C13.75 27.6287 12.6287 28.75 11.25 28.75C9.87125 28.75 8.75 27.6287 8.75 26.25V25H13.75V26.25ZM26.25 26.25C26.25 27.6287 25.1287 28.75 23.75 28.75C22.3713 28.75 21.25 27.6287 21.25 26.25V25H26.25V26.25ZM7.5 21.25H30V12.5H7.5V21.25ZM8.75 13.75H28.75V20H8.75V13.75ZM17.5 0H7.5V10H17.5V0ZM16.25 8.75H8.75V1.25H16.25V8.75ZM20 2.5V10H30V2.5H20ZM28.75 8.75H21.25V3.75H28.75V8.75Z"
+          fill="currentcolor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_897_101">
+          <rect width="30" height="30" fill="currentcolor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export { Orders };

package/src/components/icons/productsSVG/index.tsx

@@ -0,0 +1,21 @@
+const Products = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_897_103)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M19.375 18.75H24.375V20H19.375V18.75ZM30 16.875V30H0V16.875C0 15.1512 1.40125 13.75 3.125 13.75H6.25V3.125C6.25 1.40125 7.65125 0 9.375 0H20.625C22.3487 0 23.75 1.40125 23.75 3.125V13.75H26.875C28.5987 13.75 30 15.1512 30 16.875ZM7.5 13.75H22.5V3.125C22.5 2.09125 21.6588 1.25 20.625 1.25H9.375C8.34125 1.25 7.5 2.09125 7.5 3.125V13.75ZM1.25 28.75H14.375V15H3.125C2.09125 15 1.25 15.8413 1.25 16.875V28.75ZM28.75 16.875C28.75 15.8413 27.9088 15 26.875 15H15.625V28.75H28.75V16.875ZM5.625 18.75V20H10.625V18.75H5.625ZM12.5 6.25H17.5V5H12.5V6.25Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_897_103">
+          <rect width="30" height="30" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export { Products };

package/src/components/icons/signOutSVG/index.tsx

@@ -0,0 +1,21 @@
+const SignOut = () => {
+  return (
+    <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_897_111)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M30 15C30 15 30 15.0025 30 15.0037C29.9975 15.845 29.6675 16.6338 29.0675 17.2238L23.89 22.32C23.7687 22.44 23.61 22.5 23.4513 22.5C23.29 22.5 23.1288 22.4375 23.0063 22.3137C22.765 22.0688 22.7675 21.6725 23.0137 21.43L28.1912 16.3337C28.3962 16.1313 28.5425 15.8888 28.6362 15.6263H8.125C7.78 15.6263 7.5 15.3463 7.5 15.0013C7.5 14.6563 7.78 14.3763 8.125 14.3763H28.6375C28.5437 14.11 28.3975 13.865 28.19 13.6613L23.0137 8.57125C22.7675 8.33 22.7638 7.93375 23.0063 7.6875C23.2475 7.44 23.6437 7.4375 23.89 7.68L29.0662 12.77C29.6675 13.3625 30 14.1525 30 14.9975C30 14.9975 30 14.9987 30 15ZM14.375 18.75C14.03 18.75 13.75 19.03 13.75 19.375V24.375C13.75 26.7875 11.7875 28.75 9.375 28.75H5.625C3.2125 28.75 1.25 26.7875 1.25 24.375V5.625C1.25 3.2125 3.2125 1.25 5.625 1.25H9.375C11.7875 1.25 13.75 3.2125 13.75 5.625V10.625C13.75 10.97 14.03 11.25 14.375 11.25C14.72 11.25 15 10.97 15 10.625V5.625C15 2.52375 12.4762 0 9.375 0H5.625C2.52375 0 0 2.52375 0 5.625V24.375C0 27.4762 2.52375 30 5.625 30H9.375C12.4762 30 15 27.4762 15 24.375V19.375C15 19.03 14.72 18.75 14.375 18.75Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_897_111">
+          <rect width="30" height="30" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export { SignOut };

package/src/components/icons/templatesSVG/index.tsx

@@ -0,0 +1,24 @@
+const Templates = () => {
+  return (
+    <svg
+      viewBox="0 0 30 30"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_897_105)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20 15.0002H10C8.625 15.0002 7.5 16.1252 7.5 17.5002V22.5002C7.5 23.8752 8.625 25.0002 10 25.0002H20C21.375 25.0002 22.5 23.8752 22.5 22.5002V17.5002C22.5 16.1252 21.375 15.0002 20 15.0002ZM21.25 22.5002C21.25 23.1877 20.6875 23.7502 20 23.7502H10C9.3125 23.7502 8.75 23.1877 8.75 22.5002V17.5002C8.75 16.8127 9.3125 16.2502 10 16.2502H20C20.6875 16.2502 21.25 16.8127 21.25 17.5002V22.5002ZM7.5 10.6252C7.5 10.2752 7.775 10.0002 8.125 10.0002H13.125C13.475 10.0002 13.75 10.2752 13.75 10.6252C13.75 10.9752 13.475 11.2502 13.125 11.2502H8.125C7.775 11.2502 7.5 10.9752 7.5 10.6252ZM25.125 6.73774L20.775 2.38774C19.2375 0.850241 17.2 0.0127415 15.025 0.0127415H8.125C5.025 0.000241525 2.5 2.52524 2.5 5.62524V24.3752C2.5 27.4752 5.025 30.0002 8.125 30.0002H21.875C24.975 30.0002 27.5 27.4752 27.5 24.3752V12.4877C27.5 10.3127 26.65 8.27524 25.125 6.73774ZM24.2375 7.62524C24.925 8.31274 25.45 9.12524 25.7875 10.0002H19.375C18.3375 10.0002 17.5 9.16274 17.5 8.12524V1.71274C18.3875 2.05024 19.1875 2.57524 19.875 3.26274L24.225 7.61274L24.2375 7.62524ZM26.25 24.3752C26.25 26.7877 24.2875 28.7502 21.875 28.7502H8.125C5.7125 28.7502 3.75 26.7877 3.75 24.3752V5.62524C3.75 3.21274 5.7125 1.25024 8.125 1.25024H15.0125C15.425 1.25024 15.8375 1.28774 16.25 1.36274V8.12524C16.25 9.85024 17.65 11.2502 19.375 11.2502H26.1375C26.2125 11.6502 26.25 12.0627 26.25 12.4877V24.3752Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_897_105">
+          <rect width="30" height="30" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export { Templates };

package/src/components/icons/uploadSVG/index.tsx

@@ -0,0 +1,21 @@
+const Upload = () => {
+  return (
+    <svg viewBox="0 0 53 53" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_859_45)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M47.4792 26.5H40.8542C39.0279 26.5 37.5417 27.9862 37.5417 29.8125C37.5417 32.8578 35.0661 35.3333 32.0208 35.3333H20.9792C17.9339 35.3333 15.4583 32.8578 15.4583 29.8125C15.4583 27.9862 13.9721 26.5 12.1458 26.5H5.52083C2.47554 26.5 0 28.9755 0 32.0208V43.0625C0 48.5414 4.45862 53 9.9375 53H43.0625C48.5414 53 53 48.5414 53 43.0625V32.0208C53 28.9755 50.5245 26.5 47.4792 26.5ZM50.7917 43.0625C50.7917 47.3246 47.3246 50.7917 43.0625 50.7917H9.9375C5.67542 50.7917 2.20833 47.3246 2.20833 43.0625V32.0208C2.20833 30.1945 3.69454 28.7083 5.52083 28.7083H12.1458C12.7531 28.7083 13.25 29.2052 13.25 29.8125C13.25 34.0746 16.7171 37.5417 20.9792 37.5417H32.0208C36.2829 37.5417 39.75 34.0746 39.75 29.8125C39.75 29.2052 40.2469 28.7083 40.8542 28.7083H47.4792C49.3055 28.7083 50.7917 30.1945 50.7917 32.0208V43.0625ZM16.8849 9.80279C16.4543 9.37217 16.4543 8.67212 16.8849 8.2415L24.157 0.969458C24.6936 0.432833 25.3782 0.174458 26.0804 0.0839167C26.2107 0.0309167 26.3498 0 26.5 0C26.6502 0 26.7893 0.0309167 26.9196 0.0839167C27.6218 0.174458 28.3064 0.432833 28.843 0.969458L36.1151 8.2415C36.5457 8.67212 36.5457 9.37217 36.1151 9.80279C35.8987 10.0192 35.616 10.1252 35.3333 10.1252C35.0507 10.1252 34.768 10.017 34.5516 9.80279L27.6042 2.85537V23.1875C27.6042 23.797 27.1095 24.2917 26.5 24.2917C25.8905 24.2917 25.3958 23.797 25.3958 23.1875V2.85537L18.4484 9.80279C18.0178 10.2334 17.3155 10.2334 16.8849 9.80279Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_859_45">
+          <rect width="53" height="53" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export { Upload };