@ringcentral/juno 2.45.1 → 3.0.0-alpha.0

package/es6/components/Badge/styles/BadgeStyle.js

@@ -9,20 +9,15 @@ export var BadgeStyle = function (_a) {
     var borderCurrColor = getParsePaletteColor(borderColor, null, false);
     // * only when value is string or number need check that length
     var manyChar = (['number', 'string'].includes(typeof badgeContent) &&
-        ("" + badgeContent).length !== 1) ||
+        "".concat(badgeContent).length !== 1) ||
         (max && max > 0 && +badgeContent > max);
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    .", " {\n      margin: ", ";\n      color: ", ";\n      background-color: ", ";\n      transition: ", ";\n\n      ", ";\n\n      ", "\n\n      ", "\n    }\n  "], ["\n    .", " {\n      margin: ", ";\n      color: ", ";\n      background-color: ", ";\n      transition: ",
-        ";\n\n      ",
-        ";\n\n      ",
-        "\n\n      ",
-        "\n    }\n  "])), RcBadgeClasses.badge, overlapRound && "var(" + roundBadgeMarginKey + ")", getParsePaletteColor(textColor, null, false), getParsePaletteColor(color, null, false), function (_a) {
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    .", " {\n      margin: ", ";\n      color: ", ";\n      background-color: ", ";\n      transition: ", ";\n\n      ", ";\n\n      ", "\n\n      ", "\n    }\n  "], ["\n    .", " {\n      margin: ", ";\n      color: ", ";\n      background-color: ", ";\n      transition: ", ";\n\n      ", ";\n\n      ", "\n\n      ", "\n    }\n  "])), RcBadgeClasses.badge, overlapRound && "var(".concat(roundBadgeMarginKey, ")"), getParsePaletteColor(textColor, null, false), getParsePaletteColor(color, null, false), function (_a) {
         var theme = _a.theme;
         return theme.transitions.create('transform', {
             easing: theme.transitions.easing.easeInOut,
             duration: theme.transitions.duration.enteringScreen,
         });
-    }, borderColor && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ",
-        "\n      "])), isStandard
+    }, borderColor && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), isStandard
         ? fakeBorder({ color: borderCurrColor, radius: 'round' })
         : css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              border-color: ", ";\n            "], ["\n              border-color: ", ";\n            "])), borderCurrColor)), isStandard && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        height: 18px;\n        min-width: 18px;\n        padding: ", ";\n      "], ["\n        height: 18px;\n        min-width: 18px;\n        padding: ", ";\n      "])), !manyChar && 0), overlapNone && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        position: unset;\n        transform: unset;\n\n        &.", " {\n          transform: scale(0);\n        }\n      "], ["\n        position: unset;\n        transform: unset;\n\n        &.", " {\n          transform: scale(0);\n        }\n      "])), RcBadgeClasses.invisible));
 };

package/es6/components/Buttons/Button/Button.js

@@ -102,11 +102,7 @@ var RcButton = styled(withTooltip(_RcButton)).attrs(function (inProps) {
     theme = _a.theme, 
     // Omit className, prevent duplicate className
     className = _a.className, _b = _a.size, size = _b === void 0 ? RcButtonDefaultSize : _b, _c = _a.color, color = _c === void 0 ? RcButtonDefaultColor : _c, _d = _a.variant, variant = _d === void 0 ? RcButtonDefaultVariant : _d, _e = _a.loadingMode, loadingMode = _e === void 0 ? 'replace' : _e, _f = _a.focusVariant, focusVariant = _f === void 0 ? 'ripple' : _f, rest = __rest(_a, ["theme", "className", "size", "color", "variant", "loadingMode", "focusVariant"]);
-    return __assign({ size: size,
-        color: color,
-        variant: variant,
-        loadingMode: loadingMode,
-        focusVariant: focusVariant }, rest);
+    return __assign({ size: size, color: color, variant: variant, loadingMode: loadingMode, focusVariant: focusVariant }, rest);
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), buttonStyle);
 RcButton.displayName = 'RcButton';
 export { RcButton };

package/es6/components/Buttons/Button/styles/StyledButton.js

