@danske/sapphire-react-lab 0.106.1 → 0.106.2

package/build/cjs/index.js

@@ -2,46 +2,63 @@
 
 var React = require('react');
 var clsx = require('clsx');
-var utils = require('@react-aria/utils');
+var filterDOMProps = require('react-aria/filterDOMProps');
+var useObjectRef = require('react-aria/useObjectRef');
 var styles = require('@danske/sapphire-css/components/accordion/accordion.module.css');
 var sapphireReact = require('@danske/sapphire-react');
-var focus = require('@react-aria/focus');
+var FocusScope = require('react-aria/FocusScope');
 var reactAriaComponents = require('react-aria-components');
 var react = require('@danske/sapphire-icons/react');
+var useEvent = require('react-aria/private/utils/useEvent');
 var alertStyles = require('@danske/sapphire-css/components/alert/alert.module.css');
-var i18n = require('@react-aria/i18n');
+var I18nProvider = require('react-aria/I18nProvider');
 var styles$1 = require('@danske/sapphire-css/components/amount/amount.module.css');
-var combobox = require('@react-aria/combobox');
-var utils$1 = require('@react-spectrum/utils');
-var breadcrumbs = require('@react-aria/breadcrumbs');
-var collections = require('@react-aria/collections');
+var useComboBox = require('react-aria/useComboBox');
+var i18n = require('@react-aria/i18n');
+var utils = require('@react-spectrum/utils');
+var useBreadcrumbs = require('react-aria/useBreadcrumbs');
+var Collection = require('react-aria/Collection');
+var CollectionBuilder = require('react-aria/CollectionBuilder');
+var mergeProps = require('react-aria/mergeProps');
+var useResizeObserver = require('react-aria/private/utils/useResizeObserver');
 var styles$2 = require('@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css');
+var BaseCollection = require('react-aria/private/collections/BaseCollection');
+var mergeRefs = require('react-aria/mergeRefs');
 var styles$3 = require('@danske/sapphire-css/components/dropzone/dropzone.module.css');
-var interactions = require('@react-aria/interactions');
-var dnd = require('@react-aria/dnd');
-var visuallyHidden = require('@react-aria/visually-hidden');
-var utils$2 = require('@react-stately/utils');
+var useHover = require('react-aria/useHover');
+var Pressable = require('react-aria/Pressable');
+var useId = require('react-aria/useId');
+var PressResponder = require('react-aria/private/interactions/PressResponder');
+var useDrop = require('react-aria/useDrop');
+var useClipboard = require('react-aria/useClipboard');
+var useFocusRing = require('react-aria/useFocusRing');
+var VisuallyHidden = require('react-aria/VisuallyHidden');
+var useEffectEvent = require('react-aria/private/utils/useEffectEvent');
+var useControlledState = require('react-stately/useControlledState');
 var styles$4 = require('@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css');
 var styles$5 = require('@danske/sapphire-css/components/flag/flag.module.css');
-var label = require('@react-aria/label');
+var useField = require('react-aria/useField');
 var textFieldStyles = require('@danske/sapphire-css/components/textField/textField.module.css');
-var numberfield$1 = require('@react-aria/numberfield');
-var numberfield = require('@react-stately/numberfield');
+var useNumberField = require('react-aria/useNumberField');
+var useNumberFieldState = require('react-stately/useNumberFieldState');
 var styles$6 = require('@danske/sapphire-css/components/sidebar/sidebar.module.css');
+var useFocusWithin = require('react-aria/useFocusWithin');
 var buttonStyles = require('@danske/sapphire-css/components/button/button.module.css');
 var reactTransitionGroup = require('react-transition-group');
-var listbox = require('@react-aria/listbox');
+var useListBox = require('react-aria/useListBox');
 var styles$7 = require('@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css');
-var progress = require('@react-aria/progress');
+var useProgressBar = require('react-aria/useProgressBar');
 var styles$8 = require('@danske/sapphire-css/components/slider/slider.module.css');
-var tag = require('@react-aria/tag');
-var list = require('@react-stately/list');
+var useTagGroup = require('react-aria/useTagGroup');
+var useListState = require('react-stately/useListState');
 var styles$9 = require('@danske/sapphire-css/components/tag/tag.module.css');
