@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-cjs/utils/icons/SvgStatusWarning.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SvgStatusWarning", {
+    enumerable: true,
+    get: function() {
+        return SvgStatusWarning;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _Svg = require("./Svg.js");
+const SvgStatusWarning = (props)=>_react.createElement(_Svg.Svg, props, _react.createElement("path", {
+        d: "m15.86807 13.26721-6.77-11.62a1.15 1.15 0 0 0 -1.1-.67 1.17 1.17 0 0 0 -1.1.69l-6.77 11.59a1.2 1.2 0 0 0 1.1 1.72h13.45a1.19 1.19 0 0 0 1.19-1.71zm-6.87-.29h-2v-2h2zm0-3h-2v-5h2z"
+    }));

package/DEV-cjs/utils/icons/SvgSwap.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SvgSwap", {
+    enumerable: true,
+    get: function() {
+        return SvgSwap;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _Svg = require("./Svg.js");
+const SvgSwap = (props)=>_react.createElement(_Svg.Svg, props, _react.createElement("path", {
+        d: "m5 15-3.78125-3.5 3.78125-3.5v2h8v3h-8zm6-7 3.78125-3.5-3.78125-3.5v2h-8v3h8z"
+    }));

package/DEV-cjs/utils/icons/SvgUpload.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SvgUpload", {
+    enumerable: true,
+    get: function() {
+        return SvgUpload;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _Svg = require("./Svg.js");
+const SvgUpload = (props)=>_react.createElement(_Svg.Svg, props, _react.createElement("path", {
+        d: "m2 5h4v7h4v-7h4l-6-5zm12 6v3h-12v-3h-2v5h16v-5z"
+    }));

package/DEV-cjs/utils/icons/index.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./StatusIconMap.js"), exports);
+_export_star._(require("./SvgStatusSuccess.js"), exports);
+_export_star._(require("./SvgStatusWarning.js"), exports);
+_export_star._(require("./SvgStatusError.js"), exports);
+_export_star._(require("./SvgInfoCircular.js"), exports);
+_export_star._(require("./SvgClose.js"), exports);
+_export_star._(require("./SvgCloseSmall.js"), exports);
+_export_star._(require("./SvgChevronLeft.js"), exports);
+_export_star._(require("./SvgChevronRight.js"), exports);
+_export_star._(require("./SvgChevronRightSmall.js"), exports);
+_export_star._(require("./SvgChevronLeftDouble.js"), exports);
+_export_star._(require("./SvgChevronRightDouble.js"), exports);
+_export_star._(require("./SvgCaretUpSmall.js"), exports);
+_export_star._(require("./SvgCaretDownSmall.js"), exports);
+_export_star._(require("./SvgCaretRightSmall.js"), exports);
+_export_star._(require("./SvgSmileyHappy.js"), exports);
+_export_star._(require("./SvgSwap.js"), exports);
+_export_star._(require("./SvgUpload.js"), exports);
+_export_star._(require("./SvgMoreVertical.js"), exports);
+_export_star._(require("./SvgCheckmark.js"), exports);
+_export_star._(require("./SvgCheckmarkSmall.js"), exports);
+_export_star._(require("./SvgImportantSmall.js"), exports);
+_export_star._(require("./SvgSortUp.js"), exports);
+_export_star._(require("./SvgSortDown.js"), exports);
+_export_star._(require("./SvgColumnManager.js"), exports);
+_export_star._(require("./SvgMore.js"), exports);
+_export_star._(require("./SvgNew.js"), exports);
+_export_star._(require("./SvgSearch.js"), exports);
+_export_star._(require("./SvgFilter.js"), exports);
+_export_star._(require("./SvgFilterHollow.js"), exports);
+_export_star._(require("./SvgCalendar.js"), exports);
+_export_star._(require("./SvgDocument.js"), exports);

package/DEV-cjs/utils/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./functions/index.js"), exports);
+_export_star._(require("./hooks/index.js"), exports);
+_export_star._(require("./components/index.js"), exports);
+_export_star._(require("./props.js"), exports);
+_export_star._(require("./color/index.js"), exports);
+_export_star._(require("./icons/index.js"), exports);
+_export_star._(require("./types.js"), exports);
+_export_star._(require("./providers/index.js"), exports);

package/DEV-cjs/utils/meta.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "meta", {
+    enumerable: true,
+    get: function() {
+        return meta;
+    }
+});
+const _styles = require("../styles.js");
+const _moduleType = 'CJS';
+const meta = {
+    version: _styles.version,
+    module: _moduleType
+};

package/DEV-cjs/utils/props.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/DEV-cjs/utils/providers/HydrationProvider.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    HydrationProvider: function() {
+        return HydrationProvider;
+    },
+    useHydration: function() {
+        return useHydration;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../hooks/index.js");
+const HydrationContext = _react.createContext(false);
+const noopSubscribe = ()=>()=>{};
+const isServer = 'undefined' == typeof window;
+const useHydration = ()=>{
+    let hydrating = (0, _index.useSyncExternalStore)(noopSubscribe, ()=>false, ()=>!isServer);
+    let hydrated = _react.useContext(HydrationContext);
+    let hydratedFallback = (0, _index.useIsClient)();
+    if (hydrated || hydratedFallback) return 'hydrated';
+    if (hydrating) return 'hydrating';
+};
+const HydrationProvider = ({ children })=>{
+    let [isHydrated, setIsHydrated] = _react.useState(_react.useContext(HydrationContext));
+    let onHydrate = _react.useCallback(()=>setIsHydrated(true), []);
+    return _react.createElement(HydrationContext.Provider, {
+        value: isHydrated
+    }, isHydrated ? null : _react.createElement(HydrationCheck, {
+        onHydrate: onHydrate
+    }), children);
+};
+const HydrationCheck = ({ onHydrate })=>{
+    _react.useEffect(()=>void onHydrate(), [
+        onHydrate
+    ]);
+    return null;
+};

package/DEV-cjs/utils/providers/ScopeProvider.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ScopeProvider: function() {
+        return ScopeProvider;
+    },
+    useScopedAtom: function() {
+        return useScopedAtom;
+    },
+    useScopedSetAtom: function() {
+        return useScopedSetAtom;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _jotai = require("jotai");
+const ScopeContext = _react.createContext({
+    store: (0, _jotai.createStore)(),
+    parentStore: null
+});
+const ScopeProvider = ({ children })=>{
+    let store = _react.useMemo(()=>(0, _jotai.createStore)(), []);
+    let parentStore = _react.useContext(ScopeContext).store;
+    return _react.createElement(ScopeContext.Provider, {
+        value: _react.useMemo(()=>({
+                store,
+                parentStore
+            }), [
+            store,
+            parentStore
+        ])
+    }, children);
+};
+const useScopedAtom = (atom)=>{
+    let { store, parentStore } = _react.useContext(ScopeContext);
+    let setAtom = useScopedSetAtom(atom);
+    let value = (0, _jotai.useAtomValue)(atom, {
+        store
+    });
+    let inheritedValue = (0, _jotai.useAtomValue)(atom, {
+        store: parentStore || store
+    });
+    _react.useEffect(()=>{
+        if (void 0 == value && void 0 != inheritedValue) setAtom(inheritedValue);
+    });
+    return [
+        value,
+        setAtom
+    ];
+};
+const useScopedSetAtom = (atom)=>{
+    let { store } = _react.useContext(ScopeContext);
+    return (0, _jotai.useSetAtom)(atom, {
+        store
+    });
+};

package/DEV-cjs/utils/providers/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./HydrationProvider.js"), exports);
+_export_star._(require("./ScopeProvider.js"), exports);

package/DEV-cjs/utils/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/DEV-esm/core/Alert/Alert.js

@@ -0,0 +1,78 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { useSafeContext, polymorphic, StatusIconMap, SvgCloseSmall, Box } from '../../utils/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Icon } from '../Icon/Icon.js';
+import { Anchor } from '../Typography/Anchor.js';
+let AlertContext = React.createContext(void 0);
+let AlertComponent = React.forwardRef((props, forwardedRef)=>{
+    let { children, type = 'informational', isSticky = false, clickableText, clickableTextProps, onClose, ...rest } = props;
+    return React.createElement(Alert.Wrapper, {
+        type: type,
+        isSticky: isSticky,
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(Alert.Icon, null), React.createElement(Alert.Message, null, children, clickableText ? React.createElement(Alert.Action, clickableTextProps, clickableText) : null), onClose ? React.createElement(Alert.CloseButton, {
+        onClick: onClose
+    }) : null);
+});
+AlertComponent.displayName = 'Alert';
+let AlertWrapper = React.forwardRef((props, ref)=>{
+    let { children, className, type = 'informational', isSticky = false, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-alert', className),
+        "data-iui-status": type,
+        "data-iui-variant": isSticky ? 'sticky' : void 0,
+        ref: ref,
+        ...rest
+    }, React.createElement(AlertContext.Provider, {
+        value: {
+            type
+        }
+    }, children));
+});
+AlertWrapper.displayName = 'Alert.Wrapper';
+let AlertIcon = React.forwardRef((props, ref)=>{
+    let { children, ...rest } = props;
+    let { type } = useSafeContext(AlertContext);
+    let StatusIcon = StatusIconMap[type];
+    return React.createElement(Icon, {
+        fill: type,
+        ref: ref,
+        ...rest
+    }, children ?? React.createElement(StatusIcon, null));
+});
+AlertIcon.displayName = 'Alert.Icon';
+let AlertMessage = polymorphic.span('iui-alert-message');
+AlertMessage.displayName = 'Alert.Message';
+let AlertAction = React.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let { type } = useSafeContext(AlertContext);
+    return React.createElement(Anchor, {
+        as: props.href ? 'a' : 'button',
+        className: cx('iui-button-base', 'iui-alert-link', className),
+        underline: true,
+        "data-iui-status": type,
+        ref: ref,
+        ...rest
+    }, children);
+});
+AlertAction.displayName = 'Alert.Action';
+let AlertCloseButton = React.forwardRef((props, ref)=>{
+    let { children, ...rest } = props;
+    return React.createElement(IconButton, {
+        styleType: "borderless",
+        size: "small",
+        "aria-label": "Close",
+        ref: ref,
+        ...rest
+    }, children ?? React.createElement(SvgCloseSmall, null));
+});
+AlertCloseButton.displayName = 'Alert.CloseButton';
+export const Alert = Object.assign(AlertComponent, {
+    Wrapper: AlertWrapper,
+    Icon: AlertIcon,
+    Message: AlertMessage,
+    Action: AlertAction,
+    CloseButton: AlertCloseButton
+});

package/DEV-esm/core/Avatar/Avatar.js

@@ -0,0 +1,35 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Box, SoftBackgrounds, isSoftBackground } from '../../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+let getBackground = (color)=>{
+    if (!color) return '';
+    return isSoftBackground(color) ? SoftBackgrounds[color] : color;
+};
+export const defaultStatusTitles = {
+    away: 'Away',
+    busy: 'Busy',
+    offline: 'Offline',
+    online: 'Online'
+};
+export const Avatar = React.forwardRef((props, ref)=>{
+    let { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
+    let statusTitles = {
+        ...defaultStatusTitles,
+        ...translatedStatusTitles
+    };
+    return React.createElement(Box, {
+        as: "span",
+        className: cx('iui-avatar', className),
+        "data-iui-size": 'medium' !== size ? size : void 0,
+        "data-iui-status": status,
+        title: title,
+        style: {
+            backgroundColor: getBackground(backgroundColor),
+            ...style
+        },
+        ref: ref,
+        ...rest
+    }, image ? null : abbreviation?.substring(0, 2), image, status ? React.createElement(VisuallyHidden, null, statusTitles[status]) : null);
+});
+Avatar.displayName = 'Avatar';

package/DEV-esm/core/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/index.js';
+export const AvatarGroup = React.forwardRef((props, ref)=>{
+    let maxLength = 99;
+    let { children, animated = false, stacked = true, maxIcons = 5, iconSize = 'small', countIconProps, className, ...rest } = props;
+    let childrenArray = React.Children.toArray(children);
+    let childrenLength = childrenArray.length;
+    let getAvatarList = (count)=>childrenArray.slice(0, count).map((child)=>React.cloneElement(child, {
+                status: void 0,
+                size: iconSize
+            }));
+    return React.createElement(Box, {
+        className: cx('iui-avatar-list', {
+            'iui-animated': animated,
+            'iui-stacked': stacked
+        }, className),
+        ref: ref,
+        ...rest
+    }, childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1), childrenArray.length > maxIcons + 1 && React.createElement(React.Fragment, null, getAvatarList(maxIcons), React.createElement(Box, {
+        ...countIconProps,
+        className: cx('iui-avatar', 'iui-avatar-count', countIconProps?.className),
+        "data-iui-size": 'medium' !== iconSize ? iconSize : void 0
+    }, childrenLength <= maxLength ? `${childrenLength - maxIcons}` : `${maxLength}+`)));
+});
+AvatarGroup.displayName = 'AvatarGroup';

