@itwin/itwinui-react 3.11.3 → 3.12.0

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

@@ -10,126 +10,20 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-        isActive?: boolean | undefined;
+        isActive?: boolean;
         label?: React.ReactNode;
-        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-        }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        }> & {
-            content: React.ReactNode;
-            children?: React.ReactNode;
-        } & import("../../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        } & {
-            as?: "div" | undefined;
-        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
-        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
+        iconProps?: React.ComponentProps<"span">;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "stretched" | "isActive" | "iconProps"> & {
-        isActive?: boolean | undefined;
+        isActive?: boolean;
         label?: React.ReactNode;
-        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-        }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        }> & {
-            content: React.ReactNode;
-            children?: React.ReactNode;
-        } & import("../../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        } & {
-            as?: "div" | undefined;
-        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
-        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
+        iconProps?: React.ComponentProps<"span">;
     } & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;

package/cjs/core/Carousel/CarouselNavigation.js

@@ -1,88 +1,94 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-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 };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const CarouselContext_js_1 = require("./CarouselContext.js");
-const IconButton_js_1 = require("../Buttons/IconButton.js");
-const CarouselDotsList_js_1 = require("./CarouselDotsList.js");
-const index_js_1 = require("../../utils/index.js");
-const CarouselNavigationComponent = React.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-carousel-navigation', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
-        React.createElement(index_js_1.Box, { className: 'iui-carousel-navigation-left' },
-            React.createElement(PreviousButton, null)),
-        React.createElement(CarouselDotsList_js_1.CarouselDotsList, null),
-        React.createElement(index_js_1.Box, { className: 'iui-carousel-navigation-right' },
-            React.createElement(NextButton, null))))));
+Object.defineProperty(exports, 'CarouselNavigation', {
+  enumerable: true,
+  get: function () {
+    return CarouselNavigation;
+  },
 });
-/** Button for switching to previous slide */
-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, scrollToSlide } = context;
-    return (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "aria-label": 'Previous', ref: ref, ...props, onClick: (e) => {
-            const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-            setCurrentIndex(prevIndex);
-            scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
-            props?.onClick?.(e);
-        } },
-        React.createElement(index_js_1.SvgChevronLeft, null)));
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _CarouselContext = require('./CarouselContext.js');
+const _IconButton = require('../Buttons/IconButton.js');
+const _CarouselDotsList = require('./CarouselDotsList.js');
+const _index = require('../../utils/index.js');
+const CarouselNavigationComponent = _react.forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)('iui-carousel-navigation', className),
+    ref: ref,
+    ...rest,
+    children:
+      children ??
+      (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+          (0, _jsxruntime.jsx)(_index.Box, {
+            className: 'iui-carousel-navigation-left',
+            children: (0, _jsxruntime.jsx)(PreviousButton, {}),
+          }),
+          (0, _jsxruntime.jsx)(_CarouselDotsList.CarouselDotsList, {}),
+          (0, _jsxruntime.jsx)(_index.Box, {
+            className: 'iui-carousel-navigation-right',
+            children: (0, _jsxruntime.jsx)(NextButton, {}),
+          }),
+        ],
+      }),
+  });
 });
-/** Button for switching to next slide */
-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, scrollToSlide } = context;
-    return (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "aria-label": 'Next', ref: ref, ...props, onClick: (e) => {
-            const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-            setCurrentIndex(nextIndex);
-            scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
-            props?.onClick?.(e);
-        } },
-        React.createElement(index_js_1.SvgChevronRight, null)));
+const PreviousButton = _react.forwardRef((props, ref) => {
+  const context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context) {
+    throw new Error('CarouselNavigation should be used inside Carousel');
+  }
+  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+  return (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+    styleType: 'borderless',
+    size: 'small',
+    tabIndex: -1,
+    'aria-label': 'Previous',
+    ref: ref,
+    ...props,
+    onClick: (e) => {
+      const prevIndex = (slideCount + currentIndex - 1) % slideCount;
+      setCurrentIndex(prevIndex);
+      scrollToSlide.current(prevIndex, {
+        instant: e.detail > 3,
+      });
+      props?.onClick?.(e);
+    },
+    children: (0, _jsxruntime.jsx)(_index.SvgChevronLeft, {}),
+  });
 });
