tech: Add DetailsList component (#4696)

<!--
PR title: tech / Add DetailsList component
-->

## Describe your changes
Create the `DetailsList` ui component

![Screenshot 2024-09-16 at 13.40.27.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/RV4Oucd6mLf2QBBMAjRa/ce4b33a7-b337-43ab-b966-31aed30e8117.png)

![Screenshot 2024-09-16 at 13.40.34.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/RV4Oucd6mLf2QBBMAjRa/5dce9d58-d968-4f56-a579-06d0cee66875.png)

![Screenshot 2024-09-16 at 13.40.40.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/RV4Oucd6mLf2QBBMAjRa/ce5776f8-d531-441e-8742-4ce16011fa61.png)

<!--
What changes are made?
If there are many changes, a list might be a good format.
If it makes sense, add screenshots and/or screen recordings here.
-->

## Justify why they are needed
Building block for `ProductCard`

## Checklist before requesting a review

- [x] I have performed a self-review of my code

apps/store/src/components/DetailsList/DetailsList.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css'
+import { tokens, xStack } from 'ui'
+
+export const detailsListRoot = style({
+  listStyle: 'none',
+  color: tokens.colors.textTranslucentSecondary,
+})
+
+export const detailsListItem = style([
+  xStack({ justifyContent: 'space-between' }),
+  {
+    fontSize: 'inherit',
+  },
+])
+
+export const detailsListLabel = style({
+  textAlign: 'start',
+})
+
+export const detailsListValue = style({
+  textAlign: 'end',
+})

apps/store/src/components/DetailsList/DetailsList.tsx

@@ -0,0 +1,54 @@
+import clsx from 'clsx'
+import { type ComponentProps } from 'react'
+import { type FontSizeProps, sprinkles } from 'ui'
+import {
+  detailsListItem,
+  detailsListLabel,
+  detailsListRoot,
+  detailsListValue,
+} from './DetailsList.css'
+
+type RootProps = ComponentProps<'ul'> & {
+  size?: FontSizeProps
+}
+const DetailsListRoot = ({ size = 'xs', className, children, ...props }: RootProps) => {
+  return (
+    <ul className={clsx(detailsListRoot, sprinkles({ fontSize: size }), className)} {...props}>
+      {children}
+    </ul>
+  )
+}
+
+type ItemProps = ComponentProps<'li'>
+const DetailsListItem = ({ className, children, ...props }: ItemProps) => {
+  return (
+    <li className={clsx(className, detailsListItem)} {...props}>
+      {children}
+    </li>
+  )
+}
+
+type LabelProps = ComponentProps<'span'>
+const DetailsListLabel = ({ className, children, ...props }: LabelProps) => {
+  return (
+    <span className={clsx(className, detailsListLabel)} {...props}>
+      {children}
+    </span>
+  )
+}
+
+type ValueProps = ComponentProps<'span'>
+const DetailsListValue = ({ className, children, ...props }: ValueProps) => {
+  return (
+    <span className={clsx(className, detailsListValue)} {...props}>
+      {children}
+    </span>
+  )
+}
+
+export const DetailsList = {
+  Root: DetailsListRoot,
+  Item: DetailsListItem,
+  Label: DetailsListLabel,
+  Value: DetailsListValue,
+}