@autoguru/overdrive 4.46.0 → 4.47.0

package/dist/components/DatePicker/DatePicker.js

@@ -2,74 +2,191 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "icon", "size", "disabled", "isLoading", "valueLabel", "onChange"];
+const _excluded = ["calendarOptions", "className", "disabled", "icon", "isLoading", "lang", "onChange", "size", "testId", "useNativePicker", "valueLabel"];
 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 { CalendarIcon } from '@autoguru/icons';
+import { getLocalTimeZone, parseDate, today } from '@internationalized/date';
 import clsx from 'clsx';
-import * as React from 'react';
-import { sprinkles } from "../../styles/index.js";
-import { Box } from "../Box/Box.js";
+import React, { useMemo, useState } from 'react';
+import { elementStyles } from "../../styles/elementStyles.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { Calendar } from "../Calendar/index.js";
 import { Icon } from "../Icon/Icon.js";
+import { PopoverTrigger } from "../Popover/index.js";
 import { ProgressSpinner } from "../ProgressSpinner/ProgressSpinner.js";
 import { Text } from "../Text/Text.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import * as styles from "./DatePicker.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultEnglish = {
+  openCalendar: 'open calendar'
+};
 const textSizeMap = {
   small: '2',
   medium: '3',
   large: '5'
 };
