@adobe-commerce/elsie 1.3.0-beta6 → 1.3.1-alpha007

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.3.0-beta6",
+  "version": "1.3.1-alpha007",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -27,10 +27,10 @@
   },
   "devDependencies": {
     "@adobe-commerce/event-bus": "~1.0.0",
-    "@adobe-commerce/fetch-graphql": "1.1.0-beta1",
-    "@adobe-commerce/recaptcha": "1.0.1-beta2",
+    "@adobe-commerce/fetch-graphql": "~1.1.0",
+    "@adobe-commerce/recaptcha": "~1.0.1",
     "@adobe-commerce/storefront-design": "~1.0.0",
-    "@dropins/build-tools": "1.0.1-beta1",
+    "@dropins/build-tools": "~1.0.1",
     "preact": "~10.22.1",
     "vite-plugin-banner": "^0.8.0"
   },

package/src/components/Button/Button.css

@@ -55,8 +55,8 @@
 }
 
 /* Primary */
-button.dropin-button.dropin-button--primary,
-a.dropin-button.dropin-button--primary,
+.dropin-button--primary,
+a.dropin-button--primary,
 .dropin-iconButton--primary {
   border: none;
   background: var(--color-brand-500) 0 0% no-repeat padding-box;
@@ -72,8 +72,8 @@ a.dropin-button.dropin-button--primary,
   padding: var(--spacing-xsmall);
 }
 
-button.dropin-button.dropin-button--primary--disabled,
-a.dropin-button.dropin-button--primary--disabled,
+.dropin-button--primary--disabled,
+a.dropin-button--primary--disabled,
 .dropin-iconButton--primary--disabled {
   background: var(--color-neutral-300) 0 0% no-repeat padding-box;
   color: var(--color-neutral-500);
@@ -82,21 +82,21 @@ a.dropin-button.dropin-button--primary--disabled,
   user-select: none;
 }
 
-button.dropin-button.dropin-button--primary:hover,
-a.dropin-button.dropin-button--primary:hover,
+.dropin-button--primary:hover,
+a.dropin-button--primary:hover,
 .dropin-iconButton--primary:hover,
-button.dropin-button.dropin-button--primary:focus:hover,
+.dropin-button--primary:focus:hover,
 .dropin-iconButton--primary:focus:hover {
   background-color: var(--color-button-hover);
   text-decoration: none;
 }
 
-button.dropin-button.dropin-button--primary:focus,
+.dropin-button--primary:focus,
 .dropin-iconButton--primary:focus {
   background-color: var(--color-brand-500);
 }
 
-button.dropin-button.dropin-button--primary:hover:active,
+.dropin-button--primary:hover:active,
 .dropin-iconButton--primary:hover:active {
   background-color: var(--color-button-active);
 }

package/src/components/CartItem/CartItem.css

@@ -241,10 +241,15 @@
 }
 
 .dropin-cart-item__price,
+.dropin-cart-item__footer div,
 .dropin-cart-item__attributes div {
   margin-top: var(--group-spacing);
 }
 
+.dropin-cart-item__footer p {
+  margin-top: 0;
+}
+
 .dropin-cart-item__quantity:not(.dropin-cart-item__quantity--edit) {
   display: none;
 }

package/src/components/Icon/Icon.tsx

