@adobe-commerce/elsie 1.6.0-alpha999 → 1.6.0-beta2

package/src/components/Table/Table.tsx

@@ -0,0 +1,253 @@
+/********************************************************************
+ *  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, Fragment } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
+import {
+  Icon,
+  Button,
+  Skeleton,
+  SkeletonRow,
+} from '@adobe-commerce/elsie/components';
+import { useText } from '@adobe-commerce/elsie/i18n';
+
+import '@adobe-commerce/elsie/components/Table/Table.css';
+
+type Sortable = 'asc' | 'desc' | true;
+
+type Column =
+  | { label: string; key: string; ariaLabel?: string; sortBy?: Sortable }
+  | {
+      label: VNode<HTMLAttributes<HTMLElement>>;
+      key: string;
+      ariaLabel: string;
+      sortBy?: Sortable;
+    };
+
+type RowData = {
+  [key: string]: VNode | string | number | undefined;
+  _rowDetails?: VNode | string; // Special property for expandable row content
+};
+
+export interface TableProps
+  extends Omit<HTMLAttributes<HTMLTableElement>, 'loading'> {
+  columns: Column[];
+  rowData: RowData[];
+  mobileLayout?: 'stacked' | 'none';
+  caption?: string;
+  expandedRows?: Set<number>;
+  loading?: boolean;
+  skeletonRowCount?: number;
+  onSortChange?: (columnKey: string, direction: Sortable) => void;
+}
+
+export const Table: FunctionComponent<TableProps> = ({
+  className,
+  children,
+  columns = [],
+  rowData = [],
+  mobileLayout = 'none',
+  caption,
+  expandedRows = new Set(),
+  loading = false,
+  skeletonRowCount = 10,
+  onSortChange,
+  ...props
+}) => {
+  const translations = useText({
+    sortedAscending: 'Dropin.Table.sortedAscending',
+    sortedDescending: 'Dropin.Table.sortedDescending',
+    sortBy: 'Dropin.Table.sortBy',
+  });
+
+  const handleSort = (column: Column) => {
+    if (!onSortChange) return;
+
+    // Determine next sort direction
+    let nextDirection: Sortable;
+    if (column.sortBy === true) {
+      nextDirection = 'asc';
+    } else if (column.sortBy === 'asc') {
+      nextDirection = 'desc';
+    } else {
+      nextDirection = true;
+    }
+
+    onSortChange(column.key, nextDirection);
+  };
+
+  const renderSortButton = (column: Column) => {
+    if (column.sortBy === undefined) return null;
+    const label = column.ariaLabel ?? (column.label as string);
+
+    let iconSource: string;
+    let ariaLabel: string;
+
+    if (column.sortBy === 'asc') {
+      iconSource = 'ChevronUp';
+      ariaLabel = translations.sortedAscending.replace('{label}', label);
+    } else if (column.sortBy === 'desc') {
+      iconSource = 'ChevronDown';
+      ariaLabel = translations.sortedDescending.replace('{label}', label);
+    } else {
+      // Show chevron down when sortable but not sorted
+      iconSource = 'ChevronDown';
+      ariaLabel = translations.sortBy.replace('{label}', label);
+    }
+
+    return (
+      <Button
+        variant="tertiary"
+        size="medium"
+        className="dropin-table__header__sort-button"
+        icon={<Icon source={iconSource} />}
+        aria-label={ariaLabel}
+        onClick={() => handleSort(column)}
+      />
+    );
+  };
+
+  const renderSkeletonRows = () => {
+    return Array.from({ length: skeletonRowCount }, (_, rowIndex) => (
+      <tr key={`skeleton-${rowIndex}`} className="dropin-table__body__row">
+        {columns.map((column) => (
+          <td
+            key={column.key}
+            className="dropin-table__body__cell"
+            data-label={column.ariaLabel ?? column.label}
+          >
+            <Skeleton>
+              <SkeletonRow variant="row" size="small" fullWidth />
+            </Skeleton>
+          </td>
+        ))}
+      </tr>
+    ));
+  };
+
+  const renderDataRows = () => {
+    return rowData.map((row, rowIndex) => {
+      const hasDetails = row._rowDetails !== undefined;
+      const isExpanded = expandedRows.has(rowIndex);
+
+      return (
+        <Fragment key={rowIndex}>
+          <tr className={classes([
+            'dropin-table__body__row',
+            ['dropin-table__body__row--expanded', isExpanded && hasDetails],
+          ])}>
+            {columns.map((column) => {
+              const cell = row[column.key];
+              const label = column.ariaLabel ?? column.label;
+
+              if (typeof cell === 'string' || typeof cell === 'number') {
+                return (
+                  <td
+                    key={column.key}
+                    className="dropin-table__body__cell"
+                    data-label={label}
+                  >
+                    {cell}
+                  </td>
+                );
+              }
+
+              return (
+                <td
+                  key={column.key}
+                  className="dropin-table__body__cell"
+                  data-label={label}
+                >
+                  <VComponent node={cell!} />
+                </td>
+              );
+            })}
+          </tr>
+          {hasDetails && isExpanded && (
+            <tr
+              key={`${rowIndex}-details`}
+              className="dropin-table__row-details dropin-table__row-details--expanded"
+              id={`row-${rowIndex}-details`}
+            >
+              <td
+                className="dropin-table__row-details__cell"
+                colSpan={columns.length}
+                role="region"
+                aria-labelledby={`row-${rowIndex}-details`}
+              >
+                {typeof row._rowDetails === 'string' ? (
+                  row._rowDetails
+                ) : (
+                  <VComponent node={row._rowDetails!} />
+                )}
+              </td>
+            </tr>
+          )}
+        </Fragment>
+      );
+    });
+  };
+
+  const getAriaSort = (
+    column: Column
+  ): 'none' | 'ascending' | 'descending' | 'other' | undefined => {
+    if (column.sortBy === true) return 'none';
+    if (column.sortBy === 'asc') return 'ascending';
+    if (column.sortBy === 'desc') return 'descending';
+    return undefined;
+  };
+
+  return (
+    <div
+      className={classes([
+        'dropin-table',
+        `dropin-table--mobile-layout-${mobileLayout}`,
+        className,
+      ])}
+    >
+      <table {...props} className="dropin-table__table">
+        {caption && (
+          <caption className="dropin-table__caption">{caption}</caption>
+        )}
+        <thead className="dropin-table__header">
+          <tr className="dropin-table__header__row">
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                className={classes([
+                  'dropin-table__header__cell',
+                  [
+                    'dropin-table__header__cell--sorted',
+                    column.sortBy === 'asc' || column.sortBy === 'desc',
+                  ],
+                  [
+                    'dropin-table__header__cell--sortable',
+                    column.sortBy !== undefined,
+                  ],
+                ])}
+                aria-sort={getAriaSort(column)}
+              >
+                {column.label}
+                {renderSortButton(column)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="dropin-table__body">
+          {loading
+            ? // Render skeleton rows when loading
+              renderSkeletonRows()
+            : // Render actual data when not loading
+              renderDataRows()}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/src/components/Table/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/Table/Table';
+export { Table as default } from '@adobe-commerce/elsie/components/Table/Table';

package/src/components/ToggleButton/ToggleButton.css

@@ -34,7 +34,19 @@
   border: var(--shape-border-width-1) solid var(--color-neutral-800);
 }
 
-.dropin-toggle-button:has(input:focus-visible) {
+/* Disabled */
+.dropin-toggle-button__disabled .dropin-toggle-button__actionButton {
+  cursor: default;
+  background-color: var(--color-neutral-300);
+  border: var(--shape-border-width-1) solid var(--color-neutral-500);
+}
+
+.dropin-toggle-button__disabled .dropin-toggle-button__content {
+  color: var(--color-neutral-500);
+  cursor: default;
+}
+
+.dropin-toggle-button:not(.dropin-toggle-button__disabled):has(input:focus-visible) {
   outline: 0 none;
   box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);
   -webkit-box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);

