@autoguru/overdrive 4.37.0 → 4.38.0

package/dist/components/Box/argTypes.d.ts

@@ -1,5 +1,5 @@
 import { ArgTypes } from '@storybook/react';
-import { ComponentProps } from 'react';
+import { type ComponentProps } from 'react';
 import { Tokens } from '../../themes/tokens';
 import { Box } from './Box';
 export declare const scaleOptions: Array<keyof Tokens['space']>;

package/dist/components/Box/argTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"argTypes.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/argTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAWrD,CAAC;AAoCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CA0ErE,CAAC"}
+{"version":3,"file":"argTypes.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/argTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAWrD,CAAC;AAoCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CA0ErE,CAAC"}

package/dist/components/BulletText/BulletText.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { BoxStyleProps } from '../Box';
-export interface Props extends Partial<Pick<BoxStyleProps, 'is'>> {
+export interface Props extends Partial<Pick<BoxStyleProps, 'as' | 'is'>> {
     bullet?: ReactNode;
     variant?: 'primary' | 'secondary';
     children?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"BulletText.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAO,aAAa,EAAE,MAAM,QAAQ,CAAC;AAM5C,MAAM,WAAW,KAAM,SAAQ,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAChE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CA0C/C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"BulletText.d.ts","sourceRoot":"","sources":["../../../lib/components/BulletText/BulletText.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAO,aAAa,EAAE,MAAM,QAAQ,CAAC;AAM5C,MAAM,WAAW,KAAM,SAAQ,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CA2C/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/BulletText/BulletText.js

@@ -12,7 +12,8 @@ export const BulletText = _ref => {
   let {
     variant = 'primary',
     children,
-    is: Component = 'div',
+    as = 'div',
+    is: Component = as,
     bullet: Bullet = '•'
   } = _ref;
   return _jsxs(Inline, {

package/dist/components/DateTimePicker/CalendarButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type AriaButtonProps } from 'react-aria';
+export declare const CalendarButton: (props: AriaButtonProps) => React.JSX.Element;
+//# sourceMappingURL=CalendarButton.d.ts.map

package/dist/components/DateTimePicker/CalendarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarButton.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/CalendarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAa,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAK7D,eAAO,MAAM,cAAc,UAAW,eAAe,sBA8BpD,CAAC"}

package/dist/components/DateTimePicker/CalendarButton.js

@@ -0,0 +1,47 @@
+"use strict";
+
+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 React, { useRef } from 'react';
+import { useButton } from 'react-aria';
+import { focusOutline } from "../../styles/focusOutline.css.js";
+import { odStyle } from "../../styles/sprinkles.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CalendarButton = props => {
+  const ref = useRef(null);
+  const {
+    buttonProps
+  } = useButton(props, ref);
+  return _jsx("button", _objectSpread(_objectSpread({}, buttonProps), {}, {
+    className: odStyle(_objectSpread({
+      alignItems: 'center',
+      background: {
+        initial: 'white',
+        hover: 'gray200',
+        disabled: 'white'
+      },
+      borderColor: {
+        initial: 'gray',
+        disabled: 'light'
+      },
+      borderRadius: '2',
+      borderStyle: 'solid',
+      borderWidth: '1',
+      color: {
+        initial: 'gray600',
+        disabled: 'gray300'
+      },
+      cursor: {
+        hover: 'pointer',
+        disabled: 'default'
+      },
+      display: 'flex',
+      justifyContent: 'center',
+      padding: 'none',
+      size: '7'
+    }, focusOutline)),
+    ref: ref,
+    children: props.children
+  }));
+};

package/dist/components/DateTimePicker/CalendarGrid.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type AriaCalendarGridProps } from 'react-aria';
+import type { CalendarState } from 'react-stately';
+interface CalendarGridProps extends AriaCalendarGridProps {
+    state: CalendarState;
+}
+export declare const CalendarGrid: ({ state, ...props }: CalendarGridProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=CalendarGrid.d.ts.map

package/dist/components/DateTimePicker/CalendarGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarGrid.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/CalendarGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAKN,KAAK,qBAAqB,EAC1B,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAgDnD,UAAU,iBAAkB,SAAQ,qBAAqB;IACxD,KAAK,EAAE,aAAa,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,wBAAyB,iBAAiB,sBAgDlE,CAAC"}

package/dist/components/DateTimePicker/CalendarGrid.js

@@ -0,0 +1,87 @@
+"use strict";
+
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["state"];
+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 { getWeeksInMonth } from '@internationalized/date';
+import React, { useRef } from 'react';
+import { useCalendarCell, useCalendarGrid, useLocale } from 'react-aria';
+import { odStyle } from "../../styles/sprinkles.css.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { calendarGridStyle, styledCell } from "./DateTimePicker.css.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CalendarCell = _ref => {
+  let {
+    state,
+    date
+  } = _ref;
+  const ref = useRef(null);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    isUnavailable,
+    formattedDate
+  } = useCalendarCell({
+    date
+  }, state, ref);
+  return _jsx("td", _objectSpread(_objectSpread({}, cellProps), {}, {
+    className: odStyle({
+      padding: '1',
+      textAlign: 'center'
+    }),
+    children: _jsx("div", _objectSpread(_objectSpread(_objectSpread({}, buttonProps), {}, {
+      ref: ref,
+      hidden: isOutsideVisibleRange,
+      className: styledCell()
+    }, dataAttrs({
+      selected: isSelected,
+      disabled: isDisabled,
+      unvailable: isUnavailable
+    })), {}, {
+      children: formattedDate
+    }))
+  }));
+};
+export const CalendarGrid = _ref2 => {
+  let {
+      state
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  const {
+    locale
+  } = useLocale();
+  const {
+    gridProps,
+    headerProps,
+    weekDays
+  } = useCalendarGrid(props, state);
+  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale, props.firstDayOfWeek);
+  return _jsxs("table", _objectSpread(_objectSpread({}, gridProps), {}, {
+    className: calendarGridStyle,
+    children: [_jsx("thead", _objectSpread(_objectSpread({}, headerProps), {}, {
+      children: _jsx("tr", {
+        children: weekDays.map((day, index) => _jsx("th", {
+          className: odStyle({
+            color: 'gray600'
+          }),
+          children: day
+        }, index))
+      })
+    })), _jsx("tbody", {
+      children: _toConsumableArray(Array.from({
+        length: weeksInMonth
+      }).keys()).map(weekIndex => _jsx("tr", {
+        children: state.getDatesInWeek(weekIndex).map((date, i) => date ? _jsx(CalendarCell, {
+          state: state,
+          date: date
+        }, i) : _jsx("td", {}, i))
+      }, weekIndex))
+    })]
+  }));
+};

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

@@ -0,0 +1,10 @@
+export declare const queryContainer: string;
+export declare const queryContainerStyle: string;
+export declare const layoutStyle: string;
+export declare const calendarGridStyle: string;
+export declare const styledCell: import("@vanilla-extract/recipes").RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+    };
+}>;
+//# sourceMappingURL=DateTimePicker.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/DateTimePicker.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,cAAc,QAAoB,CAAC;AAChD,eAAO,MAAM,mBAAmB,QAG9B,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC;AAGH,eAAO,MAAM,UAAU;;;;EA2BrB,CAAC"}

