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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Buttons/Button/Button.js';
+import type { ButtonProps } from '../Buttons/Button.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
+import type { DropdownButtonProps } from '../Buttons/DropdownButton.js';
 type HeaderButtonProps = {
     /**
      * Main label of the header button.

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

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

package/esm/core/Header/HeaderDropdownButton.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { DropdownMenu } from '../DropdownMenu/index.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import {
   useMergedRefs,
   SvgCaretDownSmall,

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

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

package/esm/core/Header/HeaderSplitButton.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { DropdownMenu } from '../DropdownMenu/index.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import {
   SvgCaretDownSmall,
   SvgCaretUpSmall,

package/{cjs/core/utils/components → esm/core/Icon}/Icon.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';
 export type IconProps = {
     /**
      * Size of the svg.

package/esm/core/{utils/components → Icon}/Icon.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 getSizeValue = (size) => {
   switch (size) {
     case 'small':

package/esm/core/InformationPanel/InformationPanelHeader.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { SvgCloseSmall, Box } from '../utils/index.js';
 /**
  * Header of the InformationPanel to be passed in the `header` prop.

package/esm/core/Input/Input.d.ts

@@ -17,7 +17,6 @@ export type InputProps = {
 /**
  * Basic input component
  * @example
- * <Input setFocus />
  * <Input disabled />
  * <Input size='small' />
  */

package/esm/core/Input/Input.js

@@ -8,7 +8,6 @@ import { useMergedRefs, Box } from '../utils/index.js';
 /**
  * Basic input component
  * @example
- * <Input setFocus />
  * <Input disabled />
  * <Input size='small' />
  */

package/esm/core/InputGroup/InputGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import { StatusMessage } from '../StatusMessage/index.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 type InputGroupProps = {
     /**
      * Label of the group.

package/esm/core/InputGroup/InputGroup.js

@@ -5,9 +5,9 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { StatusIconMap, Box } from '../utils/index.js';
-import { InputGrid } from '../InputGrid/index.js';
-import { Label } from '../Label/index.js';
-import { StatusMessage } from '../StatusMessage/index.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { Label } from '../Label/Label.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 /**
  * Group Checkbox/Radio components together
  * @example

package/esm/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -33,7 +33,7 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
         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/InputWithDecorations/InputWithDecorations.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Box, InputFlexContainer, useSafeContext } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 const InputWithDecorationsContext = React.createContext(undefined);
 const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
   const { children, size, isDisabled, ...rest } = props;

package/esm/core/LabeledInput/LabeledInput.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { Icon } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import { InputGrid } from '../InputGrid/index.js';
-import { InputWithDecorations } from '../InputWithDecorations/index.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
+import { Icon } from '../Icon/Icon.js';
 export type LabeledInputProps = {
     /**
      * Label of the input.
@@ -56,7 +56,7 @@ export type LabeledInputProps = {
  * <LabeledInput label='My label' />
  * <LabeledInput disabled label='My label' />
  * <LabeledInput status='positive' label='Positive' />
- * <LabeledInput status='negative' label='Negative' setFocus />
+ * <LabeledInput status='negative' label='Negative' />
  */
 export declare const LabeledInput: PolymorphicForwardRefComponent<"input", LabeledInputProps>;
 export default LabeledInput;

package/esm/core/LabeledInput/LabeledInput.js

@@ -4,18 +4,19 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { StatusIconMap, useId, Icon } from '../utils/index.js';
-import { InputGrid } from '../InputGrid/index.js';
-import { InputWithDecorations } from '../InputWithDecorations/index.js';
+import { StatusIconMap, useId } from '../utils/index.js';
+import { InputGrid } from '../InputGrid/InputGrid.js';
+import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { Label } from '../Label/Label.js';
+import { Icon } from '../Icon/Icon.js';
 /**
  * Basic labeled input component
  * @example
  * <LabeledInput label='My label' />
  * <LabeledInput disabled label='My label' />
  * <LabeledInput status='positive' label='Positive' />
- * <LabeledInput status='negative' label='Negative' setFocus />
+ * <LabeledInput status='negative' label='Negative' />
  */
 export const LabeledInput = React.forwardRef((props, ref) => {
   const uid = useId();

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { SelectProps } from '../Select/Select.js';
-import { Icon } from '../utils/index.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
+import { Icon } from '../Icon/Icon.js';
 export type LabeledSelectProps<T> = {
     /**
      * Label of the select.

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -3,11 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Select } from '../Select/index.js';
-import { StatusIconMap, useId, Icon } from '../utils/index.js';
+import { Select } from '../Select/Select.js';
+import { StatusIconMap, useId } from '../utils/index.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
+import { Icon } from '../Icon/Icon.js';
 /**
  * Labeled select component to select value from options.
  * @example

package/esm/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { LabeledInputProps } from '../LabeledInput/LabeledInput.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Icon } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
-import { LabeledInput } from '../LabeledInput/index.js';
+import { LabeledInput } from '../LabeledInput/LabeledInput.js';
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example

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

@@ -8,7 +8,7 @@
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkAction: import("../props.js").PolymorphicForwardRefComponent<"a", {}>;
+export declare const LinkAction: import("../utils/props.js").PolymorphicForwardRefComponent<"a", {}>;
 /**
  * Polymorphic link box component.
  * Used to wrap around your component to use LinkAction.
@@ -20,4 +20,4 @@ export declare const LinkAction: import("../props.js").PolymorphicForwardRefComp
  *   </Surface>
  * </LinkBox>
  */
-export declare const LinkBox: import("../props.js").PolymorphicForwardRefComponent<"div", {}>;
+export declare const LinkBox: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;

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

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { polymorphic } from '../functions/polymorphic.js';
+import { polymorphic } from '../utils/functions/polymorphic.js';
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

package/esm/core/Menu/MenuItem.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import {
   SvgCaretRightSmall,
-  usePopover,
   Portal,
   useMergedRefs,
   useId,
@@ -13,6 +12,7 @@ import {
 import { Menu } from './Menu.js';
 import { ListItem } from '../List/ListItem.js';
 import { flushSync } from 'react-dom';
+import { usePopover } from '../Popover/Popover.js';
 /**
  * Context used to provide menu item ref to sub-menu items.
  */

package/esm/core/Menu/MenuItemSkeleton.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, VisuallyHidden } from '../utils/index.js';
+import { Box } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Menu item that uses skeletons to indicate loading state.
  */

package/esm/core/Modal/Modal.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 { Dialog } from '../Dialog/index.js';
+import { Dialog } from '../Dialog/Dialog.js';
 /**
  * Modal component which can wrap any content.
  * @example

package/esm/core/NonIdealState/ErrorPage.js

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Button } from '../Buttons/Button/index.js';
+import { Button } from '../Buttons/Button.js';
 import { NonIdealState } from './NonIdealState.js';
-import { ProgressRadial } from '../ProgressIndicators/index.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { dynamicImport } from '../utils/index.js';
 const Svg401 = React.lazy(() =>
   dynamicImport('@itwin/itwinui-illustrations-react/Svg401'),

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Placement } from '@floating-ui/react';
-import type { PolymorphicForwardRefComponent } from '../index.js';
-import type { PortalProps } from './Portal.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PortalProps } from '../utils/components/Portal.js';
 type PopoverOptions = {
     /**
      * Placement of the popover content.
@@ -19,12 +19,10 @@ type PopoverOptions = {
     onVisibleChange?: (visible: boolean) => void;
     /**
      * If true, the popover will close when clicking outside it.
+     *
+     * @default true
      */
     closeOnOutsideClick?: boolean;
-    /**
-     * Whether the popover should match the width of the trigger.
-     */
-    matchWidth?: boolean;
 };
 type PopoverInternalProps = {
     /**
@@ -64,6 +62,10 @@ type PopoverInternalProps = {
      */
     trigger?: Partial<Record<'hover' | 'click' | 'focus', boolean>>;
     role?: 'dialog' | 'menu' | 'listbox';
+    /**
+     * Whether the popover should match the width of the trigger.
+     */
+    matchWidth?: boolean;
 };
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
@@ -81,11 +83,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         setFloating: (node: HTMLElement | null) => void;
     } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     elements: {
-        reference: import("@floating-ui/react-dom").ReferenceType | null; /**
-         * Middleware options.
-         *
-         * @see https://floating-ui.com/docs/offset
-         */
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
         floating: HTMLElement | null;
     } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
@@ -113,13 +111,31 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
     onOpenChange: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 };
 type PopoverPublicProps = {
+    /**
+     * Content displayed inside the popover.
+     */
     content?: React.ReactNode;
+    /**
+     * Element that triggers the popover. Should usually be a button.
+     */
     children?: React.ReactNode;
+    /**
+     * Whether the popover adds recommended CSS (background-color, box-shadow, etc.) to itself.
+     *
+     * @default false
+     */
     applyBackground?: boolean;
 } & PortalProps & PopoverOptions;
 /**
- * A utility component to help with positioning of floating content.
- * Built on top of [`floating-ui`](https://floating-ui.com/)
+ * A utility component to help with positioning of floating content relative to a trigger.
+ * Built on top of [`floating-ui`](https://floating-ui.com/).
+ *
+ * @see https://itwinui.bentley.com/docs/popover
+ *
+ * @example
+ * <Popover content='This is a popover'>
+ *   <Button>Show popover</Button>
+ * </Popover>
  */
 export declare const Popover: PolymorphicForwardRefComponent<"div", PopoverPublicProps>;
 export default Popover;

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

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
+import cx from 'classnames';
 import {
   useFloating,
   useClick,
@@ -21,16 +22,17 @@ import {
   useFocus,
   safePolygon,
   useRole,
+  FloatingPortal,
 } from '@floating-ui/react';
 import {
   Box,
   cloneElementWithRef,
   useControlledState,
+  useId,
   useMergedRefs,
-} from '../index.js';
-import { Portal } from './Portal.js';
-import { Surface } from '../../Surface/index.js';
-import { ThemeProvider } from '../../ThemeProvider/index.js';
+} from '../utils/index.js';
+import { Portal } from '../utils/components/Portal.js';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
 // ----------------------------------------------------------------------------
 export const usePopover = (options) => {
   const {
@@ -111,8 +113,15 @@ export const usePopover = (options) => {
   );
 };
 /**
- * A utility component to help with positioning of floating content.
- * Built on top of [`floating-ui`](https://floating-ui.com/)
+ * A utility component to help with positioning of floating content relative to a trigger.
+ * Built on top of [`floating-ui`](https://floating-ui.com/).
+ *
+ * @see https://itwinui.bentley.com/docs/popover
+ *
+ * @example
+ * <Popover content='This is a popover'>
+ *   <Button>Show popover</Button>
+ * </Popover>
  */
 export const Popover = React.forwardRef((props, forwardedRef) => {
   const {
@@ -120,15 +129,15 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     //
     // popover options
     visible,
-    placement,
+    placement = 'bottom-start',
     onVisibleChange,
-    closeOnOutsideClick,
-    matchWidth,
+    closeOnOutsideClick = true,
     //
     // dom props
+    className,
     children,
     content,
-    applyBackground,
+    applyBackground = false,
     ...rest
   } = props;
   const popover = usePopover({
@@ -136,7 +145,6 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     placement,
     onVisibleChange,
     closeOnOutsideClick,
-    matchWidth,
     role: 'dialog',
   });
   const [popoverElement, setPopoverElement] = React.useState();
@@ -145,10 +153,13 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     forwardedRef,
     setPopoverElement,
   );
+  const triggerId = `${useId()}-trigger`;
+  const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   return React.createElement(
     React.Fragment,
     null,
     cloneElementWithRef(children, (children) => ({
+      id: children.props.id || triggerId,
       ...popover.getReferenceProps(children.props),
       ref: popover.refs.setReference,
     })),
@@ -157,24 +168,33 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
           Portal,
           { portal: portal },
           React.createElement(
-            ThemeProvider,
-            { portalContainer: popoverElement },
+            FloatingPortal,
+            null,
             React.createElement(
-              FloatingFocusManager,
-              {
-                context: popover.context,
-                modal: false,
-                initialFocus: -1,
-                returnFocus: true,
-              },
+              ThemeProvider,
+              { portalContainer: popoverElement },
               React.createElement(
-                Box,
+                FloatingFocusManager,
                 {
-                  as: applyBackground ? Surface : 'div',
-                  ...popover.getFloatingProps(rest),
-                  ref: popoverRef,
+                  context: popover.context,
+                  modal: false,
+                  initialFocus: popover.refs.floating,
                 },
-                content,
+                React.createElement(
+                  Box,
+                  {
+                    className: cx(
+                      { 'iui-popover-surface': applyBackground },
+                      className,
+                    ),
+                    'aria-labelledby': !hasAriaLabel
+                      ? popover.refs.domReference.current?.id
+                      : undefined,
+                    ...popover.getFloatingProps(rest),
+                    ref: popoverRef,
+                  },
+                  content,
+                ),
               ),
             ),
           ),

package/esm/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InputGroup } from '../InputGroup/index.js';
+import { InputGroup } from '../InputGroup/InputGroup.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
 /**

package/esm/core/RadioTiles/RadioTileGroup.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 { InputGroup } from '../InputGroup/index.js';
+import { InputGroup } from '../InputGroup/InputGroup.js';
 import { Box } from '../utils/index.js';
 /**
  * RadioTileGroup component to group RadioTile components together

package/esm/core/SearchBox/SearchBox.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import type { IconProps, PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
-import type { IconButtonProps } from '../Buttons/IconButton/IconButton.js';
+import type { PolymorphicForwardRefComponent, InputFlexContainerProps } from '../utils/index.js';
+import type { IconButtonProps } from '../Buttons/IconButton.js';
+import type { IconProps } from '../Icon/Icon.js';
 type SearchBoxOwnProps = {
     /**
      * Whether the searchbox is expandable.

package/esm/core/SearchBox/SearchBox.js

@@ -10,12 +10,12 @@ import {
   SvgCloseSmall,
   useSafeContext,
   useId,
-  Icon,
   useMergedRefs,
   mergeEventHandlers,
   Box,
 } from '../utils/index.js';
-import { IconButton } from '../Buttons/IconButton/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Icon } from '../Icon/Icon.js';
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
   const {

package/esm/core/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { usePopover } from '../utils/index.js';
 import type { CommonProps } from '../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
 export type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.

package/esm/core/Select/Select.js

@@ -4,20 +4,21 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Menu, MenuItem } from '../Menu/index.js';
+import { Menu } from '../Menu/Menu.js';
+import { MenuItem } from '../Menu/MenuItem.js';
 import {
   SvgCaretDownSmall,
   useId,
   AutoclearingHiddenLiveRegion,
   Box,
-  usePopover,
   Portal,
   useMergedRefs,
   SvgCheckmark,
-  Icon,
 } from '../utils/index.js';
-import SelectTag from './SelectTag.js';
-import SelectTagContainer from './SelectTagContainer.js';
+import { SelectTag } from './SelectTag.js';
+import { SelectTagContainer } from './SelectTagContainer.js';
+import { Icon } from '../Icon/Icon.js';
+import { usePopover } from '../Popover/Popover.js';
 const isMultipleEnabled = (variable, multiple) => {
   return multiple;
 };

package/esm/core/Select/SelectTagContainer.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
-import SelectTag from './SelectTag.js';
+import { SelectTag } from './SelectTag.js';
 /**
  */
 export const SelectTagContainer = React.forwardRef((props, ref) => {

package/esm/core/SideNavigation/SideNavigation.js

@@ -5,8 +5,8 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { WithCSSTransition, SvgChevronRight, Box } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
-import { Tooltip } from '../Tooltip/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 /**
  * Left side navigation menu component.
  * @example