-/**
- * 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.
- *
- * `children` can be specified to override what is shown in this navigation section.
- */
-exports.CarouselNavigation = Object.assign(CarouselNavigationComponent, {
-    PreviousButton,
-    NextButton,
+const NextButton = _react.forwardRef((props, ref) => {
+  const context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context) {
+    throw new Error('CarouselNavigation should be used inside Carousel');
+  }
+  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+  return (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+    styleType: 'borderless',
+    size: 'small',
+    tabIndex: -1,
+    'aria-label': 'Next',
+    ref: ref,
+    ...props,
+    onClick: (e) => {
+      const nextIndex = (slideCount + currentIndex + 1) % slideCount;
+      setCurrentIndex(nextIndex);
+      scrollToSlide.current(nextIndex, {
+        instant: e.detail > 3,
+      });
+      props?.onClick?.(e);
+    },
+    children: (0, _jsxruntime.jsx)(_index.SvgChevronRight, {}),
+  });
+});
+const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
+  PreviousButton,
+  NextButton,
 });

package/cjs/core/Carousel/CarouselSlide.js

@@ -1,65 +1,53 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'CarouselSlide', {
+  enumerable: true,
+  get: function () {
+    return CarouselSlide;
+  },
 });
-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 };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-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.forwardRef((props, ref) => {
-    const { index, className, children, ...rest } = props;
-    const context = React.useContext(CarouselContext_js_1.CarouselContext);
-    if (!context || index == null) {
-        throw new Error('CarouselSlide must be used within Carousel');
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _CarouselContext = require('./CarouselContext.js');
+const CarouselSlide = _react.forwardRef((props, ref) => {
+  const { index, className, children, ...rest } = props;
+  const context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context || index == null) {
+    throw new Error('CarouselSlide must be used within Carousel');
+  }
+  const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
+  const updateActiveIndexOnScroll = _react.useCallback(() => {
+    if (!isManuallyUpdating.current) {
+      setCurrentIndex(index);
     }
-    const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
-    const updateActiveIndexOnScroll = React.useCallback(() => {
-        // only update index if scroll was triggered by browser
-        if (!isManuallyUpdating.current) {
-            setCurrentIndex(index);
-        }
-    }, [index, isManuallyUpdating, setCurrentIndex]);
-    const intersectionRef = (0, index_js_1.useIntersection)(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
-    const refs = (0, index_js_1.useMergedRefs)(intersectionRef, ref);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', tabIndex: index === currentIndex ? 0 : undefined, ref: refs, inert: index !== currentIndex ? '' : undefined, ...rest, onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, (event) => {
-            // prevent default browser scrolling on arrow keys because focus will get lost when slide switches
-            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-                event.preventDefault();
-            }
-        }) }, children));
+  }, [index, isManuallyUpdating, setCurrentIndex]);
+  const intersectionRef = (0, _index.useIntersection)(
+    updateActiveIndexOnScroll,
+    {
+      threshold: 0.5,
+    },
+    false,
+  );
+  const refs = (0, _index.useMergedRefs)(intersectionRef, ref);
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)('iui-carousel-slider-item', className),
+    role: 'tabpanel',
+    'aria-roledescription': 'slide',
+    tabIndex: index === currentIndex ? 0 : undefined,
+    ref: refs,
+    inert: index !== currentIndex ? '' : undefined,
+    ...rest,
+    onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, (event) => {
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        event.preventDefault();
+      }
+    }),
+    children: children,
+  });
 });

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

@@ -2,4 +2,4 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
-export declare const CarouselSlider: PolymorphicForwardRefComponent<"div", {}>;
+export declare const CarouselSlider: PolymorphicForwardRefComponent<"div">;

package/cjs/core/Carousel/CarouselSlider.js

@@ -1,83 +1,75 @@
-"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;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'CarouselSlider', {
+  enumerable: true,
+  get: function () {
+    return CarouselSlider;
+  },
 });
-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 };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-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.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const context = React.useContext(CarouselContext_js_1.CarouselContext);
-    if (!context) {
-        throw new Error('CarouselSlider must be used within Carousel');
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _CarouselContext = require('./CarouselContext.js');
+const _index = require('../../utils/index.js');
+const CarouselSlider = _react.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  const context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context) {
+    throw new Error('CarouselSlider must be used within Carousel');
+  }
+  const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } =
+    context;
+  const items = _react.useMemo(
+    () =>
+      _react.Children.map(children, (child, index) =>
+        _react.isValidElement(child)
+          ? _react.cloneElement(child, {
+              id: `${idPrefix}--slide-${index}`,
+              'aria-labelledby': `${idPrefix}--dot-${index}`,
+              index,
+            })
+          : child,
+      ) ?? [],
+    [children, idPrefix],
+  );
+  (0, _index.useLayoutEffect)(() => {
+    setSlideCount(items.length);
+  }, [items.length, setSlideCount]);
+  const sliderRef = _react.useRef(null);
+  const refs = (0, _index.useMergedRefs)(sliderRef, ref);
+  scrollToSlide.current = (slideIndex, { instant } = {}) => {
+    isManuallyUpdating.current = true;
+    const slideToShow = sliderRef.current?.children.item(slideIndex);
+    if (!sliderRef.current || !slideToShow) {
+      return;
+    }
+    const motionOk = (0, _index.getWindow)()?.matchMedia(
+      '(prefers-reduced-motion: no-preference)',
+    )?.matches;
+    sliderRef.current.scrollTo({
+      left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
+      behavior: instant || !motionOk ? 'instant' : 'smooth',
+    });
+  };
+  const scrollTimeout = _react.useRef();
+  const handleOnScroll = _react.useCallback(() => {
+    if (scrollTimeout.current) {
+      (0, _index.getWindow)()?.clearTimeout(scrollTimeout.current);
     }
-    const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
-    const items = React.useMemo(() => React.Children.map(children, (child, index) => React.isValidElement(child)
-        ? React.cloneElement(child, {
-            id: `${idPrefix}--slide-${index}`,
-            'aria-labelledby': `${idPrefix}--dot-${index}`,
-            index,
-        })
-        : child) ?? [], [children, idPrefix]);
-    (0, index_js_1.useLayoutEffect)(() => {
-        setSlideCount(items.length);
-    }, [items.length, setSlideCount]);
-    const sliderRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(sliderRef, ref);
-    scrollToSlide.current = (slideIndex, { instant } = {}) => {
-        isManuallyUpdating.current = true; // start manual update
-        const slideToShow = sliderRef.current?.children.item(slideIndex);
-        if (!sliderRef.current || !slideToShow) {
-            return;
-        }
-        const motionOk = (0, index_js_1.getWindow)()?.matchMedia('(prefers-reduced-motion: no-preference)')?.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.useRef();
-    // reset isManuallyUpdating.current to false after the last scroll event
-    const handleOnScroll = React.useCallback(() => {
-        if (scrollTimeout.current) {
-            (0, index_js_1.getWindow)()?.clearTimeout(scrollTimeout.current);
-        }
-        scrollTimeout.current = (0, index_js_1.getWindow)()?.setTimeout(() => {
-            isManuallyUpdating.current = false;
-        }, 100);
-    }, [isManuallyUpdating]);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, tabIndex: -1, ...rest }, items));
+    scrollTimeout.current = (0, _index.getWindow)()?.setTimeout(() => {
+      isManuallyUpdating.current = false;
+    }, 100);
+  }, [isManuallyUpdating]);
+  return (0, _jsxruntime.jsx)(_index.Box, {
+    className: (0, _classnames.default)('iui-carousel-slider', className),
+    ref: refs,
+    onScroll: handleOnScroll,
+    tabIndex: -1,
+    ...rest,
+    children: items,
+  });
 });