@danske/sapphire-react-lab 0.105.2 → 0.106.2

package/build/cjs/index.js

@@ -1,70 +1,66 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var clsx = require('clsx');
-var utils = require('@react-aria/utils');
+var filterDOMProps = require('react-aria/filterDOMProps');
+var useObjectRef = require('react-aria/useObjectRef');
 var styles = require('@danske/sapphire-css/components/accordion/accordion.module.css');
 var sapphireReact = require('@danske/sapphire-react');
-var focus = require('@react-aria/focus');
+var FocusScope = require('react-aria/FocusScope');
 var reactAriaComponents = require('react-aria-components');
 var react = require('@danske/sapphire-icons/react');
+var useEvent = require('react-aria/private/utils/useEvent');
 var alertStyles = require('@danske/sapphire-css/components/alert/alert.module.css');
-var i18n = require('@react-aria/i18n');
+var I18nProvider = require('react-aria/I18nProvider');
 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 useComboBox = require('react-aria/useComboBox');
+var i18n = require('@react-aria/i18n');
+var utils = require('@react-spectrum/utils');
+var useBreadcrumbs = require('react-aria/useBreadcrumbs');
+var Collection = require('react-aria/Collection');
+var CollectionBuilder = require('react-aria/CollectionBuilder');
+var mergeProps = require('react-aria/mergeProps');
+var useResizeObserver = require('react-aria/private/utils/useResizeObserver');
 var styles$2 = require('@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css');
+var BaseCollection = require('react-aria/private/collections/BaseCollection');
+var mergeRefs = require('react-aria/mergeRefs');
 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 useHover = require('react-aria/useHover');
+var Pressable = require('react-aria/Pressable');
+var useId = require('react-aria/useId');
+var PressResponder = require('react-aria/private/interactions/PressResponder');
+var useDrop = require('react-aria/useDrop');
+var useClipboard = require('react-aria/useClipboard');
+var useFocusRing = require('react-aria/useFocusRing');
+var VisuallyHidden = require('react-aria/VisuallyHidden');
+var useEffectEvent = require('react-aria/private/utils/useEffectEvent');
+var useControlledState = require('react-stately/useControlledState');
 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 useField = require('react-aria/useField');
 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 useNumberField = require('react-aria/useNumberField');
+var useNumberFieldState = require('react-stately/useNumberFieldState');
 var styles$6 = require('@danske/sapphire-css/components/sidebar/sidebar.module.css');
+var useFocusWithin = require('react-aria/useFocusWithin');
 var buttonStyles = require('@danske/sapphire-css/components/button/button.module.css');
 var reactTransitionGroup = require('react-transition-group');
-var listbox = require('@react-aria/listbox');
+var useListBox = require('react-aria/useListBox');
 var styles$7 = require('@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css');
-var progress = require('@react-aria/progress');
+var useProgressBar = require('react-aria/useProgressBar');
 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 useTagGroup = require('react-aria/useTagGroup');
+var useListState = require('react-stately/useListState');
 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 useButton = require('react-aria/useButton');
+var FocusRing = require('react-aria/FocusRing');
+var Item = require('react-stately/Item');
 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');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-var alertStyles__default = /*#__PURE__*/_interopDefaultLegacy(alertStyles);
-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 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({
+var useTimeField = require('react-aria/useTimeField');
+var useTimeFieldState = require('react-stately/useTimeFieldState');
+var useDateField = require('react-aria/useDateField');
+
+const AccordionContext = React.createContext({
   sidePadding: void 0,
   headerLevel: 5
 });
@@ -73,85 +69,55 @@ function useAccordionContext() {
   if (context) {
     return context;
   }
-  throw new Error("Accordion context can only be used within Accordion component.");
+  throw new Error(
+    "Accordion context can only be used within Accordion component."
+  );
 }
 
-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$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$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
-var __objRest$u = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$x.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = 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 = React.forwardRef(function Accordion2(_a, ref) {
-  var _b = _a, {
-    allowsMultipleExpanded = true,
-    headerLevel = 5,
-    hideLastDivider = false,
-    hasNegativeSideMargin = false,
-    sidePadding,
-    children,
-    expandedKeys,
-    defaultExpandedKeys,
-    onExpandedChange,
-    isDisabled
-  } = _b, props = __objRest$u(_b, [
-    "allowsMultipleExpanded",
-    "headerLevel",
-    "hideLastDivider",
-    "hasNegativeSideMargin",
-    "sidePadding",
-    "children",
-    "expandedKeys",
-    "defaultExpandedKeys",
-    "onExpandedChange",
-    "isDisabled"
-  ]);
+const Accordion = React.forwardRef(function Accordion2({
+  allowsMultipleExpanded = true,
+  headerLevel = 5,
+  hideLastDivider = false,
+  hasNegativeSideMargin = false,
+  sidePadding,
+  children,
+  expandedKeys,
+  defaultExpandedKeys,
+  onExpandedChange,
+  isDisabled,
+  ...props
+}, ref) {
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  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$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$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)
-  }), children)));
+  const forwardedRef = useObjectRef.useObjectRef(ref);
+  return /* @__PURE__ */ React.createElement(FocusScope.FocusScope, null, /* @__PURE__ */ React.createElement(AccordionContext.Provider, { value: { sidePadding, headerLevel } }, /* @__PURE__ */ React.createElement(
+    reactAriaComponents.DisclosureGroup,
+    {
+      ...filterDOMProps.filterDOMProps(props, { global: true, labelable: true }),
+      allowsMultipleExpanded,
+      expandedKeys,
+      defaultExpandedKeys,
+      onExpandedChange,
+      isDisabled,
+      ref: forwardedRef,
+      className: clsx(
+        styles["sapphire-accordion"],
+        {
+          [styles["sapphire-accordion--without-last-divider"]]: hideLastDivider,
+          [styles["sapphire-accordion--negative-margin-self"]]: !sapphireReact.withTruthyZero(sidePadding) && hasNegativeSideMargin
+        },
+        styleProps.className
+      ),
+      style: {
+        ...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
+      }
+    },
+    children
+  )));
 });
 
 const customPaddingStyleProps = (sidePadding) => ({
@@ -159,98 +125,36 @@ const customPaddingStyleProps = (sidePadding) => ({
   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$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$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
-var __objRest$t = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$w.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))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const AccordionHeading = React.forwardRef(function AccordionHeading2(_a, ref) {
-  var _b = _a, { children, headerLevel } = _b, props = __objRest$t(_b, ["children", "headerLevel"]);
+const AccordionHeading = React.forwardRef(function AccordionHeading2({ children, headerLevel, ...props }, ref) {
   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)), /* @__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)))));
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "heading",
+      "aria-level": headerLevel ?? contextHeaderLevel,
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
+      ref
+    },
+    /* @__PURE__ */ React.createElement(
+      reactAriaComponents.Button,
+      {
+        slot: "trigger",
+        className: ({ isFocusVisible }) => clsx(styles["sapphire-accordion__item-header"], styles["js-focus"], {
+          [styles["is-focus"]]: isFocusVisible
+        }),
+        style: sapphireReact.withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}
+      },
+      /* @__PURE__ */ React.createElement(sapphireReact.Typography.Heading, { level: 6, elementType: "span" }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-accordion__item-heading"]) }, children)),
+      /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-accordion__item-arrow"]) }, /* @__PURE__ */ React.createElement(sapphireReact.Icon, { size: "lg" }, /* @__PURE__ */ React.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 AccordionItem = React.forwardRef(function AccordionItem2({ children, id, ...props }, forwardedRef) {
+  const ref = useObjectRef.useObjectRef(forwardedRef);
+  const focusManager = FocusScope.useFocusManager();
   const onKeyDown = (e) => {
-    if (!focusManager)
-      return;
+    if (!focusManager) return;
     if (!(e.target instanceof Element) || e.target.getAttribute("slot") !== "trigger")
       return;
     switch (e.key) {
@@ -274,64 +178,50 @@ const AccordionItem = React.forwardRef(function AccordionItem2(_a, forwardedRef)
         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));
+  useEvent.useEvent(ref, "keydown", onKeyDown);
+  return /* @__PURE__ */ React.createElement(
+    reactAriaComponents.Disclosure,
+    {
+      ref,
+      id,
+      className: ({ isExpanded, isDisabled }) => clsx(styles["sapphire-accordion__item"], {
+        [styles["sapphire-accordion__item--open"]]: isExpanded,
+        [styles["is-disabled"]]: isDisabled
+      }),
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("div", { className: clsx(styles["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 AccordionPanel = React.forwardRef(function AccordionPanel2({ children, ...props }, ref) {
   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));
+  return /* @__PURE__ */ React.createElement(
+    reactAriaComponents.DisclosurePanel,
+    {
+      ref,
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
+      className: clsx(styles["sapphire-accordion__item-content"]),
+      style: {
+        /**
+         * useDisclosure hook from react-aria uses css variable --disclosure-panel-height to
+         * animate the height of the panel.
+         */
+        height: "var(--disclosure-panel-height)"
+      },
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          ...sapphireReact.withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}
+        },
+        className: styles["sapphire-accordion__item-content-inner"]
+      },
+      children
+    )
+  );
 });
 
 const _Accordion = Object.assign(Accordion, {
@@ -340,47 +230,12 @@ const _Accordion = Object.assign(Accordion, {
   Panel: AccordionPanel
 });
 
-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$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$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
-var __objRest$q = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$t)
-    for (var prop of __getOwnPropSymbols$t(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function Alert(_a) {
-  var _b = _a, {
-    children,
-    title,
-    variant = "info"
-  } = _b, props = __objRest$q(_b, [
-    "children",
-    "title",
-    "variant"
-  ]);
+function Alert({
+  children,
+  title,
+  variant = "info",
+  ...props
+}) {
   sapphireReact.useThemeCheck();
   const {
     styleProps: { style, className }
@@ -388,38 +243,35 @@ function Alert(_a) {
   const getIcon = (variant2) => {
     switch (variant2) {
       case "warning":
-        return /* @__PURE__ */ React__default["default"].createElement(react.Warning, null);
+        return /* @__PURE__ */ React.createElement(react.Warning, null);
       case "positive":
-        return /* @__PURE__ */ React__default["default"].createElement(react.CheckmarkOutline, null);
+        return /* @__PURE__ */ React.createElement(react.CheckmarkOutline, null);
       case "negative":
-        return /* @__PURE__ */ React__default["default"].createElement(react.Error, null);
+        return /* @__PURE__ */ React.createElement(react.Error, null);
       default:
-        return /* @__PURE__ */ React__default["default"].createElement(react.Information, null);
+        return /* @__PURE__ */ React.createElement(react.Information, null);
     }
   };
-  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",
-      [alertStyles__default["default"]["sapphire-alert--warning"]]: variant === "warning"
-    }, className),
-    style,
-    role: "alert"
-  }), /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: alertStyles__default["default"]["sapphire-alert__icon"]
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: "sm"
-  }, getIcon(variant))), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: alertStyles__default["default"]["sapphire-alert__title"]
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
-    size: "sm",
-    isSemibold: true
-  }, title)), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: alertStyles__default["default"]["sapphire-alert__content"]
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
-    elementType: "section",
-    size: "md"
-  }, children)));
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
+      className: clsx.clsx(
+        alertStyles["sapphire-alert"],
+        {
+          [alertStyles["sapphire-alert--positive"]]: variant === "positive",
+          [alertStyles["sapphire-alert--negative"]]: variant === "negative",
+          [alertStyles["sapphire-alert--warning"]]: variant === "warning"
+        },
+        className
+      ),
+      style,
+      role: "alert"
+    },
+    /* @__PURE__ */ React.createElement("span", { className: alertStyles["sapphire-alert__icon"] }, /* @__PURE__ */ React.createElement(sapphireReact.Icon, { size: "sm" }, getIcon(variant))),
+    /* @__PURE__ */ React.createElement("div", { className: alertStyles["sapphire-alert__title"] }, /* @__PURE__ */ React.createElement(sapphireReact.Typography.Body, { size: "sm", isSemibold: true }, title)),
+    /* @__PURE__ */ React.createElement("div", { className: alertStyles["sapphire-alert__content"] }, /* @__PURE__ */ React.createElement(sapphireReact.Typography.Body, { elementType: "section", size: "md" }, children))
+  );
 }
 
 const useGroupAmount = (value, formatter) => {
@@ -449,76 +301,57 @@ const useGroupAmount = (value, formatter) => {
     }
     return result;
   }, [numberValue, formatter]);
