@danske/sapphire-react-lab 0.103.0 → 0.105.1

package/build/cjs/index.js

@@ -4,41 +4,44 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var clsx = require('clsx');
-var accordion = require('@react-aria/accordion');
 var utils = require('@react-aria/utils');
 var styles = require('@danske/sapphire-css/components/accordion/accordion.module.css');
 var sapphireReact = require('@danske/sapphire-react');
 var focus = require('@react-aria/focus');
-var collections = require('@react-stately/collections');
+var reactAriaComponents = require('react-aria-components');
 var react = require('@danske/sapphire-icons/react');
-var tree = require('@react-stately/tree');
 var alertStyles = require('@danske/sapphire-css/components/alert/alert.module.css');
-var combobox = require('@react-aria/combobox');
 var i18n = require('@react-aria/i18n');
+var styles$1 = require('@danske/sapphire-css/components/amount/amount.module.css');
+var combobox = require('@react-aria/combobox');
 var utils$1 = require('@react-spectrum/utils');
 var breadcrumbs = require('@react-aria/breadcrumbs');
-var collections$1 = require('@react-aria/collections');
-var reactAriaComponents = require('react-aria-components');
-var styles$1 = require('@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css');
-var styles$2 = require('@danske/sapphire-css/components/dropzone/dropzone.module.css');
+var collections = require('@react-aria/collections');
+var styles$2 = require('@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css');
+var styles$3 = require('@danske/sapphire-css/components/dropzone/dropzone.module.css');
 var interactions = require('@react-aria/interactions');
 var dnd = require('@react-aria/dnd');
 var visuallyHidden = require('@react-aria/visually-hidden');
 var utils$2 = require('@react-stately/utils');
-var styles$3 = require('@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css');
-var styles$4 = require('@danske/sapphire-css/components/flag/flag.module.css');
+var styles$4 = require('@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css');
+var styles$5 = require('@danske/sapphire-css/components/flag/flag.module.css');
 var label = require('@react-aria/label');
 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 styles$5 = require('@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css');
+var styles$6 = require('@danske/sapphire-css/components/sidebar/sidebar.module.css');
+var buttonStyles = require('@danske/sapphire-css/components/button/button.module.css');
+var reactTransitionGroup = require('react-transition-group');
+var listbox = require('@react-aria/listbox');
+var styles$7 = require('@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css');
 var progress = require('@react-aria/progress');
-var styles$6 = require('@danske/sapphire-css/components/slider/slider.module.css');
+var styles$8 = require('@danske/sapphire-css/components/slider/slider.module.css');
 var tag = require('@react-aria/tag');
 var list = require('@react-stately/list');
-var styles$7 = require('@danske/sapphire-css/components/tag/tag.module.css');
+var styles$9 = require('@danske/sapphire-css/components/tag/tag.module.css');
 var button = require('@react-aria/button');
-var styles$8 = require('@danske/sapphire-css/components/dateField/dateField.module.css');
+var collections$1 = require('@react-stately/collections');
+var styles$a = require('@danske/sapphire-css/components/dateField/dateField.module.css');
 var datepicker = require('@react-aria/datepicker');
 var datepicker$1 = require('@react-stately/datepicker');
 
@@ -52,14 +55,18 @@ var styles__default$1 = /*#__PURE__*/_interopDefaultLegacy(styles$1);
 var styles__default$2 = /*#__PURE__*/_interopDefaultLegacy(styles$2);
 var styles__default$3 = /*#__PURE__*/_interopDefaultLegacy(styles$3);
 var styles__default$4 = /*#__PURE__*/_interopDefaultLegacy(styles$4);
-var textFieldStyles__default = /*#__PURE__*/_interopDefaultLegacy(textFieldStyles);
 var styles__default$5 = /*#__PURE__*/_interopDefaultLegacy(styles$5);
+var textFieldStyles__default = /*#__PURE__*/_interopDefaultLegacy(textFieldStyles);
 var styles__default$6 = /*#__PURE__*/_interopDefaultLegacy(styles$6);
