@ringcentral/spring-ui 1.12.0 → 1.13.0

package/SplitButton.js

@@ -1,82 +1,74 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useState, useRef, useEffect, useMemo, isValidElement } from 'react';
-import { useEventCallback, useClasses, combineProps, logInDev } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import clsx from 'clsx';
-import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
-import 'framer-motion';
-import { I as Icon } from './chunks/Icon.js';
-import { b as buttonIconSizeMap, B as Button } from './chunks/Button.js';
-import { D as Divider } from './chunks/Divider.js';
-import { I as IconButton } from './chunks/IconButtonLabel.js';
-import { M as Menu } from './chunks/Menu.js';
-import { M as MenuList } from './chunks/MenuList.js';
-import './chunks/useMenuItemSelect.js';
-import { u as useSelect } from './chunks/Select.js';
-import { w as withTooltip } from './chunks/withTooltip.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-import '@mui/base';
-import './chunks/CircularProgressIndicator.js';
-import './chunks/Tooltip.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/Squircle.js';
-import './chunks/useNestedParentMenu.js';
-import './chunks/Popover.js';
-import './chunks/getGrow.js';
-import './chunks/List.js';
-import './chunks/useListNavigation.js';
-import 'tabbable';
-import '@mui/utils';
-import './VirtualizedList.js';
-import 'react-virtuoso';
-import './chunks/useAnimationFrame.js';
-import '@ringcentral/spring-icon';
-import './chunks/useNestedMenuItem.js';
-import './chunks/composeEventHandlers.js';
-import './ListNavigation.js';
-import './chunks/hasContent.js';
-import './chunks/useHelperTextId.js';
-import './chunks/VirtualizedMenu.js';
-
-var SplitButton$1 = {"sui-split-button-root":"sui-split-button-root","sui-split-button-bg":"sui-split-button-bg","sui-button-outlined":"sui-button-outlined","sui-split-button-action-button-root":"sui-split-button-action-button-root","sui-focus-visible":"sui-focus-visible","sui-split-button-divider-contained-primary":"sui-split-button-divider-contained-primary","sui-split-button-divider-contained-danger":"sui-split-button-divider-contained-danger","sui-split-button-divider-contained-warning":"sui-split-button-divider-contained-warning","sui-split-button-divider-contained-success":"sui-split-button-divider-contained-success","sui-split-button-divider-contained-secondary":"sui-split-button-divider-contained-secondary","sui-split-button-divider-contained-neutral":"sui-split-button-divider-contained-neutral","sui-split-button-divider-inverted-primary":"sui-split-button-divider-inverted-primary","sui-split-button-divider-outlined-primary":"sui-split-button-divider-outlined-primary","sui-split-button-divider-inverted-danger":"sui-split-button-divider-inverted-danger","sui-split-button-divider-outlined-danger":"sui-split-button-divider-outlined-danger","sui-split-button-divider-inverted-warning":"sui-split-button-divider-inverted-warning","sui-split-button-divider-outlined-warning":"sui-split-button-divider-outlined-warning","sui-split-button-divider-inverted-success":"sui-split-button-divider-inverted-success","sui-split-button-divider-outlined-success":"sui-split-button-divider-outlined-success","sui-split-button-divider-inverted-secondary":"sui-split-button-divider-inverted-secondary","sui-split-button-divider-inverted-neutral":"sui-split-button-divider-inverted-neutral","sui-disabled":"sui-disabled","sui-split-button-divider-outlined-secondary":"sui-split-button-divider-outlined-secondary","sui-split-button-divider-outlined-neutral":"sui-split-button-divider-outlined-neutral","sui-split-button-divider-text":"sui-split-button-divider-text","sui-split-button-menu-button-root":"sui-split-button-menu-button-root"};
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
+import { combineProps, logInDev, useClasses, useEventCallback } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import clsx from "clsx";
+import "./chunks/4476.js";
+import { buttonIconSizeMap, Button as Button_Button } from "./Button.js";
+import { Divider as Divider_Divider } from "./Divider.js";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+import { Menu as Menu_Menu } from "./Menu.js";
+import { MenuList as MenuList_MenuList } from "./MenuList.js";
+import { useSelect } from "./Select.js";
+import { withTooltip } from "./chunks/4535.js";
+import { ExpandCollapseCaret as ExpandCollapseCaret_ExpandCollapseCaret } from "./chunks/1294.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var SplitButton = ({"sui-split-button-root":"sui-split-button-root","sui-split-button-bg":"sui-split-button-bg","sui-button-outlined":"sui-button-outlined","sui-split-button-action-button-root":"sui-split-button-action-button-root","sui-focus-visible":"sui-focus-visible","sui-split-button-divider-contained-primary":"sui-split-button-divider-contained-primary","sui-split-button-divider-contained-danger":"sui-split-button-divider-contained-danger","sui-split-button-divider-contained-warning":"sui-split-button-divider-contained-warning","sui-split-button-divider-contained-success":"sui-split-button-divider-contained-success","sui-split-button-divider-contained-secondary":"sui-split-button-divider-contained-secondary","sui-split-button-divider-contained-neutral":"sui-split-button-divider-contained-neutral","sui-split-button-divider-inverted-primary":"sui-split-button-divider-inverted-primary","sui-split-button-divider-outlined-primary":"sui-split-button-divider-outlined-primary","sui-split-button-divider-inverted-danger":"sui-split-button-divider-inverted-danger","sui-split-button-divider-outlined-danger":"sui-split-button-divider-outlined-danger","sui-split-button-divider-inverted-warning":"sui-split-button-divider-inverted-warning","sui-split-button-divider-outlined-warning":"sui-split-button-divider-outlined-warning","sui-split-button-divider-inverted-success":"sui-split-button-divider-inverted-success","sui-split-button-divider-outlined-success":"sui-split-button-divider-outlined-success","sui-split-button-divider-inverted-secondary":"sui-split-button-divider-inverted-secondary","sui-split-button-divider-inverted-neutral":"sui-split-button-divider-inverted-neutral","sui-disabled":"sui-disabled","sui-split-button-divider-outlined-secondary":"sui-split-button-divider-outlined-secondary","sui-split-button-divider-outlined-neutral":"sui-split-button-divider-outlined-neutral","sui-split-button-divider-text":"sui-split-button-divider-text","sui-split-button-menu-button-root":"sui-split-button-menu-button-root"});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 const ButtonVariantIconButtonVariantMap = {
     contained: 'contained',
     outlined: 'outlined',
     text: 'icon',
