@evenicanpm/storefront-core 2.3.1 → 2.4.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @evenicanpm/storefront-core
+
+## 2.4.0
+
+### Patch Changes
+
+- @evenicanpm/cms@2.4.0
+- @evenicanpm/ui@2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/storefront-core",
-	"version": "2.3.1",
+	"version": "2.4.0",
 	"description": "Core module for D365/e4 Headless Storefront",
 	"type": "module",
 	"scripts": {
@@ -16,33 +16,54 @@
 	"author": "Evenica",
 	"license": "ISC",
 	"dependencies": {
-		"@evenicanpm/cms": "^2.3.1",
-		"@evenicanpm/ui": "^2.0.0",
-		"strapi-sdk-js": "^3.0.0"
+		"@evenicanpm/cms": "workspace:*",
+		"@evenicanpm/ui": "workspace:*",
+		"strapi-sdk-js": "^3.0.0",
+		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
+		"@emotion/react": "catalog:",
+		"@emotion/styled": "catalog:",
+		"@mui/icons-material": "catalog:",
+		"@mui/material": "catalog:",
+		"@mui/types": "catalog:",
+		"@mui/system": "catalog:",
 		"@storybook/addon-docs": "^9.1.6",
 		"@storybook/addon-webpack5-compiler-swc": "^4.0.1",
 		"@storybook/nextjs": "^9.1.6",
+		"@storybook/react": "^9.1.6",
 		"@storybook/react-webpack5": "^9.1.6",
 		"@types/jsonwebtoken": "^9.0.9",
 		"@types/lodash": "^4.17.17",
 		"@types/node": "^22.15.20",
 		"@types/object-mapper": "^6.2.2",
+		"@types/react": "catalog:",
+		"@types/react-dom": "catalog:",
+		"react": "catalog:",
+		"react-dom": "catalog:",
 		"storybook": "^9.1.6"
 	},
 	"peerDependencies": {
+		"@emotion/react": "catalog:",
+		"@emotion/styled": "catalog:",
 		"@msdyn365-commerce/retail-proxy": "9.50",
+		"@mui/icons-material": "catalog:",
+		"@mui/material": "catalog:",
+		"@mui/system": "catalog:",
 		"@opentelemetry/api": "^1.9.1",
 		"@strapi/blocks-react-renderer": "^1.0.1",
-		"@tanstack/react-query": "^5.76.1",
-		"better-auth": "*",
+		"@tanstack/react-query": "catalog:",
+		"@tanstack/query-core": "catalog:",
+		"better-auth": "catalog:",
 		"graphql": "^16.11.0",
 		"graphql-request": "^7.1.2",
 		"jsonwebtoken": "^9.0.2",
 		"lodash": "^4.17.21",
-		"next": "^15.2.1",
+		"next": "catalog:",
+		"next-intl": "catalog:",
 		"object-mapper": "^6.2.0",
+		"react": "catalog:",
+		"react-dom": "catalog:",
 		"set-cookie-parser": "^2.7.1",
 		"typedoc": "^0.28.9",
 		"typedoc-plugin-merge-modules": "^7.0.0",
@@ -53,6 +74,5 @@
 		"@storybook/builder-manager": {
 			"esbuild": "0.19.11"
 		}
-	},
-	"gitHead": "7a5a6a8c3c3dd9efe96fbbb884b21e7681d32550"
+	}
 }

package/src/api-manager/datasources/d365/d365-address.datasource.ts

