@ringcentral/juno 2.45.1 → 3.0.0-alpha.0

package/components/Buttons/SplitButton/SplitButton.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcSplitButton = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var clsx_1 = tslib_1.__importDefault(require("clsx"));
@@ -10,37 +11,37 @@ var ButtonGroup_1 = require("../ButtonGroup");
 var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var DEFAULT_DELAY = 166;
-var _RcSplitButton = react_1.forwardRef(function (inProps, ref) {
+var _RcSplitButton = (0, react_1.forwardRef)(function (inProps, ref) {
     var _a;
     var _b, _c;
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcSplitButton' });
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcSplitButton' });
     var classesProp = props.classes, type = props.type, size = props.size, color = props.color, variant = props.variant, disabled = props.disabled, ControlButtonPropsProp = props.ControlButtonProps, ActionButtonPropsProp = props.ActionButtonProps, MenuProps = props.MenuProps, childrenProp = props.children, onOpen = props.onOpen, onClose = props.onClose, className = props.className, loading = props.loading, rest = tslib_1.__rest(props, ["classes", "type", "size", "color", "variant", "disabled", "ControlButtonProps", "ActionButtonProps", "MenuProps", "children", "onOpen", "onClose", "className", "loading"]);
-    var theme = foundation_1.useTheme();
+    var theme = (0, foundation_1.useTheme)();
     var _d = ActionButtonPropsProp, actionButtonTitle = _d.title, actionButtonClassNameProp = _d.className, ActionButtonProps = tslib_1.__rest(_d, ["title", "className"]);
-    var variantIs = utils_1.variantIsHandler(variant);
+    var variantIs = (0, utils_1.variantIsHandler)(variant);
     var toButtonSize = ['xlarge', 'xxlarge', 'xxxlarge'].includes(size)
         ? 'large'
         : size;
     var _e = ControlButtonPropsProp, ArrowIconProps = _e.ArrowIconProps, onControlButtonClick = _e.onClick, controlButtonClassNameProp = _e.className, ControlButtonProps = tslib_1.__rest(_e, ["ArrowIconProps", "onClick", "className"]);
-    var _f = tslib_1.__read(react_1.useState(), 2), anchorEl = _f[0], setAnchorEl = _f[1];
-    var _g = tslib_1.__read(react_1.useState(DEFAULT_DELAY), 2), enterNextDelay = _g[0], setEnterNextDelay = _g[1];
-    var innerRef = react_1.useRef(null);
-    var splitRef = foundation_1.useForkRef(innerRef, ref);
+    var _f = tslib_1.__read((0, react_1.useState)(), 2), anchorEl = _f[0], setAnchorEl = _f[1];
+    var _g = tslib_1.__read((0, react_1.useState)(DEFAULT_DELAY), 2), enterNextDelay = _g[0], setEnterNextDelay = _g[1];
+    var innerRef = (0, react_1.useRef)(null);
+    var splitRef = (0, foundation_1.useForkRef)(innerRef, ref);
     var isMenuOpen = !!anchorEl;
-    var isMenuEverOpen = foundation_1.useEver(isMenuOpen);
-    var _h = react_1.useMemo(function () {
-        var result = foundation_1.combineClasses(utils_1.RcSplitButtonClasses, classesProp);
+    var isMenuEverOpen = (0, foundation_1.useEver)(isMenuOpen);
+    var _h = (0, react_1.useMemo)(function () {
+        var result = (0, foundation_1.combineClasses)(utils_1.RcSplitButtonClasses, classesProp);
         return {
-            classes: foundation_1.omit(result, ['actionButton', 'controlButton', 'menuOpen']),
+            classes: (0, foundation_1.omit)(result, ['actionButton', 'controlButton', 'menuOpen']),
             actionButtonClassName: result === null || result === void 0 ? void 0 : result.actionButton,
             controlButtonClassName: result === null || result === void 0 ? void 0 : result.controlButton,
         };
     }, [classesProp]), classes = _h.classes, actionButtonClassName = _h.actionButtonClassName, controlButtonClassName = _h.controlButtonClassName;
-    var handleClick = foundation_1.useEventCallback(foundation_1.checkDefaultPrevented(function () {
+    var handleClick = (0, foundation_1.useEventCallback)((0, foundation_1.checkDefaultPrevented)(function () {
         setAnchorEl(innerRef.current);
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     }));
-    var handleClose = foundation_1.useEventCallback(foundation_1.checkDefaultPrevented(function (event, reason) {
+    var handleClose = (0, foundation_1.useEventCallback)((0, foundation_1.checkDefaultPrevented)(function (event, reason) {
         var _a;
         if (enterNextDelay === 0) {
             setEnterNextDelay(DEFAULT_DELAY);
@@ -49,21 +50,21 @@ var _RcSplitButton = react_1.forwardRef(function (inProps, ref) {
         (_a = MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(MenuProps, event, reason);
         onClose === null || onClose === void 0 ? void 0 : onClose(event, reason);
     }));
-    var SharedButtonProps = react_1.useMemo(function () {
+    var SharedButtonProps = (0, react_1.useMemo)(function () {
         return {
             type: type,
             // when give size more than button accept, just set large
             size: toButtonSize,
             color: color,
-            variant: utils_1.getVariant(variant),
+            variant: (0, utils_1.getVariant)(variant),
             disabled: loading ? true : undefined,
             disabledVariant: loading ? 'mask' : undefined,
         };
     }, [color, loading, toButtonSize, type, variant]);
-    var _j = react_1.useMemo(function () {
+    var _j = (0, react_1.useMemo)(function () {
         if (process.env.NODE_ENV !== 'production' &&
             !(childrenProp instanceof Array)) {
-            foundation_1.logInDev({
+            (0, foundation_1.logInDev)({
                 component: 'RcSplitButton',
                 message: 'children must be implement with RcSplitButtonChildrenProps[]',
             });
@@ -80,7 +81,7 @@ var _RcSplitButton = react_1.forwardRef(function (inProps, ref) {
                     TooltipProps: TooltipProps,
                     onClick: onClick,
                     children: children,
-                    className: foundation_1.combineClasses(actionButtonClassName, actionButtonClassNameProp),
+                    className: (0, foundation_1.combineClasses)(actionButtonClassName, actionButtonClassNameProp),
                 };
                 return;
             }
@@ -97,7 +98,7 @@ var _RcSplitButton = react_1.forwardRef(function (inProps, ref) {
                         },
                     },
                 }
-                : {})), child.props), foundation_1.combineProps({
+                : {})), child.props), (0, foundation_1.combineProps)({
                 onClick: handleClose,
             }, {
                 // run outside method first, if outside prevent default, that will not close menu
@@ -116,16 +117,15 @@ var _RcSplitButton = react_1.forwardRef(function (inProps, ref) {
         enterNextDelay,
         handleClose,
     ]), actionButtonProps = _j.actionButtonProps, children = _j.children;
-    var TouchRippleProps = react_1.useMemo(function () {
+    var TouchRippleProps = (0, react_1.useMemo)(function () {
         return variant === 'round'
             ? {
                 classes: utils_1.RcSplitButtonTouchRippleClasses,
             }
             : {};
     }, [variant]);
-    var _ActionButtonProps = react_1.useMemo(function () {
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ TouchRippleProps: TouchRippleProps,
-            loading: loading }, actionButtonProps), SharedButtonProps), ActionButtonProps);
+    var _ActionButtonProps = (0, react_1.useMemo)(function () {
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ TouchRippleProps: TouchRippleProps, loading: loading }, actionButtonProps), SharedButtonProps), ActionButtonProps);
     }, [
         ActionButtonProps,
         SharedButtonProps,
@@ -133,8 +133,8 @@ var _RcSplitButton = react_1.forwardRef(function (inProps, ref) {
         actionButtonProps,
         loading,
     ]);
-    var _ControlButtonProps = react_1.useMemo(function () {
-        var combineControlProps = foundation_1.combineProps({
+    var _ControlButtonProps = (0, react_1.useMemo)(function () {
+        var combineControlProps = (0, foundation_1.combineProps)({
             onClick: handleClick,
             TouchRippleProps: TouchRippleProps,
             className: controlButtonClassName,
@@ -154,7 +154,7 @@ var _RcSplitButton = react_1.forwardRef(function (inProps, ref) {
     ]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(ButtonGroup_1.RcButtonGroup, tslib_1.__assign({ disableRipple: ((_c = (_b = theme.props) === null || _b === void 0 ? void 0 : _b.MuiButtonGroup) === null || _c === void 0 ? void 0 : _c.disableRipple) ||
-                variantIs(['plain', 'plainIcon']) }, rest, { className: clsx_1.default(className, (_a = {},
+                variantIs(['plain', 'plainIcon']) }, rest, { className: (0, clsx_1.default)(className, (_a = {},
                 _a[utils_1.RcSplitButtonClasses.menuOpen] = isMenuOpen,
                 _a)), innerRef: splitRef, classes: classes }),
             react_1.default.createElement(Button_1.RcButton, tslib_1.__assign({}, _ActionButtonProps, { focusVariant: "ripple" })),
@@ -162,7 +162,7 @@ var _RcSplitButton = react_1.forwardRef(function (inProps, ref) {
                 react_1.default.createElement(styles_1.StyledArrowIcon, tslib_1.__assign({ open: isMenuOpen, size: variantIs(['round', 'plainIcon']) ? size : toButtonSize }, ArrowIconProps)))),
         isMenuEverOpen && (react_1.default.createElement(Menu_1.RcMenu, tslib_1.__assign({}, MenuProps, { anchorEl: anchorEl, open: isMenuOpen, onClose: handleClose }), children))));
 });
-var RcSplitButton = foundation_1.styled(_RcSplitButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.splitButtonStyle);
+var RcSplitButton = (0, foundation_1.styled)(_RcSplitButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.splitButtonStyle);
 exports.RcSplitButton = RcSplitButton;
 RcSplitButton.displayName = 'RcSplitButton';
 RcSplitButton.defaultProps = {

package/components/Buttons/SplitButton/styles/StyledArrowIcon.d.ts

@@ -1,7 +1,6 @@
+import React from 'react';
 import { RcIconProps } from '../../../Icon';
-export declare type StyledArrowIconProps = {
+export type StyledArrowIconProps = {
     open: boolean;
 } & RcIconProps;
-export declare const StyledArrowIcon: import("styled-components").StyledComponentClass<StyledArrowIconProps, import("../../../../foundation").RcTheme, Pick<StyledArrowIconProps, "symbol" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "desc" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "icon" | "open" | "loadingSize" | "useLoading"> & {
-    theme?: import("../../../../foundation").RcTheme | undefined;
-}>;
+export declare const StyledArrowIcon: import("styled-components").StyledComponent<React.FunctionComponent<StyledArrowIconProps>, import("../../../../foundation").RcTheme, {}, never>;

package/components/Buttons/SplitButton/styles/StyledArrowIcon.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledArrowIcon = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var juno_icon_1 = require("@ringcentral/juno-icon");
 var foundation_1 = require("../../../../foundation");
 var Icon_1 = require("../../../Icon");
 var _StyledArrowIcon = function (props) { return (react_1.default.createElement(Icon_1.RcIcon, tslib_1.__assign({ symbol: juno_icon_1.ArrowDown, size: "medium" }, props))); };
-exports.StyledArrowIcon = foundation_1.styled(_StyledArrowIcon)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  transform: ", ";\n\n  &&& {\n    color: inherit;\n    margin-right: 0;\n  }\n"], ["\n  transform: ", ";\n\n  &&& {\n    color: inherit;\n    margin-right: 0;\n  }\n"])), function (_a) {
+exports.StyledArrowIcon = (0, foundation_1.styled)(_StyledArrowIcon)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  transform: ", ";\n\n  &&& {\n    color: inherit;\n    margin-right: 0;\n  }\n"], ["\n  transform: ", ";\n\n  &&& {\n    color: inherit;\n    margin-right: 0;\n  }\n"])), function (_a) {
     var open = _a.open;
     return open && 'rotate(180deg)';
 });

package/components/Buttons/SplitButton/styles/StyledSplitButton.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitButtonStyle = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../foundation");
 var Icon_1 = require("../../../Icon");
@@ -19,14 +20,14 @@ var borderLeft = function (_a) {
     switch (variant) {
         case 'plain':
         case 'plainIcon':
-            return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+            return (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
         case 'outlined':
-            return foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n        padding-right: 1px;\n        border-left: 1px solid\n          ", ";\n      "], ["\n        padding-right: 1px;\n        border-left: 1px solid\n          ", ";\n      "])), disabled ? foundation_1.palette2('neutral', 'f02') : styles_1.plainButtonTextColor);
+            return (0, foundation_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n        padding-right: 1px;\n        border-left: 1px solid\n          ", ";\n      "], ["\n        padding-right: 1px;\n        border-left: 1px solid\n          ", ";\n      "])), disabled ? (0, foundation_1.palette2)('neutral', 'f02') : styles_1.plainButtonTextColor);
         case 'text':
         case 'round':
-            return foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n        align-self: stretch;\n        padding-right: 1px;\n        border-left: 1px solid transparent;\n      "], ["\n        align-self: stretch;\n        padding-right: 1px;\n        border-left: 1px solid transparent;\n      "])));
+            return (0, foundation_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n        align-self: stretch;\n        padding-right: 1px;\n        border-left: 1px solid transparent;\n      "], ["\n        align-self: stretch;\n        padding-right: 1px;\n        border-left: 1px solid transparent;\n      "])));
         default:
-            return foundation_1.css(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n        padding-right: 1px;\n        border-left: 1px solid\n          ", ";\n      "], ["\n        padding-right: 1px;\n        border-left: 1px solid\n          ", ";\n      "])), foundation_1.setOpacity(styles_1.buttonTextColor({ color: color, theme: theme }), '24'));
+            return (0, foundation_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n        padding-right: 1px;\n        border-left: 1px solid\n          ", ";\n      "], ["\n        padding-right: 1px;\n        border-left: 1px solid\n          ", ";\n      "])), (0, foundation_1.setOpacity)((0, styles_1.buttonTextColor)({ color: color, theme: theme }), '24'));
     }
 };
 var iconButtonStyle = function (_a) {
@@ -34,34 +35,24 @@ var iconButtonStyle = function (_a) {
     // * divide two for margin top and bottom
     var currIconSize = utils_1.RcIconButtonSizes[size];
     var currSize = currIconSize / 2;
-    var space = foundation_1.toSpacing(currSize);
+    var space = (0, foundation_1.toSpacing)(currSize);
     // * designer define right space little small with 4px
-    var rightSpace = foundation_1.toSpacing(currSize - 4);
-    var width = foundation_1.px(currIconSize);
-    return foundation_1.css(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n    .", " {\n      &.", " {\n        min-width: auto;\n        ", ";\n\n        ", " {\n          margin-right: 0;\n        }\n      }\n\n      &.", " {\n        min-width: ", ";\n        width: ", ";\n      }\n    }\n  "], ["\n    .", " {\n      &.", " {\n        min-width: auto;\n        ",
-        ";\n\n        ", " {\n          margin-right: 0;\n        }\n      }\n\n      &.", " {\n        min-width: ", ";\n        width: ", ";\n      }\n    }\n  "])), utils_2.RcSplitButtonClasses.groupedHorizontal, utils_2.RcSplitButtonClasses.actionButton, variant === 'plainIcon'
-        ? foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n              padding: 0;\n              box-shadow: none;\n\n              ", " {\n                outline: none;\n                ", "\n              }\n            "], ["\n              padding: 0;\n              box-shadow: none;\n\n              ", " {\n                outline: none;\n                ", "\n              }\n            "])), foundation_1.focusVisible, styles_2.plainIconButtonFocusStyle({ radius: 'circle' })) : foundation_1.css(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n              padding: ", ";\n            "], ["\n              padding: ", ";\n            "])), foundation_1.spacing(space, rightSpace, space, space)), Icon_1.RcIcon, utils_2.RcSplitButtonClasses.controlButton, width, width);
+    var rightSpace = (0, foundation_1.toSpacing)(currSize - 4);
+    var width = (0, foundation_1.px)(currIconSize);
+    return (0, foundation_1.css)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n    .", " {\n      &.", " {\n        min-width: auto;\n        ", ";\n\n        ", " {\n          margin-right: 0;\n        }\n      }\n\n      &.", " {\n        min-width: ", ";\n        width: ", ";\n      }\n    }\n  "], ["\n    .", " {\n      &.", " {\n        min-width: auto;\n        ", ";\n\n        ", " {\n          margin-right: 0;\n        }\n      }\n\n      &.", " {\n        min-width: ", ";\n        width: ", ";\n      }\n    }\n  "])), utils_2.RcSplitButtonClasses.groupedHorizontal, utils_2.RcSplitButtonClasses.actionButton, variant === 'plainIcon'
+        ? (0, foundation_1.css)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n              padding: 0;\n              box-shadow: none;\n\n              ", " {\n                outline: none;\n                ", "\n              }\n            "], ["\n              padding: 0;\n              box-shadow: none;\n\n              ", " {\n                outline: none;\n                ", "\n              }\n            "])), foundation_1.focusVisible, (0, styles_2.plainIconButtonFocusStyle)({ radius: 'circle' })) : (0, foundation_1.css)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n              padding: ", ";\n            "], ["\n              padding: ", ";\n            "])), (0, foundation_1.spacing)(space, rightSpace, space, space)), Icon_1.RcIcon, utils_2.RcSplitButtonClasses.controlButton, width, width);
 };
-exports.splitButtonStyle = function (props) {
+var splitButtonStyle = function (props) {
     var variant = props.variant, disabled = props.disabled, loading = props.loading;
-    var variantIs = utils_2.variantIsHandler(variant);
-    var currColor = styles_1.buttonColor(props);
+    var variantIs = (0, utils_2.variantIsHandler)(variant);
+    var currColor = (0, styles_1.buttonColor)(props);
     var isContainer = variant === 'contained';
-    var activeColor24 = foundation_1.setOpacity(currColor, '24');
-    var containedActiveColor = foundation_1.setOpacity(currColor, '24', true);
-    return foundation_1.css(templateObject_17 || (templateObject_17 = tslib_1.__makeTemplateObject(["\n    .", " {\n      &:not(:last-child) {\n        border-right: unset;\n      }\n    }\n\n    .", " {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      &:after {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    .", " {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      &:after {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n\n    &.", " {\n      ", ";\n\n      ", ";\n    }\n\n    .", " {\n      ", ";\n\n      &.", " {\n        padding: 0;\n        min-width: 24px;\n        ", ";\n      }\n\n      &.", " {\n        border-right: ", ";\n      }\n\n      &:not(.", ") {\n        margin-left: 0;\n      }\n\n      ", ";\n    }\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    &.", " {\n      ", ";\n\n      .", " {\n        background: ", ";\n      }\n    }\n  "], ["\n    .", " {\n      &:not(:last-child) {\n        border-right: unset;\n      }\n    }\n\n    .", " {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      &:after {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    .", " {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      &:after {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n\n    &.", " {\n      ",
-        ";\n\n      ",
-        ";\n    }\n\n    .", " {\n      ",
-        ";\n\n      &.", " {\n        padding: 0;\n        min-width: 24px;\n        ", ";\n      }\n\n      &.", " {\n        border-right: ", ";\n      }\n\n      &:not(.", ") {\n        margin-left: 0;\n      }\n\n      ",
-        ";\n    }\n\n    ",
-        ";\n\n    ",
-        ";\n\n    ", ";\n\n    &.", " {\n      ",
-        ";\n\n      .", " {\n        background: ", ";\n      }\n    }\n  "])), utils_2.RcSplitButtonClasses.groupedContainedHorizontal, utils_2.RcSplitButtonClasses.actionButton, utils_2.RcSplitButtonClasses.controlButton, utils_2.RcSplitButtonClasses.root, !disabled &&
+    var activeColor24 = (0, foundation_1.setOpacity)(currColor, '24');
+    var containedActiveColor = (0, foundation_1.setOpacity)(currColor, '24', true);
+    return (0, foundation_1.css)(templateObject_17 || (templateObject_17 = tslib_1.__makeTemplateObject(["\n    .", " {\n      &:not(:last-child) {\n        border-right: unset;\n      }\n    }\n\n    .", " {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      &:after {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    .", " {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      &:after {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n\n    &.", " {\n      ", ";\n\n      ", ";\n    }\n\n    .", " {\n      ", ";\n\n      &.", " {\n        padding: 0;\n        min-width: 24px;\n        ", ";\n      }\n\n      &.", " {\n        border-right: ", ";\n      }\n\n      &:not(.", ") {\n        margin-left: 0;\n      }\n\n      ", ";\n    }\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    &.", " {\n      ", ";\n\n      .", " {\n        background: ", ";\n      }\n    }\n  "], ["\n    .", " {\n      &:not(:last-child) {\n        border-right: unset;\n      }\n    }\n\n    .", " {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      &:after {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    .", " {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      &:after {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n\n    &.", " {\n      ", ";\n\n      ", ";\n    }\n\n    .", " {\n      ", ";\n\n      &.", " {\n        padding: 0;\n        min-width: 24px;\n        ", ";\n      }\n\n      &.", " {\n        border-right: ", ";\n      }\n\n      &:not(.", ") {\n        margin-left: 0;\n      }\n\n      ", ";\n    }\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    &.", " {\n      ", ";\n\n      .", " {\n        background: ", ";\n      }\n    }\n  "])), utils_2.RcSplitButtonClasses.groupedContainedHorizontal, utils_2.RcSplitButtonClasses.actionButton, utils_2.RcSplitButtonClasses.controlButton, utils_2.RcSplitButtonClasses.root, !disabled &&
         variantIs(['outlined', 'text', 'round']) &&
-        !loading && foundation_1.css(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n        transition: ", ";\n\n        ", " {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "], ["\n        transition: ", ";\n\n        ", " {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "])), transition, foundation_1.nonTouchHoverMedia, styles_1.buttonHoverColor), variantIs(['text', 'round', 'plainIcon']) && foundation_1.css(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n        align-items: center;\n\n        ", "\n      "], ["\n        align-items: center;\n\n        ",
-        "\n      "])), !disabled &&
-        !loading && foundation_1.css(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n          ", " {\n            &:hover {\n              .", " {\n                border-left-color: ", ";\n              }\n            }\n          }\n        "], ["\n          ", " {\n            &:hover {\n              .", " {\n                border-left-color: ", ";\n              }\n            }\n          }\n        "])), foundation_1.nonTouchHoverMedia, utils_2.RcSplitButtonClasses.controlButton, activeColor24)), utils_2.RcSplitButtonClasses.groupedHorizontal, variantIs(['outlined', 'text', 'contained']) && foundation_1.css(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n        min-width: 72px;\n      "], ["\n        min-width: 72px;\n      "]))), utils_2.RcSplitButtonClasses.controlButton, borderLeft, utils_2.RcSplitButtonClasses.actionButton, variant === 'outlined' && 0, utils_2.RcSplitButtonClasses.actionButton, variantIs(['plain', 'plainIcon']) && foundation_1.css(templateObject_13 || (templateObject_13 = tslib_1.__makeTemplateObject(["\n        &.", " {\n          border-top-left-radius: inherit;\n          border-bottom-left-radius: inherit;\n          box-shadow: none;\n\n          transition: ", ";\n\n          ", ";\n        }\n\n        &.", " {\n          border-top-right-radius: inherit;\n          border-bottom-right-radius: inherit;\n        }\n      "], ["\n        &.", " {\n          border-top-left-radius: inherit;\n          border-bottom-left-radius: inherit;\n          box-shadow: none;\n\n          transition: ", ";\n\n          ",
-        ";\n        }\n\n        &.", " {\n          border-top-right-radius: inherit;\n          border-bottom-right-radius: inherit;\n        }\n      "])), utils_2.RcSplitButtonClasses.controlButton, transition, !loading && foundation_1.css(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject(["\n            ", " {\n              &:hover {\n                background: ", ";\n              }\n            }\n\n            ", " {\n              background: ", ";\n            }\n          "], ["\n            ", " {\n              &:hover {\n                background: ", ";\n              }\n            }\n\n            ", " {\n              background: ", ";\n            }\n          "])), foundation_1.nonTouchHoverMedia, styles_1.buttonHoverColor, foundation_1.focusVisible, styles_1.buttonHoverColor), utils_2.RcSplitButtonClasses.actionButton), variant === 'plainIcon' && foundation_1.css(templateObject_14 || (templateObject_14 = tslib_1.__makeTemplateObject(["\n      &.", ",\n        .", " {\n        border-radius: ", ";\n\n        ", " {\n          min-height: auto;\n        }\n      }\n    "], ["\n      &.", ",\n        .", " {\n        border-radius: ", ";\n\n        ", " {\n          min-height: auto;\n        }\n      }\n    "])), utils_2.RcSplitButtonClasses.root, utils_2.RcSplitButtonClasses.groupedHorizontal, foundation_1.radius('circle'), Button_1.RcButton), variant === 'round' && foundation_1.css(templateObject_15 || (templateObject_15 = tslib_1.__makeTemplateObject(["\n      &.", " {\n        border-radius: ", ";\n        overflow: hidden;\n\n        ", " {\n          min-height: auto;\n        }\n\n        .", ",\n          .", " {\n          transform: scale(2);\n        }\n\n        .", " {\n          &.", " {\n            border-top-left-radius: ", ";\n            border-bottom-left-radius: ", ";\n          }\n\n          &.", " {\n            border-top-right-radius: ", ";\n            border-bottom-right-radius: ", ";\n          }\n        }\n      }\n    "], ["\n      &.", " {\n        border-radius: ", ";\n        overflow: hidden;\n\n        ", " {\n          min-height: auto;\n        }\n\n        .", ",\n          .", " {\n          transform: scale(2);\n        }\n\n        .",
-        " {\n          &.", " {\n            border-top-left-radius: ", ";\n            border-bottom-left-radius: ", ";\n          }\n\n          &.", " {\n            border-top-right-radius: ", ";\n            border-bottom-right-radius: ", ";\n          }\n        }\n      }\n    "])), utils_2.RcSplitButtonClasses.root, foundation_1.radius('round'), Button_1.RcButton, utils_2.RcSplitButtonTouchRippleClasses.child, utils_2.RcSplitButtonTouchRippleClasses.ripplePulsate, utils_2.RcSplitButtonClasses.groupedHorizontal /** this safari issue, top level overflow is not work */, utils_2.RcSplitButtonClasses.actionButton, foundation_1.radius('round'), foundation_1.radius('round'), utils_2.RcSplitButtonClasses.controlButton, foundation_1.radius('round'), foundation_1.radius('round')), variantIs(['round', 'plainIcon']) && iconButtonStyle, utils_2.RcSplitButtonClasses.menuOpen, !variantIs(['plain', 'plainIcon']) && foundation_1.css(templateObject_16 || (templateObject_16 = tslib_1.__makeTemplateObject(["\n        .", " {\n          background: ", ";\n        }\n      "], ["\n        .", " {\n          background: ", ";\n        }\n      "])), utils_2.RcSplitButtonClasses.actionButton, !isContainer && styles_1.buttonHoverColor), utils_2.RcSplitButtonClasses.controlButton, isContainer ? containedActiveColor : activeColor24);
+        !loading && (0, foundation_1.css)(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n        transition: ", ";\n\n        ", " {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "], ["\n        transition: ", ";\n\n        ", " {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "])), transition, foundation_1.nonTouchHoverMedia, styles_1.buttonHoverColor), variantIs(['text', 'round', 'plainIcon']) && (0, foundation_1.css)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n        align-items: center;\n\n        ", "\n      "], ["\n        align-items: center;\n\n        ", "\n      "])), !disabled &&
+        !loading && (0, foundation_1.css)(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n          ", " {\n            &:hover {\n              .", " {\n                border-left-color: ", ";\n              }\n            }\n          }\n        "], ["\n          ", " {\n            &:hover {\n              .", " {\n                border-left-color: ", ";\n              }\n            }\n          }\n        "])), foundation_1.nonTouchHoverMedia, utils_2.RcSplitButtonClasses.controlButton, activeColor24)), utils_2.RcSplitButtonClasses.groupedHorizontal, variantIs(['outlined', 'text', 'contained']) && (0, foundation_1.css)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n        min-width: 72px;\n      "], ["\n        min-width: 72px;\n      "]))), utils_2.RcSplitButtonClasses.controlButton, borderLeft, utils_2.RcSplitButtonClasses.actionButton, variant === 'outlined' && 0, utils_2.RcSplitButtonClasses.actionButton, variantIs(['plain', 'plainIcon']) && (0, foundation_1.css)(templateObject_13 || (templateObject_13 = tslib_1.__makeTemplateObject(["\n        &.", " {\n          border-top-left-radius: inherit;\n          border-bottom-left-radius: inherit;\n          box-shadow: none;\n\n          transition: ", ";\n\n          ", ";\n        }\n\n        &.", " {\n          border-top-right-radius: inherit;\n          border-bottom-right-radius: inherit;\n        }\n      "], ["\n        &.", " {\n          border-top-left-radius: inherit;\n          border-bottom-left-radius: inherit;\n          box-shadow: none;\n\n          transition: ", ";\n\n          ", ";\n        }\n\n        &.", " {\n          border-top-right-radius: inherit;\n          border-bottom-right-radius: inherit;\n        }\n      "])), utils_2.RcSplitButtonClasses.controlButton, transition, !loading && (0, foundation_1.css)(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject(["\n            ", " {\n              &:hover {\n                background: ", ";\n              }\n            }\n\n            ", " {\n              background: ", ";\n            }\n          "], ["\n            ", " {\n              &:hover {\n                background: ", ";\n              }\n            }\n\n            ", " {\n              background: ", ";\n            }\n          "])), foundation_1.nonTouchHoverMedia, styles_1.buttonHoverColor, foundation_1.focusVisible, styles_1.buttonHoverColor), utils_2.RcSplitButtonClasses.actionButton), variant === 'plainIcon' && (0, foundation_1.css)(templateObject_14 || (templateObject_14 = tslib_1.__makeTemplateObject(["\n      &.", ",\n        .", " {\n        border-radius: ", ";\n\n        ", " {\n          min-height: auto;\n        }\n      }\n    "], ["\n      &.", ",\n        .", " {\n        border-radius: ", ";\n\n        ", " {\n          min-height: auto;\n        }\n      }\n    "])), utils_2.RcSplitButtonClasses.root, utils_2.RcSplitButtonClasses.groupedHorizontal, (0, foundation_1.radius)('circle'), Button_1.RcButton), variant === 'round' && (0, foundation_1.css)(templateObject_15 || (templateObject_15 = tslib_1.__makeTemplateObject(["\n      &.", " {\n        border-radius: ", ";\n        overflow: hidden;\n\n        ", " {\n          min-height: auto;\n        }\n\n        .", ",\n          .", " {\n          transform: scale(2);\n        }\n\n        .", " {\n          &.", " {\n            border-top-left-radius: ", ";\n            border-bottom-left-radius: ", ";\n          }\n\n          &.", " {\n            border-top-right-radius: ", ";\n            border-bottom-right-radius: ", ";\n          }\n        }\n      }\n    "], ["\n      &.", " {\n        border-radius: ", ";\n        overflow: hidden;\n\n        ", " {\n          min-height: auto;\n        }\n\n        .", ",\n          .", " {\n          transform: scale(2);\n        }\n\n        .", /** this safari issue, top level overflow is not work */ " {\n          &.", " {\n            border-top-left-radius: ", ";\n            border-bottom-left-radius: ", ";\n          }\n\n          &.", " {\n            border-top-right-radius: ", ";\n            border-bottom-right-radius: ", ";\n          }\n        }\n      }\n    "])), utils_2.RcSplitButtonClasses.root, (0, foundation_1.radius)('round'), Button_1.RcButton, utils_2.RcSplitButtonTouchRippleClasses.child, utils_2.RcSplitButtonTouchRippleClasses.ripplePulsate, utils_2.RcSplitButtonClasses.groupedHorizontal /** this safari issue, top level overflow is not work */, utils_2.RcSplitButtonClasses.actionButton, (0, foundation_1.radius)('round'), (0, foundation_1.radius)('round'), utils_2.RcSplitButtonClasses.controlButton, (0, foundation_1.radius)('round'), (0, foundation_1.radius)('round')), variantIs(['round', 'plainIcon']) && iconButtonStyle, utils_2.RcSplitButtonClasses.menuOpen, !variantIs(['plain', 'plainIcon']) && (0, foundation_1.css)(templateObject_16 || (templateObject_16 = tslib_1.__makeTemplateObject(["\n        .", " {\n          background: ", ";\n        }\n      "], ["\n        .", " {\n          background: ", ";\n        }\n      "])), utils_2.RcSplitButtonClasses.actionButton, !isContainer && styles_1.buttonHoverColor), utils_2.RcSplitButtonClasses.controlButton, isContainer ? containedActiveColor : activeColor24);
 };
+exports.splitButtonStyle = splitButtonStyle;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

package/components/Buttons/SplitButton/utils/SplitButtonUtils.d.ts

@@ -1,5 +1,5 @@
-import { RcSplitButtonVariant } from '../SplitButton';
-export declare const RcSplitButtonClasses: Partial<import("../../../../foundation").UnitMap<"vertical" | "root" | "disabled" | "contained" | "disableElevation" | "fullWidth" | "grouped" | "groupedHorizontal" | "groupedVertical" | "groupedText" | "groupedTextHorizontal" | "groupedTextVertical" | "groupedTextPrimary" | "groupedTextSecondary" | "groupedOutlined" | "groupedOutlinedHorizontal" | "groupedOutlinedVertical" | "groupedOutlinedPrimary" | "groupedOutlinedSecondary" | "groupedContained" | "groupedContainedHorizontal" | "groupedContainedVertical" | "groupedContainedPrimary" | "groupedContainedSecondary" | "actionButton" | "controlButton" | "menuOpen", any>>;
+import { RcSplitButtonProps, RcSplitButtonVariant } from '../SplitButton';
+export declare const RcSplitButtonClasses: Partial<import("../../../../foundation").UnitMap<import("@material-ui/core").ButtonGroupClassKey | "actionButton" | "controlButton" | "menuOpen", any>>;
 export declare const RcSplitButtonTouchRippleClasses: Partial<import("../../../../foundation").UnitMap<import("@material-ui/core/ButtonBase/TouchRipple").TouchRippleClassKey, any>>;
-export declare const getVariant: (variant: RcSplitButtonVariant) => "text" | "outlined" | "contained" | "plain" | undefined;
+export declare const getVariant: (variant: RcSplitButtonProps['variant']) => import("../../Button/Button").RcButtonVariant | undefined;
 export declare const variantIsHandler: (variant: RcSplitButtonVariant) => (arr: RcSplitButtonVariant[]) => boolean;

package/components/Buttons/SplitButton/utils/SplitButtonUtils.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.variantIsHandler = exports.getVariant = exports.RcSplitButtonTouchRippleClasses = exports.RcSplitButtonClasses = void 0;
 var foundation_1 = require("../../../../foundation");
-exports.RcSplitButtonClasses = foundation_1.RcClasses([
+exports.RcSplitButtonClasses = (0, foundation_1.RcClasses)([
     'root',
     'groupedHorizontal',
     'actionButton',
@@ -9,8 +10,8 @@ exports.RcSplitButtonClasses = foundation_1.RcClasses([
     'menuOpen',
     'groupedContainedHorizontal',
 ], 'RcSplitButton');
-exports.RcSplitButtonTouchRippleClasses = foundation_1.RcClasses(['child', 'ripplePulsate'], 'RcSplitButton-TouchRipple');
-exports.getVariant = function (variant) {
+exports.RcSplitButtonTouchRippleClasses = (0, foundation_1.RcClasses)(['child', 'ripplePulsate'], 'RcSplitButton-TouchRipple');
+var getVariant = function (variant) {
     switch (variant) {
         case 'round':
             return 'text';
@@ -20,6 +21,8 @@ exports.getVariant = function (variant) {
             return variant;
     }
 };
-exports.variantIsHandler = function (variant) {
+exports.getVariant = getVariant;
+var variantIsHandler = function (variant) {
     return function (arr) { return arr.includes(variant); };
 };
+exports.variantIsHandler = variantIsHandler;

package/components/Buttons/ToggleButton/ToggleButton.d.ts

@@ -3,8 +3,8 @@ import MuiToggleButton from '@material-ui/lab/ToggleButton';
 import { RcBaseProps, UnionPick } from '../../../foundation';
 import { RcIconProps } from '../../Icon';
 import { RcIconButtonProps } from '../IconButton';
-declare type RcToggleButtonVariant = 'standard' | 'box';
-declare type RcToggleButtonProps = {
+type RcToggleButtonVariant = 'standard' | 'box';
+type RcToggleButtonProps = {
     /** variant type for different display `ToggleButton` */
     variant?: RcToggleButtonVariant;
     /** IconProps apply on symbol */
@@ -12,8 +12,6 @@ declare type RcToggleButtonProps = {
     /** button size, with default with `medium`   */
     size?: UnionPick<NonNullable<RcIconButtonProps['size']>, 'small' | 'medium' | 'large'>;
 } & Pick<RcIconButtonProps, 'symbol'> & RcBaseProps<ComponentProps<typeof MuiToggleButton>, 'size'>;
-declare const RcToggleButton: import("styled-components").StyledComponentClass<Pick<import("../../Tooltip/withTooltip/withTooltip").WithTooltipProps<Pick<RcToggleButtonProps, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "disableFocusRipple" | "IconProps" | "selected"> & React.RefAttributes<any>>, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "disableFocusRipple" | "IconProps" | "useRcTooltip" | "TooltipProps" | "selected"> & React.RefAttributes<any>, import("../../../foundation").RcTheme, Pick<Pick<import("../../Tooltip/withTooltip/withTooltip").WithTooltipProps<Pick<RcToggleButtonProps, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "disableFocusRipple" | "IconProps" | "selected"> & React.RefAttributes<any>>, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "disableFocusRipple" | "IconProps" | "useRcTooltip" | "TooltipProps" | "selected"> & React.RefAttributes<any>, "symbol" | "ref" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "disableFocusRipple" | "IconProps" | "useRcTooltip" | "TooltipProps" | "selected"> & {
-    theme?: import("../../../foundation").RcTheme | undefined;
-}>;
+declare const RcToggleButton: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<import("../../Tooltip/withTooltip/withTooltip").WithTooltipProps<Omit<RcToggleButtonProps, "ref"> & React.RefAttributes<any>>, "ref"> & React.RefAttributes<any>>, import("../../../foundation").RcTheme, {}, never>;
 export { RcToggleButton };
 export type { RcToggleButtonProps, RcToggleButtonVariant };

package/components/Buttons/ToggleButton/ToggleButton.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcToggleButton = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var ToggleButton_1 = tslib_1.__importDefault(require("@material-ui/lab/ToggleButton"));
@@ -8,21 +9,21 @@ var Icon_1 = require("../../Icon");
 var Tooltip_1 = require("../../Tooltip");
 var styles_1 = require("./styles");
 var utils_1 = require("./utils");
-var _RcToggleButton = react_1.forwardRef(function (inProps, ref) {
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcToggleButton' });
+var _RcToggleButton = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcToggleButton' });
     var classesProp = props.classes, children = props.children, size = props.size, variant = props.variant, symbol = props.symbol, IconProps = props.IconProps, rest = tslib_1.__rest(props, ["classes", "children", "size", "variant", "symbol", "IconProps"]);
-    var innerRef = react_1.useRef(null);
-    var buttonRef = foundation_1.useForkRef(ref, innerRef);
-    var classes = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcToggleButtonClasses, classesProp); }, [classesProp]);
+    var innerRef = (0, react_1.useRef)(null);
+    var buttonRef = (0, foundation_1.useForkRef)(ref, innerRef);
+    var classes = (0, react_1.useMemo)(function () { return (0, foundation_1.combineClasses)(utils_1.RcToggleButtonClasses, classesProp); }, [classesProp]);
     // * need remove not need Mui-selected for render correct
-    react_1.useLayoutEffect(function () {
-        foundation_1.removeClassName(innerRef, 'Mui-selected');
+    (0, react_1.useLayoutEffect)(function () {
+        (0, foundation_1.removeClassName)(innerRef, 'Mui-selected');
     });
     return (react_1.default.createElement(ToggleButton_1.default, tslib_1.__assign({}, rest, { ref: buttonRef, innerRef: buttonRef, classes: classes }),
         symbol && react_1.default.createElement(Icon_1.RcIcon, tslib_1.__assign({ symbol: symbol, size: "inherit" }, IconProps)),
         children));
 });
-var RcToggleButton = foundation_1.styled(Tooltip_1.withTooltip(_RcToggleButton))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.ToggleButtonStyle);
+var RcToggleButton = (0, foundation_1.styled)((0, Tooltip_1.withTooltip)(_RcToggleButton))(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.ToggleButtonStyle);
 exports.RcToggleButton = RcToggleButton;
 RcToggleButton.defaultProps = {
     disableRipple: true,

package/components/Buttons/ToggleButton/styles/ToggleButtonStyle.js

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleButtonStyle = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../foundation");
 var utils_1 = require("../../../Icon/utils");
 var styles_1 = require("../../IconButton/styles");
 var utils_2 = require("../utils");
-var actionColor = foundation_1.palette2('action', 'grayLight');
-var selectedBgColor = foundation_1.setOpacity(foundation_1.focusVisibleColor, '12');
-exports.ToggleButtonStyle = function (props) {
+var actionColor = (0, foundation_1.palette2)('action', 'grayLight');
+var selectedBgColor = (0, foundation_1.setOpacity)(foundation_1.focusVisibleColor, '12');
+var ToggleButtonStyle = function (props) {
     var size = props.size, variant = props.variant, disabled = props.disabled;
-    var space = foundation_1.spacing(utils_2.RcToggleButtonSpace[size].area);
-    return foundation_1.css(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n    color: ", ";\n    border: unset;\n\n    ", " {\n      &:hover {\n        color: ", ";\n      }\n    }\n\n    &.", " {\n      color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n    }\n\n    .", " {\n      position: relative;\n      font-size: ", ";\n    }\n\n    ", ";\n\n    ", ";\n  "], ["\n    color: ", ";\n    border: unset;\n\n    ", " {\n      &:hover {\n        color: ", ";\n      }\n    }\n\n    &.", " {\n      color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n    }\n\n    .", " {\n      position: relative;\n      font-size: ", ";\n    }\n\n    ",
-        ";\n\n    ",
-        ";\n  "])), foundation_1.palette2('neutral', 'f04'), foundation_1.nonTouchHoverMedia, foundation_1.palette2('neutral', 'f06'), utils_2.RcToggleButtonClasses.selected, foundation_1.focusVisibleColor, utils_2.RcToggleButtonClasses.disabled, foundation_1.palette2('neutral', 'f02'), utils_2.RcToggleButtonClasses.label, foundation_1.px(utils_1.RcIconSizes[size]), variant === 'standard' && foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      padding: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ", ";\n\n      &:active {\n        background-color: ", ";\n      }\n\n      ", ";\n    "], ["\n      padding: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ", ";\n\n      &:active {\n        background-color: ", ";\n      }\n\n      ",
-        ";\n    "])), space, foundation_1.nonTouchHoverMedia, foundation_1.setOpacity(actionColor, '08'), foundation_1.focusVisibleShadowStyle('sm'), foundation_1.setOpacity(actionColor, '12'), !disabled && foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n        &.", ",\n          &.", ":hover {\n          background-color: ", ";\n        }\n      "], ["\n        &.", ",\n          &.", ":hover {\n          background-color: ", ";\n        }\n      "])), utils_2.RcToggleButtonClasses.selected, utils_2.RcToggleButtonClasses.selected, selectedBgColor)), variant === 'box' && foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      padding: ", ";\n\n      &.", " {\n        background-color: unset;\n      }\n\n      ", " {\n        &:hover,\n        &.", ":hover {\n          background-color: unset;\n        }\n      }\n\n      ", " {\n        .", " {\n          ", "\n        }\n      }\n    "], ["\n      padding: ", ";\n\n      &.", " {\n        background-color: unset;\n      }\n\n      ", " {\n        &:hover,\n        &.", ":hover {\n          background-color: unset;\n        }\n      }\n\n      ", " {\n        .", " {\n          ", "\n        }\n      }\n    "])), space, utils_2.RcToggleButtonClasses.selected, foundation_1.nonTouchHoverMedia, utils_2.RcToggleButtonClasses.selected, foundation_1.focusVisible, utils_2.RcToggleButtonClasses.label, styles_1.plainIconButtonFocusStyle({ radius: 'sm' })));
+    var space = (0, foundation_1.spacing)(utils_2.RcToggleButtonSpace[size].area);
+    return (0, foundation_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n    color: ", ";\n    border: unset;\n\n    ", " {\n      &:hover {\n        color: ", ";\n      }\n    }\n\n    &.", " {\n      color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n    }\n\n    .", " {\n      position: relative;\n      font-size: ", ";\n    }\n\n    ", ";\n\n    ", ";\n  "], ["\n    color: ", ";\n    border: unset;\n\n    ", " {\n      &:hover {\n        color: ", ";\n      }\n    }\n\n    &.", " {\n      color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n    }\n\n    .", " {\n      position: relative;\n      font-size: ", ";\n    }\n\n    ", ";\n\n    ", ";\n  "])), (0, foundation_1.palette2)('neutral', 'f04'), foundation_1.nonTouchHoverMedia, (0, foundation_1.palette2)('neutral', 'f06'), utils_2.RcToggleButtonClasses.selected, foundation_1.focusVisibleColor, utils_2.RcToggleButtonClasses.disabled, (0, foundation_1.palette2)('neutral', 'f02'), utils_2.RcToggleButtonClasses.label, (0, foundation_1.px)(utils_1.RcIconSizes[size]), variant === 'standard' && (0, foundation_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n      padding: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ", ";\n\n      &:active {\n        background-color: ", ";\n      }\n\n      ", ";\n    "], ["\n      padding: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ", ";\n\n      &:active {\n        background-color: ", ";\n      }\n\n      ", ";\n    "])), space, foundation_1.nonTouchHoverMedia, (0, foundation_1.setOpacity)(actionColor, '08'), (0, foundation_1.focusVisibleShadowStyle)('sm'), (0, foundation_1.setOpacity)(actionColor, '12'), !disabled && (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n        &.", ",\n          &.", ":hover {\n          background-color: ", ";\n        }\n      "], ["\n        &.", ",\n          &.", ":hover {\n          background-color: ", ";\n        }\n      "])), utils_2.RcToggleButtonClasses.selected, utils_2.RcToggleButtonClasses.selected, selectedBgColor)), variant === 'box' && (0, foundation_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n      padding: ", ";\n\n      &.", " {\n        background-color: unset;\n      }\n\n      ", " {\n        &:hover,\n        &.", ":hover {\n          background-color: unset;\n        }\n      }\n\n      ", " {\n        .", " {\n          ", "\n        }\n      }\n    "], ["\n      padding: ", ";\n\n      &.", " {\n        background-color: unset;\n      }\n\n      ", " {\n        &:hover,\n        &.", ":hover {\n          background-color: unset;\n        }\n      }\n\n      ", " {\n        .", " {\n          ", "\n        }\n      }\n    "])), space, utils_2.RcToggleButtonClasses.selected, foundation_1.nonTouchHoverMedia, utils_2.RcToggleButtonClasses.selected, foundation_1.focusVisible, utils_2.RcToggleButtonClasses.label, (0, styles_1.plainIconButtonFocusStyle)({ radius: 'sm' })));
 };
+exports.ToggleButtonStyle = ToggleButtonStyle;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/components/Buttons/ToggleButton/utils/ToggleButtonUtils.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcToggleButtonSpace = exports.RcToggleButtonClasses = void 0;
 var foundation_1 = require("../../../../foundation");
-exports.RcToggleButtonClasses = foundation_1.RcClasses(['selected', 'disabled', 'label'], 'RcToggleButton');
+exports.RcToggleButtonClasses = (0, foundation_1.RcClasses)(['selected', 'disabled', 'label'], 'RcToggleButton');
 exports.RcToggleButtonSpace = {
-    small: { area: 0.5, inner: 1, outer: 2 },
-    medium: { area: 1, inner: 1, outer: 2 },
-    large: { area: 1, inner: 2, outer: 4 },
+    small: { area: 0.5, inner: 1, outer: 2 }, // 16px icon, button width 20
+    medium: { area: 1, inner: 1, outer: 2 }, // 20px icon, button width 28
+    large: { area: 1, inner: 2, outer: 4 }, // 24px icon, button width 32
 };