@itwin/itwinui-react 3.8.1 → 3.9.1

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { AnyString, PolymorphicForwardRefComponent } from '../../utils/index.js';
 /** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
 export declare const ButtonGroupContext: React.Context<string | undefined>;
 type ButtonGroupProps = {
@@ -27,13 +27,22 @@ type ButtonGroupProps = {
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * ARIA role for the ButtonGroup.
+     *
+     * If set to toolbar', it will automatically support arrow-key navigation.
+     *
+     * **Note**: `role="toolbar"` should not be used when the ButtonGroup contains
+     * non-button elements (such as inputs).
+     */
+    role?: 'toolbar' | AnyString;
 };
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
  *
  * @example
- * <ButtonGroup>
+ * <ButtonGroup role="toolbar">
  *   <IconButton>
  *     <SvgAdd />
  *   </IconButton>

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
-import { FloatingDelayGroup } from '@floating-ui/react';
+import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
+import { Composite, CompositeItem, FloatingDelayGroup, } from '@floating-ui/react';
 // ----------------------------------------------------------------------------
 /** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
 export const ButtonGroupContext = React.createContext(undefined);
@@ -15,7 +15,7 @@ ButtonGroupContext.displayName = 'ButtonGroupContext';
  * Handles responsive overflow when the `overflowButton` prop is specified.
  *
  * @example
- * <ButtonGroup>
+ * <ButtonGroup role="toolbar">
  *   <IconButton>
  *     <SvgAdd />
  *   </IconButton>
@@ -38,34 +38,46 @@ ButtonGroupContext.displayName = 'ButtonGroupContext';
  *   {buttons}
  * </ButtonGroup>
  */
-export const ButtonGroup = React.forwardRef((props, ref) => {
-    const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
-    const items = React.useMemo(() => React.Children.toArray(children).filter(Boolean), [children]);
-    const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
-    const refs = useMergedRefs(!!overflowButton ? overflowRef : null, ref);
+export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
+    const { children: childrenProp, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
+    const children = React.useMemo(() => {
+        if (props.role !== 'toolbar') {
+            return childrenProp;
+        }
+        return React.Children.map(childrenProp, (child, index) => React.isValidElement(child) ? (React.createElement(CompositeItem, { key: index, render: child })) : (child));
+    }, [childrenProp, props.role]);
+    const node = overflowButton ? (React.createElement(OverflowGroup, { orientation: orientation, overflowButton: overflowButton, overflowPlacement: overflowPlacement, ref: forwardedRef, ...rest }, children)) : (React.createElement(BaseGroup, { orientation: orientation, ref: forwardedRef, ...rest }, children));
     return (React.createElement(FloatingDelayGroup, { delay: { open: 50, close: 250 } },
-        React.createElement(ButtonGroupContext.Provider, { value: orientation },
-            React.createElement(Box, { className: cx('iui-button-group', {
-                    'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-                }, className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: refs, ...rest }, (() => {
-                if (!overflowButton) {
-                    return children;
-                }
-                if (!(visibleCount < items.length)) {
-                    return items;
-                }
-                const overflowStart = overflowPlacement === 'start'
-                    ? items.length - visibleCount
-                    : visibleCount - 1;
-                return (React.createElement(React.Fragment, null,
-                    overflowButton &&
-                        overflowPlacement === 'start' &&
-                        overflowButton(overflowStart),
-                    overflowPlacement === 'start'
-                        ? items.slice(overflowStart + 1)
-                        : items.slice(0, Math.max(0, overflowStart)),
-                    overflowButton &&
-                        overflowPlacement === 'end' &&
-                        overflowButton(overflowStart)));
-            })()))));
+        React.createElement(ButtonGroupContext.Provider, { value: orientation }, props.role === 'toolbar' ? (React.createElement(Composite, { orientation: orientation, render: node })) : (node))));
+});
+// ----------------------------------------------------------------------------
+const BaseGroup = React.forwardRef((props, forwardedRef) => {
+    const { orientation, className, ...rest } = props;
+    return (React.createElement(Box, { className: cx('iui-button-group', className), "data-iui-orientation": orientation === 'vertical' ? orientation : undefined, ref: forwardedRef, ...rest }));
+});
+// ----------------------------------------------------------------------------
+const OverflowGroup = React.forwardRef((props, forwardedRef) => {
+    const { children: childrenProp, orientation, overflowButton, overflowPlacement, ...rest } = props;
+    const items = React.useMemo(() => React.Children.toArray(childrenProp).filter(Boolean), [childrenProp]);
+    const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
+    return (React.createElement(BaseGroup, { orientation: orientation, ...rest, className: cx({
+            'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
+        }, props.className), ref: useMergedRefs(forwardedRef, overflowRef) }, (() => {
+        if (!(visibleCount < items.length)) {
+            return items;
+        }
+        const overflowStart = overflowPlacement === 'start'
+            ? items.length - visibleCount
+            : visibleCount - 1;
+        return (React.createElement(React.Fragment, null,
+            overflowButton &&
+                overflowPlacement === 'start' &&
+                overflowButton(overflowStart),
+            overflowPlacement === 'start'
+                ? items.slice(overflowStart + 1)
+                : items.slice(0, Math.max(0, overflowStart)),
+            overflowButton &&
+                overflowPlacement === 'end' &&
+                overflowButton(overflowStart)));
+    })()));
 });

