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

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/Business.svg

@@ -0,0 +1,6 @@
+<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="M2.53833 11.606V18.4906C2.53833 19.0429 2.98604 19.4906 3.53833 19.4906H20.4614C21.0137 19.4906 21.4614 19.0429 21.4614 18.4906V11.606" stroke="currentColor" stroke-width="1"/>
+    <path vector-effect="non-scaling-stroke" d="M13.2813 13.3799L14.5625 13.1828L17.125 12.7886L21.4021 12.1306C21.8899 12.0555 22.25 11.6358 22.25 11.1422V8.66357C22.25 8.11129 21.8023 7.66357 21.25 7.66357H2.75C2.19772 7.66357 1.75 8.11129 1.75 8.66357V11.1422C1.75 11.6358 2.11011 12.0555 2.59794 12.1306L6.875 12.7886L9.4375 13.1828L10.7188 13.3799" stroke="currentColor" stroke-width="1"/>
+    <rect vector-effect="non-scaling-stroke" x="8.84619" y="4.50977" width="6.30769" height="3.15385" rx="1" stroke="currentColor" stroke-width="1"/>
+    <rect vector-effect="non-scaling-stroke" x="10.4231" y="12.394" width="3.15385" height="2.36538" rx="1" stroke="currentColor" stroke-width="1"/>
+</svg>

package/src/icons/ChevronDown.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.74512 9.87701L12.0001 14.132L16.2551 9.87701" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/>
+    <path vector-effect="non-scaling-stroke" d="M7.74512 9.87701L12.0001 14.132L16.2551 9.87701" stroke="currentColor" stroke-width="1" stroke-linecap="square" stroke-linejoin="round"/>
 </svg>

package/src/icons/ChevronUp.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.74512 14.132L12.0001 9.87701L16.2551 14.132" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M7.74512 14.132L12.0001 9.87701L16.2551 14.132" stroke="currentColor" stroke-width="1" stroke-linecap="square" stroke-linejoin="round"/>
 </svg>

package/src/icons/Edit.svg

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

package/src/icons/Eye.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.9952 8.05896C7.85898 8.04913 4.04561 10.1916 1.96743 13.6609C4.04561 17.14 7.86907 19.2629 11.9952 19.2629C16.1314 19.2727 19.9447 17.1302 22.0229 13.6609C20.0153 10.3096 16.2827 8.05896 11.9952 8.05896ZM11.9952 8.05896V4.73709M20.5097 11.027L23.2335 9.0221M16.8174 8.88451L18.4618 6.0737M3.48067 11.027L0.756836 9.03193M7.17298 8.89434L5.52859 6.08353M14.8401 13.6609C14.8401 15.1843 13.5689 16.4226 12.0053 16.4226C10.4416 16.4226 9.17045 15.1843 9.17045 13.6609C9.17045 12.1376 10.4416 10.8993 12.0053 10.8993C13.5689 10.8993 14.8401 12.1376 14.8401 13.6609Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9952 8.05896C7.85898 8.04913 4.04561 10.1916 1.96743 13.6609C4.04561 17.14 7.86907 19.2629 11.9952 19.2629C16.1314 19.2727 19.9447 17.1302 22.0229 13.6609C20.0153 10.3096 16.2827 8.05896 11.9952 8.05896ZM11.9952 8.05896V4.73709M20.5097 11.027L23.2335 9.0221M16.8174 8.88451L18.4618 6.0737M3.48067 11.027L0.756836 9.03193M7.17298 8.89434L5.52859 6.08353M14.8401 13.6609C14.8401 15.1843 13.5689 16.4226 12.0053 16.4226C10.4416 16.4226 9.17045 15.1843 9.17045 13.6609C9.17045 12.1376 10.4416 10.8993 12.0053 10.8993C13.5689 10.8993 14.8401 12.1376 14.8401 13.6609Z" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/icons/EyeClose.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.11 18.12C19.13 17.16 20.85 15.62 22.02 13.67C20.01 10.32 16.28 8.07 11.99 8.07M11.99 8.07C11.09 8.07 10.21 8.17 9.35 8.36M11.99 8.07V4.75M20.5 11.03L23.22 9.03M16.81 8.89L18.45 6.08M3.47 11.03L0.75 9.03M11.3096 10.99C11.5296 10.94 11.7596 10.91 11.9996 10.91C13.5596 10.91 14.8296 12.15 14.8296 13.67C14.8296 14.05 14.7496 14.41 14.6096 14.74M11.9999 16.43C10.4399 16.43 9.16992 15.19 9.16992 13.67C9.16992 13.37 9.21992 13.09 9.30992 12.83M6.13996 9.60001C4.43996 10.57 2.98996 11.96 1.95996 13.67C4.03996 17.15 7.85996 19.27 11.99 19.27C12.57 19.27 13.15 19.23 13.71 19.14M20.4404 22.5L4.44043 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path vector-effect="non-scaling-stroke"  d="M17.11 18.12C19.13 17.16 20.85 15.62 22.02 13.67C20.01 10.32 16.28 8.07 11.99 8.07M11.99 8.07C11.09 8.07 10.21 8.17 9.35 8.36M11.99 8.07V4.75M20.5 11.03L23.22 9.03M16.81 8.89L18.45 6.08M3.47 11.03L0.75 9.03M11.3096 10.99C11.5296 10.94 11.7596 10.91 11.9996 10.91C13.5596 10.91 14.8296 12.15 14.8296 13.67C14.8296 14.05 14.7496 14.41 14.6096 14.74M11.9999 16.43C10.4399 16.43 9.16992 15.19 9.16992 13.67C9.16992 13.37 9.21992 13.09 9.30992 12.83M6.13996 9.60001C4.43996 10.57 2.98996 11.96 1.95996 13.67C4.03996 17.15 7.85996 19.27 11.99 19.27C12.57 19.27 13.15 19.23 13.71 19.14M20.4404 22.5L4.44043 2.5" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/icons/Gift.svg

