@autoguru/overdrive 4.54.1 → 4.56.0

package/dist/components/BulletList/Bullet.css.d.ts

@@ -1,3 +1,3 @@
-export declare const root: Record<"default" | "circle" | "square" | "disc", string>;
+export declare const root: Record<"default" | "square" | "circle" | "disc", string>;
 export declare const noDot: string;
 //# sourceMappingURL=Bullet.css.d.ts.map

package/dist/components/DataTable/DataTable.css.d.ts

@@ -0,0 +1,3 @@
+export declare const scrollContainer: string;
+export declare const innerWrapper: string;
+//# sourceMappingURL=DataTable.css.d.ts.map

package/dist/components/DataTable/DataTable.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DataTable/DataTable.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,QAO1B,CAAC;AAEH,eAAO,MAAM,YAAY,QAAY,CAAC"}

package/dist/components/DataTable/DataTable.css.js

@@ -0,0 +1,55 @@
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/DataTable/DataTable.css.ts", "@autoguru/overdrive");
+import { globalStyle, keyframes, style } from '@vanilla-extract/css';
+import { overdriveTokens as vars } from "../../themes/theme.css.js";
+export const scrollContainer = style({
+  selectors: {
+    ['&:focus-visible']: {
+      outline: `2px solid ${vars.colours.intent.primary.background.standard}`,
+      outlineOffset: '-2px'
+    }
+  }
+}, "scrollContainer");
+export const innerWrapper = style({}, "innerWrapper");
+
+/*
+ * Scroll-driven sticky header background. The background only appears
+ * once the user scrolls, driven by animation-timeline: scroll().
+ * The animation completes in the first 1px of scroll so the effect
+ * snaps in immediately when content passes under the header.
+ *
+ * Guarded behind @supports because browsers without animation-timeline
+ * support would otherwise treat the `animation` shorthand as a 0s
+ * time-based animation and, combined with `animation-fill-mode: both`,
+ * apply the end-state background immediately on render.
+ */
+const stickyReveal = keyframes({
+  from: {
+    backgroundColor: 'transparent'
+  },
+  to: {
+    backgroundColor: vars.colours.background.body
+  }
+}, "stickyReveal");
+globalStyle(`${scrollContainer} [role="columnheader"]`, {
+  '@supports': {
+    '(animation-timeline: scroll())': {
+      animation: `${stickyReveal} linear both`,
+      animationRange: '0px 1px',
+      animationTimeline: 'scroll()'
+    }
+  }
+});
+
+/*
+ * Constrain the TableCell ::before hover pseudo-elements within DataTable.
+ * Without this, left/right: -1000% inflates scrollWidth to ~7400px inside
+ * the overflowX:auto scroll container. Pinning to 0 keeps the hover
+ * background within each cell instead of spanning the full row — a
+ * necessary trade-off to prevent phantom horizontal scroll.
+ */
+globalStyle(`${innerWrapper} [role="gridcell"]::before`, {
+  left: 0,
+  right: 0
+});
+__vanilla_filescope__.endFileScope();

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import * as React from 'react';
+import { type TableProps } from '../Table/Table';
+export interface DataTableProps extends Omit<TableProps, 'ref'> {
+    /** Minimum width before horizontal scroll activates. CSS value, e.g. '800px'. */
+    minWidth?: string;
+    /** Maximum height before vertical scroll activates. Required for stickyHead to work. */
+    maxHeight?: string;
+    /** Accessible label for the scrollable region. */
+    'aria-label'?: string;
+    children: ReactNode | ReactNode[];
+}
+/**
+ * A responsive data table wrapper that enables horizontal scrolling on narrow
+ * containers. Composes the existing `Table` component inside a scrollable
+ * region with keyboard-accessible overflow.
+ *
+ * When using `stickyHead`, set `maxHeight` so the DataTable itself is the
+ * vertical scroll container — this ensures sticky headers resolve against
+ * the correct scroll ancestor.
+ */
+export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/components/DataTable/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../lib/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIxD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC;IAC9D,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,uFAoCrB,CAAC"}

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { Box } from "../Box/Box.js";
+import { ScrollPane } from "../ScrollPane/ScrollPane.js";
+import { Table } from "../Table/Table.js";
+import * as styles from "./DataTable.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A responsive data table wrapper that enables horizontal scrolling on narrow
+ * containers. Composes the existing `Table` component inside a scrollable
+ * region with keyboard-accessible overflow.
+ *
+ * When using `stickyHead`, set `maxHeight` so the DataTable itself is the
+ * vertical scroll container — this ensures sticky headers resolve against
+ * the correct scroll ancestor.
+ */
+export const DataTable = /*#__PURE__*/forwardRef(({
+  minWidth,
+  maxHeight,
+  'aria-label': ariaLabel = 'Data table',
+  children,
+  columnTemplate,
+  padding,
+  stickyHead
+}, ref) => /*#__PURE__*/_jsx(ScrollPane, {
+  ref: ref,
+  role: "region",
+  "aria-label": ariaLabel,
+  tabIndex: 0,
+  style: maxHeight ? {
+    maxHeight
+  } : undefined,
+  className: styles.scrollContainer,
+  odComponent: "data-table",
+  children: /*#__PURE__*/_jsx(Box, {
+    className: styles.innerWrapper,
+    style: minWidth ? {
+      minWidth
+    } : undefined,
+    children: /*#__PURE__*/_jsx(Table, {
+      columnTemplate: columnTemplate,
+      padding: padding,
+      stickyHead: stickyHead,
+      children: children
+    })
+  })
+}));
+DataTable.displayName = 'DataTable';