+const formatDateToString = date => {
+  if (!date) return '';
+  return date.toString(); // ISO format: YYYY-MM-DD to match native input
+};
+const parseDateString = dateString => {
+  try {
+    return parseDate(dateString);
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * The DatePicker has been updated to render the Calendar component with a Popover while
+ * maintaining backwards compatability.
+ *
+ * ## Props
+ * - Visual size controlled by `size` (small | medium | large)
+ * - Icon can be customized via the `icon` prop
+ *
+ * ## Event handling
+ * - `onChange` is always invoked with the raw ISO date string (or empty string when cleared)
+ *
+ * ## Compatibility mode
+ * - Setting `useNativePicker={true}` preserves the original browser-specific experience.
+ *
+ * ## Internationalization
+ * - Override text values via `lang={{ openCalendar: 'open calendar' }}`
+ * - Calendar options including `lang`can be passed via `calendarOptions` prop
+ * - Date formatting helper available in `...utils/dateFormat.ts` or use `@internationalized/date` utils
+ * - Advanced i18n and localization handled by [React Aria I18Provider](https://react-spectrum.adobe.com/react-aria/I18nProvider.html)
+ * - Read more about [International calendars](https://react-spectrum.adobe.com/react-aria/useDatePicker.html#international-calendars)
+ *
+ *
+ * @example
+ * <DatePicker
+ *   name="bookingDate"
+ *   valueLabel="Select a date"
+ *   onChange={(isoDate) => console.log('Selected date:', isoDate)}
+ *   calendarOptions={{
+ *     allowPastDate: false,
+ *     weekdayFormat: 'short',
+ *   }}
+ * />
+ *
+ * @example
+ * // Native date picker usage
+ * <DatePicker
+ *   name="startDate"
+ *   useNativePicker
+ *   value={initialDateISO} // e.g., "2025-03-12"
+ *   onChange={(isoDate) => console.log('Native picked date:', isoDate)}
+ * />
+ */
 export const DatePicker = _ref => {
+  var _lang$openCalendar;
   let {
-      className = '',
-      icon = CalendarIcon,
-      size = 'medium',
+      calendarOptions,
+      className,
       disabled = false,
+      icon = CalendarIcon,
       isLoading = false,
-      valueLabel,
-      onChange
+      lang,
+      onChange,
+      size = 'medium',
+      testId,
+      useNativePicker = false,
+      valueLabel
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [popoverState, setPopoverState] = useState(null);
   const onChangeEvent = event => {
+    const dateString = event.currentTarget.value;
+    if (dateString) {
+      const parsedDate = parseDateString(dateString);
+      setSelectedDate(parsedDate);
+    } else {
+      setSelectedDate(null);
+    }
     if (typeof onChange === 'function') {
-      onChange(event.currentTarget.value);
+      onChange(dateString);
     }
   };
-  return /*#__PURE__*/_jsxs(Box, {
-    position: "relative",
-    overflow: "hidden",
-    className: clsx(className, {
+  const containerStyle = elementStyles({
+    className: [className, {
       [styles.disabled.default]: disabled,
       [styles.disabled.root]: disabled
-    }),
-    children: [/*#__PURE__*/_jsx(Box, _objectSpread({
-      as: "input",
-      position: "absolute",
-      height: "full",
-      width: "full",
-      disabled: disabled,
-      onChange: onChangeEvent,
-      className: clsx({
-        [styles.disabled.default]: disabled
-      }, styles.input),
-      type: "date"
-    }, inputProps)), /*#__PURE__*/_jsxs(Box, {
-      className: clsx(styles.contents.default, {
-        [styles.contents.withLabel]: Boolean(valueLabel)
-      }),
-      children: [isLoading ? /*#__PURE__*/_jsx(ProgressSpinner, {
-        className: clsx(styles.spinner, sprinkles({
-          position: 'absolute'
-        })),
-        size: size
-      }) : /*#__PURE__*/_jsx(Icon, {
-        icon: icon,
-        size: size
-      }), valueLabel && /*#__PURE__*/_jsx(Text, {
-        size: textSizeMap[size],
-        children: valueLabel
+    }]
+  });
+  const indicator = isLoading ? /*#__PURE__*/_jsx(ProgressSpinner, {
+    size: size
+  }) : /*#__PURE__*/_jsx(Icon, {
+    icon: icon,
+    size: size
+  });
+  const label = valueLabel ? /*#__PURE__*/_jsx(Text, {
+    size: textSizeMap[size],
+    children: valueLabel
+  }) : null;
+  const calendarProps = useMemo(() => ({
+    calendar: _objectSpread({
+      defaultValue: selectedDate || today(getLocalTimeZone())
+    }, calendarOptions),
+    onChange: date => {
+      setSelectedDate(date);
+      if (typeof onChange === 'function') {
+        onChange(formatDateToString(date));
+      }
+      // Close the popover after date selection
+      if (popoverState) {
+        popoverState.close();
+      }
+    }
+  }), [selectedDate, calendarOptions, onChange, popoverState]);
+  const contentCalendar = useMemo(() => /*#__PURE__*/_jsx(Calendar, _objectSpread({}, calendarProps)), [calendarProps]);
+
+  // Use native picker only if explicitly requested
+  if (useNativePicker) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: clsx(containerStyle, styles.inputContainer),
+      children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+        className: elementStyles({
+          className: [styles.input, {
+            [styles.disabled.default]: disabled
+          }]
+        }),
+        type: "date",
+        disabled: disabled,
+        onChange: onChangeEvent
+      })), /*#__PURE__*/_jsx("div", {
+        className: styles.inputOverlay,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: clsx(styles.contents.default, {
+            [styles.contents.withLabel]: Boolean(valueLabel)
+          }),
+          children: [indicator, label]
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: clsx(containerStyle, sprinkles({
+      display: 'flex',
+      alignItems: 'center',
+      gap: '1'
+    })),
+    children: [/*#__PURE__*/_jsxs(PopoverTrigger, {
+      content: contentCalendar,
+      placement: "bottom left",
+      testId: testId,
+      isDisabled: disabled,
+      onStateReady: setPopoverState,
+      children: [indicator, /*#__PURE__*/_jsx(VisuallyHidden, {
+        children: (_lang$openCalendar = lang === null || lang === void 0 ? void 0 : lang.openCalendar) !== null && _lang$openCalendar !== void 0 ? _lang$openCalendar : defaultEnglish.openCalendar
       })]
-    })]
+    }), label, /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+      value: formatDateToString(selectedDate),
+      type: "hidden"
+    }))]
   });
-};
+};
+DatePicker.displayName = 'DatePicker';

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

@@ -1,11 +1,4 @@
 export declare const queryContainer: string;
 export declare const queryContainerStyle: string;
 export declare const layoutStyle: string;
-export declare const calendarGridStyle: string;
-export declare const calendarStyle: string;
-export declare const cellStyle: string;
-export declare const buttonStyle: string;
-export declare const thStyle: string;
-export declare const tdStyle: string;
-export declare const titleStyle: string;
 //# sourceMappingURL=DateTimePicker.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/DateTimePicker.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,cAAc,QAAoB,CAAC;AAChD,eAAO,MAAM,mBAAmB,QAO9B,CAAC;AAEH,eAAO,MAAM,WAAW,QAWtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC;AAEH,eAAO,MAAM,aAAa,QAQxB,CAAC;AAIH,eAAO,MAAM,SAAS,QAmCpB,CAAC;AAIH,eAAO,MAAM,WAAW,QAoCtB,CAAC;AAEH,eAAO,MAAM,OAAO,QAMlB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAGH,eAAO,MAAM,UAAU,QAGrB,CAAC"}
+{"version":3,"file":"DateTimePicker.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/DateTimePicker.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,cAAc,QAAoB,CAAC;AAChD,eAAO,MAAM,mBAAmB,QAO9B,CAAC;AAEH,eAAO,MAAM,WAAW,QAWtB,CAAC"}

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

@@ -3,10 +3,7 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/DateTimePicker/DateTimePicker.css.ts", "@autoguru/overdrive");
 import { createContainer, style } from '@vanilla-extract/css';
-import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
 import { cssLayerComponent } from "../../styles/layers.css.js";
-import { selectors } from "../../styles/selectors.js";
-import { sprinkles } from "../../styles/sprinkles.css.js";
 import { breakpoints } from "../../themes/makeTheme.js";
 import { overdriveTokens as tokens } from "../../themes/theme.css.js"; // === Container styles
 export const queryContainer = createContainer("queryContainer");
@@ -30,111 +27,4 @@ export const layoutStyle = style({
     }
   }
 }, "layoutStyle");
-export const calendarGridStyle = style({
-  '@layer': {
-    [cssLayerComponent]: {
-      width: '100%',
-      '@container': {
-        [`${queryContainer} (min-width: ${breakpoints.tablet})`]: {
-          width: 'auto'
-        }
-      }
-    }
-  }
-}, "calendarGridStyle");
-export const calendarStyle = style([sprinkles({
-  alignItems: 'center',
-  display: 'flex',
-  justifyContent: 'spaceBetween',
-  mb: '2',
-  px: '1'
-})], "calendarStyle");
-
-// === Cell styles
-
-export const cellStyle = style([sprinkles({
-  alignItems: 'center',
-  display: 'flex',
-  justifyContent: 'center',
-  size: '7',
-  borderRadius: 'md'
-}), {
-  '@layer': {
-    [cssLayerComponent]: {
-      background: tokens.colours.background.body,
-      color: tokens.colours.foreground.body,
-      cursor: 'pointer',
-      selectors: {
-        [selectors.focusVisible]: {
-          background: tokens.colours.gamut.gray200
-        },
-        [selectors.selected]: {
-          background: tokens.colours.foreground.body,
-          color: tokens.colours.background.body
-        },
-        [selectors.hoverNotSelected]: {
-          background: tokens.colours.gamut.gray200
-        },
-        [selectors.disabled]: {
-          background: tokens.colours.background.body,
-          color: tokens.colours.gamut.gray400,
-          cursor: 'default'
-        }
-      }
-    }
-  }
-}, focusOutlineStyle], "cellStyle");
-
-// === Button styles
-
-export const buttonStyle = style([sprinkles({
-  alignItems: 'center',
-  borderColour: 'gray',
-  borderRadius: 'md',
-  borderStyle: 'solid',
-  borderWidth: '1',
-  display: 'flex',
-  justifyContent: 'center',
-  padding: 'none',
-  size: '7'
-}), {
-  '@layer': {
-    [cssLayerComponent]: {
-      background: tokens.colours.background.body,
-      color: tokens.colours.gamut.gray600,
-      cursor: 'pointer',
-      selectors: {
-        [selectors.hoverNotDisabled]: {
-          background: tokens.colours.gamut.gray200
-        },
-        [selectors.focusVisible]: {
-          background: tokens.colours.gamut.gray200
-        },
-        [selectors.disabled]: {
-          background: tokens.colours.background.body,
-          borderColor: tokens.border.colours.light,
-          color: tokens.colours.gamut.gray300,
-          cursor: 'not-allowed'
-        }
-      }
-    }
-  }
-}, focusOutlineStyle], "buttonStyle");
-export const thStyle = style({
-  '@layer': {
-    [cssLayerComponent]: {
-      color: tokens.colours.gamut.gray600
-    }
-  }
-}, "thStyle");
-export const tdStyle = sprinkles({
-  padding: '1',
-  textAlign: 'center'
-});
-
-// === Heading styles
-export const titleStyle = sprinkles({
-  fontWeight: 'bold',
-  margin: 'none'
-});
 __vanilla_filescope__.endFileScope();

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

@@ -26,7 +26,7 @@ export interface DateTimePickerProps<D extends DateValue> extends TestIdProp {
      * - `defaultValue`: Today's date
      * - `firstDayOfWeek`: Monday
      */
-    calendar?: Exclude<AriaCalendarProps<D>, 'onChange'>;
+    calendarOptions?: Exclude<AriaCalendarProps<D>, 'onChange'>;
     /**
      * `OptionGrid` props used to generate the time picker items. Ensure to include a descriptive `label` value (for
      * assistive technology). Currently time options are not tied to the day selection.
@@ -60,6 +60,9 @@ export interface DateTimePickerProps<D extends DateValue> extends TestIdProp {
  * This component implements the react-aria `useCalendar` hook and supports controlled state as well
  * ([docs](https://react-spectrum.adobe.com/react-aria/useCalendar.html))
  */
-export declare const DateTimePicker: <D extends DateValue>({ allowPastDate, calendar, lang, onChange, timeOptions, title, testId, }: DateTimePickerProps<D>) => React.JSX.Element;
+export declare const DateTimePicker: {
+    <D extends DateValue>({ allowPastDate, calendarOptions, lang, onChange, timeOptions, title, testId, }: DateTimePickerProps<D>): React.JSX.Element;
+    displayName: string;
+};
 export {};
 //# sourceMappingURL=DateTimePicker.d.ts.map

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

@@ -1 +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;AAI9C,OAAO,EAEN,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,MAAM,0BAA0B,CAAC;AAWlC,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,CAAE,SAAQ,UAAU;IAC3E;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IACrD;;;OAGG;IACH,WAAW,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACzC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;CAC5C;AAgBD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,SAAS,EAAE,0EAQjD,mBAAmB,CAAC,CAAC,CAAC,sBAwHxB,CAAC"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAS,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAI3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,OAAO,EAEN,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,MAAM,0BAA0B,CAAC;AAIlC,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,CAAE,SAAQ,UAAU;IAC3E;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IAC5D;;;OAGG;IACH,WAAW,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACzC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;CAC5C;AAQD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc;KAAI,CAAC,SAAS,SAAS,mFAQ/C,mBAAmB,CAAC,CAAC,CAAC;;CA+ExB,CAAC"}

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -3,23 +3,15 @@
 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,
-// currently only supporting western-style Gregorian calendar
-GregorianCalendar, today } from '@internationalized/date';
-import React, { useEffect, useRef } from 'react';
-import { useCalendar,
-// useDateFormatter,
-useLocale, useId } from 'react-aria';
-import { useCalendarState } from 'react-stately';
+import { getLocalTimeZone, today } from '@internationalized/date';
+import React, { useRef } from 'react';
+import { useId } from 'react-aria';
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { dataAttrs } from "../../utils/dataAttrs.js";
+import { Calendar } from "../Calendar/index.js";
 import { Heading } from "../Heading/index.js";