-  const formattedValue = React.useMemo(() => groupedParts.map((part) => part.value).join(""), [groupedParts]);
+  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"
-  ]);
+const Amount = ({
+  emphasis = "regular",
+  variant,
+  formatOptions,
+  value,
+  size,
+  ...props
+}) => {
   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 { locale } = I18nProvider.useLocale();
+  const formatter = React.useMemo(
+    () => new Intl.NumberFormat(locale, {
+      style: formatOptions?.currency ? "currency" : void 0,
+      /**
+       * Always show the sign if the value starts with '+' or '-'.
+       */
+      signDisplay: 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)));
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: styleProps.style,
+      className: styles$1["sapphire-amount"],
+      ...filteredProps,
+      "aria-label": formattedValue
+    },
+    groupedParts.map((part, index) => /* @__PURE__ */ React.createElement(
+      sapphireReact.Typography.Body,
+      {
+        elementType: "span",
+        key: index,
+        color: variant === "positive" ? "positive" : "primary",
+        isSemibold: emphasis === "primary" ? true : false,
+        size
+      },
+      part.value
+    ))
+  );
 };
 
 var da$3 = {
@@ -559,113 +392,94 @@ var intlMessages$3 = {
   "sv-SE": se$3
 };
 
-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$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$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
-var __objRest$o = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$r.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = 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;
-};
 function Autocomplete(props) {
-  var _b;
   sapphireReact.useThemeCheck();
   const formatMessage = i18n.useMessageFormatter(intlMessages$3);
-  const _a = props, {
+  const {
     inputValue,
     renderInput,
     loadingState,
     loadingSkeletonRowsCount,
     listboxAriaLabel,
     onSuggestionSelected,
-    onSelectionChange
-  } = _a, otherProps = __objRest$o(_a, [
-    "inputValue",
-    "renderInput",
-    "loadingState",
-    "loadingSkeletonRowsCount",
-    "listboxAriaLabel",
-    "onSuggestionSelected",
-    "onSelectionChange"
-  ]);
+    onSelectionChange,
+    ...otherProps
+  } = props;
   const {
     styleProps: { style, className }
   } = sapphireReact.useSapphireStyleProps(props);
   const inputRef = React.useRef(null);
-  const listBoxRef = utils$1.useFocusableRef(null);
+  const listBoxRef = utils.useFocusableRef(null);
   const popoverRef = React.useRef(null);
-  const triggerRef = utils$1.useFocusableRef(null);
-  const state = sapphireReact.useComboBoxState(__spreadProps$p(__spreadValues$r({}, props), {
+  const triggerRef = utils.useFocusableRef(null);
+  const collectionRef = React.useRef(null);
+  const state = sapphireReact.useComboBoxState({
+    ...props,
     inputValue,
     allowsEmptyCollection: loadingState === "loading",
     allowsCustomValue: true,
     shouldCloseOnBlur: true,
     onSelectionChange: (key) => {
       if (key !== null) {
-        onSelectionChange == null ? void 0 : onSelectionChange(key);
-        onSuggestionSelected == null ? void 0 : onSuggestionSelected(key);
+        onSelectionChange?.(key);
+        onSuggestionSelected?.(key);
+        const itemText = collectionRef.current?.getItem(key)?.textValue ?? "";
+        if (itemText) {
+          props.onInputChange?.(itemText);
+        }
       }
     }
-  }));
-  const { inputProps, listBoxProps } = combobox.useComboBox(__spreadProps$p(__spreadValues$r({}, props), {
-    "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
-    inputRef,
-    listBoxRef,
-    popoverRef
-  }), state);
-  const inputElement = renderInput(__spreadProps$p(__spreadValues$r({}, inputProps), {
+  });
+  collectionRef.current = state.collection;
+  const { inputProps, listBoxProps } = useComboBox.useComboBox(
+    {
+      ...props,
+      "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
+      inputRef,
+      listBoxRef,
+      popoverRef
+    },
+    state
+  );
+  const inputElement = renderInput({
+    ...inputProps,
     isDisabled: props.isDisabled,
     inputRef,
     "aria-haspopup": "listbox",
     "aria-expanded": state.isOpen,
     onChange: (value) => {
-      var _a2;
-      (_a2 = inputProps.onChange) == null ? void 0 : _a2.call(inputProps, {
+      inputProps.onChange?.({
         target: { value },
         currentTarget: { value }
       });
     }
-  }));
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$p(__spreadValues$r({
-    ref: triggerRef
-  }, utils.filterDOMProps(otherProps, { global: true })), {
-    style: __spreadValues$r({ display: "inline-flex" }, style),
-    className
-  }), inputElement, state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ListBoxPopover, {
-    state,
-    triggerRef,
-    popoverRef,
-    listBoxRef,
-    listBoxProps,
-    loadingState,
-    loadingSkeletonRowsCount,
-    selectWidth: (_b = triggerRef.current) == null ? void 0 : _b.offsetWidth,
-    disableSelectedStyles: true,
-    isNonModal: true
-  }, props.children || []));
+  });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: triggerRef,
+      ...filterDOMProps.filterDOMProps(otherProps, { global: true }),
+      style: { display: "inline-flex", ...style },
+      className
+    },
+    inputElement,
+    state.isOpen && /* @__PURE__ */ React.createElement(
+      sapphireReact.ListBoxPopover,
+      {
+        state,
+        triggerRef,
+        popoverRef,
+        listBoxRef,
+        listBoxProps,
+        loadingState,
+        loadingSkeletonRowsCount,
+        selectWidth: triggerRef.current?.offsetWidth,
+        disableSelectedStyles: true,
+        isNonModal: true
+      },
+      props.children || []
+    )
+  );
 }
 
 const useBreadcrumbThreshold = (childrenCount, containerRef, breadcrumbRef) => {
@@ -698,9 +512,10 @@ const useBreadcrumbThreshold = (childrenCount, containerRef, breadcrumbRef) => {
     };
   }, [itemWidths, containerWidth, childrenCount]);
   const computeItemWidths = () => {
-    if (!breadcrumbRef.current)
-      return;
-    const breadcrumbItems = Array.from(breadcrumbRef.current.children);
+    if (!breadcrumbRef.current) return;
+    const breadcrumbItems = Array.from(
+      breadcrumbRef.current.children
+    );
     const widths = breadcrumbItems.map((item) => item.offsetWidth).filter(Boolean);
     if (widths.length === breadcrumbItems.length) {
       setItemWidths(widths);
@@ -711,11 +526,10 @@ const useBreadcrumbThreshold = (childrenCount, containerRef, breadcrumbRef) => {
       computeItemWidths();
     }
   }, [containerRef.current, childrenCount]);
-  utils.useResizeObserver({
+  useResizeObserver.useResizeObserver({
     ref: containerRef,
     onResize: () => {
-      if (!containerRef.current)
-        return;
+      if (!containerRef.current) return;
       setContainerWidth(containerRef.current.offsetWidth);
     }
   });
@@ -734,332 +548,233 @@ const useBreadcrumbThreshold = (childrenCount, containerRef, breadcrumbRef) => {
   };
 };
 
-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$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$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
-var __objRest$n = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const BreadcrumbsContext = React.createContext({ size: "md", overflowNodes: [] });
-const Breadcrumbs = React.forwardRef(function Breadcrumbs2(_a, fwdRef) {
-  var _b = _a, { maxWidth, size = "md" } = _b, props = __objRest$n(_b, ["maxWidth", "size"]);
+const Breadcrumbs = React.forwardRef(function Breadcrumbs2({ maxWidth, size = "md", ...props }, fwdRef) {
   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.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$o(__spreadValues$q({}, styleProps.style), {
-        maxWidth,
-        display: "flex"
-      })
-    }, /* @__PURE__ */ React__default["default"].createElement("ol", __spreadProps$o(__spreadValues$q({
+  const { navProps } = useBreadcrumbs.useBreadcrumbs(RACprops);
+  const DOMProps = filterDOMProps.filterDOMProps(RACprops, { global: true });
+  return /* @__PURE__ */ React.createElement(CollectionBuilder.CollectionBuilder, { content: /* @__PURE__ */ React.createElement(Collection.Collection, { ...RACprops }) }, (collection) => {
+    const { overflowNodes } = useBreadcrumbThreshold(
+      collection.size,
+      containerRef,
       ref
-    }, utils.mergeProps(DOMProps, navProps)), {
-      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: {
-        size,
-        overflowNodes: overflowNodes.map((index) => collection.getItem(keys[index])),
-        isDisabled: RACprops.isDisabled
-      }
-    }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.BreadcrumbsContext.Provider, {
-      value: RACprops
-    }, /* @__PURE__ */ React__default["default"].createElement(CollectionRoot, {
-      collection
-    })))));
+    );
+    const keys = Array.from(collection.getKeys());
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          ...styleProps.style,
+          maxWidth,
+          display: "flex"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "ol",
+        {
+          ref,
+          ...mergeProps.mergeProps(DOMProps, navProps),
+          className: clsx(styles$2["sapphire-breadcrumbs"], {
+            [styles$2["sapphire-breadcrumbs--sm"]]: size === "sm",
+            [styles$2["sapphire-breadcrumbs--lg"]]: size === "lg"
+          })
+        },
+        /* @__PURE__ */ React.createElement(
+          BreadcrumbsContext.Provider,
+          {
+            value: {
+              size,
+              overflowNodes: overflowNodes.map(
+                (index) => collection.getItem(keys[index])
+              ),
+              isDisabled: RACprops.isDisabled
+            }
+          },
+          /* @__PURE__ */ React.createElement(reactAriaComponents.BreadcrumbsContext.Provider, { value: RACprops }, /* @__PURE__ */ React.createElement(CollectionRoot, { collection }))
+        )
+      )
+    );
   });
 });
 
 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$2["default"]["sapphire-breadcrumbs__separator"]),
