@danske/sapphire-react-lab 0.88.1 → 0.90.2

package/build/cjs/index.js

@@ -3,55 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var utils = require('@react-spectrum/utils');
-var focus = require('@react-aria/focus');
-var utils$1 = require('@react-aria/utils');
-var button = require('@react-aria/button');
-var interactions = require('@react-aria/interactions');
-var toggle = require('@react-stately/toggle');
-var clsx = require('clsx');
-var styles = require('@danske/sapphire-css/components/button/button.module.css');
+var visuallyHidden = require('@react-aria/visually-hidden');
+var utils = require('@react-stately/utils');
 var sapphireReact = require('@danske/sapphire-react');
-var date = require('@internationalized/date');
-var calendar = require('@react-aria/calendar');
-var styles$1 = require('@danske/sapphire-css/components/calendar/calendar.module.css');
-var i18n = require('@react-aria/i18n');
-var calendar$1 = require('@react-stately/calendar');
-var utils$2 = require('@react-stately/utils');
 var react = require('@danske/sapphire-icons/react');
-var reactTransitionGroup = require('react-transition-group');
-var styles$2 = require('@danske/sapphire-css/components/notificationBadge/notificationBadge.module.css');
-var visuallyHidden = require('@react-aria/visually-hidden');
-var datepicker = require('@react-aria/datepicker');
-var datepicker$1 = require('@react-stately/datepicker');
-var styles$3 = require('@danske/sapphire-css/components/dateField/dateField.module.css');
-var string = require('@internationalized/string');
-var dialog = require('@react-aria/dialog');
-var styles$5 = require('@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css');
-var styles$4 = require('@danske/sapphire-css/components/avatar/avatar.module.css');
-var searchfield$1 = require('@react-aria/searchfield');
-var styles$6 = require('@danske/sapphire-css/components/searchField/searchField.module.css');
-var searchfield = require('@react-stately/searchfield');
-var combobox = require('@react-stately/combobox');
-var combobox$1 = require('@react-aria/combobox');
-var toast$1 = require('@react-stately/toast');
-var toast = require('@react-aria/toast');
-var styles$7 = require('@danske/sapphire-css/components/toast/toast.module.css');
-var styles$8 = require('@danske/sapphire-css/components/accordion/accordion.module.css');
+var clsx = require('clsx');
 var accordion = require('@react-aria/accordion');
-var tree = require('@react-stately/tree');
+var utils$1 = require('@react-aria/utils');
+var styles = require('@danske/sapphire-css/components/accordion/accordion.module.css');
+var focus = require('@react-aria/focus');
+var interactions = require('@react-aria/interactions');
 var collections = require('@react-stately/collections');
-var styles$9 = require('@danske/sapphire-css/components/text/text.module.css');
-var label = require('@react-aria/label');
-var styles$a = require('@danske/sapphire-css/components/dropzone/dropzone.module.css');
+var tree = require('@react-stately/tree');
+var styles$1 = require('@danske/sapphire-css/components/dropzone/dropzone.module.css');
 var dnd = require('@react-aria/dnd');
+var i18n = require('@react-aria/i18n');
+var utils$2 = require('@react-spectrum/utils');
+var textFieldStyles = require('@danske/sapphire-css/components/textField/textField.module.css');
 var numberfield$1 = require('@react-aria/numberfield');
 var numberfield = require('@react-stately/numberfield');
-var textFieldStyles = require('@danske/sapphire-css/components/textField/textField.module.css');
 var tag = require('@react-aria/tag');
 var list = require('@react-stately/list');
