@evenicanpm/storefront-core 1.2.2 → 1.3.0

package/src/cms/blocks/components/shared/product-grid.tsx

@@ -1,9 +1,10 @@
-import React from "react";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
+import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/index";
 // GLOBAL CUSTOM COMPONENTS
 import { Section } from "@evenicanpm/storefront-core/src/components-v2/section";
-import ProductCard from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card/index";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import React from "react";
+
 // CUSTOM DATA MODEL
 
 interface Product {

package/src/cms/blocks/components/shared/top-categories-card.tsx

@@ -1,13 +1,12 @@
-import React from "react";
-
-import Card from "@mui/material/Card";
-import Chip from "@mui/material/Chip";
-import styled from "@mui/material/styles/styled";
-import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
 // GLOBAL CUSTOM COMPONENTS
 import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
+import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
 import { lightOrDarkText } from "@evenicanpm/storefront-core/src/lib/hexToLuma";
+import Card from "@mui/material/Card";
+import Chip from "@mui/material/Chip";
 import { useTheme } from "@mui/material/styles";
+import styled from "@mui/material/styles/styled";
+import React from "react";
 
 // STYLED COMPONENT
 const StyledChip = styled(Chip)({

package/src/cms/blocks/components/shared/top-rating-product-card.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import Rating from "@mui/material/Rating";
+import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 // GLOBAL CUSTOM COMPONENTS
 import HoverBox from "@evenicanpm/storefront-core/src/components-v2/HoverBox";
 import Image from "@evenicanpm/storefront-core/src/components-v2/Image";
@@ -7,9 +6,10 @@ import {
 	H4,
 	Small,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { FlexRowCenter } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 // CUSTOM UTILS LIBRARY FUNCTION
 import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
+import Rating from "@mui/material/Rating";
+import React from "react";
 
 // ======================================================
 interface Props {

package/src/cms/blocks/icons/components/category.tsx

@@ -1,8 +1,8 @@
 "use client";
-import { OverridableComponent } from "@mui/material/OverridableComponent";
-import React from "react";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
+import type { SvgIconTypeMap } from "@mui/material/SvgIcon";
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
-import { SvgIconTypeMap } from "@mui/material/SvgIcon";
+import React from "react";
 
 const Category: OverridableComponent<SvgIconTypeMap> = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 64 64">

package/src/cms/blocks/icons/components/dotted-star.tsx

@@ -1,7 +1,7 @@
 "use client";
-import React from "react";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
+import React from "react";
 
 const DottedStar = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">

package/src/cms/blocks/icons/components/fallback-icon.tsx

@@ -1,7 +1,7 @@
 "use client";
-import React from "react";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
+import React from "react";
 
 const FallbackIcon = createSvgIcon(
 	<svg

package/src/cms/blocks/icons/components/gift-box.tsx

@@ -1,7 +1,7 @@
 "use client";
-import React from "react";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
+import React from "react";
 
 const GiftBox = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 22 20">

package/src/cms/blocks/icons/components/light.tsx

@@ -1,7 +1,7 @@
 "use client";
-import React from "react";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
+import React from "react";
 
 const Light = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">

package/src/cms/blocks/icons/components/new-arrival.tsx

@@ -1,7 +1,7 @@
 "use client";
-import React from "react";
 
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
+import React from "react";
 
 const NewArrival = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">

package/src/cms/blocks/icons/components/rank-badge.tsx

@@ -1,6 +1,6 @@
 "use client";
-import React from "react";
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
+import React from "react";
 
 const RankBadge = createSvgIcon(
 	<svg fill="currentColor" viewBox="0 0 24 24">

package/src/cms/blocks/icons/index.ts

@@ -1,15 +1,15 @@
-import { OverridableComponent } from "@mui/material/OverridableComponent";
-import { SvgIconTypeMap } from "@mui/material/SvgIcon";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
+import type { SvgIconTypeMap } from "@mui/material/SvgIcon";
 
 type IconComponent = OverridableComponent<SvgIconTypeMap<unknown, "svg">>;
 
 import Category from "@/cms/blocks/icons/components/category";
 import DottedStar from "@/cms/blocks/icons/components/dotted-star";
+import FallbackIcon from "@/cms/blocks/icons/components/fallback-icon";
 import GiftBox from "@/cms/blocks/icons/components/gift-box";
 import Light from "@/cms/blocks/icons/components/light";
 import NewArrival from "@/cms/blocks/icons/components/new-arrival";
 import RankBadge from "@/cms/blocks/icons/components/rank-badge";
-import FallbackIcon from "@/cms/blocks/icons/components/fallback-icon";
 
 export { Category };
 export { DottedStar };

package/src/cms/blocks/index.tsx

@@ -1,16 +1,16 @@
 // From scratch components
 export { default as BrandLogosScroller } from "@/cms/blocks/components/brand-logos-scroller";
 export { default as CategoryCard } from "@/cms/blocks/components/category-card";
+export { default as CategoryCarousel } from "@/cms/blocks/components/category-carousel/index";
+export { default as FeaturePill } from "@/cms/blocks/components/feature-pill";
 export { default as FeaturedCategories } from "@/cms/blocks/components/featured-categories";
 export { default as FeaturedProducts } from "@/cms/blocks/components/featured-products";
-export { default as FeaturePill } from "@/cms/blocks/components/feature-pill";
 export { default as Footer } from "@/cms/blocks/components/footer";
 export { default as Hero } from "@/cms/blocks/components/hero";
-export { default as MediaCard } from "@/cms/blocks/components/media-card";
-export { default as RichText } from "@/cms/blocks/components/rich-text";
-export { default as Image } from "@/cms/blocks/components/image";
 export { default as HeroCarousel } from "@/cms/blocks/components/hero-carousel/index";
-export { default as Services } from "@/cms/blocks/components/services/index";
+export { default as Image } from "@/cms/blocks/components/image";
+export { default as MediaCard } from "@/cms/blocks/components/media-card";
 export { default as ProductCarousel } from "@/cms/blocks/components/product-carousel/index";
 export { default as ProductSectionFullWidth } from "@/cms/blocks/components/product-section-fullwidth/index";
-export { default as CategoryCarousel } from "@/cms/blocks/components/category-carousel/index";
+export { default as RichText } from "@/cms/blocks/components/rich-text";
+export { default as Services } from "@/cms/blocks/components/services/index";

package/src/cms/blog.ts

@@ -1,6 +1,6 @@
+import type { BlocksContent } from "@strapi/blocks-react-renderer";
 import cms from "@/cms/endpoints";
-import { type BlocksContent } from "@strapi/blocks-react-renderer";
-import { Formats } from "@/cms/interfaces/product-data";
+import type { Formats } from "@/cms/interfaces/product-data";
 
 export interface Blogs {
 	data: Array<{

package/src/cms/endpoints.ts

@@ -1,4 +1,4 @@
-import { Formats } from "@/cms/interfaces/product-data";
+import type { Formats } from "@/cms/interfaces/product-data";
 
 const apiKeys = {
 	pages: "/cms/pages",

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

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

package/src/components-v2/BazaarCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Card, { CardProps } from "@mui/material/Card";
+import Card, { type CardProps } from "@mui/material/Card";
 import styled from "@mui/material/styles/styled";
 
 // ===============================================

package/src/components-v2/BazaarImage.tsx

@@ -1,4 +1,4 @@
-import Box, { BoxProps } from "@mui/material/Box";
+import Box, { type BoxProps } from "@mui/material/Box";
 
 // ==============================================================
 interface Props extends BoxProps {

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

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

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 {

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;

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, lightBorder, lightShadow } 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 {

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";

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, {

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,6 +1,6 @@
-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> {

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 {

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

@@ -1,8 +1,8 @@
 "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", {