@itwin/itwinui-react 3.17.4 → 3.18.0

package/DEV-esm/core/Tree/TreeNode.js

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

package/DEV-esm/core/Tree/TreeNodeExpander.js

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

package/DEV-esm/core/Typography/Anchor.js

@@ -26,4 +26,4 @@ export const Anchor = React.forwardRef((props, forwardedRef) => {
       React.createElement(VisuallyHidden, null, ' (opens in new tab)'),
   );
 });
-Anchor.displayName = 'Anchor';
+if ('development' === process.env.NODE_ENV) Anchor.displayName = 'Anchor';

package/DEV-esm/core/Typography/Blockquote.js

@@ -15,4 +15,5 @@ export const Blockquote = React.forwardRef((props, ref) => {
     footer && React.createElement('footer', null, footer),
   );
 });
-Blockquote.displayName = 'Blockquote';
+if ('development' === process.env.NODE_ENV)
+  Blockquote.displayName = 'Blockquote';

package/DEV-esm/core/Typography/Code.js

@@ -1,3 +1,3 @@
 import { polymorphic } from '../../utils/index.js';
 export const Code = polymorphic.code('iui-code');
-Code.displayName = 'Code';
+if ('development' === process.env.NODE_ENV) Code.displayName = 'Code';

package/DEV-esm/core/Typography/Kbd.js

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

package/DEV-esm/core/Typography/Text.js

@@ -29,5 +29,5 @@ export const Text = React.forwardRef((props, ref) => {
     }),
   );
 });
-Text.displayName = 'Text';
+if ('development' === process.env.NODE_ENV) Text.displayName = 'Text';
 export const TextContext = React.createContext(false);

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

@@ -36,7 +36,8 @@ export const VisuallyHidden = React.forwardRef((props, ref) => {
     children,
   );
 });