-var styles$b = require('@danske/sapphire-css/components/tag/tag.module.css');
-var styles$c = require('@danske/sapphire-css/components/labeledValue/labeledValue.module.css');
+var styles$2 = require('@danske/sapphire-css/components/tag/tag.module.css');
+var button = require('@react-aria/button');
+var label = require('@react-aria/label');
+var styles$3 = require('@danske/sapphire-css/components/labeledValue/labeledValue.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -59,1156 +35,37 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 var styles__default$1 = /*#__PURE__*/_interopDefaultLegacy(styles$1);
+var textFieldStyles__default = /*#__PURE__*/_interopDefaultLegacy(textFieldStyles);
 var styles__default$2 = /*#__PURE__*/_interopDefaultLegacy(styles$2);
 var styles__default$3 = /*#__PURE__*/_interopDefaultLegacy(styles$3);
-var styles__default$5 = /*#__PURE__*/_interopDefaultLegacy(styles$5);
-var styles__default$4 = /*#__PURE__*/_interopDefaultLegacy(styles$4);
-var styles__default$6 = /*#__PURE__*/_interopDefaultLegacy(styles$6);
-var styles__default$7 = /*#__PURE__*/_interopDefaultLegacy(styles$7);
-var styles__default$8 = /*#__PURE__*/_interopDefaultLegacy(styles$8);
-var styles__default$9 = /*#__PURE__*/_interopDefaultLegacy(styles$9);
-var styles__default$a = /*#__PURE__*/_interopDefaultLegacy(styles$a);
-var textFieldStyles__default = /*#__PURE__*/_interopDefaultLegacy(textFieldStyles);
-var styles__default$b = /*#__PURE__*/_interopDefaultLegacy(styles$b);
-var styles__default$c = /*#__PURE__*/_interopDefaultLegacy(styles$c);
-
-var __defProp$J = Object.defineProperty;
-var __defProps$F = Object.defineProperties;
-var __getOwnPropDescs$F = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$K = Object.getOwnPropertySymbols;
-var __hasOwnProp$K = Object.prototype.hasOwnProperty;
-var __propIsEnum$K = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$J = (obj, key, value) => key in obj ? __defProp$J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$J = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$K.call(b, prop))
-      __defNormalProp$J(a, prop, b[prop]);
-  if (__getOwnPropSymbols$K)
-    for (var prop of __getOwnPropSymbols$K(b)) {
-      if (__propIsEnum$K.call(b, prop))
-        __defNormalProp$J(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$F = (a, b) => __defProps$F(a, __getOwnPropDescs$F(b));
-var __objRest$v = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$K.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$K)
-    for (var prop of __getOwnPropSymbols$K(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$K.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const ToggleButton = React__default["default"].forwardRef(function Button(_a, ref) {
-  var _b = _a, {
-    iconAlign = "left",
-    icon,
-    size = "medium"
-  } = _b, otherProps = __objRest$v(_b, [
-    "iconAlign",
-    "icon",
-    "size"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { autoFocus, isDisabled } = otherProps;
-  const domRef = utils.useFocusableRef(ref);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
-  const { styleProps } = sapphireReact.useSapphireStyleProps(otherProps);
-  const iconWrapper = icon && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: clsx__default["default"](styles__default["default"]["sapphire-button__icon"])
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: size === "small" ? "s" : size === "medium" ? "m" : "l"
-  }, icon));
-  const state = toggle.useToggleState(otherProps);
-  const { buttonProps, isPressed } = button.useToggleButton(otherProps, state, domRef);
-  sapphireReact.usePreventTouchEnd(domRef);
-  return /* @__PURE__ */ React__default["default"].createElement(focus.FocusRing, {
-    focusRingClass: clsx__default["default"](styles__default["default"]["is-focus"]),
-    autoFocus
-  }, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$F(__spreadValues$J({}, utils$1.mergeProps(buttonProps, hoverProps)), {
-    ref: domRef,
-    style: __spreadValues$J({}, styleProps.style),
-    className: clsx__default["default"](styles__default["default"]["sapphire-button"], styles__default["default"]["js-focus"], styles__default["default"]["js-hover"], {
-      [styles__default["default"]["is-active"]]: isPressed,
-      [styles__default["default"]["is-hover"]]: isHovered,
-      [styles__default["default"]["is-disabled"]]: isDisabled,
-      [styles__default["default"]["sapphire-button--small"]]: size === "small",
-      [styles__default["default"]["sapphire-button--large"]]: size === "large",
-      [styles__default["default"]["sapphire-button--with-left-icon"]]: icon && iconAlign === "left",
-      [styles__default["default"]["sapphire-button--with-right-icon"]]: icon && iconAlign === "right"
-    }, state.isSelected ? styles__default["default"]["sapphire-button--selected"] : styles__default["default"]["sapphire-button--unselected"], styleProps.className)
-  }), iconAlign === "left" && iconWrapper, otherProps.children, iconAlign === "right" && iconWrapper));
-});
-
-var year$6 = "År";
-var week$6 = "Uge {weekNumber}";
-var da$3 = {
-	year: year$6,
-	week: week$6
-};
-
-var year$5 = "Year";
-var week$5 = "Week {weekNumber}";
-var en$3 = {
-	year: year$5,
-	week: week$5
-};
-
-var year$4 = "Jahr";
-var week$4 = "Woche {weekNumber}";
-var de$3 = {
-	year: year$4,
-	week: week$4
-};
-
-var year$3 = "Vuosi";
-var week$3 = "Viikko {weekNumber}";
-var fi$3 = {
-	year: year$3,
-	week: week$3
-};
-
-var year$2 = "År";
-var week$2 = "Uke {weekNumber}";
-var no$3 = {
-	year: year$2,
-	week: week$2
-};
-
-var year$1 = "Rok";
-var week$1 = "Tydzień {weekNumber}";
-var pl$3 = {
-	year: year$1,
-	week: week$1
-};
-
-var year = "År";
-var week = "Vecka {weekNumber}";
-var se$3 = {
-	year: year,
-	week: week
-};
-
-var intlMessages$3 = {
-  "da-DK": da$3,
-  "en-US": en$3,
-  "de-DE": de$3,
-  "fi-FI": fi$3,
-  "no-NO": no$3,
-  "pl-PL": pl$3,
-  "sv-SE": se$3
-};
-
-var __defProp$I = Object.defineProperty;
-var __defProps$E = Object.defineProperties;
-var __getOwnPropDescs$E = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$J = Object.getOwnPropertySymbols;
-var __hasOwnProp$J = Object.prototype.hasOwnProperty;
-var __propIsEnum$J = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$I = (obj, key, value) => key in obj ? __defProp$I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$I = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$J.call(b, prop))
-      __defNormalProp$I(a, prop, b[prop]);
-  if (__getOwnPropSymbols$J)
-    for (var prop of __getOwnPropSymbols$J(b)) {
-      if (__propIsEnum$J.call(b, prop))
-        __defNormalProp$I(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$E = (a, b) => __defProps$E(a, __getOwnPropDescs$E(b));
-var __objRest$u = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$J.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$J)
-    for (var prop of __getOwnPropSymbols$J(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$J.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const CalendarButton = React__default["default"].forwardRef(function SapphireCalendarButton(_a, forwardedRef) {
-  var _b = _a, {
-    children,
-    className = "",
-    isSelected,
-    isDisabled,
-    isInGridCell,
-    hasCurrentIndicator
-  } = _b, otherProps = __objRest$u(_b, [
-    "children",
-    "className",
-    "isSelected",
-    "isDisabled",
-    "isInGridCell",
-    "hasCurrentIndicator"
-  ]);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
-  const ElementType = isInGridCell ? "span" : "button";
-  return /* @__PURE__ */ React__default["default"].createElement(focus.FocusRing, {
-    focusRingClass: styles__default$1["default"]["is-focus"]
-  }, /* @__PURE__ */ React__default["default"].createElement(ElementType, __spreadProps$E(__spreadValues$I(__spreadValues$I({
-    ref: forwardedRef,
-    role: "button"
-  }, ElementType === "button" ? { type: "button" } : {}), utils$1.mergeProps(otherProps, hoverProps)), {
-    className: clsx__default["default"](className, styles__default$1["default"]["js-focus"], styles__default$1["default"]["js-hover"], styles__default$1["default"]["sapphire-calendar__button"], {
-      [styles__default$1["default"][`sapphire-calendar__button--selected`]]: isSelected,
-      [styles__default$1["default"]["sapphire-calendar__button--current"]]: hasCurrentIndicator,
-      [styles__default$1["default"][`is-hover`]]: isHovered,
-      [styles__default$1["default"][`is-disabled`]]: isDisabled
-    })
-  }), /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: styles__default$1["default"]["sapphire-calendar__button-text"]
-  }, children)));
-});
-const CalendarDayButton = React__default["default"].forwardRef(function SapphireCalendarDayButton(_c, forwardedRef) {
-  var _d = _c, {
-    isOutsideVisibleRange,
-    rangeHighlight
-  } = _d, props = __objRest$u(_d, [
-    "isOutsideVisibleRange",
-    "rangeHighlight"
-  ]);
-  return /* @__PURE__ */ React__default["default"].createElement(CalendarButton, __spreadProps$E(__spreadValues$I({}, props), {
-    isInGridCell: true,
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__button--day"], {
-      [styles__default$1["default"]["sapphire-calendar__button--range-selection"]]: rangeHighlight.highlighted,
-      [styles__default$1["default"]["sapphire-calendar__button--range-start"]]: rangeHighlight.highlighted && rangeHighlight.start,
-      [styles__default$1["default"]["sapphire-calendar__button--range-end"]]: rangeHighlight.highlighted && rangeHighlight.end,
-      [styles__default$1["default"]["sapphire-calendar__button--selection-start"]]: rangeHighlight.highlighted && rangeHighlight.start && props.isSelected,
-      [styles__default$1["default"]["sapphire-calendar__button--selection-end"]]: rangeHighlight.highlighted && rangeHighlight.end && props.isSelected,
-      [styles__default$1["default"]["sapphire-calendar__button--outside-month"]]: isOutsideVisibleRange
-    }),
-    ref: forwardedRef
-  }));
-});
-
-function range(start, end) {
-  return Array(end - start + 1).fill(null).map((_, index) => start + index);
-}
-function* chunks(array, chunkSize) {
-  for (let i = 0; i < array.length; i += chunkSize) {
-    yield array.slice(i, i + chunkSize);
-  }
-}
-const sentenceCase = (sentence) => sentence.slice(0, 1).toLocaleUpperCase() + sentence.slice(1);
-
-var __defProp$H = Object.defineProperty;
-var __defProps$D = Object.defineProperties;
-var __getOwnPropDescs$D = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$I = Object.getOwnPropertySymbols;
-var __hasOwnProp$I = Object.prototype.hasOwnProperty;
-var __propIsEnum$I = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$H = (obj, key, value) => key in obj ? __defProp$H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$H = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$I.call(b, prop))
-      __defNormalProp$H(a, prop, b[prop]);
-  if (__getOwnPropSymbols$I)
-    for (var prop of __getOwnPropSymbols$I(b)) {
-      if (__propIsEnum$I.call(b, prop))
-        __defNormalProp$H(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$D = (a, b) => __defProps$D(a, __getOwnPropDescs$D(b));
-var __objRest$t = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$I.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$I)
-    for (var prop of __getOwnPropSymbols$I(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$I.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function CalendarDaysGrid(_a) {
-  var _b = _a, {
-    state,
-    startDate = state.visibleRange.start,
-    showWeekNumbers
-  } = _b, props = __objRest$t(_b, [
-    "state",
-    "startDate",
-    "showWeekNumbers"
-  ]);
-  const { locale } = i18n.useLocale();
-  const { gridProps, headerProps } = calendar.useCalendarGrid(__spreadProps$D(__spreadValues$H({}, props), {
-    startDate,
-    endDate: date.endOfMonth(startDate)
-  }), state);
-  const weeksInMonth = date.getWeeksInMonth(startDate, locale);
-  const dayFormatter = i18n.useDateFormatter({
-    weekday: "short",
-    timeZone: state.timeZone
-  });
-  const weekDays = React.useMemo(() => {
-    const weekStart = date.startOfWeek(date.today(state.timeZone), locale);
-    return [...new Array(7).keys()].map((index) => {
-      const date = weekStart.add({ days: index });
-      const dateDay = date.toDate(state.timeZone);
-      return dayFormatter.format(dateDay);
-    });
-  }, [locale, state.timeZone, dayFormatter]);
-  return /* @__PURE__ */ React__default["default"].createElement("table", __spreadProps$D(__spreadValues$H({}, gridProps), {
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__table"], {
-      [styles__default$1["default"]["sapphire-calendar__table--with-week-numbers"]]: showWeekNumbers
-    })
-  }), /* @__PURE__ */ React__default["default"].createElement("thead", __spreadValues$H({}, headerProps), /* @__PURE__ */ React__default["default"].createElement("tr", null, showWeekNumbers && /* @__PURE__ */ React__default["default"].createElement("th", {
-    className: styles__default$1["default"]["sapphire-calendar__table-head-cell"],
-    "aria-hidden": "true"
-  }, /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: styles__default$1["default"]["sapphire-calendar__week-number"]
-  }, "#")), weekDays.map((day, index) => /* @__PURE__ */ React__default["default"].createElement("th", {
-    key: index,
-    className: styles__default$1["default"]["sapphire-calendar__table-head-cell"]
-  }, /* @__PURE__ */ React__default["default"].createElement("abbr", {
-    className: styles__default$1["default"]["sapphire-calendar__day-of-week"]
-  }, sentenceCase(day)))))), /* @__PURE__ */ React__default["default"].createElement("tbody", null, [...new Array(weeksInMonth).keys()].map((weekIndex) => {
-    return /* @__PURE__ */ React__default["default"].createElement("tr", {
-      className: styles__default$1["default"]["sapphire-calendar__table-body-row"],
-      key: weekIndex
-    }, showWeekNumbers && /* @__PURE__ */ React__default["default"].createElement(CalendarWeekNumberCell, {
-      date: startDate.add({ days: 7 * weekIndex })
-    }), state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ React__default["default"].createElement(CalendarCell, {
-      currentMonth: startDate,
-      key: date.toString(),
-      state,
-      date
-    }) : /* @__PURE__ */ React__default["default"].createElement("td", {
-      key: i
-    })));
-  }), /* @__PURE__ */ React__default["default"].createElement("tr", null)));
-}
-function CalendarWeekNumberCell({ date }) {
-  const weekNumber = getWeekNumber(date);
-  const formatMessage = i18n.useMessageFormatter(intlMessages$3);
-  return /* @__PURE__ */ React__default["default"].createElement("th", {
-    className: styles__default$1["default"]["sapphire-calendar__table-body-cell"],
-    role: "rowheader",
-    "aria-label": formatMessage("week", { weekNumber })
-  }, /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: styles__default$1["default"]["sapphire-calendar__week-number"]
-  }, weekNumber));
-}
-function CalendarCell({
-  state,
-  date: date$1,
-  currentMonth
-}) {
-  const ref = React__default["default"].useRef(null);
-  const { locale } = i18n.useLocale();
-  const sameMonth = date.isSameMonth(date$1, currentMonth);
-  const {
-    cellProps,
-    buttonProps,
-    isSelected: isInSelection,
-    isDisabled,
-    formattedDate,
-    isUnavailable
-  } = calendar.useCalendarCell({ date: date$1, isDisabled: !sameMonth }, state, ref);
-  const highlightedRange = "highlightedRange" in state ? state.highlightedRange : null;
-  const isSelected = isInSelection && (!highlightedRange || date.isSameDay(highlightedRange.start, date$1) || date.isSameDay(highlightedRange.end, date$1));
-  return /* @__PURE__ */ React__default["default"].createElement("td", __spreadProps$D(__spreadValues$H({}, cellProps), {
-    className: styles__default$1["default"]["sapphire-calendar__table-body-cell"]
-  }), /* @__PURE__ */ React__default["default"].createElement(CalendarDayButton, __spreadProps$D(__spreadValues$H({}, buttonProps), {
-    ref,
-    isSelected,
-    isDisabled: isDisabled || isUnavailable,
-    hasCurrentIndicator: date.today(state.timeZone).compare(date$1) === 0,
-    isOutsideVisibleRange: !date.isSameMonth(currentMonth, date$1),
-    rangeHighlight: highlightedRange ? getRangeHighlight({ date: date$1, highlightedRange, locale }) : { highlighted: false }
-  }), formattedDate));
-}
-const getRangeHighlight = ({
-  date: date$1,
-  highlightedRange,
-  locale
-}) => {
-  const isInSelection = !!highlightedRange && highlightedRange.start.compare(date$1) <= 0 && highlightedRange.end.compare(date$1) >= 0;
-  const rangeIsNotASingleDay = !!highlightedRange && !date.isSameDay(highlightedRange.start, highlightedRange.end);
-  const isStartOfWeek = date.getDayOfWeek(date$1, locale) === 0;
-  const isEndOfWeek = date.getDayOfWeek(date$1, locale) === 6;
-  const isStartOfMonth = date.isSameDay(date$1, date.startOfMonth(date$1));
-  const isEndOfMonth = date.isSameDay(date$1, date.endOfMonth(date$1));
-  const isStartOfRange = highlightedRange && date.isSameDay(highlightedRange == null ? void 0 : highlightedRange.start, date$1);
-  const isEndOfRange = highlightedRange && date.isSameDay(highlightedRange == null ? void 0 : highlightedRange.end, date$1);
-  const highlighted = isInSelection && rangeIsNotASingleDay;
-  return {
-    highlighted,
-    start: highlighted && (isStartOfWeek || isStartOfMonth || isStartOfRange),
-    end: highlighted && (isEndOfWeek || isEndOfMonth || isEndOfRange)
-  };
-};
-const getWeekNumber = function(dateValue) {
-  const date$1 = new Date(dateValue.toDate(date.getLocalTimeZone()));
-  date$1.setHours(0, 0, 0, 0);
-  date$1.setDate(date$1.getDate() + 3 - (date$1.getDay() + 6) % 7);
-  const week1 = new Date(date$1.getFullYear(), 0, 4);
-  return 1 + Math.round(((date$1.getTime() - week1.getTime()) / 864e5 - 3 + (week1.getDay() + 6) % 7) / 7);
-};
-
-var __defProp$G = Object.defineProperty;
-var __defProps$C = Object.defineProperties;
-var __getOwnPropDescs$C = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
-var __hasOwnProp$H = Object.prototype.hasOwnProperty;
-var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$G = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$G = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$H.call(b, prop))
-      __defNormalProp$G(a, prop, b[prop]);
-  if (__getOwnPropSymbols$H)
-    for (var prop of __getOwnPropSymbols$H(b)) {
-      if (__propIsEnum$H.call(b, prop))
-        __defNormalProp$G(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$C = (a, b) => __defProps$C(a, __getOwnPropDescs$C(b));
-const isSame = { month: date.isSameMonth, year: date.isSameYear };
-function CalendarMonthOrYearCell({
-  date: date$1,
-  state,
-  isDisabled,
-  field,
-  children
-}) {
-  const ref = React__default["default"].useRef(null);
-  const isFocused = state.focusedDate[field] === date$1[field];
-  let tabIndex;
-  if (!isDisabled) {
-    tabIndex = isSame[field](date$1, state.focusedDate) ? 0 : -1;
-  }
-  React.useEffect(() => {
-    if (isFocused && ref.current) {
-      utils$1.focusWithoutScrolling(ref.current);
-    }
-  }, [isFocused, ref]);
-  const { pressProps } = interactions.usePress({
-    isDisabled: state.isDisabled || isDisabled,
-    onPress: () => {
-      state.setFocusedDate(date$1);
-      if (!state.isReadOnly) {
-        state.narrowView();
-      }
-    }
-  });
-  const buttonProps = utils$1.mergeProps(pressProps, {
-    onFocus() {
-      if (!isDisabled) {
-        state.setFocusedDate(date$1);
-      }
-    },
-    tabIndex,
-    role: "button",
-    "aria-disabled": isDisabled || void 0
-  });
-  return /* @__PURE__ */ React__default["default"].createElement("td", {
-    className: styles__default$1["default"]["sapphire-calendar__table-body-cell"],
-    role: "gridcell"
-  }, /* @__PURE__ */ React__default["default"].createElement(CalendarButton, __spreadProps$C(__spreadValues$G({
-    ref
-  }, buttonProps), {
-    isInGridCell: true,
-    isSelected: !!state.value && isSame[field](state.value, date$1),
-    isDisabled: state.isDisabled || isDisabled,
-    hasCurrentIndicator: isSame[field](date$1, date.today(state.timeZone))
-  }), children));
-}
-
-function useCustomDurationCalendarGrid({
-  cellsDuration,
-  perRow = 3
-}, state) {
-  const { direction } = i18n.useLocale();
-  const onKeyDown = (e) => {
-    switch (e.key) {
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        state.selectFocusedDate();
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        e.stopPropagation();
-        if (direction === "rtl") {
-          state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: 1 }));
-        } else {
-          state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: -1 }));
-        }
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        e.stopPropagation();
-        state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: -perRow }));
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        e.stopPropagation();
-        if (direction === "rtl") {
-          state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: -1 }));
-        } else {
-          state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: 1 }));
-        }
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        e.stopPropagation();
-        state.setFocusedDate(state.focusedDate.add({ [cellsDuration]: perRow }));
-        break;
-    }
-  };
-  const gridProps = {
-    role: "grid",
-    "aria-readonly": state.isReadOnly || void 0,
-    "aria-disabled": state.isDisabled || void 0,
-    onKeyDown,
-    onFocus: () => state.setFocused(true),
-    onBlur: () => state.setFocused(false)
-  };
-  return { gridProps };
-}
-
-var __defProp$F = Object.defineProperty;
-var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
-var __hasOwnProp$G = Object.prototype.hasOwnProperty;
-var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$F = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$G.call(b, prop))
-      __defNormalProp$F(a, prop, b[prop]);
-  if (__getOwnPropSymbols$G)
-    for (var prop of __getOwnPropSymbols$G(b)) {
-      if (__propIsEnum$G.call(b, prop))
-        __defNormalProp$F(a, prop, b[prop]);
-    }
-  return a;
-};
-function CalendarMonthsGrid({
-  state
-}) {
-  const formatter = i18n.useDateFormatter({
-    month: "long",
-    timeZone: state.timeZone
-  });
-  const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
-  const months = range(1, numMonths).map((month) => formatter.format(state.focusedDate.set({ month }).toDate(state.timeZone)));
-  const monthRows = [...chunks(months, 3)];
-  const { gridProps } = useCustomDurationCalendarGrid({ cellsDuration: "months" }, state);
-  return /* @__PURE__ */ React__default["default"].createElement("table", __spreadValues$F({
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__table"], styles__default$1["default"]["sapphire-calendar__table--month-year"])
-  }, gridProps), /* @__PURE__ */ React__default["default"].createElement("tbody", null, monthRows.map((currentRowMonths, rowIndex) => /* @__PURE__ */ React__default["default"].createElement("tr", {
-    key: rowIndex,
-    className: styles__default$1["default"]["sapphire-calendar__table-body-row"]
-  }, currentRowMonths.map((month, index) => {
-    const newFocusedDate = state.focusedDate.set({
-      month: months.indexOf(month) + 1
-    });
-    const isMonthDisabled = state.isInvalid(date.startOfMonth(newFocusedDate)) && state.isInvalid(date.endOfMonth(newFocusedDate));
-    return /* @__PURE__ */ React__default["default"].createElement(CalendarMonthOrYearCell, {
-      key: index,
-      date: newFocusedDate,
-      field: "month",
-      isDisabled: isMonthDisabled,
-      state
-    }, sentenceCase(month));
-  })))));
-}
-
-var __defProp$E = Object.defineProperty;
-var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
-var __hasOwnProp$F = Object.prototype.hasOwnProperty;
-var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$E = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$F.call(b, prop))
-      __defNormalProp$E(a, prop, b[prop]);
-  if (__getOwnPropSymbols$F)
-    for (var prop of __getOwnPropSymbols$F(b)) {
-      if (__propIsEnum$F.call(b, prop))
-        __defNormalProp$E(a, prop, b[prop]);
-    }
-  return a;
-};
-function CalendarYearsGrid({
-  state
-}) {
-  const years = range(state.visibleRange.start.year, state.visibleRange.end.year).slice(0, 12);
-  const yearRows = [...chunks(years, 3)];
-  const { gridProps } = useCustomDurationCalendarGrid({ cellsDuration: "years" }, state);
-  return /* @__PURE__ */ React__default["default"].createElement("table", __spreadValues$E({
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__table"], styles__default$1["default"]["sapphire-calendar__table--month-year"])
-  }, gridProps), /* @__PURE__ */ React__default["default"].createElement("tbody", null, yearRows.map((currentRowYears, rowIndex) => /* @__PURE__ */ React__default["default"].createElement("tr", {
-    key: rowIndex,
-    className: styles__default$1["default"]["sapphire-calendar__table-body-row"]
-  }, currentRowYears.map((year, index) => {
-    const newFocusedDate = state.focusedDate.set({
-      year
-    });
-    const isYearDisabled = state.isInvalid(date.startOfYear(newFocusedDate)) && state.isInvalid(date.endOfYear(newFocusedDate));
-    return /* @__PURE__ */ React__default["default"].createElement(CalendarMonthOrYearCell, {
-      key: index,
-      date: newFocusedDate,
-      field: "year",
-      isDisabled: isYearDisabled,
-      state
-    }, year);
-  })))));
-}
-
-var __defProp$D = Object.defineProperty;
-var __defProps$B = Object.defineProperties;
-var __getOwnPropDescs$B = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
-var __hasOwnProp$E = Object.prototype.hasOwnProperty;
-var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$D = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$E.call(b, prop))
-      __defNormalProp$D(a, prop, b[prop]);
-  if (__getOwnPropSymbols$E)
-    for (var prop of __getOwnPropSymbols$E(b)) {
-      if (__propIsEnum$E.call(b, prop))
-        __defNormalProp$D(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$B = (a, b) => __defProps$B(a, __getOwnPropDescs$B(b));
-var __objRest$s = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$E.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$E)
-    for (var prop of __getOwnPropSymbols$E(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$E.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const viewToVisibleDuration = {
-  days: {
-    months: 1
-  },
-  months: {
-    years: 1
-  },
-  years: {
-    years: 12
-  }
-};
-function useSapphireCalendarState(_a) {
-  var _b = _a, {
-    view: viewProp,
-    defaultView = "days",
-    onViewChange
-  } = _b, otherOptions = __objRest$s(_b, [
-    "view",
-    "defaultView",
-    "onViewChange"
-  ]);
-  const [view, setView] = utils$2.useControlledState(viewProp, defaultView, onViewChange);
-  const state = calendar$1.useCalendarState(__spreadProps$B(__spreadValues$D({}, otherOptions), {
-    visibleDuration: viewToVisibleDuration[view]
-  }));
-  const broadenView = () => {
-    switch (view) {
-      case "days":
-        return setView("months");
-      case "months":
-        return setView("years");
-    }
-  };
-  const narrowView = () => {
-    switch (view) {
-      case "months":
-        return setView("days");
-      case "years":
-        return setView("months");
-    }
-  };
-  const canDrillUp = !state.isReadOnly && ["days", "months"].includes(view);
-  return __spreadProps$B(__spreadValues$D({}, state), {
-    view,
-    narrowView,
-    broadenView,
-    canBroadenView: canDrillUp
-  });
-}
-
-var __defProp$C = Object.defineProperty;
-var __defProps$A = Object.defineProperties;
-var __getOwnPropDescs$A = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
-var __hasOwnProp$D = Object.prototype.hasOwnProperty;
-var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$C = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$D.call(b, prop))
-      __defNormalProp$C(a, prop, b[prop]);
-  if (__getOwnPropSymbols$D)
-    for (var prop of __getOwnPropSymbols$D(b)) {
-      if (__propIsEnum$D.call(b, prop))
-        __defNormalProp$C(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$A = (a, b) => __defProps$A(a, __getOwnPropDescs$A(b));
-function CalendarHeader({
-  isLeft,
-  isRight,
-  children,
-  prevButtonProps,
-  nextButtonProps
-}) {
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__header"], {
-      [styles__default$1["default"]["sapphire-calendar__header--left"]]: isLeft,
-      [styles__default$1["default"]["sapphire-calendar__header--right"]]: isRight
-    })
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles__default$1["default"]["sapphire-calendar__header-prev-month"]
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.IconButton, __spreadProps$A(__spreadValues$C({}, prevButtonProps), {
-    variant: "tertiary",
-    appearance: "ghost",
-    size: "large",
-    "aria-label": "Previous"
-  }), /* @__PURE__ */ React__default["default"].createElement(react.ChevronLeft, null))), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles__default$1["default"]["sapphire-calendar__header-title"]
-  }, children), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles__default$1["default"]["sapphire-calendar__header-next-month"]
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.IconButton, __spreadProps$A(__spreadValues$C({}, nextButtonProps), {
-    variant: "tertiary",
-    appearance: "ghost",
-    size: "large",
-    "aria-label": "Next"
-  }), /* @__PURE__ */ React__default["default"].createElement(react.ChevronRight, null))));
-}
 
