@itwin/itwinui-react 3.17.3 → 3.18.0

package/DEV-esm/core/FileUpload/FileUploadCard.js

@@ -26,9 +26,11 @@ let toDate = (dateNumber) => {
 let FileUploadCardIcon = polymorphic.span('iui-file-card-icon', {
   children: React.createElement(SvgDocument, null),
 });
-FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
+if ('development' === process.env.NODE_ENV)
+  FileUploadCardIcon.displayName = 'FileUploadCard.Icon';
 let FileUploadCardInfo = polymorphic.span('iui-file-card-text');
-FileUploadCardInfo.displayName = 'FileUploadCard.Info';
+if ('development' === process.env.NODE_ENV)
+  FileUploadCardInfo.displayName = 'FileUploadCard.Info';
 let FileUploadCardTitle = React.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   let { files } = useSafeContext(FileUploadCardContext);
@@ -45,7 +47,8 @@ let FileUploadCardTitle = React.forwardRef((props, ref) => {
     children ?? title,
   );
 });
-FileUploadCardTitle.displayName = 'FileUploadCard.Title';
+if ('development' === process.env.NODE_ENV)
+  FileUploadCardTitle.displayName = 'FileUploadCard.Title';
 let FileUploadCardDescription = React.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   let { files } = useSafeContext(FileUploadCardContext);
@@ -66,9 +69,11 @@ let FileUploadCardDescription = React.forwardRef((props, ref) => {
     children ?? description,
   );
 });
-FileUploadCardDescription.displayName = 'FileUploadCard.Description';
+if ('development' === process.env.NODE_ENV)
+  FileUploadCardDescription.displayName = 'FileUploadCard.Description';
 let FileUploadCardAction = polymorphic.div('iui-file-card-action');
-FileUploadCardAction.displayName = 'FileUploadCard.Action';
+if ('development' === process.env.NODE_ENV)
+  FileUploadCardAction.displayName = 'FileUploadCard.Action';
 let FileUploadCardInputLabel = React.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   let { inputId } = useSafeContext(FileUploadCardContext);
@@ -83,7 +88,8 @@ let FileUploadCardInputLabel = React.forwardRef((props, ref) => {
     children,
   );
 });
-FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
+if ('development' === process.env.NODE_ENV)
+  FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
 let FileUploadCardInput = React.forwardRef((props, ref) => {
   let { children, onChange, id, ...rest } = props;
   let { files, onFilesChange, setInternalFiles, inputId, setInputId } =
@@ -121,7 +127,8 @@ let FileUploadCardInput = React.forwardRef((props, ref) => {
     children,
   );
 });
-FileUploadCardInput.displayName = 'FileUploadCard.Input';
+if ('development' === process.env.NODE_ENV)
+  FileUploadCardInput.displayName = 'FileUploadCard.Input';
 let FileUploadCardComponent = React.forwardRef((props, ref) => {
   let {
     className,
@@ -186,6 +193,8 @@ export const FileUploadCard = Object.assign(FileUploadCardComponent, {
   InputLabel: FileUploadCardInputLabel,
   Input: FileUploadCardInput,
 });
-FileUploadCard.displayName = 'FileUploadCard';
+if ('development' === process.env.NODE_ENV)
+  FileUploadCard.displayName = 'FileUploadCard';
 export const FileUploadCardContext = React.createContext(void 0);
-FileUploadCardContext.displayName = 'FileUploadCardContext';
+if ('development' === process.env.NODE_ENV)
+  FileUploadCardContext.displayName = 'FileUploadCardContext';

package/DEV-esm/core/FileUpload/FileUploadTemplate.js

@@ -49,4 +49,5 @@ export const FileUploadTemplate = React.forwardRef((props, ref) => {
     ),
   );
 });
-FileUploadTemplate.displayName = 'FileUploadTemplate';
+if ('development' === process.env.NODE_ENV)
+  FileUploadTemplate.displayName = 'FileUploadTemplate';

package/DEV-esm/core/Flex/Flex.js

@@ -33,7 +33,7 @@ let FlexComponent = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-FlexComponent.displayName = 'Flex';
+if ('development' === process.env.NODE_ENV) FlexComponent.displayName = 'Flex';
 let FlexSpacer = React.forwardRef((props, ref) => {
   let { flex, className, style, ...rest } = props;
   return React.createElement(Box, {
@@ -46,7 +46,8 @@ let FlexSpacer = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-FlexSpacer.displayName = 'Flex.Spacer';
+if ('development' === process.env.NODE_ENV)
+  FlexSpacer.displayName = 'Flex.Spacer';
 let FlexItem = React.forwardRef((props, ref) => {
   let { gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } =
     props;
@@ -70,7 +71,7 @@ let FlexItem = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-FlexItem.displayName = 'Flex.Item';
+if ('development' === process.env.NODE_ENV) FlexItem.displayName = 'Flex.Item';
 export const Flex = Object.assign(FlexComponent, {
   Item: FlexItem,
   Spacer: FlexSpacer,

package/DEV-esm/core/Footer/Footer.js

@@ -112,4 +112,4 @@ export const Footer = Object.assign(
     Separator: FooterSeparator,
   },
 );
-Footer.displayName = 'Footer';
+if ('development' === process.env.NODE_ENV) Footer.displayName = 'Footer';

package/DEV-esm/core/Footer/FooterItem.js

@@ -1,3 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
 export const FooterItem = polymorphic.li('iui-legal-footer-item');
-FooterItem.displayName = 'Footer.Item';
+if ('development' === process.env.NODE_ENV)
+  FooterItem.displayName = 'Footer.Item';

package/DEV-esm/core/Footer/FooterList.js

@@ -1,3 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
 export const FooterList = polymorphic.ul('iui-legal-footer-list');
-FooterList.displayName = 'Footer.List';
+if ('development' === process.env.NODE_ENV)
+  FooterList.displayName = 'Footer.List';

package/DEV-esm/core/Footer/FooterSeparator.js

@@ -2,4 +2,5 @@ import { polymorphic } from '../../utils/index.js';
 export const FooterSeparator = polymorphic.li('iui-legal-footer-separator', {
   'aria-hidden': true,
 });
-FooterSeparator.displayName = 'Footer.Separator';
+if ('development' === process.env.NODE_ENV)
+  FooterSeparator.displayName = 'Footer.Separator';

package/DEV-esm/core/Header/Header.js

@@ -77,4 +77,4 @@ export const Header = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-Header.displayName = 'Header';
+if ('development' === process.env.NODE_ENV) Header.displayName = 'Header';

package/DEV-esm/core/Header/HeaderBreadcrumbs.js

@@ -42,4 +42,5 @@ export const HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-HeaderBreadcrumbs.displayName = 'HeaderBreadcrumbs';
+if ('development' === process.env.NODE_ENV)
+  HeaderBreadcrumbs.displayName = 'HeaderBreadcrumbs';

package/DEV-esm/core/Header/HeaderButton.js

@@ -75,4 +75,5 @@ export const HeaderButton = React.forwardRef((props, ref) => {
     headerButton,
   );
 });
-HeaderButton.displayName = 'HeaderButton';
+if ('development' === process.env.NODE_ENV)
+  HeaderButton.displayName = 'HeaderButton';

package/DEV-esm/core/Header/HeaderLogo.js

@@ -7,7 +7,7 @@ export const HeaderLogo = React.forwardRef((props, ref) => {
     children,
     logo,
     onClick,
-    as = onClick ? 'button' : 'div',
+    as = !!onClick ? 'button' : 'div',
     ...rest
   } = props;
   return React.createElement(
@@ -42,4 +42,5 @@ export const HeaderLogo = React.forwardRef((props, ref) => {
       ),
   );
 });
-HeaderLogo.displayName = 'HeaderLogo';
+if ('development' === process.env.NODE_ENV)
+  HeaderLogo.displayName = 'HeaderLogo';

package/DEV-esm/core/Icon/Icon.js

@@ -31,4 +31,4 @@ export const Icon = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-Icon.displayName = 'Icon';
+if ('development' === process.env.NODE_ENV) Icon.displayName = 'Icon';

package/DEV-esm/core/InformationPanel/InformationPanel.js

@@ -88,4 +88,5 @@ export const InformationPanel = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-InformationPanel.displayName = 'InformationPanel';
+if ('development' === process.env.NODE_ENV)
+  InformationPanel.displayName = 'InformationPanel';

package/DEV-esm/core/InformationPanel/InformationPanelBody.js

@@ -1,3 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
 export const InformationPanelBody = polymorphic.div('iui-information-body');
-InformationPanelBody.displayName = 'InformationPanel.Body';
+if ('development' === process.env.NODE_ENV)
+  InformationPanelBody.displayName = 'InformationPanel.Body';

package/DEV-esm/core/InformationPanel/InformationPanelContent.js

@@ -21,4 +21,5 @@ export const InformationPanelContent = React.forwardRef(
     );
   },
 );
-InformationPanelContent.displayName = 'InformationPanelContent';
+if ('development' === process.env.NODE_ENV)
+  InformationPanelContent.displayName = 'InformationPanelContent';

package/DEV-esm/core/InformationPanel/InformationPanelHeader.js

@@ -42,4 +42,5 @@ export const InformationPanelHeader = React.forwardRef(
     );
   },
 );
-InformationPanelHeader.displayName = 'InformationPanelHeader';
+if ('development' === process.env.NODE_ENV)
+  InformationPanelHeader.displayName = 'InformationPanelHeader';

package/DEV-esm/core/InformationPanel/InformationPanelWrapper.js

@@ -2,4 +2,5 @@ import { polymorphic } from '../../utils/index.js';
 export const InformationPanelWrapper = polymorphic.div(
   'iui-information-panel-wrapper',
 );
-InformationPanelWrapper.displayName = 'InformationPanelWrapper';
+if ('development' === process.env.NODE_ENV)
+  InformationPanelWrapper.displayName = 'InformationPanelWrapper';

package/DEV-esm/core/Input/Input.js

@@ -15,4 +15,4 @@ export const Input = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-Input.displayName = 'Input';
+if ('development' === process.env.NODE_ENV) Input.displayName = 'Input';

package/DEV-esm/core/InputGrid/InputGrid.js

@@ -27,7 +27,7 @@ export const InputGrid = React.forwardRef((props, ref) => {
     children,
   );
 });
-InputGrid.displayName = 'InputGrid';
+if ('development' === process.env.NODE_ENV) InputGrid.displayName = 'InputGrid';
 let useChildrenWithIds = (children) => {
   let { labelId, inputId, messageId } = useSetup(children);
   return React.useMemo(

package/DEV-esm/core/InputGroup/InputGroup.js

@@ -59,7 +59,8 @@ export const InputGroup = React.forwardRef((props, forwardedRef) => {
     }),
   );
 });
-InputGroup.displayName = 'InputGroup';
+if ('development' === process.env.NODE_ENV)
+  InputGroup.displayName = 'InputGroup';
 let BottomMessage = (props) => {
   let { message, status, svgIcon, displayStyle, messageProps } = props;
   if (message && 'string' != typeof message) return message;

package/DEV-esm/core/InputWithDecorations/InputWithDecorations.js

@@ -7,7 +7,8 @@ import {
   useSafeContext,
 } from '../../utils/index.js';
 let InputWithDecorationsContext = React.createContext(void 0);
-InputWithDecorationsContext.displayName = 'InputWithDecorationsContext';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsContext.displayName = 'InputWithDecorationsContext';
 let InputWithDecorationsComponent = React.forwardRef((props, ref) => {
   let { children, size, isDisabled, ...rest } = props;
   return React.createElement(
@@ -30,7 +31,8 @@ let InputWithDecorationsComponent = React.forwardRef((props, ref) => {
     ),
   );
 });
-InputWithDecorationsComponent.displayName = 'InputWithDecorations';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsComponent.displayName = 'InputWithDecorations';
 let InputWithDecorationsInput = React.forwardRef((props, ref) => {
   let { id: idProp, size, disabled: localDisabled, ...rest } = props;
   let { size: contextSize, isDisabled } = useSafeContext(
@@ -45,7 +47,8 @@ let InputWithDecorationsInput = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
 let InputWithDecorationsButton = React.forwardRef((props, ref) => {
   let { children, size, disabled: localDisabled, ...rest } = props;
   let { size: contextSize, isDisabled } = useSafeContext(
@@ -62,9 +65,11 @@ let InputWithDecorationsButton = React.forwardRef((props, ref) => {
     children,
   );
 });
-InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
 let InputWithDecorationsIcon = InputFlexContainerIcon;
-InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
 export const InputWithDecorations = Object.assign(
   InputWithDecorationsComponent,
   {

package/DEV-esm/core/Label/Label.js

@@ -29,4 +29,4 @@ export const Label = React.forwardRef((props, forwardedRef) => {
     children,
   );
 });
-Label.displayName = 'Label';
+if ('development' === process.env.NODE_ENV) Label.displayName = 'Label';

package/DEV-esm/core/LabeledInput/LabeledInput.js

@@ -75,4 +75,5 @@ export const LabeledInput = React.forwardRef((props, ref) => {
       : message,
   );
 });
-LabeledInput.displayName = 'LabeledInput';
+if ('development' === process.env.NODE_ENV)
+  LabeledInput.displayName = 'LabeledInput';

package/DEV-esm/core/LabeledSelect/LabeledSelect.js

@@ -45,7 +45,9 @@ export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
       required: props.native ? required : void 0,
       ...rest,
       ref: forwardedRef,
-      styleType: 'default',
+      ...{
+        styleType: 'default',
+      },
     }),
     'string' == typeof message
       ? React.createElement(
@@ -61,4 +63,5 @@ export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
       : message,
   );
 });
-LabeledSelect.displayName = 'LabeledSelect';
+if ('development' === process.env.NODE_ENV)
+  LabeledSelect.displayName = 'LabeledSelect';

package/DEV-esm/core/LabeledTextarea/LabeledTextarea.js

@@ -8,4 +8,5 @@ export const LabeledTextarea = React.forwardRef((props, forwardedRef) =>
     ...props,
   }),
 );
-LabeledTextarea.displayName = 'LabeledTextarea';
+if ('development' === process.env.NODE_ENV)
+  LabeledTextarea.displayName = 'LabeledTextarea';

package/DEV-esm/core/LinkAction/LinkAction.js

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { polymorphic } from '../../utils/functions/polymorphic.js';
 import { Box } from '../../utils/components/index.js';
 export const LinkAction = React.forwardRef((props, forwardedRef) => {
-  let { as: asProp = props.href ? 'a' : 'button' } = props;
+  let { as: asProp = !!props.href ? 'a' : 'button' } = props;
   return React.createElement(Box, {
     ...props,
     as: asProp,
@@ -11,6 +11,7 @@ export const LinkAction = React.forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
   });
 });
-LinkAction.displayName = 'LinkAction';
+if ('development' === process.env.NODE_ENV)
+  LinkAction.displayName = 'LinkAction';
 export const LinkBox = polymorphic.div('iui-link-box');
-LinkBox.displayName = 'LinkBox';
+if ('development' === process.env.NODE_ENV) LinkBox.displayName = 'LinkBox';

package/DEV-esm/core/List/List.js

@@ -19,4 +19,4 @@ export const List = React.forwardRef((props, ref) => {
     }),
   );
 });
