medusa-ui-common 2.0.0

package/src/common/components/side-panel/index.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react'
+import { clx } from "@medusajs/ui"
+
+type SidePanelProps = {
+    isOpen: boolean
+    onClose: () => void
+    title: string
+    children: React.ReactNode
+}
+
+const SidePanel: React.FC<SidePanelProps> = ({ isOpen, onClose, title, children }) => {
+    // Prevent body scroll when panel is open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden'
+        } else {
+            document.body.style.overflow = 'unset'
+        }
+        return () => {
+            document.body.style.overflow = 'unset'
+        }
+    }, [isOpen])
+
+    return (
+        <>
+            {/* Backdrop */}
+            <div
+                className={clx(
+                    "fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity duration-300 z-[999]",
+                    isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+                )}
+                onClick={onClose}
+            />
+
+            {/* Panel */}
+            <div
+                className={clx(
+                    "fixed top-0 right-0 h-full w-[90%] min-[400px]:w-[350px] sm:w-[400px] md:w-[450px] lg:w-[480px] bg-[#FFFAFE] shadow-2xl transition-transform duration-300 ease-in-out z-[1000] flex flex-col",
+                    isOpen ? "translate-x-0" : "translate-x-full"
+                )}
+            >
+                {/* Header */}
+                <div className="flex items-center justify-between p-6 border-b border-gray-100">
+                    <h2 className="text-xl font-bold text-gray-900">{title}</h2>
+                    <button
+                        onClick={onClose}
+                        className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+                    >
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 overflow-y-auto p-6">
+                    {children}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default SidePanel

package/src/common/components/submit-button/index.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Button } from "@medusajs/ui"
+import React from "react"
+import { useFormStatus } from "react-dom"
+
+export function SubmitButton({
+  children,
+  variant = "primary",
+  className,
+  "data-testid": dataTestId,
+}: {
+  children: React.ReactNode
+  variant?: "primary" | "secondary" | "transparent" | "danger" | null
+  className?: string
+  "data-testid"?: string
+}) {
+  const { pending } = useFormStatus()
+
+  return (
+    <Button
+      size="large"
+      className={className}
+      type="submit"
+      isLoading={pending}
+      variant={variant || "primary"}
+      data-testid={dataTestId}
+    >
+      {children}
+    </Button>
+  )
+}

package/src/common/icons/arrow-left.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { IconProps } from "types/icon"
+
+const ArrowLeft: React.FC<IconProps> = ({
+    size = "16",
+    color = "currentColor",
+    ...attributes
+}) => {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...attributes}
+        >
+            <path
+                d="M19 12H5"
+                stroke={color}
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M12 19L5 12L12 5"
+                stroke={color}
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    )
+}
+
+export default ArrowLeft

package/src/common/icons/back.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Back: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M4 3.5V9.5H10"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.09714 14.014C4.28641 15.7971 4.97372 16.7931 6.22746 18.0783C7.4812 19.3635 9.13155 20.1915 10.9137 20.4293C12.6958 20.6671 14.5064 20.301 16.0549 19.3898C17.6033 18.4785 18.8 17.0749 19.4527 15.4042C20.1054 13.7335 20.1764 11.8926 19.6543 10.1769C19.1322 8.46112 18.0472 6.97003 16.5735 5.94286C15.0997 4.91569 13.3227 4.412 11.5275 4.51261C9.73236 4.61323 8.02312 5.31232 6.6741 6.4977L4 8.89769"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Back

package/src/common/icons/bancontact.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Ideal: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width="24px"
+      height="24px"
+      viewBox="0 0 24 24"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      fill={color}
+      {...attributes}
+    >
+      <title>Bancontact icon</title>
+      <path d="M21.385 9.768h-7.074l-4.293 5.022H1.557L3.84 12.1H1.122C.505 12.1 0 12.616 0 13.25v2.428c0 .633.505 1.15 1.122 1.15h12.933c.617 0 1.46-.384 1.874-.854l1.956-2.225 3.469-3.946.031-.035zm-1.123 1.279l-.751.855.75-.855zm2.616-3.875H9.982c-.617 0-1.462.384-1.876.853l-5.49 6.208h7.047l4.368-5.02h8.424l-2.263 2.689h2.686c.617 0 1.122-.518 1.122-1.151V8.323c0-.633-.505-1.15-1.122-1.15zm-1.87 3.024l-.374.427-.1.114.474-.54z" />
+    </svg>
+  )
+}
+
+export default Ideal