package/DEV-esm/core/Backdrop/Backdrop.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/index.js';
+export const Backdrop = React.forwardRef((props, ref)=>{
+    let { isVisible = true, className, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-backdrop', {
+            'iui-backdrop-visible': isVisible
+        }, className),
+        ref: ref,
+        ...rest
+    });
+});
+Backdrop.displayName = 'Backdrop';

package/DEV-esm/core/Badge/Badge.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { isSoftBackground, SoftBackgrounds, Box } from '../../utils/index.js';
+let getBadgeColorValue = (color)=>{
+    if (!color) return '';
+    return isSoftBackground(color) ? SoftBackgrounds[color] : color;
+};
+let getStatusValue = (color)=>{
+    let statuses = [
+        'positive',
+        'negative',
+        'warning',
+        'informational'
+    ];
+    return color && statuses.includes(color) ? color : void 0;
+};
+export const Badge = React.forwardRef((props, forwardedRef)=>{
+    let { backgroundColor, style, className, children, ...rest } = props;
+    let reducedBackgroundColor = 'primary' === backgroundColor ? 'informational' : backgroundColor;
+    let statusValue = getStatusValue(reducedBackgroundColor);
+    let _style = reducedBackgroundColor && !statusValue ? {
+        '--iui-badge-background-color': getBadgeColorValue(reducedBackgroundColor),
+        ...style
+    } : {
+        ...style
+    };
+    return React.createElement(Box, {
+        as: "span",
+        className: cx('iui-badge', className),
+        style: _style,
+        "data-iui-status": statusValue,
+        ref: forwardedRef,
+        ...rest
+    }, children);
+});
+Badge.displayName = 'Badge';

