@ringcentral/spring-ui 1.11.2 → 1.13.0

package/Avatar.js

@@ -1,16 +1,34 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, Children } from 'react';
-import clsx from 'clsx';
-import { useImgLoaded, useClasses, useFocusVisible, useForkRef } from '@ringcentral/spring-base';
-import { ProfileMd } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { A as AvatarGroupContext } from './chunks/AvatarGroup.js';
-import { I as Icon } from './chunks/Icon.js';
-import { O as Overlap } from './chunks/Overlap.js';
-import { S as Squircle } from './chunks/Squircle.js';
-import { S as StatusIndicator } from './chunks/StatusIndicator.js';
-
-var Avatar$1 = {"sui-avatar-shape":"sui-avatar-shape","sui-avatar-content":"sui-avatar-content","sui-avatar-default":"sui-avatar-default","sui-avatar-primary":"sui-avatar-primary","sui-avatar-circle":"sui-avatar-circle","sui-avatar-circle-content":"sui-avatar-circle-content","sui-avatar-circle-default":"sui-avatar-circle-default","sui-avatar-circle-primary":"sui-avatar-circle-primary","sui-focus-visible":"sui-focus-visible","sui-avatar-img":"sui-avatar-img","sui-avatar-indicator":"sui-avatar-indicator","sui-avatar-root":"sui-avatar-root","sui-disabled":"sui-disabled","sui-avatar-xxlarge-content":"sui-avatar-xxlarge-content","sui-avatar-xlarge-content":"sui-avatar-xlarge-content","sui-avatar-xxlarge":"sui-avatar-xxlarge","sui-avatar-xlarge":"sui-avatar-xlarge","sui-avatar-large":"sui-avatar-large","sui-avatar-large-content":"sui-avatar-large-content","sui-avatar-medium":"sui-avatar-medium","sui-avatar-medium-content":"sui-avatar-medium-content","sui-avatar-small":"sui-avatar-small","sui-avatar-small-content":"sui-avatar-small-content","sui-avatar-xsmall-content":"sui-avatar-xsmall-content","sui-avatar-xxsmall-content":"sui-avatar-xxsmall-content","sui-avatar-xsmall":"sui-avatar-xsmall","sui-avatar-xxsmall":"sui-avatar-xxsmall","sui-avatar-clickable-shape":"sui-avatar-clickable-shape","sui-avatar-clickable-indicator":"sui-avatar-clickable-indicator","sui-avatar-clickable-hover-tint":"sui-avatar-clickable-hover-tint","sui-avatar-clickable-hover-tint-default-circle":"sui-avatar-clickable-hover-tint-default-circle","sui-avatar-clickable-hover-tint-primary-circle":"sui-avatar-clickable-hover-tint-primary-circle","sui-avatar-clickable":"sui-avatar-clickable","sui-avatar-hover-tint":"sui-avatar-hover-tint","sui-active":"sui-active"};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, useContext } from "react";
+import clsx from "clsx";
+import { useClasses, useFocusVisible, useForkRef, useImgLoaded } from "@ringcentral/spring-base";
+import { ProfileMd } from "@ringcentral/spring-icon";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { AvatarGroupContext } from "./AvatarGroup.js";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import { Overlap as Overlap_Overlap } from "./Overlap.js";
+import { Squircle as Squircle_Squircle } from "./chunks/1250.js";
+import { StatusIndicator as StatusIndicator_StatusIndicator } from "./StatusIndicator.js";
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Avatar = ({"sui-avatar-shape":"sui-avatar-shape","sui-avatar-content":"sui-avatar-content","sui-avatar-default":"sui-avatar-default","sui-avatar-primary":"sui-avatar-primary","sui-avatar-circle":"sui-avatar-circle","sui-avatar-circle-content":"sui-avatar-circle-content","sui-avatar-circle-default":"sui-avatar-circle-default","sui-avatar-circle-primary":"sui-avatar-circle-primary","sui-focus-visible":"sui-focus-visible","sui-avatar-img":"sui-avatar-img","sui-avatar-indicator":"sui-avatar-indicator","sui-avatar-root":"sui-avatar-root","sui-disabled":"sui-disabled","sui-avatar-xxlarge-content":"sui-avatar-xxlarge-content","sui-avatar-xlarge-content":"sui-avatar-xlarge-content","sui-avatar-xxlarge":"sui-avatar-xxlarge","sui-avatar-xlarge":"sui-avatar-xlarge","sui-avatar-large":"sui-avatar-large","sui-avatar-large-content":"sui-avatar-large-content","sui-avatar-medium":"sui-avatar-medium","sui-avatar-medium-content":"sui-avatar-medium-content","sui-avatar-small":"sui-avatar-small","sui-avatar-small-content":"sui-avatar-small-content","sui-avatar-xsmall-content":"sui-avatar-xsmall-content","sui-avatar-xxsmall-content":"sui-avatar-xxsmall-content","sui-avatar-xsmall":"sui-avatar-xsmall","sui-avatar-xxsmall":"sui-avatar-xxsmall","sui-avatar-clickable-shape":"sui-avatar-clickable-shape","sui-avatar-clickable-indicator":"sui-avatar-clickable-indicator","sui-avatar-clickable-hover-tint":"sui-avatar-clickable-hover-tint","sui-avatar-clickable-hover-tint-default-circle":"sui-avatar-clickable-hover-tint-default-circle","sui-avatar-clickable-hover-tint-primary-circle":"sui-avatar-clickable-hover-tint-primary-circle","sui-avatar-clickable":"sui-avatar-clickable","sui-avatar-hover-tint":"sui-avatar-hover-tint","sui-active":"sui-active"});
+
+
+
+
+
+
+
+
+
+
+
 
 const IconSizeMap = {
     xxlarge: 'large',
@@ -19,7 +37,7 @@ const IconSizeMap = {
     medium: 'small',
     small: 'xsmall',
     xsmall: 'xsmall',
-    xxsmall: 'xsmall',
+    xxsmall: 'xsmall'
 };
 const StatusIndicatorSizeMap = {
     xxlarge: 'large',
@@ -28,17 +46,20 @@ const StatusIndicatorSizeMap = {
     medium: 'medium',
     small: 'small',
     xsmall: undefined,
-    xxsmall: undefined,
+    xxsmall: undefined
 };
-const hasRenderableFallbackChildren = (children) => Children.toArray(children).some((child) => child !== '');
-const Avatar = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Avatar' });
+const hasRenderableFallbackChildren = (children)=>Children.toArray(children).some((child)=>child !== '');
+const Avatar_Avatar = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Avatar'
+    });
     const { component, classes, className, children: childrenProp, imgProps, alt, src, srcSet, size: sizeProp, color = 'default', variant = 'circle', clickable: clickableProp, symbol, avatarShapeRef, showStatusIndicator, IndicatorProps, rootProps, disabled, onClick, ...rest } = props;
     let children = null;
     const loaded = useImgLoaded({
         ...imgProps,
         src,
-        srcSet,
+        srcSet
     });
     const hasImg = Boolean(src || srcSet);
     const shouldShowImage = hasImg && loaded === 'loaded';