-    "aria-hidden": "true"
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: iconSize
-  }, /* @__PURE__ */ React__default["default"].createElement(react.ChevronRight, null)));
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: clsx(styles$2["sapphire-breadcrumbs__separator"]),
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React.createElement(sapphireReact.Icon, { size: iconSize }, /* @__PURE__ */ React.createElement(react.ChevronRight, null))
+  );
 };
 
 const BreadcrumbOverflowMenu = () => {
   const { size, overflowNodes } = React.useContext(BreadcrumbsContext);
-  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
-    }, /* @__PURE__ */ React__default["default"].createElement(react.OverflowMenuHorizontal, null))
-  }, overflowNodes.map((item) => !item ? null : /* @__PURE__ */ React__default["default"].createElement(sapphireReact.MenuItem, {
-    key: item.key,
-    id: item.key,
-    href: item.href,
-    isDisabled: !item.href
-  }, item.rendered))), /* @__PURE__ */ React__default["default"].createElement(BreadcrumbsSeparator, null));
-};
-
-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$p.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const BreadcrumbItemStatic = React.forwardRef(function BreadcrumbItemStatic2(_a, ref) {
-  var _b = _a, { size } = _b, props = __objRest$m(_b, ["size"]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    sapphireReact.Menu,
+    {
+      triggerElement: /* @__PURE__ */ React.createElement(sapphireReact.IconButton, { "aria-label": "Show more breadcrumbs", size }, /* @__PURE__ */ React.createElement(react.OverflowMenuHorizontal, null))
+    },
+    overflowNodes.map(
+      (item) => !item ? null : /* @__PURE__ */ React.createElement(
+        sapphireReact.MenuItem,
+        {
+          key: item.key,
+          id: item.key,
+          href: item.href,
+          isDisabled: !item.href
+        },
+        item.rendered
+      )
+    )
+  ), /* @__PURE__ */ React.createElement(BreadcrumbsSeparator, null));
+};
+
+const BreadcrumbItemStatic = React.forwardRef(function BreadcrumbItemStatic2({ size, ...props }, ref) {
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  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);
+  return /* @__PURE__ */ React.createElement(sapphireReact.TooltipIfNeeded, { title: props.children }, (tooltipContentRef, tooltipProps) => {
+    const positioningRef = tooltipProps?.ref;
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ...tooltipProps,
+        ref: mergeRefs.mergeRefs(
+          ref,
+          tooltipContentRef,
+          positioningRef
+        ),
+        className: clsx(
+          styles$2["sapphire-breadcrumbs__item--static"],
+          {
+            [styles$2["sapphire-breadcrumbs__item--static--sm"]]: size === "sm",
+            [styles$2["sapphire-breadcrumbs__item--static--lg"]]: size === "lg"
+          },
+          styleProps.className
+        ),
+        style: styleProps.style
+      },
+      props.children
+    );
   });
 });
 
-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$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$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
-var __objRest$l = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2(_a, ref) {
-  var _b = _a, { children } = _b, props = __objRest$l(_b, ["children"]);
+const BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2({ children, ...props }, ref) {
   sapphireReact.useThemeCheck();
   const { styleProps: sapphireStyleProps } = sapphireReact.useSapphireStyleProps(props);
-  const _a2 = sapphireStyleProps, { style, className } = _a2, styleProps = __objRest$l(_a2, ["style", "className"]);
+  const { style, className, ...styleProps } = sapphireStyleProps;
   const { size } = React.useContext(BreadcrumbsContext);
   if (!props.href && !props.UNSAFE_onClick) {
-    return /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemStatic, __spreadProps$m(__spreadValues$o({}, props), {
-      size
-    }), children);
+    return /* @__PURE__ */ React.createElement(BreadcrumbItemStatic, { ...props, size }, children);
   }
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$m(__spreadValues$o(__spreadValues$o({}, props), styleProps), {
-    UNSAFE_className: className,
-    UNSAFE_style: __spreadValues$o({}, style),
-    ref,
-    size,
-    variant: "tertiary",
-    isDisabled: props.isDisabled
-  }), children);
+  return /* @__PURE__ */ React.createElement(
+    sapphireReact.Button,
+    {
+      ...props,
+      ...styleProps,
+      UNSAFE_className: className,
+      UNSAFE_style: { ...style },
+      ref,
+      size,
+      variant: "tertiary",
+      isDisabled: props.isDisabled
+    },
+    children
+  );
 });
 BreadcrumbItemLink.displayName = "BreadcrumbItemLink";
 
-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$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.CollectionNode {
+class BreadcrumbItemCollectionNode extends BaseCollection.CollectionNode {
+  static type = "item";
 }
-BreadcrumbItemCollectionNode.type = "item";
-const BreadcrumbItem = collections.createLeafComponent(BreadcrumbItemCollectionNode, function BreadcrumbItem2(props, ref, node) {
-  var _a;
-  sapphireReact.useThemeCheck();
-  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const {
-    size,
-    overflowNodes,
-    isDisabled: breadcrumbsDisabled
-  } = React.useContext(BreadcrumbsContext);
-  const { isDisabled: individualDisabled = false } = props;
-  const isCurrent = node.nextKey == null;
-  const isDisabled = individualDisabled || breadcrumbsDisabled;
-  const shouldRender = !overflowNodes.some((item) => (item == null ? void 0 : item.key) === node.key);
-  const showOverflowMenu = ((_a = overflowNodes[0]) == null ? void 0 : _a.key) === node.key;
-  if (!shouldRender && !showOverflowMenu) {
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null);
-  }
-  if (!shouldRender && showOverflowMenu) {
-    return /* @__PURE__ */ React__default["default"].createElement(BreadcrumbOverflowMenu, null);
+const BreadcrumbItem = CollectionBuilder.createLeafComponent(
+  BreadcrumbItemCollectionNode,
+  function BreadcrumbItem2(props, ref, node) {
+    sapphireReact.useThemeCheck();
+    const { styleProps } = sapphireReact.useSapphireStyleProps(props);
+    const {
+      size,
+      overflowNodes,
+      isDisabled: breadcrumbsDisabled
+    } = React.useContext(BreadcrumbsContext);
+    const { isDisabled: individualDisabled = false } = props;
+    const isCurrent = node.nextKey == null;
+    const isDisabled = individualDisabled || breadcrumbsDisabled;
+    const shouldRender = !overflowNodes.some((item) => item?.key === node.key);
+    const showOverflowMenu = overflowNodes[0]?.key === node.key;
+    if (!shouldRender && !showOverflowMenu) {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null);
+    }
+    if (!shouldRender && showOverflowMenu) {
+      return /* @__PURE__ */ React.createElement(BreadcrumbOverflowMenu, null);
+    }
+    node.href = props.href;
+    return /* @__PURE__ */ React.createElement(
+      "li",
+      {
+        ref,
+        className: clsx(styles$2["sapphire-breadcrumbs__item"]),
+        style: { ...styleProps.style },
+        "data-disabled": isDisabled || void 0,
+        "data-current": isCurrent || void 0
+      },
+      isCurrent ? /* @__PURE__ */ React.createElement(
+        sapphireReact.Typography.Body,
+        {
+          elementType: "span",
+          isSemibold: true,
+          size: size === "lg" ? "md" : size === "md" ? "sm" : "xs"
+        },
+        node.rendered
+      ) : /* @__PURE__ */ React.createElement(BreadcrumbItemLink, { isDisabled, ...props }, node.rendered),
+      !isCurrent && /* @__PURE__ */ React.createElement(BreadcrumbsSeparator, null)
+    );
   }
-  node.href = props.href;
-  return /* @__PURE__ */ React__default["default"].createElement("li", {
-    ref,
-    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$n({
-    isDisabled
-  }, props), node.rendered), !isCurrent && /* @__PURE__ */ React__default["default"].createElement(BreadcrumbsSeparator, null));
-});
+);
 
-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$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$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
-var __objRest$k = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const HiddenFileInput = React__default["default"].forwardRef(function InputWrapper(props, ref) {
-  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$l(__spreadValues$m({}, props), {
-    ref,
-    type: "file",
-    style: { display: "none" }
-  }));
+const HiddenFileInput = React.forwardRef(function InputWrapper(props, ref) {
+  return /* @__PURE__ */ React.createElement("input", { ...props, ref, type: "file", style: { display: "none" } });
 });
-const FileTrigger = React__default["default"].forwardRef(function FileTriggerWrapper(props, ref) {
-  const _a = props, {
+const FileTrigger = React.forwardRef(function FileTriggerWrapper(props, ref) {
+  const {
     acceptedFileTypes,
     allowsMultiple = false,
     onSelect = () => null,
     children,
-    isDisabled = false
-  } = _a, rest = __objRest$k(_a, [
-    "acceptedFileTypes",
-    "allowsMultiple",
-    "onSelect",
-    "children",
-    "isDisabled"
-  ]);
-  const inputRef = utils.useObjectRef(ref);
-  const domProps = utils.filterDOMProps(rest, { global: true });
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(interactions.PressResponder, {
-    isDisabled,
-    onPress: () => {
-      var _a2;
-      if (inputRef.current) {
-        inputRef.current.value = "";
+    isDisabled = false,
+    ...rest
+  } = props;
+  const inputRef = useObjectRef.useObjectRef(ref);
+  const domProps = filterDOMProps.filterDOMProps(rest, { global: true });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    PressResponder.PressResponder,
+    {
+      isDisabled,
+      onPress: () => {
+        if (inputRef.current) {
+          inputRef.current.value = "";
+        }
+        inputRef.current?.click();
       }
-      (_a2 = inputRef.current) == null ? void 0 : _a2.click();
-    }
-  }, children), /* @__PURE__ */ React__default["default"].createElement(HiddenFileInput, __spreadProps$l(__spreadValues$m({}, domProps), {
-    disabled: isDisabled,
-    ref: inputRef,
-    accept: acceptedFileTypes == null ? void 0 : acceptedFileTypes.toString(),
-    onChange: (e) => onSelect == null ? void 0 : onSelect(e.target.files),
-    multiple: allowsMultiple
-  })));
+    },
+    children
+  ), /* @__PURE__ */ React.createElement(
+    HiddenFileInput,
+    {
+      ...domProps,
+      disabled: isDisabled,
+      ref: inputRef,
+      accept: acceptedFileTypes?.toString(),
+      onChange: (e) => onSelect?.(e.target.files),
+      multiple: allowsMultiple
+    }
+  ));
 });
 
 const convertFileListToFileDropItems = (fileList) => {
@@ -1132,39 +847,8 @@ var intlMessages$2 = {
   "sv-SE": se$2
 };
 
-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$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$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
-var __objRest$j = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$l.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))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapper(props, forwardedRef) {
-  const _a = props, {
+const FileDropzone = React.forwardRef(function DropzoneWrapper(props, forwardedRef) {
+  const {
     isDisabled = false,
     hasError,
     renderInstruction,
@@ -1172,32 +856,28 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
     acceptedFileTypes,
     allowsMultiple,
     onDrop = () => null,
-    getDropOperation = () => "copy"
-  } = _a, otherProps = __objRest$j(_a, [
-    "isDisabled",
-    "hasError",
-    "renderInstruction",
-    "onFileSelectOpen",
-    "acceptedFileTypes",
-    "allowsMultiple",
-    "onDrop",
-    "getDropOperation"
-  ]);
-  const id = utils.useId();
+    getDropOperation = () => "copy",
+    ...otherProps
+  } = props;
+  const id = useId.useId();
   const paragraphId = props["aria-label"] ? void 0 : id;
   const format = i18n.useMessageFormatter(intlMessages$2);
-  const pressableRef = utils.useObjectRef(forwardedRef);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
+  const pressableRef = useObjectRef.useObjectRef(forwardedRef);
+  const { hoverProps, isHovered } = useHover.useHover({ isDisabled });
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { dropProps, isDropTarget: isDropping } = dnd.useDrop(__spreadProps$k(__spreadValues$l({}, props), {
+  const { dropProps, isDropTarget: isDropping } = useDrop.useDrop({
+    ...props,
     ref: pressableRef,
     hasDropButton: true,
     isDisabled,
     getDropOperation
-  }));
-  const { buttonProps, isPressed } = sapphireReact.useButton({ elementType: "div" }, pressableRef);
-  const { focusProps, isFocusVisible } = focus.useFocusRing();
-  const { clipboardProps } = dnd.useClipboard({
+  });
+  const { buttonProps, isPressed } = sapphireReact.useButton(
+    { elementType: "div" },
+    pressableRef
+  );
+  const { focusProps, isFocusVisible } = useFocusRing.useFocusRing();
+  const { clipboardProps } = useClipboard.useClipboard({
     isDisabled,
     onPaste: (items) => onDrop({
       type: "drop",
@@ -1217,340 +897,241 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
       dropOperation: "copy"
     });
   };
-  return /* @__PURE__ */ React__default["default"].createElement(FileTrigger, {
-    acceptedFileTypes,
-    allowsMultiple,
-    onSelect: onFileTriggerSelect,
-    isDisabled
-  }, /* @__PURE__ */ React__default["default"].createElement(interactions.Pressable, {
-    ref: pressableRef,
-    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$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$3["default"]["sapphire-dropzone__content"])
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    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$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$3["default"]["sapphire-dropzone__paragraph"])
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
-    size: "sm",
-    color: "secondary"
-  }, renderInstruction(isDropping)))))));
+  return /* @__PURE__ */ React.createElement(
+    FileTrigger,
+    {
+      acceptedFileTypes,
+      allowsMultiple,
+      onSelect: onFileTriggerSelect,
+      isDisabled
+    },
+    /* @__PURE__ */ React.createElement(Pressable.Pressable, { ref: pressableRef, onPress: onFileSelectOpen }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...mergeProps.mergeProps(
+          dropProps,
+          hoverProps,
+          clipboardProps,
+          focusProps,
+          buttonProps
+        ),
+        ...filterDOMProps.filterDOMProps(otherProps, { global: true }),
+        style: { ...styleProps.style },
+        className: clsx(
+          styles$3["sapphire-dropzone"],
+          styles$3["js-focus"],
+          styles$3["js-hover"],
+          {
+            [styles$3["is-hover"]]: isHovered && !isDropping,
+            [styles$3["is-active"]]: isPressed,
+            [styles$3["is-disabled"]]: isDisabled,
+            [styles$3["is-focus"]]: isFocusVisible,
+            [styles$3["sapphire-dropzone--dropping"]]: isDropping,
+            [styles$3["sapphire-dropzone--error"]]: hasError
+          },
+          styleProps.className
+        ),
+        "aria-label": ariaLabel,
+        "aria-invalid": hasError,
+        "aria-describedby": paragraphId
+      },
+      /* @__PURE__ */ React.createElement("div", { className: clsx(styles$3["sapphire-dropzone__content"]) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$3["sapphire-dropzone__icon"]) }, /* @__PURE__ */ React.createElement(sapphireReact.Icon, { size: "lg" }, /* @__PURE__ */ React.createElement(react.Upload, null))), /* @__PURE__ */ React.createElement("div", { className: clsx(styles$3["sapphire-dropzone__heading"]) }, /* @__PURE__ */ React.createElement(sapphireReact.Typography.Heading, { level: 6 }, isDropping ? format("dropzone-heading-dropping") : allowsMultiple ? format("dropzone-heading-default") : format("dropzone-heading-default-single"))), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          id: paragraphId,
+          className: clsx(styles$3["sapphire-dropzone__paragraph"])
+        },
+        /* @__PURE__ */ React.createElement(sapphireReact.Typography.Body, { size: "sm", color: "secondary" }, renderInstruction(isDropping))
+      ))
+    ))
+  );
 });
 
