@kaizen/components 0.0.0-canary-bundler--fix-style-inject-20240522033251 → 0.0.0-canary-bundler--local-style-inject-20240522043016

package/dist/cjs/Content/Content.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Content_module = require('./Content.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3086156812/Layout Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-content--docs Storybook}
+ */
+var Content = React__default.default.forwardRef(function (_a, ref) {
+  var children = _a.children,
+    style = _a.style,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["children", "style", "classNameOverride"]);
+  return React__default.default.createElement("div", tslib.__assign({
+    ref: ref,
+    className: classnames__default.default(Content_module.default.content, classNameOverride),
+    style: style
+  }, restProps), children);
+});
+Content.displayName = "Content";
+exports.Content = Content;

package/dist/cjs/Content/Content.module.scss.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".Content-module_content__ZeTRs{margin:0 72px;max-width:1392px;width:100%}@media (max-width:calc(1080px - 1px)){.Content-module_content__ZeTRs{margin:0 12px}}";
+var styles = {
+  "content": "Content-module_content__ZeTRs"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;
+exports.styleInject = styleInject;

package/dist/cjs/DateInput/DateInput/DateInput.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Input = require('../../Input/Input/Input.cjs');
+require('../../Input/InputRange/InputRange.cjs');
+require('../../Input/InputSearch/InputSearch.cjs');
+var Label = require('../../Label/Label.cjs');
+var isRefObject = require('../../utils/isRefObject.cjs');
+var DateInput_module = require('./DateInput.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var DateInput = React__default.default.forwardRef(function (_a, ref) {
+  var id = _a.id,
+    labelText = _a.labelText,
+    disabled = _a.disabled,
+    _b = _a.isReversed,
+    isReversed = _b === void 0 ? false : _b,
+    classNameOverride = _a.classNameOverride,
+    inputProps = tslib.__rest(_a, ["id", "labelText", "disabled", "isReversed", "classNameOverride"]);
+  return React__default.default.createElement("div", {
+    className: classnames__default.default(DateInput_module.default.dateInput, classNameOverride)
+  }, React__default.default.createElement(Label.Label, {
+    htmlFor: id,
+    labelText: labelText,
+    reversed: isReversed,
+    disabled: disabled
+  }), React__default.default.createElement(Input.Input, tslib.__assign({
+    inputRef: isRefObject.isRefObject(ref) ? ref : undefined,
+    id: id,
+    type: "text",
+    autoComplete: "off",
+    classNameOverride: DateInput_module.default.input,
+    disabled: disabled,
+    reversed: isReversed
+  }, inputProps)));
+});
+DateInput.displayName = "DateInput";
+exports.DateInput = DateInput;

