@itwin/itwinui-react 3.0.0-dev.10 → 3.0.0-dev.12

package/cjs/styles.js

@@ -23,8 +23,6 @@ const styles = {
   'iui-backdrop-fixed': '_iui3-backdrop-fixed',
   'iui-badge': '_iui3-badge',
   'iui-blockquote': '_iui3-blockquote',
-  'iui-surface-body': '_iui3-surface-body',
-  'iui-surface-header': '_iui3-surface-header',
   'iui-breadcrumbs': '_iui3-breadcrumbs',
   'iui-breadcrumbs-list': '_iui3-breadcrumbs-list',
   'iui-breadcrumbs-item': '_iui3-breadcrumbs-item',
@@ -217,10 +215,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-ud3d79g': '_iui3-ud3d79g',
+  'iui-usy2q6d': '_iui3-usy2q6d',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-ud3d79t': '_iui3-ud3d79t',
+  'iui-usy2q6u': '_iui3-usy2q6u',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -278,6 +276,9 @@ const styles = {
   'iui-stepper-steps-label': '_iui3-stepper-steps-label',
   'iui-stepper-steps-label-count': '_iui3-stepper-steps-label-count',
   'iui-surface': '_iui3-surface',
+  'iui-surface-body': '_iui3-surface-body',
+  'iui-surface-header': '_iui3-surface-header',
+  'iui-popover-surface': '_iui3-popover-surface',
   'iui-table': '_iui3-table',
   'iui-table-cell-end-icon': '_iui3-table-cell-end-icon',
   'iui-table-cell-start-icon': '_iui3-table-cell-start-icon',

package/esm/core/Alert/Alert.d.ts

@@ -55,7 +55,7 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps
     Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
+        size?: "small" | "auto" | "medium" | "large" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {

package/esm/core/Alert/Alert.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import {
-  Icon,
   useSafeContext,
   polymorphic,
   StatusIconMap,
@@ -13,7 +12,8 @@ import {
   Box,
   ButtonBase,
 } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Icon } from '../Icon/Icon.js';
 const AlertContext = React.createContext(undefined);
 // ----------------------------------------------------------------------------
 // Alert component

package/esm/core/Avatar/Avatar.js

@@ -4,12 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import {
-  Box,
-  VisuallyHidden,
-  SoftBackgrounds,
-  isSoftBackground,
-} from '../utils/index.js';
+import { Box, SoftBackgrounds, isSoftBackground } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Helper function that returns one of the preset badge color values.
  */

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -11,7 +11,7 @@ import {
   Box,
   createWarningLogger,
 } from '../utils/index.js';
-import { Button } from '../Buttons/Button/index.js';
+import { Button } from '../Buttons/Button.js';
 const logWarningInDev = createWarningLogger();
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track

package/esm/core/Buttons/{Button/Button.d.ts → 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.

package/esm/core/Buttons/{Button/Button.js → 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

package/{cjs/core/Buttons/DropdownButton → esm/core/Buttons}/DropdownButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { ButtonProps } from '../Button/Button.js';
-import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import type { DropdownMenuProps } from '../DropdownMenu/DropdownMenu.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

package/esm/core/Buttons/{DropdownButton/DropdownButton.js → DropdownButton.js}

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

package/{cjs/core/Buttons/IconButton → esm/core/Buttons}/IconButton.d.ts

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

package/esm/core/Buttons/{IconButton/IconButton.js → IconButton.js}

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { VisuallyHidden, Box, ButtonBase } from '../../utils/index.js';
-import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { Box, ButtonBase } from '../utils/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Icon button
  * @example

package/{cjs/core/Buttons/IdeasButton → 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/IdeasButton.js → IdeasButton.js}

@@ -3,8 +3,8 @@
  * 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 { Button } from '../Button/index.js';
+import { SvgSmileyHappy } from '../utils/index.js';
+import { Button } from './Button.js';
 /**
  * Ideas button
  * @example

package/esm/core/Buttons/{SplitButton/SplitButton.d.ts → SplitButton.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Button/Button.js';
-import { IconButton } from '../IconButton/index.js';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import { IconButton } from './IconButton.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/SplitButton.js → SplitButton.js}

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Button } from '../Button/index.js';
-import { IconButton } from '../IconButton/index.js';
+import { Button } from './Button.js';
+import { IconButton } from './IconButton.js';
 import {
   Box,
   Portal,
@@ -13,9 +13,9 @@ import {
   SvgCaretUpSmall,
   useId,
   useMergedRefs,
-  usePopover,
-} from '../../utils/index.js';
-import { Menu } from '../../Menu/Menu.js';
+} from '../utils/index.js';
+import { Menu } from '../Menu/Menu.js';
+import { usePopover } from '../Popover/Popover.js';
 /**
  * Split button component with a DropdownMenu.
  *

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

@@ -42,7 +42,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -51,7 +51,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
     };

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

@@ -13,7 +13,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -22,7 +22,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/esm/core/Carousel/CarouselNavigation.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { CarouselDotsList } from './CarouselDotsList.js';
 import { Box, SvgChevronLeft, SvgChevronRight } from '../utils/index.js';
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {

package/esm/core/Checkbox/Checkbox.js

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

package/esm/core/ColorPicker/ColorBuilder.js

@@ -11,7 +11,7 @@ import {
   useMergedRefs,
   Box,
 } from '../utils/index.js';
-import { Slider } from '../Slider/index.js';
+import { Slider } from '../Slider/Slider.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
   const position = getBoundedValue(pointer, rect.top, rect.bottom);

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { IconButton } from '../Buttons/index.js';
-import { Input } from '../Input/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Input } from '../Input/Input.js';
 import { ColorValue, SvgSwap, Box } from '../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 /**

package/esm/core/ColorPicker/ColorPicker.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import { ColorValue, useMergedRefs, Box } from '../utils/index.js';
 import cx from 'classnames';
 import { ColorPickerContext } from './ColorPickerContext.js';
-import { Surface } from '../Surface/Surface.js';
 export const getColorValue = (color) => {
   if (color instanceof ColorValue) {
     return color;
@@ -79,8 +78,11 @@ export const ColorPicker = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     Box,
     {
-      as: applyBackground ? Surface : 'div',
-      className: cx('iui-color-picker', className),
+      className: cx(
+        'iui-color-picker',
+        { 'iui-popover-surface': applyBackground },
+        className,
+      ),
       ref: useMergedRefs(ref, forwardedRef),
       ...rest,
     },

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { SelectOption } from '../Select/index.js';
+import type { SelectOption } from '../Select/Select.js';
 import type { Input } from '../Input/Input.js';
 import type { InputContainerProps, CommonProps } from '../utils/index.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';

package/esm/core/ComboBox/ComboBox.js

@@ -3,17 +3,17 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { MenuExtraContent } from '../Menu/index.js';
-import SelectTag from '../Select/SelectTag.js';
-import { Text } from '../Typography/index.js';
+import { MenuExtraContent } from '../Menu/MenuExtraContent.js';
+import { SelectTag } from '../Select/SelectTag.js';
+import { Text } from '../Typography/Text.js';
 import {
   getRandomValue,
   mergeRefs,
   useLatestRef,
   useIsomorphicLayoutEffect,
   AutoclearingHiddenLiveRegion,
-  usePopover,
 } from '../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
 import {
   ComboBoxActionContext,
   comboBoxReducer,

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgCaretDownSmall, Icon } 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;
   return React.createElement(

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

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

package/esm/core/ComboBox/ComboBoxInput.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 { Input } from '../Input/index.js';
+import { Input } from '../Input/Input.js';
 import {
   useSafeContext,
   useMergedRefs,

package/esm/core/ComboBox/ComboBoxInputContainer.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 { StatusMessage } from '../StatusMessage/index.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputContainer, useSafeContext, Box } from '../utils/index.js';
 import { ComboBoxStateContext } from './helpers.js';
 export const ComboBoxInputContainer = React.forwardRef(

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Menu } from '../Menu/index.js';
+import { Menu } from '../Menu/Menu.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick'> & React.ComponentPropsWithoutRef<'div'>;
 export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"div", ComboBoxMenuProps>;

package/esm/core/ComboBox/ComboBoxMenu.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 { Menu } from '../Menu/index.js';
+import { Menu } from '../Menu/Menu.js';
 import {
   useSafeContext,
   useMergedRefs,

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/Select.js';
-import type { usePopover } from '../utils/index.js';
+import type { usePopover } from '../Popover/Popover.js';
 type ComboBoxAction = {
     type: 'multiselect';
     value: number[];

package/esm/core/DatePicker/DatePicker.js

@@ -13,9 +13,8 @@ import {
   Box,
   useId,
 } from '../utils/index.js';
-import { IconButton } from '../Buttons/IconButton/index.js';
-import { TimePicker } from '../TimePicker/index.js';
-import { Surface } from '../Surface/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { TimePicker } from '../TimePicker/TimePicker.js';
 const isSameDay = (a, b) => {
   return (
     a &&
@@ -422,8 +421,11 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     Box,
     {
-      as: applyBackground ? Surface : 'div',
-      className: cx('iui-date-picker', className),
+      className: cx(
+        'iui-date-picker',
+        { 'iui-popover-surface': applyBackground },
+        className,
+      ),
       ref: forwardedRef,
       ...rest,
     },

package/esm/core/Dialog/DialogBackdrop.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 { Backdrop } from '../Backdrop/index.js';
+import { Backdrop } from '../Backdrop/Backdrop.js';
 import { useMergedRefs } from '../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import cx from 'classnames';

package/esm/core/Dialog/DialogTitleBar.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgClose, mergeEventHandlers, Box } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { useDialogContext } from './DialogContext.js';
 import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 import { useDialogDragContext } from './DialogDragContext.js';

package/esm/core/{utils/components → Divider}/Divider.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../props.js';
+import type { PolymorphicForwardRefComponent } from '../utils/props.js';
 type DividerProps = {
     /**
      * Sets the orientation of the divider

package/esm/core/{utils/components → Divider}/Divider.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from './Box.js';
+import { Box } from '../utils/components/Box.js';
 /**
  * Shows a divider
  */

package/esm/core/DropdownMenu/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Popover } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
 export type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.
@@ -16,7 +16,7 @@ export type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
-} & Pick<React.ComponentProps<typeof Popover>, 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & React.ComponentPropsWithoutRef<'ul'> & Pick<PortalProps, 'portal'>;
+} & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & React.ComponentPropsWithoutRef<'ul'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.
  * Built on top of the {@link Popover} component.

package/esm/core/DropdownMenu/DropdownMenu.js

@@ -4,16 +4,15 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import {
-  Popover,
   useMergedRefs,
-  usePopover,
   Portal,
   cloneElementWithRef,
   useControlledState,
   mergeRefs,
   mergeEventHandlers,
 } from '../utils/index.js';
-import { Menu } from '../Menu/index.js';
+import { Menu } from '../Menu/Menu.js';
+import { usePopover } from '../Popover/Popover.js';
 /**
  * Dropdown menu component.
  * Built on top of the {@link Popover} component.

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -106,7 +106,7 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
     EndIcon: PolymorphicForwardRefComponent<"span", Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
+        size?: "small" | "auto" | "medium" | "large" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -7,13 +7,13 @@ import * as React from 'react';
 import {
   StatusIconMap,
   SvgChevronRight,
-  Icon,
   Box,
   useSafeContext,
   polymorphic,
   mergeEventHandlers,
   ButtonBase,
 } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {

package/esm/core/FileUpload/FileUploadCard.js

@@ -12,11 +12,11 @@ import {
   mergeEventHandlers,
   polymorphic,
   Box,
-  VisuallyHidden,
 } from '../utils/index.js';
 import cx from 'classnames';
 import { FileEmptyCard } from './FileEmptyCard.js';
-import { Anchor } from '../Typography/Anchor/Anchor.js';
+import { Anchor } from '../Typography/Anchor.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 const toBytes = (bytes) => {
   const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
   let i = 0;

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgUpload, Box } from '../utils/index.js';
-import { Anchor } from '../Typography/Anchor/Anchor.js';
+import { Anchor } from '../Typography/Anchor.js';
 /**
  * @deprecated Use `FileUploadCard` instead.
  * Default template to be used with the `FileUpload` wrapper component.

package/esm/core/{utils/components → Flex}/Flex.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { AnyString } from '../types.js';
-import type { PolymorphicForwardRefComponent } from '../props.js';
+import type { AnyString } from '../utils/types.js';
+import type { PolymorphicForwardRefComponent } from '../utils/props.js';
 declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
 /**
  * String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).

package/esm/core/{utils/components → Flex}/Flex.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box } from './Box.js';
+import { Box } from '../utils/components/Box.js';
 const sizeTokens = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
 const getValueForToken = (token) => {
   if (sizeTokens.includes(token)) {

package/esm/core/Header/Header.js

@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { SvgMoreVertical, Box } from '../utils/index.js';
-import { DropdownMenu } from '../DropdownMenu/index.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 const defaultTranslations = {
   moreOptions: 'More options',
 };

package/esm/core/Header/HeaderBasicButton.d.ts

@@ -1,4 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { ButtonProps } from '../Buttons/Button/Button.js';
+import type { ButtonProps } from '../Buttons/Button.js';
 export declare const HeaderBasicButton: PolymorphicForwardRefComponent<"button", ButtonProps>;
 export default HeaderBasicButton;