@kaizen/components 1.52.0 → 1.53.0

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

@@ -7,6 +7,8 @@ var getLocale = function (locale$1) {
       return locale.enAU;
     case "en-US":
       return locale.enUS;
+    case "fr-CA":
+      return locale.frCA;
     default:
       return locale.enAU;
   }

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/cjs/__future__/Workflow/subcomponents/Header/Header.cjs

@@ -19,7 +19,7 @@ var Header = function (_a) {
     headerActions = _a.headerActions,
     restProps = tslib.__rest(_a, ["workflowName", "stepName", "status", "headerActions"]);
   return React__default.default.createElement(Root.HeaderRoot, tslib.__assign({}, restProps), React__default.default.createElement(Branding.Branding, {
-    alt: "Cultureamp"
+    alt: "Culture Amp"
   }), React__default.default.createElement(Titles.Titles, {
     workflowName: workflowName,
     stepName: stepName,

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,10 +1,12 @@
-import { enAU, enUS } from 'date-fns/locale';
+import { enAU, frCA, enUS } from 'date-fns/locale';
 var getLocale = function (locale) {
   switch (locale) {
     case "en-AU":
       return enAU;
     case "en-US":
       return enUS;
+    case "fr-CA":
+      return frCA;
     default:
       return enAU;
   }

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

package/dist/esm/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.mjs

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import { Button } from '../../../../Button/Button/Button.mjs';
 import '../../../../Button/IconButton/IconButton.mjs';
 import 'tslib';
@@ -12,13 +13,19 @@ import '../../../../Menu/subcomponents/StatelessMenu/StatelessMenu.mjs';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 const AddFiltersMenu = /*#__PURE__*/function () {
   const AddFiltersMenu = function () {
+    var formatMessage = useIntl().formatMessage;
+    var menuButtonLabel = formatMessage({
+      id: "filterBar.addFiltersMenu.buttonLabel",
+      defaultMessage: "Add Filters",
+      description: "Menu button label to show additional available filter options"
+    });
     var _a = useFilterBarContext(),
       getInactiveFilters = _a.getInactiveFilters,
       showFilter = _a.showFilter;
     var inactiveFilters = getInactiveFilters();
     return /*#__PURE__*/React.createElement(Menu, {
       button: /*#__PURE__*/React.createElement(Button, {
-        label: "Add Filters",
+        label: menuButtonLabel,
         secondary: true,
         disabled: inactiveFilters.length === 0,
         icon: /*#__PURE__*/React.createElement(AddIcon, {

package/dist/esm/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.mjs

@@ -1,14 +1,26 @@
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import { Button } from '../../../../Button/Button/Button.mjs';
 import '../../../../Button/IconButton/IconButton.mjs';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 import styles from './ClearAllButton.module.scss.mjs';
 const ClearAllButton = /*#__PURE__*/function () {
   const ClearAllButton = function () {
+    var formatMessage = 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 = useFilterBarContext().clearAllFilters;
     return /*#__PURE__*/React.createElement(Button, {
-      label: "Clear all",
-      "aria-label": "Clear all filters",
+      label: clearButtonLabel,
+      "aria-label": clearButtonAriaLabel,
       classNameOverride: styles.clearAllButton,
       secondary: true,
       onClick: clearAllFilters

package/dist/esm/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.mjs

@@ -8,6 +8,7 @@ import 'date-fns';
 import 'react-day-picker';
 import 'date-fns/locale';
 import '../../../../LabelledMessage/LabelledMessage.mjs';
+import '@cultureamp/i18n-react-intl';
 import '../../../FilterDatePicker/subcomponents/DateInputField/DateInputField.mjs';
 import { useFilterBarContext } from '../../context/FilterBarContext.mjs';
 import { FilterBarButton } from '../FilterBarButton/FilterBarButton.mjs';

package/dist/esm/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.mjs

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import { ButtonGroup } from '../../../ButtonGroup/ButtonGroup.mjs';
 import '../../../Icon/subcomponents/SVG/SVG.mjs';
 import { ClearIcon } from '../../../Icon/ClearIcon.mjs';
@@ -13,9 +14,17 @@ const FilterButtonRemovable = /*#__PURE__*/function () {
     var triggerButtonProps = _a.triggerButtonProps,
       removeButtonProps = _a.removeButtonProps,
       restProps = __rest(_a, ["triggerButtonProps", "removeButtonProps"]);
+    var formatMessage = 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(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 /*#__PURE__*/React.createElement(ButtonGroup, __assign({}, restProps), /*#__PURE__*/React.createElement(FilterButton, __assign({
       ref: ref
     }, triggerButtonProps)), /*#__PURE__*/React.createElement(Tooltip, {

package/dist/esm/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.mjs

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
+import { useIntl } from '@cultureamp/i18n-react-intl';
 import { DateInput } from '../../../../DateInput/DateInput/DateInput.mjs';
 import { DateInputDescription } from '../../../../DateInput/DateInputDescription/DateInputDescription.mjs';
 import '../../../../DateInput/DateInputWithIconButton/DateInputWithIconButton.mjs';
@@ -17,6 +18,12 @@ const DateInputField = /*#__PURE__*/function () {
       locale = _a.locale,
       classNameOverride = _a.classNameOverride,
       restProps = __rest(_a, ["id", "labelText", "description", "disabled", "isReversed", "validationMessage", "locale", "classNameOverride"]);
+    var formatMessage = 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;
@@ -24,7 +31,7 @@ const DateInputField = /*#__PURE__*/function () {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DateInput, __assign({
       ref: ref,
       id: id,
-      labelText: labelText || "Date",
+      labelText: labelText || dateInputLabelFallback,
       "aria-describedby": inputDescribedBy,
       "aria-errormessage": errorMessageId,
       "aria-invalid": dateIsInvalid,

package/dist/esm/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.mjs

@@ -172,6 +172,10 @@ const FilterDateRangePickerField = /*#__PURE__*/function () {
       });
     };
     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(newStartDate, newEndDate)) {
@@ -184,7 +188,7 @@ const FilterDateRangePickerField = /*#__PURE__*/function () {
         from: newStartDate,
         to: newEndDate
       });
-    }, []);
+    }, [inputStartDateLabel, inputEndDateLabel]);
     return /*#__PURE__*/React.createElement("div", __assign({
       className: classnames(styles.filterDateRangePickerField, classNameOverride)
     }, restProps), /*#__PURE__*/React.createElement(DateRangeInputField, {

package/dist/esm/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.mjs

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

package/dist/esm/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.mjs

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

package/dist/esm/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.mjs

@@ -1,4 +1,6 @@
 import { __assign } from 'tslib';
+import React from 'react';
+import { FormattedMessage } from '@cultureamp/i18n-react-intl';
 import { getNodeText } from '../../../../../utils/getNodeText.mjs';
 import { isValidRange } from './isValidRange.mjs';
 var validateEndDateBeforeStartDate = function (_a) {
@@ -20,7 +22,14 @@ var validateEndDateBeforeStartDate = function (_a) {
       validationResponse: __assign(__assign({}, baseResponse), {
         validationMessage: {
           status: "error",
-          message: "Cannot be earlier than the selection in \"".concat(getNodeText(startDateFieldLabel), "\"")
+          message: ( /*#__PURE__*/React.createElement(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(startDateFieldLabel)
+            }
+          }))
         }
       }),
       newDate: endDate

package/dist/esm/__future__/Workflow/subcomponents/Header/Header.mjs

@@ -12,7 +12,7 @@ const Header = /*#__PURE__*/function () {
       headerActions = _a.headerActions,
       restProps = __rest(_a, ["workflowName", "stepName", "status", "headerActions"]);
     return /*#__PURE__*/React.createElement(HeaderRoot, __assign({}, restProps), /*#__PURE__*/React.createElement(Branding, {
-      alt: "Cultureamp"
+      alt: "Culture Amp"
     }), /*#__PURE__*/React.createElement(Titles, {
       workflowName: workflowName,
       stepName: stepName,

package/dist/types/AvatarGroup/_docs/example-data.d.ts

@@ -0,0 +1,8 @@
+import { AvatarGroupAvatarProps, AvatarList } from "../AvatarGroup";
+export declare const EXAMPLE_USER_1: AvatarGroupAvatarProps;
+export declare const EXAMPLE_USER_2: AvatarGroupAvatarProps;
+export declare const EXAMPLE_USER_3: AvatarGroupAvatarProps;
+export declare const EXAMPLE_USER_4: AvatarGroupAvatarProps;
+export declare const EXAMPLE_USER_5: AvatarGroupAvatarProps;
+export declare const EXAMPLE_USER_6: AvatarGroupAvatarProps;
+export declare const AVATARS: AvatarList;

package/dist/types/BrandMoment/_docs/ExampleHeaders.d.ts

@@ -0,0 +1,3 @@
+export declare const MinimalBasic: () => JSX.Element;
+export declare const MinimalCustomerFocused: () => JSX.Element;
+export declare const FakeNavBar: () => JSX.Element;

package/dist/types/Calendar/_docs/controls/defaultMonthControls.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from "@storybook/react";
+export declare const defaultMonthControls: Partial<ArgTypes>;

package/dist/types/Calendar/_docs/controls/weekStartsOnControls.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from "@storybook/react";
+export declare const weekStartsOnControls: Partial<ArgTypes>;

package/dist/types/Container/Container.d.ts

@@ -4,7 +4,7 @@ import React from "react";
  * {@link https://cultureamp.design/?path=/docs/components-content--docs Storybook}
  */
 export declare const Container: React.ForwardRefExoticComponent<{
-    children?: any;
+    children?: React.ReactNode;
     style?: Pick<React.CSSProperties, "transform" | "left" | "right" | "bottom" | "top" | "position" | "padding" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "transformBox" | "transformOrigin" | "transformStyle"> | undefined;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
     classNameOverride?: string | undefined;