@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.5

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -4,7 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useMergedRefs, useOverflow, SvgChevronRight, Box, } from '../utils/index.js';
+import {
+  useMergedRefs,
+  useOverflow,
+  SvgChevronRight,
+  Box,
+} from '../utils/index.js';
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.
@@ -27,37 +32,129 @@ import { useMergedRefs, useOverflow, SvgChevronRight, Box, } from '../utils/inde
  *   <span>Current level</span>
  * </Breadcrumbs>
  */
-export const Breadcrumbs = React.forwardRef((props, ref) => {
-    const { children: items, currentIndex = items.length - 1, separator, overflowButton, className, ...rest } = props;
-    const [overflowRef, visibleCount] = useOverflow(items);
-    const refs = useMergedRefs(overflowRef, ref);
-    return (React.createElement(Box, { as: 'nav', className: cx('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb', ...rest },
-        React.createElement(Box, { as: 'ol', className: 'iui-breadcrumbs-list' },
-            visibleCount > 1 && (React.createElement(React.Fragment, null,
-                React.createElement(ListItem, { item: items[0], isActive: currentIndex === 0 }),
-                React.createElement(Separator, { separator: separator }))),
-            items.length - visibleCount > 0 && (React.createElement(React.Fragment, null,
-                React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, overflowButton ? (overflowButton(visibleCount)) : (React.createElement(Box, { as: 'span', className: 'iui-breadcrumbs-text' }, "\u2026"))),
-                React.createElement(Separator, { separator: separator }))),
-            items
-                .slice(visibleCount > 1
-                ? items.length - visibleCount + 1
-                : items.length - 1)
-                .map((_, _index) => {
-                const index = visibleCount > 1
-                    ? 1 + (items.length - visibleCount) + _index
-                    : items.length - 1;
-                return (React.createElement(React.Fragment, { key: index },
-                    React.createElement(ListItem, { item: items[index], isActive: currentIndex === index }),
-                    index < items.length - 1 && (React.createElement(Separator, { separator: separator }))));
-            }))));
+const BreadcrumbsComponent = React.forwardRef((props, ref) => {
+  const {
+    children: items,
+    currentIndex = items.length - 1,
+    separator,
+    overflowButton,
+    className,
+    ...rest
+  } = props;
+  const [overflowRef, visibleCount] = useOverflow(items);
+  const refs = useMergedRefs(overflowRef, ref);
+  return React.createElement(
+    Box,
+    {
+      as: 'nav',
+      className: cx('iui-breadcrumbs', className),
+      ref: refs,
+      'aria-label': 'Breadcrumb',
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      { as: 'ol', className: 'iui-breadcrumbs-list' },
+      visibleCount > 1 &&
+        React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(ListItem, {
+            item: items[0],
+            isActive: currentIndex === 0,
+          }),
+          React.createElement(Separator, { separator: separator }),
+        ),
+      items.length - visibleCount > 0 &&
+        React.createElement(
+          React.Fragment,
+          null,
+          React.createElement(
+            Box,
+            { as: 'li', className: 'iui-breadcrumbs-item' },
+            overflowButton
+              ? overflowButton(visibleCount)
+              : React.createElement(
+                  Box,
+                  { as: 'span', className: 'iui-breadcrumbs-content' },
+                  '\u2026',
+                ),
+          ),
+          React.createElement(Separator, { separator: separator }),
+        ),
+      items
+        .slice(
+          visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
+        )
+        .map((_, _index) => {
+          const index =
+            visibleCount > 1
+              ? 1 + (items.length - visibleCount) + _index
+              : items.length - 1;
+          return React.createElement(
+            React.Fragment,
+            { key: index },
+            React.createElement(ListItem, {
+              item: items[index],
+              isActive: currentIndex === index,
+            }),
+            index < items.length - 1 &&
+              React.createElement(Separator, { separator: separator }),
+          );
+        }),
+    ),
+  );
 });
-const ListItem = ({ item, isActive, }) => {
-    return (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
-        ? React.cloneElement(item, {
-            'aria-current': item.props['aria-current'] ?? isActive ? 'location' : undefined,
+const ListItem = ({ item, isActive }) => {
+  return React.createElement(
+    Box,
+    { as: 'li', className: 'iui-breadcrumbs-item' },
+    React.isValidElement(item)
+      ? React.cloneElement(item, {
+          'aria-current':
+            item.props['aria-current'] ?? isActive ? 'location' : undefined,
         })
-        : item));
+      : item,
+  );
 };
-const Separator = ({ separator }) => (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(SvgChevronRight, null)));
+const Separator = ({ separator }) =>
+  React.createElement(
+    Box,
+    { as: 'li', className: 'iui-breadcrumbs-separator', 'aria-hidden': true },
+    separator ?? React.createElement(SvgChevronRight, null),
+  );
+const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
+  const { children: childrenProp, className, ...rest } = props;
+  const defaultAs = !!props.href ? 'a' : !!props.onClick ? 'button' : 'span';
+  const children =
+    defaultAs === 'button'
+      ? React.createElement('span', null, childrenProp)
+      : childrenProp;
+  return React.createElement(
+    Box,
+    {
+      as: defaultAs,
+      className: cx('iui-breadcrumbs-content', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
+});
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+export const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
+  /**
+   * Breadcrumbs item subcomponent
+   *
+   * @example
+   * <Breadcrumbs.Item>Breadcrumb Item Title</Breadcrumbs.Item>
+   *
+   * @example
+   * <Breadcrumbs.Item href='https://www.example.com/'>Breadcrumb Anchor Title</Breadcrumbs.Item>
+   *
+   * @example
+   * <Breadcrumbs.Item onClick={() => {}}><SvgCalendar /></Breadcrumbs.Item>
+   */
+  Item: BreadcrumbsItem,
+});
 export default Breadcrumbs;

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type ButtonGroupProps = {
+type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.
      */

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -34,27 +34,64 @@ import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
  * </ButtonGroup>
  */
 export const ButtonGroup = React.forwardRef((props, ref) => {
-    const { children, className, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
-    const items = React.useMemo(() => React.Children.map(children, (child) => !!child ? React.createElement("div", null, child) : undefined)?.filter(Boolean) ?? [], [children]);
-    const [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
-    const refs = useMergedRefs(overflowRef, ref);
-    return (React.createElement(Box, { className: cx({
-            '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 }, (() => {
-        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)))));
-    })()));
+  const {
+    children,
+    className,
+    overflowButton,
+    overflowPlacement = 'end',
+    orientation = 'horizontal',
+    ...rest
+  } = props;
+  const items = React.useMemo(
+    () =>
+      React.Children.map(children, (child) =>
+        !!child ? React.createElement('div', null, child) : undefined,
+      )?.filter(Boolean) ?? [],
+    [children],
+  );
+  const [overflowRef, visibleCount] = useOverflow(
+    items,
+    !overflowButton,
+    orientation,
+  );
+  const refs = useMergedRefs(overflowRef, ref);
+  return React.createElement(
+    Box,
+    {
+      className: cx(
+        {
+          'iui-button-group': orientation === 'horizontal',
+          'iui-button-group-vertical': orientation === 'vertical',
+          'iui-button-group-overflow-x':
+            !!overflowButton && orientation === 'horizontal',
+        },
+        className,
+      ),
+      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)),
+      );
+    })(),
+  );
 });
 export default ButtonGroup;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export declare type ButtonProps = {
+export type ButtonProps = {
     /**
      * Modify size of the button.
      */

package/esm/core/Buttons/Button/Button.js

@@ -15,10 +15,42 @@ import { Box } from '../../utils/index.js';
  * <Button startIcon={<SvgAdd />}>New</Button>
  */
 export const Button = React.forwardRef((props, ref) => {
-    const { children, className, size, style, styleType = 'default', type = 'button', startIcon, endIcon, ...rest } = props;
-    return (React.createElement(Box, { as: 'button', ref: ref, className: cx('iui-button', className), "data-iui-variant": styleType !== 'default' ? styleType : undefined, "data-iui-size": size, style: style, type: type, ...rest },
-        startIcon && (React.createElement(Box, { as: 'span', className: 'iui-button-icon', "aria-hidden": true }, startIcon)),
-        children && React.createElement("span", null, children),
-        endIcon && (React.createElement(Box, { as: 'span', className: 'iui-button-icon', "aria-hidden": true }, endIcon))));
+  const {
+    children,
+    className,
+    size,
+    style,
+    styleType = 'default',
+    type = 'button',
+    startIcon,
+    endIcon,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'button',
+      ref: ref,
+      className: cx('iui-button', className),
+      'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+      'data-iui-size': size,
+      style: style,
+      type: type,
+      ...rest,
+    },
+    startIcon &&
+      React.createElement(
+        Box,
+        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
+        startIcon,
+      ),
+    children && React.createElement('span', null, children),
+    endIcon &&
+      React.createElement(
+        Box,
+        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
+        endIcon,
+      ),
+  );
 });
 export default Button;

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

@@ -2,7 +2,7 @@
 import type { ButtonProps } from '../Button/Button.js';
 import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export declare type DropdownButtonProps = {
+export type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.
      * Pass a function that takes the `close` argument (to close the menu),

package/esm/core/Buttons/DropdownButton/DropdownButton.js

@@ -6,7 +6,11 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Button } from '../Button/index.js';
 import { DropdownMenu } from '../../DropdownMenu/index.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall, useMergedRefs, } from '../../utils/index.js';
+import {
+  SvgCaretDownSmall,
+  SvgCaretUpSmall,
+  useMergedRefs,
+} from '../../utils/index.js';
 /**
  * Button that opens a DropdownMenu.
  * @example
@@ -17,23 +21,54 @@ import { SvgCaretDownSmall, SvgCaretUpSmall, useMergedRefs, } from '../../utils/
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
 export const DropdownButton = React.forwardRef((props, ref) => {
-    const { menuItems, className, size, styleType, children, dropdownMenuProps, ...rest } = props;
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    const [menuWidth, setMenuWidth] = React.useState(0);
-    const buttonRef = React.useRef(null);
-    const refs = useMergedRefs(ref, buttonRef);
-    React.useEffect(() => {
-        if (buttonRef.current) {
-            setMenuWidth(buttonRef.current.offsetWidth);
-        }
-    }, [children, size, styleType]);
-    return (React.createElement(DropdownMenu, { menuItems: menuItems, ...dropdownMenuProps, onShow: (i) => {
-            setIsMenuOpen(true);
-            dropdownMenuProps?.onShow?.(i);
-        }, onHide: (i) => {
-            setIsMenuOpen(false);
-            dropdownMenuProps?.onHide?.(i);
-        }, style: { minWidth: menuWidth, ...dropdownMenuProps?.style } },
-        React.createElement(Button, { className: cx('iui-button-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown', ...rest }, children)));
+  const {
+    menuItems,
+    className,
+    size,
+    styleType,
+    children,
+    dropdownMenuProps,
+    ...rest
+  } = props;
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [menuWidth, setMenuWidth] = React.useState(0);
+  const buttonRef = React.useRef(null);
+  const refs = useMergedRefs(ref, buttonRef);
+  React.useEffect(() => {
+    if (buttonRef.current) {
+      setMenuWidth(buttonRef.current.offsetWidth);
+    }
+  }, [children, size, styleType]);
+  return React.createElement(
+    DropdownMenu,
+    {
+      menuItems: menuItems,
+      ...dropdownMenuProps,
+      onShow: (i) => {
+        setIsMenuOpen(true);
+        dropdownMenuProps?.onShow?.(i);
+      },
+      onHide: (i) => {
+        setIsMenuOpen(false);
+        dropdownMenuProps?.onHide?.(i);
+      },
+      style: { minWidth: menuWidth, ...dropdownMenuProps?.style },
+    },
+    React.createElement(
+      Button,
+      {
+        className: cx('iui-button-dropdown', className),
+        size: size,
+        styleType: styleType,
+        endIcon: isMenuOpen
+          ? React.createElement(SvgCaretUpSmall, { 'aria-hidden': true })
+          : React.createElement(SvgCaretDownSmall, { 'aria-hidden': true }),
+        ref: refs,
+        'aria-label': 'Dropdown',
+        ...rest,
+      },
+      children,
+    ),
+  );
 });
 export default DropdownButton;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export declare type IconButtonProps = {
+export type IconButtonProps = {
     /**
      * Button gets active style.
      * @default false

package/esm/core/Buttons/IconButton/IconButton.js

@@ -13,14 +13,58 @@ import { VisuallyHidden, Popover, Box } from '../../utils/index.js';
  * <IconButton label='Add' styleType='borderless'><SvgAdd /></IconButton>
  */
 export const IconButton = React.forwardRef((props, ref) => {
-    const { isActive, children, styleType = 'default', size, type = 'button', className, label, ...rest } = props;
-    return (React.createElement(IconButtonTooltip, { label: label },
-        React.createElement(Box, { as: 'button', ref: ref, className: cx('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(Box, { as: 'span', className: 'iui-button-icon', "aria-hidden": true }, children),
-            label ? React.createElement(VisuallyHidden, null, label) : null)));
+  const {
+    isActive,
+    children,
+    styleType = 'default',
+    size,
+    type = 'button',
+    className,
+    label,
+    ...rest
+  } = props;
+  return React.createElement(
+    IconButtonTooltip,
+    { label: label },
+    React.createElement(
+      Box,
+      {
+        as: 'button',
+        ref: ref,
+        className: cx('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(
+        Box,
+        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
+        children,
+      ),
+      label ? React.createElement(VisuallyHidden, null, label) : null,
+    ),
+  );
 });
 const IconButtonTooltip = (props) => {
-    const { label, children } = props;
-    return label ? (React.createElement(Popover, { interactive: false, offset: [0, 4], aria: { content: null }, content: React.createElement(Box, { "aria-hidden": 'true', className: 'iui-tooltip' }, label) }, children)) : (children);
+  const { label, children } = props;
+  return label
+    ? React.createElement(
+        Popover,
+        {
+          interactive: false,
+          offset: [0, 4],
+          aria: { content: null },
+          content: React.createElement(
+            Box,
+            { 'aria-hidden': 'true', className: 'iui-tooltip' },
+            label,
+          ),
+        },
+        children,
+      )
+    : children;
 };
 export default IconButton;

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

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-declare type IdeasButtonProps = {
+type IdeasButtonProps = {
     /**
      * On click handler.
      */

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

@@ -11,7 +11,17 @@ import { Button } from '../Button/index.js';
  * <IdeasButton />
  */
 export const IdeasButton = React.forwardRef((props, ref) => {
-    const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
-    return (React.createElement(Button, { ref: ref, "data-iui-variant": 'idea', onClick: onClick, startIcon: React.createElement(SvgSmileyHappy, { "aria-hidden": true }), ...rest }, feedbackLabel));
+  const { feedbackLabel = 'Feedback', onClick, ...rest } = props;
+  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/SplitButton/SplitButton.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.js';
 import type { Placement } from 'tippy.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export declare type SplitButtonProps = ButtonProps & {
+export type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.
      * Pass a function that takes the `close` argument (to close the menu),

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

@@ -23,20 +23,64 @@ import { Box, SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
  * <SplitButton onClick={onClick} menuItems={menuItems} styleType='high-visibility'>High visibility</SplitButton>
  */
 export const SplitButton = React.forwardRef((props, forwardedRef) => {
-    const { onClick, menuItems, className, menuPlacement = 'bottom-end', styleType = 'default', size, children, style, title, ...rest } = props;
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    const [menuWidth, setMenuWidth] = React.useState(0);
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (ref.current) {
-            setMenuWidth(ref.current.offsetWidth);
-        }
-    }, [children, size]);
-    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),
-        React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(() => setIsMenuOpen(true), []), onHide: React.useCallback(() => setIsMenuOpen(false), []) },
-            React.createElement(IconButton, { styleType: styleType, size: size, disabled: props.disabled }, isMenuOpen ? React.createElement(SvgCaretUpSmall, null) : React.createElement(SvgCaretDownSmall, null)))));
+  const {
+    onClick,
+    menuItems,
+    className,
+    menuPlacement = 'bottom-end',
+    styleType = 'default',
+    size,
+    children,
+    style,
+    title,
+    ...rest
+  } = props;
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [menuWidth, setMenuWidth] = React.useState(0);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current) {
+      setMenuWidth(ref.current.offsetWidth);
+    }
+  }, [children, size]);
+  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,
+    ),
+    React.createElement(
+      DropdownMenu,
+      {
+        placement: menuPlacement,
+        menuItems: menuItems,
+        style: { minWidth: menuWidth },
+        onShow: React.useCallback(() => setIsMenuOpen(true), []),
+        onHide: React.useCallback(() => setIsMenuOpen(false), []),
+      },
+      React.createElement(
+        IconButton,
+        { styleType: styleType, size: size, disabled: props.disabled },
+        isMenuOpen
+          ? React.createElement(SvgCaretUpSmall, null)
+          : React.createElement(SvgCaretDownSmall, null),
+      ),
+    ),
+  );
 });
 export default SplitButton;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type CarouselProps = {
+type CarouselProps = {
     /**
      * Index of the currently shown slide.
      * Can be used to set the default index or control the active slide programmatically.
@@ -36,7 +36,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         index?: number | undefined;
     }>;
     Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
-        PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+        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" | "styleType" | "isActive"> & {
             isActive?: boolean | undefined;
@@ -44,7 +44,7 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
         } & 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>> & {
+        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" | "styleType" | "isActive"> & {
             isActive?: boolean | undefined;