-List.displayName = 'List';
+if ('development' === process.env.NODE_ENV) List.displayName = 'List';

package/DEV-esm/core/List/ListItem.js

@@ -24,15 +24,20 @@ let ListItemComponent = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-ListItemComponent.displayName = 'ListItem';
+if ('development' === process.env.NODE_ENV)
+  ListItemComponent.displayName = 'ListItem';
 let ListItemIcon = polymorphic.div('iui-list-item-icon');
-ListItemIcon.displayName = 'ListItem.Icon';
+if ('development' === process.env.NODE_ENV)
+  ListItemIcon.displayName = 'ListItem.Icon';
 let ListItemContent = polymorphic.div('iui-list-item-content');
-ListItemContent.displayName = 'ListItem.Content';
+if ('development' === process.env.NODE_ENV)
+  ListItemContent.displayName = 'ListItem.Content';
 let ListItemDescription = polymorphic.div('iui-list-item-description');
-ListItemDescription.displayName = 'ListItem.Description';
+if ('development' === process.env.NODE_ENV)
+  ListItemDescription.displayName = 'ListItem.Description';
 let ListItemAction = LinkAction;
-ListItemAction.displayName = 'ListItem.Action';
+if ('development' === process.env.NODE_ENV)
+  ListItemAction.displayName = 'ListItem.Action';
 export const ListItem = Object.assign(ListItemComponent, {
   Icon: ListItemIcon,
   Content: ListItemContent,

package/DEV-esm/core/Menu/Menu.js

@@ -151,7 +151,10 @@ export const Menu = React.forwardRef((props, ref) => {
         onMouseEnter: mergeEventHandlers(userProps?.onMouseEnter, (event) => {
           if (null != focusableItemIndex && focusableItemIndex >= 0)
             setActiveIndex(focusableItemIndex);
-          if (event.target === event.currentTarget) event.currentTarget.focus();
+          if (event.target === event.currentTarget)
+            event.currentTarget.focus({
+              focusVisible: false,
+            });
         }),
       }),
     [activeIndex, getItemProps, nodeId, parentId, tree?.events],

package/DEV-esm/core/Menu/MenuDivider.js

@@ -2,4 +2,5 @@ import { polymorphic } from '../../utils/index.js';
 export const MenuDivider = polymorphic.div('iui-menu-divider', {
   role: 'separator',
 });
-MenuDivider.displayName = 'MenuDivider';
+if ('development' === process.env.NODE_ENV)
+  MenuDivider.displayName = 'MenuDivider';

package/DEV-esm/core/Menu/MenuExtraContent.js

@@ -1,5 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
-export const MenuExtraContent = polymorphic.li('iui-menu-content', {
-  role: 'presentation',
-});
-MenuExtraContent.displayName = 'MenuExtraContent';
+export const MenuExtraContent = polymorphic.div('iui-menu-content');
+if ('development' === process.env.NODE_ENV)
+  MenuExtraContent.displayName = 'MenuExtraContent';

package/DEV-esm/core/Menu/MenuItem.js

@@ -21,7 +21,7 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     value,
     onClick: onClickProp,
     sublabel,
-    size = sublabel ? 'large' : 'default',
+    size = !!sublabel ? 'large' : 'default',
     icon,
     startIcon = icon,
     badge,
@@ -31,7 +31,11 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = useWarningLogger();
-  if (null != onClickProp && subMenuItems.length > 0)
+  if (
+    'development' === process.env.NODE_ENV &&
+    null != onClickProp &&
+    subMenuItems.length > 0
+  )
     logWarning(
       'Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.',
     );
@@ -143,4 +147,4 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
       : trigger,
   );
 });