-    inverted: 'inverted',
+    inverted: 'inverted'
 };
 const ExpandCollapseCaretSizeMap = {
     xlarge: 'large',
     large: 'medium',
     medium: 'small',
     small: 'small',
-    xsmall: 'xsmall',
+    xsmall: 'xsmall'
 };
-const SplitButton = withTooltip(forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'SplitButton' });
+const SplitButton_SplitButton = withTooltip(/*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'SplitButton'
+    });
     const { classes, className, size = 'medium', variant = 'contained', color, background = true, loading, disabled, MenuProps, ActionButtonProps: actionButtonPropsProp, MenuButtonProps: menuButtonPropsProp, children: childrenProp, ...rest } = props;
     const [menuAnchorEl, setMenuAnchorEl] = useState(null);
     const [open, setOpen] = useState(false);
     const menuButtonRef = useRef(null);
-    const handleOpen = useEventCallback((newOpen) => {
+    const handleOpen = useEventCallback((newOpen)=>{
         setOpen(newOpen);
     });
     const { getButtonProps, getListboxProps } = useSelect({
         open,
-        handleOpen,
+        handleOpen
     });
-    const handleMenuClose = useEventCallback(() => {
+    const handleMenuClose = useEventCallback(()=>{
         handleOpen(false);
     });
-    useEffect(() => {
+    useEffect(()=>{
         setMenuAnchorEl(menuButtonRef.current);
     }, []);
     const cls = useClasses('split-button', classes, className);
@@ -91,28 +83,25 @@ const SplitButton = withTooltip(forwardRef((inProps, ref) => {
         classes: {
             root: cls('menu-button-root', {
                 disabled,
-                active: open,
-            }),
-        },
+                active: open
+            })
+        }
     }, menuButtonPropsProp);
-    const { actionButtonProps, menuItems } = useMemo(() => {
+    const { actionButtonProps, menuItems } = useMemo(()=>{
         let _actionButtonProps = {};
         const menuItems = [];
-        React.Children.forEach(childrenProp, (child, i) => {
-            if (!isValidElement(child) || child.type === React.Fragment) {
+        react.Children.forEach(childrenProp, (child, i)=>{
+            if (!/*#__PURE__*/ isValidElement(child) || child.type === react.Fragment) {
                 return;
             }
             const childProps = child.props;
             let hasIconChild = false;
             if (i === 0) {
-                let actionButtonContent = actionButtonPropsProp?.title ??
-                    childProps.title ??
-                    childProps.children;
-                if (React.isValidElement(childProps.children) &&
-                    childProps.children.type === Icon) {
+                let actionButtonContent = actionButtonPropsProp?.title ?? childProps.title ?? childProps.children;
+                if (/*#__PURE__*/ react.isValidElement(childProps.children) && childProps.children.type === Icon_Icon) {
                     hasIconChild = true;
-                    actionButtonContent = React.cloneElement(childProps.children, {
-                        size: buttonIconSizeMap[size],
+                    actionButtonContent = /*#__PURE__*/ react.cloneElement(childProps.children, {
+                        size: buttonIconSizeMap[size]
                     });
                 }
                 _actionButtonProps = combineProps({
@@ -125,30 +114,33 @@ const SplitButton = withTooltip(forwardRef((inProps, ref) => {
                     children: actionButtonContent,
                     onClick: childProps.onClick,
                     classes: {
-                        root: clsx(cls('action-button-root'), actionButtonCls(hasIconChild && 'has-start-slot', hasIconChild && 'has-end-slot')),
-                    },
+                        root: clsx(cls('action-button-root'), // Reduces the padding when only an icon is provided
+                        actionButtonCls(hasIconChild && 'has-start-slot', hasIconChild && 'has-end-slot'))
+                    }
                 }, actionButtonPropsProp);
-                if (process.env.NODE_ENV !== 'production' &&
-                    _actionButtonProps.children === undefined) {
+                if (process.env.NODE_ENV !== 'production' && _actionButtonProps.children === undefined) {
                     logInDev({
                         scope: 'SplitButton',
                         level: 'error',
-                        message: 'The first MenuItem must either have children, a title prop or ActionButtonProps.title must be provided',
+                        message: 'The first MenuItem must either have children, a title prop or ActionButtonProps.title must be provided'
                     });
                 }
                 return;
             }
-            menuItems.push(React.cloneElement(child, {
+            menuItems.push(/*#__PURE__*/ react.cloneElement(child, {
                 ...child.props,
                 ...combineProps({
-                    onClick: handleMenuClose,
+                    onClick: handleMenuClose
                 }, {
-                    onClick: childProps.onClick,
+                    onClick: childProps.onClick
                 }),
-                key: `${i}`,
+                key: `${i}`
             }));
         });
-        return { actionButtonProps: _actionButtonProps, menuItems: menuItems };
+        return {
+            actionButtonProps: _actionButtonProps,
+            menuItems: menuItems
+        };
     }, [
         childrenProp,
         handleMenuClose,
@@ -159,17 +151,60 @@ const SplitButton = withTooltip(forwardRef((inProps, ref) => {
         loading,
         disabled,
         cls,
-        actionButtonCls,
+        actionButtonCls
     ]);
-    return (jsxs("div", { className: cls('root'), role: "group", ...rest, ref: ref, children: [jsx("div", { className: clsx(cls('bg'), actionButtonCls('root', variant, color, size, !background && 'hide-background', !background && `${variant}-hide-background`, `${variant}-${color}`, `${variant}-${size}`, {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('root'),
+        role: "group",
+        ...rest,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: clsx(cls('bg'), actionButtonCls('root', variant, color, size, !background && 'hide-background', !background && `${variant}-hide-background`, `${variant}-${color}`, `${variant}-${size}`, {
                     loading,
-                    disabled,
-                })) }), jsx(Button, { ...actionButtonProps }), jsx(Divider, { className: cls('divider', `divider-${variant}`, `divider-${variant}-${color}`, `divider-${color}`, {
-                    disabled,
-                }), orientation: "vertical", flexItem: true }), jsx(IconButton, { ...combineProps(menuButtonProps, getButtonProps()), ref: menuButtonRef, children: jsx(ExpandCollapseCaret, { expanded: open, size: ExpandCollapseCaretSizeMap[size] }) }), menuAnchorEl && (jsx(Menu, { placement: "bottom", variant: "pointed", ...combineProps(MenuProps, {
-                    onClose: handleMenuClose,
-                }), anchorEl: menuAnchorEl, open: open, children: jsx(MenuList, { nowrap: false, widget: "select", ...getListboxProps(), children: menuItems }) }))] }));
+                    disabled
+                }))
+            }),
+            /*#__PURE__*/ jsx(Button_Button, {
+                ...actionButtonProps
+            }),
+            /*#__PURE__*/ jsx(Divider_Divider, {
+                className: cls('divider', `divider-${variant}`, `divider-${variant}-${color}`, `divider-${color}`, {
+                    disabled
+                }),
+                orientation: "vertical",
+                flexItem: true
+            }),
+            /*#__PURE__*/ jsx(IconButton_IconButton, {
+                ...combineProps(menuButtonProps, getButtonProps()),
+                ref: menuButtonRef,
+                children: /*#__PURE__*/ jsx(ExpandCollapseCaret_ExpandCollapseCaret, {
+                    expanded: open,
+                    size: ExpandCollapseCaretSizeMap[size]
+                })
+            }),
+            menuAnchorEl && /*#__PURE__*/ jsx(Menu_Menu, {
+                placement: "bottom",
+                variant: "pointed",
+                ...combineProps(MenuProps, {
+                    onClose: handleMenuClose
+                }),
+                anchorEl: menuAnchorEl,
+                open: open,
+                children: /*#__PURE__*/ jsx(MenuList_MenuList, {
+                    widget: "select",
+                    ...getListboxProps(),
+                    children: menuItems
+                })
+            })
+        ]
+    });
 }));