package/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -79,6 +79,15 @@ const meta: Meta<ToggleButtonProps> = {
         type: 'boolean',
       },
     },
+    disabled: {
+      description: 'Whether or not the Toggle button is disabled',
+      type: {
+        name: 'boolean',
+      },
+      control: {
+        type: 'boolean',
+      },
+    },
     onChange: {
       description: 'Function to be called when the Toggle button is clicked',
       type: {
@@ -103,11 +112,9 @@ export const ToggleButtonStory: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const toggleButton = document.querySelector('.dropin-toggle-button');
     const toggleButtonInput = await canvas.findByRole('radio');
-    const toggleButtonText = document.querySelector(
-      '.dropin-toggle-button__content'
-    );
+    const toggleButton = toggleButtonInput.closest('.dropin-toggle-button');
+    const toggleButtonText = toggleButton?.querySelector('.dropin-toggle-button__content');
     await expect(toggleButton).toHaveClass('dropin-toggle-button__selected');
     await expect(toggleButtonText).toHaveTextContent('Toggle Button label');
     await expect(toggleButtonInput).toBeChecked();
@@ -124,9 +131,9 @@ export const ToggleButtonNotSelected: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const toggleButton = document.querySelector('.dropin-toggle-button');
     const toggleButtonInput = await canvas.findByRole('radio');
-    const toggleButtonText = await canvas.findByText('Toggle Button label');
+    const toggleButton = toggleButtonInput.closest('.dropin-toggle-button');
+    const toggleButtonText = toggleButton?.querySelector('.dropin-toggle-button__content');
     await expect(toggleButton).not.toHaveClass(
       'dropin-toggle-button__selected'
     );

package/src/components/ToggleButton/ToggleButton.tsx

@@ -19,6 +19,7 @@ export interface ToggleButtonProps
   name: string;
   value: string;
   busy?: boolean;
+  disabled?: boolean;
   icon?:
     | VNode<HTMLAttributes<SVGSVGElement>>
     | VNode<HTMLAttributes<HTMLImageElement>>;
@@ -31,6 +32,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
   name,
   value,
   busy = false,
+  disabled = false,
   children,
   className,
   icon,
@@ -45,6 +47,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
         'dropin-toggle-button',
         className,
         ['dropin-toggle-button__selected', selected],
+        ['dropin-toggle-button__disabled', disabled],
       ])}
     >
       <label className="dropin-toggle-button__actionButton">
