@danske/sapphire-react-lab 0.104.0 → 0.105.1

package/build/cjs/index.js

@@ -11,36 +11,37 @@ var focus = require('@react-aria/focus');
 var reactAriaComponents = require('react-aria-components');
 var react = require('@danske/sapphire-icons/react');
 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 = require('@react-aria/collections');
-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 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/sidebar/sidebar.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$6 = require('@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css');
+var styles$7 = require('@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css');
 var progress = require('@react-aria/progress');
-var styles$7 = 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$8 = 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 collections$1 = require('@react-stately/collections');
-var styles$9 = require('@danske/sapphire-css/components/dateField/dateField.module.css');
+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');
 
@@ -54,13 +55,14 @@ 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 buttonStyles__default = /*#__PURE__*/_interopDefaultLegacy(buttonStyles);
+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,
@@ -74,33 +76,33 @@ function useAccordionContext() {
   throw new Error("Accordion context can only be used within Accordion component.");
 }
 
-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) => {
+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$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]);
+    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$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
-var __objRest$t = (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$w.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$w)
-    for (var prop of __getOwnPropSymbols$w(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$w.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;
@@ -117,7 +119,7 @@ const Accordion = React.forwardRef(function Accordion2(_a, ref) {
     defaultExpandedKeys,
     onExpandedChange,
     isDisabled
-  } = _b, props = __objRest$t(_b, [
+  } = _b, props = __objRest$u(_b, [
     "allowsMultipleExpanded",
     "headerLevel",
     "hideLastDivider",
@@ -134,7 +136,7 @@ const Accordion = React.forwardRef(function Accordion2(_a, ref) {
   const forwardedRef = utils.useObjectRef(ref);
   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$t(__spreadValues$w({}, utils.filterDOMProps(props, { global: true, labelable: true })), {
+  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.DisclosureGroup, __spreadProps$u(__spreadValues$x({}, utils.filterDOMProps(props, { global: true, labelable: true })), {
     allowsMultipleExpanded,
     expandedKeys,
     defaultExpandedKeys,
@@ -145,7 +147,7 @@ const Accordion = React.forwardRef(function Accordion2(_a, ref) {
       [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$w(__spreadValues$w({}, 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)
@@ -157,41 +159,41 @@ const customPaddingStyleProps = (sidePadding) => ({
   paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
 });
 
-var __defProp$v = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
-var __hasOwnProp$v = Object.prototype.hasOwnProperty;
-var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$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) => {
+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$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]);
+    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$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
-var __objRest$s = (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$v.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$v)
-    for (var prop of __getOwnPropSymbols$v(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$v.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 = React.forwardRef(function AccordionHeading2(_a, ref) {
-  var _b = _a, { children, headerLevel } = _b, props = __objRest$s(_b, ["children", "headerLevel"]);
+  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$s(__spreadValues$v({
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$t(__spreadValues$w({
     role: "heading",
     "aria-level": headerLevel != null ? headerLevel : contextHeaderLevel
   }, utils.filterDOMProps(props, { global: true })), {
@@ -214,36 +216,36 @@ const AccordionHeading = React.forwardRef(function AccordionHeading2(_a, ref) {
   }, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null)))));
 });
 
-var __defProp$u = Object.defineProperty;
-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) => {
+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$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]);
+    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$r = (source, exclude) => {
+var __objRest$s = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$u.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$v.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))
+  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$r(_b, ["children", "id"]);
+  var _b = _a, { children, id } = _b, props = __objRest$s(_b, ["children", "id"]);
   const ref = utils.useObjectRef(forwardedRef);
   const focusManager = focus.useFocusManager();
   const onKeyDown = (e) => {
@@ -273,7 +275,7 @@ const AccordionItem = React.forwardRef(function AccordionItem2(_a, forwardedRef)
     }
   };
   utils.useEvent(ref, "keydown", onKeyDown);
-  return /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Disclosure, __spreadValues$u({
+  return /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Disclosure, __spreadValues$v({
     ref,
     id,
     className: ({ isExpanded, isDisabled }) => clsx__default["default"](styles__default["default"]["sapphire-accordion__item"], {
@@ -285,41 +287,41 @@ const AccordionItem = React.forwardRef(function AccordionItem2(_a, forwardedRef)
   }, children));
 });
 
-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) => {
+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$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]);
+    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$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
-var __objRest$q = (source, exclude) => {
+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$t.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$u.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$t)
-    for (var prop of __getOwnPropSymbols$t(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
+  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$q(_b, ["children"]);
+  var _b = _a, { children } = _b, props = __objRest$r(_b, ["children"]);
   const { sidePadding } = useAccordionContext();
-  return /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.DisclosurePanel, __spreadValues$t(__spreadProps$r(__spreadValues$t({
+  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"]),
@@ -327,7 +329,7 @@ const AccordionPanel = React.forwardRef(function AccordionPanel2(_a, ref) {
       height: "var(--disclosure-panel-height)"
     }
   }), props), /* @__PURE__ */ React__default["default"].createElement("div", {
-    style: __spreadValues$t({}, sapphireReact.withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}),
+    style: __spreadValues$u({}, sapphireReact.withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}),
     className: styles__default["default"]["sapphire-accordion__item-content-inner"]
   }, children));
 });
@@ -338,33 +340,33 @@ const _Accordion = Object.assign(Accordion, {
   Panel: AccordionPanel
 });
 
-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) => {
+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$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]);
+    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$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
-var __objRest$p = (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$s.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$s)
-    for (var prop of __getOwnPropSymbols$s(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$s.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;
@@ -374,7 +376,7 @@ function Alert(_a) {
     children,
     title,
     variant = "info"
-  } = _b, props = __objRest$p(_b, [
+  } = _b, props = __objRest$q(_b, [
     "children",
     "title",
     "variant"
@@ -395,7 +397,7 @@ function Alert(_a) {
         return /* @__PURE__ */ React__default["default"].createElement(react.Information, null);
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$q(__spreadValues$s({}, 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",
@@ -420,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"
 };
@@ -498,13 +599,17 @@ function Autocomplete(props) {
     renderInput,
     loadingState,
     loadingSkeletonRowsCount,
-    listboxAriaLabel
+    listboxAriaLabel,
+    onSuggestionSelected,
+    onSelectionChange
   } = _a, otherProps = __objRest$o(_a, [
     "inputValue",
     "renderInput",
     "loadingState",
     "loadingSkeletonRowsCount",
-    "listboxAriaLabel"
+    "listboxAriaLabel",
+    "onSuggestionSelected",
+    "onSelectionChange"
   ]);
   const {
     styleProps: { style, className }
@@ -517,7 +622,13 @@ function Autocomplete(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$p(__spreadValues$r({}, props), {
     "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
@@ -677,9 +788,9 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs2(_a, fwdRef) {
     }, /* @__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: {
@@ -699,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
@@ -762,9 +873,9 @@ const BreadcrumbItemStatic = React.forwardRef(function BreadcrumbItemStatic2(_a,
     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$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"
+      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);
@@ -866,7 +977,7 @@ const BreadcrumbItem = collections.createLeafComponent(BreadcrumbItemCollectionN
   node.href = props.href;
   return /* @__PURE__ */ React__default["default"].createElement("li", {
     ref,
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-breadcrumbs__item"]),
+    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
@@ -1116,30 +1227,30 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
     onPress: onFileSelectOpen
   }, /* @__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$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
+    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"
@@ -1188,6 +1299,7 @@ function FilterDropdown(_a) {
     isOpen: isOpenProp,
     applyButtonLabel = "Apply",
     clearButtonLabel = "Clear",
+    hideClearButton = false,
     defaultOpen = false,
     hasApplyButton = false,
     noMaxWidth,
@@ -1205,6 +1317,7 @@ function FilterDropdown(_a) {
     "isOpen",
     "applyButtonLabel",
     "clearButtonLabel",
+    "hideClearButton",
     "defaultOpen",
     "hasApplyButton",
     "noMaxWidth",
@@ -1214,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);
@@ -1239,14 +1353,15 @@ function FilterDropdown(_a) {
     noPadding: 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: () => {
@@ -1369,13 +1484,13 @@ const Flag = React__default["default"].forwardRef(function Flag2(_a, ref) {
     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
+    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
   }));
@@ -1539,15 +1654,18 @@ const StepperButton = (_a) => {
   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$f(__spreadValues$g({}, utils.mergeProps(buttonProps, hoverProps, utils.filterDOMProps(props, { global: true }))), {
+  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-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.CaretUp, null) : /* @__PURE__ */ React__default["default"].createElement(react.CaretDown, null)));
+  }, variant === "increment" ? /* @__PURE__ */ React__default["default"].createElement(react.Add, null) : /* @__PURE__ */ React__default["default"].createElement(react.Subtract, null)));
 };
 
 function useAutofillStyle(inputRef) {
@@ -1567,6 +1685,343 @@ function useAutofillStyle(inputRef) {
   };
 }
 
+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;
@@ -1607,7 +2062,7 @@ const useSapphireNumberField = (_a, ref) => {
   const numberFieldAria = numberfield$1.useNumberField(__spreadProps$e(__spreadValues$f({}, numberFieldProps), {
     validationState: error === false || error === void 0 ? void 0 : "invalid"
   }), numberFieldState, ref);
-  return numberFieldAria;
+  return __spreadProps$e(__spreadValues$f({}, numberFieldAria), { state: numberFieldState });
 };
 
 var __defProp$e = Object.defineProperty;
@@ -1642,6 +2097,7 @@ var __objRest$c = (source, exclude) => {
   return target;
 };
 const NumberField = React.forwardRef(function NumberField2(props, ref) {
+  var _b;
   const _a = props, {
     label,
     isDisabled,
@@ -1649,15 +2105,15 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     note,
     isRequired,
     contextualHelp,
-    prefix,
-    postfix,
+    affix = "auto",
     size = "lg",
     labelPlacement = "above",
     necessityIndicator = false,
     alignInputRight,
     showButtons = false,
     incrementAriaLabel,
-    decrementAriaLabel
+    decrementAriaLabel,
+    autoFormat = false
   } = _a, otherProps = __objRest$c(_a, [
     "label",
     "isDisabled",
@@ -1665,16 +2121,22 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     "note",
     "isRequired",
     "contextualHelp",
-    "prefix",
-    "postfix",
+    "affix",
     "size",
     "labelPlacement",
     "necessityIndicator",
     "alignInputRight",
     "showButtons",
     "incrementAriaLabel",
-    "decrementAriaLabel"
+    "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);
@@ -1691,6 +2153,24 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
   }), 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() {
@@ -1713,32 +2193,38 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
       [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", {
+  }, 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 prefix !== "string"
+      [textFieldStyles__default["default"]["sapphire-text-field__prefix--icon"]]: typeof extractedPrefix !== "string"
     })
-  }, prefix), /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$d(__spreadValues$e({}, utils.mergeProps(inputProps, focusProps, {
+  }, 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
-  })), postfix && /* @__PURE__ */ React__default["default"].createElement("span", {
+  })), 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 postfix !== "string"
+      [textFieldStyles__default["default"]["sapphire-text-field__postfix--icon"]]: typeof extractedPostfix !== "string"
     })
-  }, postfix), showButtons && /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__stepper"])
+  }, 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: "increment",
-    size
-  }, incrementButtonProps)), /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$e({
     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, {
+  }, 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))));
 });
@@ -2015,7 +2501,7 @@ const SidebarContent = (_c) => {
   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$5["default"]["sapphire-sidebar"]),
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar"]),
     tabIndex: -1
   }), header, children), responsiveSidebarContext && /* @__PURE__ */ React__default["default"].createElement(SidebarPanel, {
     header: panelHeader
@@ -2071,7 +2557,7 @@ const SidebarHeader = (_a) => {
     "closeButtonProps"
   ]);
   return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$a(__spreadValues$b({}, utils.filterDOMProps(props)), {
-    className: clsx__default["default"](styles__default$5["default"]["sapphire-sidebar__header"])
+    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)));
@@ -2112,7 +2598,7 @@ const SidebarItem = React__default["default"].forwardRef(function SidebarItem2(_
   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$5["default"]["sapphire-sidebar__nav-item"])
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__nav-item"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$9(__spreadValues$a({
     ref,
     variant: "tertiary",
@@ -2179,7 +2665,7 @@ const SidebarExpandableItem = React__default["default"].forwardRef(function Side
     }
   }, [isOpen]);
   return /* @__PURE__ */ React__default["default"].createElement("li", {
-    className: clsx__default["default"](styles__default$5["default"]["sapphire-sidebar__nav-item"])
+    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,
@@ -2222,9 +2708,9 @@ const SecondarySidebar = ({
     timeout: 200
   }, (transitionState) => /* @__PURE__ */ React__default["default"].createElement("div", {
     ref,
-    className: clsx__default["default"](styles__default$5["default"]["sapphire-sidebar__secondary-container"], {
-      [styles__default$5["default"]["sapphire-sidebar--slide-in"]]: true,
-      [styles__default$5["default"]["sapphire-sidebar--slide-out"]]: transitionState === "exiting"
+    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,
@@ -2290,11 +2776,11 @@ const SidebarSection = (_a) => {
   });
   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$5["default"]["sapphire-sidebar__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$5["default"]["sapphire-sidebar__section-header"])
+    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$5["default"]["sapphire-sidebar__section"])
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__section"])
   }), children)));
 };
 