-MenuItem.displayName = 'MenuItem';
+if ('development' === process.env.NODE_ENV) MenuItem.displayName = 'MenuItem';

package/DEV-esm/core/Menu/MenuItemSkeleton.js

@@ -50,4 +50,5 @@ export const MenuItemSkeleton = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-MenuItemSkeleton.displayName = 'MenuItemSkeleton';
+if ('development' === process.env.NODE_ENV)
+  MenuItemSkeleton.displayName = 'MenuItemSkeleton';

package/DEV-esm/core/Modal/Modal.js

@@ -45,4 +45,4 @@ export const Modal = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-Modal.displayName = 'Modal';
+if ('development' === process.env.NODE_ENV) Modal.displayName = 'Modal';

package/DEV-esm/core/Modal/ModalButtonBar.js

@@ -1,3 +1,4 @@
 import { DialogButtonBar } from '../Dialog/DialogButtonBar.js';
 export const ModalButtonBar = Object.assign({}, DialogButtonBar);
-ModalButtonBar.displayName = 'ModalButtonBar';
+if ('development' === process.env.NODE_ENV)
+  ModalButtonBar.displayName = 'ModalButtonBar';

package/DEV-esm/core/Modal/ModalContent.js

@@ -1,3 +1,4 @@
 import { DialogContent } from '../Dialog/DialogContent.js';
 export const ModalContent = Object.assign({}, DialogContent);
