@evenicanpm/storefront-core 1.2.2 → 1.4.0

package/src/components-v2/BazaarMenu.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { Fragment, ReactNode, useState } from "react";
 import Menu from "@mui/material/Menu";
-import { SxProps, Theme } from "@mui/material/styles";
+import type { SxProps, Theme } from "@mui/material/styles";
+import { Fragment, type ReactNode, useState } from "react";
 
 // ===============================================================
 interface Props {
@@ -21,7 +21,7 @@ export default function BazaarMenu({
 	direction = "left",
 	sx,
 	...props
-}: Props) {
+}: Readonly<Props>) {
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
 	const handleClose = () => setAnchorEl(null);
@@ -36,7 +36,7 @@ export default function BazaarMenu({
 				elevation={0}
 				anchorEl={anchorEl}
 				onClose={handleClose}
-				open={open !== undefined ? open : !!anchorEl}
+				open={open ?? Boolean(anchorEl)}
 				anchorOrigin={{ vertical: "bottom", horizontal: direction }}
 				transformOrigin={{ vertical: "top", horizontal: direction }}
 				sx={sx}

package/src/components-v2/BazaarSwitch.tsx

@@ -1,4 +1,4 @@
-import Switch, { SwitchProps } from "@mui/material/Switch";
+import Switch, { type SwitchProps } from "@mui/material/Switch";
 import styled from "@mui/material/styles/styled";
 
 // STYLED COMPONENT

package/src/components-v2/BazaarTextField.tsx

@@ -1,7 +1,7 @@
-import Box, { BoxProps } from "@mui/material/Box";
-import TextField, { TextFieldProps } from "@mui/material/TextField";
 // CUSTOM COMPONENT
 import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Box, { type BoxProps } from "@mui/material/Box";
+import TextField, { type TextFieldProps } from "@mui/material/TextField";
 
 // ==============================================================
 type Props = TextFieldProps & BoxProps;
@@ -17,7 +17,7 @@ export default function BazaarTextField({
 
 	// Splits props into Box and TextField props. Bracket notation allows dynamic names like "mt" or "mb".
 	for (const key in props) {
-		if (SPACE_PROPS_LIST.includes(key)) {
+		if (SPACE_PROPS_LIST.has(key)) {
 			(boxProps as any)[key] = (props as any)[key];
 		} else {
 			(textFieldProps as any)[key] = (props as any)[key];
@@ -45,7 +45,7 @@ export default function BazaarTextField({
 	);
 }
 
-const SPACE_PROPS_LIST = [
+const SPACE_PROPS_LIST = new Set([
 	"m",
 	"mt",
 	"mr",
@@ -74,4 +74,4 @@ const SPACE_PROPS_LIST = [
 	"paddingLeft",
 	"paddingX",
 	"paddingY",
-];
+]);

package/src/components-v2/BorderShadowCard.stories.tsx

@@ -1,6 +1,6 @@
+import { Box, Typography } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
-import { BorderShadowCard, lightShadow, lightBorder } from "./BoxShadowCard";
-import { Typography, Box } from "@mui/material";
+import { BorderShadowCard } from "./BoxShadowCard";
 
 const meta = {
 	title: "Bazaar/BorderShadowCard",

package/src/components-v2/CountryInput.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import CountryInput from "./countries-input";
-import { countries } from "../../__mocks__/countries";
 import { useState } from "react";
+import { countries } from "../../__mocks__/countries";
+import CountryInput from "./countries-input";
 
 const meta = {
 	title: "Bazaar/CountryInput",

package/src/components-v2/DropZone.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import type { Accept } from "react-dropzone";
 import DropZone from "./DropZone";
-import { Accept } from "react-dropzone";
 
 const meta = {
 	title: "Bazaar/DropZone",

package/src/components-v2/DropZone.tsx

@@ -1,16 +1,16 @@
-import { useCallback } from "react";
-// MUI
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
-// DROPZONE
-import { Accept, FileRejection, useDropzone } from "react-dropzone";
 // LOCAL CUSTOM COMPONENT
 import {
 	H5,
 	Small,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// MUI
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
 import { useTranslations } from "next-intl";
+import { useCallback } from "react";
+// DROPZONE
+import { type Accept, type FileRejection, useDropzone } from "react-dropzone";
 
 // ========================================================
 interface Props {
@@ -26,8 +26,7 @@ export default function DropZone({
 	onChange,
 	title = "Drag & drop files here",
 	handleReject,
-	accept,
-}: Props) {
+}: Readonly<Props>) {
 	const onDrop = useCallback(
 		(acceptedFiles: File[]) => onChange(acceptedFiles),
 		[onChange],

package/src/components-v2/HoverBox.stories.tsx

@@ -1,6 +1,6 @@
+import { Box, Typography } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
 import HoverBox from "./HoverBox";
-import { Box, Typography } from "@mui/material";
 
 const meta = {
 	title: "Bazaar/HoverBox",

package/src/components-v2/ImageWithFallback.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
-import { ImageProps } from "next/image";
 import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import type { ImageProps } from "next/image";
+import type React from "react";
+import { useEffect, useState } from "react";
 
 export interface ImageWithFallbackProps extends ImageProps {
 	fallbackSrc?: string;

package/src/components-v2/LazyImage.tsx

@@ -1,12 +1,20 @@
 "use client";
 
-import NextImage, { ImageProps } from "next/image";
 import styled from "@mui/material/styles/styled";
-import { ComponentType } from "react";
+import NextImage, { type ImageProps } from "next/image";
+import type { ComponentType } from "react";
 
 const LazyImage: ComponentType<ImageProps> = styled(NextImage)({
 	width: "100%",
 	height: "auto", //If we use CSS to change the size of image, we should include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.
 });
 
+/**
+ * Next Image with a hover zoom effect. Used for blog cards.
+ */
+export const ZoomLazyImage: ComponentType<ImageProps> = styled(NextImage)({
+	transition: "transform 0.3s",
+	"&:hover": { transform: "scale(1.1)", cursor: "pointer" },
+});
+
 export default LazyImage;

package/src/components-v2/Loading.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-
 // Material-UI
 import { Box, CircularProgress } from "@mui/material";
+import type React from "react";
 
 interface Props {
 	height?: number;

package/src/components-v2/SearchInput.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import SearchInput from "./SearchInput";
 import { useState } from "react";
+import SearchInput from "./SearchInput";
 
 const meta = {
 	title: "Bazaar/SearchInput",

package/src/components-v2/SearchInput.tsx

@@ -1,7 +1,7 @@
-import InputBase, { InputBaseProps } from "@mui/material/InputBase";
-import styled from "@mui/material/styles/styled";
 // MUI ICON COMPONENT
 import Search from "@mui/icons-material/Search";
+import InputBase, { type InputBaseProps } from "@mui/material/InputBase";
+import styled from "@mui/material/styles/styled";
 
 // STYLED COMPONENT
 const StyledInputBase = styled(InputBase)(({ theme }) => ({

package/src/components-v2/SnackbarProvider.tsx

@@ -1,6 +1,6 @@
-import { PropsWithChildren } from "react";
 import styled from "@mui/material/styles/styled";
 import { SnackbarProvider as NotistackProvider } from "notistack";
+import type { PropsWithChildren } from "react";
 
 // STYLED COMPONENT
 const Provider = styled(NotistackProvider)(({ theme }) => ({

package/src/components-v2/T/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import { useTranslations } from "next-intl";
+import React from "react";
 
 interface Props {
 	path: string;

package/src/components-v2/Typography.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import {
+	Display,
 	H1,
 	H2,
 	H3,
@@ -9,9 +10,8 @@ import {
 	Paragraph,
 	Small,
 	Span,
-	Tiny,
-	Display,
 	Subtitle,
+	Tiny,
 } from "./Typography";
 
 const meta = {

package/src/components-v2/Typography.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Box, { BoxProps } from "@mui/material/Box";
+import Box, { type BoxProps } from "@mui/material/Box";
 import styled from "@mui/material/styles/styled";
 import clsx from "clsx";
 import React from "react";
@@ -22,7 +22,7 @@ const StyledBox = styled(Box, {
 	}),
 }));
 
-export function H1(props: EllipsisProps) {
+export function H1(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -39,7 +39,7 @@ export function H1(props: EllipsisProps) {
 	);
 }
 
-export function H2(props: EllipsisProps) {
+export function H2(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -56,7 +56,7 @@ export function H2(props: EllipsisProps) {
 	);
 }
 
-export function H3(props: EllipsisProps) {
+export function H3(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -73,7 +73,7 @@ export function H3(props: EllipsisProps) {
 	);
 }
 
-export function H4(props: EllipsisProps) {
+export function H4(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -90,7 +90,7 @@ export function H4(props: EllipsisProps) {
 	);
 }
 
-export function H5(props: EllipsisProps) {
+export function H5(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -108,7 +108,7 @@ export function H5(props: EllipsisProps) {
 	);
 }
 
-export function H6(props: EllipsisProps) {
+export function H6(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -125,7 +125,7 @@ export function H6(props: EllipsisProps) {
 	);
 }
 
-export function Paragraph(props: EllipsisProps) {
+export function Paragraph(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -142,7 +142,7 @@ export function Paragraph(props: EllipsisProps) {
 	);
 }
 
-export function Small(props: EllipsisProps) {
+export function Small(props: Readonly<EllipsisProps>) {
 	const { ellipsis = false, children, className, ...others } = props;
 
 	return (
@@ -159,7 +159,7 @@ export function Small(props: EllipsisProps) {
 	);
 }
 
-export function Span(props: EllipsisProps) {
+export function Span(props: Readonly<EllipsisProps>) {
 	const { ellipsis = false, children, className, ...others } = props;
 
 	return (
@@ -174,7 +174,7 @@ export function Span(props: EllipsisProps) {
 	);
 }
 
-export function Tiny(props: EllipsisProps) {
+export function Tiny(props: Readonly<EllipsisProps>) {
 	const { ellipsis = false, children, className, ...others } = props;
 
 	return (
@@ -191,7 +191,7 @@ export function Tiny(props: EllipsisProps) {
 	);
 }
 
-export function Display(props: EllipsisProps) {
+export function Display(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (
@@ -208,7 +208,7 @@ export function Display(props: EllipsisProps) {
 	);
 }
 
-export function Subtitle(props: EllipsisProps) {
+export function Subtitle(props: Readonly<EllipsisProps>) {
 	const { ellipsis, children, className, ...others } = props;
 
 	return (

package/src/components-v2/WhiteButton.tsx

@@ -1,5 +1,5 @@
-import { PropsWithChildren } from "react";
-import Button, { ButtonProps } from "@mui/material/Button";
+import Button, { type ButtonProps } from "@mui/material/Button";
+import type { PropsWithChildren } from "react";
 
 // ==================================================
 interface Props extends PropsWithChildren, ButtonProps {}

package/src/components-v2/accordion/accordion-header.tsx

@@ -1,10 +1,10 @@
-import { ReactNode } from "react";
-import { BoxProps } from "@mui/material/Box";
-import { styled, SxProps, Theme } from "@mui/material/styles";
-// MUI ICON COMPONENTS
-import ChevronRight from "@mui/icons-material/ChevronRight";
 // GLOBAL CUSTOM COMPONENT
 import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+// MUI ICON COMPONENTS
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import type { BoxProps } from "@mui/material/Box";
+import { type SxProps, styled, type Theme } from "@mui/material/styles";
+import type { ReactNode } from "react";
 
 // STYLED COMPONENT
 const RootContainer = styled(FlexBox, {
@@ -31,7 +31,7 @@ interface Props extends BoxProps {
 }
 // =================================================================
 
-export default function AccordionHeader(props: Props) {
+export default function AccordionHeader(props: Readonly<Props>) {
 	const { open, children, showIcon = true, ...others } = props;
 
 	return (

package/src/components-v2/carousel/Carousel.stories.tsx

@@ -1,6 +1,6 @@
+import { Box, Paper, Typography } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
 import Carousel from "./carousel";
-import { Box, Typography, Paper } from "@mui/material";
 
 const meta: Meta<typeof Carousel> = {
 	title: "Carousel",

package/src/components-v2/carousel/carousel.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import React, { forwardRef, PropsWithChildren } from "react";
-import { SxProps, Theme, useTheme } from "@mui/material/styles";
-import Slider from "react-slick";
-import { Settings, CustomArrowProps } from "react-slick";
+import { type SxProps, type Theme, useTheme } from "@mui/material/styles";
+import type React from "react";
+import { forwardRef, type PropsWithChildren } from "react";
+import Slider, { type CustomArrowProps, type Settings } from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import { createArrows } from "@evenicanpm/storefront-core/src/components-v2/carousel/components/carousel-arrows";

package/src/components-v2/carousel/components/carousel-arrows.tsx

@@ -1,10 +1,10 @@
-import { Settings, CustomArrowProps } from "react-slick";
-import { SxProps, Theme } from "@mui/material/styles";
+// STYLED COMPONENT
+import { ArrowButton } from "@evenicanpm/storefront-core/src/components-v2/carousel/styles/index";
 // MUI ICON COMPONENTS
 import ArrowBack from "@mui/icons-material/ArrowBack";
 import ArrowForward from "@mui/icons-material/ArrowForward";
-// STYLED COMPONENT
-import { ArrowButton } from "@evenicanpm/storefront-core/src/components-v2/carousel/styles/index";
+import type { SxProps, Theme } from "@mui/material/styles";
+import type { CustomArrowProps, Settings } from "react-slick";
 
 type ArrowConfig = {
 	sx?: SxProps<Theme>;

package/src/components-v2/carousel/components/carousel-dots.tsx

@@ -1,10 +1,10 @@
-import { Settings } from "react-slick";
-import { SxProps, Theme } from "@mui/material/styles";
 // STYLED COMPONENTS
 import {
 	Dot,
 	DotList,
 } from "@evenicanpm/storefront-core/src/components-v2/carousel/styles/index";
+import type { SxProps, Theme } from "@mui/material/styles";
+import type { Settings } from "react-slick";
 
 type DotConfig = {
 	dotColor?: string;

package/src/components-v2/carousel-cards/carousel-card-1/carousel-card-1.tsx

@@ -1,11 +1,11 @@
-import { ReactNode } from "react";
-import Grid from "@mui/material/Grid2";
-import Button from "@mui/material/Button";
 // GLOBAL CUSTOM COMPONENTS
 import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 // STYLED COMPONENT
 import { StyledRoot } from "@evenicanpm/storefront-core/src/components-v2/carousel-cards/carousel-card-1/styles";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid2";
+import type { ReactNode } from "react";
 
 type CarouselCard1Props = {
 	children: ReactNode;

package/src/components-v2/categories/Categories.stories.tsx

@@ -1,14 +1,15 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import type { Meta, StoryObj } from "@storybook/react";
-import CategoryMenu from "./category-menu";
 
-import Button from "@mui/material/Button";
-// MUI ICON COMPONENT
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 // CUSTOM ICON COMPONENTS
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box";
+// MUI ICON COMPONENT
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+
+import Button from "@mui/material/Button";
+import type { Meta, StoryObj } from "@storybook/react";
 import { H6 } from "../Typography";
+import CategoryMenu from "./category-menu";
 
 //TODO: Write more stories for variations of Header.
 

package/src/components-v2/categories/category-list/category-list.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import React, { createContext, useContext, ReactNode } from "react";
 import getCategories from "@evenicanpm/storefront-core/src/api-manager/services/categories/queries/get-categories";
-import { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import {
 	StyledRoot,
 	SubMenuStyledRoot,
 } from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/styles";
-
+import CategoryListItem from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/index";
 import MegaMenu1 from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/mega-menu-1";
 import MegaMenu2 from "@evenicanpm/storefront-core/src/components-v2/categories/mega-menu/mega-menu-2";
-import CategoryListItem from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/index";
+import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
+import React, { createContext, type ReactNode, useContext } from "react";
 
 type MegaMenuType = "default" | "mega-menu-1" | "mega-menu-2";
 
@@ -40,7 +39,7 @@ const CategoryList = ({
 	categories,
 	children,
 }: RootProps) => {
-	let { data: fetchedCategories } = getCategories.useSuspenseData();
+	const { data: fetchedCategories } = getCategories.useSuspenseData();
 	const cats = categories ?? fetchedCategories ?? [];
 
 	const megaMenuRenderers: Record<

package/src/components-v2/categories/category-list/styles.ts

@@ -1,14 +1,7 @@
-import styled from "@mui/material/styles/styled";
-import { Props } from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/types";
+import type { Props } from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/types";
 import Card from "@mui/material/Card";
+import styled from "@mui/material/styles/styled";
 
-/*
-interface StyledRootProps extends React.HTMLAttributes<HTMLDivElement> {
-  elevation: number;
-  open?: boolean;
-  position: "absolute" | "relative";
-}
-*/
 // styled component
 export const StyledRoot = styled("div", {
 	shouldForwardProp: (prop) => prop !== "position" && prop !== "open",

package/src/components-v2/categories/category-list-item/category-menu-item.tsx

@@ -1,10 +1,10 @@
-import Link from "next/link";
-import { ReactNode } from "react";
-// MUI ICON COMPONENTS
-import { SvgIconComponent } from "@mui/icons-material";
-import ChevronRight from "@mui/icons-material/ChevronRight";
 // STYLED COMPONENT
 import { Wrapper } from "@evenicanpm/storefront-core/src/components-v2/categories/category-list-item/styles";
+// MUI ICON COMPONENTS
+import type { SvgIconComponent } from "@mui/icons-material";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import Link from "next/link";
+import type { ReactNode } from "react";
 
 // =============================================================
 interface Props {
@@ -16,7 +16,7 @@ interface Props {
 }
 // =============================================================
 
-export default function CategoryListItem(props: Props) {
+export default function CategoryListItem(props: Readonly<Props>) {
 	const { href, title, render, caret = true, icon: Icon } = props;
 
 	return (

package/src/components-v2/categories/category-menu.tsx

@@ -1,22 +1,25 @@
 "use client";
 
-import { MouseEvent, useCallback, useEffect, useState } from "react";
-import styled from "@mui/material/styles/styled";
 import CategoryList from "@evenicanpm/storefront-core/src/components-v2/categories/category-list/index";
+import styled from "@mui/material/styles/styled";
+import { type MouseEvent, useCallback, useEffect, useState } from "react";
 
 // STYLED COMPONENT
 const Wrapper = styled("div", {
 	shouldForwardProp: (prop) => prop !== "open",
-})<{ open: boolean }>(({ open, theme: { direction } }) => ({
-	cursor: "pointer",
-	position: "relative",
-	"& .dropdown-icon": {
-		transition: "all 250ms ease-in-out",
-		transform: `rotate(${
-			open ? (direction === "rtl" ? "-90deg" : "90deg") : "0deg"
-		})`,
-	},
-}));
+})<{ open: boolean }>(({ open, theme: { direction } }) => {
+	const rotationDegrees = direction === "rtl" ? "-90deg" : "90deg";
+	const rotation = open ? rotationDegrees : "0deg";
+
+	return {
+		cursor: "pointer",
+		position: "relative",
+		"& .dropdown-icon": {
+			transition: "all 250ms ease-in-out",
+			transform: `rotate(${rotation})`,
+		},
+	};
+});
 
 type Props = {
 	render: (
@@ -26,7 +29,7 @@ type Props = {
 
 // CategoryMenu is acting purely as a configuration/wiring component,
 // not as a reusable UI element that needs further extensibility.
-export default function CategoryMenu({ render }: Props) {
+export default function CategoryMenu({ render }: Readonly<Props>) {
 	const [open, setOpen] = useState(false);
 
 	const onClick = (e: MouseEvent<HTMLButtonElement>) => {
@@ -37,8 +40,8 @@ export default function CategoryMenu({ render }: Props) {
 	const handleDocumentClick = useCallback(() => setOpen(false), []);
 
 	useEffect(() => {
-		window.addEventListener("click", handleDocumentClick);
-		return () => window.removeEventListener("click", handleDocumentClick);
+		document.addEventListener("click", handleDocumentClick);
+		return () => document.removeEventListener("click", handleDocumentClick);
 	}, [handleDocumentClick]);
 
 	return (

package/src/components-v2/categories/mega-menu/banner.tsx

@@ -1,9 +1,5 @@
 "use client";
 
-import { ReactNode } from "react";
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
 import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
 import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
 import {
@@ -11,6 +7,10 @@ import {
 	Paragraph,
 	Small,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import Link from "next/link";
+import type { ReactNode } from "react";
 
 interface RootProps {
 	href: string;