@evenicanpm/storefront-core 1.2.2 → 1.4.0

package/src/components-v2/products-view/compound/context.ts

@@ -1,10 +1,11 @@
 /**
  * @module ProductsView
  */
-import { createContext, useContext } from "react";
+
+import type { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 // DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { createContext, useContext } from "react";
 
 /**
  * Shared context value for the products list passed into root component.

package/src/components-v2/products-view/compound/products-grid-view.tsx

@@ -1,21 +1,22 @@
 /**
  * @module ProductsView
  */
-import React from "react";
-import Grid from "@mui/material/Grid2";
+
+import type { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 // GLOBAL CUSTOM COMPONENTS
 import { FlexBetween } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
 import ProductCardPlp from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp/product-card";
-// DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import {
 	ProductsViewCardContext,
 	ProductsViewContext,
 	useProductsView,
 } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
-import { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
+import type { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
+// DATA MODEL
+import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import Grid from "@mui/material/Grid2";
+import type React from "react";
 import { cloneElement } from "react";
-import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 
 /**
  * Root component of products grid view.
@@ -29,7 +30,7 @@ import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schema
  *   </ProductsGridView.Container>
  * </ProductsGridView>
  */
-export default function ProductsGridView(props: ProductsViewProps) {
+export default function ProductsGridView(props: Readonly<ProductsViewProps>) {
 	const { products, productPrices, pagination, children } = props;
 
 	return (
@@ -67,7 +68,7 @@ ProductsGridView.Grid = ({ children }: { children: React.ReactElement }) => {
 						value={{ price: matchingPrice, product }}
 					>
 						{cloneElement(children, {
-							key: i,
+							key: product.RecordId ?? product.ItemId,
 							product: product,
 							price: matchingPrice,
 						})}

package/src/components-v2/products-view/compound/products-list-view.tsx

@@ -1,23 +1,24 @@
 /**
  * @module ProductsView
  */
-import { cloneElement } from "react";
+
+import type { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 // GLOBAL CUSTOM COMPONENTS
 import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
 import { ProductCardPlpList } from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-plp-list/index";
-import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
-// DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
 import {
 	ProductsViewContext,
 	useProductsView,
 } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
-import { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
+import type { ProductsViewProps } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/types";
+// DATA MODEL
+import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import { cloneElement } from "react";
 
 /**
  * Root component of the ProductsListView.
  */
-export default function ProductsListView(props: ProductsViewProps) {
+export default function ProductsListView(props: Readonly<ProductsViewProps>) {
 	const { pagination, products, productPrices, children } = props;
 	console.log(props);
 	return (
@@ -41,14 +42,14 @@ ProductsListView.List = ({ children }: { children: React.ReactElement }) => {
 	const { products, productPrices } = useProductsView();
 	return (
 		<>
-			{products.map((item: Product, i) => {
+			{products.map((item: Product) => {
 				const matchingPrice = productPrices?.find(
 					(price) => price.ProductId === item.RecordId,
 				);
 				// Legacy API, consider alternatives.
 				// Using this to pass props to child.
 				return cloneElement(children, {
-					key: i,
+					key: item.RecordId ?? item.ItemId,
 					product: item,
 					price: matchingPrice,
 				});

package/src/components-v2/products-view/compound/types.ts

@@ -1,5 +1,5 @@
-import { ProductsViewContext } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
-import { PropsWithChildren, ReactNode } from "react";
+import type { ProductsViewContext } from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/context";
+import type { PropsWithChildren, ReactNode } from "react";
 
 /**
  * This prop type is used for both the ProductsViewGrid and the ProductsViewList.

package/src/components-v2/products-view/index.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode } from "react";
+import type { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
 import ProductsGridView from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/products-grid-view";
 import ProductsListView from "@evenicanpm/storefront-core/src/components-v2/products-view/compound/products-list-view";
 // DATA MODEL
-import { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
-import { ProductPrice } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
+import type { ProductSearchResult as Product } from "@msdyn365-commerce/retail-proxy";
+import React, { type ReactNode } from "react";
 
 export interface Props {
 	/** List of products to display */
@@ -20,7 +20,7 @@ export interface Props {
  * TODO: Add Pagination to storybook
  *
  */
-export function ProductsGrid(props: Props) {
+export function ProductsGrid(props: Readonly<Props>) {
 	return (
 		<ProductsGridView {...props}>
 			<ProductsGridView.Grid>
@@ -35,7 +35,7 @@ export function ProductsGrid(props: Props) {
  * Pre-composed implementation of ProductList
  *
  */
-export function ProductsList(props: Props) {
+export function ProductsList(props: Readonly<Props>) {
 	return (
 		<ProductsListView {...props}>
 			<ProductsListView.List>

package/src/components-v2/progress/ProgressBar.stories.tsx

@@ -1,7 +1,7 @@
+import { Box, Button, Link as MUILink, Typography } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
-import ProgressBar from "./index";
 import NProgress from "nprogress";
-import { Button, Box, Typography, Link as MUILink } from "@mui/material";
+import ProgressBar from "./index";
 
 const meta: Meta<typeof ProgressBar> = {
 	title: "Utility/ProgressBar",

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

@@ -1,10 +1,10 @@
 // https://github.com/apal21/nextjs-progressbar/issues/86
 
 "use client";
-import { useEffect } from "react";
-import NProgress from "nprogress";
-import useTheme from "@mui/material/styles/useTheme";
 import GlobalStyles from "@mui/material/GlobalStyles";
+import useTheme from "@mui/material/styles/useTheme";
+import NProgress from "nprogress";
+import { useEffect } from "react";
 
 import "nprogress/nprogress.css";
 
@@ -38,7 +38,7 @@ export default function ProgressBar() {
 		const mutationObserver = new MutationObserver(handleMutation);
 		mutationObserver.observe(document, { childList: true, subtree: true });
 
-		window.history.pushState = new Proxy(window.history.pushState, {
+		globalThis.history.pushState = new Proxy(globalThis.history.pushState, {
 			apply: (target, thisArg, argArray: PushStateInput) => {
 				NProgress.done();
 				return target.apply(thisArg, argArray);

package/src/components-v2/scrollbar/Scrollbar.stories.tsx

@@ -1,6 +1,7 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import React from "react";
+
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
 import Scrollbar from "./index";
 
 const meta = {

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

@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import { SxProps, Theme } from "@mui/material/styles";
-import { Props } from "simplebar-react";
+import type { SxProps, Theme } from "@mui/material/styles";
+import type { ReactNode } from "react";
+import type { Props } from "simplebar-react";
 import "simplebar-react/dist/simplebar.min.css";
 // STYLED COMPONENT
 import { StyledScrollBar } from "@evenicanpm/storefront-core/src/components-v2/scrollbar/styles";
@@ -18,7 +18,7 @@ export default function Scolbar({
 	autoHide = true,
 	sx,
 	...props
-}: ScrollbarProps) {
+}: Readonly<ScrollbarProps>) {
 	return (
 		<StyledScrollBar sx={sx} autoHide={autoHide} {...props}>
 			{children}

package/src/components-v2/search-bar/SearchBarLarge.stories.tsx

@@ -1,6 +1,7 @@
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
-import React from "react";
+
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
 import { SearchBarViewLg } from "./index";
 
 const meta = {

package/src/components-v2/search-bar/compound/context.ts

@@ -1,6 +1,5 @@
-import { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
-import { createContext, useContext } from "react";
-import { FormEvent } from "react";
+import type { ProductSearchResult } from "@msdyn365-commerce/retail-proxy";
+import { createContext, type FormEvent, useContext } from "react";
 
 /**
  * @category Context

package/src/components-v2/search-bar/compound/results-item-lg.tsx

@@ -1,13 +1,14 @@
 /**
  * @module SearchBar
  */
-import React from "react";
-import Grid from "@mui/material/Grid";
+
 import ProductCardSearch from "@evenicanpm/storefront-core/src/components-v2/product-cards/product-card-search";
 import {
 	useSearchContext,
 	useSearchResultItem,
 } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+import Grid from "@mui/material/Grid";
+import React from "react";
 
 /**
  * Large, vertical result item card, used for desktop view.

package/src/components-v2/search-bar/compound/results-item-sm.tsx

@@ -1,21 +1,22 @@
 /**
  * @module SearchBar
  */
-import React from "react";
-import NavLink from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link";
-import MenuItem from "@mui/material/MenuItem";
-import { getProductDetailUrl } from "@evenicanpm/storefront-core/src/lib/build-product-detail-url";
-import { Box, Grid } from "@mui/material";
+
 import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
+import NavLink from "@evenicanpm/storefront-core/src/components-v2/nav-link/nav-link";
+import {
+	useSearchContext,
+	useSearchResultItem,
+} from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
 import {
 	H4,
 	Span,
 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { getProductDetailUrl } from "@evenicanpm/storefront-core/src/lib/build-product-detail-url";
 import { currency } from "@evenicanpm/storefront-core/src/lib/lib";
-import {
-	useSearchContext,
-	useSearchResultItem,
-} from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+import { Box, Grid } from "@mui/material";
+import MenuItem from "@mui/material/MenuItem";
+import React from "react";
 
 /**
  * Small, horizontal result item card, used for mobile view.

package/src/components-v2/search-bar/compound/results-suspense.tsx

@@ -3,15 +3,14 @@
  */
 "use client";
 
-import React, { Suspense } from "react";
 import { useSearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
-import { CircularProgress } from "@mui/material";
 import SearchResult from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results";
-import { SearchResultCard } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
 import ResultItemCardLg from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results-item-lg";
 import ResultItemCardSm from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results-item-sm";
-
-import _ from "lodash";
+import { SearchResultCard } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
+import { CircularProgress } from "@mui/material";
+import type React from "react";
+import { Suspense } from "react";
 
 /**
  * useSuspenseQuery will instantly suspend component fallback to
@@ -24,7 +23,7 @@ import _ from "lodash";
 export default function SearchResultSuspense({
 	children,
 }: {
-	children: React.ReactNode;
+	readonly children: React.ReactNode;
 }) {
 	const { state } = useSearchContext();
 	return (

package/src/components-v2/search-bar/compound/results.tsx

@@ -1,15 +1,16 @@
 /**
  * @module SearchBar
  */
-import React from "react";
-import { useTranslations } from "next-intl";
+
 import searchProducts from "@evenicanpm/storefront-core/src/api-manager/services/product/queries/search-products";
-import { SearchResultCard } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
 import {
-	useSearchContext,
 	SearchResultItemContext,
+	useSearchContext,
 } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+import { SearchResultCard } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
 import Grid from "@mui/material/Grid";
+import { useTranslations } from "next-intl";
+import type React from "react";
 
 /**
  * Search Results Container that handles mapping items and styles of the containing box.
@@ -18,7 +19,7 @@ import Grid from "@mui/material/Grid";
 export default function SearchResultsContainer({
 	children,
 }: {
-	children: React.ReactNode;
+	readonly children: React.ReactNode;
 }) {
 	const t = useTranslations();
 	const { state } = useSearchContext();
@@ -35,8 +36,11 @@ export default function SearchResultsContainer({
 	return (
 		<SearchResultCard>
 			<Grid container>
-				{results.map((item, i) => (
-					<SearchResultItemContext.Provider value={item} key={i}>
+				{results.map((item) => (
+					<SearchResultItemContext.Provider
+						value={item}
+						key={item.RecordId ?? item.ItemId}
+					>
 						{children}
 					</SearchResultItemContext.Provider>
 				))}

package/src/components-v2/search-bar/compound/search-bar-root.tsx

@@ -2,21 +2,18 @@
  * @module SearchBar
  */
 "use client";
-import React, { useRef } from "react";
-import Box from "@mui/material/Box";
-
-// local hooks
-import useSearch from "@evenicanpm/storefront-core/src/components-v2/search-bar/hooks/use-search";
-import { useClickOutside } from "@evenicanpm/storefront-core/src/components-v2/search-bar/hooks/use-click-outside";
 
 // contexts
 import { SearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
-
 // components
 import SearchResultSuspense from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/results-suspense";
 import TextField from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield";
-
-import _ from "lodash";
+import { useClickOutside } from "@evenicanpm/storefront-core/src/components-v2/search-bar/hooks/use-click-outside";
+// local hooks
+import useSearch from "@evenicanpm/storefront-core/src/components-v2/search-bar/hooks/use-search";
+import Box from "@mui/material/Box";
+import type React from "react";
+import { useRef } from "react";
 
 interface Props {
 	handleCloseDrawer?: () => void;
@@ -35,7 +32,10 @@ interface Props {
  * </SearchBar>
  *
  */
-export default function SearchBarRoot({ handleCloseDrawer, children }: Props) {
+export default function SearchBarRoot({
+	handleCloseDrawer,
+	children,
+}: Readonly<Props>) {
 	const { setters, handlers, state } = useSearch();
 	const inputRef = useRef(null);
 	useClickOutside(inputRef, () => setters.setResultsOpen(false));

package/src/components-v2/search-bar/compound/textfield-adornment-category.tsx

@@ -2,16 +2,17 @@
  * @module SearchBar
  */
 "use client";
-import React from "react";
-import MenuItem from "@mui/material/MenuItem";
-import TouchRipple from "@mui/material/ButtonBase";
-import useTheme from "@mui/material/styles/useTheme";
 import getCategories from "@evenicanpm/storefront-core/src/api-manager/services/categories/queries/get-categories";
-import { MdKeyboardArrowDown as KeyboardArrowDownOutlined } from "react-icons/md";
-import { findCategoryNameById } from "@evenicanpm/storefront-core/src/components-v2/search-bar/utils/findCategoryNameById";
 import Menu from "@evenicanpm/storefront-core/src/components-v2/BazaarMenu";
 import { DropDownHandler } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
+import { findCategoryNameById } from "@evenicanpm/storefront-core/src/components-v2/search-bar/utils/findCategoryNameById";
+import TouchRipple from "@mui/material/ButtonBase";
+import MenuItem from "@mui/material/MenuItem";
+import useTheme from "@mui/material/styles/useTheme";
 import { useTranslations } from "next-intl";
+import React from "react";
+import { MdKeyboardArrowDown as KeyboardArrowDownOutlined } from "react-icons/md";
+
 type DisplayCategory = {
 	name: string;
 	id: number;
@@ -50,33 +51,31 @@ const CategoryDropdown = ({
 	const title = findCategoryNameById(selectedCategoryId, categories, t);
 
 	return (
-		<>
-			<Menu
-				direction="left"
-				sx={{ zIndex: breakpoints.down("md") ? 99999 : 1502 }}
-				handler={(e) => (
-					<DropDownHandler as={TouchRipple} onClick={e}>
-						{title}
-						<KeyboardArrowDownOutlined fontSize="small" color="inherit" />
-					</DropDownHandler>
-				)}
-				options={(onClose) => {
-					return options
-						?.filter((current: DisplayCategory) => current.name !== title)
-						.map((item: DisplayCategory) => (
-							<MenuItem
-								key={item.id}
-								onClick={() => {
-									handleChange(item.id);
-									onClose();
-								}}
-							>
-								{item.name}
-							</MenuItem>
-						));
-				}}
-			/>
-		</>
+		<Menu
+			direction="left"
+			sx={{ zIndex: breakpoints.down("md") ? 99999 : 1502 }}
+			handler={(e) => (
+				<DropDownHandler as={TouchRipple} onClick={e}>
+					{title}
+					<KeyboardArrowDownOutlined fontSize="small" color="inherit" />
+				</DropDownHandler>
+			)}
+			options={(onClose) => {
+				return options
+					?.filter((current: DisplayCategory) => current.name !== title)
+					.map((item: DisplayCategory) => (
+						<MenuItem
+							key={item.id}
+							onClick={() => {
+								handleChange(item.id);
+								onClose();
+							}}
+						>
+							{item.name}
+						</MenuItem>
+					));
+			}}
+		/>
 	);
 };
 

package/src/components-v2/search-bar/compound/textfield-adornment-search-icon.tsx

@@ -1,9 +1,10 @@
 /**
  * @module SearchBar
  */
-import Box from "@mui/material/Box";
-import { IconButton } from "@mui/material";
+
 import Search from "@evenicanpm/storefront-core/src/components-v2/icons/search";
+import { IconButton } from "@mui/material";
+import Box from "@mui/material/Box";
 
 interface Props {
 	handleNavigate: () => void;

package/src/components-v2/search-bar/compound/textfield.tsx

@@ -2,18 +2,15 @@
  * @module SearchBar
  */
 "use client";
-import React from "react";
-import TextField from "@mui/material/TextField";
-
-import SearchIconAdornment from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield-adornment-search-icon";
+import { useSearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
 import AdornmentButton from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield-adornment-button";
 import CategoryDropdown from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield-adornment-category";
-
+import SearchIconAdornment from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/textfield-adornment-search-icon";
 import { INPUT_SX } from "@evenicanpm/storefront-core/src/components-v2/search-bar/styles/index";
-import { useTheme, useMediaQuery } from "@mui/material";
-import _ from "lodash";
+import { useMediaQuery, useTheme } from "@mui/material";
+import TextField from "@mui/material/TextField";
 import { useTranslations } from "next-intl";
-import { useSearchContext } from "@evenicanpm/storefront-core/src/components-v2/search-bar/compound/context";
+import React from "react";
 
 /**
  * The actual input field for the search bar.

package/src/components-v2/search-bar/hooks/use-search.ts

@@ -1,10 +1,9 @@
 "use client";
-import React, { FormEvent, useState } from "react";
 import { PageSlug } from "@evenicanpm/storefront-core/src/lib/page-slugs";
 import { PageKey } from "@evenicanpm/storefront-core/src/lib/product-list-types";
-
 import _ from "lodash";
 import { useRouter } from "next/navigation";
+import React, { type FormEvent, useState } from "react";
 
 /**
  * Handles all main logic and state for the search bar components.
@@ -27,7 +26,7 @@ export default function useSearch() {
 		if (searchText.trim() === "") {
 			return;
 		}
-		const url = new URL(PageSlug.ProductList, window.location.origin);
+		const url = new URL(PageSlug.ProductList, globalThis.location.origin);
 		url.searchParams.set(PageKey.SEARCH, searchText);
 		router.push(url.toString());
 		setResultsOpen(false);

package/src/components-v2/search-bar/styles/index.ts

@@ -1,9 +1,9 @@
 "use client";
 
-import Card from "@mui/material/Card";
+import SearchOutlined from "@mui/icons-material/SearchOutlined";
 import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
 import styled from "@mui/material/styles/styled";
-import SearchOutlined from "@mui/icons-material/SearchOutlined";
 
 // TODO: caused from symlinked node_modules in client-packages root
 // Need to install only types for mui/styled-engine

package/src/components-v2/search-bar/utils/findCategoryNameById.ts

@@ -1,4 +1,4 @@
-import { Category } from "@msdyn365-commerce/retail-proxy";
+import type { Category } from "@msdyn365-commerce/retail-proxy";
 
 /**
  * Looks up the category name by id.

package/src/components-v2/section/Section.stories.tsx

@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Section } from "./index";
-import { Typography } from "@mui/material";
 import ArrowRight from "@mui/icons-material/ArrowRight";
+import { Typography } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
 import {
 	SectionHeader,
 	SectionHeaderSeeMoreLink,
 	SectionHeaderTitle,
 } from "./compound/section-header";
+import { Section } from "./index";
 
 const meta: Meta<typeof Section> = {
 	title: "Section",
@@ -60,7 +60,7 @@ export const LongContent: Story = {
 			</Section.Header>
 
 			{Array.from({ length: 5 }).map((_, i) => (
-				<Typography key={i} paragraph>
+				<Typography key={`paragraph-${i + 1}`} paragraph>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Paragraph{" "}
 					{i + 1}.
 				</Typography>

package/src/components-v2/section/compound/section-header.tsx

@@ -3,18 +3,18 @@
  */
 "use client";
 
-import Link from "next/link";
-import { ReactNode } from "react";
-// Mui Icon Components
-import ArrowLeft from "@mui/icons-material/ArrowLeft";
-import ArrowRight from "@mui/icons-material/ArrowRight";
-// Local Custom Components
-import { H2 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
 	FlexBetween,
 	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+// Local Custom Components
+import { H2 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
+// Mui Icon Components
+import ArrowLeft from "@mui/icons-material/ArrowLeft";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+import Link from "next/link";
+import type { ReactNode } from "react";
 
 /**
  * @category Sub-Component

package/src/components-v2/section/compound/section.tsx

@@ -1,10 +1,11 @@
 /**
  * @module Section
  */
-import { ReactNode } from "react";
-import Container from "@mui/material/Container";
-import Box, { BoxProps } from "@mui/material/Box";
+
 import { SectionHeader } from "@evenicanpm/storefront-core/src/components-v2/section/compound/section-header";
+import Box, { type BoxProps } from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import type { ReactNode } from "react";
 
 interface Props extends BoxProps {
 	children: ReactNode;