-ModalContent.displayName = 'ModalContent';
+if ('development' === process.env.NODE_ENV)
+  ModalContent.displayName = 'ModalContent';

package/DEV-esm/core/NonIdealState/ErrorPage.js

@@ -164,4 +164,4 @@ export const ErrorPage = React.forwardRef((props, forwardedRef) => {
     ...rest,
   });
 });
-ErrorPage.displayName = 'ErrorPage';
+if ('development' === process.env.NODE_ENV) ErrorPage.displayName = 'ErrorPage';

package/DEV-esm/core/NonIdealState/NonIdealState.js

@@ -68,4 +68,5 @@ export const NonIdealState = React.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-NonIdealState.displayName = 'NonIdealState';
+if ('development' === process.env.NODE_ENV)
+  NonIdealState.displayName = 'NonIdealState';

package/DEV-esm/core/NotificationMarker/NotificationMarker.js

@@ -28,4 +28,5 @@ export const NotificationMarker = React.forwardRef((props, ref) => {
     children,
   );
 });
-NotificationMarker.displayName = 'NotificationMarker';
+if ('development' === process.env.NODE_ENV)
+  NotificationMarker.displayName = 'NotificationMarker';

package/DEV-esm/core/Overlay/Overlay.js

@@ -12,7 +12,8 @@ let OverlayComponent = React.forwardRef((props, forwardedRef) => {
     React.createElement(OverlayHiddenContent, null, children),
   );
 });