-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$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$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
-var __objRest$i = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function FilterDropdown(_a) {
-  var _b = _a, {
-    children,
-    label,
-    value,
-    isDisabled = false,
-    isApplyDisabled = false,
-    isClearDisabled,
-    isOpen: isOpenProp,
-    applyButtonLabel = "Apply",
-    clearButtonLabel = "Clear",
-    hideClearButton = false,
-    defaultOpen = false,
-    hasApplyButton = false,
-    noMaxWidth,
-    onApply,
-    onClear,
-    onOpenChange,
-    buttonSize = "md"
-  } = _b, props = __objRest$i(_b, [
-    "children",
-    "label",
-    "value",
-    "isDisabled",
-    "isApplyDisabled",
-    "isClearDisabled",
-    "isOpen",
-    "applyButtonLabel",
-    "clearButtonLabel",
-    "hideClearButton",
-    "defaultOpen",
-    "hasApplyButton",
-    "noMaxWidth",
-    "onApply",
-    "onClear",
-    "onOpenChange",
-    "buttonSize"
-  ]);
+function FilterDropdown({
+  children,
+  label,
+  value,
+  isDisabled = false,
+  isApplyDisabled = false,
+  isClearDisabled,
+  isOpen: isOpenProp,
+  applyButtonLabel = "Apply",
+  clearButtonLabel = "Clear",
+  hideClearButton = false,
+  defaultOpen = false,
+  hasApplyButton = false,
+  noMaxWidth,
+  onApply,
+  onClear,
+  onOpenChange,
+  buttonSize = "md",
+  ...props
+}) {
   const triggerRef = React.useRef(null);
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const [isOpen, setIsOpen] = utils$2.useControlledState(isOpenProp, defaultOpen, utils.useEffectEvent(onOpenChange));
+  const [isOpen, setIsOpen] = useControlledState.useControlledState(
+    isOpenProp,
+    defaultOpen,
+    useEffectEvent.useEffectEvent(onOpenChange)
+  );
   const hasValue = value != null && value !== "";
   const close = () => setIsOpen(false);
   const onSubmit = (e) => {
-    var _a2;
     e.preventDefault();
-    onApply == null ? void 0 : onApply();
+    onApply?.();
     close();
-    (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
   };
-  const applyButton = /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
-    type: "submit",
-    size: buttonSize,
-    excludeFromTabOrder: !hasApplyButton,
-    isDisabled: isApplyDisabled
-  }, applyButtonLabel);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.PopoverTrigger, {
-    ref: triggerRef,
-    placement: "bottom left",
-    isOpen,
-    onOpenChange: setIsOpen,
-    noMaxWidth,
-    noPadding: true,
-    popoverContent: /* @__PURE__ */ React__default["default"].createElement("form", __spreadProps$j(__spreadValues$k({}, utils.filterDOMProps(props, { global: true })), {
-      onSubmit,
-      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$4["default"]["sapphire-filter-dropdown__body"]
-    }, children), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: styles__default$4["default"]["sapphire-filter-dropdown__footer"]
-    }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ButtonGroup, {
-      align: "right"
-    }, !hideClearButton && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
+  const applyButton = /* @__PURE__ */ React.createElement(
+    sapphireReact.Button,
+    {
+      type: "submit",
       size: buttonSize,
-      variant: "text",
-      onPress: () => {
-        close();
-        onClear == null ? void 0 : onClear();
+      excludeFromTabOrder: !hasApplyButton,
+      isDisabled: isApplyDisabled
+    },
+    applyButtonLabel
+  );
+  return /* @__PURE__ */ React.createElement(
+    sapphireReact.PopoverTrigger,
+    {
+      ref: triggerRef,
+      placement: "bottom left",
+      isOpen,
+      onOpenChange: setIsOpen,
+      noMaxWidth,
+      noPadding: true,
+      popoverContent: /* @__PURE__ */ React.createElement(
+        "form",
+        {
+          ...filterDOMProps.filterDOMProps(props, { global: true }),
+          onSubmit,
+          className: clsx(
+            styles$4["sapphire-filter-dropdown"],
+            styleProps.className
+          ),
+          style: { ...styleProps.style }
+        },
+        /* @__PURE__ */ React.createElement("div", { className: styles$4["sapphire-filter-dropdown__body"] }, children),
+        /* @__PURE__ */ React.createElement("div", { className: styles$4["sapphire-filter-dropdown__footer"] }, /* @__PURE__ */ React.createElement(sapphireReact.ButtonGroup, { align: "right" }, !hideClearButton && /* @__PURE__ */ React.createElement(
+          sapphireReact.Button,
+          {
+            size: buttonSize,
+            variant: "text",
+            onPress: () => {
+              close();
+              onClear?.();
+            },
+            isDisabled: isClearDisabled ?? !hasValue
+          },
+          clearButtonLabel
+        ), hasApplyButton ? applyButton : (
+          // The following is necessary to have the form submitted on "Enter", if there is more than one field
+          /* @__PURE__ */ React.createElement(VisuallyHidden.VisuallyHidden, null, applyButton)
+        )))
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      sapphireReact.ToggleButton,
+      {
+        icon: isOpen ? /* @__PURE__ */ React.createElement(react.ChevronUp, null) : /* @__PURE__ */ React.createElement(react.ChevronDown, null),
+        iconAlign: "right",
+        isSelected: hasValue,
+        isDisabled,
+        size: buttonSize
       },
-      isDisabled: isClearDisabled != null ? isClearDisabled : !hasValue
-    }, clearButtonLabel), hasApplyButton ? applyButton : /* @__PURE__ */ React__default["default"].createElement(visuallyHidden.VisuallyHidden, null, applyButton))))
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ToggleButton, {
-    icon: isOpen ? /* @__PURE__ */ React__default["default"].createElement(react.ChevronUp, null) : /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null),
-    iconAlign: "right",
-    isSelected: hasValue,
-    isDisabled,
-    size: buttonSize
-  }, label, value ? ": " : "", value));
+      label,
+      value ? ": " : "",
+      value
+    )
+  );
 }
 