@@ -53,6 +56,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
           name={name}
           value={value}
           checked={selected}
+          disabled={disabled}
           onChange={() => onChange && onChange(value)}
           aria-label={name}
           busy={busy}

package/src/components/index.ts

@@ -2,9 +2,9 @@
  *  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. 
+ * 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/Skeleton';
@@ -49,3 +49,5 @@ export * from '@adobe-commerce/elsie/components/ContentGrid';
 export * from '@adobe-commerce/elsie/components/Pagination';
 export * from '@adobe-commerce/elsie/components/ProductItemCard';
 export * from '@adobe-commerce/elsie/components/InputFile';
+export * from '@adobe-commerce/elsie/components/Table';
+export * from '@adobe-commerce/elsie/components/MultiSelect';

package/src/docs/slots.mdx

@@ -19,6 +19,7 @@ The context is defined during implementation of a drop-in and can be used to pas
 - **prependChild**: A function to prepend a new HTML element to the slot's content.
 - **appendSibling**: A function to append a new HTML element after the slot's content.
 - **prependSibling**: A function to prepend a new HTML element **before** the slot's content.
+- **remove**: A function to remove the slot element from the DOM.
 - **getSlotElement**: A function to get a slot element.
 - **onChange**: A function to listen to changes in the slot's context.
 
