@danske/sapphire-react-lab 0.100.0 → 0.101.0

package/build/cjs/index.js

@@ -3,38 +3,39 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var visuallyHidden = require('@react-aria/visually-hidden');
-var utils$1 = require('@react-aria/utils');
-var utils = require('@react-stately/utils');
-var sapphireReact = require('@danske/sapphire-react');
-var react = require('@danske/sapphire-icons/react');
-var styles = require('@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css');
 var clsx = require('clsx');
 var accordion = require('@react-aria/accordion');
-var styles$1 = require('@danske/sapphire-css/components/accordion/accordion.module.css');
+var utils = require('@react-aria/utils');
+var styles = require('@danske/sapphire-css/components/accordion/accordion.module.css');
+var sapphireReact = require('@danske/sapphire-react');
 var focus = require('@react-aria/focus');
 var collections = require('@react-stately/collections');
+var react = require('@danske/sapphire-icons/react');
 var tree = require('@react-stately/tree');
+var alertStyles = require('@danske/sapphire-css/components/alert/alert.module.css');
+var combobox = require('@react-aria/combobox');
+var i18n = require('@react-aria/i18n');
+var utils$1 = require('@react-spectrum/utils');
+var styles$1 = require('@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css');
+var reactAriaComponents = require('react-aria-components');
 var styles$2 = require('@danske/sapphire-css/components/dropzone/dropzone.module.css');
 var interactions = require('@react-aria/interactions');
 var dnd = require('@react-aria/dnd');
-var i18n = require('@react-aria/i18n');
-var utils$2 = require('@react-spectrum/utils');
-var styles$3 = require('@danske/sapphire-css/components/flag/flag.module.css');
+var visuallyHidden = require('@react-aria/visually-hidden');
+var utils$2 = require('@react-stately/utils');
+var styles$3 = require('@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css');
+var styles$4 = require('@danske/sapphire-css/components/flag/flag.module.css');
+var label = require('@react-aria/label');
 var textFieldStyles = require('@danske/sapphire-css/components/textField/textField.module.css');
 var numberfield$1 = require('@react-aria/numberfield');
 var numberfield = require('@react-stately/numberfield');
-var styles$4 = require('@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css');
+var styles$5 = require('@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css');
 var progress = require('@react-aria/progress');
-var styles$5 = require('@danske/sapphire-css/components/slider/slider.module.css');
-var reactAriaComponents = require('react-aria-components');
-var styles$6 = require('@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css');
+var styles$6 = require('@danske/sapphire-css/components/slider/slider.module.css');
 var tag = require('@react-aria/tag');
 var list = require('@react-stately/list');
 var styles$7 = require('@danske/sapphire-css/components/tag/tag.module.css');
 var button = require('@react-aria/button');
-var label = require('@react-aria/label');
-var alertStyles = require('@danske/sapphire-css/components/alert/alert.module.css');
 var styles$8 = require('@danske/sapphire-css/components/dateField/dateField.module.css');
 var datepicker = require('@react-aria/datepicker');
 var datepicker$1 = require('@react-stately/datepicker');
@@ -42,154 +43,19 @@ 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 styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 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 textFieldStyles__default = /*#__PURE__*/_interopDefaultLegacy(textFieldStyles);
 var styles__default$4 = /*#__PURE__*/_interopDefaultLegacy(styles$4);
+var textFieldStyles__default = /*#__PURE__*/_interopDefaultLegacy(textFieldStyles);
 var styles__default$5 = /*#__PURE__*/_interopDefaultLegacy(styles$5);
 var styles__default$6 = /*#__PURE__*/_interopDefaultLegacy(styles$6);
 var styles__default$7 = /*#__PURE__*/_interopDefaultLegacy(styles$7);
-var alertStyles__default = /*#__PURE__*/_interopDefaultLegacy(alertStyles);
 var styles__default$8 = /*#__PURE__*/_interopDefaultLegacy(styles$8);
 
-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"
-}) {
-  const triggerRef = React.useRef(null);
-  const [isOpen, setIsOpen] = utils.useControlledState(isOpenProp, defaultOpen, utils$1.useEffectEvent(onOpenChange));
-  const hasValue = value != null && value !== "";
-  const close = () => setIsOpen(false);
-  const onSubmit = (e) => {
-    var _a;
-    e.preventDefault();
-    onApply == null ? void 0 : onApply();
-    close();
-    (_a = triggerRef.current) == null ? void 0 : _a.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", {
-      onSubmit,
-      className: styles__default["default"]["sapphire-filter-dropdown"]
-    }, /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: styles__default["default"]["sapphire-filter-dropdown__body"]
-    }, children), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: styles__default["default"]["sapphire-filter-dropdown__footer"]
-    }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ButtonGroup, {
-      align: "right"
-    }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
-      size: buttonSize,
-      variant: "text",
-      onPress: () => {
-        close();
-        onClear == null ? void 0 : onClear();
-      },
-      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));
-}
-
-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$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$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
-var __objRest$g = (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;
-};
-function SearchableSelectFilter(props) {
-  var _b, _c;
-  const _a = props, { searchField, listBox, size = "md" } = _a, otherProps = __objRest$g(_a, ["searchField", "listBox", "size"]);
-  const searchFieldRef = React.useRef(null);
-  const searchFieldProps = searchField.props;
-  const listBoxProps = listBox.props;
-  const [searchQuery, setSearchQuery] = utils.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 hasSelection = listBoxProps.selectedKeys === "all" || Array.from(listBoxProps.selectedKeys || []).length > 0;
-  return /* @__PURE__ */ React__default["default"].createElement(FilterDropdown, __spreadProps$j(__spreadValues$k({}, 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$1.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())
-  })));
-}
-
 const AccordionContext = React__default["default"].createContext({
   sidePadding: void 0
 });
