@itwin/itwinui-react 3.0.0-dev.8 → 3.0.0

package/cjs/core/InformationPanel/InformationPanelHeader.js

@@ -8,8 +8,8 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../Buttons/index.js');
-const index_js_2 = require('../utils/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * Header of the InformationPanel to be passed in the `header` prop.
  *
@@ -29,26 +29,26 @@ const index_js_2 = require('../utils/index.js');
 exports.InformationPanelHeader = React.forwardRef((props, forwardedRef) => {
   const { children, onClose, actions, className, ...rest } = props;
   return React.createElement(
-    index_js_2.Box,
+    index_js_1.Box,
     {
       className: (0, classnames_1.default)('iui-information-header', className),
       ref: forwardedRef,
       ...rest,
     },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       { as: 'span', className: 'iui-information-header-label' },
       children,
     ),
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       { className: 'iui-information-header-actions' },
       actions,
       onClose &&
         React.createElement(
-          index_js_1.IconButton,
+          IconButton_js_1.IconButton,
           { styleType: 'borderless', onClick: onClose, 'aria-label': 'Close' },
-          React.createElement(index_js_2.SvgCloseSmall, {
+          React.createElement(index_js_1.SvgCloseSmall, {
             'aria-hidden': true,
           }),
         ),

package/cjs/core/Input/Input.d.ts

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

package/cjs/core/Input/Input.js

@@ -12,7 +12,6 @@ const index_js_1 = require('../utils/index.js');
 /**
  * Basic input component
  * @example
- * <Input setFocus />
  * <Input disabled />
  * <Input size='small' />
  */

package/cjs/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/cjs/core/InputGroup/InputGroup.js

@@ -9,9 +9,9 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../InputGrid/index.js');
-const index_js_3 = require('../Label/index.js');
-const index_js_4 = require('../StatusMessage/index.js');
+const InputGrid_js_1 = require('../InputGrid/InputGrid.js');
+const Label_js_1 = require('../Label/Label.js');
+const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
 /**
  * Group Checkbox/Radio components together
  * @example
@@ -55,7 +55,7 @@ exports.InputGroup = React.forwardRef((props, forwardedRef) => {
     return undefined;
   };
   return React.createElement(
-    index_js_2.InputGrid,
+    InputGrid_js_1.InputGrid,
     {
       ref: forwardedRef,
       as: 'div',
@@ -68,7 +68,7 @@ exports.InputGroup = React.forwardRef((props, forwardedRef) => {
     },
     label &&
       React.createElement(
-        index_js_3.Label,
+        Label_js_1.Label,
         { as: 'label', required: required, disabled: disabled, ...labelProps },
         label,
       ),
@@ -86,7 +86,7 @@ exports.InputGroup = React.forwardRef((props, forwardedRef) => {
     ),
     (message || status || svgIcon) &&
       React.createElement(
-        index_js_4.StatusMessage,
+        StatusMessage_js_1.StatusMessage,
         { startIcon: icon(), status: status, ...messageProps },
         displayStyle !== 'inline' && message,
       ),

package/cjs/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/cjs/core/InputWithDecorations/InputWithDecorations.js

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
 const InputWithDecorationsContext = React.createContext(undefined);
 const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
   const { children, size, isDisabled, ...rest } = props;
@@ -44,7 +44,7 @@ const InputWithDecorationsButton = React.forwardRef((props, ref) => {
     InputWithDecorationsContext,
   );
   return React.createElement(
-    index_js_2.IconButton,
+    IconButton_js_1.IconButton,
     {
       ref: ref,
       size: size ?? contextSize,

package/cjs/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/cjs/core/LabeledInput/LabeledInput.js

@@ -8,17 +8,18 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../InputGrid/index.js');
-const index_js_3 = require('../InputWithDecorations/index.js');
+const InputGrid_js_1 = require('../InputGrid/InputGrid.js');
+const InputWithDecorations_js_1 = require('../InputWithDecorations/InputWithDecorations.js');
 const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
 const Label_js_1 = require('../Label/Label.js');
+const Icon_js_1 = require('../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' />
  */
 exports.LabeledInput = React.forwardRef((props, ref) => {
   const uid = (0, index_js_1.useId)();
@@ -41,7 +42,7 @@ exports.LabeledInput = React.forwardRef((props, ref) => {
   const icon = svgIcon ?? (status && index_js_1.StatusIconMap[status]());
   const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
   return React.createElement(
-    index_js_2.InputGrid,
+    InputGrid_js_1.InputGrid,
     { labelPlacement: displayStyle, ...wrapperProps },
     label &&
       React.createElement(
@@ -56,18 +57,15 @@ exports.LabeledInput = React.forwardRef((props, ref) => {
         label,
       ),
     React.createElement(
-      index_js_3.InputWithDecorations,
+      InputWithDecorations_js_1.InputWithDecorations,
       { status: status, isDisabled: disabled, ...inputWrapperProps },
-      React.createElement(index_js_3.InputWithDecorations.Input, {
-        disabled: disabled,
-        required: required,
-        id: id,
-        ref: ref,
-        ...rest,
-      }),
+      React.createElement(
+        InputWithDecorations_js_1.InputWithDecorations.Input,
+        { disabled: disabled, required: required, id: id, ref: ref, ...rest },
+      ),
       shouldShowIcon &&
         React.createElement(
-          index_js_1.Icon,
+          Icon_js_1.Icon,
           { fill: !svgIcon ? status : undefined, padded: true, ...iconProps },
           icon,
         ),

package/cjs/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.
@@ -76,5 +76,5 @@ export type LabeledSelectProps<T> = {
  *   svgIcon={<SvgCamera />}
  * />
  */
-export declare const LabeledSelect: <T>(props: LabeledSelectProps<T>) => JSX.Element;
+export declare const LabeledSelect: React.ForwardRefExoticComponent<LabeledSelectProps<unknown> & React.RefAttributes<HTMLElement>>;
 export default LabeledSelect;

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -7,11 +7,12 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Select/index.js');
-const index_js_2 = require('../utils/index.js');
+const Select_js_1 = require('../Select/Select.js');
+const index_js_1 = require('../utils/index.js');
 const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
 const InputGrid_js_1 = require('../InputGrid/InputGrid.js');
 const Label_js_1 = require('../Label/Label.js');
+const Icon_js_1 = require('../Icon/Icon.js');
 /**
  * Labeled select component to select value from options.
  * @example
@@ -45,7 +46,7 @@ const Label_js_1 = require('../Label/Label.js');
  *   svgIcon={<SvgCamera />}
  * />
  */
-const LabeledSelect = (props) => {
+exports.LabeledSelect = React.forwardRef((props, forwardedRef) => {
   const {
     className,
     disabled = false,
@@ -63,13 +64,13 @@ const LabeledSelect = (props) => {
     messageIconProps,
     ...rest
   } = props;
-  const labelId = `${(0, index_js_2.useId)()}-label`;
+  const labelId = `${(0, index_js_1.useId)()}-label`;
   const icon = () => {
     if (svgIcon) {
-      return React.createElement(index_js_2.Icon, null, svgIcon);
+      return React.createElement(Icon_js_1.Icon, null, svgIcon);
     }
     if (status && message) {
-      return index_js_2.StatusIconMap[status]();
+      return index_js_1.StatusIconMap[status]();
     }
     return undefined;
   };
@@ -88,12 +89,13 @@ const LabeledSelect = (props) => {
         },
         label,
       ),
-    React.createElement(index_js_1.Select, {
+    React.createElement(Select_js_1.Select, {
       disabled: disabled,
       className: className,
       style: style,
       status: status,
       ...rest,
+      ref: forwardedRef,
       triggerProps: {
         'aria-labelledby': labelId,
         ...triggerProps,
@@ -112,6 +114,5 @@ const LabeledSelect = (props) => {
         )
       : message,
   );
-};
-exports.LabeledSelect = LabeledSelect;
+});
 exports.default = exports.LabeledSelect;

package/cjs/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/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -7,7 +7,7 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../LabeledInput/index.js');
+const LabeledInput_js_1 = require('../LabeledInput/LabeledInput.js');
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -34,7 +34,7 @@ exports.LabeledTextarea = React.forwardRef((props, forwardedRef) => {
     // ref types don't match but it's internal, so ts-ignore is ok here
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    React.createElement(index_js_1.LabeledInput, {
+    React.createElement(LabeledInput_js_1.LabeledInput, {
       as: 'textarea',
       rows: 3,
       ref: forwardedRef,

package/{esm/core/utils/components → cjs/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/cjs/core/{utils/components → LinkAction}/LinkAction.js

@@ -5,7 +5,7 @@ exports.LinkBox = exports.LinkAction = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const polymorphic_js_1 = require('../functions/polymorphic.js');
+const polymorphic_js_1 = require('../utils/functions/polymorphic.js');
 /**
  * Polymorphic link action component.
  * It is rendered as `a` by default.

package/cjs/core/Menu/Menu.js

@@ -69,9 +69,9 @@ exports.Menu = React.forwardRef((props, ref) => {
     as: 'div',
     className: (0, classnames_1.default)('iui-menu', className),
     role: 'menu',
-    onKeyDown: onKeyDown,
     ref: refs,
     ...rest,
+    onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, onKeyDown),
   });
 });
 exports.default = exports.Menu;

package/cjs/core/Menu/MenuItem.js

@@ -10,14 +10,19 @@ const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
 const Menu_js_1 = require('./Menu.js');
 const ListItem_js_1 = require('../List/ListItem.js');
+const react_dom_1 = require('react-dom');
+const Popover_js_1 = require('../Popover/Popover.js');
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
-const MenuItemContext = React.createContext({ ref: undefined });
+const MenuItemContext = React.createContext({
+  ref: undefined,
+  setIsNestedSubmenuVisible: () => {},
+});
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-exports.MenuItem = React.forwardRef((props, ref) => {
+exports.MenuItem = React.forwardRef((props, forwardedRef) => {
   const {
     children,
     isSelected,
@@ -26,21 +31,33 @@ exports.MenuItem = React.forwardRef((props, ref) => {
     onClick,
     sublabel,
     size = !!sublabel ? 'large' : 'default',
-    startIcon: startIconProp,
     icon,
-    endIcon: endIconProp,
+    startIcon = icon,
     badge,
+    endIcon = badge,
     role = 'menuitem',
     subMenuItems = [],
     ...rest
   } = props;
   const menuItemRef = React.useRef(null);
-  const refs = (0, index_js_1.useMergedRefs)(menuItemRef, ref);
-  const { ref: parentMenuItemRef } = React.useContext(MenuItemContext);
-  const subMenuRef = React.useRef(null);
+  const [focusOnSubmenu, setFocusOnSubmenu] = React.useState(false);
+  const submenuId = (0, index_js_1.useId)();
   const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-  const startIcon = startIconProp ?? icon;
-  const endIcon = endIconProp ?? badge;
+  const [isNestedSubmenuVisible, setIsNestedSubmenuVisible] =
+    React.useState(false);
+  const parent = React.useContext(MenuItemContext);
+  const onVisibleChange = (open) => {
+    setIsSubmenuVisible(open);
+    // we don't want parent to close when mouse goes into a nested submenu,
+    // so we need to let the parent know whether the submenu is still open.
+    parent.setIsNestedSubmenuVisible(open);
+  };
+  const popover = (0, Popover_js_1.usePopover)({
+    visible: isSubmenuVisible || isNestedSubmenuVisible,
+    onVisibleChange,
+    placement: 'right-start',
+    trigger: { hover: true, focus: true },
+  });
   const onKeyDown = (event) => {
     if (event.altKey) {
       return;
@@ -56,22 +73,37 @@ exports.MenuItem = React.forwardRef((props, ref) => {
       case 'ArrowRight': {
         if (subMenuItems.length > 0) {
           setIsSubmenuVisible(true);
+          // flush and reset state so we are ready to focus again next time
+          (0, react_dom_1.flushSync)(() => setFocusOnSubmenu(true));
+          setFocusOnSubmenu(false);
           event.preventDefault();
           event.stopPropagation();
         }
         break;
       }
       case 'ArrowLeft': {
-        parentMenuItemRef?.current?.focus();
+        if (parent.ref) {
+          parent.ref.current?.focus();
+          parent.setIsNestedSubmenuVisible(false);
+        }
         event.stopPropagation();
         event.preventDefault();
         break;
       }
+      case 'Escape': {
+        // focus might get lost if submenu closes so move it back to parent
+        parent.ref?.current?.focus();
+        break;
+      }
       default:
         break;
     }
   };
-  const listItem = React.createElement(
+  const handlers = {
+    onClick: () => !disabled && onClick?.(value),
+    onKeyDown,
+  };
+  return React.createElement(
     ListItem_js_1.ListItem,
     {
       as: 'div',
@@ -79,24 +111,21 @@ exports.MenuItem = React.forwardRef((props, ref) => {
       size: size,
       active: isSelected,
       disabled: disabled,
-      onClick: () => !disabled && onClick?.(value),
-      ref: refs,
+      ref: (0, index_js_1.useMergedRefs)(
+        menuItemRef,
+        forwardedRef,
+        subMenuItems.length > 0 ? popover.refs.setReference : null,
+      ),
       role: role,
       tabIndex: disabled || role === 'presentation' ? undefined : -1,
       'aria-selected': isSelected,
-      'aria-haspopup': subMenuItems.length > 0,
+      'aria-haspopup': subMenuItems.length > 0 ? 'true' : undefined,
+      'aria-controls': subMenuItems.length > 0 ? submenuId : undefined,
+      'aria-expanded': subMenuItems.length > 0 ? popover.open : undefined,
       'aria-disabled': disabled,
-      onKeyDown: onKeyDown,
-      onMouseEnter: () => setIsSubmenuVisible(true),
-      onMouseLeave: (e) => {
-        if (
-          !(e.relatedTarget instanceof Node) ||
-          !subMenuRef.current?.contains(e.relatedTarget)
-        ) {
-          setIsSubmenuVisible(false);
-        }
-      },
-      ...rest,
+      ...(subMenuItems.length === 0
+        ? { ...handlers, ...rest }
+        : popover.getReferenceProps({ ...handlers, ...rest })),
     },
     startIcon &&
       React.createElement(
@@ -124,38 +153,32 @@ exports.MenuItem = React.forwardRef((props, ref) => {
         { as: 'span', 'aria-hidden': true },
         endIcon,
       ),
-  );
-  return subMenuItems.length === 0
-    ? listItem
-    : React.createElement(
-        MenuItemContext.Provider,
-        { value: { ref: menuItemRef } },
+    subMenuItems.length > 0 &&
+      popover.open &&
+      React.createElement(
+        index_js_1.Portal,
+        null,
         React.createElement(
-          index_js_1.Popover,
-          {
-            placement: 'right-start',
-            visible: isSubmenuVisible,
-            appendTo: 'parent',
-            content: React.createElement(
-              'div',
-              {
-                onMouseLeave: () => setIsSubmenuVisible(false),
-                onBlur: (e) => {
-                  !!(e.relatedTarget instanceof Node) &&
-                    !subMenuRef.current?.contains(e.relatedTarget) &&
-                    !subMenuRef.current?.isEqualNode(e.relatedTarget) &&
-                    setIsSubmenuVisible(false);
+          MenuItemContext.Provider,
+          { value: { ref: menuItemRef, setIsNestedSubmenuVisible } },
+          React.createElement(
+            Menu_js_1.Menu,
+            {
+              setFocus: focusOnSubmenu,
+              ref: popover.refs.setFloating,
+              ...popover.getFloatingProps({
+                id: submenuId,
+                onPointerMove: () => {
+                  // pointer might move into a nested submenu and set isSubmenuVisible to false,
+                  // so we need to flip it back to true when pointer re-enters this submenu.
+                  setIsSubmenuVisible(true);
                 },
-              },
-              React.createElement(
-                Menu_js_1.Menu,
-                { ref: subMenuRef },
-                subMenuItems,
-              ),
-            ),
-          },
-          listItem,
+              }),
+            },
+            subMenuItems,
+          ),
         ),
-      );
+      ),
+  );
 });
 exports.default = exports.MenuItem;

package/cjs/core/Menu/MenuItemSkeleton.js

@@ -9,6 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
+const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.js');
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
@@ -54,7 +55,7 @@ exports.MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
           'aria-hidden': true,
         }),
       React.createElement(
-        index_js_1.VisuallyHidden,
+        VisuallyHidden_js_1.VisuallyHidden,
         null,
         translatedStrings.loading,
       ),

package/cjs/core/Modal/Modal.js

@@ -7,7 +7,7 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Dialog/index.js');
+const Dialog_js_1 = require('../Dialog/Dialog.js');
 /**
  * Modal component which can wrap any content.
  * @example
@@ -42,7 +42,7 @@ exports.Modal = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   return React.createElement(
-    index_js_1.Dialog,
+    Dialog_js_1.Dialog,
     {
       isOpen: isOpen,
       closeOnEsc: closeOnEsc,
@@ -55,11 +55,11 @@ exports.Modal = React.forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       portal: portal,
     },
-    React.createElement(index_js_1.Dialog.Backdrop, null),
+    React.createElement(Dialog_js_1.Dialog.Backdrop, null),
     React.createElement(
-      index_js_1.Dialog.Main,
+      Dialog_js_1.Dialog.Main,
       { 'aria-modal': true, ...rest },
-      React.createElement(index_js_1.Dialog.TitleBar, { titleText: title }),
+      React.createElement(Dialog_js_1.Dialog.TitleBar, { titleText: title }),
       children,
     ),
   );