@adobe-commerce/elsie 1.6.0-alpha11 → 1.6.0-alpha23

package/package.json

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

package/src/components/Icon/Icon.tsx

@@ -18,57 +18,52 @@ 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')),
-  ChevronRight: lazy(() => import('@adobe-commerce/elsie/icons/ChevronRight.svg')),
   ChevronUp: lazy(() => import('@adobe-commerce/elsie/icons/ChevronUp.svg')),
+  ChevronRight: lazy(() => import('@adobe-commerce/elsie/icons/ChevronRight.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')
   ),
-  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')),
-  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')),
   View: lazy(() => import('@adobe-commerce/elsie/icons/View.svg')),
-  Wallet: lazy(() => import('@adobe-commerce/elsie/icons/Wallet.svg')),
+  User: lazy(() => import('@adobe-commerce/elsie/icons/User.svg')),
   Warning: lazy(() => import('@adobe-commerce/elsie/icons/Warning.svg')),
-  WarningFilled: lazy(() => import('@adobe-commerce/elsie/icons/WarningFilled.svg')),
+  Locker: lazy(() => import('@adobe-commerce/elsie/icons/Locker.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')),
   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, waitFor, within } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
 import {
   MultiSelect,
   type MultiSelectProps,
@@ -430,13 +430,11 @@ export const BulkSelectionActions = {
     const selectAllButton = canvas.getByTestId('multi-select-select-all');
     await userEvent.click(selectAllButton);
 
-    // Wait for all options to be selected - check tags appear in the tags area
+    // All options should now be selected - check tags appear in the tags area
     const tagsArea = canvas.getByTestId('multi-select-tags-area');
-    await waitFor(async () => {
-      await expect(tagsArea).toHaveTextContent('Option 1');
-      await expect(tagsArea).toHaveTextContent('Option 2');
-      await expect(tagsArea).toHaveTextContent('Option 10');
-    });
+    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,8 +64,7 @@
   align-items: center;
 }
 
-.dropin-pagination_list-item button,
-.dropin-pagination_list-item a {
+.dropin-pagination_list-item button {
   cursor: pointer;
   margin: 0;
   padding: 0;
@@ -73,32 +72,24 @@
   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 a {
+.dropin-pagination_list-item--active button {
   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--disabled {
+.dropin-pagination-arrow--forward:disabled {
   cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
 }
 
-.dropin-pagination button:not(:disabled),
-.dropin-pagination a:not([aria-disabled="true"]) {
+.dropin-pagination button:not(:disabled) {
   color: var(--color-neutral-800);
 }
 
-.dropin-pagination button,
-.dropin-pagination a {
+.dropin-pagination button {
   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,8 +16,6 @@ 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.
@@ -42,10 +40,6 @@ 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.',
-    },
   },
 };
 
@@ -121,26 +115,3 @@ 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,14 +14,12 @@ 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, e?: Event) => void;
-  routePage?: (page: number) => string;
+  onChange?: (currentPage: number) => void;
 }
 
 export type PaginationList = {
@@ -34,7 +32,6 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
   totalPages = 10,
   currentPage = 1,
   onChange,
-  routePage,
   className,
   ...props
 }) => {
@@ -43,22 +40,22 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
     forwardButton: 'Dropin.Pagination.forwardButton.ariaLabel',
   });
 
-  const handleForward = useCallback((e?: Event) => {
+  const handleForward = useCallback(() => {
     const nextPage = Math.min(currentPage + 1, totalPages);
 
-    onChange?.(nextPage, e);
+    onChange?.(nextPage);
   }, [currentPage, onChange, totalPages]);
 
-  const handleBackward = useCallback((e?: Event) => {
+  const handleBackward = useCallback(() => {
     const prevPage = Math.max(currentPage - 1, 1);
 
-    onChange?.(prevPage, e);
+    onChange?.(prevPage);
   }, [currentPage, onChange]);
 
   const handleSetPage = useCallback(
-    (currentPage: number | string, e?: Event) => {
+    (currentPage: number | string) => {
       if (isNumber(currentPage)) {
-        onChange?.(currentPage as number, e);
+        onChange?.(currentPage as number);
       }
     },
     [onChange]
@@ -100,20 +97,19 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
 
   return (
     <div {...props} className={classes(['dropin-pagination', className])}>
-      <PaginationButton
+      <button
+        type="button"
         data-testid="prev-button"
         aria-label={translations.backwardButton}
         disabled={currentPage === 1}
-        onClick={(e: Event) => handleBackward(e)}
-        href={routePage?.(currentPage) ?? undefined}
+        onClick={handleBackward}
         className={classes([
           'dropin-pagination-arrow',
           'dropin-pagination-arrow--backward',
-          ['dropin-pagination-arrow--disabled', currentPage === 1],
         ])}
       >
         <Icon size="24" source={ChevronDown} />
-      </PaginationButton>
+      </button>
       <ul className="dropin-pagination_list">
         {(paginationList as PaginationList[]).map((item, index) => (
           <li
@@ -125,31 +121,29 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
               [`dropin-pagination_list-item--active`, item.isActive],
             ])}
           >
-            <PaginationButton
+            <button
+              type="button"
               data-testid={`set-page-button-${item.page}`}
-              onClick={(e: Event) => handleSetPage(item.page, e)}
-              href={routePage?.(item.page as number) ?? undefined}
-
+              onClick={() => handleSetPage(item.page)}
             >
               {item.label}
-            </PaginationButton>
+            </button>
           </li>
         ))}
       </ul>
-      <PaginationButton
+      <button
+        type="button"
         data-testid="next-button"
         aria-label={translations.forwardButton}
         disabled={currentPage === totalPages}
-        onClick={(e: Event) => handleForward(e)}
-        href={routePage?.(currentPage) ?? undefined}
+        onClick={handleForward}
         className={classes([
           'dropin-pagination-arrow',
           'dropin-pagination-arrow--forward',
-          ['dropin-pagination-arrow--disabled', currentPage === totalPages],
         ])}
       >
         <Icon size="24" source={ChevronDown} />
-      </PaginationButton>
+      </button>
     </div>
   );
 };

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);
     }
 }
 

package/src/components/Table/Table.stories.tsx

@@ -11,6 +11,10 @@
 import type { Meta, StoryObj } from '@storybook/preact';
 import { useState } from 'preact/hooks';
 import { Table as TableComponent, TableProps } from '@adobe-commerce/elsie/components/Table';
+import { ActionButton } from '@adobe-commerce/elsie/components/ActionButton';
+import { ActionButtonGroup } from '@adobe-commerce/elsie/components/ActionButtonGroup';
+import { Pagination } from '@adobe-commerce/elsie/components/Pagination';
+import { Picker, type PickerOption } from '@adobe-commerce/elsie/components/Picker';
 
 /**
  * Use the `Table` component to render data in a structured table.
@@ -175,10 +179,10 @@ export const Table: Story = {
       { key: 'actions', label: 'Actions' },
     ],
     rowData: [
-      { name: 'John', email: 'john@example.com', age: 20, actions: <button>Edit</button> },
-      { name: 'Jane', email: 'jane@example.com', age: 21, actions: <button>Edit</button> },
-      { name: 'Jim', email: 'jim@example.com', age: 22, actions: <button>Edit</button> },
-      { name: 'Jill', email: 'jill@example.com', age: 23, actions: <button>Edit</button> },
+      { name: 'John', email: 'john@example.com', age: 20, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jane', email: 'jane@example.com', age: 21, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jim', email: 'jim@example.com', age: 22, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jill', email: 'jill@example.com', age: 23, actions: <ActionButton>Edit</ActionButton> },
     ],
   },
 };
@@ -212,11 +216,11 @@ export const AllSortable: Story = {
       { key: 'actions', label: 'Actions' },
     ],
     rowData: [
-      { name: 'John', email: 'john@example.com', age: 20, actions: <button>Edit</button> },
-      { name: 'Jane', email: 'jane@example.com', age: 21, actions: <button>Edit</button> },
-      { name: 'Jim', email: 'jim@example.com', age: 22, actions: <button>Edit</button> },
-      { name: 'Jill', email: 'jill@example.com', age: 23, actions: <button>Edit</button> },
-      { name: 'Jack', email: 'jack@example.com', age: 24, actions: <button>Edit</button> },
+      { name: 'John', email: 'john@example.com', age: 20, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jane', email: 'jane@example.com', age: 21, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jim', email: 'jim@example.com', age: 22, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jill', email: 'jill@example.com', age: 23, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jack', email: 'jack@example.com', age: 24, actions: <ActionButton>Edit</ActionButton> },
     ],
   },
 };
@@ -240,7 +244,7 @@ export const AllSortable: Story = {
  *     { key: 'actions', label: 'Actions' }
  *   ]}
  *   rowData={[
- *     { id: 1, name: 'John Doe', email: 'john@company.com', phone: '+1-555-0123', department: 'Engineering', position: 'Senior Developer', salary: '$95,000', startDate: '2022-01-15', status: 'Active', actions: <button>Edit</button> }
+ *     { id: 1, name: 'John Doe', email: 'john@company.com', phone: '+1-555-0123', department: 'Engineering', position: 'Senior Developer', salary: '$95,000', startDate: '2022-01-15', status: 'Active', actions: <ActionButton>Edit</ActionButton> }
  *   ]}
  * />
  * ```
@@ -270,7 +274,7 @@ export const WideTable: Story = {
         salary: '$95,000', 
         startDate: '2022-01-15', 
         status: 'Active', 
-        actions: <button>Edit</button> 
+        actions: <ActionButton>Edit</ActionButton> 
       },
       { 
         id: 2, 
@@ -282,7 +286,7 @@ export const WideTable: Story = {
         salary: '$78,000', 
         startDate: '2021-06-20', 
         status: 'Active', 
-        actions: <button>Edit</button> 
+        actions: <ActionButton>Edit</ActionButton> 
       },
       { 
         id: 3, 
@@ -294,7 +298,7 @@ export const WideTable: Story = {
         salary: '$110,000', 
         startDate: '2020-03-10', 
         status: 'Active', 
-        actions: <button>Edit</button> 
+        actions: <ActionButton>Edit</ActionButton> 
       },
       { 
         id: 4, 
@@ -306,7 +310,7 @@ export const WideTable: Story = {
         salary: '$65,000', 
         startDate: '2023-02-28', 
         status: 'Pending', 
-        actions: <button>Edit</button> 
+        actions: <ActionButton>Edit</ActionButton> 
       },
       { 
         id: 5, 
@@ -318,7 +322,7 @@ export const WideTable: Story = {
         salary: '$72,000', 
         startDate: '2022-09-12', 
         status: 'Active', 
-        actions: <button>Edit</button> 
+        actions: <ActionButton>Edit</ActionButton> 
       },
     ],
   },
@@ -341,7 +345,7 @@ export const WideTable: Story = {
  *       user: <div><strong>John Doe</strong><br/>john@example.com<br/>Senior Developer</div>,
  *       description: <div>Lead developer for the<br/>e-commerce platform<br/>with 5+ years experience</div>,
  *       status: <span>Active</span>,
- *       actions: <div><button>Edit</button><br/><button>Delete</button><br/><button>View</button></div>
+ *       actions: <div><ActionButton>Edit</ActionButton><br/><ActionButton>Delete</ActionButton><br/><ActionButton>View</ActionButton></div>
  *     }
  *   ]}
  * />
@@ -375,11 +379,11 @@ export const ComplexCells: Story = {
           <span>Active</span>
         ),
         actions: (
-          <div>
-            <button>Edit</button>
-            <button>Delete</button>
-            <button>View</button>
-          </div>
+          <ActionButtonGroup>
+            <ActionButton value="edit">Edit</ActionButton>
+            <ActionButton value="delete">Delete</ActionButton>
+            <ActionButton value="view">View</ActionButton>
+          </ActionButtonGroup>
         ),
       },
       { 
@@ -401,11 +405,11 @@ export const ComplexCells: Story = {
           <span>Pending</span>
         ),
         actions: (
-          <div>
-            <button>Edit</button>
-            <button>Approve</button>
-            <button>Reject</button>
-          </div>
+          <ActionButtonGroup>
+            <ActionButton value="edit">Edit</ActionButton>
+            <ActionButton value="approve">Approve</ActionButton>
+            <ActionButton value="reject">Reject</ActionButton>
+          </ActionButtonGroup>
         ),
       },
       { 
@@ -427,11 +431,11 @@ export const ComplexCells: Story = {
           <span>Inactive</span>
         ),
         actions: (
-          <div>
-            <button>Edit</button>
-            <button>Activate</button>
-            <button>Archive</button>
-          </div>
+          <ActionButtonGroup>
+            <ActionButton value="edit">Edit</ActionButton>
+            <ActionButton value="activate">Activate</ActionButton>
+            <ActionButton value="archive">Archive</ActionButton>
+          </ActionButtonGroup>
         ),
       },
     ],
@@ -476,10 +480,10 @@ export const StackedMobileLayout: Story = {
       { key: 'actions', label: 'Actions' },
     ],
     rowData: [
-      { name: 'John Doe', email: 'john.doe@example.com', age: 28, status: 'Active', actions: <button>Edit</button> },
-      { name: 'Jane Smith', email: 'jane.smith@example.com', age: 32, status: 'Inactive', actions: <button>Edit</button> },
-      { name: 'Bob Johnson', email: 'bob.johnson@example.com', age: 45, status: 'Active', actions: <button>Edit</button> },
-      { name: 'Alice Brown', email: 'alice.brown@example.com', age: 29, status: 'Pending', actions: <button>Edit</button> },
+      { name: 'John Doe', email: 'john.doe@example.com', age: 28, status: 'Active', actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jane Smith', email: 'jane.smith@example.com', age: 32, status: 'Inactive', actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Bob Johnson', email: 'bob.johnson@example.com', age: 45, status: 'Active', actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Alice Brown', email: 'alice.brown@example.com', age: 29, status: 'Pending', actions: <ActionButton>Edit</ActionButton> },
     ],
   },
 };
@@ -520,7 +524,7 @@ export const StackedMobileLayout: Story = {
  *     { 
  *       name: 'John', 
  *       email: 'john@example.com', 
- *       actions: <button onClick={() => toggleRow(0)}>Toggle Details</button>,
+ *       actions: <ActionButton onClick={() => toggleRow(0)}>Toggle Details</ActionButton>,
  *       _rowDetails: <div>Additional information...</div>
  *     }
  *   ]}
@@ -550,22 +554,22 @@ export const RowDetails: Story = {
         email: 'john.doe@company.com', 
         status: 'Active', 
         actions: (
-          <button onClick={() => toggleRow(0)}>
+          <ActionButton onClick={() => toggleRow(0)}>
             {expandedRows.has(0) ? 'Hide' : 'Show'}
-          </button>
+          </ActionButton>
         ),
         _rowDetails: (
-          <div>
+          <>
             <h3>Employee Details</h3>
             <p><strong>Department:</strong> Engineering</p>
             <p><strong>Position:</strong> Senior Developer</p>
             <p><strong>Start Date:</strong> January 15, 2022</p>
             <p><strong>Notes:</strong> Excellent performance, leads the frontend team.</p>
             <div style={{ marginTop: '12px' }}>
-              <button style={{ marginRight: '8px' }}>Update Details</button>
-              <button>View Full Profile</button>
+              <ActionButton style={{ marginRight: '8px' }}>Update Details</ActionButton>
+              <ActionButton>View Full Profile</ActionButton>
             </div>
-          </div>
+          </>
         )
       },
       { 
@@ -573,22 +577,22 @@ export const RowDetails: Story = {
         email: 'jane.smith@company.com', 
         status: 'Pending', 
         actions: (
-          <button onClick={() => toggleRow(1)}>
+          <ActionButton onClick={() => toggleRow(1)}>
             {expandedRows.has(1) ? 'Hide' : 'Show'}
-          </button>
+          </ActionButton>
         ),
         _rowDetails: (
-          <div>
+          <>
             <h3>Pending Approval</h3>
             <p><strong>Department:</strong> Marketing</p>
             <p><strong>Position:</strong> Marketing Manager</p>
             <p><strong>Application Date:</strong> December 1, 2024</p>
             <p><strong>Status:</strong> Awaiting HR approval</p>
             <div style={{ marginTop: '12px' }}>
-              <button style={{ marginRight: '8px', backgroundColor: '#22c55e', color: 'white', border: 'none', padding: '6px 12px', borderRadius: '4px' }}>Approve</button>
-              <button style={{ backgroundColor: '#ef4444', color: 'white', border: 'none', padding: '6px 12px', borderRadius: '4px' }}>Reject</button>
+              <ActionButton style={{ marginRight: '8px', backgroundColor: '#22c55e', color: 'white', border: 'none', padding: '6px 12px', borderRadius: '4px' }}>Approve</ActionButton>
+              <ActionButton style={{ backgroundColor: '#ef4444', color: 'white', border: 'none', padding: '6px 12px', borderRadius: '4px' }}>Reject</ActionButton>
             </div>
-          </div>
+          </>
         )
       },
       { 
@@ -596,22 +600,22 @@ export const RowDetails: Story = {
         email: 'bob.johnson@company.com', 
         status: 'Inactive', 
         actions: (
-          <button onClick={() => toggleRow(2)}>
+          <ActionButton onClick={() => toggleRow(2)}>
             {expandedRows.has(2) ? 'Hide' : 'Show'}
-          </button>
+          </ActionButton>
         ),
         _rowDetails: (
-          <div>
+          <>
             <h3>Account Information</h3>
             <p><strong>Department:</strong> Sales</p>
             <p><strong>Position:</strong> Sales Director</p>
             <p><strong>Last Active:</strong> November 20, 2024</p>
             <p><strong>Reason:</strong> On extended leave</p>
             <div style={{ marginTop: '12px' }}>
-              <button style={{ marginRight: '8px' }}>Reactivate Account</button>
-              <button>Contact Employee</button>
+              <ActionButton style={{ marginRight: '8px' }}>Reactivate Account</ActionButton>
+              <ActionButton>Contact Employee</ActionButton>
             </div>
-          </div>
+          </>
         )
       },
     ];
@@ -704,14 +708,17 @@ export const VNodeLabels: Story = {
             <strong>👤 User Name</strong>
           </span>
         ),
+        ariaLabel: 'User Name',
       },
       {
         key: 'email',
         label: <span style={{ color: '#0066cc' }}>📧 Email Address</span>,
+        ariaLabel: 'Email Address',
       },
       {
         key: 'role',
         label: <em style={{ color: '#666' }}>Role & Department</em>,
+        ariaLabel: 'Role & Department',
       },
       {
         key: 'status',
@@ -727,10 +734,12 @@ export const VNodeLabels: Story = {
             📊 Status
           </span>
         ),
+        ariaLabel: 'Status',
       },
       {
         key: 'actions',
         label: <span>⚙️ Actions</span>,
+        ariaLabel: 'Actions',
       },
     ],
     rowData: [
@@ -739,23 +748,277 @@ export const VNodeLabels: Story = {
         email: 'john.doe@company.com',
         role: 'Senior Developer',
         status: 'Active',
-        actions: <button>Edit</button>,
+        actions: <ActionButton>Edit</ActionButton>,
       },
       {
         name: 'Jane Smith',
         email: 'jane.smith@company.com',
         role: 'Product Manager',
         status: 'Active',
-        actions: <button>Edit</button>,
+        actions: <ActionButton>Edit</ActionButton>,
       },
       {
         name: 'Bob Johnson',
         email: 'bob.johnson@company.com',
         role: 'UX Designer',
         status: 'Inactive',
-        actions: <button>Edit</button>,
+        actions: <ActionButton>Edit</ActionButton>,
       },
     ],
   },
 };
 
+/**
+ * Table with pagination to navigate through multiple pages of data.
+ * This demonstrates how to integrate the Pagination component with the Table component.
+ * 
+ * **Features**:
+ * - Pagination controls below the table
+ * - Page state management with useState
+ * - Dynamic row data based on current page
+ * - Items per page configuration
+ * 
+ * ```tsx
+ * const [currentPage, setCurrentPage] = useState(1);
+ * const itemsPerPage = 5;
+ * const totalItems = 50;
+ * const totalPages = Math.ceil(totalItems / itemsPerPage);
+ * 
+ * const paginatedData = allData.slice(
+ *   (currentPage - 1) * itemsPerPage,
+ *   currentPage * itemsPerPage
+ * );
+ * 
+ * <div>
+ *   <Table
+ *     columns={columns}
+ *     rowData={paginatedData}
+ *   />
+ *   <Pagination
+ *     currentPage={currentPage}
+ *     totalPages={totalPages}
+ *     onChange={setCurrentPage}
+ *   />
+ * </div>
+ * ```
+ */
+export const WithPagination: Story = {
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(5);
+    
+    // Page size options
+    const pageSizeOptions: PickerOption[] = [
+      { value: '5', text: '5' },
+      { value: '10', text: '10' },
+      { value: '15', text: '15' },
+    ];
+    
+    // Generate sample data (287 items to match screenshot)
+    const allData = Array.from({ length: 287 }, (_, index) => ({
+      id: index + 1,
+      name: `User ${index + 1}`,
+      email: `user${index + 1}@example.com`,
+      department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][index % 5],
+      status: ['Active', 'Inactive', 'Pending'][index % 3],
+      actions: <ActionButton>Edit</ActionButton>,
+    }));
+
+    const totalPages = Math.ceil(allData.length / pageSize);
+    
+    // Calculate item range
+    const startItem = (currentPage - 1) * pageSize + 1;
+    const endItem = Math.min(currentPage * pageSize, allData.length);
+    const totalItems = allData.length;
+    
+    // Get current page data
+    const paginatedData = allData.slice(
+      (currentPage - 1) * pageSize,
+      currentPage * pageSize
+    );
+
+    // Handle page size change
+    const handlePageSizeChange = (event: Event) => {
+      const target = event.target as HTMLSelectElement;
+      const newPageSize = Number(target.value);
+      setPageSize(newPageSize);
+      setCurrentPage(1); // Reset to first page when page size changes
+    };
+
+    return (
+      <div>
+        <TableComponent
+          {...args}
+          columns={[
+            { key: 'id', label: 'ID' },
+            { key: 'name', label: 'Name' },
+            { key: 'email', label: 'Email' },
+            { key: 'department', label: 'Department' },
+            { key: 'status', label: 'Status' },
+            { key: 'actions', label: 'Actions' },
+          ]}
+          rowData={paginatedData}
+        />
+        <div style={{ marginTop: 'var(--spacing-small)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span style={{ 
+            font: 'var(--type-body-1-default-font)',
+            letterSpacing: 'var(--type-body-1-default-letter-spacing)',
+            color: 'var(--color-neutral-800)'
+          }}>
+            Items {startItem} to {endItem} of {totalItems} total
+          </span>
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onChange={setCurrentPage}
+          />
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: 'var(--spacing-xsmall)',
+            font: 'var(--type-body-1-default-font)',
+            letterSpacing: 'var(--type-body-1-default-letter-spacing)',
+            color: 'var(--color-neutral-800)'
+          }}>
+            <span>Show</span>
+            <Picker
+              variant="primary"
+              size="medium"
+              value={String(pageSize)}
+              options={pageSizeOptions}
+              handleSelect={handlePageSizeChange}
+              aria-label="Items per page"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Table with expandable row details and stacked mobile layout.
+ * Combines the expandable rows feature with responsive mobile behavior using container queries.
+ * 
+ * **Features**:
+ * - Expandable rows with toggle buttons
+ * - Stacked mobile layout when container width ≤ 600px
+ * - Row details expand in both desktop and mobile views
+ * - Mobile view shows labels above each cell value
+ * 
+ * ```tsx
+ * const [expandedRows, setExpandedRows] = useState(new Set());
+ * 
+ * const toggleRow = (rowIndex: number) => {
+ *   setExpandedRows(prev => {
+ *     const newSet = new Set(prev);
+ *     if (newSet.has(rowIndex)) {
+ *       newSet.delete(rowIndex);
+ *     } else {
+ *       newSet.add(rowIndex);
+ *     }
+ *     return newSet;
+ *   });
+ * };
+ * 
+ * <Table
+ *   mobileLayout="stacked"
+ *   columns={columns}
+ *   rowData={rowDataWithDetails}
+ *   expandedRows={expandedRows}
+ * />
+ * ```
+ */
+export const ExpandableRowsWithMobileLayout: Story = {
+  render: (args) => {
+    const [expandedRows, setExpandedRows] = useState(new Set<number>());
+
+    const toggleRow = (rowIndex: number) => {
+      setExpandedRows((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(rowIndex)) {
+          newSet.delete(rowIndex);
+        } else {
+          newSet.add(rowIndex);
+        }
+        return newSet;
+      });
+    };
+
+    const rowData = [
+      { 
+        name: 'John Doe', 
+        email: 'john.doe@company.com', 
+        status: 'Active', 
+        actions: (
+          <ActionButton onClick={() => toggleRow(0)}>
+            {expandedRows.has(0) ? 'Hide' : 'Show'}
+          </ActionButton>
+        ),
+        _rowDetails: (
+          <>
+            <h3>Employee Details</h3>
+            <p><strong>Department:</strong> Engineering</p>
+            <p><strong>Position:</strong> Senior Developer</p>
+            <p><strong>Start Date:</strong> January 15, 2022</p>
+            <p><strong>Notes:</strong> Excellent performance, leads the frontend team.</p>
+          </>
+        )
+      },
+      { 
+        name: 'Jane Smith', 
+        email: 'jane.smith@company.com', 
+        status: 'Pending', 
+        actions: (
+          <ActionButton onClick={() => toggleRow(1)}>
+            {expandedRows.has(1) ? 'Hide' : 'Show'}
+          </ActionButton>
+        ),
+        _rowDetails: (
+          <>
+            <h3>Pending Approval</h3>
+            <p><strong>Department:</strong> Marketing</p>
+            <p><strong>Position:</strong> Marketing Manager</p>
+            <p><strong>Application Date:</strong> December 1, 2024</p>
+            <p><strong>Status:</strong> Awaiting HR approval</p>
+          </>
+        )
+      },
+      { 
+        name: 'Bob Johnson', 
+        email: 'bob.johnson@company.com', 
+        status: 'Inactive', 
+        actions: (
+          <ActionButton onClick={() => toggleRow(2)}>
+            {expandedRows.has(2) ? 'Hide' : 'Show'}
+          </ActionButton>
+        ),
+        _rowDetails: (
+          <>
+            <h3>Account Information</h3>
+            <p><strong>Department:</strong> Sales</p>
+            <p><strong>Position:</strong> Sales Director</p>
+            <p><strong>Last Active:</strong> November 20, 2024</p>
+            <p><strong>Reason:</strong> On extended leave</p>
+          </>
+        )
+      },
+    ];
+
+    return (
+      <TableComponent
+        {...args}
+        mobileLayout="stacked"
+        columns={[
+          { key: 'name', label: 'Name', ariaLabel: 'Name' },
+          { key: 'email', label: 'Email', ariaLabel: 'Email' },
+          { key: 'status', label: 'Status', ariaLabel: 'Status' },
+          { key: 'actions', label: 'Actions', ariaLabel: 'Actions' },
+        ]}
+        rowData={rowData}
+        expandedRows={expandedRows}
+      />
+    );
+  },
+};
+