package/esm/core/Buttons/Button.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ButtonBase } from '../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { ButtonBase } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type ButtonProps = {
     /**
      * Modify size of the button.
@@ -32,6 +32,12 @@ export type ButtonProps = {
      * Passes props to the end icon.
      */
     endIconProps?: React.ComponentProps<'span'>;
+    /**
+     * Whether the button should stretch to fill the width of the container.
+     *
+     * This is useful on narrow containers and mobile views.
+     */
+    stretched?: boolean;
 } & Pick<React.ComponentProps<typeof ButtonBase>, 'htmlDisabled'>;
 /**
  * Generic button component

package/esm/core/Buttons/Button.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, ButtonBase } from '../utils/index.js';
+import { Box, ButtonBase } from '../../utils/index.js';
 /**
  * Generic button component
  * @example
@@ -15,8 +15,11 @@ import { Box, ButtonBase } from '../utils/index.js';
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 export const Button = React.forwardRef((props, ref) => {
-    const { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, ...rest } = props;
-    return (React.createElement(ButtonBase, { ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, ...rest },
+    const { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, stretched, ...rest } = props;
+    return (React.createElement(ButtonBase, { ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, ...rest, style: {
+            '--_iui-width': stretched ? '100%' : undefined,
+            ...props.style,
+        } },
         startIcon && (React.createElement(Box, { as: 'span', "aria-hidden": true, ...startIconProps, className: cx('iui-button-icon', startIconProps?.className) }, startIcon)),
         children && React.createElement("span", { ...labelProps }, children),
         endIcon && (React.createElement(Box, { as: 'span', "aria-hidden": true, ...endIconProps, className: cx('iui-button-icon', endIconProps?.className) }, endIcon))));

package/esm/core/Buttons/DropdownButton.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonProps } from './Button.js';
 import type { DropdownMenuProps } from '../DropdownMenu/DropdownMenu.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

package/esm/core/Buttons/DropdownButton.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Button } from './Button.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall } from '../utils/index.js';
+import { SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
 /**
  * Button that opens a DropdownMenu.
  * @example

package/esm/core/Buttons/IconButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import type { ButtonProps } from './Button.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type IconButtonProps = {
     /**
      * Button gets active style.

package/esm/core/Buttons/IconButton.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, ButtonBase } from '../utils/index.js';
+import { Box, ButtonBase } from '../../utils/index.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { ButtonGroupContext } from '../ButtonGroup/ButtonGroup.js';

package/esm/core/Buttons/IdeasButton.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type IdeasButtonProps = {
     /**
      * On click handler.

package/esm/core/Buttons/IdeasButton.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { SvgSmileyHappy } from '../utils/index.js';
+import { SvgSmileyHappy } from '../../utils/index.js';
 import { Button } from './Button.js';
 /**
  * Ideas button

package/esm/core/Buttons/SplitButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ButtonProps } from './Button.js';
 import { IconButton } from './IconButton.js';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
 import type { Placement } from '@floating-ui/react';
 export type SplitButtonProps = ButtonProps & {
     /**

package/esm/core/Buttons/SplitButton.js

@@ -6,7 +6,7 @@ import cx from 'classnames';
 import * as React from 'react';
 import { Button } from './Button.js';
 import { IconButton } from './IconButton.js';
-import { Box, Portal, SvgCaretDownSmall, SvgCaretUpSmall, useId, useMergedRefs, } from '../utils/index.js';
+import { Box, Portal, SvgCaretDownSmall, SvgCaretUpSmall, useId, useMergedRefs, } from '../../utils/index.js';
 import { Menu } from '../Menu/Menu.js';
 import { usePopover } from '../Popover/Popover.js';
 /**

package/esm/core/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type CarouselProps = {
     /**
      * Index of the currently shown slide.
@@ -42,7 +42,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -73,7 +73,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             }> & {
                 content: React.ReactNode;
                 children?: React.ReactNode;
-            } & import("../utils/index.js").PortalProps & {
+            } & import("../../utils/index.js").PortalProps & {
                 placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;
@@ -105,7 +105,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -136,7 +136,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             }> & {
                 content: React.ReactNode;
                 children?: React.ReactNode;
-            } & import("../utils/index.js").PortalProps & {
+            } & import("../../utils/index.js").PortalProps & {
                 placement?: import("@floating-ui/utils").Placement | undefined;
                 visible?: boolean | undefined;
                 onVisibleChange?: ((visible: boolean) => void) | undefined;

package/esm/core/Carousel/Carousel.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMergedRefs, Box, useLatestRef, useId } from '../utils/index.js';
+import { useMergedRefs, Box, useLatestRef, useId } from '../../utils/index.js';
 import { CarouselContext } from './CarouselContext.js';
 import { CarouselSlider } from './CarouselSlider.js';
 import { CarouselSlide } from './CarouselSlide.js';

package/esm/core/Carousel/CarouselDot.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type CarouselDotProps = {
     /** Is this dot currently active? */
     isActive?: boolean;