@@ -1,3 +1,3 @@
 <svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 6L10 21.5M10 6H12.25C13.4926 6 14.5 4.99264 14.5 3.75C14.5 2.50736 13.4926 1.5 12.25 1.5C11.0074 1.5 10 2.50736 10 3.75M10 6V3.75M10 6H7.75C6.50736 6 5.5 4.99264 5.5 3.75C5.5 2.50736 6.50736 1.5 7.75 1.5C8.99264 1.5 10 2.50736 10 3.75M3.25 10.75H16.75C17.9926 10.75 19 9.74264 19 8.5C19 7.25736 17.9926 6.25 16.75 6.25H3.25C2.00736 6.25 1 7.25736 1 8.5C1 9.74264 2.00736 10.75 3.25 10.75ZM4.75 21.5H15.25C16.4926 21.5 17.5 20.4926 17.5 19.25V13.25C17.5 12.0074 16.4926 11 15.25 11H4.75C3.50736 11 2.5 12.0074 2.5 13.25V19.25C2.5 20.4926 3.50736 21.5 4.75 21.5Z" stroke="currentColor" stroke-width="1.5"/>
+    <path vector-effect="non-scaling-stroke"  d="M10 6L10 21.5M10 6H12.25C13.4926 6 14.5 4.99264 14.5 3.75C14.5 2.50736 13.4926 1.5 12.25 1.5C11.0074 1.5 10 2.50736 10 3.75M10 6V3.75M10 6H7.75C6.50736 6 5.5 4.99264 5.5 3.75C5.5 2.50736 6.50736 1.5 7.75 1.5C8.99264 1.5 10 2.50736 10 3.75M3.25 10.75H16.75C17.9926 10.75 19 9.74264 19 8.5C19 7.25736 17.9926 6.25 16.75 6.25H3.25C2.00736 6.25 1 7.25736 1 8.5C1 9.74264 2.00736 10.75 3.25 10.75ZM4.75 21.5H15.25C16.4926 21.5 17.5 20.4926 17.5 19.25V13.25C17.5 12.0074 16.4926 11 15.25 11H4.75C3.50736 11 2.5 12.0074 2.5 13.25V19.25C2.5 20.4926 3.50736 21.5 4.75 21.5Z" stroke="currentColor" stroke-width="1"/>
 </svg>

package/src/icons/GiftCard.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 12.8571V6.75774C22 6.33761 21.5848 6 21.0884 6H2.91155C2.40614 6 2 6.34511 2 6.75774V12.8571M22 12.8571H2M22 12.8571V17.0049C22 17.5468 21.5939 18 21.0884 18H2.91155C2.41516 18 2 17.5567 2 17.0049V12.8571M5.18182 16.0886L8.64545 12.8229M8.64545 12.8229L12.1087 16.0886M8.64545 12.8229C8.64545 12.8229 8.09964 10.4743 7.56328 9.96857C7.02692 9.46286 6.15419 9.46286 5.61783 9.96857C5.08146 10.4743 5.08146 11.2971 5.61783 11.8029C6.15419 12.3086 8.64545 12.8229 8.64545 12.8229ZM8.64545 12.8229C8.64545 12.8229 11.1542 12.2914 11.6905 11.7857C12.2269 11.28 12.2269 10.4571 11.6905 9.95141C11.1542 9.4457 10.2814 9.4457 9.74507 9.95141C9.2087 10.4571 8.64545 12.8229 8.64545 12.8229ZM8.64506 17.2886V6.70286" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+    <path vector-effect="non-scaling-stroke"  d="M22 12.8571V6.75774C22 6.33761 21.5848 6 21.0884 6H2.91155C2.40614 6 2 6.34511 2 6.75774V12.8571M22 12.8571H2M22 12.8571V17.0049C22 17.5468 21.5939 18 21.0884 18H2.91155C2.41516 18 2 17.5567 2 17.0049V12.8571M5.18182 16.0886L8.64545 12.8229M8.64545 12.8229L12.1087 16.0886M8.64545 12.8229C8.64545 12.8229 8.09964 10.4743 7.56328 9.96857C7.02692 9.46286 6.15419 9.46286 5.61783 9.96857C5.08146 10.4743 5.08146 11.2971 5.61783 11.8029C6.15419 12.3086 8.64545 12.8229 8.64545 12.8229ZM8.64545 12.8229C8.64545 12.8229 11.1542 12.2914 11.6905 11.7857C12.2269 11.28 12.2269 10.4571 11.6905 9.95141C11.1542 9.4457 10.2814 9.4457 9.74507 9.95141C9.2087 10.4571 8.64545 12.8229 8.64545 12.8229ZM8.64506 17.2886V6.70286" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
 </svg>