-VisuallyHidden.displayName = 'VisuallyHidden';
+if ('development' === process.env.NODE_ENV)
+  VisuallyHidden.displayName = 'VisuallyHidden';
 let css = `
   :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
     clip-path: inset(50%) !important;

package/DEV-esm/index.js

@@ -41,7 +41,7 @@ export { HeaderLogo } from './core/Header/HeaderLogo.js';
 export { List } from './core/List/List.js';
 export { ListItem } from './core/List/ListItem.js';
 export { TransferList } from './core/TransferList/TransferList.js';
-export { Tabs, Tab } from './core/Tabs/Tabs.js';
+export { Tabs, Tab, unstable_TabsPresentation } from './core/Tabs/Tabs.js';
 export { InformationPanel } from './core/InformationPanel/InformationPanel.js';
 export { InformationPanelWrapper } from './core/InformationPanel/InformationPanelWrapper.js';
 export { InformationPanelHeader } from './core/InformationPanel/InformationPanelHeader.js';

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.17.4';
+const t = '3.18.0';
 const u = new Proxy(
   {},
   {

package/DEV-esm/utils/components/AutoclearingHiddenLiveRegion.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
 import { getWindow } from '../functions/index.js';
-export const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
+export const AutoclearingHiddenLiveRegion = ({ text, ...props }) => {
   let [maybeText, setMaybeText] = React.useState(text);
   React.useEffect(() => {
     setMaybeText(text);
@@ -14,6 +14,7 @@ export const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
       as: 'div',
       'aria-live': 'polite',
       'aria-atomic': 'true',
+      ...props,
     },
     maybeText,
   );

package/DEV-esm/utils/components/ButtonBase.js

@@ -32,4 +32,5 @@ export const ButtonBase = React.forwardRef((props, forwardedRef) => {
     onPointerUp: handleIfEnabled(props.onPointerUp),
   });
 });
-ButtonBase.displayName = 'ButtonBase';
+if ('development' === process.env.NODE_ENV)
+  ButtonBase.displayName = 'ButtonBase';

package/DEV-esm/utils/components/InputWithIcon.js

@@ -1,3 +1,4 @@
 import { polymorphic } from '../functions/polymorphic.js';
 export const InputWithIcon = polymorphic.div('iui-input-with-icon');
-InputWithIcon.displayName = 'InputWithIcon';
+if ('development' === process.env.NODE_ENV)
+  InputWithIcon.displayName = 'InputWithIcon';

package/DEV-esm/utils/components/LineClamp.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import cx from 'classnames';
 import { Box } from './Box.js';
 import { ShadowRoot } from './ShadowRoot.js';
 export const LineClamp = React.forwardRef((props, forwardedRef) => {
@@ -8,6 +9,7 @@ export const LineClamp = React.forwardRef((props, forwardedRef) => {
     {
       ref: forwardedRef,
       ...rest,
+      className: cx('iui-line-clamp', props.className),
       style: {
         '--_iui-line-clamp': lines,
         ...props.style,
@@ -17,6 +19,7 @@ export const LineClamp = React.forwardRef((props, forwardedRef) => {
       ShadowRoot,
       {
         css: css,
+        flush: false,
       },
       React.createElement('slot', null),
     ),

package/DEV-esm/utils/components/MiddleTextTruncation.js

@@ -38,7 +38,8 @@ export const MiddleTextTruncation = React.forwardRef((props, forwardedRef) => {
     }),
   );
 });
-MiddleTextTruncation.displayName = 'MiddleTextTruncation';
+if ('development' === process.env.NODE_ENV)
+  MiddleTextTruncation.displayName = 'MiddleTextTruncation';
 let MiddleTextTruncationContent = (props) => {
   let { text, endCharsCount = 6, textRenderer } = props;
   let { visibleCount } = OverflowContainer.useContext();

package/DEV-esm/utils/components/OverflowContainer.js

@@ -60,7 +60,8 @@ export const OverflowContainer = Object.assign(OverflowContainerComponent, {
   useContext: useOverflowContainerContext,
 });
 let OverflowContainerContext = React.createContext(void 0);
-OverflowContainerContext.displayName = 'OverflowContainerContext';
+if ('development' === process.env.NODE_ENV)
+  OverflowContainerContext.displayName = 'OverflowContainerContext';
 let useOverflow = (itemsCount, orientation = 'horizontal') => {
   let [guessState, dispatch] = React.useReducer(
     overflowGuessReducer,
@@ -89,18 +90,14 @@ let useOverflow = (itemsCount, orientation = 'horizontal') => {
           (1 === visibleCount && isOverflowing) ||
           (visibleCount === itemsCount && !isOverflowing) ||
           (maxGuess - minGuess === 1 && visibleCount === minGuess)
-        ) {
-          dispatch({
+        )
+          return void dispatch({
             type: 'stabilize',
           });
-          return;
-        }
-        if (maxGuess === visibleCount && !isOverflowing) {
-          dispatch({
+        if (maxGuess === visibleCount && !isOverflowing)
+          return void dispatch({
             type: 'shiftGuessRangeForward',
           });
-          return;
-        }
         isOverflowing
           ? dispatch({
               type: 'decreaseMaxGuess',

package/DEV-esm/utils/components/Portal.js

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { useIsClient } from '../hooks/useIsClient.js';
-import { atom } from 'jotai';
-import { useScopedAtom } from '../providers/ScopeProvider.js';
-export const portalContainerAtom = atom(null);
+export const PortalContainerContext = React.createContext(null);
 export const Portal = (props) => {
   let { portal = true, children } = props;
   let isClient = useIsClient();
@@ -12,7 +10,7 @@ export const Portal = (props) => {
   return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
 };
 export const usePortalTo = (portal) => {
-  let [portalContainer] = useScopedAtom(portalContainerAtom);
+  let portalContainer = React.useContext(PortalContainerContext);
   if ('boolean' == typeof portal) return portal ? portalContainer : null;
   let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
   return portalTo ?? portalContainer;

package/DEV-esm/utils/components/ShadowRoot.js

@@ -7,7 +7,7 @@ let supportsDSD =
   isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
 let supportsAdoptedStylesheets =
   isBrowser && 'adoptedStyleSheets' in Document.prototype;
-export const ShadowRoot = ({ children, css }) => {
+export const ShadowRoot = ({ children, css, flush = true }) => {
   let isHydrating = 'hydrating' === useHydration();
   if (!isBrowser)
     return React.createElement(
@@ -23,14 +23,16 @@ export const ShadowRoot = ({ children, css }) => {
     ClientShadowRoot,
     {
       css: css,
+      flush: flush,
     },
     children,
   );
 };
-let ClientShadowRoot = ({ children, css }) => {
+let ClientShadowRoot = ({ children, css, flush = true }) => {
   let templateRef = React.useRef(null);
   let shadowRoot = useShadowRoot(templateRef, {
     css,
+    flush,
   });
   let fallbackCss =
     !supportsAdoptedStylesheets && css
@@ -45,7 +47,7 @@ let ClientShadowRoot = ({ children, css }) => {
         ref: templateRef,
       });
 };
-function useShadowRoot(templateRef, { css = '' }) {
+function useShadowRoot(templateRef, { css = '', flush = true }) {
   let [shadowRoot, setShadowRoot] = React.useState(null);
   let styleSheet = React.useRef(void 0);
   let latestCss = useLatestRef(css);
@@ -75,13 +77,13 @@ function useShadowRoot(templateRef, { css = '' }) {
           mode: 'open',
         });
       createStyleSheet(shadow);
-      ReactDOM.flushSync(() => setShadowRoot(shadow));
+      if (flush) ReactDOM.flushSync(() => setShadowRoot(shadow));
+      else setShadowRoot(shadow);
     };
-    queueMicrotask(() => {
-      setupOrReuseShadowRoot();
-    });
+    if (flush) queueMicrotask(() => setupOrReuseShadowRoot());
+    else setupOrReuseShadowRoot();
     return () => void setShadowRoot(null);
-  }, [templateRef, createStyleSheet, latestShadowRoot]);
+  }, [templateRef, createStyleSheet, latestShadowRoot, flush]);
   useLayoutEffect(() => {
     if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
   }, [css]);

package/DEV-esm/utils/functions/polymorphic.js

@@ -26,7 +26,8 @@ let _base = (defaultElement) => (className, attrs) => {
       ...props,
     });
   });
-  Comp.displayName = getDisplayNameFromClass(className);
+  if ('development' === process.env.NODE_ENV)
+    Comp.displayName = getDisplayNameFromClass(className);
   return Comp;
 };
 export const polymorphic = new Proxy(

package/DEV-esm/utils/hooks/useGlobals.js

@@ -13,7 +13,12 @@ export const useGlobals = () => {
 };
 export const useThemeProviderWarning = (themeContext) => {
   React.useEffect(() => {
-    if (!isUnitTest && !didLogWarning.themeProvider && !themeContext) {
+    if (
+      'development' === process.env.NODE_ENV &&
+      !isUnitTest &&
+      !didLogWarning.themeProvider &&
+      !themeContext
+    ) {
       console.error(
         'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
       );
@@ -23,7 +28,11 @@ export const useThemeProviderWarning = (themeContext) => {
 };
 let useRootFontSizeWarning = () => {
   React.useEffect(() => {
-    if (!isUnitTest && !didLogWarning.fontSize) {
+    if (
+      'development' === process.env.NODE_ENV &&
+      !isUnitTest &&
+      !didLogWarning.fontSize
+    ) {
       let rootFontSize = parseInt(
         getComputedStyle(document.documentElement).fontSize,
       );

package/DEV-esm/utils/hooks/useWarningLogger.js

@@ -3,30 +3,32 @@ import { isUnitTest } from '../functions/dev.js';
 import { getWindow } from '../functions/dom.js';
 let _React = React;
 let ReactInternals = _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-export const useWarningLogger = isUnitTest
-  ? () => () => {}
-  : function () {
-      let loggedRef = React.useRef(false);
-      let timeoutRef = React.useRef(void 0);
-      let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
-      let componentName = stack?.trim().split('\n')[1]?.trim();
-      let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
-      let logWarning = React.useCallback(
-        (message) => {
-          timeoutRef.current = getWindow()?.setTimeout(() => {
-            if (!loggedRef.current) {
-              console.error(prefix, message);
-              loggedRef.current = true;
-            }
-          });
-        },
-        [prefix],
-      );
-      React.useEffect(
-        () => () => {
-          if (timeoutRef.current) getWindow()?.clearTimeout(timeoutRef.current);
-        },
-        [],
-      );
-      return logWarning;
-    };
+export const useWarningLogger =
+  'development' !== process.env.NODE_ENV || isUnitTest
+    ? () => () => {}
+    : function () {
+        let loggedRef = React.useRef(false);
+        let timeoutRef = React.useRef(void 0);
+        let stack = ReactInternals?.ReactDebugCurrentFrame?.getCurrentStack?.();
+        let componentName = stack?.trim().split('\n')[1]?.trim();
+        let prefix = componentName ? `Warning (${componentName}):` : 'Warning:';
+        let logWarning = React.useCallback(
+          (message) => {
+            timeoutRef.current = getWindow()?.setTimeout(() => {
+              if (!loggedRef.current) {
+                console.error(prefix, message);
+                loggedRef.current = true;
+              }
+            });
+          },
+          [prefix],
+        );
+        React.useEffect(
+          () => () => {
+            if (timeoutRef.current)
+              getWindow()?.clearTimeout(timeoutRef.current);
+          },
+          [],
+        );
+        return logWarning;
+      };

package/DEV-esm/utils/providers/index.js

@@ -1,2 +1 @@
 export * from './HydrationProvider.js';
-export * from './ScopeProvider.js';

package/cjs/core/Alert/Alert.js

@@ -53,6 +53,8 @@ const AlertComponent = _react.forwardRef((props, forwardedRef) => {
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertComponent.displayName = 'Alert';
 const AlertWrapper = _react.forwardRef((props, ref) => {
   let {
     children,
@@ -81,6 +83,8 @@ const AlertWrapper = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertWrapper.displayName = 'Alert.Wrapper';
 const AlertIcon = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   let { type } = (0, _index.useSafeContext)(AlertContext);
@@ -95,7 +99,11 @@ const AlertIcon = _react.forwardRef((props, ref) => {
     children ?? _react.createElement(StatusIcon, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertIcon.displayName = 'Alert.Icon';
 const AlertMessage = _index.polymorphic.span('iui-alert-message');
+if ('development' === process.env.NODE_ENV)
+  AlertMessage.displayName = 'Alert.Message';
 const AlertAction = _react.forwardRef((props, ref) => {
   let { children, className, ...rest } = props;
   let { type } = (0, _index.useSafeContext)(AlertContext);
@@ -116,6 +124,8 @@ const AlertAction = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertAction.displayName = 'Alert.Action';
 const AlertCloseButton = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
   return _react.createElement(
@@ -130,6 +140,8 @@ const AlertCloseButton = _react.forwardRef((props, ref) => {
     children ?? _react.createElement(_index.SvgCloseSmall, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AlertCloseButton.displayName = 'Alert.CloseButton';
 const Alert = Object.assign(AlertComponent, {
   Wrapper: AlertWrapper,
   Icon: AlertIcon,

package/cjs/core/Avatar/Avatar.js

@@ -80,3 +80,4 @@ const Avatar = _react.forwardRef((props, ref) => {
       : null,
   );
 });
+if ('development' === process.env.NODE_ENV) Avatar.displayName = 'Avatar';

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -74,3 +74,5 @@ const AvatarGroup = _react.forwardRef((props, ref) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  AvatarGroup.displayName = 'AvatarGroup';

package/cjs/core/Backdrop/Backdrop.js

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

package/cjs/core/Badge/Badge.js

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

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -58,6 +58,8 @@ const BreadcrumbsComponent = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  BreadcrumbsComponent.displayName = 'Breadcrumbs';
 const BreadcrumbContent = (props) => {
   let { children: items, currentIndex, overflowButton, separator } = props;
   let { visibleCount } = _index.OverflowContainer.useContext();
@@ -134,8 +136,13 @@ const ListItem = ({ item, isActive }) => {
     children?.type === 'span' ||
     children?.type === 'a' ||
     children?.type === _Button.Button
-  )
+  ) {
+    if ('development' === process.env.NODE_ENV)
+      logWarning(
+        'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
+      );
     children = _react.createElement(BreadcrumbsItem, children.props);
+  }
   return _react.createElement(
     _index.Box,
     {
@@ -186,6 +193,8 @@ const BreadcrumbsItem = _react.forwardRef((props, forwardedRef) => {
     ...commonProps,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
   Item: BreadcrumbsItem,
 });

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -27,6 +27,8 @@ const _index = require('../../utils/index.js');
 const _react1 = require('@floating-ui/react');
 const _Tooltip = require('../Tooltip/Tooltip.js');
 const ButtonGroupContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  ButtonGroupContext.displayName = 'ButtonGroupContext';
 const ButtonGroup = _react.forwardRef((props, forwardedRef) => {
   let {
     children: childrenProp,
@@ -87,6 +89,8 @@ const ButtonGroup = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ButtonGroup.displayName = 'ButtonGroup';
 const BaseGroup = _react.forwardRef((props, forwardedRef) => {
   let { orientation, className, ...rest } = props;
   return _react.createElement(_index.Box, {

package/cjs/core/Buttons/Button.js

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

package/cjs/core/Buttons/DropdownButton.js

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

package/cjs/core/Buttons/IconButton.js

@@ -37,6 +37,13 @@ const IconButton = _react.forwardRef((props, ref) => {
   );
   let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
   let logWarning = (0, _index.useWarningLogger)();
+  if (
+    'development' === process.env.NODE_ENV &&
+    !label &&
+    !props['aria-label'] &&
+    !props['aria-labelledby']
+  )
+    logWarning('IconButton is missing the `label` prop.');
   let button = _react.createElement(
     _index.ButtonBase,
     {
@@ -79,3 +86,5 @@ const IconButton = _react.forwardRef((props, ref) => {
       )
     : button;
 });
+if ('development' === process.env.NODE_ENV)
+  IconButton.displayName = 'IconButton';

package/cjs/core/Buttons/IdeasButton.js

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

package/cjs/core/Buttons/SplitButton.js

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

package/cjs/core/Carousel/Carousel.js

@@ -76,6 +76,8 @@ const CarouselComponent = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselComponent.displayName = 'Carousel';
 const Carousel = Object.assign(CarouselComponent, {
   Slider: _CarouselSlider.CarouselSlider,
   Slide: _CarouselSlide.CarouselSlide,

package/cjs/core/Carousel/CarouselContext.js

@@ -11,3 +11,5 @@ Object.defineProperty(exports, 'CarouselContext', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const CarouselContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  CarouselContext.displayName = 'CarouselContext';

package/cjs/core/Carousel/CarouselDot.js

@@ -34,3 +34,5 @@ const CarouselDot = _react.forwardRef((props, ref) => {
     ...rest,
   });
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselDot.displayName = 'Carousel.Dot';

package/cjs/core/Carousel/CarouselDotsList.js

@@ -163,3 +163,5 @@ const CarouselDotsList = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselDotsList.displayName = 'Carousel.DotsList';

package/cjs/core/Carousel/CarouselNavigation.js

@@ -49,6 +49,8 @@ const CarouselNavigationComponent = _react.forwardRef((props, ref) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselNavigationComponent.displayName = 'Carousel.Navigation';
 const PreviousButton = _react.forwardRef((props, ref) => {
   let context = _react.useContext(_CarouselContext.CarouselContext);
   if (!context)
@@ -75,6 +77,8 @@ const PreviousButton = _react.forwardRef((props, ref) => {
     _react.createElement(_index.SvgChevronLeft, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
 const NextButton = _react.forwardRef((props, ref) => {
   let context = _react.useContext(_CarouselContext.CarouselContext);
   if (!context)
@@ -101,6 +105,8 @@ const NextButton = _react.forwardRef((props, ref) => {
     _react.createElement(_index.SvgChevronRight, null),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  NextButton.displayName = 'Carousel.Navigation.NextButton';
 const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
   PreviousButton,
   NextButton,

package/cjs/core/Carousel/CarouselSlide.js

@@ -54,3 +54,5 @@ const CarouselSlide = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselSlide.displayName = 'Carousel.Slide';

package/cjs/core/Carousel/CarouselSlider.js

@@ -71,3 +71,5 @@ const CarouselSlider = _react.forwardRef((props, ref) => {
     items,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  CarouselSlider.displayName = 'Carousel.Slider';

package/cjs/core/Checkbox/Checkbox.js

@@ -98,3 +98,4 @@ const Checkbox = _react.forwardRef((props, ref) => {
       )
     : checkbox;
 });
+if ('development' === process.env.NODE_ENV) Checkbox.displayName = 'Checkbox';

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -343,3 +343,5 @@ const ColorBuilder = _react.forwardRef((props, ref) => {
       }),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ColorBuilder.displayName = 'ColorBuilder';

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -82,7 +82,7 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     );
   let handleColorInputChange = () => {
     let color;
-    if ('hex' === currentFormat)
+    if ('hex' === currentFormat) {
       try {
         let value = input[0].replace(/ /g, '').toLowerCase();
         color = _index.ColorValue.create(value);
@@ -92,6 +92,7 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
         setValidHexInput(false);
         return;
       }
+    }
     if ('hsl' === currentFormat) {
       let [h, s, l, a] = input.map(Number);
       if (
@@ -443,3 +444,5 @@ const ColorInputPanel = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  ColorInputPanel.displayName = 'ColorInputPanel';