@@ -28,12 +28,15 @@ import type {
 class D365AddressDatasource extends D365DatasourceBase implements AddressApi {
 	async createAddress(address: Address): Promise<Address> {
 		const context = await getContextFromCookie();
+		// biome-ignore lint: api datasources should not be typed
 		const customer = await readAsync(context as any, "");
 		const accountNumber = customer.AccountNumber;
 
 		const prevAddresses = customer.Addresses ?? [];
+		// biome-ignore lint: api datasources should not be typed
 		customer.Addresses = [...prevAddresses, address as any];
 
+		// biome-ignore lint: api datasources should not be typed
 		const updatedCustomer = await updateAsync(context as any, {
 			...customer,
 			AccountNumber: accountNumber,
@@ -54,12 +57,14 @@ class D365AddressDatasource extends D365DatasourceBase implements AddressApi {
 
 	async updateAddress(address: Address): Promise<Address> {
 		const context = await getContextFromCookie();
+		// biome-ignore lint: api datasources should not be typed
 		const customer = await readAsync(context as any, "");
 		customer.Addresses = customer.Addresses ?? [];
 
 		const idx = customer.Addresses.findIndex(
 			(a) => a.RecordId?.toString() === address.Id,
 		);
+		// biome-ignore lint: api datasources should not be typed
 		const updatedRecord = { ...(address as any) };
 
 		if (idx >= 0) {
@@ -71,6 +76,7 @@ class D365AddressDatasource extends D365DatasourceBase implements AddressApi {
 			customer.Addresses.push(updatedRecord);
 		}
 
+		// biome-ignore lint: api datasources should not be typed
 		const updatedCustomer = await updateAsync(context as any, customer);
 		const rec = updatedCustomer?.Addresses?.[idx];
 		if (rec?.RecordId == null) {
@@ -87,6 +93,7 @@ class D365AddressDatasource extends D365DatasourceBase implements AddressApi {
 
 	async deleteAddress(addressId: string): Promise<string> {
 		const context = await getContextFromCookie();
+		// biome-ignore lint: api datasources should not be typed
 		const customer = await readAsync(context as any, "");
 		customer.Addresses = customer.Addresses ?? [];
 
@@ -95,6 +102,7 @@ class D365AddressDatasource extends D365DatasourceBase implements AddressApi {
 		);
 		if (rec) {
 			rec.Deactivate = true;
+			// biome-ignore lint: api datasources should not be typed
 			await updateAsync(context as any, customer);
 		}
 
@@ -108,6 +116,7 @@ class D365AddressDatasource extends D365DatasourceBase implements AddressApi {
 			throw new Error("Locale is required to fetch countries");
 		}
 
+		// biome-ignore lint: api datasources should not be typed
 		return getCountryRegionsByLanguageIdAsync(context as any, locale);
 	}
 
@@ -117,6 +126,7 @@ class D365AddressDatasource extends D365DatasourceBase implements AddressApi {
 			throw new Error("countryId is required to fetch states");
 		}
 
+		// biome-ignore lint: api datasources should not be typed
 		return getStateProvincesAsync(context as any, input.countryId);
 	}
 
@@ -126,6 +136,7 @@ class D365AddressDatasource extends D365DatasourceBase implements AddressApi {
 		const context = await getContextFromCookie();
 		try {
 			return getDeliveryOptionsAsync(
+				// biome-ignore lint: api datasources should not be typed
 				context as any,
 				input.cartId,
 				input.shippingAddress,

package/src/api-manager/datasources/d365/d365-cart.datasource.ts

@@ -11,14 +11,17 @@ function serializeError(error: unknown): string {
 			const allKeys = new Set<string>();
 			let proto = value;
 			while (proto && proto !== Object.prototype) {
+				// biome-ignore lint: api datasources should not be typed
 				Object.getOwnPropertyNames(proto).forEach((k) => allKeys.add(k));
 				proto = Object.getPrototypeOf(proto);
 			}
+			// biome-ignore lint: api datasources should not be typed
 			Object.keys(value).forEach((k) => allKeys.add(k));
 			const result: Record<string, unknown> = {};
 			for (const key of allKeys) {
 				if (key !== "constructor") {
 					try {
+						// biome-ignore lint: api datasources should not be typed
 						result[key] = (value as any)[key];
 					} catch {}
 				}
@@ -135,6 +138,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 				}
 
 				const result = await checkoutAsync(
+					// biome-ignore lint: api datasources should not be typed
 					context as any,
 					input.id,
 					input.receiptEmail,
@@ -164,6 +168,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 		const { cartId, resultAccessCode, settings } = input;
 		try {
 			const result = await retrieveCardPaymentAcceptResultAsync(
+				// biome-ignore lint: api datasources should not be typed
 				context as any,
 				resultAccessCode,
 				[],
@@ -194,6 +199,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 		};
 		try {
 			const data = await getCardPaymentAcceptPointAsync(
+				// biome-ignore lint: api datasources should not be typed
 				context as any,
 				input.cartId,
 				paymentAcceptSettings,
@@ -210,6 +216,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 		const context = this.context;
 		const { cartId, cartLineDeliverySpecification } = input;
 		const cart = await updateLineDeliverySpecificationsAsync(
+			// biome-ignore lint: api datasources should not be typed
 			context as any,
 			cartId,
 			cartLineDeliverySpecification,
@@ -231,6 +238,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 
 		// Update cartlines to remove the delivery mode
 		const cartWithoutDeliveryMode = await updateCartLinesAsync(
+			// biome-ignore lint: api datasources should not be typed
 			context as any,
 			String(newCart?.Id),
 			newCart?.CartLines,
@@ -251,6 +259,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 		if (!input.cartId) {
 			throw new Error("CartId is required to remove a discount code");
 		}
+		// biome-ignore lint: api datasources should not be typed
 		const cart = await removeDiscountCodesAsync(context as any, input.cartId, [
 			input.discountCode,
 		]);
@@ -263,6 +272,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 			throw new Error("CartId is required to add a discount code");
 		}
 		const cart = await addDiscountCodeAsync(
+			// biome-ignore lint: api datasources should not be typed
 			context as any,
 			cartId,
 			discountCode,
@@ -279,6 +289,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 			omit(line, "Product"),
 		);
 		const cart = await updateCartLinesAsync(
+			// biome-ignore lint: api datasources should not be typed
 			context as any,
 			cartId,
 			cartLinesWithoutProduct,
@@ -296,6 +307,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 
 		try {
 			const updatedCart = await addCartLinesAsync(
+				// biome-ignore lint: api datasources should not be typed
 				context as any,
 				cartId,
 				_cartLines,
@@ -304,7 +316,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 			return await mergeCartWithProducts(updatedCart, this.context);
 		} catch (err) {
 			console.error(err);
-			throw new Error("Error adding to cart: " + JSON.stringify(err));
+			throw new Error(`Error adding to cart: ${JSON.stringify(err)}`);
 		}
 	}
 	async updateCart(input: UpdateCartInput): Promise<Cart> {
@@ -313,6 +325,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 		if (cart.CartLines) {
 			cart.CartLines.map((cl) => omit(cl, "Product"));
 		}
+		// biome-ignore lint: api datasources should not be typed
 		const updatedCart = await updateAsync(context as any, <DynCart>cart);
 		return await mergeCartWithProducts(updatedCart, this.context);
 	}
@@ -326,6 +339,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 			throw new Error("CartId and Version are required to delete a cart line");
 		}
 		const cart = await removeCartLinesAsync(
+			// biome-ignore lint: api datasources should not be typed
 			context as any,
 			cartId,
 			cartLineIds,
@@ -339,6 +353,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 		let cart: DynCart;
 
 		if (id) {
+			// biome-ignore lint: api datasources should not be typed
 			cart = (await readAsync(context as any, id)) as DynCart;
 			if (!cart) {
 				return this.createCart(context);
@@ -359,6 +374,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 			omit(line, "Product"),
 		);
 		const cart = await updateCartLinesAsync(
+			// biome-ignore lint: api datasources should not be typed
 			context as any,
 			cartId,
 			cartLinesWithoutProduct,
@@ -411,6 +427,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 	}
 
 	async createCart(context: ICallerContext): Promise<Cart> {
+		// biome-ignore lint: api datasources should not be typed
 		return (await createCartAsync(context as any, <DynCart>{
 			CartTypeValue: CartType.Checkout,
 		})) as Cart;
@@ -432,6 +449,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 			CartTypeValue: CartType.Checkout,
 			IncludeAnonymous: false,
 		};
+		// biome-ignore lint: api datasources should not be typed
 		const ctx = { ...context } as any;
 		ctx.queryResultSettings = queryResultSettings;
 		const cartResult = await searchAsync(ctx, searchCriteria);
@@ -473,6 +491,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 					FilterByChannelFulfillmentGroup: true,
 				};
 				const shippingAsyncResult = await getEstimatedAvailabilityAsync(
+					// biome-ignore lint: api datasources should not be typed
 					context as any,
 					searchCriteria,
 				);
@@ -489,6 +508,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 			try {
 				const warehouseAsyncResult =
 					await getEstimatedProductWarehouseAvailabilityAsync(
+						// biome-ignore lint: api datasources should not be typed
 						context as any,
 						bopisItems,
 						2,
@@ -534,6 +554,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 		if (cart.Version) {
 			try {
 				const updatedCart = await addInvoicesAsync(
+					// biome-ignore lint: api datasources should not be typed
 					context as any,
 					cart.Id,
 					invoiceIds,
@@ -566,6 +587,7 @@ export class D365CartDatasource extends D365DatasourceBase implements CartApi {
 		if (input.cartId) {
 			try {
 				const updatedCart = await setInvoiceLinePriceAsync(
+					// biome-ignore lint: api datasources should not be typed
 					context as any,
 					input.cartId,
 					input.cartLineId,

package/src/api-manager/datasources/d365/d365-order.datasource.ts

@@ -30,13 +30,14 @@ class D365OrderDatasource extends D365DatasourceBase implements OrderApi {
 		input: GetSalesOrdersInput,
 	): Promise<SalesOrder[]> => {
 		const context = await getContextFromCookie();
+		// biome-ignore lint: api datasources should not be typed
 		const customer = await readAsync(context as any, "");
 
 		const searchCriteria: OrderSearchCriteria = {
 			...input.orderSearchCriteria,
 			OrderType: CustomerOrderType.SalesOrder,
 			CustomerAccountNumber: customer.AccountNumber,
-		};
+		} as OrderSearchCriteria;
 
 		const queryResultSettings: QueryResultSettings = {};
 		if (input.paging) queryResultSettings.Paging = input.paging;
@@ -45,10 +46,12 @@ class D365OrderDatasource extends D365DatasourceBase implements OrderApi {
 				Columns: [input.sort],
 			};
 
+		// biome-ignore lint: api datasources should not be typed
 		(context as any).queryResultSettings = queryResultSettings;
 
 		try {
 			const searchOrdersResults = await searchOrdersAsync(
+				// biome-ignore lint: api datasources should not be typed
 				context as any,
 				searchCriteria,
 				null,
@@ -72,6 +75,7 @@ class D365OrderDatasource extends D365DatasourceBase implements OrderApi {
 		if (transactionId) {
 			try {
 				data = await getSalesOrderDetailsByTransactionIdAsync(
+					// biome-ignore lint: api datasources should not be typed
 					context as any,
 					transactionId,
 					SearchLocation.All,
@@ -83,6 +87,7 @@ class D365OrderDatasource extends D365DatasourceBase implements OrderApi {
 		} else {
 			try {
 				data = await getSalesOrderDetailsBySalesIdAsync(
+					// biome-ignore lint: api datasources should not be typed
 					context as any,
 					salesId,
 				);

package/src/api-manager/index.ts

@@ -29,9 +29,9 @@ async function createApiManager(): Promise<Datasource> {
 		datasource = E4Datasource;
 	}
 
+	// biome-ignore lint: api datasources should not be typed
 	const storefrontOverrides: { [key: string]: any } = {};
 
-	// @ts-expect-error
 	function importAll(r) {
 		r.keys().forEach((key: string) => {
 			storefrontOverrides[key] = r(key);
@@ -63,6 +63,7 @@ async function createApiManager(): Promise<Datasource> {
 				Object.assign(datasource[entityName] as object, entityOverrides);
 			} else {
 				// Non-core entity added entirely from overrides
+				// biome-ignore lint: api datasources should not be typed
 				(datasource as any)[entityName] = entityOverrides;
 			}
 		}

package/src/api-manager/schemas/product.schema.ts

@@ -41,7 +41,7 @@ export const productSchema = z.object({
 	ItemId: z.string(), // sku?
 	RecordId: z.number(),
 	Name: z.string(),
-	Price: z.number().optional(),
+	Price: z.number(),
 	BasePrice: z.number().optional(),
 	AdjustedPrice: z.number().optional(),
 	Description: z.string().optional(),

package/src/auth/msal.ts

@@ -14,11 +14,8 @@ const createMsalConfig = (): Configuration => {
 			knownAuthorities: [
 				process.env.NEXT_PUBLIC_AZURE_AD_B2C_KNOWN_AUTHORITY || "",
 			],
-			navigateToLoginRequestUrl: true,
-		},
-		system: {
-			allowNativeBroker: false, // Disables WAM Broker
 		},
+		system: {},
 	};
 };
 

package/src/cms/blocks/block-manager.tsx

@@ -41,7 +41,7 @@ const componentMap = {
 const getBlockComponent: <B extends Block>(
 	block: B,
 	idx: number,
-) => JSX.Element | null = (block: Block) => {
+) => React.JSX.Element | null = (block: Block) => {
 	const Component = componentMap[
 		block.__component as keyof typeof componentMap
 	] as React.ComponentType<Block> | undefined;

package/src/cms/endpoints.ts

@@ -1,5 +1,3 @@
-import type { Formats } from "@/cms/interfaces/product-data";
-
 const apiKeys = {
 	pages: "/cms/pages",
 	blogs: "/cms/blogs",
@@ -42,6 +40,13 @@ export const extendCmsEndpoints = (
 
 export type sizes = "small" | "medium" | "large" | "thumbnail";
 
+interface Formats {
+	small?: { url: string };
+	medium?: { url: string };
+	large?: { url: string };
+	thumbnail?: { url: string };
+}
+
 /**
  * @param formats formats array from CMS data
  * @param size size of the image

package/src/components/BazaarMenu.tsx

@@ -34,7 +34,7 @@ export default function BazaarMenu({
 			{handler ? handler(handleClick) : null}
 
 			<Menu
-				elevation={0}
+				slotProps={{ paper: { elevation: 0 } }}
 				anchorEl={anchorEl}
 				onClose={handleClose}
 				open={open ?? Boolean(anchorEl)}

package/src/components/Typography.tsx

@@ -6,9 +6,11 @@ import clsx from "clsx";
 
 // ==============================================================
 type Ellipsis = { ellipsis: number };
-export interface EllipsisProps extends BoxProps {
+export type EllipsisProps = BoxProps & {
 	ellipsis?: boolean;
-}
+	children?: React.ReactNode;
+	className?: string;
+};
 // ==============================================================
 
 const StyledBox = styled(Box, {

package/src/components/carousel-cards/carousel-card-1/CarouselCard1.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import CarouselCard1 from "./index";
 
 const meta: Meta<typeof CarouselCard1> = {

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

@@ -24,7 +24,7 @@ const Wrapper = styled("div", {
 type Props = {
 	render: (
 		handler: (e: React.MouseEvent<HTMLButtonElement>) => void,
-	) => JSX.Element;
+	) => React.ReactElement;
 };
 
 // CategoryMenu is acting purely as a configuration/wiring component,

package/src/components/countries-input.tsx

@@ -57,6 +57,10 @@ export default function CountryInput({
 			fullWidth
 			value={selectedCountry}
 			options={countries}
+			getOptionKey={(option) => option.CountryRegionId}
+			isOptionEqualToValue={(option, value) =>
+				option.CountryRegionId === value?.CountryRegionId
+			}
 			onChange={(_event, newValue) => {
 				setSelectedCountry(newValue);
 			}}

package/src/components/header/sticky-header.tsx

@@ -8,7 +8,6 @@ import { Sticky } from "@evenicanpm/ui";
 import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useCallback, useState } from "react";
-import { AccountRouteOverrides } from "../../pages/account/account-routes";
 
 /**
  * @category Implementation

package/src/components/navbar/mobile-menu/mobile-menu.test.tsx

@@ -1,9 +1,9 @@
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 import MobileMenu from "@evenicanpm/storefront-core/src/components/navbar/mobile-menu/mobile-menu";
 import { transformCmsNav } from "@evenicanpm/storefront-core/src/components/navbar/utils/transform-nav";
 import { fireEvent, render, screen } from "@testing-library/react";
 import type React from "react";
 import { beforeEach, describe, it, vi } from "vitest";
-import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 const useContext = vi.fn();
 

package/src/components/navbar/utils/transform-nav.test.ts

@@ -1,10 +1,10 @@
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 import {
 	transformCategoryNav,
 	transformCmsNav,
 } from "@evenicanpm/storefront-core/src/components/navbar/utils/transform-nav";
 import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import { describe, expect, it } from "vitest";
-import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 describe("transform nav items", () => {
 	it("should recursively transform deeply nested categories and its children with correct href, title, and items", () => {

package/src/components/navbar/utils/transform-nav.ts

@@ -1,6 +1,6 @@
+import type { CmsNavItem } from "@evenicanpm/cms/src/content/navigation/types";
 import type { CategoryHierarchy } from "@evenicanpm/storefront-core/src/lib/category-helpers";
 import type { SvgIconComponent } from "@mui/icons-material";
-import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 type MenuType = "default" | "mega-menu" | "full-screen-mega-menu";
 export interface TransformedNavItem {

package/src/components/product-cards/product-card/product-card.tsx

@@ -60,8 +60,11 @@ function findChild(
 		if (!React.isValidElement(child)) return;
 		if (child.type === component) {
 			found = true;
-		} else if (child.props?.children) {
-			found ||= findChild(child.props.children, component);
+		} else if ((child.props as { children?: ReactNode })?.children) {
+			found ||= findChild(
+				(child.props as { children?: ReactNode }).children,
+				component,
+			);
 		}
 	});
 

package/src/components/product-cards/product-card/styles/index.ts

@@ -1,7 +1,6 @@
 // GLOBAL CUSTOM COMPONENT
 import BazaarCard from "@evenicanpm/storefront-core/src/components/BazaarCard";
 import styled from "@mui/material/styles/styled";
-import type { StyledComponent } from "@mui/styled-engine";
 
 export const StyledBazaarCard = styled(BazaarCard)({
 	height: "100%",
@@ -46,7 +45,4 @@ export const ContentWrapper = styled("div")({
 	},
 });
 
-const StyledBazaarCardType: StyledComponent<typeof BazaarCard, object, "div"> =
-	StyledBazaarCard as StyledComponent<typeof BazaarCard, object, "div">;
-
-export default StyledBazaarCardType;
+export default StyledBazaarCard;

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

@@ -52,7 +52,11 @@ export default function ProductsGridView(props: Readonly<ProductsViewProps>) {
  * @category Sub-Component
  *
  */
-ProductsGridView.Grid = ({ children }: { children: React.ReactElement }) => {
+ProductsGridView.Grid = ({
+	children,
+}: {
+	children: React.ReactElement<Record<string, unknown>>;
+}) => {
 	const { products, productPrices } = useProductsView();
 
 	return (

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

@@ -38,7 +38,11 @@ export default function ProductsListView(props: Readonly<ProductsViewProps>) {
  * @category Sub-Component
  *
  */
-ProductsListView.List = ({ children }: { children: React.ReactElement }) => {
+ProductsListView.List = ({
+	children,
+}: {
+	children: React.ReactElement<Record<string, unknown>>;
+}) => {
 	const { products, productPrices } = useProductsView();
 	return (
 		<>

package/src/global.d.ts

@@ -0,0 +1,3 @@
+declare module "*.css";
+declare module "*.scss";
+declare module "*.sass";