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

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -8,9 +8,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('../Buttons/index.js');
-const index_js_2 = require('../Input/index.js');
-const index_js_3 = require('../utils/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const Input_js_1 = require('../Input/Input.js');
+const index_js_1 = require('../utils/index.js');
 const ColorPickerContext_js_1 = require('./ColorPickerContext.js');
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
@@ -41,10 +41,10 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
     if (currentFormat === 'hsl') {
       const hsl = activeColor.toHslColor();
       setInput([
-        index_js_3.ColorValue.getFormattedColorNumber(hsvColor.h),
-        index_js_3.ColorValue.getFormattedColorNumber(hsl.s),
-        index_js_3.ColorValue.getFormattedColorNumber(hsl.l),
-        index_js_3.ColorValue.getFormattedColorNumber(
+        index_js_1.ColorValue.getFormattedColorNumber(hsvColor.h),
+        index_js_1.ColorValue.getFormattedColorNumber(hsl.s),
+        index_js_1.ColorValue.getFormattedColorNumber(hsl.l),
+        index_js_1.ColorValue.getFormattedColorNumber(
           hsl.a ?? activeColor.getAlpha() / 255,
           2,
         ),
@@ -55,7 +55,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         rgb.r.toString(),
         rgb.g.toString(),
         rgb.b.toString(),
-        index_js_3.ColorValue.getFormattedColorNumber(
+        index_js_1.ColorValue.getFormattedColorNumber(
           rgb.a ?? activeColor.getAlpha() / 255,
           2,
         ),
@@ -85,7 +85,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
     if (currentFormat === 'hex') {
       try {
         const value = input[0].replace(/ /g, '').toLowerCase(); // remove white space from input
-        color = index_js_3.ColorValue.create(value);
+        color = index_js_1.ColorValue.create(value);
         setValidHexInput(true);
         if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
           return;
@@ -113,7 +113,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) {
         return;
       }
-      color = index_js_3.ColorValue.create({ h, s, l, a });
+      color = index_js_1.ColorValue.create({ h, s, l, a });
     }
     if (currentFormat === 'rgb') {
       const [r, g, b, a] = input.map(Number);
@@ -133,13 +133,13 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) {
         return;
       }
-      color = index_js_3.ColorValue.create({ r, g, b, a });
+      color = index_js_1.ColorValue.create({ r, g, b, a });
     }
     if (color) {
       applyHsvColorChange(color.toHsvColor(), true, color);
     }
   };
-  const hexInputField = React.createElement(index_js_2.Input, {
+  const hexInputField = React.createElement(Input_js_1.Input, {
     size: 'small',
     maxLength: showAlpha ? 9 : 7,
     minLength: 1,
@@ -166,7 +166,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
   const hslInputs = React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
@@ -192,7 +192,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
@@ -218,7 +218,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
@@ -245,7 +245,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : undefined,
     }),
     showAlpha &&
-      React.createElement(index_js_2.Input, {
+      React.createElement(Input_js_1.Input, {
         size: 'small',
         type: 'number',
         min: '0',
@@ -275,7 +275,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
   const rgbInputs = React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
@@ -300,7 +300,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
@@ -325,7 +325,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
@@ -351,7 +351,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : undefined,
     }),
     showAlpha &&
-      React.createElement(index_js_2.Input, {
+      React.createElement(Input_js_1.Input, {
         size: 'small',
         type: 'number',
         min: '0',
@@ -379,7 +379,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       }),
   );
   return React.createElement(
-    index_js_3.Box,
+    index_js_1.Box,
     {
       className: (0, classnames_1.default)(
         'iui-color-input-wrapper',
@@ -389,23 +389,23 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       ...rest,
     },
     React.createElement(
-      index_js_3.Box,
+      index_js_1.Box,
       { className: 'iui-color-picker-section-label' },
       showAlpha && currentFormat != 'hex'
         ? currentFormat.toUpperCase() + 'A'
         : currentFormat.toUpperCase(),
     ),
     React.createElement(
-      index_js_3.Box,
+      index_js_1.Box,
       { className: 'iui-color-input' },
       allowedColorFormats.length > 1 &&
         React.createElement(
-          index_js_1.IconButton,
+          IconButton_js_1.IconButton,
           { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
-          React.createElement(index_js_3.SvgSwap, null),
+          React.createElement(index_js_1.SvgSwap, null),
         ),
       React.createElement(
-        index_js_3.Box,
+        index_js_1.Box,
         { ref: inputsContainerRef, className: 'iui-color-input-fields' },
         currentFormat === 'hex' && hexInputField,
         currentFormat === 'rgb' && rgbInputs,

package/cjs/core/ColorPicker/ColorPicker.js

@@ -10,7 +10,6 @@ const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const ColorPickerContext_js_1 = require('./ColorPickerContext.js');
-const Surface_js_1 = require('../Surface/Surface.js');
 const getColorValue = (color) => {
   if (color instanceof index_js_1.ColorValue) {
     return color;
@@ -85,8 +84,11 @@ exports.ColorPicker = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     index_js_1.Box,
     {
-      as: applyBackground ? Surface_js_1.Surface : 'div',
-      className: (0, classnames_1.default)('iui-color-picker', className),
+      className: (0, classnames_1.default)(
+        'iui-color-picker',
+        { 'iui-popover-surface': applyBackground },
+        className,
+      ),
       ref: (0, index_js_1.useMergedRefs)(ref, forwardedRef),
       ...rest,
     },

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

@@ -7,12 +7,11 @@ 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('../Menu/index.js');
-const SelectTag_js_1 = tslib_1.__importDefault(
-  require('../Select/SelectTag.js'),
-);
-const index_js_2 = require('../Typography/index.js');
-const index_js_3 = require('../utils/index.js');
+const MenuExtraContent_js_1 = require('../Menu/MenuExtraContent.js');
+const SelectTag_js_1 = require('../Select/SelectTag.js');
+const Text_js_1 = require('../Typography/Text.js');
+const index_js_1 = require('../utils/index.js');
+const Popover_js_1 = require('../Popover/Popover.js');
 const helpers_js_1 = require('./helpers.js');
 const ComboBoxEndIcon_js_1 = require('./ComboBoxEndIcon.js');
 const ComboBoxInput_js_1 = require('./ComboBoxInput.js');
@@ -66,13 +65,13 @@ const ComboBox = (props) => {
     () =>
       props.id ??
       (inputProps?.id && `${inputProps.id}-cb`) ??
-      `iui-cb-${(0, index_js_3.getRandomValue)(10)}`,
+      `iui-cb-${(0, index_js_1.getRandomValue)(10)}`,
   );
   // Refs get set in subcomponents
   const inputRef = React.useRef(null);
   const menuRef = React.useRef(null);
-  const onChangeProp = (0, index_js_3.useLatestRef)(onChange);
-  const optionsRef = (0, index_js_3.useLatestRef)(options);
+  const onChangeProp = (0, index_js_1.useLatestRef)(onChange);
+  const optionsRef = (0, index_js_1.useLatestRef)(options);
   // Record to store all extra information (e.g. original indexes), where the key is the id of the option
   const optionsExtraInfoRef = React.useRef({});
   // Clear the extra info when the options change so that it can be reinitialized below
@@ -116,8 +115,8 @@ const ComboBox = (props) => {
       focusedIndex: -1,
     },
   );
-  const onShowRef = (0, index_js_3.useLatestRef)(onShowProp);
-  const onHideRef = (0, index_js_3.useLatestRef)(onHideProp);
+  const onShowRef = (0, index_js_1.useLatestRef)(onShowProp);
+  const onHideRef = (0, index_js_1.useLatestRef)(onHideProp);
   const show = React.useCallback(() => {
     dispatch({ type: 'open' });
     onShowRef.current?.();
@@ -126,7 +125,7 @@ const ComboBox = (props) => {
     dispatch({ type: 'close' });
     onHideRef.current?.();
   }, [onHideRef]);
-  (0, index_js_3.useIsomorphicLayoutEffect)(() => {
+  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
     // When the dropdown opens
     if (isOpen) {
       inputRef.current?.focus(); // Focus the input
@@ -317,7 +316,7 @@ const ComboBox = (props) => {
             focused: focusedIndex === __originalIndex,
             'data-iui-index': __originalIndex,
             'data-iui-filtered-index': filteredIndex,
-            ref: (0, index_js_3.mergeRefs)(customItem.props.ref, (el) => {
+            ref: (0, index_js_1.mergeRefs)(customItem.props.ref, (el) => {
               if (!enableVirtualization && focusedIndex === __originalIndex) {
                 el?.scrollIntoView({ block: 'nearest' });
               }
@@ -358,10 +357,10 @@ const ComboBox = (props) => {
         React.isValidElement(emptyStateMessage)
           ? emptyStateMessage
           : React.createElement(
-              index_js_1.MenuExtraContent,
+              MenuExtraContent_js_1.MenuExtraContent,
               null,
               React.createElement(
-                index_js_2.Text,
+                Text_js_1.Text,
                 { isMuted: true },
                 emptyStateMessage,
               ),
@@ -369,7 +368,7 @@ const ComboBox = (props) => {
       ),
     [emptyStateMessage],
   );
-  const popover = (0, index_js_3.usePopover)({
+  const popover = (0, Popover_js_1.usePopover)({
     visible: isOpen,
     onVisibleChange: (open) => (open ? show() : hide()),
     matchWidth: true,
@@ -413,7 +412,7 @@ const ComboBox = (props) => {
               selectTags: isMultipleEnabled(selected, multiple)
                 ? selected.map((index) => {
                     const item = optionsRef.current[index];
-                    return React.createElement(SelectTag_js_1.default, {
+                    return React.createElement(SelectTag_js_1.SelectTag, {
                       key: item.label,
                       label: item.label,
                     });
@@ -427,7 +426,7 @@ const ComboBox = (props) => {
             isOpen: isOpen,
           }),
           multiple
-            ? React.createElement(index_js_3.AutoclearingHiddenLiveRegion, {
+            ? React.createElement(index_js_1.AutoclearingHiddenLiveRegion, {
                 text: liveRegionSelection,
               })
             : null,

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -9,10 +9,11 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
+const Icon_js_1 = require('../Icon/Icon.js');
 exports.ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
   const { className, children, disabled, isOpen, ...rest } = props;
   return React.createElement(
-    index_js_1.Icon,
+    Icon_js_1.Icon,
     {
       as: 'span',
       ref: forwardedRef,

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

@@ -7,8 +7,8 @@ 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('../Input/index.js');
-const index_js_2 = require('../utils/index.js');
+const Input_js_1 = require('../Input/Input.js');
+const index_js_1 = require('../utils/index.js');
 const ComboBoxMultipleContainer_js_1 = require('./ComboBoxMultipleContainer.js');
 const helpers_js_1 = require('./helpers.js');
 exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
@@ -29,13 +29,13 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     popover,
     show,
     hide,
-  } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-  const dispatch = (0, index_js_2.useSafeContext)(
+  } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+  const dispatch = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxActionContext,
   );
   const { inputRef, menuRef, optionsExtraInfoRef } = (0,
-  index_js_2.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
-  const refs = (0, index_js_2.useMergedRefs)(
+  index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
+  const refs = (0, index_js_1.useMergedRefs)(
     inputRef,
     popover.refs.setReference,
     forwardedRef,
@@ -178,13 +178,13 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     }
   }, [hide, isOpen, show]);
   const [tagContainerWidthRef, tagContainerWidth] = (0,
-  index_js_2.useContainerWidth)();
+  index_js_1.useContainerWidth)();
   return React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_1.Input, {
+    React.createElement(Input_js_1.Input, {
       ref: refs,
-      onClick: (0, index_js_2.mergeEventHandlers)(onClickProp, handleClick),
+      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, handleClick),
       'aria-expanded': isOpen,
       'aria-activedescendant':
         isOpen && focusedIndex != undefined && focusedIndex > -1
@@ -200,7 +200,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       'aria-describedby': multiple ? `${id}-selected-live` : undefined,
       size: size,
       ...popover.getReferenceProps({
-        onKeyDown: (0, index_js_2.mergeEventHandlers)(
+        onKeyDown: (0, index_js_1.mergeEventHandlers)(
           onKeyDownProp,
           handleKeyDown,
         ),

package/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -7,23 +7,23 @@ 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('../StatusMessage/index.js');
-const index_js_2 = require('../utils/index.js');
+const StatusMessage_js_1 = require('../StatusMessage/StatusMessage.js');
+const index_js_1 = require('../utils/index.js');
 const helpers_js_1 = require('./helpers.js');
 exports.ComboBoxInputContainer = React.forwardRef((props, forwardedRef) => {
   const { className, status, message, children, ...rest } = props;
-  const { id } = (0, index_js_2.useSafeContext)(
+  const { id } = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxStateContext,
   );
   return React.createElement(
-    index_js_2.InputContainer,
+    index_js_1.InputContainer,
     {
       className: className,
       status: status,
       statusMessage:
         typeof message === 'string'
           ? React.createElement(
-              index_js_1.StatusMessage,
+              StatusMessage_js_1.StatusMessage,
               { status: status },
               message,
             )
@@ -34,7 +34,7 @@ exports.ComboBoxInputContainer = React.forwardRef((props, forwardedRef) => {
       id: id,
     },
     React.createElement(
-      index_js_2.Box,
+      index_js_1.Box,
       { className: 'iui-input-with-icon' },
       children,
     ),

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

@@ -7,14 +7,14 @@ 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('../Menu/index.js');
-const index_js_2 = require('../utils/index.js');
+const Menu_js_1 = require('../Menu/Menu.js');
+const index_js_1 = require('../utils/index.js');
 const helpers_js_1 = require('./helpers.js');
 const VirtualizedComboBoxMenu = (props) => {
   const { children, ...rest } = props;
   const { filteredOptions, getMenuItem, focusedIndex } = (0,
-  index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
-  const { menuRef } = (0, index_js_2.useSafeContext)(
+  index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
+  const { menuRef } = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxRefsContext,
   );
   const virtualItemRenderer = React.useCallback(
@@ -36,7 +36,7 @@ const VirtualizedComboBoxMenu = (props) => {
     );
   }, [focusedIndex, menuRef]);
   const { outerProps, innerProps, visibleChildren } = (0,
-  index_js_2.useVirtualization)({
+  index_js_1.useVirtualization)({
     // 'Fool' VirtualScroll by passing length 1
     // whenever there is no elements, to show empty state message
     itemsLength: filteredOptions.length || 1,
@@ -44,7 +44,7 @@ const VirtualizedComboBoxMenu = (props) => {
     scrollToIndex: focusedVisibleIndex,
   });
   return React.createElement(
-    index_js_2.Box,
+    index_js_1.Box,
     { as: 'div', ...outerProps, ...rest },
     React.createElement(
       'div',
@@ -55,13 +55,13 @@ const VirtualizedComboBoxMenu = (props) => {
 };
 exports.ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
   const { children, style, ...rest } = props;
-  const { id, enableVirtualization, popover } = (0, index_js_2.useSafeContext)(
+  const { id, enableVirtualization, popover } = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxStateContext,
   );
-  const { menuRef } = (0, index_js_2.useSafeContext)(
+  const { menuRef } = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxRefsContext,
   );
-  const refs = (0, index_js_2.useMergedRefs)(
+  const refs = (0, index_js_1.useMergedRefs)(
     popover.refs.setFloating,
     forwardedRef,
     menuRef,
@@ -69,10 +69,10 @@ exports.ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
   return (
     popover.open &&
     React.createElement(
-      index_js_2.Portal,
+      index_js_1.Portal,
       { portal: true },
       React.createElement(
-        index_js_1.Menu,
+        Menu_js_1.Menu,
         {
           id: `${id}-list`,
           setFocus: false,

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

@@ -9,9 +9,8 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/IconButton/index.js');
-const index_js_3 = require('../TimePicker/index.js');
-const index_js_4 = require('../Surface/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const TimePicker_js_1 = require('../TimePicker/TimePicker.js');
 const isSameDay = (a, b) => {
   return (
     a &&
@@ -419,8 +418,11 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     index_js_1.Box,
     {
-      as: applyBackground ? index_js_4.Surface : 'div',
-      className: (0, classnames_1.default)('iui-date-picker', className),
+      className: (0, classnames_1.default)(
+        'iui-date-picker',
+        { 'iui-popover-surface': applyBackground },
+        className,
+      ),
       ref: forwardedRef,
       ...rest,
     },
@@ -439,7 +441,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
         },
         showYearSelection &&
           React.createElement(
-            index_js_2.IconButton,
+            IconButton_js_1.IconButton,
             {
               styleType: 'borderless',
               onClick: handleMoveToPreviousYear,
@@ -449,7 +451,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
             React.createElement(index_js_1.SvgChevronLeftDouble, null),
           ),
         React.createElement(
-          index_js_2.IconButton,
+          IconButton_js_1.IconButton,
           {
             styleType: 'borderless',
             onClick: handleMoveToPreviousMonth,
@@ -479,7 +481,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
           displayedYear,
         ),
         React.createElement(
-          index_js_2.IconButton,
+          IconButton_js_1.IconButton,
           {
             styleType: 'borderless',
             onClick: handleMoveToNextMonth,
@@ -490,7 +492,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
         ),
         showYearSelection &&
           React.createElement(
-            index_js_2.IconButton,
+            IconButton_js_1.IconButton,
             {
               styleType: 'borderless',
               onClick: handleMoveToNextYear,
@@ -564,7 +566,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
       ),
     ),
     showTime &&
-      React.createElement(index_js_3.TimePicker, {
+      React.createElement(TimePicker_js_1.TimePicker, {
         date: selectedStartDay ?? selectedDay,
         use12Hours: use12Hours,
         precision: precision,

package/cjs/core/Dialog/DialogBackdrop.js

@@ -7,8 +7,8 @@ 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('../Backdrop/index.js');
-const index_js_2 = require('../utils/index.js');
+const Backdrop_js_1 = require('../Backdrop/Backdrop.js');
+const index_js_1 = require('../utils/index.js');
 const DialogContext_js_1 = require('./DialogContext.js');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 /**
@@ -31,7 +31,7 @@ exports.DialogBackdrop = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const backdropRef = React.useRef(null);
-  const refs = (0, index_js_2.useMergedRefs)(backdropRef, ref);
+  const refs = (0, index_js_1.useMergedRefs)(backdropRef, ref);
   const handleMouseDown = (event) => {
     // Prevents React from resetting its properties
     event.persist();
@@ -43,7 +43,7 @@ exports.DialogBackdrop = React.forwardRef((props, ref) => {
     }
     onMouseDown?.(event);
   };
-  return React.createElement(index_js_1.Backdrop, {
+  return React.createElement(Backdrop_js_1.Backdrop, {
     isVisible: isVisible,
     className: (0, classnames_1.default)(
       { 'iui-backdrop-fixed': relativeTo === 'viewport' },

package/cjs/core/Dialog/DialogTitleBar.js

@@ -9,7 +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 index_js_2 = require('../Buttons/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
 const DialogContext_js_1 = require('./DialogContext.js');
 const DialogTitleBarTitle_js_1 = require('./DialogTitleBarTitle.js');
 const DialogDragContext_js_1 = require('./DialogDragContext.js');
@@ -74,7 +74,7 @@ exports.DialogTitleBar = Object.assign(
             ),
             isDismissible &&
               React.createElement(
-                index_js_2.IconButton,
+                IconButton_js_1.IconButton,
                 {
                   size: 'small',
                   styleType: 'borderless',

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

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('./Box.js');
+const Box_js_1 = require('../utils/components/Box.js');
 /**
  * Shows a divider
  */

package/cjs/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 { Popover } from '../Popover/Popover.js';
 export type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.