-SplitButton.displayName = 'SuiSplitButton';
+SplitButton_SplitButton.displayName = 'SuiSplitButton';
+
+
+
+
+
 
-export { SplitButton, SplitButton$1 as splitButtonStyle };
+export { SplitButton as splitButtonStyle, SplitButton_SplitButton as SplitButton };

package/Squircle.js

@@ -1,9 +1,6 @@
-export { S as Squircle } from './chunks/Squircle.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
 
-var Squircle = {"sui-squircle-root":"sui-squircle-root","sui-squircle-interactive":"sui-squircle-interactive","sui-active":"sui-active","sui-squircle-content":"sui-squircle-content","sui-squircle-ring":"sui-squircle-ring"};
 
-export { Squircle as squircleStyle };
+
+
+
+export { Squircle, squircleStyle } from "./chunks/1250.js";

package/StatusIndicator.js

@@ -1,11 +1,53 @@
-export { S as StatusIndicator } from './chunks/StatusIndicator.js';
-import 'react/jsx-runtime';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-icon';
-import '@ringcentral/spring-theme';
-import './chunks/Icon.js';
-import 'react';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClasses } from "@ringcentral/spring-base";
+import { CheckBoldSm, MinusBoldMd } from "@ringcentral/spring-icon";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
 
-var StatusIndicator = {"sui-status-indicator-root":"sui-status-indicator-root","sui-status-indicator-large":"sui-status-indicator-large","sui-status-indicator-medium":"sui-status-indicator-medium","sui-status-indicator-small":"sui-status-indicator-small","sui-icon":"sui-icon","sui-status-indicator-dnd":"sui-status-indicator-dnd","sui-status-indicator-busy":"sui-status-indicator-busy","sui-status-indicator-available":"sui-status-indicator-available","sui-status-indicator-unavailable":"sui-status-indicator-unavailable"};
 