-var __defProp$B = Object.defineProperty;
-var __defProps$z = Object.defineProperties;
-var __getOwnPropDescs$z = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
-var __hasOwnProp$C = Object.prototype.hasOwnProperty;
-var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$B = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$C.call(b, prop))
-      __defNormalProp$B(a, prop, b[prop]);
-  if (__getOwnPropSymbols$C)
-    for (var prop of __getOwnPropSymbols$C(b)) {
-      if (__propIsEnum$C.call(b, prop))
-        __defNormalProp$B(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$z = (a, b) => __defProps$z(a, __getOwnPropDescs$z(b));
-function CalendarPageAnimation({
+function FilterDropdown({
   children,
-  state: { direction, key }
+  label,
+  value,
+  isDisabled = false,
+  isApplyDisabled = false,
+  isOpen: isOpenProp,
+  applyButtonLabel = "Apply",
+  clearButtonLabel = "Clear",
+  defaultOpen = false,
+  hasApplyButton = false,
+  noMaxWidth,
+  onApply,
+  onClear,
+  onOpenChange
 }) {
-  return /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.TransitionGroup, {
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__grid-page-animation"], styles__default$1["default"][`sapphire-calendar__grid-page-animation--${direction}`])
-  }, /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
-    key,
-    addEndListener: (node, done) => {
-      node.addEventListener("transitionend", done, false);
-    },
-    unmountOnExit: true,
-    classNames: {
-      enter: styles__default$1["default"]["enter"],
-      enterActive: styles__default$1["default"]["enter-active"],
-      exit: styles__default$1["default"]["exit"],
-      exitActive: styles__default$1["default"]["exit-active"]
-    }
-  }, children));
-}
-function useCalendarAnimationState(state) {
-  const [animationState, setAnimationState] = React.useState({ key: 0, direction: "next" });
-  return __spreadProps$z(__spreadValues$B({}, state), {
-    focusNextPage: () => {
-      setAnimationState(({ key }) => ({
-        key: key + 1,
-        direction: "next"
-      }));
-      state.focusNextPage();
-    },
-    focusPreviousPage: () => {
-      setAnimationState(({ key }) => ({
-        key: key - 1,
-        direction: "prev"
-      }));
-      state.focusPreviousPage();
-    },
-    animationState
-  });
-}
-
-var __defProp$A = Object.defineProperty;
-var __defProps$y = Object.defineProperties;
-var __getOwnPropDescs$y = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
-var __hasOwnProp$B = Object.prototype.hasOwnProperty;
-var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$A = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$B.call(b, prop))
-      __defNormalProp$A(a, prop, b[prop]);
-  if (__getOwnPropSymbols$B)
-    for (var prop of __getOwnPropSymbols$B(b)) {
-      if (__propIsEnum$B.call(b, prop))
-        __defNormalProp$A(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$y = (a, b) => __defProps$y(a, __getOwnPropDescs$y(b));
-var __objRest$r = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$B.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$B)
-    for (var prop of __getOwnPropSymbols$B(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$B.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Calendar = (_a) => {
-  var _b = _a, {
-    showWeekNumbers
-  } = _b, props = __objRest$r(_b, [
-    "showWeekNumbers"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { locale } = i18n.useLocale();
-  const formatMessage = i18n.useMessageFormatter(intlMessages$3);
-  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const state = useCalendarAnimationState(useSapphireCalendarState(__spreadProps$y(__spreadValues$A({
-    selectionAlignment: "start"
-  }, props), {
-    locale,
-    createCalendar: date.createCalendar
-  })));
-  const monthDateFormatter = i18n.useDateFormatter({
-    month: "long",
-    year: "numeric",
-    era: state.visibleRange.start.calendar.identifier === "gregory" && state.visibleRange.start.era === "BC" ? "short" : void 0,
-    calendar: state.visibleRange.start.calendar.identifier,
-    timeZone: state.timeZone
-  });
-  const { calendarProps, prevButtonProps, nextButtonProps } = calendar.useCalendar(props, state);
-  const renderGrid = () => {
-    switch (state.view) {
-      case "years":
-        return /* @__PURE__ */ React__default["default"].createElement(CalendarYearsGrid, {
-          state
-        });
-      case "months":
-        return /* @__PURE__ */ React__default["default"].createElement(CalendarMonthsGrid, {
-          state
-        });
-      case "days":
-      default:
-        return /* @__PURE__ */ React__default["default"].createElement(CalendarDaysGrid, {
-          state,
-          showWeekNumbers
-        });
-    }
-  };
-  const renderTitle = () => {
-    switch (state.view) {
-      case "days":
-        return sentenceCase(monthDateFormatter.format(state.visibleRange.start.toDate(state.timeZone)));
-      case "months":
-        return state.focusedDate.year;
-      case "years":
-        return sentenceCase(formatMessage("year"));
-    }
-  };
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$A({
-    className: styles__default$1["default"]["sapphire-calendar"]
-  }, utils$1.mergeProps(calendarProps, utils$1.filterDOMProps(props))), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar__table-container"], styleProps.className),
-    style: styleProps.style
-  }, /* @__PURE__ */ React__default["default"].createElement(CalendarHeader, {
-    prevButtonProps,
-    nextButtonProps
-  }, state.canBroadenView ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
-    onPress: state.broadenView,
-    isDisabled: state.isDisabled,
-    variant: "tertiary",
-    appearance: "ghost",
-    size: "large"
-  }, renderTitle()) : renderTitle()), state.view === "days" ? /* @__PURE__ */ React__default["default"].createElement(CalendarPageAnimation, {
-    state: state.animationState
-  }, renderGrid()) : renderGrid()));
-};
-
-var __defProp$z = Object.defineProperty;
-var __defProps$x = Object.defineProperties;
-var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
-var __hasOwnProp$A = Object.prototype.hasOwnProperty;
-var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$z = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$A.call(b, prop))
-      __defNormalProp$z(a, prop, b[prop]);
-  if (__getOwnPropSymbols$A)
-    for (var prop of __getOwnPropSymbols$A(b)) {
-      if (__propIsEnum$A.call(b, prop))
-        __defNormalProp$z(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
-var __objRest$q = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$A.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$A)
-    for (var prop of __getOwnPropSymbols$A(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$A.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const useRangeCalendarState = (_a) => {
-  var _b = _a, {
-    onChange
-  } = _b, options = __objRest$q(_b, [
-    "onChange"
-  ]);
-  const lastPredefinedRange = React.useRef(void 0);
-  const state = calendar$1.useRangeCalendarState(__spreadProps$x(__spreadValues$z({}, options), {
-    onChange: (value) => {
-      onChange == null ? void 0 : onChange(value, lastPredefinedRange.current);
-      lastPredefinedRange.current = void 0;
-    }
-  }));
-  return __spreadProps$x(__spreadValues$z({}, state), {
-    setValue: (value, predefinedRange) => {
-      lastPredefinedRange.current = predefinedRange;
-      state.setValue(value);
-    }
-  });
-};
-
-var __defProp$y = Object.defineProperty;
-var __defProps$w = Object.defineProperties;
-var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
-var __hasOwnProp$z = Object.prototype.hasOwnProperty;
-var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$y = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$z.call(b, prop))
-      __defNormalProp$y(a, prop, b[prop]);
-  if (__getOwnPropSymbols$z)
-    for (var prop of __getOwnPropSymbols$z(b)) {
-      if (__propIsEnum$z.call(b, prop))
-        __defNormalProp$y(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
-var __objRest$p = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$z.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$z)
-    for (var prop of __getOwnPropSymbols$z(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$z.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const _RangeCalendar = function RangeCalendar2(_a, forwardedRef) {
-  var _b = _a, {
-    showWeekNumbers,
-    showTwoMonths = false,
-    allowUnavailableDatesWithinRange = false,
-    predefinedRanges
-  } = _b, props = __objRest$p(_b, [
-    "showWeekNumbers",
-    "showTwoMonths",
-    "allowUnavailableDatesWithinRange",
-    "predefinedRanges"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const ref = utils$1.useObjectRef(forwardedRef);
-  const { locale } = i18n.useLocale();
-  const state = useCalendarAnimationState(useRangeCalendarState(__spreadProps$w(__spreadValues$y({}, props), {
-    locale,
-    allowsNonContiguousRanges: allowUnavailableDatesWithinRange,
-    visibleDuration: React.useMemo(() => ({ months: showTwoMonths ? 2 : 1 }), [showTwoMonths]),
-    createCalendar: date.createCalendar
-  })));
-  const { calendarProps, prevButtonProps, nextButtonProps } = calendar.useRangeCalendar(props, state, ref);
-  const monthDateFormatter = i18n.useDateFormatter({
-    month: "long",
-    year: "numeric",
-    era: state.visibleRange.start.calendar.identifier === "gregory" && state.visibleRange.start.era === "BC" ? "short" : void 0,
-    calendar: state.visibleRange.start.calendar.identifier,
-    timeZone: state.timeZone
-  });
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$y({
-    ref,
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-calendar"], styleProps.className),
-    style: styleProps.style
-  }, utils$1.mergeProps(calendarProps, utils$1.filterDOMProps(props))), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles__default$1["default"]["sapphire-calendar__tables-row"]
-  }, [state.visibleRange.start].concat(showTwoMonths ? state.visibleRange.start.add({ months: 1 }) : []).map((startOfMonth, index, visibleMonths) => {
-    const isLeft = visibleMonths.length > 1 && index === 0;
-    const isRight = visibleMonths.length > 1 && index === visibleMonths.length - 1;
-    const shouldAnimate = visibleMonths.length === 1;
-    const daysGrid = /* @__PURE__ */ React__default["default"].createElement(CalendarDaysGrid, {
-      startDate: startOfMonth,
-      state,
-      showWeekNumbers
-    });
-    return /* @__PURE__ */ React__default["default"].createElement("div", {
-      key: index,
-      className: styles__default$1["default"]["sapphire-calendar__table-container"]
-    }, /* @__PURE__ */ React__default["default"].createElement(CalendarHeader, {
-      prevButtonProps,
-      nextButtonProps,
-      isLeft,
-      isRight
-    }, sentenceCase(monthDateFormatter.format(startOfMonth.toDate(state.timeZone)))), shouldAnimate ? /* @__PURE__ */ React__default["default"].createElement(CalendarPageAnimation, {
-      state: state.animationState
-    }, daysGrid) : daysGrid);
-  })), predefinedRanges && /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles__default$1["default"]["sapphire-calendar__custom-ranges"]
-  }, Object.entries(predefinedRanges).map(([key, { label, dateRange }]) => /* @__PURE__ */ React__default["default"].createElement("div", {
-    key
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
-    variant: "secondary",
-    appearance: "ghost",
-    onPress: () => {
-      state.setValue(dateRange, key);
-      state.setAnchorDate(null);
-      state.setFocusedDate(date.toCalendarDate(dateRange.end));
-    }
-  }, label)))));
-};
-const RangeCalendar = React__default["default"].forwardRef(_RangeCalendar);
-
-var __defProp$x = Object.defineProperty;
-var __defProps$v = Object.defineProperties;
-var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
-var __hasOwnProp$y = Object.prototype.hasOwnProperty;
-var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$x = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$y.call(b, prop))
-      __defNormalProp$x(a, prop, b[prop]);
-  if (__getOwnPropSymbols$y)
-    for (var prop of __getOwnPropSymbols$y(b)) {
-      if (__propIsEnum$y.call(b, prop))
-        __defNormalProp$x(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
-var __objRest$o = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$y.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$y)
-    for (var prop of __getOwnPropSymbols$y(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$y.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const NotificationBadge = (props) => {
-  sapphireReact.useThemeCheck();
-  const _a = props, {
-    animate = true,
-    children,
-    count,
-    containerType = "circle",
-    variant = "primary",
-    size = "medium",
-    show = true
-  } = _a, otherProps = __objRest$o(_a, [
-    "animate",
-    "children",
-    "count",
-    "containerType",
-    "variant",
-    "size",
-    "show"
-  ]);
-  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const badge = () => show || animate ? /* @__PURE__ */ React__default["default"].createElement("span", __spreadProps$v(__spreadValues$x({}, otherProps), {
-    role: "status",
-    className: clsx__default["default"](styleProps.className, styles__default$2["default"]["sapphire-notification-badge"], styles__default$2["default"][`sapphire-notification-badge--${size}`], styles__default$2["default"][`sapphire-notification-badge--${variant}`], {
-      [styles__default$2["default"][`sapphire-notification-badge--pop-in`]]: show && animate,
-      [styles__default$2["default"][`sapphire-notification-badge--pop-out`]]: !show && animate
-    }),
-    style: styleProps.style
-  }), size !== "small" && displayCount) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null);
-  const displayCount = count.toString().length > 2 ? `99+` : count;
-  return children ? /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: clsx__default["default"](styles__default$2["default"]["sapphire-notification-badge-container"], {
-      [styles__default$2["default"]["sapphire-notification-badge-container--rectangle"]]: containerType === "rectangle"
-    })
-  }, children, badge()) : badge();
-};
-
-function FilterDropdown({
-  children,
-  label,
-  value,
-  isOpen: isOpenProp,
-  clearButtonLabel = "Clear",
-  applyButtonLabel = "Apply",
-  defaultOpen = false,
-  onOpenChange,
-  hasApplyButton = false,
-  onApply,
-  onClear,
-  noMaxWidth,
-  isDisabled = false
-}) {
-  const [isOpen, setIsOpen] = utils$2.useControlledState(isOpenProp, defaultOpen, onOpenChange);
-  const hasValue = value != null && value !== "";
-  const close = () => setIsOpen(false);
-  const apply = () => {
-    onApply == null ? void 0 : onApply();
-    close();
+  const [isOpen, setIsOpen] = utils.useControlledState(isOpenProp, defaultOpen, onOpenChange);
+  const hasValue = value != null && value !== "";
+  const close = () => setIsOpen(false);
+  const apply = () => {
+    onApply == null ? void 0 : onApply();
+    close();
   };
   const applyButton = /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
     type: "submit",
-    excludeFromTabOrder: !hasApplyButton
+    excludeFromTabOrder: !hasApplyButton,
+    isDisabled: isApplyDisabled
   }, applyButtonLabel);
   return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.PopoverTrigger, {
     popoverContent: /* @__PURE__ */ React__default["default"].createElement("form", {
@@ -1220,1321 +77,59 @@ function FilterDropdown({
       variant: "secondary",
       onPress: () => {
         close();
-        onClear == null ? void 0 : onClear();
-      },
-      isDisabled: !hasValue
-    }, clearButtonLabel), hasApplyButton ? applyButton : /* @__PURE__ */ React__default["default"].createElement(visuallyHidden.VisuallyHidden, null, applyButton))),
-    placement: "bottom left",
-    isOpen,
-    onOpenChange: setIsOpen,
-    noMaxWidth
-  }, /* @__PURE__ */ React__default["default"].createElement(ToggleButton, {
-    icon: isOpen ? /* @__PURE__ */ React__default["default"].createElement(react.ChevronUp, null) : /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null),
-    iconAlign: "right",
-    isSelected: hasValue,
-    isDisabled
-  }, label, value ? ": " : "", value));
-}
-
-const placeholders = new string.LocalizedStringDictionary({
-  ach: { year: "mwaka", month: "dwe", day: "nino" },
-  af: { year: "jjjj", month: "mm", day: "dd" },
-  am: { year: "\u12D3\u12D3\u12D3\u12D3", month: "\u121A\u121C", day: "\u1240\u1240" },
-  an: { year: "aaaa", month: "mm", day: "dd" },
-  ar: { year: "\u0633\u0646\u0629", month: "\u0634\u0647\u0631", day: "\u064A\u0648\u0645" },
-  ast: { year: "aaaa", month: "mm", day: "dd" },
-  az: { year: "iiii", month: "aa", day: "gg" },
-  be: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
-  bg: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
-  bn: { year: "yyyy", month: "\u09AE\u09BF\u09AE\u09BF", day: "dd" },
-  br: { year: "bbbb", month: "mm", day: "dd" },
-  bs: { year: "gggg", month: "mm", day: "dd" },
-  ca: { year: "aaaa", month: "mm", day: "dd" },
-  cak: { year: "jjjj", month: "ii", day: "q'q'" },
-  ckb: { year: "\u0633\u0627\u06B5", month: "\u0645\u0627\u0646\u06AF", day: "\u0695\u06C6\u0698" },
-  cs: { year: "rrrr", month: "mm", day: "dd" },
-  cy: { year: "bbbb", month: "mm", day: "dd" },
-  da: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
-  de: { year: "jjjj", month: "mm", day: "tt" },
-  dsb: { year: "llll", month: "mm", day: "\u017A\u017A" },
-  el: { year: "\u03B5\u03B5\u03B5\u03B5", month: "\u03BC\u03BC", day: "\u03B7\u03B7" },
-  en: { year: "yyyy", month: "mm", day: "dd" },
-  eo: { year: "jjjj", month: "mm", day: "tt" },
-  es: { year: "aaaa", month: "mm", day: "dd" },
-  et: { year: "aaaa", month: "kk", day: "pp" },
-  eu: { year: "uuuu", month: "hh", day: "ee" },
-  fa: { year: "\u0633\u0627\u0644", month: "\u0645\u0627\u0647", day: "\u0631\u0648\u0632" },
-  ff: { year: "hhhh", month: "ll", day: "\xF1\xF1" },
-  fi: { year: "vvvv", month: "kk", day: "pp" },
-  fr: { year: "aaaa", month: "mm", day: "jj" },
-  fy: { year: "jjjj", month: "mm", day: "dd" },
-  ga: { year: "bbbb", month: "mm", day: "ll" },
-  gd: { year: "bbbb", month: "mm", day: "ll" },
-  gl: { year: "aaaa", month: "mm", day: "dd" },
-  he: { year: "\u05E9\u05E0\u05D4", month: "\u05D7\u05D5\u05D3\u05E9", day: "\u05D9\u05D5\u05DD" },
-  hr: { year: "gggg", month: "mm", day: "dd" },
-  hsb: { year: "llll", month: "mm", day: "dd" },
-  hu: { year: "\xE9\xE9\xE9\xE9", month: "hh", day: "nn" },
-  ia: { year: "aaaa", month: "mm", day: "dd" },
-  id: { year: "tttt", month: "bb", day: "hh" },
-  it: { year: "aaaa", month: "mm", day: "gg" },
-  ja: { year: " \u5E74 ", month: "\u6708", day: "\u65E5" },
-  ka: { year: "\u10EC\u10EC\u10EC\u10EC", month: "\u10D7\u10D7", day: "\u10E0\u10E0" },
-  kk: { year: "\u0436\u0436\u0436\u0436", month: "\u0430\u0430", day: "\u043A\u043A" },
-  kn: { year: "\u0CB5\u0CB5\u0CB5\u0CB5", month: "\u0CAE\u0CBF\u0CAE\u0CC0", day: "\u0CA6\u0CBF\u0CA6\u0CBF" },
-  ko: { year: "\uC5F0\uB3C4", month: "\uC6D4", day: "\uC77C" },
-  lb: { year: "jjjj", month: "mm", day: "dd" },
-  lo: { year: "\u0E9B\u0E9B\u0E9B\u0E9B", month: "\u0E94\u0E94", day: "\u0EA7\u0EA7" },
-  lt: { year: "mmmm", month: "mm", day: "dd" },
-  lv: { year: "gggg", month: "mm", day: "dd" },
-  meh: { year: "aaaa", month: "mm", day: "dd" },
-  ml: { year: "\u0D35\u0D7C\u0D37\u0D02", month: "\u0D2E\u0D3E\u0D38\u0D02", day: "\u0D24\u0D40\u0D2F\u0D24\u0D3F" },
-  ms: { year: "tttt", month: "mm", day: "hh" },
-  nl: { year: "jjjj", month: "mm", day: "dd" },
-  nn: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
-  no: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
-  oc: { year: "aaaa", month: "mm", day: "jj" },
-  pl: { year: "rrrr", month: "mm", day: "dd" },
-  pt: { year: "aaaa", month: "mm", day: "dd" },
-  rm: { year: "oooo", month: "mm", day: "dd" },
-  ro: { year: "aaaa", month: "ll", day: "zz" },
-  ru: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
-  sc: { year: "aaaa", month: "mm", day: "dd" },
-  scn: { year: "aaaa", month: "mm", day: "jj" },
-  sk: { year: "rrrr", month: "mm", day: "dd" },
-  sl: { year: "llll", month: "mm", day: "dd" },
-  sr: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
-  sv: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
-  szl: { year: "rrrr", month: "mm", day: "dd" },
-  tg: { year: "\u0441\u0441\u0441\u0441", month: "\u043C\u043C", day: "\u0440\u0440" },
-  th: { year: "\u0E1B\u0E1B\u0E1B\u0E1B", month: "\u0E14\u0E14", day: "\u0E27\u0E27" },
-  tr: { year: "yyyy", month: "aa", day: "gg" },
-  uk: { year: "\u0440\u0440\u0440\u0440", month: "\u043C\u043C", day: "\u0434\u0434" },
-  "zh-CN": { year: "\u5E74", month: "\u6708", day: "\u65E5" },
-  "zh-TW": { year: "\u5E74", month: "\u6708", day: "\u65E5" }
-}, "en");
-function getPlaceholder(field, value, locale) {
-  if (field === "era" || field === "dayPeriod") {
-    return value;
-  }
-  if (field === "year" || field === "month" || field === "day") {
-    return placeholders.getStringForLocale(field, locale);
-  }
-  return "\u2013\u2013";
-}
-
-var __defProp$w = Object.defineProperty;
-var __defProps$u = Object.defineProperties;
-var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
-var __hasOwnProp$x = Object.prototype.hasOwnProperty;
-var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$w = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$x.call(b, prop))
-      __defNormalProp$w(a, prop, b[prop]);
-  if (__getOwnPropSymbols$x)
-    for (var prop of __getOwnPropSymbols$x(b)) {
-      if (__propIsEnum$x.call(b, prop))
-        __defNormalProp$w(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
-const segmentTypes = [
-  "day",
-  "hour",
-  "minute",
-  "second",
-  "era",
-  "year",
-  "month",
-  "dayPeriod",
-  "literal",
-  "timeZoneName"
-];
-const isAnyModified = (segments) => segments.map(({ type, isPlaceholder }) => {
-  return type !== "literal" && !isPlaceholder;
-}).some((isModified) => isModified);
-const setPlaceholderLanguage = (segment, locale) => {
-  const placeholder = getPlaceholder(segment.type, segment.text, locale);
-  return __spreadProps$u(__spreadValues$w({}, segment), {
-    text: segment.isPlaceholder ? placeholder : segment.text,
-    placeholder
-  });
-};
-
-var __defProp$v = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
-var __hasOwnProp$w = Object.prototype.hasOwnProperty;
-var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$v = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$w.call(b, prop))
-      __defNormalProp$v(a, prop, b[prop]);
-  if (__getOwnPropSymbols$w)
-    for (var prop of __getOwnPropSymbols$w(b)) {
-      if (__propIsEnum$w.call(b, prop))
-        __defNormalProp$v(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
-const DateSegment = ({ segment, state }) => segment.type === "literal" ? /* @__PURE__ */ React__default["default"].createElement(SeparatorSegment, {
-  segment
-}) : /* @__PURE__ */ React__default["default"].createElement(EditableSegment, {
-  segment,
-  state
-});
-const SeparatorSegment = ({ segment }) => /* @__PURE__ */ React__default["default"].createElement("span", {
-  "aria-hidden": "true",
-  className: clsx__default["default"](styles__default$3["default"]["sapphire-date-field__segment"])
-}, segment.text);
-const EditableSegment = ({ segment, state }) => {
-  const ref = React.useRef(null);
-  const { segmentProps } = datepicker.useDateSegment(segment, state, ref);
-  const { locale } = i18n.useLocale();
-  const segmentWithTranslatedPlaceholders = setPlaceholderLanguage(segment, locale);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$t(__spreadValues$v({}, segmentProps), {
-    style: segmentProps.style,
-    ref,
-    className: clsx__default["default"](styles__default$3["default"]["sapphire-date-field__segment"], {
-      [styles__default$3["default"]["sapphire-date-field__segment--filled"]]: !segmentWithTranslatedPlaceholders.isPlaceholder
-    })
-  }), segmentWithTranslatedPlaceholders.text);
-};
-
-var __defProp$u = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
-var __hasOwnProp$v = Object.prototype.hasOwnProperty;
-var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$u = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$v.call(b, prop))
-      __defNormalProp$u(a, prop, b[prop]);
-  if (__getOwnPropSymbols$v)
-    for (var prop of __getOwnPropSymbols$v(b)) {
-      if (__propIsEnum$v.call(b, prop))
-        __defNormalProp$u(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
-const DateFieldButton = (props) => {
-  const ref = React.useRef(null);
-  const { buttonProps, isPressed } = sapphireReact.useButton(props, ref);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled: props.isDisabled });
-  const { focusProps, isFocusVisible } = focus.useFocusRing();
-  return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$s(__spreadValues$u({}, utils$1.mergeProps(buttonProps, hoverProps, focusProps)), {
-    ref,
-    className: clsx__default["default"](styles__default$3["default"]["sapphire-date-field__button"], styles__default$3["default"]["js-focus"], styles__default$3["default"]["js-hover"], {
-      [styles__default$3["default"]["is-active"]]: isPressed,
-      [styles__default$3["default"]["is-hover"]]: isHovered,
-      [styles__default$3["default"]["is-focus"]]: isFocusVisible
-    })
-  }), props.children);
-};
-
-var clear$6 = "Nulstil";
-var da$2 = {
-	clear: clear$6
-};
-
-var clear$5 = "Clear";
-var en$2 = {
-	clear: clear$5
-};
-
-var clear$4 = "Zurücksetzen";
-var de$2 = {
-	clear: clear$4
-};
-
-var clear$3 = "Nollaa";
-var fi$2 = {
-	clear: clear$3
-};
-
-var clear$2 = "Nullstill";
-var no$2 = {
-	clear: clear$2
-};
-
-var clear$1 = "Zresetuj";
-var pl$2 = {
-	clear: clear$1
-};
-
-var clear = "Återställ";
-var se$2 = {
-	clear: clear
-};
-
-var intlMessages$2 = {
-  "da-DK": da$2,
-  "en-US": en$2,
-  "de-DE": de$2,
-  "fi-FI": fi$2,
-  "nb-NO": no$2,
-  "pl-PL": pl$2,
-  "sv-SE": se$2
-};
-
-var __defProp$t = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
-var __hasOwnProp$u = Object.prototype.hasOwnProperty;
-var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$t = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$u.call(b, prop))
-      __defNormalProp$t(a, prop, b[prop]);
-  if (__getOwnPropSymbols$u)
-    for (var prop of __getOwnPropSymbols$u(b)) {
-      if (__propIsEnum$u.call(b, prop))
-        __defNormalProp$t(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
-var __objRest$n = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$u.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$u)
-    for (var prop of __getOwnPropSymbols$u(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$u.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function DateInput(_a) {
-  var _b = _a, {
-    noClearButton = false,
-    size = "large"
-  } = _b, props = __objRest$n(_b, [
-    "noClearButton",
-    "size"
-  ]);
-  const ref = React.useRef(null);
-  const formatMessage = i18n.useMessageFormatter(intlMessages$2);
-  const { locale } = i18n.useLocale();
-  const customDateFormatLocale = sapphireReact.useCustomDateFormatLocale();
-  const state = datepicker$1.useDateFieldState(__spreadProps$r(__spreadValues$t({}, props), {
-    locale: customDateFormatLocale || locale,
-    createCalendar: date.createCalendar
-  }));
-  const { fieldProps } = datepicker.useDateField(props, state, ref);
-  const clear = () => {
-    segmentTypes.forEach(state.clearSegment);
-  };
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$r(__spreadValues$t({}, fieldProps), {
-    className: styles__default$3["default"]["sapphire-date-field__input"],
-    ref
-  }), state.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(DateSegment, {
-    key: i,
-    segment,
-    state
-  }))), !noClearButton && !props.isReadOnly && !props.isDisabled && isAnyModified(state.segments) && /* @__PURE__ */ React__default["default"].createElement(DateFieldButton, {
-    "aria-label": formatMessage("clear"),
-    onPress: clear
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: size === "medium" ? "m" : "l"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.CloseCircle, null))));
-}
-
-var __defProp$s = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
-var __hasOwnProp$t = Object.prototype.hasOwnProperty;
-var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$s = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$t.call(b, prop))
-      __defNormalProp$s(a, prop, b[prop]);
-  if (__getOwnPropSymbols$t)
-    for (var prop of __getOwnPropSymbols$t(b)) {
-      if (__propIsEnum$t.call(b, prop))
-        __defNormalProp$s(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
-var __objRest$m = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$t)
-    for (var prop of __getOwnPropSymbols$t(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function _DateField(_a, ref) {
-  var _b = _a, {
-    error,
-    note,
-    contextualHelp,
-    noClearButton = false,
-    showWeekNumbers,
-    size = "large",
-    labelPlacement = "above",
-    necessityIndicator = false
-  } = _b, otherProps = __objRest$m(_b, [
-    "error",
-    "note",
-    "contextualHelp",
-    "noClearButton",
-    "showWeekNumbers",
-    "size",
-    "labelPlacement",
-    "necessityIndicator"
-  ]);
-  sapphireReact.useThemeCheck();
-  const groupRef = React.useRef(null);
-  const dialogRef = React.useRef(null);
-  const { styleProps } = sapphireReact.useSapphireStyleProps(otherProps);
-  const { dialogProps } = dialog.useDialog({}, dialogRef);
-  const state = datepicker$1.useDatePickerState(__spreadValues$s(__spreadValues$s({}, otherProps), error ? { validationState: "invalid" } : {}));
-  const {
-    groupProps,
-    labelProps,
-    fieldProps,
-    buttonProps,
-    dialogProps: dialogPropsFromDatePicker,
-    calendarProps,
-    descriptionProps,
-    errorMessageProps
-  } = datepicker.useDatePicker(__spreadProps$q(__spreadValues$s({}, otherProps), {
-    description: note
-  }), state, groupRef);
-  const isMedium = size === "medium";
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$q(__spreadValues$s({}, otherProps), {
-    noShrink: true,
-    isDisabled: otherProps.isDisabled,
-    error: state.validationState === "invalid",
-    size,
-    ref,
-    labelPlacement
-  }), otherProps.label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps$q(__spreadValues$s({}, labelProps), {
-    size,
-    necessityIndicator: otherProps.isRequired && necessityIndicator ? "required" : !otherProps.isRequired && necessityIndicator ? "optional" : void 0,
-    contextualHelp
-  }), otherProps.label)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$s(__spreadProps$q(__spreadValues$s({}, groupProps), {
-    ref: groupRef,
-    className: clsx__default["default"](styles__default$3["default"]["sapphire-date-field"], {
-      [styles__default$3["default"]["sapphire-date-field--error"]]: state.validationState === "invalid",
-      [styles__default$3["default"]["sapphire-date-field--medium"]]: isMedium
-    })
-  }), styleProps.style.width ? { style: { width: styleProps.style.width } } : {}), /* @__PURE__ */ React__default["default"].createElement(interactions.PressResponder, __spreadProps$q(__spreadValues$s({}, buttonProps), {
-    isPressed: state.isOpen
-  }), /* @__PURE__ */ React__default["default"].createElement(DateFieldButton, {
-    isDisabled: otherProps.isDisabled || otherProps.isReadOnly
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: isMedium ? "m" : "l"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.Calendar, null)))), /* @__PURE__ */ React__default["default"].createElement(DateInput, __spreadProps$q(__spreadValues$s({}, fieldProps), {
-    noClearButton,
-    size
-  })))), (typeof error === "string" && error !== "" || note) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, error ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$s({}, errorMessageProps), error) : note ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$s({}, descriptionProps), note) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)), state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Popover, {
-    state,
-    triggerRef: groupRef,
-    placement: "bottom start"
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$s(__spreadValues$s({
-    ref: dialogRef
-  }, dialogProps), dialogPropsFromDatePicker), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.View, {
-    padding: sapphireReact.tokens.size.spacing50
-  }, /* @__PURE__ */ React__default["default"].createElement(Calendar, __spreadProps$q(__spreadValues$s({}, calendarProps), {
-    defaultFocusedValue: state.dateValue,
-    showWeekNumbers
-  }))))));
-}
-const DateField = React.forwardRef(_DateField);
-
-var __defProp$r = Object.defineProperty;
-var __defProps$p = Object.defineProperties;
-var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
-var __hasOwnProp$s = Object.prototype.hasOwnProperty;
-var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$r = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$s.call(b, prop))
-      __defNormalProp$r(a, prop, b[prop]);
-  if (__getOwnPropSymbols$s)
-    for (var prop of __getOwnPropSymbols$s(b)) {
-      if (__propIsEnum$s.call(b, prop))
-        __defNormalProp$r(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
-var __objRest$l = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$s.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$s)
-    for (var prop of __getOwnPropSymbols$s(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const useDateRangePickerState = (_a) => {
-  var _b = _a, {
-    onChange
-  } = _b, options = __objRest$l(_b, [
-    "onChange"
-  ]);
-  const lastPredefinedRange = React.useRef(void 0);
-  const state = datepicker$1.useDateRangePickerState(__spreadProps$p(__spreadValues$r({}, options), {
-    onChange: (value) => {
-      onChange == null ? void 0 : onChange(value, lastPredefinedRange.current);
-      lastPredefinedRange.current = void 0;
-    }
-  }));
-  return __spreadProps$p(__spreadValues$r({}, state), {
-    setDateRange: (value, predefinedRange) => {
-      lastPredefinedRange.current = predefinedRange;
-      state.setDateRange(value);
-    }
-  });
-};
-
-var __defProp$q = Object.defineProperty;
-var __defProps$o = Object.defineProperties;
-var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
-var __hasOwnProp$r = Object.prototype.hasOwnProperty;
-var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$q = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$r.call(b, prop))
-      __defNormalProp$q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(b)) {
-      if (__propIsEnum$r.call(b, prop))
-        __defNormalProp$q(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
-function DateRangeInput({
-  dateRangePickerState,
-  startFieldProps,
-  endFieldProps,
-  noClearButton = false,
-  size = "large"
-}) {
-  const startFieldRef = React.useRef(null);
-  const endFieldRef = React.useRef(null);
-  const formatMessage = i18n.useMessageFormatter(intlMessages$2);
-  const { locale } = i18n.useLocale();
-  const customDateFormatLocale = sapphireReact.useCustomDateFormatLocale();
-  const startFieldState = datepicker$1.useDateFieldState(__spreadProps$o(__spreadValues$q({}, startFieldProps), {
-    locale: customDateFormatLocale || locale,
-    createCalendar: date.createCalendar
-  }));
-  const endFieldState = datepicker$1.useDateFieldState(__spreadProps$o(__spreadValues$q({}, endFieldProps), {
-    locale: customDateFormatLocale || locale,
-    createCalendar: date.createCalendar
-  }));
-  const { fieldProps: startFieldAriaProps } = datepicker.useDateField(startFieldProps, startFieldState, startFieldRef);
-  const { fieldProps: endFieldAriaProps } = datepicker.useDateField(endFieldProps, endFieldState, endFieldRef);
-  const clearFields = () => {
-    segmentTypes.forEach((segmentType) => {
-      startFieldState.clearSegment(segmentType);
-      endFieldState.clearSegment(segmentType);
-    });
-    dateRangePickerState.setValue({ start: null, end: null });
-  };
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$o(__spreadValues$q({}, startFieldAriaProps), {
-    className: styles__default$3["default"]["sapphire-date-field__input"],
-    ref: startFieldRef
-  }), startFieldState.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(DateSegment, {
-    key: i,
-    segment,
-    state: startFieldState
-  }))), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: size == "medium" ? "m" : "l"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.ArrowRight, null)), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$o(__spreadValues$q({}, endFieldAriaProps), {
-    className: styles__default$3["default"]["sapphire-date-field__input"],
-    ref: endFieldRef
-  }), endFieldState.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(DateSegment, {
-    key: i,
-    segment,
-    state: endFieldState
-  }))), !noClearButton && !startFieldProps.isReadOnly && !endFieldProps.isReadOnly && !startFieldProps.isDisabled && !endFieldProps.isDisabled && isAnyModified([
-    ...startFieldState.segments,
-    ...endFieldState.segments
-  ]) && /* @__PURE__ */ React__default["default"].createElement(DateFieldButton, {
-    "aria-label": formatMessage("clear"),
-    onPress: clearFields
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: size === "medium" ? "m" : "l"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.CloseCircle, null))));
-}
-
-var __defProp$p = Object.defineProperty;
-var __defProps$n = Object.defineProperties;
-var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
-var __hasOwnProp$q = Object.prototype.hasOwnProperty;
-var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$p = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$q.call(b, prop))
-      __defNormalProp$p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b)) {
-      if (__propIsEnum$q.call(b, prop))
-        __defNormalProp$p(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
-var __objRest$k = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function _DateRangeField(_a, ref) {
-  var _b = _a, {
-    error,
-    note,
-    contextualHelp,
-    noClearButton = false,
-    locale,
-    showWeekNumbers,
-    showTwoMonths,
-    allowUnavailableDatesWithinRange,
-    predefinedRanges,
-    size = "large",
-    labelPlacement = "above",
-    necessityIndicator = false
-  } = _b, otherProps = __objRest$k(_b, [
-    "error",
-    "note",
-    "contextualHelp",
-    "noClearButton",
-    "locale",
-    "showWeekNumbers",
-    "showTwoMonths",
-    "allowUnavailableDatesWithinRange",
-    "predefinedRanges",
-    "size",
-    "labelPlacement",
-    "necessityIndicator"
-  ]);
-  sapphireReact.useThemeCheck();
-  const groupRef = React.useRef(null);
-  const dialogRef = React.useRef(null);
-  const { locale: existingLocale } = i18n.useLocale();
-  const preferredLocale = locale || existingLocale;
-  const { styleProps } = sapphireReact.useSapphireStyleProps(otherProps);
-  const { dialogProps } = dialog.useDialog({}, dialogRef);
-  const state = useDateRangePickerState(__spreadValues$p(__spreadValues$p(__spreadValues$p({}, otherProps), error ? { validationState: "invalid" } : {}), allowUnavailableDatesWithinRange ? { allowsNonContiguousRanges: allowUnavailableDatesWithinRange } : {}));
-  const {
-    groupProps,
-    labelProps,
-    startFieldProps,
-    endFieldProps,
-    buttonProps,
-    dialogProps: dialogPropsFromDatePicker,
-    calendarProps,
-    descriptionProps,
-    errorMessageProps
-  } = datepicker.useDateRangePicker(__spreadProps$n(__spreadValues$p({}, otherProps), {
-    description: note,
-    allowsNonContiguousRanges: allowUnavailableDatesWithinRange
-  }), state, groupRef);
-  const isMedium = size === "medium";
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$n(__spreadValues$p({}, otherProps), {
-    noShrink: true,
-    isDisabled: otherProps.isDisabled,
-    error: state.validationState === "invalid",
-    size,
-    ref,
-    labelPlacement
-  }), /* @__PURE__ */ React__default["default"].createElement(i18n.I18nProvider, {
-    locale: preferredLocale
-  }, otherProps.label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps$n(__spreadValues$p({}, labelProps), {
-    size,
-    necessityIndicator: otherProps.isRequired && necessityIndicator ? "required" : !otherProps.isRequired && necessityIndicator ? "optional" : void 0,
-    contextualHelp
-  }), otherProps.label)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$p(__spreadProps$n(__spreadValues$p({}, groupProps), {
-    ref: groupRef,
-    className: clsx__default["default"](styles__default$3["default"]["sapphire-date-field"], styles__default$3["default"]["sapphire-date-field--range"], {
-      [styles__default$3["default"]["sapphire-date-field--error"]]: state.validationState === "invalid",
-      [styles__default$3["default"]["sapphire-date-field--medium"]]: isMedium
-    })
-  }), styleProps.style.width ? { style: { width: styleProps.style.width } } : {}), /* @__PURE__ */ React__default["default"].createElement(interactions.PressResponder, __spreadProps$n(__spreadValues$p({}, buttonProps), {
-    isPressed: state.isOpen
-  }), /* @__PURE__ */ React__default["default"].createElement(DateFieldButton, {
-    isDisabled: otherProps.isDisabled || otherProps.isReadOnly
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: isMedium ? "m" : "l"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.Calendar, null)))), /* @__PURE__ */ React__default["default"].createElement(DateRangeInput, {
-    dateRangePickerState: state,
-    startFieldProps,
-    endFieldProps,
-    noClearButton,
-    size
-  }))), error !== false && (typeof error === "string" && error !== "" || note) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, error ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$p({}, errorMessageProps), error) : note ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$p({}, descriptionProps), note) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)), state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Popover, {
-    state,
-    triggerRef: groupRef,
-    placement: "bottom start"
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$p(__spreadValues$p({
-    ref: dialogRef
-  }, dialogProps), dialogPropsFromDatePicker), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.View, {
-    padding: sapphireReact.tokens.size.spacing50
-  }, /* @__PURE__ */ React__default["default"].createElement(RangeCalendar, __spreadProps$n(__spreadValues$p({}, calendarProps), {
-    allowUnavailableDatesWithinRange,
-    showWeekNumbers,
-    showTwoMonths,
-    predefinedRanges
-  })))))));
-}
-const DateRangeField = React.forwardRef(_DateRangeField);
-
-const isEndDateBeforeStartDate = (dateRange) => dateRange && dateRange.end && dateRange.start && dateRange.end.compare(dateRange.start) < 0;
-const isDateOutsideValidRange = (value, minValue, maxValue) => {
-  if (value) {
-    if (minValue && value.compare(minValue) < 0) {
-      return "before";
-    }
-    if (maxValue && value.compare(maxValue) > 0) {
-      return "after";
-    }
-  }
-};
-
-var __defProp$o = Object.defineProperty;
-var __defProps$m = Object.defineProperties;
-var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
-var __hasOwnProp$p = Object.prototype.hasOwnProperty;
-var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$o = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$p.call(b, prop))
-      __defNormalProp$o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(b)) {
-      if (__propIsEnum$p.call(b, prop))
-        __defNormalProp$o(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
-var __objRest$j = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const getIconSize = (size) => {
-  switch (size) {
-    case "medium":
-      return "m";
-    case "large":
-      return "l";
-    case "extraLarge":
-      return "xl";
-    default:
-      return "s";
-  }
-};
-const Avatar = (_a) => {
-  var _b = _a, {
-    monogram,
-    icon,
-    color = "informative",
-    size = "medium"
-  } = _b, props = __objRest$j(_b, [
-    "monogram",
-    "icon",
-    "color",
-    "size"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$m(__spreadValues$o({}, styleProps), {
-    className: clsx__default["default"](styleProps.className, styles__default$4["default"]["sapphire-avatar"], {
-      [styles__default$4["default"]["sapphire-avatar--extra-large"]]: size === "extraLarge",
-      [styles__default$4["default"]["sapphire-avatar--large"]]: size === "large",
-      [styles__default$4["default"]["sapphire-avatar--small"]]: size === "small",
-      [styles__default$4["default"]["sapphire-avatar--extra-small"]]: size === "extraSmall"
-    }, color !== "passive" && styles__default$4["default"][`sapphire-avatar--${color}`])
-  }), icon ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: getIconSize(size)
-  }, icon) : monogram);
-};
-
-var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
-var __hasOwnProp$o = Object.prototype.hasOwnProperty;
-var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
-var __objRest$i = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const getColor = (variant) => {
-  switch (variant) {
-    case "success":
-      return "positive";
-    case "error":
-      return "negative";
-    case "neutral":
-      return "passive";
-    default:
-      return variant;
-  }
-};
-const getIcon = (variant, icon) => {
-  if (icon) {
-    return icon;
-  }
-  switch (variant) {
-    case "success":
-      return /* @__PURE__ */ React__default["default"].createElement(react.CheckMarkCircle, null);
-    case "error":
-      return /* @__PURE__ */ React__default["default"].createElement(react.AlertCircle, null);
-    case "warning":
-      return /* @__PURE__ */ React__default["default"].createElement(react.AlertTriangle, null);
-    case "informative":
-      return /* @__PURE__ */ React__default["default"].createElement(react.Bell, null);
-    default:
-      return null;
-  }
-};
-const FeedbackMessage = (_a) => {
-  var _b = _a, {
-    heading,
-    body,
-    actions,
-    variant = "neutral",
-    icon
-  } = _b, otherProps = __objRest$i(_b, [
-    "heading",
-    "body",
-    "actions",
-    "variant",
-    "icon"
-  ]);
-  sapphireReact.useThemeCheck();
-  const {
-    styleProps: { style, className }
-  } = sapphireReact.useSapphireStyleProps(otherProps);
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$5["default"]["sapphire-feedback-message"], className),
-    style
-  }, variant !== "neutral" && /* @__PURE__ */ React__default["default"].createElement(Avatar, {
-    color: getColor(variant),
-    size: "extraLarge",
-    icon: getIcon(variant, icon)
-  }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles__default$5["default"]["sapphire-feedback-message__content"]
-  }, typeof heading === "string" ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Heading, {
-    level: 6
-  }, heading) : heading, /* @__PURE__ */ React__default["default"].createElement("section", {
-    className: styles__default$5["default"]["sapphire-feedback-message__body"]
-  }, body)), actions);
-};
-
-var __defProp$n = Object.defineProperty;
-var __defProps$l = Object.defineProperties;
-var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$n = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
-const useComboBoxState = (options) => {
-  const state = combobox.useComboBoxState(__spreadProps$l(__spreadValues$n({}, options), {
-    defaultFilter: (textValue, query) => {
-      if (query.length > 0) {
-        return options.defaultFilter ? options.defaultFilter(textValue, query) : textValue.toLowerCase().includes(query.toLowerCase());
-      } else {
-        return false;
-      }
-    }
-  }));
-  return __spreadProps$l(__spreadValues$n({}, state), {
-    open: (focusStrategy, triggerMode) => {
-      if (triggerMode !== "manual") {
-        state.open(focusStrategy, triggerMode);
-      }
-    }
-  });
-};
-
-var __defProp$m = Object.defineProperty;
-var __defProps$k = Object.defineProperties;
-var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
-var __hasOwnProp$m = Object.prototype.hasOwnProperty;
-var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$m = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$m.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$m(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
-var __objRest$h = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function SearchField(propsAndRef) {
-  var _b;
-  sapphireReact.useThemeCheck();
-  const _a = propsAndRef, { loadingState, loadingSkeletonRowsCount, forwardedRef } = _a, props = __objRest$h(_a, ["loadingState", "loadingSkeletonRowsCount", "forwardedRef"]);
-  const inputRef = utils$1.useObjectRef(forwardedRef);
-  const buttonRef = React.useRef(null);
-  const listBoxRef = utils.useFocusableRef(null);
-  const popoverRef = React.useRef(null);
-  const triggerRef = utils.useFocusableRef(null);
-  const {
-    styleProps: { style, className }
-  } = sapphireReact.useSapphireStyleProps(props);
-  const state = useComboBoxState(__spreadProps$k(__spreadValues$m({}, props), {
-    inputValue: props.value,
-    defaultInputValue: props.defaultValue,
-    onInputChange: props.onChange,
-    allowsEmptyCollection: false,
-    allowsCustomValue: true,
-    shouldCloseOnBlur: true
-  }));
-  const { inputProps: comboBoxInputProps, listBoxProps } = combobox$1.useComboBox(__spreadProps$k(__spreadValues$m({}, props), {
-    inputRef,
-    listBoxRef,
-    popoverRef
-  }), state);
-  const searchProps = {
-    "aria-label": props["aria-label"],
-    "aria-labelledby": props["aria-labelledby"],
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
-    value: state.inputValue,
-    onSubmit: (value) => {
-      var _a2;
-      if (!state.selectionManager.isFocused) {
-        (_a2 = props == null ? void 0 : props.onSubmit) == null ? void 0 : _a2.call(props, value);
-      }
-    },
-    onClear: () => {
-      var _a2;
-      state.setInputValue("");
-      (_a2 = props.onClear) == null ? void 0 : _a2.call(props);
-    }
-  };
-  const searchFieldState = searchfield.useSearchFieldState(searchProps);
-  const { clearButtonProps, inputProps: searchFieldInputProps } = searchfield$1.useSearchField(searchProps, searchFieldState, inputRef);
-  const { buttonProps } = sapphireReact.useButton(__spreadProps$k(__spreadValues$m({}, clearButtonProps), {
-    elementType: "div"
-  }), buttonRef);
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$6["default"]["sapphire-search-field"], className, {
-      [styles__default$6["default"]["sapphire-search-field--medium"]]: props.size === "medium",
-      [styles__default$6["default"]["sapphire-search-field--surface-secondary"]]: props.surface === "secondary",
-      [styles__default$6["default"]["is-disabled"]]: props.isDisabled
-    }),
-    style,
-    ref: triggerRef
-  }, /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: styles__default$6["default"]["sapphire-search-field__icon"]
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: props.size === "medium" ? "m" : "l"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.Search, null))), /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$k(__spreadValues$m({}, utils$1.mergeProps(comboBoxInputProps, searchFieldInputProps)), {
-    ref: inputRef,
-    className: clsx__default["default"](styles__default$6["default"]["sapphire-search-field__input"], {
-      [styles__default$6["default"]["sapphire-search-field__input--empty"]]: state.inputValue.length === 0
-    })
-  })), /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$m({
-    ref: buttonRef,
-    className: styles__default$6["default"]["sapphire-search-field__button"]
-  }, buttonProps), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: props.size === "medium" ? "m" : "l"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.CloseCircle, null))), state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ListBoxPopover, {
-    state,
-    triggerRef,
-    popoverRef,
-    listBoxRef,
-    listBoxProps,
-    loadingState,
-    loadingSkeletonRowsCount,
-    selectWidth: ((_b = triggerRef.current) == null ? void 0 : _b.offsetWidth) || 0,
-    size: props.size,
-    disableSelectedStyles: true,
-    isNonModal: true
-  }, props.children || []));
-}
-
-var __defProp$l = Object.defineProperty;
-var __defProps$j = Object.defineProperties;
-var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
-const ToastCloseButton = (props) => {
-  const ref = React.useRef(null);
-  const { buttonProps, isPressed } = sapphireReact.useButton(props, ref);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled: props.isDisabled });
-  const { focusProps, isFocusVisible } = focus.useFocusRing();
-  return /* @__PURE__ */ React__default["default"].createElement(focus.FocusRing, {
-    focusRingClass: clsx__default["default"](styles__default$7["default"]["is-focus"])
-  }, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$j(__spreadValues$l({}, utils$1.mergeProps(buttonProps, hoverProps, focusProps)), {
-    "aria-label": "Close",
-    ref,
-    className: clsx__default["default"](styles__default$7["default"]["sapphire-toast__close-button"], styles__default$7["default"]["js-focus"], styles__default$7["default"]["js-hover"], {
-      [styles__default$7["default"]["is-active"]]: isPressed,
-      [styles__default$7["default"]["is-hover"]]: isHovered,
-      [styles__default$7["default"]["is-focus"]]: isFocusVisible
-    })
-  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: "s"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.Close, null))));
-};
-
-var __defProp$k = Object.defineProperty;
-var __defProps$i = Object.defineProperties;
-var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
-var __objRest$g = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Toast = (_a) => {
-  var _b = _a, {
-    state
-  } = _b, props = __objRest$g(_b, [
-    "state"
-  ]);
-  var _a2;
-  const {
-    styleProps: { style, className }
-  } = sapphireReact.useSapphireStyleProps(props);
-  const ref = React.useRef(null);
-  const { toastProps, titleProps, closeButtonProps } = toast.useToast(props, state, ref);
-  const content = props.toast.content;
-  const icon = (_a2 = content.icon) != null ? _a2 : content.variant === "success" ? /* @__PURE__ */ React__default["default"].createElement(react.CheckMarkCircle, null) : null;
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$i(__spreadValues$k({}, toastProps), {
-    className: clsx__default["default"](styles__default$7["default"]["sapphire-toast"], props.toast.animation ? styles__default$7["default"][`sapphire-toast--${props.toast.animation}`] : {}, className),
-    style,
-    ref,
-    onAnimationEnd: () => {
-      if (props.toast.animation === "exiting") {
-        state.remove(props.toast.key);
-      }
-    }
-  }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$7["default"]["sapphire-toast__content"], {
-      [styles__default$7["default"]["sapphire-toast__content--success"]]: content.variant === "success"
-    })
-  }, icon && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: "m"
-  }, icon), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$i(__spreadValues$k({}, titleProps), {
-    className: clsx__default["default"]({
-      [styles__default$7["default"]["sapphire-toast__title--with-icon"]]: icon
-    })
-  }), content.content), /* @__PURE__ */ React__default["default"].createElement(ToastCloseButton, __spreadValues$k({}, closeButtonProps))));
-};
-
-var __defProp$j = Object.defineProperty;
-var __defProps$h = Object.defineProperties;
-var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
-var __objRest$f = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const ToastRegion = (_a) => {
-  var _b = _a, {
-    state,
-    placement = "bottom"
-  } = _b, props = __objRest$f(_b, [
-    "state",
-    "placement"
-  ]);
-  const ref = React.useRef(null);
-  const { regionProps } = toast.useToastRegion(props, state, ref);
-  const { overlayZIndex = 100 } = sapphireReact.useThemeContext();
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.SapphireOverlayContainer, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ThemeRoot, {
-    contrast: true
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$h(__spreadValues$j({}, regionProps), {
-    ref,
-    className: clsx__default["default"](styles__default$7["default"]["sapphire-toast-container"], styles__default$7["default"][`sapphire-toast-container--${placement}`]),
-    style: {
-      zIndex: overlayZIndex + 200
-    }
-  }), state.visibleToasts.map((toast) => /* @__PURE__ */ React__default["default"].createElement(Toast, __spreadProps$h(__spreadValues$j({}, props), {
-    key: toast.key,
-    toast,
-    state
-  }))))));
-};
-
-const ToastContext = React__default["default"].createContext(null);
-const useToastContext = () => {
-  const context = React.useContext(ToastContext);
-  return context;
-};
-
-var __defProp$i = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$i.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
-var __objRest$e = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const ToastProvider = (_a) => {
-  var _b = _a, {
-    children,
-    placement = "bottom"
-  } = _b, props = __objRest$e(_b, [
-    "children",
-    "placement"
-  ]);
-  sapphireReact.useThemeCheck();
-  const state = toast$1.useToastState({
-    maxVisibleToasts: 1,
-    hasExitAnimation: true
-  });
-  return /* @__PURE__ */ React__default["default"].createElement(ToastContext.Provider, {
-    value: state
-  }, children, state.visibleToasts.length > 0 && /* @__PURE__ */ React__default["default"].createElement(ToastRegion, __spreadProps$g(__spreadValues$i({}, props), {
-    state,
-    placement
-  })));
-};
-
-const useShowToast = () => {
-  const toastState = useToastContext();
-  if (!toastState) {
-    throw new Error('"useShowToast" should be used inside a <ToastProvider>.');
-  }
-  return (content, options) => {
-    const {
-      onClose,
-      timeout = 3e3,
-      variant = "neutral",
-      icon
-    } = options || {};
-    const toastData = {
-      content,
-      variant,
-      icon
-    };
-    toastState.add(toastData, { onClose, timeout });
-  };
-};
-
-var __defProp$h = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$h.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-function useTreeState(props) {
-  const state = tree.useTreeState(props);
-  const onToggle = (key) => {
-    state.setExpandedKeys(toggleKey(state.expandedKeys, key, props.expansionMode));
-  };
-  return __spreadProps$f(__spreadValues$h({}, state), { toggleKey: onToggle });
+        onClear == null ? void 0 : onClear();
+      },
+      isDisabled: !hasValue
+    }, clearButtonLabel), hasApplyButton ? applyButton : /* @__PURE__ */ React__default["default"].createElement(visuallyHidden.VisuallyHidden, null, applyButton))),
+    placement: "bottom left",
+    isOpen,
+    onOpenChange: setIsOpen,
+    noMaxWidth
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ToggleButton, {
+    icon: isOpen ? /* @__PURE__ */ React__default["default"].createElement(react.ChevronUp, null) : /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null),
+    iconAlign: "right",
+    isSelected: hasValue,
+    isDisabled
+  }, label, value ? ": " : "", value));
 }
