@kaizen/components 1.52.1 → 1.54.0

package/dist/cjs/Calendar/CalendarRange/CalendarRange.cjs

@@ -8,7 +8,6 @@ require('../../Icon/subcomponents/SVG/SVG.cjs');
 var ArrowBackwardIcon = require('../../Icon/ArrowBackwardIcon.cjs');
 var ArrowForwardIcon = require('../../Icon/ArrowForwardIcon.cjs');
 var baseCalendarClassNames = require('../baseCalendarClassNames.cjs');
-var enums = require('../enums.cjs');
 require('date-fns');
 var isInvalidDate = require('../utils/isInvalidDate.cjs');
 var CalendarRange_module = require('./CalendarRange.module.scss.cjs');
@@ -53,7 +52,6 @@ var CalendarRange = function (_a) {
     mode: "range",
     selected: selected,
     defaultMonth: selectedMonth,
-    weekStartsOn: enums.DayOfWeek.Mon,
     classNames: classNames,
     components: {
       IconRight: function () {

package/dist/cjs/Calendar/CalendarSingle/CalendarSingle.cjs

@@ -8,7 +8,6 @@ require('../../Icon/subcomponents/SVG/SVG.cjs');
 var ArrowBackwardIcon = require('../../Icon/ArrowBackwardIcon.cjs');
 var ArrowForwardIcon = require('../../Icon/ArrowForwardIcon.cjs');
 var baseCalendarClassNames = require('../baseCalendarClassNames.cjs');
-var enums = require('../enums.cjs');
 require('date-fns');
 var isInvalidDate = require('../utils/isInvalidDate.cjs');
 var isValidWeekStartsOn = require('../utils/isValidWeekStartsOn.cjs');
@@ -25,10 +24,9 @@ var CalendarSingle = function (_a) {
     classNameOverride = _a.classNameOverride,
     selected = _a.selected,
     defaultMonth = _a.defaultMonth,
-    _b = _a.weekStartsOn,
-    weekStartsOn = _b === void 0 ? enums.DayOfWeek.Mon : _b,
-    _c = _a.locale,
-    locale$1 = _c === void 0 ? locale.enAU : _c,
+    weekStartsOn = _a.weekStartsOn,
+    _b = _a.locale,
+    locale$1 = _b === void 0 ? locale.enAU : _b,
     restProps = tslib.__rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale"]);
   var calendarRef = React.useRef(null);
   React.useEffect(function () {

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var reactFocusOn = require('react-focus-on');
 var CalendarSingle = require('../Calendar/CalendarSingle/CalendarSingle.cjs');
 require('../Calendar/CalendarRange/CalendarRange.cjs');
@@ -55,6 +56,12 @@ var DatePicker = function (_a) {
     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 formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var calendarLabelDesc = formatMessage({
+    id: "datePicker.calendarLabelDescription",
+    defaultMessage: "Select date from calendar for:",
+    description: "Label for the search input"
+  });
   var reactId = React.useId();
   var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
   var containerRef = React.useRef(null);
@@ -224,7 +231,7 @@ var DatePicker = function (_a) {
     "aria-labelledby": "".concat(id, "-calendar-label ").concat(id, "-input-label")
   }, React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(VisuallyHidden.VisuallyHidden, {
     id: "".concat(id, "-calendar-label")
-  }, "Select date from calendar for:"), React__default.default.createElement(CalendarSingle.CalendarSingle, {
+  }, calendarLabelDesc), React__default.default.createElement(CalendarSingle.CalendarSingle, {
     id: calendarId,
     selected: selectedDay,
     defaultMonth: defaultMonth,

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

@@ -3,12 +3,105 @@
 var locale = require('date-fns/locale');
 var getLocale = function (locale$1) {
   switch (locale$1) {
-    case "en-AU":
-      return locale.enAU;
+    case "zh":
+      return locale.zhCN;
+    case "zh-TW":
+      return locale.zhTW;
+    case "da":
+      return locale.da;
+    case "nl":
+      return locale.nl;
     case "en-US":
       return locale.enUS;
+    case "fr":
+      return locale.fr;
+    case "de":
+      return locale.de;
+    case "he":
+      return locale.he;
+    case "it":
+      return locale.it;
+    case "ja":
+      return locale.ja;
+    case "ko":
+    case "kr":
+      return locale.ko;
+    case "es-419":
+      return locale.es;
+    case "sv":
+      return locale.sv;
+    case "ru":
+      return locale.ru;
+    // @todo: Add when locale is available https://github.com/date-fns/date-fns/issues/2627
+    // case "mi":
+    // return miNZ
+    case "pl":
+      return locale.pl;
+    case "pt-BR":
+      return locale.ptBR;
+    case "uk":
+      return locale.uk;
+    case "en":
+    case "en-GB":
+    case "en-AU":
+      return locale.enGB;
+    case "ar":
+      return locale.arSA;
+    case "bg":
+      return locale.bg;
+    case "cs":
+      return locale.cs;
+    case "et":
+      return locale.et;
+    case "fi":
+      return locale.fi;
+    case "fr-CA":
+      return locale.frCA;
+    case "ht":
+      return locale.ht;
+    case "el":
+      return locale.el;
+    case "hi":
+      return locale.hi;
+    case "hu":
+      return locale.hu;
+    case "id":
+      return locale.id;
+    case "km-KH":
+      return locale.km;
+    case "lv":
+      return locale.lv;
+    case "lt":
+      return locale.lt;
+    case "ms":
+      return locale.ms;
+    case "nb":
+    case "no":
+      return locale.nb;
+    case "pt":
+      return locale.pt;
+    case "ro":
+      return locale.ro;
+    case "sr":
+      return locale.sr;
+    // case "si-LK":
+    //   return siLK
+    case "sk":
+      return locale.sk;
+    case "es":
+      return locale.es;
+    // case "tl":
+    //   return tlPH
+    case "th":
+      return locale.th;
+    case "tr":
+      return locale.tr;
+    case "vi":
+      return locale.vi;
+    case "cy":
+      return locale.cy;
     default:
-      return locale.enAU;
+      return locale.enGB;
   }
 };
 exports.getLocale = getLocale;

package/dist/cjs/DatePicker/utils/validateDate.cjs

@@ -1,11 +1,19 @@
 'use strict';
 
 var tslib = require('tslib');
+var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 require('../../Calendar/CalendarSingle/CalendarSingle.cjs');
 require('../../Calendar/CalendarRange/CalendarRange.cjs');
 require('date-fns');
 var isInvalidDate = require('../../Calendar/utils/isInvalidDate.cjs');
 var isDisabledDate = require('../../Calendar/utils/isDisabledDate.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
 var validateDate = function (_a) {
   var date = _a.date,
     inputValue = _a.inputValue,
@@ -32,7 +40,18 @@ var validateDate = function (_a) {
     return {
       validationResponse: tslib.__assign(tslib.__assign({}, baseResponse), {
         status: "error",
-        validationMessage: inputValue ? "".concat(inputValue, " is an invalid date") : "Date is invalid",
+        validationMessage: inputValue ? React__default.default.createElement(i18nReactIntl.FormattedMessage, {
+          id: "date.validation.invalidDateWithValue",
+          defaultMessage: "{inputValue} is an invalid date",
+          description: "Error message when the user enters an invalid date and we know their input value",
+          values: {
+            inputValue: inputValue
+          }
+        }) : React__default.default.createElement(i18nReactIntl.FormattedMessage, {
+          id: "date.validation.invalidDate",
+          defaultMessage: "Date is invalid",
+          description: "Error message when the user enters an invalid date and we do not know their input value"
+        }),
         isInvalid: true
       }),
       newDate: undefined
@@ -42,7 +61,14 @@ var validateDate = function (_a) {
     return {
       validationResponse: tslib.__assign(tslib.__assign({}, baseResponse), {
         status: "error",
-        validationMessage: "".concat(inputValue, " is not available, try another date"),
+        validationMessage: React__default.default.createElement(i18nReactIntl.FormattedMessage, {
+          id: "date.validation.unavailableDate",
+          defaultMessage: "{inputValue} is not available, try another date",
+          description: "Error message when the user tries to select a date that is unavailable",
+          values: {
+            inputValue: inputValue
+          }
+        }),
         isDisabled: true
       }),
       newDate: undefined

package/dist/cjs/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var Button = require('../../../../Button/Button/Button.cjs');
 require('../../../../Button/IconButton/IconButton.cjs');
 require('tslib');
@@ -19,13 +20,19 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var AddFiltersMenu = function () {
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var menuButtonLabel = formatMessage({
+    id: "filterBar.addFiltersMenu.buttonLabel",
+    defaultMessage: "Add Filters",
+    description: "Menu button label to show additional available filter options"
+  });
   var _a = FilterBarContext.useFilterBarContext(),
     getInactiveFilters = _a.getInactiveFilters,
     showFilter = _a.showFilter;
   var inactiveFilters = getInactiveFilters();
   return React__default.default.createElement(Menu.Menu, {
     button: React__default.default.createElement(Button.Button, {
-      label: "Add Filters",
+      label: menuButtonLabel,
       secondary: true,
       disabled: inactiveFilters.length === 0,
       icon: React__default.default.createElement(AddIcon.AddIcon, {

package/dist/cjs/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var Button = require('../../../../Button/Button/Button.cjs');
 require('../../../../Button/IconButton/IconButton.cjs');
 var FilterBarContext = require('../../context/FilterBarContext.cjs');
@@ -12,10 +13,21 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var ClearAllButton = function () {
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var clearButtonLabel = formatMessage({
+    id: "filterBar.clearAllButton.label",
+    defaultMessage: "Clear all",
+    description: "Button label to clear all values within the filter bar"
+  });
+  var clearButtonAriaLabel = formatMessage({
+    id: "filterBar.clearAllButton.ariaLabel",
+    defaultMessage: "Clear all filters",
+    description: "Button aria-label to clear all values within the filter bar"
+  });
   var clearAllFilters = FilterBarContext.useFilterBarContext().clearAllFilters;
   return React__default.default.createElement(Button.Button, {
-    label: "Clear all",
-    "aria-label": "Clear all filters",
+    label: clearButtonLabel,
+    "aria-label": clearButtonAriaLabel,
     classNameOverride: ClearAllButton_module.clearAllButton,
     secondary: true,
     onClick: clearAllFilters

package/dist/cjs/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.cjs

@@ -10,6 +10,7 @@ require('date-fns');
 require('react-day-picker');
 require('date-fns/locale');
 require('../../../../LabelledMessage/LabelledMessage.cjs');
+require('@cultureamp/i18n-react-intl');
 require('../../../FilterDatePicker/subcomponents/DateInputField/DateInputField.cjs');
 var FilterBarContext = require('../../context/FilterBarContext.cjs');
 var FilterBarButton = require('../FilterBarButton/FilterBarButton.cjs');

package/dist/cjs/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var ButtonGroup = require('../../../ButtonGroup/ButtonGroup.cjs');
 require('../../../Icon/subcomponents/SVG/SVG.cjs');
 var ClearIcon = require('../../../Icon/ClearIcon.cjs');
@@ -20,9 +21,17 @@ var FilterButtonRemovable = React.forwardRef(function (_a, ref) {
   var triggerButtonProps = _a.triggerButtonProps,
     removeButtonProps = _a.removeButtonProps,
     restProps = tslib.__rest(_a, ["triggerButtonProps", "removeButtonProps"]);
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var removeButtonLabelFallback = formatMessage({
+    id: "filterButton.removable.removeButtonLabel",
+    defaultMessage: "Remove filter - {filterLabel}",
+    description: "Button label to remove a single filter from the filter bar"
+  }, {
+    filterLabel: triggerButtonProps === null || triggerButtonProps === void 0 ? void 0 : triggerButtonProps.label
+  });
   var customRefObject = isRefObject.isRefObject(ref) ? ref.current : null;
   var removeButtonRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.removeButtonRef;
-  var removeButtonLabel = (_b = removeButtonProps === null || removeButtonProps === void 0 ? void 0 : removeButtonProps.tooltipText) !== null && _b !== void 0 ? _b : "Remove filter - ".concat(triggerButtonProps === null || triggerButtonProps === void 0 ? void 0 : triggerButtonProps.label);
+  var removeButtonLabel = (_b = removeButtonProps === null || removeButtonProps === void 0 ? void 0 : removeButtonProps.tooltipText) !== null && _b !== void 0 ? _b : removeButtonLabelFallback;
   return React__default.default.createElement(ButtonGroup.ButtonGroup, tslib.__assign({}, restProps), React__default.default.createElement(FilterButton.FilterButton, tslib.__assign({
     ref: ref
   }, triggerButtonProps)), React__default.default.createElement(index.Tooltip, {

package/dist/cjs/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var DateInput = require('../../../../DateInput/DateInput/DateInput.cjs');
 var DateInputDescription = require('../../../../DateInput/DateInputDescription/DateInputDescription.cjs');
 require('../../../../DateInput/DateInputWithIconButton/DateInputWithIconButton.cjs');
@@ -24,6 +25,12 @@ var DateInputField = React__default.default.forwardRef(function (_a, ref) {
     locale = _a.locale,
     classNameOverride = _a.classNameOverride,
     restProps = tslib.__rest(_a, ["id", "labelText", "description", "disabled", "isReversed", "validationMessage", "locale", "classNameOverride"]);
+  var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var dateInputLabelFallback = formatMessage({
+    id: "filterDatePickerDateInputField.dateInputLabelFallback",
+    defaultMessage: "Date",
+    description: "Default label for date input field"
+  });
   var descriptionId = "".concat(id, "--field-message");
   var errorMessageId = validationMessage ? "".concat(id, "--date-error-message") : undefined;
   var inputDescribedBy = errorMessageId ? "".concat(errorMessageId, " ").concat(descriptionId) : descriptionId;
@@ -31,7 +38,7 @@ var DateInputField = React__default.default.forwardRef(function (_a, ref) {
   return React__default.default.createElement("div", null, React__default.default.createElement(DateInput.DateInput, tslib.__assign({
     ref: ref,
     id: id,
-    labelText: labelText || "Date",
+    labelText: labelText || dateInputLabelFallback,
     "aria-describedby": inputDescribedBy,
     "aria-errormessage": errorMessageId,
     "aria-invalid": dateIsInvalid,

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.cjs

@@ -180,6 +180,10 @@ var FilterDateRangePickerField = function (_a) {
     });
   };
   React.useEffect(function () {
+    if (inputStartDateLabel === " " || inputEndDateLabel === " ") {
+      // Translations are loading
+      return;
+    }
     var newStartDate = validateStartDate(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, state.inputStartValue);
     var newEndDate = validateEndDate(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, state.inputEndValue);
     if (newStartDate && !isValidRange.isValidRange(newStartDate, newEndDate)) {
@@ -192,7 +196,7 @@ var FilterDateRangePickerField = function (_a) {
       from: newStartDate,
       to: newEndDate
     });
-  }, []);
+  }, [inputStartDateLabel, inputEndDateLabel]);
   return React__default.default.createElement("div", tslib.__assign({
     className: classnames__default.default(FilterDateRangePickerField_module.filterDateRangePickerField, classNameOverride)
   }, restProps), React__default.default.createElement(DateRangeInputField.DateRangeInputField, {

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.cjs

@@ -12,6 +12,7 @@ require('date-fns/locale');
 var useDateValidation = require('../../../../FilterDatePicker/hooks/useDateValidation.cjs');
 require('../../../../FilterDatePicker/subcomponents/DateInputField/DateInputField.cjs');
 require('../../../../../LabelledMessage/LabelledMessage.cjs');
+require('@cultureamp/i18n-react-intl');
 var validateEndDateBeforeStartDate = require('../utils/validateEndDateBeforeStartDate.cjs');
 var useEndDateValidation = function (args) {
   var _a = useDateValidation.useDateValidation(args),

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.cjs

@@ -12,6 +12,7 @@ require('date-fns/locale');
 var useDateValidation = require('../../../../FilterDatePicker/hooks/useDateValidation.cjs');
 require('../../../../FilterDatePicker/subcomponents/DateInputField/DateInputField.cjs');
 require('../../../../../LabelledMessage/LabelledMessage.cjs');
+require('@cultureamp/i18n-react-intl');
 var useStartDateValidation = function (args) {
   var _a = useDateValidation.useDateValidation(args),
     validationMessage = _a.validationMessage,

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.cjs

@@ -1,8 +1,16 @@
 'use strict';
 
 var tslib = require('tslib');
+var React = require('react');
+var i18nReactIntl = require('@cultureamp/i18n-react-intl');
 var getNodeText = require('../../../../../utils/getNodeText.cjs');
 var isValidRange = require('./isValidRange.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
 var validateEndDateBeforeStartDate = function (_a) {
   var startDate = _a.startDate,
     startDateFieldLabel = _a.startDateFieldLabel,
@@ -22,7 +30,14 @@ var validateEndDateBeforeStartDate = function (_a) {
       validationResponse: tslib.__assign(tslib.__assign({}, baseResponse), {
         validationMessage: {
           status: "error",
-          message: "Cannot be earlier than the selection in \"".concat(getNodeText.getNodeText(startDateFieldLabel), "\"")
+          message: React__default.default.createElement(i18nReactIntl.FormattedMessage, {
+            id: "date.validation.rangeEndBeforeRangeStart",
+            defaultMessage: 'Cannot be earlier than the selection in "{startDateFieldLabel}"',
+            description: "Error message when the user tries to select an end date earlier than the start date",
+            values: {
+              startDateFieldLabel: getNodeText.getNodeText(startDateFieldLabel)
+            }
+          })
         }
       }),
       newDate: endDate

package/dist/esm/Calendar/CalendarRange/CalendarRange.mjs

@@ -6,7 +6,6 @@ import '../../Icon/subcomponents/SVG/SVG.mjs';
 import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
 import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
 import { baseCalendarClassNames } from '../baseCalendarClassNames.mjs';
-import { DayOfWeek } from '../enums.mjs';
 import 'date-fns';
 import { isInvalidDate } from '../utils/isInvalidDate.mjs';
 import styles from './CalendarRange.module.scss.mjs';
@@ -46,7 +45,6 @@ const CalendarRange = /*#__PURE__*/function () {
       mode: "range",
       selected: selected,
       defaultMonth: selectedMonth,
-      weekStartsOn: DayOfWeek.Mon,
       classNames: classNames,
       components: {
         IconRight: function () {

package/dist/esm/Calendar/CalendarSingle/CalendarSingle.mjs

@@ -6,7 +6,6 @@ import '../../Icon/subcomponents/SVG/SVG.mjs';
 import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
 import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
 import { baseCalendarClassNames } from '../baseCalendarClassNames.mjs';
-import { DayOfWeek } from '../enums.mjs';
 import 'date-fns';
 import { isInvalidDate } from '../utils/isInvalidDate.mjs';
 import { isValidWeekStartsOn } from '../utils/isValidWeekStartsOn.mjs';
@@ -18,10 +17,9 @@ const CalendarSingle = /*#__PURE__*/function () {
       classNameOverride = _a.classNameOverride,
       selected = _a.selected,
       defaultMonth = _a.defaultMonth,
-      _b = _a.weekStartsOn,
-      weekStartsOn = _b === void 0 ? DayOfWeek.Mon : _b,
-      _c = _a.locale,
-      locale = _c === void 0 ? enAU : _c,
+      weekStartsOn = _a.weekStartsOn,
+      _b = _a.locale,
+      locale = _b === void 0 ? enAU : _b,
       restProps = __rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale"]);
     var calendarRef = useRef(null);
     useEffect(function () {

package/dist/esm/DatePicker/DatePicker.mjs

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { useRef, useId, useState, useEffect } from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import { FocusOn } from 'react-focus-on';
 import { CalendarSingle } from '../Calendar/CalendarSingle/CalendarSingle.mjs';
 import '../Calendar/CalendarRange/CalendarRange.mjs';
@@ -48,6 +49,12 @@ const DatePicker = /*#__PURE__*/function () {
       onDayChange = _a.onDayChange,
       onValidate = _a.onValidate,
       restDateInputFieldProps = __rest(_a, ["id", "buttonRef", "locale", "disabledDates", "disabledDaysOfWeek", "disabledRange", "disabledBeforeAfter", "disabledBefore", "disabledAfter", "weekStartsOn", "defaultMonth", "selectedDay", "status", "validationMessage", "onInputClick", "onInputFocus", "onInputChange", "onInputBlur", "onButtonClick", "onDayChange", "onValidate"]);
+    var formatMessage = useIntl().formatMessage;
+    var calendarLabelDesc = formatMessage({
+      id: "datePicker.calendarLabelDescription",
+      defaultMessage: "Select date from calendar for:",
+      description: "Label for the search input"
+    });
     var reactId = useId();
     var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
     var containerRef = useRef(null);
@@ -217,7 +224,7 @@ const DatePicker = /*#__PURE__*/function () {
       "aria-labelledby": "".concat(id, "-calendar-label ").concat(id, "-input-label")
     }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisuallyHidden, {
       id: "".concat(id, "-calendar-label")
-    }, "Select date from calendar for:"), /*#__PURE__*/React.createElement(CalendarSingle, {
+    }, calendarLabelDesc), /*#__PURE__*/React.createElement(CalendarSingle, {
       id: calendarId,
       selected: selectedDay,
       defaultMonth: defaultMonth,

package/dist/esm/DatePicker/utils/getLocale.mjs

@@ -1,12 +1,105 @@
-import { enAU, enUS } from 'date-fns/locale';
+import { enGB, cy, vi, tr, th, es, sk, sr, ro, pt, nb, ms, lt, lv, km, id, hu, hi, el, ht, frCA, fi, et, cs, bg, arSA, uk, ptBR, pl, ru, sv, ko, ja, it, he, de, fr, enUS, nl, da, zhTW, zhCN } from 'date-fns/locale';
 var getLocale = function (locale) {
   switch (locale) {
-    case "en-AU":
-      return enAU;
+    case "zh":
+      return zhCN;
+    case "zh-TW":
+      return zhTW;
+    case "da":
+      return da;
+    case "nl":
+      return nl;
     case "en-US":
       return enUS;
+    case "fr":
+      return fr;
+    case "de":
+      return de;
+    case "he":
+      return he;
+    case "it":
+      return it;
+    case "ja":
+      return ja;
+    case "ko":
+    case "kr":
+      return ko;
+    case "es-419":
+      return es;
+    case "sv":
+      return sv;
+    case "ru":
+      return ru;
+    // @todo: Add when locale is available https://github.com/date-fns/date-fns/issues/2627
+    // case "mi":
+    // return miNZ
+    case "pl":
+      return pl;
+    case "pt-BR":
+      return ptBR;
+    case "uk":
+      return uk;
+    case "en":
+    case "en-GB":
+    case "en-AU":
+      return enGB;
+    case "ar":
+      return arSA;
+    case "bg":
+      return bg;
+    case "cs":
+      return cs;
+    case "et":
+      return et;
+    case "fi":
+      return fi;
+    case "fr-CA":
+      return frCA;
+    case "ht":
+      return ht;
+    case "el":
+      return el;
+    case "hi":
+      return hi;
+    case "hu":
+      return hu;
+    case "id":
+      return id;
+    case "km-KH":
+      return km;
+    case "lv":
+      return lv;
+    case "lt":
+      return lt;
+    case "ms":
+      return ms;
+    case "nb":
+    case "no":
+      return nb;
+    case "pt":
+      return pt;
+    case "ro":
+      return ro;
+    case "sr":
+      return sr;
+    // case "si-LK":
+    //   return siLK
+    case "sk":
+      return sk;
+    case "es":
+      return es;
+    // case "tl":
+    //   return tlPH
+    case "th":
+      return th;
+    case "tr":
+      return tr;
+    case "vi":
+      return vi;
+    case "cy":
+      return cy;
     default:
-      return enAU;
+      return enGB;
   }
 };
 export { getLocale };

package/dist/esm/DatePicker/utils/validateDate.mjs

@@ -1,4 +1,6 @@
 import { __assign } from 'tslib';
+import React from 'react';
+import { FormattedMessage } from '@cultureamp/i18n-react-intl';
 import '../../Calendar/CalendarSingle/CalendarSingle.mjs';
 import '../../Calendar/CalendarRange/CalendarRange.mjs';
 import 'date-fns';
@@ -30,7 +32,18 @@ var validateDate = function (_a) {
     return {
       validationResponse: __assign(__assign({}, baseResponse), {
         status: "error",
-        validationMessage: inputValue ? "".concat(inputValue, " is an invalid date") : "Date is invalid",
+        validationMessage: inputValue ? ( /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "date.validation.invalidDateWithValue",
+          defaultMessage: "{inputValue} is an invalid date",
+          description: "Error message when the user enters an invalid date and we know their input value",
+          values: {
+            inputValue: inputValue
+          }
+        })) : ( /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "date.validation.invalidDate",
+          defaultMessage: "Date is invalid",
+          description: "Error message when the user enters an invalid date and we do not know their input value"
+        })),
         isInvalid: true
       }),
       newDate: undefined
@@ -40,7 +53,14 @@ var validateDate = function (_a) {
     return {
       validationResponse: __assign(__assign({}, baseResponse), {
         status: "error",
-        validationMessage: "".concat(inputValue, " is not available, try another date"),
+        validationMessage: ( /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "date.validation.unavailableDate",
+          defaultMessage: "{inputValue} is not available, try another date",
+          description: "Error message when the user tries to select a date that is unavailable",
+          values: {
+            inputValue: inputValue
+          }
+        })),
         isDisabled: true
       }),
       newDate: undefined