package/esm/core/Carousel/CarouselDot.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { ButtonBase } from '../utils/index.js';
+import { ButtonBase } from '../../utils/index.js';
 /**
  * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
  * It should be used as a child of `CarouselDotsList`.

package/esm/core/Carousel/CarouselDotsList.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type CarouselDotsListProps = {
     /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
     length?: number;

package/esm/core/Carousel/CarouselDotsList.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, Box, } from '../utils/index.js';
+import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, Box, } from '../../utils/index.js';
 import { CarouselDot } from './CarouselDot.js';
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`
  * shown on the left and right, and the `CarouselDotsList` component shown in the middle.
@@ -9,7 +9,7 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -40,7 +40,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         }> & {
             content: React.ReactNode;
             children?: React.ReactNode;
-        } & import("../utils/index.js").PortalProps & {
+        } & import("../../utils/index.js").PortalProps & {
             placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;
@@ -72,7 +72,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -103,7 +103,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
         }> & {
             content: React.ReactNode;
             children?: React.ReactNode;
-        } & import("../utils/index.js").PortalProps & {
+        } & import("../../utils/index.js").PortalProps & {
             placement?: import("@floating-ui/utils").Placement | undefined;
             visible?: boolean | undefined;
             onVisibleChange?: ((visible: boolean) => void) | undefined;

package/esm/core/Carousel/CarouselNavigation.js

@@ -7,7 +7,7 @@ import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { CarouselDotsList } from './CarouselDotsList.js';
-import { Box, SvgChevronLeft, SvgChevronRight } from '../utils/index.js';
+import { Box, SvgChevronLeft, SvgChevronRight } from '../../utils/index.js';
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
     return (React.createElement(Box, { className: cx('iui-carousel-navigation', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,

package/esm/core/Carousel/CarouselSlide.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type CarouselSlideProps = {
     /**
      * Index of the current slide.

package/esm/core/Carousel/CarouselSlide.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, mergeEventHandlers, useIntersection, useMergedRefs, } from '../utils/index.js';
+import { Box, mergeEventHandlers, useIntersection, useMergedRefs, } from '../../utils/index.js';
 import { CarouselContext } from './CarouselContext.js';
 /**
  * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.

package/esm/core/Carousel/CarouselSlider.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */

package/esm/core/Carousel/CarouselSlider.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getWindow, useMergedRefs, useLayoutEffect, Box, } from '../utils/index.js';
+import { getWindow, useMergedRefs, useLayoutEffect, Box, } from '../../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */

package/esm/core/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.

package/esm/core/Checkbox/Checkbox.js