-import { Icon } from "../Icon/index.js";
 import { OptionGrid } from "../OptionGrid/OptionGrid.js";
-import { CalendarButton } from "./CalendarButton.js";
-import { CalendarGrid } from "./CalendarGrid.js";
-import { calendarStyle, layoutStyle, queryContainerStyle, titleStyle } from "./DateTimePicker.css.js";
+import { layoutStyle, queryContainerStyle } from "./DateTimePicker.css.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultEnglish = {
   dateLabel: 'Date',
@@ -27,13 +19,6 @@ const defaultEnglish = {
   nextLabel: 'Next month',
   prevLabel: 'Previous month'
 };
-function createCalendar(identifier) {
-  if (identifier === 'gregory') {
-    return new GregorianCalendar();
-  }
-  throw new Error(`Unsupported calendar configured ${identifier}`);
-}
-
 // const dateTextPunctuationEN = (text: string) =>
 // 	text
 // 		.split(' ')
@@ -54,15 +39,15 @@ function createCalendar(identifier) {
  */
 export const DateTimePicker = ({
   allowPastDate = false,
-  calendar,
+  calendarOptions,
   lang,
   onChange,
   timeOptions,
   title,
   testId
 }) => {
-  var _lang$dateLabel, _lang$prevLabel, _lang$nextLabel, _lang$timeLabel;
-  const selectedDate = useRef(null);
+  var _lang$dateLabel, _lang$timeLabel;
+  const selectedDate = useRef(today(getLocalTimeZone()));
   const selectedTimeOption = useRef(null);
   const handleChange = () => {
     var _selectedTimeOption$c;
@@ -73,6 +58,10 @@ export const DateTimePicker = ({
       });
     }
   };
+  const handleDateChange = value => {
+    selectedDate.current = value;
+    handleChange();
+  };
   const handleTimeChange = keys => {
     if (keys === 'all') return;
     // we expect only a single value for time picker
@@ -80,15 +69,6 @@ export const DateTimePicker = ({
     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,
@@ -96,34 +76,13 @@ export const DateTimePicker = ({
     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;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- run only once
-  }, []);
-
-  // const formatter = useDateFormatter({ dateStyle: 'full' });
-  // const dateText = state.value
-  // 	? dateTextPunctuationEN(
-  // 			formatter.format(state?.value?.toDate(getLocalTimeZone())),
-  // 		)
-  // 	: '';
 
+  // Create calendar lang props from our lang props
+  const calendarLang = lang ? {
+    nextLabel: lang.nextLabel,
+    prevLabel: lang.prevLabel
+  } : undefined;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     role: "group",
     "aria-labelledby": titleId,
@@ -148,27 +107,11 @@ export const DateTimePicker = ({
           mb: "4",
           size: "6",
           children: (_lang$dateLabel = lang === null || lang === void 0 ? void 0 : lang.dateLabel) !== null && _lang$dateLabel !== void 0 ? _lang$dateLabel : defaultEnglish.dateLabel
-        }), /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, calendarProps), {}, {
-          className: calendarStyle,
-          children: [/*#__PURE__*/_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: /*#__PURE__*/_jsx(Icon, {
-              icon: ChevronLeftIcon,
-              size: "medium"
-            })
-          })), /*#__PURE__*/_jsx("h4", {
-            className: titleStyle,
-            children: calendarTitle
-          }), /*#__PURE__*/_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: /*#__PURE__*/_jsx(Icon, {
-              icon: ChevronRightIcon,
-              size: "medium"
-            })
-          }))]
-        })), /*#__PURE__*/_jsx(CalendarGrid, {
-          state: state,
-          firstDayOfWeek: calendarComponentProps.firstDayOfWeek
+        }), /*#__PURE__*/_jsx(Calendar, {
+          allowPastDate: allowPastDate,
+          calendarOptions: calendarOptions,
+          lang: calendarLang,
+          onChange: handleDateChange
         })]
       }), /*#__PURE__*/_jsxs("div", {
         className: sprinkles({
@@ -183,4 +126,5 @@ export const DateTimePicker = ({
       })]
     })]
   }));