@@ -2340,8 +2826,8 @@ const SidebarBody = (_a) => {
   return /* @__PURE__ */ React__default["default"].createElement(RootNode, __spreadValues$7(__spreadValues$7({
     ref: sidebarBody,
     tabIndex: -1,
-    className: clsx__default["default"](styles__default$5["default"]["sapphire-sidebar__body"], {
-      [styles__default$5["default"]["sapphire-sidebar__body--scrolled"]]: isScrolled
+    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);
 };
@@ -2387,7 +2873,7 @@ const SidebarList = (_a) => {
   ]);
   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$5["default"]["sapphire-sidebar__nav-list"])
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-sidebar__nav-list"])
   }), children);
 };
 
@@ -2438,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$6["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$6["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$6["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
   }))));
@@ -2501,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$7["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$7["default"]["sapphire-slider__track"], {
-      [styles__default$7["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$7["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$7["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$7["default"]["sapphire-slider__thumb"], {
-      [styles__default$7["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);
@@ -2582,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$8["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$8["default"]["sapphire-tag"], styles__default$8["default"]["js-focus"], styles__default$8["default"]["js-hover"], {
-      [styles__default$8["default"]["sapphire-tag--actionable"]]: hasAction,
-      [styles__default$8["default"]["is-active"]]: hasAction && isPressed,
-      [styles__default$8["default"]["is-hover"]]: hasAction && isHovered,
-      [styles__default$8["default"]["is-disabled"]]: isDisabled
-    })
-  }), hasError ? { "aria-invalid": true } : {}), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$3(__spreadValues$3({}, gridCellProps), {
-    className: styles__default$8["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$8["default"]["sapphire-tag__button"], styles__default$8["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$8["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)));
@@ -2695,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$8["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,
@@ -2736,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$9["default"]["sapphire-date-field__segment"], styles__default$9["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);
@@ -2744,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$9["default"]["sapphire-date-field__segment"], {
-      [styles__default$9["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);
 };
@@ -2863,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$9["default"]["sapphire-date-field"], {
-      [styles__default$9["default"]["sapphire-date-field--error"]]: state.isInvalid,
-      [styles__default$9["default"]["sapphire-date-field--no-clear-button"]]: noClearButton,
-      [styles__default$9["default"]["sapphire-date-field--no-calendar"]]: true,
-      [styles__default$9["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$9["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,
@@ -2880,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$9["default"]["sapphire-date-field__button"], styles__default$9["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);
@@ -2894,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;