@adobe-commerce/elsie 1.2.1 → 1.3.0-alpha01

package/config/vite.mjs

@@ -25,9 +25,11 @@ import banner from 'vite-plugin-banner';
 const env = loadEnv('', process.cwd());
 
 // Load Elsie Config
-const elsieConfig = await import(
-  path.resolve(process.cwd(), './.elsie.js')
-).then((m) => m.default);
+const elsieConfig = await import(path.resolve(process.cwd(), './.elsie.js')).then((m) => m.default);
+
+// Read package.json using createRequire (compatible with Node 20 and 22)
+const require = createRequire(import.meta.url);
+const packageJSON = require(path.resolve(process.cwd(), './package.json'));
 
 // Paths
 const paths = {
@@ -116,7 +118,6 @@ export default {
         entryFileNames: '[name].js',
         assetFileNames: '[name].[ext]',
         chunkFileNames: 'chunks/[name].js',
-
         manualChunks: (id) => {
           if (id.includes(paths.fragments)) {
             // Fragments file does not accept chunking
@@ -176,7 +177,7 @@ export default {
     modulePreload: false,
     commonjsOptions: { transformMixedEsModules: true },
     minify: !!isProd,
-    sourcemap: !isProd,
+    sourcemap: true,
   },
 
   optimizeDeps: {},
@@ -287,6 +288,39 @@ export default {
       },
     }),
 
+    {
+      name: 'rewrite-sourcemap-sources',
+      generateBundle(options, bundle) {
+        for (const fileName in bundle) {
+          const chunk = bundle[fileName];
+          
+          // Process both .map files and JS/TS files with sourcemaps
+          if ((chunk.type === 'asset' && fileName.endsWith('.map')) || 
+              (chunk.type === 'chunk' && chunk.map)) {
+            try {
+              // Get the sourcemap object - either from the asset source or the chunk's map
+              const map = chunk.type === 'asset' ? JSON.parse(chunk.source) : chunk.map;
+              
+              if (map.sources) {
+                map.sources = map.sources.map((input) => {
+                  return input.replace(/(?:\.\.?\/)+src\//, `/${packageJSON.name}/src/`);
+                });
+                
+                // Update the sourcemap in the appropriate place
+                if (chunk.type === 'asset') {
+                  chunk.source = JSON.stringify(map);
+                } else {
+                  chunk.map = map;
+                }
+              }
+            } catch (e) {
+              console.error('Error transforming sourcemap:', e);
+            }
+          }
+        }
+      }
+    },
+
     process.env.ANALYZE
       ? visualizer({
           title: `${elsieConfig.name} Dropin Bundle Analysis`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.2.1",
+  "version": "1.3.0-alpha01",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/ImageSwatch/ImageSwatch.css

@@ -33,6 +33,12 @@
   overflow: hidden;
 }
 
+.dropin-image-swatch__span span {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
 .dropin-image-swatch__span img,
 .dropin-image-swatch__content {
   width: inherit;

package/src/components/ProductItemCard/ProductItemCard.css

@@ -0,0 +1,87 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-product-item-card {
+  display: grid;
+  position: relative;
+  grid-auto-flow: row;
+  background: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-400);
+  color: var(--color-neutral-800);
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+  margin: var(--spacing-small);
+  width: 300px;
+}
+
+.dropin-product-item-card__image-container {
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+}
+
+.dropin-product-item-card__image img {
+  width: 100%;
+  max-height: 375px;
+}
+
+.dropin-product-item-card__content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: var(--spacing-small);
+  gap: var(--spacing-xxsmall);
+  align-items: center;
+  color: var(--color-neutral-800);
+}
+
+.dropin-product-item-card__title,
+.dropin-product-item-card__sku,
+.dropin-product-item-card__price,
+.dropin-product-item-card__swatches,
+.dropin-product-item-card__action {
+  grid-column: 1/3;
+}
+
+.dropin-product-item-card__title {
+  font: var(--type-body-1-strong-font);
+  letter-spacing: var(--type-body-1-strong-letter-spacing);
+}
+
+.dropin-product-item-card__sku {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.dropin-product-item-card__price {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.dropin-product-item-card__swatches {
+  margin-top: var(--spacing-xsmall);
+}
+
+.dropin-product-item-card__action {
+  margin-top: var(--spacing-xsmall);
+  width: 100%;
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */

package/src/components/ProductItemCard/ProductItemCard.stories.tsx

@@ -0,0 +1,371 @@
+/********************************************************************
+ * ADOBE CONFIDENTIAL
+ * __________________
+ *
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ *******************************************************************/
+
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  Button,
+  Icon,
+  Image,
+  Price,
+  ProductItemCard as component,
+  ProductItemCardProps,
+  ColorSwatch,
+} from '@adobe-commerce/elsie/components';
+import { Cart } from '@adobe-commerce/elsie/icons';
+/**
+ * Use ProductItemCard to display product recommendations with image, title, price, SKU, and action button.
+ */
+const meta: Meta<ProductItemCardProps> = {
+  title: 'Components/ProductItemCard',
+  component,
+
+  argTypes: {
+    image: {
+      control: {
+        type: 'select',
+        labels: {
+          DefaultImage: 'Default Image',
+          Empty: 'No Image',
+        },
+      },
+      description: 'Product image node.',
+      options: ['DefaultImage', 'Empty'],
+      mapping: {
+        DefaultImage: (
+          <Image
+            src="https://picsum.photos/300/375"
+            width="300"
+            height="375"
+            alt="Product Image"
+            loading="lazy"
+          />
+        ),
+        Empty: null,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    titleNode: {
+      control: {
+        type: 'select',
+        labels: {
+          DefaultTitle: 'Default Title',
+          LongTitle: 'Long Title',
+          Empty: 'No Title',
+        },
+      },
+      description: 'Product title node.',
+      options: ['DefaultTitle', 'LongTitle', 'Empty'],
+      mapping: {
+        DefaultTitle: <div>Hollister Backyard Sweatshirt</div>,
+        LongTitle: (
+          <div>
+            Hollister Backyard Sweatshirt with Extra Long Product Name That
+            Might Wrap
+          </div>
+        ),
+        Empty: null,
+      },
+    },
+    price: {
+      control: {
+        type: 'select',
+        labels: {
+          DefaultPrice: 'Default Price',
+          SalePrice: 'Sale Price',
+          Empty: 'No Price',
+        },
+      },
+      description: 'Product price node.',
+      options: ['DefaultPrice', 'SalePrice', 'Empty'],
+      mapping: {
+        DefaultPrice: (
+          <>
+            <Price amount={49.99} />
+          </>
+        ),
+        SalePrice: (
+          <>
+            <Price amount={69.99} variant="strikethrough" />
+            <Price amount={49.99} sale />
+          </>
+        ),
+        Empty: null,
+      },
+    },
+    sku: {
+      control: {
+        type: 'select',
+        labels: {
+          DefaultSku: 'Default SKU',
+          Empty: 'No SKU',
+        },
+      },
+      description: 'Product SKU node.',
+      options: ['DefaultSku', 'Empty'],
+      mapping: {
+        DefaultSku: <div>SKU: 123456789</div>,
+        Empty: null,
+      },
+    },
+    swatches: {
+      control: {
+        type: 'select',
+        labels: {
+          DefaultSwatches: 'Default Swatches',
+          SelectedSwatches: 'Selected Swatches',
+          OutOfStockSwatches: 'Out of Stock Swatches',
+          Empty: 'No Swatches',
+        },
+      },
+      description: 'Product swatches node.',
+      options: [
+        'DefaultSwatches',
+        'SelectedSwatches',
+        'OutOfStockSwatches',
+        'Empty',
+      ],
+      mapping: {
+        DefaultSwatches: (
+          <div style={{ display: 'flex', gap: '8px' }}>
+            <ColorSwatch
+              color="red"
+              label="Red"
+              groupAriaLabel="Color options"
+              value="red"
+            />
+            <ColorSwatch
+              color="blue"
+              label="Blue"
+              groupAriaLabel="Color options"
+              value="blue"
+            />
+            <ColorSwatch
+              color="green"
+              label="Green"
+              groupAriaLabel="Color options"
+              value="green"
+            />
+          </div>
+        ),
+        SelectedSwatches: (
+          <div style={{ display: 'flex', gap: '8px' }}>
+            <ColorSwatch
+              color="red"
+              label="Red"
+              groupAriaLabel="Color options"
+              value="red"
+              selected
+            />
+            <ColorSwatch
+              color="blue"
+              label="Blue"
+              groupAriaLabel="Color options"
+              value="blue"
+            />
+            <ColorSwatch
+              color="green"
+              label="Green"
+              groupAriaLabel="Color options"
+              value="green"
+            />
+          </div>
+        ),
+        OutOfStockSwatches: (
+          <div style={{ display: 'flex', gap: '8px' }}>
+            <ColorSwatch
+              color="red"
+              label="Red"
+              groupAriaLabel="Color options"
+              value="red"
+              outOfStock
+            />
+            <ColorSwatch
+              color="blue"
+              label="Blue"
+              groupAriaLabel="Color options"
+              value="blue"
+            />
+            <ColorSwatch
+              color="green"
+              label="Green"
+              groupAriaLabel="Color options"
+              value="green"
+            />
+          </div>
+        ),
+        Empty: null,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+    actionButton: {
+      control: {
+        type: 'select',
+        labels: {
+          DefaultButton: 'Default Button',
+          CustomButton: 'Custom Button',
+          Empty: 'No Button',
+        },
+      },
+      description: 'Action button node.',
+      options: ['DefaultButton', 'CustomButton', 'Empty'],
+      mapping: {
+        DefaultButton: <Button>Select Options</Button>,
+        CustomButton: (
+          <Button icon={<Icon source={Cart} size="24" />} variant="primary">
+            Add to Cart
+          </Button>
+        ),
+        Empty: null,
+      },
+      table: { defaultValue: { summary: 'null' } },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ProductItemCardProps>;
+
+/**
+ * Default ProductItemCard with all elements
+ */
+export const Default: Story = {
+  args: {
+    initialized: true,
+    image: 'DefaultImage' as any,
+    titleNode: 'DefaultTitle' as any,
+    price: 'DefaultPrice' as any,
+    sku: 'DefaultSku' as any,
+    swatches: 'DefaultSwatches' as any,
+    actionButton: 'DefaultButton' as any,
+  },
+};
+
+/**
+ * ProductItemCard with long title
+ */
+export const LongTitle: Story = {
+  args: {
+    initialized: true,
+    image: 'DefaultImage' as any,
+    titleNode: 'LongTitle' as any,
+    price: 'DefaultPrice' as any,
+    sku: 'DefaultSku' as any,
+    swatches: 'DefaultSwatches' as any,
+    actionButton: 'DefaultButton' as any,
+  },
+};
+
+/**
+ * ProductItemCard with sale price
+ */
+export const SalePrice: Story = {
+  args: {
+    initialized: true,
+    image: 'DefaultImage' as any,
+    titleNode: 'DefaultTitle' as any,
+    price: 'SalePrice' as any,
+    sku: 'DefaultSku' as any,
+    swatches: 'DefaultSwatches' as any,
+    actionButton: 'DefaultButton' as any,
+  },
+};
+
+/**
+ * ProductItemCard without action button
+ */
+export const NoButton: Story = {
+  args: {
+    initialized: true,
+    image: 'DefaultImage' as any,
+    titleNode: 'DefaultTitle' as any,
+    price: 'DefaultPrice' as any,
+    sku: 'DefaultSku' as any,
+    swatches: 'DefaultSwatches' as any,
+    actionButton: 'Empty' as any,
+  },
+};
+
+/**
+ * ProductItemCard without image
+ */
+export const NoImage: Story = {
+  args: {
+    initialized: true,
+    image: 'Empty' as any,
+    titleNode: 'DefaultTitle' as any,
+    price: 'DefaultPrice' as any,
+    sku: 'DefaultSku' as any,
+    swatches: 'DefaultSwatches' as any,
+    actionButton: 'DefaultButton' as any,
+  },
+};
+
+/**
+ * ProductItemCard with minimal content
+ */
+export const Minimal: Story = {
+  args: {
+    initialized: true,
+    image: 'DefaultImage' as any,
+    titleNode: 'DefaultTitle' as any,
+    price: 'Empty' as any,
+    sku: 'Empty' as any,
+    swatches: 'Empty' as any,
+    actionButton: 'Empty' as any,
+  },
+};
+
+/**
+ * ProductItemCard with selected swatch
+ */
+export const SelectedSwatch: Story = {
+  args: {
+    initialized: true,
+    image: 'DefaultImage' as any,
+    titleNode: 'DefaultTitle' as any,
+    price: 'DefaultPrice' as any,
+    sku: 'DefaultSku' as any,
+    swatches: 'SelectedSwatches' as any,
+    actionButton: 'DefaultButton' as any,
+  },
+};
+
+/**
+ * ProductItemCard with out of stock swatch
+ */
+export const OutOfStockSwatch: Story = {
+  args: {
+    initialized: true,
+    image: 'DefaultImage' as any,
+    titleNode: 'DefaultTitle' as any,
+    price: 'DefaultPrice' as any,
+    sku: 'DefaultSku' as any,
+    swatches: 'OutOfStockSwatches' as any,
+    actionButton: 'DefaultButton' as any,
+  },
+};
+
+/**
+ * ProductItemCard in skeleton loading state
+ */
+export const Skeleton: Story = {
+  args: {
+    initialized: false,
+  },
+};

package/src/components/ProductItemCard/ProductItemCard.tsx

@@ -0,0 +1,94 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
+ *******************************************************************/
+
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { VComponent, classes } from '@adobe-commerce/elsie/lib';
+import { ProductItemCardSkeleton } from '@adobe-commerce/elsie/components/ProductItemCard/ProductItemCardSkeleton';
+import '@adobe-commerce/elsie/components/ProductItemCard/ProductItemCard.css';
+
+export interface ProductItemCardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'loading'> {
+  image?: VNode;
+  titleNode?: VNode;
+  price?: VNode;
+  sku?: VNode;
+  actionButton?: VNode;
+  swatches?: VNode;
+  initialized?: boolean;
+}
+
+export const ProductItemCard: FunctionComponent<ProductItemCardProps> = ({
+  className,
+  image,
+  titleNode,
+  price,
+  sku,
+  actionButton,
+  swatches,
+  initialized = false,
+  ...props
+}) => {
+  if (!initialized) {
+    return <ProductItemCardSkeleton />;
+  }
+  return (
+    <div
+      {...props}
+      className={classes(['dropin-product-item-card', className])}
+    >
+      <div className="dropin-product-item-card__image-container">
+        {image && (
+          <VComponent
+            node={image}
+            className={classes(['dropin-product-item-card__image'])}
+          />
+        )}
+      </div>
+      <div className="dropin-product-item-card__content">
+        {titleNode && (
+          <VComponent
+            node={titleNode}
+            className={classes(['dropin-product-item-card__title'])}
+          />
+        )}
+        {sku && (
+          <VComponent
+            node={sku}
+            className={classes(['dropin-product-item-card__sku'])}
+          />
+        )}
+        {price && (
+          <div className="dropin-product-item-card__price">
+            <VComponent
+              node={price}
+              className={classes(['dropin-product-item-card__price'])}
+            />
+          </div>
+        )}
+        {swatches && (
+          <div className="dropin-product-item-card__swatches">
+            <VComponent
+              node={swatches}
+              className={classes(['dropin-product-item-card__swatches'])}
+            />
+          </div>
+        )}
+        {actionButton && (
+          <div className="dropin-product-item-card__action">
+            <VComponent
+              node={actionButton}
+              className={classes(['dropin-product-item-card__action'])}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/ProductItemCard/ProductItemCardSkeleton.css

@@ -0,0 +1,40 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-product-item-card__skeleton {
+  gap: var(--spacing-small);
+}
+
+.dropin-product-item-card__skeleton__image {
+  height: 375px;
+}
+
+.dropin-product-item-card__skeleton__content {
+  grid-column: 1/-1;
+}
+
+/* .dropin-product-item-card__skeleton__image {
+  width: 100%;
+  height: auto;
+}
+*/
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */

package/src/components/ProductItemCard/ProductItemCardSkeleton.tsx

@@ -0,0 +1,42 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
+ *******************************************************************/
+
+import { FunctionComponent } from 'preact';
+import { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';
+import '@adobe-commerce/elsie/components/ProductItemCard/ProductItemCardSkeleton.css';
+
+export const ProductItemCardSkeleton: FunctionComponent = () => {
+  return (
+    <div className="dropin-product-item-card dropin-product-item-card-skeleton">
+      <Skeleton className="dropin-product-item-card__skeleton dropin-product-item-card__image-container">
+        <SkeletonRow
+          fullWidth={true}
+          className="dropin-product-item-card__skeleton__image"
+        />
+        <div className="dropin-product-item-card__content dropin-product-item-card__skeleton__content">
+          <SkeletonRow
+            fullWidth={true}
+            size="large"
+            className="dropin-product-item-card__skeleton__item"
+          />
+          <SkeletonRow
+            fullWidth={true}
+            size="xsmall"
+            className="dropin-product-item-card__skeleton__item"
+          />
+          <SkeletonRow
+            fullWidth={true}
+            size="small"
+            className="dropin-product-item-card__skeleton__item"
+          />
+        </div>{' '}
+      </Skeleton>
+    </div>
+  );
+};

package/src/components/ProductItemCard/index.ts

@@ -0,0 +1,11 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+  
+export * from '@adobe-commerce/elsie/components/ProductItemCard/ProductItemCard';
+export { ProductItemCard as default } from '@adobe-commerce/elsie/components/ProductItemCard/ProductItemCard';

package/src/components/index.ts

@@ -47,3 +47,4 @@ export * from '@adobe-commerce/elsie/components/Header';
 export * from '@adobe-commerce/elsie/components/Tag';
 export * from '@adobe-commerce/elsie/components/ContentGrid';
 export * from '@adobe-commerce/elsie/components/Pagination';
+export * from '@adobe-commerce/elsie/components/ProductItemCard';

package/src/docs/Utilities/links.mdx

@@ -0,0 +1,58 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+
+<Meta title="Utilities/Links" />
+<Unstyled>
+
+# Adding Links using the route pattern
+
+Whenever possible, avoid placing `onClick` handlers directly on anchor elements (`<a>`) in drop-in components, such as product or category pages, as this results in accessibility issues and broken browser behavior. Problems include:
+
+- Right-click > Open in New Tab results in blank pages.
+- Middle-click (open in background tab) won't work as expected.
+- Keyboard navigation and screen readers may not trigger the link correctly.
+
+Instead, follow the route pattern to provide composable and accessible navigation.
+
+## How it works
+
+Components accept a `routeX` function as a prop. The function receives a data model (a product, for example) and returns a URL. Internally, it's used like this:
+
+```tsx
+<a href={routeProduct?.(product) ?? '#'}>...</a>
+```
+
+This lets developers customize routing logic per storefront while preserving link semantics.
+
+## Example — Component-Side
+
+In your component (a PLP item, for example):
+
+The `routeProduct` prop must be optional and default to a # or an non-functional element like a `div` if not provided.
+
+```tsx
+type Props = {
+  routeProduct?: (product: ProductModel) => string;
+};
+
+function ProductCard({ product, routeProduct }: Props) {
+  return (
+    <a href={routeProduct?.(product) ?? '#'}>
+      <div>{product.name}</div>
+    </a>
+  );
+}
+```
+
+## Example — Storefront-Side
+
+In the storefront integration (`commerce-cart.js` or `commerce-plp.js`, for example):
+
+```js
+import { rootLink } from '@adobe/commerce-url-utils';
+
+provider.render(ProductList, {
+  routeProduct: (product) => rootLink(`/products/${product.url.urlKey}/${product.topLevelSku}`),
+});
+```
+
+</Unstyled>

package/src/lib/aem/configs.ts

@@ -0,0 +1,237 @@
+import { deepmerge } from '../deepmerge';
+
+interface ConfigHeaders {
+  all?: Record<string, string>;
+  [key: string]: Record<string, string> | undefined;
+}
+
+interface ConfigPublic {
+  default: ConfigRoot;
+  [key: string]: ConfigRoot;
+}
+
+interface ConfigRoot {
+  headers?: ConfigHeaders;
+  [key: string]: any;
+}
+
+interface Config {
+  public: ConfigPublic;
+  [key: string]: any;
+}
+
+// Private state
+let config: Config | null = null;
+let rootPath: string | null = null;
+let rootConfig: ConfigRoot | null = null;
+
+/**
+ * Reset the config state
+ */
+function resetConfig() {
+  config = null;
+  rootPath = null;
+  rootConfig = null;
+}
+
+/**
+ * Builds the URL for the config file.
+ *
+ * @returns {URL} - The URL for the config file.
+ */
+function buildConfigURL() {
+  return new URL(`${window.location.origin}/config.json`);
+}
+
+/**
+ * Retrieves a value from a config object using dot notation.
+ *
+ * @param {Object} obj - The config object.
+ * @param {string} key - The key to retrieve (supports dot notation).
+ * @returns {any} - The value of the key.
+ */
+function getValue(obj: Record<string, any>, key: string): any {
+  return key.split('.').reduce((current: Record<string, any>, part: string) => {
+    if (!Object.prototype.hasOwnProperty.call(current, part)) {
+      console.warn(`Property ${key} does not exist in the object`);
+      return undefined;
+    }
+    return current[part];
+  }, obj);
+}
+
+/**
+ * Get cookie
+ * @param {string} cookieName - The name of the cookie to get
+ * @returns {string} - The value of the cookie
+ */
+function getCookie(cookieName: string): string | undefined {
+  const cookies = document.cookie.split(';');
+  let foundValue;
+
+  cookies.forEach((cookie) => {
+    const [name, value] = cookie.trim().split('=');
+    if (name === cookieName) {
+      foundValue = decodeURIComponent(value);
+    }
+  });
+
+  return foundValue;
+}
+
+/**
+ * Get root path
+ * @param {Object} [configObj=config] - The config object.
+ * @returns {string} - The root path.
+ */
+function getRootPath(configObj: Config | null = config): string {
+  if (!configObj) {
+    console.warn('No config found. Please call initializeConfig() first.');
+    return '/';
+  }
+
+  const value = Object.keys(configObj?.public)
+    // Sort by number of non-empty segments to find the deepest path
+    .sort((a, b) => {
+      const aSegments = a.split('/').filter(Boolean).length;
+      const bSegments = b.split('/').filter(Boolean).length;
+      return bSegments - aSegments;
+    })
+    .find(
+      (key) =>
+        window.location.pathname === key ||
+        window.location.pathname.startsWith(key)
+    );
+
+  return value ?? '/';
+}
+
+/**
+ * Get list of root paths from public config
+ * @returns {Array} - The list of root paths.
+ */
+function getListOfRootPaths(): string[] {
+  if (!config) {
+    console.warn('No config found. Please call initializeConfig() first.');
+    return [];
+  }
+
+  return Object.keys(config.public).filter((root) => root !== 'default');
+}
+
+/**
+ * Checks if the public config contains more than "default"
+ * @returns {boolean} - true if public config contains more than "default"
+ */
+function isMultistore(): boolean {
+  return getListOfRootPaths().length >= 1;
+}
+
+/**
+ * Retrieves headers from config entries like commerce.headers.pdp.my-header, etc and
+ * returns as object of all headers like { my-header: value, ... }
+ * @param {string} scope - The scope of the headers to retrieve.
+ * @returns {Object} - The headers.
+ */
+function getHeaders(scope: string): Record<string, string> {
+  if (!rootConfig) {
+    throw new Error(
+      'Configuration not initialized. Call initializeConfig() first.'
+    );
+  }
+  const headers = rootConfig.headers ?? {};
+  return {
+    ...(headers.all ?? {}),
+    ...(headers[scope] ?? {}),
+  };
+}
+
+/**
+ * Applies config overrides from metadata.
+ *
+ * @param {Object} [configObj=config] - The base config.
+ * @param {string} [root=rootPath] - The root path.
+ * @returns {Object} - The config with overrides applied.
+ */
+function applyConfigOverrides(
+  configObj: Config | null,
+  root: string | null
+): ConfigRoot {
+  const defaultConfig = configObj!.public?.default;
+
+  if (root === '/' || !configObj!.public[root as keyof ConfigPublic])
+    return defaultConfig;
+
+  return deepmerge(
+    defaultConfig,
+    configObj!.public[root as keyof ConfigPublic]
+  );
+}
+
+/**
+ * Fetches config from remote and saves in session, then returns it, otherwise
+ * returns if it already exists.
+ *
+ * @returns {Promise<Object>} - The config JSON from session storage
+ */
+async function getConfigFromSession(): Promise<Config> {
+  try {
+    const configJSON = window.sessionStorage.getItem('config');
+    if (!configJSON) {
+      throw new Error('No config in session storage');
+    }
+
+    const parsedConfig = JSON.parse(configJSON);
+    if (
+      !parsedConfig[':expiry'] ||
+      parsedConfig[':expiry'] < Math.round(Date.now() / 1000)
+    ) {
+      throw new Error('Config expired');
+    }
+    return parsedConfig;
+  } catch (e) {
+    const config = await fetch(buildConfigURL());
+    if (!config.ok) throw new Error('Failed to fetch config');
+    const configJSON = await config.json();
+    configJSON[':expiry'] = Math.round(Date.now() / 1000) + 7200;
+    window.sessionStorage.setItem('config', JSON.stringify(configJSON));
+    return configJSON;
+  }
+}
+
+/**
+ * Initializes the configuration system.
+ * @returns {Promise<void>}
+ */
+async function initializeConfig(): Promise<ConfigRoot> {
+  config = await getConfigFromSession();
+  rootPath = getRootPath(config);
+  rootConfig = applyConfigOverrides(config, rootPath);
+  return rootConfig;
+}
+
+/**
+ * Retrieves a configuration value.
+ *
+ * @param {string} configParam - The configuration parameter to retrieve.
+ * @returns {string|undefined} - The value of the configuration parameter, or undefined.
+ */
+function getConfigValue(configParam: string): any {
+  if (!rootConfig) {
+    throw new Error(
+      'Configuration not initialized. Call initializeConfig() first.'
+    );
+  }
+  return getValue(rootConfig, configParam);
+}
+
+export {
+  initializeConfig,
+  getCookie,
+  getRootPath,
+  getListOfRootPaths,
+  isMultistore,
+  getConfigValue,
+  getHeaders,
+  resetConfig,
+};