@@ -150,6 +151,7 @@ provider.render(MyContainer, {
       // ctx.prependChild(element);
       // ctx.appendSibling(element);
       // ctx.prependSibling(element);
+      // ctx.remove();
 
       // to listen and react to changes in the slot's context (lifecycle)
       ctx.onChange((next) => {

package/src/i18n/en_US.json

@@ -141,6 +141,44 @@
     },
     "InputDate": {
       "picker": "Select a date"
+    },
+    "Table": {
+      "sortedAscending": "Sort {label} ascending",
+      "sortedDescending": "Sort {label} descending",
+      "sortBy": "Sort by {label}"
+    },
+    "MultiSelect": {
+      "selectAll": "Select All",
+      "deselectAll": "Deselect All",
+      "placeholder": "Select options",
+      "noResultsText": "No options available",
+      "ariaLabel":{
+        "removed": "removed",
+        "added": "added",
+        "itemsSelected": "items selected",
+        "itemsAdded": "items added",
+        "itemsRemoved": "items removed",
+        "selectedTotal": "selected total",
+        "noResultsFor": "No results found for",
+        "optionsAvailable": "options available",
+        "dropdownExpanded": "Dropdown expanded",
+        "useArrowKeys": "Use arrow keys to navigate",
+        "removeFromSelection": "Remove",
+        "fromSelection": "from selection",
+        "selectedItem": "Selected item:",
+        "inField": " in {floatingLabel}",
+        "selectedItems": "Selected items",
+        "scrollableOptionsList": "Scrollable options list",
+        "selectOptions": "Select options",
+        "itemAction": "{label} {action}. {count} items selected.",
+        "bulkAdded": "{count} items added. {total} items selected total.",
+        "bulkRemoved": "{count} items removed. {total} items selected total.",
+        "dropdownExpandedWithOptions": "Dropdown expanded. {count} option{s} available. Use arrow keys to navigate.",
+        "selectedItemInField": "Selected item: {label} in {field}",
+        "removeFromSelectionWithText": "Remove {label} from selection. {text}",
+        "itemsSelectedDescription": "{count} item{s} selected: {labels}",
+        "noItemsSelected": "No items selected"
+      }
     }
   }
 }

package/src/icons/Business.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path vector-effect="non-scaling-stroke" d="M14 3.25C14.9665 3.25 15.75 4.0335 15.75 5V6C15.75 6.08497 15.7422 6.16827 15.7305 6.25H21C21.9665 6.25 22.75 7.0335 22.75 8V10.6807C22.7498 11.3681 22.3487 11.9754 21.75 12.2598V19C21.75 19.9665 20.9665 20.75 20 20.75H4C3.0335 20.75 2.25 19.9665 2.25 19V12.2598C1.65126 11.9754 1.25018 11.3681 1.25 10.6807V8C1.25 7.0335 2.0335 6.25 3 6.25H8.26953C8.25783 6.16827 8.25 6.08497 8.25 6V5C8.25 4.0335 9.0335 3.25 10 3.25H14ZM14.75 13.7148V14C14.75 14.9665 13.9665 15.75 13 15.75H11C10.0335 15.75 9.25 14.9665 9.25 14V13.7148L3.75 12.6143V19C3.75 19.1381 3.86193 19.25 4 19.25H20C20.1381 19.25 20.25 19.1381 20.25 19V12.6143L14.75 13.7148ZM11 12.75C10.8619 12.75 10.75 12.8619 10.75 13V14C10.75 14.1381 10.8619 14.25 11 14.25H13C13.1381 14.25 13.25 14.1381 13.25 14V13C13.25 12.8619 13.1381 12.75 13 12.75H11ZM3 7.75C2.86193 7.75 2.75 7.86193 2.75 8V10.6807C2.75022 10.7996 2.83447 10.9024 2.95117 10.9258L9.43262 12.2207C9.71926 11.6453 10.3135 11.25 11 11.25H13C13.6862 11.25 14.2786 11.6457 14.5654 12.2207L21.0488 10.9258C21.1655 10.9024 21.2498 10.7996 21.25 10.6807V8C21.25 7.86193 21.1381 7.75 21 7.75H3ZM10 4.75C9.86193 4.75 9.75 4.86193 9.75 5V6C9.75 6.13807 9.86193 6.25 10 6.25H14C14.1381 6.25 14.25 6.13807 14.25 6V5C14.25 4.86193 14.1381 4.75 14 4.75H10Z" fill="currentColor" />
+</svg>

package/src/icons/List.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path vector-effect="non-scaling-stroke" d="M16.8569 2C18.5138 2 19.8569 3.34315 19.8569 5V19C19.8569 20.6569 18.5138 22 16.8569 22H7.14307L6.98877 21.9961C5.45484 21.9183 4.22469 20.6883 4.14697 19.1543L4.14307 19V5C4.14307 3.39498 5.40374 2.08434 6.98877 2.00391L7.14307 2H16.8569ZM7.14307 3.5C6.31475 3.50013 5.64307 4.17165 5.64307 5V19C5.64307 19.8283 6.31475 20.4999 7.14307 20.5H16.8569C17.6854 20.5 18.3569 19.8284 18.3569 19V5C18.3569 4.17157 17.6854 3.5 16.8569 3.5H7.14307ZM7.71436 15.5713C8.10871 15.5713 8.42897 15.8909 8.4292 16.2852C8.4292 16.6796 8.10884 17 7.71436 17C7.32006 16.9998 7.00049 16.6795 7.00049 16.2852C7.00071 15.891 7.3202 15.5715 7.71436 15.5713ZM16.2866 17H9.85791V15.5H16.2866V17ZM16.2866 12.7148H9.85791V11.2148H16.2866V12.7148ZM7.71436 11.2861C8.10884 11.2861 8.4292 11.6055 8.4292 12C8.42916 12.3945 8.10882 12.7139 7.71436 12.7139C7.32008 12.7136 7.00053 12.3943 7.00049 12C7.00049 11.6057 7.32006 11.2864 7.71436 11.2861ZM7.71436 7C8.10871 7 8.42897 7.31957 8.4292 7.71387C8.4292 8.10836 8.10884 8.42871 7.71436 8.42871C7.32006 8.42848 7.00049 8.10822 7.00049 7.71387C7.00071 7.31971 7.3202 7.00023 7.71436 7ZM16.2866 8.42871H9.85791V6.92871H16.2866V8.42871Z" fill="currentColor"/>
+</svg>

package/src/icons/Quote.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path vector-effect="non-scaling-stroke" d="M16.8569 2C18.5138 2 19.8569 3.34315 19.8569 5V19C19.8569 20.6569 18.5138 22 16.8569 22H7.14307L6.98877 21.9961C5.45473 21.9184 4.22469 20.6883 4.14697 19.1543L4.14307 19V5C4.14307 3.39489 5.40362 2.08421 6.98877 2.00391L7.14307 2H16.8569ZM7.14307 3.5C6.31464 3.5 5.64307 4.17157 5.64307 5V19C5.64307 19.8284 6.31464 20.5 7.14307 20.5H16.8569C17.6854 20.5 18.3569 19.8284 18.3569 19V5C18.3569 4.17157 17.6854 3.5 16.8569 3.5H7.14307ZM7.71436 17C8.10871 17 8.42897 17.3196 8.4292 17.7139C8.4292 18.1084 8.10884 18.4287 7.71436 18.4287C7.31993 18.4286 7.00049 18.1083 7.00049 17.7139C7.00071 17.3196 7.32007 17.0001 7.71436 17ZM16.2856 18.4287H9.85693V16.9287H16.2856V18.4287ZM7.71436 14.1426C8.10884 14.1426 8.4292 14.4629 8.4292 14.8574C8.42905 15.2518 8.10875 15.5713 7.71436 15.5713C7.32002 15.5712 7.00064 15.2517 7.00049 14.8574C7.00049 14.463 7.31993 14.1427 7.71436 14.1426ZM16.2856 15.5713H9.85693V14.0713H16.2856V15.5713ZM12.7856 5.6748C13.5717 5.96006 14.1792 6.66301 14.1792 7.57227H12.6792C12.6792 7.34883 12.4515 7.0362 12.0005 7.03613C11.5756 7.03613 11.3506 7.31331 11.3257 7.53223C11.333 7.54311 11.3434 7.56003 11.3608 7.58008C11.4311 7.66062 11.5467 7.75541 11.6958 7.85254C11.84 7.94645 11.9892 8.02578 12.105 8.08203C12.1617 8.10958 12.2084 8.13079 12.2397 8.14453C12.2553 8.15136 12.2679 8.15625 12.2749 8.15918C12.2781 8.16054 12.2807 8.16169 12.2817 8.16211L12.2837 8.16309C12.2851 8.16366 12.2875 8.16419 12.2896 8.16504C12.2938 8.16681 12.2993 8.16999 12.3062 8.17285C12.32 8.17866 12.3396 8.1861 12.3628 8.19629C12.4095 8.21678 12.4744 8.24686 12.5513 8.28418C12.7031 8.35794 12.911 8.46704 13.1235 8.60547C13.3312 8.74079 13.5734 8.92349 13.771 9.15039C13.963 9.37099 14.1792 9.71019 14.1792 10.1436C14.1789 11.0523 13.5713 11.753 12.7856 12.0381V12.7148H11.2856V12.0605C10.4664 11.7925 9.8221 11.0791 9.82178 10.1436H11.3218C11.3223 10.367 11.5499 10.6787 12.0005 10.6787C12.4257 10.6786 12.6498 10.4006 12.6743 10.1816C12.667 10.1709 12.657 10.1542 12.6401 10.1348C12.5699 10.0542 12.4543 9.95949 12.3052 9.8623C12.1609 9.76835 12.0118 9.68909 11.896 9.63281C11.839 9.60514 11.7916 9.58407 11.7603 9.57031L11.7192 9.55273H11.7183L11.7163 9.55176C11.715 9.55122 11.7133 9.55056 11.7114 9.5498C11.7071 9.54803 11.7008 9.5449 11.6938 9.54199C11.6801 9.53621 11.6611 9.5286 11.6382 9.51855C11.5915 9.49808 11.5265 9.46797 11.4497 9.43066C11.2978 9.35687 11.0892 9.24796 10.8765 9.10938C10.6688 8.97407 10.4266 8.7913 10.229 8.56445C10.0371 8.34398 9.82204 8.00515 9.82178 7.57227C9.82178 6.63623 10.466 5.92047 11.2856 5.65234L11.2866 5H12.7866L12.7856 5.6748Z" fill="currentColor"/>
+</svg>

package/src/icons/Structure.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect vector-effect="non-scaling-stroke" x="5" y="5.28076" width="14" height="1.5" rx="0.75" fill="currentColor"/>
+    <rect vector-effect="non-scaling-stroke" x="8.27539" y="11.2192" width="14" height="1.5" rx="0.75" fill="currentColor"/>
+    <rect vector-effect="non-scaling-stroke" x="8.44922" y="17.2192" width="14" height="1.5" rx="0.75" fill="currentColor"/>
+    <circle vector-effect="non-scaling-stroke" cx="2.30078" cy="6.03076" r="0.75" fill="currentColor"/>
+    <circle vector-effect="non-scaling-stroke" cx="5.67578" cy="11.9692" r="0.75" fill="currentColor"/>
+    <circle vector-effect="non-scaling-stroke" cx="5.67578" cy="17.9692" r="0.75" fill="currentColor"/>
+</svg>

package/src/icons/Team.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path vector-effect="non-scaling-stroke" d="M10.6047 10.011L10.4765 10.2749C10.4093 10.4774 10.2566 10.6307 10.0551 10.7044C9.43878 10.926 8.91201 11.1763 8.49707 11.4375M13.4262 10.2442L13.2674 10.0908C13.3957 10.3608 13.6094 10.5817 13.872 10.7228C14.3816 10.8972 14.9429 11.145 15.4124 11.4375M11.8262 10.2994C11.246 10.2994 10.7085 10.011 10.3849 9.52631L10.3665 9.49563L10.3482 9.45882C9.5848 8.29306 9.21837 6.90642 9.30998 5.50751C9.35273 4.12087 10.4826 3.01033 11.8628 3.00419H11.9483C13.3347 2.92443 14.5195 3.99202 14.5989 5.37866C14.5989 5.42775 14.5989 5.4707 14.5989 5.51978C14.6844 6.89415 14.3302 8.26238 13.5851 9.41587L13.5362 9.4895C13.2003 9.98648 12.6384 10.281 12.046 10.2871H11.9483C11.9056 10.2871 11.8628 10.2933 11.8201 10.2933L11.8262 10.2994Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+    <path vector-effect="non-scaling-stroke" d="M1.125 20.7002C1.14332 20.0069 1.21661 19.3136 1.33875 18.6325C1.47312 18.0128 2.43807 17.3134 3.92214 16.7796C4.12368 16.7059 4.27636 16.5525 4.34354 16.3501L4.47179 16.0862M7.29326 16.3194L7.13447 16.166C7.26272 16.436 7.47648 16.6569 7.73909 16.798C8.83229 17.1722 10.1637 17.884 10.3164 18.6509C10.4446 19.3258 10.5057 20.013 10.4996 20.6941M5.69325 16.3746C5.11306 16.3746 4.57562 16.0862 4.25193 15.6015L4.23361 15.5708L4.21529 15.534C3.45188 14.3683 3.08544 12.9816 3.17705 11.5827C3.2198 10.1961 4.34965 9.08553 5.72989 9.07939H5.8154C7.20175 8.99963 8.38656 10.0672 8.46596 11.4539C8.46596 11.5029 8.46596 11.5459 8.46596 11.595C8.55146 12.9693 8.19724 14.3376 7.45215 15.4911L7.40329 15.5647C7.06739 16.0617 6.50552 16.3562 5.91311 16.3623H5.8154C5.77264 16.3623 5.72989 16.3685 5.68714 16.3685L5.69325 16.3746Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+    <path vector-effect="non-scaling-stroke" d="M13.5 20.7002C13.5183 20.0069 13.5916 19.3136 13.7138 18.6325C13.8481 18.0128 14.8131 17.3134 16.2971 16.7796C16.4987 16.7059 16.6514 16.5525 16.7185 16.3501L16.8468 16.0862M19.6683 16.3194L19.5095 16.166C19.6377 16.436 19.8515 16.6569 20.1141 16.798C21.2073 17.1722 22.5387 17.884 22.6914 18.6509C22.8196 19.3258 22.8807 20.013 22.8746 20.6941M18.0682 16.3746C17.4881 16.3746 16.9506 16.0862 16.6269 15.6015L16.6086 15.5708L16.5903 15.534C15.8269 14.3683 15.4604 12.9816 15.552 11.5827C15.5948 10.1961 16.7246 9.08553 18.1049 9.07939H18.1904C19.5767 8.99963 20.7616 10.0672 20.841 11.4539C20.841 11.5029 20.841 11.5459 20.841 11.595C20.9265 12.9693 20.5722 14.3376 19.8271 15.4911L19.7783 15.5647C19.4424 16.0617 18.8805 16.3562 18.2881 16.3623H18.1904C18.1476 16.3623 18.1049 16.3685 18.0621 16.3685L18.0682 16.3746Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

package/src/icons/index.ts

@@ -1,43 +1,48 @@
 export { default as Add } from './Add.svg';
+export { default as AddressBook } from './AddressBook.svg';
 export { default as Bulk } from './Bulk.svg';
 export { default as Burger } from './Burger.svg';
+export { default as Business } from './Business.svg';
+export { default as Card } from './Card.svg';
 export { default as Cart } from './Cart.svg';
 export { default as Check } from './Check.svg';
+export { default as CheckWithCircle } from './CheckWithCircle.svg';
 export { default as ChevronDown } from './ChevronDown.svg';
-export { default as ChevronUp } from './ChevronUp.svg';
 export { default as ChevronRight } from './ChevronRight.svg';
+export { default as ChevronUp } from './ChevronUp.svg';
 export { default as Close } from './Close.svg';
+export { default as Coupon } from './Coupon.svg';
+export { default as Date } from './Date.svg';
+export { default as Delivery } from './Delivery.svg';
+export { default as Edit } from './Edit.svg';
+export { default as EmptyBox } from './EmptyBox.svg';
+export { default as Eye } from './Eye.svg';
+export { default as EyeClose } from './EyeClose.svg';
+export { default as Gift } from './Gift.svg';
+export { default as GiftCard } from './GiftCard.svg';
 export { default as Heart } from './Heart.svg';
+export { default as HeartFilled } from './HeartFilled.svg';
+export { default as InfoFilled } from './InfoFilled.svg';
+export { default as List } from './List.svg';
+export { default as Locker } from './Locker.svg';
 export { default as Minus } from './Minus.svg';
+export { default as Order } from './Order.svg';
+export { default as OrderError } from './OrderError.svg';
+export { default as OrderSuccess } from './OrderSuccess.svg';
+export { default as PaymentError } from './PaymentError.svg';
 export { default as Placeholder } from './Placeholder.svg';
 export { default as PlaceholderFilled } from './PlaceholderFilled.svg';
+export { default as Quote } from './Quote.svg';
 export { default as Search } from './Search.svg';
 export { default as SearchFilled } from './SearchFilled.svg';
 export { default as Sort } from './Sort.svg';
 export { default as Star } from './Star.svg';
-export { default as View } from './View.svg';
+export { default as Structure } from './Structure.svg';
+export { default as Team } from './Team.svg';
+export { default as Trash } from './Trash.svg';
 export { default as User } from './User.svg';
-export { default as Warning } from './Warning.svg';
-export { default as Locker } from './Locker.svg';
+export { default as View } from './View.svg';
 export { default as Wallet } from './Wallet.svg';
-export { default as Card } from './Card.svg';
-export { default as Order } from './Order.svg';
-export { default as Delivery } from './Delivery.svg';
-export { default as OrderError } from './OrderError.svg';
-export { default as OrderSuccess } from './OrderSuccess.svg';
-export { default as PaymentError } from './PaymentError.svg';
-export { default as CheckWithCircle } from './CheckWithCircle.svg';
-export { default as WarningWithCircle } from './WarningWithCircle.svg';
+export { default as Warning } from './Warning.svg';
 export { default as WarningFilled } from './WarningFilled.svg';
-export { default as InfoFilled } from './InfoFilled.svg';
-export { default as HeartFilled } from './HeartFilled.svg';
-export { default as Trash } from './Trash.svg';
-export { default as Eye } from './Eye.svg';
-export { default as EyeClose } from './EyeClose.svg';
-export { default as Date } from './Date.svg';
-export { default as AddressBook } from './AddressBook.svg';
-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';
+export { default as WarningWithCircle } from './WarningWithCircle.svg';

package/src/lib/aem/configs.ts

@@ -23,6 +23,7 @@ interface Config {
 
 // Private state
 let config: Config | null = null;
+let options: { match?: (key: string) => boolean } | null = null;
 let rootPath: string | null = null;
 let rootConfig: ConfigRoot | null = null;
 
@@ -31,6 +32,7 @@ let rootConfig: ConfigRoot | null = null;
  */
 function resetConfig() {
   config = null;
+  options = null;
   rootPath = null;
   rootConfig = null;
 }
@@ -40,7 +42,7 @@ function resetConfig() {
  * @param {Object} [configObj=config] - The config object.
  * @returns {string} - The root path.
  */
-function getRootPath(configObj: Config | null = config): string {
+function getRootPath(configObj: Config | null = config, optionsObj: { match?: (key: string) => boolean } | null = options): string {
   if (!configObj) {
     console.warn('No config found. Please call initializeConfig() first.');
     return '/';
@@ -56,7 +58,7 @@ function getRootPath(configObj: Config | null = config): string {
     .find(
       (key) =>
         window.location.pathname === key ||
-        window.location.pathname.startsWith(key)
+        (optionsObj?.match?.(key) ?? window.location.pathname.startsWith(key))
     );
 
   return value ?? '/';
@@ -126,11 +128,15 @@ function applyConfigOverrides(
 
 /**
  * Initializes the configuration system.
+ * @param {Object} configObj - The config object.
+ * @param {Object} [options] - The options object.
+ * @param {Function} [options.match] - The function to match the path to the config.
  * @returns {Object} The initialized root configuration
  */
-function initializeConfig(configObj: Config): ConfigRoot {
+function initializeConfig(configObj: Config, optionsObj?: { match?: (key: string) => boolean }): ConfigRoot {
   config = configObj;
-  rootPath = getRootPath(config);
+  options = optionsObj ?? null;
+  rootPath = getRootPath(config, { match: optionsObj?.match });
   rootConfig = applyConfigOverrides(config, rootPath);
   return rootConfig;
 }