@itwin/itwinui-react 2.11.5 → 3.0.0-dev.1

package/esm/core/Buttons/IdeasButton/IdeasButton.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-export declare type IdeasButtonProps = {
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+declare type IdeasButtonProps = {
     /**
      * On click handler.
      */
@@ -15,5 +15,5 @@ export declare type IdeasButtonProps = {
  * @example
  * <IdeasButton />
  */
-export declare const IdeasButton: React.ForwardRefExoticComponent<IdeasButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const IdeasButton: PolymorphicForwardRefComponent<"button", IdeasButtonProps>;
 export default IdeasButton;

package/esm/core/Buttons/IdeasButton/IdeasButton.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { SvgSmileyHappy, useTheme } from '../../utils/index.js';
+import { SvgSmileyHappy } from '../../utils/index.js';
 import { Button } from '../Button/index.js';
 /**
  * Ideas button
@@ -12,7 +12,6 @@ import { Button } from '../Button/index.js';
  */
 export const IdeasButton = React.forwardRef((props, ref) => {
     const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
-    useTheme();
     return (React.createElement(Button, { ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
 });
 export default IdeasButton;

package/esm/core/Buttons/IdeasButton/index.d.ts

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

package/esm/core/Buttons/SplitButton/SplitButton.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Button/index.js';
+import type { ButtonProps } from '../Button/Button.js';
 import type { Placement } from 'tippy.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.
@@ -20,7 +19,6 @@ export declare type SplitButtonProps = ButtonProps & {
      */
     children: React.ReactNode;
 };
-declare type SplitButtonComponent = PolymorphicForwardRefComponent<'button', SplitButtonProps>;
 /**
  * Split button component with a DropdownMenu.
  *
@@ -35,5 +33,5 @@ declare type SplitButtonComponent = PolymorphicForwardRefComponent<'button', Spl
  * <SplitButton onClick={onClick} menuItems={menuItems}>Default</SplitButton>
  * <SplitButton onClick={onClick} menuItems={menuItems} styleType='high-visibility'>High visibility</SplitButton>
  */
-export declare const SplitButton: SplitButtonComponent;
+export declare const SplitButton: PolymorphicForwardRefComponent<"button", SplitButtonProps>;
 export default SplitButton;

package/esm/core/Buttons/SplitButton/SplitButton.js

@@ -7,8 +7,7 @@ import * as React from 'react';
 import { Button } from '../Button/index.js';
 import { IconButton } from '../IconButton/index.js';
 import { DropdownMenu } from '../../DropdownMenu/index.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall, useTheme, } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
+import { Box, SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
 /**
  * Split button component with a DropdownMenu.
  *
@@ -25,7 +24,6 @@ import '@itwin/itwinui-css/css/button.css';
  */
 export const SplitButton = React.forwardRef((props, forwardedRef) => {
     const { onClick, menuItems, className, menuPlacement = 'bottom-end', styleType = 'default', size, children, style, title, ...rest } = props;
-    useTheme();
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [menuWidth, setMenuWidth] = React.useState(0);
     const ref = React.useRef(null);
@@ -34,7 +32,7 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
             setMenuWidth(ref.current.offsetWidth);
         }
     }, [children, size]);
-    return (React.createElement("span", { className: cx(className, 'iui-button-split', {
+    return (React.createElement(Box, { className: cx(className, 'iui-button-split', {
             'iui-disabled': props.disabled,
         }), style: style, title: title, ref: ref },
         React.createElement(Button, { styleType: styleType, size: size, onClick: onClick, ref: forwardedRef, ...rest }, children),

package/esm/core/Buttons/SplitButton/index.d.ts

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

package/esm/core/Buttons/index.d.ts

@@ -1,10 +1,5 @@
 export { Button } from './Button/index.js';
-export type { ButtonProps } from './Button/index.js';
 export { DropdownButton } from './DropdownButton/index.js';
-export type { DropdownButtonProps } from './DropdownButton/index.js';
 export { IdeasButton } from './IdeasButton/index.js';
-export type { IconButtonProps } from './IconButton/index.js';
 export { IconButton } from './IconButton/index.js';
-export type { IdeasButtonProps } from './IdeasButton/index.js';
 export { SplitButton } from './SplitButton/index.js';
-export type { SplitButtonProps } from './SplitButton/index.js';

package/esm/core/Carousel/Carousel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/carousel.css';
-export declare type CarouselProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type CarouselProps = {
     /**
      * Index of the currently shown slide.
      * Can be used to set the default index or control the active slide programmatically.
@@ -11,7 +11,7 @@ export declare type CarouselProps = {
      * Callback fired when the current slide changes.
      */
     onSlideChange?: (index: number) => void;
-} & React.ComponentPropsWithoutRef<'div'>;
+};
 /**
  * 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.
@@ -30,41 +30,38 @@ export declare type CarouselProps = {
  *   <Carousel.Navigation />
  * </Carousel>
  */
-export declare const Carousel: React.ForwardRefExoticComponent<{
-    /**
-     * Index of the currently shown slide.
-     * Can be used to set the default index or control the active slide programmatically.
-     * @default 0
-     */
-    activeSlideIndex?: number | undefined;
-    /**
-     * Callback fired when the current slide changes.
-     */
-    onSlideChange?: ((index: number) => void) | undefined;
-} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLElement>> & {
-    Slider: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "key" | keyof React.OlHTMLAttributes<HTMLOListElement>> & React.RefAttributes<HTMLOListElement>>;
-    Slide: React.ForwardRefExoticComponent<{
+export declare const Carousel: PolymorphicForwardRefComponent<"section", CarouselProps> & {
+    Slider: PolymorphicForwardRefComponent<"ol", {}>;
+    Slide: PolymorphicForwardRefComponent<"li", {
         index?: number | undefined;
-    } & Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & React.RefAttributes<HTMLLIElement>>;
-    Navigation: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>> & {
-        PreviousButton: React.ForwardRefExoticComponent<{
+    }>;
+    Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
+        PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+            ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+        }, "label" | "as" | "size" | "isActive" | "styleType"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
-        } & Omit<import("../index.js").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
-        NextButton: React.ForwardRefExoticComponent<{
+        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+            as?: "button" | undefined;
+        }>;
+        NextButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+            ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+        }, "label" | "as" | "size" | "isActive" | "styleType"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
-        } & Omit<import("../index.js").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+            as?: "button" | undefined;
+        }>;
     };
-    DotsList: React.ForwardRefExoticComponent<{
+    DotsList: PolymorphicForwardRefComponent<"div", {
         length?: number | undefined;
         currentIndex?: number | undefined;
         onSlideChange?: ((index: number) => void) | undefined;
-    } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
-    Dot: React.ForwardRefExoticComponent<{
+    }>;
+    Dot: PolymorphicForwardRefComponent<"button", {
         isActive?: boolean | undefined;
         isSmall?: boolean | undefined;
         isSmaller?: boolean | undefined;
-    } & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
+    }>;
 };
 export default Carousel;

package/esm/core/Carousel/Carousel.js

@@ -4,37 +4,17 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { getRandomValue, useMergedRefs, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
+import { getRandomValue, useMergedRefs, Box } from '../utils/index.js';
 import { CarouselContext } from './CarouselContext.js';
 import { CarouselSlider } from './CarouselSlider.js';
 import { CarouselSlide } from './CarouselSlide.js';
 import { CarouselDotsList } from './CarouselDotsList.js';
 import { CarouselDot } from './CarouselDot.js';
 import { CarouselNavigation } from './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.
- *
- * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
- *
- * This component uses a composition approach so it should be used with the provided subcomponents.
- *
- * @example
- * <Carousel>
- *   <Carousel.Slider>
- *     <Carousel.Slide>...</Carousel.Slide>
- *     <Carousel.Slide>...</Carousel.Slide>
- *     <Carousel.Slide>...</Carousel.Slide>
- *   </Carousel.Slider>
- *   <Carousel.Navigation />
- * </Carousel>
- */
-export const Carousel = Object.assign(React.forwardRef((props, ref) => {
+const CarouselComponent = React.forwardRef((props, ref) => {
     const { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, ...rest } = props;
     // Generate a stateful random id if not specified
     const [id] = React.useState(() => { var _a; return (_a = props.id) !== null && _a !== void 0 ? _a : `iui-carousel-${getRandomValue(10)}`; });
-    useTheme();
     const isManuallyUpdating = React.useRef(false);
     const carouselRef = React.useRef(null);
     const refs = useMergedRefs(carouselRef, ref);
@@ -88,7 +68,7 @@ export const Carousel = Object.assign(React.forwardRef((props, ref) => {
         var _a;
         (_a = userOnSlideChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnSlideChange, currentIndex);
     }, [currentIndex]);
-    return (React.createElement("section", { "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: cx('iui-carousel', className), ...rest, id: id },
+    return (React.createElement(Box, { as: 'section', "aria-roledescription": 'carousel', tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: refs, className: cx('iui-carousel', className), ...rest, id: id },
         React.createElement(CarouselContext.Provider, { value: {
                 currentIndex,
                 setCurrentIndex,
@@ -99,7 +79,26 @@ export const Carousel = Object.assign(React.forwardRef((props, ref) => {
                 isManuallyUpdating,
                 scrollToSlide,
             } }, children)));
-}), {
+});
+/**
+ * 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.
+ *
+ * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
+ *
+ * This component uses a composition approach so it should be used with the provided subcomponents.
+ *
+ * @example
+ * <Carousel>
+ *   <Carousel.Slider>
+ *     <Carousel.Slide>...</Carousel.Slide>
+ *     <Carousel.Slide>...</Carousel.Slide>
+ *     <Carousel.Slide>...</Carousel.Slide>
+ *   </Carousel.Slider>
+ *   <Carousel.Navigation />
+ * </Carousel>
+ */
+export const Carousel = Object.assign(CarouselComponent, {
     Slider: CarouselSlider,
     Slide: CarouselSlide,
     Navigation: CarouselNavigation,

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

@@ -1,13 +1,15 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type CarouselDotProps = {
+    /** Is this dot currently active? */
+    isActive?: boolean;
+    /** Should be set to true for dots that are one spot from the edge of truncation. The dot size becomes small.  */
+    isSmall?: boolean;
+    /** Should be set to true for dots that are at the edge of truncation. The dot size becomes even smaller.  */
+    isSmaller?: boolean;
+};
 /**
  * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
  * It should be used as a child of `CarouselDotsList`.
  */
-export declare const CarouselDot: React.ForwardRefExoticComponent<{
-    /** Is this dot currently active? */
-    isActive?: boolean | undefined;
-    /** Should be set to true for dots that are one spot from the edge of truncation. The dot size becomes small.  */
-    isSmall?: boolean | undefined;
-    /** Should be set to true for dots that are at the edge of truncation. The dot size becomes even smaller.  */
-    isSmaller?: boolean | undefined;
-} & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CarouselDot: PolymorphicForwardRefComponent<"button", CarouselDotProps>;
+export {};

package/esm/core/Carousel/CarouselDot.js

@@ -4,13 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
+import { Box } from '../utils/index.js';
 /**
  * `CarouselDot` is the actual "dot" component used to activate a slide on clicking.
  * It should be used as a child of `CarouselDotsList`.
  */
 export const CarouselDot = React.forwardRef((props, ref) => {
     const { isActive, isSmaller, isSmall, className, ...rest } = props;
-    return (React.createElement("button", { type: 'button', role: 'tab', tabIndex: -1, className: cx('iui-carousel-navigation-dot', {
+    return (React.createElement(Box, { as: 'button', type: 'button', role: 'tab', tabIndex: -1, className: cx('iui-carousel-navigation-dot', {
             'iui-active': isActive,
             'iui-first': isSmaller,
             'iui-second': isSmall,

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

@@ -1,5 +1,12 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/carousel.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type CarouselDotsListProps = {
+    /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
+    length?: number;
+    /** Index of currently active dot. Will be inferred from Carousel context, or else default to 0. */
+    currentIndex?: number;
+    /** Callback fired when any of the dots are clicked. */
+    onSlideChange?: (index: number) => void;
+};
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
@@ -22,11 +29,5 @@ import '@itwin/itwinui-css/css/carousel.css';
  *   onSlideChange={(i) => setCurrent(i)}
  * />
  */
-export declare const CarouselDotsList: React.ForwardRefExoticComponent<{
-    /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
-    length?: number | undefined;
-    /** Index of currently active dot. Will be inferred from Carousel context, or else default to 0. */
-    currentIndex?: number | undefined;
-    /** Callback fired when any of the dots are clicked. */
-    onSlideChange?: ((index: number) => void) | undefined;
-} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const CarouselDotsList: PolymorphicForwardRefComponent<"div", CarouselDotsListProps>;
+export {};

package/esm/core/Carousel/CarouselDotsList.js

@@ -5,9 +5,8 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, useTheme, } from '../utils/index.js';
+import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, Box, } from '../utils/index.js';
 import { CarouselDot } from './CarouselDot.js';
-import '@itwin/itwinui-css/css/carousel.css';
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need
@@ -33,7 +32,6 @@ import '@itwin/itwinui-css/css/carousel.css';
 export const CarouselDotsList = React.forwardRef((props, ref) => {
     var _a, _b, _c;
     const { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
-    useTheme();
     const context = React.useContext(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;
@@ -96,5 +94,5 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
         }
     }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: cx('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children !== null && children !== void 0 ? children : dots)));
+        React.createElement(Box, { className: cx('iui-carousel-navigation-dots', className), role: 'tablist', "aria-label": 'Slides', ref: refs, ...rest }, children !== null && children !== void 0 ? children : dots)));
 });

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

@@ -1,17 +1,26 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * 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.
  */
-export declare const CarouselNavigation: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>> & {
-    PreviousButton: React.ForwardRefExoticComponent<{
+export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {}> & {
+    PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, "label" | "as" | "size" | "isActive" | "styleType"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/index.js").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
-    NextButton: React.ForwardRefExoticComponent<{
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        as?: "button" | undefined;
+    }>;
+    NextButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, "label" | "as" | "size" | "isActive" | "styleType"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/index.js").ButtonProps<"button">, "startIcon" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        as?: "button" | undefined;
+    }>;
 };

package/esm/core/Carousel/CarouselNavigation.js

@@ -7,7 +7,16 @@ import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
 import { IconButton } from '../Buttons/index.js';
 import { CarouselDotsList } from './CarouselDotsList.js';
-import { SvgChevronLeft, SvgChevronRight } from '../utils/index.js';
+import { Box, SvgChevronLeft, SvgChevronRight } from '../utils/index.js';
+const CarouselNavigationComponent = React.forwardRef((props, ref) => {
+    const { className, children, ...rest } = props;
+    return (React.createElement(Box, { as: 'nav', className: cx('iui-carousel-navigation', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+        React.createElement(Box, { className: 'iui-carousel-navigation-left' },
+            React.createElement(PreviousButton, null)),
+        React.createElement(CarouselDotsList, null),
+        React.createElement(Box, { className: 'iui-carousel-navigation-right' },
+            React.createElement(NextButton, null))))));
+});
 /** Button for switching to previous slide */
 const PreviousButton = React.forwardRef((props, ref) => {
     const context = React.useContext(CarouselContext);
@@ -46,12 +55,7 @@ const NextButton = React.forwardRef((props, ref) => {
  *
  * `children` can be specified to override what is shown in this navigation section.
  */
-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, NextButton });
+export const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
+    PreviousButton,
+    NextButton,
+});

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

@@ -1,14 +1,16 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type CarouselSlideProps = {
+    /**
+     * Index of the current slide.
+     * Does not need to be manually specified because it will be set in parent (`CarouselSlider`).
+     */
+    index?: number;
+};
 /**
  * `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.
  */
-export declare const CarouselSlide: React.ForwardRefExoticComponent<{
-    /**
-     * Index of the current slide.
-     * Does not need to be manually specified because it will be set in parent (`CarouselSlider`).
-     */
-    index?: number | undefined;
-} & Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & React.RefAttributes<HTMLLIElement>>;
+export declare const CarouselSlide: PolymorphicForwardRefComponent<"li", CarouselSlideProps>;
+export {};

package/esm/core/Carousel/CarouselSlide.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useIntersection, useMergedRefs } from '../utils/index.js';
+import { Box, useIntersection, useMergedRefs } from '../utils/index.js';
 import { CarouselContext } from './CarouselContext.js';
 /**
  * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
@@ -27,5 +27,5 @@ export const CarouselSlide = React.forwardRef((props, ref) => {
     }, [index, isManuallyUpdating, setCurrentIndex]);
     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));
+    return (React.createElement(Box, { as: 'li', className: cx('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', ref: refs, ...rest }, children));
 });

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
-export declare const CarouselSlider: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "key" | keyof React.OlHTMLAttributes<HTMLOListElement>> & React.RefAttributes<HTMLOListElement>>;
+export declare const CarouselSlider: PolymorphicForwardRefComponent<"ol", {}>;

package/esm/core/Carousel/CarouselSlider.js

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { getWindow, useMergedRefs, useIsomorphicLayoutEffect, } from '../utils/index.js';
+import { getWindow, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
@@ -54,5 +54,5 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
             isManuallyUpdating.current = false;
         }, 100);
     }, [isManuallyUpdating]);
-    return (React.createElement("ol", { "aria-live": 'polite', className: cx('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, ...rest }, items));
+    return (React.createElement(Box, { as: 'ol', "aria-live": 'polite', className: cx('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, ...rest }, items));
 });

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

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

package/esm/core/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/checkbox.css';
-export declare type CheckboxProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.
      */
@@ -28,7 +28,7 @@ export declare type CheckboxProps = {
      * @default false
      */
     isLoading?: boolean;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+};
 /**
  * Simple input checkbox
  * @example
@@ -41,33 +41,5 @@ export declare type CheckboxProps = {
  * <Checkbox label='Negative Checkbox' status='negative' />
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<{
-    /**
-     * Text that will be shown next to the checkbox.
-     */
-    label?: React.ReactNode;
-    /**
-     * Allow checkbox to be indeterminate.
-     * @default false
-     */
-    indeterminate?: boolean | undefined;
-    /**
-     * Status of checkbox.
-     */
-    status?: "positive" | "warning" | "negative" | undefined;
-    /**
-     * Type of checkbox, regular or eyeball checkbox that is used for visibility.
-     * @default 'default'
-     */
-    variant?: "default" | "eyeball" | undefined;
-    /**
-     * Set focus on checkbox.
-     */
-    setFocus?: boolean | undefined;
-    /**
-     * Display a loading state.
-     * @default false
-     */
-    isLoading?: boolean | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: PolymorphicForwardRefComponent<"input", CheckboxProps>;
 export default Checkbox;

package/esm/core/Checkbox/Checkbox.js

@@ -5,8 +5,7 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
-import { useMergedRefs, useTheme } from '../utils/index.js';
-import '@itwin/itwinui-css/css/checkbox.css';
+import { useMergedRefs, Box } from '../utils/index.js';
 /**
  * Simple input checkbox
  * @example
@@ -21,7 +20,6 @@ import '@itwin/itwinui-css/css/checkbox.css';
  */
 export const Checkbox = React.forwardRef((props, ref) => {
     const { className, disabled = false, indeterminate = false, label, status, variant = 'default', setFocus, isLoading = false, style, ...rest } = props;
-    useTheme();
     const inputElementRef = React.useRef(null);
     const refs = useMergedRefs(inputElementRef, ref);
     React.useEffect(() => {
@@ -38,17 +36,17 @@ export const Checkbox = React.forwardRef((props, ref) => {
         }
     });
     const checkbox = (React.createElement(React.Fragment, null,
-        React.createElement("input", { className: cx('iui-checkbox', {
+        React.createElement(Box, { as: 'input', className: cx('iui-checkbox', {
                 'iui-checkbox-visibility': variant === 'eyeball',
                 'iui-loading': isLoading,
             }, className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled || isLoading, type: 'checkbox', ref: refs, ...rest }),
         isLoading && React.createElement(ProgressRadial, { size: 'x-small', indeterminate: true })));
-    return !label ? (checkbox) : (React.createElement("label", { className: cx('iui-checkbox-wrapper', {
+    return !label ? (checkbox) : (React.createElement(Box, { as: '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)));
+        label && (React.createElement(Box, { as: 'span', className: 'iui-checkbox-label' }, label))));
 });
 export default Checkbox;

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

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

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

@@ -1,10 +1,7 @@
-import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
-export declare type ColorBuilderProps = Omit<CommonProps, 'title'>;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * `ColorBuilder` consists of two parts:
  * a color canvas to adjust saturation and lightness values,
  * and a set of sliders to adjust hue and alpha values.
  */
-export declare const ColorBuilder: React.ForwardRefExoticComponent<ColorBuilderProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorBuilder: PolymorphicForwardRefComponent<"div", {}>;