package/DEV-esm/core/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useMergedRefs, useOverflow, SvgChevronRight, Box, createWarningLogger } from '../../utils/index.js';
+import { Button } from '../Buttons/Button.js';
+import { Anchor } from '../Typography/Anchor.js';
+let logWarning = createWarningLogger();
+let BreadcrumbsComponent = React.forwardRef((props, ref)=>{
+    let { children: items, currentIndex = items.length - 1, separator, overflowButton, className, ...rest } = props;
+    let [overflowRef, visibleCount] = useOverflow(items);
+    let 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: 0 === currentIndex
+    }), 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"
+    }, "…")), React.createElement(Separator, {
+        separator: separator
+    })), items.slice(visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1).map((_, _index)=>{
+        let 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
+        }));
+    })));
+});
+BreadcrumbsComponent.displayName = 'Breadcrumbs';
+let ListItem = ({ item, isActive })=>{
+    let children = item;
+    if (children?.type === 'span' || children?.type === 'a' || children?.type === Button) {
+        logWarning('Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.');
+        children = React.createElement(BreadcrumbsItem, children.props);
+    }
+    return React.createElement(Box, {
+        as: "li",
+        className: 'iui-breadcrumbs-item'
+    }, children && React.cloneElement(children, {
+        'aria-current': children.props['aria-current'] ?? isActive ? 'location' : void 0
+    }));
+};
+let Separator = ({ separator })=>React.createElement(Box, {
+        as: "li",
+        className: "iui-breadcrumbs-separator",
+        "aria-hidden": true
+    }, separator ?? React.createElement(SvgChevronRight, null));
+let BreadcrumbsItem = React.forwardRef((props, forwardedRef)=>{
+    let { as: asProp, ...rest } = props;
+    let commonProps = {
+        ...rest,
+        className: cx('iui-breadcrumbs-content', props.className),
+        ref: forwardedRef
+    };
+    if ('span' === String(asProp) || null == props.href && null == props.onClick && null == asProp) return React.createElement(Box, {
+        as: "span",
+        ...commonProps
+    });
+    return React.createElement(Button, {
+        as: 'a' === asProp || null == asProp && props.href ? Anchor : asProp,
+        styleType: "borderless",
+        ...commonProps
+    });
+});
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+export const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
+    Item: BreadcrumbsItem
+});