-export { StatusIndicator as statusIndicatorStyle };
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var StatusIndicator = ({"sui-status-indicator-root":"sui-status-indicator-root","sui-status-indicator-large":"sui-status-indicator-large","sui-status-indicator-medium":"sui-status-indicator-medium","sui-status-indicator-small":"sui-status-indicator-small","sui-icon":"sui-icon","sui-status-indicator-dnd":"sui-status-indicator-dnd","sui-status-indicator-busy":"sui-status-indicator-busy","sui-status-indicator-available":"sui-status-indicator-available","sui-status-indicator-unavailable":"sui-status-indicator-unavailable"});
+
+
+
+
+
+
+const IconSizeMap = {
+    large: 'small',
+    medium: 'xsmall',
+    small: 'xsmall'
+};
+const StatusIndicator_StatusIndicator = (inProps)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'StatusIndicator'
+    });
+    const { classes, className, size = 'medium', variant = 'available', ...rest } = props;
+    const cls = useClasses('status-indicator', classes, className);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('root', size, variant),
+        ...rest,
+        children: [
+            variant === 'dnd' && /*#__PURE__*/ jsx(Icon_Icon, {
+                symbol: MinusBoldMd,
+                size: IconSizeMap[size]
+            }),
+            variant === 'available' && /*#__PURE__*/ jsx(Icon_Icon, {
+                symbol: CheckBoldSm,
+                size: IconSizeMap[size]
+            })
+        ]
+    });
+};
+StatusIndicator_StatusIndicator.displayName = 'SuiStatusIndicator';
+
+
+
+
+
+
+export { StatusIndicator as statusIndicatorStyle, StatusIndicator_StatusIndicator as StatusIndicator };

