@adobe-commerce/elsie 1.6.0-alpha7 → 1.6.0-alpha77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.6.0-alpha7",
+  "version": "1.6.0-alpha77",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@adobe-commerce/event-bus": "~1.0.1",
-    "@adobe-commerce/fetch-graphql": "~1.2.0",
-    "@adobe-commerce/recaptcha": "~1.0.2",
+    "@adobe-commerce/fetch-graphql": "1.2.3-beta2",
+    "@adobe-commerce/recaptcha": "1.0.3-beta2",
     "@adobe-commerce/storefront-design": "~1.0.0",
     "@dropins/build-tools": "~1.0.1",
     "preact": "~10.22.1",
@@ -58,7 +58,6 @@
     "@storybook/preact": "^8.2.3",
     "@storybook/preact-vite": "^8.2.3",
     "@storybook/preact-webpack5": "^8.2.3",
-    "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/test": "^8.2.3",
     "@storybook/test-runner": "^0.19.1",
     "@storybook/theming": "^8.2.3",

package/src/components/Icon/Icon.css

@@ -2,25 +2,29 @@
  *  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.
  *******************************************************************/
 
 /* https://cssguidelin.es/#bem-like-naming */
 
-.dropin-icon--shape-stroke-1 {
+svg.dropin-icon--shape-stroke-1,
+svg.dropin-icon--shape-stroke-1 * {
   stroke-width: var(--shape-icon-stroke-1);
 }
 
-.dropin-icon--shape-stroke-2 {
+svg.dropin-icon--shape-stroke-2,
+svg.dropin-icon--shape-stroke-2 * {
   stroke-width: var(--shape-icon-stroke-2);
 }
 
-.dropin-icon--shape-stroke-3 {
+svg.dropin-icon--shape-stroke-3,
+svg.dropin-icon--shape-stroke-3 * {
   stroke-width: var(--shape-icon-stroke-3);
 }
 
-.dropin-icon--shape-stroke-4 {
+svg.dropin-icon--shape-stroke-4,
+svg.dropin-icon--shape-stroke-4 * {
   stroke-width: var(--shape-icon-stroke-4);
 }

package/src/components/Icon/Icon.tsx

@@ -18,52 +18,58 @@ export type IconType = keyof typeof import('@adobe-commerce/elsie/icons');
 
 const lazyIcons = {
   Add: lazy(() => import('@adobe-commerce/elsie/icons/Add.svg')),
+  AddressBook: lazy(() => import('@adobe-commerce/elsie/icons/AddressBook.svg')),
   Bulk: lazy(() => import('@adobe-commerce/elsie/icons/Bulk.svg')),
   Burger: lazy(() => import('@adobe-commerce/elsie/icons/Burger.svg')),
+  Business: lazy(() => import('@adobe-commerce/elsie/icons/Business.svg')),
+  Card: lazy(() => import('@adobe-commerce/elsie/icons/Card.svg')),
   Cart: lazy(() => import('@adobe-commerce/elsie/icons/Cart.svg')),
   Check: lazy(() => import('@adobe-commerce/elsie/icons/Check.svg')),
+  CheckWithCircle: lazy(() => import('@adobe-commerce/elsie/icons/CheckWithCircle.svg')),
   ChevronDown: lazy(() => import('@adobe-commerce/elsie/icons/ChevronDown.svg')),
-  ChevronUp: lazy(() => import('@adobe-commerce/elsie/icons/ChevronUp.svg')),
   ChevronRight: lazy(() => import('@adobe-commerce/elsie/icons/ChevronRight.svg')),
+  ChevronUp: lazy(() => import('@adobe-commerce/elsie/icons/ChevronUp.svg')),
   Close: lazy(() => import('@adobe-commerce/elsie/icons/Close.svg')),
+  Coupon: lazy(() => import('@adobe-commerce/elsie/icons/Coupon.svg')),
+  Date: lazy(() => import('@adobe-commerce/elsie/icons/Date.svg')),
+  Delivery: lazy(() => import('@adobe-commerce/elsie/icons/Delivery.svg')),
+  Edit: lazy(() => import('@adobe-commerce/elsie/icons/Edit.svg')),
+  EmptyBox: lazy(() => import('@adobe-commerce/elsie/icons/EmptyBox.svg')),
+  Eye: lazy(() => import('@adobe-commerce/elsie/icons/Eye.svg')),
+  EyeClose: lazy(() => import('@adobe-commerce/elsie/icons/EyeClose.svg')),
+  Gift: lazy(() => import('@adobe-commerce/elsie/icons/Gift.svg')),
+  GiftCard: lazy(() => import('@adobe-commerce/elsie/icons/GiftCard.svg')),
   Heart: lazy(() => import('@adobe-commerce/elsie/icons/Heart.svg')),
+  HeartFilled: lazy(() => import('@adobe-commerce/elsie/icons/HeartFilled.svg')),
+  InfoFilled: lazy(() => import('@adobe-commerce/elsie/icons/InfoFilled.svg')),
+  List: lazy(() => import('@adobe-commerce/elsie/icons/List.svg')),
+  Locker: lazy(() => import('@adobe-commerce/elsie/icons/Locker.svg')),
   Minus: lazy(() => import('@adobe-commerce/elsie/icons/Minus.svg')),
+  Order: lazy(() => import('@adobe-commerce/elsie/icons/Order.svg')),
+  OrderError: lazy(() => import('@adobe-commerce/elsie/icons/OrderError.svg')),
+  OrderSuccess: lazy(() => import('@adobe-commerce/elsie/icons/OrderSuccess.svg')),
+  PaymentError: lazy(() => import('@adobe-commerce/elsie/icons/PaymentError.svg')),
   Placeholder: lazy(() => import('@adobe-commerce/elsie/icons/Placeholder.svg')),
   PlaceholderFilled: lazy(
     () => import('@adobe-commerce/elsie/icons/PlaceholderFilled.svg')
   ),
+  Purchase: lazy(() => import('@adobe-commerce/elsie/icons/Purchase.svg')),
+  Quote: lazy(() => import('@adobe-commerce/elsie/icons/Quote.svg')),
   Search: lazy(() => import('@adobe-commerce/elsie/icons/Search.svg')),
   SearchFilled: lazy(() => import('@adobe-commerce/elsie/icons/SearchFilled.svg')),
   Sort: lazy(() => import('@adobe-commerce/elsie/icons/Sort.svg')),
   Star: lazy(() => import('@adobe-commerce/elsie/icons/Star.svg')),
-  View: lazy(() => import('@adobe-commerce/elsie/icons/View.svg')),
+  Structure: lazy(() => import('@adobe-commerce/elsie/icons/Structure.svg')),
+  Team: lazy(() => import('@adobe-commerce/elsie/icons/Team.svg')),
+  Trash: lazy(() => import('@adobe-commerce/elsie/icons/Trash.svg')),
   User: lazy(() => import('@adobe-commerce/elsie/icons/User.svg')),
-  Warning: lazy(() => import('@adobe-commerce/elsie/icons/Warning.svg')),
-  Locker: lazy(() => import('@adobe-commerce/elsie/icons/Locker.svg')),
+  View: lazy(() => import('@adobe-commerce/elsie/icons/View.svg')),
   Wallet: lazy(() => import('@adobe-commerce/elsie/icons/Wallet.svg')),
-  Card: lazy(() => import('@adobe-commerce/elsie/icons/Card.svg')),
-  Order: lazy(() => import('@adobe-commerce/elsie/icons/Order.svg')),
-  Delivery: lazy(() => import('@adobe-commerce/elsie/icons/Delivery.svg')),
-  OrderError: lazy(() => import('@adobe-commerce/elsie/icons/OrderError.svg')),
-  OrderSuccess: lazy(() => import('@adobe-commerce/elsie/icons/OrderSuccess.svg')),
-  PaymentError: lazy(() => import('@adobe-commerce/elsie/icons/PaymentError.svg')),
-  CheckWithCircle: lazy(() => import('@adobe-commerce/elsie/icons/CheckWithCircle.svg')),
+  Warning: lazy(() => import('@adobe-commerce/elsie/icons/Warning.svg')),
+  WarningFilled: lazy(() => import('@adobe-commerce/elsie/icons/WarningFilled.svg')),
   WarningWithCircle: lazy(
     () => import('@adobe-commerce/elsie/icons/WarningWithCircle.svg')
   ),
-  WarningFilled: lazy(() => import('@adobe-commerce/elsie/icons/WarningFilled.svg')),
-  InfoFilled: lazy(() => import('@adobe-commerce/elsie/icons/InfoFilled.svg')),
-  HeartFilled: lazy(() => import('@adobe-commerce/elsie/icons/HeartFilled.svg')),
-  Trash: lazy(() => import('@adobe-commerce/elsie/icons/Trash.svg')),
-  Eye: lazy(() => import('@adobe-commerce/elsie/icons/Eye.svg')),
-  EyeClose: lazy(() => import('@adobe-commerce/elsie/icons/EyeClose.svg')),
-  Date: lazy(() => import('@adobe-commerce/elsie/icons/Date.svg')),
-  AddressBook: lazy(() => import('@adobe-commerce/elsie/icons/AddressBook.svg')),
-  EmptyBox: lazy(() => import('@adobe-commerce/elsie/icons/EmptyBox.svg')),
-  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/MultiSelect/MultiSelect.stories.tsx

@@ -8,7 +8,7 @@
  *******************************************************************/
 
 import type { Meta, StoryObj } from '@storybook/preact';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 import {
   MultiSelect,
   type MultiSelectProps,
@@ -430,11 +430,13 @@ export const BulkSelectionActions = {
     const selectAllButton = canvas.getByTestId('multi-select-select-all');
     await userEvent.click(selectAllButton);
 
-    // All options should now be selected - check tags appear in the tags area
+    // Wait for all options to be selected - check tags appear in the tags area
     const tagsArea = canvas.getByTestId('multi-select-tags-area');
-    await expect(tagsArea).toHaveTextContent('Option 1');
-    await expect(tagsArea).toHaveTextContent('Option 2');
-    await expect(tagsArea).toHaveTextContent('Option 10');
+    await waitFor(async () => {
+      await expect(tagsArea).toHaveTextContent('Option 1');
+      await expect(tagsArea).toHaveTextContent('Option 2');
+      await expect(tagsArea).toHaveTextContent('Option 10');
+    });
 
     // Deselect All should now be enabled
     await expect(deselectAllButton).not.toBeDisabled();

package/src/components/Pagination/Pagination.css

@@ -64,7 +64,8 @@
   align-items: center;
 }
 
-.dropin-pagination_list-item button {
+.dropin-pagination_list-item button,
+.dropin-pagination_list-item a {
   cursor: pointer;
   margin: 0;
   padding: 0;
@@ -72,24 +73,32 @@
   border: none;
   font: var(--type-details-caption-1-font);
   letter-spacing: var(--type-details-caption-1-letter-spacing);
+  text-decoration: none;
 }
 
-.dropin-pagination_list-item--active button {
+.dropin-pagination_list-item--active button,
+.dropin-pagination_list-item--active a {
   cursor: default;
 }
 
 .dropin-pagination_list-item--active button:disabled,
 .dropin-pagination_list-item--ellipsis button,
+.dropin-pagination_list-item--ellipsis a,
 .dropin-pagination-arrow--backward:disabled,
-.dropin-pagination-arrow--forward:disabled {
+.dropin-pagination-arrow--forward:disabled,
+.dropin-pagination-arrow--disabled {
   cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-.dropin-pagination button:not(:disabled) {
+.dropin-pagination button:not(:disabled),
+.dropin-pagination a:not([aria-disabled="true"]) {
   color: var(--color-neutral-800);
 }
 
-.dropin-pagination button {
+.dropin-pagination button,
+.dropin-pagination a {
   appearance: none;
   -webkit-appearance: none;
 }

package/src/components/Pagination/Pagination.stories.tsx

@@ -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.
  *******************************************************************/
 
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
@@ -16,6 +16,8 @@ import {
 } from '@adobe-commerce/elsie/components/Pagination';
 import { expect, userEvent, within } from '@storybook/test';
 import { useState } from 'preact/hooks';
+import { action } from '@storybook/addon-actions';
+
 
 /**
  *  A component that divides large content sets into multiple pages, allowing users to navigate through the data with controls like "Next," "Previous," or page numbers, enhancing performance and usability by limiting the number of items displayed per page.
@@ -40,6 +42,10 @@ const meta: Meta<PaginationProps> = {
       description:
         'Called when the page number is changed, and it takes the resulting page number.',
     },
+    routePage: {
+      description:
+        'Optional function that generates hrefs for each page. When provided, pagination will render anchor tags instead of buttons, enabling proper SEO and link behavior.',
+    },
   },
 };
 
@@ -115,3 +121,26 @@ export const LongPagination: Story = {
     );
   },
 };
+
+export const WithAnchors: Story = {
+  name: 'As anchor tags',
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const totalPages = 10;
+
+    const handlePageChange = (newPage: number, e?: Event) => {
+      e?.preventDefault();
+      setCurrentPage(newPage);
+      action('pageChanged')(newPage, e);
+    };
+
+    return (
+      <Pagination
+        totalPages={totalPages}
+        currentPage={currentPage}
+        onChange={handlePageChange}
+        routePage={(page) => `?page=${page}`}
+      />
+    );
+  },
+};

package/src/components/Pagination/Pagination.tsx

@@ -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.
  *******************************************************************/
 
 import { FunctionComponent } from 'preact';
@@ -14,12 +14,14 @@ import { ChevronDown } from '@adobe-commerce/elsie/icons';
 import { Icon } from '@adobe-commerce/elsie/components/Icon';
 import { useText } from '@adobe-commerce/elsie/i18n';
 import '@adobe-commerce/elsie/components/Pagination/Pagination.css';
+import { PaginationButton } from './PaginationButton';
 
 export interface PaginationProps {
   className?: string;
   currentPage?: number;
   totalPages?: number;
-  onChange?: (currentPage: number) => void;
+  onChange?: (currentPage: number, e?: Event) => void;
+  routePage?: (page: number) => string;
 }
 
 export type PaginationList = {
@@ -32,6 +34,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
   totalPages = 10,
   currentPage = 1,
   onChange,
+  routePage,
   className,
   ...props
 }) => {
@@ -40,22 +43,22 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
     forwardButton: 'Dropin.Pagination.forwardButton.ariaLabel',
   });
 
-  const handleForward = useCallback(() => {
+  const handleForward = useCallback((e?: Event) => {
     const nextPage = Math.min(currentPage + 1, totalPages);
 
-    onChange?.(nextPage);
+    onChange?.(nextPage, e);
   }, [currentPage, onChange, totalPages]);
 
-  const handleBackward = useCallback(() => {
+  const handleBackward = useCallback((e?: Event) => {
     const prevPage = Math.max(currentPage - 1, 1);
 
-    onChange?.(prevPage);
+    onChange?.(prevPage, e);
   }, [currentPage, onChange]);
 
   const handleSetPage = useCallback(
-    (currentPage: number | string) => {
+    (currentPage: number | string, e?: Event) => {
       if (isNumber(currentPage)) {
-        onChange?.(currentPage as number);
+        onChange?.(currentPage as number, e);
       }
     },
     [onChange]
@@ -97,19 +100,20 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
 
   return (
     <div {...props} className={classes(['dropin-pagination', className])}>
-      <button
-        type="button"
+      <PaginationButton
         data-testid="prev-button"
         aria-label={translations.backwardButton}
         disabled={currentPage === 1}
-        onClick={handleBackward}
+        onClick={(e: Event) => handleBackward(e)}
+        href={routePage?.(currentPage) ?? undefined}
         className={classes([
           'dropin-pagination-arrow',
           'dropin-pagination-arrow--backward',
+          ['dropin-pagination-arrow--disabled', currentPage === 1],
         ])}
       >
         <Icon size="24" source={ChevronDown} />
-      </button>
+      </PaginationButton>
       <ul className="dropin-pagination_list">
         {(paginationList as PaginationList[]).map((item, index) => (
           <li
@@ -121,29 +125,31 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
               [`dropin-pagination_list-item--active`, item.isActive],
             ])}
           >
-            <button
-              type="button"
+            <PaginationButton
               data-testid={`set-page-button-${item.page}`}
-              onClick={() => handleSetPage(item.page)}
+              onClick={(e: Event) => handleSetPage(item.page, e)}
+              href={routePage?.(item.page as number) ?? undefined}
+
             >
               {item.label}
-            </button>
+            </PaginationButton>
           </li>
         ))}
       </ul>
-      <button
-        type="button"
+      <PaginationButton
         data-testid="next-button"
         aria-label={translations.forwardButton}
         disabled={currentPage === totalPages}
-        onClick={handleForward}
+        onClick={(e: Event) => handleForward(e)}
+        href={routePage?.(currentPage) ?? undefined}
         className={classes([
           'dropin-pagination-arrow',
           'dropin-pagination-arrow--forward',
+          ['dropin-pagination-arrow--disabled', currentPage === totalPages],
         ])}
       >
         <Icon size="24" source={ChevronDown} />
-      </button>
+      </PaginationButton>
     </div>
   );
 };

package/src/components/Pagination/PaginationButton.tsx

@@ -0,0 +1,46 @@
+/********************************************************************
+ *  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';
+
+type BaseProps = {
+  href?: string;
+  type?: 'button';
+  disabled?: boolean;
+};
+
+export type PaginationButtonProps = BaseProps &
+  (
+    | Omit<JSX.HTMLAttributes<HTMLAnchorElement>, 'type'>
+    | Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'href'>
+  );
+
+export const PaginationButton: FunctionComponent<PaginationButtonProps> = (
+  props
+) => {
+  if (props.href) {
+    
+    const { href, disabled, ...anchorProps } = props;
+    return (
+      <a
+        href={href}
+        aria-disabled={disabled}
+        {...(anchorProps as JSX.HTMLAttributes<HTMLAnchorElement>)}
+      />
+    );
+  }
+  
+  const { type = 'button', ...buttonProps } = props;
+  return (
+    <button
+      type={type}
+      {...(buttonProps as JSX.HTMLAttributes<HTMLButtonElement>)}
+    />
+  );
+};

package/src/components/Table/Table.css

@@ -17,6 +17,7 @@
 }
 
 .dropin-table__table {
+    border: var(--shape-border-width-1) solid var(--color-neutral-400);
     border-collapse: collapse; 
     width: 100%;
 }
@@ -34,9 +35,8 @@
     letter-spacing: var(--type-body-1-strong-letter-spacing);
 }
 
-.dropin-table__header__cell,
-.dropin-table__body__cell {
-    padding: var(--spacing-xsmall);
+.dropin-table__header__cell {
+    color: var(--color-neutral-800);
     text-align: left;
     white-space: nowrap;
 }
@@ -46,15 +46,26 @@
 }
 
 .dropin-table__header__row {
-    border-bottom: 2px solid var(--color-neutral-400);
+    border-bottom: var(--shape-border-width-1) solid var(--color-neutral-400);
+}
+
+.dropin-table__header__row th {
+    padding: var(--spacing-small) var(--spacing-medium);
+}
+
+.dropin-table__body__row:nth-child(even) {
+    background-color: var(--color-neutral-100);
+}
+
+.dropin-table__body__row.dropin-table__body__row--expanded {
+    background-color: var(--color-neutral-200);
 }
 
-.dropin-table__body__row {
-    border-bottom: 1px solid var(--color-neutral-400);
+.dropin-table__body__cell {
+    padding: var(--spacing-small) var(--spacing-medium);
 }
 
 .dropin-table__header__sort-button {
-    margin-left: var(--spacing-xsmall);
     vertical-align: middle;
 }
 
@@ -67,10 +78,29 @@
 }
 
 .dropin-table__row-details__cell {
-    padding: var(--spacing-small);
-    background-color: var(--color-neutral-100);
-    border-top: 1px solid var(--color-neutral-300);
-    border-bottom: 1px solid var(--color-neutral-400);
+    padding: var(--spacing-small) var(--spacing-medium);
+    background-color: var(--color-neutral-200);
+}
+
+.dropin-table__row-details--expanded .dropin-table__row-details__cell > *:last-child {
+    margin: 0;
+}
+
+.dropin-table__row-details__cell h1,
+.dropin-table__row-details__cell h2,
+.dropin-table__row-details__cell h3,
+.dropin-table__row-details__cell h4,
+.dropin-table__row-details__cell h5,
+.dropin-table__row-details__cell h6 {
+    font: var(--type-body-1-strong-font);
+    letter-spacing: var(--type-body-1-strong-letter-spacing);
+    margin: 0;
+}
+
+.dropin-table__row-details__cell p,
+.dropin-table__row-details__cell span {
+    font: var(--type-body-1-default-font);
+    letter-spacing: var(--type-body-1-default-letter-spacing);
 }
 
 /* Container query for mobile layout */
@@ -80,20 +110,63 @@
         display: none;
     }
 
+    .dropin-table--mobile-layout-stacked .dropin-table__body__row {
+        padding: var(--spacing-medium);
+        display: block;
+    }
+
     .dropin-table--mobile-layout-stacked .dropin-table__body__cell {
         display: block;
+        font: var(--type-body-2-default-font);
+        letter-spacing: var(--type-body-2-default-letter-spacing);
+        padding: var(--spacing-xsmall) 0;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell:first-child {
+        padding-top: 0;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell:last-child {
+        padding-bottom: 0;
     }
 
     .dropin-table--mobile-layout-stacked .dropin-table__body__cell::before {
         content: attr(data-label);
-        font-weight: bold;
+        font: var(--type-body-2-strong-font);
+        letter-spacing: var(--type-body-2-strong-letter-spacing);
         display: block;
         margin-bottom: var(--spacing-xxsmall);
     }
 
     .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell {
         display: block;
-        padding: var(--spacing-small);
+        padding: var(--spacing-medium);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell > *:first-child {
+        border-top: var(--shape-border-width-1) solid var(--color-neutral-400);
+        padding-top: var(--spacing-medium);
+        margin-top: calc(var(--spacing-medium) * -1);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details--expanded .dropin-table__row-details__cell > *:last-child {
+        margin: 0;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h1,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h2,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h3,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h4,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h5,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h6 {
+        font: var(--type-body-2-strong-font);
+        letter-spacing: var(--type-body-2-strong-letter-spacing);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell p,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell span {
+        font: var(--type-body-2-default-font);
+        letter-spacing: var(--type-body-2-default-letter-spacing);
     }
 }