@@ -30,20 +30,9 @@ export var buttonStyle = function (props) {
     var plainTextColor = plainButtonTextColor(props);
     var iconSpace = spacing(RcButtonIconSpace[size]);
     var isPlain = variant === 'plain';
-    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    text-transform: none;\n    ", ";\n    text-align: center;\n    box-shadow: ", ";\n    border-radius: ", ";\n\n    ", ";\n\n    ", ";\n\n    .", " {\n      margin-right: ", ";\n\n      ", ";\n    }\n\n    .", " {\n      margin-left: ", ";\n\n      ", ";\n    }\n\n    &.", " {\n      color: ", ";\n\n      &.", " {\n        color: ", ";\n      }\n\n      ", "\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ", "\n\n      ", "\n    }\n\n    &.", " {\n      color: ", ";\n      border-color: ", ";\n      padding: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      &.", " {\n        color: ", ";\n        border-color: ", ";\n      }\n\n      ", "\n    }\n  "], ["\n    text-transform: none;\n    ", ";\n    text-align: center;\n    box-shadow: ", ";\n    border-radius: ", ";\n\n    ",
-        ";\n\n    ",
-        ";\n\n    .", " {\n      margin-right: ", ";\n\n      ",
-        ";\n    }\n\n    .", " {\n      margin-left: ", ";\n\n      ",
-        ";\n    }\n\n    &.", " {\n      color: ", ";\n\n      &.", " {\n        color: ", ";\n      }\n\n      ",
-        "\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ",
-        ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ",
-        "\n\n      ",
-        "\n    }\n\n    &.", " {\n      color: ", ";\n      border-color: ", ";\n      padding: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      &.", " {\n        color: ", ";\n        border-color: ", ";\n      }\n\n      ",
-        "\n    }\n  "])), typography(RcButtonTypographies[size], true), !keepElevation && 'unset', radius(radiusProp), isMask && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &:after {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 100%;\n        width: 100%;\n        display: block;\n        background: ", ";\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n      }\n    "], ["\n      &:after {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 100%;\n        width: 100%;\n        display: block;\n        background: ", ";\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n      }\n    "])), setOpacity(palette2('neutral', 'b01'), '32'), radius(radiusProp !== null && radiusProp !== void 0 ? radiusProp : 'lg')), !isPlain && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      min-width: ", ";\n      min-height: ", ";\n      padding: ", ";\n    "], ["\n      min-width: ", ";\n      min-height: ", ";\n      padding: ", ";\n    "])), px(RcButtonMinWidths[size]), px(RcButtonHeights[size]), spacing(0, RcButtonPadding[size])), RcButtonClasses.startIcon, iconSpace, isPlain && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        margin-left: 0;\n      "], ["\n        margin-left: 0;\n      "]))), RcButtonClasses.endIcon, iconSpace, isPlain && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        margin-right: 0;\n      "], ["\n        margin-right: 0;\n      "]))), RcButtonClasses.text, plainButtonTextColor, RcButtonClasses.disabled, textDisabledColor, focusVariant === 'focusRing' && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      "], ["\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      "])), focusVisible, focusRing('normal', { borderRadius: radiusProp }), textButtonFocusVisibleColor), nonTouchHoverMedia, buttonHoverColor, isPlain && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        padding: ", ";\n        min-width: unset;\n        line-height: 1;\n\n        ", " {\n          &:hover {\n            color: ", ";\n            background-color: transparent;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: transparent;\n        }\n\n        &:active {\n          &.", " {\n            color: ", ";\n          }\n        }\n      "], ["\n        padding: ", ";\n        min-width: unset;\n        line-height: 1;\n\n        ", " {\n          &:hover {\n            color: ", ";\n            background-color: transparent;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: transparent;\n        }\n\n        &:active {\n          &.", " {\n            color: ", ";\n          }\n        }\n      "])), spacing(1), nonTouchHoverMedia, setOpacity(plainTextColor, '80'), focusVisible, focusRing('inset', { borderRadius: radiusProp }), RcButtonClasses.text, setOpacity(plainTextColor, '64')), RcButtonClasses.contained, buttonTextColor, buttonColor, nonTouchHoverMedia, containedButtonHoverColor, focusVariant === 'focusRing' && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        ", " {\n          ", "\n          box-shadow: unset;\n        }\n      "], ["\n        ", " {\n          ",
-        "\n          box-shadow: unset;\n        }\n      "])), focusVisible, focusRing('normal', {
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    text-transform: none;\n    ", ";\n    text-align: center;\n    box-shadow: ", ";\n    border-radius: ", ";\n\n    ", ";\n\n    ", ";\n\n    .", " {\n      margin-right: ", ";\n\n      ", ";\n    }\n\n    .", " {\n      margin-left: ", ";\n\n      ", ";\n    }\n\n    &.", " {\n      color: ", ";\n\n      &.", " {\n        color: ", ";\n      }\n\n      ", "\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ", "\n\n      ", "\n    }\n\n    &.", " {\n      color: ", ";\n      border-color: ", ";\n      padding: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      &.", " {\n        color: ", ";\n        border-color: ", ";\n      }\n\n      ", "\n    }\n  "], ["\n    text-transform: none;\n    ", ";\n    text-align: center;\n    box-shadow: ", ";\n    border-radius: ", ";\n\n    ", ";\n\n    ", ";\n\n    .", " {\n      margin-right: ", ";\n\n      ", ";\n    }\n\n    .", " {\n      margin-left: ", ";\n\n      ", ";\n    }\n\n    &.", " {\n      color: ", ";\n\n      &.", " {\n        color: ", ";\n      }\n\n      ", "\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ", "\n\n      ", "\n    }\n\n    &.", " {\n      color: ", ";\n      border-color: ", ";\n      padding: ", ";\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      &.", " {\n        color: ", ";\n        border-color: ", ";\n      }\n\n      ", "\n    }\n  "])), typography(RcButtonTypographies[size], true), !keepElevation && 'unset', radius(radiusProp), isMask && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &:after {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 100%;\n        width: 100%;\n        display: block;\n        background: ", ";\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n      }\n    "], ["\n      &:after {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 100%;\n        width: 100%;\n        display: block;\n        background: ", ";\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n      }\n    "])), setOpacity(palette2('neutral', 'b01'), '32'), radius(radiusProp !== null && radiusProp !== void 0 ? radiusProp : 'lg')), !isPlain && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      min-width: ", ";\n      min-height: ", ";\n      padding: ", ";\n    "], ["\n      min-width: ", ";\n      min-height: ", ";\n      padding: ", ";\n    "])), px(RcButtonMinWidths[size]), px(RcButtonHeights[size]), spacing(0, RcButtonPadding[size])), RcButtonClasses.startIcon, iconSpace, isPlain && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        margin-left: 0;\n      "], ["\n        margin-left: 0;\n      "]))), RcButtonClasses.endIcon, iconSpace, isPlain && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        margin-right: 0;\n      "], ["\n        margin-right: 0;\n      "]))), RcButtonClasses.text, plainButtonTextColor, RcButtonClasses.disabled, textDisabledColor, focusVariant === 'focusRing' && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      "], ["\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      "])), focusVisible, focusRing('normal', { borderRadius: radiusProp }), textButtonFocusVisibleColor), nonTouchHoverMedia, buttonHoverColor, isPlain && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        padding: ", ";\n        min-width: unset;\n        line-height: 1;\n\n        ", " {\n          &:hover {\n            color: ", ";\n            background-color: transparent;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: transparent;\n        }\n\n        &:active {\n          &.", " {\n            color: ", ";\n          }\n        }\n      "], ["\n        padding: ", ";\n        min-width: unset;\n        line-height: 1;\n\n        ", " {\n          &:hover {\n            color: ", ";\n            background-color: transparent;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: transparent;\n        }\n\n        &:active {\n          &.", " {\n            color: ", ";\n          }\n        }\n      "])), spacing(1), nonTouchHoverMedia, setOpacity(plainTextColor, '80'), focusVisible, focusRing('inset', { borderRadius: radiusProp }), RcButtonClasses.text, setOpacity(plainTextColor, '64')), RcButtonClasses.contained, buttonTextColor, buttonColor, nonTouchHoverMedia, containedButtonHoverColor, focusVariant === 'focusRing' && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        ", " {\n          ", "\n          box-shadow: unset;\n        }\n      "], ["\n        ", " {\n          ", "\n          box-shadow: unset;\n        }\n      "])), focusVisible, focusRing('normal', {
         borderRadius: radiusProp,
-    })), !isMask && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        &.", " {\n          background-color: ", ";\n          color: ", ";\n        }\n      "], ["\n        &.", " {\n          background-color: ", ";\n          color: ", ";\n        }\n      "])), RcButtonClasses.disabled, palette2('disabled', 'b01'), palette2('disabled', 'f01')), RcButtonClasses.outlined, plainButtonTextColor, plainButtonTextColor, spacing(0, RcButtonPadding[size] - 0.25), nonTouchHoverMedia, buttonHoverColor, RcButtonClasses.disabled, textDisabledColor, textDisabledColor, focusVariant === 'focusRing' && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        ", " {\n          ", "\n        }\n      "], ["\n        ", " {\n          ",
-        "\n        }\n      "])), focusVisible, focusRing('normal', {
+    })), !isMask && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        &.", " {\n          background-color: ", ";\n          color: ", ";\n        }\n      "], ["\n        &.", " {\n          background-color: ", ";\n          color: ", ";\n        }\n      "])), RcButtonClasses.disabled, palette2('disabled', 'b01'), palette2('disabled', 'f01')), RcButtonClasses.outlined, plainButtonTextColor, plainButtonTextColor, spacing(0, RcButtonPadding[size] - 0.25), nonTouchHoverMedia, buttonHoverColor, RcButtonClasses.disabled, textDisabledColor, textDisabledColor, focusVariant === 'focusRing' && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        ", " {\n          ", "\n        }\n      "], ["\n        ", " {\n          ", "\n        }\n      "])), focusVisible, focusRing('normal', {
         borderRadius: radiusProp,
         borderWidth: '1px',
     })));

package/es6/components/Buttons/ButtonGroup/styles/StyledButtonGroup.js

@@ -1,2 +1,3 @@
 // import MuiButtonGroup from '@material-ui/core/ButtonGroup';
 // import React, { FunctionComponent } from 'react';
+export {};

package/es6/components/Buttons/ButtonGroup/styles/index.js

@@ -0,0 +1 @@
+export * from './StyledButtonGroup';

package/es6/components/Buttons/ButtonGroup/utils/ButtonGroupUtils.js

@@ -1,2 +1,3 @@
 // import { RcClasses } from '../../../../foundation';
 // import { RcButtonGroupProps } from '../ButtonGroup';
+export {};

package/es6/components/Buttons/ButtonGroup/utils/index.js

@@ -0,0 +1 @@
+export * from './ButtonGroupUtils';

package/es6/components/Buttons/IconButton/IconButton.js