-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$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$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
-var __objRest$h = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 function SearchableSelectFilter(props) {
-  var _b, _c;
-  const _a = props, { searchField, listBox, size = "md" } = _a, otherProps = __objRest$h(_a, ["searchField", "listBox", "size"]);
+  const { searchField, listBox, size = "md", ...otherProps } = props;
   const searchFieldRef = React.useRef(null);
   const searchFieldProps = searchField.props;
   const listBoxProps = listBox.props;
-  const [searchQuery, setSearchQuery] = utils$2.useControlledState(searchFieldProps == null ? void 0 : searchFieldProps.value, "", searchFieldProps.onChange);
-  if (listBoxProps.connectedInputRef && typeof process !== "undefined" && ((_b = process.env) == null ? void 0 : _b.NODE_ENV) === "development") {
-    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 [searchQuery, setSearchQuery] = useControlledState.useControlledState(
+    searchFieldProps?.value,
+    "",
+    searchFieldProps.onChange
+  );
+  if (listBoxProps.connectedInputRef && typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
+    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$i(__spreadValues$j({}, otherProps), {
-    noMaxWidth: (_c = otherProps.noMaxWidth) != null ? _c : true,
-    buttonSize: size,
-    hasApplyButton: Boolean(otherProps.onApply),
-    isClearDisabled: otherProps.isClearDisabled || !hasSelection && !otherProps.value
-  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Flex, {
-    flexDirection: "column",
-    height: "100%"
-  }, React.cloneElement(searchField, {
-    size: "md",
-    value: searchFieldProps.value || searchQuery,
-    inputRef: utils.mergeRefs(searchFieldRef, searchFieldProps.inputRef),
-    width: searchFieldProps.width || "100%",
-    marginBottom: searchFieldProps.marginBottom || sapphireReact.tokens.size.spacingSm,
-    onChange: setSearchQuery
-  }), React.cloneElement(listBox, {
-    connectedInputRef: searchFieldRef,
-    selectionMode: listBoxProps.selectionMode || "multiple",
-    marginX: `calc(${sapphireReact.tokens.size.spacingContainerHorizontalSm.value} * -1)`,
-    hasScrollDividers: true,
-    filter: "filter" in listBoxProps ? listBoxProps.filter : (textValue) => textValue.toLowerCase().includes(searchQuery.toLowerCase())
-  })));
+  return /* @__PURE__ */ React.createElement(
+    FilterDropdown,
+    {
+      ...otherProps,
+      noMaxWidth: otherProps.noMaxWidth ?? true,
+      buttonSize: size,
+      hasApplyButton: Boolean(otherProps.onApply),
+      isClearDisabled: otherProps.isClearDisabled || !hasSelection && !otherProps.value
+    },
+    /* @__PURE__ */ React.createElement(sapphireReact.Flex, { flexDirection: "column", height: "100%" }, React.cloneElement(searchField, {
+      size: "md",
+      value: searchFieldProps.value || searchQuery,
+      inputRef: mergeRefs.mergeRefs(searchFieldRef, searchFieldProps.inputRef),
+      width: searchFieldProps.width || "100%",
+      marginBottom: searchFieldProps.marginBottom || sapphireReact.tokens.size.spacingSm,
+      onChange: setSearchQuery
+    }), React.cloneElement(listBox, {
+      connectedInputRef: searchFieldRef,
+      selectionMode: listBoxProps.selectionMode || "multiple",
+      marginX: `calc(${sapphireReact.tokens.size.spacingContainerHorizontalSm.value} * -1)`,
+      hasScrollDividers: true,
+      filter: (
+        // This is a way to also allow opting out of the internal filter with filter={undefined}
+        // without us having to allow for more values on the ListBox filter prop
+        "filter" in listBoxProps ? listBoxProps.filter : (textValue) => textValue.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    }))
+  );
 }
 
-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$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$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
-var __objRest$g = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Flag = React__default["default"].forwardRef(function Flag2(_a, ref) {
-  var _b = _a, { size = "lg", rounded, "aria-label": ariaLabel } = _b, props = __objRest$g(_b, ["size", "rounded", "aria-label"]);
+const Flag = React.forwardRef(function Flag2({ size = "lg", rounded, "aria-label": ariaLabel, ...props }, ref) {
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  return React__default["default"].cloneElement(utils$1.getWrappedElement(props.children), __spreadProps$h(__spreadValues$i({
+  return React.cloneElement(utils.getWrappedElement(props.children), {
     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
+    role: "img",
+    ...ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": true },
+    className: clsx(styles$5["sapphire-flag"], styleProps.className, {
+      [styles$5["sapphire-flag--xs"]]: size === "xs",
+      [styles$5["sapphire-flag--sm"]]: size === "sm",
+      [styles$5["sapphire-flag--md"]]: size === "md",
+      [styles$5["sapphire-flag--lg"]]: size === "lg",
+      [styles$5["sapphire-flag--xl"]]: size === "xl",
+      [styles$5["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"
-  ]);
+function LabeledValue({
+  children,
+  contextualHelp,
+  label,
+  labelPlacement = "above",
+  size = "lg",
+  ...otherProps
+}) {
   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));
+  const { fieldProps } = useField.useField({ label });
+  return /* @__PURE__ */ React.createElement(
+    sapphireReact.Field,
+    {
+      ...mergeProps.mergeProps(fieldProps, otherProps),
+      labelPlacement,
+      size,
+      noDefaultWidth: true
+    },
+    /* @__PURE__ */ React.createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React.createElement(sapphireReact.Label, { contextualHelp, size }, label)),
+    /* @__PURE__ */ React.createElement(sapphireReact.Field.Control, null, children)
+  );
 }
 
 var increment$6 = "øge";
@@ -1612,60 +1193,38 @@ var intlMessages$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 StepperButton = ({
+  variant,
+  size,
+  ...props
+}) => {
   const ref = React.useRef(null);
   const { buttonProps, isPressed } = sapphireReact.useButton(props, ref);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled: props.isDisabled });
-  const { focusProps, isFocusVisible } = focus.useFocusRing();
-  return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$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)));
+  const { hoverProps, isHovered } = useHover.useHover({ isDisabled: props.isDisabled });
+  const { focusProps, isFocusVisible } = useFocusRing.useFocusRing();
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ...mergeProps.mergeProps(
+        buttonProps,
+        hoverProps,
+        focusProps,
+        filterDOMProps.filterDOMProps(props, { global: true })
+      ),
+      tabIndex: 0,
+      ref,
+      className: clsx(
+        textFieldStyles["sapphire-text-field__stepper-button"],
+        textFieldStyles["js-hover"],
+        {
+          [textFieldStyles["is-active"]]: isPressed,
+          [textFieldStyles["is-hover"]]: isHovered,
+          [textFieldStyles["is-focus"]]: isFocusVisible
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement(sapphireReact.Icon, { size: size === "lg" ? "md" : "sm" }, variant === "increment" ? /* @__PURE__ */ React.createElement(react.Add, null) : /* @__PURE__ */ React.createElement(react.Subtract, null))
+  );
 };
 
 function useAutofillStyle(inputRef) {
@@ -1686,20 +1245,18 @@ 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;
+  const groupSeparator = parts.find((p) => p.type === "group")?.value ?? ",";
+  let decimalSeparator = parts.find((p) => p.type === "decimal")?.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 : ".";
+    decimalSeparator = plainFormatter.formatToParts(1.1).find((p) => p.type === "decimal")?.value ?? ".";
   }
   return { groupSeparator, decimalSeparator };
 };
 const trimSymbol = (value, symbol) => {
-  if (!symbol)
-    return value;
+  if (!symbol) return value;
   if (value.startsWith(symbol)) {
     return value.slice(symbol.length).trimStart();
   } else if (value.endsWith(symbol)) {
@@ -1708,20 +1265,20 @@ const trimSymbol = (value, symbol) => {
   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;
+  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") {
+  if (isNaN(parsed)) return null;
+  if (formatter?.resolvedOptions().style === "percent") {
     parsed /= 100;
   }
   return parsed;
@@ -1746,13 +1303,12 @@ const formatNumberString = (value, formatter, decimalSeparator, shouldStripSymbo
 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);
+  return isSymbol(first?.type) || first?.type === "literal" && isSymbol(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;
+  const extractedPrefix = hasSymbolAt(parts, true) ? parts.find((part) => isSymbol(part.type))?.value || null : null;
+  const extractedPostfix = hasSymbolAt(parts, false) ? [...parts].reverse().find((part) => isSymbol(part.type))?.value || null : null;
   return prefix !== void 0 || postfix !== void 0 ? {
     extractedPrefix: prefix,
     extractedPostfix: postfix,
@@ -1768,8 +1324,7 @@ const isDeleteOperation = (inputType) => {
   return inputType === "deleteContentBackward" || inputType === "deleteContentForward";
 };
 const calculateCursorPosition = (oldValue, newValue, oldCursor, inputType, decimalSeparator, numericValue) => {
-  if (!newValue)
-    return 0;
+  if (!newValue) return 0;
   const oldDecimalPos = oldValue.indexOf(decimalSeparator);
   const newDecimalPos = newValue.indexOf(decimalSeparator);
   if (numericValue === 0 && isDeleteOperation(inputType)) {
@@ -1778,8 +1333,7 @@ const calculateCursorPosition = (oldValue, newValue, oldCursor, inputType, decim
   const countDigits = (str, start, end) => {
     let count = 0;
     for (let i = start; i < end; i++) {
-      if (/[0-9]/.test(str[i]))
-        count++;
+      if (/[0-9]/.test(str[i])) count++;
     }
     return count;
   };
@@ -1787,7 +1341,11 @@ const calculateCursorPosition = (oldValue, newValue, oldCursor, inputType, decim
     return newDecimalPos;
   }
   if (oldDecimalPos >= 0 && oldCursor > oldDecimalPos && newDecimalPos >= 0) {
-    const digitsBeforeCursor = countDigits(oldValue, oldDecimalPos + 1, oldCursor);
+    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) {
@@ -1798,12 +1356,15 @@ const calculateCursorPosition = (oldValue, newValue, oldCursor, inputType, decim
   }
   const oldEnd = oldDecimalPos >= 0 ? oldDecimalPos : oldValue.length;
   const newEnd = newDecimalPos >= 0 ? newDecimalPos : newValue.length;
-  const intDigitsBeforeCursor = countDigits(oldValue, 0, Math.min(oldCursor, oldEnd));
+  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;
+        if (/[0-9]/.test(newValue[i])) return i + 1;
       }
     }
     return 0;
@@ -1819,9 +1380,12 @@ const calculateCursorPosition = (oldValue, newValue, oldCursor, inputType, decim
 
 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];
+  const suffixReg = new RegExp(
+    `\\d([^${escapeRegExp(groupSeparator)}${escapeRegExp(
+      decimalSeparator
+    )}0-9]+)`
+  );
+  return value.match(suffixReg)?.[1];
 };
 function handleNumberFieldKeyDown({
   event,
@@ -1830,19 +1394,21 @@ function handleNumberFieldKeyDown({
   decimalSeparator,
   onOriginalKeyDown
 }) {
-  var _a;
   const { key } = event;
   const input = event.currentTarget;
   const { selectionStart, value } = input;
   if (selectionStart === null) {
-    onOriginalKeyDown == null ? void 0 : onOriginalKeyDown(event);
+    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"), "");
+      const cleanedInteger = integerPart.replace(
+        new RegExp(escapeRegExp(groupSeparator), "g"),
+        ""
+      );
       if (cleanedInteger === "0") {
         event.preventDefault();
         const newValue = key + (decimalPos >= 0 ? value.slice(decimalPos) : "");
@@ -1929,10 +1495,10 @@ function handleNumberFieldKeyDown({
     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);
+      inputRef.current?.setSelectionRange(suffixStartPos, suffixStartPos);
     }
   }
-  onOriginalKeyDown == null ? void 0 : onOriginalKeyDown(event);
+  onOriginalKeyDown?.(event);
 }
 
 function useNumberFieldFormatting({
@@ -1945,19 +1511,28 @@ function useNumberFieldFormatting({
   onChange,
   autoFormat
 }) {
-  const { groupSeparator, decimalSeparator } = React.useMemo(() => getSeparators(formatter), [formatter]);
+  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 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;
+    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) {
+    } catch {
       return inputValue;
     }
   }, [
@@ -1970,49 +1545,74 @@ function useNumberFieldFormatting({
   ]);
   React.useLayoutEffect(() => {
     if (cursorPositionRef.current !== null && inputRef.current) {
-      inputRef.current.setSelectionRange(cursorPositionRef.current, cursorPositionRef.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 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]);
+      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?.(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,
@@ -2022,83 +1622,25 @@ function useNumberFieldFormatting({
   };
 }
 
-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), {
+const useSapphireNumberField = ({ error, ...numberFieldProps }, ref) => {
+  const { locale } = I18nProvider.useLocale();
+  const numberFieldState = useNumberFieldState.useNumberFieldState({
+    ...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 numberFieldAria = useNumberField.useNumberField(
+    {
+      ...numberFieldProps,
+      validationState: error === false || error === void 0 ? void 0 : "invalid"
+    },
+    numberFieldState,
+    ref
+  );
+  return { ...numberFieldAria, state: numberFieldState };
 };
+
 const NumberField = React.forwardRef(function NumberField2(props, ref) {
-  var _b;
-  const _a = props, {
+  const {
     label,
     isDisabled,
     error,
@@ -2113,24 +1655,9 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     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"
-  ]);
+    autoFormat = false,
+    ...otherProps
+  } = props;
   const { prefix, postfix } = React.useMemo(() => {
     if (affix === "auto") {
       return { prefix: void 0, postfix: void 0 };
@@ -2138,7 +1665,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     return { prefix: affix.prefix, postfix: affix.postfix };
   }, [affix]);
   sapphireReact.useThemeCheck();
-  const inputRef = utils.useObjectRef(props.inputRef);
+  const inputRef = useObjectRef.useObjectRef(props.inputRef);
   const formatMessage = i18n.useMessageFormatter(intlMessages$1);
   const {
     inputProps,
@@ -2147,14 +1674,21 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     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();
+  } = useSapphireNumberField(
+    {
+      ...props,
+      incrementAriaLabel: incrementAriaLabel ?? formatMessage("increment"),
+      decrementAriaLabel: decrementAriaLabel ?? formatMessage("decrement")
+    },
+    inputRef
+  );
+  const { focusProps, isFocusVisible } = useFocusRing.useFocusRing();
   const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
-  const { locale } = i18n.useLocale();
-  const formatter = React.useMemo(() => new Intl.NumberFormat(locale, props.formatOptions), [locale, props.formatOptions]);
+  const { locale } = I18nProvider.useLocale();
+  const formatter = React.useMemo(
+    () => new Intl.NumberFormat(locale, props.formatOptions),
+    [locale, props.formatOptions]
+  );
   const formattingResult = useNumberFieldFormatting({
     inputRef,
     formatter,
@@ -2172,65 +1706,122 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     handleKeyDown: inputProps.onKeyDown
   };
   const containerRef = React.useRef(null);
-  React.useImperativeHandle(ref, () => __spreadProps$d(__spreadValues$e({}, utils$1.createFocusableRef(containerRef, inputRef)), {
+  React.useImperativeHandle(ref, () => ({
+    ...utils.createFocusableRef(containerRef, inputRef),
+    /**
+     * (This function is deprecated. Use `inputRef` prop)
+     * @deprecated
+     */
     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))));
+  return /* @__PURE__ */ React.createElement(
+    sapphireReact.Field,
+    {
+      ...removeUniqueDOMProps(otherProps),
+      ref: containerRef,
+      size,
+      labelPlacement
+    },
+    /* @__PURE__ */ React.createElement(
+      sapphireReact.Field.Context,
+      {
+        descriptionProps: error ? errorMessageProps : descriptionProps
+      },
+      label && /* @__PURE__ */ React.createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React.createElement(
+        sapphireReact.Label,
+        {
+          ...labelProps,
+          size,
+          necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
+          contextualHelp
+        },
+        label
+      )),
+      /* @__PURE__ */ React.createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(textFieldStyles["sapphire-text-field"], {
+            [textFieldStyles["is-focus"]]: isFocusVisible,
+            [textFieldStyles["sapphire-text-field--error"]]: error === true || typeof error === "string",
+            [textFieldStyles["sapphire-text-field--md"]]: size === "md"
+          })
+        },
+        extractedPrefix && /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: clsx(
+              textFieldStyles["sapphire-text-field__prefix"],
+              {
+                [textFieldStyles["sapphire-text-field__prefix--icon"]]: typeof extractedPrefix !== "string"
+              }
+            )
+          },
+          extractedPrefix
+        ),
+        /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            ...mergeProps.mergeProps(
+              inputProps,
+              focusProps,
+              {
+                onChange: updateStyle,
+                onBlur: updateStyle
+              },
+              autoFormat ? {
+                onInput: handleInput,
+                onKeyDown: handleKeyDown
+              } : {}
+            ),
+            value: formattingResult?.displayValue ?? inputProps.value,
+            ref: inputRef,
+            className: clsx(textFieldStyles["sapphire-text-field__input"], {
+              [textFieldStyles["sapphire-text-field__input--align-right"]]: !!alignInputRight
+            }),
+            style: autofillStyles
+          }
+        ),
+        extractedPostfix && /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: clsx(
+              textFieldStyles["sapphire-text-field__postfix"],
+              {
+                [textFieldStyles["sapphire-text-field__postfix--icon"]]: typeof extractedPostfix !== "string"
+              }
+            )
+          },
+          extractedPostfix
+        ),
+        showButtons && /* @__PURE__ */ React.createElement("div", { className: textFieldStyles["sapphire-text-field__stepper"] }, /* @__PURE__ */ React.createElement(
+          StepperButton,
+          {
+            variant: "decrement",
+            size,
+            ...decrementButtonProps
+          }
+        ), /* @__PURE__ */ React.createElement(sapphireReact.Separator, { orientation: "vertical" }), /* @__PURE__ */ React.createElement(
+          StepperButton,
+          {
+            variant: "increment",
+            size,
+            ...incrementButtonProps
+          }
+        ))
+      )),
+      (error && typeof error !== "boolean" || note) && /* @__PURE__ */ React.createElement(sapphireReact.Field.Footer, null, error && typeof error !== "boolean" ? /* @__PURE__ */ React.createElement(sapphireReact.Field.Note, { variant: "error" }, error) : note ? note : /* @__PURE__ */ React.createElement(React.Fragment, null))
+    )
+  );
 });
-const removeUniqueDOMProps = (props) => Object.fromEntries(Object.entries(props).filter(([name]) => name !== "id" && !name.startsWith("data-")));
+const removeUniqueDOMProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(
+    ([name]) => name !== "id" && !name.startsWith("data-")
+  )
+);
 
-const SecondarySidebarContext = React__default["default"].createContext(null);
+const SecondarySidebarContext = React.createContext(null);
 const useSecondarySidebarContext = () => {
   const context = React.useContext(SecondarySidebarContext);
   if (context) {
@@ -2245,22 +1836,25 @@ const SecondarySidebarProvider = ({
   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 [secondarySidebarId, setSecondarySidebarId] = useControlledState.useControlledState(openedId, 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);
+  return /* @__PURE__ */ React.createElement(
+    SecondarySidebarContext.Provider,
+    {
+      value: {
+        openedId: context?.openedId ?? secondarySidebarId,
+        setOpenedId: context?.setOpenedId ?? setSecondarySidebarId,
+        content: context?.content ?? content,
+        setContent: context?.setContent ?? setContent,
+        themeVariant: themeVariant ?? context?.themeVariant
+      }
+    },
+    children
+  );
 };
 
-const ResponsiveSidebarContext = React__default["default"].createContext(null);
+const ResponsiveSidebarContext = React.createContext(null);
 function useResponsiveSidebarContext() {
   return React.useContext(ResponsiveSidebarContext);
 }
@@ -2286,59 +1880,35 @@ const ResponsiveSidebarProvider = ({
   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 [isOpen, setOpen] = useControlledState.useControlledState(
+    isPanelOpen,
+    defaultIsPanelOpen ?? false,
+    onPanelOpenChange
+  );
+  return /* @__PURE__ */ React.createElement(
+    ResponsiveSidebarContext.Provider,
+    {
+      value: {
+        isPanelOpen: isOpen,
+        setPanelOpen: setOpen,
+        collapsed
+      }
+    },
+    children
+  );
 };
-const SidebarPanel = (_a) => {
-  var _b = _a, {
-    children,
-    header
-  } = _b, props = __objRest$b(_b, [
-    "children",
-    "header"
-  ]);
+
+const SidebarPanel = ({
+  children,
+  header,
+  ...props
+}) => {
   const { openedId, setOpenedId, content } = useSecondarySidebarContext();
   const responsiveContext = useResponsiveSidebarContext();
   if (!responsiveContext) {
-    throw new Error("<SidebarPanel> must be rendered inside a <Sidebar.ResponsiveProvider>");
+    throw new Error(
+      "<SidebarPanel> must be rendered inside a <Sidebar.ResponsiveProvider>"
+    );
   }
   const { isPanelOpen, setPanelOpen } = responsiveContext;
   const isCollapsed = useIsSidebarCollapsed();
@@ -2347,41 +1917,60 @@ const SidebarPanel = (_a) => {
       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
+  return /* @__PURE__ */ React.createElement(
+    sapphireReact.Panel,
+    {
+      ...props,
+      isOpen: isPanelOpen,
+      onClose: () => setPanelOpen(false),
+      onCloseTransitionDone: () => setOpenedId(null),
+      alignLeft: true,
+      isDismissable: true,
+      width: 320
+    },
+    /* @__PURE__ */ React.createElement(
+      sapphireReact.ModalLayout,
+      {
+        header: /* @__PURE__ */ React.createElement(
+          sapphireReact.ModalLayout.Header,
+          {
+            heading: openedId === null ? header : content?.header,
+            backButton: openedId !== null && /* @__PURE__ */ React.createElement(
+              sapphireReact.IconButton,
+              {
+                size: "md",
+                "aria-label": "Back",
+                variant: "tertiary",
+                marginLeft: `calc(-1 * ${sapphireReact.tokens.size.spacingSm})`,
+                onPress: () => setOpenedId(null)
+              },
+              /* @__PURE__ */ React.createElement(react.ChevronLeft, null)
+            )
+          }
+        ),
+        body: /* @__PURE__ */ React.createElement(
+          sapphireReact.ModalLayout.Body,
+          {
+            noPadding: true,
+            UNSAFE_style: {
+              paddingLeft: sapphireReact.tokens.size.spacingMd.value,
+              paddingRight: sapphireReact.tokens.size.spacingMd.value
+            }
+          },
+          /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(sapphireReact.View, { isHidden: openedId !== null }, children), openedId && content?.body)
+        )
       }
-    }, /* @__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>");
+    throw new Error(
+      "<Sidebar.PanelTrigger> should be rendered inside a <Sidebar.ResponsiveProvider>"
+    );
   }
   const isCollapsed = useIsSidebarCollapsed();
   const panelTriggerProps = {
@@ -2416,271 +2005,163 @@ const useSidebar = () => {
   };
 };
 
-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"
-  ]);
+const Sidebar = ({
+  themeVariant,
+  openedSecondarySidebar,
+  defaultOpenedSecondarySidebar,
+  onSecondarySidebarChange,
+  secondarySidebarThemeVariant,
+  children,
+  ...props
+}) => {
   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"
-  ]);
+  return /* @__PURE__ */ React.createElement(
+    SecondarySidebarProvider,
+    {
+      openedId: openedSecondarySidebar,
+      defaultOpenedId: defaultOpenedSecondarySidebar,
+      onOpenedIdChange: onSecondarySidebarChange,
+      themeVariant: secondarySidebarThemeVariant
+    },
+    /* @__PURE__ */ React.createElement(WithThemeRoot, { themeVariant }, /* @__PURE__ */ React.createElement(SidebarContent, { ...props }, children))
+  );
+};
+const SidebarContent = ({
+  onBlurWithin,
+  onFocusWithin,
+  onFocusWithinChange,
+  closeOnBlurWithin = true,
+  header,
+  panelHeader,
+  children,
+  ...props
+}) => {
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
   const { sidebarProps } = useSidebar();
-  const { focusWithinProps } = interactions.useFocusWithin(utils.mergeProps({
-    onBlurWithin,
-    onFocusWithin,
-    onFocusWithinChange
-  }, closeOnBlurWithin ? sidebarProps : {}));
+  const { focusWithinProps } = useFocusWithin.useFocusWithin(
+    mergeProps.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));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isCollapsed && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...styleProps,
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
+      ...focusWithinProps,
+      className: clsx(styles$6["sapphire-sidebar"]),
+      tabIndex: -1
+    },
+    header,
+    children
+  ), responsiveSidebarContext && /* @__PURE__ */ React.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, {
+}) => themeVariant ? /* @__PURE__ */ React.createElement(
+  sapphireReact.ThemeRoot,
+  {
+    variant: themeVariant,
+    noSurface: true,
+    height: "100%",
+    width: "min-content"
+  },
+  children
+) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+
+const SidebarHeader = ({
+  children,
+  closeButtonProps,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...filterDOMProps.filterDOMProps(props),
+      className: clsx(styles$6["sapphire-sidebar__header"])
+    },
     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;
+    closeButtonProps && /* @__PURE__ */ React.createElement(sapphireReact.IconButton, { ...closeButtonProps, "aria-label": "Close" }, /* @__PURE__ */ React.createElement(react.CloseLarge, null))
+  );
 };
-const SidebarItem = React__default["default"].forwardRef(function SidebarItem2(_a, ref) {
-  var _b = _a, { isActive, children } = _b, props = __objRest$8(_b, ["isActive", "children"]);
+
+const SidebarItem = React.forwardRef(function SidebarItem2({ isActive, children, ...props }, ref) {
   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,
-    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));
+  return /* @__PURE__ */ React.createElement("li", { className: clsx(styles$6["sapphire-sidebar__nav-item"]) }, /* @__PURE__ */ React.createElement(
+    sapphireReact.Button,
+    {
+      ref,
+      variant: "tertiary",
+      elementType: "a",
+      "aria-current": isActive ? "page" : void 0,
+      ...mergeProps.mergeProps(props, itemProps),
+      UNSAFE_className: clsx(
+        buttonStyles["sapphire-button--stretch-left-align"],
+        { [buttonStyles["sapphire-button--selected"]]: isActive }
+      )
+    },
+    children
+  ));
 });
 
-var __defProp$9 = Object.defineProperty;
-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;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$7 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const SidebarExpandableItem = React__default["default"].forwardRef(function SidebarExpandableItem2(_a, ref) {
-  var _b = _a, {
+const SidebarExpandableItem = React.forwardRef(
+  function SidebarExpandableItem2({
     id,
     isActive,
     body,
     header,
-    children
-  } = _b, props = __objRest$7(_b, [
-    "id",
-    "isActive",
-    "body",
-    "header",
-    "children"
-  ]);
-  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));
-});
+    children,
+    ...props
+  }, ref) {
+    const { openedId, setContent, themeVariant } = useSecondarySidebarContext();
+    const isCollapsed = useIsSidebarCollapsed();
+    const { getExpandableItemProps, secondarySidebarProps } = useSidebar();
+    const itemId = useId.useId(id);
+    const isOpen = openedId === itemId;
+    React.useLayoutEffect(() => {
+      if (isOpen) {
+        setContent({ header, body });
+      }
+    }, [isOpen]);
+    return /* @__PURE__ */ React.createElement("li", { className: clsx(styles$6["sapphire-sidebar__nav-item"]) }, /* @__PURE__ */ React.createElement(
+      sapphireReact.Button,
+      {
+        variant: "tertiary",
+        "aria-current": isActive || void 0,
+        ref,
+        ...mergeProps.mergeProps(
+          getExpandableItemProps(itemId),
+          props
+        ),
+        UNSAFE_className: clsx(
+          buttonStyles["sapphire-button--stretch-left-align"],
+          {
+            [buttonStyles["sapphire-button--selected"]]: isActive && !isOpen,
+            [buttonStyles["is-active"]]: isOpen
+          }
+        )
+      },
+      children
+    ), /* @__PURE__ */ React.createElement(
+      SecondarySidebar,
+      {
+        isOpen: isOpen && !isCollapsed,
+        header,
+        themeVariant,
+        ...secondarySidebarProps
+      },
+      body
+    ));
+  }
+);
 const SecondarySidebar = ({
   isOpen,
   onClose,
@@ -2693,188 +2174,134 @@ const SecondarySidebar = ({
   React.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
-        onClose == null ? void 0 : onClose();
+        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$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;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$6 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const SidebarSection = (_a) => {
-  var _b = _a, {
-    title,
-    "aria-label": label,
-    children
-  } = _b, props = __objRest$6(_b, [
-    "title",
-    "aria-label",
-    "children"
-  ]);
+  return /* @__PURE__ */ React.createElement(
+    reactTransitionGroup.Transition,
+    {
+      in: isOpen,
+      mountOnEnter: true,
+      nodeRef: ref,
+      unmountOnExit: true,
+      onExited: onCloseTransitionDone,
+      timeout: 200
+    },
+    (transitionState) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: clsx(styles$6["sapphire-sidebar__secondary-container"], {
+          [styles$6["sapphire-sidebar--slide-in"]]: true,
+          [styles$6["sapphire-sidebar--slide-out"]]: transitionState === "exiting"
+        })
+      },
+      /* @__PURE__ */ React.createElement(FocusScope.FocusScope, { restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React.createElement(
+        _Sidebar,
+        {
+          themeVariant,
+          closeOnBlurWithin: false,
+          header: /* @__PURE__ */ React.createElement(
+            _Sidebar.Header,
+            {
+              closeButtonProps: {
+                onPress: () => onClose?.()
+              }
+            },
+            header
+          ),
+          panelHeader: null
+        },
+        children
+      ))
+    )
+  );
+};
+
+const SidebarSection = ({
+  title,
+  "aria-label": label,
+  children,
+  ...props
+}) => {
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { itemProps, headingProps, groupProps } = listbox.useListBoxSection({
+  const { itemProps, headingProps, groupProps } = useListBox.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)));
-};
-
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$5 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      role: "separator",
+      className: clsx(styles$6["sapphire-sidebar__separator"])
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      ...itemProps,
+      ...styleProps,
+      ...filterDOMProps.filterDOMProps(props, { global: true })
+    },
+    title && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...headingProps,
+        className: clsx(styles$6["sapphire-sidebar__section-header"])
+      },
+      title
+    ),
+    /* @__PURE__ */ React.createElement(
+      "ul",
+      {
+        ...groupProps,
+        className: clsx(styles$6["sapphire-sidebar__section"])
+      },
+      children
+    )
+  ));
 };
-const SidebarBody = (_a) => {
-  var _b = _a, {
-    elementType = "nav",
-    children
-  } = _b, props = __objRest$5(_b, [
-    "elementType",
-    "children"
-  ]);
+
+const SidebarBody = ({
+  elementType = "nav",
+  children,
+  ...props
+}) => {
   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;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest$4 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const SidebarList = (_a) => {
-  var _b = _a, {
-    elementType = "ul",
+  return /* @__PURE__ */ React.createElement(
+    RootNode,
+    {
+      ref: sidebarBody,
+      tabIndex: -1,
+      className: clsx(styles$6["sapphire-sidebar__body"], {
+        [styles$6["sapphire-sidebar__body--scrolled"]]: isScrolled
+      }),
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
+      ...scrollCheckProps
+    },
     children
-  } = _b, props = __objRest$4(_b, [
-    "elementType",
-    "children"
-  ]);
+  );
+};
+
+const SidebarList = ({
+  elementType = "ul",
+  children,
+  ...props
+}) => {
   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);
+  return /* @__PURE__ */ React.createElement(
+    RootNode,
+    {
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
+      className: clsx(styles$6["sapphire-sidebar__nav-list"])
+    },
+    children
+  );
 };
 
 const _Sidebar = Object.assign(Sidebar, {
@@ -2888,25 +2315,6 @@ const _Sidebar = Object.assign(Sidebar, {
   PanelTrigger: SidebarPanelTrigger
 });
 
-var __defProp$5 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const ProgressIndicator = (props) => {
   const {
     maxValue = 100,
@@ -2916,332 +2324,265 @@ const ProgressIndicator = (props) => {
   } = props;
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { progressBarProps } = progress.useProgressBar(__spreadProps$5(__spreadValues$5({}, props), {
+  const { progressBarProps } = useProgressBar.useProgressBar({
+    ...props,
     minValue: 0,
     valueLabel: ariaValueText
-  }));
+  });
   const minValue = 0;
   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$7["default"]["sapphire-progress"])
-  }), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$5(__spreadValues$5({}, progressBarProps), {
-    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$7["default"]["sapphire-progress--segments"]
-  }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React__default["default"].createElement("span", {
-    key: index
-  }))));
-};
-
-var __defProp$4 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-var __objRest$3 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
+      className: clsx(styles$7["sapphire-progress"])
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...progressBarProps,
+        className: styles$7["sapphire-progress--indicator"],
+        style: { ...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.createElement("div", { className: styles$7["sapphire-progress--segments"] }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React.createElement("span", { key: index })))
+  );
 };
-const Slider = (_a) => {
-  var _b = _a, {
-    label,
-    labelPlacement = "above",
-    note,
-    name
-  } = _b, props = __objRest$3(_b, [
-    "label",
-    "labelPlacement",
-    "note",
-    "name"
-  ]);
+
+const Slider = ({
+  label,
+  labelPlacement = "above",
+  note,
+  name,
+  ...props
+}) => {
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$4(__spreadValues$4({}, styleProps), {
-    labelPlacement
-  }), /* @__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$8["default"]["sapphire-slider"]),
-    role: "slider"
-  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.SliderTrack, {
-    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$8["default"]["sapphire-slider__track-remaining"])
-  }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    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$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);
-      return {
-        left: `${percent}%`
-      };
-    }
-  })))))), note && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, note)));
+  return /* @__PURE__ */ React.createElement(sapphireReact.Field, { ...styleProps, labelPlacement }, /* @__PURE__ */ React.createElement(sapphireReact.Field.Context, null, label && /* @__PURE__ */ React.createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React.createElement(sapphireReact.Label, null, label)), /* @__PURE__ */ React.createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React.createElement(reactAriaComponents.Slider, { ...props, style: { height: "100%" } }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$8["sapphire-slider"]), role: "slider" }, /* @__PURE__ */ React.createElement(
+    reactAriaComponents.SliderTrack,
+    {
+      className: ({ isDisabled }) => clsx(styles$8["sapphire-slider__track"], {
+        [styles$8["is-disabled"]]: isDisabled
+      })
+    },
+    ({ state }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(
+          styles$8["sapphire-slider__track-remaining"]
+        )
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(styles$8["sapphire-slider__track-fill"]),
+        style: { width: state.getThumbPercent(0) * 100 + "%" }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      reactAriaComponents.SliderThumb,
+      {
+        name,
+        className: (state2) => clsx(styles$8["sapphire-slider__thumb"], {
+          [styles$8["is-focus"]]: state2.isFocusVisible
+        }),
+        style: ({ state: state2 }) => {
+          const percent = Math.min(
+            3 + state2.getThumbPercent(0) * 94,
+            100
+          );
+          return {
+            left: `${percent}%`
+          };
+        }
+      }
+    ))
+  )))), note && /* @__PURE__ */ React.createElement(sapphireReact.Field.Footer, null, note)));
 };
 
 const _Slider = Object.assign(Slider, {
   Note: sapphireReact.Field.Note
 });
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$2 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 function Tag(props) {
   sapphireReact.useThemeCheck();
   const { hasError = false, item, state } = props;
   const ref = React.useRef(null);
-  const _a = tag.useTag(props, state, ref), {
+  const {
     gridCellProps,
     isDisabled,
     isFocused,
     isPressed,
     removeButtonProps,
-    rowProps: _b
-  } = _a, _c = _b, { onKeyDown } = _c, rowProps = __objRest$2(_c, ["onKeyDown"]), otherProps = __objRest$2(_a, [
-    "gridCellProps",
-    "isDisabled",
-    "isFocused",
-    "isPressed",
-    "removeButtonProps",
-    "rowProps"
-  ]);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
+    rowProps: { onKeyDown, ...rowProps },
+    ...otherProps
+  } = useTagGroup.useTag(props, state, ref);
+  const { hoverProps, isHovered } = useHover.useHover({ isDisabled });
   const hasAction = otherProps.hasAction;
-  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, 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)))));
+  return /* @__PURE__ */ React.createElement(sapphireReact.TooltipIfNeeded, { title: item.rendered }, (tooltipRef, tooltipProps) => {
+    const { ref: tooltipTargetRef, ...restTooltipProps } = tooltipProps || {};
+    return /* @__PURE__ */ React.createElement(FocusRing.FocusRing, { focusRingClass: styles$9["is-focus"] }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: mergeRefs.mergeRefs(ref, tooltipTargetRef),
+        ...mergeProps.mergeProps(
+          {
+            onKeyDown: (e) => {
+              if (e.key !== " ") {
+                onKeyDown?.(e);
+              } else {
+                e.preventDefault();
+              }
+            }
+          },
+          rowProps,
+          hoverProps,
+          restTooltipProps
+        ),
+        className: clsx(
+          styles$9["sapphire-tag"],
+          styles$9["js-focus"],
+          styles$9["js-hover"],
+          {
+            [styles$9["sapphire-tag--actionable"]]: hasAction,
+            [styles$9["is-active"]]: hasAction && isPressed,
+            [styles$9["is-hover"]]: hasAction && isHovered,
+            [styles$9["is-disabled"]]: isDisabled
+          }
+        ),
+        ...hasError ? { "aria-invalid": true } : {}
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ...gridCellProps,
+          className: styles$9["sapphire-tag__content"]
+        },
+        hasError && !isDisabled && /* @__PURE__ */ React.createElement(IconError, null),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            ref: tooltipRef,
+            className: styles$9["sapphire-tag__label"]
+          },
+          item.rendered
+        ),
+        !isDisabled && props.allowsRemoving && /* @__PURE__ */ React.createElement(RemoveButton, { ...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$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 { buttonProps } = useButton.useButton(removeButtonProps, buttonRef);
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ...buttonProps,
+      className: clsx(styles$9["sapphire-tag__button"], styles$9["js-focus"])
+    },
+    /* @__PURE__ */ React.createElement(sapphireReact.Icon, { size: "sm" }, /* @__PURE__ */ React.createElement(react.Close, null))
+  );
 }
 const IconError = () => {
-  return /* @__PURE__ */ React__default["default"].createElement("span", {
-    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)));
-};
-
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$1 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
+  return /* @__PURE__ */ React.createElement("span", { className: clsx(styles$9["sapphire-tag__error-icon"]) }, /* @__PURE__ */ React.createElement(sapphireReact.Icon, { size: "sm" }, /* @__PURE__ */ React.createElement(react.Error, null)));
 };