package/src/common/icons/chevron-down.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const ChevronDown: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M4 6L8 10L12 6"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ChevronDown

package/src/common/icons/delivered.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+
+const Delivered: React.FC<React.SVGProps<SVGSVGElement>> = ({
+    ...props
+}) => {
+    return (
+        <svg
+            width="46"
+            height="46"
+            viewBox="0 0 46 46"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <rect width="46" height="46" rx="23" fill="#04122C" />
+            <circle cx="30" cy="30" r="5" fill="#5BB190" />
+            <path
+                d="M32.4063 25.0342V16.8748C32.4066 16.7977 32.3865 16.7219 32.3481 16.655C32.3097 16.5882 32.2543 16.5327 32.1875 16.4942L21.5781 10.3692C21.5116 10.3308 21.4362 10.3105 21.3594 10.3105C21.2826 10.3105 21.2071 10.3308 21.1406 10.3692L10.5313 16.4942C10.4645 16.5327 10.4091 16.5882 10.3707 16.655C10.3323 16.7219 10.3122 16.7977 10.3125 16.8748V29.1248C10.3122 29.2019 10.3323 29.2777 10.3707 29.3445C10.4091 29.4114 10.4645 29.4669 10.5313 29.5054L21.1406 35.6304C21.2071 35.6688 21.2826 35.689 21.3594 35.689C21.4362 35.689 21.5116 35.6688 21.5781 35.6304L25.5638 33.3292C26.0605 34.0252 26.7108 34.5976 27.4643 35.002C28.2177 35.4065 29.0541 35.6321 29.9087 35.6616C30.7634 35.691 31.6133 35.5233 32.3928 35.1717C33.1722 34.82 33.8603 34.2936 34.4038 33.6334C34.9473 32.9732 35.3315 32.1968 35.5269 31.3643C35.7222 30.5317 35.7233 29.6654 35.5302 28.8324C35.3371 27.9993 34.9549 27.2219 34.4132 26.5602C33.8715 25.8986 33.1848 25.3704 32.4063 25.0167V25.0342ZM21.3594 11.2529L31.0938 16.8748L26.2113 19.6923L17.1725 13.6723L21.3594 11.2529ZM21.3594 22.4967L11.625 16.8748L16.3281 14.1579L25.3625 20.1823L21.3594 22.4967ZM11.1875 17.6317L20.9219 23.2535V34.4929L11.1875 28.871V17.6317ZM21.7969 34.4929V23.2535L25.7344 20.9654V24.3735C25.7344 24.4896 25.7805 24.6008 25.8625 24.6829C25.9446 24.7649 26.0558 24.811 26.1719 24.811C26.2879 24.811 26.3992 24.7649 26.4812 24.6829C26.5633 24.6008 26.6094 24.4896 26.6094 24.3735V20.4623L31.5094 17.6317V24.7235C31.046 24.5969 30.5679 24.5322 30.0875 24.531C29.1407 24.5335 28.2102 24.7772 27.3838 25.2392C26.5575 25.7012 25.8625 26.3663 25.3646 27.1716C24.8667 27.9769 24.5824 28.8958 24.5384 29.8415C24.4944 30.7873 24.6922 31.7286 25.1131 32.5767L21.7969 34.4929ZM30.1094 34.8123C29.1792 34.8123 28.2699 34.5364 27.4965 34.0197C26.723 33.5029 26.1202 32.7684 25.7643 31.909C25.4083 31.0496 25.3152 30.1039 25.4966 29.1916C25.6781 28.2793 26.126 27.4413 26.7838 26.7835C27.4415 26.1258 28.2795 25.6779 29.1918 25.4964C30.1042 25.3149 31.0498 25.4081 31.9092 25.764C32.7686 26.12 33.5031 26.7228 34.0199 27.4962C34.5367 28.2697 34.8125 29.179 34.8125 30.1092C34.8113 31.3561 34.3155 32.5517 33.4337 33.4335C32.552 34.3152 31.3564 34.8111 30.1094 34.8123Z"
+                fill="white"
+            />
+            <path
+                d="M32.187 27.8388L29.4745 31.4175L28.0527 29.7463C27.9778 29.6563 27.8703 29.5998 27.7538 29.5892C27.6373 29.5785 27.5213 29.6145 27.4314 29.6894C27.3415 29.7642 27.285 29.8717 27.2743 29.9882C27.2636 30.1047 27.2997 30.2207 27.3745 30.3106L29.1245 32.4019C29.1656 32.4499 29.2166 32.4885 29.274 32.5149C29.3314 32.5413 29.3938 32.555 29.457 32.555C29.5227 32.553 29.5871 32.5363 29.6454 32.506C29.7038 32.4757 29.7545 32.4326 29.7939 32.38L32.8345 28.3681C32.8915 28.3302 32.9388 28.2794 32.9726 28.2199C33.0064 28.1604 33.0258 28.0938 33.0291 28.0254C33.0325 27.957 33.0198 27.8888 32.992 27.8262C32.9642 27.7637 32.9221 27.7085 32.8691 27.6652C32.8161 27.6219 32.7537 27.5916 32.6868 27.5768C32.62 27.562 32.5506 27.563 32.4843 27.5799C32.4179 27.5968 32.3565 27.629 32.3048 27.674C32.2532 27.7189 32.2129 27.7754 32.187 27.8388Z"
+                fill="white"
+            />
+        </svg>
+    )
+}
+
+export default Delivered