-var button = require('@react-aria/button');
-var collections$1 = require('@react-stately/collections');
+var useButton = require('react-aria/useButton');
+var FocusRing = require('react-aria/FocusRing');
+var Item = require('react-stately/Item');
 var styles$a = require('@danske/sapphire-css/components/dateField/dateField.module.css');
-var datepicker = require('@react-aria/datepicker');
-var datepicker$1 = require('@react-stately/datepicker');
+var useTimeField = require('react-aria/useTimeField');
+var useTimeFieldState = require('react-stately/useTimeFieldState');
+var useDateField = require('react-aria/useDateField');
 
 const AccordionContext = React.createContext({
   sidePadding: void 0,
@@ -72,11 +89,11 @@ const Accordion = React.forwardRef(function Accordion2({
 }, ref) {
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const forwardedRef = utils.useObjectRef(ref);
-  return /* @__PURE__ */ React.createElement(focus.FocusScope, null, /* @__PURE__ */ React.createElement(AccordionContext.Provider, { value: { sidePadding, headerLevel } }, /* @__PURE__ */ React.createElement(
+  const forwardedRef = useObjectRef.useObjectRef(ref);
+  return /* @__PURE__ */ React.createElement(FocusScope.FocusScope, null, /* @__PURE__ */ React.createElement(AccordionContext.Provider, { value: { sidePadding, headerLevel } }, /* @__PURE__ */ React.createElement(
     reactAriaComponents.DisclosureGroup,
     {
-      ...utils.filterDOMProps(props, { global: true, labelable: true }),
+      ...filterDOMProps.filterDOMProps(props, { global: true, labelable: true }),
       allowsMultipleExpanded,
       expandedKeys,
       defaultExpandedKeys,
@@ -115,7 +132,7 @@ const AccordionHeading = React.forwardRef(function AccordionHeading2({ children,
     {
       role: "heading",
       "aria-level": headerLevel ?? contextHeaderLevel,
-      ...utils.filterDOMProps(props, { global: true }),
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
       ref
     },
     /* @__PURE__ */ React.createElement(
@@ -134,8 +151,8 @@ const AccordionHeading = React.forwardRef(function AccordionHeading2({ children,
 });
 
 const AccordionItem = React.forwardRef(function AccordionItem2({ children, id, ...props }, forwardedRef) {
-  const ref = utils.useObjectRef(forwardedRef);
-  const focusManager = focus.useFocusManager();
+  const ref = useObjectRef.useObjectRef(forwardedRef);
+  const focusManager = FocusScope.useFocusManager();
   const onKeyDown = (e) => {
     if (!focusManager) return;
     if (!(e.target instanceof Element) || e.target.getAttribute("slot") !== "trigger")
@@ -161,7 +178,7 @@ const AccordionItem = React.forwardRef(function AccordionItem2({ children, id, .
         return;
     }
   };
-  utils.useEvent(ref, "keydown", onKeyDown);
+  useEvent.useEvent(ref, "keydown", onKeyDown);
   return /* @__PURE__ */ React.createElement(
     reactAriaComponents.Disclosure,
     {
@@ -183,7 +200,7 @@ const AccordionPanel = React.forwardRef(function AccordionPanel2({ children, ...
     reactAriaComponents.DisclosurePanel,
     {
       ref,
-      ...utils.filterDOMProps(props, { global: true }),
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
       className: clsx(styles["sapphire-accordion__item-content"]),
       style: {
         /**
@@ -238,7 +255,7 @@ function Alert({
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      ...utils.filterDOMProps(props, { global: true }),
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
       className: clsx.clsx(
         alertStyles["sapphire-alert"],
         {
@@ -301,7 +318,7 @@ const Amount = ({
 }) => {
   sapphireReact.useThemeCheck();
   const { styleProps, filteredProps } = sapphireReact.useSapphireStyleProps(props);
-  const { locale } = i18n.useLocale();
+  const { locale } = I18nProvider.useLocale();
   const formatter = React.useMemo(
     () => new Intl.NumberFormat(locale, {
       style: formatOptions?.currency ? "currency" : void 0,
@@ -392,9 +409,10 @@ function Autocomplete(props) {
     styleProps: { style, className }
   } = sapphireReact.useSapphireStyleProps(props);
   const inputRef = React.useRef(null);
-  const listBoxRef = utils$1.useFocusableRef(null);
+  const listBoxRef = utils.useFocusableRef(null);
   const popoverRef = React.useRef(null);
-  const triggerRef = utils$1.useFocusableRef(null);
+  const triggerRef = utils.useFocusableRef(null);
+  const collectionRef = React.useRef(null);
   const state = sapphireReact.useComboBoxState({
     ...props,
     inputValue,
@@ -405,10 +423,15 @@ function Autocomplete(props) {
       if (key !== null) {
         onSelectionChange?.(key);
         onSuggestionSelected?.(key);
+        const itemText = collectionRef.current?.getItem(key)?.textValue ?? "";
+        if (itemText) {
+          props.onInputChange?.(itemText);
+        }
       }
     }
   });
-  const { inputProps, listBoxProps } = combobox.useComboBox(
+  collectionRef.current = state.collection;
+  const { inputProps, listBoxProps } = useComboBox.useComboBox(
     {
       ...props,
       "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
@@ -435,7 +458,7 @@ function Autocomplete(props) {
     "div",
     {
       ref: triggerRef,
-      ...utils.filterDOMProps(otherProps, { global: true }),
+      ...filterDOMProps.filterDOMProps(otherProps, { global: true }),
       style: { display: "inline-flex", ...style },
       className
     },
@@ -503,7 +526,7 @@ const useBreadcrumbThreshold = (childrenCount, containerRef, breadcrumbRef) => {
       computeItemWidths();
     }
   }, [containerRef.current, childrenCount]);
-  utils.useResizeObserver({
+  useResizeObserver.useResizeObserver({
     ref: containerRef,
     onResize: () => {
       if (!containerRef.current) return;
@@ -531,9 +554,9 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs2({ maxWidth, size = "m
   const { styleProps } = sapphireReact.useSapphireStyleProps(RACprops);
   const containerRef = React.useRef(null);
   const { CollectionRoot } = React.useContext(reactAriaComponents.CollectionRendererContext);
-  const { navProps } = breadcrumbs.useBreadcrumbs(RACprops);
-  const DOMProps = utils.filterDOMProps(RACprops, { global: true });
-  return /* @__PURE__ */ React.createElement(collections.CollectionBuilder, { content: /* @__PURE__ */ React.createElement(collections.Collection, { ...RACprops }) }, (collection) => {
+  const { navProps } = useBreadcrumbs.useBreadcrumbs(RACprops);
+  const DOMProps = filterDOMProps.filterDOMProps(RACprops, { global: true });
+  return /* @__PURE__ */ React.createElement(CollectionBuilder.CollectionBuilder, { content: /* @__PURE__ */ React.createElement(Collection.Collection, { ...RACprops }) }, (collection) => {
     const { overflowNodes } = useBreadcrumbThreshold(
       collection.size,
       containerRef,
@@ -554,7 +577,7 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs2({ maxWidth, size = "m
         "ol",
         {
           ref,
-          ...utils.mergeProps(DOMProps, navProps),
+          ...mergeProps.mergeProps(DOMProps, navProps),
           className: clsx(styles$2["sapphire-breadcrumbs"], {
             [styles$2["sapphire-breadcrumbs--sm"]]: size === "sm",
             [styles$2["sapphire-breadcrumbs--lg"]]: size === "lg"
@@ -622,7 +645,7 @@ const BreadcrumbItemStatic = React.forwardRef(function BreadcrumbItemStatic2({ s
       "span",
       {
         ...tooltipProps,
-        ref: utils.mergeRefs(
+        ref: mergeRefs.mergeRefs(
           ref,
           tooltipContentRef,
           positioningRef
@@ -667,10 +690,10 @@ const BreadcrumbItemLink = React.forwardRef(function BreadcrumbItemLink2({ child
 });
 BreadcrumbItemLink.displayName = "BreadcrumbItemLink";
 
-class BreadcrumbItemCollectionNode extends collections.CollectionNode {
+class BreadcrumbItemCollectionNode extends BaseCollection.CollectionNode {
   static type = "item";
 }
-const BreadcrumbItem = collections.createLeafComponent(
+const BreadcrumbItem = CollectionBuilder.createLeafComponent(
   BreadcrumbItemCollectionNode,
   function BreadcrumbItem2(props, ref, node) {
     sapphireReact.useThemeCheck();
@@ -727,10 +750,10 @@ const FileTrigger = React.forwardRef(function FileTriggerWrapper(props, ref) {
     isDisabled = false,
     ...rest
   } = props;
-  const inputRef = utils.useObjectRef(ref);
-  const domProps = utils.filterDOMProps(rest, { global: true });
+  const inputRef = useObjectRef.useObjectRef(ref);
+  const domProps = filterDOMProps.filterDOMProps(rest, { global: true });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    interactions.PressResponder,
+    PressResponder.PressResponder,
     {
       isDisabled,
       onPress: () => {
@@ -836,13 +859,13 @@ const FileDropzone = React.forwardRef(function DropzoneWrapper(props, forwardedR
     getDropOperation = () => "copy",
     ...otherProps
   } = props;
-  const id = utils.useId();
+  const id = useId.useId();
   const paragraphId = props["aria-label"] ? void 0 : id;
   const format = i18n.useMessageFormatter(intlMessages$2);
-  const pressableRef = utils.useObjectRef(forwardedRef);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
+  const pressableRef = useObjectRef.useObjectRef(forwardedRef);
+  const { hoverProps, isHovered } = useHover.useHover({ isDisabled });
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { dropProps, isDropTarget: isDropping } = dnd.useDrop({
+  const { dropProps, isDropTarget: isDropping } = useDrop.useDrop({
     ...props,
     ref: pressableRef,
     hasDropButton: true,
@@ -853,8 +876,8 @@ const FileDropzone = React.forwardRef(function DropzoneWrapper(props, forwardedR
     { elementType: "div" },
     pressableRef
   );
-  const { focusProps, isFocusVisible } = focus.useFocusRing();
-  const { clipboardProps } = dnd.useClipboard({
+  const { focusProps, isFocusVisible } = useFocusRing.useFocusRing();
+  const { clipboardProps } = useClipboard.useClipboard({
     isDisabled,
     onPaste: (items) => onDrop({
       type: "drop",
@@ -882,17 +905,17 @@ const FileDropzone = React.forwardRef(function DropzoneWrapper(props, forwardedR
       onSelect: onFileTriggerSelect,
       isDisabled
     },
-    /* @__PURE__ */ React.createElement(interactions.Pressable, { ref: pressableRef, onPress: onFileSelectOpen }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Pressable.Pressable, { ref: pressableRef, onPress: onFileSelectOpen }, /* @__PURE__ */ React.createElement(
       "div",
       {
-        ...utils.mergeProps(
+        ...mergeProps.mergeProps(
           dropProps,
           hoverProps,
           clipboardProps,
           focusProps,
           buttonProps
         ),
-        ...utils.filterDOMProps(otherProps, { global: true }),
+        ...filterDOMProps.filterDOMProps(otherProps, { global: true }),
         style: { ...styleProps.style },
         className: clsx(
           styles$3["sapphire-dropzone"],
@@ -946,10 +969,10 @@ function FilterDropdown({
 }) {
   const triggerRef = React.useRef(null);
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const [isOpen, setIsOpen] = utils$2.useControlledState(
+  const [isOpen, setIsOpen] = useControlledState.useControlledState(
     isOpenProp,
     defaultOpen,
-    utils.useEffectEvent(onOpenChange)
+    useEffectEvent.useEffectEvent(onOpenChange)
   );
   const hasValue = value != null && value !== "";
   const close = () => setIsOpen(false);
@@ -957,7 +980,6 @@ function FilterDropdown({
     e.preventDefault();
     onApply?.();
     close();
-    triggerRef.current?.focus();
   };
   const applyButton = /* @__PURE__ */ React.createElement(
     sapphireReact.Button,
@@ -981,7 +1003,7 @@ function FilterDropdown({
       popoverContent: /* @__PURE__ */ React.createElement(
         "form",
         {
-          ...utils.filterDOMProps(props, { global: true }),
+          ...filterDOMProps.filterDOMProps(props, { global: true }),
           onSubmit,
           className: clsx(
             styles$4["sapphire-filter-dropdown"],
@@ -1004,7 +1026,7 @@ function FilterDropdown({
           clearButtonLabel
         ), hasApplyButton ? applyButton : (
           // The following is necessary to have the form submitted on "Enter", if there is more than one field
-          /* @__PURE__ */ React.createElement(visuallyHidden.VisuallyHidden, null, applyButton)
+          /* @__PURE__ */ React.createElement(VisuallyHidden.VisuallyHidden, null, applyButton)
         )))
       )
     },
@@ -1029,7 +1051,7 @@ function SearchableSelectFilter(props) {
   const searchFieldRef = React.useRef(null);
   const searchFieldProps = searchField.props;
   const listBoxProps = listBox.props;
-  const [searchQuery, setSearchQuery] = utils$2.useControlledState(
+  const [searchQuery, setSearchQuery] = useControlledState.useControlledState(
     searchFieldProps?.value,
     "",
     searchFieldProps.onChange
@@ -1052,7 +1074,7 @@ function SearchableSelectFilter(props) {
     /* @__PURE__ */ React.createElement(sapphireReact.Flex, { flexDirection: "column", height: "100%" }, React.cloneElement(searchField, {
       size: "md",
       value: searchFieldProps.value || searchQuery,
-      inputRef: utils.mergeRefs(searchFieldRef, searchFieldProps.inputRef),
+      inputRef: mergeRefs.mergeRefs(searchFieldRef, searchFieldProps.inputRef),
       width: searchFieldProps.width || "100%",
       marginBottom: searchFieldProps.marginBottom || sapphireReact.tokens.size.spacingSm,
       onChange: setSearchQuery
@@ -1073,7 +1095,7 @@ function SearchableSelectFilter(props) {
 const Flag = React.forwardRef(function Flag2({ size = "lg", rounded, "aria-label": ariaLabel, ...props }, ref) {
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  return React.cloneElement(utils$1.getWrappedElement(props.children), {
+  return React.cloneElement(utils.getWrappedElement(props.children), {
     ref,
     role: "img",
     ...ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": true },
@@ -1092,22 +1114,22 @@ const Flag = React.forwardRef(function Flag2({ size = "lg", rounded, "aria-label
 function LabeledValue({
   children,
   contextualHelp,
-  label: label$1,
+  label,
   labelPlacement = "above",
   size = "lg",
   ...otherProps
 }) {
   sapphireReact.useThemeCheck();
-  const { fieldProps } = label.useField({ label: label$1 });
+  const { fieldProps } = useField.useField({ label });
   return /* @__PURE__ */ React.createElement(
     sapphireReact.Field,
     {
-      ...utils.mergeProps(fieldProps, otherProps),
+      ...mergeProps.mergeProps(fieldProps, otherProps),
       labelPlacement,
       size,
       noDefaultWidth: true
     },
-    /* @__PURE__ */ React.createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React.createElement(sapphireReact.Label, { contextualHelp, size }, label$1)),
+    /* @__PURE__ */ React.createElement(sapphireReact.Field.Label, null, /* @__PURE__ */ React.createElement(sapphireReact.Label, { contextualHelp, size }, label)),
     /* @__PURE__ */ React.createElement(sapphireReact.Field.Control, null, children)
   );
 }
@@ -1178,16 +1200,16 @@ const StepperButton = ({
 }) => {
   const ref = React.useRef(null);
   const { buttonProps, isPressed } = sapphireReact.useButton(props, ref);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled: props.isDisabled });
-  const { focusProps, isFocusVisible } = focus.useFocusRing();
+  const { hoverProps, isHovered } = useHover.useHover({ isDisabled: props.isDisabled });
+  const { focusProps, isFocusVisible } = useFocusRing.useFocusRing();
   return /* @__PURE__ */ React.createElement(
     "button",
     {
-      ...utils.mergeProps(
+      ...mergeProps.mergeProps(
         buttonProps,
         hoverProps,
         focusProps,
-        utils.filterDOMProps(props, { global: true })
+        filterDOMProps.filterDOMProps(props, { global: true })
       ),
       tabIndex: 0,
       ref,
@@ -1601,12 +1623,12 @@ function useNumberFieldFormatting({
 }
 
 const useSapphireNumberField = ({ error, ...numberFieldProps }, ref) => {
-  const { locale } = i18n.useLocale();
-  const numberFieldState = numberfield.useNumberFieldState({
+  const { locale } = I18nProvider.useLocale();
+  const numberFieldState = useNumberFieldState.useNumberFieldState({
     ...numberFieldProps,
     locale
   });
-  const numberFieldAria = numberfield$1.useNumberField(
+  const numberFieldAria = useNumberField.useNumberField(
     {
       ...numberFieldProps,
       validationState: error === false || error === void 0 ? void 0 : "invalid"
@@ -1643,7 +1665,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     return { prefix: affix.prefix, postfix: affix.postfix };
   }, [affix]);
   sapphireReact.useThemeCheck();
-  const inputRef = utils.useObjectRef(props.inputRef);
+  const inputRef = useObjectRef.useObjectRef(props.inputRef);
   const formatMessage = i18n.useMessageFormatter(intlMessages$1);
   const {
     inputProps,
@@ -1660,9 +1682,9 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
     },
     inputRef
   );
-  const { focusProps, isFocusVisible } = focus.useFocusRing();
+  const { focusProps, isFocusVisible } = useFocusRing.useFocusRing();
   const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
-  const { locale } = i18n.useLocale();
+  const { locale } = I18nProvider.useLocale();
   const formatter = React.useMemo(
     () => new Intl.NumberFormat(locale, props.formatOptions),
     [locale, props.formatOptions]
@@ -1685,7 +1707,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
   };
   const containerRef = React.useRef(null);
   React.useImperativeHandle(ref, () => ({
-    ...utils$1.createFocusableRef(containerRef, inputRef),
+    ...utils.createFocusableRef(containerRef, inputRef),
     /**
      * (This function is deprecated. Use `inputRef` prop)
      * @deprecated
@@ -1741,7 +1763,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
         /* @__PURE__ */ React.createElement(
           "input",
           {
-            ...utils.mergeProps(
+            ...mergeProps.mergeProps(
               inputProps,
               focusProps,
               {
@@ -1815,7 +1837,7 @@ const SecondarySidebarProvider = ({
   children
 }) => {
   const context = React.useContext(SecondarySidebarContext);
-  const [secondarySidebarId, setSecondarySidebarId] = utils$2.useControlledState(openedId, defaultOpenedId ?? null, onOpenedIdChange);
+  const [secondarySidebarId, setSecondarySidebarId] = useControlledState.useControlledState(openedId, defaultOpenedId ?? null, onOpenedIdChange);
   const [content, setContent] = React.useState(null);
   return /* @__PURE__ */ React.createElement(
     SecondarySidebarContext.Provider,
@@ -1858,7 +1880,7 @@ const ResponsiveSidebarProvider = ({
   onPanelOpenChange,
   children
 }) => {
-  const [isOpen, setOpen] = utils$2.useControlledState(
+  const [isOpen, setOpen] = useControlledState.useControlledState(
     isPanelOpen,
     defaultIsPanelOpen ?? false,
     onPanelOpenChange
@@ -2016,8 +2038,8 @@ const SidebarContent = ({
 }) => {
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
   const { sidebarProps } = useSidebar();
-  const { focusWithinProps } = interactions.useFocusWithin(
-    utils.mergeProps(
+  const { focusWithinProps } = useFocusWithin.useFocusWithin(
+    mergeProps.mergeProps(
       {
         onBlurWithin,
         onFocusWithin,
@@ -2032,7 +2054,7 @@ const SidebarContent = ({
     "div",
     {
       ...styleProps,
-      ...utils.filterDOMProps(props, { global: true }),
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
       ...focusWithinProps,
       className: clsx(styles$6["sapphire-sidebar"]),
       tabIndex: -1
@@ -2063,7 +2085,7 @@ const SidebarHeader = ({
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      ...utils.filterDOMProps(props),
+      ...filterDOMProps.filterDOMProps(props),
       className: clsx(styles$6["sapphire-sidebar__header"])
     },
     children,
@@ -2080,7 +2102,7 @@ const SidebarItem = React.forwardRef(function SidebarItem2({ isActive, children,
       variant: "tertiary",
       elementType: "a",
       "aria-current": isActive ? "page" : void 0,
-      ...utils.mergeProps(props, itemProps),
+      ...mergeProps.mergeProps(props, itemProps),
       UNSAFE_className: clsx(
         buttonStyles["sapphire-button--stretch-left-align"],
         { [buttonStyles["sapphire-button--selected"]]: isActive }
@@ -2102,7 +2124,7 @@ const SidebarExpandableItem = React.forwardRef(
     const { openedId, setContent, themeVariant } = useSecondarySidebarContext();
     const isCollapsed = useIsSidebarCollapsed();
     const { getExpandableItemProps, secondarySidebarProps } = useSidebar();
-    const itemId = utils.useId(id);
+    const itemId = useId.useId(id);
     const isOpen = openedId === itemId;
     React.useLayoutEffect(() => {
       if (isOpen) {
@@ -2115,7 +2137,7 @@ const SidebarExpandableItem = React.forwardRef(
         variant: "tertiary",
         "aria-current": isActive || void 0,
         ref,
-        ...utils.mergeProps(
+        ...mergeProps.mergeProps(
           getExpandableItemProps(itemId),
           props
         ),
@@ -2177,7 +2199,7 @@ const SecondarySidebar = ({
           [styles$6["sapphire-sidebar--slide-out"]]: transitionState === "exiting"
         })
       },
-      /* @__PURE__ */ React.createElement(focus.FocusScope, { restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(FocusScope.FocusScope, { restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React.createElement(
         _Sidebar,
         {
           themeVariant,
@@ -2207,7 +2229,7 @@ const SidebarSection = ({
 }) => {
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { itemProps, headingProps, groupProps } = listbox.useListBoxSection({
+  const { itemProps, headingProps, groupProps } = useListBox.useListBoxSection({
     heading: title,
     "aria-label": label
   });
@@ -2222,7 +2244,7 @@ const SidebarSection = ({
     {
       ...itemProps,
       ...styleProps,
-      ...utils.filterDOMProps(props, { global: true })
+      ...filterDOMProps.filterDOMProps(props, { global: true })
     },
     title && /* @__PURE__ */ React.createElement(
       "div",
@@ -2259,7 +2281,7 @@ const SidebarBody = ({
       className: clsx(styles$6["sapphire-sidebar__body"], {
         [styles$6["sapphire-sidebar__body--scrolled"]]: isScrolled
       }),
-      ...utils.filterDOMProps(props, { global: true }),
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
       ...scrollCheckProps
     },
     children
@@ -2275,7 +2297,7 @@ const SidebarList = ({
   return /* @__PURE__ */ React.createElement(
     RootNode,
     {
-      ...utils.filterDOMProps(props, { global: true }),
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
       className: clsx(styles$6["sapphire-sidebar__nav-list"])
     },
     children
@@ -2302,7 +2324,7 @@ const ProgressIndicator = (props) => {
   } = props;
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
-  const { progressBarProps } = progress.useProgressBar({
+  const { progressBarProps } = useProgressBar.useProgressBar({
     ...props,
     minValue: 0,
     valueLabel: ariaValueText
@@ -2313,7 +2335,7 @@ const ProgressIndicator = (props) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      ...utils.filterDOMProps(props, { global: true }),
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
       className: clsx(styles$7["sapphire-progress"])
     },
     /* @__PURE__ */ React.createElement(
@@ -2396,16 +2418,16 @@ function Tag(props) {
     removeButtonProps,
     rowProps: { onKeyDown, ...rowProps },
     ...otherProps
-  } = tag.useTag(props, state, ref);
-  const { hoverProps, isHovered } = interactions.useHover({ isDisabled });
+  } = useTagGroup.useTag(props, state, ref);
+  const { hoverProps, isHovered } = useHover.useHover({ isDisabled });
   const hasAction = otherProps.hasAction;
   return /* @__PURE__ */ React.createElement(sapphireReact.TooltipIfNeeded, { title: item.rendered }, (tooltipRef, tooltipProps) => {
     const { ref: tooltipTargetRef, ...restTooltipProps } = tooltipProps || {};
-    return /* @__PURE__ */ React.createElement(focus.FocusRing, { focusRingClass: styles$9["is-focus"] }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(FocusRing.FocusRing, { focusRingClass: styles$9["is-focus"] }, /* @__PURE__ */ React.createElement(
       "div",
       {
-        ref: utils.mergeRefs(ref, tooltipTargetRef),
-        ...utils.mergeProps(
+        ref: mergeRefs.mergeRefs(ref, tooltipTargetRef),
+        ...mergeProps.mergeProps(
           {
             onKeyDown: (e) => {
               if (e.key !== " ") {
@@ -2454,7 +2476,7 @@ function Tag(props) {
 }
 function RemoveButton(removeButtonProps) {
   const buttonRef = React.useRef(null);
-  const { buttonProps } = button.useButton(removeButtonProps, buttonRef);
+  const { buttonProps } = useButton.useButton(removeButtonProps, buttonRef);
   return /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -2480,7 +2502,7 @@ function TagGroup(props) {
     ...otherProps
   } = props;
   const ref = React.useRef(null);
-  const state = list.useListState(props);
+  const state = useListState.useListState(props);
   const onRemove = originalOnRemove ? (keys) => {
     console.warn(
       "The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead."
@@ -2494,7 +2516,7 @@ function TagGroup(props) {
       }
     });
   };
-  const { descriptionProps, gridProps, labelProps, errorMessageProps } = tag.useTagGroup({ ...props, onRemove }, state, ref);
+  const { descriptionProps, gridProps, labelProps, errorMessageProps } = useTagGroup.useTagGroup({ ...props, onRemove }, state, ref);
   return /* @__PURE__ */ React.createElement(
     sapphireReact.Field,
     {
@@ -2532,7 +2554,7 @@ function TagGroup(props) {
   );
 }
 
-const TagItem = collections$1.Item;
+const TagItem = Item.Item;
 
 const TimeSegment = ({ segment, state }) => segment.type === "hour" || segment.type === "minute" || segment.type === "dayPeriod" ? /* @__PURE__ */ React.createElement(EditableSegment, { segment, state }) : /* @__PURE__ */ React.createElement(SeparatorSegment, { segment });
 const SeparatorSegment = ({ segment }) => /* @__PURE__ */ React.createElement(
@@ -2548,7 +2570,7 @@ const SeparatorSegment = ({ segment }) => /* @__PURE__ */ React.createElement(
 );
 const EditableSegment = ({ segment, state }) => {
   const ref = React.useRef(null);
-  const { segmentProps } = datepicker.useDateSegment(segment, state, ref);
+  const { segmentProps } = useDateField.useDateSegment(segment, state, ref);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -2622,15 +2644,15 @@ function _TimeField({
   ...otherProps
 }, ref) {
   sapphireReact.useThemeCheck();
-  const timeFieldRef = utils.useObjectRef(ref);
-  const { locale } = i18n.useLocale();
+  const timeFieldRef = useObjectRef.useObjectRef(ref);
+  const { locale } = I18nProvider.useLocale();
   const formatMessage = i18n.useMessageFormatter(intlMessages);
-  const state = datepicker$1.useTimeFieldState({
+  const state = useTimeFieldState.useTimeFieldState({
     ...otherProps,
     locale,
     isInvalid: error ? true : void 0
   });
-  const { fieldProps, labelProps } = datepicker.useTimeField(
+  const { fieldProps, labelProps } = useTimeField.useTimeField(
     { ...otherProps },
     state,
     timeFieldRef
@@ -2684,7 +2706,7 @@ const TimeField = React.forwardRef(_TimeField);
 
 Object.defineProperty(exports, "useLocale", {
   enumerable: true,
-  get: function () { return i18n.useLocale; }
+  get: function () { return I18nProvider.useLocale; }
 });
 exports.Accordion = _Accordion;
 exports.AccordionContext = AccordionContext;