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

package/cjs/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/button.css';
-export declare type ButtonGroupProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.
      */
@@ -25,7 +25,7 @@ export declare type ButtonGroupProps = {
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
-} & React.ComponentPropsWithRef<'div'>;
+};
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
@@ -54,5 +54,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "orientation" | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
 export default ButtonGroup;

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -34,7 +34,6 @@ exports.ButtonGroup = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
@@ -69,23 +68,25 @@ exports.ButtonGroup = React.forwardRef((props, ref) => {
         var _a, _b;
         return (_b = (_a = React.Children.map(children, (child) => !!child ? React.createElement("div", null, child) : undefined)) === null || _a === void 0 ? void 0 : _a.filter(Boolean)) !== null && _b !== void 0 ? _b : [];
     }, [children]);
-    (0, index_js_1.useTheme)();
     const [overflowRef, visibleCount] = (0, index_js_1.useOverflow)(items, !overflowButton, orientation);
     const refs = (0, index_js_1.useMergedRefs)(overflowRef, ref);
-    return (React.createElement("div", { className: (0, classnames_1.default)({
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)({
             'iui-button-group': orientation === 'horizontal',
             'iui-button-group-vertical': orientation === 'vertical',
             'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-        }, className), "aria-orientation": orientation, ref: refs, ...rest },
-        React.createElement(React.Fragment, null,
-            visibleCount < items.length &&
-                overflowButton &&
-                overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
-            visibleCount < items.length
-                ? items.slice(0, Math.max(0, visibleCount - 1))
-                : items,
-            visibleCount < items.length &&
-                overflowButton &&
-                overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(visibleCount))))));
+        }, className), "aria-orientation": orientation, ref: refs, ...rest }, (() => {
+        if (!(visibleCount < items.length)) {
+            return items;
+        }
+        const overflowStart = overflowPlacement === 'start'
+            ? items.length - visibleCount
+            : visibleCount - 1;
+        return (React.createElement(React.Fragment, null,
+            overflowButton && overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(overflowStart))),
+            overflowPlacement === 'start'
+                ? items.slice(overflowStart + 1)
+                : items.slice(0, Math.max(0, overflowStart)),
+            overflowButton && overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(overflowStart)))));
+    })()));
 });
 exports.default = exports.ButtonGroup;

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

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