@@ -59,15 +59,7 @@ var RcIconButton = styled(withTooltip(_RcIconButton)).attrs(function (inProps) {
     theme = _a.theme, 
     // Omit className, prevent duplicate className
     className = _a.className, _b = _a.variant, variant = _b === void 0 ? 'round' : _b, _c = _a.color, color = _c === void 0 ? 'neutral.f04' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.type, type = _e === void 0 ? 'button' : _e, _f = _a.focusRipple, focusRipple = _f === void 0 ? true : _f, _g = _a.disableTouchRipple, disableTouchRipple = _g === void 0 ? true : _g, _h = _a.classes, classes = _h === void 0 ? {} : _h, _j = _a.useRcTooltip, useRcTooltip = _j === void 0 ? true : _j, _k = _a.focusVariant, focusVariant = _k === void 0 ? 'highlight' : _k, rest = __rest(_a, ["theme", "className", "variant", "color", "size", "type", "focusRipple", "disableTouchRipple", "classes", "useRcTooltip", "focusVariant"]);
-    return __assign({ variant: variant,
-        color: color,
-        size: size,
-        type: type,
-        focusRipple: focusRipple,
-        disableTouchRipple: disableTouchRipple,
-        classes: classes,
-        useRcTooltip: useRcTooltip,
-        focusVariant: focusVariant }, rest);
+    return __assign({ variant: variant, color: color, size: size, type: type, focusRipple: focusRipple, disableTouchRipple: disableTouchRipple, classes: classes, useRcTooltip: useRcTooltip, focusVariant: focusVariant }, rest);
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
 RcIconButton.displayName = 'RcIconButton';
 export { RcIconButton };

package/es6/components/Buttons/IconButton/styles/StyledIconButton.js

@@ -13,7 +13,7 @@ var containedVariantTransitions = function (_a) {
     });
 };
 export var plainIconButtonFocusStyle = function (_a) {
-    var _b = (_a === void 0 ? {} : _a).radius, radiusProp = _b === void 0 ? 'circle' : _b;
+    var _b = _a === void 0 ? {} : _a, _c = _b.radius, radiusProp = _c === void 0 ? 'circle' : _c;
     return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:after {\n    content: '';\n    position: absolute;\n    ", ";\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n    z-index: 1;\n  }\n"], ["\n  &:after {\n    content: '';\n    position: absolute;\n    ", ";\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n    z-index: 1;\n  }\n"])), getFocusVisibleInsetSize, focusVisibleColor, radius(radiusProp));
 };
 export var iconButtonStyle = function (_a) {
@@ -43,23 +43,13 @@ export var iconButtonStyle = function (_a) {
             radius: currRadius,
             pseudo: true,
         });
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ", ";\n\n    font-size: ", ";\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n\n      ", "\n\n      &:active {\n        color: ", ";\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      &.", " {\n        ", "\n      }\n\n      &:before {\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        position: absolute;\n      }\n\n      ", ";\n\n      ", " {\n        &:hover {\n          &:before {\n            background-color: ", ";\n          }\n\n          color: ", ";\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        color: ", ";\n      }\n\n      &:active {\n        ", "\n\n        color: ", ";\n      }\n    }\n\n    &.", " {\n      ", ";\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    ", "\n  "], ["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ",
-        ";\n\n    font-size: ",
-        ";\n\n    ", " {\n      &:hover {\n        background-color: ",
-        ";\n\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    ", " {\n      background-color: ",
-        ";\n\n      ",
-        "\n\n      &:active {\n        color: ", ";\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ",
-        ";\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      &.", " {\n        ",
-        "\n      }\n\n      &:before {\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        position: absolute;\n      }\n\n      ", ";\n\n      ", " {\n        &:hover {\n          &:before {\n            background-color: ", ";\n          }\n\n          color: ", ";\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        color: ", ";\n      }\n\n      &:active {\n        ",
-        "\n\n        color: ", ";\n      }\n    }\n\n    &.", " {\n      ", ";\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    "
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ", ";\n\n    font-size: ", ";\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n\n      ", "\n\n      &:active {\n        color: ", ";\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      &.", " {\n        ", "\n      }\n\n      &:before {\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        position: absolute;\n      }\n\n      ", ";\n\n      ", " {\n        &:hover {\n          &:before {\n            background-color: ", ";\n          }\n\n          color: ", ";\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        color: ", ";\n      }\n\n      &:active {\n        ", "\n\n        color: ", ";\n      }\n    }\n\n    &.", " {\n      ", ";\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    ", "\n  "], ["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    border-radius: ", ";\n    transition: ", ";\n    cursor: ", ";\n    background-color: ", ";\n    box-shadow: ", ";\n\n    ", ";\n\n    font-size: ", ";\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n\n        color: ", ";\n      }\n    }\n\n    &:active {\n      color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n\n      ", "\n\n      &:active {\n        color: ", ";\n      }\n\n      ", ";\n    }\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    &.", " {\n      color: ", ";\n\n      background-color: ", ";\n    }\n\n    &.", " {\n      opacity: 0;\n      visibility: hidden;\n      width: 0;\n      height: 0;\n    }\n\n    &.", " {\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      color: ", ";\n      background-color: ", ";\n\n      &.", " {\n        ", "\n      }\n\n      &:before {\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        position: absolute;\n      }\n\n      ", ";\n\n      ", " {\n        &:hover {\n          &:before {\n            background-color: ", ";\n          }\n\n          color: ", ";\n        }\n      }\n\n      ", " {\n        &:before {\n          background-color: ", ";\n        }\n\n        color: ", ";\n      }\n\n      &:active {\n        ", "\n\n        color: ", ";\n      }\n    }\n\n    &.", " {\n      ", ";\n    }\n\n    .", " {\n      border-radius: 0;\n      animation-name: none;\n      opacity: 0;\n    }\n\n    "
         /**
          * that is equilateral triangle, the third Side length is
          * Math.sqrt(2) = 1.414213562373095, so we scale that
          * to make that full with this square
          */
-        ,
-        "\n  "])), containerSize, containerSize, mainColor, radiusValue, backgroundTransition, disabled ? 'default' : 'pointer', (shouldPersistBg || isInverse) && persistBgColor, nowShadow, nowShadow && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      transition: ", ";\n\n      &:active {\n        box-shadow: ", ";\n      }\n    "], ["\n      transition: ", ";\n\n      &:active {\n        box-shadow: ",
-        ";\n      }\n    "])), containedVariantTransitions, shadows(activeElevation !== null && activeElevation !== void 0 ? activeElevation : (elevation ? Math.min(+elevation + 11, 24) : '12'))), stretchIcon
+        , "\n  "])), containerSize, containerSize, mainColor, radiusValue, backgroundTransition, disabled ? 'default' : 'pointer', (shouldPersistBg || isInverse) && persistBgColor, nowShadow, nowShadow && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      transition: ", ";\n\n      &:active {\n        box-shadow: ", ";\n      }\n    "], ["\n      transition: ", ";\n\n      &:active {\n        box-shadow: ", ";\n      }\n    "])), containedVariantTransitions, shadows(activeElevation !== null && activeElevation !== void 0 ? activeElevation : (elevation ? Math.min(+elevation + 11, 24) : '12'))), stretchIcon
         ? containerSize
         : px(isOutline
             ? iconSize * 1.2 // keep size same as before

package/es6/components/Buttons/IconButtonGroup/styles/IconButtonGroupStyle.js

@@ -1,13 +1,12 @@
-import { __makeTemplateObject, __read, __spread } from "tslib";
+import { __makeTemplateObject, __read, __spreadArray } from "tslib";
 import { css, radius, spacing } from '../../../../foundation';
 export var IconButtonGroupStyle = function (props) {
     var direction = props.direction, gap = props.gap, spaceProp = props.space, radiusProp = props.radius;
     var gapSpace = gap && spacing(gap);
     var paddingValue = spaceProp &&
-        (spaceProp instanceof Array ? spacing.apply(void 0, __spread(spaceProp)) : spacing(spaceProp));
+        (spaceProp instanceof Array ? spacing.apply(void 0, __spreadArray([], __read(spaceProp), false)) : spacing(spaceProp));
     var isVertical = direction === 'vertical';
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border-radius: ", ";\n      display: inline-flex;\n      flex-direction: ", ";\n      white-space: nowrap;\n      flex-wrap: nowrap;\n      flex-shrink: 0;\n      align-items: center;\n      padding: ", ";\n\n      > * + * {\n        ", ";\n      }\n    "], ["\n      border-radius: ", ";\n      display: inline-flex;\n      flex-direction: ", ";\n      white-space: nowrap;\n      flex-wrap: nowrap;\n      flex-shrink: 0;\n      align-items: center;\n      padding: ", ";\n\n      > * + * {\n        ",
-        ";\n      }\n    "])), radiusProp && radius(radiusProp), isVertical ? 'column' : 'row', paddingValue, isVertical
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border-radius: ", ";\n      display: inline-flex;\n      flex-direction: ", ";\n      white-space: nowrap;\n      flex-wrap: nowrap;\n      flex-shrink: 0;\n      align-items: center;\n      padding: ", ";\n\n      > * + * {\n        ", ";\n      }\n    "], ["\n      border-radius: ", ";\n      display: inline-flex;\n      flex-direction: ", ";\n      white-space: nowrap;\n      flex-wrap: nowrap;\n      flex-shrink: 0;\n      align-items: center;\n      padding: ", ";\n\n      > * + * {\n        ", ";\n      }\n    "])), radiusProp && radius(radiusProp), isVertical ? 'column' : 'row', paddingValue, isVertical
         ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              margin-top: ", ";\n            "], ["\n              margin-top: ", ";\n            "])), gapSpace) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              margin-left: ", ";\n            "], ["\n              margin-left: ", ";\n            "])), gapSpace));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/es6/components/Buttons/SplitButton/SplitButton.js