+
 function TagGroup(props) {
   sapphireReact.useThemeCheck();
-  const _a = props, {
+  const {
     contextualHelp,
     errorMessage,
     label: labelText,
     labelPlacement = "above",
     note,
-    onRemove: originalOnRemove
-  } = _a, otherProps = __objRest$1(_a, [
-    "contextualHelp",
-    "errorMessage",
-    "label",
-    "labelPlacement",
-    "note",
-    "onRemove"
-  ]);
+    onRemove: originalOnRemove,
+    ...otherProps
+  } = props;
   const ref = React.useRef(null);
-  const state = list.useListState(props);
+  const state = useListState.useListState(props);
   const onRemove = originalOnRemove ? (keys) => {
-    console.warn("The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead.");
+    console.warn(
+      "The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead."
+    );
     originalOnRemove(keys);
   } : (keys) => {
     Array.from(keys).forEach((key) => {
-      var _a2, _b;
       const item = state.collection.getItem(key);
       if (item) {
-        (_b = (_a2 = item.props).onRemove) == null ? void 0 : _b.call(_a2);
+        item.props.onRemove?.();
       }
     });
   };
-  const { descriptionProps, gridProps, labelProps, errorMessageProps } = tag.useTagGroup(__spreadProps$2(__spreadValues$2({}, props), { onRemove }), state, ref);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$2(__spreadValues$2({}, otherProps), {
-    labelPlacement,
-    labelVerticalAlignment: "top",
-    noDefaultWidth: true
-  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Context, {
-    descriptionProps: errorMessage ? errorMessageProps : descriptionProps
-  }, (labelText || contextualHelp) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps$2(__spreadValues$2({}, labelProps), {
-    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$9["default"]["sapphire-tag-group"]
-  }), Array.from(state.collection).map((item) => /* @__PURE__ */ React__default["default"].createElement(Tag, {
-    key: item.key,
-    item,
-    state,
-    hasError: item.props.hasError,
-    allowsRemoving: !!originalOnRemove || !!item.props.onRemove
-  })))), (note || errorMessage) && (errorMessage ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, {
-    variant: "error"
-  }, errorMessage)) : /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, note))));
+  const { descriptionProps, gridProps, labelProps, errorMessageProps } = useTagGroup.useTagGroup({ ...props, onRemove }, state, ref);
+  return /* @__PURE__ */ React.createElement(
+    sapphireReact.Field,
+    {
+      ...otherProps,
+      labelPlacement,
+      labelVerticalAlignment: "top",
+      noDefaultWidth: true
+    },
+    /* @__PURE__ */ React.createElement(
+      sapphireReact.Field.Context,
+      {
+        descriptionProps: errorMessage ? errorMessageProps : descriptionProps
+      },
+      (labelText || contextualHelp) && /* @__PURE__ */ React.createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React.createElement(sapphireReact.Label, { ...labelProps, contextualHelp }, labelText)),
+      /* @__PURE__ */ React.createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ...gridProps,
+          ref,
+          className: styles$9["sapphire-tag-group"]
+        },
+        Array.from(state.collection).map((item) => /* @__PURE__ */ React.createElement(
+          Tag,
+          {
+            key: item.key,
+            item,
+            state,
+            hasError: item.props.hasError,
+            allowsRemoving: !!originalOnRemove || !!item.props.onRemove
+          }
+        ))
+      )),
+      (note || errorMessage) && (errorMessage ? /* @__PURE__ */ React.createElement(sapphireReact.Field.Footer, null, /* @__PURE__ */ React.createElement(sapphireReact.Field.Note, { variant: "error" }, errorMessage)) : /* @__PURE__ */ React.createElement(sapphireReact.Field.Footer, null, note))
+    )
+  );
 }
 