@@ -51,10 +72,12 @@ const Avatar = forwardRef((inProps, ref) => {
         srcSet,
         ...imgProps,
         'aria-hidden': shouldShowFallback ? true : imgProps?.['aria-hidden'],
-        className: clsx(cls('img'), imgProps?.className, shouldShowFallback && 'sr-only'),
+        className: clsx(cls('img'), imgProps?.className, shouldShowFallback && 'sr-only')
     };
     const AvatarImg = 'img';
-    const image = shouldMountImage ? jsx(AvatarImg, { ...imageProps }) : null;
+    const image = shouldMountImage ? /*#__PURE__*/ jsx(AvatarImg, {
+        ...imageProps
+    }) : null;
     const groupContext = useContext(AvatarGroupContext);
     const size = sizeProp || groupContext?.size || 'xlarge';
     const groupClassName = groupContext?.className || '';
@@ -62,67 +85,62 @@ const Avatar = forwardRef((inProps, ref) => {
     let fallback = null;
     let fallbackFillShape = false;
     if (symbol) {
-        fallback = jsx(Icon, { size: IconSizeMap[size], symbol: symbol });
-    }
-    else if (hasRenderableFallbackChildren(childrenProp)) {
+        fallback = /*#__PURE__*/ jsx(Icon_Icon, {
+            size: IconSizeMap[size],
+            symbol: symbol
+        });
+    } else if (hasRenderableFallbackChildren(childrenProp)) {
         fallback = childrenProp;
-    }
-    else if (hasImg && alt) {
+    } else if (hasImg && alt) {
         fallback = alt[0];
         fallbackFillShape = true;
-    }
-    else {
-        fallback = jsx(Icon, { size: IconSizeMap[size], symbol: ProfileMd });
+    } else {
+        fallback = /*#__PURE__*/ jsx(Icon_Icon, {
+            size: IconSizeMap[size],
+            symbol: ProfileMd
+        });
     }
     if (shouldShowImage) {
         children = image;
         fillShape = true;
-    }
-    else {
-        children = (jsxs(Fragment, { children: [fallback, image] }));
+    } else {
+        children = /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                fallback,
+                image
+            ]
+        });
         fillShape = fallbackFillShape;
     }
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
     const avatarRef = useForkRef(avatarShapeRef, focusVisibleRef);
