@ringcentral/spring-ui 1.11.2 → 1.13.0

package/FormField.js

@@ -1,10 +1,108 @@
-export { F as FormField, u as useHelperTextId } from './chunks/useHelperTextId.js';
-import 'react/jsx-runtime';
-import 'react';
-import 'clsx';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { hasContent } from "./chunks/5047.js";
 
-var FormField = {"sui-form-field-label":"sui-form-field-label","sui-form-field-helper-text":"sui-form-field-helper-text","sui-form-field-content":"sui-form-field-content","sui-form-field-container":"sui-form-field-container","sui-form-field-focus-effect":"sui-form-field-focus-effect","sui-form-field-outlined":"sui-form-field-outlined","sui-form-field-contained":"sui-form-field-contained","sui-form-field-outlined-label":"sui-form-field-outlined-label","sui-form-field-contained-label":"sui-form-field-contained-label","sui-form-field-outlined-xlarge":"sui-form-field-outlined-xlarge","sui-form-field-contained-xlarge":"sui-form-field-contained-xlarge","sui-form-field-outlined-large":"sui-form-field-outlined-large","sui-form-field-contained-large":"sui-form-field-contained-large","sui-form-field-outlined-medium":"sui-form-field-outlined-medium","sui-form-field-contained-medium":"sui-form-field-contained-medium","sui-form-field-outlined-content":"sui-form-field-outlined-content","sui-form-field-contained-content":"sui-form-field-contained-content","sui-disabled":"sui-disabled","sui-focused":"sui-focused","sui-form-field-standard-content":"sui-form-field-standard-content","sui-form-field-standard-focus-effect":"sui-form-field-standard-focus-effect","sui-form-field-standard":"sui-form-field-standard","sui-form-field-quiet-content":"sui-form-field-quiet-content","sui-form-field-xlarge-content":"sui-form-field-xlarge-content","sui-form-field-large-content":"sui-form-field-large-content","sui-form-field-medium-content":"sui-form-field-medium-content","sui-form-field-error-helper-text":"sui-form-field-error-helper-text","sui-form-field-error-label":"sui-form-field-error-label","sui-form-field-error-focus-effect":"sui-form-field-error-focus-effect","sui-form-field-error-content":"sui-form-field-error-content","sui-form-field-error-standard-content":"sui-form-field-error-standard-content","sui-form-field-error-contained-content":"sui-form-field-error-contained-content","sui-form-field":"sui-form-field"};
 