+var buttonStyles__default = /*#__PURE__*/_interopDefaultLegacy(buttonStyles);
 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);
 
 const AccordionContext = React__default["default"].createContext({
-  sidePadding: void 0
+  sidePadding: void 0,
+  headerLevel: 5
 });
 function useAccordionContext() {
   const context = React.useContext(AccordionContext);
@@ -69,254 +76,297 @@ function useAccordionContext() {
   throw new Error("Accordion context can only be used within Accordion component.");
 }
 
-var __defProp$n = Object.defineProperty;
-var __defProps$m = Object.defineProperties;
-var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
-var __hasOwnProp$o = Object.prototype.hasOwnProperty;
-var __propIsEnum$o = 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$o.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(b)) {
-      if (__propIsEnum$o.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(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 { focusProps, isFocusVisible } = focus.useFocusRing();
-  const ref = React.useRef(null);
-  const { buttonProps, regionProps } = accordion.useAccordionItem(props, state, ref);
-  const onKeyDown = (e) => {
-    e.stopPropagation();
-  };
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    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$m(__spreadValues$n({}, utils.mergeProps(buttonProps, focusProps)), {
-    "aria-disabled": isDisabled,
-    ref,
-    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-header"], styles__default["default"]["js-focus"], {
-      [styles__default["default"]["is-focus"]]: isFocusVisible
-    }),
-    style: sapphireReact.withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}
-  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Heading, {
-    level: 6
-  }, item.props.heading), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-arrow"])
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: "lg"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null))))), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$m(__spreadValues$n({}, utils.mergeProps(regionProps, { onKeyDown })), {
-    "aria-hidden": !isOpen,
-    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-content-wrapper"])
-  }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-content"]),
-    style: sapphireReact.withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}
-  }, item.props.children)));
-}
-const AccordionItem = collections.Item;
-
-var __defProp$m = 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$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$n.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$m(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
-function useTreeState(props) {
-  const state = tree.useTreeState(props);
-  const onToggle = (key) => {
-    state.setExpandedKeys(toggleKey(state.expandedKeys, key, props.expansionMode));
-  };
-  return __spreadProps$l(__spreadValues$m({}, 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$l = 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$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) => {
+var __defProp$x = 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$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$m.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$x.call(b, prop))
+      __defNormalProp$x(a, prop, b[prop]);
+  if (__getOwnPropSymbols$x)
+    for (var prop of __getOwnPropSymbols$x(b)) {
+      if (__propIsEnum$x.call(b, prop))
+        __defNormalProp$x(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
-var __objRest$j = (source, exclude) => {
+var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
+var __objRest$u = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$x.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))
+  if (source != null && __getOwnPropSymbols$x)
+    for (var prop of __getOwnPropSymbols$x(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$x.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const _Accordion$1 = (_a, ref) => {
+const Accordion = React.forwardRef(function Accordion2(_a, ref) {
   var _b = _a, {
-    expansionMode = "multiple",
+    allowsMultipleExpanded = true,
     headerLevel = 5,
     hideLastDivider = false,
     hasNegativeSideMargin = false,
-    sidePadding
-  } = _b, props = __objRest$j(_b, [
-    "expansionMode",
+    sidePadding,
+    children,
+    expandedKeys,
+    defaultExpandedKeys,
+    onExpandedChange,
+    isDisabled
+  } = _b, props = __objRest$u(_b, [
+    "allowsMultipleExpanded",
     "headerLevel",
     "hideLastDivider",
     "hasNegativeSideMargin",
-    "sidePadding"
+    "sidePadding",
+    "children",
+    "expandedKeys",
+    "defaultExpandedKeys",
+    "onExpandedChange",
+    "isDisabled"
   ]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const state = useTreeState(__spreadProps$k(__spreadValues$l({}, props), { expansionMode }));
   const forwardedRef = utils.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$k(__spreadValues$l({}, utils.mergeProps(accordionProps, utils.filterDOMProps(props, { global: true, labelable: true }))), {
+  return /* @__PURE__ */ React__default["default"].createElement(focus.FocusScope, null, /* @__PURE__ */ React__default["default"].createElement(AccordionContext.Provider, {
+    value: { sidePadding, headerLevel }
+  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.DisclosureGroup, __spreadProps$u(__spreadValues$x({}, utils.filterDOMProps(props, { global: true, labelable: true })), {
+    allowsMultipleExpanded,
+    expandedKeys,
+    defaultExpandedKeys,
+    onExpandedChange,
+    isDisabled,
     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"]]: !sapphireReact.withTruthyZero(sidePadding) && hasNegativeSideMargin
     }, styleProps.className),
-    style: __spreadValues$l(__spreadValues$l({}, sapphireReact.withTruthyZero(sidePadding) && hasNegativeSideMargin ? {
+    style: __spreadValues$x(__spreadValues$x({}, sapphireReact.withTruthyZero(sidePadding) && hasNegativeSideMargin ? {
       marginLeft: typeof sidePadding === "string" ? `calc(${sidePadding} * -1)` : `-${sidePadding}px`,
       width: `calc(100% + calc(${sidePadding} * 2${typeof sidePadding === "string" ? "" : "px"}))`
     } : {}), styleProps.style)
-  }), Array.from(state.collection).map((item) => /* @__PURE__ */ React__default["default"].createElement(_AccordionItem, {
-    headerLevel,
-    key: item.key,
-    item,
-    state
-  }))));
-};
-const Accordion = React.forwardRef(_Accordion$1);
+  }), children)));
+});
 
-var __defProp$k = 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$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) => {
+const customPaddingStyleProps = (sidePadding) => ({
+  paddingLeft: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`,
+  paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
+});
+
+var __defProp$w = 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$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$l.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$w.call(b, prop))
+      __defNormalProp$w(a, prop, b[prop]);
+  if (__getOwnPropSymbols$w)
+    for (var prop of __getOwnPropSymbols$w(b)) {
+      if (__propIsEnum$w.call(b, prop))
+        __defNormalProp$w(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
-var __objRest$i = (source, exclude) => {
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __objRest$t = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$w.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
+  if (source != null && __getOwnPropSymbols$w)
+    for (var prop of __getOwnPropSymbols$w(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$w.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const AccordionHeading = (_a) => {
-  var _b = _a, {
-    children
-  } = _b, props = __objRest$i(_b, [
-    "children"
-  ]);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$j(__spreadValues$k({}, utils.filterDOMProps(props, { global: true })), {
+const AccordionHeading = React.forwardRef(function AccordionHeading2(_a, ref) {
+  var _b = _a, { children, headerLevel } = _b, props = __objRest$t(_b, ["children", "headerLevel"]);
+  const { sidePadding, headerLevel: contextHeaderLevel } = useAccordionContext();
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$t(__spreadValues$w({
+    role: "heading",
+    "aria-level": headerLevel != null ? headerLevel : contextHeaderLevel
+  }, utils.filterDOMProps(props, { global: true })), {
+    ref
+  }), /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Button, {
+    slot: "trigger",
+    className: ({ isFocusVisible }) => clsx__default["default"](styles__default["default"]["sapphire-accordion__item-header"], styles__default["default"]["js-focus"], {
+      [styles__default["default"]["is-focus"]]: isFocusVisible
+    }),
+    style: sapphireReact.withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Heading, {
+    level: 6,
+    elementType: "span"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-heading"])
-  }), children);
+  }, children)), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-arrow"])
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
+    size: "lg"
+  }, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null)))));
+});
+
+var __defProp$v = Object.defineProperty;
+var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
+var __hasOwnProp$v = Object.prototype.hasOwnProperty;
+var __propIsEnum$v = 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$v.call(b, prop))
+      __defNormalProp$v(a, prop, b[prop]);
+  if (__getOwnPropSymbols$v)
+    for (var prop of __getOwnPropSymbols$v(b)) {
+      if (__propIsEnum$v.call(b, prop))
+        __defNormalProp$v(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$s = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$v.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$v)
+    for (var prop of __getOwnPropSymbols$v(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$v.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
 };
+const AccordionItem = React.forwardRef(function AccordionItem2(_a, forwardedRef) {
+  var _b = _a, { children, id } = _b, props = __objRest$s(_b, ["children", "id"]);
+  const ref = utils.useObjectRef(forwardedRef);
+  const focusManager = focus.useFocusManager();
+  const onKeyDown = (e) => {
+    if (!focusManager)
+      return;
+    if (!(e.target instanceof Element) || e.target.getAttribute("slot") !== "trigger")
+      return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusManager.focusNext();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusManager.focusPrevious();
+        break;
+      case "Home":
+        e.preventDefault();
+        focusManager.focusFirst();
+        break;
+      case "End":
+        e.preventDefault();
+        focusManager.focusLast();
+        break;
+      default:
+        return;
+    }
+  };
+  utils.useEvent(ref, "keydown", onKeyDown);
+  return /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Disclosure, __spreadValues$v({
+    ref,
+    id,
+    className: ({ isExpanded, isDisabled }) => clsx__default["default"](styles__default["default"]["sapphire-accordion__item"], {
+      [styles__default["default"]["sapphire-accordion__item--open"]]: isExpanded,
+      [styles__default["default"]["is-disabled"]]: isDisabled
+    })
+  }, props), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-content-wrapper"])
+  }, children));
+});
+
+var __defProp$u = Object.defineProperty;
+var __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
+var __hasOwnProp$u = Object.prototype.hasOwnProperty;
+var __propIsEnum$u = 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$u.call(b, prop))
+      __defNormalProp$u(a, prop, b[prop]);
+  if (__getOwnPropSymbols$u)
+    for (var prop of __getOwnPropSymbols$u(b)) {
+      if (__propIsEnum$u.call(b, prop))
+        __defNormalProp$u(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __objRest$r = (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;
+};
+const AccordionPanel = React.forwardRef(function AccordionPanel2(_a, ref) {
+  var _b = _a, { children } = _b, props = __objRest$r(_b, ["children"]);
+  const { sidePadding } = useAccordionContext();
+  return /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.DisclosurePanel, __spreadValues$u(__spreadProps$s(__spreadValues$u({
+    ref
+  }, utils.filterDOMProps(props, { global: true })), {
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-content"]),
+    style: {
+      height: "var(--disclosure-panel-height)"
+    }
+  }), props), /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: __spreadValues$u({}, sapphireReact.withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}),
+    className: styles__default["default"]["sapphire-accordion__item-content-inner"]
+  }, children));
+});
 
 const _Accordion = Object.assign(Accordion, {
   Heading: AccordionHeading,
-  Item: AccordionItem
+  Item: AccordionItem,
+  Panel: AccordionPanel
 });
 
-var __defProp$j = 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$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) => {
+var __defProp$t = Object.defineProperty;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
+var __hasOwnProp$t = Object.prototype.hasOwnProperty;
+var __propIsEnum$t = 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$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]);
+    if (__hasOwnProp$t.call(b, prop))
+      __defNormalProp$t(a, prop, b[prop]);
+  if (__getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(b)) {
+      if (__propIsEnum$t.call(b, prop))
+        __defNormalProp$t(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
-var __objRest$h = (source, exclude) => {
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
+var __objRest$q = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$t.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))
+  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;
@@ -326,7 +376,7 @@ function Alert(_a) {
     children,
     title,
     variant = "info"
-  } = _b, props = __objRest$h(_b, [
+  } = _b, props = __objRest$q(_b, [
     "children",
     "title",
     "variant"
@@ -347,7 +397,7 @@ function Alert(_a) {
         return /* @__PURE__ */ React__default["default"].createElement(react.Information, null);
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$i(__spreadValues$j({}, utils.filterDOMProps(props, { global: true })), {
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$r(__spreadValues$t({}, utils.filterDOMProps(props, { global: true })), {
     className: clsx.clsx(alertStyles__default["default"]["sapphire-alert"], {
       [alertStyles__default["default"]["sapphire-alert--positive"]]: variant === "positive",
       [alertStyles__default["default"]["sapphire-alert--negative"]]: variant === "negative",
@@ -372,6 +422,105 @@ function Alert(_a) {
   }, children)));
 }
 
+const useGroupAmount = (value, formatter) => {
+  const numberValue = React.useMemo(() => {
+    const parsed = Number(value);
+    return isNaN(parsed) ? 0 : parsed;
+  }, [value]);
+  const groupedParts = React.useMemo(() => {
+    const parts = formatter.formatToParts(numberValue);
+    const result = [];
+    let currentNumber = "";
+    parts.forEach((part) => {
+      if (part.type === "plusSign" || part.type === "minusSign") {
+        result.push({ type: "sign", value: part.value });
+      } else if (part.type === "currency") {
+        if (currentNumber) {
+          result.push({ type: "number", value: currentNumber });
+          currentNumber = "";
+        }
+        result.push({ type: "currency", value: part.value });
+      } else if (part.type !== "literal") {
+        currentNumber += part.value;
+      }
+    });
+    if (currentNumber) {
+      result.push({ type: "number", value: currentNumber });
+    }
+    return result;
+  }, [numberValue, formatter]);
+  const formattedValue = React.useMemo(() => groupedParts.map((part) => part.value).join(""), [groupedParts]);
+  return { formattedValue, groupedParts };
+};
+
+var __defProp$s = Object.defineProperty;
+var __defProps$q = Object.defineProperties;
+var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
+var __hasOwnProp$s = Object.prototype.hasOwnProperty;
+var __propIsEnum$s = 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$s.call(b, prop))
+      __defNormalProp$s(a, prop, b[prop]);
+  if (__getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(b)) {
+      if (__propIsEnum$s.call(b, prop))
+        __defNormalProp$s(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+var __objRest$p = (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 Amount = (_a) => {
+  var _b = _a, {
+    emphasis = "regular",
+    variant,
+    formatOptions,
+    value,
+    size
+  } = _b, props = __objRest$p(_b, [
+    "emphasis",
+    "variant",
+    "formatOptions",
+    "value",
+    "size"
+  ]);
+  sapphireReact.useThemeCheck();
+  const { styleProps, filteredProps } = sapphireReact.useSapphireStyleProps(props);
+  const { locale } = i18n.useLocale();
+  const formatter = React.useMemo(() => new Intl.NumberFormat(locale, __spreadValues$s({
+    style: (formatOptions == null ? void 0 : formatOptions.currency) ? "currency" : void 0,
+    signDisplay: (formatOptions == null ? void 0 : formatOptions.signDisplay) || String(value).startsWith("+") ? "always" : "auto",
+    minimumFractionDigits: 2
+  }, formatOptions)), [locale, formatOptions, value]);
+  const { formattedValue, groupedParts } = useGroupAmount(value, formatter);
+  return /* @__PURE__ */ React__default["default"].createElement("span", __spreadProps$q(__spreadValues$s({
+    style: styleProps.style,
+    className: styles__default$1["default"]["sapphire-amount"]
+  }, filteredProps), {
+    "aria-label": formattedValue
+  }), groupedParts.map((part, index) => /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
+    elementType: "span",
+    key: index,
+    color: variant === "positive" ? "positive" : "primary",
+    isSemibold: emphasis === "primary" ? true : false,
+    size
+  }, part.value)));
+};
+
 var da$3 = {
 	"listbox-suggestions": "Forslag"
 };
@@ -410,33 +559,33 @@ var intlMessages$3 = {
   "sv-SE": se$3
 };
 
-var __defProp$i = 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$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) => {
+var __defProp$r = Object.defineProperty;
+var __defProps$p = Object.defineProperties;
+var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
+var __hasOwnProp$r = Object.prototype.hasOwnProperty;
+var __propIsEnum$r = 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$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]);
+    if (__hasOwnProp$r.call(b, prop))
+      __defNormalProp$r(a, prop, b[prop]);
+  if (__getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(b)) {
+      if (__propIsEnum$r.call(b, prop))
+        __defNormalProp$r(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
-var __objRest$g = (source, exclude) => {
+var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+var __objRest$o = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$r.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))
+  if (source != null && __getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$r.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -450,13 +599,17 @@ function Autocomplete(props) {
     renderInput,
     loadingState,
     loadingSkeletonRowsCount,
-    listboxAriaLabel
-  } = _a, otherProps = __objRest$g(_a, [
+    listboxAriaLabel,
+    onSuggestionSelected,
+    onSelectionChange
+  } = _a, otherProps = __objRest$o(_a, [
     "inputValue",
     "renderInput",
     "loadingState",
     "loadingSkeletonRowsCount",
-    "listboxAriaLabel"
+    "listboxAriaLabel",
+    "onSuggestionSelected",
+    "onSelectionChange"
   ]);
   const {
     styleProps: { style, className }
@@ -465,19 +618,25 @@ function Autocomplete(props) {
   const listBoxRef = utils$1.useFocusableRef(null);
   const popoverRef = React.useRef(null);
   const triggerRef = utils$1.useFocusableRef(null);
-  const state = sapphireReact.useComboBoxState(__spreadProps$h(__spreadValues$i({}, props), {
+  const state = sapphireReact.useComboBoxState(__spreadProps$p(__spreadValues$r({}, props), {
     inputValue,
     allowsEmptyCollection: loadingState === "loading",
     allowsCustomValue: true,
-    shouldCloseOnBlur: true
+    shouldCloseOnBlur: true,
+    onSelectionChange: (key) => {
+      if (key !== null) {
+        onSelectionChange == null ? void 0 : onSelectionChange(key);
+        onSuggestionSelected == null ? void 0 : onSuggestionSelected(key);
+      }
+    }
   }));
-  const { inputProps, listBoxProps } = combobox.useComboBox(__spreadProps$h(__spreadValues$i({}, props), {
+  const { inputProps, listBoxProps } = combobox.useComboBox(__spreadProps$p(__spreadValues$r({}, props), {
     "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
     inputRef,
     listBoxRef,
     popoverRef
   }), state);
-  const inputElement = renderInput(__spreadProps$h(__spreadValues$i({}, inputProps), {
+  const inputElement = renderInput(__spreadProps$p(__spreadValues$r({}, inputProps), {
     isDisabled: props.isDisabled,
     inputRef,
     "aria-haspopup": "listbox",
@@ -490,10 +649,10 @@ function Autocomplete(props) {
       });
     }
   }));
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$h(__spreadValues$i({
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$p(__spreadValues$r({
     ref: triggerRef
   }, utils.filterDOMProps(otherProps, { global: true })), {
-    style: __spreadValues$i({ display: "inline-flex" }, style),
+    style: __spreadValues$r({ display: "inline-flex" }, style),
     className
   }), inputElement, state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ListBoxPopover, {
     state,
@@ -575,63 +734,63 @@ const useBreadcrumbThreshold = (childrenCount, containerRef, breadcrumbRef) => {
   };
 };
 
-var __defProp$h = 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$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) => {
+var __defProp$q = Object.defineProperty;
+var __defProps$o = Object.defineProperties;
+var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = 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$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]);
+    if (__hasOwnProp$q.call(b, prop))
+      __defNormalProp$q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
+        __defNormalProp$q(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
-var __objRest$f = (source, exclude) => {
+var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
+var __objRest$n = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$q.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))
+  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;
 };
 const BreadcrumbsContext = React.createContext({ size: "md", overflowNodes: [] });
 const Breadcrumbs = React.forwardRef(function Breadcrumbs2(_a, fwdRef) {
-  var _b = _a, { maxWidth, size = "md" } = _b, props = __objRest$f(_b, ["maxWidth", "size"]);
+  var _b = _a, { maxWidth, size = "md" } = _b, props = __objRest$n(_b, ["maxWidth", "size"]);
   const [RACprops, ref] = reactAriaComponents.useContextProps(props, fwdRef, reactAriaComponents.BreadcrumbsContext);
   const { styleProps } = sapphireReact.useSapphireStyleProps(RACprops);
   const containerRef = React.useRef(null);
   const { CollectionRoot } = React.useContext(reactAriaComponents.CollectionRendererContext);
   const { navProps } = breadcrumbs.useBreadcrumbs(RACprops);
   const DOMProps = utils.filterDOMProps(RACprops, { global: true });
-  return /* @__PURE__ */ React__default["default"].createElement(collections$1.CollectionBuilder, {
-    content: /* @__PURE__ */ React__default["default"].createElement(collections$1.Collection, __spreadValues$h({}, RACprops))
+  return /* @__PURE__ */ React__default["default"].createElement(collections.CollectionBuilder, {
+    content: /* @__PURE__ */ React__default["default"].createElement(collections.Collection, __spreadValues$q({}, RACprops))
   }, (collection) => {
     const { overflowNodes } = useBreadcrumbThreshold(collection.size, containerRef, ref);
     const keys = Array.from(collection.getKeys());
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       ref: containerRef,
-      style: __spreadProps$g(__spreadValues$h({}, styleProps.style), {
+      style: __spreadProps$o(__spreadValues$q({}, styleProps.style), {
         maxWidth,
         display: "flex"
       })
-    }, /* @__PURE__ */ React__default["default"].createElement("ol", __spreadProps$g(__spreadValues$h({
+    }, /* @__PURE__ */ React__default["default"].createElement("ol", __spreadProps$o(__spreadValues$q({
       ref
     }, utils.mergeProps(DOMProps, navProps)), {
-      className: clsx__default["default"](styles__default$1["default"]["sapphire-breadcrumbs"], {
-        [styles__default$1["default"]["sapphire-breadcrumbs--sm"]]: size === "sm",
-        [styles__default$1["default"]["sapphire-breadcrumbs--lg"]]: size === "lg"
+      className: clsx__default["default"](styles__default$2["default"]["sapphire-breadcrumbs"], {
+        [styles__default$2["default"]["sapphire-breadcrumbs--sm"]]: size === "sm",
+        [styles__default$2["default"]["sapphire-breadcrumbs--lg"]]: size === "lg"
       })
     }), /* @__PURE__ */ React__default["default"].createElement(BreadcrumbsContext.Provider, {
       value: {
@@ -651,7 +810,7 @@ const BreadcrumbsSeparator = () => {
   const { size } = React.useContext(BreadcrumbsContext);
   const iconSize = size === "lg" ? "md" : "sm";
   return /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-breadcrumbs__separator"]),
+    className: clsx__default["default"](styles__default$2["default"]["sapphire-breadcrumbs__separator"]),
     "aria-hidden": "true"
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
     size: iconSize
@@ -660,11 +819,10 @@ const BreadcrumbsSeparator = () => {
 
 const BreadcrumbOverflowMenu = () => {
   const { size, overflowNodes } = React.useContext(BreadcrumbsContext);
-  const iconSize = size === "lg" ? "md" : "sm";
   return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Menu, {
     triggerElement: /* @__PURE__ */ React__default["default"].createElement(sapphireReact.IconButton, {
       "aria-label": "Show more breadcrumbs",
-      size: iconSize
+      size
     }, /* @__PURE__ */ React__default["default"].createElement(react.OverflowMenuHorizontal, null))
   }, overflowNodes.map((item) => !item ? null : /* @__PURE__ */ React__default["default"].createElement(sapphireReact.MenuItem, {
     key: item.key,
@@ -674,80 +832,101 @@ const BreadcrumbOverflowMenu = () => {
   }, item.rendered))), /* @__PURE__ */ React__default["default"].createElement(BreadcrumbsSeparator, null));
 };
 
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __objRest$e = (source, exclude) => {
+var __defProp$p = Object.defineProperty;
+var __defProps$n = Object.defineProperties;
+var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
+var __hasOwnProp$p = Object.prototype.hasOwnProperty;
+var __propIsEnum$p = 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$p.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
+var __objRest$m = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(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 BreadcrumbItemStatic = React.forwardRef(function BreadcrumbItemStatic2(_a, ref) {
-  var _b = _a, { size } = _b, props = __objRest$e(_b, ["size"]);
+  var _b = _a, { size } = _b, props = __objRest$m(_b, ["size"]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  return /* @__PURE__ */ React__default["default"].createElement("span", {
-    ref,
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-breadcrumbs__item--static"], {
-      [styles__default$1["default"]["sapphire-breadcrumbs__item--static--sm"]]: size === "sm",
-      [styles__default$1["default"]["sapphire-breadcrumbs__item--static--lg"]]: size === "lg"
-    }, styleProps.className),
-    style: styleProps.style
-  }, props.children);
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.TooltipIfNeeded, {
+    title: props.children
+  }, (tooltipContentRef, tooltipProps) => {
+    const positioningRef = tooltipProps == null ? void 0 : tooltipProps.ref;
+    return /* @__PURE__ */ React__default["default"].createElement("span", __spreadProps$n(__spreadValues$p({}, tooltipProps), {
+      ref: utils.mergeRefs(ref, tooltipContentRef, positioningRef),
+      className: clsx__default["default"](styles__default$2["default"]["sapphire-breadcrumbs__item--static"], {
+        [styles__default$2["default"]["sapphire-breadcrumbs__item--static--sm"]]: size === "sm",
+        [styles__default$2["default"]["sapphire-breadcrumbs__item--static--lg"]]: size === "lg"
+      }, styleProps.className),
+      style: styleProps.style
+    }), props.children);
+  });
 });
 
-var __defProp$g = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = 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$o = Object.defineProperty;
+var __defProps$m = Object.defineProperties;
+var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = 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$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$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-var __objRest$d = (source, exclude) => {
+var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
+var __objRest$l = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(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 BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2(_a, ref) {
-  var _b = _a, { children } = _b, props = __objRest$d(_b, ["children"]);
+  var _b = _a, { children } = _b, props = __objRest$l(_b, ["children"]);
   sapphireReact.useThemeCheck();
   const { styleProps: sapphireStyleProps } = sapphireReact.useSapphireStyleProps(props);
-  const _a2 = sapphireStyleProps, { style, className } = _a2, styleProps = __objRest$d(_a2, ["style", "className"]);
+  const _a2 = sapphireStyleProps, { style, className } = _a2, styleProps = __objRest$l(_a2, ["style", "className"]);
   const { size } = React.useContext(BreadcrumbsContext);
   if (!props.href) {
-    return /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemStatic, __spreadProps$f(__spreadValues$g({}, props), {
+    return /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemStatic, __spreadProps$m(__spreadValues$o({}, props), {
       size
     }), children);
   }
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$f(__spreadValues$g(__spreadValues$g({}, props), styleProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$m(__spreadValues$o(__spreadValues$o({}, props), styleProps), {
     UNSAFE_className: className,
-    UNSAFE_style: __spreadValues$g({}, style),
+    UNSAFE_style: __spreadValues$o({}, style),
     ref,
     size,
     variant: "tertiary",
@@ -756,26 +935,26 @@ const BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2(_a, ref
 });
 BreadcrumbItemLink.displayName = "BreadcrumbItemLink";
 
-var __defProp$f = Object.defineProperty;
-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) => {
+var __defProp$n = Object.defineProperty;
+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$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]);
+    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;
 };
-class BreadcrumbItemCollectionNode extends collections$1.CollectionNode {
+class BreadcrumbItemCollectionNode extends collections.CollectionNode {
 }
 BreadcrumbItemCollectionNode.type = "item";
-const BreadcrumbItem = collections$1.createLeafComponent(BreadcrumbItemCollectionNode, function BreadcrumbItem2(props, ref, node) {
+const BreadcrumbItem = collections.createLeafComponent(BreadcrumbItemCollectionNode, function BreadcrumbItem2(props, ref, node) {
   var _a;
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
@@ -798,52 +977,52 @@ const BreadcrumbItem = collections$1.createLeafComponent(BreadcrumbItemCollectio
   node.href = props.href;
   return /* @__PURE__ */ React__default["default"].createElement("li", {
     ref,
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-breadcrumbs__item"]),
-    style: __spreadValues$f({}, styleProps.style),
+    className: clsx__default["default"](styles__default$2["default"]["sapphire-breadcrumbs__item"]),
+    style: __spreadValues$n({}, styleProps.style),
     "data-disabled": isDisabled || void 0,
     "data-current": isCurrent || void 0
   }, isCurrent ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
     elementType: "span",
     isSemibold: true,
     size: size === "lg" ? "md" : size === "md" ? "sm" : "xs"
-  }, node.rendered) : /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemLink, __spreadValues$f({
+  }, node.rendered) : /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemLink, __spreadValues$n({
     isDisabled
   }, props), node.rendered), !isCurrent && /* @__PURE__ */ React__default["default"].createElement(BreadcrumbsSeparator, null));
 });
 
-var __defProp$e = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = 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) => {
+var __defProp$m = Object.defineProperty;
+var __defProps$l = Object.defineProperties;
+var __getOwnPropDescs$l = 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$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]);
+    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$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-var __objRest$c = (source, exclude) => {
+var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
+var __objRest$k = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$m.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))
+  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;
 };
 const HiddenFileInput = React__default["default"].forwardRef(function InputWrapper(props, ref) {
-  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$e(__spreadValues$e({}, props), {
+  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$l(__spreadValues$m({}, props), {
     ref,
     type: "file",
     style: { display: "none" }
@@ -856,7 +1035,7 @@ const FileTrigger = React__default["default"].forwardRef(function FileTriggerWra
     onSelect = () => null,
     children,
     isDisabled = false
-  } = _a, rest = __objRest$c(_a, [
+  } = _a, rest = __objRest$k(_a, [
     "acceptedFileTypes",
     "allowsMultiple",
     "onSelect",
@@ -874,7 +1053,7 @@ const FileTrigger = React__default["default"].forwardRef(function FileTriggerWra
       }
       (_a2 = inputRef.current) == null ? void 0 : _a2.click();
     }
-  }, children), /* @__PURE__ */ React__default["default"].createElement(HiddenFileInput, __spreadProps$e(__spreadValues$e({}, domProps), {
+  }, children), /* @__PURE__ */ React__default["default"].createElement(HiddenFileInput, __spreadProps$l(__spreadValues$m({}, domProps), {
     disabled: isDisabled,
     ref: inputRef,
     accept: acceptedFileTypes == null ? void 0 : acceptedFileTypes.toString(),
@@ -953,33 +1132,33 @@ var intlMessages$2 = {
   "sv-SE": se$2
 };
 
-var __defProp$d = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = 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) => {
+var __defProp$l = Object.defineProperty;
+var __defProps$k = Object.defineProperties;
+var __getOwnPropDescs$k = 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$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]);
+    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$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-var __objRest$b = (source, exclude) => {
+var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
+var __objRest$j = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$l.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))
+  if (source != null && __getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -994,7 +1173,7 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
     allowsMultiple,
     onDrop = () => null,
     getDropOperation = () => "copy"
-  } = _a, otherProps = __objRest$b(_a, [
+  } = _a, otherProps = __objRest$j(_a, [
     "isDisabled",
     "hasError",
     "renderInstruction",
@@ -1010,7 +1189,7 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
   const pressableRef = utils.useObjectRef(forwardedRef);
   const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { dropProps, isDropTarget: isDropping } = dnd.useDrop(__spreadProps$d(__spreadValues$d({}, props), {
+  const { dropProps, isDropTarget: isDropping } = dnd.useDrop(__spreadProps$k(__spreadValues$l({}, props), {
     ref: pressableRef,
     hasDropButton: true,
     isDisabled,
@@ -1046,65 +1225,65 @@ 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$d(__spreadValues$d(__spreadValues$d({}, utils.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps)), utils.filterDOMProps(otherProps, { global: true })), {
-    style: __spreadValues$d({}, styleProps.style),
-    className: clsx__default["default"](styles__default$2["default"]["sapphire-dropzone"], styles__default$2["default"]["js-focus"], styles__default$2["default"]["js-hover"], {
-      [styles__default$2["default"]["is-hover"]]: isHovered && !isDropping,
-      [styles__default$2["default"]["is-active"]]: isPressed,
-      [styles__default$2["default"]["is-disabled"]]: isDisabled,
-      [styles__default$2["default"]["is-focus"]]: isFocusVisible,
-      [styles__default$2["default"]["sapphire-dropzone--dropping"]]: isDropping,
-      [styles__default$2["default"]["sapphire-dropzone--error"]]: hasError
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$k(__spreadValues$l(__spreadValues$l({}, utils.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps)), utils.filterDOMProps(otherProps, { global: true })), {
+    style: __spreadValues$l({}, styleProps.style),
+    className: clsx__default["default"](styles__default$3["default"]["sapphire-dropzone"], styles__default$3["default"]["js-focus"], styles__default$3["default"]["js-hover"], {
+      [styles__default$3["default"]["is-hover"]]: isHovered && !isDropping,
+      [styles__default$3["default"]["is-active"]]: isPressed,
+      [styles__default$3["default"]["is-disabled"]]: isDisabled,
+      [styles__default$3["default"]["is-focus"]]: isFocusVisible,
+      [styles__default$3["default"]["sapphire-dropzone--dropping"]]: isDropping,
+      [styles__default$3["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$2["default"]["sapphire-dropzone__content"])
+    className: clsx__default["default"](styles__default$3["default"]["sapphire-dropzone__content"])
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$2["default"]["sapphire-dropzone__icon"])
+    className: clsx__default["default"](styles__default$3["default"]["sapphire-dropzone__icon"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
     size: "lg"
   }, /* @__PURE__ */ React__default["default"].createElement(react.Upload, null))), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$2["default"]["sapphire-dropzone__heading"])
+    className: clsx__default["default"](styles__default$3["default"]["sapphire-dropzone__heading"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Heading, {
     level: 6
   }, isDropping ? format("dropzone-heading-dropping") : allowsMultiple ? format("dropzone-heading-default") : format("dropzone-heading-default-single"))), /* @__PURE__ */ React__default["default"].createElement("div", {
     id: paragraphId,
-    className: clsx__default["default"](styles__default$2["default"]["sapphire-dropzone__paragraph"])
+    className: clsx__default["default"](styles__default$3["default"]["sapphire-dropzone__paragraph"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
     size: "sm",
     color: "secondary"
   }, renderInstruction(isDropping)))))));
 });
 
-var __defProp$c = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = 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) => {
+var __defProp$k = Object.defineProperty;
+var __defProps$j = Object.defineProperties;
+var __getOwnPropDescs$j = 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$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]);
+    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$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$a = (source, exclude) => {
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
+var __objRest$i = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$k.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))
+  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;
@@ -1120,6 +1299,7 @@ function FilterDropdown(_a) {
     isOpen: isOpenProp,
     applyButtonLabel = "Apply",
     clearButtonLabel = "Clear",
+    hideClearButton = false,
     defaultOpen = false,
     hasApplyButton = false,
     noMaxWidth,
@@ -1127,7 +1307,7 @@ function FilterDropdown(_a) {
     onClear,
     onOpenChange,
     buttonSize = "md"
-  } = _b, props = __objRest$a(_b, [
+  } = _b, props = __objRest$i(_b, [
     "children",
     "label",
     "value",
@@ -1137,6 +1317,7 @@ function FilterDropdown(_a) {
     "isOpen",
     "applyButtonLabel",
     "clearButtonLabel",
+    "hideClearButton",
     "defaultOpen",
     "hasApplyButton",
     "noMaxWidth",
@@ -1146,6 +1327,7 @@ function FilterDropdown(_a) {
     "buttonSize"
   ]);
   const triggerRef = React.useRef(null);
+  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
   const [isOpen, setIsOpen] = utils$2.useControlledState(isOpenProp, defaultOpen, utils.useEffectEvent(onOpenChange));
   const hasValue = value != null && value !== "";
   const close = () => setIsOpen(false);
@@ -1169,16 +1351,17 @@ function FilterDropdown(_a) {
     onOpenChange: setIsOpen,
     noMaxWidth,
     noPadding: true,
-    popoverContent: /* @__PURE__ */ React__default["default"].createElement("form", __spreadProps$c(__spreadValues$c({}, utils.filterDOMProps(props, { global: true })), {
+    popoverContent: /* @__PURE__ */ React__default["default"].createElement("form", __spreadProps$j(__spreadValues$k({}, utils.filterDOMProps(props, { global: true })), {
       onSubmit,
-      className: styles__default$3["default"]["sapphire-filter-dropdown"]
+      className: clsx__default["default"](styles__default$4["default"]["sapphire-filter-dropdown"], styleProps.className),
+      style: __spreadValues$k({}, styleProps.style)
     }), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: styles__default$3["default"]["sapphire-filter-dropdown__body"]
+      className: styles__default$4["default"]["sapphire-filter-dropdown__body"]
     }, children), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: styles__default$3["default"]["sapphire-filter-dropdown__footer"]
+      className: styles__default$4["default"]["sapphire-filter-dropdown__footer"]
     }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ButtonGroup, {
       align: "right"
-    }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
+    }, !hideClearButton && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
       size: buttonSize,
       variant: "text",
       onPress: () => {
@@ -1196,40 +1379,40 @@ function FilterDropdown(_a) {
   }, label, value ? ": " : "", value));
 }
 
-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) => {
+var __defProp$j = Object.defineProperty;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = 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$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]);
+    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$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __objRest$9 = (source, exclude) => {
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __objRest$h = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$j.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))
+  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;
 };
 function SearchableSelectFilter(props) {
   var _b, _c;
-  const _a = props, { searchField, listBox, size = "md" } = _a, otherProps = __objRest$9(_a, ["searchField", "listBox", "size"]);
+  const _a = props, { searchField, listBox, size = "md" } = _a, otherProps = __objRest$h(_a, ["searchField", "listBox", "size"]);
   const searchFieldRef = React.useRef(null);
   const searchFieldProps = searchField.props;
   const listBoxProps = listBox.props;
@@ -1238,7 +1421,7 @@ function SearchableSelectFilter(props) {
     console.warn("The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually.");
   }
   const hasSelection = listBoxProps.selectedKeys === "all" || Array.from(listBoxProps.selectedKeys || []).length > 0;
-  return /* @__PURE__ */ React__default["default"].createElement(FilterDropdown, __spreadProps$b(__spreadValues$b({}, otherProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(FilterDropdown, __spreadProps$i(__spreadValues$j({}, otherProps), {
     noMaxWidth: (_c = otherProps.noMaxWidth) != null ? _c : true,
     buttonSize: size,
     hasApplyButton: Boolean(otherProps.onApply),
@@ -1262,60 +1445,1173 @@ function SearchableSelectFilter(props) {
   })));
 }
 
-var __defProp$a = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = 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) => {
+var __defProp$i = Object.defineProperty;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = 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$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    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$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-var __objRest$8 = (source, exclude) => {
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$i.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))
+  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 Flag = React__default["default"].forwardRef(function Flag2(_a, ref) {
-  var _b = _a, { size = "lg", rounded, "aria-label": ariaLabel } = _b, props = __objRest$8(_b, ["size", "rounded", "aria-label"]);
+  var _b = _a, { size = "lg", rounded, "aria-label": ariaLabel } = _b, props = __objRest$g(_b, ["size", "rounded", "aria-label"]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  return React__default["default"].cloneElement(utils$1.getWrappedElement(props.children), __spreadProps$a(__spreadValues$a({
+  return React__default["default"].cloneElement(utils$1.getWrappedElement(props.children), __spreadProps$h(__spreadValues$i({
+    ref,
+    role: "img"
+  }, ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": true }), {
+    className: clsx__default["default"](styles__default$5["default"]["sapphire-flag"], styleProps.className, {
+      [styles__default$5["default"]["sapphire-flag--xs"]]: size === "xs",
+      [styles__default$5["default"]["sapphire-flag--sm"]]: size === "sm",
+      [styles__default$5["default"]["sapphire-flag--md"]]: size === "md",
+      [styles__default$5["default"]["sapphire-flag--lg"]]: size === "lg",
+      [styles__default$5["default"]["sapphire-flag--xl"]]: size === "xl",
+      [styles__default$5["default"]["sapphire-flag--rounded"]]: rounded
+    }),
+    style: styleProps.style
+  }));
+});
+
+var __defProp$h = Object.defineProperty;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = 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$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __objRest$f = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function LabeledValue(_a) {
+  var _b = _a, {
+    children,
+    contextualHelp,
+    label: label$1,
+    labelPlacement = "above",
+    size = "lg"
+  } = _b, otherProps = __objRest$f(_b, [
+    "children",
+    "contextualHelp",
+    "label",
+    "labelPlacement",
+    "size"
+  ]);
+  sapphireReact.useThemeCheck();
+  const { fieldProps } = label.useField({ label: label$1 });
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$g(__spreadValues$h({}, utils.mergeProps(fieldProps, otherProps)), {
+    labelPlacement,
+    size,
+    noDefaultWidth: true
+  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, {
+    contextualHelp,
+    size
+  }, label$1)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, children));
+}
+
+var increment$6 = "øge";
+var decrement$6 = "formindske";
+var da$1 = {
+	increment: increment$6,
+	decrement: decrement$6
+};
+
+var increment$5 = "Increase";
+var decrement$5 = "Decrease";
+var en$1 = {
+	increment: increment$5,
+	decrement: decrement$5
+};
+
+var increment$4 = "erhöhen";
+var decrement$4 = "verringern";
+var de$1 = {
+	increment: increment$4,
+	decrement: decrement$4
+};
+
+var increment$3 = "lisääntyä";
+var decrement$3 = "vähentää";
+var fi$1 = {
+	increment: increment$3,
+	decrement: decrement$3
+};
+
+var increment$2 = "øke";
+var decrement$2 = "avta";
+var no$1 = {
+	increment: increment$2,
+	decrement: decrement$2
+};
+
+var increment$1 = "zwiększyć";
+var decrement$1 = "zmniejszenie";
+var pl$1 = {
+	increment: increment$1,
+	decrement: decrement$1
+};
+
+var increment = "öka";
+var decrement = "minska";
+var se$1 = {
+	increment: increment,
+	decrement: decrement
+};
+
+var intlMessages$1 = {
+  "da-DK": da$1,
+  "en-US": en$1,
+  "de-DE": de$1,
+  "fi-FI": fi$1,
+  "nb-NO": no$1,
+  "pl-PL": pl$1,
+  "sv-SE": se$1
+};
+
+var __defProp$g = Object.defineProperty;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = 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) => {
+  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]);
+    }
+  return a;
+};
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __objRest$e = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const StepperButton = (_a) => {
+  var _b = _a, {
+    variant,
+    size
+  } = _b, props = __objRest$e(_b, [
+    "variant",
+    "size"
+  ]);
+  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$f(__spreadValues$g({}, utils.mergeProps(buttonProps, hoverProps, focusProps, utils.filterDOMProps(props, { global: true }))), {
+    tabIndex: 0,
+    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,
+      [textFieldStyles__default["default"]["is-focus"]]: isFocusVisible
+    })
+  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
+    size: size === "lg" ? "md" : "sm"
+  }, variant === "increment" ? /* @__PURE__ */ React__default["default"].createElement(react.Add, null) : /* @__PURE__ */ React__default["default"].createElement(react.Subtract, 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
+  };
+}
+
+const getSeparators = (formatter) => {
+  var _a, _b, _c, _d, _e;
+  const parts = formatter.formatToParts(1000.1);
+  const groupSeparator = (_b = (_a = parts.find((p) => p.type === "group")) == null ? void 0 : _a.value) != null ? _b : ",";
+  let decimalSeparator = (_c = parts.find((p) => p.type === "decimal")) == null ? void 0 : _c.value;
+  if (!decimalSeparator) {
+    const locale = formatter.resolvedOptions().locale;
+    const plainFormatter = new Intl.NumberFormat(locale);
+    decimalSeparator = (_e = (_d = plainFormatter.formatToParts(1.1).find((p) => p.type === "decimal")) == null ? void 0 : _d.value) != null ? _e : ".";
+  }
+  return { groupSeparator, decimalSeparator };
+};
+const trimSymbol = (value, symbol) => {
+  if (!symbol)
+    return value;
+  if (value.startsWith(symbol)) {
+    return value.slice(symbol.length).trimStart();
+  } else if (value.endsWith(symbol)) {
+    return value.slice(0, -symbol.length).trimEnd();
+  }
+  return value;
+};
+const parseNumericValue = (value, decimalSeparator, formatter) => {
+  if (!value || value === "-")
+    return null;
+  const cleaned = value.replace(new RegExp(`[^0-9${decimalSeparator}\\-]`, "g"), "");
+  if (!cleaned)
+    return null;
+  const hasLeadingMinus = cleaned.startsWith("-");
+  const withoutMinus = cleaned.replace(/-/g, "");
+  const normalized = hasLeadingMinus ? "-" + withoutMinus : withoutMinus;
+  const parts = normalized.split(decimalSeparator);
+  const withStandardDecimal = parts.length > 1 ? parts[0] + "." + parts.slice(1).join("") : normalized.replace(decimalSeparator, ".");
+  let parsed = parseFloat(withStandardDecimal);
+  if (isNaN(parsed))
+    return null;
+  if ((formatter == null ? void 0 : formatter.resolvedOptions().style) === "percent") {
+    parsed /= 100;
+  }
+  return parsed;
+};
+const formatNumberString = (value, formatter, decimalSeparator, shouldStripSymbols, symbol) => {
+  if (!value || value === "-" || value === decimalSeparator) {
+    return value;
+  }
+  const hasTrailingDecimal = value.endsWith(decimalSeparator);
+  const numericValue = parseNumericValue(value, decimalSeparator, formatter);
+  if (numericValue === null) {
+    return value.replace(new RegExp(`[^0-9${decimalSeparator}\\-]`, "g"), "");
+  }
+  try {
+    const formatted = formatter.format(numericValue);
+    const result = shouldStripSymbols && symbol ? trimSymbol(formatted, symbol) : formatted;
+    return hasTrailingDecimal && !result.includes(decimalSeparator) ? result + decimalSeparator : result;
+  } catch (_) {
+    return value;
+  }
+};
+const isSymbol = (type) => ["currency", "unit", "percentSign"].includes(type);
+const hasSymbolAt = (parts, start) => {
+  const [first, second] = start ? [parts[0], parts[1]] : [parts[parts.length - 1], parts[parts.length - 2]];
+  return isSymbol(first == null ? void 0 : first.type) || (first == null ? void 0 : first.type) === "literal" && isSymbol(second == null ? void 0 : second.type);
+};
+const extractSymbol = (formatter, prefix, postfix) => {
+  var _a, _b;
+  const parts = formatter.formatToParts(1000.1);
+  const extractedPrefix = hasSymbolAt(parts, true) ? ((_a = parts.find((part) => isSymbol(part.type))) == null ? void 0 : _a.value) || null : null;
+  const extractedPostfix = hasSymbolAt(parts, false) ? ((_b = [...parts].reverse().find((part) => isSymbol(part.type))) == null ? void 0 : _b.value) || null : null;
+  return prefix !== void 0 || postfix !== void 0 ? {
+    extractedPrefix: prefix,
+    extractedPostfix: postfix,
+    symbol: extractedPrefix || extractedPostfix || void 0
+  } : {
+    extractedPrefix,
+    extractedPostfix,
+    symbol: extractedPrefix || extractedPostfix || void 0
+  };
+};
+
+const isDeleteOperation = (inputType) => {
+  return inputType === "deleteContentBackward" || inputType === "deleteContentForward";
+};
+const calculateCursorPosition = (oldValue, newValue, oldCursor, inputType, decimalSeparator, numericValue) => {
+  if (!newValue)
+    return 0;
+  const oldDecimalPos = oldValue.indexOf(decimalSeparator);
+  const newDecimalPos = newValue.indexOf(decimalSeparator);
+  if (numericValue === 0 && isDeleteOperation(inputType)) {
+    return 0;
+  }
+  const countDigits = (str, start, end) => {
+    let count = 0;
+    for (let i = start; i < end; i++) {
+      if (/[0-9]/.test(str[i]))
+        count++;
+    }
+    return count;
+  };
+  if (isDeleteOperation(inputType) && oldDecimalPos >= 0 && oldCursor === oldDecimalPos && newDecimalPos >= 0) {
+    return newDecimalPos;
+  }
+  if (oldDecimalPos >= 0 && oldCursor > oldDecimalPos && newDecimalPos >= 0) {
+    const digitsBeforeCursor = countDigits(oldValue, oldDecimalPos + 1, oldCursor);
+    let digitCount2 = 0;
+    for (let i = newDecimalPos + 1; i < newValue.length; i++) {
+      if (/[0-9]/.test(newValue[i]) && ++digitCount2 === digitsBeforeCursor) {
+        return i + 1;
+      }
+    }
+    return newDecimalPos + 1;
+  }
+  const oldEnd = oldDecimalPos >= 0 ? oldDecimalPos : oldValue.length;
+  const newEnd = newDecimalPos >= 0 ? newDecimalPos : newValue.length;
+  const intDigitsBeforeCursor = countDigits(oldValue, 0, Math.min(oldCursor, oldEnd));
+  if (intDigitsBeforeCursor === 0) {
+    if (isDeleteOperation(inputType)) {
+      for (let i = 0; i < newValue.length; i++) {
+        if (/[0-9]/.test(newValue[i]))
+          return i + 1;
+      }
+    }
+    return 0;
+  }
+  let digitCount = 0;
+  for (let i = 0; i < newEnd; i++) {
+    if (/[0-9]/.test(newValue[i]) && ++digitCount === intDigitsBeforeCursor) {
+      return i + 1;
+    }
+  }
+  return newDecimalPos >= 0 ? newDecimalPos : newValue.length;
+};
+
+const escapeRegExp = (str) => str.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+const getSuffix = (value, groupSeparator, decimalSeparator) => {
+  var _a;
+  const suffixReg = new RegExp(`\\d([^${escapeRegExp(groupSeparator)}${escapeRegExp(decimalSeparator)}0-9]+)`);
+  return (_a = value.match(suffixReg)) == null ? void 0 : _a[1];
+};
+function handleNumberFieldKeyDown({
+  event,
+  inputRef,
+  groupSeparator,
+  decimalSeparator,
+  onOriginalKeyDown
+}) {
+  var _a;
+  const { key } = event;
+  const input = event.currentTarget;
+  const { selectionStart, value } = input;
+  if (selectionStart === null) {
+    onOriginalKeyDown == null ? void 0 : onOriginalKeyDown(event);
+    return;
+  }
+  if (/^[0-9]$/.test(key)) {
+    const decimalPos = value.indexOf(decimalSeparator);
+    if (selectionStart === 0) {
+      const integerPart = decimalPos >= 0 ? value.slice(0, decimalPos) : value;
+      const cleanedInteger = integerPart.replace(new RegExp(escapeRegExp(groupSeparator), "g"), "");
+      if (cleanedInteger === "0") {
+        event.preventDefault();
+        const newValue = key + (decimalPos >= 0 ? value.slice(decimalPos) : "");
+        input.value = newValue;
+        input.setSelectionRange(1, 1);
+        const inputEvent = new Event("input", { bubbles: true });
+        input.dispatchEvent(inputEvent);
+        return;
+      }
+    }
+  }
+  if (key === decimalSeparator) {
+    const decimalPos = value.indexOf(decimalSeparator);
+    if (decimalPos >= 0 && selectionStart <= decimalPos) {
+      event.preventDefault();
+      input.setSelectionRange(decimalPos + 1, decimalPos + 1);
+      return;
+    }
+  }
+  if (key === "Backspace" && selectionStart > 0 && value[selectionStart - 1] === groupSeparator) {
+    event.preventDefault();
+    let deletePos = selectionStart - 2;
+    while (deletePos >= 0 && value[deletePos] === groupSeparator) {
+      deletePos--;
+    }
+    if (deletePos >= 0) {
+      const newValue = value.slice(0, deletePos) + value.slice(deletePos + 1);
+      input.value = newValue;
+      input.setSelectionRange(deletePos, deletePos);
+      const inputEvent = new Event("input", { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    }
+    return;
+  }
+  if (key === "Backspace" && selectionStart > 0 && value[selectionStart - 1] === decimalSeparator) {
+    event.preventDefault();
+    let deletePos = selectionStart - 2;
+    while (deletePos >= 0 && value[deletePos] === groupSeparator) {
+      deletePos--;
+    }
+    if (deletePos >= 0) {
+      const newValue = value.slice(0, deletePos) + value.slice(deletePos + 1);
+      input.value = newValue;
+      const decimalPos = newValue.indexOf(decimalSeparator);
+      if (decimalPos >= 0) {
+        input.setSelectionRange(decimalPos, decimalPos);
+      }
+      const inputEvent = new Event("input", { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    }
+    return;
+  }
+  if (key === "Delete" && value[selectionStart] === groupSeparator) {
+    event.preventDefault();
+    let deletePos = selectionStart + 1;
+    while (deletePos < value.length && value[deletePos] === groupSeparator) {
+      deletePos++;
+    }
+    if (deletePos < value.length) {
+      const newValue = value.slice(0, deletePos) + value.slice(deletePos + 1);
+      input.value = newValue;
+      input.setSelectionRange(selectionStart, selectionStart);
+      const inputEvent = new Event("input", { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    }
+    return;
+  }
+  if (key === "Delete" && value[selectionStart] === decimalSeparator) {
+    event.preventDefault();
+    let deletePos = selectionStart + 1;
+    while (deletePos < value.length && !/[0-9]/.test(value[deletePos])) {
+      deletePos++;
+    }
+    if (deletePos < value.length) {
+      const newValue = value.slice(0, deletePos) + value.slice(deletePos + 1);
+      input.value = newValue;
+      input.setSelectionRange(selectionStart, selectionStart);
+      const inputEvent = new Event("input", { bubbles: true });
+      input.dispatchEvent(inputEvent);
+    }
+    return;
+  }
+  if (key !== "ArrowUp" && key !== "ArrowDown" && value !== "-") {
+    const suffix = getSuffix(value, groupSeparator, decimalSeparator);
+    if (suffix && selectionStart > value.length - suffix.length) {
+      const suffixStartPos = value.length - suffix.length;
+      (_a = inputRef.current) == null ? void 0 : _a.setSelectionRange(suffixStartPos, suffixStartPos);
+    }
+  }
+  onOriginalKeyDown == null ? void 0 : onOriginalKeyDown(event);
+}
+
+function useNumberFieldFormatting({
+  inputRef,
+  formatter,
+  inputValue,
+  prefix,
+  postfix,
+  onOriginalKeyDown,
+  onChange,
+  autoFormat
+}) {
+  const { groupSeparator, decimalSeparator } = React.useMemo(() => getSeparators(formatter), [formatter]);
+  const [formattedValue, setFormattedValue] = React.useState("");
+  const symbolInfo = React.useMemo(() => extractSymbol(formatter, prefix, postfix), [formatter, prefix, postfix]);
+  const { extractedPrefix, extractedPostfix, symbol } = symbolInfo;
+  const cursorPositionRef = React.useRef(null);
+  const displayValue = React.useMemo(() => {
+    const numericValue = parseNumericValue(inputValue, decimalSeparator, formatter);
+    if (numericValue === null)
+      return inputValue;
+    try {
+      const trimmedValue = trimSymbol(inputValue, symbol) || inputValue;
+      return autoFormat ? formattedValue || trimmedValue : trimmedValue;
+    } catch (e) {
+      return inputValue;
+    }
+  }, [
+    inputValue,
+    symbol,
+    formatter,
+    decimalSeparator,
+    autoFormat,
+    formattedValue
+  ]);
+  React.useLayoutEffect(() => {
+    if (cursorPositionRef.current !== null && inputRef.current) {
+      inputRef.current.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);
+      cursorPositionRef.current = null;
+    }
+  }, [displayValue, inputRef]);
+  const handleInput = React.useCallback((e) => {
+    if (!autoFormat)
+      return;
+    const input = e.currentTarget;
+    const { value, selectionStart } = input;
+    const inputType = e.nativeEvent.inputType || "";
+    const shouldStrip = !!symbol;
+    const maxFractionDigits = formatter.resolvedOptions().maximumFractionDigits || 0;
+    const decimalIndex = value.indexOf(decimalSeparator);
+    if (decimalIndex !== -1 && selectionStart !== null) {
+      const decimalPart = value.slice(decimalIndex + 1).replace(new RegExp(`[^0-9]`, "g"), "");
+      const prevDecimalIndex = displayValue.indexOf(decimalSeparator);
+      const prevDecimalLength = prevDecimalIndex !== -1 ? displayValue.slice(prevDecimalIndex + 1).length : 0;
+      if (decimalPart.length > maxFractionDigits && selectionStart > decimalIndex + 1 + prevDecimalLength) {
+        e.preventDefault();
+        cursorPositionRef.current = decimalIndex + 1 + prevDecimalLength;
+        return;
+      }
+    }
+    const formattedValue2 = formatNumberString(value, formatter, decimalSeparator, shouldStrip, symbol);
+    setFormattedValue(formattedValue2);
+    const numericValue = parseNumericValue(formattedValue2, decimalSeparator, formatter);
+    if (formattedValue2 !== value && formattedValue2 !== "" && selectionStart !== null) {
+      const newCursorPosition = calculateCursorPosition(value, formattedValue2, selectionStart, inputType, decimalSeparator, numericValue);
+      cursorPositionRef.current = newCursorPosition;
+    }
+    if (numericValue !== null) {
+      onChange == null ? void 0 : onChange(numericValue);
+    }
+  }, [formatter, decimalSeparator, symbol, autoFormat, displayValue, onChange]);
+  const handleKeyDown = React.useCallback((e) => {
+    handleNumberFieldKeyDown({
+      event: e,
+      inputRef,
+      groupSeparator,
+      decimalSeparator,
+      onOriginalKeyDown
+    });
+  }, [groupSeparator, decimalSeparator, inputRef, onOriginalKeyDown]);
+  return {
+    displayValue,
+    extractedPrefix,
+    extractedPostfix,
+    handleInput,
+    handleKeyDown
+  };
+}
+
+var __defProp$f = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = 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$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(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 useSapphireNumberField = (_a, ref) => {
+  var _b = _a, { error } = _b, numberFieldProps = __objRest$d(_b, ["error"]);
+  const { locale } = i18n.useLocale();
+  const numberFieldState = numberfield.useNumberFieldState(__spreadProps$e(__spreadValues$f({}, numberFieldProps), {
+    locale
+  }));
+  const numberFieldAria = numberfield$1.useNumberField(__spreadProps$e(__spreadValues$f({}, numberFieldProps), {
+    validationState: error === false || error === void 0 ? void 0 : "invalid"
+  }), numberFieldState, ref);
+  return __spreadProps$e(__spreadValues$f({}, numberFieldAria), { state: numberFieldState });
+};
+
+var __defProp$e = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = 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$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(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 NumberField = React.forwardRef(function NumberField2(props, ref) {
+  var _b;
+  const _a = props, {
+    label,
+    isDisabled,
+    error,
+    note,
+    isRequired,
+    contextualHelp,
+    affix = "auto",
+    size = "lg",
+    labelPlacement = "above",
+    necessityIndicator = false,
+    alignInputRight,
+    showButtons = false,
+    incrementAriaLabel,
+    decrementAriaLabel,
+    autoFormat = false
+  } = _a, otherProps = __objRest$c(_a, [
+    "label",
+    "isDisabled",
+    "error",
+    "note",
+    "isRequired",
+    "contextualHelp",
+    "affix",
+    "size",
+    "labelPlacement",
+    "necessityIndicator",
+    "alignInputRight",
+    "showButtons",
+    "incrementAriaLabel",
+    "decrementAriaLabel",
+    "autoFormat"
+  ]);
+  const { prefix, postfix } = React.useMemo(() => {
+    if (affix === "auto") {
+      return { prefix: void 0, postfix: void 0 };
+    }
+    return { prefix: affix.prefix, postfix: affix.postfix };
+  }, [affix]);
+  sapphireReact.useThemeCheck();
+  const inputRef = utils.useObjectRef(props.inputRef);
+  const formatMessage = i18n.useMessageFormatter(intlMessages$1);
+  const {
+    inputProps,
+    labelProps,
+    incrementButtonProps,
+    decrementButtonProps,
+    descriptionProps,
+    errorMessageProps
+  } = useSapphireNumberField(__spreadProps$d(__spreadValues$e({}, props), {
+    incrementAriaLabel: incrementAriaLabel != null ? incrementAriaLabel : formatMessage("increment"),
+    decrementAriaLabel: decrementAriaLabel != null ? decrementAriaLabel : formatMessage("decrement")
+  }), inputRef);
+  const { focusProps, isFocusVisible } = focus.useFocusRing();
+  const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
+  const { locale } = i18n.useLocale();
+  const formatter = React.useMemo(() => new Intl.NumberFormat(locale, props.formatOptions), [locale, props.formatOptions]);
+  const formattingResult = useNumberFieldFormatting({
+    inputRef,
+    formatter,
+    inputValue: inputProps.value,
+    prefix,
+    postfix,
+    onOriginalKeyDown: inputProps.onKeyDown,
+    onChange: props.onChange,
+    autoFormat
+  });
+  const { extractedPrefix, extractedPostfix, handleInput, handleKeyDown } = autoFormat ? formattingResult : {
+    extractedPrefix: formattingResult.extractedPrefix,
+    extractedPostfix: formattingResult.extractedPostfix,
+    handleInput: void 0,
+    handleKeyDown: inputProps.onKeyDown
+  };
+  const containerRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => __spreadProps$d(__spreadValues$e({}, utils$1.createFocusableRef(containerRef, inputRef)), {
+    getInputElement() {
+      return inputRef.current;
+    }
+  }));
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$d(__spreadValues$e({}, removeUniqueDOMProps(otherProps)), {
+    ref: containerRef,
+    size,
+    labelPlacement
+  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Context, {
+    descriptionProps: error ? errorMessageProps : descriptionProps
+  }, label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps$d(__spreadValues$e({}, labelProps), {
+    size,
+    necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
+    contextualHelp
+  }), label)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+    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--md"]]: size === "md"
+    })
+  }, extractedPrefix && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__prefix"], {
+      [textFieldStyles__default["default"]["sapphire-text-field__prefix--icon"]]: typeof extractedPrefix !== "string"
+    })
+  }, extractedPrefix), /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$d(__spreadValues$e({}, utils.mergeProps(inputProps, focusProps, {
+    onChange: updateStyle,
+    onBlur: updateStyle
+  }, autoFormat ? {
+    onInput: handleInput,
+    onKeyDown: handleKeyDown
+  } : {})), {
+    value: (_b = formattingResult == null ? void 0 : formattingResult.displayValue) != null ? _b : inputProps.value,
+    ref: inputRef,
+    className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__input"], {
+      [textFieldStyles__default["default"]["sapphire-text-field__input--align-right"]]: !!alignInputRight
+    }),
+    style: autofillStyles
+  })), extractedPostfix && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__postfix"], {
+      [textFieldStyles__default["default"]["sapphire-text-field__postfix--icon"]]: typeof extractedPostfix !== "string"
+    })
+  }, extractedPostfix), showButtons && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: textFieldStyles__default["default"]["sapphire-text-field__stepper"]
+  }, /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$e({
+    variant: "decrement",
+    size
+  }, decrementButtonProps)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Separator, {
+    orientation: "vertical"
+  }), /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$e({
+    variant: "increment",
+    size
+  }, incrementButtonProps))))), (error && typeof error !== "boolean" || note) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, error && typeof error !== "boolean" ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, {
+    variant: "error"
+  }, error) : note ? note : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null))));
+});
+const removeUniqueDOMProps = (props) => Object.fromEntries(Object.entries(props).filter(([name]) => name !== "id" && !name.startsWith("data-")));
+
+const SecondarySidebarContext = React__default["default"].createContext(null);
+const useSecondarySidebarContext = () => {
+  const context = React.useContext(SecondarySidebarContext);
+  if (context) {
+    return context;
+  }
+  throw new Error("This should be rendered inside a <Sidebar />.");
+};
+const SecondarySidebarProvider = ({
+  openedId,
+  defaultOpenedId,
+  onOpenedIdChange,
+  themeVariant,
+  children
+}) => {
+  var _a, _b, _c, _d;
+  const context = React.useContext(SecondarySidebarContext);
+  const [secondarySidebarId, setSecondarySidebarId] = utils$2.useControlledState(openedId, defaultOpenedId != null ? defaultOpenedId : null, onOpenedIdChange);
+  const [content, setContent] = React.useState(null);
+  return /* @__PURE__ */ React__default["default"].createElement(SecondarySidebarContext.Provider, {
+    value: {
+      openedId: (_a = context == null ? void 0 : context.openedId) != null ? _a : secondarySidebarId,
+      setOpenedId: (_b = context == null ? void 0 : context.setOpenedId) != null ? _b : setSecondarySidebarId,
+      content: (_c = context == null ? void 0 : context.content) != null ? _c : content,
+      setContent: (_d = context == null ? void 0 : context.setContent) != null ? _d : setContent,
+      themeVariant: themeVariant != null ? themeVariant : context == null ? void 0 : context.themeVariant
+    }
+  }, children);
+};
+
+const ResponsiveSidebarContext = React__default["default"].createContext(null);
+function useResponsiveSidebarContext() {
+  return React.useContext(ResponsiveSidebarContext);
+}
+function useIsSidebarCollapsed() {
+  const context = React.useContext(ResponsiveSidebarContext);
+  const matchedBreakpoints = sapphireReact.useMatchedBreakpoints();
+  if (!context) {
+    return null;
+  }
+  const { collapsed } = context;
+  if (typeof collapsed === "boolean") {
+    return collapsed;
+  }
+  if (typeof collapsed === "string") {
+    return !matchedBreakpoints.includes(collapsed);
+  }
+  return !matchedBreakpoints.includes("md");
+}
+const ResponsiveSidebarProvider = ({
+  collapsed,
+  isPanelOpen,
+  defaultIsPanelOpen,
+  onPanelOpenChange,
+  children
+}) => {
+  const [isOpen, setOpen] = utils$2.useControlledState(isPanelOpen, defaultIsPanelOpen != null ? defaultIsPanelOpen : false, onPanelOpenChange);
+  return /* @__PURE__ */ React__default["default"].createElement(ResponsiveSidebarContext.Provider, {
+    value: {
+      isPanelOpen: isOpen,
+      setPanelOpen: setOpen,
+      collapsed
+    }
+  }, children);
+};
+
+var __defProp$d = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = 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$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(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 SidebarPanel = (_a) => {
+  var _b = _a, {
+    children,
+    header
+  } = _b, props = __objRest$b(_b, [
+    "children",
+    "header"
+  ]);
+  const { openedId, setOpenedId, content } = useSecondarySidebarContext();
+  const responsiveContext = useResponsiveSidebarContext();
+  if (!responsiveContext) {
+    throw new Error("<SidebarPanel> must be rendered inside a <Sidebar.ResponsiveProvider>");
+  }
+  const { isPanelOpen, setPanelOpen } = responsiveContext;
+  const isCollapsed = useIsSidebarCollapsed();
+  React.useEffect(() => {
+    if (!isCollapsed) {
+      setPanelOpen(false);
+    }
+  }, [isCollapsed]);
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Panel, __spreadProps$c(__spreadValues$d({}, props), {
+    isOpen: isPanelOpen,
+    onClose: () => setPanelOpen(false),
+    onCloseTransitionDone: () => setOpenedId(null),
+    alignLeft: true,
+    isDismissable: true,
+    width: 320
+  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ModalLayout, {
+    header: /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ModalLayout.Header, {
+      heading: openedId === null ? header : content == null ? void 0 : content.header,
+      backButton: openedId !== null && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.IconButton, {
+        size: "md",
+        "aria-label": "Back",
+        variant: "tertiary",
+        marginLeft: `calc(-1 * ${sapphireReact.tokens.size.spacingSm})`,
+        onPress: () => setOpenedId(null)
+      }, /* @__PURE__ */ React__default["default"].createElement(react.ChevronLeft, null))
+    }),
+    body: /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ModalLayout.Body, {
+      noPadding: true,
+      UNSAFE_style: {
+        paddingLeft: sapphireReact.tokens.size.spacingMd.value,
+        paddingRight: sapphireReact.tokens.size.spacingMd.value
+      }
+    }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.View, {
+      isHidden: openedId !== null
+    }, children), openedId && (content == null ? void 0 : content.body)))
+  }));
+};
+const SidebarPanelTrigger = ({
+  children
+}) => {
+  const context = useResponsiveSidebarContext();
+  if (!context) {
+    throw new Error("<Sidebar.PanelTrigger> should be rendered inside a <Sidebar.ResponsiveProvider>");
+  }
+  const isCollapsed = useIsSidebarCollapsed();
+  const panelTriggerProps = {
+    onPress: () => {
+      context.setPanelOpen(true);
+    }
+  };
+  return isCollapsed ? children(panelTriggerProps) : null;
+};
+
+const useSidebar = () => {
+  const { openedId, setOpenedId } = useSecondarySidebarContext();
+  const responsiveContext = useResponsiveSidebarContext();
+  const { isPanelOpen, setPanelOpen } = responsiveContext ? responsiveContext : { isPanelOpen: false, setPanelOpen: () => {
+  } };
+  return {
+    sidebarProps: { onBlurWithin: () => setOpenedId(null) },
+    itemProps: {
+      onPress: () => {
+        setPanelOpen(false);
+        if (!isPanelOpen) {
+          setOpenedId(null);
+        }
+      }
+    },
+    getExpandableItemProps: (id) => ({
+      onPress: () => setOpenedId(openedId === id ? null : id)
+    }),
+    secondarySidebarProps: {
+      onClose: () => setOpenedId(null)
+    }
+  };
+};
+
+var __defProp$c = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = 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$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(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 Sidebar = (_a) => {
+  var _b = _a, {
+    themeVariant,
+    openedSecondarySidebar,
+    defaultOpenedSecondarySidebar,
+    onSecondarySidebarChange,
+    secondarySidebarThemeVariant,
+    children
+  } = _b, props = __objRest$a(_b, [
+    "themeVariant",
+    "openedSecondarySidebar",
+    "defaultOpenedSecondarySidebar",
+    "onSecondarySidebarChange",
+    "secondarySidebarThemeVariant",
+    "children"
+  ]);
+  sapphireReact.useThemeCheck();
+  return /* @__PURE__ */ React__default["default"].createElement(SecondarySidebarProvider, {
+    openedId: openedSecondarySidebar,
+    defaultOpenedId: defaultOpenedSecondarySidebar,
+    onOpenedIdChange: onSecondarySidebarChange,
+    themeVariant: secondarySidebarThemeVariant
+  }, /* @__PURE__ */ React__default["default"].createElement(WithThemeRoot, {
+    themeVariant
+  }, /* @__PURE__ */ React__default["default"].createElement(SidebarContent, __spreadValues$c({}, props), children)));
+};
+const SidebarContent = (_c) => {
+  var _d = _c, {
+    onBlurWithin,
+    onFocusWithin,
+    onFocusWithinChange,
+    closeOnBlurWithin = true,
+    header,
+    panelHeader,
+    children
+  } = _d, props = __objRest$a(_d, [
+    "onBlurWithin",
+    "onFocusWithin",
+    "onFocusWithinChange",
+    "closeOnBlurWithin",
+    "header",
+    "panelHeader",
+    "children"
+  ]);
+  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
+  const { sidebarProps } = useSidebar();
+  const { focusWithinProps } = interactions.useFocusWithin(utils.mergeProps({
+    onBlurWithin,
+    onFocusWithin,
+    onFocusWithinChange
+  }, closeOnBlurWithin ? sidebarProps : {}));
+  const responsiveSidebarContext = useResponsiveSidebarContext();
+  const isCollapsed = useIsSidebarCollapsed();
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, !isCollapsed && /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$b(__spreadValues$c(__spreadValues$c(__spreadValues$c({}, styleProps), utils.filterDOMProps(props, { global: true })), focusWithinProps), {
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar"]),
+    tabIndex: -1
+  }), header, children), responsiveSidebarContext && /* @__PURE__ */ React__default["default"].createElement(SidebarPanel, {
+    header: panelHeader
+  }, children));
+};
+const WithThemeRoot = ({
+  children,
+  themeVariant
+}) => themeVariant ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ThemeRoot, {
+  variant: themeVariant,
+  noSurface: true,
+  height: "100%",
+  width: "min-content"
+}, children) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children);
+
+var __defProp$b = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = 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$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(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 SidebarHeader = (_a) => {
+  var _b = _a, {
+    children,
+    closeButtonProps
+  } = _b, props = __objRest$9(_b, [
+    "children",
+    "closeButtonProps"
+  ]);
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$a(__spreadValues$b({}, utils.filterDOMProps(props)), {
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__header"])
+  }), children, closeButtonProps && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.IconButton, __spreadProps$a(__spreadValues$b({}, closeButtonProps), {
+    "aria-label": "Close"
+  }), /* @__PURE__ */ React__default["default"].createElement(react.CloseLarge, null)));
+};
+
+var __defProp$a = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = 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$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(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 SidebarItem = React__default["default"].forwardRef(function SidebarItem2(_a, ref) {
+  var _b = _a, { isActive, children } = _b, props = __objRest$8(_b, ["isActive", "children"]);
+  const { itemProps } = useSidebar();
+  return /* @__PURE__ */ React__default["default"].createElement("li", {
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__nav-item"])
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$9(__spreadValues$a({
     ref,
-    role: "img"
-  }, ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": true }), {
-    className: clsx__default["default"](styles__default$4["default"]["sapphire-flag"], styleProps.className, {
-      [styles__default$4["default"]["sapphire-flag--xs"]]: size === "xs",
-      [styles__default$4["default"]["sapphire-flag--sm"]]: size === "sm",
-      [styles__default$4["default"]["sapphire-flag--md"]]: size === "md",
-      [styles__default$4["default"]["sapphire-flag--lg"]]: size === "lg",
-      [styles__default$4["default"]["sapphire-flag--xl"]]: size === "xl",
-      [styles__default$4["default"]["sapphire-flag--rounded"]]: rounded
-    }),
-    style: styleProps.style
-  }));
+    variant: "tertiary",
+    elementType: "a",
+    "aria-current": isActive ? "page" : void 0
+  }, utils.mergeProps(props, itemProps)), {
+    UNSAFE_className: clsx__default["default"](buttonStyles__default["default"]["sapphire-button--stretch-left-align"], { [buttonStyles__default["default"]["sapphire-button--selected"]]: isActive })
+  }), children));
 });
 
 var __defProp$9 = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
 var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
 var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
@@ -1331,7 +2627,7 @@ var __spreadValues$9 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1344,94 +2640,96 @@ var __objRest$7 = (source, exclude) => {
     }
   return target;
 };
-function LabeledValue(_a) {
+const SidebarExpandableItem = React__default["default"].forwardRef(function SidebarExpandableItem2(_a, ref) {
   var _b = _a, {
-    children,
-    contextualHelp,
-    label: label$1,
-    labelPlacement = "above",
-    size = "lg"
-  } = _b, otherProps = __objRest$7(_b, [
-    "children",
-    "contextualHelp",
-    "label",
-    "labelPlacement",
-    "size"
+    id,
+    isActive,
+    body,
+    header,
+    children
+  } = _b, props = __objRest$7(_b, [
+    "id",
+    "isActive",
+    "body",
+    "header",
+    "children"
   ]);
-  sapphireReact.useThemeCheck();
-  const { fieldProps } = label.useField({ label: label$1 });
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$9(__spreadValues$9({}, utils.mergeProps(fieldProps, otherProps)), {
-    labelPlacement,
-    size,
-    noDefaultWidth: true
-  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, {
-    contextualHelp,
-    size
-  }, label$1)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, children));
-}
-
-var increment$6 = "øge";
-var decrement$6 = "formindske";
-var da$1 = {
-	increment: increment$6,
-	decrement: decrement$6
-};
-
-var increment$5 = "Increase";
-var decrement$5 = "Decrease";
-var en$1 = {
-	increment: increment$5,
-	decrement: decrement$5
-};
-
-var increment$4 = "erhöhen";
-var decrement$4 = "verringern";
-var de$1 = {
-	increment: increment$4,
-	decrement: decrement$4
-};
-
-var increment$3 = "lisääntyä";
-var decrement$3 = "vähentää";
-var fi$1 = {
-	increment: increment$3,
-	decrement: decrement$3
-};
-
-var increment$2 = "øke";
-var decrement$2 = "avta";
-var no$1 = {
-	increment: increment$2,
-	decrement: decrement$2
-};
-
-var increment$1 = "zwiększyć";
-var decrement$1 = "zmniejszenie";
-var pl$1 = {
-	increment: increment$1,
-	decrement: decrement$1
-};
-
-var increment = "öka";
-var decrement = "minska";
-var se$1 = {
-	increment: increment,
-	decrement: decrement
-};
-
-var intlMessages$1 = {
-  "da-DK": da$1,
-  "en-US": en$1,
-  "de-DE": de$1,
-  "fi-FI": fi$1,
-  "nb-NO": no$1,
-  "pl-PL": pl$1,
-  "sv-SE": se$1
+  const { openedId, setContent, themeVariant } = useSecondarySidebarContext();
+  const isCollapsed = useIsSidebarCollapsed();
+  const { getExpandableItemProps, secondarySidebarProps } = useSidebar();
+  const itemId = utils.useId(id);
+  const isOpen = openedId === itemId;
+  React.useLayoutEffect(() => {
+    if (isOpen) {
+      setContent({ header, body });
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ React__default["default"].createElement("li", {
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__nav-item"])
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$8(__spreadValues$9({
+    variant: "tertiary",
+    "aria-current": isActive || void 0,
+    ref
+  }, utils.mergeProps(getExpandableItemProps(itemId), props)), {
+    UNSAFE_className: clsx__default["default"](buttonStyles__default["default"]["sapphire-button--stretch-left-align"], {
+      [buttonStyles__default["default"]["sapphire-button--selected"]]: isActive && !isOpen,
+      [buttonStyles__default["default"]["is-active"]]: isOpen
+    })
+  }), children), /* @__PURE__ */ React__default["default"].createElement(SecondarySidebar, __spreadValues$9({
+    isOpen: isOpen && !isCollapsed,
+    header,
+    themeVariant
+  }, secondarySidebarProps), body));
+});
+const SecondarySidebar = ({
+  isOpen,
+  onClose,
+  onCloseTransitionDone,
+  themeVariant,
+  header,
+  children
+}) => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose == null ? void 0 : onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.Transition, {
+    in: isOpen,
+    mountOnEnter: true,
+    nodeRef: ref,
+    unmountOnExit: true,
+    onExited: onCloseTransitionDone,
+    timeout: 200
+  }, (transitionState) => /* @__PURE__ */ React__default["default"].createElement("div", {
+    ref,
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__secondary-container"], {
+      [styles__default$6["default"]["sapphire-sidebar--slide-in"]]: true,
+      [styles__default$6["default"]["sapphire-sidebar--slide-out"]]: transitionState === "exiting"
+    })
+  }, /* @__PURE__ */ React__default["default"].createElement(focus.FocusScope, {
+    restoreFocus: true,
+    autoFocus: true
+  }, /* @__PURE__ */ React__default["default"].createElement(_Sidebar, {
+    themeVariant,
+    closeOnBlurWithin: false,
+    header: /* @__PURE__ */ React__default["default"].createElement(_Sidebar.Header, {
+      closeButtonProps: {
+        onPress: () => onClose == null ? void 0 : onClose()
+      }
+    }, header),
+    panelHeader: null
+  }, children))));
 };
 
 var __defProp$8 = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
 var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
 var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
@@ -1447,7 +2745,7 @@ var __spreadValues$8 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1460,48 +2758,33 @@ var __objRest$6 = (source, exclude) => {
     }
   return target;
 };
-const StepperButton = (_a) => {
+const SidebarSection = (_a) => {
   var _b = _a, {
-    variant,
-    size
+    title,
+    "aria-label": label,
+    children
   } = _b, props = __objRest$6(_b, [
-    "variant",
-    "size"
+    "title",
+    "aria-label",
+    "children"
   ]);
-  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$8(__spreadValues$8({}, utils.mergeProps(buttonProps, hoverProps, utils.filterDOMProps(props, { global: true }))), {
-    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)));
+  sapphireReact.useThemeCheck();
+  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
+  const { itemProps, headingProps, groupProps } = listbox.useListBoxSection({
+    heading: title,
+    "aria-label": label
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("li", {
+    role: "separator",
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__separator"])
+  }), /* @__PURE__ */ React__default["default"].createElement("li", __spreadValues$8(__spreadValues$8(__spreadValues$8({}, itemProps), styleProps), utils.filterDOMProps(props, { global: true })), title && /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$7(__spreadValues$8({}, headingProps), {
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__section-header"])
+  }), title), /* @__PURE__ */ React__default["default"].createElement("ul", __spreadProps$7(__spreadValues$8({}, groupProps), {
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__section"])
+  }), children)));
 };
 
-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$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;
@@ -1517,7 +2800,6 @@ var __spreadValues$7 = (a, b) => {
     }
   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)
@@ -1530,16 +2812,24 @@ var __objRest$5 = (source, exclude) => {
     }
   return target;
 };
-const useSapphireNumberField = (_a, ref) => {
-  var _b = _a, { error } = _b, numberFieldProps = __objRest$5(_b, ["error"]);
-  const { locale } = i18n.useLocale();
-  const numberFieldState = numberfield.useNumberFieldState(__spreadProps$7(__spreadValues$7({}, numberFieldProps), {
-    locale
-  }));
-  const numberFieldAria = numberfield$1.useNumberField(__spreadProps$7(__spreadValues$7({}, numberFieldProps), {
-    validationState: error === false || error === void 0 ? void 0 : "invalid"
-  }), numberFieldState, ref);
-  return numberFieldAria;
+const SidebarBody = (_a) => {
+  var _b = _a, {
+    elementType = "nav",
+    children
+  } = _b, props = __objRest$5(_b, [
+    "elementType",
+    "children"
+  ]);
+  const RootNode = elementType;
+  const sidebarBody = React.useRef(null);
+  const { isScrolled, scrollCheckProps } = sapphireReact.useScrollCheck(sidebarBody);
+  return /* @__PURE__ */ React__default["default"].createElement(RootNode, __spreadValues$7(__spreadValues$7({
+    ref: sidebarBody,
+    tabIndex: -1,
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__body"], {
+      [styles__default$6["default"]["sapphire-sidebar__body--scrolled"]]: isScrolled
+    })
+  }, utils.filterDOMProps(props, { global: true })), scrollCheckProps), children);
 };
 
 var __defProp$6 = Object.defineProperty;
@@ -1573,108 +2863,30 @@ var __objRest$4 = (source, exclude) => {
     }
   return target;
 };
-const NumberField = React.forwardRef(function NumberField2(props, ref) {
-  const _a = props, {
-    label,
-    isDisabled,
-    error,
-    note,
-    isRequired,
-    contextualHelp,
-    prefix,
-    postfix,
-    size = "lg",
-    labelPlacement = "above",
-    necessityIndicator = false,
-    alignInputRight,
-    showButtons = false,
-    incrementAriaLabel,
-    decrementAriaLabel
-  } = _a, otherProps = __objRest$4(_a, [
-    "label",
-    "isDisabled",
-    "error",
-    "note",
-    "isRequired",
-    "contextualHelp",
-    "prefix",
-    "postfix",
-    "size",
-    "labelPlacement",
-    "necessityIndicator",
-    "alignInputRight",
-    "showButtons",
-    "incrementAriaLabel",
-    "decrementAriaLabel"
+const SidebarList = (_a) => {
+  var _b = _a, {
+    elementType = "ul",
+    children
+  } = _b, props = __objRest$4(_b, [
+    "elementType",
+    "children"
   ]);
-  sapphireReact.useThemeCheck();
-  const inputRef = utils.useObjectRef(props.inputRef);
-  const formatMessage = i18n.useMessageFormatter(intlMessages$1);
-  const {
-    inputProps,
-    labelProps,
-    incrementButtonProps,
-    decrementButtonProps,
-    descriptionProps,
-    errorMessageProps
-  } = useSapphireNumberField(__spreadProps$6(__spreadValues$6({}, props), {
-    incrementAriaLabel: incrementAriaLabel != null ? incrementAriaLabel : formatMessage("increment"),
-    decrementAriaLabel: decrementAriaLabel != null ? decrementAriaLabel : formatMessage("decrement")
-  }), inputRef);
-  const { focusProps, isFocusVisible } = focus.useFocusRing();
-  const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
-  const containerRef = React.useRef(null);
-  React.useImperativeHandle(ref, () => __spreadProps$6(__spreadValues$6({}, utils$1.createFocusableRef(containerRef, inputRef)), {
-    getInputElement() {
-      return inputRef.current;
-    }
-  }));
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$6(__spreadValues$6({}, removeUniqueDOMProps(otherProps)), {
-    ref: containerRef,
-    size,
-    labelPlacement
-  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Context, {
-    descriptionProps: error ? errorMessageProps : descriptionProps
-  }, label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps$6(__spreadValues$6({}, labelProps), {
-    size,
-    necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
-    contextualHelp
-  }), label)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-    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--md"]]: size === "md"
-    })
-  }, prefix && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__prefix"], {
-      [textFieldStyles__default["default"]["sapphire-text-field__prefix--icon"]]: typeof prefix !== "string"
-    })
-  }, prefix), /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$6(__spreadValues$6({}, utils.mergeProps(inputProps, focusProps, {
-    onChange: updateStyle,
-    onBlur: updateStyle
-  })), {
-    ref: inputRef,
-    className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__input"], {
-      [textFieldStyles__default["default"]["sapphire-text-field__input--align-right"]]: !!alignInputRight
-    }),
-    style: autofillStyles
-  })), postfix && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__postfix"], {
-      [textFieldStyles__default["default"]["sapphire-text-field__postfix--icon"]]: typeof postfix !== "string"
-    })
-  }, postfix), showButtons && /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__stepper"])
-  }, /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$6({
-    variant: "increment",
-    size
-  }, incrementButtonProps)), /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$6({
-    variant: "decrement",
-    size
-  }, decrementButtonProps))))), (error && typeof error !== "boolean" || note) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, error && typeof error !== "boolean" ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, {
-    variant: "error"
-  }, error) : note ? note : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null))));
+  const RootNode = elementType;
+  return /* @__PURE__ */ React__default["default"].createElement(RootNode, __spreadProps$6(__spreadValues$6({}, utils.filterDOMProps(props, { global: true })), {
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__nav-list"])
+  }), children);
+};
+
+const _Sidebar = Object.assign(Sidebar, {
+  ResponsiveProvider: ResponsiveSidebarProvider,
+  Header: SidebarHeader,
+  Body: SidebarBody,
+  List: SidebarList,
+  Item: SidebarItem,
+  ExpandableItem: SidebarExpandableItem,
+  Section: SidebarSection,
+  PanelTrigger: SidebarPanelTrigger
 });
-const removeUniqueDOMProps = (props) => Object.fromEntries(Object.entries(props).filter(([name]) => name !== "id" && !name.startsWith("data-")));
 
 var __defProp$5 = Object.defineProperty;
 var __defProps$5 = Object.defineProperties;
@@ -1712,14 +2924,14 @@ const ProgressIndicator = (props) => {
   const value = Math.min(Math.max(realValue, minValue), maxValue);
   const widthPercentage = value / maxValue * 100;
   return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$5(__spreadValues$5({}, utils.filterDOMProps(props, { global: true })), {
-    className: clsx__default["default"](styles__default$5["default"]["sapphire-progress"])
+    className: clsx__default["default"](styles__default$7["default"]["sapphire-progress"])
   }), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$5(__spreadValues$5({}, progressBarProps), {
-    className: styles__default$5["default"]["sapphire-progress--indicator"],
+    className: styles__default$7["default"]["sapphire-progress--indicator"],
     style: __spreadProps$5(__spreadValues$5({}, styleProps), { width: `${widthPercentage}%` }),
     "aria-label": "aria-label" in props ? props["aria-label"] : void 0,
     "aria-labelledby": "aria-labelledby" in props ? props["aria-labelledby"] : void 0
   })), segments > 1 && /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles__default$5["default"]["sapphire-progress--segments"]
+    className: styles__default$7["default"]["sapphire-progress--segments"]
   }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React__default["default"].createElement("span", {
     key: index
   }))));
@@ -1775,21 +2987,21 @@ const Slider = (_a) => {
   }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Context, null, label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, null, label)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Slider, __spreadProps$4(__spreadValues$4({}, props), {
     style: { height: "100%" }
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$6["default"]["sapphire-slider"]),
+    className: clsx__default["default"](styles__default$8["default"]["sapphire-slider"]),
     role: "slider"
   }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.SliderTrack, {
-    className: ({ isDisabled }) => clsx__default["default"](styles__default$6["default"]["sapphire-slider__track"], {
-      [styles__default$6["default"]["is-disabled"]]: isDisabled
+    className: ({ isDisabled }) => clsx__default["default"](styles__default$8["default"]["sapphire-slider__track"], {
+      [styles__default$8["default"]["is-disabled"]]: isDisabled
     })
   }, ({ state }) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$6["default"]["sapphire-slider__track-remaining"])
+    className: clsx__default["default"](styles__default$8["default"]["sapphire-slider__track-remaining"])
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$6["default"]["sapphire-slider__track-fill"]),
+    className: clsx__default["default"](styles__default$8["default"]["sapphire-slider__track-fill"]),
     style: { width: state.getThumbPercent(0) * 100 + "%" }
   }), /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.SliderThumb, {
     name,
-    className: (state2) => clsx__default["default"](styles__default$6["default"]["sapphire-slider__thumb"], {
-      [styles__default$6["default"]["is-focus"]]: state2.isFocusVisible
+    className: (state2) => clsx__default["default"](styles__default$8["default"]["sapphire-slider__thumb"], {
+      [styles__default$8["default"]["is-focus"]]: state2.isFocusVisible
     }),
     style: ({ state: state2 }) => {
       const percent = Math.min(3 + state2.getThumbPercent(0) * 94, 100);
@@ -1856,41 +3068,49 @@ function Tag(props) {
   ]);
   const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
   const hasAction = otherProps.hasAction;
-  return /* @__PURE__ */ React__default["default"].createElement(focus.FocusRing, {
-    focusRingClass: styles__default$7["default"]["is-focus"]
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$3(__spreadProps$3(__spreadValues$3({
-    ref
-  }, utils.mergeProps({
-    onKeyDown: (e) => {
-      if (e.key !== " ") {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-      } else {
-        e.preventDefault();
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.TooltipIfNeeded, {
+    title: item.rendered
+  }, (tooltipRef, tooltipProps) => {
+    const _a2 = tooltipProps || {}, { ref: tooltipTargetRef } = _a2, restTooltipProps = __objRest$2(_a2, ["ref"]);
+    return /* @__PURE__ */ React__default["default"].createElement(focus.FocusRing, {
+      focusRingClass: styles__default$9["default"]["is-focus"]
+    }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$3(__spreadProps$3(__spreadValues$3({
+      ref: utils.mergeRefs(ref, tooltipTargetRef)
+    }, utils.mergeProps({
+      onKeyDown: (e) => {
+        if (e.key !== " ") {
+          onKeyDown == null ? void 0 : onKeyDown(e);
+        } else {
+          e.preventDefault();
+        }
       }
-    }
-  }, rowProps, hoverProps)), {
-    className: clsx__default["default"](styles__default$7["default"]["sapphire-tag"], styles__default$7["default"]["js-focus"], styles__default$7["default"]["js-hover"], {
-      [styles__default$7["default"]["sapphire-tag--actionable"]]: hasAction,
-      [styles__default$7["default"]["is-active"]]: hasAction && isPressed,
-      [styles__default$7["default"]["is-hover"]]: hasAction && isHovered,
-      [styles__default$7["default"]["is-disabled"]]: isDisabled
-    })
-  }), hasError ? { "aria-invalid": true } : {}), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$3(__spreadValues$3({}, gridCellProps), {
-    className: styles__default$7["default"]["sapphire-tag__content"]
-  }), hasError && !isDisabled && /* @__PURE__ */ React__default["default"].createElement(IconError, null), item.rendered, !isDisabled && props.allowsRemoving && /* @__PURE__ */ React__default["default"].createElement(RemoveButton, __spreadValues$3({}, removeButtonProps)))));
+    }, rowProps, hoverProps, restTooltipProps)), {
+      className: clsx__default["default"](styles__default$9["default"]["sapphire-tag"], styles__default$9["default"]["js-focus"], styles__default$9["default"]["js-hover"], {
+        [styles__default$9["default"]["sapphire-tag--actionable"]]: hasAction,
+        [styles__default$9["default"]["is-active"]]: hasAction && isPressed,
+        [styles__default$9["default"]["is-hover"]]: hasAction && isHovered,
+        [styles__default$9["default"]["is-disabled"]]: isDisabled
+      })
+    }), hasError ? { "aria-invalid": true } : {}), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$3(__spreadValues$3({}, gridCellProps), {
+      className: styles__default$9["default"]["sapphire-tag__content"]
+    }), hasError && !isDisabled && /* @__PURE__ */ React__default["default"].createElement(IconError, null), /* @__PURE__ */ React__default["default"].createElement("span", {
+      ref: tooltipRef,
+      className: styles__default$9["default"]["sapphire-tag__label"]
+    }, item.rendered), !isDisabled && props.allowsRemoving && /* @__PURE__ */ React__default["default"].createElement(RemoveButton, __spreadValues$3({}, removeButtonProps)))));
+  });
 }
 function RemoveButton(removeButtonProps) {
   const buttonRef = React.useRef(null);
   const { buttonProps } = button.useButton(removeButtonProps, buttonRef);
   return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$3(__spreadValues$3({}, buttonProps), {
-    className: clsx__default["default"](styles__default$7["default"]["sapphire-tag__button"], styles__default$7["default"]["js-focus"])
+    className: clsx__default["default"](styles__default$9["default"]["sapphire-tag__button"], styles__default$9["default"]["js-focus"])
   }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
     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$7["default"]["sapphire-tag__error-icon"])
+    className: clsx__default["default"](styles__default$9["default"]["sapphire-tag__error-icon"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
     size: "sm"
   }, /* @__PURE__ */ React__default["default"].createElement(react.Error, null)));
@@ -1969,7 +3189,7 @@ function TagGroup(props) {
     contextualHelp
   }), labelText)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$2(__spreadValues$2({}, gridProps), {
     ref,
-    className: styles__default$7["default"]["sapphire-tag-group"]
+    className: styles__default$9["default"]["sapphire-tag-group"]
   }), Array.from(state.collection).map((item) => /* @__PURE__ */ React__default["default"].createElement(Tag, {
     key: item.key,
     item,
@@ -1981,7 +3201,7 @@ function TagGroup(props) {
   }, errorMessage)) : /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, note))));
 }
 
-const TagItem = collections.Item;
+const TagItem = collections$1.Item;
 
 var __defProp$1 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
@@ -2010,7 +3230,7 @@ const TimeSegment = ({ segment, state }) => segment.type === "hour" || segment.t
 });
 const SeparatorSegment = ({ segment }) => /* @__PURE__ */ React__default["default"].createElement("span", {
   "aria-hidden": "true",
-  className: clsx__default["default"](styles__default$8["default"]["sapphire-date-field__segment"], styles__default$8["default"]["sapphire-date-field__segment--separator"])
+  className: clsx__default["default"](styles__default$a["default"]["sapphire-date-field__segment"], styles__default$a["default"]["sapphire-date-field__segment--separator"])
 }, segment.text);
 const EditableSegment = ({ segment, state }) => {
   const ref = React.useRef(null);
@@ -2018,8 +3238,8 @@ const EditableSegment = ({ segment, state }) => {
   return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$1(__spreadValues$1({}, segmentProps), {
     style: segmentProps.style,
     ref,
-    className: clsx__default["default"](styles__default$8["default"]["sapphire-date-field__segment"], {
-      [styles__default$8["default"]["sapphire-date-field__segment--filled"]]: !segment.isPlaceholder
+    className: clsx__default["default"](styles__default$a["default"]["sapphire-date-field__segment"], {
+      [styles__default$a["default"]["sapphire-date-field__segment--filled"]]: !segment.isPlaceholder
     })
   }), segment.text);
 };
@@ -2137,14 +3357,14 @@ function _TimeField(_a, ref) {
     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", {
-    className: clsx__default["default"](styles__default$8["default"]["sapphire-date-field"], {
-      [styles__default$8["default"]["sapphire-date-field--error"]]: state.isInvalid,
-      [styles__default$8["default"]["sapphire-date-field--no-clear-button"]]: noClearButton,
-      [styles__default$8["default"]["sapphire-date-field--no-calendar"]]: true,
-      [styles__default$8["default"]["sapphire-date-field--md"]]: size === "md"
+    className: clsx__default["default"](styles__default$a["default"]["sapphire-date-field"], {
+      [styles__default$a["default"]["sapphire-date-field--error"]]: state.isInvalid,
+      [styles__default$a["default"]["sapphire-date-field--no-clear-button"]]: noClearButton,
+      [styles__default$a["default"]["sapphire-date-field--no-calendar"]]: true,
+      [styles__default$a["default"]["sapphire-date-field--md"]]: size === "md"
     })
   }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps(__spreadValues({}, fieldProps), {
-    className: styles__default$8["default"]["sapphire-date-field__input"],
+    className: styles__default$a["default"]["sapphire-date-field__input"],
     ref: timeFieldRef
   }), state.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(TimeSegment, {
     key: i,
@@ -2154,7 +3374,7 @@ function _TimeField(_a, ref) {
     "aria-label": formatMessage("clear"),
     onPress: () => state.segments.forEach((segment) => state.clearSegment(segment.type)),
     size: size === "md" ? "sm" : "md",
-    UNSAFE_className: clsx__default["default"](styles__default$8["default"]["sapphire-date-field__button"], styles__default$8["default"]["sapphire-date-field__button--clear"])
+    UNSAFE_className: clsx__default["default"](styles__default$a["default"]["sapphire-date-field__button"], styles__default$a["default"]["sapphire-date-field__button--clear"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, null, /* @__PURE__ */ React__default["default"].createElement(react.CloseOutline, null))))), !!error && typeof error !== "boolean" || note ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, !!error && typeof error !== "boolean" ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, {
     variant: "error"
   }, error) : note ? note : null) : null);
@@ -2168,6 +3388,7 @@ Object.defineProperty(exports, 'useLocale', {
 exports.Accordion = _Accordion;
 exports.AccordionContext = AccordionContext;
 exports.Alert = Alert;
+exports.Amount = Amount;
 exports.Autocomplete = Autocomplete;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.Breadcrumbs = Breadcrumbs;
@@ -2179,6 +3400,7 @@ exports.LabeledValue = LabeledValue;
 exports.NumberField = NumberField;
 exports.ProgressIndicator = ProgressIndicator;
 exports.SearchableSelectFilter = SearchableSelectFilter;
+exports.Sidebar = _Sidebar;
 exports.Slider = _Slider;
 exports.TagGroup = TagGroup;
 exports.TagItem = TagItem;