package/cjs/core/Buttons/Button/Button.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-declare type ButtonOwnProps = {
+/// <reference types="react" />
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+export declare type ButtonProps = {
     /**
      * Modify size of the button.
      */
@@ -20,13 +19,7 @@ declare type ButtonOwnProps = {
      * Icon shown after the main button content.
      */
     endIcon?: JSX.Element;
-    /**
-     * Content of the button.
-     */
-    children?: React.ReactNode;
 };
-export declare type ButtonProps<T extends React.ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOwnProps>;
-declare type ButtonComponent = PolymorphicForwardRefComponent<'button', ButtonOwnProps>;
 /**
  * Generic button component
  * @example
@@ -36,5 +29,5 @@ declare type ButtonComponent = PolymorphicForwardRefComponent<'button', ButtonOw
  * <Button size='small' styleType='cta'>This is a small call to action button</Button>
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
-export declare const Button: ButtonComponent;
+export declare const Button: PolymorphicForwardRefComponent<"button", ButtonProps>;
 export default Button;

package/cjs/core/Buttons/Button/Button.js

@@ -34,7 +34,6 @@ exports.Button = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Generic button component
  * @example
@@ -45,11 +44,10 @@ require("@itwin/itwinui-css/css/button.css");
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 exports.Button = React.forwardRef((props, ref) => {
-    const { children, className, size, style, styleType = 'default', type = 'button', startIcon, endIcon, as: Element = 'button', ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, style: style, type: type, ...rest },
-        startIcon && (React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, startIcon)),
+    const { children, className, size, style, styleType = 'default', type = 'button', startIcon, endIcon, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'button', ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, style: style, type: type, ...rest },
+        startIcon && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-button-icon', "aria-hidden": true }, startIcon)),
         children && React.createElement("span", null, children),
-        endIcon && (React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, endIcon))));
+        endIcon && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-button-icon', "aria-hidden": true }, endIcon))));
 });
 exports.default = exports.Button;

package/cjs/core/Buttons/Button/index.d.ts

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

package/cjs/core/Buttons/DropdownButton/DropdownButton.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import type { ButtonProps } from '../Button/index.js';
+/// <reference types="react" />
+import type { ButtonProps } from '../Button/Button.js';
 import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
-import '@itwin/itwinui-css/css/button.css';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export declare type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.
@@ -19,7 +19,7 @@ export declare type DropdownButtonProps = {
      * Props for the `DropdownMenu` which extends `PopoverProps`.
      */
     dropdownMenuProps?: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
-} & Omit<ButtonProps, 'onClick' | 'styleType' | 'endIcon'>;
+} & Omit<ButtonProps, 'styleType' | 'endIcon'>;
 /**
  * Button that opens a DropdownMenu.
  * @example
@@ -29,22 +29,5 @@ export declare type DropdownButtonProps = {
  * ];
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
-export declare const DropdownButton: React.ForwardRefExoticComponent<{
-    /**
-     * Items in the dropdown menu.
-     * Pass a function that takes the `close` argument (to close the menu),
-     * and returns a list of `MenuItem` components.
-     */
-    menuItems: (close: () => void) => JSX.Element[];
-    /**
-     * Style of the dropdown button.
-     * Use 'borderless' to hide outline.
-     * @default 'default'
-     */
-    styleType?: "default" | "borderless" | undefined;
-    /**
-     * Props for the `DropdownMenu` which extends `PopoverProps`.
-     */
-    dropdownMenuProps?: Omit<DropdownMenuProps, "children" | "menuItems"> | undefined;
-} & Omit<ButtonProps<"button">, "onClick" | "styleType" | "endIcon"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownButton: PolymorphicForwardRefComponent<"button", DropdownButtonProps>;
 export default DropdownButton;

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -36,7 +36,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../Button/index.js");
 const index_js_2 = require("../../DropdownMenu/index.js");
 const index_js_3 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Button that opens a DropdownMenu.
  * @example