-export { FormField as formFieldStyle };
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var FormField = ({"sui-form-field-label":"sui-form-field-label","sui-form-field-helper-text":"sui-form-field-helper-text","sui-form-field-content":"sui-form-field-content","sui-form-field-container":"sui-form-field-container","sui-form-field-focus-effect":"sui-form-field-focus-effect","sui-form-field-outlined":"sui-form-field-outlined","sui-form-field-contained":"sui-form-field-contained","sui-form-field-outlined-label":"sui-form-field-outlined-label","sui-form-field-contained-label":"sui-form-field-contained-label","sui-form-field-outlined-xlarge":"sui-form-field-outlined-xlarge","sui-form-field-contained-xlarge":"sui-form-field-contained-xlarge","sui-form-field-outlined-large":"sui-form-field-outlined-large","sui-form-field-contained-large":"sui-form-field-contained-large","sui-form-field-outlined-medium":"sui-form-field-outlined-medium","sui-form-field-contained-medium":"sui-form-field-contained-medium","sui-form-field-outlined-content":"sui-form-field-outlined-content","sui-form-field-contained-content":"sui-form-field-contained-content","sui-disabled":"sui-disabled","sui-focused":"sui-focused","sui-form-field-standard-content":"sui-form-field-standard-content","sui-form-field-standard-focus-effect":"sui-form-field-standard-focus-effect","sui-form-field-standard":"sui-form-field-standard","sui-form-field-quiet-content":"sui-form-field-quiet-content","sui-form-field-xlarge-content":"sui-form-field-xlarge-content","sui-form-field-large-content":"sui-form-field-large-content","sui-form-field-medium-content":"sui-form-field-medium-content","sui-form-field-error-helper-text":"sui-form-field-error-helper-text","sui-form-field-error-label":"sui-form-field-error-label","sui-form-field-error-focus-effect":"sui-form-field-error-focus-effect","sui-form-field-error-content":"sui-form-field-error-content","sui-form-field-error-standard-content":"sui-form-field-error-standard-content","sui-form-field-error-contained-content":"sui-form-field-error-contained-content","sui-form-field":"sui-form-field"});
+
+
+
+
+
+
+
+const FormField_FormField = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'FormField'
+    });
+    const { classes, className, children, htmlFor, label, labelProps, helperText, required, disabled, error, variant = 'standard', size = 'xlarge', contentRef, contentProps, focused, FormHelperTextProps, ...rest } = props;
+    const cls = useClasses('form-field', classes, className);
+    return /*#__PURE__*/ jsxs("div", {
+        ...rest,
+        ref: ref,
+        className: cls('root', variant, {
+            disabled,
+            error,
+            focused
+        }),
+        "aria-disabled": disabled,
+        children: [
+            hasContent(label) && /*#__PURE__*/ jsxs("label", {
+                htmlFor: htmlFor,
+                ...labelProps,
+                className: clsx(cls('label', `${variant}-label`, error && 'error-label'), labelProps?.className),
+                children: [
+                    label,
+                    required ? ' *' : ''
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: cls('container', error && 'error-container'),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: cls('content', size, `${size}-content`, `${variant}-${size}`, `${variant}-content`, error && 'error-content', error && `error-${variant}-content`),
+                        ref: contentRef,
+                        ...contentProps,
+                        children: children
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: cls('focus-effect', `${variant}-focus-effect`, error && 'error-focus-effect')
+                    })
+                ]
+            }),
+            hasContent(helperText) && /*#__PURE__*/ jsx("div", {
+                ...FormHelperTextProps,
+                className: clsx(cls('helper-text', error && 'error-helper-text'), FormHelperTextProps?.className),
+                children: helperText
+            })
+        ]
+    });
+});
+FormField_FormField.displayName = 'SuiFormField';
+
+
+
+/**
+ * Hook to generate consistent helper text IDs for form field accessibility
+ *
+ * Follows the pattern: `${id}-helper-text`
+ *
+ * @param options Configuration options
+ * @returns Generated helper text ID or undefined if no helper text
+ *
+ * @example
+ * ```tsx
+ * const Select = ({ helperText, FormHelperTextProps, ...props }) => {
+ *   const id = useId(idProp);
+ *   const helperTextId = useHelperTextId({ helperText, id, FormHelperTextProps });
+ *
+ *   return (
+ *     <FormField FormHelperTextProps={{ id: helperTextId, ...FormHelperTextProps }}>
+ *       <button aria-describedby={helperTextId}>
+ *     </FormField>
+ *   );
+ * };
+ * ```
+ */ const useHelperTextId = ({ helperText, id, FormHelperTextProps })=>{
+    if (!hasContent(helperText)) {
+        return undefined;
+    }
+    // Use existing ID if provided, otherwise generate standard pattern
+    return FormHelperTextProps?.id || `${id}-helper-text`;
+};
+
+
+
+
+
+
+export { FormField as formFieldStyle, FormField_FormField as FormField, useHelperTextId };

package/FormLabel.js

@@ -1,9 +1,83 @@
-export { F as FormLabel, a as FormLabelContext, u as useFormLabel } from './chunks/FormLabel.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { useClasses, useId } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
 
-var FormLabel = {"sui-form-label-root":"sui-form-label-root","sui-form-label-label":"sui-form-label-label","sui-disabled":"sui-disabled","sui-form-label-end-label":"sui-form-label-end-label","sui-form-label-start":"sui-form-label-start","sui-form-label-start-label":"sui-form-label-start-label","sui-form-label-full-width":"sui-form-label-full-width"};
 