@@ -5,7 +5,7 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
-import { useMergedRefs, Box } from '../utils/index.js';
+import { useMergedRefs, Box } from '../../utils/index.js';
 /**
  * Simple input checkbox
  * @example

package/esm/core/ColorPicker/ColorBuilder.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 /**
  * `ColorBuilder` consists of two parts:
  * a color canvas to adjust saturation and lightness values,

package/esm/core/ColorPicker/ColorBuilder.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { ColorValue, getBoundedValue, useEventListener, useMergedRefs, Box, } from '../utils/index.js';
+import { ColorValue, getBoundedValue, useEventListener, useMergedRefs, Box, } from '../../utils/index.js';
 import { Slider } from '../Slider/Slider.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 const getVerticalPercentageOfRectangle = (rect, pointer) => {

package/esm/core/ColorPicker/ColorInputPanel.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type ColorInputPanelProps = {
     /**
      * The default color format to be inputted in the panel.

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Input } from '../Input/Input.js';
-import { ColorValue, SvgSwap, Box, useId } from '../utils/index.js';
+import { ColorValue, SvgSwap, Box, useId } from '../../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.

package/esm/core/ColorPicker/ColorPalette.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ColorValue } from '../utils/index.js';
-import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
+import { ColorValue } from '../../utils/index.js';
+import type { ColorType, PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type ColorPaletteProps = {
     /**
      * Label shown above the palette.

package/esm/core/ColorPicker/ColorPalette.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { ColorValue, Box } from '../utils/index.js';
+import { ColorValue, Box } from '../../utils/index.js';
 import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';

package/esm/core/ColorPicker/ColorPicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ColorValue } from '../utils/index.js';
-import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
+import { ColorValue } from '../../utils/index.js';
+import type { ColorType, PolymorphicForwardRefComponent } from '../../utils/index.js';
 export declare const getColorValue: (color: ColorType | ColorValue | undefined) => ColorValue;
 type ColorPickerProps = {
     /**

package/esm/core/ColorPicker/ColorPicker.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { ColorValue, useMergedRefs, Box } from '../utils/index.js';
+import { ColorValue, useMergedRefs, Box } from '../../utils/index.js';
 import cx from 'classnames';
 import { ColorPickerContext } from './ColorPickerContext.js';
 export const getColorValue = (color) => {

package/esm/core/ColorPicker/ColorPickerContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ColorValue, HsvColor } from '../utils/index.js';
+import type { ColorValue, HsvColor } from '../../utils/index.js';
 export declare const ColorPickerContext: React.Context<{
     activeColor: ColorValue;
     setActiveColor: (color: ColorValue | ((prevColor: ColorValue) => ColorValue)) => void;

package/esm/core/ColorPicker/ColorSwatch.d.ts

@@ -1,5 +1,5 @@
-import { ColorValue } from '../utils/index.js';
-import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
+import { ColorValue } from '../../utils/index.js';
+import type { ColorType, PolymorphicForwardRefComponent } from '../../utils/index.js';
 type ColorSwatchProps = {
     /**
      * Color code.

package/esm/core/ColorPicker/ColorSwatch.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { ColorValue, Box, ButtonBase } from '../utils/index.js';
+import { ColorValue, Box, ButtonBase } from '../../utils/index.js';
 import { getColorValue } from './ColorPicker.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**

package/esm/core/ComboBox/ComboBox.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
 import type { Input } from '../Input/Input.js';
-import type { InputContainerProps, CommonProps } from '../utils/index.js';
+import type { InputContainerProps, CommonProps } from '../../utils/index.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
 type ActionType = 'added' | 'removed';
 type MultipleOnChangeProps<T> = {

package/esm/core/ComboBox/ComboBox.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { MenuExtraContent } from '../Menu/MenuExtraContent.js';
 import { SelectTag } from '../Select/SelectTag.js';
 import { Text } from '../Typography/Text.js';
-import { mergeRefs, useLatestRef, useLayoutEffect, AutoclearingHiddenLiveRegion, useId, } from '../utils/index.js';
+import { mergeRefs, useLatestRef, useLayoutEffect, AutoclearingHiddenLiveRegion, useId, } from '../../utils/index.js';
 import { usePopover } from '../Popover/Popover.js';
 import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';

package/esm/core/ComboBox/ComboBoxEndIcon.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type ComboBoxEndIconProps = {
     disabled?: boolean;
     isOpen?: boolean;

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgCaretDownSmall } from '../utils/index.js';
+import { SvgCaretDownSmall } from '../../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
     const { className, children, disabled, isOpen, ...rest } = props;

package/esm/core/ComboBox/ComboBoxInput.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type ComboBoxInputProps = {
     selectTags?: JSX.Element[];
 } & React.ComponentProps<typeof Input>;

package/esm/core/ComboBox/ComboBoxInput.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { useSafeContext, useMergedRefs, useContainerWidth, mergeEventHandlers, } from '../utils/index.js';
+import { useSafeContext, useMergedRefs, useContainerWidth, mergeEventHandlers, } from '../../utils/index.js';
 import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
 import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers.js';
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {