@itwin/itwinui-react 2.10.0 → 2.11.0

package/cjs/core/Carousel/CarouselSlider.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,34 +31,34 @@ exports.CarouselSlider = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const CarouselContext_1 = require("./CarouselContext");
-const utils_1 = require("../utils");
+const CarouselContext_js_1 = require("./CarouselContext.js");
+const index_js_1 = require("../utils/index.js");
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
-exports.CarouselSlider = react_1.default.forwardRef((props, ref) => {
+exports.CarouselSlider = React.forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    const context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+    const context = React.useContext(CarouselContext_js_1.CarouselContext);
     if (!context) {
         throw new Error('CarouselSlider must be used within Carousel');
     }
     const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
-    const items = react_1.default.useMemo(() => {
+    const items = React.useMemo(() => {
         var _a;
-        return (_a = react_1.default.Children.map(children, (child, index) => react_1.default.isValidElement(child)
-            ? react_1.default.cloneElement(child, {
+        return (_a = React.Children.map(children, (child, index) => React.isValidElement(child)
+            ? React.cloneElement(child, {
                 id: `${idPrefix}--slide-${index}`,
                 index,
             })
             : child)) !== null && _a !== void 0 ? _a : [];
     }, [children, idPrefix]);
-    (0, utils_1.useIsomorphicLayoutEffect)(() => {
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
-    const sliderRef = react_1.default.useRef(null);
-    const refs = (0, utils_1.useMergedRefs)(sliderRef, ref);
+    const sliderRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(sliderRef, ref);
     scrollToSlide.current = (slideIndex, { instant } = {}) => {
         var _a, _b, _c;
         isManuallyUpdating.current = true; // start manual update
@@ -43,22 +66,22 @@ exports.CarouselSlider = react_1.default.forwardRef((props, ref) => {
         if (!sliderRef.current || !slideToShow) {
             return;
         }
-        const motionOk = (_c = (_b = (0, utils_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
+        const motionOk = (_c = (_b = (0, index_js_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _c === void 0 ? void 0 : _c.matches;
         sliderRef.current.scrollTo({
             left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
             behavior: (instant || !motionOk ? 'instant' : 'smooth'), // scrollTo accepts 'instant' but ScrollBehavior type is wrong
         });
     };
-    const scrollTimeout = react_1.default.useRef();
+    const scrollTimeout = React.useRef();
     // reset isManuallyUpdating.current to false after the last scroll event
-    const handleOnScroll = react_1.default.useCallback(() => {
+    const handleOnScroll = React.useCallback(() => {
         var _a, _b;
         if (scrollTimeout.current) {
-            (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(scrollTimeout.current);
+            (_a = (0, index_js_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(scrollTimeout.current);
         }
-        scrollTimeout.current = (_b = (0, utils_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
+        scrollTimeout.current = (_b = (0, index_js_1.getWindow)()) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
             isManuallyUpdating.current = false;
         }, 100);
     }, [isManuallyUpdating]);
-    return (react_1.default.createElement("ol", { "aria-live": 'polite', className: (0, classnames_1.default)('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, ...rest }, items));
+    return (React.createElement("ol", { "aria-live": 'polite', className: (0, classnames_1.default)('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, ...rest }, items));
 });

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

@@ -1,4 +1,4 @@
-export { Carousel } from './Carousel';
-export type { CarouselProps } from './Carousel';
+export { Carousel } from './Carousel.js';
+export type { CarouselProps } from './Carousel.js';
 declare const _default: "./Carousel";
 export default _default;

package/cjs/core/Carousel/index.js

@@ -5,6 +5,6 @@ exports.Carousel = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Carousel_1 = require("./Carousel");
-Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.Carousel; } });
+var Carousel_js_1 = require("./Carousel.js");
+Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_js_1.Carousel; } });
 exports.default = './Carousel';

package/cjs/core/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/checkbox.css';
 export declare type CheckboxProps = {
     /**

package/cjs/core/Checkbox/Checkbox.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,9 +32,9 @@ exports.Checkbox = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const ProgressIndicators_1 = require("../ProgressIndicators");
-const utils_1 = require("../utils");
+const React = __importStar(require("react"));
+const index_js_1 = require("../ProgressIndicators/index.js");
+const index_js_2 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/checkbox.css");
 /**
  * Simple input checkbox
@@ -25,17 +48,17 @@ require("@itwin/itwinui-css/css/checkbox.css");
  * <Checkbox label='Negative Checkbox' status='negative' />
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
-exports.Checkbox = react_1.default.forwardRef((props, ref) => {
+exports.Checkbox = React.forwardRef((props, ref) => {
     const { className, disabled = false, indeterminate = false, label, status, variant = 'default', setFocus, isLoading = false, style, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const inputElementRef = react_1.default.useRef(null);
-    const refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
-    react_1.default.useEffect(() => {
+    (0, index_js_2.useTheme)();
+    const inputElementRef = React.useRef(null);
+    const refs = (0, index_js_2.useMergedRefs)(inputElementRef, ref);
+    React.useEffect(() => {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         if (inputElementRef.current) {
             inputElementRef.current.indeterminate = indeterminate;
             inputElementRef.current.checked = indeterminate
@@ -43,18 +66,18 @@ exports.Checkbox = react_1.default.forwardRef((props, ref) => {
                 : inputElementRef.current.checked;
         }
     });
-    const checkbox = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", { className: (0, classnames_1.default)('iui-checkbox', {
+    const checkbox = (React.createElement(React.Fragment, null,
+        React.createElement("input", { className: (0, classnames_1.default)('iui-checkbox', {
                 'iui-checkbox-visibility': variant === 'eyeball',
                 'iui-loading': isLoading,
             }, className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled || isLoading, type: 'checkbox', ref: refs, ...rest }),
-        isLoading && react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { size: 'x-small', indeterminate: true })));
-    return !label ? (checkbox) : (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-checkbox-wrapper', {
+        isLoading && React.createElement(index_js_1.ProgressRadial, { size: 'x-small', indeterminate: true })));
+    return !label ? (checkbox) : (React.createElement("label", { className: (0, classnames_1.default)('iui-checkbox-wrapper', {
             'iui-disabled': disabled,
             [`iui-${status}`]: !!status,
             'iui-loading': isLoading,
         }, className), style: style },
         checkbox,
-        label && react_1.default.createElement("span", { className: 'iui-checkbox-label' }, label)));
+        label && React.createElement("span", { className: 'iui-checkbox-label' }, label)));
 });
 exports.default = exports.Checkbox;

package/cjs/core/Checkbox/index.d.ts

@@ -1,4 +1,4 @@
-export { Checkbox } from './Checkbox';
-export type { CheckboxProps } from './Checkbox';
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxProps } from './Checkbox.js';
 declare const _default: "./Checkbox";
 export default _default;

package/cjs/core/Checkbox/index.js

@@ -5,6 +5,6 @@ exports.Checkbox = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Checkbox_1 = require("./Checkbox");
-Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+var Checkbox_js_1 = require("./Checkbox.js");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_js_1.Checkbox; } });
 exports.default = './Checkbox';

package/cjs/core/ColorPicker/ColorBuilder.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorBuilderProps = Omit<CommonProps, 'title'>;
 /**

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,18 +31,18 @@ exports.ColorBuilder = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const utils_1 = require("../utils");
-const Slider_1 = require("../Slider");
+const index_js_1 = require("../utils/index.js");
+const index_js_2 = require("../Slider/index.js");
 require("@itwin/itwinui-css/css/color-picker.css");
-const ColorPickerContext_1 = require("./ColorPickerContext");
+const ColorPickerContext_js_1 = require("./ColorPickerContext.js");
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
-    const position = (0, utils_1.getBoundedValue)(pointer, rect.top, rect.bottom);
+    const position = (0, index_js_1.getBoundedValue)(pointer, rect.top, rect.bottom);
     return ((position - rect.top) / rect.height) * 100;
 };
 const getHorizontalPercentageOfRectangle = (rect, pointer) => {
-    const position = (0, utils_1.getBoundedValue)(pointer, rect.left, rect.right);
+    const position = (0, index_js_1.getBoundedValue)(pointer, rect.left, rect.right);
     return ((position - rect.left) / rect.width) * 100;
 };
 /**
@@ -27,25 +50,25 @@ const getHorizontalPercentageOfRectangle = (rect, pointer) => {
  * a color canvas to adjust saturation and lightness values,
  * and a set of sliders to adjust hue and alpha values.
  */
-exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
+exports.ColorBuilder = React.forwardRef((props, ref) => {
     var _a, _b, _c;
     const { className, ...rest } = props;
-    const builderRef = react_1.default.useRef();
-    const refs = (0, utils_1.useMergedRefs)(builderRef, ref);
-    (0, utils_1.useTheme)();
-    const { activeColor, hsvColor, onChangeComplete, applyHsvColorChange, showAlpha, } = (0, ColorPickerContext_1.useColorPickerContext)();
+    const builderRef = React.useRef();
+    const refs = (0, index_js_1.useMergedRefs)(builderRef, ref);
+    (0, index_js_1.useTheme)();
+    const { activeColor, hsvColor, onChangeComplete, applyHsvColorChange, showAlpha, } = (0, ColorPickerContext_js_1.useColorPickerContext)();
     // Set values for slider
-    const hueSliderColor = react_1.default.useMemo(() => utils_1.ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }), [hsvColor.h]);
-    const sliderValue = react_1.default.useMemo(() => hsvColor.h, [hsvColor]);
-    const alphaValue = react_1.default.useMemo(() => { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [hsvColor.a, showAlpha]);
+    const hueSliderColor = React.useMemo(() => index_js_1.ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }), [hsvColor.h]);
+    const sliderValue = React.useMemo(() => hsvColor.h, [hsvColor]);
+    const alphaValue = React.useMemo(() => { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [hsvColor.a, showAlpha]);
     // Set values for color square and color dot
-    const dotColorString = react_1.default.useMemo(() => activeColor.toHexString(), [activeColor]);
-    const [colorDotActive, setColorDotActive] = react_1.default.useState(false);
+    const dotColorString = React.useMemo(() => activeColor.toHexString(), [activeColor]);
+    const [colorDotActive, setColorDotActive] = React.useState(false);
     const hueColorString = hueSliderColor.toHexString();
     const squareTop = 100 - hsvColor.v;
     const squareLeft = hsvColor.s;
     // Update slider change
-    const updateHueSlider = react_1.default.useCallback((huePercent, selectionChanged) => {
+    const updateHueSlider = React.useCallback((huePercent, selectionChanged) => {
         const hue = Number(huePercent.toFixed(2));
         const newHsvColor = {
             h: hue,
@@ -56,7 +79,7 @@ exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
         applyHsvColorChange(newHsvColor, selectionChanged);
     }, [applyHsvColorChange, hsvColor]);
     // Update opacity slider change
-    const updateOpacitySlider = react_1.default.useCallback((alphaPercent, selectionChanged) => {
+    const updateOpacitySlider = React.useCallback((alphaPercent, selectionChanged) => {
         const alpha = Number(alphaPercent.toFixed(2));
         const newHsvColor = {
             h: hsvColor.h,
@@ -67,9 +90,9 @@ exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
         applyHsvColorChange(newHsvColor, selectionChanged);
     }, [applyHsvColorChange, hsvColor]);
     // Update Color field square change
-    const squareRef = react_1.default.useRef(null);
-    const colorDotRef = react_1.default.useRef(null);
-    const updateColorDot = react_1.default.useCallback((x, y, selectionChanged) => {
+    const squareRef = React.useRef(null);
+    const colorDotRef = React.useRef(null);
+    const updateColorDot = React.useCallback((x, y, selectionChanged) => {
         const newHsvColor = {
             h: hsvColor.h,
             s: x,
@@ -78,7 +101,7 @@ exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
         };
         applyHsvColorChange(newHsvColor, selectionChanged);
     }, [applyHsvColorChange, hsvColor]);
-    const updateSquareValue = react_1.default.useCallback((event, callbackType) => {
+    const updateSquareValue = React.useCallback((event, callbackType) => {
         if ((squareRef.current && colorDotActive) ||
             (squareRef.current && callbackType === 'onClick')) {
             const percentX = getHorizontalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientX);
@@ -91,7 +114,7 @@ exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
             }
         }
     }, [colorDotActive, updateColorDot]);
-    const handleSquarePointerUp = react_1.default.useCallback((event) => {
+    const handleSquarePointerUp = React.useCallback((event) => {
         if (!colorDotActive) {
             return;
         }
@@ -100,8 +123,8 @@ exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
         event.preventDefault();
         event.stopPropagation();
     }, [colorDotActive, updateSquareValue]);
-    (0, utils_1.useEventListener)('pointerup', handleSquarePointerUp, (_a = builderRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
-    const handleSquarePointerMove = react_1.default.useCallback((event) => {
+    (0, index_js_1.useEventListener)('pointerup', handleSquarePointerUp, (_a = builderRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+    const handleSquarePointerMove = React.useCallback((event) => {
         if (!colorDotActive) {
             return;
         }
@@ -109,16 +132,16 @@ exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
         event.stopPropagation();
         updateSquareValue(event, 'onUpdate');
     }, [colorDotActive, updateSquareValue]);
-    (0, utils_1.useEventListener)('pointermove', handleSquarePointerMove, (_b = builderRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
-    const handleSquarePointerLeave = react_1.default.useCallback((event) => {
+    (0, index_js_1.useEventListener)('pointermove', handleSquarePointerMove, (_b = builderRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
+    const handleSquarePointerLeave = React.useCallback((event) => {
         if (!colorDotActive) {
             return;
         }
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
     }, [colorDotActive, updateSquareValue]);
-    (0, utils_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_c = builderRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument);
-    const keysPressed = react_1.default.useRef({}); // keep track of which keys are currently pressed
+    (0, index_js_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_c = builderRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument);
+    const keysPressed = React.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot
     const handleColorDotKeyDown = (event) => {
         if (event.altKey) {
@@ -161,12 +184,12 @@ exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
                     keysPressed.current['ArrowRight']) {
                     return;
                 }
-                onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(utils_1.ColorValue.create(hsvColor));
+                onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(index_js_1.ColorValue.create(hsvColor));
                 break;
         }
     };
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-color-selection-wrapper', className), ref: refs, ...rest },
-        react_1.default.createElement("div", { className: 'iui-color-field', style: {
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-color-selection-wrapper', className), ref: refs, ...rest },
+        React.createElement("div", { className: 'iui-color-field', style: {
                 '--iui-color-field-hue': hueColorString,
                 '--iui-color-picker-selected-color': dotColorString,
             }, ref: squareRef, onPointerDown: (event) => {
@@ -176,19 +199,19 @@ exports.ColorBuilder = react_1.default.forwardRef((props, ref) => {
                 setColorDotActive(true);
                 (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             } },
-            react_1.default.createElement("div", { className: 'iui-color-dot', style: {
+            React.createElement("div", { className: 'iui-color-dot', style: {
                     '--iui-color-dot-inset': `${squareTop.toString()}% auto auto ${squareLeft.toString()}%`,
                 }, onPointerDown: () => {
                     var _a;
                     setColorDotActive(true);
                     (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 }, onKeyDown: handleColorDotKeyDown, onKeyUp: handleColorDotKeyUp, tabIndex: 0, ref: colorDotRef })),
-        react_1.default.createElement(Slider_1.Slider, { minLabel: '', maxLabel: '', values: [sliderValue], className: 'iui-hue-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
+        React.createElement(index_js_2.Slider, { minLabel: '', maxLabel: '', values: [sliderValue], className: 'iui-hue-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
                 updateHueSlider(values[0], true);
             }, onUpdate: (values) => {
                 updateHueSlider(values[0], false);
             }, min: 0, max: 359 }),
-        showAlpha && (react_1.default.createElement(Slider_1.Slider, { minLabel: '', maxLabel: '', values: [alphaValue], className: 'iui-opacity-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
+        showAlpha && (React.createElement(index_js_2.Slider, { minLabel: '', maxLabel: '', values: [alphaValue], className: 'iui-opacity-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
                 updateOpacitySlider(values[0], true);
             }, onUpdate: (values) => {
                 updateOpacitySlider(values[0], false);

package/cjs/core/ColorPicker/ColorInputPanel.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorInputPanelProps = {
     /**