-export { FormLabel as formLabelStyle };
+
+
+
+
+
+const FormLabelContext = createContext({});
+const useFormLabel = (props)=>{
+    const { disabled: disabledProp, id: idProp, value: valueProp } = props;
+    const { disabled: innerDisabled, id: innerId, value: innerValue } = useContext(FormLabelContext);
+    const disabled = disabledProp ?? innerDisabled;
+    const id = idProp ?? innerId;
+    const value = valueProp ?? innerValue;
+    return {
+        id,
+        disabled,
+        value
+    };
+};
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var FormLabel = ({"sui-form-label-root":"sui-form-label-root","sui-form-label-label":"sui-form-label-label","sui-disabled":"sui-disabled","sui-form-label-end-label":"sui-form-label-end-label","sui-form-label-start":"sui-form-label-start","sui-form-label-start-label":"sui-form-label-start-label","sui-form-label-full-width":"sui-form-label-full-width"});
+
+
+
+
+
+
+const FormLabel_FormLabel = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'FormLabel'
+    });
+    const { classes, className, children, label, value, labelRef, id: idProp, disabled = false, fullWidth = false, placement = 'end', rootProps, ...rest } = props;
+    const cls = useClasses('form-label', classes, className);
+    const innerId = useId();
+    const id = idProp || innerId;
+    const formLabelContextValue = useMemo(()=>({
+            id,
+            disabled,
+            value
+        }), [
+        disabled,
+        id,
+        value
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('root', placement, {
+            'full-width': fullWidth
+        }),
+        ref: ref,
+        ...rootProps,
+        children: [
+            /*#__PURE__*/ jsx(FormLabelContext.Provider, {
+                value: formLabelContextValue,
+                children: children
+            }),
+            /*#__PURE__*/ jsx("label", {
+                className: cls('label', `${placement}-label`, {
+                    disabled
+                }),
+                ...rest,
+                ref: labelRef,
+                htmlFor: id,
+                children: label
+            })
+        ]
+    });
+});
+FormLabel_FormLabel.displayName = 'SuiFormLabel';
+
+
+
+
+
+
+
+export { FormLabel as formLabelStyle, FormLabelContext, FormLabel_FormLabel as FormLabel, useFormLabel };

package/Icon.js

@@ -1,9 +1,2 @@
-export { I as Icon } from './chunks/Icon.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
 
-var Icon = {"sui-icon-root":"sui-icon-root","sui-icon-svg":"sui-icon-svg","sui-icon-xsmall":"sui-icon-xsmall","sui-icon-small":"sui-icon-small","sui-icon-medium":"sui-icon-medium","sui-icon-large":"sui-icon-large","sui-icon-xlarge":"sui-icon-xlarge","sui-icon-xxlarge":"sui-icon-xxlarge","sui-icon-xxxlarge":"sui-icon-xxxlarge"};
-
-export { Icon as iconStyle };
+export { Icon, iconStyle } from "./chunks/8307.js";

package/IconButton.js

