@ringcentral/spring-ui 1.12.0 → 1.13.0

package/BottomNavigation.js

@@ -1,115 +1,145 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useMemo, useRef } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { tabbable } from 'tabbable';
-import { useClasses, useControlled, logInDev, useEventCallback, getTitle, useTabOut, combineProps } from '@ringcentral/spring-base';
-import { OverflowMd } from '@ringcentral/spring-icon';
-import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
-import { ClickAwayListener } from '@mui/base';
-import { a as BottomNavigationContext, B as BottomNavigationItem } from './chunks/BottomNavigationItem.js';
-export { u as useBottomNavigationContext } from './chunks/BottomNavigationItem.js';
-import { S as Squircle } from './chunks/Squircle.js';
-import './chunks/Icon.js';
-import { u as useMotionSafeTransition } from './chunks/useMotionSafeTransition.js';
-import './chunks/Badge.js';
-import 'lodash/isNumber';
-import 'lodash/kebabCase';
-import './chunks/IconButtonLabel.js';
-import './chunks/withTooltip.js';
-import './chunks/Tooltip.js';
-import 'clsx';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-import './chunks/useTooltipForceHide.js';
-
-var BottomNavigationGroup$1 = {"sui-bottom-navigation-group-root":"sui-bottom-navigation-group-root"};
-
-const BottomNavigationGroup = forwardRef((props, ref) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { tabbable } from "tabbable";
+import { combineProps, getTitle, logInDev, useClasses, useControlled, useEventCallback, useTabOut } from "@ringcentral/spring-base";
+import { OverflowMd } from "@ringcentral/spring-icon";
+import { motionTransition, useThemeProps } from "@ringcentral/spring-theme";
+import { ClickAwayListener } from "@mui/base";
+import { BottomNavigationItem as BottomNavigationItem_BottomNavigationItem, BottomNavigationContext } from "./BottomNavigationItem.js";
+import "./Squircle.js";
+import "./chunks/4476.js";
+import { useMotionSafeTransition } from "./chunks/1294.js";
+import { Squircle as Squircle_Squircle } from "./chunks/1250.js";
+
+
+
+
+
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var BottomNavigationGroup = ({"sui-bottom-navigation-group-root":"sui-bottom-navigation-group-root"});
+
+
+
+
+const BottomNavigationGroup_BottomNavigationGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { classes, className, children, ...rest } = props;
     const cls = useClasses('bottom-navigation-group', classes, className);
-    return (jsx("div", { className: cls('root'), ...rest, ref: ref, children: children }));
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root'),
+        ...rest,
+        ref: ref,
+        children: children
+    });
 });
-BottomNavigationGroup.displayName = 'SuiBottomNavigationGroup';
+BottomNavigationGroup_BottomNavigationGroup.displayName = 'SuiBottomNavigationGroup';
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var BottomNavigation = ({"sui-bottom-navigation-root":"sui-bottom-navigation-root","sui-bottom-navigation-full-width":"sui-bottom-navigation-full-width","sui-bottom-navigation-item-wrapper":"sui-bottom-navigation-item-wrapper","sui-bottom-navigation-description":"sui-bottom-navigation-description","sui-bottom-navigation-empty-slot":"sui-bottom-navigation-empty-slot","sui-expanded":"sui-expanded"});
+
+
+
+
+
+
+
+
+
+
+
+
 
-var BottomNavigation$1 = {"sui-bottom-navigation-root":"sui-bottom-navigation-root","sui-bottom-navigation-full-width":"sui-bottom-navigation-full-width","sui-bottom-navigation-item-wrapper":"sui-bottom-navigation-item-wrapper","sui-bottom-navigation-description":"sui-bottom-navigation-description","sui-bottom-navigation-empty-slot":"sui-bottom-navigation-empty-slot","sui-expanded":"sui-expanded"};
 
 const ROW_HEIGHT = 56;
-const BottomNavigation = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'BottomNavigation' });
+const BottomNavigation_BottomNavigation = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'BottomNavigation'
+    });
     const { classes, className, children, defaultValue, value: valueProp, defaultData, data: dataProp, onChange, renderItem, MoreProps, description, onTouchEnd, onClick, onKeyDown, onKeyUp, onBlur, onCollapse, fullWidth, ...rest } = props;
     const [value, setValue] = useControlled({
         controlled: valueProp,
         default: defaultValue,
         name: 'SuiBottomNavigation',
-        state: 'value',
+        state: 'value'
     });