package/src/components/Table/Table.tsx

@@ -97,7 +97,8 @@ export const Table: FunctionComponent<TableProps> = ({
       iconSource = 'ChevronDown';
       ariaLabel = translations.sortedDescending.replace('{label}', label);
     } else {
-      iconSource = 'Sort';
+      // Show chevron down when sortable but not sorted
+      iconSource = 'ChevronDown';
       ariaLabel = translations.sortBy.replace('{label}', label);
     }
 
@@ -138,7 +139,10 @@ export const Table: FunctionComponent<TableProps> = ({
 
       return (
         <Fragment key={rowIndex}>
-          <tr className="dropin-table__body__row">
+          <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;

package/src/icons/index.ts

@@ -1,48 +1,43 @@
 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 ChevronRight } from './ChevronRight.svg';
 export { default as ChevronUp } from './ChevronUp.svg';
+export { default as ChevronRight } from './ChevronRight.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 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 View } from './View.svg';
-export { default as Wallet } from './Wallet.svg';
+export { default as User } from './User.svg';
 export { default as Warning } from './Warning.svg';
-export { default as WarningFilled } from './WarningFilled.svg';
+export { default as Locker } from './Locker.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 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';

package/src/components/Pagination/PaginationButton.tsx

@@ -1,46 +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 { 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/icons/Business.svg

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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>