@adobe-commerce/elsie 1.0.0-alpha4 → 1.0.0-beta1

package/src/components/IllustratedMessage/IllustratedMessage.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import {

package/src/components/IllustratedMessage/IllustratedMessage.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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 { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes, JSX } from 'preact/compat';
 import { classes, VComponent } from '@adobe-commerce/elsie/lib';

package/src/components/IllustratedMessage/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/IllustratedMessage/IllustratedMessage';
 export { IllustratedMessage as default } from '@adobe-commerce/elsie/components/IllustratedMessage/IllustratedMessage';

package/src/components/Image/Image.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-image {

package/src/components/Image/Image.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import { Image, ImageProps } from '@adobe-commerce/elsie/components/Image';

package/src/components/Image/Image.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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 { FunctionComponent } from 'preact';
 import { HTMLAttributes, useMemo, useState } from 'preact/compat';
 import {

package/src/components/Image/index.ts

@@ -1 +1,10 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/Image/Image';

package/src/components/ImageSwatch/ImageSwatch.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 /* Hide default the radio/checkbox button */

package/src/components/ImageSwatch/ImageSwatch.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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.
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import { expect, within } from '@storybook/test';
@@ -250,3 +259,52 @@ export const MultiImageSwatch: Story = {
     </div>
   ),
 };
+
+export const CustomImageNodeSwatch: Story = {
+  args: {
+    name: 'customImageSwatch',
+    id: 'customImageSwatch1',
+    label: 'Custom Image Node Example',
+    groupAriaLabel: 'Custom Image Swatches',
+    value: 'customImageNode',
+    src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`, // fallback, not used with imageNode
+    alt: 'Custom Image Node',
+    selected: false,
+    disabled: false,
+    outOfStock: false,
+    onValue: action('onValue'),
+    imageNode: (
+      <div style="position: relative; width: 100%; height: 100%;">
+        <img
+          src={`https://picsum.photos/${defaultWidth}/${defaultHeight}?grayscale`}
+          alt="Custom grayscale image"
+          style="width: 100%; height: 100%; object-fit: cover;"
+        />
+        <div style="position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.7); padding: 4px 8px; border-radius: 0 0 8px 0;">
+          <span style="font-size: 12px; font-weight: bold; color: #333;">
+            Custom
+          </span>
+        </div>
+      </div>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const imageSwatch = await canvas.findByRole('radio');
+    const customImageContainer = canvasElement.querySelector(
+      'div[style*="position: relative"]'
+    );
+    const customImage = canvasElement.querySelector(
+      'img[alt="Custom grayscale image"]'
+    );
+    const customLabel = canvasElement.querySelector(
+      'span[style*="font-weight: bold"]'
+    );
+
+    expect(imageSwatch).toBeInTheDocument();
+    expect(customImageContainer).toBeInTheDocument();
+    expect(customImage).toBeInTheDocument();
+    expect(customLabel).toBeInTheDocument();
+    expect(customLabel?.textContent).toBe('Custom');
+  },
+};

package/src/components/ImageSwatch/ImageSwatch.tsx

@@ -1,10 +1,18 @@
-import { FunctionComponent } from 'preact';
+/********************************************************************
+ *  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 { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes, useCallback } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/ImageSwatch/ImageSwatch.css';
 import { Image } from '@adobe-commerce/elsie/components/Image';
 import { useText } from '@adobe-commerce/elsie/i18n';
-
 export interface ImageSwatchProps
   extends Omit<HTMLAttributes<HTMLInputElement>, 'label'> {
   name?: string;
@@ -18,6 +26,7 @@ export interface ImageSwatchProps
   selected?: boolean;
   outOfStock?: boolean;
   multi?: boolean;
+  imageNode?: VNode;
   onValue?: (value: any) => void;
   onUpdateError?: (error: Error) => void;
 }
@@ -35,6 +44,7 @@ export const ImageSwatch: FunctionComponent<ImageSwatchProps> = ({
   selected = false,
   outOfStock = false,
   multi = false,
+  imageNode,
   onValue,
   onUpdateError,
   ...props
@@ -97,14 +107,16 @@ export const ImageSwatch: FunctionComponent<ImageSwatchProps> = ({
           className,
         ])}
       >
-        <Image
-          src={src}
-          className={classes(['dropin-image-swatch__content'])}
-          params={{ width: 100, fit: 'bounds', crop: true }}
-          alt={alt}
-          loading={'lazy'}
-          onError={(e: any) => (e.target.style.display = 'none')}
-        />
+        {imageNode || (
+          <Image
+            src={src}
+            className={classes(['dropin-image-swatch__content'])}
+            params={{ width: 100, fit: 'bounds', crop: true }}
+            alt={alt}
+            loading={'lazy'}
+            onError={(e: any) => (e.target.style.display = 'none')}
+          />
+        )}
       </span>
     </label>
   );

package/src/components/ImageSwatch/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/ImageSwatch/ImageSwatch';
 export { ImageSwatch as default } from '@adobe-commerce/elsie/components/ImageSwatch/ImageSwatch';

package/src/components/InLineAlert/InLineAlert.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-in-line-alert {

package/src/components/InLineAlert/InLineAlert.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import {

package/src/components/InLineAlert/InLineAlert.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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 { Button, Icon } from '@adobe-commerce/elsie/components';
 import { useText } from '@adobe-commerce/elsie/i18n';
 import { Close } from '@adobe-commerce/elsie/icons';

package/src/components/InLineAlert/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/InLineAlert/InLineAlert';
 export { InLineAlert as default } from '@adobe-commerce/elsie/components/InLineAlert/InLineAlert';

package/src/components/Incrementer/Incrementer.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 /* Content */

package/src/components/Incrementer/Incrementer.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import {

package/src/components/Incrementer/Incrementer.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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 { FunctionComponent } from 'preact';
 import { useState, useCallback } from 'preact/hooks';
 import { HTMLAttributes } from 'preact/compat';

package/src/components/Incrementer/index.ts

@@ -1 +1,10 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/Incrementer/Incrementer';

package/src/components/Input/Input.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 /* Input */

package/src/components/Input/Input.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import { action } from '@storybook/addon-actions';

package/src/components/Input/Input.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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 { Icon } from '@adobe-commerce/elsie/components/Icon';
 import '@adobe-commerce/elsie/components/Input/Input.css';
 import { CheckWithCircle, WarningWithCircle } from '@adobe-commerce/elsie/icons';

package/src/components/Input/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/Input/Input';
 export { Input as default } from '@adobe-commerce/elsie/components/Input';

package/src/components/InputDate/InputDate.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 .dropin-input-date {
   position: relative;
   width: 100%;

package/src/components/InputDate/InputDate.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import { InputDate, InputDateProps } from '@adobe-commerce/elsie/components/InputDate';

package/src/components/InputDate/InputDate.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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 { FunctionComponent } from 'preact';
 import { useRef, useState } from 'preact/hooks';
 import { classes, isIOSMobileDevice } from '@adobe-commerce/elsie/lib';

package/src/components/InputDate/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/InputDate/InputDate';
 export { InputDate as default } from '@adobe-commerce/elsie/components/InputDate/InputDate';

package/src/components/InputPassword/InputPassword.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 .dropin-input-password {
   position: relative;
 }

package/src/components/InputPassword/InputPassword.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import {

package/src/components/InputPassword/InputPassword.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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 { FunctionComponent } from 'preact';
 import { useCallback, useState } from 'preact/hooks';
 import { classes } from '@adobe-commerce/elsie/lib';

package/src/components/InputPassword/PasswordStatusIndicator/PasswordStatusIndicator.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 .dropin-password-status-indicator__item {
   display: grid;
   grid-template-columns: 20px auto;

package/src/components/InputPassword/PasswordStatusIndicator/PasswordStatusIndicator.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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 { FunctionComponent, JSX } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';

package/src/components/InputPassword/PasswordStatusIndicator/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/InputPassword/PasswordStatusIndicator/PasswordStatusIndicator';
 export { PasswordStatusIndicator as default } from '@adobe-commerce/elsie/components/InputPassword/PasswordStatusIndicator/PasswordStatusIndicator';

package/src/components/InputPassword/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/InputPassword/InputPassword';
 export { InputPassword as default } from '@adobe-commerce/elsie/components/InputPassword/InputPassword';

package/src/components/Modal/Modal.css

@@ -1,16 +1,11 @@
-/*
-ADOBE CONFIDENTIAL
-Copyright 2023 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.
-*/
+/********************************************************************
+ *  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. 
+ *******************************************************************/
 
 /* https://cssguidelin.es/#bem-like-naming */
 

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

@@ -1,16 +1,11 @@
-/*
-ADOBE CONFIDENTIAL
-Copyright 2023 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.
-*/
+/********************************************************************
+ *  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 { Modal as component, ModalProps } from './Modal';

package/src/components/Modal/Modal.tsx

@@ -1,16 +1,11 @@
-/*
-ADOBE CONFIDENTIAL
-Copyright 2023 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.
-*/
+/********************************************************************
+ *  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 { useText } from '@adobe-commerce/elsie/i18n';
 import { classes } from '@adobe-commerce/elsie/lib';