-    const clickable = clickableProp !== false && onClick ? true : (clickableProp ?? false);
+    const clickable = clickableProp !== false && onClick ? true : clickableProp ?? false;
     const interactive = clickable && !disabled;
     const supportsStatusIndicator = size !== 'xxsmall' && size !== 'xsmall';
     const shapeComponent = component ?? (clickable ? 'button' : 'div');
-    const AvatarShape = variant === 'squircle' ? Squircle : shapeComponent;
+    const AvatarShape = variant === 'squircle' ? Squircle_Squircle : shapeComponent;
     const isButtonElement = shapeComponent === 'button';
     const hasExplicitAccessibleName = rest['aria-label'] !== undefined || rest['aria-labelledby'] !== undefined;
-    const accessibleNameProps = (clickable || isButtonElement) &&
-        hasImg &&
-        alt &&
-        !hasExplicitAccessibleName
-        ? {
-            'aria-label': alt,
-        }
-        : {};
-    const shapeProps = variant === 'squircle'
-        ? {
-            component: shapeComponent,
-            focusVisible: focusVisible && interactive,
-            fillShape,
-            interactive,
-        }
-        : {};
-    const ariaProps = isButtonElement
-        ? {
-            disabled,
-        }
-        : clickable && disabled
-            ? {
-                'aria-disabled': true,
-            }
-            : {};
-    const nonInteractiveShapeProps = !isButtonElement && clickable && disabled
-        ? {
-            tabIndex: -1,
-        }
-        : {};
+    // Keep interactive image avatars named by the image alt while fallback content is visible.
+    const accessibleNameProps = (clickable || isButtonElement) && hasImg && alt && !hasExplicitAccessibleName ? {
+        'aria-label': alt
+    } : {};
+    const shapeProps = variant === 'squircle' ? {
+        component: shapeComponent,
+        focusVisible: focusVisible && interactive,
+        fillShape,
+        interactive
+    } : {};
+    const ariaProps = isButtonElement ? {
+        disabled
+    } : clickable && disabled ? {
+        'aria-disabled': true
+    } : {};
+    const nonInteractiveShapeProps = !isButtonElement && clickable && disabled ? {
+        tabIndex: -1
+    } : {};
     const rootClickHandler = onClick;
