@ringcentral/juno 2.46.0 → 3.0.0-alpha.1

package/es6/components/InlineEditable/styles/InlineEditableStyle.js

@@ -5,14 +5,12 @@ import { RcInlineEditableClasses } from '../utils';
 import { inputStyle, textareaStyle } from './textFieldStyle';
 export var InlineEditableStyle = function (_a) {
     var variant = _a.variant, multiline = _a.multiline, fullWidth = _a.fullWidth, disabled = _a.disabled, color = _a.color;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      position: relative;\n      display: inline-block;\n      width: ", ";\n      min-width: 32px;\n      margin: -4px;\n      color: ", ";\n\n      &.", " {\n        pointer-events: none;\n      }\n\n      .", " {\n        margin: 4px;\n        position: relative;\n        outline: none;\n        box-sizing: border-box;\n        pointer-events: ", ";\n        ", ";\n        overflow-wrap: ", ";\n        white-space: ", ";\n\n        ", "\n        ::after {\n          content: ' ';\n          width: 0;\n          visibility: hidden;\n          display: inline-block;\n        }\n\n        ", "\n        user-select: ", ";\n      }\n\n      .", " {\n        ", "\n        user-select: none;\n        color: ", ";\n      }\n\n      .", " {\n        ", "\n      }\n    "], ["\n      ", ";\n      position: relative;\n      display: inline-block;\n      width: ", ";\n      min-width: 32px;\n      margin: -4px;\n      color: ", ";\n\n      &.", " {\n        pointer-events: none;\n      }\n\n      .", " {\n        margin: 4px;\n        position: relative;\n        outline: none;\n        box-sizing: border-box;\n        pointer-events: ", ";\n        ", ";\n        overflow-wrap: ", ";\n        white-space: ", ";\n\n        ",
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      position: relative;\n      display: inline-block;\n      width: ", ";\n      min-width: 32px;\n      margin: -4px;\n      color: ", ";\n\n      &.", " {\n        pointer-events: none;\n      }\n\n      .", " {\n        margin: 4px;\n        position: relative;\n        outline: none;\n        box-sizing: border-box;\n        pointer-events: ", ";\n        ", ";\n        overflow-wrap: ", ";\n        white-space: ", ";\n\n        ", "\n        ::after {\n          content: ' ';\n          width: 0;\n          visibility: hidden;\n          display: inline-block;\n        }\n\n        ", "\n        user-select: ", ";\n      }\n\n      .", " {\n        ", "\n        user-select: none;\n        color: ", ";\n      }\n\n      .", " {\n        ", "\n      }\n    "], ["\n      ", ";\n      position: relative;\n      display: inline-block;\n      width: ", ";\n      min-width: 32px;\n      margin: -4px;\n      color: ", ";\n\n      &.", " {\n        pointer-events: none;\n      }\n\n      .", " {\n        margin: 4px;\n        position: relative;\n        outline: none;\n        box-sizing: border-box;\n        pointer-events: ", ";\n        ", ";\n        overflow-wrap: ", ";\n        white-space: ", ";\n\n        ", 
         /*
       1. the single '\n' would be ignore in the last line. so need append ' ' after '\n' when multiline.
       2. need keep content height when placeholder is empty.
       */
-        "\n        ::after {\n          content: ' ';\n          width: 0;\n          visibility: hidden;\n          display: inline-block;\n        }\n\n        ",
-        "\n        user-select: ", ";\n      }\n\n      .", " {\n        ",
-        "\n        user-select: none;\n        color: ", ";\n      }\n\n      .", " {\n        ", "\n      }\n    "])), typography(variant), multiline || fullWidth ? '100%' : 'auto', getParsePaletteColor(color), RcInlineEditableClasses.saving, RcInlineEditableClasses.label, disabled ? 'initial' : 'none', ellipsis(), multiline && 'anywhere', multiline ? 'pre-wrap' : 'pre', ''
+        "\n        ::after {\n          content: ' ';\n          width: 0;\n          visibility: hidden;\n          display: inline-block;\n        }\n\n        ", /* prevent select double content when the input has a value and not disabled (input would be removed when disabled) */ "\n        user-select: ", ";\n      }\n\n      .", " {\n        ", /* prevent select placeholder when the input does not have a value */ "\n        user-select: none;\n        color: ", ";\n      }\n\n      .", " {\n        ", "\n      }\n    "])), typography(variant), multiline || fullWidth ? '100%' : 'auto', getParsePaletteColor(color), RcInlineEditableClasses.saving, RcInlineEditableClasses.label, disabled ? 'initial' : 'none', ellipsis(), multiline && 'anywhere', multiline ? 'pre-wrap' : 'pre', ''
     /*
   1. the single '\n' would be ignore in the last line. so need append ' ' after '\n' when multiline.
   2. need keep content height when placeholder is empty.

package/es6/components/Link/styles/StyledLink.js

@@ -8,8 +8,7 @@ export var LinkStyle = function (_a) {
         : colorProp === 'primary'
             ? palette2('informative', 'f02')
             : getParsePaletteColor(colorProp);
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    text-decoration: ", ";\n    ", ";\n    color: ", ";\n\n    &:focus {\n      outline: none;\n    }\n\n    ", " {\n      text-decoration: underline;\n    }\n\n    ", ";\n  "], ["\n    text-decoration: ", ";\n    ", ";\n    color: ", ";\n\n    &:focus {\n      outline: none;\n    }\n\n    ", " {\n      text-decoration: underline;\n    }\n\n    ",
-        ";\n  "])), underline ? 'underline' : 'none', typography(RcLinkTypographies[size] || variant), color, focusVisible, !disabled
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    text-decoration: ", ";\n    ", ";\n    color: ", ";\n\n    &:focus {\n      outline: none;\n    }\n\n    ", " {\n      text-decoration: underline;\n    }\n\n    ", ";\n  "], ["\n    text-decoration: ", ";\n    ", ";\n    color: ", ";\n\n    &:focus {\n      outline: none;\n    }\n\n    ", " {\n      text-decoration: underline;\n    }\n\n    ", ";\n  "])), underline ? 'underline' : 'none', typography(RcLinkTypographies[size] || variant), color, focusVisible, !disabled
         ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          cursor: pointer;\n\n          ", " {\n            &:hover {\n              text-decoration: underline;\n            }\n          }\n\n          &:active {\n            color: ", ";\n          }\n        "], ["\n          cursor: pointer;\n\n          ", " {\n            &:hover {\n              text-decoration: underline;\n            }\n          }\n\n          &:active {\n            color: ", ";\n          }\n        "])), nonTouchHoverMedia, setOpacity(color, '24', true)) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          pointer-events: none;\n        "], ["\n          pointer-events: none;\n        "]))));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/es6/components/List/ListItem/ListItem.js

@@ -47,11 +47,7 @@ var RcListItem = styled(withTooltip(_RcListItem)).attrs(function (inProps) {
     theme = _a.theme, 
     // Omit className, prevent duplicate className
     className = _a.className, _b = _a.singleLine, singleLine = _b === void 0 ? false : _b, _c = _a.button, button = _c === void 0 ? true : _c, _d = _a.canHover, canHover = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? 'medium' : _e, _f = _a.focusVariant, focusVariant = _f === void 0 ? 'highlight' : _f, rest = __rest(_a, ["theme", "className", "singleLine", "button", "canHover", "size", "focusVariant"]);
-    return __assign({ singleLine: singleLine,
-        button: button,
-        canHover: canHover,
-        size: size,
-        focusVariant: focusVariant }, rest);
+    return __assign({ singleLine: singleLine, button: button, canHover: canHover, size: size, focusVariant: focusVariant }, rest);
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ListItemStyle);
 RcListItem.displayName = 'RcListItem';
 export { RcListItem };

package/es6/components/List/ListItem/styles/ListItemStyle.js

@@ -8,16 +8,12 @@ export var sharedListItemStyle = function (_a) {
     var highlighted = _a.highlighted, color = _a.color, canHover = _a.canHover, _b = _a.baseColor, baseColorProp = _b === void 0 ? 'black' : _b, mainClasses = _a.mainClasses, rippleClasses = _a.rippleClasses, focusVariant = _a.focusVariant;
     var baseColor = getParsePaletteColor(color !== null && color !== void 0 ? color : colorMap[baseColorProp]);
     var useFocusRing = focusVariant === 'focusRing';
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", ";\n    color: ", ";\n\n    ", ";\n\n    ", "\n    &.Mui-focusVisible {\n      background-color: unset;\n    }\n\n    ", " {\n      background-color: ", ";\n      ", "\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    ", ";\n  "], ["\n    ", ";\n    color: ", ";\n\n    ",
-        ";\n\n    "
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", ";\n    color: ", ";\n\n    ", ";\n\n    ", "\n    &.Mui-focusVisible {\n      background-color: unset;\n    }\n\n    ", " {\n      background-color: ", ";\n      ", "\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    ", ";\n  "], ["\n    ", ";\n    color: ", ";\n\n    ", ";\n\n    "
         // mui focus visible have issue in old version, we use the focus-visible polyfill class to do that
-        ,
-        "\n    &.Mui-focusVisible {\n      background-color: unset;\n    }\n\n    "
+        , "\n    &.Mui-focusVisible {\n      background-color: unset;\n    }\n\n    "
         // that for menuItem, because in current version of menuItem that not support focused classes
         // TODO: that can be remove after upgrade to V5
-        ,
-        " {\n      background-color: ",
-        ";\n      ", "\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    ", ";\n  "])), typography('body1'), palette2('neutral', 'f06'), highlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), setAlpha(baseColor, 0.05)), 
+        , " {\n      background-color: ", ";\n      ", "\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    ", ";\n  "])), typography('body1'), palette2('neutral', 'f06'), highlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), setAlpha(baseColor, 0.05)), 
     // mui focus visible have issue in old version, we use the focus-visible polyfill class to do that
     '', 
     // that for menuItem, because in current version of menuItem that not support focused classes
@@ -35,7 +31,6 @@ export var sharedListItemStyle = function (_a) {
 export var ListItemStyle = function (props) {
     var maxWidth = props.maxWidth, isInline = props.isInline, size = props.size, onClick = props.onClick, focusVariant = props.focusVariant;
     var defaultPadding = RcListItemTopAndBottomPaddings[size];
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    display: ", ";\n    cursor: ", ";\n\n    ", ";\n\n    &.", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  "], ["\n    width: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    display: ", ";\n    cursor: ", ";\n\n    ",
-        ";\n\n    &.", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  "])), maxWidth ? px(maxWidth) : '100%', defaultPadding, defaultPadding, isInline ? 'inline-flex' : 'flex', onClick ? 'pointer' : 'default', sharedListItemStyle(__assign(__assign({}, props), { mainClasses: RcListItemClasses, rippleClasses: RcListItemRippleClasses, focusVariant: focusVariant })), RcListItemClasses.gutters, spacing(4), spacing(4), RcListItemClasses.dense, spacing(1), spacing(1));
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    display: ", ";\n    cursor: ", ";\n\n    ", ";\n\n    &.", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  "], ["\n    width: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    display: ", ";\n    cursor: ", ";\n\n    ", ";\n\n    &.", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  "])), maxWidth ? px(maxWidth) : '100%', defaultPadding, defaultPadding, isInline ? 'inline-flex' : 'flex', onClick ? 'pointer' : 'default', sharedListItemStyle(__assign(__assign({}, props), { mainClasses: RcListItemClasses, rippleClasses: RcListItemRippleClasses, focusVariant: focusVariant })), RcListItemClasses.gutters, spacing(4), spacing(4), RcListItemClasses.dense, spacing(1), spacing(1));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/es6/components/List/ListItem/utils/ListItemUtils.js

@@ -1,7 +1,7 @@
 import { RcClasses, spacing, } from '../../../../foundation';
 export var RcListItemPrefix = 'RcListItem';
-export var RcListItemRipplePrefix = RcListItemPrefix + "TouchRipple";
-export var RcListItemMultilineClassName = RcListItemPrefix + "-multiline";
+export var RcListItemRipplePrefix = "".concat(RcListItemPrefix, "TouchRipple");
+export var RcListItemMultilineClassName = "".concat(RcListItemPrefix, "-multiline");
 export var RcListItemClasses = RcClasses(['gutters', 'dense', 'selected', 'focusVisible'], RcListItemPrefix);
 export var RcListItemTopAndBottomPaddings = {
     small: spacing(1),

package/es6/components/List/ListItemText/styles/ListItemTextStyle.js

@@ -8,7 +8,6 @@ export var ListItemTextStyle = function (_a) {
     var primaryTypography = typography((primaryTypographyProps === null || primaryTypographyProps === void 0 ? void 0 : primaryTypographyProps.variant) || 'body1');
     var secondaryTypography = typography((secondaryTypographyProps === null || secondaryTypographyProps === void 0 ? void 0 : secondaryTypographyProps.variant) || 'caption1');
     var textDisplay = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", ";\n    text-decoration-line: ", ";\n  "], ["\n    ", ";\n    text-decoration-line: ", ";\n  "])), isEllipsis && ellipsis(), lineThrough ? 'line-through' : 'inherit');
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n\n    padding: 0;\n    /** for next ListSecondaryAction default margin */\n    margin: 0 ", " 0 0;\n\n    &.", " {\n      margin: ", ";\n    }\n\n    &.", " {\n      padding-left: ", ";\n    }\n\n    .", " {\n      ", ";\n      ", ";\n      color: ", ";\n    }\n\n    .", " {\n      ", ";\n      ", ";\n      color: ", ";\n    }\n  "], ["\n    ",
-        "\n\n    padding: 0;\n    /** for next ListSecondaryAction default margin */\n    margin: 0 ", " 0 0;\n\n    &.", " {\n      margin: ", ";\n    }\n\n    &.", " {\n      padding-left: ", ";\n    }\n\n    .", " {\n      ", ";\n      ", ";\n      color: ", ";\n    }\n\n    .", " {\n      ", ";\n      ", ";\n      color: ", ";\n    }\n  "])), alignCenter && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      flex: 'none !important';\n    "], ["\n      flex: 'none !important';\n    "]))), spacing(2), RcListItemTextClasses.multiline, spacing(1, 2, 1, 0), RcListItemTextClasses.inset, spacing(14), RcListItemTextClasses.primary, textDisplay, primaryTypography, primaryColor, RcListItemTextClasses.secondary, textDisplay, secondaryTypography, secondaryColor);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n\n    padding: 0;\n    /** for next ListSecondaryAction default margin */\n    margin: 0 ", " 0 0;\n\n    &.", " {\n      margin: ", ";\n    }\n\n    &.", " {\n      padding-left: ", ";\n    }\n\n    .", " {\n      ", ";\n      ", ";\n      color: ", ";\n    }\n\n    .", " {\n      ", ";\n      ", ";\n      color: ", ";\n    }\n  "], ["\n    ", "\n\n    padding: 0;\n    /** for next ListSecondaryAction default margin */\n    margin: 0 ", " 0 0;\n\n    &.", " {\n      margin: ", ";\n    }\n\n    &.", " {\n      padding-left: ", ";\n    }\n\n    .", " {\n      ", ";\n      ", ";\n      color: ", ";\n    }\n\n    .", " {\n      ", ";\n      ", ";\n      color: ", ";\n    }\n  "])), alignCenter && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      flex: 'none !important';\n    "], ["\n      flex: 'none !important';\n    "]))), spacing(2), RcListItemTextClasses.multiline, spacing(1, 2, 1, 0), RcListItemTextClasses.inset, spacing(14), RcListItemTextClasses.primary, textDisplay, primaryTypography, primaryColor, RcListItemTextClasses.secondary, textDisplay, secondaryTypography, secondaryColor);
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/es6/components/Loading/styles/StyledLoadingPage.js