-};
+};
+DateTimePicker.displayName = 'DateTimePicker';

package/dist/components/OptionList/OptionList.d.ts

@@ -60,18 +60,18 @@ export declare const OptionList: {
             onKeyDown?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
             onKeyUp?: ((e: import("@react-types/shared").KeyboardEvent) => void) | undefined;
             onClick?: ((e: React.MouseEvent<import("@react-types/shared").FocusableElement>) => void) | undefined;
+            excludeFromTabOrder?: boolean | undefined;
             isDisabled?: boolean | undefined;
-            isReadOnly?: boolean | undefined;
+            isRequired?: boolean | undefined;
+            isInvalid?: boolean | undefined;
+            validationState?: import("react-stately").ValidationState | undefined;
             onFocusChange?: ((isFocused: boolean) => void) | undefined;
-            excludeFromTabOrder?: boolean | undefined;
+            isReadOnly?: boolean | undefined;
             onPress?: ((e: import("react-aria").PressEvent) => void) | undefined;
             onPressStart?: ((e: import("react-aria").PressEvent) => void) | undefined;
             onPressEnd?: ((e: import("react-aria").PressEvent) => void) | undefined;
             onPressChange?: ((isPressed: boolean) => void) | undefined;
             onPressUp?: ((e: import("react-aria").PressEvent) => void) | undefined;
-            isRequired?: boolean | undefined;
-            isInvalid?: boolean | undefined;
-            validationState?: import("react-stately").ValidationState | undefined;
             validationBehavior?: "aria" | "native" | undefined;
             validate?: ((value: boolean) => import("@react-types/shared").ValidationError | true | null | undefined) | undefined;
         }): React.JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare const overlayStyle: string;