-    const handleClick = (event) => {
+    const handleClick = (event)=>{
         if (disabled) {
             event.preventDefault();
             event.stopPropagation();
@@ -130,14 +148,57 @@ const Avatar = forwardRef((inProps, ref) => {
         }
         rootClickHandler?.(event);
     };
-    return (jsx(Overlap, { position: {
+    return /*#__PURE__*/ jsx(Overlap_Overlap, {
+        position: {
             bottom: '-1px',
-            right: '-1px',
-        }, floater: supportsStatusIndicator && showStatusIndicator ? (jsx(StatusIndicator, { size: StatusIndicatorSizeMap[size], ...IndicatorProps })) : undefined, className: clsx(className, groupClassName), classes: {
-            root: cls('root', size, { disabled }),
-            floater: cls('indicator', interactive && 'clickable-indicator'),
-        }, ...rootProps, ref: ref, children: jsxs(AvatarShape, { className: cls('shape', variant, color, { clickable }, interactive && 'clickable-shape', interactive && `clickable-${variant}`), ...focusVisibleHandlers, ...shapeProps, ...ariaProps, ...accessibleNameProps, ...nonInteractiveShapeProps, ...rest, onClick: onClick ? handleClick : undefined, ref: avatarRef, children: [jsx("div", { className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`), children: children }), variant === 'circle' && (jsx("div", { className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) })), variant === 'squircle' && interactive && (jsx(Squircle, { interactive: false, className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) }))] }) }));
+            right: '-1px'
+        },
+        floater: supportsStatusIndicator && showStatusIndicator ? /*#__PURE__*/ jsx(StatusIndicator_StatusIndicator, {
+            size: StatusIndicatorSizeMap[size],
+            ...IndicatorProps
+        }) : undefined,
+        className: clsx(className, groupClassName),
+        classes: {
+            root: cls('root', size, {
+                disabled
+            }),
+            floater: cls('indicator', interactive && 'clickable-indicator')
+        },
+        ...rootProps,
+        ref: ref,
+        children: /*#__PURE__*/ jsxs(AvatarShape, {
+            className: cls('shape', variant, color, {
+                clickable
+            }, interactive && 'clickable-shape', interactive && `clickable-${variant}`),
+            ...focusVisibleHandlers,
+            ...shapeProps,
+            ...ariaProps,
+            ...accessibleNameProps,
+            ...nonInteractiveShapeProps,
+            ...rest,
+            onClick: onClick ? handleClick : undefined,
+            ref: avatarRef,
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`),
+                    children: children
+                }),
+                variant === 'circle' && /*#__PURE__*/ jsx("div", {
+                    className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`)
+                }),
+                variant === 'squircle' && interactive && /*#__PURE__*/ jsx(Squircle_Squircle, {
+                    interactive: false,
+                    className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`)
+                })
+            ]
+        })
+    });
 });
-Avatar.displayName = 'SuiAvatar';
+Avatar_Avatar.displayName = 'SuiAvatar';
+
+
+
+
+
 
-export { Avatar, Avatar$1 as avatarStyles };
+export { Avatar as avatarStyles, Avatar_Avatar as Avatar };

package/AvatarGroup.js

@@ -1,9 +1,52 @@
-export { a as AvatarGroup, A as AvatarGroupContext } from './chunks/AvatarGroup.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
+import { jsx } from "react/jsx-runtime";
+import { Children, createContext, forwardRef } from "react";
+import { logInDev, useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
 
-var AvatarGroup = {"sui-avatar-group-root":"sui-avatar-group-root","sui-avatar-group-item":"sui-avatar-group-item"};
 
-export { AvatarGroup as avatarGroupStyles };
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var AvatarGroup = ({"sui-avatar-group-root":"sui-avatar-group-root","sui-avatar-group-item":"sui-avatar-group-item"});
+
+
+
+
+
+const AvatarGroupContext = /*#__PURE__*/ createContext({});
+const AvatarGroup_AvatarGroup = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'AvatarGroup'
+    });
+    const { component: AvatarGroupRoot = 'div', classes, className, children, ...rest } = props;
+    const cls = useClasses('avatar-group', classes, className);
+    const childrenLength = Children.toArray(children).filter(Boolean).length;
+    if (process.env.NODE_ENV !== 'production' && childrenLength !== 2) {
+        logInDev({
+            scope: 'AvatarGroup',
+            message: 'AvatarGroup only accept 2 valid child components as its children'
+        });
+    }
+    return /*#__PURE__*/ jsx(AvatarGroupContext.Provider, {
+        value: {
+            size: 'small',
+            className: cls('item')
+        },
+        children: /*#__PURE__*/ jsx(AvatarGroupRoot, {
+            className: cls('root'),
+            ...rest,
+            ref: ref,
+            children: children
+        })
+    });
+});
+AvatarGroup_AvatarGroup.displayName = 'SuiAvatarGroup';
+
+
+
+
+
+
+export { AvatarGroup as avatarGroupStyles, AvatarGroupContext, AvatarGroup_AvatarGroup as AvatarGroup };

package/Backdrop.js

@@ -1,9 +1,47 @@
-export { B as Backdrop } from './chunks/Backdrop.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
 
-var Backdrop = {"sui-backdrop-root":"sui-backdrop-root","sui-backdrop-transparent":"sui-backdrop-transparent"};
 
