@danske/sapphire-react-lab 0.99.2 → 0.100.0

package/build/cjs/index.js

@@ -35,6 +35,9 @@ 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 }; }
 
@@ -50,6 +53,7 @@ var styles__default$5 = /*#__PURE__*/_interopDefaultLegacy(styles$5);
 var styles__default$6 = /*#__PURE__*/_interopDefaultLegacy(styles$6);
 var styles__default$7 = /*#__PURE__*/_interopDefaultLegacy(styles$7);
 var alertStyles__default = /*#__PURE__*/_interopDefaultLegacy(alertStyles);
+var styles__default$8 = /*#__PURE__*/_interopDefaultLegacy(styles$8);
 
 function FilterDropdown({
   children,
@@ -73,8 +77,9 @@ function FilterDropdown({
   const [isOpen, setIsOpen] = utils.useControlledState(isOpenProp, defaultOpen, utils$1.useEffectEvent(onOpenChange));
   const hasValue = value != null && value !== "";
   const close = () => setIsOpen(false);
-  const apply = () => {
+  const onSubmit = (e) => {
     var _a;
+    e.preventDefault();
     onApply == null ? void 0 : onApply();
     close();
     (_a = triggerRef.current) == null ? void 0 : _a.focus();
@@ -93,7 +98,7 @@ function FilterDropdown({
     noMaxWidth,
     noPadding: true,
     popoverContent: /* @__PURE__ */ React__default["default"].createElement("form", {
-      onSubmit: apply,
+      onSubmit,
       className: styles__default["default"]["sapphire-filter-dropdown"]
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: styles__default["default"]["sapphire-filter-dropdown__body"]
@@ -119,40 +124,40 @@ function FilterDropdown({
   }, 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) => {
+var __defProp$k = Object.defineProperty;
+var __defProps$j = Object.defineProperties;
+var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
-var __objRest$f = (source, exclude) => {
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
+var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$j.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$j)
-    for (var prop of __getOwnPropSymbols$j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.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;
 };
 function SearchableSelectFilter(props) {
   var _b, _c;
-  const _a = props, { searchField, listBox, size = "md" } = _a, otherProps = __objRest$f(_a, ["searchField", "listBox", "size"]);
+  const _a = props, { searchField, listBox, size = "md" } = _a, otherProps = __objRest$g(_a, ["searchField", "listBox", "size"]);
   const searchFieldRef = React.useRef(null);
   const searchFieldProps = searchField.props;
   const listBoxProps = listBox.props;
@@ -161,7 +166,7 @@ function SearchableSelectFilter(props) {
     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), {
+  return /* @__PURE__ */ React__default["default"].createElement(FilterDropdown, __spreadProps$j(__spreadValues$k({}, otherProps), {
     noMaxWidth: (_c = otherProps.noMaxWidth) != null ? _c : true,
     buttonSize: size,
     hasApplyButton: Boolean(otherProps.onApply),
@@ -196,25 +201,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$j = Object.defineProperty;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$j = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$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$k.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
 const customPaddingStyleProps = (sidePadding) => ({
   paddingLeft: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`,
   paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
@@ -238,7 +243,7 @@ function _AccordionItem(props) {
   }, /* @__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$i(__spreadValues$j({}, utils$1.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"], {
@@ -251,7 +256,7 @@ function _AccordionItem(props) {
     className: clsx__default["default"](styles__default$1["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$i(__spreadValues$j({}, utils$1.mergeProps(regionProps, { onKeyDown })), {
     "aria-hidden": !isOpen,
     className: clsx__default["default"](styles__default$1["default"]["sapphire-accordion__item-content-wrapper"])
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -261,31 +266,31 @@ function _AccordionItem(props) {
 }
 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$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$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$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$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(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$h(__spreadValues$i({}, state), { toggleKey: onToggle });
 }
 function toggleKey(set, key, expansionMode = "multiple") {
   const res = new Set(set);
@@ -299,33 +304,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$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$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$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$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-var __objRest$e = (source, exclude) => {
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
+  if (source != null && __getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -337,7 +342,7 @@ const _Accordion$1 = (_a, ref) => {
     hideLastDivider = false,
     hasNegativeSideMargin = false,
     sidePadding
-  } = _b, props = __objRest$e(_b, [
+  } = _b, props = __objRest$f(_b, [
     "expansionMode",
     "headerLevel",
     "hideLastDivider",
@@ -346,18 +351,18 @@ const _Accordion$1 = (_a, ref) => {
   ]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const state = useTreeState(__spreadProps$e(__spreadValues$f({}, props), { expansionMode }));
+  const state = useTreeState(__spreadProps$g(__spreadValues$h({}, props), { expansionMode }));
   const forwardedRef = utils$1.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$g(__spreadValues$h({}, utils$1.mergeProps(accordionProps, utils$1.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
     }, styleProps.className),
-    style: __spreadValues$f(__spreadValues$f({}, sapphireReact.withTruthyZero(sidePadding) && hasNegativeSideMargin ? {
+    style: __spreadValues$h(__spreadValues$h({}, 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 +375,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$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$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$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$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-var __objRest$d = (source, exclude) => {
+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$f.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
+  if (source != null && __getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -404,10 +409,10 @@ var __objRest$d = (source, exclude) => {
 const AccordionHeading = (_a) => {
   var _b = _a, {
     children
-  } = _b, props = __objRest$d(_b, [
+  } = _b, props = __objRest$e(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$d(__spreadValues$e({}, utils$1.filterDOMProps(props)), {
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$f(__spreadValues$g({}, utils$1.filterDOMProps(props)), {
     className: clsx__default["default"](styles__default$1["default"]["sapphire-accordion__item-heading"])
   }), children);
 };
@@ -417,39 +422,39 @@ 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) => {
+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) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$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 __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$c = (source, exclude) => {
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
+  if (source != null && __getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const HiddenFileInput = React__default["default"].forwardRef(function InputWrapper(props, ref) {
-  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$c(__spreadValues$d({}, props), {
+  return /* @__PURE__ */ React__default["default"].createElement("input", __spreadProps$e(__spreadValues$f({}, props), {
     ref,
     type: "file",
     style: { display: "none" }
@@ -462,7 +467,7 @@ const FileTrigger = React__default["default"].forwardRef(function FileTriggerWra
     onSelect = () => null,
     children,
     isDisabled = false
-  } = _a, rest = __objRest$c(_a, [
+  } = _a, rest = __objRest$d(_a, [
     "acceptedFileTypes",
     "allowsMultiple",
     "onSelect",
@@ -480,7 +485,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$e(__spreadValues$f({}, domProps), {
     disabled: isDisabled,
     ref: inputRef,
     accept: acceptedFileTypes == null ? void 0 : acceptedFileTypes.toString(),
@@ -507,70 +512,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 __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$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) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$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]);
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapper(props, forwardedRef) {
   const {
     isDisabled = false,
@@ -584,11 +596,11 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
   } = props;
   const id = utils$1.useId();
   const paragraphId = props["aria-label"] ? void 0 : id;
-  const format = i18n.useMessageFormatter(intlMessages$1);
+  const format = i18n.useMessageFormatter(intlMessages$2);
   const pressableRef = utils$1.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$d(__spreadValues$e({}, props), {
     ref: pressableRef,
     hasDropButton: true,
     isDisabled,
@@ -624,8 +636,8 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
   }, /* @__PURE__ */ React__default["default"].createElement(interactions.Pressable, {
     ref: pressableRef,
     onPress: onFileSelectOpen
-  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$b(__spreadValues$c({}, utils$1.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps)), {
-    style: __spreadValues$c({}, styleProps.style),
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$d(__spreadValues$e({}, utils$1.mergeProps(dropProps, hoverProps, clipboardProps, focusProps, buttonProps)), {
+    style: __spreadValues$e({}, styleProps.style),
     className: clsx__default["default"](styles__default$2["default"]["sapphire-dropzone"], styles__default$2["default"]["js-focus"], styles__default$2["default"]["js-hover"], {
       [styles__default$2["default"]["is-hover"]]: isHovered && !isDropping,
       [styles__default$2["default"]["is-active"]]: isPressed,
@@ -647,7 +659,7 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
     className: clsx__default["default"](styles__default$2["default"]["sapphire-dropzone__heading"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Heading, {
     level: 6
-  }, isDropping ? format("dropzone-heading-dropping") : format("dropzone-heading-default"))), /* @__PURE__ */ React__default["default"].createElement("div", {
+  }, isDropping ? format("dropzone-heading-dropping") : allowsMultiple ? format("dropzone-heading-default") : format("dropzone-heading-default-single"))), /* @__PURE__ */ React__default["default"].createElement("div", {
     id: paragraphId,
     className: clsx__default["default"](styles__default$2["default"]["sapphire-dropzone__paragraph"])
   }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
@@ -656,42 +668,42 @@ const FileDropzone = React__default["default"].forwardRef(function DropzoneWrapp
   }, renderInstruction(isDropping)))))));
 });
 
-var __defProp$b = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$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$c.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$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$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-var __objRest$b = (source, exclude) => {
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
+  if (source != null && __getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const 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$c(_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$2.getWrappedElement(props.children), __spreadProps$c(__spreadValues$d({
     ref,
     role: "img"
   }, ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": true }), {
@@ -709,90 +721,90 @@ const Flag = React__default["default"].forwardRef(function Flag2(_a, ref) {
 
 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$c = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   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$d.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$a = (source, exclude) => {
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$d.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$d)
+    for (var prop of __getOwnPropSymbols$d(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -801,14 +813,14 @@ const StepperButton = (_a) => {
   var _b = _a, {
     variant,
     size
-  } = _b, props = __objRest$a(_b, [
+  } = _b, props = __objRest$b(_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$b(__spreadValues$c({}, utils$1.mergeProps(buttonProps, hoverProps, utils$1.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,
@@ -836,76 +848,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$b = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   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$c.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$9 = (source, exclude) => {
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$c.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$c)
+    for (var prop of __getOwnPropSymbols$c(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const useSapphireNumberField = (_a, ref) => {
-  var _b = _a, { error } = _b, numberFieldProps = __objRest$9(_b, ["error"]);
+  var _b = _a, { error } = _b, numberFieldProps = __objRest$a(_b, ["error"]);
   const { locale } = i18n.useLocale();
-  const numberFieldState = numberfield.useNumberFieldState(__spreadProps$8(__spreadValues$9({}, numberFieldProps), {
+  const numberFieldState = numberfield.useNumberFieldState(__spreadProps$a(__spreadValues$b({}, numberFieldProps), {
     locale
   }));
-  const numberFieldAria = numberfield$1.useNumberField(__spreadProps$8(__spreadValues$9({}, numberFieldProps), {
+  const numberFieldAria = numberfield$1.useNumberField(__spreadProps$a(__spreadValues$b({}, 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) => {
+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) => {
   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$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]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$8 = (source, exclude) => {
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
+  if (source != null && __getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -927,7 +939,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     showButtons = false,
     incrementAriaLabel,
     decrementAriaLabel
-  } = _a, otherProps = __objRest$8(_a, [
+  } = _a, otherProps = __objRest$9(_a, [
     "label",
     "isDisabled",
     "error",
@@ -946,7 +958,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
   ]);
   sapphireReact.useThemeCheck();
   const inputRef = utils$1.useObjectRef(props.inputRef);
-  const formatMessage = i18n.useMessageFormatter(intlMessages);
+  const formatMessage = i18n.useMessageFormatter(intlMessages$1);
   const {
     inputProps,
     labelProps,
@@ -954,25 +966,25 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     decrementButtonProps,
     descriptionProps,
     errorMessageProps
-  } = useSapphireNumberField(__spreadProps$7(__spreadValues$8({}, props), {
+  } = useSapphireNumberField(__spreadProps$9(__spreadValues$a({}, 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$9(__spreadValues$a({}, utils$2.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$9(__spreadValues$a({}, 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$9(__spreadValues$a({}, labelProps), {
     size,
     necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
     contextualHelp
@@ -986,7 +998,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$9(__spreadValues$a({}, utils$1.mergeProps(inputProps, focusProps, {
     onChange: updateStyle,
     onBlur: updateStyle
   })), {
@@ -1001,10 +1013,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$a({
     variant: "increment",
     size
-  }, incrementButtonProps)), /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$8({
+  }, incrementButtonProps)), /* @__PURE__ */ React__default["default"].createElement(StepperButton, __spreadValues$a({
     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, {
@@ -1013,25 +1025,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$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) => {
   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$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]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 const ProgressIndicator = (props) => {
   const {
     maxValue = 100,
@@ -1041,7 +1053,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$8(__spreadValues$9({}, props), {
     minValue: 0,
     valueLabel: ariaValueText
   }));
@@ -1050,9 +1062,9 @@ const ProgressIndicator = (props) => {
   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), {
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$8(__spreadValues$9({}, progressBarProps), {
     className: styles__default$4["default"]["sapphire-progress--indicator"],
-    style: __spreadProps$6(__spreadValues$7({}, styleProps), { width: `${widthPercentage}%` }),
+    style: __spreadProps$8(__spreadValues$9({}, 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", {
@@ -1062,33 +1074,33 @@ const ProgressIndicator = (props) => {
   }))));
 };
 
-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) => {
+var __defProp$8 = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$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]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$7 = (source, exclude) => {
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$9.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))
+  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;
@@ -1099,7 +1111,7 @@ const Slider = (_a) => {
     labelPlacement = "above",
     note,
     name
-  } = _b, props = __objRest$7(_b, [
+  } = _b, props = __objRest$8(_b, [
     "label",
     "labelPlacement",
     "note",
@@ -1107,9 +1119,9 @@ const Slider = (_a) => {
   ]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$5(__spreadValues$6({}, styleProps), {
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$7(__spreadValues$8({}, styleProps), {
     labelPlacement
-  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Context, null, label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, null, label)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Slider, __spreadProps$5(__spreadValues$6({}, props), {
+  }), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Context, null, label && /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Label, null, label)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Slider, __spreadProps$7(__spreadValues$8({}, props), {
     style: { height: "100%" }
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
     className: clsx__default["default"](styles__default$5["default"]["sapphire-slider"]),
@@ -1141,33 +1153,33 @@ 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) => {
+var __defProp$7 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$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]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-var __objRest$6 = (source, exclude) => {
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$6.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$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.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;
@@ -1178,7 +1190,7 @@ const Breadcrumbs = (_a) => {
     size = "md",
     children,
     maxWidth
-  } = _b, props = __objRest$6(_b, [
+  } = _b, props = __objRest$7(_b, [
     "size",
     "children",
     "maxWidth"
@@ -1191,11 +1203,11 @@ const Breadcrumbs = (_a) => {
     value: { size }
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     ref: containerRef,
-    style: __spreadProps$4(__spreadValues$5({}, styleProps.style), {
+    style: __spreadProps$6(__spreadValues$7({}, styleProps.style), {
       maxWidth,
       display: "flex"
     })
-  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Breadcrumbs, __spreadProps$4(__spreadValues$5({}, props), {
+  }, /* @__PURE__ */ React__default["default"].createElement(reactAriaComponents.Breadcrumbs, __spreadProps$6(__spreadValues$7({}, props), {
     ref: breadcrumbRef,
     className: clsx__default["default"](styles__default$6["default"]["sapphire-breadcrumbs"], {
       [styles__default$6["default"]["sapphire-breadcrumbs--sm"]]: size === "sm",
@@ -1215,30 +1227,30 @@ const BreadcrumbsSeparator = () => {
   }, /* @__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) => {
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$5 = (source, exclude) => {
+var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$5.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$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.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;
@@ -1250,7 +1262,7 @@ const BreadcrumbItem = (_a) => {
   var _b = _a, {
     children,
     isDisabled: individualDisabled = false
-  } = _b, props = __objRest$5(_b, [
+  } = _b, props = __objRest$6(_b, [
     "children",
     "isDisabled"
   ]);
@@ -1259,7 +1271,7 @@ const BreadcrumbItem = (_a) => {
   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)
+    style: __spreadValues$6({}, styleProps.style)
   }, ({ isCurrent, isDisabled }) => /* @__PURE__ */ React__default["default"].createElement(BreadcrumbItemContext.Provider, {
     value: { isDisabled: isDisabled || individualDisabled }
   }, isCurrent ? /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Typography.Body, {
@@ -1269,44 +1281,44 @@ const BreadcrumbItem = (_a) => {
   }, children) : children, !isCurrent && /* @__PURE__ */ React__default["default"].createElement(BreadcrumbsSeparator, null)));
 };
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$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$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$4 = (source, exclude) => {
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$4.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$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.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;
 };
 const BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2(_a, ref) {
-  var _b = _a, { children } = _b, props = __objRest$4(_b, ["children"]);
+  var _b = _a, { children } = _b, props = __objRest$5(_b, ["children"]);
   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), {
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Button, __spreadProps$5(__spreadValues$5(__spreadValues$5({}, props), styleProps), {
     ref,
     size,
     variant: "tertiary",
@@ -1315,33 +1327,33 @@ const BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2(_a, ref
 });
 BreadcrumbItemLink.displayName = "BreadcrumbItemLink";
 
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    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 __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$3 = (source, exclude) => {
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
+  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;
@@ -1357,7 +1369,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$4(_c, ["onKeyDown"]), otherProps = __objRest$4(_a, [
     "gridCellProps",
     "isDisabled",
     "isFocused",
@@ -1369,7 +1381,7 @@ 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$4(__spreadProps$4(__spreadValues$4({
     ref
   }, utils$1.mergeProps({
     onKeyDown: (e) => {
@@ -1386,14 +1398,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$4(__spreadValues$4({}, 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$4({}, 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$4(__spreadValues$4({}, 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"
@@ -1407,33 +1419,33 @@ 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 __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 __defProp$3 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$1(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]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-var __objRest$2 = (source, exclude) => {
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1447,7 +1459,7 @@ function TagGroup(props) {
     labelPlacement = "above",
     note,
     onRemove: originalOnRemove
-  } = _a, otherProps = __objRest$2(_a, [
+  } = _a, otherProps = __objRest$3(_a, [
     "contextualHelp",
     "errorMessage",
     "label",
@@ -1469,16 +1481,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$3(__spreadValues$3({}, props), { onRemove }), state, ref);
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$3(__spreadValues$3({}, 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$3(__spreadValues$3({}, 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$3(__spreadValues$3({}, gridProps), {
     ref,
     className: styles__default$7["default"]["sapphire-tag-group"]
   }), Array.from(state.collection).map((item) => /* @__PURE__ */ React__default["default"].createElement(Tag, {
@@ -1494,33 +1506,33 @@ function TagGroup(props) {
 
 const TagItem = collections.Item;
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = 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 __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp(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]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest$1 = (source, exclude) => {
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+  if (source != null && __getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1532,7 +1544,7 @@ function LabeledValue(_a) {
     label: label$1,
     labelPlacement = "above",
     size = "lg"
-  } = _b, otherProps = __objRest$1(_b, [
+  } = _b, otherProps = __objRest$2(_b, [
     "children",
     "contextualHelp",
     "label",
@@ -1541,7 +1553,7 @@ function LabeledValue(_a) {
   ]);
   sapphireReact.useThemeCheck();
   const { fieldProps } = label.useField({ label: label$1 });
-  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps(__spreadValues({}, utils$1.mergeProps(fieldProps, otherProps)), {
+  return /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field, __spreadProps$2(__spreadValues$2({}, utils$1.mergeProps(fieldProps, otherProps)), {
     labelPlacement,
     size,
     noDefaultWidth: true
@@ -1551,17 +1563,17 @@ function LabeledValue(_a) {
   }, label$1)), /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Field.Control, null, children));
 }
 
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __objRest = (source, exclude) => {
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1571,7 +1583,7 @@ function Alert(_a) {
     children,
     title,
     variant = "info"
-  } = _b, props = __objRest(_b, [
+  } = _b, props = __objRest$1(_b, [
     "children",
     "title",
     "variant"
@@ -1617,6 +1629,184 @@ function Alert(_a) {
   }, children)));
 }
 
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const TimeSegment = ({ segment, state }) => segment.type === "hour" || segment.type === "minute" || segment.type === "dayPeriod" ? /* @__PURE__ */ React__default["default"].createElement(EditableSegment, {
+  segment,
+  state
+}) : /* @__PURE__ */ React__default["default"].createElement(SeparatorSegment, {
+  segment
+});
+const SeparatorSegment = ({ segment }) => /* @__PURE__ */ React__default["default"].createElement("span", {
+  "aria-hidden": "true",
+  className: clsx__default["default"](styles__default$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
+};
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const isAnySegmentModified = (segments) => segments.map(({ type, isPlaceholder }) => {
+  return type !== "literal" && !isPlaceholder;
+}).some((isModified) => isModified);
+function _TimeField(_a, ref) {
+  var _b = _a, {
+    size = "lg",
+    noClearButton = false,
+    error,
+    note,
+    contextualHelp,
+    necessityIndicator = false
+  } = _b, otherProps = __objRest(_b, [
+    "size",
+    "noClearButton",
+    "error",
+    "note",
+    "contextualHelp",
+    "necessityIndicator"
+  ]);
+  sapphireReact.useThemeCheck();
+  const timeFieldRef = utils$1.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,
   get: function () { return i18n.useLocale; }
@@ -1638,4 +1828,5 @@ exports.SearchableSelectFilter = SearchableSelectFilter;
 exports.Slider = _Slider;
 exports.TagGroup = TagGroup;
 exports.TagItem = TagItem;
+exports.TimeField = TimeField;
 //# sourceMappingURL=index.js.map