package/DEV-esm/core/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
+import { Composite, CompositeItem, FloatingDelayGroup } from '@floating-ui/react';
+export const ButtonGroupContext = React.createContext(void 0);
+ButtonGroupContext.displayName = 'ButtonGroupContext';
+export const ButtonGroup = React.forwardRef((props, forwardedRef)=>{
+    let { children: childrenProp, overflowButton, overflowPlacement = 'end', orientation = 'horizontal', ...rest } = props;
+    let children = React.useMemo(()=>{
+        if ('toolbar' !== props.role) return childrenProp;
+        return React.Children.map(childrenProp, (child, index)=>React.isValidElement(child) ? React.createElement(CompositeItem, {
+                key: index,
+                render: child
+            }) : child);
+    }, [
+        childrenProp,
+        props.role
+    ]);
+    let node = overflowButton ? React.createElement(OverflowGroup, {
+        orientation: orientation,
+        overflowButton: overflowButton,
+        overflowPlacement: overflowPlacement,
+        ref: forwardedRef,
+        ...rest
+    }, children) : React.createElement(BaseGroup, {
+        orientation: orientation,
+        ref: forwardedRef,
+        ...rest
+    }, children);
+    return React.createElement(FloatingDelayGroup, {
+        delay: {
+            open: 50,
+            close: 250
+        }
+    }, React.createElement(ButtonGroupContext.Provider, {
+        value: orientation
+    }, 'toolbar' === props.role ? React.createElement(Composite, {
+        orientation: orientation,
+        render: node,
+        disabledIndices: []
+    }) : node));
+});
+ButtonGroup.displayName = 'ButtonGroup';
+let BaseGroup = React.forwardRef((props, forwardedRef)=>{
+    let { orientation, className, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-button-group', className),
+        "data-iui-orientation": 'vertical' === orientation ? orientation : void 0,
+        ref: forwardedRef,
+        ...rest
+    });
+});
+let OverflowGroup = React.forwardRef((props, forwardedRef)=>{
+    let { children: childrenProp, orientation, overflowButton, overflowPlacement, ...rest } = props;
+    let items = React.useMemo(()=>React.Children.toArray(childrenProp).filter(Boolean), [
+        childrenProp
+    ]);
+    let [overflowRef, visibleCount] = useOverflow(items, !overflowButton, orientation);
+    return React.createElement(BaseGroup, {
+        orientation: orientation,
+        ...rest,
+        className: cx({
+            'iui-button-group-overflow-x': !!overflowButton && 'horizontal' === orientation
+        }, props.className),
+        ref: useMergedRefs(forwardedRef, overflowRef)
+    }, (()=>{
+        if (!(visibleCount < items.length)) return items;
+        let overflowStart = 'start' === overflowPlacement ? items.length - visibleCount : visibleCount - 1;
+        return React.createElement(React.Fragment, null, overflowButton && 'start' === overflowPlacement && overflowButton(overflowStart), 'start' === overflowPlacement ? items.slice(overflowStart + 1) : items.slice(0, Math.max(0, overflowStart)), overflowButton && 'end' === overflowPlacement && overflowButton(overflowStart));
+    })());
+});

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