@@ -62,7 +62,6 @@ const lazyIcons = {
   Coupon: lazy(() => import('@adobe-commerce/elsie/icons/Coupon.svg')),
   Gift: lazy(() => import('@adobe-commerce/elsie/icons/Gift.svg')),
   GiftCard: lazy(() => import('@adobe-commerce/elsie/icons/GiftCard.svg')),
-  Edit: lazy(() => import('@adobe-commerce/elsie/icons/Edit.svg')),
 };
 
 export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'size'> {

package/src/components/Modal/Modal.css

@@ -10,10 +10,10 @@
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-modal {
+  height: 100vh;
+  width: 100vw;
   position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
   z-index: 99999;
   overflow: auto;

package/src/components/Modal/Modal.stories.tsx

@@ -11,8 +11,7 @@ import { Meta, StoryObj } from '@storybook/preact';
 import { Modal as component, ModalProps } from './Modal';
 import { useState } from 'preact/hooks';
 import { Button } from '../Button';
-import { expect, userEvent, within, waitFor } from '@storybook/test';
-import { useText } from '@adobe-commerce/elsie/i18n';
+import { expect, userEvent, within } from '@storybook/test';
 
 const meta: Meta<ModalProps> = {
   title: 'Components/Modal',
@@ -108,21 +107,13 @@ export const SmallModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
-    const portalRoot = await waitFor(() => {
-      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
-      expect(root).toBeTruthy();
-      return root;
-    });
-
-    await expect(portalRoot).toBeVisible();
-
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
     await expect(modal).toBeVisible();
 
-    expect(portalRoot.querySelector('h4')?.innerText).toBe('Small modal');
+    await expect(await canvas.findByText('Small modal')).toBeVisible();
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'
@@ -157,21 +148,13 @@ export const MediumModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
-    const portalRoot = await waitFor(() => {
-      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
-      expect(root).toBeTruthy();
-      return root;
-    });
-
-    await expect(portalRoot).toBeVisible();
-
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
     await expect(modal).toBeVisible();
 
-    expect(portalRoot.querySelector('h3')?.innerText).toBe('Medium modal');
+    await expect(await canvas.findByText('Medium modal')).toBeVisible();
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'
@@ -204,17 +187,11 @@ export const FullModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
-    const portalRoot = await waitFor(() => {
-      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
-      expect(root).toBeTruthy();
-      return root;
-    });
-
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
-    await expect(portalRoot).toBeVisible();
+    await expect(modal).toBeVisible();
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'
@@ -270,65 +247,4 @@ export const OverflowingTitle: Story = {
   },
 };
 
-const LocalizedContent = () => {
-  const translations = useText({
-    label: 'Dropin.ExampleComponentName.item.label',
-  });
-
-  console.log(translations.label);
-  return <div>{translations.label}</div>;
-};
-
-/**
- * ```ts
- * import { Modal } from '@/elsie/components/Modal';
- * import { useText } from '@adobe-commerce/elsie/i18n';
- *
- * const label = useText(`Dropin.ExampleComponentName.item.label`).label;
- *
- * <Modal size="medium" title={<h3>Localized Modal</h3>}>
- *      <div>{label}</div>
- * </Modal>
- * ```
- */
-
-export const LocalizedModal: Story = {
-  args: {
-    size: 'medium',
-    children: <LocalizedContent />,
-    title: <h3>Localized Modal</h3>,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-
-    const portalRoot = await waitFor(() => {
-      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
-      expect(root).toBeTruthy();
-      return root;
-    });
-
-    await expect(portalRoot).toBeVisible();
-
-    const modal = document.querySelector(
-      '.dropin-modal__body'
-    ) as HTMLDivElement;
-
-    await expect(modal).toBeVisible();
-
-    expect(portalRoot.querySelector('h3')?.innerText).toBe('Localized Modal');
-    expect((portalRoot.querySelector('.dropin-modal__body') as HTMLElement)?.innerText).toContain('string');
-
-    const closeButton = document.querySelector(
-      '.dropin-modal__header-close-button'
-    ) as HTMLButtonElement;
-
-    await userEvent.click(closeButton);
-
-    await expect(modal).not.toBeVisible();
-
-    await expect(canvas.getByText('Open Modal')).toBeVisible();
-  },
-};
-
 export default meta;

package/src/components/Modal/Modal.tsx

@@ -18,7 +18,6 @@ import {
 import { Button } from '../Button';
 import { Close as CloseSVG } from '@adobe-commerce/elsie/icons';
 import { VNode } from 'preact';
-import { Portal } from '../Portal/Portal';
 
 import '@adobe-commerce/elsie/components/Modal/Modal.css';
 
@@ -107,54 +106,52 @@ export const Modal: FunctionComponent<ModalProps> = ({
   }, []);
 
   return (
-    <Portal>
+    <div
+      className={classes([
+        'dropin-modal',
+        ['dropin-modal--dim', backgroundDim],
+      ])}
+    >
       <div
+        {...props}
         className={classes([
-          'dropin-modal',
-          ['dropin-modal--dim', backgroundDim],
+          'dropin-modal__body',
+          [`dropin-modal__body--${size}`, size],
+          className,
         ])}
       >
         <div
-          {...props}
           className={classes([
-            'dropin-modal__body',
-            [`dropin-modal__body--${size}`, size],
-            className,
+            'dropin-modal__header',
+            ['dropin-modal__header-title', !!title],
           ])}
         >
-          <div
-            className={classes([
-              'dropin-modal__header',
-              ['dropin-modal__header-title', !!title],
-            ])}
-          >
-            {title && (
-              <div className={classes(['dropin-modal__header-title-content'])}>
-                {title}
-              </div>
-            )}
-
-            {showCloseButton && (
-              <Button
-                aria-label={translations.modalCloseLabel}
-                variant="tertiary"
-                className="dropin-modal__header-close-button"
-                onClick={handleOnClose}
-                icon={<CloseSVG />}
-              />
-            )}
-          </div>
-
-          <div
-            className={classes([
-              'dropin-modal__content',
-              ['dropin-modal__body--centered', centered],
-            ])}
-          >
-            {children}
-          </div>
+          {title && (
+            <div className={classes(['dropin-modal__header-title-content'])}>
+              {title}
+            </div>
+          )}
+
+          {showCloseButton && (
+            <Button
+              aria-label={translations.modalCloseLabel}
+              variant="tertiary"
+              className="dropin-modal__header-close-button"
+              onClick={handleOnClose}
+              icon={<CloseSVG />}
+            />
+          )}
+        </div>
+
+        <div
+          className={classes([
+            'dropin-modal__content',
+            ['dropin-modal__body--centered', centered],
+          ])}
+        >
+          {children}
         </div>
       </div>
-    </Portal>
+    </div>
   );
 };

package/src/icons/index.ts

@@ -40,4 +40,3 @@ export { default as EmptyBox } from './EmptyBox.svg';
 export { default as Coupon } from './Coupon.svg';
 export { default as Gift } from './Gift.svg';
 export { default as GiftCard } from './GiftCard.svg';
-export { default as Edit } from './Edit.svg';

package/src/components/Portal/Portal.stories.tsx

@@ -1,145 +0,0 @@
-/********************************************************************
- *  Copyright 2024 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 { Meta, StoryObj } from '@storybook/preact';
-import { Portal } from './Portal';
-import { Button } from '../Button';
-import { useState } from 'preact/compat';
-
-const meta: Meta<typeof Portal> = {
-  title: 'Components/Portal',
-  component: Portal,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Portal>;
-
-/**
- * ```ts
- * import { Portal } from '@/elsie/components/Portal';
- *
- * <Portal>
- *      <div>👋 Howdy, I'm Howdy!</div>
- * </Portal>
- * ```
- */
-
-// Portal with dynamic content
-export const DynamicContent: Story = {
-  render: () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [count, setCount] = useState(0);
-
-    return (
-      <div style={{ border: '2px dashed #ccc', padding: '20px' }}>
-        <Button onClick={() => setIsOpen(!isOpen)}>
-          {isOpen ? 'Close Portal' : 'Open Portal'}
-        </Button>
-        
-        {isOpen && (
-          <Portal>
-            <div style={{ 
-              position: 'fixed', 
-              top: '50%', 
-              left: '50%', 
-              transform: 'translate(-50%, -50%)',
-              background: 'white',
-              padding: '20px',
-              border: '1px solid #ccc',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-            }}>
-              <p>Portal content with counter: {count}</p>
-              <Button onClick={() => setCount(c => c + 1)}>
-                Increment Counter
-              </Button>
-              <Button 
-                variant="tertiary" 
-                onClick={() => setIsOpen(false)}
-                style={{ marginLeft: '8px' }}
-              >
-                Close
-              </Button>
-            </div>
-          </Portal>
-        )}
-      </div>
-    );
-  },
-};
-
-// Portal with nested portals
-export const NestedPortals: Story = {
-  render: () => {
-    const [isOuterOpen, setOuterOpen] = useState(false);
-    const [isInnerOpen, setInnerOpen] = useState(false);
-
-    return (
-      <div style={{ border: '2px dashed #ccc', padding: '20px' }}>
-        <Button onClick={() => setOuterOpen(!isOuterOpen)}>
-          {isOuterOpen ? 'Close Outer Portal' : 'Open Outer Portal'}
-        </Button>
-        
-        {isOuterOpen && (
-          <Portal>
-            <div style={{ 
-              position: 'fixed', 
-              top: '50%', 
-              left: '50%', 
-              transform: 'translate(-50%, -50%)',
-              background: 'white',
-              padding: '20px',
-              border: '1px solid #ccc',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-            }}>
-              <p>Outer Portal Content</p>
-              <Button onClick={() => setInnerOpen(!isInnerOpen)}>
-                {isInnerOpen ? 'Close Inner Portal' : 'Open Inner Portal'}
-              </Button>
-              
-              {isInnerOpen && (
-                <Portal>
-                  <div style={{ 
-                    position: 'fixed', 
-                    top: '60%', 
-                    left: '50%', 
-                    transform: 'translate(-50%, -50%)',
-                    background: 'white',
-                    padding: '20px',
-                    border: '1px solid #ccc',
-                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-                  }}>
-                    <p>Inner Portal Content</p>
-                    <Button 
-                      variant="tertiary" 
-                      onClick={() => setInnerOpen(false)}
-                    >
-                      Close Inner Portal
-                    </Button>
-                  </div>
-                </Portal>
-              )}
-              
-              <Button 
-                variant="tertiary" 
-                onClick={() => setOuterOpen(false)}
-                style={{ marginLeft: '8px' }}
-              >
-                Close Outer Portal
-              </Button>
-            </div>
-          </Portal>
-        )}
-      </div>
-    );
-  },
-};

package/src/components/Portal/Portal.tsx

@@ -1,49 +0,0 @@
-/********************************************************************
- *  Copyright 2024 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 { ComponentChildren } from 'preact';
-import { FunctionComponent, useLayoutEffect, useRef } from 'preact/compat';
-
-interface PortalProps {
-  children: ComponentChildren;
-}
-
-export const Portal: FunctionComponent<PortalProps> = ({ children }) => {
-  const portalRoot = useRef<HTMLDivElement | null>(null);
-  const contentRef = useRef<HTMLDivElement | null>(null);
-
-  useLayoutEffect(() => {
-    // Create portal root if it doesn't exist
-    if (!portalRoot.current) {
-      portalRoot.current = document.createElement('div');
-      portalRoot.current.setAttribute('data-portal-root', '');
-      document.body.appendChild(portalRoot.current);
-    }
-
-    // Move content to portal root
-    if (contentRef.current && portalRoot.current) {
-      portalRoot.current.appendChild(contentRef.current);
-    }
-
-    // Cleanup
-    return () => {
-      if (portalRoot.current) {
-        portalRoot.current.remove();
-        portalRoot.current = null;
-      }
-    };
-  }, []);
-
-  // Return a div that contains the children
-  return (
-    <div ref={contentRef} className="dropin-design">
-      {children}
-    </div>
-  );
-}; 

package/src/icons/Edit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>

package/src/lib/aem/assets.ts

@@ -1,323 +0,0 @@
-import {
-  provider as UI,
-  Image,
-  type ImageProps,
-} from '@adobe-commerce/elsie/components';
-
-import { getConfigValue } from '@adobe-commerce/elsie/lib/aem/configs';
-import type { ResolveImageUrlOptions } from '../resolve-image';
-
-const AEM_ASSETS_FORMATS = ['gif', 'jpg', 'jpeg', 'png', 'webp'] as const;
-const AEM_ASSETS_ALLOWED_ROTATIONS = [90, 180, 270] as const;
-const AEM_ASSETS_ALLOWED_FLIPS = ['h', 'v', 'hv'] as const;
-
-/** The allowed formats for the `AEM Assets` image optimization API. */
-export type AemAssetsFormat = (typeof AEM_ASSETS_FORMATS)[number];
-
-/** The allowed rotations for the `AEM Assets` image optimization API. */
-export type AemAssetsRotation = (typeof AEM_ASSETS_ALLOWED_ROTATIONS)[number];
-
-/** The allowed flips for the `AEM Assets` image optimization API. */
-export type AemAssetsFlip = (typeof AEM_ASSETS_ALLOWED_FLIPS)[number];
-
-/**
- * Defines a crop region of an image.
- * @example
- * ```ts
- * // Crop the image to a 80% width and height, starting at 10% from the top and left.
- * const cropSettings: AemAssetsCropSettings = {
- *   xOrigin: 10,
- *   yOrigin: 10,
- *   width: 80,
- *   height: 80,
- * };
- */
-export interface AemAssetsCropSettings {
-  /** The (relative) x origin of the crop (between 0 and 100) */
-  xOrigin?: number;
-
-  /** The (relative) y origin of the crop (between 0 and 100) */
-  yOrigin?: number;
-
-  /** The width of the crop (between 0 and 100) */
-  width?: number;
-
-  /** The height of the crop (between 0 and 100) */
-  height?: number;
-}
-
-/**
- * The parameters accepted by the `AEM Assets` image optimization API.
- * @see https://adobe-aem-assets-delivery-experimental.redoc.ly/
- */
-export interface AemAssetsParams {
-  format: AemAssetsFormat;
-  rotate?: AemAssetsRotation;
-  flip?: AemAssetsFlip;
-  crop?: AemAssetsCropSettings;
-
-  width?: number;
-  height?: number;
-  quality?: number;
-
-  attachment?: boolean;
-  sharpen?: boolean;
-  blur?: number;
-  dpr?: number;
-  smartCrop?: string;
-
-  // For future updates we may miss.
-  [key: string]: unknown;
-}
-
-type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
-
-/** The parameters to be applied to the asset (known width required when using a slot) */
-export type AemAssetsImageSlotConfigParams = WithRequired<
-  Partial<AemAssetsParams>,
-  'width'
->;
-
-/** The configuration for an image slot. */
-export interface AemAssetsImageSlotConfig {
-  /** The alias (i.e. seoName) of the image */
-  alias: string;
-
-  /** The props to be applied to the underlying {@link Image} component */
-  imageProps: Partial<Omit<ImageProps, 'params' | 'width' | 'height'>> & {
-    src: string;
-  };
-
-  /** The parameters to be applied to the asset (known width required when using a slot) */
-  params: AemAssetsImageSlotConfigParams;
-
-  /** The element that will contain the image in the slot */
-  wrapper?: HTMLElement;
-}
-
-interface RenderContext {
-  replaceWith: (element: HTMLElement) => void;
-}
-
-/**
- * Normalizes the given URL to ensure it is a valid URL.
- * @param {string} url - The URL to normalize.
- * @returns {string} The normalized URL.
- */
-function normalizeUrl(url: string): string {
-  let imageUrl = url;
-
-  if (imageUrl.startsWith('//')) {
-    // Use current window's protocol.
-    const { protocol } = window.location;
-    imageUrl = protocol + imageUrl;
-  }
-
-  return imageUrl;
-}
-
-/** Returns whether the given value is a valid flip. */
-function isValidFlip(flip: unknown): flip is AemAssetsFlip {
-  return AEM_ASSETS_ALLOWED_FLIPS.includes(flip as AemAssetsFlip);
-}
-
-/** Returns whether the given value is a valid rotation. */
-function isValidRotation(rotation: unknown): rotation is AemAssetsRotation {
-  return AEM_ASSETS_ALLOWED_ROTATIONS.includes(rotation as AemAssetsRotation);
-}
-
-/** Returns whether the given value is a valid format. */
-function isValidFormat(format: unknown): format is AemAssetsFormat {
-  return AEM_ASSETS_FORMATS.includes(format as AemAssetsFormat);
-}
-
-/** Asserts that the given value is valid. */
-function assertUnionParameter(
-  value: unknown,
-  validator: (value: unknown) => boolean,
-  errorMessage: string
-): void {
-  if (value !== undefined && !validator(value)) {
-    throw new Error(errorMessage);
-  }
-}
-
-/** Returns whether AEM Assets is enabled in the Storefront. */
-export function isAemAssetsEnabled(): boolean {
-  const config = getConfigValue('commerce-assets-enabled');
-
-  return (
-    config &&
-    ((typeof config === 'string' && config.toLowerCase() === 'true') ||
-      (typeof config === 'boolean' && config === true))
-  );
-}
-
-/** The default optimization parameters used globally, unless overriden (per use). */
-export function getDefaultAemAssetsOptimizationParams(): AemAssetsParams {
-  // See: https://adobe-aem-assets-delivery-experimental.redoc.ly/
-  return {
-    quality: 80,
-    format: 'webp',
-  };
-}
-
-/** Returns true if the given URL is an AEM Assets URL. */
-export function isAemAssetsUrl(url: string | URL): boolean {
-  const assetsUrl = typeof url === 'string' ? new URL(normalizeUrl(url)) : url;
-
-  if (!assetsUrl.pathname.startsWith('/adobe/assets/urn:aaid:aem')) {
-    return false;
-  }
-
-  return true;
-}
-
-/** Generates an optimized URL for AEM Assets. */
-export function generateAemAssetsOptimizedUrl(
-  assetUrl: string,
-  alias: string,
-  params: Partial<AemAssetsParams> = {}
-): string {
-  const defaultParams = getDefaultAemAssetsOptimizationParams();
-  const mergedParams: AemAssetsParams = { ...defaultParams, ...params };
-
-  // Destructure the ones that need special handling/validation.
-  const { format, crop, ...optimizedParams } = mergedParams;
-  assertUnionParameter(format, isValidFormat, 'Invalid format');
-  assertUnionParameter(optimizedParams.flip, isValidFlip, 'Invalid flip');
-  assertUnionParameter(
-    optimizedParams.rotate,
-    isValidRotation,
-    'Invalid rotation'
-  );
-
-  const stringifiedParams = Object.fromEntries(
-    Object.entries(optimizedParams).map(([key, value]) => [key, String(value)])
-  );
-
-  const searchParams = new URLSearchParams(stringifiedParams);
-
-  if (crop) {
-    const [xOrigin, yOrigin] = [crop.xOrigin || 0, crop.yOrigin || 0];
-    const [width, height] = [crop.width || 100, crop.height || 100];
-
-    const cropTransform = `${xOrigin}p,${yOrigin}p,${width}p,${height}p`;
-    searchParams.set('crop', cropTransform);
-  }
-
-  return `${assetUrl}/as/${alias}.${format}?${searchParams.toString()}`;
-}
-
-/**
- * Tries to generate an optimized URL for AEM Assets. Returns the given
- * url if AEM Assets is not enabled or is not an AEM Assets URL.
- */
-export function tryGenerateAemAssetsOptimizedUrl(
-  assetUrl: string,
-  alias: string,
-  params: Partial<AemAssetsParams> = {}
-): string {
-  const assetsEnabled = isAemAssetsEnabled();
-
-  if (!assetsEnabled) {
-    // No-op, doesn't do anything.
-    return assetUrl;
-  }
-
-  const assetsUrl = new URL(normalizeUrl(assetUrl));
-
-  if (!isAemAssetsUrl(assetsUrl)) {
-    // Not an AEM Assets URL, so no-op.
-    return assetUrl;
-  }
-
-  const base = assetsUrl.origin + assetsUrl.pathname;
-  return generateAemAssetsOptimizedUrl(base, alias, params);
-}
-
-/** Creates a slot that renders an AEM Assets image. */
-export function makeAemAssetsImageSlot(config: AemAssetsImageSlotConfig) {
-  return (ctx: RenderContext) => {
-    const { wrapper, alias, params, imageProps } = config;
-
-    if (!imageProps.src) {
-      throw new Error(
-        'An image source is required. Please provide a `src` or `imageProps.src`.'
-      );
-    }
-
-    const container = wrapper ?? document.createElement('div');
-    const imageSrc = generateAemAssetsOptimizedUrl(
-      imageProps.src,
-      alias,
-      params
-    );
-
-    const imageComponentParams: ResolveImageUrlOptions = {
-      width: params.width,
-      height: params.height,
-
-      // If this is not done, they will be applied by default.
-      // And they are not compatible with the AEM Assets API.
-      crop: undefined,
-      fit: undefined,
-      auto: undefined,
-    };
-
-    const imageComponentProps: ImageProps = {
-      ...imageProps,
-      width: params.width,
-      height: params.height,
-
-      src: imageSrc,
-      params: imageComponentParams,
-    };
-
-    UI.render(Image, imageComponentProps)(container);
-    ctx.replaceWith(container);
-  };
-}
-
-export function tryRenderAemAssetsImage(
-  ctx: RenderContext,
-  config: AemAssetsImageSlotConfig
-): void {
-  // Renders an equivalent of the default image.
-  function renderDefaultImage(): void {
-    const container = config.wrapper ?? document.createElement('div');
-    const { imageProps, params } = config;
-    const imageComponentProps: ImageProps = {
-      ...imageProps,
-      width: params.width,
-      height: params.height,
-    };
-
-    UI.render(Image, imageComponentProps)(container);
-    ctx.replaceWith(container);
-  }
-
-  const assetsEnabled = isAemAssetsEnabled();
-
-  if (!assetsEnabled) {
-    // No-op, render the default image.
-    renderDefaultImage();
-    return;
-  }
-
-  if (!config.imageProps.src) {
-    throw new Error(
-      'An image source is required. Please provide a `src` or `imageProps.src`.'
-    );
-  }
-
-  const assetsUrl = new URL(normalizeUrl(config.imageProps.src));
-
-  if (!isAemAssetsUrl(assetsUrl)) {
-    // Not an AEM Assets URL, so render the default image.
-    renderDefaultImage();
-    return;
-  }
-
-  makeAemAssetsImageSlot(config)(ctx);
-}