package/dist/cjs/DateInput/DateInput/DateInput.module.scss.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".DateInput-module_dateInput__f0Rs6{width:100%}.DateInput-module_input__lVV0-{margin-top:var(--spacing-6,.375rem)}";
+var styles = {
+  "dateInput": "DateInput-module_dateInput__f0Rs6",
+  "input": "DateInput-module_input__lVV0-"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;
+exports.styleInject = styleInject;

package/dist/cjs/DateInput/DateInputDescription/DateInputDescription.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
+var LabelledMessage = require('../../LabelledMessage/LabelledMessage.cjs');
+var formatDescriptionInputFormat = require('./utils/formatDescriptionInputFormat.cjs');
+var DateInputDescription_module = require('./DateInputDescription.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var DateInputDescription = function (_a) {
+  var description = _a.description,
+    locale = _a.locale;
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var hasCustomDescription = typeof description === "string" && description !== "" || React__default.default.isValidElement(description);
+  var translatedInputFormatMessage = formatMessage({
+    id: "dateInputDescription.inputFormat",
+    defaultMessage: "Input format",
+    description: "Label for the 'Input format' field"
+  });
+  if (hasCustomDescription) {
+    return React__default.default.createElement("span", {
+      className: DateInputDescription_module.default.dateInputDescription
+    }, React__default.default.createElement("span", null, description), React__default.default.createElement("span", {
+      className: DateInputDescription_module.default.dateInputFormatContainer
+    }, "(", React__default.default.createElement(LabelledMessage.LabelledMessage, {
+      label: translatedInputFormatMessage,
+      message: formatDescriptionInputFormat.formatDescriptionInputFormat(locale)
+    }), ")"));
+  }
+  return React__default.default.createElement(LabelledMessage.LabelledMessage, {
+    label: translatedInputFormatMessage,
+    message: formatDescriptionInputFormat.formatDescriptionInputFormat(locale)
+  });
+};
+DateInputDescription.displayName = "DateInputDescription";
+exports.DateInputDescription = DateInputDescription;

package/dist/cjs/DateInput/DateInputDescription/DateInputDescription.module.scss.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".DateInputDescription-module_dateInputDescription__dEWv8{display:inline}.DateInputDescription-module_dateInputFormatContainer__U-zur{margin-inline-start:var(--spacing-xs,.375rem);white-space:nowrap}.DateInputDescription-module_descriptionInputFormat__rQ-Z5{display:inline-flex;white-space:nowrap}.DateInputDescription-module_labelSeparator__L7Be4{margin-inline-end:var(--spacing-xs,.375rem)}";
+var styles = {
+  "dateInputDescription": "DateInputDescription-module_dateInputDescription__dEWv8",
+  "dateInputFormatContainer": "DateInputDescription-module_dateInputFormatContainer__U-zur",
+  "descriptionInputFormat": "DateInputDescription-module_descriptionInputFormat__rQ-Z5",
+  "labelSeparator": "DateInputDescription-module_labelSeparator__L7Be4"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;
+exports.styleInject = styleInject;

package/dist/cjs/DateInput/DateInputDescription/utils/formatDescriptionInputFormat.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var formatDescriptionInputFormat = function (locale) {
+  var _a;
+  return (_a = locale.formatLong) === null || _a === void 0 ? void 0 : _a.date({
+    width: "short"
+  }).toLowerCase();
+};
+exports.formatDescriptionInputFormat = formatDescriptionInputFormat;

package/dist/cjs/DateInput/DateInputWithIconButton/DateInputWithIconButton.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+require('../../Icon/subcomponents/SVG/SVG.cjs');
+var DateStartIcon = require('../../Icon/DateStartIcon.cjs');
+var isRefObject = require('../../utils/isRefObject.cjs');
+var DateInput = require('../DateInput/DateInput.cjs');
+var DateInputWithIconButton_module = require('./DateInputWithIconButton.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var DateInputWithIconButton = React__default.default.forwardRef(function (_a, ref) {
+  var onButtonClick = _a.onButtonClick,
+    disabled = _a.disabled,
+    value = _a.value,
+    restProps = tslib.__rest(_a, ["onButtonClick", "disabled", "value"]);
+  var customRefObject = isRefObject.isRefObject(ref) ? ref.current : null;
+  var inputRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.inputRef;
+  var buttonRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.buttonRef;
+  var IconButton = React__default.default.createElement("button", {
+    ref: buttonRef,
+    type: "button",
+    onClick: onButtonClick,
+    "aria-label": value ? "Change date, ".concat(value) : "Choose date",
+    "aria-disabled": disabled,
+    disabled: disabled,
+    className: classnames__default.default(DateInputWithIconButton_module.default.iconButton, restProps["aria-expanded"] && DateInputWithIconButton_module.default.calendarActive, disabled && DateInputWithIconButton_module.default.disabled)
+  }, React__default.default.createElement(DateStartIcon.DateStartIcon, {
+    role: "presentation"
+  }));
+  return React__default.default.createElement(DateInput.DateInput, tslib.__assign({
+    ref: inputRef,
+    disabled: disabled,
+    value: value,
+    endIconAdornment: IconButton
+  }, restProps));
+});
+DateInputWithIconButton.displayName = "DateInputWithIconButton";
+exports.DateInputWithIconButton = DateInputWithIconButton;

package/dist/cjs/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".DateInputWithIconButton-module_iconButton__W7YMX{appearance:none;background:transparent;border:none;border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) transparent;border-radius:var(--border-solid-border-radius,7px);color:inherit;display:inline;display:inherit;font:inherit;margin:0;padding:0;padding:.25rem var(--spacing-xs,.375rem);position:relative;right:-.35rem;top:-40%}[dir=rtl] .DateInputWithIconButton-module_iconButton__W7YMX{right:.25rem}.DateInputWithIconButton-module_iconButton__W7YMX :focus{outline:none}.DateInputWithIconButton-module_iconButton__W7YMX:focus-visible{outline:var(--color-blue-500,#0168b3) var(--border-focus-ring-border-style,solid) var(--border-focus-ring-border-width,2px);outline-offset:-2px}.DateInputWithIconButton-module_iconButton__W7YMX:hover:not([disabled]){background-color:var(--color-blue-100,#e6f6ff);color:var(--color-blue-500,#0168b3)}.DateInputWithIconButton-module_iconButton__W7YMX svg{position:relative;top:2px}.DateInputWithIconButton-module_calendarActive__b2Vze{background-color:var(--color-blue-100,#e6f6ff);color:var(--color-blue-500,#0168b3)}.DateInputWithIconButton-module_disabled__0IRHh{opacity:.3}";
+var styles = {
+  "iconButton": "DateInputWithIconButton-module_iconButton__W7YMX",
+  "calendarActive": "DateInputWithIconButton-module_calendarActive__b2Vze",
+  "disabled": "DateInputWithIconButton-module_disabled__0IRHh"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;
+exports.styleInject = styleInject;

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -0,0 +1,235 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactFocusOn = require('react-focus-on');
+var CalendarSingle = require('../Calendar/CalendarSingle/CalendarSingle.cjs');
+require('../Calendar/CalendarRange/CalendarRange.cjs');
+var calculateDisabledDays = require('../Calendar/utils/calculateDisabledDays.cjs');
+var formatDateAsNumeral = require('../Calendar/utils/formatDateAsNumeral.cjs');
+var formatDateAsText = require('../Calendar/utils/formatDateAsText.cjs');
+var isDisabledDate = require('../Calendar/utils/isDisabledDate.cjs');
+var isInvalidDate = require('../Calendar/utils/isInvalidDate.cjs');
+var isSelectingDayInCalendar = require('../Calendar/utils/isSelectingDayInCalendar.cjs');
+var parseDateAsTextOrNumeral = require('../Calendar/utils/parseDateAsTextOrNumeral.cjs');
+require('date-fns');
+var setFocusInCalendar = require('../Calendar/utils/setFocusInCalendar.cjs');
+var CalendarPopover = require('../Calendar/CalendarPopover/CalendarPopover.cjs');
+var DateInputField = require('./subcomponents/DateInputField/DateInputField.cjs');
+var getLocale = require('./utils/getLocale.cjs');
+var validateDate = require('./utils/validateDate.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061174/Date+Picker Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-date-controls-datepicker--docs Storybook}
+ */
+var DatePicker = function (_a) {
+  var propsId = _a.id,
+    _b = _a.buttonRef,
+    propsButtonRef = _b === void 0 ? React.useRef(null) : _b,
+    _c = _a.locale,
+    propsLocale = _c === void 0 ? "en-AU" : _c,
+    disabledDates = _a.disabledDates,
+    disabledDaysOfWeek = _a.disabledDaysOfWeek,
+    disabledRange = _a.disabledRange,
+    disabledBeforeAfter = _a.disabledBeforeAfter,
+    disabledBefore = _a.disabledBefore,
+    disabledAfter = _a.disabledAfter,
+    weekStartsOn = _a.weekStartsOn,
+    defaultMonth = _a.defaultMonth,
+    selectedDay = _a.selectedDay,
+    status = _a.status,
+    validationMessage = _a.validationMessage,
+    onInputClick = _a.onInputClick,
+    onInputFocus = _a.onInputFocus,
+    onInputChange = _a.onInputChange,
+    onInputBlur = _a.onInputBlur,
+    onButtonClick = _a.onButtonClick,
+    onDayChange = _a.onDayChange,
+    onValidate = _a.onValidate,
+    restDateInputFieldProps = tslib.__rest(_a, ["id", "buttonRef", "locale", "disabledDates", "disabledDaysOfWeek", "disabledRange", "disabledBeforeAfter", "disabledBefore", "disabledAfter", "weekStartsOn", "defaultMonth", "selectedDay", "status", "validationMessage", "onInputClick", "onInputFocus", "onInputChange", "onInputBlur", "onButtonClick", "onDayChange", "onValidate"]);
+  var reactId = React.useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+  var containerRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+  var buttonRef = React.useRef((propsButtonRef === null || propsButtonRef === void 0 ? void 0 : propsButtonRef.current) || null);
+  var dateInputRefs = React.useRef({
+    inputRef: inputRef,
+    buttonRef: buttonRef
+  });
+  var _d = React.useState(""),
+    inputValue = _d[0],
+    setInputValue = _d[1];
+  var _e = React.useState(false),
+    isOpen = _e[0],
+    setIsOpen = _e[1];
+  var _f = React.useState(),
+    lastTrigger = _f[0],
+    setLastTrigger = _f[1];
+  var _g = React.useState(),
+    inbuiltStatus = _g[0],
+    setInbuiltStatus = _g[1];
+  var _h = React.useState(),
+    inbuiltValidationMessage = _h[0],
+    setInbuiltValidationMessage = _h[1];
+  var shouldUseInbuiltValidation = onValidate === undefined;
+  var locale = getLocale.getLocale(propsLocale);
+  var disabledDays = calculateDisabledDays.calculateDisabledDays({
+    disabledDates: disabledDates,
+    disabledDaysOfWeek: disabledDaysOfWeek,
+    disabledRange: disabledRange,
+    disabledBeforeAfter: disabledBeforeAfter,
+    disabledBefore: disabledBefore,
+    disabledAfter: disabledAfter
+  });
+  var handleValidation = function (validationResponse) {
+    if (shouldUseInbuiltValidation) {
+      setInbuiltStatus(validationResponse.status);
+      setInbuiltValidationMessage(validationResponse.validationMessage);
+    } else {
+      onValidate(validationResponse);
+    }
+  };
+  var handleDayChange = function (date, newInputValue) {
+    var _a = validateDate.validateDate({
+        date: date,
+        inputValue: newInputValue,
+        disabledDays: disabledDays
+      }),
+      validationResponse = _a.validationResponse,
+      newDate = _a.newDate;
+    handleValidation(validationResponse);
+    onDayChange(newDate);
+  };
+  var handleCalendarDayChange = function (date) {
+    if (!isDisabledDate.isDisabledDate(date, disabledDays)) {
+      var newInputValue = lastTrigger === "calendarButton" ? formatDateAsText.formatDateAsText(date, disabledDays, locale) : formatDateAsNumeral.formatDateAsNumeral(date, locale);
+      setInputValue(newInputValue);
+      handleDayChange(date);
+      setIsOpen(false);
+    }
+  };
+  var handleInputClick = function (e) {
+    setIsOpen(true);
+    onInputClick === null || onInputClick === void 0 ? void 0 : onInputClick(e);
+  };
+  var handleInputFocus = function (e) {
+    setLastTrigger("inputFocus");
+    if (selectedDay) {
+      var newInputValue = formatDateAsNumeral.formatDateAsNumeral(selectedDay, locale);
+      setInputValue(newInputValue);
+    }
+    onInputFocus === null || onInputFocus === void 0 ? void 0 : onInputFocus(e);
+  };
+  var handleInputChange = function (e) {
+    setInputValue(e.target.value);
+    onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
+  };
+  var handleInputBlur = function (e) {
+    if (isSelectingDayInCalendar.isSelectingDayInCalendar(e.relatedTarget)) return;
+    if (inputValue !== "") {
+      var parsedDate = parseDateAsTextOrNumeral.parseDateAsTextOrNumeral(inputValue, locale);
+      if (!isInvalidDate.isInvalidDate(parsedDate)) {
+        setInputValue(formatDateAsText.formatDateAsText(parsedDate, disabledDays, locale));
+      }
+      handleDayChange(parsedDate, inputValue);
+      onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(e);
+      return;
+    }
+    handleDayChange(undefined, inputValue);
+    onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(e);
+  };
+  var handleKeyDown = function (e) {
+    if (e.key === "Enter") {
+      setIsOpen(false);
+      var parsedDate = parseDateAsTextOrNumeral.parseDateAsTextOrNumeral(inputValue, locale);
+      handleDayChange(parsedDate, e.currentTarget.value);
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowDown" && e.altKey === true) {
+      e.preventDefault();
+      setIsOpen(true);
+      setLastTrigger("inputKeydown");
+    }
+  };
+  var handleButtonClick = function (e) {
+    setIsOpen(!isOpen);
+    setLastTrigger("calendarButton");
+    onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(e);
+  };
+  var handleCalendarMount = function (calendarElement) {
+    if (lastTrigger === "inputFocus") return;
+    setFocusInCalendar.setFocusInCalendar(calendarElement, selectedDay);
+  };
+  var handleReturnFocus = function () {
+    var _a, _b;
+    if (lastTrigger === "inputKeydown" || lastTrigger === "inputFocus") {
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+  };
+  React.useEffect(function () {
+    if (selectedDay) {
+      setInputValue(formatDateAsText.formatDateAsText(selectedDay, disabledDays, locale));
+      var formattedDate = formatDateAsNumeral.formatDateAsNumeral(selectedDay, locale);
+      var validationResponse = validateDate.validateDate({
+        date: selectedDay,
+        inputValue: formattedDate,
+        disabledDays: disabledDays
+      }).validationResponse;
+      if (!validationResponse.isValidDate && !validationResponse.isEmpty) {
+        handleValidation(validationResponse);
+      }
+    }
+  }, [selectedDay]);
+  var calendarId = "".concat(id, "-calendar-dialog");
+  return React__default.default.createElement(reactFocusOn.FocusOn, {
+    scrollLock: false,
+    returnFocus: false,
+    onDeactivation: handleReturnFocus,
+    onClickOutside: function () {
+      return setIsOpen(false);
+    },
+    onEscapeKey: function () {
+      return setIsOpen(false);
+    },
+    enabled: isOpen
+  }, React__default.default.createElement("div", {
+    ref: containerRef
+  }, React__default.default.createElement(DateInputField.DateInputField, tslib.__assign({
+    ref: dateInputRefs,
+    id: id,
+    role: "combobox",
+    "aria-haspopup": "dialog",
+    "aria-expanded": isOpen,
+    "aria-controls": calendarId,
+    value: inputValue,
+    locale: locale,
+    onButtonClick: handleButtonClick,
+    onClick: handleInputClick,
+    onFocus: handleInputFocus,
+    onChange: handleInputChange,
+    onBlur: handleInputBlur,
+    onKeyDown: handleKeyDown,
+    status: status !== undefined || !shouldUseInbuiltValidation ? status : inbuiltStatus,
+    validationMessage: validationMessage !== undefined || !shouldUseInbuiltValidation ? validationMessage : inbuiltValidationMessage
+  }, restDateInputFieldProps))), isOpen && React__default.default.createElement(CalendarPopover.CalendarPopover, {
+    referenceElement: containerRef.current
+  }, React__default.default.createElement(CalendarSingle.CalendarSingle, {
+    id: calendarId,
+    selected: selectedDay,
+    defaultMonth: defaultMonth,
+    weekStartsOn: weekStartsOn,
+    disabled: disabledDays,
+    locale: locale,
+    onDayClick: handleCalendarDayChange,
+    onMount: handleCalendarMount
+  })));
+};
+DatePicker.displayName = "DatePicker";
+exports.DatePicker = DatePicker;

package/dist/cjs/DatePicker/subcomponents/DateInputField/DateInputField.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var locale = require('date-fns/locale');
+require('../../../DateInput/DateInput/DateInput.cjs');
+var DateInputDescription = require('../../../DateInput/DateInputDescription/DateInputDescription.cjs');
+var DateInputWithIconButton = require('../../../DateInput/DateInputWithIconButton/DateInputWithIconButton.cjs');
+var FieldMessage = require('../../../FieldMessage/FieldMessage.cjs');
+var DateInputField_module = require('./DateInputField.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var DateInputField = React__default.default.forwardRef(function (_a, ref) {
+  var description = _a.description,
+    status = _a.status,
+    validationMessage = _a.validationMessage,
+    _b = _a.locale,
+    locale$1 = _b === void 0 ? locale.enAU : _b,
+    propsId = _a.id,
+    disabled = _a.disabled,
+    _c = _a.isReversed,
+    isReversed = _c === void 0 ? false : _c,
+    classNameOverride = _a.classNameOverride,
+    dateInputWithIconButtonProps = tslib.__rest(_a, ["description", "status", "validationMessage", "locale", "id", "disabled", "isReversed", "classNameOverride"]);
+  var reactId = React.useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+  var descriptionId = "".concat(id, "-field-message");
+  var shouldShowValidationMessage = !disabled && validationMessage;
+  return React__default.default.createElement("div", {
+    className: classNameOverride
+  }, React__default.default.createElement(DateInputWithIconButton.DateInputWithIconButton, tslib.__assign({
+    ref: ref,
+    id: id,
+    "aria-describedby": descriptionId,
+    status: status,
+    disabled: disabled,
+    isReversed: isReversed
+  }, dateInputWithIconButtonProps)), shouldShowValidationMessage && React__default.default.createElement(FieldMessage.FieldMessage, {
+    message: validationMessage,
+    status: status,
+    reversed: isReversed
+  }), React__default.default.createElement("div", {
+    className: classnames__default.default(disabled && DateInputField_module.default.disabled)
+  }, React__default.default.createElement(FieldMessage.FieldMessage, {
+    id: descriptionId,
+    message: React__default.default.createElement(DateInputDescription.DateInputDescription, {
+      description: description,
+      locale: locale$1
+    }),
+    reversed: isReversed
+  })));
+});
+DateInputField.displayName = "DateInputField";
+exports.DateInputField = DateInputField;

package/dist/cjs/DatePicker/subcomponents/DateInputField/DateInputField.module.scss.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".DateInputField-module_disabled__-Y0lJ{opacity:.3}";
+var styles = {
+  "disabled": "DateInputField-module_disabled__-Y0lJ"
+};
+// Forked from https://github.com/egoist/style-inject
+function styleInject(css, {
+  insertAt
+} = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;
+exports.styleInject = styleInject;

package/dist/cjs/DatePicker/utils/getLocale.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var locale = require('date-fns/locale');
+var getLocale = function (locale$1) {
+  switch (locale$1) {
+    case "en-AU":
+      return locale.enAU;
+    case "en-US":
+      return locale.enUS;
+    default:
+      return locale.enAU;
+  }
+};
+exports.getLocale = getLocale;