package/src/common/icons/envelope.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Envelope: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M18.2422 0H1.75781C0.790547 0 0 0.78707 0 1.75781V12.3047C0 13.2758 0.791055 14.0625 1.75781 14.0625H18.2422C19.2095 14.0625 20 13.2754 20 12.3047V1.75781C20 0.786836 19.2091 0 18.2422 0ZM17.9723 1.17188L10.4541 8.71461C10.225 8.94438 9.77512 8.94453 9.54594 8.71461L2.02773 1.17188H17.9723ZM1.17188 12.0893V1.97324L6.21348 7.03125L1.17188 12.0893ZM2.02773 12.8906L7.04078 7.86125L8.71598 9.54191C9.40246 10.2306 10.5978 10.2304 11.2841 9.54191L12.9593 7.86129L17.9723 12.8906H2.02773ZM18.8281 12.0893L13.7865 7.03125L18.8281 1.97324V12.0893Z"
+        fill={color}
+      />
+    </svg>
+  )
+}
+
+export default Envelope

package/src/common/icons/eye-off.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const EyeOff: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M8.56818 4.70906C9.0375 4.59921 9.518 4.54429 10 4.54543C14.7727 4.54543 17.5 9.99997 17.5 9.99997C17.0861 10.7742 16.5925 11.5032 16.0273 12.175M11.4455 11.4454C11.2582 11.6464 11.0324 11.8076 10.7815 11.9194C10.5306 12.0312 10.2597 12.0913 9.98506 12.0961C9.71042 12.101 9.43761 12.0505 9.18292 11.9476C8.92822 11.8447 8.69686 11.6916 8.50262 11.4973C8.30839 11.3031 8.15527 11.0718 8.05239 10.8171C7.94952 10.5624 7.899 10.2896 7.90384 10.0149C7.90869 9.74027 7.9688 9.46941 8.0806 9.2185C8.19239 8.9676 8.35358 8.74178 8.55455 8.55452M14.05 14.05C12.8845 14.9384 11.4653 15.4306 10 15.4545C5.22727 15.4545 2.5 9.99997 2.5 9.99997C3.34811 8.41945 4.52441 7.03857 5.95 5.94997L14.05 14.05Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.5 2.5L17.5 17.5"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default EyeOff