+    // TODO: setData will be used when dnd is implemented
+    // oxlint-disable-next-line @typescript-eslint/no-unused-vars
     const [data, setData] = useControlled({
         controlled: dataProp,
         default: defaultData,
         name: 'SuiBottomNavigation',
-        state: 'data',
+        state: 'data'
     });
     const { visible, more } = data;
     const VISIBLE_MAX_COUNT = more?.length ? 5 : 6;
-    if (process.env.NODE_ENV !== 'production' &&
-        visible.length > VISIBLE_MAX_COUNT) {
+    if (process.env.NODE_ENV !== 'production' && visible.length > VISIBLE_MAX_COUNT) {
         logInDev({
             scope: 'BottomNavigation',
             message: `You can not have more than ${VISIBLE_MAX_COUNT} visible items.`,
-            level: 'warn',
+            level: 'warn'
         });
     }
     const emptySlots = VISIBLE_MAX_COUNT - visible.length;
     const cls = useClasses('bottom-navigation', classes, className);
     const [expanded, setExpanded] = useState(false);
     const [animationComplete, setAnimationComplete] = useState();
-    const transition = useMotionSafeTransition(motionTransition['haste-01-fast']);
-    const handleClose = (e, reason) => {
-        if (!expanded)
-            return;
+    const transition = useMotionSafeTransition(motionTransition["haste-01-fast"]);
+    // oxlint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleClose = (e, reason)=>{
+        if (!expanded) return;
         setExpanded(false);
         onCollapse?.(e, reason);
     };
-    const onSelected = useEventCallback((e, newValue) => {
+    const onSelected = useEventCallback((e, newValue)=>{
         handleClose(e, 'ItemSelected');
         setValue(newValue);
         if (onChange) {
             onChange(e, newValue);
         }
     });
-    const contextValue = useMemo(() => {
+    const contextValue = useMemo(()=>{
         return {
             value,
             expanded,
             onSelected,
-            animationComplete,
+            animationComplete
         };
-    }, [expanded, onSelected, animationComplete, value]);
-    const handleMoreClick = (e) => {
+    }, [
+        expanded,
+        onSelected,
+        animationComplete,
+        value
+    ]);
+    const handleMoreClick = (e)=>{
         if (expanded) {
             handleClose(e, 'ToggleMore');
-        }
-        else {
+        } else {
             setExpanded(true);
         }
         MoreProps?.onClick?.(e);
     };
     const descriptionTitle = getTitle(description);
-    const handleClickAway = useEventCallback((e) => {
-        if (!expanded)
-            return;
+    const handleClickAway = useEventCallback((e)=>{
+        if (!expanded) return;
         handleClose(e, 'ClickAway');
     });
-    const { tabOutHandler } = useTabOut((e) => {
+    const { tabOutHandler } = useTabOut((e)=>{
         handleClose(e, 'TabBlur');
     });
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (e)=>{
         if (e.key === 'Escape') {
             handleClose(e, 'EscapeKeyDown');
         }
@@ -118,11 +148,11 @@ const BottomNavigation = forwardRef((inProps, ref) => {
     const tabOutProps = combineProps(tabOutHandler, {
         onKeyDown: handleKeyDown,
         onKeyUp,
-        onBlur,
+        onBlur
     });
     const moreGroupRef = useRef(null);
     const moreButtonRef = useRef(null);
-    const handleAnimationComplete = () => {
+    const handleAnimationComplete = ()=>{
         setAnimationComplete(true);
         if (expanded && moreGroupRef.current) {
             const allTabbable = tabbable(moreGroupRef.current);
@@ -133,10 +163,96 @@ const BottomNavigation = forwardRef((inProps, ref) => {
         }
     };
     const itemWrapperClassName = cls('item-wrapper');
-    return (jsx(ClickAwayListener, { onClickAway: handleClickAway, children: jsx(motion.div, { transition: transition, onAnimationStart: () => {
+    return /*#__PURE__*/ jsx(ClickAwayListener, {
+        onClickAway: handleClickAway,
+        children: /*#__PURE__*/ jsx(motion.div, {
+            transition: transition,
+            onAnimationStart: ()=>{
                 setAnimationComplete(false);
-            }, onAnimationComplete: handleAnimationComplete, initial: false, animate: expanded ? { height: 'auto' } : { height: ROW_HEIGHT }, className: cls('root', { expanded, 'full-width': fullWidth }), ...rest, ...tabOutProps, onClick: onClick, onTouchEnd: onTouchEnd, ref: ref, children: jsxs(BottomNavigationContext.Provider, { value: contextValue, children: [jsxs(BottomNavigationGroup, { children: [visible.slice(0, VISIBLE_MAX_COUNT).map((item) => (jsx("span", { className: itemWrapperClassName, children: renderItem(item) }, item))), [...Array(emptySlots > 0 ? emptySlots : 0)].map((e, i) => (jsx("span", { className: itemWrapperClassName, children: jsx(Squircle, { interactive: false, className: cls('empty-slot', { expanded }) }) }, 'bottom-navigation-slot-' + i))), more?.length ? (jsx("span", { className: itemWrapperClassName, children: jsx(BottomNavigationItem, { symbol: OverflowMd, activated: expanded, expanded: false, ButtonProps: { 'aria-expanded': expanded }, ...MoreProps, count: expanded ? 0 : MoreProps?.count, onClick: handleMoreClick, ref: moreButtonRef }) })) : null] }), jsxs(AnimatePresence, { children: [expanded && more?.length ? (jsx(BottomNavigationGroup, { ref: moreGroupRef, children: more.map((item) => (jsx("span", { title: item, className: itemWrapperClassName, children: renderItem(item) }, item))) }, "more")) : null, expanded && description && (jsx("div", { className: cls('description'), title: descriptionTitle, children: description }))] })] }) }) }));
+            },
+            onAnimationComplete: handleAnimationComplete,
+            initial: false,
+            animate: expanded ? {
+                height: 'auto'
+            } : {
+                height: ROW_HEIGHT
+            },
+            className: cls('root', {
+                expanded,
+                'full-width': fullWidth
+            }),
+            ...rest,
+            ...tabOutProps,
+            onClick: onClick,
+            onTouchEnd: onTouchEnd,
+            ref: ref,
+            children: /*#__PURE__*/ jsxs(BottomNavigationContext.Provider, {
+                value: contextValue,
+                children: [
+                    /*#__PURE__*/ jsxs(BottomNavigationGroup_BottomNavigationGroup, {
+                        children: [
+                            visible.slice(0, VISIBLE_MAX_COUNT).map((item)=>/*#__PURE__*/ jsx("span", {
+                                    className: itemWrapperClassName,
+                                    children: renderItem(item)
+                                }, item)),
+                            [
+                                ...Array(emptySlots > 0 ? emptySlots : 0)
+                            ].map((e, i)=>/*#__PURE__*/ jsx("span", {
+                                    className: itemWrapperClassName,
+                                    children: /*#__PURE__*/ jsx(Squircle_Squircle, {
+                                        interactive: false,
+                                        className: cls('empty-slot', {
+                                            expanded
+                                        })
+                                    })
+                                }, 'bottom-navigation-slot-' + i)),
+                            more?.length ? /*#__PURE__*/ jsx("span", {
+                                className: itemWrapperClassName,
+                                children: /*#__PURE__*/ jsx(BottomNavigationItem_BottomNavigationItem, {
+                                    symbol: OverflowMd,
+                                    activated: expanded,
+                                    expanded: false,
+                                    ButtonProps: {
+                                        'aria-expanded': expanded
+                                    },
+                                    ...MoreProps,
+                                    count: expanded ? 0 : MoreProps?.count,
+                                    onClick: handleMoreClick,
+                                    ref: moreButtonRef
+                                })
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(AnimatePresence, {
+                        children: [
+                            expanded && more?.length ? /*#__PURE__*/ jsx(BottomNavigationGroup_BottomNavigationGroup, {
+                                ref: moreGroupRef,
+                                children: more.map((item)=>/*#__PURE__*/ jsx("span", {
+                                        title: item,
+                                        className: itemWrapperClassName,
+                                        children: renderItem(item)
+                                    }, item))
+                            }, "more") : null,
+                            expanded && description && /*#__PURE__*/ jsx("div", {
+                                className: cls('description'),
+                                title: descriptionTitle,
+                                children: description
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
 });
-BottomNavigation.displayName = 'SuiBottomNavigation';
+BottomNavigation_BottomNavigation.displayName = 'SuiBottomNavigation';
+
+
+
+
+
+
+
 
-export { BottomNavigation, BottomNavigationContext, BottomNavigationGroup, BottomNavigationGroup$1 as bottomNavigationGroupStyles, BottomNavigation$1 as bottomNavigationStyles };
+export { BottomNavigation as bottomNavigationStyles, BottomNavigationGroup as bottomNavigationGroupStyles, BottomNavigationGroup_BottomNavigationGroup as BottomNavigationGroup, BottomNavigation_BottomNavigation as BottomNavigation };
+export { BottomNavigationContext, useBottomNavigationContext } from "./BottomNavigationItem.js";

package/BottomNavigationItem.js

@@ -1,30 +1,93 @@
-export { B as BottomNavigationItem } from './chunks/BottomNavigationItem.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import './chunks/Badge.js';
-import 'framer-motion';
-import 'lodash/isNumber';
-import 'lodash/kebabCase';
-import './chunks/Icon.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/IconButtonLabel.js';
-import '@mui/base';
-import './chunks/Squircle.js';
-import './chunks/withTooltip.js';
-import './chunks/Tooltip.js';
-import 'clsx';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-import './chunks/useTooltipForceHide.js';
-
-var BottomNavigationItem = {"sui-bottom-navigation-item-button":"sui-bottom-navigation-item-button","sui-expanded":"sui-expanded","sui-bottom-navigation-item-activated":"sui-bottom-navigation-item-activated"};
-
-export { BottomNavigationItem as bottomNavigationItemStyles };
+import { jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import { combineClasses, useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { Badge as Badge_Badge } from "./Badge.js";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+import { useTooltipForceHide } from "./Tooltip.js";
+import { Tooltip } from "./chunks/4535.js";
+
+
+
+
+
+
+
+const BottomNavigationContext = createContext(null);
+const useBottomNavigationContext = ()=>useContext(BottomNavigationContext);
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var BottomNavigationItem = ({"sui-bottom-navigation-item-button":"sui-bottom-navigation-item-button","sui-expanded":"sui-expanded","sui-bottom-navigation-item-activated":"sui-bottom-navigation-item-activated"});
+
+
+
+
+
+
+
+
+
+const BottomNavigationItem_BottomNavigationItem = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'BottomNavigationItem'
+    });
+    const { classes, symbol, activatedSymbol, count, value: valueProp, activated: activatedProp, expanded: expandedProp, onClick, BadgeProps = {}, TooltipProps = {}, ButtonProps = {}, label, className } = props;
+    const cls = useClasses('bottom-navigation-item', classes, className);
+    const { value: selectedValue, expanded: isExpanded, onSelected, animationComplete } = useBottomNavigationContext() || {};
+    // close tooltip temporarily during animation
+    const tooltipOpenProps = useTooltipForceHide(animationComplete === false);
+    const selected = selectedValue === valueProp;
+    const activated = activatedProp !== undefined ? activatedProp : selected;
+    const expanded = expandedProp !== undefined ? expandedProp : isExpanded;
+    const handleClick = (event)=>{
+        if (valueProp !== undefined && !selected) {
+            onSelected?.(event, valueProp);
+        }
+        onClick?.(event);
+    };
+    let buttonClasses = {
+        root: cls('button', {
+            activated,
+            expanded
+        })
+    };
+    if (ButtonProps.classes) {
+        buttonClasses = combineClasses(buttonClasses, ButtonProps.classes);
+    }
+    return /*#__PURE__*/ jsx(Badge_Badge, {
+        variant: "outlined",
+        count: count,
+        className: cls('root'),
+        ...BadgeProps,
+        children: /*#__PURE__*/ jsx(Tooltip, {
+            ...TooltipProps,
+            title: label,
+            PopperProps: {
+                offset: 8
+            },
+            motionProps: null,
+            ...tooltipOpenProps,
+            children: /*#__PURE__*/ jsx(IconButton_IconButton, {
+                shape: 'squircle',
+                variant: "contained",
+                size: "small",
+                color: 'secondary',
+                symbol: activated && activatedSymbol ? activatedSymbol : symbol,
+                onClick: handleClick,
+                "aria-label": label,
+                ...ButtonProps,
+                classes: buttonClasses,
+                ref: ref
+            })
+        })
+    });
+});
+BottomNavigationItem_BottomNavigationItem.displayName = 'SuiBottomNavigationItem';
+
+
+
+
+
+
+export { BottomNavigationContext, BottomNavigationItem as bottomNavigationItemStyles, BottomNavigationItem_BottomNavigationItem as BottomNavigationItem, useBottomNavigationContext };

package/Button.js

@@ -1,24 +1,160 @@
-export { B as Button, b as buttonIconSizeMap } from './chunks/Button.js';
-import 'react/jsx-runtime';
-import 'react';
-import 'clsx';
-import '@mui/base';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import './chunks/CircularProgressIndicator.js';
-import './chunks/Icon.js';
-import './chunks/Tooltip.js';
-import 'framer-motion';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getFade.js';
-import './Popper.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/PopperPaper.js';
-import './chunks/withTooltip.js';
-
-var Button = {"sui-button-root":"sui-button-root","sui-disabled":"sui-disabled","sui-button-loading-indicator":"sui-button-loading-indicator","sui-button-xlarge":"sui-button-xlarge","sui-button-large":"sui-button-large","sui-button-medium":"sui-button-medium","sui-button-small":"sui-button-small","sui-button-xsmall":"sui-button-xsmall","sui-button-contained-xlarge":"sui-button-contained-xlarge","sui-button-outlined-xlarge":"sui-button-outlined-xlarge","sui-button-inverted-xlarge":"sui-button-inverted-xlarge","sui-button-contained-large":"sui-button-contained-large","sui-button-outlined-large":"sui-button-outlined-large","sui-button-inverted-large":"sui-button-inverted-large","sui-button-contained-medium":"sui-button-contained-medium","sui-button-outlined-medium":"sui-button-outlined-medium","sui-button-inverted-medium":"sui-button-inverted-medium","sui-button-contained-small":"sui-button-contained-small","sui-button-outlined-small":"sui-button-outlined-small","sui-button-inverted-small":"sui-button-inverted-small","sui-button-contained-xsmall":"sui-button-contained-xsmall","sui-button-outlined-xsmall":"sui-button-outlined-xsmall","sui-button-inverted-xsmall":"sui-button-inverted-xsmall","sui-button-loading":"sui-button-loading","sui-button-content":"sui-button-content","sui-button-contained":"sui-button-contained","sui-focus-visible":"sui-focus-visible","sui-button-outlined":"sui-button-outlined","sui-button-inverted":"sui-button-inverted","sui-button-text":"sui-button-text","sui-button-contained-primary":"sui-button-contained-primary","sui-button-contained-secondary":"sui-button-contained-secondary","sui-button-contained-neutral":"sui-button-contained-neutral","sui-button-contained-danger":"sui-button-contained-danger","sui-button-contained-warning":"sui-button-contained-warning","sui-button-contained-success":"sui-button-contained-success","sui-button-contained-hide-background":"sui-button-contained-hide-background","sui-button-outlined-primary":"sui-button-outlined-primary","sui-button-outlined-secondary":"sui-button-outlined-secondary","sui-button-outlined-neutral":"sui-button-outlined-neutral","sui-button-outlined-danger":"sui-button-outlined-danger","sui-button-outlined-warning":"sui-button-outlined-warning","sui-button-outlined-success":"sui-button-outlined-success","sui-button-text-primary":"sui-button-text-primary","sui-button-text-secondary":"sui-button-text-secondary","sui-button-text-neutral":"sui-button-text-neutral","sui-button-text-danger":"sui-button-text-danger","sui-button-text-warning":"sui-button-text-warning","sui-button-text-success":"sui-button-text-success","sui-button-inverted-primary":"sui-button-inverted-primary","sui-button-inverted-secondary":"sui-button-inverted-secondary","sui-button-inverted-neutral":"sui-button-inverted-neutral","sui-button-inverted-danger":"sui-button-inverted-danger","sui-button-inverted-warning":"sui-button-inverted-warning","sui-button-inverted-success":"sui-button-inverted-success","sui-button-start-slot":"sui-button-start-slot","sui-button-end-slot":"sui-button-end-slot","sui-button-has-start-slot":"sui-button-has-start-slot","sui-button-has-end-slot":"sui-button-has-end-slot","sui-button-hide-background":"sui-button-hide-background","sui-button-full-width":"sui-button-full-width"};
-
-export { Button as buttonClasses };
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { forwardRef } from "react";
+import clsx from "clsx";
+import { useButton } from "@mui/base";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { CircularProgressIndicator as CircularProgressIndicator_CircularProgressIndicator } from "./CircularProgressIndicator.js";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import "./Tooltip.js";
+import { withTooltip } from "./chunks/4535.js";
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Button = ({"sui-button-root":"sui-button-root","sui-disabled":"sui-disabled","sui-button-xlarge":"sui-button-xlarge","sui-button-large":"sui-button-large","sui-button-medium":"sui-button-medium","sui-button-small":"sui-button-small","sui-button-xsmall":"sui-button-xsmall","sui-button-contained-xlarge":"sui-button-contained-xlarge","sui-button-outlined-xlarge":"sui-button-outlined-xlarge","sui-button-inverted-xlarge":"sui-button-inverted-xlarge","sui-button-contained-large":"sui-button-contained-large","sui-button-outlined-large":"sui-button-outlined-large","sui-button-inverted-large":"sui-button-inverted-large","sui-button-contained-medium":"sui-button-contained-medium","sui-button-outlined-medium":"sui-button-outlined-medium","sui-button-inverted-medium":"sui-button-inverted-medium","sui-button-contained-small":"sui-button-contained-small","sui-button-outlined-small":"sui-button-outlined-small","sui-button-inverted-small":"sui-button-inverted-small","sui-button-contained-xsmall":"sui-button-contained-xsmall","sui-button-outlined-xsmall":"sui-button-outlined-xsmall","sui-button-inverted-xsmall":"sui-button-inverted-xsmall","sui-button-loading":"sui-button-loading","sui-button-content":"sui-button-content","sui-button-contained":"sui-button-contained","sui-focus-visible":"sui-focus-visible","sui-button-outlined":"sui-button-outlined","sui-button-inverted":"sui-button-inverted","sui-button-text":"sui-button-text","sui-button-contained-primary":"sui-button-contained-primary","sui-button-contained-secondary":"sui-button-contained-secondary","sui-button-contained-neutral":"sui-button-contained-neutral","sui-button-contained-danger":"sui-button-contained-danger","sui-button-contained-warning":"sui-button-contained-warning","sui-button-contained-success":"sui-button-contained-success","sui-button-contained-hide-background":"sui-button-contained-hide-background","sui-button-outlined-primary":"sui-button-outlined-primary","sui-button-outlined-secondary":"sui-button-outlined-secondary","sui-button-outlined-neutral":"sui-button-outlined-neutral","sui-button-outlined-danger":"sui-button-outlined-danger","sui-button-outlined-warning":"sui-button-outlined-warning","sui-button-outlined-success":"sui-button-outlined-success","sui-button-text-primary":"sui-button-text-primary","sui-button-text-secondary":"sui-button-text-secondary","sui-button-text-neutral":"sui-button-text-neutral","sui-button-text-danger":"sui-button-text-danger","sui-button-text-warning":"sui-button-text-warning","sui-button-text-success":"sui-button-text-success","sui-button-inverted-primary":"sui-button-inverted-primary","sui-button-inverted-secondary":"sui-button-inverted-secondary","sui-button-inverted-neutral":"sui-button-inverted-neutral","sui-button-inverted-danger":"sui-button-inverted-danger","sui-button-inverted-warning":"sui-button-inverted-warning","sui-button-inverted-success":"sui-button-inverted-success","sui-button-slot":"sui-button-slot","sui-button-loading-indicator":"sui-button-loading-indicator","sui-button-center-slot":"sui-button-center-slot","sui-button-start-slot":"sui-button-start-slot","sui-button-end-slot":"sui-button-end-slot","sui-button-has-start-slot":"sui-button-has-start-slot","sui-button-has-end-slot":"sui-button-has-end-slot","sui-button-hide-background":"sui-button-hide-background","sui-button-full-width":"sui-button-full-width","sui-button-loading-iconless":"sui-button-loading-iconless"});
+
+
+
+
+
+
+
+
+
+
+const buttonIconSizeMap = {
+    xlarge: 'large',
+    large: 'medium',
+    medium: 'small',
+    small: 'small',
+    xsmall: 'xsmall'
+};
+const CircularProgressIndicatorSizeMap = {
+    xlarge: 'medium',
+    large: 'medium',
+    medium: 'small',
+    small: 'small',
+    xsmall: 'xsmall'
+};
+const CircularProgressIndicatorColorMap = {
+    primary: 'primary',
+    secondary: 'primary',
+    danger: 'danger',
+    warning: 'warning',
+    success: 'success',
+    neutral: 'primary'
+};
+const SLOT = 'slot';
+const START_SLOT = 'start-slot';
+const CENTER_SLOT = 'center-slot';
+const END_SLOT = 'end-slot';
+const Button_Button = withTooltip(/*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Button'
+    });
+    const { component = 'button', children, size = 'medium', variant = 'contained', color = 'primary', background = true, fullWidth = false, loading = false, title: titleProp, CircularProgressIndicatorProps, startIcon, endIcon, classes, className, disabled: disabledProp, focusableWhenDisabled, ...rest } = props;
+    const cls = useClasses('button', classes, className);
+    const disableInteractions = disabledProp || loading;
+    const { getRootProps, focusVisible } = useButton({
+        ...props,
+        focusableWhenDisabled,
+        disabled: disableInteractions,
+        rootRef: ref
+    });
+    const ButtonRoot = component;
+    const isTextContent = typeof children === 'string';
+    const loadingIconless = loading && !startIcon && !endIcon;
+    const title = (()=>{
+        // * if title is not provided and children is string, use children as title
+        if (titleProp === undefined && isTextContent) {
+            return children;
+        }
+        return titleProp;
+    })();
+    let startSlot = null;
+    let centerSlot = null;
+    let endSlot = null;
+    const startSlotClassName = cls(SLOT, START_SLOT, `${size}-start-slot`, `${variant}-${size}-start-slot`);
+    const endSlotClassName = cls(SLOT, END_SLOT, `${size}-end-slot`, `${variant}-${size}-end-slot`);
+    const centerSlotClassName = cls(SLOT, CENTER_SLOT);
+    if (loading) {
+        const loadingIndicator = /*#__PURE__*/ jsx(CircularProgressIndicator_CircularProgressIndicator, {
+            ...CircularProgressIndicatorProps,
+            className: clsx(startIcon ? startSlotClassName : endIcon ? endSlotClassName : centerSlotClassName, cls('loading-indicator'), CircularProgressIndicatorProps?.className),
+            variant: "indeterminate",
+            size: CircularProgressIndicatorSizeMap[size],
+            color: CircularProgressIndicatorColorMap[color],
+            progressBarProps: {
+                'aria-label': CircularProgressIndicatorProps?.['aria-label'] ?? 'Loading',
+                ...CircularProgressIndicatorProps?.progressBarProps
+            }
+        });
+        if (startIcon) {
+            startSlot = loadingIndicator;
+        } else if (endIcon) {
+            endSlot = loadingIndicator;
+        } else {
+            centerSlot = loadingIndicator;
+        }
+    } else if (startIcon) {
+        if (/*#__PURE__*/ react.isValidElement(startIcon)) {
+            startSlot = /*#__PURE__*/ react.cloneElement(startIcon, {
+                className: clsx(startSlotClassName, startIcon.props.className)
+            });
+        } else {
+            startSlot = /*#__PURE__*/ jsx(Icon_Icon, {
+                className: startSlotClassName,
+                symbol: startIcon,
+                size: buttonIconSizeMap[size]
+            });
+        }
+    }
+    if (endIcon && (!loading || startIcon)) {
+        if (/*#__PURE__*/ react.isValidElement(endIcon)) {
+            endSlot = /*#__PURE__*/ react.cloneElement(endIcon, {
+                className: clsx(endSlotClassName, endIcon.props.className)
+            });
+        } else {
+            endSlot = /*#__PURE__*/ jsx(Icon_Icon, {
+                className: endSlotClassName,
+                symbol: endIcon,
+                size: buttonIconSizeMap[size]
+            });
+        }
+    }
+    const content = isTextContent ? /*#__PURE__*/ jsx("span", {
+        className: cls('content'),
+        children: children
+    }) : children;
+    return /*#__PURE__*/ jsxs(ButtonRoot, {
+        className: cls('root', variant, color, size, `${variant}-${color}`, `${variant}-${size}`, !background && 'hide-background', !background && `${variant}-hide-background`, startSlot && 'has-start-slot', endSlot && 'has-end-slot', fullWidth && 'full-width', loadingIconless && 'loading-iconless', {
+            disabled: disabledProp,
+            focusVisible,
+            loading
+        }),
+        title: title,
+        ...rest,
+        ...getRootProps(),
+        "aria-busy": loading ? true : undefined,
+        children: [
+            startSlot,
+            centerSlot,
+            content,
+            endSlot
+        ]
+    });
+}));
+Button_Button.displayName = 'SuiButton';
+
+
+
+
+
+
+export { Button as buttonClasses, Button_Button as Button, buttonIconSizeMap };