@itwin/itwinui-react 3.12.2 → 3.13.0

package/cjs/core/Buttons/IconButton.js

@@ -18,7 +18,7 @@ const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
 const _ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
 const _Popover = require('../Popover/Popover.js');
 const IconButton = _react.forwardRef((props, ref) => {
-  const {
+  let {
     isActive,
     children,
     styleType = 'default',
@@ -29,19 +29,19 @@ const IconButton = _react.forwardRef((props, ref) => {
     labelProps,
     ...rest
   } = props;
-  const buttonGroupOrientation = _react.useContext(
+  let buttonGroupOrientation = _react.useContext(
     _ButtonGroup.ButtonGroupContext,
   );
-  const hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
-  const button = _react.createElement(
+  let hasPopoverOpen = _react.useContext(_Popover.PopoverOpenContext);
+  let button = _react.createElement(
     _index.ButtonBase,
     {
       ref: ref,
       className: (0, _classnames.default)('iui-button', 'iui-field', className),
-      'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+      'data-iui-variant': 'default' !== styleType ? styleType : void 0,
       'data-iui-size': size,
       'data-iui-active': isActive,
-      'data-iui-has-popover': hasPopoverOpen ? 'open' : undefined,
+      'data-iui-has-popover': hasPopoverOpen ? 'open' : void 0,
       'aria-pressed': isActive,
       ...rest,
     },
@@ -66,7 +66,7 @@ const IconButton = _react.forwardRef((props, ref) => {
     ? _react.createElement(
         _Tooltip.Tooltip,
         {
-          placement: buttonGroupOrientation === 'vertical' ? 'right' : 'top',
+          placement: 'vertical' === buttonGroupOrientation ? 'right' : 'top',
           ...labelProps,
           content: label,
           ariaStrategy: 'none',

package/cjs/core/Buttons/IdeasButton.js

@@ -15,7 +15,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _Button = require('./Button.js');
 const IdeasButton = _react.forwardRef((props, ref) => {
-  const { feedbackLabel = 'Feedback', className, onClick, ...rest } = props;
+  let { feedbackLabel = 'Feedback', className, onClick, ...rest } = props;
   return _react.createElement(
     _Button.Button,
     {

package/cjs/core/Buttons/SplitButton.js

@@ -17,7 +17,7 @@ const _IconButton = require('./IconButton.js');
 const _index = require('../../utils/index.js');
 const _Menu = require('../Menu/Menu.js');
 const SplitButton = _react.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     onClick,
     menuItems,
     className,
@@ -30,21 +30,20 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
     portal = true,
     ...rest
   } = props;
-  const [visible, setVisible] = _react.useState(false);
-  const menuContent = _react.useMemo(() => {
-    if (typeof menuItems === 'function') {
+  let [visible, setVisible] = _react.useState(false);
+  let menuContent = _react.useMemo(() => {
+    if ('function' == typeof menuItems)
       return menuItems(() => setVisible(false));
-    }
     return menuItems;
   }, [menuItems]);
-  const popoverProps = {
+  let popoverProps = {
     visible,
     onVisibleChange: setVisible,
     placement: menuPlacement,
     matchWidth: true,
   };
-  const labelId = (0, _index.useId)();
-  const trigger = _react.createElement(
+  let labelId = (0, _index.useId)();
+  let trigger = _react.createElement(
     _IconButton.IconButton,
     {
       styleType: styleType,
@@ -57,7 +56,7 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
       ? _react.createElement(_index.SvgCaretUpSmall, null)
       : _react.createElement(_index.SvgCaretDownSmall, null),
   );
-  const [positionReference, setPositionReference] = _react.useState(null);
+  let [positionReference, setPositionReference] = _react.useState(null);
   return _react.createElement(
     _index.Box,
     {
@@ -96,9 +95,7 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
         portal: portal,
         positionReference: positionReference,
         onKeyDown: ({ key }) => {
-          if (key === 'Tab') {
-            setVisible(false);
-          }
+          if ('Tab' === key) setVisible(false);
         },
       },
       menuContent,

package/cjs/core/Carousel/Carousel.js

@@ -20,8 +20,8 @@ const _CarouselDotsList = require('./CarouselDotsList.js');
 const _CarouselDot = require('./CarouselDot.js');
 const _CarouselNavigation = require('./CarouselNavigation.js');
 const CarouselComponent = _react.forwardRef((props, ref) => {
-  const idPrefix = (0, _index.useId)();
-  const {
+  let idPrefix = (0, _index.useId)();
+  let {
     activeSlideIndex: userActiveIndex = 0,
     onSlideChange,
     className,
@@ -29,12 +29,12 @@ const CarouselComponent = _react.forwardRef((props, ref) => {
     id = idPrefix,
     ...rest
   } = props;
-  const isManuallyUpdating = _react.useRef(false);
-  const carouselRef = _react.useRef(null);
-  const refs = (0, _index.useMergedRefs)(carouselRef, ref);
-  const [currentIndex, setCurrentIndex] = _react.useState(userActiveIndex);
-  const scrollToSlide = _react.useRef(() => {});
-  const justMounted = _react.useRef(true);
+  let isManuallyUpdating = _react.useRef(false);
+  let carouselRef = _react.useRef(null);
+  let refs = (0, _index.useMergedRefs)(carouselRef, ref);
+  let [currentIndex, setCurrentIndex] = _react.useState(userActiveIndex);
+  let scrollToSlide = _react.useRef(() => {});
+  let justMounted = _react.useRef(true);
   _react.useEffect(() => {
     setCurrentIndex(userActiveIndex);
     scrollToSlide.current(userActiveIndex, {
@@ -42,8 +42,8 @@ const CarouselComponent = _react.forwardRef((props, ref) => {
     });
     justMounted.current = false;
   }, [userActiveIndex]);
-  const [slideCount, setSlideCount] = _react.useState(0);
-  const userOnSlideChange = (0, _index.useLatestRef)(onSlideChange);
+  let [slideCount, setSlideCount] = _react.useState(0);
+  let userOnSlideChange = (0, _index.useLatestRef)(onSlideChange);
   _react.useEffect(() => {
     userOnSlideChange.current?.(currentIndex);
   }, [userOnSlideChange, currentIndex]);

package/cjs/core/Carousel/CarouselContext.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, 'CarouselContext', {
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
-const CarouselContext = _react.createContext(undefined);
+const CarouselContext = _react.createContext(void 0);

package/cjs/core/Carousel/CarouselDot.js

@@ -14,7 +14,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const CarouselDot = _react.forwardRef((props, ref) => {
-  const { isActive, isSmaller, isSmall, className, ...rest } = props;
+  let { isActive, isSmaller, isSmall, className, ...rest } = props;
   return _react.createElement(_index.ButtonBase, {
     role: 'tab',
     tabIndex: isActive ? 0 : -1,

package/cjs/core/Carousel/CarouselDotsList.js

@@ -16,7 +16,7 @@ const _CarouselContext = require('./CarouselContext.js');
 const _index = require('../../utils/index.js');
 const _CarouselDot = require('./CarouselDot.js');
 const CarouselDotsList = _react.forwardRef((props, ref) => {
-  const {
+  let {
     currentIndex: userCurrentIndex,
     length,
     className,
@@ -24,12 +24,12 @@ const CarouselDotsList = _react.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const context = _react.useContext(_CarouselContext.CarouselContext);
-  const slideCount =
+  let context = _react.useContext(_CarouselContext.CarouselContext);
+  let slideCount =
     length ?? context?.slideCount ?? _react.Children.count(children);
-  const currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
-  const idPrefix = props.id ?? context?.idPrefix;
-  const handleSlideChange = _react.useCallback(
+  let currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
+  let idPrefix = props.id ?? context?.idPrefix;
+  let handleSlideChange = _react.useCallback(
     (index) => {
       if (context) {
         context.setCurrentIndex(index);
@@ -40,23 +40,21 @@ const CarouselDotsList = _react.forwardRef((props, ref) => {
     },
     [context, onSlideChange],
   );
-  const justMounted = _react.useRef(true);
-  const [visibleCount, setVisibleCount] = _react.useState(slideCount);
-  const listRef = _react.useRef(null);
-  const [width, setWidth] = _react.useState();
-  const [resizeRef, resizeObserver] = (0, _index.useResizeObserver)(
+  let justMounted = _react.useRef(true);
+  let [visibleCount, setVisibleCount] = _react.useState(slideCount);
+  let listRef = _react.useRef(null);
+  let [width, setWidth] = _react.useState();
+  let [resizeRef, resizeObserver] = (0, _index.useResizeObserver)(
     ({ width }) => {
-      if (!listRef.current) {
-        return;
-      }
+      if (!listRef.current) return;
       setWidth(width);
-      const dotWidth = listRef.current.children[0].offsetWidth;
+      let dotWidth = listRef.current.children[0].offsetWidth;
       setVisibleCount(Math.floor(width / dotWidth));
     },
   );
   _react.useEffect(() => resizeObserver?.disconnect(), [resizeObserver]);
-  const refs = (0, _index.useMergedRefs)(ref, resizeRef, listRef);
-  const firstVisibleDotIndex = _react.useMemo(
+  let refs = (0, _index.useMergedRefs)(ref, resizeRef, listRef);
+  let firstVisibleDotIndex = _react.useMemo(
     () =>
       (0, _index.getBoundedValue)(
         currentIndex - Math.ceil(visibleCount / 2) + 1,
@@ -65,7 +63,7 @@ const CarouselDotsList = _react.forwardRef((props, ref) => {
       ),
     [currentIndex, slideCount, visibleCount],
   );
-  const lastVisibleDotIndex = _react.useMemo(
+  let lastVisibleDotIndex = _react.useMemo(
     () =>
       (0, _index.getBoundedValue)(
         currentIndex + Math.floor(visibleCount / 2),
@@ -74,71 +72,64 @@ const CarouselDotsList = _react.forwardRef((props, ref) => {
       ),
     [currentIndex, slideCount, visibleCount],
   );
-  const dots = _react.useMemo(() => {
-    return Array(slideCount)
-      .fill(null)
-      .map((_, index) => {
-        const isFirstSmallDot =
-          (index === firstVisibleDotIndex && index !== 0) ||
-          (index === lastVisibleDotIndex && index !== slideCount - 1);
-        const isSecondSmallDot =
-          (index === firstVisibleDotIndex + 1 && index !== 1) ||
-          (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
-        const isClipped =
-          index < firstVisibleDotIndex || index > lastVisibleDotIndex;
-        return _react.createElement(_CarouselDot.CarouselDot, {
-          key: index,
-          'aria-label': `Slide ${index + 1}`,
-          isActive: index === currentIndex,
-          onClick: () => handleSlideChange(index),
-          isSmall: isSecondSmallDot,
-          isSmaller: isFirstSmallDot || isClipped,
-          id: idPrefix && `${idPrefix}--dot-${index}`,
-        });
-      });
-  }, [
-    slideCount,
-    firstVisibleDotIndex,
-    lastVisibleDotIndex,
-    currentIndex,
-    idPrefix,
-    handleSlideChange,
-  ]);
+  let dots = _react.useMemo(
+    () =>
+      Array(slideCount)
+        .fill(null)
+        .map((_, index) => {
+          let isFirstSmallDot =
+            (index === firstVisibleDotIndex && 0 !== index) ||
+            (index === lastVisibleDotIndex && index !== slideCount - 1);
+          let isSecondSmallDot =
+            (index === firstVisibleDotIndex + 1 && 1 !== index) ||
+            (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
+          let isClipped =
+            index < firstVisibleDotIndex || index > lastVisibleDotIndex;
+          return _react.createElement(_CarouselDot.CarouselDot, {
+            key: index,
+            'aria-label': `Slide ${index + 1}`,
+            isActive: index === currentIndex,
+            onClick: () => handleSlideChange(index),
+            isSmall: isSecondSmallDot,
+            isSmaller: isFirstSmallDot || isClipped,
+            id: idPrefix && `${idPrefix}--dot-${index}`,
+          });
+        }),
+    [
+      slideCount,
+      firstVisibleDotIndex,
+      lastVisibleDotIndex,
+      currentIndex,
+      idPrefix,
+      handleSlideChange,
+    ],
+  );
   _react.useEffect(() => {
-    const firstDot = listRef.current?.children[firstVisibleDotIndex];
-    if (!listRef.current || !firstDot) {
-      return;
-    }
-    const motionOk = (0, _index.getWindow)()?.matchMedia(
+    let firstDot = listRef.current?.children[firstVisibleDotIndex];
+    if (!listRef.current || !firstDot) return;
+    let motionOk = (0, _index.getWindow)()?.matchMedia(
       '(prefers-reduced-motion: no-preference)',
     )?.matches;
     listRef.current.scrollTo({
       left: firstDot.offsetLeft - listRef.current.offsetLeft,
       behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
     });
-    if (justMounted.current) {
-      justMounted.current = false;
-    }
+    if (justMounted.current) justMounted.current = false;
   }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
-  const handleKeyDown = (event) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+  let handleKeyDown = (event) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
       return;
-    }
-    const key = event.key;
-    if (key === 'ArrowLeft' || key === 'ArrowRight') {
-      event.preventDefault();
-    }
+    let key = event.key;
+    if ('ArrowLeft' === key || 'ArrowRight' === key) event.preventDefault();
   };
-  const handleKeyUp = (event) => {
+  let handleKeyUp = (event) => {
     switch (event.key) {
-      case 'ArrowLeft': {
+      case 'ArrowLeft':
         handleSlideChange((slideCount + currentIndex - 1) % slideCount);
         break;
-      }
-      case 'ArrowRight': {
+      case 'ArrowRight':
         handleSlideChange((slideCount + currentIndex + 1) % slideCount);
         break;
-      }
     }
   };
   return _react.createElement(

package/cjs/core/Carousel/CarouselNavigation.js

@@ -17,7 +17,7 @@ const _IconButton = require('../Buttons/IconButton.js');
 const _CarouselDotsList = require('./CarouselDotsList.js');
 const _index = require('../../utils/index.js');
 const CarouselNavigationComponent = _react.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
+  let { className, children, ...rest } = props;
   return _react.createElement(
     _index.Box,
     {
@@ -48,11 +48,10 @@ const CarouselNavigationComponent = _react.forwardRef((props, ref) => {
   );
 });
 const PreviousButton = _react.forwardRef((props, ref) => {
-  const context = _react.useContext(_CarouselContext.CarouselContext);
-  if (!context) {
+  let context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context)
     throw new Error('CarouselNavigation should be used inside Carousel');
-  }
-  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+  let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
   return _react.createElement(
     _IconButton.IconButton,
     {
@@ -63,7 +62,7 @@ const PreviousButton = _react.forwardRef((props, ref) => {
       ref: ref,
       ...props,
       onClick: (e) => {
-        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
+        let prevIndex = (slideCount + currentIndex - 1) % slideCount;
         setCurrentIndex(prevIndex);
         scrollToSlide.current(prevIndex, {
           instant: e.detail > 3,
@@ -75,11 +74,10 @@ const PreviousButton = _react.forwardRef((props, ref) => {
   );
 });
 const NextButton = _react.forwardRef((props, ref) => {
-  const context = _react.useContext(_CarouselContext.CarouselContext);
-  if (!context) {
+  let context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context)
     throw new Error('CarouselNavigation should be used inside Carousel');
-  }
-  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+  let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
   return _react.createElement(
     _IconButton.IconButton,
     {
@@ -90,7 +88,7 @@ const NextButton = _react.forwardRef((props, ref) => {
       ref: ref,
       ...props,
       onClick: (e) => {
-        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
+        let nextIndex = (slideCount + currentIndex + 1) % slideCount;
         setCurrentIndex(nextIndex);
         scrollToSlide.current(nextIndex, {
           instant: e.detail > 3,

package/cjs/core/Carousel/CarouselSlide.js

@@ -15,25 +15,22 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _CarouselContext = require('./CarouselContext.js');
 const CarouselSlide = _react.forwardRef((props, ref) => {
-  const { index, className, children, ...rest } = props;
-  const context = _react.useContext(_CarouselContext.CarouselContext);
-  if (!context || index == null) {
+  let { index, className, children, ...rest } = props;
+  let context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context || null == index)
     throw new Error('CarouselSlide must be used within Carousel');
-  }
-  const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
-  const updateActiveIndexOnScroll = _react.useCallback(() => {
-    if (!isManuallyUpdating.current) {
-      setCurrentIndex(index);
-    }
+  let { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
+  let updateActiveIndexOnScroll = _react.useCallback(() => {
+    if (!isManuallyUpdating.current) setCurrentIndex(index);
   }, [index, isManuallyUpdating, setCurrentIndex]);
-  const intersectionRef = (0, _index.useIntersection)(
+  let intersectionRef = (0, _index.useIntersection)(
     updateActiveIndexOnScroll,
     {
       threshold: 0.5,
     },
     false,
   );
-  const refs = (0, _index.useMergedRefs)(intersectionRef, ref);
+  let refs = (0, _index.useMergedRefs)(intersectionRef, ref);
   return _react.createElement(
     _index.Box,
     {
@@ -43,14 +40,13 @@ const CarouselSlide = _react.forwardRef((props, ref) => {
       ),
       role: 'tabpanel',
       'aria-roledescription': 'slide',
-      tabIndex: index === currentIndex ? 0 : undefined,
+      tabIndex: index === currentIndex ? 0 : void 0,
       ref: refs,
-      inert: index !== currentIndex ? '' : undefined,
+      inert: index !== currentIndex ? '' : void 0,
       ...rest,
       onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, (event) => {
-        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        if ('ArrowLeft' === event.key || 'ArrowRight' === event.key)
           event.preventDefault();
-        }
       }),
     },
     children,

package/cjs/core/Carousel/CarouselSlider.js

@@ -15,14 +15,11 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _CarouselContext = require('./CarouselContext.js');
 const _index = require('../../utils/index.js');
 const CarouselSlider = _react.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const context = _react.useContext(_CarouselContext.CarouselContext);
-  if (!context) {
-    throw new Error('CarouselSlider must be used within Carousel');
-  }
-  const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } =
-    context;
-  const items = _react.useMemo(
+  let { children, className, ...rest } = props;
+  let context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context) throw new Error('CarouselSlider must be used within Carousel');
+  let { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
+  let items = _react.useMemo(
     () =>
       _react.Children.map(children, (child, index) =>
         _react.isValidElement(child)
@@ -38,15 +35,13 @@ const CarouselSlider = _react.forwardRef((props, ref) => {
   (0, _index.useLayoutEffect)(() => {
     setSlideCount(items.length);
   }, [items.length, setSlideCount]);
-  const sliderRef = _react.useRef(null);
-  const refs = (0, _index.useMergedRefs)(sliderRef, ref);
+  let sliderRef = _react.useRef(null);
+  let refs = (0, _index.useMergedRefs)(sliderRef, ref);
   scrollToSlide.current = (slideIndex, { instant } = {}) => {
     isManuallyUpdating.current = true;
-    const slideToShow = sliderRef.current?.children.item(slideIndex);
-    if (!sliderRef.current || !slideToShow) {
-      return;
-    }
-    const motionOk = (0, _index.getWindow)()?.matchMedia(
+    let slideToShow = sliderRef.current?.children.item(slideIndex);
+    if (!sliderRef.current || !slideToShow) return;
+    let motionOk = (0, _index.getWindow)()?.matchMedia(
       '(prefers-reduced-motion: no-preference)',
     )?.matches;
     sliderRef.current.scrollTo({
@@ -54,11 +49,10 @@ const CarouselSlider = _react.forwardRef((props, ref) => {
       behavior: instant || !motionOk ? 'instant' : 'smooth',
     });
   };
-  const scrollTimeout = _react.useRef();
-  const handleOnScroll = _react.useCallback(() => {
-    if (scrollTimeout.current) {
+  let scrollTimeout = _react.useRef();
+  let handleOnScroll = _react.useCallback(() => {
+    if (scrollTimeout.current)
       (0, _index.getWindow)()?.clearTimeout(scrollTimeout.current);
-    }
     scrollTimeout.current = (0, _index.getWindow)()?.setTimeout(() => {
       isManuallyUpdating.current = false;
     }, 100);

package/cjs/core/Checkbox/Checkbox.js

@@ -15,7 +15,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
 const _index = require('../../utils/index.js');
 const Checkbox = _react.forwardRef((props, ref) => {
-  const {
+  let {
     className,
     disabled = false,
     indeterminate = false,
@@ -28,17 +28,16 @@ const Checkbox = _react.forwardRef((props, ref) => {
     style,
     ...rest
   } = props;
-  const inputElementRef = _react.useRef(null);
-  const refs = (0, _index.useMergedRefs)(inputElementRef, ref);
+  let inputElementRef = _react.useRef(null);
+  let refs = (0, _index.useMergedRefs)(inputElementRef, ref);
   _react.useEffect(() => {
     if (inputElementRef.current) {
       inputElementRef.current.indeterminate = indeterminate;
-      inputElementRef.current.checked = indeterminate
-        ? false
-        : inputElementRef.current.checked;
+      inputElementRef.current.checked =
+        !indeterminate && inputElementRef.current.checked;
     }
   });
-  const checkbox = _react.createElement(
+  let checkbox = _react.createElement(
     _react.Fragment,
     null,
     _react.createElement(_index.Box, {
@@ -46,7 +45,7 @@ const Checkbox = _react.forwardRef((props, ref) => {
       className: (0, _classnames.default)(
         'iui-checkbox',
         {
-          'iui-checkbox-visibility': variant === 'eyeball',
+          'iui-checkbox-visibility': 'eyeball' === variant,
           'iui-loading': isLoading,
         },
         className,
@@ -63,11 +62,10 @@ const Checkbox = _react.forwardRef((props, ref) => {
         indeterminate: true,
       }),
   );
-  const { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
-  const { className: labelClassName, ...restLabelProps } = labelProps;
-  return !label
-    ? checkbox
-    : _react.createElement(
+  let { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
+  let { className: labelClassName, ...restLabelProps } = labelProps;
+  return label
+    ? _react.createElement(
         _index.Box,
         {
           as: 'label',
@@ -96,5 +94,6 @@ const Checkbox = _react.forwardRef((props, ref) => {
             },
             label,
           ),
-      );
+      )
+    : checkbox;
 });