@autoguru/overdrive 4.45.2 → 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,19 +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 styledCell: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
-export declare const styledButton: import("@vanilla-extract/recipes").RuntimeFn<{
-    [x: string]: {
-        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-    };
-}>;
-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,QAG9B,CAAC;AAEH,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC;AAEH,eAAO,MAAM,aAAa,QAMxB,CAAC;AAIH,eAAO,MAAM,UAAU;;;;EA+BrB,CAAC;AAIH,eAAO,MAAM,YAAY;;;;EA+BvB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,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,111 +3,28 @@
 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 { recipe } from '@vanilla-extract/recipes';
-import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
-import { sprinkles } from "../../styles/sprinkles.css.js";
-import { overdriveTokens as tokens } from "../../themes/index.js";
+import { cssLayerComponent } from "../../styles/layers.css.js";
 import { breakpoints } from "../../themes/makeTheme.js";
-import { interactionStyle } from "../../utils/css.js"; // --- Container styles
+import { overdriveTokens as tokens } from "../../themes/theme.css.js"; // === Container styles
 export const queryContainer = createContainer("queryContainer");
 export const queryContainerStyle = style({
-  containerName: queryContainer,
-  containerType: 'inline-size'
+  '@layer': {
+    [cssLayerComponent]: {
+      containerName: queryContainer,
+      containerType: 'inline-size'
+    }
+  }
 }, "queryContainerStyle");
 export const layoutStyle = style({
-  '@container': {
-    [`${queryContainer} (min-width: ${breakpoints.tablet})`]: {
-      display: 'flex',
-      gap: tokens.space[7]
+  '@layer': {
+    [cssLayerComponent]: {
+      '@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 calendarStyle = style({
-  alignItems: 'center',
-  display: 'flex',
-  justifyContent: 'space-between',
-  marginBottom: tokens.space[2],
-  padding: `0 ${tokens.space[1]}`
-}, "calendarStyle");
-
-// -- Cell styles
-
-export const styledCell = recipe({
-  base: [{
-    alignItems: 'center',
-    backgroundColor: tokens.colours.background.body,
-    borderRadius: tokens.border.radius['md'],
-    color: tokens.colours.foreground.body,
-    cursor: 'pointer',
-    display: 'inline-flex',
-    fontSize: 'md',
-    justifyContent: 'center'
-  }, interactionStyle({
-    hoverNotSelected: {
-      backgroundColor: tokens.colours.gamut.gray200
-    },
-    selected: {
-      backgroundColor: tokens.colours.foreground.body,
-      color: tokens.colours.background.body
-    },
-    disabled: {
-      backgroundColor: tokens.colours.background.body,
-      color: tokens.colours.gamut.gray400,
-      cursor: 'default'
-    }
-  }), sprinkles({
-    size: '7'
-  }), focusOutlineStyle]
-}, "styledCell");
-
-// -- Button styles
-
-export const styledButton = recipe({
-  base: [{
-    alignItems: 'center',
-    backgroundColor: tokens.colours.background.body,
-    borderColor: tokens.border.colours.gray,
-    borderRadius: tokens.border.radius['md'],
-    borderStyle: 'solid',
-    borderWidth: tokens.border.width[1],
-    color: tokens.colours.gamut.gray600,
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'center',
-    padding: 0
-  }, interactionStyle({
-    hover: {
-      backgroundColor: tokens.colours.gamut.gray200
-    },
-    disabled: {
-      backgroundColor: tokens.colours.background.body,
-      borderColor: tokens.border.colours.light,
-      color: tokens.colours.gamut.gray300,
-      cursor: 'not-allowed'
-    }
-  }), sprinkles({
-    size: '7'
-  }), focusOutlineStyle]
-}, "styledButton");
-export const thStyle = style({
-  color: tokens.colours.gamut.gray600
-}, "thStyle");
-export const tdStyle = style({
-  padding: tokens.space[1],
-  textAlign: 'center'
-}, "tdStyle");
-
-// -- Heading styles
-export const titleStyle = style({
-  fontWeight: tokens.typography.fontWeight.bold,
-  margin: 0
-}, "titleStyle");
 __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';