-export { Backdrop as backdropStyles };
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Backdrop = ({"sui-backdrop-root":"sui-backdrop-root","sui-backdrop-transparent":"sui-backdrop-transparent"});
+
+
+
+
+
+const Backdrop_Backdrop = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Backdrop'
+    });
+    const { classes, className, children, isTransparent = false, onClick, ...rest } = props;
+    const cls = useClasses('backdrop', classes, className);
+    const handleClick = (e)=>{
+        e.stopPropagation();
+        onClick?.(e);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root', {
+            transparent: isTransparent
+        }),
+        "aria-hidden": true,
+        tabIndex: -1,
+        ...rest,
+        ref: ref,
+        onClick: handleClick,
+        children: children
+    });
+});
+Backdrop_Backdrop.displayName = 'SuiBackdrop';
+
+
+
+
+
+
+export { Backdrop as backdropStyles, Backdrop_Backdrop as Backdrop };

package/Badge.js

@@ -1,15 +1,77 @@
-export { B as Badge } from './chunks/Badge.js';
-import 'react/jsx-runtime';
-import 'react';
-import 'framer-motion';
-import 'lodash/isNumber';
-import 'lodash/kebabCase';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import './chunks/Icon.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-
-var Badge = {"sui-badge-root":"sui-badge-root","sui-badge-content":"sui-badge-content","sui-badge-primary":"sui-badge-primary","sui-badge-danger":"sui-badge-danger","sui-badge-success":"sui-badge-success","sui-badge-warning":"sui-badge-warning","sui-badge-secondary":"sui-badge-secondary","sui-badge-absolute":"sui-badge-absolute","sui-badge-standard":"sui-badge-standard","sui-badge-standard-small":"sui-badge-standard-small","sui-badge-standard-medium":"sui-badge-standard-medium","sui-badge-standard-primary":"sui-badge-standard-primary","sui-badge-standard-contained":"sui-badge-standard-contained","sui-badge-standard-contained-small":"sui-badge-standard-contained-small","sui-badge-standard-contained-medium":"sui-badge-standard-contained-medium","sui-badge-standard-outlined":"sui-badge-standard-outlined","sui-badge-standard-outlined-small":"sui-badge-standard-outlined-small","sui-badge-standard-outlined-medium":"sui-badge-standard-outlined-medium","sui-badge-dot":"sui-badge-dot","sui-badge-dot-primary":"sui-badge-dot-primary","sui-badge-dot-danger":"sui-badge-dot-danger","sui-badge-dot-success":"sui-badge-dot-success","sui-badge-dot-warning":"sui-badge-dot-warning","sui-badge-dot-contained-small":"sui-badge-dot-contained-small","sui-badge-dot-contained-medium":"sui-badge-dot-contained-medium","sui-badge-dot-outlined":"sui-badge-dot-outlined","sui-badge-dot-outlined-small":"sui-badge-dot-outlined-small","sui-badge-dot-outlined-medium":"sui-badge-dot-outlined-medium","sui-badge-rectangular":"sui-badge-rectangular","sui-badge-circular":"sui-badge-circular","sui-badge-rectangular-top-right":"sui-badge-rectangular-top-right","sui-badge-rectangular-bottom-right":"sui-badge-rectangular-bottom-right","sui-badge-rectangular-top-left":"sui-badge-rectangular-top-left","sui-badge-rectangular-bottom-left":"sui-badge-rectangular-bottom-left","sui-badge-circular-top-right":"sui-badge-circular-top-right","sui-badge-circular-bottom-right":"sui-badge-circular-bottom-right","sui-badge-circular-top-left":"sui-badge-circular-top-left","sui-badge-circular-bottom-left":"sui-badge-circular-bottom-left"};
-
-export { Badge as badgeStyles };
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import isNumber from "lodash/isNumber";
+import kebabCase from "lodash/kebabCase";
+import { useClasses } from "@ringcentral/spring-base";
+import { motionTransition, useThemeProps } from "@ringcentral/spring-theme";
+import "./chunks/4476.js";
+import { useMotionSafeTransition } from "./chunks/1294.js";
+
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Badge = ({"sui-badge-root":"sui-badge-root","sui-badge-content":"sui-badge-content","sui-badge-primary":"sui-badge-primary","sui-badge-danger":"sui-badge-danger","sui-badge-success":"sui-badge-success","sui-badge-warning":"sui-badge-warning","sui-badge-secondary":"sui-badge-secondary","sui-badge-absolute":"sui-badge-absolute","sui-badge-standard":"sui-badge-standard","sui-badge-standard-small":"sui-badge-standard-small","sui-badge-standard-medium":"sui-badge-standard-medium","sui-badge-standard-primary":"sui-badge-standard-primary","sui-badge-standard-contained":"sui-badge-standard-contained","sui-badge-standard-contained-small":"sui-badge-standard-contained-small","sui-badge-standard-contained-medium":"sui-badge-standard-contained-medium","sui-badge-standard-outlined":"sui-badge-standard-outlined","sui-badge-standard-outlined-small":"sui-badge-standard-outlined-small","sui-badge-standard-outlined-medium":"sui-badge-standard-outlined-medium","sui-badge-dot":"sui-badge-dot","sui-badge-dot-primary":"sui-badge-dot-primary","sui-badge-dot-danger":"sui-badge-dot-danger","sui-badge-dot-success":"sui-badge-dot-success","sui-badge-dot-warning":"sui-badge-dot-warning","sui-badge-dot-contained-small":"sui-badge-dot-contained-small","sui-badge-dot-contained-medium":"sui-badge-dot-contained-medium","sui-badge-dot-outlined":"sui-badge-dot-outlined","sui-badge-dot-outlined-small":"sui-badge-dot-outlined-small","sui-badge-dot-outlined-medium":"sui-badge-dot-outlined-medium","sui-badge-rectangular":"sui-badge-rectangular","sui-badge-circular":"sui-badge-circular","sui-badge-rectangular-top-right":"sui-badge-rectangular-top-right","sui-badge-rectangular-bottom-right":"sui-badge-rectangular-bottom-right","sui-badge-rectangular-top-left":"sui-badge-rectangular-top-left","sui-badge-rectangular-bottom-left":"sui-badge-rectangular-bottom-left","sui-badge-circular-top-right":"sui-badge-circular-top-right","sui-badge-circular-bottom-right":"sui-badge-circular-bottom-right","sui-badge-circular-top-left":"sui-badge-circular-top-left","sui-badge-circular-bottom-left":"sui-badge-circular-bottom-left"});
+
+
+
+
+
+
+
+
+
+const Badge_Badge = (inProps)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Badge'
+    });
+    const { count, classes, showZero, className, invisible, forceOverlap, type = 'standard', max = 999, size = 'small', color = 'primary', variant = 'contained', children, anchorOrigin = 'topRight', overlap = 'rectangular', ...rest } = props;
+    const cls = useClasses('badge', classes, className);
+    const transition = useMotionSafeTransition(motionTransition["haste-01-fast"]);
+    const numeric = isNumber(count);
+    const content = type === 'standard' ? numeric && count > max ? `${max}+` : count : undefined;
+    const toOrigin = useMemo(()=>kebabCase(anchorOrigin), [
+        anchorOrigin
+    ]);
+    const overlapMode = Boolean(children || forceOverlap);
+    return /*#__PURE__*/ jsxs("span", {
+        className: cls('root', {
+            absolute: !children && forceOverlap
+        }),
+        ...rest,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(AnimatePresence, {
+                initial: false,
+                children: invisible || !showZero && count === 0 || content === undefined && type === 'standard' ? null : /*#__PURE__*/ jsx(motion.span, {
+                    initial: {
+                        opacity: 0
+                    },
+                    animate: {
+                        opacity: 1
+                    },
+                    exit: {
+                        opacity: 0
+                    },
+                    transition: transition,
+                    className: cls('content', color, size, type, variant, toOrigin, `${type}-${size}`, `${type}-${color}`, `${type}-${variant}`, `${type}-${variant}-${size}`, overlapMode && overlap, overlapMode && `${overlap}-${toOrigin}`),
+                    children: content
+                })
+            })
+        ]
+    });
+};
+Badge_Badge.displayName = 'SuiBadge';
+
+
+
+
+
+
+export { Badge as badgeStyles, Badge_Badge as Badge };

