@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.3

package/esm/core/Carousel/CarouselNavigation.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -31,35 +9,35 @@ import { IconButton } from '../Buttons';
 import { CarouselDotsList } from './CarouselDotsList';
 import { SvgChevronLeft, SvgChevronRight } from '../utils';
 /** Button for switching to previous slide */
-var PreviousButton = React.forwardRef(function (props, ref) {
-    var context = React.useContext(CarouselContext);
+const PreviousButton = React.forwardRef((props, ref) => {
+    const context = React.useContext(CarouselContext);
     if (!context) {
         throw new Error('CarouselNavigation should be used inside Carousel');
     }
-    var slideCount = context.slideCount, currentIndex = context.currentIndex, setCurrentIndex = context.setCurrentIndex, keysPressed = context.keysPressed, scrollToSlide = context.scrollToSlide;
-    return (React.createElement(IconButton, __assign({ styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref }, props, { onClick: function (e) {
+    const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
+    return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref, ...props, onClick: (e) => {
             var _a;
-            var prevIndex = (slideCount + currentIndex - 1) % slideCount;
+            const prevIndex = (slideCount + currentIndex - 1) % slideCount;
             setCurrentIndex(prevIndex);
             scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        } }),
+        } },
         React.createElement(SvgChevronLeft, null)));
 });
 /** Button for switching to next slide */
-var NextButton = React.forwardRef(function (props, ref) {
-    var context = React.useContext(CarouselContext);
+const NextButton = React.forwardRef((props, ref) => {
+    const context = React.useContext(CarouselContext);
     if (!context) {
         throw new Error('CarouselNavigation should be used inside Carousel');
     }
-    var slideCount = context.slideCount, currentIndex = context.currentIndex, setCurrentIndex = context.setCurrentIndex, keysPressed = context.keysPressed, scrollToSlide = context.scrollToSlide;
-    return (React.createElement(IconButton, __assign({ styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref }, props, { onClick: function (e) {
+    const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
+    return (React.createElement(IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref, ...props, onClick: (e) => {
             var _a;
-            var nextIndex = (slideCount + currentIndex + 1) % slideCount;
+            const nextIndex = (slideCount + currentIndex + 1) % slideCount;
             setCurrentIndex(nextIndex);
             scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
             (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        } }),
+        } },
         React.createElement(SvgChevronRight, null)));
 });
 /**
@@ -68,12 +46,12 @@ var NextButton = React.forwardRef(function (props, ref) {
  *
  * `children` can be specified to override what is shown in this navigation section.
  */
-export var CarouselNavigation = Object.assign(React.forwardRef(function (props, ref) {
-    var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
-    return (React.createElement("nav", __assign({ className: cx('iui-carousel-navigation', className), ref: ref }, rest), children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+export const CarouselNavigation = Object.assign(React.forwardRef((props, ref) => {
+    const { className, children, ...rest } = props;
+    return (React.createElement("nav", { className: cx('iui-carousel-navigation', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
         React.createElement("div", { className: 'iui-carousel-navigation-left' },
             React.createElement(PreviousButton, null)),
         React.createElement(CarouselDotsList, null),
         React.createElement("div", { className: 'iui-carousel-navigation-right' },
             React.createElement(NextButton, null))))));
-}), { PreviousButton: PreviousButton, NextButton: NextButton });
+}), { PreviousButton, NextButton });

package/esm/core/Carousel/CarouselSlide.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -34,20 +12,20 @@ import { CarouselContext } from './CarouselContext';
  * It is recommended that the slide content bring its own dimensions (esp. height) and that
  * the dimensions should be the same for all slides.
  */
-export var CarouselSlide = React.forwardRef(function (props, ref) {
-    var index = props.index, className = props.className, children = props.children, rest = __rest(props, ["index", "className", "children"]);
-    var context = React.useContext(CarouselContext);
+export const CarouselSlide = React.forwardRef((props, ref) => {
+    const { index, className, children, ...rest } = props;
+    const context = React.useContext(CarouselContext);
     if (!context || index == null) {
         throw new Error('CarouselSlide must be used within Carousel');
     }
-    var isManuallyUpdating = context.isManuallyUpdating, setCurrentIndex = context.setCurrentIndex;
-    var updateActiveIndexOnScroll = React.useCallback(function () {
+    const { isManuallyUpdating, setCurrentIndex } = context;
+    const updateActiveIndexOnScroll = React.useCallback(() => {
         // only update index if scroll was triggered by browser
         if (!isManuallyUpdating.current) {
             setCurrentIndex(index);
         }
     }, [index, isManuallyUpdating, setCurrentIndex]);
-    var intersectionRef = useIntersection(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
-    var refs = useMergedRefs(intersectionRef, ref);
-    return (React.createElement("li", __assign({ className: cx('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs }, rest), children));
+    const intersectionRef = useIntersection(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
+    const refs = useMergedRefs(intersectionRef, ref);
+    return (React.createElement("li", { className: cx('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs, ...rest }, children));
 });

package/esm/core/Carousel/CarouselSlider.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -31,53 +9,50 @@ import { getWindow, useMergedRefs } from '../utils';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
-export var CarouselSlider = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
-    var context = React.useContext(CarouselContext);
+export const CarouselSlider = React.forwardRef((props, ref) => {
+    const { children, className, ...rest } = props;
+    const context = React.useContext(CarouselContext);
     if (!context) {
         throw new Error('CarouselSlider must be used within Carousel');
     }
-    var setSlideCount = context.setSlideCount, idPrefix = context.idPrefix, scrollToSlide = context.scrollToSlide, isManuallyUpdating = context.isManuallyUpdating;
-    var items = React.useMemo(function () {
+    const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating, } = context;
+    const items = React.useMemo(() => {
         var _a;
-        return (_a = React.Children.map(children, function (child, index) {
-            return React.isValidElement(child)
-                ? React.cloneElement(child, {
-                    id: "".concat(idPrefix, "--slide-").concat(index),
-                    index: index,
-                })
-                : child;
-        })) !== null && _a !== void 0 ? _a : [];
+        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]);
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         setSlideCount(items.length);
     }, [items.length, setSlideCount]);
-    var sliderRef = React.useRef(null);
-    var refs = useMergedRefs(sliderRef, ref);
-    scrollToSlide.current = function (slideIndex, _a) {
-        var _b, _c, _d;
-        var _e = _a === void 0 ? {} : _a, instant = _e.instant;
+    const sliderRef = React.useRef(null);
+    const refs = useMergedRefs(sliderRef, ref);
+    scrollToSlide.current = (slideIndex, { instant } = {}) => {
+        var _a, _b, _c;
         isManuallyUpdating.current = true; // start manual update
-        var slideToShow = (_b = sliderRef.current) === null || _b === void 0 ? void 0 : _b.children.item(slideIndex);
+        const slideToShow = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.children.item(slideIndex);
         if (!sliderRef.current || !slideToShow) {
             return;
         }
-        var motionOk = (_d = (_c = getWindow()) === null || _c === void 0 ? void 0 : _c.matchMedia('(prefers-reduced-motion: no-preference)')) === null || _d === void 0 ? void 0 : _d.matches;
+        const motionOk = (_c = (_b = 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
         });
     };
-    var scrollTimeout = React.useRef();
+    const scrollTimeout = React.useRef();
     // reset isManuallyUpdating.current to false after the last scroll event
-    var handleOnScroll = React.useCallback(function () {
+    const handleOnScroll = React.useCallback(() => {
         var _a, _b;
         if (scrollTimeout.current) {
             (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.clearTimeout(scrollTimeout.current);
         }
-        scrollTimeout.current = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.setTimeout(function () {
+        scrollTimeout.current = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
             isManuallyUpdating.current = false;
         }, 100);
     }, [isManuallyUpdating]);
-    return (React.createElement("ol", __assign({ "aria-live": 'polite', className: cx('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll }, rest), items));
+    return (React.createElement("ol", { "aria-live": 'polite', className: cx('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, ...rest }, items));
 });

package/esm/core/Checkbox/Checkbox.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -41,18 +19,17 @@ import '@itwin/itwinui-css/css/checkbox.css';
  * <Checkbox label='Negative Checkbox' status='negative' />
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
-export var Checkbox = React.forwardRef(function (props, ref) {
-    var _a, _b;
-    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.indeterminate, indeterminate = _d === void 0 ? false : _d, label = props.label, status = props.status, _e = props.variant, variant = _e === void 0 ? 'default' : _e, setFocus = props.setFocus, _f = props.isLoading, isLoading = _f === void 0 ? false : _f, style = props.style, rest = __rest(props, ["className", "disabled", "indeterminate", "label", "status", "variant", "setFocus", "isLoading", "style"]);
+export const Checkbox = React.forwardRef((props, ref) => {
+    const { className, disabled = false, indeterminate = false, label, status, variant = 'default', setFocus, isLoading = false, style, ...rest } = props;
     useTheme();
-    var inputElementRef = React.useRef(null);
-    var refs = useMergedRefs(inputElementRef, ref);
-    React.useEffect(function () {
+    const inputElementRef = React.useRef(null);
+    const refs = useMergedRefs(inputElementRef, ref);
+    React.useEffect(() => {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         if (inputElementRef.current) {
             inputElementRef.current.indeterminate = indeterminate;
             inputElementRef.current.checked = indeterminate
@@ -60,18 +37,17 @@ export var Checkbox = React.forwardRef(function (props, ref) {
                 : inputElementRef.current.checked;
         }
     });
-    var checkbox = (React.createElement(React.Fragment, null,
-        React.createElement("input", __assign({ className: cx('iui-checkbox', {
+    const checkbox = (React.createElement(React.Fragment, null,
+        React.createElement("input", { className: cx('iui-checkbox', {
                 'iui-checkbox-visibility': variant === 'eyeball',
                 'iui-loading': isLoading,
-            }, className && (_a = {}, _a[className] = !label, _a)), style: !label ? style : undefined, disabled: disabled || isLoading, type: 'checkbox', ref: refs }, rest)),
+            }, className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled || isLoading, type: 'checkbox', ref: refs, ...rest }),
         isLoading && React.createElement(ProgressRadial, { size: 'x-small', indeterminate: true })));
-    return !label ? (checkbox) : (React.createElement("label", { className: cx('iui-checkbox-wrapper', (_b = {
-                'iui-disabled': disabled
-            },
-            _b["iui-".concat(status)] = !!status,
-            _b['iui-loading'] = isLoading,
-            _b), className), style: style },
+    return !label ? (checkbox) : (React.createElement("label", { className: cx('iui-checkbox-wrapper', {
+            'iui-disabled': disabled,
+            [`iui-${status}`]: !!status,
+            'iui-loading': isLoading,
+        }, className), style: style },
         checkbox,
         label && React.createElement("span", { className: 'iui-checkbox-label' }, label)));
 });

package/esm/core/ColorPicker/ColorBuilder.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -30,12 +8,12 @@ import { ColorValue, getBoundedValue, useEventListener, useMergedRefs, useTheme,
 import { Slider } from '../Slider';
 import '@itwin/itwinui-css/css/color-picker.css';
 import { useColorPickerContext } from './ColorPickerContext';
-var getVerticalPercentageOfRectangle = function (rect, pointer) {
-    var position = getBoundedValue(pointer, rect.top, rect.bottom);
+const getVerticalPercentageOfRectangle = (rect, pointer) => {
+    const position = getBoundedValue(pointer, rect.top, rect.bottom);
     return ((position - rect.top) / rect.height) * 100;
 };
-var getHorizontalPercentageOfRectangle = function (rect, pointer) {
-    var position = getBoundedValue(pointer, rect.left, rect.right);
+const getHorizontalPercentageOfRectangle = (rect, pointer) => {
+    const position = getBoundedValue(pointer, rect.left, rect.right);
     return ((position - rect.left) / rect.width) * 100;
 };
 /**
@@ -43,32 +21,32 @@ var getHorizontalPercentageOfRectangle = function (rect, pointer) {
  * a color canvas to adjust saturation and lightness values,
  * and a set of sliders to adjust hue and alpha values.
  */
-export var ColorBuilder = React.forwardRef(function (props, ref) {
+export const ColorBuilder = React.forwardRef((props, ref) => {
     var _a, _b, _c;
-    var className = props.className, rest = __rest(props, ["className"]);
-    var builderRef = React.useRef();
-    var refs = useMergedRefs(builderRef, ref);
+    const { className, ...rest } = props;
+    const builderRef = React.useRef();
+    const refs = useMergedRefs(builderRef, ref);
     useTheme();
-    var _d = useColorPickerContext(), activeColor = _d.activeColor, hsvColor = _d.hsvColor, onChangeComplete = _d.onChangeComplete, applyHsvColorChange = _d.applyHsvColorChange, showAlpha = _d.showAlpha;
+    const { activeColor, hsvColor, onChangeComplete, applyHsvColorChange, showAlpha, } = useColorPickerContext();
     // Set values for slider
-    var hueSliderColor = React.useMemo(function () { return ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }); }, [hsvColor.h]);
-    var sliderValue = React.useMemo(function () { return hsvColor.h; }, [hsvColor]);
-    var alphaValue = React.useMemo(function () { var _a; return (showAlpha ? (_a = hsvColor.a) !== null && _a !== void 0 ? _a : 1 : 1); }, [
+    const hueSliderColor = React.useMemo(() => 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
-    var dotColorString = React.useMemo(function () { return activeColor.toHexString(); }, [
+    const dotColorString = React.useMemo(() => activeColor.toHexString(), [
         activeColor,
     ]);
-    var _e = React.useState(false), colorDotActive = _e[0], setColorDotActive = _e[1];
-    var hueColorString = hueSliderColor.toHexString();
-    var squareTop = 100 - hsvColor.v;
-    var squareLeft = hsvColor.s;
+    const [colorDotActive, setColorDotActive] = React.useState(false);
+    const hueColorString = hueSliderColor.toHexString();
+    const squareTop = 100 - hsvColor.v;
+    const squareLeft = hsvColor.s;
     // Update slider change
-    var updateHueSlider = React.useCallback(function (huePercent, selectionChanged) {
-        var hue = Number(huePercent.toFixed(2));
-        var newHsvColor = {
+    const updateHueSlider = React.useCallback((huePercent, selectionChanged) => {
+        const hue = Number(huePercent.toFixed(2));
+        const newHsvColor = {
             h: hue,
             s: hsvColor.s,
             v: hsvColor.v,
@@ -77,9 +55,9 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         applyHsvColorChange(newHsvColor, selectionChanged);
     }, [applyHsvColorChange, hsvColor]);
     // Update opacity slider change
-    var updateOpacitySlider = React.useCallback(function (alphaPercent, selectionChanged) {
-        var alpha = Number(alphaPercent.toFixed(2));
-        var newHsvColor = {
+    const updateOpacitySlider = React.useCallback((alphaPercent, selectionChanged) => {
+        const alpha = Number(alphaPercent.toFixed(2));
+        const newHsvColor = {
             h: hsvColor.h,
             s: hsvColor.s,
             v: hsvColor.v,
@@ -88,10 +66,10 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         applyHsvColorChange(newHsvColor, selectionChanged);
     }, [applyHsvColorChange, hsvColor]);
     // Update Color field square change
-    var squareRef = React.useRef(null);
-    var colorDotRef = React.useRef(null);
-    var updateColorDot = React.useCallback(function (x, y, selectionChanged) {
-        var newHsvColor = {
+    const squareRef = React.useRef(null);
+    const colorDotRef = React.useRef(null);
+    const updateColorDot = React.useCallback((x, y, selectionChanged) => {
+        const newHsvColor = {
             h: hsvColor.h,
             s: x,
             v: 100 - y,
@@ -99,11 +77,11 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         };
         applyHsvColorChange(newHsvColor, selectionChanged);
     }, [applyHsvColorChange, hsvColor]);
-    var updateSquareValue = React.useCallback(function (event, callbackType) {
+    const updateSquareValue = React.useCallback((event, callbackType) => {
         if ((squareRef.current && colorDotActive) ||
             (squareRef.current && callbackType === 'onClick')) {
-            var percentX = getHorizontalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientX);
-            var percentY = getVerticalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientY);
+            const percentX = getHorizontalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientX);
+            const percentY = getVerticalPercentageOfRectangle(squareRef.current.getBoundingClientRect(), event.clientY);
             if (callbackType === 'onChange') {
                 updateColorDot(percentX, percentY, true);
             }
@@ -112,7 +90,7 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
             }
         }
     }, [colorDotActive, updateColorDot]);
-    var handleSquarePointerUp = React.useCallback(function (event) {
+    const handleSquarePointerUp = React.useCallback((event) => {
         if (!colorDotActive) {
             return;
         }
@@ -122,7 +100,7 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         event.stopPropagation();
     }, [colorDotActive, updateSquareValue]);
     useEventListener('pointerup', handleSquarePointerUp, (_a = builderRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
-    var handleSquarePointerMove = React.useCallback(function (event) {
+    const handleSquarePointerMove = React.useCallback((event) => {
         if (!colorDotActive) {
             return;
         }
@@ -131,7 +109,7 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         updateSquareValue(event, 'onUpdate');
     }, [colorDotActive, updateSquareValue]);
     useEventListener('pointermove', handleSquarePointerMove, (_b = builderRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
-    var handleSquarePointerLeave = React.useCallback(function (event) {
+    const handleSquarePointerLeave = React.useCallback((event) => {
         if (!colorDotActive) {
             return;
         }
@@ -139,11 +117,11 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
         setColorDotActive(false);
     }, [colorDotActive, updateSquareValue]);
     useEventListener('pointerleave', handleSquarePointerLeave, (_c = builderRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument);
-    var keysPressed = React.useRef({}); // keep track of which keys are currently pressed
+    const keysPressed = React.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot
-    var handleColorDotKeyDown = function (event) {
-        var x = squareLeft;
-        var y = squareTop;
+    const handleColorDotKeyDown = (event) => {
+        let x = squareLeft;
+        let y = squareTop;
         keysPressed.current[event.key] = true;
         switch (event.key) {
             case 'ArrowDown': {
@@ -166,7 +144,7 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
                 break;
         }
     };
-    var handleColorDotKeyUp = function (event) {
+    const handleColorDotKeyUp = (event) => {
         keysPressed.current[event.key] = false;
         switch (event.key) {
             case 'ArrowUp':
@@ -183,11 +161,11 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
                 break;
         }
     };
-    return (React.createElement("div", __assign({ className: cx('iui-color-selection-wrapper', className), ref: refs }, rest),
+    return (React.createElement("div", { className: cx('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: function (event) {
+            }, ref: squareRef, onPointerDown: (event) => {
                 var _a;
                 event.preventDefault();
                 updateSquareValue(event, 'onClick');
@@ -195,20 +173,20 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
                 (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             } },
             React.createElement("div", { className: 'iui-color-dot', style: {
-                    '--iui-color-dot-inset': "".concat(squareTop.toString(), "% auto auto ").concat(squareLeft.toString(), "%"),
-                }, onPointerDown: function () {
+                    '--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.createElement(Slider, { minLabel: '', maxLabel: '', values: [sliderValue], className: 'iui-hue-slider', trackDisplayMode: 'none', tooltipProps: function () { return ({ visible: false }); }, onChange: function (values) {
+        React.createElement(Slider, { minLabel: '', maxLabel: '', values: [sliderValue], className: 'iui-hue-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
                 updateHueSlider(values[0], true);
-            }, onUpdate: function (values) {
+            }, onUpdate: (values) => {
                 updateHueSlider(values[0], false);
             }, min: 0, max: 359 }),
-        showAlpha && (React.createElement(Slider, { minLabel: '', maxLabel: '', values: [alphaValue], className: 'iui-opacity-slider', trackDisplayMode: 'none', tooltipProps: function () { return ({ visible: false }); }, onChange: function (values) {
+        showAlpha && (React.createElement(Slider, { minLabel: '', maxLabel: '', values: [alphaValue], className: 'iui-opacity-slider', trackDisplayMode: 'none', tooltipProps: () => ({ visible: false }), onChange: (values) => {
                 updateOpacitySlider(values[0], true);
-            }, onUpdate: function (values) {
+            }, onUpdate: (values) => {
                 updateOpacitySlider(values[0], false);
             }, min: 0, max: 1, step: 0.01, style: {
                 '--iui-color-picker-selected-color': hueColorString,