package/dist/components/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTable, type DataTableProps } from './DataTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DataTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/DataTable/index.js

@@ -0,0 +1 @@
+export { DataTable } from "./DataTable.js";

package/dist/components/EditableText/EditableText.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.css.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,QAUf,CAAC;AAEH,eAAO,MAAM,KAAK,QAmBhB,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}
+{"version":3,"file":"EditableText.css.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,QAUf,CAAC;AAEH,eAAO,MAAM,KAAK,QAkBhB,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}

package/dist/components/EditableText/EditableText.css.js

@@ -20,7 +20,6 @@ export const input = style({
       width: 'var(--width)',
       '@supports': {
         '(field-sizing: content)': {
-          //@ts-expect-error 'field-sizing' property is not yet baseline available
           fieldSizing: 'content',
           width: 'unset'
         }

package/dist/components/ScrollPane/ScrollPane.css.d.ts

@@ -1,3 +1,2 @@
 export declare const root: string;
-export declare const rounded: string;
 //# sourceMappingURL=ScrollPane.css.d.ts.map

package/dist/components/ScrollPane/ScrollPane.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollPane.css.d.ts","sourceRoot":"","sources":["../../../lib/components/ScrollPane/ScrollPane.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QA6Bf,CAAC;AAEH,eAAO,MAAM,OAAO,QAOlB,CAAC"}
+{"version":3,"file":"ScrollPane.css.d.ts","sourceRoot":"","sources":["../../../lib/components/ScrollPane/ScrollPane.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QA0Bf,CAAC"}

package/dist/components/ScrollPane/ScrollPane.css.js

@@ -3,41 +3,30 @@ __vanilla_filescope__.setFileScope("lib/components/ScrollPane/ScrollPane.css.ts"
 import { style } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 export const root = style({
+  scrollbarColor: `${vars.colours.gamut.gray300} transparent`,
+  scrollbarWidth: 'thin',
   '::-webkit-scrollbar': {
     backgroundColor: 'transparent',
+    height: 6,
     width: 6
   },
   '::-webkit-scrollbar-corner': {
     background: 'transparent'
   },
+  '::-webkit-scrollbar-track': {
+    backgroundColor: 'transparent'
+  },
   '::-webkit-scrollbar-thumb': {
     backgroundColor: vars.colours.gamut.gray300,
-    overflow: 'hidden'
-  },
-  '::-webkit-scrollbar-track': {
-    backgroundColor: vars.colours.gamut.gray100,
-    border: `1px solid ${vars.colours.gamut.gray200}`,
-    position: 'absolute'
+    borderRadius: '999px'
   },
   '::-webkit-scrollbar-button': {
     display: 'none'
   },
   selectors: {
-    ['&::-webkit-scrollbar-track:hover']: {
-      backgroundColor: vars.colours.gamut.gray300
-    },
     ['&::-webkit-scrollbar-thumb:hover']: {
-      backgroundColor: vars.colours.gamut.gray400,
-      border: `1px solid ${vars.colours.gamut.gray400}`
+      backgroundColor: vars.colours.gamut.gray400
     }
   }
 }, "root");
-export const rounded = style({
-  '::-webkit-scrollbar-thumb': {
-    borderRadius: vars.border.radius['sm']
-  },
-  '::-webkit-scrollbar-track': {
-    borderRadius: `0 ${vars.border.radius['sm']} ${vars.border.radius['sm']} 0`
-  }
-}, "rounded");
 __vanilla_filescope__.endFileScope();

package/dist/components/ScrollPane/ScrollPane.d.ts

@@ -5,8 +5,9 @@ export interface ScrollPaneProps extends Omit<ComponentProps<typeof Box>, 'overf
     bottomGap?: keyof Tokens['space'];
     serverVhFallback?: number;
     includeMobile?: boolean;
-    rounded?: boolean;
     className?: string;
+    /** @deprecated No-op. Thumb is pill-rounded by default. Will be removed in the next major. */
+    rounded?: boolean;
 }
 export declare const ScrollPane: React.ForwardRefExoticComponent<Omit<ScrollPaneProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ScrollPane.d.ts.map

package/dist/components/ScrollPane/ScrollPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollPane.d.ts","sourceRoot":"","sources":["../../../lib/components/ScrollPane/ScrollPane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,qGAYtB,CAAC"}
+{"version":3,"file":"ScrollPane.d.ts","sourceRoot":"","sources":["../../../lib/components/ScrollPane/ScrollPane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,qGAWtB,CAAC"}

package/dist/components/ScrollPane/ScrollPane.js

@@ -8,18 +8,18 @@ import React, { forwardRef } from 'react';
 import { Box } from "../Box/index.js";
 import * as styles from "./ScrollPane.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ScrollPane = /*#__PURE__*/forwardRef((_ref, ref) => {
+export const ScrollPane = /*#__PURE__*/forwardRef(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+(_ref, ref) => {
   let {
       className = '',
-      rounded = false
+      rounded: _rounded
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx(Box, _objectSpread({
     ref: ref,
     overflow: "auto",
-    className: clsx(className, styles.root, {
-      [styles.rounded]: rounded
-    }),
+    className: clsx(className, styles.root),
     odComponent: "scroll-pane"
   }, rest));
 });

package/dist/components/Table/Table.d.ts

@@ -5,5 +5,5 @@ export interface TableProps extends Partial<TableContext> {
     columnTemplate: string;
     children: ReactNode | ReactNode[];
 }
-export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
 //# sourceMappingURL=Table.d.ts.map

package/dist/components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,MAAM,WAAW,UAAW,SAAQ,OAAO,CAAC,YAAY,CAAC;IACxD,cAAc,EAAE,MAAM,CAAC;IAEvB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAQD,eAAO,MAAM,KAAK,mFAejB,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,MAAM,WAAW,UAAW,SAAQ,OAAO,CAAC,YAAY,CAAC;IACxD,cAAc,EAAE,MAAM,CAAC;IAEvB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAQD,eAAO,MAAM,KAAK,qFAgBjB,CAAC"}

package/dist/components/Table/Table.js

@@ -19,6 +19,7 @@ export const Table = /*#__PURE__*/forwardRef(({
   padding: padding,
   stickyHead: stickyHead,
   children: /*#__PURE__*/_jsx(Box, {
+    as: "table",
     ref: ref,
     role: "grid",
     width: "full",

package/dist/components/Table/TableCell.d.ts

@@ -8,5 +8,5 @@ export interface TableCellProps extends Partial<Pick<AriaAttributes, 'aria-label
     padding?: keyof Tokens['space'];
     children?: ReactNode | null;
 }
-export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
 //# sourceMappingURL=TableCell.d.ts.map

package/dist/components/Table/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAQ7C,MAAM,WAAW,cAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAEhC,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,uFAwCrB,CAAC"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAQ7C,MAAM,WAAW,cAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAEhC,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,6FAuCrB,CAAC"}

package/dist/components/Table/TableCell.js

@@ -16,11 +16,9 @@ export const TableCell = /*#__PURE__*/forwardRef(({
   const tableContext = useTableContext();
   const padding = (_ref = incomingPadding !== null && incomingPadding !== void 0 ? incomingPadding : tableContext === null || tableContext === void 0 ? void 0 : tableContext.padding) !== null && _ref !== void 0 ? _ref : 'none';
   return /*#__PURE__*/_jsx(Box, {
+    as: "td",
     ref: ref,
-    role: "gridcell"
-    // TODO: look into use of `scope` prop on non table headinging cells
-    // scope="row"
-    ,
+    role: "gridcell",
     display: "flex",
     alignItems: "center",
     position: "relative",

package/dist/components/Table/TableHeadCell.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,QAAgC,CAAC;AAE1D,eAAO,MAAM,IAAI,QAMf,CAAC;AASH,eAAO,MAAM,MAAM;;;;;CAiClB,CAAC;AAEF,eAAO,MAAM,MAAM,QAIjB,CAAC"}
+{"version":3,"file":"TableHeadCell.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,QAAgC,CAAC;AAE1D,eAAO,MAAM,IAAI,QAMf,CAAC;AASH,eAAO,MAAM,MAAM;;;;;CA4BlB,CAAC;AAEF,eAAO,MAAM,MAAM,QAIjB,CAAC"}

package/dist/components/Table/TableHeadCell.css.js

@@ -18,34 +18,29 @@ export const text = style({
 const sorterRoot = style({
   transformOrigin: 'center',
   transitionDuration: '0.3s',
-  transitionProperty: 'transform',
-  willChange: 'transform'
+  transitionProperty: 'transform, opacity, color',
+  willChange: 'transform, opacity'
 }, "sorterRoot");
 export const sorter = _objectSpread({
   root: [sorterRoot, style({
-    color: vars.typography.colour.muted,
-    transitionTimingFunction: vars.animation.easing.standard,
-    selectors: {
-      [`${sorterButton}:hover &`]: {
-        color: vars.typography.colour.dark
-      }
-    }
+    color: vars.typography.colour.dark,
+    transitionTimingFunction: vars.animation.easing.standard
   }, "sorter_root")]
 }, styleVariants({
   asc: {
-    transform: 'translateY(0px) rotateY(0)'
+    opacity: '1',
+    transform: 'rotateX(0)'
   },
   desc: {
-    transform: 'translateY(0px) rotateX(180deg)'
+    opacity: '1',
+    transform: 'rotateX(180deg)'
   },
   none: {
-    opacity: '0',
-    transform: 'translateY(10%) rotateX(0)',
-    transitionProperty: 'transform, opacity',
+    opacity: '0.5',
+    transform: 'rotateX(0)',
     selectors: {
       [`${sorterButton}:hover &`]: {
-        opacity: '0.50',
-        transform: 'translateY(0px) rotateX(0)'
+        opacity: '1'
       }
     }
   }

package/dist/components/Table/TableHeadCell.d.ts

@@ -1,4 +1,4 @@
-import type { AriaAttributes } from 'react';
+import type { AriaAttributes, MouseEventHandler, ReactNode } from 'react';
 import * as React from 'react';
 import { Alignment } from '../../utils';
 import { type BoxProps } from '../Box/Box';
@@ -6,8 +6,8 @@ type Sort = 'asc' | 'desc' | 'none';
 export interface TableHeadCellProps extends Partial<Pick<AriaAttributes, 'aria-label'>>, Pick<BoxProps, 'padding'> {
     align?: Alignment;
     sort?: Sort;
-    onSort?: (event: MouseEvent) => void;
-    children?: string | null;
+    onSort?: MouseEventHandler<HTMLTableCellElement>;
+    children?: ReactNode;
 }
 export declare const TableHeadCell: React.ForwardRefExoticComponent<TableHeadCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export {};

package/dist/components/Table/TableHeadCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAA4B,MAAM,aAAa,CAAC;AAClE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAShD,KAAK,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,MAAM,WAAW,kBAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAErC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAUD,eAAO,MAAM,aAAa,iGAyGzB,CAAC"}
+{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableHeadCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAA4B,MAAM,aAAa,CAAC;AAClE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQhD,KAAK,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,MAAM,WAAW,kBAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAEjD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAUD,eAAO,MAAM,aAAa,iGAqGzB,CAAC"}

package/dist/components/Table/TableHeadCell.js

@@ -1,4 +1,4 @@
-import { ArrowUpIcon } from '@autoguru/icons';
+import { SortIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { forwardRef, useCallback } from 'react';
@@ -7,7 +7,6 @@ import { Box } from "../Box/Box.js";
 import { inline } from "../Flex/flex.js";
 import { Icon } from "../Icon/Icon.js";
 import { Text } from "../Text/Text.js";
-import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import * as styles from "./TableHeadCell.css.js";
 import { useTableContext } from "./context.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,7 +33,7 @@ export const TableHeadCell = /*#__PURE__*/forwardRef(({
   }, [onSort]);
   const shouldSort = typeof sort === 'string';
   const sorter = /*#__PURE__*/_jsx(Icon, {
-    icon: ArrowUpIcon,
+    icon: SortIcon,
     size: "small",
     className: clsx([styles.sorter.root, styles.sorter[sort !== null && sort !== void 0 ? sort : 'none']])
   });
@@ -44,16 +43,13 @@ export const TableHeadCell = /*#__PURE__*/forwardRef(({
       align: alignmentToFlexAlignment(align),
       justify: 'center'
     }),
-    children: [align === 'right' && shouldSort ? sorter : null, /*#__PURE__*/_jsxs(Text, {
+    children: [align === 'right' && shouldSort ? sorter : null, /*#__PURE__*/_jsx(Text, {
       strong: true,
       size: "3",
       as: "span",
       align: align,
       className: styles.text,
-      children: [children, shouldSort ? /*#__PURE__*/_jsxs(VisuallyHidden, {
-        as: "span",
-        children: [' ', "sorted ", sortToAria(sort)]
-      }) : null]
+      children: children
     }), (align === 'left' || align === 'center') && shouldSort ? sorter : null]
   });
   return /*#__PURE__*/_jsx(Box, {
@@ -73,10 +69,10 @@ export const TableHeadCell = /*#__PURE__*/forwardRef(({
     onClick: sort ? sortClickHandler : undefined,
     children: sort ? /*#__PURE__*/_jsx(Box, {
       as: "button",
+      type: "button",
       display: "block",
       width: "full",
       padding: padding,
-      tabIndex: -1,
       className: styles.sorterButton,
       children: child
     }) : child

package/dist/components/Table/TableRow.css.d.ts

@@ -0,0 +1,3 @@
+export declare const staggerIndex: `var(--${string})`;
+export declare const rowEntering: string;
+//# sourceMappingURL=TableRow.css.d.ts.map

package/dist/components/Table/TableRow.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableRow.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,oBAAc,CAAC;AAaxC,eAAO,MAAM,WAAW,QAAY,CAAC"}

package/dist/components/Table/TableRow.css.js

@@ -0,0 +1,29 @@
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/Table/TableRow.css.ts", "@autoguru/overdrive");
+import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css';
+import { overdriveTokens as vars } from "../../themes/theme.css.js";
+/*
+ * Staggered row-entrance animation — slide-up with fade.
+ *
+ * Opt in by passing `staggerIndex={i}` to a <TableRow>; that applies
+ * the `rowEntering` class and sets the `--staggerIndex` CSS variable.
+ * TableRow uses `display: contents` so we can't animate the row box
+ * itself — the global selector targets the row's gridcell children.
+ */
+export const staggerIndex = createVar("staggerIndex");
+const slideUp = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(12px)'
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+}, "slideUp");
+export const rowEntering = style({}, "rowEntering");
+globalStyle(`${rowEntering} > [role="gridcell"]`, {
+  animation: `${slideUp} 300ms ${vars.animation.easing.decelerate} both`,
+  animationDelay: `calc(${staggerIndex} * 50ms)`
+});
+__vanilla_filescope__.endFileScope();

package/dist/components/Table/TableRow.d.ts

@@ -1,8 +1,28 @@
 import * as React from 'react';
 import { MouseEventHandler, ReactNode } from 'react';
 export interface TableRowProps {
-    onClick?: MouseEventHandler<HTMLDivElement>;
+    /** Click handler fired when any part of the row is clicked. */
+    onClick?: MouseEventHandler<HTMLTableRowElement>;
+    /**
+     * Opt-in entrance animation. When set to a number, the row's cells
+     * animate in with a staggered slide-up-and-fade (translateY 12px → 0,
+     * opacity 0 → 1, 300 ms with the decelerate easing token).
+     *
+     * Pass the row's index within the list (0, 1, 2, …) so each row waits
+     * `staggerIndex * 50 ms` before animating — producing a cascade.
+     * Omit the prop to disable the animation entirely.
+     *
+     * @example
+     * {rows.map((row, i) => (
+     *   <TableRow key={row.id} staggerIndex={i}>…</TableRow>
+     * ))}
+     */
+    staggerIndex?: number;
+    /** Custom className applied to the underlying `<tr>` element. */
+    className?: string;
+    /** Inline style applied to the underlying `<tr>` element. */
+    style?: React.CSSProperties;
     children: ReactNode | ReactNode[];
 }
-export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
 //# sourceMappingURL=TableRow.d.ts.map

package/dist/components/Table/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjE,MAAM,WAAW,aAAa;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAE5C,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,sFAMpB,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASjE,MAAM,WAAW,aAAa;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IAEjD;;;;;;;;;;;;;OAaG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,2FA4BpB,CAAC"}

package/dist/components/Table/TableRow.js

@@ -1,15 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import clsx from 'clsx';
 import * as React from 'react';
 import { forwardRef } from 'react';
 import { Box } from "../Box/Box.js";
+import { rowEntering, staggerIndex as staggerIndexVar } from "./TableRow.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TableRow = /*#__PURE__*/forwardRef(({
   children,
-  onClick
-}, ref) => /*#__PURE__*/_jsx(Box, {
-  ref: ref,
-  display: "contents",
-  role: "row",
-  onClick: onClick,
-  children: children
-}));
+  onClick,
+  className,
+  style,
+  staggerIndex
+}, ref) => {
+  const shouldAnimate = typeof staggerIndex === 'number';
+  const mergedStyle = shouldAnimate ? _objectSpread(_objectSpread({}, style), assignInlineVars({
+    [staggerIndexVar]: String(staggerIndex)
+  })) : style;
+  return /*#__PURE__*/_jsx(Box, {
+    as: "tr",
+    ref: ref,
+    display: "contents",
+    role: "row",
+    onClick: onClick,
+    className: clsx(className, {
+      [rowEntering]: shouldAnimate
+    }),
+    style: mergedStyle,
+    children: children
+  });
+});
 TableRow.displayName = 'TableRow';

package/dist/components/Table/TableRowGroup.d.ts

@@ -3,5 +3,5 @@ import { ReactNode } from 'react';
 export interface TableRowGroupProps {
     children: ReactNode | ReactNode[];
 }
-export declare const TableRowGroup: React.ForwardRefExoticComponent<TableRowGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TableRowGroup: React.ForwardRefExoticComponent<TableRowGroupProps & React.RefAttributes<HTMLTableSectionElement>>;
 //# sourceMappingURL=TableRowGroup.d.ts.map

package/dist/components/Table/TableRowGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRowGroup.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableRowGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,aAAa,2FAMzB,CAAC"}
+{"version":3,"file":"TableRowGroup.d.ts","sourceRoot":"","sources":["../../../lib/components/Table/TableRowGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,aAAa,oGAOxB,CAAC"}

package/dist/components/Table/TableRowGroup.js

@@ -5,6 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const TableRowGroup = /*#__PURE__*/forwardRef(({
   children
 }, ref) => /*#__PURE__*/_jsx(Box, {
+  as: "tbody",
   ref: ref,
   role: "rowgroup",
   display: "contents",

package/dist/components/index.d.ts

@@ -3,7 +3,7 @@ export { Alert } from './Alert';
 export { Anchor } from './Anchor';
 export { AutoSuggest, type AutoSuggestValue, type AutoSuggestItemRenderer, } from './AutoSuggest';
 export { Badge } from './Badge';
-export { Box, type BoxProps, useBox, type UseBoxProps, } from './Box';
+export { Box, type BoxProps, useBox, type UseBoxProps } from './Box';
 export { BulletList, Bullet } from './BulletList';
 export { BulletText } from './BulletText';
 export { Button } from './Button';
@@ -14,6 +14,7 @@ export { Columns, Column } from './Columns';
 export { DateInput } from './DateInput';
 export { DatePicker } from './DatePicker';
 export { DateTimeField, type DateTimeFieldProps, DateField, type DateFieldProps, TimeField, type TimeFieldProps, type CommonSelectorProps, } from './DateTimeField';
+export { DataTable, type DataTableProps } from './DataTable';
 export { DividerLine } from './DividerLine';
 export { DropDown, DropDownOption } from './DropDown';
 export { EditableText } from './EditableText';
@@ -50,7 +51,7 @@ export { ScrollPane } from './ScrollPane';
 export { SearchBar, type SearchBarProps } from './SearchBar';
 export { Section } from './Section';
 export { SelectInput } from './SelectInput';
-export { SimplePagination, EPageChangeDirection, } from './SimplePagination';
+export { SimplePagination, EPageChangeDirection } from './SimplePagination';
 export { Slider, type SliderProps } from './Slider';
 export { SliderProgress } from './SliderProgress';
 export { Stack } from './Stack';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/index.js

@@ -14,6 +14,7 @@ export { Columns, Column } from "./Columns/index.js";
 export { DateInput } from "./DateInput/index.js";
 export { DatePicker } from "./DatePicker/index.js";
 export { DateTimeField, DateField, TimeField } from "./DateTimeField/index.js";
+export { DataTable } from "./DataTable/index.js";
 export { DividerLine } from "./DividerLine/index.js";
 export { DropDown, DropDownOption } from "./DropDown/index.js";
 export { EditableText } from "./EditableText/index.js";

package/dist/styles/sprinkles.css.d.ts

@@ -50,12 +50,12 @@ export declare const sprinkles: ((props: {
     borderStyleRight?: "none" | "solid" | undefined;
     borderStyleTop?: "none" | "solid" | undefined;
 } & {
-    display?: ("none" | "flex" | "grid" | "block" | "contents" | "inline" | "inline-block" | "inline-flex" | "inlineBlock" | "inlineFlex" | {
-        mobile?: "none" | "flex" | "grid" | "block" | "contents" | "inline" | "inline-block" | "inline-flex" | "inlineBlock" | "inlineFlex" | undefined;
-        tablet?: "none" | "flex" | "grid" | "block" | "contents" | "inline" | "inline-block" | "inline-flex" | "inlineBlock" | "inlineFlex" | undefined;
-        desktop?: "none" | "flex" | "grid" | "block" | "contents" | "inline" | "inline-block" | "inline-flex" | "inlineBlock" | "inlineFlex" | undefined;
-        largeDesktop?: "none" | "flex" | "grid" | "block" | "contents" | "inline" | "inline-block" | "inline-flex" | "inlineBlock" | "inlineFlex" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "block" | "contents" | "inline" | "inline-block" | "inline-flex" | "inlineBlock" | "inlineFlex" | null>;
+    display?: ("none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | {
+        mobile?: "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | undefined;
+        tablet?: "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | undefined;
+        desktop?: "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | undefined;
+        largeDesktop?: "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "block" | "inline" | "inline-block" | "inline-flex" | "contents" | "inlineBlock" | "inlineFlex" | null>;
     overflow?: ("auto" | "hidden" | "visible" | {
         mobile?: "auto" | "hidden" | "visible" | undefined;
         tablet?: "auto" | "hidden" | "visible" | undefined;
@@ -477,7 +477,7 @@ export declare const sprinkles: ((props: {
         largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | "auto" | undefined;
     } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | "auto" | null>;
 }) => string) & {
-    properties: Set<"colour" | "backgroundColour" | "color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "textWrap" | "userSelect" | "wordBreak" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "text" | "p" | "borderBottomColour" | "borderLeftColour" | "borderRightColour" | "borderTopColour" | "useVar" | "bg" | "fg" | "borderColorX" | "borderColorY" | "borderColour" | "borderColourX" | "borderColourY" | "borderStyleBottom" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "gridColumns" | "borderWidthX" | "borderWidthY" | "borderWidthBottom" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "paddingX" | "px" | "paddingY" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "marginX" | "mx" | "marginY" | "my" | "mt" | "mr" | "mb" | "ml">;
+    properties: Set<"colour" | "backgroundColour" | "color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "userSelect" | "wordBreak" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "textWrap" | "text" | "p" | "borderBottomColour" | "borderLeftColour" | "borderRightColour" | "borderTopColour" | "useVar" | "bg" | "fg" | "borderColorX" | "borderColorY" | "borderColour" | "borderColourX" | "borderColourY" | "borderStyleBottom" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "gridColumns" | "borderWidthX" | "borderWidthY" | "borderWidthBottom" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "paddingX" | "px" | "paddingY" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "marginX" | "mx" | "marginY" | "my" | "mt" | "mr" | "mb" | "ml">;
 };
 export type Sprinkles = Parameters<typeof sprinkles>[0];
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.54.1",
+	"version": "4.56.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -15,6 +15,10 @@
 			"types": "./dist/components/*/index.d.ts",
 			"default": "./dist/components/*/index.js"
 		},
+		"./components/*/default": {
+			"types": "./dist/components/*/default.d.ts",
+			"default": "./dist/components/*/default.js"
+		},
 		"./hooks": {
 			"types": "./dist/hooks/index.d.ts",
 			"default": "./dist/hooks/index.js"
@@ -123,7 +127,7 @@
 		"@antebudimir/eslint-plugin-vanilla-extract": "^1.12.0",
 		"@autoguru/babel-preset": "3.2.0",
 		"@autoguru/eslint-plugin": "2.0.0",
-		"@autoguru/icons": "1.8.16",
+		"@autoguru/icons": "1.8.22",
 		"@autoguru/tsconfig": "1.3.1",
 		"@autoguru/utilities": "^1.3.3",
 		"@babel/cli": "7.28.3",
@@ -144,7 +148,7 @@
 		"@babel/runtime-corejs3": "7.28.4",
 		"@changesets/cli": "2.29.7",
 		"@chromatic-com/storybook": "4.1.1",
-		"@internationalized/date": "3.10.0",
+		"@internationalized/date": "3.12.1",
 		"@octokit/rest": "22.0.0",
 		"@popperjs/core": "2.11.8",
 		"@react-stately/toggle": "3.9.2",
@@ -209,7 +213,7 @@
 		"react-intersection-observer": "9.16.0",
 		"react-keyed-flatten-children": "5.0.1",
 		"react-markdown": "^9.0.0",
-		"react-stately": "3.42.0",
+		"react-stately": "3.46.0",
 		"react-swipeable": "7.0.2",
 		"remark-gfm": "^4.0.0",
 		"rollup-plugin-visualizer": "6.0.5",
@@ -252,7 +256,7 @@
 		}
 	},
 	"volta": {
-		"node": "22.20.0",
+		"node": "22.22.2",
 		"yarn": "4.10.3"
 	},
 	"packageManager": "yarn@4.10.3"