fix build

packages/features/medusa-storefront/src/modules/common/components/delete-button/index.tsx

@@ -1,25 +1,27 @@
-import { deleteLineItem } from "@lib/data/cart"
-import { Spinner, Trash } from "@medusajs/icons"
-import { clx } from "@medusajs/ui"
-import { useState } from "react"
+"use client";
+
+import { deleteLineItem } from "@lib/data/cart";
+import { Spinner, Trash } from "@medusajs/icons";
+import { clx } from "@medusajs/ui";
+import { useState } from "react";
 
 const DeleteButton = ({
   id,
   children,
   className,
 }: {
-  id: string
-  children?: React.ReactNode
-  className?: string
+  id: string;
+  children?: React.ReactNode;
+  className?: string;
 }) => {
-  const [isDeleting, setIsDeleting] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const handleDelete = async (id: string) => {
-    setIsDeleting(true)
+    setIsDeleting(true);
     await deleteLineItem(id).catch((err) => {
-      setIsDeleting(false)
-    })
-  }
+      setIsDeleting(false);
+    });
+  };
 
   return (
     <div
@@ -36,7 +38,7 @@ const DeleteButton = ({
         <span>{children}</span>
       </button>
     </div>
-  )
-}
+  );
+};
 
-export default DeleteButton
+export default DeleteButton;

packages/features/medusa-storefront/src/modules/common/components/input/index.tsx

@@ -1,37 +1,39 @@
-import { Label } from "@medusajs/ui"
-import React, { useEffect, useImperativeHandle, useState } from "react"
+"use client";
 
-import Eye from "@modules/common/icons/eye"
-import EyeOff from "@modules/common/icons/eye-off"
+import { Label } from "@medusajs/ui";
+import React, { useEffect, useImperativeHandle, useState } from "react";
+
+import Eye from "@modules/common/icons/eye";
+import EyeOff from "@modules/common/icons/eye-off";
 
 type InputProps = Omit<
   Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
   "placeholder"
 > & {
-  label: string
-  errors?: Record<string, unknown>
-  touched?: Record<string, unknown>
-  name: string
-  topLabel?: string
-}
+  label: string;
+  errors?: Record<string, unknown>;
+  touched?: Record<string, unknown>;
+  name: string;
+  topLabel?: string;
+};
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ type, name, label, touched, required, topLabel, ...props }, ref) => {
-    const inputRef = React.useRef<HTMLInputElement>(null)
-    const [showPassword, setShowPassword] = useState(false)
-    const [inputType, setInputType] = useState(type)
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const [showPassword, setShowPassword] = useState(false);
+    const [inputType, setInputType] = useState(type);
 
     useEffect(() => {
       if (type === "password" && showPassword) {
-        setInputType("text")
+        setInputType("text");
       }
 
       if (type === "password" && !showPassword) {
-        setInputType("password")
+        setInputType("password");
       }
-    }, [type, showPassword])
+    }, [type, showPassword]);
 
-    useImperativeHandle(ref, () => inputRef.current!)
+    useImperativeHandle(ref, () => inputRef.current!);
 
     return (
       <div className="flex flex-col w-full">
@@ -67,10 +69,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           )}
         </div>
       </div>
-    )
+    );
   }
-)
+);
 
-Input.displayName = "Input"
+Input.displayName = "Input";
 
-export default Input
+export default Input;

packages/features/medusa-storefront/src/modules/common/components/native-select/index.tsx

@@ -1,5 +1,7 @@
-import { ChevronUpDown } from "@medusajs/icons"
-import { clx } from "@medusajs/ui"
+"use client";
+
+import { ChevronUpDown } from "@medusajs/icons";
+import { clx } from "@medusajs/ui";
 import {
   SelectHTMLAttributes,
   forwardRef,
@@ -7,34 +9,34 @@ import {
   useImperativeHandle,
   useRef,
   useState,
-} from "react"
+} from "react";
 
 export type NativeSelectProps = {
-  placeholder?: string
-  errors?: Record<string, unknown>
-  touched?: Record<string, unknown>
-} & SelectHTMLAttributes<HTMLSelectElement>
+  placeholder?: string;
+  errors?: Record<string, unknown>;
+  touched?: Record<string, unknown>;
+} & SelectHTMLAttributes<HTMLSelectElement>;
 
 const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
   (
     { placeholder = "Select...", defaultValue, className, children, ...props },
     ref
   ) => {
-    const innerRef = useRef<HTMLSelectElement>(null)
-    const [isPlaceholder, setIsPlaceholder] = useState(false)
+    const innerRef = useRef<HTMLSelectElement>(null);
+    const [isPlaceholder, setIsPlaceholder] = useState(false);
 
     useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
       ref,
       () => innerRef.current
-    )
+    );
 
     useEffect(() => {
       if (innerRef.current && innerRef.current.value === "") {
-        setIsPlaceholder(true)
+        setIsPlaceholder(true);
       } else {
-        setIsPlaceholder(false)
+        setIsPlaceholder(false);
       }
-    }, [innerRef.current?.value])
+    }, [innerRef.current?.value]);
 
     return (
       <div>
@@ -65,10 +67,10 @@ const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           </span>
         </div>
       </div>
-    )
+    );
   }
-)
+);
 
-NativeSelect.displayName = "NativeSelect"
+NativeSelect.displayName = "NativeSelect";
 
-export default NativeSelect
+export default NativeSelect;