-const TagItem = collections$1.Item;
-
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const TimeSegment = ({ segment, state }) => segment.type === "hour" || segment.type === "minute" || segment.type === "dayPeriod" ? /* @__PURE__ */ React__default["default"].createElement(EditableSegment, {
-  segment,
-  state
-}) : /* @__PURE__ */ React__default["default"].createElement(SeparatorSegment, {
-  segment
-});
-const SeparatorSegment = ({ segment }) => /* @__PURE__ */ React__default["default"].createElement("span", {
-  "aria-hidden": "true",
-  className: clsx__default["default"](styles__default$a["default"]["sapphire-date-field__segment"], styles__default$a["default"]["sapphire-date-field__segment--separator"])
-}, segment.text);
+const TagItem = Item.Item;
+
+const TimeSegment = ({ segment, state }) => segment.type === "hour" || segment.type === "minute" || segment.type === "dayPeriod" ? /* @__PURE__ */ React.createElement(EditableSegment, { segment, state }) : /* @__PURE__ */ React.createElement(SeparatorSegment, { segment });
+const SeparatorSegment = ({ segment }) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: clsx(
+      styles$a["sapphire-date-field__segment"],
+      styles$a["sapphire-date-field__segment--separator"]
+    )
+  },
+  segment.text
+);
 const EditableSegment = ({ segment, state }) => {
   const ref = React.useRef(null);
-  const { segmentProps } = datepicker.useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$1(__spreadValues$1({}, segmentProps), {
-    style: segmentProps.style,
-    ref,
-    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);
+  const { segmentProps } = useDateField.useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...segmentProps,
+      style: segmentProps.style,
+      ref,
+      className: clsx(styles$a["sapphire-date-field__segment"], {
+        [styles$a["sapphire-date-field__segment--filled"]]: !segment.isPlaceholder
+      })
+    },
+    segment.text
+  );
 };
 
 var clear$6 = "Nulstil";
