refactor: list and OfferList vanilla extract

.changeset/easy-dots-stop.md

@@ -0,0 +1,6 @@
+---
+"@ultraviolet/ui": minor
+---
+
+- Refactor components `List` and `OfferList` to use vanilla-extract instead of Emotion
+- HeaderCell: Rename prop `minWith`-> `minWidth` 

packages/plus/package.json

@@ -90,6 +90,7 @@
     "@ultraviolet/themes": "workspace:*",
     "@vanilla-extract/css": "1.17.4",
     "@vanilla-extract/dynamic": "2.1.5",
+    "@vanilla-extract/recipes": "0.5.7",
     "csstype": "3.1.3",
     "react-intersection-observer": "9.16.0"
   }

packages/plus/src/components/OfferList/OfferList.tsx

@@ -1,21 +1,12 @@
 'use client'
 
-import styled from '@emotion/styled'
 import { List } from '@ultraviolet/ui'
 import type { ComponentProps } from 'react'
 import { useEffect, useState } from 'react'
 import { Cell } from './components/Cell'
 import { Row } from './components/Row'
 import { OfferListProvider } from './OfferListProvider'
-
-const StyledList = styled(List)`
-   td:first-child,
-   th:first-child {
-    width: ${({ theme }) => theme.sizing[700]};
-    min-width:  ${({ theme }) => theme.sizing[700]};
-    max-width:  ${({ theme }) => theme.sizing[700]};
-  }
-`
+import { offerList } from './styles.css'
 
 type OfferListProps = Omit<
   ComponentProps<typeof List>,
@@ -84,16 +75,16 @@ export const OfferList = ({
       setCheckboxSelectedRows={setCheckboxSelectedRows}
       setRadioSelectedRow={setRadioSelectedRow}
     >
-      <StyledList
+      <List
         autoCollapse={autoCollapse}
-        className={className}
+        className={`${className ? `${className} ` : ''}${offerList}`}
         columns={computedColumns}
         data-testid={dataTestId}
         expandable={false}
         selectable={false}
       >
         {children}
-      </StyledList>
+      </List>
     </OfferListProvider>
   )
 }