@@ -0,0 +1,42 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Box, ButtonBase } from '../../utils/index.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
+import { PopoverOpenContext } from '../Popover/Popover.js';
+export const Button = React.forwardRef((props, ref)=>{
+    let { children, className, size, styleType = 'default', startIcon, endIcon, labelProps, startIconProps, endIconProps, stretched, loading: loading, disabled: disabledProp, ...rest } = props;
+    let hasPopoverOpen = React.useContext(PopoverOpenContext);
+    return React.createElement(ButtonBase, {
+        ref: ref,
+        className: cx('iui-button', 'iui-field', className),
+        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
+        "data-iui-size": size,
+        "data-iui-loading": loading ? 'true' : void 0,
+        "data-iui-has-popover": hasPopoverOpen ? 'open' : void 0,
+        disabled: disabledProp || loading,
+        ...rest,
+        style: {
+            '--_iui-width': stretched ? '100%' : void 0,
+            ...props.style
+        }
+    }, startIcon && React.createElement(Box, {
+        as: "span",
+        "aria-hidden": true,
+        ...startIconProps,
+        className: cx('iui-button-icon', startIconProps?.className)
+    }, startIcon), children && React.createElement(Box, {
+        as: "span",
+        ...labelProps,
+        className: cx('iui-button-label', labelProps?.className)
+    }, children), endIcon && React.createElement(Box, {
+        as: "span",
+        "aria-hidden": true,
+        ...endIconProps,
+        className: cx('iui-button-icon', endIconProps?.className)
+    }, endIcon), loading && React.createElement(ProgressRadial, {
+        size: 'small' === size ? 'x-small' : 'small',
+        className: "iui-button-spinner",
+        "aria-hidden": true
+    }));
+});
+Button.displayName = 'Button';