@itwin/itwinui-react 3.17.4 → 3.18.0

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

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

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

@@ -12,7 +12,8 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const InputWithDecorationsContext = _react.createContext(void 0);
-InputWithDecorationsContext.displayName = 'InputWithDecorationsContext';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsContext.displayName = 'InputWithDecorationsContext';
 const InputWithDecorationsComponent = _react.forwardRef((props, ref) => {
   let { children, size, isDisabled, ...rest } = props;
   return _react.createElement(
@@ -35,7 +36,8 @@ const InputWithDecorationsComponent = _react.forwardRef((props, ref) => {
     ),
   );
 });
-InputWithDecorationsComponent.displayName = 'InputWithDecorations';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsComponent.displayName = 'InputWithDecorations';
 const InputWithDecorationsInput = _react.forwardRef((props, ref) => {
   let { id: idProp, size, disabled: localDisabled, ...rest } = props;
   let { size: contextSize, isDisabled } = (0, _index.useSafeContext)(
@@ -50,7 +52,8 @@ const InputWithDecorationsInput = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
-InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
 const InputWithDecorationsButton = _react.forwardRef((props, ref) => {
   let { children, size, disabled: localDisabled, ...rest } = props;
   let { size: contextSize, isDisabled } = (0, _index.useSafeContext)(
@@ -67,9 +70,11 @@ const InputWithDecorationsButton = _react.forwardRef((props, ref) => {
     children,
   );
 });
-InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
 const InputWithDecorationsIcon = _index.InputFlexContainerIcon;
-InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
+if ('development' === process.env.NODE_ENV)
+  InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
 const InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
   Input: InputWithDecorationsInput,
   Button: InputWithDecorationsButton,

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

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

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

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

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

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

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

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

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

@@ -26,7 +26,7 @@ const _classnames = /*#__PURE__*/ _interop_require_default._(
 const _polymorphic = require('../../utils/functions/polymorphic.js');
 const _index = require('../../utils/components/index.js');
 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(_index.Box, {
     ...props,
     as: asProp,
@@ -34,6 +34,7 @@ const LinkAction = _react.forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
   });
 });
-LinkAction.displayName = 'LinkAction';
+if ('development' === process.env.NODE_ENV)
+  LinkAction.displayName = 'LinkAction';
 const LinkBox = _polymorphic.polymorphic.div('iui-link-box');
-LinkBox.displayName = 'LinkBox';
+if ('development' === process.env.NODE_ENV) LinkBox.displayName = 'LinkBox';

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

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

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

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

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

@@ -166,7 +166,9 @@ const Menu = _react.forwardRef((props, ref) => {
             if (null != focusableItemIndex && focusableItemIndex >= 0)
               setActiveIndex(focusableItemIndex);
             if (event.target === event.currentTarget)
-              event.currentTarget.focus();
+              event.currentTarget.focus({
+                focusVisible: false,
+              });
           },
         ),
       }),

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

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

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

@@ -9,7 +9,6 @@ Object.defineProperty(exports, 'MenuExtraContent', {
   },
 });
 const _index = require('../../utils/index.js');
-const MenuExtraContent = _index.polymorphic.li('iui-menu-content', {
-  role: 'presentation',
-});
-MenuExtraContent.displayName = 'MenuExtraContent';
+const MenuExtraContent = _index.polymorphic.div('iui-menu-content');
+if ('development' === process.env.NODE_ENV)
+  MenuExtraContent.displayName = 'MenuExtraContent';

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

@@ -27,7 +27,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     value,
     onClick: onClickProp,
     sublabel,
-    size = sublabel ? 'large' : 'default',
+    size = !!sublabel ? 'large' : 'default',
     icon,
     startIcon = icon,
     badge,
@@ -37,7 +37,11 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = (0, _index.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.',
     );
@@ -150,4 +154,4 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
       : trigger,
   );
 });
-MenuItem.displayName = 'MenuItem';
+if ('development' === process.env.NODE_ENV) MenuItem.displayName = 'MenuItem';

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

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

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

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

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

@@ -10,4 +10,5 @@ Object.defineProperty(exports, 'ModalButtonBar', {
 });
 const _DialogButtonBar = require('../Dialog/DialogButtonBar.js');
 const ModalButtonBar = Object.assign({}, _DialogButtonBar.DialogButtonBar);