package/src/common/icons/eye.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Eye: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M2.5 9.99992C2.5 9.99992 5.22727 4.58325 10 4.58325C14.7727 4.58325 17.5 9.99992 17.5 9.99992C17.5 9.99992 14.7727 15.4166 10 15.4166C5.22727 15.4166 2.5 9.99992 2.5 9.99992Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.99965 12.074C11.145 12.074 12.0735 11.1455 12.0735 10.0001C12.0735 8.85477 11.145 7.92627 9.99965 7.92627C8.85428 7.92627 7.92578 8.85477 7.92578 10.0001C7.92578 11.1455 8.85428 12.074 9.99965 12.074Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Eye

package/src/common/icons/fast-delivery.tsx

@@ -0,0 +1,65 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const FastDelivery: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M3.63462 7.35205H2.70508"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.56416 4.56348H2.70508"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.6483 19.4365H3.63477"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.9034 4.56348L15.9868 7.61888C15.8688 8.01207 15.5063 8.28164 15.0963 8.28164H12.2036C11.5808 8.28164 11.1346 7.68115 11.3131 7.08532L12.0697 4.56348"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.28125 12.9297H10.2612"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.055 15.718H7.21305C5.71835 15.718 4.64659 14.2772 5.07603 12.8457L7.08384 6.15299C7.36735 5.20951 8.23554 4.56348 9.22086 4.56348H19.0638C20.5585 4.56348 21.6302 6.00426 21.2008 7.43576L19.193 14.1284C18.9095 15.0719 18.0403 15.718 17.055 15.718Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default FastDelivery

package/src/common/icons/ideal.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Ideal: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width="20px"
+      height="20px"
+      viewBox="0 0 24 24"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      fill={color}
+      {...attributes}
+    >
+      <title>iDEAL icon</title>
+      <path d="M.975 2.61v18.782h11.411c6.89 0 10.64-3.21 10.64-9.415 0-6.377-4.064-9.367-10.64-9.367H.975zm11.411-.975C22.491 1.635 24 8.115 24 11.977c0 6.7-4.124 10.39-11.614 10.39H0V1.635h12.386z M2.506 13.357h3.653v6.503H2.506z M6.602 10.082a2.27 2.27 0 1 1-4.54 0 2.27 2.27 0 0 1 4.54 0m1.396-1.057v2.12h.65c.45 0 .867-.13.867-1.077 0-.924-.463-1.043-.867-1.043h-.65zm10.85-1.054h1.053v3.174h1.56c-.428-5.758-4.958-7.002-9.074-7.002H7.999v3.83h.65c1.183 0 1.92.803 1.92 2.095 0 1.333-.719 2.129-1.92 2.129h-.65v7.665h4.388c6.692 0 9.021-3.107 9.103-7.665h-2.64V7.97zm-2.93 2.358h.76l-.348-1.195h-.063l-.35 1.195zm-1.643 1.87l1.274-4.228h1.497l1.274 4.227h-1.095l-.239-.818H15.61l-.24.818h-1.095zm-.505-1.054v1.052h-2.603V7.973h2.519v1.052h-1.467v.49h1.387v1.05H12.22v.58h1.55z" />
+    </svg>
+  )
+}
+
+export default Ideal

