@kaizen/components 0.0.0-canary-test-slack-notify-20230816042051

package/dist/esm/index.js

@@ -0,0 +1,3000 @@
+import { _ as __rest, a as __assign, S as SVG, b as __spreadArray, c as SuccessIcon, I as IndicatorActiveIcon, d as IndicatorInactiveIcon } from './SuccessIcon-64b81f44.js';
+import React, { forwardRef, useRef, useImperativeHandle, useState, useEffect, useContext, useMemo, useReducer, useCallback, createContext } from 'react';
+import classnames from 'classnames';
+import { BadgeAnimated, Badge } from '@kaizen/draft-badge';
+import { LoadingSpinner } from '@kaizen/loading-spinner';
+import { FocusOn } from 'react-focus-on';
+import { usePopper } from 'react-popper';
+import { formatDateAsText, isInvalidDate, DateInput, getLocale, CalendarSingle } from '@kaizen/date-picker';
+import { v4 } from 'uuid';
+import { validateDate as validateDate$1 } from '@kaizen/date-picker/src/utils/validateDate';
+import { formatDateAsNumeral } from '@kaizen/date-picker/src/utils/formatDateAsNumeral';
+import { isDisabledDate } from '@kaizen/date-picker/src/utils/isDisabledDate';
+import { isSelectingDayInCalendar } from '@kaizen/date-picker/src/utils/isSelectingDayInCalendar';
+import { parseDateFromNumeralFormatValue } from '@kaizen/date-picker/src/utils/parseDateFromNumeralFormatValue';
+import { parseDateFromTextFormatValue } from '@kaizen/date-picker/src/utils/parseDateFromTextFormatValue';
+import { FieldMessage } from '@kaizen/draft-form';
+import { useIntl, StaticIntlProvider, FormattedMessage } from '@cultureamp/i18n-react-intl';
+import { Tooltip } from '@kaizen/draft-tooltip';
+import { getLocale as getLocale$1 } from '@kaizen/date-picker/src/utils/getLocale';
+import { formatDateAsText as formatDateAsText$1 } from '@kaizen/date-picker/src/utils/formatDateAsText';
+import { CalendarRange } from '@kaizen/date-picker/src/_subcomponents/Calendar';
+import { isInvalidDate as isInvalidDate$1 } from '@kaizen/date-picker/src/utils/isInvalidDate';
+import { VisuallyHidden } from '@kaizen/a11y';
+import { DateInput as DateInput$1 } from '@kaizen/date-picker/src/_subcomponents/DateInput';
+import { useListBox, useOption, useListBoxSection } from '@react-aria/listbox';
+import { Item, Section } from '@react-stately/collections';
+import { useListState } from '@react-stately/list';
+import { useButton } from '@react-aria/button';
+import { useMenuTrigger } from '@react-aria/menu';
+import { useMenuTriggerState } from '@react-stately/menu';
+import { Button as Button$1 } from '@kaizen/button';
+import { LoadingInput, LoadingParagraph } from '@kaizen/loading-skeleton';
+import { useFocusRing, FocusScope } from '@react-aria/focus';
+import { mergeProps } from '@react-aria/utils';
+import { Paragraph, Heading } from '@kaizen/typography';
+import { useOverlay, DismissButton } from '@react-aria/overlays';
+import { Divider } from '@kaizen/draft-divider';
+import { useSelect, HiddenSelect } from '@react-aria/select';
+import { useSelectState } from '@react-stately/select';
+import { Menu, MenuList, MenuItem } from '@kaizen/draft-menu';
+import { IntlContext } from 'react-intl';
+import { makeCssVariableDefinitionsMap } from '@kaizen/design-tokens';
+import { Tag } from '@kaizen/draft-tag';
+import { Brand } from '@kaizen/brand';
+import { BrandMomentError } from '@kaizen/draft-illustration';
+import { assetUrl } from '@kaizen/hosted-assets';
+import { useMediaQueries } from '@kaizen/responsive';
+
+var styles$I = {"button":"GenericButton-module_button__6UapT","reversed":"GenericButton-module_reversed__sRTZQ","working":"GenericButton-module_working__gROAQ","content":"GenericButton-module_content__h36L5","default":"GenericButton-module_default__yF6Jf","primary":"GenericButton-module_primary__CSbSO","destructive":"GenericButton-module_destructive__Y8pS7","secondary":"GenericButton-module_secondary__nZsK3","small":"GenericButton-module_small__IcZLk","container":"GenericButton-module_container__e4NCq","label":"GenericButton-module_label__-ejZ4","fullWidth":"GenericButton-module_fullWidth__X-uKZ","iconWrapper":"GenericButton-module_iconWrapper__U5NdE","additionalContentWrapper":"GenericButton-module_additionalContentWrapper__N1-lS","loadingSpinner":"GenericButton-module_loadingSpinner__1iVkw","centeredLoadingSpinner":"GenericButton-module_centeredLoadingSpinner__zsCEe","hidden":"GenericButton-module_hidden__Bz0T6"};
+
+var getCustomProps = function(props) {
+  var keys = Object.keys(props).filter(function(k) {
+    return k.indexOf("-") !== -1;
+  });
+  return keys.reduce(function(acc, val) {
+    acc[val] = props[val];
+    return acc;
+  }, {});
+};
+var GenericButton = forwardRef(function(props, ref) {
+  var buttonRef = useRef();
+  useImperativeHandle(ref, function() {
+    return {
+      focus: function() {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+    };
+  });
+  var determineButtonRenderer = function() {
+    if (props.component) {
+      return renderCustomComponent(props.component, props);
+    }
+    if (props.href && !props.disabled && !props.working) {
+      return renderLink(props, buttonRef);
+    }
+    return renderButton(props, buttonRef);
+  };
+  return React.createElement("span", { className: classnames(styles$I.container, props.fullWidth && styles$I.fullWidth), "aria-live": "polite" }, determineButtonRenderer());
+});
+GenericButton.defaultProps = {
+  iconPosition: "start",
+  iconButton: false,
+  primary: false,
+  secondary: false,
+  newTabAndIUnderstandTheAccessibilityImplications: false,
+  disableTabFocusAndIUnderstandTheAccessibilityImplications: false,
+  type: "button"
+};
+GenericButton.displayName = "GenericButton";
+var renderCustomComponent = function(CustomComponent, props) {
+  var id = props.id, disabled = props.disabled, href = props.href, onClick = props.onClick, onFocus = props.onFocus, onBlur = props.onBlur, rest = __rest(props, ["id", "disabled", "href", "onClick", "onFocus", "onBlur"]);
+  var customProps = getCustomProps(rest);
+  return React.createElement(CustomComponent, __assign({ id, className: buttonClass(props), disabled, href, onClick, onFocus, onBlur, "aria-label": generateAriaLabel(props) }, customProps), renderContent(props));
+};
+var renderButton = function(props, ref) {
+  var id = props.id, disabled = props.disabled, onClick = props.onClick, onMouseDown = props.onMouseDown, type = props.type, disableTabFocusAndIUnderstandTheAccessibilityImplications = props.disableTabFocusAndIUnderstandTheAccessibilityImplications, onFocus = props.onFocus, onBlur = props.onBlur, form = props.form, formAction = props.formAction, formMethod = props.formMethod, formEncType = props.formEncType, formTarget = props.formTarget, formNoValidate = props.formNoValidate, rest = __rest(props, ["id", "disabled", "onClick", "onMouseDown", "type", "disableTabFocusAndIUnderstandTheAccessibilityImplications", "onFocus", "onBlur", "form", "formAction", "formMethod", "formEncType", "formTarget", "formNoValidate"]);
+  var customProps = getCustomProps(rest);
+  return React.createElement("button", __assign({
+    // eslint-disable-next-line react/button-has-type
+    type,
+    id,
+    disabled,
+    className: buttonClass(props),
+    onClick,
+    onFocus,
+    onBlur,
+    onMouseDown: function(e) {
+      return onMouseDown && onMouseDown(e);
+    },
+    "aria-label": generateAriaLabel(props),
+    "aria-disabled": disabled || props.working ? true : void 0,
+    form,
+    formAction,
+    formMethod,
+    formEncType,
+    formTarget,
+    formNoValidate,
+    tabIndex: disableTabFocusAndIUnderstandTheAccessibilityImplications ? -1 : void 0,
+    ref
+  }, customProps), renderContent(props));
+};
+var renderLink = function(props, ref) {
+  var id = props.id, href = props.href, onClick = props.onClick, newTabAndIUnderstandTheAccessibilityImplications = props.newTabAndIUnderstandTheAccessibilityImplications, onFocus = props.onFocus, onBlur = props.onBlur, rest = __rest(props, ["id", "href", "onClick", "newTabAndIUnderstandTheAccessibilityImplications", "onFocus", "onBlur"]);
+  var customProps = getCustomProps(rest);
+  var target = newTabAndIUnderstandTheAccessibilityImplications ? "_blank" : "_self";
+  return React.createElement("a", __assign({ id, href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, className: buttonClass(props), onClick, onFocus, onBlur, ref, "aria-label": generateAriaLabel(props) }, customProps), renderContent(props));
+};
+var buttonClass = function(props) {
+  var isDefault = !props.primary && !props.destructive && !props.secondary;
+  return classnames(styles$I.button, isDefault && styles$I["default"], props.primary && styles$I.primary, props.destructive && styles$I.destructive, props.secondary && styles$I.secondary, props.size && styles$I[props.size], props.reversed && styles$I.reversed, props.iconButton && styles$I.iconButton, props.working && styles$I.working, (props.directionalLink || props.paginationLink) && styles$I.circleButton, props.directionalLink && styles$I.directionalLink, props.paginationLink && styles$I.paginationLink, props.isActive && styles$I.isPaginationLinkActive, props.classNameOverride);
+};
+var renderLoadingSpinner = function() {
+  return React.createElement(
+    "div",
+    { className: styles$I.loadingSpinner },
+    React.createElement(LoadingSpinner, { accessibilityLabel: "", size: "sm" })
+  );
+};
+var renderWorkingContent = function(props) {
+  if (props.workingLabelHidden) {
+    return React.createElement(
+      React.Fragment,
+      null,
+      React.createElement("span", { className: styles$I.hidden, "aria-hidden": "true" }, renderDefaultContent(props)),
+      React.createElement("span", { className: styles$I.centeredLoadingSpinner }, renderLoadingSpinner())
+    );
+  }
+  return React.createElement(
+    React.Fragment,
+    null,
+    props.iconPosition !== "end" && renderLoadingSpinner(),
+    React.createElement("span", { className: styles$I.label }, props.workingLabel),
+    props.additionalContent && React.createElement("span", { className: styles$I.additionalContentWrapper }, props.additionalContent),
+    props.iconPosition === "end" && renderLoadingSpinner()
+  );
+};
+var renderDefaultContent = function(props) {
+  return React.createElement(
+    React.Fragment,
+    null,
+    props.icon && props.iconPosition !== "end" && renderIcon(props.icon),
+    (!props.icon || !props.iconButton) && React.createElement("span", { className: styles$I.label }, props.label),
+    props.additionalContent && React.createElement("span", { className: styles$I.additionalContentWrapper }, props.additionalContent),
+    renderBadge(props),
+    props.icon && props.iconPosition === "end" && renderIcon(props.icon)
+  );
+};
+var renderBadge = function(props) {
+  if (!props.badge)
+    return null;
+  var _a = props.badge, text = _a.text, animateChange = _a.animateChange, reversed = _a.reversed, variant = _a.variant;
+  if (animateChange) {
+    return React.createElement(BadgeAnimated, { variant, reversed }, text);
+  }
+  return React.createElement(Badge, { variant, reversed }, text);
+};
+var renderContent = function(props) {
+  return React.createElement("span", { className: styles$I.content }, props.working ? renderWorkingContent(props) : renderDefaultContent(props));
+};
+var renderIcon = function(icon) {
+  return React.createElement("span", { className: styles$I.iconWrapper }, icon);
+};
+var generateAriaLabel = function(props) {
+  if (props.working && props.workingLabelHidden) {
+    return props.workingLabel;
+  }
+  if (props.iconButton) {
+    return props.label;
+  }
+  return void 0;
+};
+
+var Button = forwardRef(function(props, ref) {
+  return React.createElement(GenericButton, __assign({}, props, { ref }));
+});
+Button.defaultProps = {
+  fullWidth: false,
+  primary: false,
+  secondary: false,
+  destructive: false,
+  disabled: false,
+  reversed: false,
+  iconPosition: "start",
+  newTabAndIUnderstandTheAccessibilityImplications: false
+};
+Button.displayName = "Button";
+
+var ClearIcon = function(props) {
+  return React.createElement(
+    SVG,
+    __assign({}, props),
+    React.createElement("path", { fillRule: "evenodd", fill: "currentColor", d: "M10 2c-4.424 0-8 3.576-8 8 0 4.424 3.576 8 8 8 4.424 0 8-3.576 8-8 0-4.424-3.576-8-8-8Zm4 10.872L12.872 14 10 11.128 7.128 14 6 12.872 8.872 10 6 7.128 7.128 6 10 8.872 12.872 6 14 7.128 11.128 10 14 12.872Z" })
+  );
+};
+
+var styles$H = {"clearButton":"ClearButton-module_clearButton__CSOIc","default":"ClearButton-module_default__lBJxw","reversed":"ClearButton-module_reversed__0I2DC"};
+
+var ClearButton$1 = function(_a) {
+  var classNameOverride = _a.classNameOverride, _b = _a.isReversed, isReversed = _b === void 0 ? false : _b, restProps = __rest(_a, ["classNameOverride", "isReversed"]);
+  return React.createElement(
+    "button",
+    __assign({ type: "button", "aria-label": "clear", className: classnames(styles$H.clearButton, isReversed ? styles$H.reversed : styles$H["default"], classNameOverride) }, restProps),
+    React.createElement(ClearIcon, { role: "presentation" })
+  );
+};
+ClearButton$1.displayName = "ClearButton";
+
+var styles$G = {"filterPopover":"FilterPopover-module_filterPopover__OgOEM"};
+
+var FilterPopover = function(_a) {
+  var children = _a.children, referenceElement = _a.referenceElement, popperOptions = _a.popperOptions, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "referenceElement", "popperOptions", "classNameOverride"]);
+  var _b = useState(null), popperElement = _b[0], setPopperElement = _b[1];
+  var _c = usePopper(referenceElement, popperElement, __assign({ modifiers: [
+    {
+      name: "offset",
+      options: {
+        offset: [0, 15]
+      }
+    }
+  ], placement: "bottom-start" }, popperOptions)), popperStyles = _c.styles, popperAttributes = _c.attributes;
+  return React.createElement("div", __assign({ ref: setPopperElement, style: popperStyles === null || popperStyles === void 0 ? void 0 : popperStyles.popper }, popperAttributes === null || popperAttributes === void 0 ? void 0 : popperAttributes.popper, { className: classnames(styles$G.filterPopover, classNameOverride), role: "dialog", "aria-modal": "true" }, restProps), children);
+};
+FilterPopover.displayName = "FilterPopover";
+
+var Filter = function(_a) {
+  var _b, _c, _d, _e, _f;
+  var children = _a.children, isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, renderTrigger = _a.renderTrigger, classNameOverride = _a.classNameOverride, onMount = _a.onMount, restProps = __rest(_a, ["children", "isOpen", "setIsOpen", "renderTrigger", "classNameOverride", "onMount"]);
+  var _g = useState(false), isRefLoaded = _g[0], setIsRefLoaded = _g[1];
+  var trigger = renderTrigger({
+    onClick: function() {
+      return setIsOpen(!isOpen);
+    },
+    isOpen
+  });
+  var inbuiltButtonRef = useRef(null);
+  var inbuiltRef = useRef({
+    triggerRef: inbuiltButtonRef
+  });
+  var filterButtonRef = (_b = trigger.ref) !== null && _b !== void 0 ? _b : inbuiltRef;
+  useEffect(function() {
+    var _a2, _b2;
+    if ((_b2 = (_a2 = filterButtonRef.current) === null || _a2 === void 0 ? void 0 : _a2.triggerRef) === null || _b2 === void 0 ? void 0 : _b2.current) {
+      setIsRefLoaded(true);
+      onMount === null || onMount === void 0 ? void 0 : onMount(filterButtonRef.current.triggerRef);
+    }
+  }, [(_d = (_c = filterButtonRef.current) === null || _c === void 0 ? void 0 : _c.triggerRef) === null || _d === void 0 ? void 0 : _d.current, onMount]);
+  return React.createElement(
+    "div",
+    __assign({ className: classNameOverride }, restProps),
+    React.cloneElement(trigger, {
+      ref: filterButtonRef
+    }),
+    isRefLoaded && isOpen && React.createElement(
+      FocusOn,
+      { scrollLock: false, onClickOutside: function() {
+        return setIsOpen(false);
+      }, onEscapeKey: function() {
+        return setIsOpen(false);
+      } },
+      React.createElement(FilterPopover, { referenceElement: ((_f = (_e = filterButtonRef.current) === null || _e === void 0 ? void 0 : _e.triggerRef) === null || _f === void 0 ? void 0 : _f.current) || null }, children)
+    )
+  );
+};
+Filter.displayName = "Filter";
+
+var styles$F = {"filterContents":"FilterContents-module_filterContents__uNUpd"};
+
+var FilterContents = function(_a) {
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+  return React.createElement("div", __assign({ className: classnames(styles$F.filterContents, classNameOverride) }, restProps), children);
+};
+FilterContents.displayName = "FilterContents";
+
+var getIsUsableWhenArgs = function(_a) {
+  var filters = _a.filters, activeFilterIds = _a.activeFilterIds, values = _a.values;
+  return Object.values(filters).reduce(function(acc, _a2) {
+    var id = _a2.id, name = _a2.name;
+    acc[id] = {
+      id,
+      name,
+      isActive: activeFilterIds.has(id),
+      value: values[id]
+    };
+    return acc;
+  }, {});
+};
+
+var updateDependentFilters = function(state) {
+  if (state.dependentFilterIds.size === 0)
+    return state;
+  var hasChange = false;
+  var args = getIsUsableWhenArgs(state);
+  Array.from(state.dependentFilterIds).forEach(function(id) {
+    var isUsable = state.filters[id].isUsableWhen(args);
+    var shouldUpdate = state.filters[id].isUsable !== isUsable;
+    if (!shouldUpdate)
+      return;
+    hasChange = true;
+    state.filters[id].isUsable = isUsable;
+    if (!isUsable) {
+      state.activeFilterIds["delete"](id);
+      state.values[id] = void 0;
+      state.hasUpdatedValues = true;
+      return;
+    }
+    if (!state.filters[id].isRemovable || state.values[id] !== void 0) {
+      state.activeFilterIds.add(id);
+    }
+  });
+  if (hasChange)
+    updateDependentFilters(state);
+  return state;
+};
+
+var updateSingleFilter = function(state, id, data) {
+  var _a;
+  return __assign(__assign({}, state.filters), (_a = {}, _a[id] = __assign(__assign({}, state.filters[id]), data), _a));
+};
+
+var updateValues = function(state, values) {
+  Object.values(state.filters).forEach(function(_a) {
+    var id = _a.id, isRemovable = _a.isRemovable, isUsable = _a.isUsable;
+    if (isUsable && (!isRemovable || values[id] !== void 0)) {
+      state.activeFilterIds.add(id);
+    }
+  });
+  return updateDependentFilters(__assign(__assign({}, state), { hasUpdatedValues: true, values }));
+};
+
+var filterBarStateReducer = function(state, action) {
+  switch (action.type) {
+    case "update_values":
+      return __assign({}, updateValues(state, action.values));
+    case "complete_update_values":
+      return __assign(__assign({}, state), { hasUpdatedValues: false });
+    case "update_single_filter":
+      return __assign(__assign({}, state), { filters: updateSingleFilter(state, action.id, action.data) });
+    case "activate_filter":
+      state.activeFilterIds.add(action.id);
+      return __assign({}, updateDependentFilters(state));
+    case "deactivate_filter":
+      state.activeFilterIds["delete"](action.id);
+      state.values[action.id] = void 0;
+      return __assign(__assign({}, updateDependentFilters(state)), { hasUpdatedValues: true });
+  }
+};
+
+var setupFilterBarState = function(filters, values) {
+  var state = filters.reduce(function(baseState, _a) {
+    var id = _a.id, name = _a.name, isRemovable = _a.isRemovable, isUsableWhen = _a.isUsableWhen;
+    var hasDependency = isUsableWhen !== void 0;
+    baseState.filters[id] = {
+      id,
+      name,
+      isRemovable: isRemovable !== null && isRemovable !== void 0 ? isRemovable : false,
+      isUsableWhen,
+      isOpen: false,
+      isUsable: true
+    };
+    if (hasDependency) {
+      baseState.dependentFilterIds.add(id);
+    }
+    if (!isRemovable || values[id] !== void 0) {
+      baseState.activeFilterIds.add(id);
+    }
+    return baseState;
+  }, {
+    filters: {},
+    activeFilterIds: /* @__PURE__ */ new Set(),
+    values,
+    dependentFilterIds: /* @__PURE__ */ new Set(),
+    hasUpdatedValues: false
+  });
+  return updateDependentFilters(state);
+};
+
+var checkArraysMatch$1 = function(a1, a2) {
+  if (a1.length !== a2.length)
+    return false;
+  return a1.every(function(v, i) {
+    return v === a2[i];
+  });
+};
+var checkShouldUpdateValues = function(state, values) {
+  return Object.values(state.filters).some(function(_a) {
+    var id = _a.id;
+    var stateValue = state.values[id];
+    var value = values[id];
+    if (Array.isArray(stateValue) && Array.isArray(value)) {
+      return !checkArraysMatch$1(stateValue, value);
+    }
+    return stateValue !== value;
+  });
+};
+
+var getInactiveFilters = function(_a) {
+  var filters = _a.filters, activeFilterIds = _a.activeFilterIds;
+  return Object.values(filters).filter(function(_a2) {
+    var id = _a2.id, isUsable = _a2.isUsable;
+    return isUsable && !activeFilterIds.has(id);
+  });
+};
+
+var getMappedFilters = function(filters) {
+  return filters.reduce(function(acc, filter) {
+    var _a;
+    return __assign(__assign({}, acc), (_a = {}, _a[filter.id] = filter, _a));
+  }, {});
+};
+
+var getValidValue = function(value) {
+  if (typeof value === "object" && JSON.stringify(value) === "{}")
+    return void 0;
+  if (Array.isArray(value) && value.length === 0)
+    return void 0;
+  return value;
+};
+
+var FilterBarContext = React.createContext(null);
+var useFilterBarContext = function() {
+  var context = useContext(FilterBarContext);
+  if (!context) {
+    throw new Error("useFilterBarContext must be used within the FilterBarContext.Provider");
+  }
+  return context;
+};
+var FilterBarProvider = function(_a) {
+  var children = _a.children, filters = _a.filters, values = _a.values, onValuesChange = _a.onValuesChange;
+  var mappedFilters = useMemo(function() {
+    return getMappedFilters(filters);
+  }, [filters]);
+  var _b = useReducer(filterBarStateReducer, setupFilterBarState(filters, values)), state = _b[0], dispatch = _b[1];
+  var value = {
+    getFilterState: function(id) {
+      return __assign(__assign({}, state.filters[id]), { isActive: state.activeFilterIds.has(id), value: values[id] });
+    },
+    getActiveFilterValues: function() {
+      return values;
+    },
+    toggleOpenFilter: function(id, isOpen) {
+      dispatch({ type: "update_single_filter", id, data: { isOpen } });
+    },
+    setFilterOpenState: function(id, isOpen) {
+      dispatch({ type: "update_single_filter", id, data: { isOpen } });
+    },
+    openFilter: function(id) {
+      dispatch({ type: "update_single_filter", id, data: { isOpen: true } });
+    },
+    updateValue: function(id, newValue) {
+      var _a2;
+      dispatch({
+        type: "update_values",
+        values: __assign(__assign({}, values), (_a2 = {}, _a2[id] = getValidValue(newValue), _a2))
+      });
+    },
+    showFilter: function(id) {
+      return dispatch({ type: "activate_filter", id });
+    },
+    hideFilter: function(id) {
+      dispatch({ type: "deactivate_filter", id });
+    },
+    getInactiveFilters: function() {
+      return getInactiveFilters(state);
+    },
+    clearAllFilters: function() {
+      state.activeFilterIds.forEach(function(id) {
+        if (mappedFilters[id].isRemovable)
+          dispatch({ type: "deactivate_filter", id });
+      });
+      dispatch({ type: "update_values", values: {} });
+    }
+  };
+  useEffect(function() {
+    var shouldUpdate = checkShouldUpdateValues(state, values);
+    if (shouldUpdate)
+      dispatch({ type: "update_values", values: __assign({}, values) });
+  }, [values]);
+  useEffect(function() {
+    if (state.hasUpdatedValues) {
+      onValuesChange(__assign({}, state.values));
+      dispatch({ type: "complete_update_values" });
+    }
+  }, [state]);
+  var activeFilters = Array.from(state.activeFilterIds, function(id) {
+    return mappedFilters[id];
+  });
+  return React.createElement(
+    FilterBarContext.Provider,
+    {
+      // @note: Context object cannot be generic, thus the type-casting to a looser type
+      value
+    },
+    children(activeFilters)
+  );
+};
+
+var styles$E = {"labelledMessage":"LabelledMessage-module_labelledMessage__8hqzY","labelSeparator":"LabelledMessage-module_labelSeparator__f3zFN"};
+
+var LabelledMessage = function(_a) {
+  var label = _a.label, message = _a.message;
+  return React.createElement(
+    "span",
+    { className: styles$E.labelledMessage },
+    React.createElement("span", null, label),
+    React.createElement("span", { className: styles$E.labelSeparator }, ":"),
+    React.createElement("span", null, message)
+  );
+};
+LabelledMessage.displayName = "LabelledMessage";
+
+var getNodeText = function(node) {
+  if (!node)
+    return "";
+  if (typeof node === "string" || typeof node === "number")
+    return node;
+  if (node instanceof Array)
+    return node.map(getNodeText).join("");
+  if (React.isValidElement(node))
+    return getNodeText(node.props.children);
+  return "";
+};
+
+var getDateValidationHandler = function(_a) {
+  var onValidate = _a.onValidate, setInbuiltValidationMessage = _a.setInbuiltValidationMessage, inputLabel = _a.inputLabel;
+  return function(validationResponse) {
+    if (onValidate)
+      return onValidate(validationResponse);
+    var validationMessage = validationResponse.validationMessage;
+    if (!validationMessage) {
+      setInbuiltValidationMessage(void 0);
+      return;
+    }
+    setInbuiltValidationMessage({
+      status: validationMessage.status,
+      message: inputLabel ? React.createElement(LabelledMessage, { label: "".concat(getNodeText(inputLabel)), message: validationMessage.message }) : validationMessage.message
+    });
+  };
+};
+
+var validateDate = function(args) {
+  var response = validateDate$1(args);
+  var _a = response.validationResponse, status = _a.status, validationMessage = _a.validationMessage, rest = __rest(_a, ["status", "validationMessage"]);
+  return __assign(__assign({}, response), { validationResponse: __assign(__assign({}, rest), { validationMessage: status && validationMessage ? { status, message: validationMessage } : void 0 }) });
+};
+
+var useDateValidation = function(_a) {
+  var inputLabel = _a.inputLabel, disabledDays = _a.disabledDays, validationMessage = _a.validationMessage, onValidate = _a.onValidate;
+  var _b = useState(), inbuiltValidationMessage = _b[0], setInbuiltValidationMessage = _b[1];
+  var shouldUseInbuiltDateValidation = onValidate === void 0;
+  var updateValidation = getDateValidationHandler({
+    onValidate,
+    setInbuiltValidationMessage,
+    inputLabel
+  });
+  var validateSingleDate = function(_a2) {
+    var date = _a2.date, inputValue = _a2.inputValue;
+    return validateDate({
+      date,
+      inputValue,
+      disabledDays
+    });
+  };
+  return {
+    validationMessage: shouldUseInbuiltDateValidation ? inbuiltValidationMessage : validationMessage,
+    validateDate: validateSingleDate,
+    updateValidation
+  };
+};
+
+var transformDateToInputValue = function(date, disabledDays, locale) {
+  return date ? formatDateAsText(date, disabledDays, locale) : "";
+};
+
+var useDateInputHandlers = function(_a) {
+  var locale = _a.locale, disabledDays = _a.disabledDays, setInputValue = _a.setInputValue, onDateChange = _a.onDateChange, onDateSubmit = _a.onDateSubmit, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
+  var isValidDate = function(date) {
+    return !isInvalidDate(date) && !isDisabledDate(date, disabledDays);
+  };
+  var handleChange = function(e) {
+    setInputValue(e.currentTarget.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
+  var handleFocus = function(e) {
+    var date = parseDateFromTextFormatValue(e.currentTarget.value, locale);
+    if (!isInvalidDate(date)) {
+      var newInputValue = formatDateAsNumeral(date, locale);
+      setInputValue(newInputValue);
+    }
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  };
+  var handleBlur = function(e) {
+    if (isSelectingDayInCalendar(e.relatedTarget))
+      return;
+    if (e.currentTarget.value === "") {
+      onDateChange(void 0);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+      return;
+    }
+    var date = parseDateFromNumeralFormatValue(e.currentTarget.value, locale);
+    if (isValidDate(date)) {
+      var newInputValue = formatDateAsText(date, disabledDays, locale);
+      setInputValue(newInputValue);
+    }
+    onDateChange(date);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  };
+  var handleKeyDown = function(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      var date = parseDateFromNumeralFormatValue(e.currentTarget.value, locale);
+      onDateChange(date);
+      onDateSubmit === null || onDateSubmit === void 0 ? void 0 : onDateSubmit(date);
+    }
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+  };
+  return {
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  };
+};
+
+var formatDescriptionInputFormat = function(locale) {
+  var _a;
+  return (_a = locale.formatLong) === null || _a === void 0 ? void 0 : _a.date({ width: "short" }).toLowerCase();
+};
+
+var styles$D = {"dateInputDescription":"DateInputDescription-module_dateInputDescription__-ONK8","dateInputFormatContainer":"DateInputDescription-module_dateInputFormatContainer__6hP6K"};
+
+var DateInputDescription = function(_a) {
+  var description = _a.description, locale = _a.locale;
+  var formatMessage = useIntl().formatMessage;
+  var hasCustomDescription = typeof description === "string" && description !== "" || React.isValidElement(description);
+  var translatedInputFormatMessage = formatMessage({
+    id: "filterDateRangePicker.inputFormat",
+    defaultMessage: "Input format",
+    description: "Label for the 'Input format' field"
+  });
+  if (hasCustomDescription) {
+    return React.createElement(
+      "span",
+      { className: styles$D.dateInputDescription },
+      React.createElement("span", null, description),
+      React.createElement(
+        "span",
+        { className: styles$D.dateInputFormatContainer },
+        "(",
+        React.createElement(LabelledMessage, { label: translatedInputFormatMessage, message: formatDescriptionInputFormat(locale) }),
+        ")"
+      )
+    );
+  }
+  return React.createElement(LabelledMessage, { label: translatedInputFormatMessage, message: formatDescriptionInputFormat(locale) });
+};
+DateInputDescription.displayName = "DateInputDescription";
+
+var styles$C = {"disabled":"DateInputField-module_disabled__Lf9TS"};
+
+var DateInputField = React.forwardRef(function(_a, ref) {
+  var id = _a.id, labelText = _a.labelText, description = _a.description, disabled = _a.disabled, _b = _a.isReversed, isReversed = _b === void 0 ? false : _b, validationMessage = _a.validationMessage, locale = _a.locale, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["id", "labelText", "description", "disabled", "isReversed", "validationMessage", "locale", "classNameOverride"]);
+  var descriptionId = "".concat(id, "--field-message");
+  var errorMessageId = validationMessage ? "".concat(id, "--date-error-message") : void 0;
+  var inputDescribedBy = errorMessageId ? "".concat(errorMessageId, " ").concat(descriptionId) : descriptionId;
+  var dateIsInvalid = errorMessageId !== void 0;
+  return React.createElement(
+    "div",
+    null,
+    React.createElement(DateInput, __assign({ ref, id, labelText: labelText || "Date", "aria-describedby": inputDescribedBy, "aria-errormessage": errorMessageId, "aria-invalid": dateIsInvalid, autoComplete: "off", disabled, status: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.status, classNameOverride }, restProps)),
+    validationMessage && React.createElement(FieldMessage, { id: errorMessageId, message: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.message, status: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.status, reversed: isReversed }),
+    React.createElement(FieldMessage, { id: descriptionId, message: React.createElement(DateInputDescription, { description, locale }), reversed: isReversed, classNameOverride: disabled ? styles$C.disabled : void 0 })
+  );
+});
+DateInputField.displayName = "DateInputField";
+
+var filterDatePickerFieldReducer$1 = function(state, action) {
+  switch (action.type) {
+    case "update_selected_date":
+      return __assign(__assign({}, state), { selectedDate: action.date, inputValue: action.inputValue === void 0 ? state.inputValue : action.inputValue, startMonth: action.date && !isInvalidDate(action.date) ? action.date : /* @__PURE__ */ new Date() });
+    case "navigate_months":
+      return __assign(__assign({}, state), { startMonth: action.date && !isInvalidDate(action.date) ? action.date : /* @__PURE__ */ new Date() });
+    case "update_input_field":
+      return __assign(__assign({}, state), { inputValue: action.inputValue });
+  }
+};
+
+var styles$B = {"filterDatePickerField":"FilterDatePickerField-module_filterDatePickerField__KvWHu"};
+
+var FilterDatePickerField = function(_a) {
+  var propsId = _a.id, inputProps = _a.inputProps, propsLocale = _a.locale, defaultMonth = _a.defaultMonth, selectedDate = _a.selectedDate, onDateChange = _a.onDateChange, onDateSubmit = _a.onDateSubmit, disabledDays = _a.disabledDays, description = _a.description, validationMessage = _a.validationMessage, onValidate = _a.onValidate, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["id", "inputProps", "locale", "defaultMonth", "selectedDate", "onDateChange", "onDateSubmit", "disabledDays", "description", "validationMessage", "onValidate", "classNameOverride"]);
+  var id = useState(propsId || v4())[0];
+  var locale = getLocale(propsLocale);
+  var dateValidation = useDateValidation({
+    disabledDays,
+    validationMessage,
+    onValidate
+  });
+  var validateDate = function(date, inputValue) {
+    var _a2 = dateValidation.validateDate({
+      date,
+      inputValue
+    }), validationResponse = _a2.validationResponse, newDate = _a2.newDate;
+    dateValidation.updateValidation(validationResponse);
+    return newDate;
+  };
+  var _b = useReducer(filterDatePickerFieldReducer$1, {
+    selectedDate,
+    inputValue: transformDateToInputValue(selectedDate, disabledDays, locale) || "",
+    startMonth: selectedDate && !isInvalidDate(selectedDate) ? selectedDate : defaultMonth || /* @__PURE__ */ new Date()
+  }), state = _b[0], dispatch = _b[1];
+  var handleDateChange = function(date) {
+    onDateChange(date);
+  };
+  var inputDateHandlers = useDateInputHandlers(__assign({ locale, disabledDays, setInputValue: function(value) {
+    dispatch({
+      type: "update_input_field",
+      inputValue: value
+    });
+  }, onDateChange: function(date) {
+    var newDate = validateDate(date, state.inputValue);
+    dispatch({
+      type: "update_selected_date",
+      date: newDate
+    });
+    handleDateChange(newDate);
+  }, onDateSubmit: function(date) {
+    if (!isInvalidDate(date)) {
+      onDateSubmit === null || onDateSubmit === void 0 ? void 0 : onDateSubmit(date);
+    }
+  } }, inputProps));
+  var handleCalendarSelect = function(date) {
+    var inputValue = transformDateToInputValue(date, disabledDays, locale);
+    var newDate = validateDate(date, inputValue);
+    dispatch({
+      type: "update_selected_date",
+      date: newDate
+    });
+    dispatch({
+      type: "update_input_field",
+      inputValue
+    });
+    handleDateChange(newDate);
+    onDateSubmit === null || onDateSubmit === void 0 ? void 0 : onDateSubmit(newDate);
+  };
+  useEffect(function() {
+    validateDate(selectedDate, state.inputValue);
+  }, []);
+  return React.createElement(
+    "div",
+    __assign({ className: classnames(styles$B.filterDatePickerField, classNameOverride) }, restProps),
+    React.createElement(DateInputField, __assign({ id: "".concat(id, "--input"), locale, value: state.inputValue, description, validationMessage: dateValidation.validationMessage }, inputDateHandlers, inputProps)),
+    React.createElement(CalendarSingle, { disabled: disabledDays, locale, selected: state.selectedDate, onSelect: handleCalendarSelect, month: state.startMonth, onMonthChange: function(value) {
+      return dispatch({ type: "navigate_months", date: value });
+    } })
+  );
+};
+
+var FilterDatePicker = function(_a) {
+  var isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, renderTrigger = _a.renderTrigger, selectedDate = _a.selectedDate, label = _a.label, locale = _a.locale, onDateSubmit = _a.onDateSubmit, restProps = __rest(_a, ["isOpen", "setIsOpen", "renderTrigger", "selectedDate", "label", "locale", "onDateSubmit"]);
+  return React.createElement(
+    Filter,
+    { isOpen, setIsOpen, renderTrigger: function(triggerProps) {
+      return renderTrigger(__assign({ selectedValue: selectedDate ? formatDateAsText(selectedDate, void 0, getLocale(locale)) : void 0, label }, triggerProps));
+    } },
+    React.createElement(
+      FilterContents,
+      null,
+      React.createElement(FilterDatePickerField, __assign({ locale, selectedDate, onDateSubmit: function(date) {
+        setIsOpen(false);
+        onDateSubmit === null || onDateSubmit === void 0 ? void 0 : onDateSubmit(date);
+      } }, restProps))
+    )
+  );
+};
+FilterDatePicker.displayName = "FilterDatePicker";
+
+var ChevronDownIcon = function(props) {
+  return React.createElement(
+    SVG,
+    __assign({}, props),
+    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M6.179 6.845 10 10.747l3.821-3.902L15 8.049l-5 5.106-5-5.106z" })
+  );
+};
+
+var ChevronUpIcon = function(props) {
+  return React.createElement(
+    SVG,
+    __assign({}, props),
+    React.createElement("path", { fillRule: "evenodd", fill: "currentColor", d: "M6.179 13.155 10 9.253l3.821 3.902 1.18-1.204L10 6.845l-5.001 5.106z" })
+  );
+};
+
+var isRefObject = function(ref) {
+  return ref !== null && "current" in ref;
+};
+
+var styles$A = {"filterButtonBase":"FilterButtonBase-module_filterButtonBase__505sK"};
+
+var FilterButtonBase = forwardRef(function(_a, ref) {
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+  return React.createElement("button", __assign({ ref, type: "button", className: classnames(styles$A.filterButtonBase, classNameOverride) }, restProps), children);
+});
+FilterButtonBase.displayName = "FilterButtonBase";
+
+var styles$z = {"filterButton":"FilterButton-module_filterButton__Q2dMX","labelContainer":"FilterButton-module_labelContainer__5G-MD","hasSelectedValues":"FilterButton-module_hasSelectedValues__dyQkL","labelSeparator":"FilterButton-module_labelSeparator__xrkAx"};
+
+var FilterButton = forwardRef(function(_a, ref) {
+  var label = _a.label, selectedValue = _a.selectedValue, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["label", "selectedValue", "isOpen", "classNameOverride"]);
+  var customRefObject = isRefObject(ref) ? ref.current : null;
+  var triggerRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.triggerRef;
+  var selectedValuesLabel = selectedValue;
+  return React.createElement(
+    FilterButtonBase,
+    __assign({ ref: triggerRef, classNameOverride: classnames(styles$z.filterButton, classNameOverride), "aria-haspopup": "true", "aria-expanded": isOpen }, restProps),
+    React.createElement("span", { className: styles$z.labelContainer }, selectedValuesLabel ? React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(
+        "span",
+        { className: styles$z.hasSelectedValues },
+        React.createElement("span", null, label),
+        React.createElement("span", { className: styles$z.labelSeparator }, ":")
+      ),
+      React.createElement("span", null, selectedValuesLabel)
+    ) : label),
+    isOpen ? React.createElement(ChevronUpIcon, { role: "presentation" }) : React.createElement(ChevronDownIcon, { role: "presentation" })
+  );
+});
+FilterButton.displayName = "FilterButton";
+
+var styles$y = {"buttonGroup":"ButtonGroup-module_buttonGroup__bsy2X","child":"ButtonGroup-module_child__K6AP-","firstChild":"ButtonGroup-module_firstChild__uEn1j","lastChild":"ButtonGroup-module_lastChild__Vicsx"};
+
+var isFilterButton = function(node) {
+  return React.isValidElement(node) && node.type === FilterButtonBase;
+};
+var ButtonGroup = function(_a) {
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+  var childCount = React.Children.count(children);
+  var containerProps = __assign({ role: "group", className: classnames(styles$y.buttonGroup, classNameOverride) }, restProps);
+  if (childCount === 1)
+    return React.createElement("div", __assign({}, containerProps), children);
+  return React.createElement("div", __assign({}, containerProps), React.Children.map(children, function(child, index) {
+    var buttonClassNames = classnames(styles$y.child, index === 0 && styles$y.firstChild, index === childCount - 1 && styles$y.lastChild, child.props.classNameOverride);
+    if (child.type === Tooltip) {
+      var button = child.props.children;
+      if (isFilterButton(button)) {
+        return React.cloneElement(child, {
+          children: React.cloneElement(button, {
+            classNameOverride: buttonClassNames
+          })
+        });
+      }
+      return child;
+    }
+    return React.cloneElement(child, {
+      classNameOverride: buttonClassNames
+    });
+  }));
+};
+ButtonGroup.displayName = "ButtonGroup";
+
+var FilterButtonRemovable = forwardRef(function(_a, ref) {
+  var _b;
+  var triggerButtonProps = _a.triggerButtonProps, removeButtonProps = _a.removeButtonProps, restProps = __rest(_a, ["triggerButtonProps", "removeButtonProps"]);
+  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);
+  return React.createElement(
+    ButtonGroup,
+    __assign({}, restProps),
+    React.createElement(FilterButton, __assign({ ref }, triggerButtonProps)),
+    React.createElement(
+      Tooltip,
+      { text: removeButtonLabel, display: "inline-block", position: "below" },
+      React.createElement(
+        FilterButtonBase,
+        __assign({ ref: removeButtonRef }, removeButtonProps),
+        React.createElement(ClearIcon, { title: removeButtonLabel })
+      )
+    )
+  );
+});
+FilterButtonRemovable.displayName = "FilterButtonRemovable";
+
+var FilterBarButton = forwardRef(function(_a, ref) {
+  var id = _a.id, _b = _a.isRemovable, isRemovable = _b === void 0 ? false : _b, props = __rest(_a, ["id", "isRemovable"]);
+  var hideFilter = useFilterBarContext().hideFilter;
+  return isRemovable ? React.createElement(FilterButtonRemovable, { ref, triggerButtonProps: props, removeButtonProps: { onClick: function() {
+    return hideFilter(id);
+  } } }) : React.createElement(FilterButton, __assign({ ref }, props));
+});
+FilterBarButton.displayName = "FilterBar.Button";
+
+var FilterBarDatePicker = function(_a) {
+  var id = _a.id, onDateChange = _a.onDateChange, _b = _a.locale, locale = _b === void 0 ? "en-AU" : _b, props = __rest(_a, ["id", "onDateChange", "locale"]);
+  var _c = useFilterBarContext(), getFilterState = _c.getFilterState, setFilterOpenState = _c.setFilterOpenState, updateValue = _c.updateValue;
+  if (!id)
+    throw Error("Missing `id` prop in FilterBarDatePicker");
+  var filterState = getFilterState(id);
+  return React.createElement(FilterDatePicker, __assign({}, props, { id, locale, selectedDate: filterState.value || void 0, label: filterState.name, renderTrigger: function(triggerProps) {
+    return React.createElement(FilterBarButton, __assign({}, triggerProps, { id, isRemovable: filterState.isRemovable }));
+  }, onDateChange: function(key) {
+    updateValue(id, key);
+    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(key);
+  }, isOpen: filterState.isOpen, setIsOpen: function(open) {
+    return setFilterOpenState(id, open);
+  } }));
+};
+FilterBarDatePicker.displayName = "FilterBar.DatePicker";
+
+var styles$x = {"dateRangeDisplayLabel":"DateRangeDisplayLabel-module_dateRangeDisplayLabel__Gsq1R"};
+
+var DateRangeDisplayLabel = function(_a) {
+  var dateRange = _a.dateRange, locale = _a.locale;
+  var formattedDateFrom = formatDateAsText$1(dateRange.from, void 0, locale);
+  var formattedDateTo = formatDateAsText$1(dateRange.to, void 0, locale);
+  return React.createElement(
+    "span",
+    { className: styles$x.dateRangeDisplayLabel },
+    React.createElement("span", null, formattedDateFrom),
+    React.createElement("span", null, "-"),
+    React.createElement("span", null, formattedDateTo)
+  );
+};
+DateRangeDisplayLabel.displayName = "DateRangeDisplayLabel";
+
+var styles$w = {"fieldMessageList":"DateRangeValidationMessage-module_fieldMessageList__UluZx"};
+
+var DateRangeValidationMessage = function(_a) {
+  var validationMessage = _a.validationMessage, dateStartId = _a.dateStartId, dateEndId = _a.dateEndId, isReversed = _a.isReversed;
+  if (!validationMessage)
+    return null;
+  var dateStart = validationMessage.dateStart;
+  var dateEnd = validationMessage.dateEnd;
+  if (dateStart && dateEnd) {
+    if (dateStart.status === dateEnd.status) {
+      return React.createElement(FieldMessage, { message: React.createElement(
+        "ul",
+        { className: styles$w.fieldMessageList },
+        React.createElement("li", { id: dateStartId }, dateStart.message),
+        React.createElement("li", { id: dateEndId }, dateEnd.message)
+      ), status: dateStart.status || dateEnd.status, reversed: isReversed });
+    }
+    return React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(FieldMessage, { id: dateStartId, message: dateStart.message, status: dateStart.status, reversed: isReversed }),
+      React.createElement(FieldMessage, { id: dateEndId, message: dateEnd.message, status: dateEnd.status, reversed: isReversed })
+    );
+  }
+  if (dateStart) {
+    return React.createElement(FieldMessage, { id: dateStartId, message: dateStart.message, status: dateStart.status, reversed: isReversed });
+  }
+  if (dateEnd) {
+    return React.createElement(FieldMessage, { id: dateEndId, message: dateEnd.message, status: dateEnd.status, reversed: isReversed });
+  }
+  return null;
+};
+DateRangeValidationMessage.displayName = "DateRangeValidationMessage";
+
+var styles$v = {"dateRangeInputContainer":"DateRangeInputField-module_dateRangeInputContainer__KGDB1","inputStartDate":"DateRangeInputField-module_inputStartDate__3nwlg","inputEndDate":"DateRangeInputField-module_inputEndDate__ZvUwZ","disabled":"DateRangeInputField-module_disabled__iPMZ-"};
+
+var DateRangeInputField = React.forwardRef(function(_a, ref) {
+  var _b, _c;
+  var id = _a.id, legend = _a.legend, inputStartDateProps = _a.inputStartDateProps, inputEndDateProps = _a.inputEndDateProps, description = _a.description, disabled = _a.disabled, _d = _a.isReversed, isReversed = _d === void 0 ? false : _d, validationMessage = _a.validationMessage, locale = _a.locale, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["id", "legend", "inputStartDateProps", "inputEndDateProps", "description", "disabled", "isReversed", "validationMessage", "locale", "classNameOverride"]);
+  var customRefObject = isRefObject(ref) ? ref.current : null;
+  var inputStartDateRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.inputStartDateRef;
+  var inputEndDateRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.inputEndDateRef;
+  var descriptionId = "".concat(id, "--field-message");
+  var dateStartErrorMessageId = (validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateStart) ? "".concat(id, "--date-start-error-message") : void 0;
+  var dateStartInputDescribedBy = dateStartErrorMessageId ? "".concat(dateStartErrorMessageId, " ").concat(descriptionId) : descriptionId;
+  var dateStartIsInvalid = dateStartErrorMessageId !== void 0;
+  var dateEndErrorMessageId = (validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateEnd) ? "".concat(id, "--date-end-error-message") : void 0;
+  var dateEndInputDescribedBy = dateEndErrorMessageId ? "".concat(dateEndErrorMessageId, " ").concat(descriptionId) : descriptionId;
+  var dateEndIsInvalid = dateEndErrorMessageId !== void 0;
+  return React.createElement(
+    "div",
+    __assign({ className: classNameOverride }, restProps),
+    React.createElement(
+      "fieldset",
+      { className: styles$v.dateRangeInputContainer },
+      React.createElement(
+        "legend",
+        null,
+        React.createElement(VisuallyHidden, null, legend)
+      ),
+      React.createElement(DateInput$1, __assign({ ref: inputStartDateRef, id: "".concat(id, "--from"), "aria-describedby": dateStartInputDescribedBy, "aria-errormessage": dateStartErrorMessageId, "aria-invalid": dateStartIsInvalid, autoComplete: "off", disabled, status: (_b = validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateStart) === null || _b === void 0 ? void 0 : _b.status }, inputStartDateProps, { classNameOverride: classnames(styles$v.inputStartDate, inputStartDateProps.classNameOverride) })),
+      React.createElement(DateInput$1, __assign({ ref: inputEndDateRef, id: "".concat(id, "--to"), "aria-describedby": dateEndInputDescribedBy, "aria-errormessage": dateEndErrorMessageId, "aria-invalid": dateEndIsInvalid, autoComplete: "off", disabled, status: (_c = validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateEnd) === null || _c === void 0 ? void 0 : _c.status }, inputEndDateProps, { classNameOverride: classnames(styles$v.inputEndDate, inputEndDateProps.classNameOverride) }))
+    ),
+    validationMessage && React.createElement(DateRangeValidationMessage, { validationMessage, isReversed, dateStartId: dateStartErrorMessageId, dateEndId: dateEndErrorMessageId }),
+    React.createElement(FieldMessage, { id: descriptionId, message: React.createElement(DateInputDescription, { description, locale }), reversed: isReversed, classNameOverride: disabled ? styles$v.disabled : void 0 })
+  );
+});
+DateRangeInputField.displayName = "DateRangeInputField";
+
+var filterDatePickerFieldReducer = function(state, action) {
+  switch (action.type) {
+    case "update_selected_start_date":
+      return __assign(__assign({}, state), { selectedStartDate: action.date, inputStartValue: action.inputValue === void 0 ? state.inputStartValue : action.inputValue, startMonth: action.date && !isInvalidDate(action.date) ? action.date : /* @__PURE__ */ new Date() });
+    case "update_selected_end_date":
+      return __assign(__assign({}, state), { selectedEndDate: action.date, inputEndValue: action.inputValue === void 0 ? state.inputEndValue : action.inputValue });
+    case "navigate_months":
+      return __assign(__assign({}, state), { startMonth: action.date && !isInvalidDate(action.date) ? action.date : /* @__PURE__ */ new Date() });
+    case "update_input_start_field":
+      return __assign(__assign({}, state), { inputStartValue: action.inputValue });
+    case "update_input_end_field":
+      return __assign(__assign({}, state), { inputEndValue: action.inputValue });
+  }
+};
+
+var isValidRange = function(startDate, endDate) {
+  if (startDate && endDate)
+    return startDate <= endDate;
+  return false;
+};
+
+var validateEndDateBeforeStartDate = function(_a) {
+  var startDate = _a.startDate, startDateFieldLabel = _a.startDateFieldLabel, endDate = _a.endDate, endDateInputValue = _a.endDateInputValue;
+  var baseResponse = {
+    date: endDate,
+    inputValue: endDateInputValue,
+    validationMessage: void 0,
+    isInvalid: false,
+    isDisabled: false,
+    isEmpty: false,
+    isValidDate: true
+  };
+  if (!isValidRange(startDate, endDate)) {
+    return {
+      validationResponse: __assign(__assign({}, baseResponse), { validationMessage: {
+        status: "error",
+        message: 'Cannot be earlier than the selection in "'.concat(getNodeText(startDateFieldLabel), '"')
+      } }),
+      newDate: endDate
+    };
+  }
+  return {
+    validationResponse: baseResponse,
+    newDate: endDate
+  };
+};
+
+var useEndDateValidation = function(args) {
+  var _a = useDateValidation(args), validationMessage = _a.validationMessage, validateDate = _a.validateDate, updateValidation = _a.updateValidation;
+  var handleValidateEndDateBeforeStartDate = function(handlerArgs) {
+    var _a2 = validateEndDateBeforeStartDate(handlerArgs), validationResponse = _a2.validationResponse, newDate = _a2.newDate;
+    updateValidation(validationResponse);
+    return newDate;
+  };
+  var validateEndDate = function(_a2) {
+    var endDate = _a2.endDate, endDateInputValue = _a2.endDateInputValue, startDate = _a2.startDate, startDateFieldLabel = _a2.startDateFieldLabel;
+    var _b = validateDate({
+      date: endDate,
+      inputValue: endDateInputValue
+    }), validationResponse = _b.validationResponse, newDate = _b.newDate;
+    if (validationResponse.isValidDate) {
+      if (newDate && startDate) {
+        return handleValidateEndDateBeforeStartDate({
+          startDate,
+          startDateFieldLabel,
+          endDate: newDate,
+          endDateInputValue
+        });
+      }
+    }
+    updateValidation(validationResponse);
+    return newDate;
+  };
+  return {
+    validationMessage,
+    validateDate: validateEndDate,
+    validateEndDateBeforeStartDate: handleValidateEndDateBeforeStartDate
+  };
+};
+
+var useStartDateValidation = function(args) {
+  var _a = useDateValidation(args), validationMessage = _a.validationMessage, validateDate = _a.validateDate, updateValidation = _a.updateValidation;
+  var validateStartDate = function(_a2) {
+    var date = _a2.date, inputValue = _a2.inputValue;
+    var _b = validateDate({ date, inputValue }), validationResponse = _b.validationResponse, newDate = _b.newDate;
+    updateValidation(validationResponse);
+    return newDate;
+  };
+  return {
+    validationMessage,
+    validateDate: validateStartDate
+  };
+};
+
+var styles$u = {"filterDateRangePickerField":"FilterDateRangePickerField-module_filterDateRangePickerField__1gCr0","dateRangeInputField":"FilterDateRangePickerField-module_dateRangeInputField__XFvb-"};
+
+var FilterDateRangePickerField = function(_a) {
+  var id = _a.id, label = _a.label, propsLocale = _a.locale, defaultMonth = _a.defaultMonth, selectedRange = _a.selectedRange, onRangeChange = _a.onRangeChange, disabledDays = _a.disabledDays, inputStartDateProps = _a.inputStartDateProps, inputEndDateProps = _a.inputEndDateProps, description = _a.description, validationMessage = _a.validationMessage, onValidate = _a.onValidate, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["id", "label", "locale", "defaultMonth", "selectedRange", "onRangeChange", "disabledDays", "inputStartDateProps", "inputEndDateProps", "description", "validationMessage", "onValidate", "classNameOverride"]);
+  var formatMessage = useIntl().formatMessage;
+  var locale = getLocale$1(propsLocale);
+  var translatedDateFrom = formatMessage({
+    id: "filterDateRangePicker.dateFrom",
+    defaultMessage: "Date from",
+    description: "Label for the 'Date from' field"
+  });
+  var translatedDateTo = formatMessage({
+    id: "filterDateRangePicker.dateTo",
+    defaultMessage: "Date to",
+    description: "Label for the 'date to' field"
+  });
+  var inputStartDateLabel = (inputStartDateProps === null || inputStartDateProps === void 0 ? void 0 : inputStartDateProps.labelText) || translatedDateFrom;
+  var inputEndDateLabel = (inputEndDateProps === null || inputEndDateProps === void 0 ? void 0 : inputEndDateProps.labelText) || translatedDateTo;
+  var transformDateToInputValue = function(date) {
+    return date ? formatDateAsText$1(date, disabledDays, locale) : "";
+  };
+  var handleDateRangeChange = function(dateRange) {
+    onRangeChange(dateRange);
+  };
+  var dateStartValidation = useStartDateValidation({
+    inputLabel: inputStartDateLabel,
+    disabledDays,
+    validationMessage: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateStart,
+    onValidate: onValidate === null || onValidate === void 0 ? void 0 : onValidate.dateStart
+  });
+  var dateEndValidation = useEndDateValidation({
+    inputLabel: inputEndDateLabel,
+    disabledDays,
+    validationMessage: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateEnd,
+    onValidate: onValidate === null || onValidate === void 0 ? void 0 : onValidate.dateEnd
+  });
+  var validateStartDate = function(date, inputValue) {
+    return dateStartValidation.validateDate({
+      date,
+      inputValue
+    });
+  };
+  var validateEndDate = function(date, inputValue) {
+    return dateEndValidation.validateDate({
+      endDate: date,
+      endDateInputValue: inputValue,
+      startDate: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from,
+      startDateFieldLabel: inputStartDateLabel
+    });
+  };
+  var _b = useReducer(filterDatePickerFieldReducer, {
+    selectedStartDate: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from,
+    selectedEndDate: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to,
+    inputStartValue: transformDateToInputValue(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from),
+    inputEndValue: transformDateToInputValue(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to),
+    startMonth: (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && !isInvalidDate$1(selectedRange.from) ? selectedRange.from : defaultMonth || /* @__PURE__ */ new Date()
+  }), state = _b[0], dispatch = _b[1];
+  var inputStartDateHandlers = useDateInputHandlers(__assign({ locale, disabledDays, setInputValue: function(value) {
+    dispatch({
+      type: "update_input_start_field",
+      inputValue: value
+    });
+  }, onDateChange: function(date) {
+    var newDate = validateStartDate(date, state.inputStartValue);
+    var endDate = parseDateFromTextFormatValue(state.inputEndValue, locale);
+    var isRangeValid = isValidRange(newDate, endDate);
+    dispatch({
+      type: "update_selected_start_date",
+      date: newDate
+    });
+    dispatch({
+      type: "update_selected_end_date",
+      date: isRangeValid ? endDate : void 0
+    });
+    handleDateRangeChange({
+      from: newDate,
+      to: isRangeValid ? endDate : void 0
+    });
+    if (newDate && endDate && !isInvalidDate$1(endDate)) {
+      dateEndValidation.validateEndDateBeforeStartDate({
+        startDate: newDate,
+        startDateFieldLabel: inputStartDateLabel,
+        endDate,
+        endDateInputValue: state.inputEndValue
+      });
+    }
+  } }, inputStartDateProps));
+  var inputEndDateHandlers = useDateInputHandlers(__assign({ locale, disabledDays, setInputValue: function(value) {
+    dispatch({
+      type: "update_input_end_field",
+      inputValue: value
+    });
+  }, onDateChange: function(date) {
+    var startDate = state.selectedStartDate;
+    var newEndDate = validateEndDate(date, state.inputEndValue);
+    var isRangeValid = isValidRange(startDate, newEndDate);
+    dispatch({
+      type: "update_selected_end_date",
+      date: isRangeValid ? newEndDate : void 0
+    });
+    handleDateRangeChange({
+      from: startDate,
+      to: isRangeValid ? newEndDate : void 0
+    });
+  } }, inputEndDateProps));
+  var handleCalendarSelectRange = function(range) {
+    var inputStartValue = transformDateToInputValue(range === null || range === void 0 ? void 0 : range.from);
+    var inputEndValue = transformDateToInputValue(range === null || range === void 0 ? void 0 : range.to);
+    var newStartDate = validateStartDate(range === null || range === void 0 ? void 0 : range.from, inputStartValue);
+    var newEndDate = validateEndDate(range === null || range === void 0 ? void 0 : range.to, inputEndValue);
+    dispatch({
+      type: "update_selected_start_date",
+      date: newStartDate,
+      inputValue: inputStartValue
+    });
+    dispatch({
+      type: "update_selected_end_date",
+      date: newEndDate,
+      inputValue: inputEndValue
+    });
+    handleDateRangeChange({ from: newStartDate, to: newEndDate });
+  };
+  useEffect(function() {
+    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)) {
+      dispatch({
+        type: "update_selected_end_date",
+        date: void 0
+      });
+    }
+    handleDateRangeChange({ from: newStartDate, to: newEndDate });
+  }, []);
+  return React.createElement(
+    "div",
+    __assign({ className: classnames(styles$u.filterDateRangePickerField, classNameOverride) }, restProps),
+    React.createElement(DateRangeInputField, { id: "".concat(id, "--input"), legend: label, inputStartDateProps: __assign(__assign({ labelText: inputStartDateLabel, value: state.inputStartValue }, inputStartDateProps), inputStartDateHandlers), inputEndDateProps: __assign(__assign({ labelText: inputEndDateLabel, value: state.inputEndValue }, inputEndDateProps), inputEndDateHandlers), locale, description, validationMessage: {
+      dateStart: dateStartValidation.validationMessage,
+      dateEnd: dateEndValidation.validationMessage
+    }, classNameOverride: styles$u.dateRangeInputField }),
+    React.createElement(CalendarRange, { disabled: disabledDays, locale, selected: {
+      from: state.selectedStartDate,
+      to: state.selectedEndDate
+    }, onSelect: handleCalendarSelectRange, month: state.startMonth, onMonthChange: function(value) {
+      return dispatch({ type: "navigate_months", date: value });
+    } })
+  );
+};
+FilterDateRangePickerField.displayName = "FilterDateRangePickerField";
+
+var isCompleteDateRange = function(dateRange) {
+  return (dateRange === null || dateRange === void 0 ? void 0 : dateRange.from) !== void 0 && (dateRange === null || dateRange === void 0 ? void 0 : dateRange.to) !== void 0;
+};
+
+var FilterDateRangePicker = function(_a) {
+  var propsId = _a.id, isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, renderTrigger = _a.renderTrigger, selectedRange = _a.selectedRange, label = _a.label, locale = _a.locale, restProps = __rest(_a, ["id", "isOpen", "setIsOpen", "renderTrigger", "selectedRange", "label", "locale"]);
+  var id = useState(propsId || v4())[0];
+  return React.createElement(
+    Filter,
+    { isOpen, setIsOpen, renderTrigger: function(triggerProps) {
+      return renderTrigger(__assign({ selectedValue: isCompleteDateRange(selectedRange) && isValidRange(selectedRange.from, selectedRange.to) ? React.createElement(DateRangeDisplayLabel, { dateRange: selectedRange, locale: getLocale$1(locale) }) : void 0, label }, triggerProps));
+    } },
+    React.createElement(
+      FilterContents,
+      null,
+      React.createElement(FilterDateRangePickerField, __assign({ id: "".concat(id, "--input"), label, locale, selectedRange }, restProps))
+    )
+  );
+};
+FilterDateRangePicker.displayName = "FilterDateRangePicker";
+
+var FilterBarDateRangePicker = function(_a) {
+  var id = _a.id, onRangeChange = _a.onRangeChange, _b = _a.locale, locale = _b === void 0 ? "en-AU" : _b, props = __rest(_a, ["id", "onRangeChange", "locale"]);
+  var _c = useFilterBarContext(), getFilterState = _c.getFilterState, setFilterOpenState = _c.setFilterOpenState, updateValue = _c.updateValue;
+  if (!id)
+    throw Error("Missing `id` prop in FilterBarDateRangePicker");
+  var filterState = getFilterState(id);
+  return React.createElement(FilterDateRangePicker, __assign({}, props, { id, label: filterState.name, renderTrigger: function(triggerProps) {
+    return React.createElement(FilterBarButton, __assign({}, triggerProps, { id, isRemovable: filterState.isRemovable }));
+  }, isOpen: filterState.isOpen, setIsOpen: function(open) {
+    return setFilterOpenState(id, open);
+  }, selectedRange: filterState.value, onRangeChange: function(range) {
+    updateValue(id, range);
+    onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
+  }, locale }));
+};
+FilterBarDateRangePicker.displayName = "FilterBar.DateRangePicker";
+
+var MenuTriggerContext = React.createContext({});
+function MenuTriggerProvider(_a) {
+  var isOpen = _a.isOpen, defaultOpen = _a.defaultOpen, onOpenChange = _a.onOpenChange, children = _a.children;
+  var state = useMenuTriggerState({ isOpen, defaultOpen, onOpenChange });
+  var ref = React.createRef();
+  var _b = useMenuTrigger({}, state, ref), menuTriggerProps = _b.menuTriggerProps, menuProps = _b.menuProps;
+  var buttonProps = useButton(menuTriggerProps, ref).buttonProps;
+  return React.createElement(MenuTriggerContext.Provider, { value: {
+    menuTriggerProps,
+    buttonProps,
+    menuProps,
+    menuTriggerState: state,
+    buttonRef: ref
+  } }, children);
+}
+var useMenuTriggerContext = function() {
+  return useContext(MenuTriggerContext);
+};
+var MenuTriggerConsumer = MenuTriggerContext.Consumer;
+MenuTriggerContext.displayName = "MenuTriggerContext";
+
+var SelectionContext = React.createContext({});
+var SelectionProvider = function(props) {
+  var onSearchInputChange = props.onSearchInputChange, otherProps = __rest(props, ["onSearchInputChange"]);
+  var _a = useState(""), searchQuery = _a[0], setSearchQuery = _a[1];
+  var menuProps = useMenuTriggerContext().menuProps;
+  React.useEffect(function() {
+    if (onSearchInputChange) {
+      onSearchInputChange(searchQuery);
+    }
+  }, [searchQuery, onSearchInputChange]);
+  var searchFilter = useCallback(function(nodes) {
+    return searchQuery ? Array.from(nodes).filter(function(f) {
+      return f.textValue.toLowerCase().includes(searchQuery.toLowerCase());
+    }) : nodes;
+  }, [searchQuery]);
+  var state = useListState(__assign(__assign({}, otherProps), { children: function(item) {
+    return React.createElement(Item, { key: item.value }, item.label);
+  }, filter: onSearchInputChange ? void 0 : searchFilter }));
+  var ref = React.createRef();
+  var _b = useListBox(__assign(__assign(__assign({}, menuProps), otherProps), { disallowEmptySelection: true }), state, ref), listBoxProps = _b.listBoxProps, labelProps = _b.labelProps;
+  return React.createElement(
+    SelectionContext.Provider,
+    { value: {
+      listBoxProps,
+      labelProps,
+      selectionState: state,
+      listRef: ref,
+      setSearchQuery,
+      searchQuery
+    } },
+    React.createElement(VisuallyHidden, __assign({}, labelProps), otherProps.label),
+    otherProps.children
+  );
+};
+var useSelectionContext = function() {
+  return useContext(SelectionContext);
+};
+var SelectionConsumer = SelectionContext.Consumer;
+SelectionProvider.displayName = "SelectionProvider";
+
+var styles$t = {"listBox":"ListBox-module_listBox__UNOzJ","overflown":"ListBox-module_overflown__ATtxj","hidden":"ListBox-module_hidden__tQP6S"};
+
+var getItemsFromKeys = function(items, keys) {
+  var itemKeys = Array.from(keys);
+  return itemKeys.reduce(function(acc, itemKey) {
+    var item = items.getItem(itemKey);
+    return item ? __spreadArray(__spreadArray([], acc, true), [item], false) : acc;
+  }, []);
+};
+var ListBox$1 = function(_a) {
+  var children = _a.children;
+  var _b = useSelectionContext(), listBoxProps = _b.listBoxProps, listRef = _b.listRef, selectionState = _b.selectionState;
+  var _c = useState(false), isOverflown = _c[0], setIsOverflown = _c[1];
+  useEffect(function() {
+    var listElement = listRef.current;
+    if (!listElement) {
+      return;
+    }
+    setIsOverflown(listElement.scrollHeight > listElement.clientHeight);
+  }, [listRef]);
+  var items = selectionState.collection, disabledKeys = selectionState.disabledKeys, selectedKeys = selectionState.selectionManager.selectedKeys;
+  var disabledItems = getItemsFromKeys(items, disabledKeys);
+  var selectedItems = getItemsFromKeys(items, selectedKeys);
+  var unselectedItems = Array.from(items).filter(function(item) {
+    return !disabledKeys.has(item.key) && !selectedKeys.has(item.key);
+  });
+  var allItems = Array.from(items);
+  var hasNoItems = allItems.length === 0;
+  var _d = useState({
+    selectedItems,
+    unselectedItems,
+    disabledItems,
+    allItems,
+    hasNoItems
+  }), itemsState = _d[0], setItemsState = _d[1];
+  useEffect(function() {
+    setItemsState({
+      selectedItems,
+      disabledItems,
+      unselectedItems,
+      allItems,
+      hasNoItems
+    });
+  }, [selectionState.collection.size]);
+  if (hasNoItems) {
+    return React.createElement(
+      React.Fragment,
+      null,
+      React.createElement("div", null, children(itemsState)),
+      React.createElement("ul", { ref: listRef, className: styles$t.hidden })
+    );
+  }
+  return React.createElement("ul", __assign({}, listBoxProps, { ref: listRef, className: classnames(styles$t.listBox, isOverflown && styles$t.overflown) }), children(itemsState));
+};
+ListBox$1.displayName = "FilterMultiSelect.ListBox";
+
+var styles$s = {"listBoxSection":"ListBoxSection-module_listBoxSection__zH8wd"};
+
+var ListBoxSection$1 = function(_a) {
+  var items = _a.items, sectionName = _a.sectionName, children = _a.children;
+  return React.createElement("div", { "aria-label": sectionName, className: styles$s.listBoxSection }, Array.from(items).map(function(node) {
+    return node != void 0 && children(node);
+  }));
+};
+ListBoxSection$1.displayName = "FilterMultiSelect.ListBoxSection";
+
+var styles$r = {"container":"LoadMoreButton-module_container__5VoUY"};
+
+var LoadMoreButton = function(props) {
+  return React.createElement(
+    "div",
+    { className: styles$r.container },
+    React.createElement(Button$1, __assign({}, props, { fullWidth: true }))
+  );
+};
+LoadMoreButton.displayName = "FilterMultiSelect.LoadMoreButton";
+
+var styles$q = {"footer":"MenuFooter-module_footer__EAJQH"};
+
+var MenuFooter = function(_a) {
+  var children = _a.children;
+  return React.createElement("div", { className: styles$q.footer }, children);
+};
+MenuFooter.displayName = "FilterMultiSelect.MenuFooter";
+
+var styles$p = {"loadingInput":"MenuLoadingSkeleton-module_loadingInput__XjXUs","loadingContainer":"MenuLoadingSkeleton-module_loadingContainer__Re0NU"};
+
+var MenuLoadingSkeleton = function(_a) {
+  var _b = _a.isAnimated, isAnimated = _b === void 0 ? false : _b;
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      "div",
+      { className: styles$p.loadingContainer },
+      React.createElement(LoadingInput, { classNameOverride: styles$p.loadingInput, isAnimated }),
+      React.createElement(LoadingParagraph, { isAnimated }),
+      React.createElement(LoadingParagraph, { isAnimated }),
+      React.createElement(LoadingParagraph, { isAnimated }),
+      React.createElement(LoadingParagraph, { isAnimated }),
+      React.createElement(LoadingParagraph, { isAnimated })
+    ),
+    React.createElement(
+      MenuFooter,
+      null,
+      React.createElement(LoadingInput, { width: 40, height: 36, isAnimated }),
+      React.createElement(LoadingInput, { width: 30, height: 36, isAnimated })
+    )
+  );
+};
+MenuLoadingSkeleton.displayName = "FilterMultiSelect.MenuLoadingSkeleton";
+
+var CheckIcon = function(props) {
+  return React.createElement(
+    SVG,
+    __assign({}, props),
+    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "m8.333 14.342-4.166-4.167L5.342 9l2.991 2.983 6.325-6.325 1.175 1.184z" })
+  );
+};
+CheckIcon.displayName = "CheckIcon";
+
+var styles$o = {"icon":"MultiSelectOption-module_icon__rmfL-","option":"MultiSelectOption-module_option__1vbfi","badge":"MultiSelectOption-module_badge__VbnQR","isFocused":"MultiSelectOption-module_isFocused__XhwMs","isDisabled":"MultiSelectOption-module_isDisabled__FKH9f","badgeContainer":"MultiSelectOption-module_badgeContainer__6Xw7E","isSelected":"MultiSelectOption-module_isSelected__dXmuK"};
+
+var MultiSelectOption = function(_a) {
+  var _b, _c, _d;
+  var item = _a.item;
+  var state = useSelectionContext().selectionState;
+  var ref = React.createRef();
+  var _e = useOption({ key: item.key }, state, ref), optionProps = _e.optionProps, isSelected = _e.isSelected, isDisabled = _e.isDisabled;
+  var _f = useFocusRing(), isFocusVisible = _f.isFocusVisible, focusProps = _f.focusProps;
+  var countElementId = useMemo(function() {
+    return v4();
+  }, []);
+  return React.createElement(
+    "li",
+    __assign({}, mergeProps(optionProps, focusProps), { ref, className: classnames(styles$o.option, isSelected && styles$o.isSelected, isFocusVisible && styles$o.isFocusVisible, isDisabled && styles$o.isDisabled), "aria-label": (_b = item.value) === null || _b === void 0 ? void 0 : _b.label, "aria-describedby": ((_c = item.value) === null || _c === void 0 ? void 0 : _c.count) ? countElementId : void 0 }),
+    React.createElement("span", { className: classnames(styles$o.icon, isSelected && styles$o.isSelected) }, isSelected && React.createElement(CheckIcon, { role: "presentation" })),
+    item.rendered,
+    ((_d = item.value) === null || _d === void 0 ? void 0 : _d.count) && React.createElement(
+      "span",
+      { id: countElementId, className: styles$o.badgeContainer },
+      React.createElement(Badge, { classNameOverride: styles$o.badge }, item.value.count),
+      React.createElement(VisuallyHidden, null, " available")
+    )
+  );
+};
+MultiSelectOption.displayName = "FilterMultiSelect.Option";
+
+var styles$n = {"container":"NoResults-module_container__itPph"};
+
+var NoResults = function(_a) {
+  var children = _a.children, restProps = __rest(_a, ["children"]);
+  return React.createElement(
+    "div",
+    __assign({ className: styles$n.container }, restProps),
+    React.createElement(Paragraph, { variant: "extra-small", color: "dark-reduced-opacity" }, children)
+  );
+};
+NoResults.displayName = "FilterMultiSelect.NoResults";
+
+var styles$m = {"menuPopup":"MenuPopup-module_menuPopup__JlPk3"};
+
+var MenuPopup = function(_a) {
+  var isLoading = _a.isLoading, loadingSkeleton = _a.loadingSkeleton, children = _a.children;
+  var menuTriggerState = useMenuTriggerContext().menuTriggerState;
+  var onClose = function() {
+    return menuTriggerState.close();
+  };
+  var overlayRef = React.createRef();
+  var overlayProps = useOverlay({
+    onClose,
+    isOpen: menuTriggerState.isOpen,
+    isDismissable: true
+  }, overlayRef).overlayProps;
+  return menuTriggerState.isOpen ? React.createElement("div", __assign({}, overlayProps, { ref: overlayRef, className: styles$m.menuPopup }), isLoading && loadingSkeleton ? React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(DismissButton, { onDismiss: onClose }),
+    loadingSkeleton,
+    React.createElement(DismissButton, { onDismiss: onClose })
+  ) : (
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    React.createElement(
+      FocusScope,
+      { contain: true, autoFocus: true, restoreFocus: true },
+      React.createElement(DismissButton, { onDismiss: onClose }),
+      children,
+      React.createElement(DismissButton, { onDismiss: onClose })
+    )
+  )) : React.createElement(React.Fragment, null);
+};
+MenuPopup.displayName = "FilterMultiSelect.MenuPopup";
+
+var Root = function(_a) {
+  var trigger = _a.trigger, children = _a.children, isOpen = _a.isOpen, defaultOpen = _a.defaultOpen, onOpenChange = _a.onOpenChange, isLoading = _a.isLoading, loadingSkeleton = _a.loadingSkeleton, label = _a.label, items = _a.items, selectedKeys = _a.selectedKeys, defaultSelectedKeys = _a.defaultSelectedKeys, onSelectionChange = _a.onSelectionChange, _b = _a.selectionMode, selectionMode = _b === void 0 ? "multiple" : _b, onSearchInputChange = _a.onSearchInputChange;
+  var menuTriggerProps = { isOpen, defaultOpen, onOpenChange };
+  var menuPopupProps = { isLoading, loadingSkeleton };
+  var disabledKeys = new Set(items === null || items === void 0 ? void 0 : items.filter(function(item) {
+    return item.isDisabled === true;
+  }).map(function(disabledItem) {
+    return disabledItem.value;
+  }));
+  var selectionProps = {
+    label,
+    items,
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    selectionMode,
+    disabledKeys,
+    onSearchInputChange
+  };
+  return React.createElement(
+    MenuTriggerProvider,
+    __assign({}, menuTriggerProps),
+    React.createElement(
+      "div",
+      null,
+      React.createElement(MenuTriggerConsumer, null, trigger),
+      React.createElement(
+        MenuPopup,
+        __assign({}, menuPopupProps),
+        React.createElement(
+          SelectionProvider,
+          __assign({}, selectionProps),
+          React.createElement(SelectionConsumer, null, children)
+        )
+      )
+    )
+  );
+};
+Root.displayName = "FilterMultiSelect";
+
+var SearchIcon = function(props) {
+  return React.createElement(
+    SVG,
+    __assign({}, props),
+    React.createElement("path", { id: "a", d: "M13.435 12.063h-.723l-.256-.247a5.92 5.92 0 0 0 1.437-3.87 5.946 5.946 0 1 0-5.947 5.947 5.92 5.92 0 0 0 3.87-1.437l.247.256v.723L16.637 18 18 16.637l-4.565-4.574Zm-5.489 0A4.111 4.111 0 0 1 3.83 7.946 4.111 4.111 0 0 1 7.946 3.83a4.111 4.111 0 0 1 4.117 4.116 4.111 4.111 0 0 1-4.117 4.117Z" })
+  );
+};
+SearchIcon.displayName = "SearchIcon";
+
+var styles$l = {"wrapper":"InputSearch-module_wrapper__hs-4L","input":"InputSearch-module_input__dNBbc","hasEndIconAdornment":"InputSearch-module_hasEndIconAdornment__AbK33","focusRing":"InputSearch-module_focusRing__IjP-5","startIconAdornment":"InputSearch-module_startIconAdornment__80-z0","loadingSpinner":"InputSearch-module_loadingSpinner__JrFST","endIconAdornment":"InputSearch-module_endIconAdornment__mgwQC","disabled":"InputSearch-module_disabled__gA9sy","default":"InputSearch-module_default__9VM-U","secondary":"InputSearch-module_secondary__ndOXK","reversed":"InputSearch-module_reversed__v8hfk"};
+
+var InputSearch = function(props) {
+  var value = props.value, onChange = props.onChange, onClear = props.onClear, classNameOverride = props.classNameOverride, disabled = props.disabled, _a = props.reversed, reversed = _a === void 0 ? false : _a, _b = props.loading, loading = _b === void 0 ? false : _b, _c = props.secondary, secondary = _c === void 0 ? false : _c, restProps = __rest(props, ["value", "onChange", "onClear", "classNameOverride", "disabled", "reversed", "loading", "secondary"]);
+  var inputRef = useRef(null);
+  var handleOnClear = function() {
+    var _a2;
+    (_a2 = inputRef.current) === null || _a2 === void 0 ? void 0 : _a2.focus();
+    onClear && onClear();
+  };
+  return React.createElement(
+    "div",
+    { className: classnames(styles$l.wrapper, secondary ? styles$l.secondary : styles$l["default"], reversed && styles$l.reversed, disabled && styles$l.disabled, value && styles$l.hasEndIconAdornment, classNameOverride) },
+    React.createElement("div", { className: styles$l.startIconAdornment }, loading ? React.createElement(LoadingSpinner, { accessibilityLabel: "", size: "sm", classNameOverride: styles$l.loadingSpinner }) : React.createElement(SearchIcon, { role: "presentation" })),
+    React.createElement("input", __assign({ ref: inputRef, type: "search", className: styles$l.input, disabled, value, onChange, readOnly: onChange === void 0 }, restProps)),
+    React.createElement("div", { className: styles$l.focusRing }),
+    value && React.createElement(ClearButton$1, { isReversed: reversed, onClick: handleOnClear, disabled, classNameOverride: styles$l.endIconAdornment, "aria-label": "clear search" })
+  );
+};
+InputSearch.displayName = "InputSearch";
+
+var styles$k = {"inputSearchContainer":"SearchInput-module_inputSearchContainer__2TCSY"};
+
+var SearchInput = function(_a) {
+  var label = _a.label, id = _a.id, isLoading = _a.isLoading;
+  var _b = useSelectionContext(), setSearchQuery = _b.setSearchQuery, searchQuery = _b.searchQuery;
+  var handleChange = function(e) {
+    setSearchQuery(e.target.value);
+  };
+  var handleClear = function() {
+    return setSearchQuery("");
+  };
+  var inputId = useMemo(function() {
+    return id !== null && id !== void 0 ? id : v4();
+  }, [id]);
+  return React.createElement(
+    "div",
+    { className: styles$k.inputSearchContainer },
+    React.createElement(InputSearch, { id: inputId, "aria-label": label !== null && label !== void 0 ? label : "Filter options by search query", secondary: true, placeholder: "Search\u2026", value: searchQuery, onChange: handleChange, onClear: handleClear, loading: isLoading })
+  );
+};
+SearchInput.displayName = "FilterMultiSelect.SearchInput";
+
+var styles$j = {"divider":"SectionDivider-module_divider__zlsWs"};
+
+var SectionDivider$1 = function() {
+  return React.createElement(Divider, { classNameOverride: styles$j.divider, variant: "canvas" });
+};
+SectionDivider$1.displayName = "FilterMultiSelect.SectionDivider";
+
+var styles$i = {"button":"SelectionControlButton-module_button__F6wec","isDisabled":"SelectionControlButton-module_isDisabled__lYOrG"};
+
+var ClearButton = function() {
+  var selectionState = useSelectionContext().selectionState;
+  var filteredOptions = Array.from(selectionState.collection.getKeys());
+  var selectedOptions = Array.from(selectionState.selectionManager.selectedKeys);
+  var isDisabled = filteredOptions.length === 0 || !Boolean(filteredOptions.find(function(key) {
+    return selectionState.selectionManager.isSelected(key);
+  }));
+  return React.createElement(
+    "button",
+    { type: "button", className: classnames(styles$i.button, isDisabled && styles$i.isDisabled), "aria-disabled": isDisabled, onClick: function() {
+      !isDisabled && selectionState.selectionManager.setSelectedKeys(selectedOptions.filter(function(option) {
+        return !filteredOptions.includes(option);
+      }));
+    } },
+    "Clear",
+    React.createElement(VisuallyHidden, null, " selections")
+  );
+};
+ClearButton.displayName = "FilterMultiSelect.ClearButton";
+
+var SelectAllButton = function() {
+  var selectionState = useSelectionContext().selectionState;
+  var selectedOptions = Array.from(selectionState.selectionManager.selectedKeys);
+  var disabledOptions = selectionState.disabledKeys ? Array.from(selectionState.disabledKeys) : [];
+  var filteredOptions = Array.from(selectionState.collection.getKeys()).filter(function(key) {
+    return !disabledOptions.includes(key);
+  });
+  return React.createElement("button", { type: "button", className: classnames(styles$i.button, selectionState.selectionManager.isSelectAll && styles$i.isDisabled), "aria-disabled": selectionState.selectionManager.isSelectAll, onClick: function() {
+    return !selectionState.selectionManager.isSelectAll && selectionState.selectionManager.setSelectedKeys(__spreadArray(__spreadArray([], selectedOptions, true), filteredOptions, true));
+  } }, "Select all");
+};
+SelectAllButton.displayName = "FilterMultiSelect.SelectAllButton";
+
+var CONNECTOR = ", ";
+var truncateByCharacterLimit = function(labels, limit, labelsTruncatedCount) {
+  if (labelsTruncatedCount === void 0) {
+    labelsTruncatedCount = 0;
+  }
+  if (labels.length === 1 || labels.join("").replace(/,/g, "").length < limit) {
+    var moreIndicator = labelsTruncatedCount > 0 ? " + ".concat(labelsTruncatedCount, " more") : "";
+    return "".concat(labels.join(CONNECTOR)).concat(moreIndicator);
+  }
+  var newLabels = labels.slice(0, labels.length - 1);
+  return truncateByCharacterLimit(newLabels, limit, labelsTruncatedCount + 1);
+};
+var getTruncatedLabels = function(labels, limit) {
+  return truncateByCharacterLimit(labels, limit);
+};
+
+var getSelectedOptionLabels = function(keys, items) {
+  if (!keys || !items) {
+    return [];
+  }
+  if (keys === "all") {
+    return items.map(function(item) {
+      return item.label;
+    });
+  }
+  return Array.from(keys).map(function(key) {
+    var _a, _b;
+    return (_b = (_a = items.find(function(item) {
+      return item.value === key;
+    })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "";
+  }).filter(function(item) {
+    return item !== "";
+  });
+};
+
+var getSelectedOptionKeys = function(keys, items) {
+  if (!keys || !items) {
+    return [];
+  }
+  if (keys === "all") {
+    return items.map(function(item) {
+      return item.value;
+    });
+  }
+  return Array.from(keys);
+};
+
+var FilterTriggerButton = function(_a) {
+  var selectedOptionLabels = _a.selectedOptionLabels, label = _a.label, classNameOverride = _a.classNameOverride, _b = _a.labelCharacterLimitBeforeTruncate, labelCharacterLimitBeforeTruncate = _b === void 0 ? 50 : _b;
+  var _c = useMenuTriggerContext(), buttonProps = _c.buttonProps, buttonRef = _c.buttonRef, menuTriggerState = _c.menuTriggerState;
+  var ref = useRef({ triggerRef: buttonRef });
+  return React.createElement(FilterButton, __assign({ ref }, buttonProps, { label, selectedValue: getTruncatedLabels(selectedOptionLabels, labelCharacterLimitBeforeTruncate), classNameOverride, isOpen: menuTriggerState.isOpen }));
+};
+FilterTriggerButton.displayName = "FilterMultiSelect.TriggerButton";
+
+var RemovableFilterTrigger = function(_a) {
+  var label = _a.label, selectedOptionLabels = _a.selectedOptionLabels, _b = _a.labelCharacterLimitBeforeTruncate, labelCharacterLimitBeforeTruncate = _b === void 0 ? 50 : _b, classNameOverride = _a.classNameOverride, onRemove = _a.onRemove;
+  var _c = useMenuTriggerContext(), buttonProps = _c.buttonProps, buttonRef = _c.buttonRef, menuTriggerState = _c.menuTriggerState;
+  var ref = useRef({ triggerRef: buttonRef });
+  return React.createElement(FilterButtonRemovable, { ref, classNameOverride, triggerButtonProps: __assign(__assign({}, buttonProps), { label, selectedValue: getTruncatedLabels(selectedOptionLabels, labelCharacterLimitBeforeTruncate), isOpen: menuTriggerState.isOpen }), removeButtonProps: {
+    onClick: onRemove
+  } });
+};
+RemovableFilterTrigger.displayName = "FilterMultiSelect.RemovableTrigger";
+
+var FilterMultiSelect = Object.assign(Root, {
+  TriggerButton: FilterTriggerButton,
+  RemovableTrigger: RemovableFilterTrigger,
+  SearchInput,
+  ListBox: ListBox$1,
+  ListBoxSection: ListBoxSection$1,
+  SectionDivider: SectionDivider$1,
+  Option: MultiSelectOption,
+  SelectAllButton,
+  ClearButton,
+  MenuFooter,
+  MenuLoadingSkeleton,
+  LoadMoreButton,
+  NoResults
+});
+
+var checkArraysMatch = function(a1, a2) {
+  if (a1.length !== a2.length)
+    return false;
+  return a1.every(function(v, i) {
+    return v === a2[i];
+  });
+};
+
+var convertSelectionToAConsumableFormat = function(value) {
+  if (value === "all")
+    return "all";
+  var arrayOfValues = Array.from(value);
+  return arrayOfValues.length > 0 ? Array.from(value) : void 0;
+};
+var convertConsumableFormatIntoSelection = function(value) {
+  return new Set(value);
+};
+var FilterBarMultiSelect = function(_a) {
+  var id = _a.id, propsItems = _a.items, children = _a.children, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["id", "items", "children", "onSelectionChange"]);
+  var _b = useFilterBarContext(), getFilterState = _b.getFilterState, setFilterOpenState = _b.setFilterOpenState, updateValue = _b.updateValue, hideFilter = _b.hideFilter;
+  var _c = useState(propsItems), items = _c[0], setItems = _c[1];
+  if (!id)
+    throw Error("Missing `id` prop in FilterBarMultiSelect");
+  var filterState = getFilterState(id);
+  useEffect(function() {
+    if (!checkArraysMatch(items, propsItems)) {
+      setItems(propsItems);
+    }
+  }, [propsItems]);
+  useEffect(function() {
+    if (Array.isArray(filterState.value)) {
+      var itemValues_1 = items.map(function(_a2) {
+        var value = _a2.value;
+        return value;
+      });
+      var filteredValues = filterState.value.filter(function(value) {
+        return itemValues_1.includes(value);
+      });
+      if (!checkArraysMatch(filterState.value, filteredValues)) {
+        updateValue(id, filteredValues);
+      }
+    }
+  }, [items]);
+  return React.createElement(FilterMultiSelect, __assign({
+    label: filterState.name,
+    // Convert the incoming FilterBar state to a Set (internal FilterMultiSelect state)
+    selectedKeys: new Set(filterState.value || null),
+    onSelectionChange: function(keys) {
+      updateValue(id, convertSelectionToAConsumableFormat(keys));
+      onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(keys);
+    },
+    items,
+    isOpen: filterState.isOpen,
+    onOpenChange: function(open) {
+      return setFilterOpenState(id, open);
+    },
+    trigger: function() {
+      var triggerProps = {
+        selectedOptionLabels: filterState.value ? getSelectedOptionLabels(convertConsumableFormatIntoSelection(filterState.value), items) : [],
+        label: filterState.name
+      };
+      return filterState.isRemovable ? React.createElement(FilterMultiSelect.RemovableTrigger, __assign({}, triggerProps, { onRemove: function() {
+        return hideFilter(id);
+      } })) : React.createElement(FilterMultiSelect.TriggerButton, __assign({}, triggerProps));
+    }
+  }, props), children);
+};
+FilterBarMultiSelect.displayName = "FilterBar.MultiSelect";
+
+var SelectContext = React.createContext(null);
+var useSelectContext = function() {
+  var context = useContext(SelectContext);
+  if (!context) {
+    throw new Error("useSelectContext must be used within the SelectContext.Provider");
+  }
+  return context;
+};
+var SelectProvider = function(_a) {
+  var children = _a.children, state = _a.state;
+  return React.createElement(SelectContext.Provider, { value: { state } }, children);
+};
+
+var styles$h = {"listBox":"ListBox-module_listBox__FQ9sQ","focus":"ListBox-module_focus__Tm-jn"};
+
+var ListBox = function(_a) {
+  var children = _a.children, menuProps = _a.menuProps, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "menuProps", "classNameOverride"]);
+  var state = useSelectContext().state;
+  var ref = React.useRef(null);
+  var listBoxProps = useListBox(__assign(__assign({}, menuProps), { disallowEmptySelection: true, autoFocus: "first" }), state, ref).listBoxProps;
+  return React.createElement("ul", __assign({ ref, className: classnames(styles$h.listBox, classNameOverride) }, listBoxProps, restProps), children);
+};
+ListBox.displayName = "ListBox";
+
+var styles$g = {"icon":"Option-module_icon__0ECp6","option":"Option-module_option__U-MsL","isFocusVisible":"Option-module_isFocusVisible__yYC7y","disabled":"Option-module_disabled__RV081","isSelected":"Option-module_isSelected__L3nhB"};
+
+var Option = function(_a) {
+  var item = _a.item, classNameOverride = _a.classNameOverride, props = __rest(_a, ["item", "classNameOverride"]);
+  var state = useSelectContext().state;
+  var ref = React.useRef(null);
+  var _b = useOption({ key: item.key }, state, ref), optionProps = _b.optionProps, isSelected = _b.isSelected, isDisabled = _b.isDisabled;
+  var _c = useFocusRing(), isFocusVisible = _c.isFocusVisible, focusProps = _c.focusProps;
+  return React.createElement(
+    "li",
+    __assign({}, mergeProps(optionProps, focusProps, props), { ref, className: classnames(styles$g.option, isSelected && styles$g.isSelected, isFocusVisible && styles$g.isFocusVisible, isDisabled && styles$g.disabled, classNameOverride), "aria-label": item.textValue }),
+    item.rendered,
+    React.createElement("span", { className: classnames(styles$g.icon, isSelected && styles$g.isSelected) }, isSelected && React.createElement(CheckIcon, { inheritSize: true, role: "presentation" }))
+  );
+};
+Option.displayName = "Option";
+
+var styles$f = {"sectionWrapper":"ListBoxSection-module_sectionWrapper__NYQwa","sectionHeading":"ListBoxSection-module_sectionHeading__KiOi1","sectionList":"ListBoxSection-module_sectionList__xiPZY"};
+
+var ListBoxSection = function(_a) {
+  var section = _a.section;
+  var _b = useListBoxSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"]
+  }), itemProps = _b.itemProps, headingProps = _b.headingProps, groupProps = _b.groupProps;
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      "li",
+      __assign({}, itemProps, { className: styles$f.sectionWrapper }),
+      section.rendered && React.createElement(Heading, __assign({ tag: "span", variant: "heading-6" }, headingProps, { classNameOverride: styles$f.sectionHeading }), section.rendered),
+      React.createElement("ul", __assign({}, groupProps, { className: styles$f.sectionList }), Array.from(section.childNodes).map(function(item) {
+        return React.createElement(Option, { key: item.key, item });
+      }))
+    )
+  );
+};
+ListBoxSection.displayName = "ListBoxSection";
+
+var ListItem = function(_a) {
+  var item = _a.item;
+  return item.type === "section" ? React.createElement(ListBoxSection, { key: item.key, section: item }) : React.createElement(Option, { key: item.key, item });
+};
+ListItem.displayName = "ListItem";
+
+var ListItems = function(_a) {
+  var items = _a.items;
+  return React.createElement(React.Fragment, null, items.map(function(item) {
+    return React.createElement(ListItem, { key: item.key, item });
+  }));
+};
+ListItems.displayName = "ListItems";
+
+var Overlay = function(_a) {
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+  var state = useSelectContext().state;
+  var overlayRef = React.useRef(null);
+  var overlayProps = useOverlay({ isDismissable: true, isOpen: state.isOpen, onClose: state.close }, overlayRef).overlayProps;
+  return React.createElement(
+    "div",
+    __assign({ ref: overlayRef, className: classNameOverride }, overlayProps, restProps),
+    React.createElement(
+      FocusScope,
+      { contain: true, autoFocus: true, restoreFocus: true },
+      React.createElement(DismissButton, { onDismiss: state.close }),
+      children,
+      React.createElement(DismissButton, { onDismiss: state.close })
+    )
+  );
+};
+Overlay.displayName = "Overlay";
+
+var styles$e = {"divider":"SectionDivider-module_divider__-idrC"};
+
+var SectionDivider = function() {
+  return React.createElement(Divider, { classNameOverride: styles$e.divider, variant: "canvas" });
+};
+SectionDivider.displayName = "SectionDivider";
+
+var isSelectOptionGroup = function(item) {
+  return item.hasOwnProperty("options") && Array.isArray(item.options);
+};
+
+var transformSelectItemToCollectionElement = function(item) {
+  return isSelectOptionGroup(item) ? React.createElement(Section, { key: item.label, title: item.label, items: item.options }, function(child) {
+    return React.createElement(Item, { key: child.value }, child.label);
+  }) : React.createElement(Item, { key: item.value }, item.label);
+};
+
+var styles$d = {"filterContents":"FilterSelect-module_filterContents__2LknZ"};
+
+var FilterSelect = function(_a) {
+  var isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, renderTrigger = _a.renderTrigger, label = _a.label, children = _a.children, items = _a.items, classNameOverride = _a.classNameOverride, selectedKey = _a.selectedKey, restProps = __rest(_a, ["isOpen", "setIsOpen", "renderTrigger", "label", "children", "items", "classNameOverride", "selectedKey"]);
+  var _b = useState({ current: null }), triggerRef = _b[0], setTriggerRef = _b[1];
+  var disabledKeys = items.reduce(function(acc, item) {
+    if (isSelectOptionGroup(item)) {
+      var keys = Array.from(item.options).filter(function(groupItem) {
+        return groupItem.disabled;
+      }).map(function(disabledItems) {
+        return disabledItems.value;
+      });
+      return __spreadArray(__spreadArray([], acc, true), keys, true);
+    }
+    return item.disabled ? __spreadArray(__spreadArray([], acc, true), [item.value], false) : acc;
+  }, []);
+  var ariaSelectProps = __assign({ label, items, children: transformSelectItemToCollectionElement, isOpen, onOpenChange: setIsOpen, disabledKeys, selectedKey: typeof selectedKey === "number" ? selectedKey.toString() : selectedKey }, restProps);
+  var state = useSelectState(ariaSelectProps);
+  var _c = useSelect(ariaSelectProps, state, triggerRef), triggerProps = _c.triggerProps, menuProps = _c.menuProps;
+  var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
+  var itemNodes = Array.from(state.collection);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(HiddenSelect, { label, state, triggerRef }),
+    React.createElement(
+      Filter,
+      { isOpen, setIsOpen, renderTrigger: function() {
+        var _a2;
+        return renderTrigger(__assign({ selectedValue: ((_a2 = state.selectedItem) === null || _a2 === void 0 ? void 0 : _a2.textValue) || void 0, label, isOpen }, buttonProps));
+      }, onMount: setTriggerRef, classNameOverride },
+      React.createElement(
+        FilterContents,
+        { classNameOverride: styles$d.filterContents },
+        React.createElement(
+          SelectProvider,
+          { state },
+          React.createElement(
+            Overlay,
+            null,
+            React.createElement(ListBox, { menuProps }, children ? children({ items: itemNodes }) : React.createElement(ListItems, { items: itemNodes }))
+          )
+        )
+      )
+    )
+  );
+};
+FilterSelect.displayName = "FilterSelect";
+FilterSelect.Section = ListBoxSection;
+FilterSelect.SectionDivider = SectionDivider;
+FilterSelect.Option = Option;
+FilterSelect.ItemDefaultRender = ListItem;
+
+var FilterBarSelect = function(_a) {
+  var id = _a.id, propsItems = _a.items, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["id", "items", "onSelectionChange"]);
+  var _b = useFilterBarContext(), getFilterState = _b.getFilterState, setFilterOpenState = _b.setFilterOpenState, updateValue = _b.updateValue;
+  var _c = useState(propsItems), items = _c[0], setItems = _c[1];
+  if (!id)
+    throw Error("Missing `id` prop in FilterBarSelect");
+  var filterState = getFilterState(id);
+  useEffect(function() {
+    if (!checkArraysMatch(items, propsItems)) {
+      setItems(propsItems);
+    }
+  }, [propsItems]);
+  useEffect(function() {
+    if (filterState.value) {
+      var itemValues = items.map(function(item) {
+        return item === null || item === void 0 ? void 0 : item.value;
+      });
+      if (!itemValues.includes(filterState.value)) {
+        updateValue(id, void 0);
+      }
+    }
+  }, [items]);
+  return React.createElement(FilterSelect, __assign({}, props, { items, selectedKey: filterState.value || null, label: filterState.name, renderTrigger: function(triggerProps) {
+    return React.createElement(FilterBarButton, __assign({}, triggerProps, { id, isRemovable: filterState.isRemovable }));
+  }, onSelectionChange: function(key) {
+    updateValue(id, key);
+    onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(key);
+  }, isOpen: filterState.isOpen, setIsOpen: function(open) {
+    return setFilterOpenState(id, open);
+  } }));
+};
+FilterBarSelect.displayName = "FilterBarSelect";
+
+var AddIcon = function(props) {
+  return React.createElement(
+    SVG,
+    __assign({}, props),
+    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M10 2c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8Zm4 8.8h-3.2V14H9.2v-3.2H6V9.2h3.2V6h1.6v3.2H14v1.6Z" })
+  );
+};
+AddIcon.displayName = "AddIcon";
+
+var AddFiltersMenu = function() {
+  var _a = useFilterBarContext(), getInactiveFilters = _a.getInactiveFilters, showFilter = _a.showFilter;
+  var inactiveFilters = getInactiveFilters();
+  return React.createElement(
+    Menu,
+    { button: React.createElement(Button, { label: "Add Filters", secondary: true, disabled: inactiveFilters.length === 0, icon: React.createElement(AddIcon, { role: "presentation" }) }) },
+    React.createElement(MenuList, null, inactiveFilters.map(function(_a2) {
+      var id = _a2.id, name = _a2.name;
+      return React.createElement(MenuItem, { key: id, label: name, onClick: function() {
+        return showFilter(id);
+      } });
+    }))
+  );
+};
+AddFiltersMenu.displayName = "FilterBar.AddFiltersMenu";
+
+var styles$c = {"clearAllButton":"ClearAllButton-module_clearAllButton__luhgk"};
+
+var ClearAllButton = function() {
+  var clearAllFilters = useFilterBarContext().clearAllFilters;
+  return React.createElement(Button, { label: "Clear all", "aria-label": "Clear all filters", classNameOverride: styles$c.clearAllButton, secondary: true, onClick: clearAllFilters });
+};
+ClearAllButton.displayName = "FilterBar.ClearAllButton";
+
+var styles$b = {"filterBar":"FilterBar-module_filterBar__qMeNj","filtersContainer":"FilterBar-module_filtersContainer__AlFGD"};
+
+var FilterBar = function(_a) {
+  var filters = _a.filters, classNameOverride = _a.classNameOverride, providerProps = __rest(_a, ["filters", "classNameOverride"]);
+  return React.createElement(FilterBarProvider, __assign({ filters }, providerProps), function(activeFilters) {
+    return React.createElement(
+      "div",
+      { className: classnames(styles$b.filterBar, classNameOverride) },
+      React.createElement(
+        "div",
+        { className: styles$b.filtersContainer },
+        Object.values(activeFilters).map(function(_a2) {
+          var id = _a2.id, Component = _a2.Component;
+          return (
+            // `id` will always be `string`, but keyof ValuesMap transformed it
+            React.createElement(React.Fragment, { key: id }, React.cloneElement(Component, { id }))
+          );
+        }),
+        React.createElement(AddFiltersMenu, null)
+      ),
+      React.createElement(
+        "div",
+        null,
+        React.createElement(ClearAllButton, null)
+      )
+    );
+  });
+};
+FilterBar.displayName = "FilterBar";
+FilterBar.DatePicker = FilterBarDatePicker;
+FilterBar.DateRangePicker = FilterBarDateRangePicker;
+FilterBar.MultiSelect = FilterBarMultiSelect;
+FilterBar.Select = FilterBarSelect;
+
+var OptionalIntlProvider = function(_a) {
+  var locale = _a.locale, children = _a.children;
+  var parent = useContext(IntlContext);
+  if (parent)
+    return children;
+  return React.createElement(StaticIntlProvider, { locale }, children);
+};
+OptionalIntlProvider.displayName = "OptionalIntlProvider";
+
+var ThemeManager = (
+  /** @class */
+  function() {
+    function ThemeManager2(theme, rootElementId, apply) {
+      if (rootElementId === void 0) {
+        rootElementId = "";
+      }
+      if (apply === void 0) {
+        apply = true;
+      }
+      var _this = this;
+      this.themeChangeListeners = [];
+      this.rootElement = null;
+      this.getRootElement = function() {
+        return _this.rootElement;
+      };
+      this.getRootElementId = function() {
+        return _this.rootElementId;
+      };
+      this.getCurrentTheme = function() {
+        return _this.theme;
+      };
+      this.setRootElement = function(element) {
+        _this.rootElement = element;
+      };
+      this.setRootElementId = function(rootElementId2) {
+        return _this.rootElementId = rootElementId2;
+      };
+      this.setAndApplyTheme = function(theme2, force) {
+        if (!force) {
+          if (_this.theme === theme2)
+            return;
+        }
+        _this.theme = theme2;
+        _this.applyCurrentTheme();
+        _this.notifyThemeChangeListeners(theme2);
+      };
+      this.addThemeChangeListener = function(listener) {
+        _this.themeChangeListeners.push(listener);
+      };
+      this.removeThemeChangeListener = function(listener) {
+        _this.themeChangeListeners = _this.themeChangeListeners.filter(function(l) {
+          return l !== listener;
+        });
+      };
+      this.applyCurrentTheme = function() {
+        var _a;
+        if (typeof window !== "undefined") {
+          _this.setRootElement((_a = document.getElementById(_this.rootElementId)) !== null && _a !== void 0 ? _a : document.documentElement);
+          var cssVariableDefinitions = makeCssVariableDefinitionsMap(_this.theme);
+          Object.entries(cssVariableDefinitions).forEach(function(_a2) {
+            var _b;
+            var key = _a2[0], value = _a2[1];
+            (_b = _this.rootElement) === null || _b === void 0 ? void 0 : _b.style.setProperty(key, value);
+          });
+        }
+      };
+      this.notifyThemeChangeListeners = function(theme2) {
+        _this.themeChangeListeners.forEach(function(listener) {
+          return listener(theme2);
+        });
+      };
+      this.theme = theme;
+      this.rootElementId = rootElementId;
+      if (apply)
+        this.applyCurrentTheme();
+    }
+    return ThemeManager2;
+  }()
+);
+
+var heartTheme = {
+  themeKey: "heart",
+  animation: {
+    easingFunction: {
+      easeInOut: "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
+      easeIn: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+      easeOut: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+      linear: "linear",
+      bounceIn: "cubic-bezier(0.485, 0.155, 0.24, 1.245)",
+      bounceOut: "cubic-bezier(0.485, 0.155, 0.515, 0.845)",
+      bounceInOut: "cubic-bezier(0.76, -0.245, 0.24, 1.245)"
+    },
+    duration: {
+      instant: "0ms",
+      immediate: "100ms",
+      rapid: "200ms",
+      fast: "300ms",
+      slow: "400ms",
+      deliberate: "700ms"
+    }
+  },
+  border: {
+    solid: {
+      borderWidth: "2px",
+      borderRadius: "7px",
+      borderStyle: "solid",
+      borderColor: "#e1e2ea"
+    },
+    dashed: {
+      borderWidth: "2px",
+      borderRadius: "7px",
+      borderStyle: "dashed"
+    },
+    borderless: {
+      borderWidth: "2px",
+      borderRadius: "7px",
+      borderStyle: "solid",
+      borderColor: "transparent"
+    },
+    focusRing: {
+      borderWidth: "2px",
+      borderRadius: "10px",
+      borderStyle: "solid"
+    }
+  },
+  color: {
+    purple: {
+      100: "#f4edf8",
+      200: "#dfc9ea",
+      300: "#c9a5dd",
+      400: "#ae67b1",
+      500: "#844587",
+      600: "#5f3361",
+      700: "#4a234d",
+      800: "#2f2438"
+    },
+    blue: {
+      100: "#e6f6ff",
+      200: "#bde2f5",
+      300: "#73c0e8",
+      400: "#008bd6",
+      500: "#0168b3",
+      600: "#004970",
+      700: "#003157"
+    },
+    green: {
+      100: "#e8f8f4",
+      200: "#c4ede2",
+      300: "#8fdbc7",
+      400: "#5dcbad",
+      500: "#44a289",
+      600: "#2c7d67",
+      700: "#22594a"
+    },
+    yellow: {
+      100: "#fff9e4",
+      200: "#ffeeb3",
+      300: "#ffe36e",
+      400: "#ffca4d",
+      500: "#ffb600",
+      600: "#c68600",
+      700: "#876400"
+    },
+    red: {
+      100: "#fdeaee",
+      200: "#f9c2cb",
+      300: "#f597a8",
+      400: "#e0707d",
+      500: "#c93b55",
+      600: "#a82433",
+      700: "#6c1e20"
+    },
+    orange: {
+      100: "#fff0e8",
+      200: "#ffd1b9",
+      300: "#ffb08a",
+      400: "#ff9461",
+      500: "#e96c2f",
+      600: "#b74302",
+      700: "#903c00"
+    },
+    gray: {
+      100: "#f9f9f9",
+      200: "#f4f4f5",
+      300: "#eaeaec",
+      400: "#cdcdd0",
+      500: "#8c8c97",
+      600: "#524e56"
+    },
+    white: "#ffffff"
+  },
+  dataViz: {
+    favorable: "#7dd5bd",
+    unfavorable: "#e68d97"
+  },
+  layout: {
+    contentMaxWidth: "1392px",
+    contentMaxWidthWithSidebar: "1080px",
+    contentSideMargin: "72px",
+    mobileActionsDrawerHeight: "60px",
+    navigationBarHeight: "72px",
+    breakpoints: {
+      medium: "768px",
+      large: "1080px"
+    }
+  },
+  shadow: {
+    small: {
+      boxShadow: "0px 3px 16px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1)"
+    },
+    large: {
+      boxShadow: "0px 8px 40px rgba(0, 0, 0, 0.08), 0px 3px 9px rgba(0, 0, 0, 0.1)"
+    }
+  },
+  spacing: {
+    xs: "0.375rem",
+    sm: "0.75rem",
+    md: "1.5rem",
+    lg: "2.25rem",
+    xl: "3rem",
+    xxl: "3.75rem",
+    xxxl: "4.5rem",
+    xxxxl: "5.25rem",
+    xxxxxl: "6rem",
+    0: "0",
+    1: ".0625rem",
+    2: ".125rem",
+    4: ".25rem",
+    6: ".375rem",
+    8: ".5rem",
+    12: ".75rem",
+    16: "1rem",
+    24: "1.5rem",
+    32: "2rem",
+    40: "2.5rem",
+    48: "3rem",
+    56: "3.5rem",
+    64: "4rem",
+    72: "4.5rem",
+    80: "5rem",
+    96: "6rem",
+    112: "7rem",
+    128: "8rem",
+    160: "10rem",
+    200: "12.5rem",
+    240: "15rem",
+    280: "17.5rem",
+    320: "20rem"
+  },
+  typography: {
+    dataLarge: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "5.25rem",
+      lineHeight: "5.25rem",
+      letterSpacing: "normal"
+    },
+    dataLargeUnits: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "2.625rem",
+      lineHeight: "5.25rem",
+      letterSpacing: "normal"
+    },
+    dataMedium: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "3rem",
+      lineHeight: "5rem",
+      letterSpacing: "normal"
+    },
+    dataMediumUnits: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.5rem",
+      lineHeight: "5rem",
+      letterSpacing: "normal"
+    },
+    dataSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.5rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    dataSmallUnits: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.125rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    display0: {
+      fontFamily: '"Tiempos Headline", Georgia, serif',
+      fontWeight: 800,
+      fontSize: "4.5rem",
+      lineHeight: "5.25rem",
+      letterSpacing: "0em"
+    },
+    heading1: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "2.125rem",
+      lineHeight: "2.625rem",
+      letterSpacing: "normal"
+    },
+    heading2: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.75rem",
+      lineHeight: "2.25rem",
+      letterSpacing: "normal"
+    },
+    heading3: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.375rem",
+      lineHeight: "1.875rem",
+      letterSpacing: "normal"
+    },
+    heading4: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 600,
+      fontSize: "1.125rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    heading5: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 600,
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    heading6: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "0.875rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    paragraphIntroLede: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "1.25rem",
+      lineHeight: "1.875rem",
+      letterSpacing: "0"
+    },
+    paragraphBody: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    paragraphSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "0.875rem",
+      lineHeight: "1.125rem",
+      letterSpacing: "normal"
+    },
+    paragraphExtraSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "0.75rem",
+      lineHeight: "1.125rem",
+      letterSpacing: "normal"
+    },
+    paragraphBold: {
+      fontWeight: 600
+    },
+    buttonPrimary: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.125rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    },
+    buttonSecondary: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 500,
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal"
+    }
+  }
+};
+
+var defaultTheme = heartTheme;
+
+var ThemeContext = createContext(defaultTheme);
+var ThemeProvider = function(_a) {
+  var themeManager = _a.themeManager, props = __rest(_a, ["themeManager"]);
+  var themeManagerInstance = useState(function() {
+    return themeManager || new ThemeManager(defaultTheme);
+  })[0];
+  var _b = useState(themeManagerInstance.getCurrentTheme()), theme = _b[0], setTheme = _b[1];
+  useEffect(function() {
+    var cancelled = false;
+    var listener = function(newTheme) {
+      if (!cancelled)
+        setTheme(newTheme);
+    };
+    themeManagerInstance.addThemeChangeListener(listener);
+    return function() {
+      cancelled = true;
+      themeManagerInstance.removeThemeChangeListener(listener);
+    };
+  }, []);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(ThemeContext.Provider, { value: theme }, props.children),
+    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+    React.createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" })
+  );
+};
+var useTheme = function() {
+  return useContext(ThemeContext);
+};
+
+var KaizenProvider = function(_a) {
+  var children = _a.children, themeManager = _a.themeManager, _b = _a.locale, locale = _b === void 0 ? "en" : _b;
+  return React.createElement(
+    OptionalIntlProvider,
+    { locale },
+    React.createElement(ThemeProvider, { themeManager }, children)
+  );
+};
+KaizenProvider.displayName = "KaizenProvider";
+
+var styles$a = {"footerRoot":"FooterRoot-module_footerRoot__bvMSa"};
+
+var FooterRoot = function(_a) {
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+  return React.createElement("footer", __assign({ className: classnames(styles$a.footerRoot, classNameOverride) }, restProps), children);
+};
+FooterRoot.displayName = "Workflow.FooterRoot";
+
+var styles$9 = {"stepsContainer":"ProgressStepper-module_stepsContainer__kh4S2","stepList":"ProgressStepper-module_stepList__ToKVO","step":"ProgressStepper-module_step__5Zakx","stepContent":"ProgressStepper-module_stepContent__brp8m","stepIndicator":"ProgressStepper-module_stepIndicator__vAWW6","stepName":"ProgressStepper-module_stepName__21rPP","stepIcon":"ProgressStepper-module_stepIcon__eW-Ps","stepDivider":"ProgressStepper-module_stepDivider__SaO4y","stepperDescription":"ProgressStepper-module_stepperDescription__XT8Ra"};
+
+var getStepStatus = function(isComplete, isCurrentStep, step, index) {
+  if (isComplete) {
+    return {
+      icon: React.createElement(SuccessIcon, { key: index, inheritSize: true, role: "presentation", classNameOverride: "success" }),
+      accessibleName: "Completed: ".concat(step)
+    };
+  }
+  if (isCurrentStep) {
+    return {
+      icon: React.createElement(IndicatorActiveIcon, { key: index, inheritSize: true, role: "presentation", classNameOverride: "active" }),
+      accessibleName: "Current: ".concat(step)
+    };
+  }
+  return {
+    icon: React.createElement(IndicatorInactiveIcon, { key: index, inheritSize: true, classNameOverride: "incomplete", role: "presentation" }),
+    accessibleName: "Not started: ".concat(step)
+  };
+};
+var ProgressStepper = function(_a) {
+  var stepName = _a.stepName, steps = _a.steps, _b = _a.isComplete, isComplete = _b === void 0 ? false : _b, restprops = __rest(_a, ["stepName", "steps", "isComplete"]);
+  var currentStepIndex = steps.indexOf(stepName);
+  return React.createElement(
+    "div",
+    { className: styles$9.stepsContainer },
+    React.createElement("ol", __assign({ className: styles$9.stepList }, restprops, { "aria-labelledby": "stepper-description" }), steps.map(function(step, index) {
+      var isCurrentStep = currentStepIndex === index;
+      var isCompletedStep = index < currentStepIndex || isComplete;
+      var _a2 = getStepStatus(isCompletedStep, isCurrentStep, step, index), accessibleName = _a2.accessibleName, Icon = _a2.icon;
+      return React.createElement(
+        "li",
+        { className: styles$9.step, key: "".concat(index, "-").concat(step), "aria-current": isCurrentStep },
+        React.createElement(
+          "div",
+          { className: styles$9.stepContent },
+          React.createElement("span", { className: "sr-only" }, accessibleName),
+          React.createElement(Paragraph, { classNameOverride: styles$9.stepName, variant: "small", color: "white", "aria-hidden": true }, step),
+          React.createElement(
+            "div",
+            { className: styles$9.stepIndicator },
+            React.createElement("span", { className: styles$9.stepIcon }, Icon)
+          ),
+          index < steps.length - 1 && React.createElement("div", { className: classnames([
+            styles$9.stepDivider,
+            isCompletedStep && styles$9.completedStep
+          ]) })
+        )
+      );
+    })),
+    React.createElement(
+      Paragraph,
+      { classNameOverride: styles$9.stepperDescription, variant: "small", color: "white", id: "stepper-description" },
+      "Step ",
+      currentStepIndex + 1,
+      " of ",
+      steps.length
+    )
+  );
+};
+ProgressStepper.displayName = "Workflow.ProgressStepper";
+
+var styles$8 = {"footerAction":"FooterActions-module_footerAction__H-bdq","footerActionPrevious":"FooterActions-module_footerActionPrevious__yyzsX","footerActionNext":"FooterActions-module_footerActionNext__GIowc"};
+
+var FooterAction = function(_a) {
+  var _b = _a.actionType, actionType = _b === void 0 ? "Previous" : _b, action = _a.action, restProps = __rest(_a, ["actionType", "action"]);
+  return React.createElement("div", __assign({ className: classnames([
+    styles$8.footerAction,
+    styles$8["footerAction".concat(actionType)]
+  ]) }, restProps), action);
+};
+FooterAction.displayName = "Workflow.FooterActions";
+
+var Footer = function(_a) {
+  var steps = _a.steps, stepName = _a.stepName, isComplete = _a.isComplete, previousAction = _a.previousAction, nextAction = _a.nextAction, restProps = __rest(_a, ["steps", "stepName", "isComplete", "previousAction", "nextAction"]);
+  return React.createElement(
+    FooterRoot,
+    __assign({}, restProps),
+    React.createElement(FooterAction, { action: previousAction, actionType: "Previous" }),
+    React.createElement(ProgressStepper, { steps, stepName, isComplete }),
+    React.createElement(FooterAction, { action: nextAction, actionType: "Next" })
+  );
+};
+Footer.displayName = "Workflow.Footer";
+
+var styles$7 = {"titles":"Titles-module_titles__tO9dZ","pageTitle":"Titles-module_pageTitle__7-ui0","prefix":"Titles-module_prefix__vV-WW","status":"Titles-module_status__RvbTg"};
+
+var Titles = function(_a) {
+  var workflowName = _a.workflowName, stepName = _a.stepName, status = _a.status, restProps = __rest(_a, ["workflowName", "stepName", "status"]);
+  return React.createElement(
+    "div",
+    __assign({ className: styles$7.titles }, restProps),
+    React.createElement(
+      Heading,
+      { variant: "heading-1", tag: "h1", color: "dark", classNameOverride: styles$7.pageTitle },
+      React.createElement(
+        Heading,
+        { classNameOverride: styles$7.prefix, variant: "heading-6", tag: "span", color: "dark-reduced-opacity" },
+        workflowName,
+        React.createElement("span", { className: "sr-only" }, ":")
+      ),
+      React.createElement("span", null, stepName)
+    ),
+    status && // status may need to be update by a fetch
+    React.createElement(
+      "div",
+      { className: styles$7.status },
+      React.createElement(Tag, { inline: true, variant: (status === null || status === void 0 ? void 0 : status.variant) || "statusDraft" }, status === null || status === void 0 ? void 0 : status.content)
+    )
+  );
+};
+Titles.displayName = "Workflow.Titles";
+
+var styles$6 = {"actions":"Actions-module_actions__2Zdtd"};
+
+var Actions = function(_a) {
+  var headerActions = _a.headerActions, restProps = __rest(_a, ["headerActions"]);
+  return React.createElement("div", __assign({ className: styles$6.actions }, restProps), headerActions === null || headerActions === void 0 ? void 0 : headerActions.map(function(action, index) {
+    return React.createElement(action.type, __assign({ key: "header-actions ".concat(index) }, action.props));
+  }));
+};
+Actions.displayName = "Workflow.Actions";
+
+var styles$5 = {"branding":"Branding-module_branding__Oayqr","logo":"Branding-module_logo__rTXU9"};
+
+var Branding = function(_a) {
+  var _b = _a.variant, variant = _b === void 0 ? "logo-horizontal" : _b, alt = _a.alt;
+  return React.createElement(
+    "div",
+    { className: styles$5.branding },
+    React.createElement(Brand, { classNameOverride: styles$5.logo, variant, alt })
+  );
+};
+Branding.displayName = "Workflow.Branding";
+
+var styles$4 = {"root":"Root-module_root__cfRZi"};
+
+var HeaderRoot = function(_a) {
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+  return React.createElement("header", __assign({ className: classnames(styles$4.root, classNameOverride) }, restProps), children);
+};
+HeaderRoot.displayName = "Workflow.HeaderRoot";
+
+var Header = function(_a) {
+  var workflowName = _a.workflowName, stepName = _a.stepName, status = _a.status, headerActions = _a.headerActions, restProps = __rest(_a, ["workflowName", "stepName", "status", "headerActions"]);
+  return React.createElement(
+    HeaderRoot,
+    __assign({}, restProps),
+    React.createElement(Branding, { alt: "Cultureamp" }),
+    React.createElement(Titles, { workflowName, stepName, status }),
+    React.createElement(Actions, { headerActions })
+  );
+};
+Header.displayName = "Workflow.Header";
+
+var styles$3 = {"main":"Main-module_main__H-zGJ"};
+
+var Main = function(_a) {
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+  return React.createElement("main", __assign({ className: classnames([styles$3.main, classNameOverride]) }, restProps), children);
+};
+Main.displayName = "Workflow.Main";
+
+var styles$2 = {"wrapper":"Wrapper-module_wrapper__EUUEZ"};
+
+var Wrapper = function(_a) {
+  var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+  return React.createElement("div", __assign({ className: classnames(styles$2.wrapper, classNameOverride) }, restProps), children);
+};
+Wrapper.displayName = "Workflow.Wrapper";
+
+var WorkflowComponent = function(_a) {
+  var stepName = _a.stepName, steps = _a.steps, isComplete = _a.isComplete, workflowName = _a.workflowName, status = _a.status, headerActions = _a.headerActions, children = _a.children, nextAction = _a.nextAction, previousAction = _a.previousAction, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["stepName", "steps", "isComplete", "workflowName", "status", "headerActions", "children", "nextAction", "previousAction", "classNameOverride"]);
+  return React.createElement(
+    Workflow.Wrapper,
+    __assign({ classNameOverride }, restProps),
+    React.createElement(Workflow.Header, { workflowName, stepName, status, headerActions }),
+    React.createElement(Workflow.Main, null, children),
+    React.createElement(Workflow.Footer, { stepName, steps, isComplete, nextAction, previousAction })
+  );
+};
+var Workflow = Object.assign(WorkflowComponent, {
+  Header,
+  Footer,
+  Main,
+  ProgressStepper,
+  Wrapper
+});
+
+var styles$1 = {"body":"BrandMoment-module_body__J4lls","informative":"BrandMoment-module_informative__Qvwcd","positive":"BrandMoment-module_positive__78wqJ","negative":"BrandMoment-module_negative__atXal","container":"BrandMoment-module_container__4ORHI","header":"BrandMoment-module_header__EAP5Q","main":"BrandMoment-module_main__cdWko","mainInner":"BrandMoment-module_mainInner__xsFA6","left":"BrandMoment-module_left__ZHJiM","leftInner":"BrandMoment-module_leftInner__TY5DY","right":"BrandMoment-module_right__B-PR2","rightInner":"BrandMoment-module_rightInner__XvQ5Y","subtitle":"BrandMoment-module_subtitle__z9PL8","title":"BrandMoment-module_title__GrdAR","textBody":"BrandMoment-module_textBody__W6LvQ","secondaryAction":"BrandMoment-module_secondaryAction__d18oJ","actions":"BrandMoment-module_actions__Z3NrK","footer":"BrandMoment-module_footer__vSeX1","footerInner":"BrandMoment-module_footerInner__Wt9Rt","poweredByContainer":"BrandMoment-module_poweredByContainer__OkhVN","footerTextContainer":"BrandMoment-module_footerTextContainer__8iin9","poweredByLogo":"BrandMoment-module_poweredByLogo__w6M7o"};
+
+var BrandMoment = function(_a) {
+  var mood = _a.mood, illustration = _a.illustration, header = _a.header, body = _a.body, primaryAction = _a.primaryAction, secondaryAction = _a.secondaryAction, text = _a.text, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["mood", "illustration", "header", "body", "primaryAction", "secondaryAction", "text", "classNameOverride"]);
+  var queries = useMediaQueries().queries;
+  return React.createElement(
+    "div",
+    __assign({ className: classnames(styles$1.body, styles$1[mood], classNameOverride) }, restProps),
+    React.createElement("header", { className: styles$1.header }, header),
+    React.createElement(
+      "main",
+      { className: styles$1.main },
+      React.createElement(
+        "div",
+        { className: styles$1.container },
+        React.createElement(
+          "div",
+          { className: styles$1.mainInner },
+          React.createElement(
+            "div",
+            { className: styles$1.left },
+            React.createElement("div", { className: styles$1.leftInner }, illustration)
+          ),
+          React.createElement(
+            "div",
+            { className: styles$1.right },
+            React.createElement(
+              "div",
+              { className: styles$1.rightInner },
+              text.subtitle && React.createElement(Heading, { variant: "heading-3", tag: "h1", classNameOverride: styles$1.subtitle }, text.subtitle),
+              React.createElement(Heading, { variant: "display-0", tag: text.subtitle ? "h2" : "h1", classNameOverride: styles$1.title }, text.title),
+              text.body && React.createElement(Paragraph, { variant: "intro-lede", classNameOverride: styles$1.textBody }, text.body),
+              body && React.createElement("div", { className: styles$1.textBody }, body),
+              React.createElement(
+                "div",
+                { className: styles$1.actions },
+                primaryAction && React.createElement(Button, __assign({ primary: true, fullWidth: queries.isSmall }, primaryAction)),
+                secondaryAction && React.createElement(
+                  "div",
+                  { className: styles$1.secondaryAction },
+                  React.createElement(Button, __assign({ secondary: true, fullWidth: queries.isSmall }, secondaryAction))
+                )
+              )
+            )
+          )
+        )
+      )
+    ),
+    text.footer && React.createElement(
+      "footer",
+      { className: styles$1.footer },
+      React.createElement(
+        "div",
+        { className: styles$1.container },
+        React.createElement(
+          "div",
+          { className: styles$1.footerInner },
+          React.createElement(
+            "div",
+            { className: styles$1.poweredByContainer },
+            React.createElement(Paragraph, { variant: "extra-small", color: "dark-reduced-opacity" }, "Powered by"),
+            React.createElement(
+              "a",
+              { href: "https://www.cultureamp.com", className: styles$1.poweredByLogo },
+              React.createElement("img", { src: assetUrl("brand/logo-horizontal-default.svg"), alt: "Culture Amp" })
+            )
+          ),
+          React.createElement(
+            "div",
+            { className: styles$1.footerTextContainer },
+            React.createElement(Paragraph, { variant: "extra-small" }, text.footer)
+          )
+        )
+      )
+    )
+  );
+};
+BrandMoment.displayName = "BrandMoment";
+
+var ArrowRightIcon = function(props) {
+  return React.createElement(
+    SVG,
+    __assign({}, props),
+    React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "m12.5 5-1.179 1.179 2.987 2.987H2.5v1.667h11.808l-2.987 2.988L12.5 15l5-5.001z" })
+  );
+};
+ArrowRightIcon.displayName = "ArrowRightIcon";
+
+var EmailIcon = function(props) {
+  return React.createElement(
+    SVG,
+    __assign({}, props),
+    React.createElement("path", { fill: "currentColor", fillRule: "nonzero", d: "M16.4 3.5H3.6c-.88 0-1.592.72-1.592 1.6L2 14.7c0 .88.72 1.6 1.6 1.6h12.8c.88 0 1.6-.72 1.6-1.6V5.1c0-.88-.72-1.6-1.6-1.6Zm0 3.2-6.4 4-6.4-4V5.1l6.4 4 6.4-4v1.6Z" })
+  );
+};
+EmailIcon.displayName = "EmailIcon";
+
+var useErrorMessages = function(code) {
+  var formatMessage = useIntl().formatMessage;
+  var translationsMap = {
+    400: {
+      title: formatMessage({
+        id: "kzErrorPage.400.title",
+        defaultMessage: "Your request has slipped into the void",
+        description: "Heading for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.400.message",
+        defaultMessage: "Sorry but your request couldn\u2019t be completed. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    401: {
+      title: formatMessage({
+        id: "kzErrorPage.401.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.401.message",
+        defaultMessage: "Sorry but we can't verify if you're able to view this page. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    403: {
+      title: formatMessage({
+        id: "kzErrorPage.403.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title for page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.403.message",
+        defaultMessage: "Sorry but it looks like you don\u2019t have permission to view this page. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    404: {
+      title: formatMessage({
+        id: "kzErrorPage.404.title",
+        defaultMessage: "Missing pages are one of life's mysteries",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.404.message",
+        defaultMessage: "Sorry but we can't fing the page you're looking for. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    422: {
+      title: formatMessage({
+        id: "kzErrorPage.422.title",
+        defaultMessage: "Change never comes easy",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.422.message",
+        defaultMessage: "Sorry but your change couldn't be made. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    500: {
+      title: formatMessage({
+        id: "kzErrorPage.500.title",
+        defaultMessage: "Something's gone wrong on our side",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.500",
+        defaultMessage: "Sorry there's an issue with our system and this page can't be displayed. Go back and try again, or head to Home",
+        description: "Call to action instructions for the user"
+      })
+    },
+    502: {
+      title: formatMessage({
+        id: "kzErrorPage.502.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.502.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    },
+    503: {
+      title: formatMessage({
+        id: "kzErrorPage.503.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.503.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    },
+    504: {
+      title: formatMessage({
+        id: "kzErrorPage.504.title",
+        defaultMessage: "You can't view this page",
+        description: "Main title of page"
+      }),
+      message: formatMessage({
+        id: "kzErrorPage.504.message",
+        defaultMessage: "Sorry about this. The best thing to do is go back and try again.",
+        description: "Call to action instructions for the user"
+      })
+    }
+  };
+  return translationsMap[code] || {
+    title: "",
+    message: ""
+  };
+};
+
+var styles = {"paragraphPadding":"ErrorPage-module_paragraphPadding__-L-qy"};
+
+var getMailToHref = function(code) {
+  var supportEmail = "support@cultureamp.com";
+  var subject = "Houston we have a problem";
+  var body = "Hi there,\n\nI received a ".concat(code, " error page while I was trying to...");
+  return encodeURI("mailto:".concat(supportEmail, "?subject=").concat(subject, "&amp;body=").concat(body));
+};
+var HOME_HREF = "/app/home";
+function ErrorPage(_a) {
+  var code = _a.code, title = _a.title, message = _a.message, callToAction = _a.callToAction, classNameOverride = _a.classNameOverride;
+  var formatMessage = useIntl().formatMessage;
+  var content = useErrorMessages(code);
+  var actions = {
+    primary: { href: (callToAction === null || callToAction === void 0 ? void 0 : callToAction.homeHref) || HOME_HREF },
+    secondary: (callToAction === null || callToAction === void 0 ? void 0 : callToAction.onContactSupport) ? { onClick: callToAction.onContactSupport } : { href: getMailToHref(code) }
+  };
+  return React.createElement(
+    "div",
+    { className: classnames(classNameOverride) },
+    React.createElement(BrandMoment, { header: React.createElement(React.Fragment, null), body: React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(
+        "div",
+        { className: styles.paragraphPadding },
+        React.createElement(Paragraph, { variant: "intro-lede" }, message || content.message)
+      ),
+      React.createElement(
+        Paragraph,
+        { color: "dark-reduced-opacity", variant: "small" },
+        React.createElement(FormattedMessage, { id: "kzErrorPage.errorCode", defaultMessage: "Error code {code}", values: { code } })
+      )
+    ), illustration: React.createElement(BrandMomentError, { isAnimated: true, loop: true }), mood: "negative", primaryAction: __assign(__assign({}, actions.primary), { icon: React.createElement(ArrowRightIcon, { role: "presentation" }), iconPosition: "end", label: formatMessage({
+      id: "kzErrorPage.goToHome",
+      defaultMessage: "Go to Home",
+      description: "Home button label"
+    }) }), secondaryAction: __assign(__assign({}, actions.secondary), { icon: React.createElement(EmailIcon, { role: "presentation" }), label: formatMessage({
+      id: "kzErrorPage",
+      defaultMessage: "Contact support",
+      description: "Label for contact button"
+    }) }), text: {
+      title: title || content.title
+    } })
+  );
+}
+ErrorPage.displayName = "ErrorPage";
+
+export { Button, ClearButton$1 as ClearButton, ErrorPage, Filter, FilterBar, FilterBarProvider, FilterButton, FilterButtonRemovable, FilterContents, FilterDatePicker, FilterDatePickerField, FilterDateRangePicker, FilterMultiSelect, FilterSelect, InputSearch, KaizenProvider, MenuTriggerConsumer, MenuTriggerProvider, SelectionConsumer, SelectionProvider, ThemeContext, ThemeManager, ThemeProvider, Workflow, defaultTheme, getDateValidationHandler, getSelectedOptionKeys, getSelectedOptionLabels, getTruncatedLabels, heartTheme, useDateValidation, useFilterBarContext, useMenuTriggerContext, useSelectionContext, useTheme, validateDate };
+//# sourceMappingURL=index.js.map