package/dist/components/DateTimePicker/DateTimePicker.css.js

@@ -0,0 +1,60 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/DateTimePicker/DateTimePicker.css.ts", "@autoguru/overdrive");
+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 { createContainer, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { focusOutline } from "../../styles/focusOutline.css.js";
+import { odStyle } from "../../styles/sprinkles.css.js";
+import { tokens } from "../../themes/base/tokens.js";
+import { breakpoints } from "../../themes/makeTheme.js";
+export const queryContainer = createContainer("queryContainer");
+export const queryContainerStyle = style({
+  containerName: queryContainer,
+  containerType: 'inline-size'
+}, "queryContainerStyle");
+export const layoutStyle = style({
+  '@container': {
+    [`${queryContainer} (min-width: ${breakpoints.tablet})`]: {
+      display: 'flex',
+      gap: tokens.space[7]
+    }
+  }
+}, "layoutStyle");
+export const calendarGridStyle = style({
+  width: '100%',
+  '@container': {
+    [`${queryContainer} (min-width: ${breakpoints.tablet})`]: {
+      width: 'auto'
+    }
+  }
+}, "calendarGridStyle");
+export const styledCell = recipe({
+  base: [odStyle(_objectSpread({
+    alignItems: 'center',
+    background: {
+      initial: 'white',
+      hover: 'gray200',
+      selected: 'gray900',
+      disabled: 'white'
+    },
+    borderRadius: '2',
+    color: {
+      initial: 'gray900',
+      selected: 'white',
+      disabled: 'gray400'
+    },
+    cursor: {
+      initial: 'pointer',
+      disabled: 'default'
+    },
+    display: 'inline-flex',
+    fontSize: 'md',
+    justifyContent: 'center',
+    size: '7'
+  }, focusOutline))]
+}, "styledCell");
+__vanilla_filescope__.endFileScope();

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { type AriaCalendarProps, type DateValue } from 'react-aria';
+import type { WithTestId } from '../../types';
+import { type OptionGridProps, type OptionItem } from '../OptionGrid/OptionGrid';
+declare const defaultEnglish: {
+    readonly dateLabel: "Date";
+    readonly timeLabel: "Time";
+    readonly nextLabel: "Next month";
+    readonly prevLabel: "Previous month";
+};
+type LangContent = keyof typeof defaultEnglish;
+export type DateAndOption = {
+    date: DateValue;
+    timeOption: string;
+};
+export interface DateTimePickerProps<D extends DateValue> {
+    title?: string;
+    calendar?: Exclude<AriaCalendarProps<D>, 'onChange'>;
+    timeOptions: OptionGridProps<OptionItem>;
+    allowPastDate?: boolean;
+    onChange?: (value: DateAndOption) => void;
+    lang?: Partial<Record<LangContent, string>>;
+}
+export declare const DateTimePicker: <D extends DateValue>({ allowPastDate, calendar, lang, onChange, timeOptions, title, testId, }: WithTestId<DateTimePickerProps<D>>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=DateTimePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAKN,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,MAAM,YAAY,CAAC;AAIpB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAEN,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,MAAM,0BAA0B,CAAC;AAMlC,QAAA,MAAM,cAAc;;;;;CAKV,CAAC;AAEX,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAC/C,MAAM,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,SAAS;IAIvD,KAAK,CAAC,EAAE,MAAM,CAAC;IASf,QAAQ,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IAKrD,WAAW,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IAIzC,aAAa,CAAC,EAAE,OAAO,CAAC;IAOxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAI1C,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;CAC5C;AA4BD,eAAO,MAAM,cAAc,0JA4J1B,CAAC"}

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,165 @@
+"use strict";
+
+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 { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
+import { getLocalTimeZone, GregorianCalendar, today } from '@internationalized/date';
+import React, { useEffect, useRef } from 'react';
+import { useCalendar, useLocale, useId } from 'react-aria';
+import { useCalendarState } from 'react-stately';
+import { odStyle } from "../../styles/sprinkles.css.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
+import { Icon } from "../Icon/index.js";
+import { OptionGrid } from "../OptionGrid/OptionGrid.js";
+import { CalendarButton } from "./CalendarButton.js";
+import { CalendarGrid } from "./CalendarGrid.js";
+import { layoutStyle, queryContainerStyle } from "./DateTimePicker.css.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultEnglish = {
+  dateLabel: 'Date',
+  timeLabel: 'Time',
+  nextLabel: 'Next month',
+  prevLabel: 'Previous month'
+};
+function createCalendar(identifier) {
+  if (identifier === 'gregory') {
+    return new GregorianCalendar();
+  }
+  throw new Error(`Unsupported calendar configured ${identifier}`);
+}
+export const DateTimePicker = _ref => {
+  var _lang$dateLabel, _lang$prevLabel, _lang$nextLabel, _lang$timeLabel;
+  let {
+    allowPastDate = false,
+    calendar,
+    lang,
+    onChange,
+    timeOptions,
+    title,
+    testId
+  } = _ref;
+  const selectedDate = useRef(null);
+  const selectedTimeOption = useRef(null);
+  const handleChange = () => {
+    var _selectedTimeOption$c;
+    if (selectedDate.current && (_selectedTimeOption$c = selectedTimeOption.current) !== null && _selectedTimeOption$c !== void 0 && _selectedTimeOption$c.length) {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        date: selectedDate.current,
+        timeOption: selectedTimeOption.current
+      });
+    }
+  };
+  const handleTimeChange = keys => {
+    if (keys === 'all') return;
+    const time = keys.values().next().value;
+    selectedTimeOption.current = time;
+    handleChange();
+  };
+  const calendarComponentProps = _objectSpread({
+    defaultValue: today(getLocalTimeZone()),
+    firstDayOfWeek: 'sun',
+    minValue: allowPastDate ? undefined : today(getLocalTimeZone()),
+    onChange: value => {
+      selectedDate.current = value;
+      handleChange();
+    }
+  }, calendar);
+  const optionGridComponentProps = _objectSpread({
+    columns: '3',
+    onSelectionChange: handleTimeChange,
+    indicator: 'none',
+    selectionMode: 'single',
+    disallowEmptySelection: true
+  }, timeOptions);
+  const {
+    locale
+  } = useLocale();
+  const state = useCalendarState(_objectSpread(_objectSpread({}, calendarComponentProps), {}, {
+    locale,
+    createCalendar
+  }));
+  const {
+    calendarProps,
+    prevButtonProps,
+    nextButtonProps,
+    title: calendarTitle
+  } = useCalendar(calendarComponentProps, state);
+  const titleId = useId();
+  useEffect(() => {
+    if (state.value) {
+      selectedDate.current = state.value;
+    }
+  }, []);
+  return _jsxs("div", _objectSpread(_objectSpread({
+    role: "group",
+    "aria-labelledby": titleId,
+    className: queryContainerStyle
+  }, dataAttrs({
+    'test-id': testId
+  })), {}, {
+    children: [title && _jsx("h2", {
+      id: titleId,
+      className: odStyle({
+        font: '2xl',
+        fontWeight: 'bold'
+      }),
+      children: title
+    }), _jsxs("div", {
+      className: layoutStyle,
+      children: [_jsxs("div", {
+        className: odStyle({
+          flexShrink: 0
+        }),
+        children: [_jsx("h3", {
+          className: odStyle({
+            font: 'xl',
+            fontWeight: 'bold'
+          }),
+          children: (_lang$dateLabel = lang === null || lang === void 0 ? void 0 : lang.dateLabel) !== null && _lang$dateLabel !== void 0 ? _lang$dateLabel : defaultEnglish.dateLabel
+        }), _jsxs("div", _objectSpread(_objectSpread({}, calendarProps), {}, {
+          className: odStyle({
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between',
+            marginBottom: '2',
+            paddingX: '1'
+          }),
+          children: [_jsx(CalendarButton, _objectSpread(_objectSpread({}, prevButtonProps), {}, {
+            "aria-label": (_lang$prevLabel = lang === null || lang === void 0 ? void 0 : lang.prevLabel) !== null && _lang$prevLabel !== void 0 ? _lang$prevLabel : defaultEnglish.prevLabel,
+            children: _jsx(Icon, {
+              icon: ChevronLeftIcon,
+              size: "medium"
+            })
+          })), _jsx("h4", {
+            className: odStyle({
+              fontWeight: 'bold',
+              margin: 'none'
+            }),
+            children: calendarTitle
+          }), _jsx(CalendarButton, _objectSpread(_objectSpread({}, nextButtonProps), {}, {
+            "aria-label": (_lang$nextLabel = lang === null || lang === void 0 ? void 0 : lang.nextLabel) !== null && _lang$nextLabel !== void 0 ? _lang$nextLabel : defaultEnglish.nextLabel,
+            children: _jsx(Icon, {
+              icon: ChevronRightIcon,
+              size: "medium"
+            })
+          }))]
+        })), _jsx(CalendarGrid, {
+          state: state,
+          firstDayOfWeek: calendarComponentProps.firstDayOfWeek
+        })]
+      }), _jsxs("div", {
+        className: odStyle({
+          flexGrow: 1
+        }),
+        children: [_jsx("h3", {
+          className: odStyle({
+            font: 'xl',
+            fontWeight: 'bold'
+          }),
+          children: (_lang$timeLabel = lang === null || lang === void 0 ? void 0 : lang.timeLabel) !== null && _lang$timeLabel !== void 0 ? _lang$timeLabel : defaultEnglish.timeLabel
+        }), _jsx(OptionGrid, _objectSpread({}, optionGridComponentProps))]
+      })]
+    })]
+  }));
+};

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

