@danske/sapphire-react-lab 0.101.2 → 0.102.0

package/build/cjs/index.js

@@ -67,25 +67,25 @@ function useAccordionContext() {
   throw new Error("Accordion context can only be used within Accordion component.");
 }
 
-var __defProp$l = Object.defineProperty;
-var __defProps$k = Object.defineProperties;
-var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
+var __defProp$n = Object.defineProperty;
+var __defProps$m = Object.defineProperties;
+var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
+var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
 const customPaddingStyleProps = (sidePadding) => ({
   paddingLeft: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`,
   paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
@@ -109,7 +109,7 @@ function _AccordionItem(props) {
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     role: "heading",
     "aria-level": props.headerLevel
-  }, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$k(__spreadValues$l({}, utils.mergeProps(buttonProps, focusProps)), {
+  }, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$m(__spreadValues$n({}, utils.mergeProps(buttonProps, focusProps)), {
     "aria-disabled": isDisabled,
     ref,
     className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-header"], styles__default["default"]["js-focus"], {
@@ -122,7 +122,7 @@ function _AccordionItem(props) {
     className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-arrow"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
     size: "lg"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null))))), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$k(__spreadValues$l({}, utils.mergeProps(regionProps, { onKeyDown })), {
+  }, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null))))), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$m(__spreadValues$n({}, utils.mergeProps(regionProps, { onKeyDown })), {
     "aria-hidden": !isOpen,
     className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-content-wrapper"])
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -132,31 +132,31 @@ function _AccordionItem(props) {
 }
 const AccordionItem = collections.Item;
 
-var __defProp$k = Object.defineProperty;
-var __defProps$j = Object.defineProperties;
-var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
-var __hasOwnProp$m = Object.prototype.hasOwnProperty;
-var __propIsEnum$m = 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) => {
+var __defProp$m = Object.defineProperty;
+var __defProps$l = Object.defineProperties;
+var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$m.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
+var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
 function useTreeState(props) {
   const state = tree.useTreeState(props);
   const onToggle = (key) => {
     state.setExpandedKeys(toggleKey(state.expandedKeys, key, props.expansionMode));
   };
-  return __spreadProps$j(__spreadValues$k({}, state), { toggleKey: onToggle });
+  return __spreadProps$l(__spreadValues$m({}, state), { toggleKey: onToggle });
 }
 function toggleKey(set, key, expansionMode = "multiple") {
   const res = new Set(set);
@@ -170,33 +170,33 @@ function toggleKey(set, key, expansionMode = "multiple") {
   return res;
 }
 
-var __defProp$j = Object.defineProperty;
-var __defProps$i = Object.defineProperties;
-var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
+var __defProp$l = Object.defineProperty;
+var __defProps$k = Object.defineProperties;
+var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
-var __objRest$h = (source, exclude) => {
+var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
+var __objRest$k = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
+  if (source != null && __getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -208,7 +208,7 @@ const _Accordion$1 = (_a, ref) => {
     hideLastDivider = false,
     hasNegativeSideMargin = false,
     sidePadding
-  } = _b, props = __objRest$h(_b, [
+  } = _b, props = __objRest$k(_b, [
     "expansionMode",
     "headerLevel",
     "hideLastDivider",
@@ -217,18 +217,18 @@ const _Accordion$1 = (_a, ref) => {
   ]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const state = useTreeState(__spreadProps$i(__spreadValues$j({}, props), { expansionMode }));
+  const state = useTreeState(__spreadProps$k(__spreadValues$l({}, props), { expansionMode }));
   const forwardedRef = utils.useObjectRef(ref);
   const { accordionProps } = accordion.useAccordion(props, state, forwardedRef);
   return /* @__PURE__ */ React__default["default"].createElement(AccordionContext.Provider, {
     value: { sidePadding }
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$i(__spreadValues$j({}, utils.mergeProps(accordionProps, utils.filterDOMProps(props, { labelable: true }))), {
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$k(__spreadValues$l({}, utils.mergeProps(accordionProps, utils.filterDOMProps(props, { global: true, labelable: true }))), {
     ref: forwardedRef,
     className: clsx__default["default"](styles__default["default"]["sapphire-accordion"], {
       [styles__default["default"]["sapphire-accordion--without-last-divider"]]: hideLastDivider,
       [styles__default["default"]["sapphire-accordion--negative-margin-self"]]: !sapphireReact.withTruthyZero(sidePadding) && hasNegativeSideMargin
     }, styleProps.className),
-    style: __spreadValues$j(__spreadValues$j({}, sapphireReact.withTruthyZero(sidePadding) && hasNegativeSideMargin ? {
+    style: __spreadValues$l(__spreadValues$l({}, 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)
@@ -241,33 +241,33 @@ const _Accordion$1 = (_a, ref) => {
 };
 const Accordion = React.forwardRef(_Accordion$1);
 
-var __defProp$i = Object.defineProperty;
-var __defProps$h = Object.defineProperties;
-var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
+var __defProp$k = Object.defineProperty;
+var __defProps$j = Object.defineProperties;
+var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
-var __objRest$g = (source, exclude) => {
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
+var __objRest$j = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
+  if (source != null && __getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -275,10 +275,10 @@ var __objRest$g = (source, exclude) => {
 const AccordionHeading = (_a) => {
   var _b = _a, {
     children
-  } = _b, props = __objRest$g(_b, [
+  } = _b, props = __objRest$j(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$h(__spreadValues$i({}, utils.filterDOMProps(props)), {
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$j(__spreadValues$k({}, utils.filterDOMProps(props, { global: true })), {
     className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-heading"])
   }), children);
 };
@@ -288,17 +288,33 @@ const _Accordion = Object.assign(Accordion, {
   Item: AccordionItem
 });
 
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __objRest$f = (source, exclude) => {
+var __defProp$j = Object.defineProperty;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$j = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __objRest$i = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
+  if (source != null && __getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -308,7 +324,7 @@ function Alert(_a) {
     children,
     title,
     variant = "info"
-  } = _b, props = __objRest$f(_b, [
+  } = _b, props = __objRest$i(_b, [
     "children",
     "title",
     "variant"
@@ -329,7 +345,7 @@ function Alert(_a) {
         return /* @__PURE__ */ React__default["default"].createElement(react.Information, null);
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$i(__spreadValues$j({}, 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",
@@ -337,7 +353,7 @@ function Alert(_a) {
     }, className),
     style,
     role: "alert"
-  }, /* @__PURE__ */ React__default["default"].createElement("span", {
+  }), /* @__PURE__ */ React__default["default"].createElement("span", {
     className: alertStyles__default["default"]["sapphire-alert__icon"]
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
     size: "sm"
@@ -392,36 +408,54 @@ var intlMessages$3 = {
   "sv-SE": se$3
 };
 
-var __defProp$h = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
+var __defProp$i = Object.defineProperty;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$i.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(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 Autocomplete(props) {
-  var _a;
+  var _b;
   sapphireReact.useThemeCheck();
   const formatMessage = i18n.useMessageFormatter(intlMessages$3);
-  const {
+  const _a = props, {
     inputValue,
     renderInput,
     loadingState,
     loadingSkeletonRowsCount,
     listboxAriaLabel
-  } = props;
+  } = _a, otherProps = __objRest$h(_a, [
+    "inputValue",
+    "renderInput",
+    "loadingState",
+    "loadingSkeletonRowsCount",
+    "listboxAriaLabel"
+  ]);
   const {
     styleProps: { style, className }
   } = sapphireReact.useSapphireStyleProps(props);
@@ -429,19 +463,19 @@ function Autocomplete(props) {
   const listBoxRef = utils$1.useFocusableRef(null);
   const popoverRef = React.useRef(null);
   const triggerRef = utils$1.useFocusableRef(null);
-  const state = sapphireReact.useComboBoxState(__spreadProps$g(__spreadValues$h({}, props), {
+  const state = sapphireReact.useComboBoxState(__spreadProps$h(__spreadValues$i({}, props), {
     inputValue,
     allowsEmptyCollection: loadingState === "loading",
     allowsCustomValue: true,
     shouldCloseOnBlur: true
   }));
-  const { inputProps, listBoxProps } = combobox.useComboBox(__spreadProps$g(__spreadValues$h({}, props), {
+  const { inputProps, listBoxProps } = combobox.useComboBox(__spreadProps$h(__spreadValues$i({}, props), {
     "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
     inputRef,
     listBoxRef,
     popoverRef
   }), state);
-  const inputElement = renderInput(__spreadProps$g(__spreadValues$h({}, inputProps), {
+  const inputElement = renderInput(__spreadProps$h(__spreadValues$i({}, inputProps), {
     isDisabled: props.isDisabled,
     inputRef,
     "aria-haspopup": "listbox",
@@ -454,11 +488,12 @@ function Autocomplete(props) {
       });
     }
   }));
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    ref: triggerRef,
-    style: __spreadValues$h({ display: "inline-flex" }, style),
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$h(__spreadValues$i({
+    ref: triggerRef
+  }, utils.filterDOMProps(otherProps, { global: true })), {
+    style: __spreadValues$i({ display: "inline-flex" }, style),
     className
-  }, inputElement, state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ListBoxPopover, {
+  }), inputElement, state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ListBoxPopover, {
     state,
     triggerRef,
     popoverRef,
@@ -466,39 +501,39 @@ function Autocomplete(props) {
     listBoxProps,
     loadingState,
     loadingSkeletonRowsCount,
-    selectWidth: (_a = triggerRef.current) == null ? void 0 : _a.offsetWidth,
+    selectWidth: (_b = triggerRef.current) == null ? void 0 : _b.offsetWidth,
     disableSelectedStyles: true,
     isNonModal: true
   }, props.children || []));
 }
 
-var __defProp$g = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
+var __defProp$h = Object.defineProperty;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$h.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-var __objRest$e = (source, exclude) => {
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
+  if (source != null && __getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -509,7 +544,7 @@ const Breadcrumbs = (_a) => {
     size = "md",
     children,
     maxWidth
-  } = _b, props = __objRest$e(_b, [
+  } = _b, props = __objRest$g(_b, [
     "size",
     "children",
     "maxWidth"
@@ -522,11 +557,11 @@ const Breadcrumbs = (_a) => {
     value: { size }
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     ref: containerRef,
-    style: __spreadProps$f(__spreadValues$g({}, styleProps.style), {
+    style: __spreadProps$g(__spreadValues$h({}, styleProps.style), {
       maxWidth,
       display: "flex"
     })
-  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Breadcrumbs, __spreadProps$f(__spreadValues$g({}, props), {
+  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Breadcrumbs, __spreadProps$g(__spreadValues$h({}, props), {
     ref: breadcrumbRef,
     className: clsx__default["default"](styles__default$1["default"]["sapphire-breadcrumbs"], {
       [styles__default$1["default"]["sapphire-breadcrumbs--sm"]]: size === "sm",
@@ -546,30 +581,30 @@ const BreadcrumbsSeparator = () => {
   }, /* @__PURE__ */ React__default["default"].createElement(react.ChevronRight, null)));
 };
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
+var __defProp$g = Object.defineProperty;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$d = (source, exclude) => {
+var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
+  if (source != null && __getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -581,7 +616,7 @@ const BreadcrumbItem = (_a) => {
   var _b = _a, {
     children,
     isDisabled: individualDisabled = false
-  } = _b, props = __objRest$d(_b, [
+  } = _b, props = __objRest$f(_b, [
     "children",
     "isDisabled"
   ]);
@@ -590,7 +625,7 @@ const BreadcrumbItem = (_a) => {
   const { size } = React.useContext(BreadcrumbsContext);
   return /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Breadcrumb, {
     className: clsx__default["default"](styles__default$1["default"]["sapphire-breadcrumbs__item"]),
-    style: __spreadValues$f({}, styleProps.style)
+    style: __spreadValues$g({}, styleProps.style)
   }, ({ isCurrent, isDisabled }) => /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemContext.Provider, {
     value: { isDisabled: isDisabled || individualDisabled }
   }, isCurrent ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
@@ -600,23 +635,23 @@ const BreadcrumbItem = (_a) => {
   }, children) : children, !isCurrent && /* @__PURE__ */ React__default["default"].createElement(BreadcrumbsSeparator, null)));
 };
 
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __objRest$c = (source, exclude) => {
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$g.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))
+  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 BreadcrumbItemStatic = React.forwardRef(function BreadcrumbItemStatic2(_a, ref) {
-  var _b = _a, { size } = _b, props = __objRest$c(_b, ["size"]);
+  var _b = _a, { size } = _b, props = __objRest$e(_b, ["size"]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
   return /* @__PURE__ */ React__default["default"].createElement("span", {
@@ -629,49 +664,49 @@ const BreadcrumbItemStatic = React.forwardRef(function BreadcrumbItemStatic2(_a,
   }, props.children);
 });
 
-var __defProp$e = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
+var __defProp$f = Object.defineProperty;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = 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$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    if (__hasOwnProp$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$b = (source, exclude) => {
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
+  if (source != null && __getOwnPropSymbols$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 BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2(_a, ref) {
-  var _b = _a, { children } = _b, props = __objRest$b(_b, ["children"]);
+  var _b = _a, { children } = _b, props = __objRest$d(_b, ["children"]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
   const { size } = React.useContext(BreadcrumbsContext);
   const { isDisabled } = React.useContext(BreadcrumbItemContext);
   if (!props.href) {
-    return /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemStatic, __spreadProps$e(__spreadValues$e({}, props), {
+    return /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemStatic, __spreadProps$f(__spreadValues$f({}, props), {
       size
     }), children);
   }
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$e(__spreadValues$e(__spreadValues$e({}, props), styleProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$f(__spreadValues$f(__spreadValues$f({}, props), styleProps), {
     ref,
     size,
     variant: "tertiary",
@@ -680,39 +715,39 @@ const BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2(_a, ref
 });
 BreadcrumbItemLink.displayName = "BreadcrumbItemLink";
 
-var __defProp$d = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __defProp$e = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$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$a = (source, exclude) => {
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
+  if (source != null && __getOwnPropSymbols$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 HiddenFileInput = React__default["default"].forwardRef(function InputWrapper(props, ref) {
-  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$d(__spreadValues$d({}, props), {
+  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$e(__spreadValues$e({}, props), {
     ref,
     type: "file",
     style: { display: "none" }
@@ -725,7 +760,7 @@ const FileTrigger = React__default["default"].forwardRef(function FileTriggerWra
     onSelect = () => null,
     children,
     isDisabled = false
-  } = _a, rest = __objRest$a(_a, [
+  } = _a, rest = __objRest$c(_a, [
     "acceptedFileTypes",
     "allowsMultiple",
     "onSelect",
@@ -733,7 +768,7 @@ const FileTrigger = React__default["default"].forwardRef(function FileTriggerWra
     "isDisabled"
   ]);
   const inputRef = utils.useObjectRef(ref);
-  const domProps = utils.filterDOMProps(rest);
+  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: () => {
@@ -743,7 +778,7 @@ const FileTrigger = React__default["default"].forwardRef(function FileTriggerWra
       }
       (_a2 = inputRef.current) == null ? void 0 : _a2.click();
     }
-  }, children), /* @__PURE__ */ React__default["default"].createElement(HiddenFileInput, __spreadProps$d(__spreadValues$d({}, domProps), {
+  }, children), /* @__PURE__ */ React__default["default"].createElement(HiddenFileInput, __spreadProps$e(__spreadValues$e({}, domProps), {
     disabled: isDisabled,
     ref: inputRef,
     accept: acceptedFileTypes == null ? void 0 : acceptedFileTypes.toString(),
@@ -822,27 +857,39 @@ var intlMessages$2 = {
   "sv-SE": se$2
 };
 
-var __defProp$c = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$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 __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(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 FileDropzone = React__default["default"].forwardRef(function DropzoneWrapper(props, forwardedRef) {
-  const {
+  const _a = props, {
     isDisabled = false,
     hasError,
     renderInstruction,
@@ -851,14 +898,23 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
     allowsMultiple,
     onDrop = () => null,
     getDropOperation = () => "copy"
-  } = props;
+  } = _a, otherProps = __objRest$b(_a, [
+    "isDisabled",
+    "hasError",
+    "renderInstruction",
+    "onFileSelectOpen",
+    "acceptedFileTypes",
+    "allowsMultiple",
+    "onDrop",
+    "getDropOperation"
+  ]);
   const id = utils.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 { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { dropProps, isDropTarget: isDropping } = dnd.useDrop(__spreadProps$c(__spreadValues$c({}, props), {
+  const { dropProps, isDropTarget: isDropping } = dnd.useDrop(__spreadProps$d(__spreadValues$d({}, props), {
     ref: pressableRef,
     hasDropButton: true,
     isDisabled,
@@ -894,8 +950,8 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
   }, /* @__PURE__ */ React__default["default"].createElement(interactions.Pressable, {
     ref: pressableRef,
     onPress: onFileSelectOpen
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$c(__spreadValues$c({}, utils.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps)), {
-    style: __spreadValues$c({}, styleProps.style),
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$d(__spreadValues$d(__spreadValues$d({}, utils.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps)), utils.filterDOMProps(otherProps, { global: true })), {
+    style: __spreadValues$d({}, styleProps.style),
     className: clsx__default["default"](styles__default$2["default"]["sapphire-dropzone"], styles__default$2["default"]["js-focus"], styles__default$2["default"]["js-hover"], {
       [styles__default$2["default"]["is-hover"]]: isHovered && !isDropping,
       [styles__default$2["default"]["is-active"]]: isPressed,
@@ -926,34 +982,83 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
   }, renderInstruction(isDropping)))))));
 });
 
-function FilterDropdown({
-  children,
-  label,
-  value,
-  isDisabled = false,
-  isApplyDisabled = false,
-  isClearDisabled,
-  isOpen: isOpenProp,
-  applyButtonLabel = "Apply",
-  clearButtonLabel = "Clear",
-  defaultOpen = false,
-  hasApplyButton = false,
-  noMaxWidth,
-  onApply,
-  onClear,
-  onOpenChange,
-  buttonSize = "md"
-}) {
+var __defProp$c = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
+  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$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(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;
+};
+function FilterDropdown(_a) {
+  var _b = _a, {
+    children,
+    label,
+    value,
+    isDisabled = false,
+    isApplyDisabled = false,
+    isClearDisabled,
+    isOpen: isOpenProp,
+    applyButtonLabel = "Apply",
+    clearButtonLabel = "Clear",
+    defaultOpen = false,
+    hasApplyButton = false,
+    noMaxWidth,
+    onApply,
+    onClear,
+    onOpenChange,
+    buttonSize = "md"
+  } = _b, props = __objRest$a(_b, [
+    "children",
+    "label",
+    "value",
+    "isDisabled",
+    "isApplyDisabled",
+    "isClearDisabled",
+    "isOpen",
+    "applyButtonLabel",
+    "clearButtonLabel",
+    "defaultOpen",
+    "hasApplyButton",
+    "noMaxWidth",
+    "onApply",
+    "onClear",
+    "onOpenChange",
+    "buttonSize"
+  ]);
   const triggerRef = React.useRef(null);
   const [isOpen, setIsOpen] = utils$2.useControlledState(isOpenProp, defaultOpen, utils.useEffectEvent(onOpenChange));
   const hasValue = value != null && value !== "";
   const close = () => setIsOpen(false);
   const onSubmit = (e) => {
-    var _a;
+    var _a2;
     e.preventDefault();
     onApply == null ? void 0 : onApply();
     close();
-    (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
   };
   const applyButton = /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
     type: "submit",
@@ -968,10 +1073,10 @@ function FilterDropdown({
     onOpenChange: setIsOpen,
     noMaxWidth,
     noPadding: true,
-    popoverContent: /* @__PURE__ */ React__default["default"].createElement("form", {
+    popoverContent: /* @__PURE__ */ React__default["default"].createElement("form", __spreadProps$c(__spreadValues$c({}, utils.filterDOMProps(props, { global: true })), {
       onSubmit,
       className: styles__default$3["default"]["sapphire-filter-dropdown"]
-    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    }), /* @__PURE__ */ React__default["default"].createElement("div", {
       className: styles__default$3["default"]["sapphire-filter-dropdown__body"]
     }, children), /* @__PURE__ */ React__default["default"].createElement("div", {
       className: styles__default$3["default"]["sapphire-filter-dropdown__footer"]
@@ -1270,7 +1375,7 @@ const StepperButton = (_a) => {
   const ref = React.useRef(null);
   const { buttonProps, isPressed } = sapphireReact.useButton(props, ref);
   const { hoverProps, isHovered } = interactions.useHover({ isDisabled: props.isDisabled });
-  return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$8(__spreadValues$8({}, utils.mergeProps(buttonProps, hoverProps, utils.filterDOMProps(props))), {
+  return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$8(__spreadValues$8({}, utils.mergeProps(buttonProps, hoverProps, utils.filterDOMProps(props, { global: true }))), {
     ref,
     className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__stepper-button"], textFieldStyles__default["default"]["js-hover"], {
       [textFieldStyles__default["default"]["is-active"]]: isPressed,
@@ -1510,9 +1615,9 @@ const ProgressIndicator = (props) => {
   const minValue = 0;
   const value = Math.min(Math.max(realValue, minValue), maxValue);
   const widthPercentage = value / maxValue * 100;
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$5(__spreadValues$5({}, utils.filterDOMProps(props, { global: true })), {
     className: clsx__default["default"](styles__default$5["default"]["sapphire-progress"])
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$5(__spreadValues$5({}, progressBarProps), {
+  }), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$5(__spreadValues$5({}, progressBarProps), {
     className: styles__default$5["default"]["sapphire-progress--indicator"],
     style: __spreadProps$5(__spreadValues$5({}, styleProps), { width: `${widthPercentage}%` }),
     "aria-label": "aria-label" in props ? props["aria-label"] : void 0,