@@ -3289,101 +2630,83 @@ var intlMessages = {
   "sv-SE": se
 };
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const isAnySegmentModified = (segments) => segments.map(({ type, isPlaceholder }) => {
   return type !== "literal" && !isPlaceholder;
 }).some((isModified) => isModified);
-function _TimeField(_a, ref) {
-  var _b = _a, {
-    size = "lg",
-    noClearButton = false,
-    error,
-    note,
-    contextualHelp,
-    necessityIndicator = false
-  } = _b, otherProps = __objRest(_b, [
-    "size",
-    "noClearButton",
-    "error",
-    "note",
-    "contextualHelp",
-    "necessityIndicator"
-  ]);
+function _TimeField({
+  // TODO many other props
+  size = "lg",
+  noClearButton = false,
+  error,
+  note,
+  contextualHelp,
+  necessityIndicator = false,
+  ...otherProps
+}, ref) {
   sapphireReact.useThemeCheck();
-  const timeFieldRef = utils.useObjectRef(ref);
-  const { locale } = i18n.useLocale();
+  const timeFieldRef = useObjectRef.useObjectRef(ref);
+  const { locale } = I18nProvider.useLocale();
   const formatMessage = i18n.useMessageFormatter(intlMessages);
-  const state = datepicker$1.useTimeFieldState(__spreadProps(__spreadValues({}, otherProps), {
+  const state = useTimeFieldState.useTimeFieldState({
+    ...otherProps,
     locale,
     isInvalid: error ? true : void 0
-  }));
-  const { fieldProps, labelProps } = datepicker.useTimeField(__spreadValues({}, otherProps), state, timeFieldRef);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps(__spreadValues({}, otherProps), {
-    ref,
-    size,
-    noShrink: true
-  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Context, null, otherProps.label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps(__spreadValues({}, labelProps), {
-    size,
-    necessityIndicator: otherProps.isRequired && necessityIndicator ? "required" : !otherProps.isRequired && necessityIndicator ? "optional" : void 0,
-    contextualHelp
-  }), otherProps.label))), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-    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$a["default"]["sapphire-date-field__input"],
-    ref: timeFieldRef
-  }), state.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(TimeSegment, {
-    key: i,
-    segment,
-    state
-  }))), !noClearButton && !otherProps.isReadOnly && !otherProps.isDisabled && isAnySegmentModified(state.segments) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.IconButton, {
-    "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$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);
+  });
+  const { fieldProps, labelProps } = useTimeField.useTimeField(
+    { ...otherProps },
+    state,
+    timeFieldRef
+  );
+  return /* @__PURE__ */ React.createElement(sapphireReact.Field, { ...otherProps, ref, size, noShrink: true }, /* @__PURE__ */ React.createElement(sapphireReact.Field.Context, null, otherProps.label && /* @__PURE__ */ React.createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React.createElement(
+    sapphireReact.Label,
+    {
+      ...labelProps,
+      size,
+      necessityIndicator: otherProps.isRequired && necessityIndicator ? "required" : !otherProps.isRequired && necessityIndicator ? "optional" : void 0,
+      contextualHelp
+    },
+    otherProps.label
+  ))), /* @__PURE__ */ React.createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(styles$a["sapphire-date-field"], {
+        [styles$a["sapphire-date-field--error"]]: state.isInvalid,
+        [styles$a["sapphire-date-field--no-clear-button"]]: noClearButton,
+        [styles$a["sapphire-date-field--no-calendar"]]: true,
+        [styles$a["sapphire-date-field--md"]]: size === "md"
+      })
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...fieldProps,
+        className: styles$a["sapphire-date-field__input"],
+        ref: timeFieldRef
+      },
+      state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(TimeSegment, { key: i, segment, state }))
+    ),
+    !noClearButton && !otherProps.isReadOnly && !otherProps.isDisabled && isAnySegmentModified(state.segments) && /* @__PURE__ */ React.createElement(
+      sapphireReact.IconButton,
+      {
+        "aria-label": formatMessage("clear"),
+        onPress: () => state.segments.forEach(
+          (segment) => state.clearSegment(segment.type)
+        ),
+        size: size === "md" ? "sm" : "md",
+        UNSAFE_className: clsx(
+          styles$a["sapphire-date-field__button"],
+          styles$a["sapphire-date-field__button--clear"]
+        )
+      },
+      /* @__PURE__ */ React.createElement(sapphireReact.Icon, null, /* @__PURE__ */ React.createElement(react.CloseOutline, null))
+    )
+  )), !!error && typeof error !== "boolean" || note ? /* @__PURE__ */ React.createElement(sapphireReact.Field.Footer, null, !!error && typeof error !== "boolean" ? /* @__PURE__ */ React.createElement(sapphireReact.Field.Note, { variant: "error" }, error) : note ? note : null) : null);
 }
 const TimeField = React.forwardRef(_TimeField);
 
-Object.defineProperty(exports, 'useLocale', {
+Object.defineProperty(exports, "useLocale", {
   enumerable: true,
-  get: function () { return i18n.useLocale; }
+  get: function () { return I18nProvider.useLocale; }
 });
 exports.Accordion = _Accordion;
 exports.AccordionContext = AccordionContext;