@ringcentral/juno 2.46.0 → 3.0.0-alpha.0

package/foundation/overridableStyled.d.ts

@@ -2,7 +2,7 @@ import { OverridableComponent, OverridableTypeMap } from '@material-ui/core/Over
 import { ComponentType, FunctionComponent } from 'react';
 import { Interpolation, ThemedStyledProps } from './styled-components';
 import { RcTheme } from './theme/theme.type';
-export declare type CustomStyledComponentResult<T> = Interpolation<ThemedStyledProps<T, RcTheme>> & FunctionComponent<T>;
+export type CustomStyledComponentResult<T> = Interpolation<ThemedStyledProps<T, RcTheme>> & FunctionComponent<T>;
 export interface OverridableStyled {
     <M extends Omit<OverridableTypeMap, 'classKey'>>(component: ComponentType): (strings: TemplateStringsArray, ...interpolations: Array<Interpolation<ThemedStyledProps<M['props'], RcTheme>>>) => OverridableComponent<M & {
         classKey: '';

package/foundation/overridableStyled.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.overridableStyled = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = tslib_1.__importDefault(require("./styled-components"));
 /**

package/foundation/styled-components.d.ts

@@ -2,9 +2,9 @@
 import type { FlattenInterpolation, Interpolation, InterpolationValue, Keyframes, ThemedStyledProps, ThemeProps as StyledThemeProps } from 'styled-components';
 import * as styledComponents from 'styled-components';
 import { RcTheme } from './theme/theme.type';
-declare type ThemeProps = StyledThemeProps<RcTheme>;
-declare const styled: styledComponents.ThemedStyledInterface<RcTheme>, css: styledComponents.ThemedCssFunction<RcTheme>, keyframes: (strings: TemplateStringsArray, ...interpolations: styledComponents.SimpleInterpolation[]) => Keyframes, createGlobalStyle: <P = {}>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, RcTheme>>[]) => styledComponents.GlobalStyleClass<P, RcTheme>, withTheme: styledComponents.BaseWithThemeFnInterface<RcTheme>, StyleSheetManager: any, ThemeProvider: styledComponents.BaseThemeProviderComponent<RcTheme>, ThemeConsumer: styledComponents.BaseThemeConsumerComponent<RcTheme>;
-declare type Dependencies = {
+type ThemeProps = StyledThemeProps<RcTheme>;
+declare const styled: styledComponents.ThemedStyledInterface<RcTheme>, css: styledComponents.ThemedCssFunction<RcTheme>, keyframes: (strings: TemplateStringsArray | styledComponents.CSSKeyframes, ...interpolations: styledComponents.SimpleInterpolation[]) => Keyframes, createGlobalStyle: <P extends object = {}>(first: TemplateStringsArray | styledComponents.CSSObject | styledComponents.InterpolationFunction<ThemedStyledProps<P, RcTheme>>, ...interpolations: Interpolation<ThemedStyledProps<P, RcTheme>>[]) => styledComponents.GlobalStyleComponent<P, RcTheme>, withTheme: styledComponents.BaseWithThemeFnInterface<RcTheme>, StyleSheetManager: typeof styledComponents.StyleSheetManager, ThemeProvider: styledComponents.BaseThemeProviderComponent<RcTheme, RcTheme>, ThemeConsumer: import("react").Consumer<RcTheme>;
+type Dependencies = {
     dependencies?: (React.ComponentType | ((props: any) => JSX.Element))[];
 };
 declare const RcUseTheme: <T = RcTheme>() => T;

package/foundation/styled-components.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.withTheme = exports.ThemeProvider = exports.ThemeConsumer = exports.StyleSheetManager = exports.useTheme = exports.keyframes = exports.css = exports.createGlobalStyle = void 0;
 var tslib_1 = require("tslib");
 /* eslint-disable import/no-duplicates */
 var styledComponents = tslib_1.__importStar(require("styled-components"));
@@ -14,6 +15,6 @@ exports.withTheme = withTheme;
 exports.StyleSheetManager = StyleSheetManager;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeConsumer = ThemeConsumer;
-var RcUseTheme = function () { return styles_1.useTheme(); };
+var RcUseTheme = function () { return (0, styles_1.useTheme)(); };
 exports.useTheme = RcUseTheme;
 exports.default = styled;

package/foundation/styles/GlobalScrollBarStyle/GlobalScrollBarStyle.d.ts

@@ -1,2 +1,2 @@
 /** Provide you to change whole app scrollBar color */
-export declare const RcGlobalScrollBarStyle: import("styled-components").GlobalStyleClass<{}, import("../..").RcTheme>;
+export declare const RcGlobalScrollBarStyle: import("styled-components").GlobalStyleComponent<{}, import("../..").RcTheme>;

package/foundation/styles/GlobalScrollBarStyle/GlobalScrollBarStyle.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcGlobalScrollBarStyle = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../../styled-components");
 // TODO: wait for designer confirm that color
 var scrollBarColor = 'rgba(80,80,80,0.7)';
 /** Provide you to change whole app scrollBar color */
-exports.RcGlobalScrollBarStyle = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  /*  Firefox-only */\n  * {\n    scrollbar-color: ", " transparent;\n  }\n  /*\n  /* Works on Chrome/Edge/Safari */\n  ::-webkit-scrollbar {\n    width: 10px;\n    height: 10px;\n  };\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  };\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 10px;\n  };\n"], ["\n  /*  Firefox-only */\n  * {\n    scrollbar-color: ", " transparent;\n  }\n  /*\n  /* Works on Chrome/Edge/Safari */\n  ::-webkit-scrollbar {\n    width: 10px;\n    height: 10px;\n  };\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  };\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 10px;\n  };\n"])), scrollBarColor, scrollBarColor);
+exports.RcGlobalScrollBarStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  /*  Firefox-only */\n  * {\n    scrollbar-color: ", " transparent;\n  }\n  /*\n  /* Works on Chrome/Edge/Safari */\n  ::-webkit-scrollbar {\n    width: 10px;\n    height: 10px;\n  };\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  };\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 10px;\n  };\n"], ["\n  /*  Firefox-only */\n  * {\n    scrollbar-color: ", " transparent;\n  }\n  /*\n  /* Works on Chrome/Edge/Safari */\n  ::-webkit-scrollbar {\n    width: 10px;\n    height: 10px;\n  };\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  };\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 10px;\n  };\n"])), scrollBarColor, scrollBarColor);
 var templateObject_1;

package/foundation/styles/colorManipulator.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContrastBgColor = exports.lighten = exports.darken = void 0;
 var styles_1 = require("@material-ui/core/styles");
 var newPalette_1 = require("./newPalette");
 /**
@@ -20,7 +21,7 @@ colorInput,
 coefficient) {
     return function (props) {
         var color = typeof colorInput === 'function' ? colorInput(props) : colorInput;
-        return styles_1.darken(color, coefficient);
+        return (0, styles_1.darken)(color, coefficient);
     };
 }
 exports.darken = darken;
@@ -38,7 +39,7 @@ exports.darken = darken;
 function lighten(colorInput, coefficient) {
     return function (props) {
         var color = typeof colorInput === 'function' ? colorInput(props) : colorInput;
-        return styles_1.lighten(color, coefficient);
+        return (0, styles_1.lighten)(color, coefficient);
     };
 }
 exports.lighten = lighten;
@@ -51,9 +52,9 @@ exports.lighten = lighten;
  * const [currColor, contrastBgColor] = getContrastBgColor(props);
  * ```
  */
-exports.getContrastBgColor = function (_a) {
+var getContrastBgColor = function (_a) {
     var theme = _a.theme, color = _a.color;
-    var currColor = newPalette_1.getParsePaletteColor(color);
+    var currColor = (0, newPalette_1.getParsePaletteColor)(color);
     return [
         currColor,
         theme.palette.type === 'light'
@@ -62,3 +63,4 @@ exports.getContrastBgColor = function (_a) {
             : darken(currColor, 0.5),
     ];
 };
+exports.getContrastBgColor = getContrastBgColor;

package/foundation/styles/ellipsis.d.ts

@@ -8,4 +8,4 @@
  * text-overflow: ellipsis;
  * ```
  */
-export declare function ellipsis(): import("styled-components").InterpolationValue[];
+export declare function ellipsis(): import("styled-components").FlattenSimpleInterpolation;

package/foundation/styles/ellipsis.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ellipsis = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../styled-components");
 /**
@@ -13,7 +14,7 @@ var styled_components_1 = require("../styled-components");
  * ```
  */
 function ellipsis() {
-    return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  "], ["\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  "])));
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  "], ["\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  "])));
 }
 exports.ellipsis = ellipsis;
 var templateObject_1;

package/foundation/styles/fakeBorder.d.ts

@@ -1,7 +1,7 @@
 import { RcTheme } from '../theme/theme.type';
 import { shadowBorder } from './focusVisible';
-declare type ShadowBorderParams = Parameters<typeof shadowBorder>;
-export declare type FakeBorderOption = {
+type ShadowBorderParams = Parameters<typeof shadowBorder>;
+export type FakeBorderOption = {
     /** should use pseudo */
     pseudo?: boolean;
     /** radius with fake border */
@@ -19,5 +19,5 @@ export declare type FakeBorderOption = {
 };
 export declare const fakeBorder: ({ pseudo, inset, radius, size, color, allowTransparent, }?: FakeBorderOption) => ({ theme }: {
     theme?: RcTheme | undefined;
-}) => import("styled-components").FlattenInterpolation<any>[] | undefined;
+}) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<RcTheme>> | undefined;
 export {};

package/foundation/styles/fakeBorder.js

@@ -1,20 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.fakeBorder = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../styled-components");
 var focusVisible_1 = require("./focusVisible");
 var newPalette_1 = require("./newPalette");
-exports.fakeBorder = function (_a) {
-    var _b = _a === void 0 ? {} : _a, pseudo = _b.pseudo, _c = _b.inset, inset = _c === void 0 ? true : _c, radius = _b.radius, _d = _b.size, size = _d === void 0 ? 1 : _d, _e = _b.color, color = _e === void 0 ? newPalette_1.palette2('highContrast') : _e, allowTransparent = _b.allowTransparent;
+var fakeBorder = function (_a) {
+    var _b = _a === void 0 ? {} : _a, pseudo = _b.pseudo, _c = _b.inset, inset = _c === void 0 ? true : _c, radius = _b.radius, _d = _b.size, size = _d === void 0 ? 1 : _d, _e = _b.color, color = _e === void 0 ? (0, newPalette_1.palette2)('highContrast') : _e, allowTransparent = _b.allowTransparent;
     return function (_a) {
         var theme = _a.theme;
         var colorValue = typeof color === 'function' && theme ? color({ theme: theme }) : color;
         if (!allowTransparent && colorValue === 'transparent')
             return;
         if (pseudo) {
-            return focusVisible_1.shadowBorder(radius, colorValue, inset, size);
+            return (0, focusVisible_1.shadowBorder)(radius, colorValue, inset, size);
         }
-        return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      box-shadow: ", " 0 0 0 ", "px ", ";\n    "], ["\n      box-shadow: ", " 0 0 0 ", "px ", ";\n    "])), inset ? 'inset' : '', size, colorValue);
+        return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      box-shadow: ", " 0 0 0 ", "px ", ";\n    "], ["\n      box-shadow: ", " 0 0 0 ", "px ", ";\n    "])), inset ? 'inset' : '', size, colorValue);
     };
 };
+exports.fakeBorder = fakeBorder;
 var templateObject_1;

package/foundation/styles/flexCenter.d.ts

@@ -7,4 +7,4 @@
  * // align-items: center;
  * ```
  */
-export declare const flexCenterStyle: import("styled-components").InterpolationValue[];
+export declare const flexCenterStyle: import("styled-components").FlattenSimpleInterpolation;

package/foundation/styles/flexCenter.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.flexCenterStyle = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../styled-components");
 /**
@@ -11,5 +12,5 @@ var styled_components_1 = require("../styled-components");
  * // align-items: center;
  * ```
  */
-exports.flexCenterStyle = styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+exports.flexCenterStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 var templateObject_1;

package/foundation/styles/flexWidth.d.ts

@@ -17,4 +17,4 @@ import { LiteralUnion } from '../typings';
  * // max-width: 500px
  * ```
  */
-export declare const flexWidth: (width: LiteralUnion<"auto">) => import("styled-components").InterpolationValue[];
+export declare const flexWidth: (width: LiteralUnion<'auto'>) => import("styled-components").FlattenSimpleInterpolation;

package/foundation/styles/flexWidth.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.flexWidth = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../styled-components");
 /**
@@ -20,7 +21,7 @@ var styled_components_1 = require("../styled-components");
  * // max-width: 500px
  * ```
  */
-exports.flexWidth = function (width) { return styled_components_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  flex: 1 1 ", ";\n\n  ", "\n"], ["\n  flex: 1 1 ", ";\n\n  ",
-    "\n"])), width, width !== 'auto'
-    ? styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n        max-width: ", ";\n        min-width: ", ";\n      "], ["\n        max-width: ", ";\n        min-width: ", ";\n      "])), width, width) : styled_components_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n        max-width: unset;\n        min-width: unset;\n      "], ["\n        max-width: unset;\n        min-width: unset;\n      "])))); };
+var flexWidth = function (width) { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  flex: 1 1 ", ";\n\n  ", "\n"], ["\n  flex: 1 1 ", ";\n\n  ", "\n"])), width, width !== 'auto'
+    ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n        max-width: ", ";\n        min-width: ", ";\n      "], ["\n        max-width: ", ";\n        min-width: ", ";\n      "])), width, width) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n        max-width: unset;\n        min-width: unset;\n      "], ["\n        max-width: unset;\n        min-width: unset;\n      "])))); };
+exports.flexWidth = flexWidth;
 var templateObject_1, templateObject_2, templateObject_3;

package/foundation/styles/focusRing.d.ts

@@ -1,7 +1,7 @@
 import { radius } from './radius';
 import { RcPaletteProp } from '../theme';
-export declare type FocusRingVariant = 'normal' | 'inset';
-export declare type FocusRingOptions = {
+export type FocusRingVariant = 'normal' | 'inset';
+export type FocusRingOptions = {
     /**
      * Border radius of reference element. Can help this utils to calculate focusRing radius.
      * Only useful if `pseudo` is true.
@@ -26,4 +26,4 @@ export declare type FocusRingOptions = {
      */
     gapColor?: RcPaletteProp;
 };
-export declare const focusRing: (variant: FocusRingVariant, options?: FocusRingOptions) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("../theme").RcTheme>>[];
+export declare const focusRing: (variant: FocusRingVariant, options?: FocusRingOptions) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("../theme").RcTheme>>;

package/foundation/styles/focusRing.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusRing = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../styled-components");
 var newPalette_1 = require("./newPalette");
@@ -8,16 +9,17 @@ var focusRingOffsetMap = {
     normal: '2px',
     inset: '0px',
 };
-exports.focusRing = function (variant, options) {
+var focusRing = function (variant, options) {
     if (options === void 0) { options = {}; }
     var _a = options.pseudo, pseudo = _a === void 0 ? true : _a;
     if (pseudo) {
         var _b = options.borderRadius, borderRadius = _b === void 0 ? 'zero' : _b, _c = options.borderWidth, borderWidth = _c === void 0 ? '0px' : _c;
         var isInset = variant === 'inset';
         var offset = focusRingOffsetMap[variant];
-        return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      &:after {\n        pointer-events: none;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        margin: calc(-", " - ", ");\n        border-radius: calc(", " + ", ");\n        box-shadow: ", " 0 0 0 2px\n          ", ";\n      }\n    "], ["\n      &:after {\n        pointer-events: none;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        margin: calc(-", " - ", ");\n        border-radius: calc(", " + ", ");\n        box-shadow: ", " 0 0 0 2px\n          ", ";\n      }\n    "])), offset, borderWidth, offset, radius_1.radius(borderRadius), isInset ? 'inset' : '', newPalette_1.palette2('interactive', 'f01'));
+        return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      &:after {\n        pointer-events: none;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        margin: calc(-", " - ", ");\n        border-radius: calc(", " + ", ");\n        box-shadow: ", " 0 0 0 2px\n          ", ";\n      }\n    "], ["\n      &:after {\n        pointer-events: none;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        margin: calc(-", " - ", ");\n        border-radius: calc(", " + ", ");\n        box-shadow: ", " 0 0 0 2px\n          ", ";\n      }\n    "])), offset, borderWidth, offset, (0, radius_1.radius)(borderRadius), isInset ? 'inset' : '', (0, newPalette_1.palette2)('interactive', 'f01'));
     }
     var _d = options.gapColor, gapColor = _d === void 0 ? 'neutral.b01' : _d;
-    return styled_components_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    box-shadow: 0 0 0 2px ", ",\n      0 0 0 4px ", ";\n  "], ["\n    box-shadow: 0 0 0 2px ", ",\n      0 0 0 4px ", ";\n  "])), newPalette_1.getParsePaletteColor(gapColor), newPalette_1.palette2('interactive', 'f01'));
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    box-shadow: 0 0 0 2px ", ",\n      0 0 0 4px ", ";\n  "], ["\n    box-shadow: 0 0 0 2px ", ",\n      0 0 0 4px ", ";\n  "])), (0, newPalette_1.getParsePaletteColor)(gapColor), (0, newPalette_1.palette2)('interactive', 'f01'));
 };
+exports.focusRing = focusRing;
 var templateObject_1, templateObject_2;

package/foundation/styles/focusVisible.d.ts

@@ -1,5 +1,6 @@
+import { radius } from './radius';
 export declare const focusVisible = "&.focus-visible, &[data-focus-visible-added]";
 export declare const focusWithin = "&:hover, &:focus-within";
 export declare const focusVisibleColor: import("./newPalette").PaletteReturnType;
-export declare const shadowBorder: (r?: "round" | "circle" | "sm" | "md" | "lg" | "xl" | "xxl" | "zero", color?: any, inset?: boolean, size?: number) => import("styled-components").FlattenInterpolation<any>[];
-export declare const focusVisibleShadowStyle: (r?: "round" | "circle" | "sm" | "md" | "lg" | "xl" | "xxl" | "zero" | undefined, color?: any, inset?: boolean, size?: number) => import("styled-components").FlattenInterpolation<any>[];
+export declare const shadowBorder: (r?: Parameters<typeof radius>[0], color?: any, inset?: boolean, size?: number) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("..").RcTheme>>;
+export declare const focusVisibleShadowStyle: (r?: Parameters<typeof radius>[0], color?: any, inset?: boolean, size?: number) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("..").RcTheme>>;

package/foundation/styles/focusVisible.js

@@ -1,22 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusVisibleShadowStyle = exports.shadowBorder = exports.focusVisibleColor = exports.focusWithin = exports.focusVisible = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../styled-components");
 var newPalette_1 = require("./newPalette");
 var radius_1 = require("./radius");
 exports.focusVisible = '&.focus-visible, &[data-focus-visible-added]';
 exports.focusWithin = '&:hover, &:focus-within';
-exports.focusVisibleColor = newPalette_1.palette2('interactive', 'f01');
-exports.shadowBorder = function (r, color, inset, size) {
+exports.focusVisibleColor = (0, newPalette_1.palette2)('interactive', 'f01');
+var shadowBorder = function (r, color, inset, size) {
     if (r === void 0) { r = 'zero'; }
     if (color === void 0) { color = exports.focusVisibleColor; }
     if (inset === void 0) { inset = true; }
     if (size === void 0) { size = 1; }
-    return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    box-shadow: ", " 0 0 0 ", "px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n  }\n"], ["\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    box-shadow: ", " 0 0 0 ", "px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n  }\n"])), inset ? 'inset' : '', size, color, radius_1.radius(r));
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    box-shadow: ", " 0 0 0 ", "px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n  }\n"], ["\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    box-shadow: ", " 0 0 0 ", "px ", ";\n    border-radius: ", ";\n    pointer-events: none;\n  }\n"])), inset ? 'inset' : '', size, color, (0, radius_1.radius)(r));
 };
-exports.focusVisibleShadowStyle = function (r, color, inset, size) {
+exports.shadowBorder = shadowBorder;
+var focusVisibleShadowStyle = function (r, color, inset, size) {
     if (inset === void 0) { inset = true; }
     if (size === void 0) { size = 1; }
-    return styled_components_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", " {\n    ", ";\n  }\n"], ["\n  ", " {\n    ", ";\n  }\n"])), exports.focusVisible, exports.shadowBorder(r, color, inset, size));
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", " {\n    ", ";\n  }\n"], ["\n  ", " {\n    ", ";\n  }\n"])), exports.focusVisible, (0, exports.shadowBorder)(r, color, inset, size));
 };
+exports.focusVisibleShadowStyle = focusVisibleShadowStyle;
 var templateObject_1, templateObject_2;

package/foundation/styles/lineClamp.d.ts

@@ -1,2 +1,2 @@
 /** lineClamp helper */
-export declare function lineClamp(lineNumber: number, maxHeight: number): import("styled-components").InterpolationValue[];
+export declare function lineClamp(lineNumber: number, maxHeight: number): import("styled-components").FlattenSimpleInterpolation;

package/foundation/styles/lineClamp.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.lineClamp = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../styled-components");
 var px_1 = require("./px");
 /** lineClamp helper */
 function lineClamp(lineNumber, maxHeight) {
-    return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    max-height: ", ";\n    word-break: break-word;\n  "], ["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    max-height: ", ";\n    word-break: break-word;\n  "])), lineNumber, px_1.px(maxHeight));
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    max-height: ", ";\n    word-break: break-word;\n  "], ["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    max-height: ", ";\n    word-break: break-word;\n  "])), lineNumber, (0, px_1.px)(maxHeight));
 }
 exports.lineClamp = lineClamp;
 var templateObject_1;

package/foundation/styles/newPalette.d.ts

@@ -1,7 +1,7 @@
 import { RcPalette, RcPaletteProp, RcThemeProps } from '../theme';
-declare type NU<T> = NonNullable<T>;
-declare type Pl = RcPalette;
-declare type PaletteReturnType = ({ theme }: RcThemeProps) => any;
+type NU<T> = NonNullable<T>;
+type Pl = RcPalette;
+type PaletteReturnType = ({ theme }: RcThemeProps) => any;
 /**
  * This is the new version palette, support five layer types palette color get,
  * ! Not support opacity, please use `setOpacity` to do that,

package/foundation/styles/newPalette.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.palette2 = exports.getParsePaletteColor = void 0;
 var tslib_1 = require("tslib");
 var parseColor_1 = require("../utils/parseColor");
 var opacity_1 = require("./opacity");
@@ -18,7 +19,7 @@ function palette2(category) {
     for (var _i = 1; _i < arguments.length; _i++) {
         keys[_i - 1] = arguments[_i];
     }
-    return getPaletteColor.apply(void 0, tslib_1.__spread([category], keys));
+    return getPaletteColor.apply(void 0, tslib_1.__spreadArray([category], tslib_1.__read(keys), false));
 }
 exports.palette2 = palette2;
 function getPaletteColor() {
@@ -41,7 +42,7 @@ function getPaletteColor() {
             // if type is the latest one, check is that to be number
             if (i === keys.length - 1) {
                 if (typeof curr === 'number') {
-                    return opacity_1.doAlpha(acc, curr, theme);
+                    return (0, opacity_1.doAlpha)(acc, curr, theme);
                 }
             }
             return acc == null ? '' : acc[curr];
@@ -50,7 +51,7 @@ function getPaletteColor() {
 }
 function getParsePaletteColor(color, defaultColor, useMain) {
     if (useMain === void 0) { useMain = true; }
-    var args = parseColor_1.parseColor(color, defaultColor, useMain);
+    var args = (0, parseColor_1.parseColor)(color, defaultColor, useMain);
     if (!args) {
         return function () { return null; };
     }
@@ -60,6 +61,6 @@ function getParsePaletteColor(color, defaultColor, useMain) {
     if (typeof args === 'function') {
         return args;
     }
-    return getPaletteColor.apply(void 0, tslib_1.__spread(args));
+    return getPaletteColor.apply(void 0, tslib_1.__spreadArray([], tslib_1.__read(args), false));
 }
 exports.getParsePaletteColor = getParsePaletteColor;

package/foundation/styles/nonStyleButton.d.ts

@@ -1,2 +1,2 @@
 /** reset browser button style */
-export declare function nonStyleButton(): import("styled-components").InterpolationValue[];
+export declare function nonStyleButton(): import("styled-components").FlattenSimpleInterpolation;

package/foundation/styles/nonStyleButton.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.nonStyleButton = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../styled-components");
 /** reset browser button style */
 function nonStyleButton() {
-    return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    background: none;\n    color: inherit;\n    border: none;\n    padding: 0;\n    font: inherit;\n    cursor: pointer;\n    outline: inherit;\n  "], ["\n    background: none;\n    color: inherit;\n    border: none;\n    padding: 0;\n    font: inherit;\n    cursor: pointer;\n    outline: inherit;\n  "])));
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    background: none;\n    color: inherit;\n    border: none;\n    padding: 0;\n    font: inherit;\n    cursor: pointer;\n    outline: inherit;\n  "], ["\n    background: none;\n    color: inherit;\n    border: none;\n    padding: 0;\n    font: inherit;\n    cursor: pointer;\n    outline: inherit;\n  "])));
 }
 exports.nonStyleButton = nonStyleButton;
 var templateObject_1;

package/foundation/styles/nonTouchHoverMedia.js

@@ -1,3 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.nonTouchHoverMedia = void 0;
 exports.nonTouchHoverMedia = '@media (hover: hover) and (pointer: fine)';

package/foundation/styles/opacity.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.doAlpha = exports.opacity = void 0;
 var styles_1 = require("@material-ui/core/styles");
 var utils_1 = require("../utils");
 /**
@@ -25,11 +26,11 @@ function doAlpha(color, opacity, theme) {
         ? opacity
         : theme.palette.action.hoverOpacity * opacity;
     try {
-        return styles_1.alpha(color, +alpha.toFixed(2));
+        return (0, styles_1.alpha)(color, +alpha.toFixed(2));
     }
     catch (error) {
         if (process.env.NODE_ENV !== 'production') {
-            utils_1.logInDev({
+            (0, utils_1.logInDev)({
                 component: 'setOpacity',
                 message: 'your color pass into setOpacity is error color, check your color again, please',
             });

package/foundation/styles/palette.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.lightAlpha = exports.setOpacity = exports.setAlpha = exports.palette = void 0;
 var tslib_1 = require("tslib");
 var get_1 = tslib_1.__importDefault(require("lodash/get"));
 var opacity_1 = require("./opacity");
@@ -22,19 +23,19 @@ function palette(name, sub, opacity) {
         var subArr = sub.toString().split('.');
         var color = sub ? theme.palette[name][sub] : theme.palette[name];
         if (subArr.length > 1) {
-            color = get_1.default(theme.palette[name], sub);
+            color = (0, get_1.default)(theme.palette[name], sub);
         }
         if (!opacity) {
             return color;
         }
-        return opacity_1.doAlpha(color, opacity, theme);
+        return (0, opacity_1.doAlpha)(color, opacity, theme);
     };
 }
 exports.palette = palette;
 function setAlpha(colorFn, opacity) {
     return function (_a) {
         var theme = _a.theme;
-        return opacity_1.doAlpha(colorFn({ theme: theme }), opacity, theme);
+        return (0, opacity_1.doAlpha)(colorFn({ theme: theme }), opacity, theme);
     };
 }
 exports.setAlpha = setAlpha;
@@ -44,7 +45,7 @@ function setOpacity(colorFn, opacityName, reverse) {
     return function (props) {
         var theme = props.theme;
         var currentOpacity = theme.opacity[opacityName];
-        return opacity_1.doAlpha(colorFn(props), reverse ? 1 - currentOpacity : currentOpacity, theme);
+        return (0, opacity_1.doAlpha)(colorFn(props), reverse ? 1 - currentOpacity : currentOpacity, theme);
     };
 }
 exports.setOpacity = setOpacity;

package/foundation/styles/paletteContrastText.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.paletteContrastText = void 0;
 /**
  * get current palette contrast text
  */

package/foundation/styles/px.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.px = void 0;
 /**
  * add px for values
  * px(1, 2, 3, 4); // returns: 1px 2px 3px 4px
@@ -10,6 +11,6 @@ function px() {
     for (var _i = 0; _i < arguments.length; _i++) {
         values[_i] = arguments[_i];
     }
-    return values.map(function (n) { return n + "px"; }).join(' ');
+    return values.map(function (n) { return "".concat(n, "px"); }).join(' ');
 }
 exports.px = px;

package/foundation/styles/radius.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.radius = void 0;
 /**
  * radius
  * @param values

package/foundation/styles/rippleEnter.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.rippleEnter = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../styled-components");
-exports.rippleEnter = function (theme) { return styled_components_1.keyframes(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  from {\n    transform: scale(0);\n    opacity: 0.1;\n  }\n  to {\n    transform: scale(1);\n    opacity: ", ";\n  }\n"], ["\n  from {\n    transform: scale(0);\n    opacity: 0.1;\n  }\n  to {\n    transform: scale(1);\n    opacity: ", ";\n  }\n"])), theme.palette.action.hoverOpacity * 2); };
+var rippleEnter = function (theme) { return (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  from {\n    transform: scale(0);\n    opacity: 0.1;\n  }\n  to {\n    transform: scale(1);\n    opacity: ", ";\n  }\n"], ["\n  from {\n    transform: scale(0);\n    opacity: 0.1;\n  }\n  to {\n    transform: scale(1);\n    opacity: ", ";\n  }\n"])), theme.palette.action.hoverOpacity * 2); };
+exports.rippleEnter = rippleEnter;
 var templateObject_1;

package/foundation/styles/rippleStyle.d.ts

@@ -1,3 +1,3 @@
 import { RcThemedStyled } from '../theme/theme.type';
 export declare const backgroundTransition: RcThemedStyled<{}, string>;
-export declare const rippleStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("../theme/theme.type").RcTheme>>[];
+export declare const rippleStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("../theme/theme.type").RcTheme>>;

package/foundation/styles/rippleStyle.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.rippleStyle = exports.backgroundTransition = void 0;
 var tslib_1 = require("tslib");
 var styled_components_1 = require("../styled-components");
 var newPalette_1 = require("./newPalette");
-exports.backgroundTransition = function (_a) {
+var backgroundTransition = function (_a) {
     var theme = _a.theme;
     return theme.transitions.create(['background'], {
         easing: theme.transitions.easing.easeInOut,
         duration: theme.transitions.duration.shortest,
     });
 };
-exports.rippleStyle = styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  transform: translate3d(0, 0, 0);\n  transition: ", ";\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    background-image: radial-gradient(\n      circle,\n      ", " 10%,\n      transparent 10.01%\n    );\n    background-repeat: no-repeat;\n    background-position: 50%;\n    transform: scale(10, 10);\n    opacity: 0;\n    transition: transform 0.5s ease-out, opacity 0.6s ease-in;\n  }\n\n  &:active:after {\n    transform: scale(0, 0);\n    opacity: 0.1;\n    transition: 0s;\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  transform: translate3d(0, 0, 0);\n  transition: ", ";\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    background-image: radial-gradient(\n      circle,\n      ", " 10%,\n      transparent 10.01%\n    );\n    background-repeat: no-repeat;\n    background-position: 50%;\n    transform: scale(10, 10);\n    opacity: 0;\n    transition: transform 0.5s ease-out, opacity 0.6s ease-in;\n  }\n\n  &:active:after {\n    transform: scale(0, 0);\n    opacity: 0.1;\n    transition: 0s;\n  }\n"])), exports.backgroundTransition, newPalette_1.palette2('neutral', 'b06'));
+exports.backgroundTransition = backgroundTransition;
+exports.rippleStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  transform: translate3d(0, 0, 0);\n  transition: ", ";\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    background-image: radial-gradient(\n      circle,\n      ", " 10%,\n      transparent 10.01%\n    );\n    background-repeat: no-repeat;\n    background-position: 50%;\n    transform: scale(10, 10);\n    opacity: 0;\n    transition: transform 0.5s ease-out, opacity 0.6s ease-in;\n  }\n\n  &:active:after {\n    transform: scale(0, 0);\n    opacity: 0.1;\n    transition: 0s;\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  transform: translate3d(0, 0, 0);\n  transition: ", ";\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    background-image: radial-gradient(\n      circle,\n      ", " 10%,\n      transparent 10.01%\n    );\n    background-repeat: no-repeat;\n    background-position: 50%;\n    transform: scale(10, 10);\n    opacity: 0;\n    transition: transform 0.5s ease-out, opacity 0.6s ease-in;\n  }\n\n  &:active:after {\n    transform: scale(0, 0);\n    opacity: 0.1;\n    transition: 0s;\n  }\n"])), exports.backgroundTransition, (0, newPalette_1.palette2)('neutral', 'b06'));
 var templateObject_1;

package/foundation/styles/shadows.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.shadows = void 0;
 /**
  * shadow
  * @param elevation 0 ~ 24 for different elevation shadow

package/foundation/styles/spacing.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.spacingUnit = exports.toSpacing = exports.spacing = void 0;
 var tslib_1 = require("tslib");
 var px_1 = require("./px");
 /**
@@ -14,7 +15,7 @@ function spacing() {
     return function (_a) {
         var theme = _a.theme;
         var unit = theme.spacing(1);
-        return px_1.px.apply(void 0, tslib_1.__spread(values.map(function (n) { return n * unit; })));
+        return px_1.px.apply(void 0, tslib_1.__spreadArray([], tslib_1.__read(values.map(function (n) { return n * unit; })), false));
     };
 }
 exports.spacing = spacing;

package/foundation/styles/typography.d.ts

@@ -21,5 +21,5 @@ declare function typography(
 /** name of token */
 name: RcTypographyKeys, 
 /** not contain `line-hight` style */
-fontOnly?: boolean): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("../theme/theme.type").RcTheme>>[];
+fontOnly?: boolean): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("../theme/theme.type").RcTheme>>;
 export { typography, typographyProp };