@@ -1,14 +1,38 @@
 import { type RecipeVariants } from '@vanilla-extract/recipes';
-export declare const styledGridContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const gridContainer: string;
+export declare const gridContainerStyle: string;
+export declare const styledGrid: import("@vanilla-extract/recipes").RuntimeFn<{
     columns: {
         '1': {};
-        '2': string;
-        '3': string;
+        '2': {
+            '@container': {
+                [x: string]: {
+                    gridTemplateColumns: "repeat(2, 1fr)";
+                } | {
+                    gridTemplateColumns: "repeat(3, 1fr)";
+                };
+            };
+        };
+        '3': {
+            '@container': {
+                [x: string]: {
+                    gridTemplateColumns: "repeat(2, 1fr)";
+                } | {
+                    gridTemplateColumns: "repeat(3, 1fr)";
+                };
+            };
+        };
         '4': string;
-        '5': string;
+        '5': (string | {
+            '@container': {
+                [x: string]: {
+                    gridTemplateColumns: "repeat(5, 1fr)";
+                };
+            };
+        })[];
     };
 }>;
-export type StyledGridContainerProps = NonNullable<RecipeVariants<typeof styledGridContainer>>;
+export type StyledGridProps = NonNullable<RecipeVariants<typeof styledGrid>>;
 export declare const styledGridItem: import("@vanilla-extract/recipes").RuntimeFn<{
     [x: string]: {
         [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;

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

@@ -1 +1 @@
-{"version":3,"file":"OptionGrid.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAOvE,eAAO,MAAM,mBAAmB;;;;;;;;EA8B9B,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,WAAW,CACjD,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAC1C,CAAC;AAyBF,eAAO,MAAM,cAAc;;;;EAkCzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAGF,eAAO,MAAM,cAAc,QAGzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;EA2BzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAwBF,eAAO,MAAM,iBAAiB;;;;EAoB5B,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAC/C,cAAc,CAAC,OAAO,iBAAiB,CAAC,CACxC,CAAC"}
+{"version":3,"file":"OptionGrid.css.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQvE,eAAO,MAAM,aAAa,QAAoB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAuBH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CrB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC;AAyB7E,eAAO,MAAM,cAAc;;;;EAkCzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAGF,eAAO,MAAM,cAAc,QAGzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;EA2BzB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAC5C,cAAc,CAAC,OAAO,cAAc,CAAC,CACrC,CAAC;AAwBF,eAAO,MAAM,iBAAiB;;;;EAoB5B,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAC/C,cAAc,CAAC,OAAO,iBAAiB,CAAC,CACxC,CAAC"}

package/dist/components/OptionGrid/OptionGrid.css.js

@@ -5,65 +5,80 @@ import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/OptionGrid/OptionGrid.css.ts", "@autoguru/overdrive");
 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 { style } from '@vanilla-extract/css';
+import { createContainer, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 import { focusOutline } from "../../styles/focusOutline.css.js";
 import { odStyle } from "../../styles/sprinkles.css.js";
 import { tokens } from "../../themes/base/tokens.js";
-export const styledGridContainer = recipe({
-  base: odStyle({
-    display: {
-      mobile: 'flex'
+import { breakpoints } from "../../themes/makeTheme.js";
+export const gridContainer = createContainer("gridContainer");
+export const gridContainerStyle = style({
+  containerName: gridContainer,
+  containerType: 'inline-size'
+}, "gridContainerStyle");
+const minWidth1200 = '(min-width: 1200px)';
+const repeat2Col = 'repeat(2, 1fr)';
+const repeat3Col = 'repeat(3, 1fr)';
+const repeat4Col = 'repeat(4, 1fr)';
+const repeat5Col = 'repeat(5, 1fr)';
+const grid4ColStyle = style({
+  '@container': {
+    [`${gridContainer} (min-width: ${breakpoints.mobile})`]: {
+      gridTemplateColumns: repeat2Col
+    },
+    [`${gridContainer} (min-width: ${breakpoints.tablet})`]: {
+      gridTemplateColumns: repeat3Col
     },
-    flexDirection: {
-      mobile: 'column'
+    [`${gridContainer} (min-width: ${breakpoints.desktop})`]: {
+      gridTemplateColumns: repeat4Col
+    }
+  }
+}, "grid4ColStyle");
+export const styledGrid = recipe({
+  base: odStyle({
+    display: 'grid',
+    gridColumns: {
+      mobile: '1'
     },
     gap: '3'
   }),
   variants: {
     columns: {
       '1': {},
-      '2': odStyle({
-        display: {
-          tablet: 'grid'
-        },
-        gridColumns: {
-          tablet: '2'
-        }
-      }),
-      '3': odStyle({
-        display: {
-          tablet: 'grid'
-        },
-        gridColumns: {
-          tablet: '2',
-          desktop: '3'
+      '2': {
+        '@container': {
+          [`${gridContainer} (min-width: 640px)`]: {
+            gridTemplateColumns: repeat2Col
+          },
+          [`${gridContainer} ${minWidth1200}`]: {
+            gridTemplateColumns: repeat3Col
+          }
         }
-      }),
-      '4': odStyle({
-        display: {
-          tablet: 'grid'
-        },
-        gridColumns: {
-          tablet: '3',
-          desktop: '4'
+      },
+      '3': {
+        '@container': {
+          [`${gridContainer} (min-width: 550px)`]: {
+            gridTemplateColumns: repeat2Col
+          },
+          [`${gridContainer} (min-width: ${breakpoints.desktop})`]: {
+            gridTemplateColumns: repeat3Col
+          }
         }
-      }),
-      '5': odStyle({
-        display: {
-          tablet: 'grid'
-        },
-        gridColumns: {
-          tablet: '3',
-          desktop: '5'
+      },
+      '4': grid4ColStyle,
+      '5': [grid4ColStyle, {
+        '@container': {
+          [`${gridContainer} ${minWidth1200}`]: {
+            gridTemplateColumns: repeat5Col
+          }
         }
-      })
+      }]
     }
   },
   defaultVariants: {
     columns: '2'
   }
-}, "styledGridContainer");
+}, "styledGrid");
 const optionTransition = style({
   transition: 'background 80ms ease-in'
 }, "optionTransition");

package/dist/components/OptionGrid/OptionGrid.d.ts

@@ -3,7 +3,7 @@ import { type ListBoxProps } from 'react-aria-components';
 import { type SelectionMode } from 'react-stately';
 import type { WithTestId } from '../../types';
 import { type IconEl } from '../Icon';
-import { type StyledGridContainerProps } from './OptionGrid.css';
+import { type StyledGridProps } from './OptionGrid.css';
 export interface OptionItem {
     name: string;
     label: string;
@@ -16,7 +16,7 @@ export interface OptionGridProps<T> extends Omit<ListBoxProps<T>, 'items'> {
     items: OptionItem[];
     indicator?: 'none' | 'checkbox' | 'radio';
     selectionMode?: SelectionMode;
-    columns?: StyledGridContainerProps['columns'];
+    columns?: StyledGridProps['columns'];
 }
 export declare const OptionGrid: ({ className, columns, indicator, label, layout, selectionMode, testId, ...props }: WithTestId<OptionGridProps<OptionItem>>) => React.JSX.Element;
 //# sourceMappingURL=OptionGrid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OptionGrid.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIN,KAAK,YAAY,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EAMN,KAAK,wBAAwB,EAC7B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,UAAU;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAIf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;IAIzE,KAAK,EAAE,MAAM,CAAC;IAId,KAAK,EAAE,UAAU,EAAE,CAAC;IAIpB,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAI1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAI9B,OAAO,CAAC,EAAE,wBAAwB,CAAC,SAAS,CAAC,CAAC;CAC9C;AAgBD,eAAO,MAAM,UAAU,sFASpB,WAAW,gBAAgB,UAAU,CAAC,CAAC,sBA+EzC,CAAC"}
+{"version":3,"file":"OptionGrid.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIN,KAAK,YAAY,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EAON,KAAK,eAAe,EACpB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,UAAU;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAIf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;IAIzE,KAAK,EAAE,MAAM,CAAC;IAId,KAAK,EAAE,UAAU,EAAE,CAAC;IAIpB,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAI1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAI9B,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACrC;AAgBD,eAAO,MAAM,UAAU,sFASpB,WAAW,gBAAgB,UAAU,CAAC,CAAC,sBAmFzC,CAAC"}

package/dist/components/OptionGrid/OptionGrid.js

@@ -12,7 +12,7 @@ import { ListBox, ListBoxItem, Text } from 'react-aria-components';
 import { odStyle } from "../../styles/sprinkles.css.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Icon } from "../Icon/index.js";
-import { styledCheckbox, styledGridContainer, styledGridItem, styledRadioButton, styleIndicator } from "./OptionGrid.css.js";
+import { gridContainerStyle, styledCheckbox, styledGrid, styledGridItem, styledRadioButton, styleIndicator } from "./OptionGrid.css.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const OptionGrid = _ref => {
   let {
@@ -25,77 +25,80 @@ export const OptionGrid = _ref => {
       testId
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return _jsx(ListBox, _objectSpread(_objectSpread(_objectSpread({
-    "aria-label": label,
-    layout: layout,
-    selectionMode: selectionMode,
-    className: clsx([styledGridContainer({
-      columns
-    }), className])
-  }, dataAttrs({
-    'test-id': testId
-  })), props), {}, {
-    children: _ref2 => {
-      let {
-        description,
-        icon,
-        label,
-        name
-      } = _ref2;
-      return _jsx(ListBoxItem, {
-        className: styledGridItem(),
-        id: name,
-        textValue: label,
-        children: _ref3 => {
-          let {
-            isFocusVisible,
-            isHovered,
-            isSelected
-          } = _ref3;
-          const hasIndicator = indicator !== 'none';
-          const hasNoInteraction = !isFocusVisible && !isHovered && !isSelected;
-          const IndicatorIcon = () => {
-            if (icon && hasNoInteraction) return _jsx(Icon, {
-              icon: icon,
-              size: "100%"
-            });
-            const styledIndicator = indicator === 'radio' ? styledRadioButton : styledCheckbox;
-            return _jsx("div", _objectSpread(_objectSpread({
-              className: styledIndicator()
-            }, dataAttrs({
-              'focus-visible': isFocusVisible,
-              hover: isHovered,
-              selected: isSelected
-            })), {}, {
-              children: indicator === 'checkbox' && _jsx(Icon, {
-                icon: CheckIcon
-              })
-            }));
-          };
-          return _jsxs(_Fragment, {
-            children: [hasIndicator && _jsx("div", {
-              className: styleIndicator,
-              children: _jsx(IndicatorIcon, {})
-            }), _jsxs("div", {
-              children: [_jsx(Text, {
-                slot: "label",
-                elementType: "div",
-                className: odStyle({
-                  fontSize: 'md'
-                }),
-                children: label
-              }), description && _jsx(Text, {
-                slot: "description",
-                elementType: "div",
-                className: odStyle({
-                  fontSize: 'xs'
-                }),
-                children: description
+  return _jsx("div", {
+    className: gridContainerStyle,
+    children: _jsx(ListBox, _objectSpread(_objectSpread(_objectSpread({
+      "aria-label": label,
+      layout: layout,
+      selectionMode: selectionMode,
+      className: clsx([styledGrid({
+        columns
+      }), className])
+    }, dataAttrs({
+      'test-id': testId
+    })), props), {}, {
+      children: _ref2 => {
+        let {
+          description,
+          icon,
+          label,
+          name
+        } = _ref2;
+        return _jsx(ListBoxItem, {
+          className: styledGridItem(),
+          id: name,
+          textValue: label,
+          children: _ref3 => {
+            let {
+              isFocusVisible,
+              isHovered,
+              isSelected
+            } = _ref3;
+            const hasIndicator = indicator !== 'none';
+            const hasNoInteraction = !isFocusVisible && !isHovered && !isSelected;
+            const IndicatorIcon = () => {
+              if (icon && hasNoInteraction) return _jsx(Icon, {
+                icon: icon,
+                size: "100%"
+              });
+              const styledIndicator = indicator === 'radio' ? styledRadioButton : styledCheckbox;
+              return _jsx("div", _objectSpread(_objectSpread({
+                className: styledIndicator()
+              }, dataAttrs({
+                'focus-visible': isFocusVisible,
+                hover: isHovered,
+                selected: isSelected
+              })), {}, {
+                children: indicator === 'checkbox' && _jsx(Icon, {
+                  icon: CheckIcon
+                })
+              }));
+            };
+            return _jsxs(_Fragment, {
+              children: [hasIndicator && _jsx("div", {
+                className: styleIndicator,
+                children: _jsx(IndicatorIcon, {})
+              }), _jsxs("div", {
+                children: [_jsx(Text, {
+                  slot: "label",
+                  elementType: "div",
+                  className: odStyle({
+                    fontSize: 'md'
+                  }),
+                  children: label
+                }), description && _jsx(Text, {
+                  slot: "description",
+                  elementType: "div",
+                  className: odStyle({
+                    fontSize: 'xs'
+                  }),
+                  children: description
+                })]
               })]
-            })]
-          });
-        }
-      });
-    }
-  }));
+            });
+          }
+        });
+      }
+    }))
+  });
 };

package/dist/components/OrderedList/OrderedList.js

@@ -25,7 +25,7 @@ export const OrderedList = _ref => {
     myCycle = type === null ? cycle + 1 : cycles.indexOf(type);
   }
   return _jsx(Box, {
-    is: "ol",
+    as: "ol",
     paddingLeft: "6",
     marginTop: myCycle > 0 ? '2' : 'none',
     className: clsx(styles.root.default, useTextStyles({
@@ -52,7 +52,7 @@ const Item = _ref2 => {
     children
   } = _ref2;
   return _jsx(Box, {
-    is: "li",
+    as: "li",
     className: className,
     children: children
   });

package/dist/components/Radio/RadioGroup.d.ts

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 export interface Props {
     name: string;
     className?: string;

package/dist/components/Radio/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../lib/components/Radio/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGN,SAAS,EAGT,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,KAAK;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,UAAU,iBAAiB;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,yCAAgD,CAAC;AAE1E,eAAO,MAAM,eAAe,QAAO,iBACT,CAAC;AAE3B,eAAO,MAAM,UAAU,8EAuBtB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../lib/components/Radio/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKb,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,KAAK;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,UAAU,iBAAiB;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,yCAAgD,CAAC;AAE1E,eAAO,MAAM,eAAe,QAAO,iBACT,CAAC;AAE3B,eAAO,MAAM,UAAU,8EAuBtB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Radio/RadioGroup.js

@@ -1,7 +1,6 @@
 "use strict";
 
-import * as React from 'react';
-import { createContext, forwardRef, useContext, useMemo } from 'react';
+import React, { createContext, forwardRef, useContext, useMemo } from 'react';
 import { Box } from "../Box/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const RadioContext = createContext(null);

package/dist/components/Stack/Stack.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode } from 'react';
 import type { BoxStyleProps } from '../Box';
 import * as styles from './Stack.css';
-export interface Props extends Pick<BoxStyleProps, 'is' | 'width' | 'alignItems'> {
+export interface Props extends Pick<BoxStyleProps, 'as' | 'is' | 'width' | 'alignItems'> {
     space?: keyof typeof styles.child.spaces;
     className?: string;
     dividers?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI5C,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,OAAO,GAAG,YAAY,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAOD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CA0C1C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI5C,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,YAAY,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAOD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CA2C1C,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Stack/Stack.js

@@ -13,6 +13,7 @@ export const Stack = _ref => {
     space = '2',
     children,
     is = 'div',
+    as = is,
     alignItems,
     width,
     dividers = false,
@@ -25,13 +26,13 @@ export const Stack = _ref => {
     });
   }
   let listItem = 'div';
-  if (typeof is === 'string') listItem = supportedListTypes.includes(is) ? 'li' : 'div';
+  if (typeof as === 'string') listItem = supportedListTypes.includes(as) ? 'li' : 'div';
   return _jsx(Box, {
-    is: is,
+    as: as,
     className: className,
     width: width,
     children: Children.map(items, (child, idx) => _jsxs(Box, {
-      is: listItem,
+      as: listItem,
       display: alignItems ? 'flex' : void 0,
       flexDirection: "column",
       alignItems: alignItems,

package/dist/components/StickyBox/StickyBox.js

@@ -28,7 +28,7 @@ export const StickyBox = _ref => {
   const [withShadow, setWithShadow] = useState(false);
   useEffect(() => {
     var _containerRef$current;
-    if (!((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.parentElement) || !globalThis) return void 0;
+    if (!((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.parentElement) || !window) return void 0;
     const parentElement = containerRef.current.parentElement;
     const onScroll = () => {
       setWithShadow(parentElement.scrollTop > 3);

package/dist/components/Text/useTextStyles.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import { type ComponentProps } from 'react';
 import type { BoxStyleProps } from '../Box';
 import { Text } from '../Text';
 import * as styles from './useTextStyles.css';

package/dist/components/Text/useTextStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/useTextStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAE9C,MAAM,WAAW,cAAc;IAE9B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;IAC5C,EAAE,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CAC1C;AAED,eAAO,MAAM,aAAa,2EASvB,cAAc,WAWhB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useTextStyles.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/useTextStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAE9C,MAAM,WAAW,cAAc;IAE9B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,UAAU,CAAC;IAC5C,EAAE,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CAC1C;AAED,eAAO,MAAM,aAAa,2EASvB,cAAc,WAWhB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/hooks/useMedia/useMedia.js

@@ -11,12 +11,12 @@ export const useMedia = function (queries) {
   } = useRuntimeTokens();
   if (!isBrowser) return queries.map(() => fallbackCase);
   const getQueries = useCallback(() => queries.map(media => `(min-width: ${breakpoints[media]})`), [breakpoints]);
-  const matchesInit = useMemo(() => getQueries().map(query => globalThis.matchMedia(query).matches), [getQueries]);
+  const matchesInit = useMemo(() => getQueries().map(query => window.matchMedia(query).matches), [getQueries]);
   const [matches, setMatches] = useState(matchesInit);
   if (isBrowser) {
     useLayoutEffect(() => {
       let isMounted = true;
-      const matchers = getQueries().map(query => globalThis.matchMedia(query));
+      const matchers = getQueries().map(query => window.matchMedia(query));
       const removeHandlersFn = matchers.map((matcher, idx) => {
         const handler = e => {
           if (!isMounted) return;

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

@@ -152,11 +152,11 @@ export declare const odStyle: ((props: {
         selected?: "1" | "2" | "3" | "4" | "5" | "none" | undefined;
     } | undefined;
 } & {
-    display?: "none" | "flex" | "grid" | "block" | {
-        mobile?: "none" | "flex" | "grid" | "block" | undefined;
-        tablet?: "none" | "flex" | "grid" | "block" | undefined;
-        desktop?: "none" | "flex" | "grid" | "block" | undefined;
-        largeDesktop?: "none" | "flex" | "grid" | "block" | undefined;
+    display?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | {
+        mobile?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | undefined;
+        tablet?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | undefined;
+        desktop?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | undefined;
+        largeDesktop?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | undefined;
     } | undefined;
     flexDirection?: "column" | "row" | {
         mobile?: "column" | "row" | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AAuMA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOnB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AA8MA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOnB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC"}

package/dist/styles/sprinkles.css.js

@@ -153,13 +153,13 @@ const displayProperties = defineProperties({
   conditions: _objectSpread({}, responsiveConditions),
   defaultCondition: 'mobile',
   properties: {
-    display: ['none', 'block', 'flex', 'grid'],
+    display: ['none', 'block', 'flex', 'grid', 'inline-block', 'inline-flex'],
     flexDirection: ['row', 'column'],
     flexGrow: [0, 1],
     flexShrink: [0, 1],
     flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
     gridTemplateColumns: {
-      '1': 'repeat(1, 1fr)',
+      '1': '1fr',
       '2': 'repeat(2, 1fr)',
       '3': 'repeat(3, 1fr)',
       '4': 'repeat(4, 1fr)',

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AACzD,OAAO,EAGN,eAAe,EAGf,MAAM,OAAO,CAAC;AAEf,eAAO,MAAM,SAAS,SAAoC,CAAC;AAE3D,eAAO,MAAM,sBAAsB,wBAA0C,CAAC;AAE9E,eAAO,MAAM,oBAAoB,0DAEP,IAAI,oCACT,IAAI,CAOxB,CAAC;AAGF,eAAO,MAAM,uBAAuB,sEAenC,CAAC;AAaF,eAAO,MAAM,KAAK,iBAAkB,MAAM,KAAG,MAAM,GAAG,IAmBrD,CAAC;AAEF,eAAO,MAAM,MAAM,oCAMlB,CAAC;AAOF,wBAAgB,SAAS,CAAC,CAAC,EAC1B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAUhB;AAED,eAAO,MAAM,aAAa,YAAa,GAAG,uBACoB,CAAC;AAE/D,eAAO,MAAM,QAAQ,oCAKsB,CAAC;AAE5C,eAAO,MAAM,aAAa,UAAW,IAAI,KAAG,QACZ,CAAC;AAEjC,eAAO,MAAM,WAAW,UAAW,IAAI,KAAG,MAEK,CAAC;AAShD,eAAO,MAAM,gBAAgB,8DAO5B,CAAC;AAMF,eAAO,MAAM,OAAO,6DAGf,MAAM,wBAER,CAAC,MAAM,IAAI,CAAC,GAAG,IA8BjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,eAAO,MAAM,wBAAwB,UAAW,SAAS,uCAKT,CAAC;AAYjD,eAAO,MAAM,eAAe,0EAK3B,CAAC;AAGF,eAAO,MAAM,IAAI,YAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AACzD,OAAO,EAGN,eAAe,EAGf,MAAM,OAAO,CAAC;AAEf,eAAO,MAAM,SAAS,SAAgC,CAAC;AAEvD,eAAO,MAAM,sBAAsB,wBAA0C,CAAC;AAE9E,eAAO,MAAM,oBAAoB,0DAEP,IAAI,oCACT,IAAI,CAOxB,CAAC;AAGF,eAAO,MAAM,uBAAuB,sEAenC,CAAC;AAaF,eAAO,MAAM,KAAK,iBAAkB,MAAM,KAAG,MAAM,GAAG,IAmBrD,CAAC;AAEF,eAAO,MAAM,MAAM,oCAMlB,CAAC;AAOF,wBAAgB,SAAS,CAAC,CAAC,EAC1B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAUhB;AAED,eAAO,MAAM,aAAa,YAAa,GAAG,uBACoB,CAAC;AAE/D,eAAO,MAAM,QAAQ,oCAKsB,CAAC;AAE5C,eAAO,MAAM,aAAa,UAAW,IAAI,KAAG,QACZ,CAAC;AAEjC,eAAO,MAAM,WAAW,UAAW,IAAI,KAAG,MACC,CAAC;AAS5C,eAAO,MAAM,gBAAgB,8DAO5B,CAAC;AAMF,eAAO,MAAM,OAAO,6DAGf,MAAM,wBAER,CAAC,MAAM,IAAI,CAAC,GAAG,IA8BjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,eAAO,MAAM,wBAAwB,UAAW,SAAS,uCAKT,CAAC;AAYjD,eAAO,MAAM,eAAe,0EAK3B,CAAC;AAGF,eAAO,MAAM,IAAI,YAAW,CAAC"}

package/dist/utils/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-export const isBrowser = typeof globalThis !== 'undefined';
+export const isBrowser = typeof window !== 'undefined';
 export const isomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
 export const useUncontrolledState = (value, onChange) => {
   if (typeof onChange === 'function') {
@@ -62,8 +62,7 @@ export const hex2rgba = function (c) {
 export const ownerDocument = node => (node === null || node === void 0 ? void 0 : node.ownerDocument) || document;
 export const ownerWindow = node => {
   var _ownerDocument;
-  return (((_ownerDocument = ownerDocument(node)) === null || _ownerDocument === void 0 ? void 0 : _ownerDocument.defaultView) || globalThis
-  );
+  return ((_ownerDocument = ownerDocument(node)) === null || _ownerDocument === void 0 ? void 0 : _ownerDocument.defaultView) || window;
 };
 export const useEventCallback = fn => {
   const ref = useRef(fn);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.37.0",
+	"version": "4.38.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -84,6 +84,7 @@
 		"@babel/runtime-corejs3": "^7.26.7",
 		"@changesets/cli": "^2.27.12",
 		"@chromatic-com/storybook": "^3.2.4",
+		"@internationalized/date": "^3.7.0",
 		"@octokit/rest": "^21.1.0",
 		"@popperjs/core": "^2.11.8",
 		"@react-stately/toggle": "^3.8.1",
@@ -107,17 +108,17 @@
 		"@types/react-dom": "^19.0.3",
 		"@types/webpack-env": "^1.18.8",
 		"@vanilla-extract/babel-plugin": "^1.2.0",
-		"@vanilla-extract/css": "^1.17.0",
+		"@vanilla-extract/css": "^1.17.1",
 		"@vanilla-extract/dynamic": "^2.1.2",
 		"@vanilla-extract/recipes": "^0.5.5",
 		"@vanilla-extract/sprinkles": "^1.6.3",
-		"@vanilla-extract/vite-plugin": "^4.0.19",
-		"@vanilla-extract/webpack-plugin": "^2.3.16",
+		"@vanilla-extract/vite-plugin": "^5.0.0",
+		"@vanilla-extract/webpack-plugin": "^2.3.17",
 		"babel-plugin-add-import-extension": "^1.6.0",
 		"babel-plugin-dev-expression": "^0.2.3",
 		"babel-plugin-macros": "^3.1.0",
 		"browserslist-config-autoguru": "^2.4.0",
-		"chromatic": "^11.25.1",
+		"chromatic": "^11.25.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
 		"concurrently": "^9.1.2",
@@ -125,7 +126,7 @@
 		"csstype": "^3.1.3",
 		"deepmerge": "^4.3.1",
 		"eslint": "^8.57.1",
-		"eslint-plugin-jest": "28.10.0",
+		"eslint-plugin-jest": "28.11.0",
 		"eslint-plugin-storybook": "^0.11.2",
 		"eslint-plugin-unicorn": "^56.0.1",
 		"intersection-observer": "^0.12.2",
@@ -141,7 +142,7 @@
 		"react-aria": "^3.37.0",
 		"react-aria-components": "^1.6.0",
 		"react-dom": "^19.0.0",
-		"react-focus-lock": "2.13.5",
+		"react-focus-lock": "2.13.6",
 		"react-intersection-observer": "^9.15.1",
 		"react-keyed-flatten-children": "^2.2.1",
 		"react-stately": "^3.35.0",
@@ -157,6 +158,7 @@
 	"peerDependencies": {
 		"@autoguru/icons": "^1.7.28",
 		"@autoguru/utilities": "^1.0.98",
+		"@internationalized/date": "^3.7.0",
 		"@popperjs/core": "^2.10.2",
 		"@vanilla-extract/dynamic": "^2.1.2",
 		"clsx": "^1.1.1",
@@ -164,6 +166,7 @@
 		"csstype": "^3.1.3",
 		"react": ">=18 || >=19.0.0-rc.0",
 		"react-aria": "^3.36.0",
+		"react-aria-components": "^1.6.0",
 		"react-dom": ">=18 || >=19.0.0-rc.0",
 		"react-focus-lock": "^2.5.0",
 		"react-intersection-observer": ">=9.4.3",
@@ -178,7 +181,7 @@
 		"@joshwooding/vite-plugin-react-docgen-typescript": "0.5.0"
 	},
 	"volta": {
-		"node": "20.18.1",
+		"node": "20.18.2",
 		"yarn": "4.6.0"
 	},
 	"packageManager": "yarn@4.6.0"