-OverlayComponent.displayName = 'Overlay';
+if ('development' === process.env.NODE_ENV)
+  OverlayComponent.displayName = 'Overlay';
 let OverlayHiddenContent = React.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   return React.createElement(
@@ -25,11 +26,14 @@ let OverlayHiddenContent = React.forwardRef((props, ref) => {
     children,
   );
 });
-OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
+if ('development' === process.env.NODE_ENV)
+  OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
 let OverlayOverlay = polymorphic.div('iui-overlay');
-OverlayOverlay.displayName = 'Overlay.Overlay';
+if ('development' === process.env.NODE_ENV)
+  OverlayOverlay.displayName = 'Overlay.Overlay';
 let OverlayWrapper = polymorphic.div('iui-overlay-wrapper');
-OverlayWrapper.displayName = 'Overlay.Wrapper';
+if ('development' === process.env.NODE_ENV)
+  OverlayWrapper.displayName = 'Overlay.Wrapper';
 export const Overlay = Object.assign(OverlayComponent, {
   Wrapper: OverlayWrapper,
   HiddenContent: OverlayHiddenContent,

package/DEV-esm/core/Panels/Panels.js

@@ -92,9 +92,11 @@ export const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-PanelsWrapper.displayName = 'Panels.Wrapper';
+if ('development' === process.env.NODE_ENV)
+  PanelsWrapper.displayName = 'Panels.Wrapper';
 export const PanelsWrapperContext = React.createContext(void 0);
-PanelsWrapperContext.displayName = 'PanelsWrapperContext';
+if ('development' === process.env.NODE_ENV)
+  PanelsWrapperContext.displayName = 'PanelsWrapperContext';
 let Panel = React.forwardRef((props, forwardedRef) => {
   let { id, children, className, ...rest } = props;
   let { activePanelId, triggers, panels, setActivePanelId } =
@@ -142,9 +144,10 @@ let Panel = React.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-Panel.displayName = 'Panels.Panel';
+if ('development' === process.env.NODE_ENV) Panel.displayName = 'Panels.Panel';
 let PanelContext = React.createContext(void 0);
-PanelContext.displayName = 'PanelContext';
+if ('development' === process.env.NODE_ENV)
+  PanelContext.displayName = 'PanelContext';
 let PanelTrigger = (props) => {
   let { children, for: forProp } = props;
   let {
@@ -217,7 +220,8 @@ let PanelTrigger = (props) => {
     'aria-controls': forProp,
   }));
 };
-PanelTrigger.displayName = 'Panels.Trigger';
+if ('development' === process.env.NODE_ENV)
+  PanelTrigger.displayName = 'Panels.Trigger';
 let PanelHeader = React.forwardRef((props, forwardedRef) => {
   let { titleProps, children, ...rest } = props;
   let { shouldFocus, setShouldFocus } = useSafeContext(PanelsWrapperContext);
@@ -257,7 +261,8 @@ let PanelHeader = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-PanelHeader.displayName = 'Panels.Header';
+if ('development' === process.env.NODE_ENV)
+  PanelHeader.displayName = 'Panels.Header';
 let PanelBackButton = React.forwardRef((props, forwardedRef) => {
   let { children, onClick, ...rest } = props;
   let { instance: panelInstance } = useSafeContext(PanelsInstanceContext);
@@ -278,7 +283,8 @@ let PanelBackButton = React.forwardRef((props, forwardedRef) => {
     children || React.createElement(SvgChevronLeft, null),
   );
 });
-PanelBackButton.displayName = 'Panels.BackButton';
+if ('development' === process.env.NODE_ENV)
+  PanelBackButton.displayName = 'Panels.BackButton';
 export const Panels = {
   Wrapper: PanelsWrapper,
   Panel,

package/DEV-esm/core/Panels/helpers.js

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { useSafeContext, useSynchronizeInstance } from '../../utils/index.js';
 import { Panels, PanelsWrapperContext } from './Panels.js';
 export const PanelsInstanceContext = React.createContext(void 0);
-PanelsInstanceContext.displayName = 'PanelsInstanceContext';
+if ('development' === process.env.NODE_ENV)
+  PanelsInstanceContext.displayName = 'PanelsInstanceContext';
 export const PanelsInstanceProvider = (props) => {
   let { children, instance: instanceProp } = props;
   let instanceBackup = Panels.useInstance();