package/Step.js

@@ -1,44 +1,55 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
-import { useClasses, useId } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { b as useStepperContext, S as StepContext } from './chunks/StepperContext.js';
-export { u as useStepContext } from './chunks/StepperContext.js';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useClasses, useId } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { StepContext, useStepperContext } from "./chunks/2956.js";
 
-var Step$1 = {"sui-step-root":"sui-step-root","sui-step-horizontal":"sui-step-horizontal","sui-step-button":"sui-step-button","sui-step-vertical":"sui-step-vertical","sui-step-vertical-hide-connector":"sui-step-vertical-hide-connector","sui-step-fixed-width":"sui-step-fixed-width"};
 
-const Step = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Step' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Step = ({"sui-step-root":"sui-step-root","sui-step-horizontal":"sui-step-horizontal","sui-step-button":"sui-step-button","sui-step-vertical":"sui-step-vertical","sui-step-vertical-hide-connector":"sui-step-vertical-hide-connector","sui-step-fixed-width":"sui-step-fixed-width"});
+
+
+
+
+
+
+
+const Step_Step = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Step'
+    });
     const { component: StepRoot = 'li', classes, className, children, active: activeProp, completed: completedProp, disabled: disabledProp, variant = 'contained', expanded = false, index = 0, last, id, ...rest } = props;
     const cls = useClasses('step', classes, className);
-    const { activeStep = 0, connector, orientation, nonLinear, fixedStepWidth, } = useStepperContext();
+    const { activeStep = 0, connector, orientation, nonLinear, fixedStepWidth } = useStepperContext();
     let [active = false, completed = false, disabled = false] = [
         activeProp,
         completedProp,
-        disabledProp,
+        disabledProp
     ];
     if (activeStep === index) {
         active = activeProp !== undefined ? activeProp : true;
-    }
-    else if (!nonLinear && activeStep > index) {
+    } else if (!nonLinear && activeStep > index) {
         completed = completedProp !== undefined ? completedProp : true;
-    }
-    else if (!nonLinear && activeStep < index) {
+    } else if (!nonLinear && activeStep < index) {
         disabled = disabledProp !== undefined ? disabledProp : true;
     }
     const stepLabelId = useId(id);
