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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 3.0.0-dev.11
+
+### Major Changes
+
+- [#1583](https://github.com/iTwin/iTwinUI/pull/1583): Bumped minimum react version to 17. If you're still on react 16, please update to react 17 (which has no breaking changes).
+- [#1565](https://github.com/iTwin/iTwinUI/pull/1565): Removed `Menu` component. Use `DropdownMenu` instead.
+
+### Patch Changes
+
+- [#1605](https://github.com/iTwin/iTwinUI/pull/1605): Added `'use client'` directive for React Server Components support.
+
 ## 3.0.0-dev.10
 
 ### Major Changes
@@ -202,6 +213,19 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.12.10
+
+### Patch Changes
+
+- [#1590](https://github.com/iTwin/iTwinUI/pull/1590): Fixed undefined property access in `useScrollToRow`.
+- [#1587](https://github.com/iTwin/iTwinUI/pull/1587): Fixed an issue where v2 toasts and modals were being added to v1 containers.
+
+## 2.12.9
+
+### Patch Changes
+
+- [#1586](https://github.com/iTwin/iTwinUI/pull/1586): Fixed an issue with toggle-switch border styles not working in popout windows.
+
 ## 2.12.8
 
 ### Patch Changes

package/cjs/core/Alert/Alert.d.ts

@@ -55,7 +55,7 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps
     Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
+        size?: "small" | "auto" | "medium" | "large" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {

package/cjs/core/Alert/Alert.js

@@ -9,7 +9,8 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const Icon_js_1 = require('../Icon/Icon.js');
 const AlertContext = React.createContext(undefined);
 // ----------------------------------------------------------------------------
 // Alert component
@@ -75,7 +76,7 @@ const AlertIcon = React.forwardRef((props, ref) => {
   const { type } = (0, index_js_1.useSafeContext)(AlertContext);
   const StatusIcon = index_js_1.StatusIconMap[type];
   return React.createElement(
-    index_js_1.Icon,
+    Icon_js_1.Icon,
     { fill: type, ref: ref, ...rest },
     children ?? React.createElement(StatusIcon, null),
   );
@@ -106,7 +107,7 @@ AlertAction.displayName = 'Alert.Action';
 const AlertCloseButton = React.forwardRef((props, ref) => {
   const { children, ...rest } = props;
   return React.createElement(
-    index_js_2.IconButton,
+    IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: 'small',

package/cjs/core/Avatar/Avatar.js

@@ -9,6 +9,7 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
+const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.js');
 /**
  * Helper function that returns one of the preset badge color values.
  */
@@ -77,7 +78,7 @@ exports.Avatar = React.forwardRef((props, ref) => {
     image,
     status
       ? React.createElement(
-          index_js_1.VisuallyHidden,
+          VisuallyHidden_js_1.VisuallyHidden,
           null,
           statusTitles[status],
         )

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -9,7 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Buttons/Button/index.js');
+const Button_js_1 = require('../Buttons/Button.js');
 const logWarningInDev = (0, index_js_1.createWarningLogger)();
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
@@ -113,7 +113,7 @@ const ListItem = ({ item, isActive }) => {
   if (
     children?.type === 'span' ||
     children?.type === 'a' ||
-    children?.type === index_js_2.Button
+    children?.type === Button_js_1.Button
   ) {
     logWarningInDev(
       'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',

package/cjs/core/Buttons/{Button/Button.d.ts → Button.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ButtonBase } from '../../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import { ButtonBase } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type ButtonProps = {
     /**
      * Modify size of the button.

package/cjs/core/Buttons/{Button/Button.js → Button.js}

@@ -8,7 +8,7 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../../utils/index.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * Generic button component
  * @example

package/{esm/core/Buttons/DropdownButton → cjs/core/Buttons}/DropdownButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { ButtonProps } from '../Button/Button.js';
-import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import type { DropdownMenuProps } from '../DropdownMenu/DropdownMenu.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

package/cjs/core/Buttons/{DropdownButton/DropdownButton.js → DropdownButton.js}

@@ -8,9 +8,9 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../Button/index.js');
-const index_js_2 = require('../../DropdownMenu/index.js');
-const index_js_3 = require('../../utils/index.js');
+const Button_js_1 = require('./Button.js');
+const DropdownMenu_js_1 = require('../DropdownMenu/DropdownMenu.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * Button that opens a DropdownMenu.
  * @example
@@ -32,7 +32,7 @@ exports.DropdownButton = React.forwardRef((props, forwardedRef) => {
   } = props;
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   return React.createElement(
-    index_js_2.DropdownMenu,
+    DropdownMenu_js_1.DropdownMenu,
     {
       menuItems: menuItems,
       matchWidth: true,
@@ -44,16 +44,16 @@ exports.DropdownButton = React.forwardRef((props, forwardedRef) => {
       },
     },
     React.createElement(
-      index_js_1.Button,
+      Button_js_1.Button,
       {
         className: (0, classnames_1.default)('iui-button-dropdown', className),
         size: size,
         styleType: styleType,
         endIcon: isMenuOpen
-          ? React.createElement(index_js_3.SvgCaretUpSmall, {
+          ? React.createElement(index_js_1.SvgCaretUpSmall, {
               'aria-hidden': true,
             })
-          : React.createElement(index_js_3.SvgCaretDownSmall, {
+          : React.createElement(index_js_1.SvgCaretDownSmall, {
               'aria-hidden': true,
             }),
         ref: forwardedRef,

package/{esm/core/Buttons/IconButton → cjs/core/Buttons}/IconButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Button/Button.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type IconButtonProps = {
     /**
      * Button gets active style.

package/cjs/core/Buttons/{IconButton/IconButton.js → IconButton.js}

@@ -8,8 +8,9 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../../utils/index.js');
-const Tooltip_js_1 = require('../../Tooltip/Tooltip.js');
+const index_js_1 = require('../utils/index.js');
+const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
+const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.js');
 /**
  * Icon button
  * @example
@@ -52,7 +53,9 @@ exports.IconButton = React.forwardRef((props, ref) => {
       },
       children,
     ),
-    label ? React.createElement(index_js_1.VisuallyHidden, null, label) : null,
+    label
+      ? React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, label)
+      : null,
   );
   return label
     ? React.createElement(

package/{esm/core/Buttons/IdeasButton → cjs/core/Buttons}/IdeasButton.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type IdeasButtonProps = {
     /**
      * On click handler.

package/cjs/core/Buttons/{IdeasButton/IdeasButton.js → IdeasButton.js}

@@ -7,8 +7,8 @@ const tslib_1 = require('tslib');
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../../utils/index.js');
-const index_js_2 = require('../Button/index.js');
+const index_js_1 = require('../utils/index.js');
+const Button_js_1 = require('./Button.js');
 /**
  * Ideas button
  * @example
@@ -17,7 +17,7 @@ const index_js_2 = require('../Button/index.js');
 exports.IdeasButton = React.forwardRef((props, ref) => {
   const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
   return React.createElement(
-    index_js_2.Button,
+    Button_js_1.Button,
     {
       ref: ref,
       'data-iui-variant': 'idea',

package/cjs/core/Buttons/{SplitButton/SplitButton.d.ts → SplitButton.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Button/Button.js';
-import { IconButton } from '../IconButton/index.js';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import { IconButton } from './IconButton.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
 import type { Placement } from '@floating-ui/react';
 export type SplitButtonProps = ButtonProps & {
     /**

package/cjs/core/Buttons/{SplitButton/SplitButton.js → SplitButton.js}

@@ -8,10 +8,11 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../Button/index.js');
-const index_js_2 = require('../IconButton/index.js');
-const index_js_3 = require('../../utils/index.js');
-const Menu_js_1 = require('../../Menu/Menu.js');
+const Button_js_1 = require('./Button.js');
+const IconButton_js_1 = require('./IconButton.js');
+const index_js_1 = require('../utils/index.js');
+const Menu_js_1 = require('../Menu/Menu.js');
+const Popover_js_1 = require('../Popover/Popover.js');
 /**
  * Split button component with a DropdownMenu.
  *
@@ -52,15 +53,15 @@ exports.SplitButton = React.forwardRef((props, forwardedRef) => {
     }
     return menuItems;
   }, [menuItems, close]);
-  const popover = (0, index_js_3.usePopover)({
+  const popover = (0, Popover_js_1.usePopover)({
     visible,
     onVisibleChange: (open) => (open ? setVisible(true) : close()),
     placement: menuPlacement,
     matchWidth: true,
   });
-  const labelId = (0, index_js_3.useId)();
+  const labelId = (0, index_js_1.useId)();
   return React.createElement(
-    index_js_3.Box,
+    index_js_1.Box,
     {
       ...wrapperProps,
       ref: popover.refs.setPositionReference,
@@ -73,20 +74,20 @@ exports.SplitButton = React.forwardRef((props, forwardedRef) => {
       ),
     },
     React.createElement(
-      index_js_1.Button,
+      Button_js_1.Button,
       {
         className: className,
         styleType: styleType,
         size: size,
         onClick: onClick,
-        ref: (0, index_js_3.useMergedRefs)(buttonRef, forwardedRef),
+        ref: (0, index_js_1.useMergedRefs)(buttonRef, forwardedRef),
         ...rest,
         labelProps: { id: labelId, ...props.labelProps },
       },
       children,
     ),
     React.createElement(
-      index_js_2.IconButton,
+      IconButton_js_1.IconButton,
       {
         styleType: styleType,
         size: size,
@@ -97,12 +98,12 @@ exports.SplitButton = React.forwardRef((props, forwardedRef) => {
         ...popover.getReferenceProps(menuButtonProps),
       },
       visible
-        ? React.createElement(index_js_3.SvgCaretUpSmall, null)
-        : React.createElement(index_js_3.SvgCaretDownSmall, null),
+        ? React.createElement(index_js_1.SvgCaretUpSmall, null)
+        : React.createElement(index_js_1.SvgCaretDownSmall, null),
     ),
     popover.open &&
       React.createElement(
-        index_js_3.Portal,
+        index_js_1.Portal,
         { portal: portal },
         React.createElement(
           Menu_js_1.Menu,

package/cjs/core/Carousel/Carousel.d.ts

@@ -42,7 +42,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -51,7 +51,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
     };

package/cjs/core/Carousel/CarouselNavigation.d.ts

@@ -13,7 +13,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -22,7 +22,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/cjs/core/Carousel/CarouselNavigation.js

@@ -9,13 +9,13 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const CarouselContext_js_1 = require('./CarouselContext.js');
-const index_js_1 = require('../Buttons/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
 const CarouselDotsList_js_1 = require('./CarouselDotsList.js');
-const index_js_2 = require('../utils/index.js');
+const index_js_1 = require('../utils/index.js');
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
   return React.createElement(
-    index_js_2.Box,
+    index_js_1.Box,
     {
       as: 'nav',
       className: (0, classnames_1.default)(
@@ -30,13 +30,13 @@ const CarouselNavigationComponent = React.forwardRef((props, ref) => {
         React.Fragment,
         null,
         React.createElement(
-          index_js_2.Box,
+          index_js_1.Box,
           { className: 'iui-carousel-navigation-left' },
           React.createElement(PreviousButton, null),
         ),
         React.createElement(CarouselDotsList_js_1.CarouselDotsList, null),
         React.createElement(
-          index_js_2.Box,
+          index_js_1.Box,
           { className: 'iui-carousel-navigation-right' },
           React.createElement(NextButton, null),
         ),
@@ -57,7 +57,7 @@ const PreviousButton = React.forwardRef((props, ref) => {
     scrollToSlide,
   } = context;
   return React.createElement(
-    index_js_1.IconButton,
+    IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: 'small',
@@ -72,7 +72,7 @@ const PreviousButton = React.forwardRef((props, ref) => {
         props?.onClick?.(e);
       },
     },
-    React.createElement(index_js_2.SvgChevronLeft, null),
+    React.createElement(index_js_1.SvgChevronLeft, null),
   );
 });
 /** Button for switching to next slide */
@@ -89,7 +89,7 @@ const NextButton = React.forwardRef((props, ref) => {
     scrollToSlide,
   } = context;
   return React.createElement(
-    index_js_1.IconButton,
+    IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: 'small',
@@ -104,7 +104,7 @@ const NextButton = React.forwardRef((props, ref) => {
         props?.onClick?.(e);
       },
     },
-    React.createElement(index_js_2.SvgChevronRight, null),
+    React.createElement(index_js_1.SvgChevronRight, null),
   );
 });
 /**

package/cjs/core/Checkbox/Checkbox.js

@@ -8,8 +8,8 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../ProgressIndicators/index.js');
-const index_js_2 = require('../utils/index.js');
+const ProgressRadial_js_1 = require('../ProgressIndicators/ProgressRadial.js');
+const index_js_1 = require('../utils/index.js');
 /**
  * Simple input checkbox
  * @example
@@ -37,7 +37,7 @@ exports.Checkbox = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const inputElementRef = React.useRef(null);
-  const refs = (0, index_js_2.useMergedRefs)(inputElementRef, ref);
+  const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
   React.useEffect(() => {
     if (inputElementRef.current) {
       inputElementRef.current.indeterminate = indeterminate;
@@ -49,7 +49,7 @@ exports.Checkbox = React.forwardRef((props, ref) => {
   const checkbox = React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_2.Box, {
+    React.createElement(index_js_1.Box, {
       as: 'input',
       className: (0, classnames_1.default)(
         'iui-checkbox',
@@ -66,7 +66,7 @@ exports.Checkbox = React.forwardRef((props, ref) => {
       ...rest,
     }),
     isLoading &&
-      React.createElement(index_js_1.ProgressRadial, {
+      React.createElement(ProgressRadial_js_1.ProgressRadial, {
         size: 'x-small',
         indeterminate: true,
       }),
@@ -76,7 +76,7 @@ exports.Checkbox = React.forwardRef((props, ref) => {
   return !label
     ? checkbox
     : React.createElement(
-        index_js_2.Box,
+        index_js_1.Box,
         {
           as: 'label',
           className: (0, classnames_1.default)(
@@ -93,7 +93,7 @@ exports.Checkbox = React.forwardRef((props, ref) => {
         checkbox,
         label &&
           React.createElement(
-            index_js_2.Box,
+            index_js_1.Box,
             {
               as: 'span',
               className: (0, classnames_1.default)(

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -9,7 +9,7 @@ const tslib_1 = require('tslib');
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
-const index_js_2 = require('../Slider/index.js');
+const Slider_js_1 = require('../Slider/Slider.js');
 const ColorPickerContext_js_1 = require('./ColorPickerContext.js');
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
   const position = (0, index_js_1.getBoundedValue)(
@@ -267,7 +267,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
         ref: colorDotRef,
       }),
     ),
-    React.createElement(index_js_2.Slider, {
+    React.createElement(Slider_js_1.Slider, {
       minLabel: '',
       maxLabel: '',
       values: [sliderValue],
@@ -284,7 +284,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
       max: 359,
     }),
     showAlpha &&
-      React.createElement(index_js_2.Slider, {
+      React.createElement(Slider_js_1.Slider, {
         minLabel: '',
         maxLabel: '',
         values: [alphaValue],