@@ -201,25 +67,25 @@ function useAccordionContext() {
   throw new Error("Accordion context can only be used within Accordion component.");
 }
 
-var __defProp$j = Object.defineProperty;
-var __defProps$i = Object.defineProperties;
-var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
+var __defProp$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) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$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]);
     }
   return a;
 };
-var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
 const customPaddingStyleProps = (sidePadding) => ({
   paddingLeft: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`,
   paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
@@ -236,61 +102,61 @@ function _AccordionItem(props) {
     e.stopPropagation();
   };
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-accordion__item"], {
-      [styles__default$1["default"]["sapphire-accordion__item--open"]]: isOpen,
-      [styles__default$1["default"]["is-disabled"]]: isDisabled
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item"], {
+      [styles__default["default"]["sapphire-accordion__item--open"]]: isOpen,
+      [styles__default["default"]["is-disabled"]]: isDisabled
     })
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     role: "heading",
     "aria-level": props.headerLevel
-  }, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$i(__spreadValues$j({}, utils$1.mergeProps(buttonProps, focusProps)), {
+  }, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$k(__spreadValues$l({}, utils.mergeProps(buttonProps, focusProps)), {
     "aria-disabled": isDisabled,
     ref,
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-accordion__item-header"], styles__default$1["default"]["js-focus"], {
-      [styles__default$1["default"]["is-focus"]]: isFocusVisible
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-header"], styles__default["default"]["js-focus"], {
+      [styles__default["default"]["is-focus"]]: isFocusVisible
     }),
     style: sapphireReact.withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}
   }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Heading, {
     level: 6
   }, item.props.heading), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-accordion__item-arrow"])
+    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$i(__spreadValues$j({}, utils$1.mergeProps(regionProps, { onKeyDown })), {
+  }, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null))))), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$k(__spreadValues$l({}, utils.mergeProps(regionProps, { onKeyDown })), {
     "aria-hidden": !isOpen,
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-accordion__item-content-wrapper"])
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-content-wrapper"])
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-accordion__item-content"]),
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-content"]),
     style: sapphireReact.withTruthyZero(sidePadding) ? customPaddingStyleProps(sidePadding) : {}
   }, item.props.children)));
 }
 const AccordionItem = collections.Item;
 
-var __defProp$i = Object.defineProperty;
-var __defProps$h = Object.defineProperties;
-var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
+var __defProp$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) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    if (__hasOwnProp$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]);
     }
   return a;
 };
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
 function useTreeState(props) {
   const state = tree.useTreeState(props);
   const onToggle = (key) => {
     state.setExpandedKeys(toggleKey(state.expandedKeys, key, props.expansionMode));
   };
-  return __spreadProps$h(__spreadValues$i({}, state), { toggleKey: onToggle });
+  return __spreadProps$j(__spreadValues$k({}, state), { toggleKey: onToggle });
 }
 function toggleKey(set, key, expansionMode = "multiple") {
   const res = new Set(set);
@@ -304,33 +170,33 @@ function toggleKey(set, key, expansionMode = "multiple") {
   return res;
 }
 
-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$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) => {
   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$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]);
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
-var __objRest$f = (source, exclude) => {
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __objRest$h = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$i.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$i)
-    for (var prop of __getOwnPropSymbols$i(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.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;
@@ -342,7 +208,7 @@ const _Accordion$1 = (_a, ref) => {
     hideLastDivider = false,
     hasNegativeSideMargin = false,
     sidePadding
-  } = _b, props = __objRest$f(_b, [
+  } = _b, props = __objRest$h(_b, [
     "expansionMode",
     "headerLevel",
     "hideLastDivider",
@@ -351,18 +217,18 @@ const _Accordion$1 = (_a, ref) => {
   ]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const state = useTreeState(__spreadProps$g(__spreadValues$h({}, props), { expansionMode }));
-  const forwardedRef = utils$1.useObjectRef(ref);
+  const state = useTreeState(__spreadProps$i(__spreadValues$j({}, 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$g(__spreadValues$h({}, utils$1.mergeProps(accordionProps, utils$1.filterDOMProps(props, { labelable: true }))), {
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$i(__spreadValues$j({}, utils.mergeProps(accordionProps, utils.filterDOMProps(props, { labelable: true }))), {
     ref: forwardedRef,
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-accordion"], {
-      [styles__default$1["default"]["sapphire-accordion--without-last-divider"]]: hideLastDivider,
-      [styles__default$1["default"]["sapphire-accordion--negative-margin-self"]]: !sapphireReact.withTruthyZero(sidePadding) && hasNegativeSideMargin
+    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$h(__spreadValues$h({}, sapphireReact.withTruthyZero(sidePadding) && hasNegativeSideMargin ? {
+    style: __spreadValues$j(__spreadValues$j({}, 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)
@@ -375,33 +241,33 @@ const _Accordion$1 = (_a, ref) => {
 };
 const Accordion = React.forwardRef(_Accordion$1);
 
-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$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) => {
   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$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]);
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-var __objRest$e = (source, exclude) => {
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$h.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$h)
-    for (var prop of __getOwnPropSymbols$h(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.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;
@@ -409,11 +275,11 @@ var __objRest$e = (source, exclude) => {
 const AccordionHeading = (_a) => {
   var _b = _a, {
     children
-  } = _b, props = __objRest$e(_b, [
+  } = _b, props = __objRest$g(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$f(__spreadValues$g({}, utils$1.filterDOMProps(props)), {
-    className: clsx__default["default"](styles__default$1["default"]["sapphire-accordion__item-heading"])
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$h(__spreadValues$i({}, utils.filterDOMProps(props)), {
+    className: clsx__default["default"](styles__default["default"]["sapphire-accordion__item-heading"])
   }), children);
 };
 
@@ -422,9 +288,265 @@ const _Accordion = Object.assign(Accordion, {
   Item: AccordionItem
 });
 
-var __defProp$f = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __objRest$f = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function Alert(_a) {
+  var _b = _a, {
+    children,
+    title,
+    variant = "info"
+  } = _b, props = __objRest$f(_b, [
+    "children",
+    "title",
+    "variant"
+  ]);
+  sapphireReact.useThemeCheck();
+  const {
+    styleProps: { style, className }
+  } = sapphireReact.useSapphireStyleProps(props);
+  const getIcon = (variant2) => {
+    switch (variant2) {
+      case "warning":
+        return /* @__PURE__ */ React__default["default"].createElement(react.Warning, null);
+      case "positive":
+        return /* @__PURE__ */ React__default["default"].createElement(react.CheckmarkOutline, null);
+      case "negative":
+        return /* @__PURE__ */ React__default["default"].createElement(react.Error, null);
+      default:
+        return /* @__PURE__ */ React__default["default"].createElement(react.Information, null);
+    }
+  };
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    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)));
+}
+
+var da$3 = {
+	"listbox-suggestions": "Forslag"
+};
+
+var en$3 = {
+	"listbox-suggestions": "Suggestions"
+};
+
+var de$3 = {
+	"listbox-suggestions": "Vorschläge"
+};
+
+var fi$3 = {
+	"listbox-suggestions": "Ehdotukset"
+};
+
+var no$3 = {
+	"listbox-suggestions": "Forslag"
+};
+
+var pl$3 = {
+	"listbox-suggestions": "Sugestie"
+};
+
+var se$3 = {
+	"listbox-suggestions": "Förslag"
+};
+
+var intlMessages$3 = {
+  "da-DK": da$3,
+  "en-US": en$3,
+  "de-DE": de$3,
+  "fi-FI": fi$3,
+  "nb-NO": no$3,
+  "pl-PL": pl$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) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+function Autocomplete(props) {
+  var _a;
+  sapphireReact.useThemeCheck();
+  const formatMessage = i18n.useMessageFormatter(intlMessages$3);
+  const {
+    inputValue,
+    renderInput,
+    loadingState,
+    loadingSkeletonRowsCount,
+    listboxAriaLabel
+  } = props;
+  const {
+    styleProps: { style, className }
+  } = sapphireReact.useSapphireStyleProps(props);
+  const inputRef = React.useRef(null);
+  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), {
+    inputValue,
+    allowsEmptyCollection: loadingState === "loading",
+    allowsCustomValue: true,
+    shouldCloseOnBlur: true
+  }));
+  const { inputProps, listBoxProps } = combobox.useComboBox(__spreadProps$g(__spreadValues$h({}, props), {
+    "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
+    inputRef,
+    listBoxRef,
+    popoverRef
+  }), state);
+  const inputElement = renderInput(__spreadProps$g(__spreadValues$h({}, 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, {
+        target: { value },
+        currentTarget: { value }
+      });
+    }
+  }));
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    ref: triggerRef,
+    style: __spreadValues$h({ display: "inline-flex" }, style),
+    className
+  }, inputElement, state.isOpen && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ListBoxPopover, {
+    state,
+    triggerRef,
+    popoverRef,
+    listBoxRef,
+    listBoxProps,
+    loadingState,
+    loadingSkeletonRowsCount,
+    selectWidth: (_a = triggerRef.current) == null ? void 0 : _a.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) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __objRest$e = (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;
+};
+const BreadcrumbsContext = React.createContext({ size: "md" });
+const Breadcrumbs = (_a) => {
+  var _b = _a, {
+    size = "md",
+    children,
+    maxWidth
+  } = _b, props = __objRest$e(_b, [
+    "size",
+    "children",
+    "maxWidth"
+  ]);
+  sapphireReact.useThemeCheck();
+  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
+  const containerRef = React.useRef(null);
+  const breadcrumbRef = React.useRef(null);
+  return /* @__PURE__ */ React__default["default"].createElement(BreadcrumbsContext.Provider, {
+    value: { size }
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    ref: containerRef,
+    style: __spreadProps$f(__spreadValues$g({}, styleProps.style), {
+      maxWidth,
+      display: "flex"
+    })
+  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Breadcrumbs, __spreadProps$f(__spreadValues$g({}, props), {
+    ref: breadcrumbRef,
+    className: clsx__default["default"](styles__default$1["default"]["sapphire-breadcrumbs"], {
+      [styles__default$1["default"]["sapphire-breadcrumbs--sm"]]: size === "sm",
+      [styles__default$1["default"]["sapphire-breadcrumbs--lg"]]: size === "lg"
+    })
+  }), children)));
+};
+
+const BreadcrumbsSeparator = () => {
+  const { size } = React.useContext(BreadcrumbsContext);
+  const iconSize = size === "lg" ? "md" : "sm";
+  return /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: clsx__default["default"](styles__default$1["default"]["sapphire-breadcrumbs__separator"]),
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
+    size: iconSize
+  }, /* @__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;
@@ -440,7 +562,6 @@ var __spreadValues$f = (a, b) => {
     }
   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)
@@ -453,8 +574,145 @@ var __objRest$d = (source, exclude) => {
     }
   return target;
 };
+const BreadcrumbItemContext = React.createContext({
+  isDisabled: false
+});
+const BreadcrumbItem = (_a) => {
+  var _b = _a, {
+    children,
+    isDisabled: individualDisabled = false
+  } = _b, props = __objRest$d(_b, [
+    "children",
+    "isDisabled"
+  ]);
+  sapphireReact.useThemeCheck();
+  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
+  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)
+  }, ({ isCurrent, isDisabled }) => /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemContext.Provider, {
+    value: { isDisabled: isDisabled || individualDisabled }
+  }, isCurrent ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
+    elementType: "span",
+    isSemibold: true,
+    size: size === "lg" ? "md" : size === "md" ? "sm" : "xs"
+  }, 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 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 BreadcrumbItemStatic = React.forwardRef(function BreadcrumbItemStatic2(_a, ref) {
+  var _b = _a, { size } = _b, props = __objRest$c(_b, ["size"]);
+  sapphireReact.useThemeCheck();
+  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
+  return /* @__PURE__ */ React__default["default"].createElement("span", {
+    ref,
+    className: clsx__default["default"](styles__default$1["default"]["sapphire-breadcrumbs__item--static"], {
+      [styles__default$1["default"]["sapphire-breadcrumbs__item--static--sm"]]: size === "sm",
+      [styles__default$1["default"]["sapphire-breadcrumbs__item--static--lg"]]: size === "lg"
+    }, styleProps.className),
+    style: styleProps.style
+  }, props.children);
+});
+
+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$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$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __objRest$b = (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 BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2(_a, ref) {
+  var _b = _a, { children } = _b, props = __objRest$b(_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), {
+      size
+    }), children);
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$e(__spreadValues$e(__spreadValues$e({}, props), styleProps), {
+    ref,
+    size,
+    variant: "tertiary",
+    isDisabled
+  }), children);
+});
+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) => {
+  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$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+var __objRest$a = (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 HiddenFileInput = React__default["default"].forwardRef(function InputWrapper(props, ref) {
-  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$e(__spreadValues$f({}, props), {
+  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$d(__spreadValues$d({}, props), {
     ref,
     type: "file",
     style: { display: "none" }
@@ -467,15 +725,15 @@ const FileTrigger = React__default["default"].forwardRef(function FileTriggerWra
     onSelect = () => null,
     children,
     isDisabled = false
-  } = _a, rest = __objRest$d(_a, [
+  } = _a, rest = __objRest$a(_a, [
     "acceptedFileTypes",
     "allowsMultiple",
     "onSelect",
     "children",
     "isDisabled"
   ]);
-  const inputRef = utils$1.useObjectRef(ref);
-  const domProps = utils$1.filterDOMProps(rest);
+  const inputRef = utils.useObjectRef(ref);
+  const domProps = utils.filterDOMProps(rest);
   return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(interactions.PressResponder, {
     isDisabled,
     onPress: () => {
@@ -485,7 +743,7 @@ const FileTrigger = React__default["default"].forwardRef(function FileTriggerWra
       }
       (_a2 = inputRef.current) == null ? void 0 : _a2.click();
     }
-  }, children), /* @__PURE__ */ React__default["default"].createElement(HiddenFileInput, __spreadProps$e(__spreadValues$f({}, domProps), {
+  }, children), /* @__PURE__ */ React__default["default"].createElement(HiddenFileInput, __spreadProps$d(__spreadValues$d({}, domProps), {
     disabled: isDisabled,
     ref: inputRef,
     accept: acceptedFileTypes == null ? void 0 : acceptedFileTypes.toString(),
@@ -564,25 +822,25 @@ var intlMessages$2 = {
   "sv-SE": se$2
 };
 
-var __defProp$e = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$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$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$f.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    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$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapper(props, forwardedRef) {
   const {
     isDisabled = false,
@@ -594,13 +852,13 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
     onDrop = () => null,
     getDropOperation = () => "copy"
   } = props;
-  const id = utils$1.useId();
+  const id = utils.useId();
   const paragraphId = props["aria-label"] ? void 0 : id;
   const format = i18n.useMessageFormatter(intlMessages$2);
-  const pressableRef = utils$1.useObjectRef(forwardedRef);
+  const pressableRef = utils.useObjectRef(forwardedRef);
   const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { dropProps, isDropTarget: isDropping } = dnd.useDrop(__spreadProps$d(__spreadValues$e({}, props), {
+  const { dropProps, isDropTarget: isDropping } = dnd.useDrop(__spreadProps$c(__spreadValues$c({}, props), {
     ref: pressableRef,
     hasDropButton: true,
     isDisabled,
@@ -636,8 +894,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$d(__spreadValues$e({}, utils$1.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps)), {
-    style: __spreadValues$e({}, styleProps.style),
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$c(__spreadValues$c({}, utils.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps)), {
+    style: __spreadValues$c({}, 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,
@@ -668,57 +926,249 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
   }, renderInstruction(isDropping)))))));
 });
 
-var __defProp$d = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$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) => {
+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"
+}) {
+  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;
+    e.preventDefault();
+    onApply == null ? void 0 : onApply();
+    close();
+    (_a = triggerRef.current) == null ? void 0 : _a.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", {
+      onSubmit,
+      className: styles__default$3["default"]["sapphire-filter-dropdown"]
+    }, /* @__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"]
+    }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.ButtonGroup, {
+      align: "right"
+    }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, {
+      size: buttonSize,
+      variant: "text",
+      onPress: () => {
+        close();
+        onClear == null ? void 0 : onClear();
+      },
+      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));
+}
+
+var __defProp$b = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    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$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$c = (source, exclude) => {
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$b.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$b)
+    for (var prop of __getOwnPropSymbols$b(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function SearchableSelectFilter(props) {
+  var _b, _c;
+  const _a = props, { searchField, listBox, size = "md" } = _a, otherProps = __objRest$9(_a, ["searchField", "listBox", "size"]);
+  const 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 hasSelection = listBoxProps.selectedKeys === "all" || Array.from(listBoxProps.selectedKeys || []).length > 0;
+  return /* @__PURE__ */ React__default["default"].createElement(FilterDropdown, __spreadProps$b(__spreadValues$b({}, 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())
+  })));
+}
+
+var __defProp$a = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
+  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$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __objRest$8 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Flag = React__default["default"].forwardRef(function Flag2(_a, ref) {
-  var _b = _a, { size = "lg", rounded, "aria-label": ariaLabel } = _b, props = __objRest$c(_b, ["size", "rounded", "aria-label"]);
+  var _b = _a, { size = "lg", rounded, "aria-label": ariaLabel } = _b, props = __objRest$8(_b, ["size", "rounded", "aria-label"]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  return React__default["default"].cloneElement(utils$2.getWrappedElement(props.children), __spreadProps$c(__spreadValues$d({
+  return React__default["default"].cloneElement(utils$1.getWrappedElement(props.children), __spreadProps$a(__spreadValues$a({
     ref,
     role: "img"
   }, ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": true }), {
-    className: clsx__default["default"](styles__default$3["default"]["sapphire-flag"], styleProps.className, {
-      [styles__default$3["default"]["sapphire-flag--xs"]]: size === "xs",
-      [styles__default$3["default"]["sapphire-flag--sm"]]: size === "sm",
-      [styles__default$3["default"]["sapphire-flag--md"]]: size === "md",
-      [styles__default$3["default"]["sapphire-flag--lg"]]: size === "lg",
-      [styles__default$3["default"]["sapphire-flag--xl"]]: size === "xl",
-      [styles__default$3["default"]["sapphire-flag--rounded"]]: rounded
+    className: clsx__default["default"](styles__default$4["default"]["sapphire-flag"], styleProps.className, {
+      [styles__default$4["default"]["sapphire-flag--xs"]]: size === "xs",
+      [styles__default$4["default"]["sapphire-flag--sm"]]: size === "sm",
+      [styles__default$4["default"]["sapphire-flag--md"]]: size === "md",
+      [styles__default$4["default"]["sapphire-flag--lg"]]: size === "lg",
+      [styles__default$4["default"]["sapphire-flag--xl"]]: size === "xl",
+      [styles__default$4["default"]["sapphire-flag--rounded"]]: rounded
     }),
     style: styleProps.style
   }));
 });
 
+var __defProp$9 = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+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$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(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;
+};
+function LabeledValue(_a) {
+  var _b = _a, {
+    children,
+    contextualHelp,
+    label: label$1,
+    labelPlacement = "above",
+    size = "lg"
+  } = _b, otherProps = __objRest$7(_b, [
+    "children",
+    "contextualHelp",
+    "label",
+    "labelPlacement",
+    "size"
+  ]);
+  sapphireReact.useThemeCheck();
+  const { fieldProps } = label.useField({ label: label$1 });
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$9(__spreadValues$9({}, utils.mergeProps(fieldProps, otherProps)), {
+    labelPlacement,
+    size,
+    noDefaultWidth: true
+  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, {
+    contextualHelp,
+    size
+  }, label$1)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, children));
+}
+
 var increment$6 = "øge";
 var decrement$6 = "formindske";
 var da$1 = {
@@ -778,33 +1228,33 @@ var intlMessages$1 = {
   "sv-SE": se$1
 };
 
-var __defProp$c = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$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$8 = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+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$d.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    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$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __objRest$b = (source, exclude) => {
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$8.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$8)
+    for (var prop of __getOwnPropSymbols$8(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -813,14 +1263,14 @@ const StepperButton = (_a) => {
   var _b = _a, {
     variant,
     size
-  } = _b, props = __objRest$b(_b, [
+  } = _b, props = __objRest$6(_b, [
     "variant",
     "size"
   ]);
   const ref = React.useRef(null);
   const { buttonProps, isPressed } = sapphireReact.useButton(props, ref);
   const { hoverProps, isHovered } = interactions.useHover({ isDisabled: props.isDisabled });
-  return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$b(__spreadValues$c({}, utils$1.mergeProps(buttonProps, hoverProps, utils$1.filterDOMProps(props))), {
+  return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$8(__spreadValues$8({}, utils.mergeProps(buttonProps, hoverProps, utils.filterDOMProps(props))), {
     ref,
     className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__stepper-button"], textFieldStyles__default["default"]["js-hover"], {
       [textFieldStyles__default["default"]["is-active"]]: isPressed,
@@ -848,76 +1298,76 @@ function useAutofillStyle(inputRef) {
   };
 }
 
-var __defProp$b = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-var __objRest$a = (source, exclude) => {
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
+  if (source != null && __getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const useSapphireNumberField = (_a, ref) => {
-  var _b = _a, { error } = _b, numberFieldProps = __objRest$a(_b, ["error"]);
+  var _b = _a, { error } = _b, numberFieldProps = __objRest$5(_b, ["error"]);
   const { locale } = i18n.useLocale();
-  const numberFieldState = numberfield.useNumberFieldState(__spreadProps$a(__spreadValues$b({}, numberFieldProps), {
+  const numberFieldState = numberfield.useNumberFieldState(__spreadProps$7(__spreadValues$7({}, numberFieldProps), {
     locale
   }));
-  const numberFieldAria = numberfield$1.useNumberField(__spreadProps$a(__spreadValues$b({}, numberFieldProps), {
+  const numberFieldAria = numberfield$1.useNumberField(__spreadProps$7(__spreadValues$7({}, numberFieldProps), {
     validationState: error === false || error === void 0 ? void 0 : "invalid"
   }), numberFieldState, ref);
   return numberFieldAria;
 };
 
-var __defProp$a = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$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$b.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    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$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$9 = (source, exclude) => {
+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$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
+  if (source != null && __getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -939,7 +1389,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     showButtons = false,
     incrementAriaLabel,
     decrementAriaLabel
-  } = _a, otherProps = __objRest$9(_a, [
+  } = _a, otherProps = __objRest$4(_a, [
     "label",
     "isDisabled",
     "error",
@@ -957,7 +1407,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     "decrementAriaLabel"
   ]);
   sapphireReact.useThemeCheck();
-  const inputRef = utils$1.useObjectRef(props.inputRef);
+  const inputRef = utils.useObjectRef(props.inputRef);
   const formatMessage = i18n.useMessageFormatter(intlMessages$1);
   const {
     inputProps,
@@ -966,25 +1416,25 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     decrementButtonProps,
     descriptionProps,
     errorMessageProps
-  } = useSapphireNumberField(__spreadProps$9(__spreadValues$a({}, props), {
+  } = useSapphireNumberField(__spreadProps$6(__spreadValues$6({}, props), {
     incrementAriaLabel: incrementAriaLabel != null ? incrementAriaLabel : formatMessage("increment"),
     decrementAriaLabel: decrementAriaLabel != null ? decrementAriaLabel : formatMessage("decrement")
   }), inputRef);
   const { focusProps, isFocusVisible } = focus.useFocusRing();
   const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
   const containerRef = React.useRef(null);
-  React.useImperativeHandle(ref, () => __spreadProps$9(__spreadValues$a({}, utils$2.createFocusableRef(containerRef, inputRef)), {
+  React.useImperativeHandle(ref, () => __spreadProps$6(__spreadValues$6({}, utils$1.createFocusableRef(containerRef, inputRef)), {
     getInputElement() {
       return inputRef.current;
     }
   }));
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$9(__spreadValues$a({}, removeUniqueDOMProps(otherProps)), {
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$6(__spreadValues$6({}, removeUniqueDOMProps(otherProps)), {
     ref: containerRef,
     size,
     labelPlacement
   }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Context, {
     descriptionProps: error ? errorMessageProps : descriptionProps
-  }, label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps$9(__spreadValues$a({}, labelProps), {
+  }, label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps$6(__spreadValues$6({}, labelProps), {
     size,
     necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
     contextualHelp
@@ -998,7 +1448,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__prefix"], {
       [textFieldStyles__default["default"]["sapphire-text-field__prefix--icon"]]: typeof prefix !== "string"
     })
-  }, prefix), /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$9(__spreadValues$a({}, utils$1.mergeProps(inputProps, focusProps, {
+  }, prefix), /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$6(__spreadValues$6({}, utils.mergeProps(inputProps, focusProps, {
     onChange: updateStyle,
     onBlur: updateStyle
   })), {
@@ -1013,10 +1463,10 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     })
   }, postfix), showButtons && /* @__PURE__ */ React__default["default"].createElement("div", {
     className: clsx__default["default"](textFieldStyles__default["default"]["sapphire-text-field__stepper"])
-  }, /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$a({
+  }, /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$6({
     variant: "increment",
     size
-  }, incrementButtonProps)), /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$a({
+  }, incrementButtonProps)), /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$6({
     variant: "decrement",
     size
   }, decrementButtonProps))))), (error && typeof error !== "boolean" || note) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, error && typeof error !== "boolean" ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, {
@@ -1025,25 +1475,25 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
 });
 const removeUniqueDOMProps = (props) => Object.fromEntries(Object.entries(props).filter(([name]) => name !== "id" && !name.startsWith("data-")));
 
-var __defProp$9 = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-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) => {
+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$a.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    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$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const ProgressIndicator = (props) => {
   const {
     maxValue = 100,
@@ -1053,7 +1503,7 @@ const ProgressIndicator = (props) => {
   } = props;
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { progressBarProps } = progress.useProgressBar(__spreadProps$8(__spreadValues$9({}, props), {
+  const { progressBarProps } = progress.useProgressBar(__spreadProps$5(__spreadValues$5({}, props), {
     minValue: 0,
     valueLabel: ariaValueText
   }));
@@ -1061,299 +1511,125 @@ const ProgressIndicator = (props) => {
   const value = Math.min(Math.max(realValue, minValue), maxValue);
   const widthPercentage = value / maxValue * 100;
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$4["default"]["sapphire-progress"])
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$8(__spreadValues$9({}, progressBarProps), {
-    className: styles__default$4["default"]["sapphire-progress--indicator"],
-    style: __spreadProps$8(__spreadValues$9({}, styleProps), { width: `${widthPercentage}%` }),
+    className: clsx__default["default"](styles__default$5["default"]["sapphire-progress"])
+  }, /* @__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,
     "aria-labelledby": "aria-labelledby" in props ? props["aria-labelledby"] : void 0
   })), segments > 1 && /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: styles__default$4["default"]["sapphire-progress--segments"]
+    className: styles__default$5["default"]["sapphire-progress--segments"]
   }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React__default["default"].createElement("span", {
     key: index
   }))));
 };
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = 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$9.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$8 = (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 Slider = (_a) => {
-  var _b = _a, {
-    label,
-    labelPlacement = "above",
-    note,
-    name
-  } = _b, props = __objRest$8(_b, [
-    "label",
-    "labelPlacement",
-    "note",
-    "name"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$7(__spreadValues$8({}, 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$7(__spreadValues$8({}, props), {
-    style: { height: "100%" }
-  }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$5["default"]["sapphire-slider"]),
-    role: "slider"
-  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.SliderTrack, {
-    className: ({ isDisabled }) => clsx__default["default"](styles__default$5["default"]["sapphire-slider__track"], {
-      [styles__default$5["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$5["default"]["sapphire-slider__track-remaining"])
-  }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$5["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$5["default"]["sapphire-slider__thumb"], {
-      [styles__default$5["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)));
-};
-
-const _Slider = Object.assign(Slider, {
-  Note: sapphireReact.Field.Note
-});
-
-var __defProp$7 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = 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$8.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest$7 = (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 BreadcrumbsContext = React.createContext({ size: "md" });
-const Breadcrumbs = (_a) => {
-  var _b = _a, {
-    size = "md",
-    children,
-    maxWidth
-  } = _b, props = __objRest$7(_b, [
-    "size",
-    "children",
-    "maxWidth"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const containerRef = React.useRef(null);
-  const breadcrumbRef = React.useRef(null);
-  return /* @__PURE__ */ React__default["default"].createElement(BreadcrumbsContext.Provider, {
-    value: { size }
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    ref: containerRef,
-    style: __spreadProps$6(__spreadValues$7({}, styleProps.style), {
-      maxWidth,
-      display: "flex"
-    })
-  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Breadcrumbs, __spreadProps$6(__spreadValues$7({}, props), {
-    ref: breadcrumbRef,
-    className: clsx__default["default"](styles__default$6["default"]["sapphire-breadcrumbs"], {
-      [styles__default$6["default"]["sapphire-breadcrumbs--sm"]]: size === "sm",
-      [styles__default$6["default"]["sapphire-breadcrumbs--lg"]]: size === "lg"
-    })
-  }), children)));
-};
-
-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$6["default"]["sapphire-breadcrumbs__separator"]),
-    "aria-hidden": "true"
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
-    size: iconSize
-  }, /* @__PURE__ */ React__default["default"].createElement(react.ChevronRight, null)));
-};
-
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest$6 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const BreadcrumbItemContext = React.createContext({
-  isDisabled: false
-});
-const BreadcrumbItem = (_a) => {
-  var _b = _a, {
-    children,
-    isDisabled: individualDisabled = false
-  } = _b, props = __objRest$6(_b, [
-    "children",
-    "isDisabled"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { size } = React.useContext(BreadcrumbsContext);
-  return /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Breadcrumb, {
-    className: clsx__default["default"](styles__default$6["default"]["sapphire-breadcrumbs__item"]),
-    style: __spreadValues$6({}, styleProps.style)
-  }, ({ isCurrent, isDisabled }) => /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemContext.Provider, {
-    value: { isDisabled: isDisabled || individualDisabled }
-  }, isCurrent ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
-    elementType: "span",
-    isSemibold: true,
-    size: size === "lg" ? "md" : size === "md" ? "sm" : "xs"
-  }, children) : children, !isCurrent && /* @__PURE__ */ React__default["default"].createElement(BreadcrumbsSeparator, null)));
-};
-
-var __defProp$5 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = 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$6.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+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$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$5 = (source, exclude) => {
+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$6.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$4.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))
+  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;
 };
-const BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2(_a, ref) {
-  var _b = _a, { children } = _b, props = __objRest$5(_b, ["children"]);
+const Slider = (_a) => {
+  var _b = _a, {
+    label,
+    labelPlacement = "above",
+    note,
+    name
+  } = _b, props = __objRest$3(_b, [
+    "label",
+    "labelPlacement",
+    "note",
+    "name"
+  ]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { size } = React.useContext(BreadcrumbsContext);
-  const { isDisabled } = React.useContext(BreadcrumbItemContext);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$5(__spreadValues$5(__spreadValues$5({}, props), styleProps), {
-    ref,
-    size,
-    variant: "tertiary",
-    isDisabled
-  }), children);
+  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$6["default"]["sapphire-slider"]),
+    role: "slider"
+  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.SliderTrack, {
+    className: ({ isDisabled }) => clsx__default["default"](styles__default$6["default"]["sapphire-slider__track"], {
+      [styles__default$6["default"]["is-disabled"]]: isDisabled
+    })
+  }, ({ state }) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-slider__track-remaining"])
+  }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: clsx__default["default"](styles__default$6["default"]["sapphire-slider__track-fill"]),
+    style: { width: state.getThumbPercent(0) * 100 + "%" }
+  }), /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.SliderThumb, {
+    name,
+    className: (state2) => clsx__default["default"](styles__default$6["default"]["sapphire-slider__thumb"], {
+      [styles__default$6["default"]["is-focus"]]: state2.isFocusVisible
+    }),
+    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)));
+};
+
+const _Slider = Object.assign(Slider, {
+  Note: sapphireReact.Field.Note
 });
-BreadcrumbItemLink.displayName = "BreadcrumbItemLink";
 
-var __defProp$4 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = 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) => {
+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$5.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    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$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-var __objRest$4 = (source, exclude) => {
+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$5.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+  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;
@@ -1369,7 +1645,7 @@ function Tag(props) {
     isPressed,
     removeButtonProps,
     rowProps: _b
-  } = _a, _c = _b, { onKeyDown } = _c, rowProps = __objRest$4(_c, ["onKeyDown"]), otherProps = __objRest$4(_a, [
+  } = _a, _c = _b, { onKeyDown } = _c, rowProps = __objRest$2(_c, ["onKeyDown"]), otherProps = __objRest$2(_a, [
     "gridCellProps",
     "isDisabled",
     "isFocused",
@@ -1381,9 +1657,9 @@ function Tag(props) {
   const hasAction = otherProps.hasAction;
   return /* @__PURE__ */ React__default["default"].createElement(focus.FocusRing, {
     focusRingClass: styles__default$7["default"]["is-focus"]
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$4(__spreadProps$4(__spreadValues$4({
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$3(__spreadProps$3(__spreadValues$3({
     ref
-  }, utils$1.mergeProps({
+  }, utils.mergeProps({
     onKeyDown: (e) => {
       if (e.key !== " ") {
         onKeyDown == null ? void 0 : onKeyDown(e);
@@ -1398,14 +1674,14 @@ function Tag(props) {
       [styles__default$7["default"]["is-hover"]]: hasAction && isHovered,
       [styles__default$7["default"]["is-disabled"]]: isDisabled
     })
-  }), hasError ? { "aria-invalid": true } : {}), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$4(__spreadValues$4({}, gridCellProps), {
+  }), hasError ? { "aria-invalid": true } : {}), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$3(__spreadValues$3({}, gridCellProps), {
     className: styles__default$7["default"]["sapphire-tag__content"]
-  }), hasError && !isDisabled && /* @__PURE__ */ React__default["default"].createElement(IconError, null), item.rendered, !isDisabled && props.allowsRemoving && /* @__PURE__ */ React__default["default"].createElement(RemoveButton, __spreadValues$4({}, removeButtonProps)))));
+  }), hasError && !isDisabled && /* @__PURE__ */ React__default["default"].createElement(IconError, null), item.rendered, !isDisabled && props.allowsRemoving && /* @__PURE__ */ React__default["default"].createElement(RemoveButton, __spreadValues$3({}, removeButtonProps)))));
 }
 function RemoveButton(removeButtonProps) {
   const buttonRef = React.useRef(null);
   const { buttonProps } = button.useButton(removeButtonProps, buttonRef);
-  return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$4(__spreadValues$4({}, buttonProps), {
+  return /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$3(__spreadValues$3({}, buttonProps), {
     className: clsx__default["default"](styles__default$7["default"]["sapphire-tag__button"], styles__default$7["default"]["js-focus"])
   }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, {
     size: "sm"
@@ -1419,33 +1695,33 @@ const IconError = () => {
   }, /* @__PURE__ */ React__default["default"].createElement(react.Error, null)));
 };
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = 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) => {
+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$4.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    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$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$3 = (source, exclude) => {
+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$4.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$2.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))
+  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;
@@ -1459,7 +1735,7 @@ function TagGroup(props) {
     labelPlacement = "above",
     note,
     onRemove: originalOnRemove
-  } = _a, otherProps = __objRest$3(_a, [
+  } = _a, otherProps = __objRest$1(_a, [
     "contextualHelp",
     "errorMessage",
     "label",
@@ -1481,16 +1757,16 @@ function TagGroup(props) {
       }
     });
   };
-  const { descriptionProps, gridProps, labelProps, errorMessageProps } = tag.useTagGroup(__spreadProps$3(__spreadValues$3({}, props), { onRemove }), state, ref);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$3(__spreadValues$3({}, otherProps), {
+  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$3(__spreadValues$3({}, labelProps), {
+  }, (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$3(__spreadValues$3({}, gridProps), {
+  }), labelText)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$2(__spreadValues$2({}, gridProps), {
     ref,
     className: styles__default$7["default"]["sapphire-tag-group"]
   }), Array.from(state.collection).map((item) => /* @__PURE__ */ React__default["default"].createElement(Tag, {
@@ -1506,129 +1782,6 @@ function TagGroup(props) {
 
 const TagItem = collections.Item;
 
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = 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$3.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(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 LabeledValue(_a) {
-  var _b = _a, {
-    children,
-    contextualHelp,
-    label: label$1,
-    labelPlacement = "above",
-    size = "lg"
-  } = _b, otherProps = __objRest$2(_b, [
-    "children",
-    "contextualHelp",
-    "label",
-    "labelPlacement",
-    "size"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { fieldProps } = label.useField({ label: label$1 });
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$2(__spreadValues$2({}, utils$1.mergeProps(fieldProps, otherProps)), {
-    labelPlacement,
-    size,
-    noDefaultWidth: true
-  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, {
-    contextualHelp,
-    size
-  }, label$1)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, children));
-}
-
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-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;
-};
-function Alert(_a) {
-  var _b = _a, {
-    children,
-    title,
-    variant = "info"
-  } = _b, props = __objRest$1(_b, [
-    "children",
-    "title",
-    "variant"
-  ]);
-  sapphireReact.useThemeCheck();
-  const {
-    styleProps: { style, className }
-  } = sapphireReact.useSapphireStyleProps(props);
-  const getIcon = (variant2) => {
-    switch (variant2) {
-      case "warning":
-        return /* @__PURE__ */ React__default["default"].createElement(react.Warning, null);
-      case "positive":
-        return /* @__PURE__ */ React__default["default"].createElement(react.CheckmarkOutline, null);
-      case "negative":
-        return /* @__PURE__ */ React__default["default"].createElement(react.Error, null);
-      default:
-        return /* @__PURE__ */ React__default["default"].createElement(react.Information, null);
-    }
-  };
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    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)));
-}
-
 var __defProp$1 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
@@ -1766,7 +1919,7 @@ function _TimeField(_a, ref) {
     "necessityIndicator"
   ]);
   sapphireReact.useThemeCheck();
-  const timeFieldRef = utils$1.useObjectRef(ref);
+  const timeFieldRef = utils.useObjectRef(ref);
   const { locale } = i18n.useLocale();
   const formatMessage = i18n.useMessageFormatter(intlMessages);
   const state = datepicker$1.useTimeFieldState(__spreadProps(__spreadValues({}, otherProps), {
@@ -1814,6 +1967,7 @@ Object.defineProperty(exports, 'useLocale', {
 exports.Accordion = _Accordion;
 exports.AccordionContext = AccordionContext;
 exports.Alert = Alert;
+exports.Autocomplete = Autocomplete;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbItemLink = BreadcrumbItemLink;
 exports.Breadcrumbs = Breadcrumbs;