@@ -2,8 +2,7 @@ import { __makeTemplateObject } from "tslib";
 import React from 'react';
 import { opacity, palette2, styled, withDelay } from '../../../foundation';
 import { RcCircularProgress } from '../../Progress/CircularProgress';
-export var StyledLoadingPage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0px;\n  left: 0px;\n  opacity: ", ";\n  background: ", ";\n  z-index: 1000;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0px;\n  left: 0px;\n  opacity: ",
-    ";\n  background: ", ";\n  z-index: 1000;\n"])), function (_a) {
+export var StyledLoadingPage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0px;\n  left: 0px;\n  opacity: ", ";\n  background: ", ";\n  z-index: 1000;\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 0px;\n  left: 0px;\n  opacity: ", ";\n  background: ", ";\n  z-index: 1000;\n"])), function (_a) {
     var backgroundType = _a.backgroundType;
     return backgroundType ? opacity('40', true) : 1;
 }, palette2('neutral', 'b01'));

package/es6/components/Menu/MenuItem/MenuItem.js

@@ -110,9 +110,7 @@ var RcMenuItem = styled(withTooltip(_RcMenuItem)).attrs(function (inProps) {
     theme = _a.theme, 
     // Omit className, prevent duplicate className
     className = _a.className, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.button, button = _c === void 0 ? true : _c, _d = _a.focusVariant, focusVariant = _d === void 0 ? 'highlight' : _d, rest = __rest(_a, ["theme", "className", "size", "button", "focusVariant"]);
-    return __assign({ size: size,
-        button: button,
-        focusVariant: focusVariant }, rest);
+    return __assign({ size: size, button: button, focusVariant: focusVariant }, rest);
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), MenuItemStyle);
 RcMenuItem.displayName = 'RcMenuItem';
 export { RcMenuItem };

package/es6/components/Menu/MenuItem/styles/MenuItemStyle.js

@@ -8,8 +8,7 @@ export var MenuItemStyle = function (props) {
     var size = props.size, _a = props.color, color = _a === void 0 ? 'action.grayLight' : _a, focusVariant = props.focusVariant;
     var topAndBottomPadding = RcMenuItemTopAndBottomPaddings[size];
     var leftAndRightPadding = RcMenuItemLeftAndRightPaddings[size];
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    outline: none;\n    box-sizing: border-box;\n    height: auto;\n    min-height: 32px;\n    min-width: 112px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    ", ";\n\n    .", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n      min-height: auto;\n      line-height: 22px;\n      font-weight: 700;\n    }\n  "], ["\n    outline: none;\n    box-sizing: border-box;\n    height: auto;\n    min-height: 32px;\n    min-width: 112px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    ",
-        ";\n\n    .", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n      min-height: auto;\n      line-height: 22px;\n      font-weight: 700;\n    }\n  "])), topAndBottomPadding, topAndBottomPadding, sharedListItemStyle(__assign(__assign({}, props), { focusVariant: focusVariant, color: color, 
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    outline: none;\n    box-sizing: border-box;\n    height: auto;\n    min-height: 32px;\n    min-width: 112px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    ", ";\n\n    .", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n      min-height: auto;\n      line-height: 22px;\n      font-weight: 700;\n    }\n  "], ["\n    outline: none;\n    box-sizing: border-box;\n    height: auto;\n    min-height: 32px;\n    min-width: 112px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    ", ";\n\n    .", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n      min-height: auto;\n      line-height: 22px;\n      font-weight: 700;\n    }\n  "])), topAndBottomPadding, topAndBottomPadding, sharedListItemStyle(__assign(__assign({}, props), { focusVariant: focusVariant, color: color, 
         // in menuItem always be can hover
         canHover: true, mainClasses: RcMenuItemClasses, rippleClasses: RcMenuItemRippleClasses })), RcMenuItemClasses.gutters, leftAndRightPadding, leftAndRightPadding, RcMenuItemClasses.dense, spacing(1), spacing(1));
 };

package/es6/components/Menu/MenuItem/utils/MenuItemUtils.js

@@ -1,6 +1,6 @@
 import { RcClasses, spacing } from '../../../../foundation';
 export var RcMenuItemPrefix = 'RcMenuItem';
-export var RcMenuItemRipplePrefix = RcMenuItemPrefix + "TouchRipple";
+export var RcMenuItemRipplePrefix = "".concat(RcMenuItemPrefix, "TouchRipple");
 export var RcMenuItemClasses = RcClasses(['checked', 'unchecked', 'gutters', 'dense', 'selected', 'focusVisible'], RcMenuItemPrefix);
 export var RcMenuItemTopAndBottomPaddings = {
     medium: spacing(1),

package/es6/components/MuiExports/index.js

@@ -0,0 +1,41 @@
+/**
+ * MUI Components Re-exports
+ *
+ * These are direct re-exports from @material-ui/core and @material-ui/lab.
+ * They are prefixed with "Mui" to indicate they are raw MUI components,
+ * not JUNO-styled wrappers.
+ *
+ * Usage:
+ * ```tsx
+ * import { MuiFab, MuiCollapse, MuiListItem } from '@ringcentral/juno';
+ * ```
+ *
+ * Note: These exports exist to centralize MUI dependencies.
+ * Consider using JUNO components (Rc* prefixed) when available.
+ */
+// ============================================
+// @material-ui/core Components
+// ============================================
+// Buttons
+export { default as MuiFab } from '@material-ui/core/Fab';
+// Transitions
+export { default as MuiCollapse } from '@material-ui/core/Collapse';
+export { default as MuiSlide } from '@material-ui/core/Slide';
+// List
+export { default as MuiListItem } from '@material-ui/core/ListItem';
+export { default as MuiListItemText } from '@material-ui/core/ListItemText';
+export { default as MuiListItemIcon } from '@material-ui/core/ListItemIcon';
+// Form Inputs
+export { default as MuiTextField } from '@material-ui/core/TextField';
+export { default as MuiInput } from '@material-ui/core/Input';
+export { default as MuiInputLabel } from '@material-ui/core/InputLabel';
+export { default as MuiInputAdornment } from '@material-ui/core/InputAdornment';
+export { default as MuiFormHelperText } from '@material-ui/core/FormHelperText';
+// Progress
+export { default as MuiCircularProgress } from '@material-ui/core/CircularProgress';
+// Card (additional exports not in RcCard)
+export { default as MuiCardContent } from '@material-ui/core/CardContent';
+// ============================================
+// @material-ui/lab Components
+// ============================================
+export { default as MuiAutocomplete } from '@material-ui/lab/Autocomplete';

package/es6/components/Popper/modifiers/fixOffsetsModifer.js

@@ -20,7 +20,7 @@ export var fixOffsetsModifer = {
                         var dpr = window.devicePixelRatio;
                         var x = Math.round(Number(matchValue[1]) * dpr) / dpr;
                         var y = Math.round(Number(matchValue[2]) * dpr) / dpr;
-                        data.styles.transform = "translate3d(" + x + "px, " + y + "px, 0)";
+                        data.styles.transform = "translate3d(".concat(x, "px, ").concat(y, "px, 0)");
                     }
                 }
             }

package/es6/components/PortalHost/Connectable/Connectable.js

@@ -8,7 +8,7 @@ var Connectable = /** @class */ (function () {
         get: function () {
             return Boolean(this._connector);
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Connectable.prototype[ConnectSymbol] = function (connector) {

package/es6/components/PortalHost/PortalManager/PortalManager.js

@@ -34,7 +34,7 @@ var PortalManager = /** @class */ (function (_super) {
             if (process.env.NODE_ENV !== 'production') {
                 logInDev({
                     component: 'RcPortalHost',
-                    message: "open the portal with id('" + id + "') failed, this portal is already open",
+                    message: "open the portal with id('".concat(id, "') failed, this portal is already open"),
                 });
             }
             return currPortal.portalController;

package/es6/components/PortalHost/PortalManager/PortalStore.js

@@ -1,9 +1,9 @@
-import { __extends, __read, __spread, __values } from "tslib";
+import { __extends, __read, __spreadArray, __values } from "tslib";
 import { Connectable } from '../Connectable';
 var PortalStore = /** @class */ (function (_super) {
     __extends(PortalStore, _super);
     function PortalStore() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
         _this._portalMap = new Map();
         _this._batchMode = false;
         return _this;
@@ -12,7 +12,7 @@ var PortalStore = /** @class */ (function (_super) {
         get: function () {
             return this._portalMap.size;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(PortalStore.prototype, "lastPortal", {
@@ -34,14 +34,14 @@ var PortalStore = /** @class */ (function (_super) {
             }
             return lastPortal;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(PortalStore.prototype, "portals", {
         get: function () {
             return this._portalMap.values();
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     PortalStore.prototype.addOrUpdate = function (portal) {
@@ -82,7 +82,7 @@ var PortalStore = /** @class */ (function (_super) {
         this._emitChanges();
     };
     PortalStore.prototype._emitChanges = function () {
-        this.emit(__spread(this.portals));
+        this.emit(__spreadArray([], __read(this.portals), false));
     };
     return PortalStore;
 }(Connectable));

package/es6/components/Presence/styles/StyledPresence.js

@@ -3,15 +3,12 @@ import React, { forwardRef } from 'react';
 import { css, getParsePaletteColor, palette2, styled, fakeBorder, } from '../../../foundation';
 import { RcIcon } from '../../Icon';
 export var _StyledPresence = forwardRef(function (_a, ref) {
-    var color = _a.color, type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, rest = __rest(_a, ["color", "type", "iconSizeValue", "borderSizeValue"]);
-    return (React.createElement("div", __assign({ ref: ref }, rest)));
+    var color = _a.color, type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, children = _a.children, rest = __rest(_a, ["color", "type", "iconSizeValue", "borderSizeValue", "children"]);
+    return (React.createElement("div", __assign({ ref: ref }, rest), children));
 });
-export var StyledPresence = styled(_StyledPresence)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ",
-    ";\n"])), function (_a) {
+export var StyledPresence = styled(_StyledPresence)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ", ";\n"])), function (_a) {
     var iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, color = _a.color;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: ", "px;\n      height: ", "px;\n      background: ", ";\n      ", ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "], ["\n      width: ", "px;\n      height: ", "px;\n      background: ",
-        ";\n      ",
-        ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "])), iconSizeValue, iconSizeValue, color
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: ", "px;\n      height: ", "px;\n      background: ", ";\n      ", ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "], ["\n      width: ", "px;\n      height: ", "px;\n      background: ", ";\n      ", ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "])), iconSizeValue, iconSizeValue, color
         ? getParsePaletteColor(color)
         : palette2('neutral', 'l01'), fakeBorder({
         inset: false,
@@ -19,8 +16,7 @@ export var StyledPresence = styled(_StyledPresence)(templateObject_2 || (templat
         size: borderSizeValue,
     }), RcIcon, iconSizeValue, iconSizeValue);
 });
-export var PresenceContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
-    "\n"])), function (_a) {
+export var PresenceContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue;
     return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      display: flex;\n      justify-content: center;\n      width: ", "px;\n      height: ", "px;\n      padding: ", "px;\n    "], ["\n      display: flex;\n      justify-content: center;\n      width: ", "px;\n      height: ", "px;\n      padding: ", "px;\n    "])), iconSizeValue, iconSizeValue, borderSizeValue);
 });

package/es6/components/Rating/styles/RatingStyle.js

@@ -12,10 +12,8 @@ export var RatingStyle = function (props) {
         React.isValidElement(emptyIcon) &&
         isRcElement(icon, ['RcIcon']) &&
         isRcElement(emptyIcon, ['RcIcon']);
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &.", "\n      .", ",\n      input:focus\n      + .", " {\n      outline: none;\n      border-radius: ", ";\n      box-shadow: 0 0 0 1px ", ";\n    }\n\n    .", " {\n      transform: scale(1, 1);\n    }\n\n    .", " {\n      padding: 0 8px;\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    &.", " {\n      opacity: 1;\n\n      .", " {\n        ", "\n      }\n\n      .", " {\n        color: ", ";\n      }\n    }\n\n    &.", " .", " {\n      padding: 0 8px;\n    }\n  "], ["\n    &.", "\n      .", ",\n      input:focus\n      + .", " {\n      outline: none;\n      border-radius: ", ";\n      box-shadow: 0 0 0 1px ", ";\n    }\n\n    .", " {\n      transform: scale(1, 1);\n    }\n\n    .", " {\n      padding: 0 8px;\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    &.", " {\n      opacity: 1;\n\n      .", " {\n        ",
-        "\n      }\n\n      .", " {\n        color: ", ";\n      }\n    }\n\n    &.", " .", " {\n      padding: 0 8px;\n    }\n  "])), RcRatingClasses.focusVisible, RcRatingClasses.iconActive, RcRatingClasses.pristine, radius('xxl'), focusVisibleColor, RcRatingClasses.iconActive, RcRatingClasses.label, RcRatingClasses.iconFilled, getColor, RcRatingClasses.iconEmpty, palette2('neutral', 'f04'), RcRatingClasses.disabled, RcRatingClasses.iconFilled, isIcon
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              color: ", ";\n            "], ["\n              color: ",
-            ";\n            "])), color === 'neutral.f06' && !emphasized
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &.", "\n      .", ",\n      input:focus\n      + .", " {\n      outline: none;\n      border-radius: ", ";\n      box-shadow: 0 0 0 1px ", ";\n    }\n\n    .", " {\n      transform: scale(1, 1);\n    }\n\n    .", " {\n      padding: 0 8px;\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    &.", " {\n      opacity: 1;\n\n      .", " {\n        ", "\n      }\n\n      .", " {\n        color: ", ";\n      }\n    }\n\n    &.", " .", " {\n      padding: 0 8px;\n    }\n  "], ["\n    &.", "\n      .", ",\n      input:focus\n      + .", " {\n      outline: none;\n      border-radius: ", ";\n      box-shadow: 0 0 0 1px ", ";\n    }\n\n    .", " {\n      transform: scale(1, 1);\n    }\n\n    .", " {\n      padding: 0 8px;\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    &.", " {\n      opacity: 1;\n\n      .", " {\n        ", "\n      }\n\n      .", " {\n        color: ", ";\n      }\n    }\n\n    &.", " .", " {\n      padding: 0 8px;\n    }\n  "])), RcRatingClasses.focusVisible, RcRatingClasses.iconActive, RcRatingClasses.pristine, radius('xxl'), focusVisibleColor, RcRatingClasses.iconActive, RcRatingClasses.label, RcRatingClasses.iconFilled, getColor, RcRatingClasses.iconEmpty, palette2('neutral', 'f04'), RcRatingClasses.disabled, RcRatingClasses.iconFilled, isIcon
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              color: ", ";\n            "], ["\n              color: ", ";\n            "])), color === 'neutral.f06' && !emphasized
             ? palette2('neutral', 'f04')
             : setOpacity(getColor(props), '40', true)) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              opacity: ", ";\n            "], ["\n              opacity: ", ";\n            "])), opacity('64')), RcRatingClasses.iconEmpty, palette2('disabled', 'f02'), RcRatingClasses.readOnly, RcRatingClasses.icon);
 };

package/es6/components/Responsive/utils/getMatchedBreakpoint.js

@@ -1,6 +1,6 @@
-import { __read, __spread } from "tslib";
+import { __read, __spreadArray } from "tslib";
 import { breakpointList } from '../../../foundation';
-var bpListL2S = __spread(breakpointList).reverse();
+var bpListL2S = __spreadArray([], __read(breakpointList), false).reverse();
 export var getMatchedBreakpoint = function (width, breakpointMap) {
     // no match when width is less than min width of XS
     return bpListL2S.find(function (bp) { return width >= breakpointMap[bp]; }) || null;

package/es6/components/Responsive/utils/index.js

@@ -1 +1,2 @@
 export * from './getMatchedBreakpoint';
+export * from './types';

package/es6/components/Responsive/utils/types.js

@@ -0,0 +1 @@
+export {};

package/es6/components/Snackbar/SnackbarAction/styles/StyledSnackbarContent.js

@@ -4,8 +4,7 @@ import { RcSnackbarContentLineHeight } from '../../SnackbarContent/utils';
 import { RcSnackbarActionClasses } from '../utils';
 export var snackbarContentActionStyle = function (_a) {
     var color = _a.color;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n\n    &.", " {\n      ", ";\n      line-height: ", ";\n      text-decoration: underline;\n    }\n\n    & + &.", " {\n      margin-left: ", ";\n    }\n\n    & + &.", " {\n      margin-left: ", ";\n    }\n\n    &:active {\n      opacity: ", ";\n    }\n\n    &:disabled {\n      opacity: ", ";\n    }\n\n    ", " {\n      ", "\n    }\n  "], ["\n    color: ", ";\n\n    &.", " {\n      ", ";\n      line-height: ", ";\n      text-decoration: underline;\n    }\n\n    & + &.", " {\n      margin-left: ", ";\n    }\n\n    & + &.", " {\n      margin-left: ", ";\n    }\n\n    &:active {\n      opacity: ", ";\n    }\n\n    &:disabled {\n      opacity: ", ";\n    }\n\n    ", " {\n      ",
-        "\n    }\n  "])), color && getParsePaletteColor(color), RcSnackbarActionClasses.text, typography('body2'), RcSnackbarContentLineHeight, RcSnackbarActionClasses.text, spacing(3), RcSnackbarActionClasses.icon, spacing(4), opacity('24', true), opacity('24'), focusVisible, fakeBorder({
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n\n    &.", " {\n      ", ";\n      line-height: ", ";\n      text-decoration: underline;\n    }\n\n    & + &.", " {\n      margin-left: ", ";\n    }\n\n    & + &.", " {\n      margin-left: ", ";\n    }\n\n    &:active {\n      opacity: ", ";\n    }\n\n    &:disabled {\n      opacity: ", ";\n    }\n\n    ", " {\n      ", "\n    }\n  "], ["\n    color: ", ";\n\n    &.", " {\n      ", ";\n      line-height: ", ";\n      text-decoration: underline;\n    }\n\n    & + &.", " {\n      margin-left: ", ";\n    }\n\n    & + &.", " {\n      margin-left: ", ";\n    }\n\n    &:active {\n      opacity: ", ";\n    }\n\n    &:disabled {\n      opacity: ", ";\n    }\n\n    ", " {\n      ", "\n    }\n  "])), color && getParsePaletteColor(color), RcSnackbarActionClasses.text, typography('body2'), RcSnackbarContentLineHeight, RcSnackbarActionClasses.text, spacing(3), RcSnackbarActionClasses.icon, spacing(4), opacity('24', true), opacity('24'), focusVisible, fakeBorder({
         pseudo: true,
         color: 'currentColor',
         inset: false,

package/es6/components/Table/TableContainer/styles/TableContainerStyle.js

@@ -5,7 +5,6 @@ import { RcTableCell } from '../../TableCell';
 import { RcTableRow } from '../../TableRow';
 export var TableContainerStyle = function (props) {
     var bordered = props.bordered, square = props.square;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ",
-        "\n  "])), bordered && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-radius: ", ";\n      border: 1px solid ", ";\n\n      ", " ", ":last-child ", " {\n        border: none;\n      }\n    "], ["\n      border-radius: ", ";\n      border: 1px solid ", ";\n\n      ", " ", ":last-child ", " {\n        border: none;\n      }\n    "])), !square && px(4), palette2('neutral', 'l02'), RcTableBody, RcTableRow, RcTableCell));
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), bordered && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-radius: ", ";\n      border: 1px solid ", ";\n\n      ", " ", ":last-child ", " {\n        border: none;\n      }\n    "], ["\n      border-radius: ", ";\n      border: 1px solid ", ";\n\n      ", " ", ":last-child ", " {\n        border: none;\n      }\n    "])), !square && px(4), palette2('neutral', 'l02'), RcTableBody, RcTableRow, RcTableCell));
 };
 var templateObject_1, templateObject_2;

package/es6/components/Table/index.js

@@ -5,3 +5,4 @@ export * from './TableCell';
 export * from './TableContainer';
 export * from './TableHead';
 export * from './TableRow';
+export * from './types';

package/es6/components/Table/types.js

@@ -0,0 +1 @@
+export {};

package/es6/components/TablePagination/TablePagination.js

@@ -58,7 +58,7 @@ var _RcTablePagination = forwardRef(function (inProps, ref) {
     return (React.createElement(TablePaginationRoot, __assign({ colSpan: colSpan, ref: ref, as: component, className: clsx(classes.root, className) }, rest),
         React.createElement(RcToolbar, { className: classes.toolbar },
             React.createElement("div", { className: classes.spacer }),
-            rowsPerPageOptions.length > 1 && (React.createElement(RcTypography, { color: "inherit", variant: "body1", className: classes.caption }, labelRowsPerPage)),
+            rowsPerPageOptions.length > 1 && (React.createElement(RcTypography, { color: 'inherit', variant: "body1", className: classes.caption }, labelRowsPerPage)),
             rowsPerPageOptions.length > 1 && (React.createElement(RcSelect, __assign({ className: classes.selectRoot, InputProps: { disableUnderline: true }, value: rowsPerPage, onChange: onRowsPerPageChange }, SelectProps), rowsPerPageOptions.map(function (rowsPerPageOption) {
                 var value = rowsPerPageOption.value
                     ? rowsPerPageOption.value

package/es6/components/TablePagination/utils/TablePaginationUtils.js

@@ -12,13 +12,13 @@ export var RcTablePaginationClasses = RcClasses([
     'actions',
 ], 'RcTablePagination');
 export function defaultGetAriaLabel(value) {
-    return "Go to " + value + " page";
+    return "Go to ".concat(value, " page");
 }
 export function defaultLabelDisplayedRows(_a) {
     var from = _a.from, to = _a.to, count = _a.count;
-    return from + "-" + to + " of " + (count !== -1 ? count : "more than " + to);
+    return "".concat(from, "-").concat(to, " of ").concat(count !== -1 ? count : "more than ".concat(to));
 }
 export var defaultLabelOfPage = function (_a) {
     var totalPage = _a.totalPage;
-    return "of " + totalPage + " pages";
+    return "of ".concat(totalPage, " pages");
 };

package/es6/components/Tabs/Tab/styles/TabStyle.js

@@ -5,7 +5,6 @@ var getMinHeight = function (size) { return (size === 'large' ? 60 : 32); };
 export var TabStyle = function (props) {
     var size = props.size, directionProp = props.direction;
     var isVertical = directionProp === 'vertical';
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    text-transform: none;\n    box-sizing: border-box;\n    ", ";\n    color: ", ";\n\n    &.", " {\n      ", ";\n      color: ", ";\n    }\n\n    min-height: ", ";\n    min-width: 32px;\n\n    ", "\n  "], ["\n    text-transform: none;\n    box-sizing: border-box;\n    ", ";\n    color: ", ";\n\n    &.", " {\n      ", ";\n      color: ", ";\n    }\n\n    min-height: ", ";\n    min-width: 32px;\n\n    ",
-        "\n  "])), typography('body1'), palette2('tab', 'default'), RcTabClasses.selected, typography('body2'), palette2('tab', 'selected'), px(getMinHeight(size)), directionProp !== undefined && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      .", " {\n        flex-direction: ", ";\n      }\n\n      &.", " .", " > *:first-child {\n        margin-bottom: ", ";\n        // 6px is follow mui\n        margin-right: ", ";\n      }\n    "], ["\n      .", " {\n        flex-direction: ", ";\n      }\n\n      &.", " .", " > *:first-child {\n        margin-bottom: ", ";\n        // 6px is follow mui\n        margin-right: ", ";\n      }\n    "])), RcTabClasses.wrapper, isVertical ? 'row' : 'column', RcTabClasses.labelIcon, RcTabClasses.wrapper, isVertical && 'unset', isVertical && '6px'));
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    text-transform: none;\n    box-sizing: border-box;\n    ", ";\n    color: ", ";\n\n    &.", " {\n      ", ";\n      color: ", ";\n    }\n\n    min-height: ", ";\n    min-width: 32px;\n\n    ", "\n  "], ["\n    text-transform: none;\n    box-sizing: border-box;\n    ", ";\n    color: ", ";\n\n    &.", " {\n      ", ";\n      color: ", ";\n    }\n\n    min-height: ", ";\n    min-width: 32px;\n\n    ", "\n  "])), typography('body1'), palette2('tab', 'default'), RcTabClasses.selected, typography('body2'), palette2('tab', 'selected'), px(getMinHeight(size)), directionProp !== undefined && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      .", " {\n        flex-direction: ", ";\n      }\n\n      &.", " .", " > *:first-child {\n        margin-bottom: ", ";\n        // 6px is follow mui\n        margin-right: ", ";\n      }\n    "], ["\n      .", " {\n        flex-direction: ", ";\n      }\n\n      &.", " .", " > *:first-child {\n        margin-bottom: ", ";\n        // 6px is follow mui\n        margin-right: ", ";\n      }\n    "])), RcTabClasses.wrapper, isVertical ? 'row' : 'column', RcTabClasses.labelIcon, RcTabClasses.wrapper, isVertical && 'unset', isVertical && '6px'));
 };
 var templateObject_1, templateObject_2;

package/es6/components/Tabs/Tabs/MoreMenuTab/styles/MoreMenuTabStyle.js

@@ -3,8 +3,7 @@ import { css } from '../../../../../foundation';
 export var MoreMenuTabStyle = function (_a) {
     var orientation = _a.orientation;
     var isVertical = orientation === 'vertical';
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    bottom: 0;\n\n    ", "\n  "], ["\n    position: absolute;\n    bottom: 0;\n\n    ",
-        "\n  "])), isVertical
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    bottom: 0;\n\n    ", "\n  "], ["\n    position: absolute;\n    bottom: 0;\n\n    ", "\n  "])), isVertical
         ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          width: 100%;\n        "], ["\n          width: 100%;\n        "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          top: 0;\n          right: 0;\n        "], ["\n          top: 0;\n          right: 0;\n        "]))));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js

@@ -1,4 +1,4 @@
-import { __assign, __makeTemplateObject, __read, __rest, __spread, __values } from "tslib";
+import { __assign, __makeTemplateObject, __read, __rest, __spreadArray, __values } from "tslib";
 import MuiTabs from '@material-ui/core/Tabs';
 import React, { cloneElement, forwardRef, isValidElement, useEffect, useRef, useState, } from 'react';
 import { getResizeObserver, styled, useForkRef, useMountState, useOnReRender, useThrottle, useRcPortalWindowContext, } from '../../../../foundation';
@@ -278,12 +278,12 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
         });
         if (!useMoreMode)
             return tabGroupElements;
-        return __spread(tabGroupElements, [
+        return __spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(tabGroupElements), false), [
             React.createElement(MoreMenuTabSentinel, { id: "start", value: "sentinel-start", key: "sentinel-start", ref: sentinelStartRef, onFocus: function () {
                     var _a;
                     (_a = moreTabRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 } })
-        ], groupInfo.menu.map(function (_a) {
+        ], false), __read(groupInfo.menu.map(function (_a) {
             var index = _a.index, key = _a.key, tabValue = _a.value, element = _a.element;
             return cloneElement(element, {
                 key: key,
@@ -294,7 +294,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
                 disabled: true,
                 style: __assign(__assign({}, element.props.style), { opacity: 0, position: 'absolute', top: 0, left: 0 }),
             });
-        }), [
+        })), false), [
             React.createElement(MoreMenuTabSentinel, { id: "end", value: "sentinel-end", key: "sentinel-end", onFocus: function () {
                     var _a;
                     var focusTarget = ((_a = sentinelStartRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling) ||
@@ -302,7 +302,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
                     if (focusTarget)
                         focusTarget.focus();
                 } }),
-        ]);
+        ], false);
     })();
     return (React.createElement(MuiTabs, __assign({}, rest, { ref: tabsRef, value: value, variant: "standard", indicatorColor: "primary", textColor: "primary", onChange: onChange, orientation: orientation }),
         children,

package/es6/components/Tabs/Tabs/MoreMenuTabs/utils/MoreMenuTabsUtils.js

@@ -0,0 +1 @@
+export {};

package/es6/components/Tabs/Tabs/MoreMenuTabs/utils/index.js

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

package/es6/components/Tag/styles/TagStyle.js

@@ -4,7 +4,6 @@ import { colorMap } from '../utils';
 export var TagStyle = function (_a) {
     var textColor = _a.textColor, color = _a.color, borderColor = _a.borderColor, radiusProp = _a.radius;
     var backgroundColor = getParsePaletteColor((typeof color === 'string' && colorMap[color]) || color);
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n\n    background-color: ", ";\n    color: ", ";\n    ", ";\n\n    border-radius: ", ";\n    text-align: center;\n    padding: ", ";\n    ", ";\n    min-width: ", ";\n    max-width: ", ";\n    ", "\n  "], ["\n    display: inline-block;\n\n    background-color: ", ";\n    color: ", ";\n    ",
-        ";\n\n    border-radius: ", ";\n    text-align: center;\n    padding: ", ";\n    ", ";\n    min-width: ", ";\n    max-width: ", ";\n    ", "\n  "])), backgroundColor, getParsePaletteColor(textColor), borderColor && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border: 1px solid ", ";\n    "], ["\n      border: 1px solid ", ";\n    "])), getParsePaletteColor(borderColor)), radius(radiusProp), spacing(0, 2), typography('caption1'), spacing(9), spacing(41), ellipsis);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n\n    background-color: ", ";\n    color: ", ";\n    ", ";\n\n    border-radius: ", ";\n    text-align: center;\n    padding: ", ";\n    ", ";\n    min-width: ", ";\n    max-width: ", ";\n    ", "\n  "], ["\n    display: inline-block;\n\n    background-color: ", ";\n    color: ", ";\n    ", ";\n\n    border-radius: ", ";\n    text-align: center;\n    padding: ", ";\n    ", ";\n    min-width: ", ";\n    max-width: ", ";\n    ", "\n  "])), backgroundColor, getParsePaletteColor(textColor), borderColor && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border: 1px solid ", ";\n    "], ["\n      border: 1px solid ", ";\n    "])), getParsePaletteColor(borderColor)), radius(radiusProp), spacing(0, 2), typography('caption1'), spacing(9), spacing(41), ellipsis);
 };
 var templateObject_1, templateObject_2;

package/es6/components/Text/Text.js

@@ -27,7 +27,8 @@ var _RcText = forwardRef(function (inProps, ref) {
     }, [TooltipPropsProp, isShowTitle]);
     return (React.createElement(RcTypography, __assign({ ref: textRef, title: isShowTitle || useRcTooltip // * if useRcTooltip always keep title pass into
             ? // * if user pass title, use title first
-             title !== null && title !== void 0 ? title : (isString(children) ? children : undefined) : undefined, TooltipProps: TooltipProps, useRcTooltip: useRcTooltip, variant: highlight ? 'inherit' : undefined, component: highlight ? 'span' : undefined, className: className }, rest), children));
+                title !== null && title !== void 0 ? title : (isString(children) ? children : undefined)
+            : undefined, TooltipProps: TooltipProps, useRcTooltip: useRcTooltip, variant: highlight ? 'inherit' : undefined, component: highlight ? 'span' : undefined, className: className }, rest), children));
 });
 /**
  * `RcText` will auto add title with children when that children is string

package/es6/components/Text/styles/StyledText.js

@@ -3,7 +3,6 @@ import { css, palette2 } from '../../../foundation';
 export var highlightClassName = 'highlight-term';
 export var textStyle = function (props) {
     var titleWhenOverflow = props.titleWhenOverflow, flexFull = props.flexFull;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", ";\n\n    flex: ", ";\n\n    &.", " {\n      color: ", " !important;\n      background-color: ", " !important;\n    }\n  "], ["\n    ",
-        ";\n\n    flex: ", ";\n\n    &.", " {\n      color: ", " !important;\n      background-color: ", " !important;\n    }\n  "])), typeof titleWhenOverflow === 'number' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-line-clamp: ", ";\n      -webkit-box-orient: vertical;\n      white-space: normal;\n    "], ["\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-line-clamp: ", ";\n      -webkit-box-orient: vertical;\n      white-space: normal;\n    "])), titleWhenOverflow), flexFull && '1 1 auto', highlightClassName, palette2('highlight', 'f01'), palette2('highlight', 'b02'));
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", ";\n\n    flex: ", ";\n\n    &.", " {\n      color: ", " !important;\n      background-color: ", " !important;\n    }\n  "], ["\n    ", ";\n\n    flex: ", ";\n\n    &.", " {\n      color: ", " !important;\n      background-color: ", " !important;\n    }\n  "])), typeof titleWhenOverflow === 'number' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-line-clamp: ", ";\n      -webkit-box-orient: vertical;\n      white-space: normal;\n    "], ["\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-line-clamp: ", ";\n      -webkit-box-orient: vertical;\n      white-space: normal;\n    "])), titleWhenOverflow), flexFull && '1 1 auto', highlightClassName, palette2('highlight', 'f01'), palette2('highlight', 'b02'));
 };
 var templateObject_1, templateObject_2;

package/es6/components/Thumbnail/styles/StyledThumbnail.js

@@ -1,8 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { css, fakeBorder, palette2, radius, styled } from '../../../foundation';
 import { RcThumbnailSizes } from '../utils';
-export var StyledThumbnail = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: inline-block;\n  background-color: ", ";\n  ", ";\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n"], ["\n  ",
-    ";\n  display: inline-block;\n  background-color: ", ";\n  ", ";\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n"])), function (_a) {
+export var StyledThumbnail = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: inline-block;\n  background-color: ", ";\n  ", ";\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n"], ["\n  ", ";\n  display: inline-block;\n  background-color: ", ";\n  ", ";\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n"])), function (_a) {
     var size = _a.size, src = _a.src;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", "px;\n    height: ", "px;\n    background-image: url(", ");\n    border-radius: ", ";\n  "], ["\n    width: ", "px;\n    height: ", "px;\n    background-image: url(", ");\n    border-radius: ", ";\n  "])), RcThumbnailSizes[size], RcThumbnailSizes[size], src, radius(size === 'small' ? 'sm' : 'lg'));
 }, palette2('neutral', 'b03'), fakeBorder());

package/es6/components/Tooltip/styles/StyledTooltip.js

@@ -31,8 +31,7 @@ export var tooltipStyle = function () {
     return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n    max-width: calc(100% - 10px);\n\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "], ["\n    "
         // The preventOverflowModifier of popperjs has 5px padding.
         // So need set max-width to calc(100% - 10px) to prevent overflow when the tooltip is too long.
-        ,
-        "\n    max-width: calc(100% - 10px);\n\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "])), 
+        , "\n    max-width: calc(100% - 10px);\n\n    .", " {\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      word-break: break-word;\n      position: relative;\n    }\n\n    .", ",\n      .", " {\n      margin: ", " 0;\n    }\n\n    .", ",\n      .", " {\n      margin: 0 ", ";\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        margin-bottom: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-right: ", ";\n        ", "\n        ", "\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-left: ", ";\n        ", "\n        ", "\n      }\n    }\n  "])), 
     // The preventOverflowModifier of popperjs has 5px padding.
     // So need set max-width to calc(100% - 10px) to prevent overflow when the tooltip is too long.
     '', RcTooltipClasses.tooltip, tooltipTypography, tooltipColor, tooltipTextColor, tooltipPadding, RcTooltipClasses.tooltipPlacementTop, RcTooltipClasses.tooltipPlacementBottom, placementSpace, RcTooltipClasses.tooltipPlacementRight, RcTooltipClasses.tooltipPlacementLeft, placementSpace, RcTooltipClasses.arrow, tooltipColor, RcTooltipClasses.tooltipPlacementTop, RcTooltipClasses.arrow, marginOffset, arrowSize.vertical, RcTooltipClasses.tooltipPlacementBottom, RcTooltipClasses.arrow, marginOffset, arrowSize.vertical, RcTooltipClasses.tooltipPlacementLeft, RcTooltipClasses.arrow, marginOffset, arrowSize.horizontal, horizontalMarginTopAndMarginBottom, RcTooltipClasses.tooltipPlacementRight, RcTooltipClasses.arrow, marginOffset, arrowSize.horizontal, horizontalMarginTopAndMarginBottom);

package/es6/components/Transitions/Transition.js

@@ -26,7 +26,8 @@ export function getTransitionProps(props, options) {
             ? timeout
             : (timeout === null || timeout === void 0 ? void 0 : timeout[options.mode]) || 0,
         easing: style.transitionTimingFunction || typeof easing === 'object'
-            ? easing === null || easing === void 0 ? void 0 : easing[options.mode] : easing,
+            ? easing === null || easing === void 0 ? void 0 : easing[options.mode]
+            : easing,
         delay: style.transitionDelay,
     };
 }