-ModalButtonBar.displayName = 'ModalButtonBar';
+if ('development' === process.env.NODE_ENV)
+  ModalButtonBar.displayName = 'ModalButtonBar';

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

@@ -10,4 +10,5 @@ Object.defineProperty(exports, 'ModalContent', {
 });
 const _DialogContent = require('../Dialog/DialogContent.js');
 const ModalContent = Object.assign({}, _DialogContent.DialogContent);
-ModalContent.displayName = 'ModalContent';
+if ('development' === process.env.NODE_ENV)
+  ModalContent.displayName = 'ModalContent';

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

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

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

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

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

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

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

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

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

@@ -109,9 +109,11 @@ const PanelsWrapper = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-PanelsWrapper.displayName = 'Panels.Wrapper';
+if ('development' === process.env.NODE_ENV)
+  PanelsWrapper.displayName = 'Panels.Wrapper';
 const PanelsWrapperContext = _react.createContext(void 0);
-PanelsWrapperContext.displayName = 'PanelsWrapperContext';
+if ('development' === process.env.NODE_ENV)
+  PanelsWrapperContext.displayName = 'PanelsWrapperContext';
 const Panel = _react.forwardRef((props, forwardedRef) => {
   let { id, children, className, ...rest } = props;
   let { activePanelId, triggers, panels, setActivePanelId } = (0,
@@ -159,9 +161,10 @@ const Panel = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-Panel.displayName = 'Panels.Panel';
+if ('development' === process.env.NODE_ENV) Panel.displayName = 'Panels.Panel';
 const PanelContext = _react.createContext(void 0);
-PanelContext.displayName = 'PanelContext';
+if ('development' === process.env.NODE_ENV)
+  PanelContext.displayName = 'PanelContext';
 const PanelTrigger = (props) => {
   let { children, for: forProp } = props;
   let {
@@ -234,7 +237,8 @@ const PanelTrigger = (props) => {
     'aria-controls': forProp,
   }));
 };
-PanelTrigger.displayName = 'Panels.Trigger';
+if ('development' === process.env.NODE_ENV)
+  PanelTrigger.displayName = 'Panels.Trigger';
 const PanelHeader = _react.forwardRef((props, forwardedRef) => {
   let { titleProps, children, ...rest } = props;
   let { shouldFocus, setShouldFocus } = (0, _index.useSafeContext)(
@@ -276,7 +280,8 @@ const PanelHeader = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-PanelHeader.displayName = 'Panels.Header';
+if ('development' === process.env.NODE_ENV)
+  PanelHeader.displayName = 'Panels.Header';
 const PanelBackButton = _react.forwardRef((props, forwardedRef) => {
   let { children, onClick, ...rest } = props;
   let { instance: panelInstance } = (0, _index.useSafeContext)(
@@ -299,7 +304,8 @@ const PanelBackButton = _react.forwardRef((props, forwardedRef) => {
     children || _react.createElement(_index.SvgChevronLeft, null),
   );
 });
-PanelBackButton.displayName = 'Panels.BackButton';
+if ('development' === process.env.NODE_ENV)
+  PanelBackButton.displayName = 'Panels.BackButton';
 const Panels = {
   Wrapper: PanelsWrapper,
   Panel,

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

@@ -22,7 +22,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _Panels = require('./Panels.js');
 const PanelsInstanceContext = _react.createContext(void 0);
-PanelsInstanceContext.displayName = 'PanelsInstanceContext';
+if ('development' === process.env.NODE_ENV)
+  PanelsInstanceContext.displayName = 'PanelsInstanceContext';
 const PanelsInstanceProvider = (props) => {
   let { children, instance: instanceProp } = props;
   let instanceBackup = _Panels.Panels.useInstance();

package/DEV-cjs/core/Popover/Popover.js

@@ -50,10 +50,12 @@ const usePopover = (options) => {
   let mergedInteractions = _react.useMemo(
     () => ({
       ...interactionsProp,
-      click: interactionsProp?.click ?? true,
-      dismiss: interactionsProp?.dismiss ?? true,
-      hover: interactionsProp?.hover ?? false,
-      focus: interactionsProp?.focus ?? false,
+      ...{
+        click: interactionsProp?.click ?? true,
+        dismiss: interactionsProp?.dismiss ?? true,
+        hover: interactionsProp?.hover ?? false,
+        focus: interactionsProp?.focus ?? false,
+      },
     }),
     [interactionsProp],
   );
@@ -80,6 +82,7 @@ const usePopover = (options) => {
     open,
     onOpenChange,
     strategy: 'fixed',
+    transform: false,
     whileElementsMounted: _react.useMemo(
       () =>
         open
@@ -165,7 +168,7 @@ const usePopover = (options) => {
             availableHeight && {
               maxBlockSize: `min(${availableHeight}px, ${maxHeight})`,
             }),
-          zIndex: 9999,
+          zIndex: 999,
           ...(matchWidth && referenceWidth
             ? {
                 minInlineSize: `${referenceWidth}px`,
@@ -235,7 +238,7 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
     role: 'dialog',
     middleware,
   });
-  let [popoverElement, setPopoverElement] = _react.useState();
+  let [popoverElement, setPopoverElement] = _react.useState(null);
   let popoverRef = (0, _index.useMergedRefs)(
     popover.refs.setFloating,
     forwardedRef,
@@ -282,33 +285,37 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
             },
             _react.createElement(
               _ThemeProvider.ThemeProvider,
-              {
-                portalContainer: popoverElement,
-              },
-              _react.createElement(DisplayContents, null),
+              null,
               _react.createElement(
-                _react1.FloatingFocusManager,
+                _Portal.PortalContainerContext.Provider,
                 {
-                  context: popover.context,
-                  modal: false,
-                  initialFocus: initialFocus,
+                  value: popoverElement,
                 },
+                _react.createElement(DisplayContents, null),
                 _react.createElement(
-                  _index.Box,
+                  _react1.FloatingFocusManager,
                   {
-                    className: (0, _classnames.default)(
-                      {
-                        'iui-popover-surface': applyBackground,
-                      },
-                      className,
-                    ),
-                    'aria-labelledby': hasAriaLabel
-                      ? void 0
-                      : popover.refs.domReference.current?.id,
-                    ...popover.getFloatingProps(rest),
-                    ref: popoverRef,
+                    context: popover.context,
+                    modal: false,
+                    initialFocus: initialFocus,
                   },
-                  content,
+                  _react.createElement(
+                    _index.Box,
+                    {
+                      className: (0, _classnames.default)(
+                        {
+                          'iui-popover-surface': applyBackground,
+                        },
+                        className,
+                      ),
+                      'aria-labelledby': hasAriaLabel
+                        ? void 0
+                        : popover.refs.domReference.current?.id,
+                      ...popover.getFloatingProps(rest),
+                      ref: popoverRef,
+                    },
+                    content,
+                  ),
                 ),
               ),
             ),
@@ -317,7 +324,7 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
-Popover.displayName = 'Popover';
+if ('development' === process.env.NODE_ENV) Popover.displayName = 'Popover';
 const PopoverPortal = ({ children, portal = true }) => {
   let portalTo = (0, _Portal.usePortalTo)(portal);
   return _react.createElement(

package/DEV-cjs/core/ProgressIndicators/ProgressLinear.js

@@ -75,4 +75,5 @@ const ProgressLinear = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-ProgressLinear.displayName = 'ProgressLinear';
+if ('development' === process.env.NODE_ENV)
+  ProgressLinear.displayName = 'ProgressLinear';

package/DEV-cjs/core/ProgressIndicators/ProgressRadial.js

@@ -71,4 +71,5 @@ const ProgressRadial = _react.forwardRef((props, forwardedRef) => {
     'x-small' !== size ? children ?? (status ? statusMap[status] : null) : null,
   );
 });
-ProgressRadial.displayName = 'ProgressRadial';
+if ('development' === process.env.NODE_ENV)
+  ProgressRadial.displayName = 'ProgressRadial';

package/DEV-cjs/core/Radio/Radio.js

@@ -67,4 +67,4 @@ const Radio = _react.forwardRef((props, ref) => {
       )
     : radio;
 });
-Radio.displayName = 'Radio';
+if ('development' === process.env.NODE_ENV) Radio.displayName = 'Radio';

package/DEV-cjs/core/RadioTiles/RadioTile.js

@@ -91,4 +91,4 @@ const RadioTile = _react.forwardRef((props, ref) => {
       ),
   );
 });
-RadioTile.displayName = 'RadioTile';
+if ('development' === process.env.NODE_ENV) RadioTile.displayName = 'RadioTile';

package/DEV-cjs/core/RadioTiles/RadioTileGroup.js

@@ -39,4 +39,5 @@ const RadioTileGroup = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-RadioTileGroup.displayName = 'RadioTileGroup';
+if ('development' === process.env.NODE_ENV)
+  RadioTileGroup.displayName = 'RadioTileGroup';

package/DEV-cjs/core/SearchBox/SearchBox.js

@@ -116,13 +116,15 @@ const SearchBoxCollapsedState = ({ children }) => {
     children ?? _react.createElement(SearchBoxExpandButton, null),
   );
 };
-SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
+if ('development' === process.env.NODE_ENV)
+  SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
 const SearchBoxExpandedState = ({ children }) => {
   let { isExpanded, expandable } = (0, _index.useSafeContext)(SearchBoxContext);
   if (expandable && !isExpanded) return null;
   return _react.createElement(_react.Fragment, null, children);
 };
-SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
+if ('development' === process.env.NODE_ENV)
+  SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 const SearchBoxIcon = _react.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
   return _react.createElement(
@@ -136,7 +138,8 @@ const SearchBoxIcon = _react.forwardRef((props, ref) => {
     children ?? _react.createElement(_index.SvgSearch, null),
   );
 });
-SearchBoxIcon.displayName = 'SearchBox.Icon';
+if ('development' === process.env.NODE_ENV)
+  SearchBoxIcon.displayName = 'SearchBox.Icon';
 const SearchBoxInput = _react.forwardRef((props, ref) => {
   let { className, id: idProp, ...rest } = props;
   let { inputId, setInputId, isDisabled, inputRef } = (0,
@@ -155,7 +158,8 @@ const SearchBoxInput = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
-SearchBoxInput.displayName = 'SearchBox.Input';
+if ('development' === process.env.NODE_ENV)
+  SearchBoxInput.displayName = 'SearchBox.Input';
 const SearchBoxButton = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   let { size: sizeContext, isDisabled } = (0, _index.useSafeContext)(
@@ -172,7 +176,8 @@ const SearchBoxButton = _react.forwardRef((props, ref) => {
     children ?? _react.createElement(_index.SvgSearch, null),
   );
 });
-SearchBoxButton.displayName = 'SearchBox.Button';
+if ('development' === process.env.NODE_ENV)
+  SearchBoxButton.displayName = 'SearchBox.Button';
 const SearchBoxCollapseButton = _react.forwardRef((props, ref) => {
   let { children, onClick: onClickProp, ...rest } = props;
   let {
@@ -193,7 +198,8 @@ const SearchBoxCollapseButton = _react.forwardRef((props, ref) => {
     children ?? _react.createElement(_index.SvgCloseSmall, null),
   );
 });
-SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
+if ('development' === process.env.NODE_ENV)
+  SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
 const SearchBoxExpandButton = _react.forwardRef((props, ref) => {
   let { children, onClick: onClickProp, ...rest } = props;
   let {
@@ -216,7 +222,8 @@ const SearchBoxExpandButton = _react.forwardRef((props, ref) => {
     children ?? _react.createElement(_index.SvgSearch, null),
   );
 });
-SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
+if ('development' === process.env.NODE_ENV)
+  SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 const SearchBox = Object.assign(SearchBoxComponent, {
   Icon: SearchBoxIcon,
   Input: SearchBoxInput,
@@ -226,4 +233,4 @@ const SearchBox = Object.assign(SearchBoxComponent, {
   ExpandedState: SearchBoxExpandedState,
   CollapsedState: SearchBoxCollapsedState,
 });
-SearchBox.displayName = 'SearchBox';
+if ('development' === process.env.NODE_ENV) SearchBox.displayName = 'SearchBox';