package/Block.js

@@ -1,20 +1,42 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
 
-var Block$1 = {"sui-block-root":"sui-block-root","sui-block-row":"sui-block-row","sui-block-padding":"sui-block-padding","sui-block-bordered":"sui-block-bordered","sui-block-border-radius-none":"sui-block-border-radius-none","sui-block-border-radius-xsmall":"sui-block-border-radius-xsmall","sui-block-border-radius-small":"sui-block-border-radius-small","sui-block-border-radius-medium":"sui-block-border-radius-medium","sui-block-default":"sui-block-default","sui-block-neutral":"sui-block-neutral","sui-block-hide-background":"sui-block-hide-background"};
 
-const Block = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Block' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Block = ({"sui-block-root":"sui-block-root","sui-block-row":"sui-block-row","sui-block-padding":"sui-block-padding","sui-block-bordered":"sui-block-bordered","sui-block-border-radius-none":"sui-block-border-radius-none","sui-block-border-radius-xsmall":"sui-block-border-radius-xsmall","sui-block-border-radius-small":"sui-block-border-radius-small","sui-block-border-radius-medium":"sui-block-border-radius-medium","sui-block-default":"sui-block-default","sui-block-neutral":"sui-block-neutral","sui-block-hide-background":"sui-block-hide-background"});
+
+
+
+
+
+const Block_Block = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Block'
+    });
     const { component: BlockRoot = 'div', classes, className, children, row = false, padding = true, bordered = true, borderRadius = 'medium', color = 'default', background = true, ...rest } = props;
     const cls = useClasses('block', classes, className);