+export declare const triggerStyle: string;
+export declare const fullScreenStyle: string;
+//# sourceMappingURL=Popover.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/Popover.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,QAiBvB,CAAC;AAEH,eAAO,MAAM,YAAY,QASvB,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC"}

package/dist/components/Popover/Popover.css.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/Popover/Popover.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { cssLayerComponent } from "../../styles/layers.css.js";
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { overdriveTokens as tokens } from "../../themes/theme.css.js";
+export const overlayStyle = style([sprinkles({
+  borderRadius: 'md',
+  borderWidth: '1',
+  borderStyle: 'solid',
+  borderColour: 'light',
+  padding: '4'
+}), {
+  '@layer': {
+    [cssLayerComponent]: {
+      backgroundColor: tokens.colours.background.body,
+      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+      minWidth: '280px'
+    }
+  }
+}], "overlayStyle");
+export const triggerStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      background: 'transparent',
+      border: 'none',
+      cursor: 'pointer',
+      padding: 0
+    }
+  }
+}, "triggerStyle");
+export const fullScreenStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      backgroundColor: tokens.colours.background.body,
+      bottom: 0,
+      left: 0,
+      position: 'fixed',
+      right: 0,
+      top: 0
+    }
+  }
+}, "fullScreenStyle");
+__vanilla_filescope__.endFileScope();