@@ -48,7 +47,6 @@ require("@itwin/itwinui-css/css/button.css");
  */
 exports.DropdownButton = React.forwardRef((props, ref) => {
     const { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
-    (0, index_js_3.useTheme)();
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [menuWidth, setMenuWidth] = React.useState(0);
     const buttonRef = React.useRef(null);

package/cjs/core/Buttons/DropdownButton/index.d.ts

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

package/cjs/core/Buttons/IconButton/IconButton.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Button/index.js';
+import type { ButtonProps } from '../Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-import '@itwin/itwinui-css/css/tooltip.css';
 export declare type IconButtonProps = {
     /**
      * Button gets active style.
@@ -14,7 +12,6 @@ export declare type IconButtonProps = {
      */
     label?: React.ReactNode;
 } & Omit<ButtonProps, 'startIcon' | 'endIcon'>;
-declare type IconButtonComponent = PolymorphicForwardRefComponent<'button', IconButtonProps>;
 /**
  * Icon button
  * @example
@@ -22,5 +19,5 @@ declare type IconButtonComponent = PolymorphicForwardRefComponent<'button', Icon
  * @example
  * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
-export declare const IconButton: IconButtonComponent;
+export declare const IconButton: PolymorphicForwardRefComponent<"button", IconButtonProps>;
 export default IconButton;

package/cjs/core/Buttons/IconButton/IconButton.js

@@ -34,8 +34,6 @@ exports.IconButton = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
-require("@itwin/itwinui-css/css/tooltip.css");
 /**
  * Icon button
  * @example
@@ -44,15 +42,14 @@ require("@itwin/itwinui-css/css/tooltip.css");
  * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
 exports.IconButton = React.forwardRef((props, ref) => {
-    const { isActive, children, styleType = 'default', size, type = 'button', className, as: Element = 'button', label, ...rest } = props;
-    (0, index_js_1.useTheme)();
+    const { isActive, children, styleType = 'default', size, type = 'button', className, label, ...rest } = props;
     return (React.createElement(IconButtonTooltip, { label: label },
-        React.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, "aria-pressed": isActive, type: type, ...rest },
-            React.createElement("span", { className: 'iui-button-icon', "aria-hidden": true }, children),
+        React.createElement(index_js_1.Box, { as: 'button', ref: ref, className: (0, classnames_1.default)('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, "data-iui-active": isActive, "aria-pressed": isActive, type: type, ...rest },
+            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-button-icon', "aria-hidden": true }, children),
             label ? React.createElement(index_js_1.VisuallyHidden, null, label) : null)));
 });
 const IconButtonTooltip = (props) => {
     const { label, children } = props;
-    return label ? (React.createElement(index_js_1.Popover, { interactive: false, offset: [0, 4], aria: { content: null }, content: React.createElement("div", { "aria-hidden": 'true', className: 'iui-tooltip' }, label) }, children)) : (children);
+    return label ? (React.createElement(index_js_1.Popover, { interactive: false, offset: [0, 4], aria: { content: null }, content: React.createElement(index_js_1.Box, { "aria-hidden": 'true', className: 'iui-tooltip' }, label) }, children)) : (children);
 };
 exports.default = exports.IconButton;

package/cjs/core/Buttons/IconButton/index.d.ts

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

package/cjs/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/cjs/core/Buttons/IdeasButton/IdeasButton.js

@@ -38,7 +38,6 @@ const index_js_2 = require("../Button/index.js");
  */
 exports.IdeasButton = React.forwardRef((props, ref) => {
     const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
-    (0, index_js_1.useTheme)();
     return (React.createElement(index_js_2.Button, { ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(index_js_1.SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
 });
 exports.default = exports.IdeasButton;

package/cjs/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/cjs/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/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -37,7 +37,6 @@ const index_js_1 = require("../Button/index.js");
 const index_js_2 = require("../IconButton/index.js");
 const index_js_3 = require("../../DropdownMenu/index.js");
 const index_js_4 = require("../../utils/index.js");
-require("@itwin/itwinui-css/css/button.css");
 /**
  * Split button component with a DropdownMenu.
  *
@@ -54,7 +53,6 @@ require("@itwin/itwinui-css/css/button.css");
  */
 exports.SplitButton = React.forwardRef((props, forwardedRef) => {
     const { onClick, menuItems, className, menuPlacement = 'bottom-end', styleType = 'default', size, children, style, title, ...rest } = props;
-    (0, index_js_4.useTheme)();
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [menuWidth, setMenuWidth] = React.useState(0);
     const ref = React.useRef(null);
@@ -63,7 +61,7 @@ exports.SplitButton = React.forwardRef((props, forwardedRef) => {
             setMenuWidth(ref.current.offsetWidth);
         }
     }, [children, size]);
-    return (React.createElement("span", { className: (0, classnames_1.default)(className, 'iui-button-split', {
+    return (React.createElement(index_js_4.Box, { className: (0, classnames_1.default)(className, 'iui-button-split', {
             'iui-disabled': props.disabled,
         }), style: style, title: title, ref: ref },
         React.createElement(index_js_1.Button, { styleType: styleType, size: size, onClick: onClick, ref: forwardedRef, ...rest }, children),

package/cjs/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/cjs/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/cjs/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/cjs/core/Carousel/Carousel.js

@@ -34,36 +34,16 @@ exports.Carousel = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/carousel.css");
 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.
- *
- * 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>
- */
-exports.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-${(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);
@@ -117,7 +97,7 @@ exports.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: (0, classnames_1.default)('iui-carousel', className), ...rest, id: id },
+    return (React.createElement(index_js_1.Box, { as: '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,
@@ -128,7 +108,26 @@ exports.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>
+ */
+exports.Carousel = Object.assign(CarouselComponent, {
     Slider: CarouselSlider_js_1.CarouselSlider,
     Slide: CarouselSlide_js_1.CarouselSlide,
     Navigation: CarouselNavigation_js_1.CarouselNavigation,

package/cjs/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/cjs/core/Carousel/CarouselDot.js

@@ -33,13 +33,14 @@ exports.CarouselDot = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const index_js_1 = require("../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`.
  */
 exports.CarouselDot = React.forwardRef((props, ref) => {
     const { isActive, isSmaller, isSmall, className, ...rest } = props;
-    return (React.createElement("button", { type: 'button', role: 'tab', tabIndex: -1, className: (0, classnames_1.default)('iui-carousel-navigation-dot', {
+    return (React.createElement(index_js_1.Box, { as: '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,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 {};