-    return (jsx(BlockRoot, { className: cls('root', `border-radius-${borderRadius}`, background ? color : 'hide-background', {
+    return /*#__PURE__*/ jsx(BlockRoot, {
+        className: cls('root', `border-radius-${borderRadius}`, background ? color : 'hide-background', {
             row,
             padding,
-            bordered,
-        }), ...rest, ref: ref, children: children }));
+            bordered
+        }),
+        ...rest,
+        ref: ref,
+        children: children
+    });
 });
-Block.displayName = 'SuiBlock';
+Block_Block.displayName = 'SuiBlock';
+
+
+
+
+
 
-export { Block, Block$1 as blockStyles };
+export { Block as blockStyles, Block_Block as Block };

package/BlockHeader.js

@@ -1,18 +1,62 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { D as Divider } from './chunks/Divider.js';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { Divider as Divider_Divider } from "./Divider.js";
+import { hasContent } from "./chunks/5047.js";
 
-var BlockHeader$1 = {"sui-block-header-root":"sui-block-header-root","sui-block-header-title":"sui-block-header-title","sui-block-header-end-slot":"sui-block-header-end-slot","sui-block-header-divider":"sui-block-header-divider"};
 
-const BlockHeader = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'BlockHeader' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var BlockHeader = ({"sui-block-header-root":"sui-block-header-root","sui-block-header-title":"sui-block-header-title","sui-block-header-end-slot":"sui-block-header-end-slot","sui-block-header-divider":"sui-block-header-divider"});
+
+
+
+
+
+
+
+const BlockHeader_BlockHeader = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'BlockHeader'
+    });
     const { component: BlockHeaderRoot = 'div', classes, className, children, endSlot, divider = false, ...rest } = props;
     const cls = useClasses('block-header', classes, className);
     const title = typeof children === 'string' ? children : undefined;
-    return (jsxs(Fragment, { children: [jsxs(BlockHeaderRoot, { className: cls('root'), ...rest, ref: ref, children: [jsx("div", { title: title, className: cls('title'), children: children }), endSlot && jsx("div", { className: cls('end-slot'), children: endSlot })] }), divider && (jsx(Divider, { className: cls('divider'), orientation: "horizontal", flexItem: true }))] }));
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(BlockHeaderRoot, {
+                className: cls('root'),
+                ...rest,
+                ref: ref,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        title: title,
+                        className: cls('title'),
+                        children: children
+                    }),
+                    hasContent(endSlot) && /*#__PURE__*/ jsx("div", {
+                        className: cls('end-slot'),
+                        children: endSlot
+                    })
+                ]
+            }),
+            divider && /*#__PURE__*/ jsx(Divider_Divider, {
+                className: cls('divider'),
+                orientation: "horizontal",
+                flexItem: true
+            })
+        ]
+    });
 });
-BlockHeader.displayName = 'SuiBlockHeader';
+BlockHeader_BlockHeader.displayName = 'SuiBlockHeader';
+
+
+
+
+
 
-export { BlockHeader, BlockHeader$1 as blockHeaderStyles };
+export { BlockHeader as blockHeaderStyles, BlockHeader_BlockHeader as BlockHeader };