-    const contextValue = useMemo(() => ({
-        index,
-        last,
-        expanded,
-        icon: index + 1,
-        active,
-        completed,
-        disabled,
-        variant,
-        id: stepLabelId,
-        connector,
-    }), [
+    const contextValue = useMemo(()=>({
+            index,
+            last,
+            expanded,
+            icon: index + 1,
+            active,
+            completed,
+            disabled,
+            variant,
+            id: stepLabelId,
+            connector
+        }), [
         index,
         last,
         expanded,
@@ -47,19 +58,33 @@ const Step = forwardRef((inProps, ref) => {
         completed,
         disabled,
         variant,
-        stepLabelId,
+        stepLabelId
     ]);
-    return (jsxs(StepContext.Provider, { value: contextValue, children: [connector &&
-                orientation === 'horizontal' &&
-                !fixedStepWidth &&
-                index !== 0
-                ? connector
-                : null, jsx(StepRoot, { className: cls('root', orientation, {
+    return /*#__PURE__*/ jsxs(StepContext.Provider, {
+        value: contextValue,
+        children: [
+            connector && orientation === 'horizontal' && !fixedStepWidth && index !== 0 ? connector : null,
+            /*#__PURE__*/ jsx(StepRoot, {
+                className: cls('root', orientation, {
                     completed,
                     'fixed-width': fixedStepWidth,
-                    'vertical-hide-connector': orientation === 'vertical' && !connector,
-                }), "aria-disabled": disabled, ...rest, ref: ref, children: children })] }));
+                    'vertical-hide-connector': orientation === 'vertical' && !connector
+                }),
+                "aria-disabled": disabled,
+                ...rest,
+                ref: ref,
+                children: children
+            })
+        ]
+    });
 });
-Step.displayName = 'SuiStep';
+Step_Step.displayName = 'SuiStep';
+
+
+
+
+
+
 
-export { Step, StepContext, Step$1 as stepStyle };
+export { Step as stepStyle, Step_Step as Step };
+export { StepContext, useStepContext } from "./chunks/2956.js";

package/StepButton.js

@@ -1,40 +1,68 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, cloneElement } from 'react';
-import { useClasses, useButton, isSuiElement, combineProps } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { b as useStepperContext, u as useStepContext } from './chunks/StepperContext.js';
-import { S as StepLabel } from './chunks/StepLabel.js';
-import 'clsx';
-import './chunks/StepIcon.js';
-import '@ringcentral/spring-icon';
-import './chunks/Icon.js';
-
-var StepButton$1 = {"sui-step-button-root":"sui-step-button-root","sui-active":"sui-active","sui-focus-visible":"sui-focus-visible","sui-step-button-vertical":"sui-step-button-vertical","sui-step-button-horizontal":"sui-step-button-horizontal","sui-step-button-fixed-width":"sui-step-button-fixed-width","sui-step-button-highlighted":"sui-step-button-highlighted","sui-step-button-hide-connector":"sui-step-button-hide-connector"};
-
-const StepButton = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'StepButton' });
+import { jsx } from "react/jsx-runtime";
+import { cloneElement, forwardRef } from "react";
+import { combineProps, isSuiElement, useButton, useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { useStepContext, useStepperContext } from "./chunks/2956.js";
+import { StepLabel as StepLabel_StepLabel } from "./StepLabel.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var StepButton = ({"sui-step-button-root":"sui-step-button-root","sui-active":"sui-active","sui-focus-visible":"sui-focus-visible","sui-step-button-vertical":"sui-step-button-vertical","sui-step-button-horizontal":"sui-step-button-horizontal","sui-step-button-fixed-width":"sui-step-button-fixed-width","sui-step-button-highlighted":"sui-step-button-highlighted","sui-step-button-hide-connector":"sui-step-button-hide-connector"});
+
+
+
+
+
+
+
+
+const StepButton_StepButton = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'StepButton'
+    });
     const { component: StepButtonRoot = 'button', classes, className, children, icon, symbol, optional, StepLabelProps, ...rest } = props;
     const cls = useClasses('step-button', classes, className);
     const { getRootProps, focusVisible, active } = useButton({
         ...props,
-        rootRef: ref,
+        rootRef: ref
     });
     const { orientation, fixedStepWidth, connector } = useStepperContext();
     const { disabled, active: activeStep, variant } = useStepContext();
     const childProps = {
         icon,
         symbol,
-        optional,
+        optional
     };
-    const child = isSuiElement(children, ['SuiStepLabel']) ? (cloneElement(children, childProps)) : (jsx(StepLabel, { ...combineProps(childProps, StepLabelProps), children: children }));
-    return (jsx(StepButtonRoot, { disabled: disabled, "aria-current": activeStep ? 'step' : undefined, className: cls('root', orientation, {
+    const child = isSuiElement(children, [
+        'SuiStepLabel'
+    ]) ? /*#__PURE__*/ cloneElement(children, childProps) : /*#__PURE__*/ jsx(StepLabel_StepLabel, {
+        ...combineProps(childProps, StepLabelProps),
+        children: children
+    });
+    return /*#__PURE__*/ jsx(StepButtonRoot, {
+        disabled: disabled,
+        "aria-current": activeStep ? 'step' : undefined,
+        className: cls('root', orientation, {
             focusVisible,
             'fixed-width': fixedStepWidth,
             active,
             highlighted: activeStep && variant === 'outlined',
-            'hide-connector': !connector,
-        }), ...getRootProps(rest), ref: ref, children: child }));
+            'hide-connector': !connector
+        }),
+        ...getRootProps(rest),
+        ref: ref,
+        children: child
+    });
 });
-StepButton.displayName = 'SuiStepButton';
+StepButton_StepButton.displayName = 'SuiStepButton';
+
+
+
+
+
 
-export { StepButton, StepButton$1 as stepButtonStyle };
+export { StepButton as stepButtonStyle, StepButton_StepButton as StepButton };