@danske/sapphire-react-lab 0.99.3 → 0.101.0

package/build/cjs/index.js

@@ -3,187 +3,58 @@
 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');
 
 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);
-
-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 apply = () => {
-    var _a;
-    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: apply,
-      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$i = Object.defineProperty;
-var __defProps$h = Object.defineProperties;
-var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
-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 SearchableSelectFilter(props) {
-  var _b, _c;
-  const _a = props, { searchField, listBox, size = "md" } = _a, otherProps = __objRest$f(_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$h(__spreadValues$i({}, 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())
-  })));
-}
+var styles__default$8 = /*#__PURE__*/_interopDefaultLegacy(styles$8);
 
 const AccordionContext = React__default["default"].createContext({
   sidePadding: void 0
@@ -196,25 +67,25 @@ function useAccordionContext() {
   throw new Error("Accordion context can only be used within Accordion component.");
 }
 
-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$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$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$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$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(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`
@@ -231,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$g(__spreadValues$h({}, 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$g(__spreadValues$h({}, 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$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$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$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$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$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(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$f(__spreadValues$g({}, state), { toggleKey: onToggle });
+  return __spreadProps$j(__spreadValues$k({}, state), { toggleKey: onToggle });
 }
 function toggleKey(set, key, expansionMode = "multiple") {
   const res = new Set(set);
@@ -299,33 +170,33 @@ function toggleKey(set, key, expansionMode = "multiple") {
   return res;
 }
 
-var __defProp$f = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
+var __defProp$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$g.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
+    if (__hasOwnProp$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$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-var __objRest$e = (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$g.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$g)
-    for (var prop of __getOwnPropSymbols$g(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.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;
@@ -337,7 +208,7 @@ const _Accordion$1 = (_a, ref) => {
     hideLastDivider = false,
     hasNegativeSideMargin = false,
     sidePadding
-  } = _b, props = __objRest$e(_b, [
+  } = _b, props = __objRest$h(_b, [
     "expansionMode",
     "headerLevel",
     "hideLastDivider",
@@ -346,18 +217,18 @@ const _Accordion$1 = (_a, ref) => {
   ]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const state = useTreeState(__spreadProps$e(__spreadValues$f({}, 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$e(__spreadValues$f({}, 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$f(__spreadValues$f({}, 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)
@@ -370,33 +241,33 @@ const _Accordion$1 = (_a, ref) => {
 };
 const Accordion = React.forwardRef(_Accordion$1);
 
-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$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$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$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$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-var __objRest$d = (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$f.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$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.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;
@@ -404,11 +275,11 @@ var __objRest$d = (source, exclude) => {
 const AccordionHeading = (_a) => {
   var _b = _a, {
     children
-  } = _b, props = __objRest$d(_b, [
+  } = _b, props = __objRest$g(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$d(__spreadValues$e({}, 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);
 };
 
@@ -417,60 +288,452 @@ const _Accordion = Object.assign(Accordion, {
   Item: AccordionItem
 });
 
-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) => {
-  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]);
-    }
-  return a;
-};
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$c = (source, exclude) => {
+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$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
+  if (source != null && __getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
-const HiddenFileInput = React__default["default"].forwardRef(function InputWrapper(props, ref) {
-  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$c(__spreadValues$d({}, props), {
-    ref,
-    type: "file",
-    style: { display: "none" }
-  }));
-});
-const FileTrigger = React__default["default"].forwardRef(function FileTriggerWrapper(props, ref) {
-  const _a = props, {
+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;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$d = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const 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$d(__spreadValues$d({}, props), {
+    ref,
+    type: "file",
+    style: { display: "none" }
+  }));
+});
+const FileTrigger = React__default["default"].forwardRef(function FileTriggerWrapper(props, ref) {
+  const _a = props, {
     acceptedFileTypes,
     allowsMultiple = false,
     onSelect = () => null,
     children,
     isDisabled = false
-  } = _a, rest = __objRest$c(_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: () => {
@@ -480,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$c(__spreadValues$d({}, domProps), {
+  }, children), /* @__PURE__ */ React__default["default"].createElement(HiddenFileInput, __spreadProps$d(__spreadValues$d({}, domProps), {
     disabled: isDisabled,
     ref: inputRef,
     accept: acceptedFileTypes == null ? void 0 : acceptedFileTypes.toString(),
@@ -507,77 +770,77 @@ const convertFileListToFileDropItems = (fileList) => {
   }));
 };
 
-var da$1 = {
+var da$2 = {
 	"dropzone-heading-default": "Træk filer hertil, eller klik for at vælge",
 	"dropzone-heading-default-single": "Træk fil her, eller klik for at vælge",
 	"dropzone-heading-dropping": "Slip fil"
 };
 
-var en$1 = {
+var en$2 = {
 	"dropzone-heading-default": "Drag files here or click to select",
 	"dropzone-heading-default-single": "Drag a file here or click to select",
 	"dropzone-heading-dropping": "Drop file"
 };
 
-var de$1 = {
+var de$2 = {
 	"dropzone-heading-default": "Ziehen Sie Dateien hierher oder klicken Sie, um sie auszuwählen",
 	"dropzone-heading-default-single": "Ziehen Sie die Datei hierher oder klicken Sie, um sie auszuwählen",
 	"dropzone-heading-dropping": "Datei ablegen"
 };
 
-var fi$1 = {
+var fi$2 = {
 	"dropzone-heading-default": "Vedä tiedostoja tähän tai valitse napsauttamalla",
 	"dropzone-heading-default-single": "Vedä tiedosto tähän tai valitse napsauttamalla",
 	"dropzone-heading-dropping": "Pudota tiedosto"
 };
 
-var no$1 = {
+var no$2 = {
 	"dropzone-heading-default": "Dra filer her eller klikk for å velge",
 	"dropzone-heading-default-single": "Dra fil her eller klikk for å velge",
 	"dropzone-heading-dropping": "Slipp fil"
 };
 
-var pl$1 = {
+var pl$2 = {
 	"dropzone-heading-default": "Przeciągnij pliki tutaj lub kliknij, aby wybrać",
 	"dropzone-heading-default-single": "Przeciągnij plik tutaj lub kliknij, aby wybrać",
 	"dropzone-heading-dropping": "Upuść plik"
 };
 
-var se$1 = {
+var se$2 = {
 	"dropzone-heading-default": "Dra filer hit eller klicka för att välja",
 	"dropzone-heading-default-single": "Dra fil hit eller klicka för att välja",
 	"dropzone-heading-dropping": "Släpp filen"
 };
 
-var intlMessages$1 = {
-  "da-DK": da$1,
-  "en-US": en$1,
-  "de-DE": de$1,
-  "fi-FI": fi$1,
-  "nb-NO": no$1,
-  "pl-PL": pl$1,
-  "sv-SE": se$1
+var intlMessages$2 = {
+  "da-DK": da$2,
+  "en-US": en$2,
+  "de-DE": de$2,
+  "fi-FI": fi$2,
+  "nb-NO": no$2,
+  "pl-PL": pl$2,
+  "sv-SE": se$2
 };
 
 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 __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$d.call(b, prop))
+    if (__hasOwnProp$c.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))
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
         __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapper(props, forwardedRef) {
   const {
     isDisabled = false,
@@ -589,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$1);
-  const pressableRef = utils$1.useObjectRef(forwardedRef);
+  const format = i18n.useMessageFormatter(intlMessages$2);
+  const pressableRef = utils.useObjectRef(forwardedRef);
   const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { dropProps, isDropTarget: isDropping } = dnd.useDrop(__spreadProps$b(__spreadValues$c({}, props), {
+  const { dropProps, isDropTarget: isDropping } = dnd.useDrop(__spreadProps$c(__spreadValues$c({}, props), {
     ref: pressableRef,
     hasDropButton: true,
     isDisabled,
@@ -631,7 +894,7 @@ 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$b(__spreadValues$c({}, utils$1.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps)), {
+  }, /* @__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,
@@ -663,143 +926,335 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
   }, renderInstruction(isDropping)))))));
 });
 
+function FilterDropdown({
+  children,
+  label,
+  value,
+  isDisabled = false,
+  isApplyDisabled = false,
+  isClearDisabled,
+  isOpen: isOpenProp,
+  applyButtonLabel = "Apply",
+  clearButtonLabel = "Clear",
+  defaultOpen = false,
+  hasApplyButton = false,
+  noMaxWidth,
+  onApply,
+  onClear,
+  onOpenChange,
+  buttonSize = "md"
+}) {
+  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$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 __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$c.call(b, prop))
+    if (__hasOwnProp$b.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))
+  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$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __objRest$9 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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$b = (source, exclude) => {
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$a.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$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$b(_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$a(__spreadValues$b({
+  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 = {
+var da$1 = {
 	increment: increment$6,
 	decrement: decrement$6
 };
 
 var increment$5 = "Increase";
 var decrement$5 = "Decrease";
-var en = {
+var en$1 = {
 	increment: increment$5,
 	decrement: decrement$5
 };
 
 var increment$4 = "erhöhen";
 var decrement$4 = "verringern";
-var de = {
+var de$1 = {
 	increment: increment$4,
 	decrement: decrement$4
 };
 
 var increment$3 = "lisääntyä";
 var decrement$3 = "vähentää";
-var fi = {
+var fi$1 = {
 	increment: increment$3,
 	decrement: decrement$3
 };
 
 var increment$2 = "øke";
 var decrement$2 = "avta";
-var no = {
+var no$1 = {
 	increment: increment$2,
 	decrement: decrement$2
 };
 
 var increment$1 = "zwiększyć";
 var decrement$1 = "zmniejszenie";
-var pl = {
+var pl$1 = {
 	increment: increment$1,
 	decrement: decrement$1
 };
 
 var increment = "öka";
 var decrement = "minska";
-var se = {
+var se$1 = {
 	increment: increment,
 	decrement: decrement
 };
 
-var intlMessages = {
-  "da-DK": da,
-  "en-US": en,
-  "de-DE": de,
-  "fi-FI": fi,
-  "nb-NO": no,
-  "pl-PL": pl,
-  "sv-SE": se
+var intlMessages$1 = {
+  "da-DK": da$1,
+  "en-US": en$1,
+  "de-DE": de$1,
+  "fi-FI": fi$1,
+  "nb-NO": no$1,
+  "pl-PL": pl$1,
+  "sv-SE": se$1
 };
 
-var __defProp$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$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$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$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$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$a = (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$b.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$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.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;
@@ -808,14 +1263,14 @@ const StepperButton = (_a) => {
   var _b = _a, {
     variant,
     size
-  } = _b, props = __objRest$a(_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$9(__spreadValues$a({}, 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,
@@ -843,76 +1298,76 @@ function useAutofillStyle(inputRef) {
   };
 }
 
-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$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$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$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$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$9 = (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$a.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$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.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$9(_b, ["error"]);
+  var _b = _a, { error } = _b, numberFieldProps = __objRest$5(_b, ["error"]);
   const { locale } = i18n.useLocale();
-  const numberFieldState = numberfield.useNumberFieldState(__spreadProps$8(__spreadValues$9({}, numberFieldProps), {
+  const numberFieldState = numberfield.useNumberFieldState(__spreadProps$7(__spreadValues$7({}, numberFieldProps), {
     locale
-  }));
-  const numberFieldAria = numberfield$1.useNumberField(__spreadProps$8(__spreadValues$9({}, numberFieldProps), {
-    validationState: error === false || error === void 0 ? void 0 : "invalid"
-  }), numberFieldState, ref);
-  return numberFieldAria;
-};
-
-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) => {
+  }));
+  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$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$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]);
+    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$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$8 = (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$9.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$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.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;
@@ -934,7 +1389,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     showButtons = false,
     incrementAriaLabel,
     decrementAriaLabel
-  } = _a, otherProps = __objRest$8(_a, [
+  } = _a, otherProps = __objRest$4(_a, [
     "label",
     "isDisabled",
     "error",
@@ -952,8 +1407,8 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     "decrementAriaLabel"
   ]);
   sapphireReact.useThemeCheck();
-  const inputRef = utils$1.useObjectRef(props.inputRef);
-  const formatMessage = i18n.useMessageFormatter(intlMessages);
+  const inputRef = utils.useObjectRef(props.inputRef);
+  const formatMessage = i18n.useMessageFormatter(intlMessages$1);
   const {
     inputProps,
     labelProps,
@@ -961,25 +1416,25 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     decrementButtonProps,
     descriptionProps,
     errorMessageProps
-  } = useSapphireNumberField(__spreadProps$7(__spreadValues$8({}, 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$7(__spreadValues$8({}, 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$7(__spreadValues$8({}, 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$7(__spreadValues$8({}, 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
@@ -993,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$7(__spreadValues$8({}, utils$1.mergeProps(inputProps, focusProps, {
+  }, prefix), /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$6(__spreadValues$6({}, utils.mergeProps(inputProps, focusProps, {
     onChange: updateStyle,
     onBlur: updateStyle
   })), {
@@ -1008,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$8({
+  }, /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$6({
     variant: "increment",
     size
-  }, incrementButtonProps)), /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$8({
+  }, 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, {
@@ -1020,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$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) => {
+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$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]);
+    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$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const ProgressIndicator = (props) => {
   const {
     maxValue = 100,
@@ -1048,7 +1503,7 @@ const ProgressIndicator = (props) => {
   } = props;
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { progressBarProps } = progress.useProgressBar(__spreadProps$6(__spreadValues$7({}, props), {
+  const { progressBarProps } = progress.useProgressBar(__spreadProps$5(__spreadValues$5({}, props), {
     minValue: 0,
     valueLabel: ariaValueText
   }));
@@ -1056,246 +1511,39 @@ 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$6(__spreadValues$7({}, progressBarProps), {
-    className: styles__default$4["default"]["sapphire-progress--indicator"],
-    style: __spreadProps$6(__spreadValues$7({}, 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"]
-  }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React__default["default"].createElement("span", {
-    key: index
-  }))));
-};
-
-var __defProp$6 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-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 __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$7 = (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 Slider = (_a) => {
-  var _b = _a, {
-    label,
-    labelPlacement = "above",
-    note,
-    name
-  } = _b, props = __objRest$7(_b, [
-    "label",
-    "labelPlacement",
-    "note",
-    "name"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$5(__spreadValues$6({}, 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$5(__spreadValues$6({}, 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$5 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = 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]);
-    }
-  return a;
-};
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-var __objRest$6 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const BreadcrumbsContext = React.createContext({ size: "md" });
-const Breadcrumbs = (_a) => {
-  var _b = _a, {
-    size = "md",
-    children,
-    maxWidth
-  } = _b, props = __objRest$6(_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$4(__spreadValues$5({}, styleProps.style), {
-      maxWidth,
-      display: "flex"
-    })
-  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Breadcrumbs, __spreadProps$4(__spreadValues$5({}, 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$4 = Object.defineProperty;
-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) => {
-  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]);
-    }
-  return a;
-};
-var __objRest$5 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$5.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))
-        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$5(_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$4({}, 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)));
+    className: styles__default$5["default"]["sapphire-progress--segments"]
+  }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React__default["default"].createElement("span", {
+    key: index
+  }))));
 };
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+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$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 __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$3(a, prop, 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$3(a, prop, b[prop]);
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$4 = (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$4.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1307,41 +1555,74 @@ var __objRest$4 = (source, exclude) => {
     }
   return target;
 };
-const BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2(_a, ref) {
-  var _b = _a, { children } = _b, props = __objRest$4(_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$3(__spreadValues$3(__spreadValues$3({}, 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$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+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$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) => {
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$2(a, prop, 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$2(a, prop, b[prop]);
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$3 = (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$3.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1364,7 +1645,7 @@ function Tag(props) {
     isPressed,
     removeButtonProps,
     rowProps: _b
-  } = _a, _c = _b, { onKeyDown } = _c, rowProps = __objRest$3(_c, ["onKeyDown"]), otherProps = __objRest$3(_a, [
+  } = _a, _c = _b, { onKeyDown } = _c, rowProps = __objRest$2(_c, ["onKeyDown"]), otherProps = __objRest$2(_a, [
     "gridCellProps",
     "isDisabled",
     "isFocused",
@@ -1376,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$2(__spreadProps$2(__spreadValues$2({
+  }, /* @__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);
@@ -1393,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$2(__spreadValues$2({}, 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$2({}, 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$2(__spreadValues$2({}, 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"
@@ -1414,26 +1695,26 @@ const IconError = () => {
   }, /* @__PURE__ */ React__default["default"].createElement(react.Error, null)));
 };
 
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+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$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$1(a, prop, 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$1(a, prop, b[prop]);
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-var __objRest$2 = (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$2.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1454,7 +1735,7 @@ function TagGroup(props) {
     labelPlacement = "above",
     note,
     onRemove: originalOnRemove
-  } = _a, otherProps = __objRest$2(_a, [
+  } = _a, otherProps = __objRest$1(_a, [
     "contextualHelp",
     "errorMessage",
     "label",
@@ -1476,16 +1757,16 @@ function TagGroup(props) {
       }
     });
   };
-  const { descriptionProps, gridProps, labelProps, errorMessageProps } = tag.useTagGroup(__spreadProps$1(__spreadValues$1({}, props), { onRemove }), state, ref);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$1(__spreadValues$1({}, 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$1(__spreadValues$1({}, 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$1(__spreadValues$1({}, 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, {
@@ -1501,66 +1782,111 @@ function TagGroup(props) {
 
 const TagItem = collections.Item;
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
 var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
 var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
+      __defNormalProp$1(a, prop, b[prop]);
   if (__getOwnPropSymbols$1)
     for (var prop of __getOwnPropSymbols$1(b)) {
       if (__propIsEnum$1.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest$1 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const TimeSegment = ({ segment, state }) => segment.type === "hour" || segment.type === "minute" || segment.type === "dayPeriod" ? /* @__PURE__ */ React__default["default"].createElement(EditableSegment, {
+  segment,
+  state
+}) : /* @__PURE__ */ React__default["default"].createElement(SeparatorSegment, {
+  segment
+});
+const SeparatorSegment = ({ segment }) => /* @__PURE__ */ React__default["default"].createElement("span", {
+  "aria-hidden": "true",
+  className: clsx__default["default"](styles__default$8["default"]["sapphire-date-field__segment"], styles__default$8["default"]["sapphire-date-field__segment--separator"])
+}, segment.text);
+const EditableSegment = ({ segment, state }) => {
+  const ref = React.useRef(null);
+  const { segmentProps } = datepicker.useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$1(__spreadValues$1({}, segmentProps), {
+    style: segmentProps.style,
+    ref,
+    className: clsx__default["default"](styles__default$8["default"]["sapphire-date-field__segment"], {
+      [styles__default$8["default"]["sapphire-date-field__segment--filled"]]: !segment.isPlaceholder
+    })
+  }), segment.text);
+};
+
+var clear$6 = "Nulstil";
+var da = {
+	clear: clear$6
+};
+
+var clear$5 = "Clear";
+var en = {
+	clear: clear$5
+};
+
+var clear$4 = "Zurücksetzen";
+var de = {
+	clear: clear$4
+};
+
+var clear$3 = "Nollaa";
+var fi = {
+	clear: clear$3
+};
+
+var clear$2 = "Nullstill";
+var no = {
+	clear: clear$2
+};
+
+var clear$1 = "Zresetuj";
+var pl = {
+	clear: clear$1
+};
+
+var clear = "Återställ";
+var se = {
+	clear: clear
+};
+
+var intlMessages = {
+  "da-DK": da,
+  "en-US": en,
+  "de-DE": de,
+  "fi-FI": fi,
+  "nb-NO": no,
+  "pl-PL": pl,
+  "sv-SE": se
 };
-function LabeledValue(_a) {
-  var _b = _a, {
-    children,
-    contextualHelp,
-    label: label$1,
-    labelPlacement = "above",
-    size = "lg"
-  } = _b, otherProps = __objRest$1(_b, [
-    "children",
-    "contextualHelp",
-    "label",
-    "labelPlacement",
-    "size"
-  ]);
-  sapphireReact.useThemeCheck();
-  const { fieldProps } = label.useField({ label: label$1 });
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps(__spreadValues({}, 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 __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -1573,56 +1899,66 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-function Alert(_a) {
+const isAnySegmentModified = (segments) => segments.map(({ type, isPlaceholder }) => {
+  return type !== "literal" && !isPlaceholder;
+}).some((isModified) => isModified);
+function _TimeField(_a, ref) {
   var _b = _a, {
-    children,
-    title,
-    variant = "info"
-  } = _b, props = __objRest(_b, [
-    "children",
-    "title",
-    "variant"
+    size = "lg",
+    noClearButton = false,
+    error,
+    note,
+    contextualHelp,
+    necessityIndicator = false
+  } = _b, otherProps = __objRest(_b, [
+    "size",
+    "noClearButton",
+    "error",
+    "note",
+    "contextualHelp",
+    "necessityIndicator"
   ]);
   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)));
+  const timeFieldRef = utils.useObjectRef(ref);
+  const { locale } = i18n.useLocale();
+  const formatMessage = i18n.useMessageFormatter(intlMessages);
+  const state = datepicker$1.useTimeFieldState(__spreadProps(__spreadValues({}, otherProps), {
+    locale,
+    isInvalid: error ? true : void 0
+  }));
+  const { fieldProps, labelProps } = datepicker.useTimeField(__spreadValues({}, otherProps), state, timeFieldRef);
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps(__spreadValues({}, otherProps), {
+    ref,
+    size,
+    noShrink: true
+  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Context, null, otherProps.label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, __spreadProps(__spreadValues({}, labelProps), {
+    size,
+    necessityIndicator: otherProps.isRequired && necessityIndicator ? "required" : !otherProps.isRequired && necessityIndicator ? "optional" : void 0,
+    contextualHelp
+  }), otherProps.label))), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: clsx__default["default"](styles__default$8["default"]["sapphire-date-field"], {
+      [styles__default$8["default"]["sapphire-date-field--error"]]: state.isInvalid,
+      [styles__default$8["default"]["sapphire-date-field--no-clear-button"]]: noClearButton,
+      [styles__default$8["default"]["sapphire-date-field--no-calendar"]]: true,
+      [styles__default$8["default"]["sapphire-date-field--md"]]: size === "md"
+    })
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps(__spreadValues({}, fieldProps), {
+    className: styles__default$8["default"]["sapphire-date-field__input"],
+    ref: timeFieldRef
+  }), state.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(TimeSegment, {
+    key: i,
+    segment,
+    state
+  }))), !noClearButton && !otherProps.isReadOnly && !otherProps.isDisabled && isAnySegmentModified(state.segments) && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.IconButton, {
+    "aria-label": formatMessage("clear"),
+    onPress: () => state.segments.forEach((segment) => state.clearSegment(segment.type)),
+    size: size === "md" ? "sm" : "md",
+    UNSAFE_className: clsx__default["default"](styles__default$8["default"]["sapphire-date-field__button"], styles__default$8["default"]["sapphire-date-field__button--clear"])
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, null, /* @__PURE__ */ React__default["default"].createElement(react.CloseOutline, null))))), !!error && typeof error !== "boolean" || note ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Footer, null, !!error && typeof error !== "boolean" ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Note, {
+    variant: "error"
+  }, error) : note ? note : null) : null);
 }
+const TimeField = React.forwardRef(_TimeField);
 
 Object.defineProperty(exports, 'useLocale', {
   enumerable: true,
@@ -1631,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;
@@ -1645,4 +1982,5 @@ exports.SearchableSelectFilter = SearchableSelectFilter;
 exports.Slider = _Slider;
 exports.TagGroup = TagGroup;
 exports.TagItem = TagItem;
+exports.TimeField = TimeField;
 //# sourceMappingURL=index.js.map