@@ -1,26 +1,142 @@
-export { I as IconButton, a as IconButtonLabel } from './chunks/IconButtonLabel.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@mui/base';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import './chunks/Icon.js';
-import './chunks/Squircle.js';
-import './chunks/withTooltip.js';
-import './chunks/Tooltip.js';
-import 'framer-motion';
-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';
-
-var IconButton = {"sui-icon-button-root":"sui-icon-button-root","sui-disabled":"sui-disabled","sui-icon-button-label":"sui-icon-button-label","sui-icon-button-circular":"sui-icon-button-circular","focus-visible":"focus-visible","sui-focus-visible":"sui-focus-visible","sui-icon-button-rectangular":"sui-icon-button-rectangular","sui-icon-button-contained":"sui-icon-button-contained","sui-active":"sui-active","sui-icon-button-contained-squircle":"sui-icon-button-contained-squircle","sui-icon-button-contained-primary":"sui-icon-button-contained-primary","sui-icon-button-contained-success":"sui-icon-button-contained-success","sui-icon-button-contained-danger":"sui-icon-button-contained-danger","sui-icon-button-contained-warning":"sui-icon-button-contained-warning","sui-icon-button-contained-secondary":"sui-icon-button-contained-secondary","sui-squircle":"sui-squircle","sui-icon-button-contained-neutral":"sui-icon-button-contained-neutral","sui-icon-button-contained-hide-background":"sui-icon-button-contained-hide-background","sui-icon-button-outlined":"sui-icon-button-outlined","sui-icon-button-outlined-primary":"sui-icon-button-outlined-primary","sui-icon-button-outlined-success":"sui-icon-button-outlined-success","sui-icon-button-outlined-danger":"sui-icon-button-outlined-danger","sui-icon-button-outlined-warning":"sui-icon-button-outlined-warning","sui-icon-button-outlined-secondary":"sui-icon-button-outlined-secondary","sui-icon-button-outlined-neutral":"sui-icon-button-outlined-neutral","sui-icon-button-outlined-squircle":"sui-icon-button-outlined-squircle","sui-icon-button-outlined-hide-background":"sui-icon-button-outlined-hide-background","sui-icon-button-icon":"sui-icon-button-icon","sui-icon-button-icon-primary":"sui-icon-button-icon-primary","sui-icon-button-icon-success":"sui-icon-button-icon-success","sui-icon-button-icon-danger":"sui-icon-button-icon-danger","sui-icon-button-icon-warning":"sui-icon-button-icon-warning","sui-icon-button-icon-secondary":"sui-icon-button-icon-secondary","sui-icon-button-icon-neutral":"sui-icon-button-icon-neutral","sui-icon-button-inverted":"sui-icon-button-inverted","sui-icon-button-inverted-primary":"sui-icon-button-inverted-primary","sui-icon-button-inverted-success":"sui-icon-button-inverted-success","sui-icon-button-inverted-danger":"sui-icon-button-inverted-danger","sui-icon-button-inverted-warning":"sui-icon-button-inverted-warning","sui-icon-button-inverted-secondary":"sui-icon-button-inverted-secondary","sui-icon-button-inverted-neutral":"sui-icon-button-inverted-neutral","sui-icon-button-inverted-squircle":"sui-icon-button-inverted-squircle","sui-icon-button-inverted-hide-background":"sui-icon-button-inverted-hide-background","sui-icon-button-squircle":"sui-icon-button-squircle","sui-icon-button-squircle-hide-background":"sui-icon-button-squircle-hide-background","sui-icon-button-squircle-label":"sui-icon-button-squircle-label","sui-icon-button-xsmall":"sui-icon-button-xsmall","sui-icon-button-xsmall-circular":"sui-icon-button-xsmall-circular","sui-icon-button-xsmall-inverted":"sui-icon-button-xsmall-inverted","sui-icon-button-xsmall-squircle":"sui-icon-button-xsmall-squircle","sui-icon-button-xsmall-rectangular":"sui-icon-button-xsmall-rectangular","sui-icon-button-small":"sui-icon-button-small","sui-icon-button-small-circular":"sui-icon-button-small-circular","sui-icon-button-small-inverted":"sui-icon-button-small-inverted","sui-icon-button-small-squircle":"sui-icon-button-small-squircle","sui-icon-button-small-rectangular":"sui-icon-button-small-rectangular","sui-icon-button-medium":"sui-icon-button-medium","sui-icon-button-medium-circular":"sui-icon-button-medium-circular","sui-icon-button-medium-inverted":"sui-icon-button-medium-inverted","sui-icon-button-medium-squircle":"sui-icon-button-medium-squircle","sui-icon-button-medium-rectangular":"sui-icon-button-medium-rectangular","sui-icon-button-large":"sui-icon-button-large","sui-icon-button-large-circular":"sui-icon-button-large-circular","sui-icon-button-large-inverted":"sui-icon-button-large-inverted","sui-icon-button-large-squircle":"sui-icon-button-large-squircle","sui-icon-button-large-rectangular":"sui-icon-button-large-rectangular","sui-icon-button-xlarge":"sui-icon-button-xlarge","sui-icon-button-xlarge-circular":"sui-icon-button-xlarge-circular","sui-icon-button-xlarge-inverted":"sui-icon-button-xlarge-inverted","sui-icon-button-xlarge-squircle":"sui-icon-button-xlarge-squircle","sui-icon-button-xlarge-rectangular":"sui-icon-button-xlarge-rectangular","sui-icon-button-xxlarge":"sui-icon-button-xxlarge","sui-icon-button-xxlarge-circular":"sui-icon-button-xxlarge-circular","sui-icon-button-xxlarge-inverted":"sui-icon-button-xxlarge-inverted","sui-icon-button-xxlarge-squircle":"sui-icon-button-xxlarge-squircle","sui-icon-button-xxlarge-label":"sui-icon-button-xxlarge-label","sui-icon-button-xxlarge-rectangular":"sui-icon-button-xxlarge-rectangular","sui-icon-button-xxlarge-rectangular-label":"sui-icon-button-xxlarge-rectangular-label","sui-icon-button-xxxlarge":"sui-icon-button-xxxlarge","sui-icon-button-xxxlarge-label":"sui-icon-button-xxxlarge-label","sui-icon-button-xxxlarge-circular":"sui-icon-button-xxxlarge-circular","sui-icon-button-xxxlarge-inverted":"sui-icon-button-xxxlarge-inverted","sui-icon-button-xxxlarge-squircle":"sui-icon-button-xxxlarge-squircle","sui-icon-button-xxxlarge-rectangular":"sui-icon-button-xxxlarge-rectangular","sui-icon-button-xxxlarge-rectangular-label":"sui-icon-button-xxxlarge-rectangular-label"};
-
-var IconButtonLabel = {"sui-icon-button-outer-label-root":"sui-icon-button-outer-label-root","sui-icon-button-outer-label-text":"sui-icon-button-outer-label-text"};
-
-export { IconButtonLabel as iconButtonLabelStyle, IconButton as iconButtonStyle };
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef } from "react";
+import { useButton } from "@mui/base";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import "./Squircle.js";
+import { withTooltip } from "./chunks/4535.js";
+import { Squircle as Squircle_Squircle } from "./chunks/1250.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var IconButton = ({"sui-icon-button-root":"sui-icon-button-root","sui-disabled":"sui-disabled","sui-icon-button-label":"sui-icon-button-label","sui-icon-button-circular":"sui-icon-button-circular","focus-visible":"focus-visible","sui-focus-visible":"sui-focus-visible","sui-icon-button-rectangular":"sui-icon-button-rectangular","sui-icon-button-contained":"sui-icon-button-contained","sui-active":"sui-active","sui-icon-button-contained-squircle":"sui-icon-button-contained-squircle","sui-icon-button-contained-primary":"sui-icon-button-contained-primary","sui-icon-button-contained-success":"sui-icon-button-contained-success","sui-icon-button-contained-danger":"sui-icon-button-contained-danger","sui-icon-button-contained-warning":"sui-icon-button-contained-warning","sui-icon-button-contained-secondary":"sui-icon-button-contained-secondary","sui-squircle":"sui-squircle","sui-icon-button-contained-neutral":"sui-icon-button-contained-neutral","sui-icon-button-contained-hide-background":"sui-icon-button-contained-hide-background","sui-icon-button-outlined":"sui-icon-button-outlined","sui-icon-button-outlined-primary":"sui-icon-button-outlined-primary","sui-icon-button-outlined-success":"sui-icon-button-outlined-success","sui-icon-button-outlined-danger":"sui-icon-button-outlined-danger","sui-icon-button-outlined-warning":"sui-icon-button-outlined-warning","sui-icon-button-outlined-secondary":"sui-icon-button-outlined-secondary","sui-icon-button-outlined-neutral":"sui-icon-button-outlined-neutral","sui-icon-button-outlined-squircle":"sui-icon-button-outlined-squircle","sui-icon-button-outlined-hide-background":"sui-icon-button-outlined-hide-background","sui-icon-button-icon":"sui-icon-button-icon","sui-icon-button-icon-primary":"sui-icon-button-icon-primary","sui-icon-button-icon-success":"sui-icon-button-icon-success","sui-icon-button-icon-danger":"sui-icon-button-icon-danger","sui-icon-button-icon-warning":"sui-icon-button-icon-warning","sui-icon-button-icon-secondary":"sui-icon-button-icon-secondary","sui-icon-button-icon-neutral":"sui-icon-button-icon-neutral","sui-icon-button-inverted":"sui-icon-button-inverted","sui-icon-button-inverted-primary":"sui-icon-button-inverted-primary","sui-icon-button-inverted-success":"sui-icon-button-inverted-success","sui-icon-button-inverted-danger":"sui-icon-button-inverted-danger","sui-icon-button-inverted-warning":"sui-icon-button-inverted-warning","sui-icon-button-inverted-secondary":"sui-icon-button-inverted-secondary","sui-icon-button-inverted-neutral":"sui-icon-button-inverted-neutral","sui-icon-button-inverted-squircle":"sui-icon-button-inverted-squircle","sui-icon-button-inverted-hide-background":"sui-icon-button-inverted-hide-background","sui-icon-button-squircle":"sui-icon-button-squircle","sui-icon-button-squircle-hide-background":"sui-icon-button-squircle-hide-background","sui-icon-button-squircle-label":"sui-icon-button-squircle-label","sui-icon-button-xsmall":"sui-icon-button-xsmall","sui-icon-button-xsmall-circular":"sui-icon-button-xsmall-circular","sui-icon-button-xsmall-inverted":"sui-icon-button-xsmall-inverted","sui-icon-button-xsmall-squircle":"sui-icon-button-xsmall-squircle","sui-icon-button-xsmall-rectangular":"sui-icon-button-xsmall-rectangular","sui-icon-button-small":"sui-icon-button-small","sui-icon-button-small-circular":"sui-icon-button-small-circular","sui-icon-button-small-inverted":"sui-icon-button-small-inverted","sui-icon-button-small-squircle":"sui-icon-button-small-squircle","sui-icon-button-small-rectangular":"sui-icon-button-small-rectangular","sui-icon-button-medium":"sui-icon-button-medium","sui-icon-button-medium-circular":"sui-icon-button-medium-circular","sui-icon-button-medium-inverted":"sui-icon-button-medium-inverted","sui-icon-button-medium-squircle":"sui-icon-button-medium-squircle","sui-icon-button-medium-rectangular":"sui-icon-button-medium-rectangular","sui-icon-button-large":"sui-icon-button-large","sui-icon-button-large-circular":"sui-icon-button-large-circular","sui-icon-button-large-inverted":"sui-icon-button-large-inverted","sui-icon-button-large-squircle":"sui-icon-button-large-squircle","sui-icon-button-large-rectangular":"sui-icon-button-large-rectangular","sui-icon-button-xlarge":"sui-icon-button-xlarge","sui-icon-button-xlarge-circular":"sui-icon-button-xlarge-circular","sui-icon-button-xlarge-inverted":"sui-icon-button-xlarge-inverted","sui-icon-button-xlarge-squircle":"sui-icon-button-xlarge-squircle","sui-icon-button-xlarge-rectangular":"sui-icon-button-xlarge-rectangular","sui-icon-button-xxlarge":"sui-icon-button-xxlarge","sui-icon-button-xxlarge-circular":"sui-icon-button-xxlarge-circular","sui-icon-button-xxlarge-inverted":"sui-icon-button-xxlarge-inverted","sui-icon-button-xxlarge-squircle":"sui-icon-button-xxlarge-squircle","sui-icon-button-xxlarge-label":"sui-icon-button-xxlarge-label","sui-icon-button-xxlarge-rectangular":"sui-icon-button-xxlarge-rectangular","sui-icon-button-xxlarge-rectangular-label":"sui-icon-button-xxlarge-rectangular-label","sui-icon-button-xxxlarge":"sui-icon-button-xxxlarge","sui-icon-button-xxxlarge-label":"sui-icon-button-xxxlarge-label","sui-icon-button-xxxlarge-circular":"sui-icon-button-xxxlarge-circular","sui-icon-button-xxxlarge-inverted":"sui-icon-button-xxxlarge-inverted","sui-icon-button-xxxlarge-squircle":"sui-icon-button-xxxlarge-squircle","sui-icon-button-xxxlarge-rectangular":"sui-icon-button-xxxlarge-rectangular","sui-icon-button-xxxlarge-rectangular-label":"sui-icon-button-xxxlarge-rectangular-label"});
+
+
+
+
+
+
+
+
+
+const IconSizeMap = {
+    xxxlarge: 'medium',
+    xxlarge: 'medium',
+    xlarge: 'large',
+    large: 'medium',
+    medium: 'small',
+    small: 'small',
+    xsmall: 'xsmall'
+};
+function sizeSupportsLabel(size) {
+    switch(size){
+        case 'xxxlarge':
+        case 'xxlarge':
+            return true;
+        default:
+            return false;
+    }
+}
+const IconButton_IconButton = withTooltip(/*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'IconButton'
+    });
+    const { component = 'button', color = 'primary', shape = 'circular', size = 'large', background = true, variant = 'outlined', label, symbol, classes, iconSize, className, children, disabled, ...rest } = props;
+    const cls = useClasses('icon-button', classes, className);
+    const { getRootProps, focusVisible } = useButton({
+        ...props,
+        rootRef: ref
+    });
+    const rootProps = getRootProps({
+        className: cls('root', size, variant, color, shape, `${size}-${shape}`, `${size}-${variant}`, `${variant}-${color}`, `${variant}-${shape}`, ...!background ? [
+            'hide-background',
+            `${variant}-hide-background`,
+            `${shape}-hide-background`
+        ] : [], {
+            disabled,
+            focusVisible
+        }),
+        'aria-label': label,
+        ...rest
+    });
+    const content = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            children || /*#__PURE__*/ jsx(Icon_Icon, {
+                symbol: symbol,
+                size: iconSize ?? IconSizeMap[size]
+            }),
+            sizeSupportsLabel(size) && label && /*#__PURE__*/ jsx("span", {
+                className: cls('label', `${size}-label`, shape === 'squircle' && `${shape}-label`, `${size}-${shape}-label`),
+                children: label
+            })
+        ]
+    });
+    if (shape === 'squircle') {
+        return /*#__PURE__*/ jsx(Squircle_Squircle, {
+            ...rootProps,
+            component: component,
+            interactive: !disabled,
+            focusVisible: focusVisible,
+            children: content
+        });
+    }
+    const IconButtonRoot = component;
+    return /*#__PURE__*/ jsx(IconButtonRoot, {
+        ...rootProps,
+        children: content
+    });
+}));
+IconButton_IconButton.displayName = 'SuiIconButton';
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var IconButtonLabel = ({"sui-icon-button-outer-label-root":"sui-icon-button-outer-label-root","sui-icon-button-outer-label-text":"sui-icon-button-outer-label-text"});
+
+
+
+
+
+const IconButtonLabel_IconButtonLabel = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'IconButtonLabel'
+    });
+    const { label, className, classes, children, ...rest } = props;
+    const cls = useClasses('icon-button-outer-label', classes, className);
+    const ariaLabel = children.props['aria-label'] || children.props.label || label;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('root'),
+        ...rest,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ cloneElement(children, {
+                'aria-label': ariaLabel
+            }),
+            label && /*#__PURE__*/ jsx("span", {
+                className: cls('text'),
+                children: label
+            })
+        ]
+    });
+});
+IconButtonLabel_IconButtonLabel.displayName = 'SuiIconButtonLabel';
+
+
+
+
+
+
+
+
+
+export { IconButton as iconButtonStyle, IconButtonLabel as iconButtonLabelStyle, IconButtonLabel_IconButtonLabel as IconButtonLabel, IconButton_IconButton as IconButton };