package/src/common/icons/lock.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Lock: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M13.3333 7.04667H12.98V4.98C12.98 3.65922 12.4553 2.39254 11.5214 1.45861C10.5875 0.524677 9.32078 0 8 0C6.67922 0 5.41254 0.524677 4.47861 1.45861C3.54468 2.39254 3.02 3.65922 3.02 4.98V7.04667H2.66667C1.95942 7.04667 1.28115 7.32762 0.781048 7.82772C0.280951 8.32781 0 9.00609 0 9.71333V17.3333C0 18.0406 0.280951 18.7189 0.781048 19.219C1.28115 19.719 1.95942 20 2.66667 20H13.3333C14.0406 20 14.7189 19.719 15.219 19.219C15.719 18.7189 16 18.0406 16 17.3333V9.71333C16 9.00609 15.719 8.32781 15.219 7.82772C14.7189 7.32762 14.0406 7.04667 13.3333 7.04667ZM4.35333 4.98C4.35333 4.50111 4.44766 4.02692 4.63092 3.58448C4.81418 3.14205 5.08279 2.74004 5.42142 2.40142C5.76004 2.06279 6.16205 1.79418 6.60448 1.61092C7.04692 1.42766 7.52111 1.33333 8 1.33333C8.47889 1.33333 8.95309 1.42766 9.39552 1.61092C9.83795 1.79418 10.24 2.06279 10.5786 2.40142C10.9172 2.74004 11.1858 3.14205 11.3691 3.58448C11.5523 4.02692 11.6467 4.50111 11.6467 4.98V7.04667H4.35333V4.98ZM14.6667 17.3333C14.6667 17.687 14.5262 18.0261 14.2761 18.2761C14.0261 18.5262 13.687 18.6667 13.3333 18.6667H2.66667C2.31304 18.6667 1.97391 18.5262 1.72386 18.2761C1.47381 18.0261 1.33333 17.687 1.33333 17.3333V9.71333C1.33333 9.35971 1.47381 9.02057 1.72386 8.77052C1.97391 8.52048 2.31304 8.38 2.66667 8.38H13.3333C13.687 8.38 14.0261 8.52048 14.2761 8.77052C14.5262 9.02057 14.6667 9.35971 14.6667 9.71333V17.3333Z"
+        fill={color}
+      />
+      <path
+        d="M7.99999 11.284C7.74134 11.2841 7.4886 11.3614 7.27416 11.506C7.05973 11.6506 6.89336 11.856 6.79639 12.0958C6.69942 12.3355 6.67625 12.5988 6.72987 12.8519C6.78348 13.1049 6.91143 13.3361 7.09732 13.516V15.0967C7.09732 15.2735 7.16756 15.443 7.29258 15.5681C7.41761 15.6931 7.58717 15.7633 7.76399 15.7633H8.23599C8.4128 15.7633 8.58237 15.6931 8.70739 15.5681C8.83242 15.443 8.90265 15.2735 8.90265 15.0967V13.516C9.08854 13.3361 9.21649 13.1049 9.2701 12.8519C9.32372 12.5988 9.30056 12.3355 9.20358 12.0958C9.10661 11.856 8.94024 11.6506 8.72581 11.506C8.51137 11.3614 8.25864 11.2841 7.99999 11.284Z"
+        fill={color}
+      />
+    </svg>
+  )
+}
+
+export default Lock

package/src/common/icons/map-pin.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const MapPin: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M15.8337 8.63636C15.8337 13.4091 10.0003 17.5 10.0003 17.5C10.0003 17.5 4.16699 13.4091 4.16699 8.63636C4.16699 7.0089 4.78157 5.44809 5.87554 4.2973C6.9695 3.14651 8.45323 2.5 10.0003 2.5C11.5474 2.5 13.0312 3.14651 14.1251 4.2973C15.2191 5.44809 15.8337 7.0089 15.8337 8.63636Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.99967 9.99996C10.9201 9.99996 11.6663 9.25377 11.6663 8.33329C11.6663 7.41282 10.9201 6.66663 9.99967 6.66663C9.0792 6.66663 8.33301 7.41282 8.33301 8.33329C8.33301 9.25377 9.0792 9.99996 9.99967 9.99996Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default MapPin

package/src/common/icons/medusa.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Medusa: React.FC<IconProps> = ({
+  size = "20",
+  color = "#9CA3AF",
+  ...attributes
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      {...attributes}
+    >
+      <path
+        d="M15.2447 2.92183L11.1688 0.576863C9.83524 -0.192288 8.20112 -0.192288 6.86753 0.576863L2.77285 2.92183C1.45804 3.69098 0.631592 5.11673 0.631592 6.63627V11.345C0.631592 12.8833 1.45804 14.2903 2.77285 15.0594L6.84875 17.4231C8.18234 18.1923 9.81646 18.1923 11.15 17.4231L15.2259 15.0594C16.5595 14.2903 17.3672 12.8833 17.3672 11.345V6.63627C17.4048 5.11673 16.5783 3.69098 15.2447 2.92183ZM9.00879 13.1834C6.69849 13.1834 4.82019 11.3075 4.82019 9C4.82019 6.69255 6.69849 4.81657 9.00879 4.81657C11.3191 4.81657 13.2162 6.69255 13.2162 9C13.2162 11.3075 11.3379 13.1834 9.00879 13.1834Z"
+        fill={color}
+      />
+    </svg>
+  )
+}
+
+export default Medusa