@@ -122,8 +122,7 @@ var _RcSplitButton = forwardRef(function (inProps, ref) {
             : {};
     }, [variant]);
     var _ActionButtonProps = useMemo(function () {
-        return __assign(__assign(__assign({ TouchRippleProps: TouchRippleProps,
-            loading: loading }, actionButtonProps), SharedButtonProps), ActionButtonProps);
+        return __assign(__assign(__assign({ TouchRippleProps: TouchRippleProps, loading: loading }, actionButtonProps), SharedButtonProps), ActionButtonProps);
     }, [
         ActionButtonProps,
         SharedButtonProps,

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

@@ -36,8 +36,7 @@ var iconButtonStyle = function (_a) {
     // * designer define right space little small with 4px
     var rightSpace = toSpacing(currSize - 4);
     var width = px(currIconSize);
-    return css(templateObject_7 || (templateObject_7 = __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  "])), RcSplitButtonClasses.groupedHorizontal, RcSplitButtonClasses.actionButton, variant === 'plainIcon'
+    return css(templateObject_7 || (templateObject_7 = __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  "])), RcSplitButtonClasses.groupedHorizontal, RcSplitButtonClasses.actionButton, variant === 'plainIcon'
         ? css(templateObject_5 || (templateObject_5 = __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            "])), focusVisible, plainIconButtonFocusStyle({ radius: 'circle' })) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n              padding: ", ";\n            "], ["\n              padding: ", ";\n            "])), spacing(space, rightSpace, space, space)), RcIcon, RcSplitButtonClasses.controlButton, width, width);
 };
 export var splitButtonStyle = function (props) {
@@ -47,19 +46,9 @@ export var splitButtonStyle = function (props) {
     var isContainer = variant === 'contained';
     var activeColor24 = setOpacity(currColor, '24');
     var containedActiveColor = setOpacity(currColor, '24', true);
-    return css(templateObject_17 || (templateObject_17 = __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  "])), RcSplitButtonClasses.groupedContainedHorizontal, RcSplitButtonClasses.actionButton, RcSplitButtonClasses.controlButton, RcSplitButtonClasses.root, !disabled &&
+    return css(templateObject_17 || (templateObject_17 = __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  "])), RcSplitButtonClasses.groupedContainedHorizontal, RcSplitButtonClasses.actionButton, RcSplitButtonClasses.controlButton, RcSplitButtonClasses.root, !disabled &&
         variantIs(['outlined', 'text', 'round']) &&
-        !loading && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        transition: ", ";\n\n        ", " {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "], ["\n        transition: ", ";\n\n        ", " {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "])), transition, nonTouchHoverMedia, buttonHoverColor), variantIs(['text', 'round', 'plainIcon']) && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        align-items: center;\n\n        ", "\n      "], ["\n        align-items: center;\n\n        ",
-        "\n      "])), !disabled &&
-        !loading && css(templateObject_9 || (templateObject_9 = __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        "])), nonTouchHoverMedia, RcSplitButtonClasses.controlButton, activeColor24)), RcSplitButtonClasses.groupedHorizontal, variantIs(['outlined', 'text', 'contained']) && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        min-width: 72px;\n      "], ["\n        min-width: 72px;\n      "]))), RcSplitButtonClasses.controlButton, borderLeft, RcSplitButtonClasses.actionButton, variant === 'outlined' && 0, RcSplitButtonClasses.actionButton, variantIs(['plain', 'plainIcon']) && css(templateObject_13 || (templateObject_13 = __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      "])), RcSplitButtonClasses.controlButton, transition, !loading && css(templateObject_12 || (templateObject_12 = __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          "])), nonTouchHoverMedia, buttonHoverColor, focusVisible, buttonHoverColor), RcSplitButtonClasses.actionButton), variant === 'plainIcon' && css(templateObject_14 || (templateObject_14 = __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    "])), RcSplitButtonClasses.root, RcSplitButtonClasses.groupedHorizontal, radius('circle'), RcButton), variant === 'round' && css(templateObject_15 || (templateObject_15 = __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    "])), RcSplitButtonClasses.root, radius('round'), RcButton, RcSplitButtonTouchRippleClasses.child, RcSplitButtonTouchRippleClasses.ripplePulsate, RcSplitButtonClasses.groupedHorizontal /** this safari issue, top level overflow is not work */, RcSplitButtonClasses.actionButton, radius('round'), radius('round'), RcSplitButtonClasses.controlButton, radius('round'), radius('round')), variantIs(['round', 'plainIcon']) && iconButtonStyle, RcSplitButtonClasses.menuOpen, !variantIs(['plain', 'plainIcon']) && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n        .", " {\n          background: ", ";\n        }\n      "], ["\n        .", " {\n          background: ", ";\n        }\n      "])), RcSplitButtonClasses.actionButton, !isContainer && buttonHoverColor), RcSplitButtonClasses.controlButton, isContainer ? containedActiveColor : activeColor24);
+        !loading && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        transition: ", ";\n\n        ", " {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "], ["\n        transition: ", ";\n\n        ", " {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "])), transition, nonTouchHoverMedia, buttonHoverColor), variantIs(['text', 'round', 'plainIcon']) && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        align-items: center;\n\n        ", "\n      "], ["\n        align-items: center;\n\n        ", "\n      "])), !disabled &&
+        !loading && css(templateObject_9 || (templateObject_9 = __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        "])), nonTouchHoverMedia, RcSplitButtonClasses.controlButton, activeColor24)), RcSplitButtonClasses.groupedHorizontal, variantIs(['outlined', 'text', 'contained']) && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        min-width: 72px;\n      "], ["\n        min-width: 72px;\n      "]))), RcSplitButtonClasses.controlButton, borderLeft, RcSplitButtonClasses.actionButton, variant === 'outlined' && 0, RcSplitButtonClasses.actionButton, variantIs(['plain', 'plainIcon']) && css(templateObject_13 || (templateObject_13 = __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      "])), RcSplitButtonClasses.controlButton, transition, !loading && css(templateObject_12 || (templateObject_12 = __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          "])), nonTouchHoverMedia, buttonHoverColor, focusVisible, buttonHoverColor), RcSplitButtonClasses.actionButton), variant === 'plainIcon' && css(templateObject_14 || (templateObject_14 = __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    "])), RcSplitButtonClasses.root, RcSplitButtonClasses.groupedHorizontal, radius('circle'), RcButton), variant === 'round' && css(templateObject_15 || (templateObject_15 = __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    "])), RcSplitButtonClasses.root, radius('round'), RcButton, RcSplitButtonTouchRippleClasses.child, RcSplitButtonTouchRippleClasses.ripplePulsate, RcSplitButtonClasses.groupedHorizontal /** this safari issue, top level overflow is not work */, RcSplitButtonClasses.actionButton, radius('round'), radius('round'), RcSplitButtonClasses.controlButton, radius('round'), radius('round')), variantIs(['round', 'plainIcon']) && iconButtonStyle, RcSplitButtonClasses.menuOpen, !variantIs(['plain', 'plainIcon']) && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n        .", " {\n          background: ", ";\n        }\n      "], ["\n        .", " {\n          background: ", ";\n        }\n      "])), RcSplitButtonClasses.actionButton, !isContainer && buttonHoverColor), RcSplitButtonClasses.controlButton, isContainer ? containedActiveColor : activeColor24);
 };
 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/es6/components/Buttons/ToggleButton/styles/ToggleButtonStyle.js

@@ -8,9 +8,6 @@ var selectedBgColor = setOpacity(focusVisibleColor, '12');
 export var ToggleButtonStyle = function (props) {
     var size = props.size, variant = props.variant, disabled = props.disabled;
     var space = spacing(RcToggleButtonSpace[size].area);
-    return css(templateObject_4 || (templateObject_4 = __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  "])), palette2('neutral', 'f04'), nonTouchHoverMedia, palette2('neutral', 'f06'), RcToggleButtonClasses.selected, focusVisibleColor, RcToggleButtonClasses.disabled, palette2('neutral', 'f02'), RcToggleButtonClasses.label, px(RcIconSizes[size]), variant === 'standard' && css(templateObject_2 || (templateObject_2 = __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, nonTouchHoverMedia, setOpacity(actionColor, '08'), focusVisibleShadowStyle('sm'), setOpacity(actionColor, '12'), !disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        &.", ",\n          &.", ":hover {\n          background-color: ", ";\n        }\n      "], ["\n        &.", ",\n          &.", ":hover {\n          background-color: ", ";\n        }\n      "])), RcToggleButtonClasses.selected, RcToggleButtonClasses.selected, selectedBgColor)), variant === 'box' && css(templateObject_3 || (templateObject_3 = __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, RcToggleButtonClasses.selected, nonTouchHoverMedia, RcToggleButtonClasses.selected, focusVisible, RcToggleButtonClasses.label, plainIconButtonFocusStyle({ radius: 'sm' })));
+    return css(templateObject_4 || (templateObject_4 = __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  "])), palette2('neutral', 'f04'), nonTouchHoverMedia, palette2('neutral', 'f06'), RcToggleButtonClasses.selected, focusVisibleColor, RcToggleButtonClasses.disabled, palette2('neutral', 'f02'), RcToggleButtonClasses.label, px(RcIconSizes[size]), variant === 'standard' && css(templateObject_2 || (templateObject_2 = __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, nonTouchHoverMedia, setOpacity(actionColor, '08'), focusVisibleShadowStyle('sm'), setOpacity(actionColor, '12'), !disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        &.", ",\n          &.", ":hover {\n          background-color: ", ";\n        }\n      "], ["\n        &.", ",\n          &.", ":hover {\n          background-color: ", ";\n        }\n      "])), RcToggleButtonClasses.selected, RcToggleButtonClasses.selected, selectedBgColor)), variant === 'box' && css(templateObject_3 || (templateObject_3 = __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, RcToggleButtonClasses.selected, nonTouchHoverMedia, RcToggleButtonClasses.selected, focusVisible, RcToggleButtonClasses.label, plainIconButtonFocusStyle({ radius: 'sm' })));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,7 +1,7 @@
 import { RcClasses } from '../../../../foundation';
 export var RcToggleButtonClasses = RcClasses(['selected', 'disabled', 'label'], 'RcToggleButton');
 export var 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
 };

package/es6/components/Buttons/ToggleButtonGroup/ToggleButtonGroup.js

@@ -14,7 +14,7 @@ var _RcToggleButtonGroup = forwardRef(function (inProps, ref) {
     return (React.createElement(MuiToggleButtonGroup, __assign({}, rest, { ref: ref, classes: classes }), children.map(function (x, i) {
         // * that key follow mui key logic
         // eslint-disable-next-line react/no-array-index-key
-        return React.cloneElement(x, { key: "." + i, size: size, variant: variant });
+        return React.cloneElement(x, { key: ".".concat(i), size: size, variant: variant });
     })));
 });
 var RcToggleButtonGroup = styled(_RcToggleButtonGroup)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ToggleButtonGroupStyle);

package/es6/components/Buttons/ToggleButtonGroup/styles/ToggleButtonGroupStyle.js

@@ -11,8 +11,7 @@ export var ToggleButtonGroupStyle = function (props) {
     var isHorizontal = orientation !== 'vertical';
     var _a = RcToggleButtonSpace[size], area = _a.area, inner = _a.inner;
     var boxInnerPadding = spacing(area + inner + 0.25);
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .", "\n      + .", ",\n      .", "\n      + .", " {\n      ", " {\n        &:before {\n          content: '';\n          position: absolute;\n          pointer-events: none;\n          background: ", ";\n          top: 0;\n          left: 0;\n\n          ", ";\n        }\n      }\n    }\n\n    ", ";\n    ", ";\n  "], ["\n    .", "\n      + .", ",\n      .", "\n      + .", " {\n      ", " {\n        &:before {\n          content: '';\n          position: absolute;\n          pointer-events: none;\n          background: ", ";\n          top: 0;\n          left: 0;\n\n          ",
-        ";\n        }\n      }\n    }\n\n    ", ";\n    ", ";\n  "])), RcToggleButtonGroupClasses.groupedHorizontal, RcToggleButtonGroupClasses.groupedHorizontal, RcToggleButtonGroupClasses.groupedVertical, RcToggleButtonGroupClasses.groupedVertical, RcIcon, dividerColor, isHorizontal
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .", "\n      + .", ",\n      .", "\n      + .", " {\n      ", " {\n        &:before {\n          content: '';\n          position: absolute;\n          pointer-events: none;\n          background: ", ";\n          top: 0;\n          left: 0;\n\n          ", ";\n        }\n      }\n    }\n\n    ", ";\n    ", ";\n  "], ["\n    .", "\n      + .", ",\n      .", "\n      + .", " {\n      ", " {\n        &:before {\n          content: '';\n          position: absolute;\n          pointer-events: none;\n          background: ", ";\n          top: 0;\n          left: 0;\n\n          ", ";\n        }\n      }\n    }\n\n    ", ";\n    ", ";\n  "])), RcToggleButtonGroupClasses.groupedHorizontal, RcToggleButtonGroupClasses.groupedHorizontal, RcToggleButtonGroupClasses.groupedVertical, RcToggleButtonGroupClasses.groupedVertical, RcIcon, dividerColor, isHorizontal
         ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                height: 100%;\n                width: 1px;\n                transform: translateX(-", ");\n              "], ["\n                height: 100%;\n                width: 1px;\n                transform: translateX(-", ");\n              "])), boxInnerPadding) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                height: 1px;\n                width: 100%;\n                transform: translateY(-", ");\n              "], ["\n                height: 1px;\n                width: 100%;\n                transform: translateY(-", ");\n              "])), boxInnerPadding), variant === 'standard' && standardStyle, variant === 'box' && boxStyle);
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/es6/components/Buttons/ToggleButtonGroup/styles/boxStyle.js

@@ -10,10 +10,7 @@ export var boxStyle = function (_a) {
     var startPadding = spacing(area + inner - 0.25);
     var endPadding = spacing(area + inner);
     var outerPadding = spacing(area + outer);
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: ", ";\n    box-shadow: ", ";\n    border-radius: ", ";\n\n    ", " {\n      ", ";\n    }\n\n    ", ":first-child {\n      ", ";\n    }\n\n    ", ":last-child {\n      ", ";\n    }\n  "], ["\n    background-color: ", ";\n    box-shadow: ", ";\n    border-radius: ", ";\n\n    ", " {\n      ",
-        ";\n    }\n\n    ", ":first-child {\n      ",
-        ";\n    }\n\n    ", ":last-child {\n      ",
-        ";\n    }\n  "])), palette2('neutral', 'elevation'), shadows('1'), radius('round'), RcToggleButton, isHorizontal
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: ", ";\n    box-shadow: ", ";\n    border-radius: ", ";\n\n    ", " {\n      ", ";\n    }\n\n    ", ":first-child {\n      ", ";\n    }\n\n    ", ":last-child {\n      ", ";\n    }\n  "], ["\n    background-color: ", ";\n    box-shadow: ", ";\n    border-radius: ", ";\n\n    ", " {\n      ", ";\n    }\n\n    ", ":first-child {\n      ", ";\n    }\n\n    ", ":last-child {\n      ", ";\n    }\n  "])), palette2('neutral', 'elevation'), shadows('1'), radius('round'), RcToggleButton, isHorizontal
         ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            padding-left: ", ";\n            margin-left: 1px;\n            padding-right: ", ";\n          "], ["\n            padding-left: ", ";\n            margin-left: 1px;\n            padding-right: ", ";\n          "])), startPadding, endPadding) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            padding-top: ", ";\n            margin-top: 1px;\n            padding-bottom: ", ";\n          "], ["\n            padding-top: ", ";\n            margin-top: 1px;\n            padding-bottom: ", ";\n          "])), startPadding, endPadding), RcToggleButton, isHorizontal
         ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            border-top-left-radius: ", ";\n            border-bottom-left-radius: ", ";\n            padding-left: ", ";\n            margin-left: 0px;\n          "], ["\n            border-top-left-radius: ", ";\n            border-bottom-left-radius: ", ";\n            padding-left: ", ";\n            margin-left: 0px;\n          "])), radiusValue, radiusValue, outerPadding) : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            border-top-left-radius: ", ";\n            border-top-right-radius: ", ";\n            padding-top: ", ";\n            margin-top: 0px;\n          "], ["\n            border-top-left-radius: ", ";\n            border-top-right-radius: ", ";\n            padding-top: ", ";\n            margin-top: 0px;\n          "])), radiusValue, radiusValue, outerPadding), RcToggleButton, isHorizontal
         ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-top-right-radius: ", ";\n            border-bottom-right-radius: ", ";\n            padding-right: ", ";\n          "], ["\n            border-top-right-radius: ", ";\n            border-bottom-right-radius: ", ";\n            padding-right: ", ";\n          "])), radiusValue, radiusValue, outerPadding) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n            border-bottom-left-radius: ", ";\n            border-bottom-right-radius: ", ";\n            padding-bottom: ", ";\n          "], ["\n            border-bottom-left-radius: ", ";\n            border-bottom-right-radius: ", ";\n            padding-bottom: ", ";\n          "])), radiusValue, radiusValue, outerPadding));

package/es6/components/Buttons/ToggleButtonGroup/styles/standardStyle.js

@@ -11,11 +11,7 @@ export var standardStyle = function (_a) {
         ? spacing(inner, inner, inner, inner + 0.25)
         : spacing(inner, inner, inner + 0.25, inner);
     var outerSpace = spacing(outer);
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", " {\n      margin: ", ";\n      padding: ", ";\n      border: none;\n      border-radius: ", ";\n\n      ", ";\n\n      &:first-child {\n        ", ";\n      }\n\n      &:last-child {\n        ", ";\n      }\n    }\n  "], ["\n    ",
-        " {\n      margin: ", ";\n      padding: ", ";\n      border: none;\n      border-radius: ", ";\n\n      ",
-        ";\n\n      &:first-child {\n        ",
-        ";\n      }\n\n      &:last-child {\n        ",
-        ";\n      }\n    }\n  "])), toggleButtonBetweenClassName + ",\n  ." + RcToggleButtonGroupClasses.groupedHorizontal + ",\n  ." + RcToggleButtonGroupClasses.groupedVertical, margins, spacing(area), radius('sm'), isHorizontal
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", " {\n      margin: ", ";\n      padding: ", ";\n      border: none;\n      border-radius: ", ";\n\n      ", ";\n\n      &:first-child {\n        ", ";\n      }\n\n      &:last-child {\n        ", ";\n      }\n    }\n  "], ["\n    ", " {\n      margin: ", ";\n      padding: ", ";\n      border: none;\n      border-radius: ", ";\n\n      ", ";\n\n      &:first-child {\n        ", ";\n      }\n\n      &:last-child {\n        ", ";\n      }\n    }\n  "])), "".concat(toggleButtonBetweenClassName, ",\n  .").concat(RcToggleButtonGroupClasses.groupedHorizontal, ",\n  .").concat(RcToggleButtonGroupClasses.groupedVertical), margins, spacing(area), radius('sm'), isHorizontal
         ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            margin-top: 0;\n            margin-bottom: 0;\n          "], ["\n            margin-top: 0;\n            margin-bottom: 0;\n          "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            margin-left: 0;\n            margin-right: 0;\n          "], ["\n            margin-left: 0;\n            margin-right: 0;\n          "]))), isHorizontal
         ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              margin-left: ", ";\n            "], ["\n              margin-left: ", ";\n            "])), outerSpace) : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              margin-top: ", ";\n            "], ["\n              margin-top: ", ";\n            "])), outerSpace), isHorizontal
         ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n              margin-right: ", ";\n            "], ["\n              margin-right: ", ";\n            "])), outerSpace) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n              margin-bottom: ", ";\n            "], ["\n              margin-bottom: ", ";\n            "])), outerSpace));

package/es6/components/Buttons/ToggleButtonGroup/utils/ToggleButtonGroupUtils.js

@@ -3,4 +3,4 @@ import { RcToggleButton } from '../../ToggleButton';
 import { RcToggleButtonClasses } from '../../ToggleButton/utils';
 export var RcToggleButtonGroupClasses = RcClasses(['groupedHorizontal', 'groupedVertical'], 'RcToggleButtonGroup');
 // * Mui will set selected + selected margin order, need reset
-export var toggleButtonBetweenClassName = RcToggleButton + "." + RcToggleButtonClasses.selected + " + " + RcToggleButton + "." + RcToggleButtonClasses.selected;
+export var toggleButtonBetweenClassName = "".concat(RcToggleButton, ".").concat(RcToggleButtonClasses.selected, " + ").concat(RcToggleButton, ".").concat(RcToggleButtonClasses.selected);

package/es6/components/Card/Card/styles/CardStyles.js

@@ -5,7 +5,6 @@ import { RcCardClasses } from '../utils';
 export var CardStyle = function (props) {
     var variant = props.variant, square = props.square;
     var isOutline = variant === 'outlined';
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: relative;\n    background-color: ", ";\n\n    ", "\n  "], ["\n    position: relative;\n    background-color: ", ";\n\n    ",
-        "\n  "])), palette2('neutral', 'elevation'), isOutline && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border: 1px solid ", ";\n      border-radius: ", ";\n\n      &.", ", &.", " {\n        border-color: ", ";\n      }\n\n      &:not(:hover):not(:focus-within) .", " {\n        &:not(.", ") {\n          opacity: ", ";\n        }\n      }\n    "], ["\n      border: 1px solid ", ";\n      border-radius: ", ";\n\n      &.", ", &.", " {\n        border-color: ", ";\n      }\n\n      &:not(:hover):not(:focus-within) .", " {\n        &:not(.", ") {\n          opacity: ", ";\n        }\n      }\n    "])), palette2('neutral', 'l02'), !square && radius('xl'), RcCardClasses.focusVisible, RcCardClasses.selected, isOutline && palette2('interactive', 'f01'), RcCardHoverActionsClasses.root, RcCardHoverActionsClasses.visible, isOutline && 0));
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: relative;\n    background-color: ", ";\n\n    ", "\n  "], ["\n    position: relative;\n    background-color: ", ";\n\n    ", "\n  "])), palette2('neutral', 'elevation'), isOutline && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border: 1px solid ", ";\n      border-radius: ", ";\n\n      &.", ", &.", " {\n        border-color: ", ";\n      }\n\n      &:not(:hover):not(:focus-within) .", " {\n        &:not(.", ") {\n          opacity: ", ";\n        }\n      }\n    "], ["\n      border: 1px solid ", ";\n      border-radius: ", ";\n\n      &.", ", &.", " {\n        border-color: ", ";\n      }\n\n      &:not(:hover):not(:focus-within) .", " {\n        &:not(.", ") {\n          opacity: ", ";\n        }\n      }\n    "])), palette2('neutral', 'l02'), !square && radius('xl'), RcCardClasses.focusVisible, RcCardClasses.selected, isOutline && palette2('interactive', 'f01'), RcCardHoverActionsClasses.root, RcCardHoverActionsClasses.visible, isOutline && 0));
 };
 var templateObject_1, templateObject_2;

package/es6/components/Card/CardHoverActions/styles/CardHoverActionsStyle.js

@@ -10,7 +10,6 @@ export var hoverTransition = function (_a) {
     });
 };
 export var CardHoverActionsStyle = function () {
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n    ", "\n    z-index: 1;\n  "], ["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n    ",
-        "\n    z-index: 1;\n  "])), spacing(4), hoverTransition, '' /* make sure `CardHoverActions` would not be covered by `CardActionArea`  */);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n    ", "\n    z-index: 1;\n  "], ["\n    position: absolute;\n    right: 0;\n    top: 0;\n    padding: ", ";\n    transition: ", ";\n    ", /* make sure `CardHoverActions` would not be covered by `CardActionArea`  */ "\n    z-index: 1;\n  "])), spacing(4), hoverTransition, '' /* make sure `CardHoverActions` would not be covered by `CardActionArea`  */);
 };
 var templateObject_1;

package/es6/components/Chip/styles/ChipStyle.js

@@ -29,8 +29,7 @@ export var chipColor = function (_a) {
                     : darken(normalBackgroundColor, 0.72);
         }
     }
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    background-color: ", ";\n\n    ", ";\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", ", ", " {\n      ", ";\n\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  "], ["\n    color: ", ";\n    background-color: ", ";\n\n    ", ";\n\n    ", " {\n      &:hover {\n        background-color: ",
-        ";\n      }\n    }\n\n    &.", ", ", " {\n      ", ";\n\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  "])), normalColor, normalBackgroundColor, fakePseudoRoundBorder({ color: normalBorderColor }), nonTouchHoverMedia, setOpacity(interactiveBackgroundColor, hoverColorLighten ? '08' : '12'), RcChipClasses.focused, focusVisible, fakePseudoRoundBorder({ color: focusedBorderColor }), setOpacity(interactiveBackgroundColor, '16'), setOpacity(interactiveBackgroundColor, '24'));
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    background-color: ", ";\n\n    ", ";\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", ", ", " {\n      ", ";\n\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  "], ["\n    color: ", ";\n    background-color: ", ";\n\n    ", ";\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", ", ", " {\n      ", ";\n\n      background-color: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  "])), normalColor, normalBackgroundColor, fakePseudoRoundBorder({ color: normalBorderColor }), nonTouchHoverMedia, setOpacity(interactiveBackgroundColor, hoverColorLighten ? '08' : '12'), RcChipClasses.focused, focusVisible, fakePseudoRoundBorder({ color: focusedBorderColor }), setOpacity(interactiveBackgroundColor, '16'), setOpacity(interactiveBackgroundColor, '24'));
 };
 export var ChipStyle = function (props) {
     var isError = props.isError, _a = props.error, error = _a === void 0 ? isError : _a, colorProp = props.color, variant = props.variant, _b = props.backgroundColor, backgroundColorProp = _b === void 0 ? colorProp : _b;
@@ -40,9 +39,6 @@ export var ChipStyle = function (props) {
     var normalBackgroundColor = outlined
         ? parsedBackgroundColor
         : palette2('neutral', 'b03');
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    height: 28px;\n    box-sizing: border-box;\n    padding: ", ";\n\n    position: relative;\n    border-radius: ", ";\n    border: ", ";\n\n    ", ";\n    ", ";\n\n    ", ";\n\n    &.", " {\n      color: ", ";\n      opacity: 1;\n    }\n\n    ", ";\n\n    .", " {\n      color: ", ";\n      margin-left: 0px;\n      margin-right: -4px;\n\n      span {\n        width: auto;\n        height: auto;\n      }\n    }\n  "], ["\n    height: 28px;\n    box-sizing: border-box;\n    padding: ", ";\n\n    position: relative;\n    border-radius: ", ";\n    border: ", ";\n\n    ", ";\n    ", ";\n\n    ",
-        ";\n\n    &.", " {\n      color: ", ";\n      opacity: 1;\n    }\n\n    ",
-        ";\n\n    .", " {\n      color: ", ";\n      margin-left: 0px;\n      margin-right: -4px;\n\n      span {\n        width: auto;\n        height: auto;\n      }\n    }\n  "])), spacing(0.5), radius('round'), outlined && 'none', ellipsis, typography('body1'), chipColor(__assign(__assign({}, props), { error: error, normalColor: defaultTextColor, normalBackgroundColor: normalBackgroundColor, focusedBorderColor: color, normalBorderColor: outlined ? palette2('neutral', 'l02') : undefined, interactiveBackgroundColor: defaultBgColor })), RcChipClasses.disabled, disabledColor, error && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &:not(.", ") {\n        ", ";\n      }\n    "], ["\n      &:not(.", ") {\n        ",
-        ";\n      }\n    "])), RcChipClasses.disabled, chipColor(__assign(__assign({}, props), { error: error, normalColor: errorBgColor, normalBackgroundColor: palette2('danger', 'b01'), focusedBorderColor: errorBgColor, normalBorderColor: errorBgColor, interactiveBackgroundColor: errorBgColor }))), RcChipClasses.avatar, palette2('neutral', 'b01'));
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    height: 28px;\n    box-sizing: border-box;\n    padding: ", ";\n\n    position: relative;\n    border-radius: ", ";\n    border: ", ";\n\n    ", ";\n    ", ";\n\n    ", ";\n\n    &.", " {\n      color: ", ";\n      opacity: 1;\n    }\n\n    ", ";\n\n    .", " {\n      color: ", ";\n      margin-left: 0px;\n      margin-right: -4px;\n\n      span {\n        width: auto;\n        height: auto;\n      }\n    }\n  "], ["\n    height: 28px;\n    box-sizing: border-box;\n    padding: ", ";\n\n    position: relative;\n    border-radius: ", ";\n    border: ", ";\n\n    ", ";\n    ", ";\n\n    ", ";\n\n    &.", " {\n      color: ", ";\n      opacity: 1;\n    }\n\n    ", ";\n\n    .", " {\n      color: ", ";\n      margin-left: 0px;\n      margin-right: -4px;\n\n      span {\n        width: auto;\n        height: auto;\n      }\n    }\n  "])), spacing(0.5), radius('round'), outlined && 'none', ellipsis, typography('body1'), chipColor(__assign(__assign({}, props), { error: error, normalColor: defaultTextColor, normalBackgroundColor: normalBackgroundColor, focusedBorderColor: color, normalBorderColor: outlined ? palette2('neutral', 'l02') : undefined, interactiveBackgroundColor: defaultBgColor })), RcChipClasses.disabled, disabledColor, error && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &:not(.", ") {\n        ", ";\n      }\n    "], ["\n      &:not(.", ") {\n        ", ";\n      }\n    "])), RcChipClasses.disabled, chipColor(__assign(__assign({}, props), { error: error, normalColor: errorBgColor, normalBackgroundColor: palette2('danger', 'b01'), focusedBorderColor: errorBgColor, normalBorderColor: errorBgColor, interactiveBackgroundColor: errorBgColor }))), RcChipClasses.avatar, palette2('neutral', 'b01'));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/es6/components/DetachedWindow/utils/JssDomRendererFactory.js

@@ -65,7 +65,7 @@ export default function JssDomRendererFactory(window, sheets) {
             }
             // If user specifies an insertion point and it can't be found in the document -
             // bad specificity issues may appear.
-            warning("[JSS] Insertion point \"" + insertionPoint + "\" not found.");
+            warning("[JSS] Insertion point \"".concat(insertionPoint, "\" not found."));
         }
         return false;
     };

package/es6/components/DetachedWindow/utils/openExternalWindow.js

@@ -2,13 +2,13 @@ import { __read, __values } from "tslib";
 export var DetachedWindowRefMaps = new Map();
 export var openExternalWindow = function (_a) {
     var e_1, _b;
-    var _c = _a.url, url = _c === void 0 ? '' : _c, name = _a.name, specs = _a.specs;
-    var _d, _e, _f;
+    var _c, _d, _e;
+    var _f = _a.url, url = _f === void 0 ? '' : _f, name = _a.name, specs = _a.specs;
     var newWindow = null;
     try {
         for (var DetachedWindowRefMaps_1 = __values(DetachedWindowRefMaps), DetachedWindowRefMaps_1_1 = DetachedWindowRefMaps_1.next(); !DetachedWindowRefMaps_1_1.done; DetachedWindowRefMaps_1_1 = DetachedWindowRefMaps_1.next()) {
             var _g = __read(DetachedWindowRefMaps_1_1.value, 1), key = _g[0];
-            var result = (_e = (_d = key.current) === null || _d === void 0 ? void 0 : _d.window) === null || _e === void 0 ? void 0 : _e.open(url, name, specs);
+            var result = (_d = (_c = key.current) === null || _c === void 0 ? void 0 : _c.window) === null || _d === void 0 ? void 0 : _d.open(url, name, specs);
             if (result) {
                 newWindow = result;
                 break;
@@ -30,7 +30,7 @@ export var openExternalWindow = function (_a) {
             return null;
         }
     }
-    var body = (_f = newWindow.document) === null || _f === void 0 ? void 0 : _f.body;
+    var body = (_e = newWindow.document) === null || _e === void 0 ? void 0 : _e.body;
     if (!body)
         return null;
     return newWindow;

package/es6/components/Dialer/DialPad/DialPad.js

@@ -9,7 +9,7 @@ import { DialPadStyle } from './styles';
 import { ACCEPTABLE_KEYS, DIALER_PAD_ICONS, DIALER_PAD_PLUS, useKeyAudio, } from './utils';
 var _RcDialPad = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialPad' });
-    var sounds = props.sounds, volume = props.volume, autoSize = props.autoSize, muted = props.muted, classes = props.classes, onChangeProp = props.onChange, longPressDelay = props.longPressDelay, action = props.action, persistBgTime = props.persistBgTime, control = props.control, getDialPadButtonProps = props.getDialPadButtonProps, _a = props.externalWindow, externalWindow = _a === void 0 ? window : _a, sinkId = props.sinkId, divProps = __rest(props, ["sounds", "volume", "autoSize", "muted", "classes", "onChange", "longPressDelay", "action", "persistBgTime", "control", "getDialPadButtonProps", "externalWindow", "sinkId"]);
+    var sounds = props.sounds, volume = props.volume, autoSize = props.autoSize, muted = props.muted, classes = props.classes, onChangeProp = props.onChange, longPressDelay = props.longPressDelay, action = props.action, persistBgTime = props.persistBgTime, control = props.control, getDialPadButtonProps = props.getDialPadButtonProps, _a = props.externalWindow, externalWindow = _a === void 0 ? window : _a, sinkId = props.sinkId, onSinkError = props.onSinkError, divProps = __rest(props, ["sounds", "volume", "autoSize", "muted", "classes", "onChange", "longPressDelay", "action", "persistBgTime", "control", "getDialPadButtonProps", "externalWindow", "sinkId", "onSinkError"]);
     var containerRef = useRef(null);
     var hiddenRef = useRef(null);
     var keyTimerMapRef = useRef({});
@@ -20,7 +20,7 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
         focusedIndexRef: focusedIndexRef,
         containerRef: containerRef,
     }), focusIndex = _c.focusIndex, getItemProps = _c.getItemProps, moveFocusedId = _c.moveFocusedId;
-    var dialButtonKey = moveFocusedId + "-dial-button";
+    var dialButtonKey = "".concat(moveFocusedId, "-dial-button");
     var onKeyFocusedIndexHandle = useKeyboardMoveFocus({
         options: DIALER_PAD_ICONS,
         focusedIndexRef: focusedIndexRef,
@@ -40,8 +40,10 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
         if (typeof audio['setSinkId'] === 'function')
             audio['setSinkId'](
             // when pass undefined, use '' to remove sinkId to default
-            sinkId || '');
-    }, [muted, sinkId, volume]);
+            sinkId || '').catch(function (error) {
+                onSinkError === null || onSinkError === void 0 ? void 0 : onSinkError(error);
+            });
+    }, [muted, onSinkError, sinkId, volume]);
     var play = useKeyAudio({
         sounds: sounds,
         processor: audioProcessor,
@@ -49,7 +51,7 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
     var playAudio = useEventCallback(function (value) {
         var _a;
         var key = value === DIALER_PAD_PLUS ? '0' : value;
-        var keyButtonElm = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[" + dialButtonKey + "=\"" + key + "\"]");
+        var keyButtonElm = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[".concat(dialButtonKey, "=\"").concat(key, "\"]"));
         if (keyButtonElm) {
             // * to keep color when quick trigger insert key or click very quick
             var oldTimer = keyTimerMapRef.current[key];
@@ -114,7 +116,7 @@ var _RcDialPad = forwardRef(function (inProps, ref) {
             var ariaLabelArr = additionLabel
                 ? [key, additionLabel]
                 : [key];
-            return (React.createElement(RcDialPadButton, __assign({ classes: classes, symbol: symbol, key: key, value: key, onKeyEffect: handleKeyEffect, externalWindow: externalWindow }, getItemProps(index), { "aria-label": ariaLabelArr.join(','), onKeyDown: onKeyFocusedIndexHandle }, (_b = {}, _b[dialButtonKey] = key, _b), getDialPadButtonProps === null || getDialPadButtonProps === void 0 ? void 0 : getDialPadButtonProps(key), (key === '0'
+            return (React.createElement(RcDialPadButton, __assign({ classes: classes, symbol: symbol, key: key, value: key, onKeyEffect: handleKeyEffect, externalWindow: externalWindow }, getItemProps(index), (_b = { "aria-label": ariaLabelArr.join(','), onKeyDown: onKeyFocusedIndexHandle }, _b[dialButtonKey] = key, _b), getDialPadButtonProps === null || getDialPadButtonProps === void 0 ? void 0 : getDialPadButtonProps(key), (key === '0'
                 ? {
                     longPressValue: DIALER_PAD_PLUS,
                     longPressDelay: longPressDelay,

package/es6/components/Dialer/DialPad/styles/StyledDialPad.js

@@ -5,7 +5,6 @@ import { RcDialPadButton } from '../../DialPadButton';
 var itemScale = "27.59%";
 export var DialPadStyle = function (_a) {
     var _b = _a.autoSize, autoSize = _b === void 0 ? true : _b;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n\n    ", "\n  "], ["\n    display: flex;\n    flex-wrap: wrap;\n\n    ",
-        "\n  "])), autoSize && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      justify-content: space-between;\n\n      ", " {\n        width: ", ";\n        height: 0;\n        padding-top: ", ";\n\n        ", " {\n          position: absolute;\n          top: 0;\n          left: 0;\n          svg {\n            height: 100%;\n            width: 100%;\n          }\n        }\n      }\n    "], ["\n      justify-content: space-between;\n\n      ", " {\n        width: ", ";\n        height: 0;\n        padding-top: ", ";\n\n        ", " {\n          position: absolute;\n          top: 0;\n          left: 0;\n          svg {\n            height: 100%;\n            width: 100%;\n          }\n        }\n      }\n    "])), RcDialPadButton, itemScale, itemScale, RcIcon));
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n\n    ", "\n  "], ["\n    display: flex;\n    flex-wrap: wrap;\n\n    ", "\n  "])), autoSize && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      justify-content: space-between;\n\n      ", " {\n        width: ", ";\n        height: 0;\n        padding-top: ", ";\n\n        ", " {\n          position: absolute;\n          top: 0;\n          left: 0;\n          svg {\n            height: 100%;\n            width: 100%;\n          }\n        }\n      }\n    "], ["\n      justify-content: space-between;\n\n      ", " {\n        width: ", ";\n        height: 0;\n        padding-top: ", ";\n\n        ", " {\n          position: absolute;\n          top: 0;\n          left: 0;\n          svg {\n            height: 100%;\n            width: 100%;\n          }\n        }\n      }\n    "])), RcDialPadButton, itemScale, itemScale, RcIcon));
 };
 var templateObject_1, templateObject_2;