package/IconButtonGroup.js

@@ -1,18 +1,41 @@
-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 IconButtonGroup$1 = {"sui-icon-button-group-root":"sui-icon-button-group-root","sui-icon-button-group-border":"sui-icon-button-group-border","sui-icon-button-group-horizontal":"sui-icon-button-group-horizontal","sui-icon-button-group-vertical":"sui-icon-button-group-vertical"};
 
-const IconButtonGroup = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'IconButtonGroup' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var IconButtonGroup = ({"sui-icon-button-group-root":"sui-icon-button-group-root","sui-icon-button-group-border":"sui-icon-button-group-border","sui-icon-button-group-horizontal":"sui-icon-button-group-horizontal","sui-icon-button-group-vertical":"sui-icon-button-group-vertical"});
+
+
+
+
+
+const IconButtonGroup_IconButtonGroup = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'IconButtonGroup'
+    });
     const { component: ButtonGroupRoot = 'div', classes, className, children, orientation = 'horizontal', border = false, ...rest } = props;
     const cls = useClasses('icon-button-group', classes, className);
-    return (jsx(ButtonGroupRoot, { role: "group", ...rest, ref: ref, className: cls('root', orientation, {
-            border,
-        }), children: children }));
+    return /*#__PURE__*/ jsx(ButtonGroupRoot, {
+        role: "group",
+        ...rest,
+        ref: ref,
+        className: cls('root', orientation, {
+            border
+        }),
+        children: children
+    });
 });
-IconButtonGroup.displayName = 'SuiIconButtonGroup';
+IconButtonGroup_IconButtonGroup.displayName = 'SuiIconButtonGroup';
+
+
+
+
+
 
-export { IconButtonGroup, IconButtonGroup$1 as iconButtonGroupStyle };
+export { IconButtonGroup as iconButtonGroupStyle, IconButtonGroup_IconButtonGroup as IconButtonGroup };