@kaizen/components 1.47.0 → 1.47.1

package/dist/esm/DatePicker/DatePicker.mjs

@@ -0,0 +1,230 @@
+import { __rest, __assign } from 'tslib';
+import React, { useRef, useId, useState, useEffect } from 'react';
+import { FocusOn } from 'react-focus-on';
+import { CalendarSingle } from '../Calendar/CalendarSingle/CalendarSingle.mjs';
+import '../Calendar/CalendarRange/CalendarRange.mjs';
+import { calculateDisabledDays } from '../Calendar/utils/calculateDisabledDays.mjs';
+import { formatDateAsNumeral } from '../Calendar/utils/formatDateAsNumeral.mjs';
+import { formatDateAsText } from '../Calendar/utils/formatDateAsText.mjs';
+import { isDisabledDate } from '../Calendar/utils/isDisabledDate.mjs';
+import { isInvalidDate } from '../Calendar/utils/isInvalidDate.mjs';
+import { isSelectingDayInCalendar } from '../Calendar/utils/isSelectingDayInCalendar.mjs';
+import { parseDateAsTextOrNumeral } from '../Calendar/utils/parseDateAsTextOrNumeral.mjs';
+import 'date-fns';
+import { setFocusInCalendar } from '../Calendar/utils/setFocusInCalendar.mjs';
+import { CalendarPopover } from '../Calendar/CalendarPopover/CalendarPopover.mjs';
+import { DateInputField } from './subcomponents/DateInputField/DateInputField.mjs';
+import { getLocale } from './utils/getLocale.mjs';
+import { validateDate } from './utils/validateDate.mjs';
+
+/**
+ * {@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}
+ */
+const DatePicker = /*#__PURE__*/function () {
+  const DatePicker = function (_a) {
+    var propsId = _a.id,
+      _b = _a.buttonRef,
+      propsButtonRef = _b === void 0 ? 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 = __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 = useId();
+    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+    var containerRef = useRef(null);
+    var inputRef = useRef(null);
+    var buttonRef = useRef((propsButtonRef === null || propsButtonRef === void 0 ? void 0 : propsButtonRef.current) || null);
+    var dateInputRefs = useRef({
+      inputRef: inputRef,
+      buttonRef: buttonRef
+    });
+    var _d = useState(""),
+      inputValue = _d[0],
+      setInputValue = _d[1];
+    var _e = useState(false),
+      isOpen = _e[0],
+      setIsOpen = _e[1];
+    var _f = useState(),
+      lastTrigger = _f[0],
+      setLastTrigger = _f[1];
+    var _g = useState(),
+      inbuiltStatus = _g[0],
+      setInbuiltStatus = _g[1];
+    var _h = useState(),
+      inbuiltValidationMessage = _h[0],
+      setInbuiltValidationMessage = _h[1];
+    var shouldUseInbuiltValidation = onValidate === undefined;
+    var locale = getLocale(propsLocale);
+    var disabledDays = 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({
+          date: date,
+          inputValue: newInputValue,
+          disabledDays: disabledDays
+        }),
+        validationResponse = _a.validationResponse,
+        newDate = _a.newDate;
+      handleValidation(validationResponse);
+      onDayChange(newDate);
+    };
+    var handleCalendarDayChange = function (date) {
+      if (!isDisabledDate(date, disabledDays)) {
+        var newInputValue = lastTrigger === "calendarButton" ? formatDateAsText(date, disabledDays, locale) : 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(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(e.relatedTarget)) return;
+      if (inputValue !== "") {
+        var parsedDate = parseDateAsTextOrNumeral(inputValue, locale);
+        if (!isInvalidDate(parsedDate)) {
+          setInputValue(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(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(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();
+    };
+    useEffect(function () {
+      if (selectedDay) {
+        setInputValue(formatDateAsText(selectedDay, disabledDays, locale));
+        var formattedDate = formatDateAsNumeral(selectedDay, locale);
+        var validationResponse = validateDate({
+          date: selectedDay,
+          inputValue: formattedDate,
+          disabledDays: disabledDays
+        }).validationResponse;
+        if (!validationResponse.isValidDate && !validationResponse.isEmpty) {
+          handleValidation(validationResponse);
+        }
+      }
+    }, [selectedDay]);
+    var calendarId = "".concat(id, "-calendar-dialog");
+    return /*#__PURE__*/React.createElement(FocusOn, {
+      scrollLock: false,
+      returnFocus: false,
+      onDeactivation: handleReturnFocus,
+      onClickOutside: function () {
+        return setIsOpen(false);
+      },
+      onEscapeKey: function () {
+        return setIsOpen(false);
+      },
+      enabled: isOpen
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: containerRef
+    }, /*#__PURE__*/React.createElement(DateInputField, __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 && ( /*#__PURE__*/React.createElement(CalendarPopover, {
+      referenceElement: containerRef.current
+    }, /*#__PURE__*/React.createElement(CalendarSingle, {
+      id: calendarId,
+      selected: selectedDay,
+      defaultMonth: defaultMonth,
+      weekStartsOn: weekStartsOn,
+      disabled: disabledDays,
+      locale: locale,
+      onDayClick: handleCalendarDayChange,
+      onMount: handleCalendarMount
+    }))));
+  };
+  DatePicker.displayName = "DatePicker";
+  return DatePicker;
+}();
+export { DatePicker };

package/dist/esm/DatePicker/subcomponents/DateInputField/DateInputField.mjs

@@ -0,0 +1,54 @@
+import { __rest, __assign } from 'tslib';
+import React, { useId } from 'react';
+import classnames from 'classnames';
+import { enAU } from 'date-fns/locale';
+import '../../../DateInput/DateInput/DateInput.mjs';
+import { DateInputDescription } from '../../../DateInput/DateInputDescription/DateInputDescription.mjs';
+import { DateInputWithIconButton } from '../../../DateInput/DateInputWithIconButton/DateInputWithIconButton.mjs';
+import { FieldMessage } from '../../../FieldMessage/FieldMessage.mjs';
+import styles from './DateInputField.module.scss.mjs';
+const DateInputField = /*#__PURE__*/function () {
+  const DateInputField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+    var description = _a.description,
+      status = _a.status,
+      validationMessage = _a.validationMessage,
+      _b = _a.locale,
+      locale = _b === void 0 ? enAU : _b,
+      propsId = _a.id,
+      disabled = _a.disabled,
+      _c = _a.isReversed,
+      isReversed = _c === void 0 ? false : _c,
+      classNameOverride = _a.classNameOverride,
+      dateInputWithIconButtonProps = __rest(_a, ["description", "status", "validationMessage", "locale", "id", "disabled", "isReversed", "classNameOverride"]);
+    var reactId = useId();
+    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+    var descriptionId = "".concat(id, "-field-message");
+    var shouldShowValidationMessage = !disabled && validationMessage;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNameOverride
+    }, /*#__PURE__*/React.createElement(DateInputWithIconButton, __assign({
+      ref: ref,
+      id: id,
+      "aria-describedby": descriptionId,
+      status: status,
+      disabled: disabled,
+      isReversed: isReversed
+    }, dateInputWithIconButtonProps)), shouldShowValidationMessage && ( /*#__PURE__*/React.createElement(FieldMessage, {
+      message: validationMessage,
+      status: status,
+      reversed: isReversed
+    })), /*#__PURE__*/React.createElement("div", {
+      className: classnames(disabled && styles.disabled)
+    }, /*#__PURE__*/React.createElement(FieldMessage, {
+      id: descriptionId,
+      message: /*#__PURE__*/React.createElement(DateInputDescription, {
+        description: description,
+        locale: locale
+      }),
+      reversed: isReversed
+    })));
+  });
+  DateInputField.displayName = "DateInputField";
+  return DateInputField;
+}();
+export { DateInputField };

package/dist/esm/DatePicker/subcomponents/DateInputField/DateInputField.module.scss.mjs

@@ -0,0 +1,7 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".DateInputField-module_disabled__-Y0lJ{opacity:.3}";
+var styles = {
+  "disabled": "DateInputField-module_disabled__-Y0lJ"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

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

@@ -0,0 +1,12 @@
+import { enAU, enUS } from 'date-fns/locale';
+var getLocale = function (locale) {
+  switch (locale) {
+    case "en-AU":
+      return enAU;
+    case "en-US":
+      return enUS;
+    default:
+      return enAU;
+  }
+};
+export { getLocale };

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

@@ -0,0 +1,56 @@
+import { __assign } from 'tslib';
+import '../../Calendar/CalendarSingle/CalendarSingle.mjs';
+import '../../Calendar/CalendarRange/CalendarRange.mjs';
+import 'date-fns';
+import { isInvalidDate } from '../../Calendar/utils/isInvalidDate.mjs';
+import { isDisabledDate } from '../../Calendar/utils/isDisabledDate.mjs';
+var validateDate = function (_a) {
+  var date = _a.date,
+    inputValue = _a.inputValue,
+    disabledDays = _a.disabledDays;
+  var baseResponse = {
+    date: date,
+    inputValue: inputValue,
+    status: undefined,
+    validationMessage: undefined,
+    isInvalid: false,
+    isDisabled: false,
+    isEmpty: false,
+    isValidDate: false
+  };
+  if (date === undefined) {
+    return {
+      validationResponse: __assign(__assign({}, baseResponse), {
+        isEmpty: true
+      }),
+      newDate: undefined
+    };
+  }
+  if (isInvalidDate(date)) {
+    return {
+      validationResponse: __assign(__assign({}, baseResponse), {
+        status: "error",
+        validationMessage: inputValue ? "".concat(inputValue, " is an invalid date") : "Date is invalid",
+        isInvalid: true
+      }),
+      newDate: undefined
+    };
+  }
+  if (isDisabledDate(date, disabledDays)) {
+    return {
+      validationResponse: __assign(__assign({}, baseResponse), {
+        status: "error",
+        validationMessage: "".concat(inputValue, " is not available, try another date"),
+        isDisabled: true
+      }),
+      newDate: undefined
+    };
+  }
+  return {
+    validationResponse: __assign(__assign({}, baseResponse), {
+      isValidDate: true
+    }),
+    newDate: date
+  };
+};
+export { validateDate };

package/dist/esm/DateRangePicker/DateRangePicker.mjs

@@ -0,0 +1,142 @@
+import { __rest, __assign } from 'tslib';
+import React, { useRef, useId, useState } from 'react';
+import classnames from 'classnames';
+import { enUS } from 'date-fns/locale';
+import { isMatch } from 'react-day-picker';
+import { FocusOn } from 'react-focus-on';
+import '../Calendar/CalendarSingle/CalendarSingle.mjs';
+import '../Calendar/CalendarRange/CalendarRange.mjs';
+import { calculateDisabledDays } from '../Calendar/utils/calculateDisabledDays.mjs';
+import 'date-fns';
+import { isDisabledDate } from '../Calendar/utils/isDisabledDate.mjs';
+import { CalendarPopover } from '../Calendar/CalendarPopover/CalendarPopover.mjs';
+import { LegacyCalendarRange } from '../Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { DateStartIcon } from '../Icon/DateStartIcon.mjs';
+import { Label } from '../Label/Label.mjs';
+import styles from './DateRangePicker.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094237/Date+Range+Picker Guidance} |
+ * {@link https://cultureamp.design/storybook/?path=/docs/components-date-controls-daterangepicker--docs Storybook}
+ */
+const DateRangePicker = /*#__PURE__*/function () {
+  const DateRangePicker = function (_a) {
+    var _b;
+    var propsId = _a.id,
+      _c = _a.buttonRef,
+      buttonRef = _c === void 0 ? useRef(null) : _c;
+    _a.description; // not used
+    var labelText = _a.labelText,
+      _d = _a.isDisabled,
+      isDisabled = _d === void 0 ? false : _d,
+      classNameOverride = _a.classNameOverride,
+      disabledDates = _a.disabledDates,
+      disabledDaysOfWeek = _a.disabledDaysOfWeek,
+      disabledRange = _a.disabledRange,
+      disabledBeforeAfter = _a.disabledBeforeAfter,
+      disabledBefore = _a.disabledBefore,
+      disabledAfter = _a.disabledAfter,
+      weekStartsOn = _a.weekStartsOn,
+      defaultMonth = _a.defaultMonth,
+      selectedDateRange = _a.selectedDateRange,
+      value = _a.value,
+      onChange = _a.onChange,
+      inputProps = __rest(_a, ["id", "buttonRef", "description", "labelText", "isDisabled", "classNameOverride", "disabledDates", "disabledDaysOfWeek", "disabledRange", "disabledBeforeAfter", "disabledBefore", "disabledAfter", "weekStartsOn", "defaultMonth", "selectedDateRange", "value", "onChange"]);
+    var reactId = useId();
+    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+    var containerRef = useRef(null);
+    var _e = useState(false),
+      isOpen = _e[0],
+      setIsOpen = _e[1];
+    var disabledDays = calculateDisabledDays({
+      disabledDates: disabledDates,
+      disabledDaysOfWeek: disabledDaysOfWeek,
+      disabledRange: disabledRange,
+      disabledBeforeAfter: disabledBeforeAfter,
+      disabledBefore: disabledBefore,
+      disabledAfter: disabledAfter
+    });
+    var handleOpenClose = function () {
+      setIsOpen(!isOpen);
+    };
+    var handleReturnFocus = function () {
+      if (buttonRef.current) {
+        buttonRef.current.focus();
+      }
+    };
+    var handleDayClick = function (day) {
+      /** react-day-picker will fire events for disabled days by default.
+       *  We're checking here if it includes the CSS Modules class for disabled
+       *  on the modifier to then return early.
+       * */
+      if (isDisabledDate(day, disabledDays)) {
+        return;
+      }
+      if (!selectedDateRange) return;
+      /** If user has already selected range and then selects again, treat first
+       * click as the start of the new range.
+       *  */
+      if (isSelectingFirstDay(selectedDateRange, day)) {
+        onChange({
+          from: day,
+          to: undefined
+        });
+      } else {
+        // Otherwise, treat click as the final selection.
+        onChange({
+          from: selectedDateRange.from,
+          to: day
+        });
+        handleOpenClose();
+      }
+    };
+    var isSelectingFirstDay = function (range, day) {
+      var isBeforeFirstDay = !!range.from && isMatch(day, [{
+        before: range.from
+      }]);
+      var isRangeSelected = !!range.from && !!range.to;
+      return !range.from || isBeforeFirstDay || isRangeSelected;
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      ref: containerRef,
+      className: classNameOverride
+    }, /*#__PURE__*/React.createElement(Label, {
+      disabled: isDisabled,
+      htmlFor: id,
+      labelText: labelText
+    }), /*#__PURE__*/React.createElement("button", __assign({
+      type: "button",
+      id: id,
+      className: classnames(styles.button, styles.withStartIconAdornment, (_b = {}, _b[styles.disabled] = isDisabled, _b)),
+      disabled: isDisabled,
+      ref: buttonRef,
+      onClick: handleOpenClose,
+      "aria-label": (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? "Change date: ".concat(value) : "Choose date"
+    }, inputProps), /*#__PURE__*/React.createElement("div", {
+      className: styles.startIconAdornment
+    }, /*#__PURE__*/React.createElement(DateStartIcon, {
+      role: "presentation"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.value
+    }, (selectedDateRange === null || selectedDateRange === void 0 ? void 0 : selectedDateRange.from) ? value : undefined))), isOpen && ( /*#__PURE__*/React.createElement(FocusOn, {
+      scrollLock: false,
+      onDeactivation: handleReturnFocus,
+      onClickOutside: handleOpenClose,
+      onEscapeKey: handleOpenClose,
+      enabled: isOpen
+    }, /*#__PURE__*/React.createElement(CalendarPopover, {
+      referenceElement: containerRef.current
+    }, /*#__PURE__*/React.createElement(LegacyCalendarRange, {
+      selectedRange: selectedDateRange,
+      defaultMonth: defaultMonth,
+      weekStartsOn: weekStartsOn,
+      disabledDays: disabledDays,
+      onDayChange: handleDayClick,
+      locale: enUS
+    })))));
+  };
+  DateRangePicker.displayName = "DateRangePicker";
+  return DateRangePicker;
+}();
+export { DateRangePicker };

package/dist/esm/DateRangePicker/DateRangePicker.module.scss.mjs

@@ -0,0 +1,11 @@
+import { styleInject } from '../__build-tools/styleInject.mjs';
+var css_248z = ".DateRangePicker-module_button__cA-Ss{align-items:center;appearance:none;background:transparent;background-clip:padding-box;background-color:var(--color-white,#fff);border:none;border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-gray-500,#878792);border-radius:var(--border-solid-border-radius,7px);color:inherit;color:var(--color-purple-800,#2f2438);display:inline;display:flex;font:inherit;font-family:var(--typography-paragraph-body-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);height:48px;letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:1.5;margin:0;margin-top:var(--spacing-6,.375rem);padding:0;padding:0 var(--spacing-sm,.75rem);position:relative;text-align:left;width:100%}[dir=rtl] .DateRangePicker-module_button__cA-Ss{text-align:right}.DateRangePicker-module_button__cA-Ss:focus-visible:not([disabled]),.DateRangePicker-module_button__cA-Ss:hover:not([disabled]){background-color:var(--color-gray-200,#f4f4f5);border-color:var(--color-gray-600,#524e56);color:var(--color-purple-800,#2f2438)}.DateRangePicker-module_button__cA-Ss:focus-visible:not([disabled]){outline:var(--color-blue-500,#0168b3) var(--border-focus-ring-border-style,solid) var(--border-focus-ring-border-width,2px);outline-offset:1px}.DateRangePicker-module_button__cA-Ss :focus:not([disabled]){outline:none}.DateRangePicker-module_button__cA-Ss.DateRangePicker-module_disabled__f0zmt{background:var(--color-white,#fff);border-color:rgba(var(--color-gray-500-rgb,135,135,146),.7);color:rgba(var(--color-purple-800-rgb,47,36,56),.7);opacity:.5}.DateRangePicker-module_button__cA-Ss .DateRangePicker-module_value__dtZAj{padding-left:1.75rem;padding-right:var(--spacing-sm,.75rem)}.DateRangePicker-module_button__cA-Ss .DateRangePicker-module_value__dtZAj[dir=rtl],[dir=rtl] .DateRangePicker-module_button__cA-Ss .DateRangePicker-module_value__dtZAj{padding-left:var(--spacing-sm,.75rem);padding-right:1.75rem}.DateRangePicker-module_startIconAdornment__lCw3l{margin-top:-1px}.DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_startIconAdornment__lCw3l{color:var(--color-purple-800,#2f2438);height:1.25rem;left:var(--spacing-sm,.75rem);opacity:.5;position:absolute;right:auto;top:50%;transform:translateY(-50%)}.DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_startIconAdornment__lCw3l[dir=rtl],[dir=rtl] .DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_startIconAdornment__lCw3l{left:auto;right:var(--spacing-sm,.75rem)}.DateRangePicker-module_withStartIconAdornment__auP6u:focus-within:not(.DateRangePicker-module_disabled__f0zmt) .DateRangePicker-module_startIconAdornment__lCw3l,.DateRangePicker-module_withStartIconAdornment__auP6u:hover:not(.DateRangePicker-module_disabled__f0zmt) .DateRangePicker-module_startIconAdornment__lCw3l{opacity:.7}.DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_button__cA-Ss{padding-left:calc(var(--spacing-md, 1.5rem) + 1.25rem);padding-right:var(--spacing-sm,.75rem)}.DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_button__cA-Ss[dir=rtl],[dir=rtl] .DateRangePicker-module_withStartIconAdornment__auP6u .DateRangePicker-module_button__cA-Ss{padding-left:var(--spacing-sm,.75rem);padding-right:calc(var(--spacing-md, 1.5rem) + 1.25rem)}";
+var styles = {
+  "button": "DateRangePicker-module_button__cA-Ss",
+  "disabled": "DateRangePicker-module_disabled__f0zmt",
+  "value": "DateRangePicker-module_value__dtZAj",
+  "startIconAdornment": "DateRangePicker-module_startIconAdornment__lCw3l",
+  "withStartIconAdornment": "DateRangePicker-module_withStartIconAdornment__auP6u"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/DateRangePicker/utils/formatDateRangeValue.mjs

@@ -0,0 +1,22 @@
+var dateFormatOptions = {
+  month: "short",
+  year: "numeric",
+  day: "numeric"
+};
+var dateWithoutYearFormatOptions = {
+  month: "short",
+  day: "numeric"
+};
+var formatDateRangeValue = function (dateRange) {
+  var _a, _b, _c, _d;
+  if (dateRange.to) {
+    var isSameYear = ((_a = dateRange.from) === null || _a === void 0 ? void 0 : _a.getFullYear()) === ((_b = dateRange === null || dateRange === void 0 ? void 0 : dateRange.to) === null || _b === void 0 ? void 0 : _b.getFullYear());
+    var from = isSameYear ? (_c = dateRange.from) === null || _c === void 0 ? void 0 : _c.toLocaleDateString("en-US", dateWithoutYearFormatOptions) : (_d = dateRange.from) === null || _d === void 0 ? void 0 : _d.toLocaleDateString("en-US", dateFormatOptions);
+    var to = dateRange.to.toLocaleDateString("en-US", dateFormatOptions);
+    return "".concat(from, " \u2013 ").concat(to);
+  } else {
+    var from = dateRange.from ? dateRange.from.toLocaleDateString("en-US", dateFormatOptions) : "";
+    return from;
+  }
+};
+export { formatDateRangeValue };

package/dist/esm/Divider/Divider.mjs

@@ -0,0 +1,25 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Divider.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061035/Divider Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-divider--docs Storybook}
+ */
+const Divider = /*#__PURE__*/function () {
+  const Divider = function (_a) {
+    var variant = _a.variant,
+      _b = _a.isReversed,
+      isReversed = _b === void 0 ? false : _b,
+      classNameOverride = _a.classNameOverride,
+      props = __rest(_a, ["variant", "isReversed", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("hr", __assign({
+      "aria-hidden": "true",
+      className: classnames(styles.wrapper, classNameOverride, isReversed && styles.reversed, styles[variant])
+    }, props));
+  };
+  Divider.displayName = "Divider";
+  return Divider;
+}();
+export { Divider };

package/dist/esm/Divider/Divider.module.scss.mjs

@@ -0,0 +1,11 @@
+import { styleInject } from '../__build-tools/styleInject.mjs';
+var css_248z = ".Divider-module_wrapper__K5mht{border:0;border-radius:var(--border-solid-border-radius,7px);margin:0;visibility:visible;width:100%}.Divider-module_content__BhDyy,.Divider-module_menuSeparator__kjXV5{border-top:1px solid;border-color:rgba(var(--color-gray-600-rgb,82,78,86),.1)}.Divider-module_canvas__2eQT6{border-bottom:1px solid;border-top:1px solid;border-color:rgba(var(--color-gray-600-rgb,82,78,86),.1)}.Divider-module_reversed__puJw2{border-color:rgba(var(--color-white-rgb,255,255,255),.1)}.Divider-module_menuSeparator__kjXV5{margin:5px 0}";
+var styles = {
+  "wrapper": "Divider-module_wrapper__K5mht",
+  "content": "Divider-module_content__BhDyy",
+  "menuSeparator": "Divider-module_menuSeparator__kjXV5",
+  "canvas": "Divider-module_canvas__2eQT6",
+  "reversed": "Divider-module_reversed__puJw2"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/EmptyState/EmptyState.mjs

@@ -0,0 +1,65 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Heading } from '../Heading/Heading.mjs';
+import '../Illustration/subcomponents/Base/Base.mjs';
+import '../Illustration/Scene/BrandMomentCaptureIntro/BrandMomentCaptureIntro.mjs';
+import { EmptyStatesPositive, EmptyStatesNeutral, EmptyStatesNegative, EmptyStatesInformative, EmptyStatesAction } from '../Illustration/Scene/Scene.mjs';
+import { Text } from '../Text/Text.mjs';
+import styles from './EmptyState.module.scss.mjs';
+var ILLUSTRATIONS = {
+  positive: EmptyStatesPositive,
+  neutral: EmptyStatesNeutral,
+  negative: EmptyStatesNegative,
+  informative: EmptyStatesInformative,
+  action: EmptyStatesAction
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094098/Empty+State Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-empty-state--docs Storybook}
+ */
+const EmptyState = /*#__PURE__*/function () {
+  const EmptyState = function (_a) {
+    var children = _a.children,
+      id = _a.id,
+      _b = _a.illustrationType,
+      illustrationType = _b === void 0 ? "informative" : _b,
+      _c = _a.layoutContext,
+      layoutContext = _c === void 0 ? "sidebarAndContent" : _c,
+      headingProps = _a.headingProps,
+      bodyText = _a.bodyText,
+      straightCorners = _a.straightCorners,
+      _d = _a.isAnimated,
+      isAnimated = _d === void 0 ? true : _d,
+      _e = _a.loop,
+      loop = _e === void 0 ? false : _e,
+      classNameOverride = _a.classNameOverride,
+      props = __rest(_a, ["children", "id", "illustrationType", "layoutContext", "headingProps", "bodyText", "straightCorners", "isAnimated", "loop", "classNameOverride"]);
+    var IllustrationComponent = ILLUSTRATIONS[illustrationType];
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(classNameOverride, styles[illustrationType], styles.container, styles.zen, styles[layoutContext], straightCorners && styles.straightCorners),
+      id: id
+    }, props), /*#__PURE__*/React.createElement("div", {
+      className: styles.illustrationSide
+    }, isAnimated ? ( /*#__PURE__*/React.createElement(IllustrationComponent, {
+      isAnimated: true,
+      loop: loop,
+      classNameOverride: styles.illustration
+    })) : ( /*#__PURE__*/React.createElement(IllustrationComponent, {
+      alt: illustrationType,
+      classNameOverride: styles.illustration
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: styles.textSide
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.textSideInner
+    }, headingProps && ( /*#__PURE__*/React.createElement(Heading, __assign({
+      classNameOverride: styles.heading
+    }, headingProps))), /*#__PURE__*/React.createElement(Text, {
+      variant: "body",
+      classNameOverride: styles.description
+    }, bodyText), children)));
+  };
+  EmptyState.displayName = "EmptyState";
+  return EmptyState;
+}();
+export { EmptyState };