package/src/common/icons/menu.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Menu: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M3 12H21"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 6H21"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 18H21"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Menu
+

package/src/common/icons/nextjs.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const NextJs: React.FC<IconProps> = ({
+  size = "20",
+  color = "#9CA3AF",
+  ...attributes
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      {...attributes}
+    >
+      <path
+        d="M8.41117 0.0131402C8.3725 0.0166554 8.24946 0.0289589 8.13873 0.0377471C5.58488 0.267998 3.19273 1.64599 1.67764 3.76395C0.833977 4.94157 0.294381 6.27737 0.090495 7.69227C0.0184318 8.18617 0.00964355 8.33206 0.00964355 9.00172C0.00964355 9.67138 0.0184318 9.81726 0.090495 10.3112C0.579119 13.6876 2.98181 16.5244 6.24048 17.5755C6.82402 17.7636 7.43919 17.8919 8.13873 17.9692C8.41117 17.9991 9.58879 17.9991 9.86122 17.9692C11.0687 17.8356 12.0917 17.5368 13.1006 17.0218C13.2552 16.9427 13.2851 16.9216 13.264 16.9041C13.25 16.8935 12.5908 16.0094 11.7999 14.9408L10.3621 12.9986L8.56057 10.3323C7.56926 8.86638 6.75371 7.66767 6.74668 7.66767C6.73965 7.66591 6.73262 8.85056 6.7291 10.2971C6.72383 12.8299 6.72207 12.9318 6.69044 12.9916C6.64474 13.0777 6.60958 13.1128 6.53576 13.1515C6.47952 13.1796 6.43031 13.1849 6.1649 13.1849H5.86083L5.77998 13.1339C5.72725 13.1005 5.68858 13.0566 5.66222 13.0056L5.62531 12.9265L5.62882 9.40246L5.63409 5.87663L5.68858 5.80808C5.7167 5.77117 5.77646 5.72372 5.81865 5.70087C5.89071 5.66571 5.91883 5.6622 6.2229 5.6622C6.58146 5.6622 6.64122 5.67626 6.73438 5.7782C6.76074 5.80632 7.73623 7.27571 8.90331 9.04566C10.0704 10.8156 11.6663 13.2324 12.4502 14.4188L13.8739 16.5754L13.946 16.5279C14.584 16.1131 15.2589 15.5226 15.7933 14.9074C16.9305 13.6015 17.6634 12.009 17.9095 10.3112C17.9815 9.81726 17.9903 9.67138 17.9903 9.00172C17.9903 8.33206 17.9815 8.18617 17.9095 7.69227C17.4208 4.31585 15.0181 1.47901 11.7595 0.427943C11.1847 0.241633 10.5731 0.113326 9.88758 0.0359895C9.71885 0.0184131 8.55705 -0.000920974 8.41117 0.0131402ZM12.0917 5.45128C12.176 5.49346 12.2446 5.57432 12.2692 5.65868C12.2832 5.70438 12.2868 6.68163 12.2832 8.88395L12.278 12.0442L11.7208 11.19L11.1619 10.3358V8.03853C11.1619 6.55332 11.1689 5.71844 11.1795 5.67802C11.2076 5.57959 11.2691 5.50225 11.3535 5.45655C11.4255 5.41964 11.4519 5.41613 11.7278 5.41613C11.988 5.41613 12.0337 5.41964 12.0917 5.45128Z"
+        fill={color}
+      />
+    </svg>
+  )
+}
+
+export default NextJs