-function toggleKey(set, key, expansionMode = "multiple") {
-  const res = new Set(set);
-  if (res.has(key)) {
-    res.delete(key);
-  } else {
-    if (expansionMode === "single")
-      res.clear();
-    res.add(key);
+
+const AccordionContext = React__default["default"].createContext({
+  sidePadding: void 0
+});
+function useAccordionContext() {
+  const context = React.useContext(AccordionContext);
+  if (context) {
+    return context;
   }
-  return res;
+  throw new Error("Accordion context can only be used within Accordion component.");
 }
 
-var __defProp$g = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+const customPaddingStyleProps = (sidePadding) => ({
+  paddingLeft: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`,
+  paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
+});
 function _AccordionItem(props) {
   const { state, item } = props;
+  const { sidePadding } = useAccordionContext();
   const isOpen = state.expandedKeys.has(item.key);
   const isDisabled = state.disabledKeys.has(item.key);
   const { isHovered, hoverProps } = interactions.useHover({ isDisabled });
@@ -2546,301 +141,37 @@ function _AccordionItem(props) {
     e.stopPropagation();
   };
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item"], {
-      [styles__default$8["default"]["sapphire-accordion__item--open"]]: isOpen,
-      [styles__default$8["default"]["is-disabled"]]: isDisabled
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item"], {
+      [styles__default["default"]["sapphire-accordion__item--open"]]: isOpen,
+      [styles__default["default"]["is-disabled"]]: isDisabled
     })
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     role: "heading",
     "aria-level": props.headerLevel
-  }, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$e(__spreadValues$g({}, utils$1.mergeProps(buttonProps, hoverProps, pressProps, focusProps)), {
+  }, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$b(__spreadValues$b({}, utils$1.mergeProps(buttonProps, hoverProps, pressProps, focusProps)), {
     "aria-disabled": isDisabled,
     ref,
-    className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-header"], styles__default$8["default"]["js-focus"], styles__default$8["default"]["js-hover"], {
-      [styles__default$8["default"]["is-focus"]]: isFocusVisible,
-      [styles__default$8["default"]["is-hover"]]: isHovered,
-      [styles__default$8["default"]["is-active"]]: isPressed
-    })
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-header"], styles__default["default"]["js-focus"], styles__default["default"]["js-hover"], {
+      [styles__default["default"]["is-focus"]]: isFocusVisible,
+      [styles__default["default"]["is-hover"]]: isHovered,
+      [styles__default["default"]["is-active"]]: isPressed
+    }),
+    style: sidePadding ? customPaddingStyleProps(sidePadding) : {}
   }), item.props.heading, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-arrow"])
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, null, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null))))), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$e(__spreadValues$g({}, utils$1.mergeProps(regionProps, { onKeyDown })), {
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-arrow"])
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, null, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null))))), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$b(__spreadValues$b({}, utils$1.mergeProps(regionProps, { onKeyDown })), {
     "aria-hidden": !isOpen,
-    className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-content-wrapper"])
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-content-wrapper"])
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-content"])
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-content"]),
+    style: sidePadding ? customPaddingStyleProps(sidePadding) : {}
   }, item.props.children)));
 }
 const AccordionItem = collections.Item;
 
-var __defProp$f = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-var __objRest$d = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const _Accordion$1 = (_a, ref) => {
-  var _b = _a, {
-    expansionMode = "multiple",
-    headerLevel = 5,
-    hideLastDivider = false
-  } = _b, props = __objRest$d(_b, [
-    "expansionMode",
-    "headerLevel",
-    "hideLastDivider"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const state = useTreeState(__spreadProps$d(__spreadValues$f({}, props), { expansionMode }));
-  const forwardedRef = utils$1.useObjectRef(ref);
-  const { accordionProps } = accordion.useAccordion(props, state, forwardedRef);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$d(__spreadValues$f({}, utils$1.mergeProps(accordionProps, utils$1.filterDOMProps(props, { labelable: true }))), {
-    className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion"], {
-      [styles__default$8["default"]["sapphire-accordion--without-last-divider"]]: hideLastDivider
-    }, styleProps.className),
-    ref: forwardedRef,
-    style: styleProps.style
-  }), [...state.collection].map((item) => /* @__PURE__ */ React__default["default"].createElement(_AccordionItem, {
-    headerLevel,
-    key: item.key,
-    item,
-    state
-  })));
-};
-const Accordion = React.forwardRef(_Accordion$1);
-
-var __defProp$e = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$c = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const AccordionHeading = (_a) => {
-  var _b = _a, {
-    children
-  } = _b, props = __objRest$c(_b, [
-    "children"
-  ]);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$c(__spreadValues$e({}, utils$1.filterDOMProps(props)), {
-    className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-heading"])
-  }), children);
-};
-
-const _Accordion = Object.assign(Accordion, {
-  Heading: AccordionHeading,
-  Item: AccordionItem
-});
-
-var __defProp$d = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __objRest$b = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Heading = React.forwardRef(function Heading2(props, ref) {
-  sapphireReact.useThemeCheck();
-  const domProps = utils$1.filterDOMProps(props);
-  const _a = props, { children, level, elementType } = _a, otherProps = __objRest$b(_a, ["children", "level", "elementType"]);
-  const { styleProps } = sapphireReact.useTextStyleProps(otherProps);
-  const HeadingTag = elementType ? elementType : `h${level}`;
-  return /* @__PURE__ */ React__default["default"].createElement(HeadingTag, __spreadProps$b(__spreadValues$d(__spreadValues$d({}, domProps), styleProps), {
-    className: clsx__default["default"](styles__default$9["default"]["sapphire-text"], styles__default$9["default"][`sapphire-text--heading-${level}`], styleProps.className, {
-      [styles__default$9["default"]["sapphire-text--heading-alternative"]]: props.fontVariant === "alternative"
-    }),
-    ref
-  }), children);
-});
-
-var __defProp$c = Object.defineProperty;
+var __defProp$a = Object.defineProperty;
 var __defProps$a = Object.defineProperties;
 var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-var __objRest$a = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Subheading = React.forwardRef(function Subheading2(props, ref) {
-  sapphireReact.useThemeCheck();
-  const _a = props, {
-    children,
-    level = 1,
-    elementType: CustomElement = "div",
-    isBold = false
-  } = _a, otherProps = __objRest$a(_a, [
-    "children",
-    "level",
-    "elementType",
-    "isBold"
-  ]);
-  const { styleProps } = sapphireReact.useTextStyleProps(otherProps);
-  const levelClassName = `sapphire-text--subheading-${level}`;
-  return /* @__PURE__ */ React__default["default"].createElement(CustomElement, __spreadProps$a(__spreadValues$c(__spreadValues$c({}, utils$1.filterDOMProps(props)), styleProps), {
-    className: clsx__default["default"](styleProps.className, styles__default$9["default"]["sapphire-text"], styles__default$9["default"][levelClassName], {
-      [styles__default$9["default"]["sapphire-text--strong"]]: isBold
-    }),
-    style: styleProps.style,
-    ref
-  }), children);
-});
-
-var __defProp$b = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$9 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Body = React.forwardRef(function Body2(props, ref) {
-  sapphireReact.useThemeCheck();
-  const _a = props, {
-    children,
-    level = 1,
-    elementType: CustomElement = "p",
-    isUnderlined = false,
-    isBold = false
-  } = _a, otherProps = __objRest$9(_a, [
-    "children",
-    "level",
-    "elementType",
-    "isUnderlined",
-    "isBold"
-  ]);
-  const { styleProps } = sapphireReact.useTextStyleProps(otherProps);
-  const levelClassName = `sapphire-text--body-${level}`;
-  return /* @__PURE__ */ React__default["default"].createElement(CustomElement, __spreadProps$9(__spreadValues$b(__spreadValues$b({}, utils$1.filterDOMProps(props)), styleProps), {
-    className: clsx__default["default"](styleProps.className, styles__default$9["default"]["sapphire-text"], styles__default$9["default"][levelClassName], {
-      [styles__default$9["default"]["sapphire-text--strong"]]: isBold,
-      [styles__default$9["default"]["sapphire-text--underlined"]]: isUnderlined
-    }),
-    style: styleProps.style,
-    ref
-  }), children);
-});
-
-var __defProp$a = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
 var __hasOwnProp$a = Object.prototype.hasOwnProperty;
 var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -2856,47 +187,29 @@ var __spreadValues$a = (a, b) => {
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$8 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Caption = React.forwardRef(function Caption2(props, ref) {
-  sapphireReact.useThemeCheck();
-  const _a = props, {
-    children,
-    level = 1,
-    elementType: CustomElement = "div"
-  } = _a, otherProps = __objRest$8(_a, [
-    "children",
-    "level",
-    "elementType"
-  ]);
-  const { styleProps } = sapphireReact.useTextStyleProps(otherProps);
-  const levelClassName = `sapphire-text--caption-${level}`;
-  return /* @__PURE__ */ React__default["default"].createElement(CustomElement, __spreadProps$8(__spreadValues$a(__spreadValues$a({}, utils$1.filterDOMProps(props)), styleProps), {
-    className: clsx__default["default"](styleProps.className, styles__default$9["default"]["sapphire-text"], styles__default$9["default"][levelClassName]),
-    style: styleProps.style,
-    ref
-  }), children);
-});
-
-const Typography = {
-  Heading,
-  Subheading,
-  Body,
-  Caption
-};
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+function useTreeState(props) {
+  const state = tree.useTreeState(props);
+  const onToggle = (key) => {
+    state.setExpandedKeys(toggleKey(state.expandedKeys, key, props.expansionMode));
+  };
+  return __spreadProps$a(__spreadValues$a({}, state), { toggleKey: onToggle });
+}
+function toggleKey(set, key, expansionMode = "multiple") {
+  const res = new Set(set);
+  if (res.has(key)) {
+    res.delete(key);
+  } else {
+    if (expansionMode === "single")
+      res.clear();
+    res.add(key);
+  }
+  return res;
+}
 
 var __defProp$9 = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
 var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
 var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
@@ -2912,6 +225,7 @@ var __spreadValues$9 = (a, b) => {
     }
   return a;
 };
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2924,55 +238,49 @@ var __objRest$7 = (source, exclude) => {
     }
   return target;
 };
-const Fieldset = (_a) => {
+const _Accordion$1 = (_a, ref) => {
   var _b = _a, {
-    label: label$1,
-    contextualHelp,
-    note,
-    error,
-    isDisabled,
-    isRequired,
-    necessityIndicator,
-    children,
-    size = "large",
-    labelPlacement = "above"
+    expansionMode = "multiple",
+    headerLevel = 5,
+    hideLastDivider = false,
+    hasNegativeSideMargin = false,
+    sidePadding
   } = _b, props = __objRest$7(_b, [
-    "label",
-    "contextualHelp",
-    "note",
-    "error",
-    "isDisabled",
-    "isRequired",
-    "necessityIndicator",
-    "children",
-    "size",
-    "labelPlacement"
+    "expansionMode",
+    "headerLevel",
+    "hideLastDivider",
+    "hasNegativeSideMargin",
+    "sidePadding"
   ]);
   sapphireReact.useThemeCheck();
-  const { fieldProps, descriptionProps, errorMessageProps } = label.useField({
-    isInvalid: !!error,
-    label: label$1
-  });
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadValues$9({
-    elementType: "fieldset",
-    error: !!error,
-    isDisabled,
-    size,
-    labelPlacement
-  }, utils$1.mergeProps(props, fieldProps)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, {
-    elementType: "legend"
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, {
-    size,
-    necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
-    contextualHelp
-  }, label$1)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, {
-    isGroup: true
-  }, children), (error || note) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, error ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$9({}, errorMessageProps), error) : note ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, __spreadValues$9({}, descriptionProps), note) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)));
+  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
+  const state = useTreeState(__spreadProps$9(__spreadValues$9({}, props), { expansionMode }));
+  const forwardedRef = utils$1.useObjectRef(ref);
+  const { accordionProps } = accordion.useAccordion(props, state, forwardedRef);
+  return /* @__PURE__ */ React__default["default"].createElement(AccordionContext.Provider, {
+    value: { sidePadding }
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$9(__spreadValues$9({}, utils$1.mergeProps(accordionProps, utils$1.filterDOMProps(props, { labelable: true }))), {
+    ref: forwardedRef,
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion"], {
+      [styles__default["default"]["sapphire-accordion--without-last-divider"]]: hideLastDivider,
+      [styles__default["default"]["sapphire-accordion--negative-margin-self"]]: !sidePadding && hasNegativeSideMargin
+    }, styleProps.className),
+    style: __spreadValues$9(__spreadValues$9({}, sidePadding && hasNegativeSideMargin ? {
+      marginLeft: typeof sidePadding === "string" ? `calc(${sidePadding} * -1)` : `-${sidePadding}px`,
+      width: `calc(100% + calc(${sidePadding} * 2${typeof sidePadding === "string" ? "" : "px"}))`
+    } : {}), styleProps.style)
+  }), [...state.collection].map((item) => /* @__PURE__ */ React__default["default"].createElement(_AccordionItem, {
+    headerLevel,
+    key: item.key,
+    item,
+    state
+  }))));
 };
+const Accordion = React.forwardRef(_Accordion$1);
 
 var __defProp$8 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
 var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
 var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
@@ -2988,7 +296,7 @@ var __spreadValues$8 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3001,13 +309,60 @@ var __objRest$6 = (source, exclude) => {
     }
   return target;
 };
+const AccordionHeading = (_a) => {
+  var _b = _a, {
+    children
+  } = _b, props = __objRest$6(_b, [
+    "children"
+  ]);
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$8(__spreadValues$8({}, utils$1.filterDOMProps(props)), {
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-heading"])
+  }), children);
+};
+
+const _Accordion = Object.assign(Accordion, {
+  Heading: AccordionHeading,
+  Item: AccordionItem
+});
+
+var __defProp$7 = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __objRest$5 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const HiddenFileInput = React__default["default"].forwardRef(function InputWrapper(props, ref) {
   const { onChange } = props;
   const onFileInputChange = (inputElement) => {
     onChange == null ? void 0 : onChange(inputElement);
     inputElement.target.value = "";
   };
-  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$7(__spreadValues$8({}, props), {
+  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$7(__spreadValues$7({}, props), {
     onChange: onFileInputChange,
     ref,
     type: "file",
@@ -3021,7 +376,7 @@ const FileTrigger = React__default["default"].forwardRef(function FileTriggerWra
     onSelect = () => null,
     children,
     isDisabled = false
-  } = _a, rest = __objRest$6(_a, [
+  } = _a, rest = __objRest$5(_a, [
     "acceptedFileTypes",
     "allowsMultiple",
     "onSelect",
@@ -3035,7 +390,7 @@ const FileTrigger = React__default["default"].forwardRef(function FileTriggerWra
       var _a2;
       (_a2 = inputRef.current) == null ? void 0 : _a2.click();
     }
-  }, children), /* @__PURE__ */ React__default["default"].createElement(HiddenFileInput, __spreadProps$7(__spreadValues$8({}, domProps), {
+  }, children), /* @__PURE__ */ React__default["default"].createElement(HiddenFileInput, __spreadProps$7(__spreadValues$7({}, domProps), {
     disabled: isDisabled,
     ref: inputRef,
     accept: acceptedFileTypes == null ? void 0 : acceptedFileTypes.toString(),
@@ -3107,21 +462,21 @@ var intlMessages$1 = {
   "sv-SE": se$1
 };
 
-var __defProp$7 = Object.defineProperty;
+var __defProp$6 = Object.defineProperty;
 var __defProps$6 = Object.defineProperties;
 var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
@@ -3146,12 +501,12 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
     dropProps,
     dropButtonProps,
     isDropTarget: isDropping
-  } = dnd.useDrop(__spreadProps$6(__spreadValues$7({}, props), {
+  } = dnd.useDrop(__spreadProps$6(__spreadValues$6({}, props), {
     ref: pressableRef,
     hasDropButton: true,
     isDisabled
   }));
-  const { buttonProps } = sapphireReact.useButton(__spreadProps$6(__spreadValues$7({}, dropButtonProps), { elementType: "div" }), pressableRef);
+  const { buttonProps } = sapphireReact.useButton(__spreadProps$6(__spreadValues$6({}, dropButtonProps), { elementType: "div" }), pressableRef);
   const { focusProps, isFocusVisible } = focus.useFocusRing();
   const { pressProps, isPressed } = interactions.usePress({});
   const { clipboardProps } = dnd.useClipboard({
@@ -3182,165 +537,36 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
   }, /* @__PURE__ */ React__default["default"].createElement(interactions.Pressable, {
     ref: pressableRef,
     onPress: onFileSelectOpen
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$6(__spreadValues$7({}, utils$1.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps, pressProps)), {
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$6(__spreadValues$6({}, utils$1.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps, pressProps)), {
     ref,
-    style: __spreadValues$7({}, styleProps.style),
-    className: clsx__default["default"](styles__default$a["default"]["sapphire-dropzone"], styles__default$a["default"]["js-focus"], styles__default$a["default"]["js-hover"], {
-      [styles__default$a["default"]["is-hover"]]: isHovered && !isDropping,
-      [styles__default$a["default"]["is-active"]]: isPressed,
-      [styles__default$a["default"]["is-disabled"]]: isDisabled,
-      [styles__default$a["default"]["is-focus"]]: isFocusVisible,
-      [styles__default$a["default"]["sapphire-dropzone--dropping"]]: isDropping,
-      [styles__default$a["default"]["sapphire-dropzone--error"]]: hasError
+    style: __spreadValues$6({}, styleProps.style),
+    className: clsx__default["default"](styles__default$1["default"]["sapphire-dropzone"], styles__default$1["default"]["js-focus"], styles__default$1["default"]["js-hover"], {
+      [styles__default$1["default"]["is-hover"]]: isHovered && !isDropping,
+      [styles__default$1["default"]["is-active"]]: isPressed,
+      [styles__default$1["default"]["is-disabled"]]: isDisabled,
+      [styles__default$1["default"]["is-focus"]]: isFocusVisible,
+      [styles__default$1["default"]["sapphire-dropzone--dropping"]]: isDropping,
+      [styles__default$1["default"]["sapphire-dropzone--error"]]: hasError
     }, styleProps.className),
     "aria-label": ariaLabel,
     "aria-invalid": hasError,
     "aria-describedby": paragraphId
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$a["default"]["sapphire-dropzone__content"])
+    className: clsx__default["default"](styles__default$1["default"]["sapphire-dropzone__content"])
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$a["default"]["sapphire-dropzone__icon"])
+    className: clsx__default["default"](styles__default$1["default"]["sapphire-dropzone__icon"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, null, /* @__PURE__ */ React__default["default"].createElement(react.Upload, null))), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$a["default"]["sapphire-dropzone__heading"])
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Heading, {
+    className: clsx__default["default"](styles__default$1["default"]["sapphire-dropzone__heading"])
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Heading, {
     level: 6
   }, isDropping ? format("dropzone-heading-dropping") : format("dropzone-heading-default"))), /* @__PURE__ */ React__default["default"].createElement("div", {
     id: paragraphId,
-    className: clsx__default["default"](styles__default$a["default"]["sapphire-dropzone__paragraph"])
-  }, /* @__PURE__ */ React__default["default"].createElement(Body, {
+    className: clsx__default["default"](styles__default$1["default"]["sapphire-dropzone__paragraph"])
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
     level: 2
   }, renderInstruction(isDropping)))))));
 });
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$5 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const AlertDialog = React__default["default"].forwardRef(function AlertDialog2(props, ref) {
-  sapphireReact.useThemeCheck();
-  const _a = props, {
-    variant = "neutral",
-    icon,
-    body,
-    actionsOrientation = "horizontal",
-    actions,
-    heading
-  } = _a, rest = __objRest$5(_a, [
-    "variant",
-    "icon",
-    "body",
-    "actionsOrientation",
-    "actions",
-    "heading"
-  ]);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Dialog, __spreadValues$6({
-    ref,
-    role: "alertdialog",
-    type: "active",
-    size: "extra-small",
-    header: null,
-    footer: null,
-    content: /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Dialog.Content, null, /* @__PURE__ */ React__default["default"].createElement(FeedbackMessage, {
-      marginTop: sapphireReact.tokens.size.spacing60,
-      heading: /* @__PURE__ */ React__default["default"].createElement(sapphireReact.DialogTitle, null, (titleProps) => /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Heading, __spreadValues$6({
-        level: 6
-      }, titleProps), heading)),
-      variant,
-      icon,
-      body,
-      actions: /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ButtonGroup, {
-        width: "100%",
-        stretch: "autoVertical",
-        orientation: actionsOrientation
-      }, actions)
-    }))
-  }, rest));
-});
-
-var __defProp$5 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$4 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const useSapphireNumberField = (_a, ref) => {
-  var _b = _a, { error } = _b, numberFieldProps = __objRest$4(_b, ["error"]);
-  const { locale } = i18n.useLocale();
-  const numberFieldState = numberfield.useNumberFieldState(__spreadProps$5(__spreadValues$5({}, numberFieldProps), {
-    locale
-  }));
-  const numberFieldAria = numberfield$1.useNumberField(__spreadProps$5(__spreadValues$5({}, numberFieldProps), {
-    validationState: error === false || error === void 0 ? void 0 : "invalid"
-  }), numberFieldState, ref);
-  return numberFieldAria;
-};
-
-function useAutofillStyle(inputRef) {
-  const [styles, setStyles] = React.useState({});
-  const updateStyle = () => {
-    const input = inputRef.current;
-    if (input) {
-      const color = window.getComputedStyle(input).backgroundColor;
-      setStyles({
-        boxShadow: `-100px 0 ${color}, 100px 0 ${color}`
-      });
-    }
-  };
-  return {
-    autofillStyles: styles,
-    updateStyle
-  };
-}
-
 var increment$6 = "øge";
 var decrement$6 = "formindske";
 var da = {
@@ -3400,6 +626,76 @@ var intlMessages = {
   "sv-SE": se
 };
 
+var __defProp$5 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __objRest$4 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const StepperButton = (_a) => {
+  var _b = _a, {
+    variant,
+    size
+  } = _b, props = __objRest$4(_b, [
+    "variant",
+    "size"
+  ]);
+  const ref = React.useRef(null);
+  const { buttonProps, isPressed } = sapphireReact.useButton(props, ref);
+  const { hoverProps, isHovered } = interactions.useHover({ isDisabled: props.isDisabled });
+  return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$5(__spreadValues$5({}, utils$1.mergeProps(buttonProps, hoverProps, utils$1.filterDOMProps(props))), {
+    ref,
+    className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__stepper-button"], textFieldStyles__default["default"]["js-hover"], {
+      [textFieldStyles__default["default"]["is-active"]]: isPressed,
+      [textFieldStyles__default["default"]["is-hover"]]: isHovered
+    })
+  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
+    size: size === "lg" ? "md" : "sm"
+  }, variant === "increment" ? /* @__PURE__ */ React__default["default"].createElement(react.CaretUp, null) : /* @__PURE__ */ React__default["default"].createElement(react.CaretDown, null)));
+};
+
+function useAutofillStyle(inputRef) {
+  const [styles, setStyles] = React.useState({});
+  const updateStyle = () => {
+    const input = inputRef.current;
+    if (input) {
+      const color = window.getComputedStyle(input).backgroundColor;
+      setStyles({
+        boxShadow: `-100px 0 ${color}, 100px 0 ${color}`
+      });
+    }
+  };
+  return {
+    autofillStyles: styles,
+    updateStyle
+  };
+}
+
 var __defProp$4 = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
 var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
@@ -3431,26 +727,16 @@ var __objRest$3 = (source, exclude) => {
     }
   return target;
 };
-const StepperButton = (_a) => {
-  var _b = _a, {
-    variant,
-    size
-  } = _b, props = __objRest$3(_b, [
-    "variant",
-    "size"
-  ]);
-  const ref = React.useRef(null);
-  const { buttonProps, isPressed } = sapphireReact.useButton(props, ref);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled: props.isDisabled });
-  return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$4(__spreadValues$4({}, utils$1.mergeProps(buttonProps, hoverProps, utils$1.filterDOMProps(props))), {
-    ref,
-    className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__stepper-button"], textFieldStyles__default["default"]["js-hover"], {
-      [textFieldStyles__default["default"]["is-active"]]: isPressed,
-      [textFieldStyles__default["default"]["is-hover"]]: isHovered
-    })
-  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: size === "large" ? "m" : "s"
-  }, variant === "increment" ? /* @__PURE__ */ React__default["default"].createElement(react.CaretUp, null) : /* @__PURE__ */ React__default["default"].createElement(react.CaretDown, null)));
+const useSapphireNumberField = (_a, ref) => {
+  var _b = _a, { error } = _b, numberFieldProps = __objRest$3(_b, ["error"]);
+  const { locale } = i18n.useLocale();
+  const numberFieldState = numberfield.useNumberFieldState(__spreadProps$4(__spreadValues$4({}, numberFieldProps), {
+    locale
+  }));
+  const numberFieldAria = numberfield$1.useNumberField(__spreadProps$4(__spreadValues$4({}, numberFieldProps), {
+    validationState: error === false || error === void 0 ? void 0 : "invalid"
+  }), numberFieldState, ref);
+  return numberFieldAria;
 };
 
 var __defProp$3 = Object.defineProperty;
@@ -3494,7 +780,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     contextualHelp,
     prefix,
     postfix,
-    size = "large",
+    size = "lg",
     labelPlacement = "above",
     necessityIndicator = false,
     alignInputRight,
@@ -3535,14 +821,14 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
   const { focusProps, isFocusVisible } = focus.useFocusRing(props);
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
   const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
-  const domRef = React.useRef(null);
-  React.useImperativeHandle(ref, () => __spreadProps$3(__spreadValues$3({}, utils.createFocusableRef(domRef, inputRef)), {
+  const containerRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => __spreadProps$3(__spreadValues$3({}, utils$2.createFocusableRef(containerRef, inputRef)), {
     getInputElement() {
       return inputRef.current;
     }
   }));
   return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$3(__spreadValues$3({}, removeUniqueDOMProps(otherProps)), {
-    ref: domRef,
+    ref: containerRef,
     isDisabled,
     error: !!error,
     size,
@@ -3555,7 +841,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field"], {
       [textFieldStyles__default["default"]["is-focus"]]: isFocusVisible,
       [textFieldStyles__default["default"]["sapphire-text-field--error"]]: error === true || typeof error === "string",
-      [textFieldStyles__default["default"]["sapphire-text-field--medium"]]: size === "medium"
+      [textFieldStyles__default["default"]["sapphire-text-field--md"]]: size === "md"
     }),
     style: __spreadValues$3({}, styleProps.style.width ? { width: styleProps.style.width } : {})
   }, prefix && /* @__PURE__ */ React__default["default"].createElement("span", {
@@ -3642,7 +928,7 @@ function Tag(props) {
   const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
   const hasAction = otherProps.hasAction;
   return /* @__PURE__ */ React__default["default"].createElement(focus.FocusRing, {
-    focusRingClass: styles__default$b["default"]["is-focus"]
+    focusRingClass: styles__default$2["default"]["is-focus"]
   }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$2(__spreadProps$2(__spreadValues$2({
     ref
   }, utils$1.mergeProps({
@@ -3654,30 +940,30 @@ function Tag(props) {
       }
     }
   }, rowProps, hoverProps)), {
-    className: clsx__default["default"](styles__default$b["default"]["sapphire-tag"], styles__default$b["default"]["js-focus"], styles__default$b["default"]["js-hover"], {
-      [styles__default$b["default"]["sapphire-tag--actionable"]]: hasAction,
-      [styles__default$b["default"]["is-active"]]: hasAction && isPressed,
-      [styles__default$b["default"]["is-hover"]]: hasAction && isHovered,
-      [styles__default$b["default"]["is-disabled"]]: isDisabled
+    className: clsx__default["default"](styles__default$2["default"]["sapphire-tag"], styles__default$2["default"]["js-focus"], styles__default$2["default"]["js-hover"], {
+      [styles__default$2["default"]["sapphire-tag--actionable"]]: hasAction,
+      [styles__default$2["default"]["is-active"]]: hasAction && isPressed,
+      [styles__default$2["default"]["is-hover"]]: hasAction && isHovered,
+      [styles__default$2["default"]["is-disabled"]]: isDisabled
     })
   }), hasError ? { "aria-invalid": true } : {}), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$2(__spreadValues$2({}, gridCellProps), {
-    className: styles__default$b["default"]["sapphire-tag__content"]
+    className: styles__default$2["default"]["sapphire-tag__content"]
   }), hasError && /* @__PURE__ */ React__default["default"].createElement(IconError, null), item.rendered, allowsRemoving && /* @__PURE__ */ React__default["default"].createElement(RemoveButton, __spreadValues$2({}, removeButtonProps)))));
 }
 function RemoveButton(removeButtonProps) {
   const buttonRef = React.useRef(null);
   const { buttonProps } = button.useButton(removeButtonProps, buttonRef);
   return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$2(__spreadValues$2({}, buttonProps), {
-    className: clsx__default["default"](styles__default$b["default"]["sapphire-tag__button"], styles__default$b["default"]["js-focus"])
+    className: clsx__default["default"](styles__default$2["default"]["sapphire-tag__button"], styles__default$2["default"]["js-focus"])
   }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: "s"
+    size: "sm"
   }, /* @__PURE__ */ React__default["default"].createElement(react.Close, null)));
 }
 const IconError = () => {
   return /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: clsx__default["default"](styles__default$b["default"]["sapphire-tag__error-icon"])
+    className: clsx__default["default"](styles__default$2["default"]["sapphire-tag__error-icon"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: "s"
+    size: "sm"
   }, /* @__PURE__ */ React__default["default"].createElement(react.AlertCircle, null)));
 };
 
@@ -3738,7 +1024,7 @@ function TagGroup(props) {
     contextualHelp
   }), labelText)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$1(__spreadValues$1({}, gridProps), {
     ref,
-    className: styles__default$b["default"]["sapphire-tag-group"]
+    className: styles__default$2["default"]["sapphire-tag-group"]
   }), [...state.collection].map((item) => /* @__PURE__ */ React__default["default"].createElement(Tag, {
     key: item.key,
     item,
@@ -3775,7 +1061,7 @@ function LabeledValue(props) {
     contextualHelp,
     label: label$1,
     labelPlacement = "above",
-    size = "large"
+    size = "lg"
   } = props;
   const { fieldProps } = label.useField({ label: label$1 });
   return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps(__spreadValues({}, fieldProps), {
@@ -3785,8 +1071,8 @@ function LabeledValue(props) {
     contextualHelp,
     size
   }, label$1)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$c["default"]["sapphire-labeled-value"], {
-      [styles__default$c["default"]["sapphire-labeled-value--medium"]]: size === "medium"
+    className: clsx__default["default"](styles__default$3["default"]["sapphire-labeled-value"], {
+      [styles__default$3["default"]["sapphire-labeled-value--md"]]: size === "md"
     })
   }, children)));
 }
@@ -3796,27 +1082,12 @@ Object.defineProperty(exports, 'useLocale', {
   get: function () { return i18n.useLocale; }
 });
 exports.Accordion = _Accordion;
-exports.AlertDialog = AlertDialog;
-exports.Avatar = Avatar;
-exports.Calendar = Calendar;
-exports.DateField = DateField;
-exports.DateRangeField = DateRangeField;
-exports.FeedbackMessage = FeedbackMessage;
-exports.Fieldset = Fieldset;
+exports.AccordionContext = AccordionContext;
 exports.FileDropzone = FileDropzone;
 exports.FileTrigger = FileTrigger;
 exports.FilterDropdown = FilterDropdown;
 exports.LabeledValue = LabeledValue;
-exports.NotificationBadge = NotificationBadge;
 exports.NumberField = NumberField;
-exports.RangeCalendar = RangeCalendar;
-exports.SearchField = SearchField;
 exports.TagGroup = TagGroup;
 exports.TagItem = TagItem;
-exports.ToastProvider = ToastProvider;
-exports.ToggleButton = ToggleButton;
-exports.Typography = Typography;
-exports.isDateOutsideValidRange = isDateOutsideValidRange;
-exports.isEndDateBeforeStartDate = isEndDateBeforeStartDate;
-exports.useShowToast = useShowToast;
 //# sourceMappingURL=index.js.map