@itwin/itwinui-react 2.10.0 → 2.11.0

package/cjs/core/Buttons/index.js

@@ -5,13 +5,13 @@ exports.SplitButton = exports.IconButton = exports.IdeasButton = exports.Dropdow
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Button_1 = require("./Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
-var DropdownButton_1 = require("./DropdownButton");
-Object.defineProperty(exports, "DropdownButton", { enumerable: true, get: function () { return DropdownButton_1.DropdownButton; } });
-var IdeasButton_1 = require("./IdeasButton");
-Object.defineProperty(exports, "IdeasButton", { enumerable: true, get: function () { return IdeasButton_1.IdeasButton; } });
-var IconButton_1 = require("./IconButton");
-Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
-var SplitButton_1 = require("./SplitButton");
-Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return SplitButton_1.SplitButton; } });
+var index_js_1 = require("./Button/index.js");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return index_js_1.Button; } });
+var index_js_2 = require("./DropdownButton/index.js");
+Object.defineProperty(exports, "DropdownButton", { enumerable: true, get: function () { return index_js_2.DropdownButton; } });
+var index_js_3 = require("./IdeasButton/index.js");
+Object.defineProperty(exports, "IdeasButton", { enumerable: true, get: function () { return index_js_3.IdeasButton; } });
+var index_js_4 = require("./IconButton/index.js");
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return index_js_4.IconButton; } });
+var index_js_5 = require("./SplitButton/index.js");
+Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return index_js_5.SplitButton; } });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/carousel.css';
 export declare type CarouselProps = {
     /**
@@ -50,11 +50,11 @@ export declare const Carousel: React.ForwardRefExoticComponent<{
         PreviousButton: React.ForwardRefExoticComponent<{
             isActive?: boolean | undefined;
             label?: React.ReactNode;
-        } & Omit<import("..").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+        } & Omit<import("../index.js").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
         NextButton: React.ForwardRefExoticComponent<{
             isActive?: boolean | undefined;
             label?: React.ReactNode;
-        } & Omit<import("..").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+        } & Omit<import("../index.js").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
     };
     DotsList: React.ForwardRefExoticComponent<{
         length?: number | undefined;

package/cjs/core/Carousel/Carousel.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,16 +31,16 @@ 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.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const utils_1 = require("../utils");
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/carousel.css");
-const CarouselContext_1 = require("./CarouselContext");
-const CarouselSlider_1 = require("./CarouselSlider");
-const CarouselSlide_1 = require("./CarouselSlide");
-const CarouselDotsList_1 = require("./CarouselDotsList");
-const CarouselDot_1 = require("./CarouselDot");
-const CarouselNavigation_1 = require("./CarouselNavigation");
+const CarouselContext_js_1 = require("./CarouselContext.js");
+const CarouselSlider_js_1 = require("./CarouselSlider.js");
+const CarouselSlide_js_1 = require("./CarouselSlide.js");
+const CarouselDotsList_js_1 = require("./CarouselDotsList.js");
+const CarouselDot_js_1 = require("./CarouselDot.js");
+const CarouselNavigation_js_1 = require("./CarouselNavigation.js");
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
  * located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
@@ -36,18 +59,18 @@ const CarouselNavigation_1 = require("./CarouselNavigation");
  *   <Carousel.Navigation />
  * </Carousel>
  */
-exports.Carousel = Object.assign(react_1.default.forwardRef((props, ref) => {
+exports.Carousel = Object.assign(React.forwardRef((props, ref) => {
     const { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, ...rest } = props;
     // Generate a stateful random id if not specified
-    const [id] = react_1.default.useState(() => { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : `iui-carousel-${(0, utils_1.getRandomValue)(10)}`; });
-    (0, utils_1.useTheme)();
-    const isManuallyUpdating = react_1.default.useRef(false);
-    const carouselRef = react_1.default.useRef(null);
-    const refs = (0, utils_1.useMergedRefs)(carouselRef, ref);
-    const [currentIndex, setCurrentIndex] = react_1.default.useState(userActiveIndex);
-    const scrollToSlide = react_1.default.useRef(() => { }); // stub function populated in CarouselSlider
-    const justMounted = react_1.default.useRef(true);
-    react_1.default.useEffect(() => {
+    const [id] = React.useState(() => { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : `iui-carousel-${(0, index_js_1.getRandomValue)(10)}`; });
+    (0, index_js_1.useTheme)();
+    const isManuallyUpdating = React.useRef(false);
+    const carouselRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(carouselRef, ref);
+    const [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
+    const scrollToSlide = React.useRef(() => { }); // stub function populated in CarouselSlider
+    const justMounted = React.useRef(true);
+    React.useEffect(() => {
         var _a;
         setCurrentIndex(userActiveIndex);
         scrollToSlide.current(userActiveIndex, {
@@ -60,8 +83,8 @@ exports.Carousel = Object.assign(react_1.default.forwardRef((props, ref) => {
         }
         justMounted.current = false;
     }, [userActiveIndex]);
-    const [slideCount, setSlideCount] = react_1.default.useState(0);
-    const [keysPressed, setKeysPressed] = react_1.default.useState({});
+    const [slideCount, setSlideCount] = React.useState(0);
+    const [keysPressed, setKeysPressed] = React.useState({});
     const handleKeyDown = (event) => {
         if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
             return;
@@ -89,13 +112,13 @@ exports.Carousel = Object.assign(react_1.default.forwardRef((props, ref) => {
             }
         }
     };
-    const userOnSlideChange = react_1.default.useRef(onSlideChange);
-    react_1.default.useEffect(() => {
+    const userOnSlideChange = React.useRef(onSlideChange);
+    React.useEffect(() => {
         var _a;
         (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
     }, [currentIndex]);
-    return (react_1.default.createElement("section", { "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: (0, classnames_1.default)('iui-carousel', className), ...rest, id: id },
-        react_1.default.createElement(CarouselContext_1.CarouselContext.Provider, { value: {
+    return (React.createElement("section", { "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: (0, classnames_1.default)('iui-carousel', className), ...rest, id: id },
+        React.createElement(CarouselContext_js_1.CarouselContext.Provider, { value: {
                 currentIndex,
                 setCurrentIndex,
                 slideCount,
@@ -106,10 +129,10 @@ exports.Carousel = Object.assign(react_1.default.forwardRef((props, ref) => {
                 scrollToSlide,
             } }, children)));
 }), {
-    Slider: CarouselSlider_1.CarouselSlider,
-    Slide: CarouselSlide_1.CarouselSlide,
-    Navigation: CarouselNavigation_1.CarouselNavigation,
-    DotsList: CarouselDotsList_1.CarouselDotsList,
-    Dot: CarouselDot_1.CarouselDot,
+    Slider: CarouselSlider_js_1.CarouselSlider,
+    Slide: CarouselSlide_js_1.CarouselSlide,
+    Navigation: CarouselNavigation_js_1.CarouselNavigation,
+    DotsList: CarouselDotsList_js_1.CarouselDotsList,
+    Dot: CarouselDot_js_1.CarouselDot,
 });
 exports.default = exports.Carousel;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const CarouselContext: React.Context<{
     /**
      * Stateful index of currently active slide.

package/cjs/core/Carousel/CarouselContext.js

@@ -1,6 +1,26 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselContext = void 0;
@@ -8,5 +28,5 @@ exports.CarouselContext = 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"));
-exports.CarouselContext = react_1.default.createContext(undefined);
+const React = __importStar(require("react"));
+exports.CarouselContext = React.createContext(undefined);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
  * It should be used as a child of `CarouselDotsList`.

package/cjs/core/Carousel/CarouselDot.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,15 +31,15 @@ exports.CarouselDot = 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"));
 /**
  * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
  * It should be used as a child of `CarouselDotsList`.
  */
-exports.CarouselDot = react_1.default.forwardRef((props, ref) => {
+exports.CarouselDot = React.forwardRef((props, ref) => {
     const { isActive, isSmaller, isSmall, className, ...rest } = props;
-    return (react_1.default.createElement("button", { type: 'button', role: 'tab', tabIndex: -1, className: (0, classnames_1.default)('iui-carousel-navigation-dot', {
+    return (React.createElement("button", { type: 'button', role: 'tab', tabIndex: -1, className: (0, classnames_1.default)('iui-carousel-navigation-dot', {
             'iui-active': isActive,
             'iui-first': isSmaller,
             'iui-second': isSmall,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/carousel.css';
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to

package/cjs/core/Carousel/CarouselDotsList.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,11 +31,11 @@ exports.CarouselDotsList = 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 CarouselDot_1 = require("./CarouselDot");
+const CarouselContext_js_1 = require("./CarouselContext.js");
+const index_js_1 = require("../utils/index.js");
+const CarouselDot_js_1 = require("./CarouselDot.js");
 require("@itwin/itwinui-css/css/carousel.css");
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
@@ -36,26 +59,26 @@ require("@itwin/itwinui-css/css/carousel.css");
  *   onSlideChange={(i) => setCurrent(i)}
  * />
  */
-exports.CarouselDotsList = react_1.default.forwardRef((props, ref) => {
+exports.CarouselDotsList = React.forwardRef((props, ref) => {
     var _a, _b, _c;
     const { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const context = react_1.default.useContext(CarouselContext_1.CarouselContext);
-    const slideCount = (_a = length !== null && length !== void 0 ? length : context === null || context === void 0 ? void 0 : context.slideCount) !== null && _a !== void 0 ? _a : react_1.default.Children.count(children);
+    (0, index_js_1.useTheme)();
+    const context = React.useContext(CarouselContext_js_1.CarouselContext);
+    const slideCount = (_a = length !== null && length !== void 0 ? length : context === null || context === void 0 ? void 0 : context.slideCount) !== null && _a !== void 0 ? _a : React.Children.count(children);
     const currentIndex = (_b = userCurrentIndex !== null && userCurrentIndex !== void 0 ? userCurrentIndex : context === null || context === void 0 ? void 0 : context.currentIndex) !== null && _b !== void 0 ? _b : 0;
     const idPrefix = (_c = props.id) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.idPrefix;
-    const handleSlideChange = react_1.default.useCallback((index) => {
+    const handleSlideChange = React.useCallback((index) => {
         if (context) {
             context.setCurrentIndex(index);
             context.scrollToSlide.current(index);
         }
         onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
     }, [context, onSlideChange]);
-    const justMounted = react_1.default.useRef(true);
-    const [visibleCount, setVisibleCount] = react_1.default.useState(slideCount);
-    const listRef = react_1.default.useRef(null);
-    const [width, setWidth] = react_1.default.useState();
-    const [resizeRef, resizeObserver] = (0, utils_1.useResizeObserver)(({ width }) => {
+    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_js_1.useResizeObserver)(({ width }) => {
         if (!listRef.current) {
             return;
         }
@@ -63,11 +86,11 @@ exports.CarouselDotsList = react_1.default.forwardRef((props, ref) => {
         const dotWidth = listRef.current.children[0].offsetWidth;
         setVisibleCount(Math.floor(width / dotWidth));
     });
-    react_1.default.useEffect(() => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(), [resizeObserver]);
-    const refs = (0, utils_1.useMergedRefs)(ref, resizeRef, listRef);
-    const firstVisibleDotIndex = react_1.default.useMemo(() => (0, utils_1.getBoundedValue)(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [currentIndex, slideCount, visibleCount]);
-    const lastVisibleDotIndex = react_1.default.useMemo(() => (0, utils_1.getBoundedValue)(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1), [currentIndex, slideCount, visibleCount]);
-    const dots = react_1.default.useMemo(() => {
+    React.useEffect(() => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(), [resizeObserver]);
+    const refs = (0, index_js_1.useMergedRefs)(ref, resizeRef, listRef);
+    const firstVisibleDotIndex = React.useMemo(() => (0, index_js_1.getBoundedValue)(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [currentIndex, slideCount, visibleCount]);
+    const lastVisibleDotIndex = React.useMemo(() => (0, index_js_1.getBoundedValue)(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1), [currentIndex, slideCount, visibleCount]);
+    const dots = React.useMemo(() => {
         return Array(slideCount)
             .fill(null)
             .map((_, index) => {
@@ -76,7 +99,7 @@ exports.CarouselDotsList = react_1.default.forwardRef((props, ref) => {
             const isSecondSmallDot = (index === firstVisibleDotIndex + 1 && index !== 1) ||
                 (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
             const isClipped = index < firstVisibleDotIndex || index > lastVisibleDotIndex;
-            return (react_1.default.createElement(CarouselDot_1.CarouselDot, { key: index, "aria-label": `Slide ${index}`, isActive: index === currentIndex, onClick: () => handleSlideChange(index), isSmall: isSecondSmallDot, isSmaller: isFirstSmallDot || isClipped, id: idPrefix && `${idPrefix}--dot-${index}`, "aria-controls": idPrefix && `${idPrefix}--slide-${index}` }));
+            return (React.createElement(CarouselDot_js_1.CarouselDot, { key: index, "aria-label": `Slide ${index}`, isActive: index === currentIndex, onClick: () => handleSlideChange(index), isSmall: isSecondSmallDot, isSmaller: isFirstSmallDot || isClipped, id: idPrefix && `${idPrefix}--dot-${index}`, "aria-controls": idPrefix && `${idPrefix}--slide-${index}` }));
         });
     }, [
         slideCount,
@@ -86,13 +109,13 @@ exports.CarouselDotsList = react_1.default.forwardRef((props, ref) => {
         idPrefix,
         handleSlideChange,
     ]);
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         var _a, _b, _c;
         const firstDot = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children[firstVisibleDotIndex];
         if (!listRef.current || !firstDot) {
             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;
         listRef.current.scrollTo({
             left: firstDot.offsetLeft - listRef.current.offsetLeft,
             behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
@@ -101,6 +124,6 @@ exports.CarouselDotsList = react_1.default.forwardRef((props, ref) => {
             justMounted.current = false;
         }
     }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children !== null && children !== void 0 ? children : dots)));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: (0, classnames_1.default)('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children !== null && children !== void 0 ? children : dots)));
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`
  * shown on the left and right, and the `CarouselDotsList` component shown in the middle.
@@ -9,9 +9,9 @@ export declare const CarouselNavigation: React.ForwardRefExoticComponent<Pick<Re
     PreviousButton: React.ForwardRefExoticComponent<{
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+    } & Omit<import("../Buttons/index.js").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
     NextButton: React.ForwardRefExoticComponent<{
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+    } & Omit<import("../Buttons/index.js").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
 };

package/cjs/core/Carousel/CarouselNavigation.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,43 +31,43 @@ exports.CarouselNavigation = 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 Buttons_1 = require("../Buttons");
-const CarouselDotsList_1 = require("./CarouselDotsList");
-const utils_1 = require("../utils");
+const CarouselContext_js_1 = require("./CarouselContext.js");
+const index_js_1 = require("../Buttons/index.js");
+const CarouselDotsList_js_1 = require("./CarouselDotsList.js");
+const index_js_2 = require("../utils/index.js");
 /** Button for switching to previous slide */
-const PreviousButton = react_1.default.forwardRef((props, ref) => {
-    const context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+const PreviousButton = React.forwardRef((props, ref) => {
+    const context = React.useContext(CarouselContext_js_1.CarouselContext);
     if (!context) {
         throw new Error('CarouselNavigation should be used inside Carousel');
     }
     const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
-    return (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref, ...props, onClick: (e) => {
+    return (React.createElement(index_js_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowLeft'] || undefined, ref: ref, ...props, onClick: (e) => {
             var _a;
             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_1.default.createElement(utils_1.SvgChevronLeft, null)));
+        React.createElement(index_js_2.SvgChevronLeft, null)));
 });
 /** Button for switching to next slide */
-const NextButton = react_1.default.forwardRef((props, ref) => {
-    const context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+const NextButton = React.forwardRef((props, ref) => {
+    const context = React.useContext(CarouselContext_js_1.CarouselContext);
     if (!context) {
         throw new Error('CarouselNavigation should be used inside Carousel');
     }
     const { slideCount, currentIndex, setCurrentIndex, keysPressed, scrollToSlide, } = context;
-    return (react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref, ...props, onClick: (e) => {
+    return (React.createElement(index_js_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "data-pressed": keysPressed['ArrowRight'] || undefined, ref: ref, ...props, onClick: (e) => {
             var _a;
             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_1.default.createElement(utils_1.SvgChevronRight, null)));
+        React.createElement(index_js_2.SvgChevronRight, null)));
 });
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`
@@ -52,12 +75,12 @@ const NextButton = react_1.default.forwardRef((props, ref) => {
  *
  * `children` can be specified to override what is shown in this navigation section.
  */
-exports.CarouselNavigation = Object.assign(react_1.default.forwardRef((props, ref) => {
+exports.CarouselNavigation = Object.assign(React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
-    return (react_1.default.createElement("nav", { className: (0, classnames_1.default)('iui-carousel-navigation', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: 'iui-carousel-navigation-left' },
-            react_1.default.createElement(PreviousButton, null)),
-        react_1.default.createElement(CarouselDotsList_1.CarouselDotsList, null),
-        react_1.default.createElement("div", { className: 'iui-carousel-navigation-right' },
-            react_1.default.createElement(NextButton, null))))));
+    return (React.createElement("nav", { className: (0, classnames_1.default)('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_js_1.CarouselDotsList, null),
+        React.createElement("div", { className: 'iui-carousel-navigation-right' },
+            React.createElement(NextButton, null))))));
 }), { PreviousButton, NextButton });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
  *

package/cjs/core/Carousel/CarouselSlide.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,30 +31,30 @@ exports.CarouselSlide = 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 CarouselContext_1 = require("./CarouselContext");
+const index_js_1 = require("../utils/index.js");
+const CarouselContext_js_1 = require("./CarouselContext.js");
 /**
  * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
  *
  * It is recommended that the slide content bring its own dimensions (esp. height) and that
  * the dimensions should be the same for all slides.
  */
-exports.CarouselSlide = react_1.default.forwardRef((props, ref) => {
+exports.CarouselSlide = React.forwardRef((props, ref) => {
     const { index, className, children, ...rest } = props;
-    const context = react_1.default.useContext(CarouselContext_1.CarouselContext);
+    const context = React.useContext(CarouselContext_js_1.CarouselContext);
     if (!context || index == null) {
         throw new Error('CarouselSlide must be used within Carousel');
     }
     const { isManuallyUpdating, setCurrentIndex } = context;
-    const updateActiveIndexOnScroll = react_1.default.useCallback(() => {
+    const updateActiveIndexOnScroll = React.useCallback(() => {
         // only update index if scroll was triggered by browser
         if (!isManuallyUpdating.current) {
             setCurrentIndex(index);
         }
     }, [index, isManuallyUpdating, setCurrentIndex]);
-    const intersectionRef = (0, utils_1.useIntersection)(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
-    const refs = (0, utils_1.useMergedRefs)(intersectionRef, ref);
-    return (react_1.default.createElement("li", { className: (0, classnames_1.default)('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs, ...rest }, children));
+    const intersectionRef = (0, index_js_1.useIntersection)(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
+    const refs = (0, index_js_1.useMergedRefs)(intersectionRef, ref);
+    return (React.createElement("li", { className: (0, classnames_1.default)('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs, ...rest }, children));
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */