@ringcentral/juno 3.0.0-alpha.3 → 3.0.0-alpha.4

package/components/VirtualizedMenu/VirtualizedMenu.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { RcBaseProps } from '../../foundation';
 import { RcMenuProps } from '../Menu';
 import { RcVirtualizedMenuListProps } from './VirtualizedMenuList';
@@ -6,6 +5,6 @@ type RcVirtualizedMenuProps = {
     /** props for apply on inner `MenuList` */
     MenuListProps?: RcVirtualizedMenuListProps;
 } & RcBaseProps<RcMenuProps, 'MenuListProps'>;
-declare const RcVirtualizedMenu: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<RcVirtualizedMenuProps, "ref"> & React.RefAttributes<any>>, import("../../foundation").RcTheme, {}, never>;
+declare const RcVirtualizedMenu: any;
 export { RcVirtualizedMenu };
 export type { RcVirtualizedMenuProps };

package/components/VirtualizedMenu/VirtualizedMenuList.d.ts

@@ -31,6 +31,6 @@ type RcVirtualizedMenuListProps = {
      */
     VirtuosoProps?: RcBaseProps<ComponentProps<typeof Virtuoso>, 'data' | 'itemContent' | 'totalCount' | 'components' | 'overscan'>;
 } & RcMenuListProps;
-declare const RcVirtualizedMenuList: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<RcVirtualizedMenuListProps, "ref"> & React.RefAttributes<any>>, import("../../foundation").RcTheme, {}, never>;
+declare const RcVirtualizedMenuList: any;
 export { RcVirtualizedMenuList };
 export type { RcVirtualizedMenuListProps, RcVirtualizedMenuListRef };

package/components/VirtualizedMenu/styles/StyledMenuPadding.d.ts

@@ -1,7 +1,2 @@
 export declare const menuListBoundaryPadding = 8;
-type StyledMenuListPaddingProps = {
-    /** that element height */
-    height: number;
-};
-export declare const StyledMenuListPadding: import("styled-components").StyledComponent<"div", import("../../../foundation").RcTheme, StyledMenuListPaddingProps, never>;
-export {};
+export declare const StyledMenuListPadding: any;

package/components/Virtuoso/react-virtuoso/Virtuoso.d.ts

@@ -7008,7 +7008,7 @@ export declare const List: React.ForwardRefExoticComponent<{} & {
         itemsRendered: "itemsRendered";
         groupIndices: "groupIndices";
     };
-}>>>, usePublisher: <K extends "data" | "log" | "sizes" | "gap" | "scrollHeight" | "scrollTop" | "scrollBy" | "scrollIntoView" | "scrollTo" | "propsReady" | "logLevel" | "scrollContainerState" | "viewportHeight" | "headerHeight" | "fixedHeaderHeight" | "fixedFooterHeight" | "footerHeight" | "smoothScrollTargetReached" | "statefulScrollTop" | "deviation" | "scrollingInProgress" | "groupIndices" | "totalCount" | "sizeRanges" | "firstItemIndex" | "statefulTotalCount" | "trackItemSizes" | "itemSize" | "scrollToIndex" | "topListHeight" | "isScrolling" | "isAtTop" | "isAtBottom" | "atBottomThreshold" | "atBottomState" | "atTopStateChange" | "atBottomStateChange" | "scrollDirection" | "atTopThreshold" | "scrollVelocity" | "lastJumpDueToItemResize" | "didMount" | "scrolledToInitialItem" | "initialTopMostItemIndex" | "followOutput" | "autoscrollToBottom" | "groupCounts" | "topItemsIndexes" | "listBoundary" | "overscan" | "increaseViewportBy" | "visibleRange" | "listState" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "initialItemCount" | "isSeeking" | "scrollSeekConfiguration" | "scrollSeekRangeChanged" | "topItemCount" | "totalListHeight" | "totalListHeightChanged" | "initialScrollTop" | "alignToBottom" | "paddingTopAddition" | "useWindowScroll" | "customScrollParent" | "windowScrollContainerState" | "windowViewportRect" | "windowScrollTo" | "getState" | "restoreStateFrom" | "fixedItemHeight" | "defaultItemHeight" | "context" | "components" | "itemContent" | "computeItemKey" | "headerFooterTag" | "scrollerRef" | "groupContent" | "EmptyPlaceholder" | "ScrollSeekPlaceholder" | "FooterComponent" | "HeaderComponent" | "TopItemListComponent" | "ListComponent" | "ItemComponent" | "GroupComponent" | "ScrollerComponent">(key: K) => (value: {
+}>>>, usePublisher: <K extends "data" | "log" | "sizes" | "gap" | "propsReady" | "logLevel" | "scrollContainerState" | "scrollTop" | "viewportHeight" | "headerHeight" | "fixedHeaderHeight" | "fixedFooterHeight" | "footerHeight" | "scrollHeight" | "smoothScrollTargetReached" | "scrollTo" | "scrollBy" | "statefulScrollTop" | "deviation" | "scrollingInProgress" | "groupIndices" | "totalCount" | "sizeRanges" | "firstItemIndex" | "statefulTotalCount" | "trackItemSizes" | "itemSize" | "scrollToIndex" | "topListHeight" | "isScrolling" | "isAtTop" | "isAtBottom" | "atBottomThreshold" | "atBottomState" | "atTopStateChange" | "atBottomStateChange" | "scrollDirection" | "atTopThreshold" | "scrollVelocity" | "lastJumpDueToItemResize" | "didMount" | "scrolledToInitialItem" | "initialTopMostItemIndex" | "followOutput" | "autoscrollToBottom" | "groupCounts" | "topItemsIndexes" | "listBoundary" | "overscan" | "increaseViewportBy" | "visibleRange" | "listState" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "initialItemCount" | "isSeeking" | "scrollSeekConfiguration" | "scrollSeekRangeChanged" | "topItemCount" | "totalListHeight" | "totalListHeightChanged" | "initialScrollTop" | "alignToBottom" | "paddingTopAddition" | "useWindowScroll" | "customScrollParent" | "windowScrollContainerState" | "windowViewportRect" | "windowScrollTo" | "scrollIntoView" | "getState" | "restoreStateFrom" | "fixedItemHeight" | "defaultItemHeight" | "context" | "components" | "itemContent" | "computeItemKey" | "headerFooterTag" | "scrollerRef" | "groupContent" | "EmptyPlaceholder" | "ScrollSeekPlaceholder" | "FooterComponent" | "HeaderComponent" | "TopItemListComponent" | "ListComponent" | "ItemComponent" | "GroupComponent" | "ScrollerComponent">(key: K) => (value: {
     context: u.StatefulStream<unknown>;
     itemContent: u.StatefulStream<ItemContent<any, any> | GroupItemContent<any, any>>;
     groupContent: u.StatefulStream<GroupContent<any>>;
@@ -7142,7 +7142,7 @@ export declare const List: React.ForwardRefExoticComponent<{} & {
     fixedItemHeight: u.StatefulStream<number | undefined>;
     defaultItemHeight: u.StatefulStream<number | undefined>;
     gap: u.StatefulStream<number>;
-}[K] extends u.Stream<infer R> ? R : never) => void, useEmitterValue: <K extends "data" | "log" | "sizes" | "gap" | "scrollHeight" | "scrollTop" | "scrollBy" | "scrollIntoView" | "scrollTo" | "propsReady" | "logLevel" | "scrollContainerState" | "viewportHeight" | "headerHeight" | "fixedHeaderHeight" | "fixedFooterHeight" | "footerHeight" | "smoothScrollTargetReached" | "statefulScrollTop" | "deviation" | "scrollingInProgress" | "groupIndices" | "totalCount" | "sizeRanges" | "firstItemIndex" | "statefulTotalCount" | "trackItemSizes" | "itemSize" | "scrollToIndex" | "topListHeight" | "isScrolling" | "isAtTop" | "isAtBottom" | "atBottomThreshold" | "atBottomState" | "atTopStateChange" | "atBottomStateChange" | "scrollDirection" | "atTopThreshold" | "scrollVelocity" | "lastJumpDueToItemResize" | "didMount" | "scrolledToInitialItem" | "initialTopMostItemIndex" | "followOutput" | "autoscrollToBottom" | "groupCounts" | "topItemsIndexes" | "listBoundary" | "overscan" | "increaseViewportBy" | "visibleRange" | "listState" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "initialItemCount" | "isSeeking" | "scrollSeekConfiguration" | "scrollSeekRangeChanged" | "topItemCount" | "totalListHeight" | "totalListHeightChanged" | "initialScrollTop" | "alignToBottom" | "paddingTopAddition" | "useWindowScroll" | "customScrollParent" | "windowScrollContainerState" | "windowViewportRect" | "windowScrollTo" | "getState" | "restoreStateFrom" | "fixedItemHeight" | "defaultItemHeight" | "context" | "components" | "itemContent" | "computeItemKey" | "headerFooterTag" | "scrollerRef" | "groupContent" | "EmptyPlaceholder" | "ScrollSeekPlaceholder" | "FooterComponent" | "HeaderComponent" | "TopItemListComponent" | "ListComponent" | "ItemComponent" | "GroupComponent" | "ScrollerComponent", V = {
+}[K] extends u.Stream<infer R> ? R : never) => void, useEmitterValue: <K extends "data" | "log" | "sizes" | "gap" | "propsReady" | "logLevel" | "scrollContainerState" | "scrollTop" | "viewportHeight" | "headerHeight" | "fixedHeaderHeight" | "fixedFooterHeight" | "footerHeight" | "scrollHeight" | "smoothScrollTargetReached" | "scrollTo" | "scrollBy" | "statefulScrollTop" | "deviation" | "scrollingInProgress" | "groupIndices" | "totalCount" | "sizeRanges" | "firstItemIndex" | "statefulTotalCount" | "trackItemSizes" | "itemSize" | "scrollToIndex" | "topListHeight" | "isScrolling" | "isAtTop" | "isAtBottom" | "atBottomThreshold" | "atBottomState" | "atTopStateChange" | "atBottomStateChange" | "scrollDirection" | "atTopThreshold" | "scrollVelocity" | "lastJumpDueToItemResize" | "didMount" | "scrolledToInitialItem" | "initialTopMostItemIndex" | "followOutput" | "autoscrollToBottom" | "groupCounts" | "topItemsIndexes" | "listBoundary" | "overscan" | "increaseViewportBy" | "visibleRange" | "listState" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "initialItemCount" | "isSeeking" | "scrollSeekConfiguration" | "scrollSeekRangeChanged" | "topItemCount" | "totalListHeight" | "totalListHeightChanged" | "initialScrollTop" | "alignToBottom" | "paddingTopAddition" | "useWindowScroll" | "customScrollParent" | "windowScrollContainerState" | "windowViewportRect" | "windowScrollTo" | "scrollIntoView" | "getState" | "restoreStateFrom" | "fixedItemHeight" | "defaultItemHeight" | "context" | "components" | "itemContent" | "computeItemKey" | "headerFooterTag" | "scrollerRef" | "groupContent" | "EmptyPlaceholder" | "ScrollSeekPlaceholder" | "FooterComponent" | "HeaderComponent" | "TopItemListComponent" | "ListComponent" | "ItemComponent" | "GroupComponent" | "ScrollerComponent", V = {
     context: u.StatefulStream<unknown>;
     itemContent: u.StatefulStream<ItemContent<any, any> | GroupItemContent<any, any>>;
     groupContent: u.StatefulStream<GroupContent<any>>;
@@ -7276,7 +7276,7 @@ export declare const List: React.ForwardRefExoticComponent<{} & {
     fixedItemHeight: u.StatefulStream<number | undefined>;
     defaultItemHeight: u.StatefulStream<number | undefined>;
     gap: u.StatefulStream<number>;
-}[K] extends u.StatefulStream<infer R> ? R : never>(key: K) => V, useEmitter: <K extends "data" | "log" | "sizes" | "gap" | "scrollHeight" | "scrollTop" | "scrollBy" | "scrollIntoView" | "scrollTo" | "propsReady" | "logLevel" | "scrollContainerState" | "viewportHeight" | "headerHeight" | "fixedHeaderHeight" | "fixedFooterHeight" | "footerHeight" | "smoothScrollTargetReached" | "statefulScrollTop" | "deviation" | "scrollingInProgress" | "groupIndices" | "totalCount" | "sizeRanges" | "firstItemIndex" | "statefulTotalCount" | "trackItemSizes" | "itemSize" | "scrollToIndex" | "topListHeight" | "isScrolling" | "isAtTop" | "isAtBottom" | "atBottomThreshold" | "atBottomState" | "atTopStateChange" | "atBottomStateChange" | "scrollDirection" | "atTopThreshold" | "scrollVelocity" | "lastJumpDueToItemResize" | "didMount" | "scrolledToInitialItem" | "initialTopMostItemIndex" | "followOutput" | "autoscrollToBottom" | "groupCounts" | "topItemsIndexes" | "listBoundary" | "overscan" | "increaseViewportBy" | "visibleRange" | "listState" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "initialItemCount" | "isSeeking" | "scrollSeekConfiguration" | "scrollSeekRangeChanged" | "topItemCount" | "totalListHeight" | "totalListHeightChanged" | "initialScrollTop" | "alignToBottom" | "paddingTopAddition" | "useWindowScroll" | "customScrollParent" | "windowScrollContainerState" | "windowViewportRect" | "windowScrollTo" | "getState" | "restoreStateFrom" | "fixedItemHeight" | "defaultItemHeight" | "context" | "components" | "itemContent" | "computeItemKey" | "headerFooterTag" | "scrollerRef" | "groupContent" | "EmptyPlaceholder" | "ScrollSeekPlaceholder" | "FooterComponent" | "HeaderComponent" | "TopItemListComponent" | "ListComponent" | "ItemComponent" | "GroupComponent" | "ScrollerComponent", V = {
+}[K] extends u.StatefulStream<infer R> ? R : never>(key: K) => V, useEmitter: <K extends "data" | "log" | "sizes" | "gap" | "propsReady" | "logLevel" | "scrollContainerState" | "scrollTop" | "viewportHeight" | "headerHeight" | "fixedHeaderHeight" | "fixedFooterHeight" | "footerHeight" | "scrollHeight" | "smoothScrollTargetReached" | "scrollTo" | "scrollBy" | "statefulScrollTop" | "deviation" | "scrollingInProgress" | "groupIndices" | "totalCount" | "sizeRanges" | "firstItemIndex" | "statefulTotalCount" | "trackItemSizes" | "itemSize" | "scrollToIndex" | "topListHeight" | "isScrolling" | "isAtTop" | "isAtBottom" | "atBottomThreshold" | "atBottomState" | "atTopStateChange" | "atBottomStateChange" | "scrollDirection" | "atTopThreshold" | "scrollVelocity" | "lastJumpDueToItemResize" | "didMount" | "scrolledToInitialItem" | "initialTopMostItemIndex" | "followOutput" | "autoscrollToBottom" | "groupCounts" | "topItemsIndexes" | "listBoundary" | "overscan" | "increaseViewportBy" | "visibleRange" | "listState" | "endReached" | "startReached" | "rangeChanged" | "itemsRendered" | "initialItemCount" | "isSeeking" | "scrollSeekConfiguration" | "scrollSeekRangeChanged" | "topItemCount" | "totalListHeight" | "totalListHeightChanged" | "initialScrollTop" | "alignToBottom" | "paddingTopAddition" | "useWindowScroll" | "customScrollParent" | "windowScrollContainerState" | "windowViewportRect" | "windowScrollTo" | "scrollIntoView" | "getState" | "restoreStateFrom" | "fixedItemHeight" | "defaultItemHeight" | "context" | "components" | "itemContent" | "computeItemKey" | "headerFooterTag" | "scrollerRef" | "groupContent" | "EmptyPlaceholder" | "ScrollSeekPlaceholder" | "FooterComponent" | "HeaderComponent" | "TopItemListComponent" | "ListComponent" | "ItemComponent" | "GroupComponent" | "ScrollerComponent", V = {
     context: u.StatefulStream<unknown>;
     itemContent: u.StatefulStream<ItemContent<any, any> | GroupItemContent<any, any>>;
     groupContent: u.StatefulStream<GroupContent<any>>;

package/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,2 +1,2 @@
-declare const RcVisuallyHidden: import("styled-components").StyledComponent<"span", import("../../foundation").RcTheme, {}, never>;
+declare const RcVisuallyHidden: any;
 export { RcVisuallyHidden };

package/es6/components/Avatar/styles/StyledPresenceWrapper.js

@@ -8,9 +8,9 @@ export var StyledPresenceWrapper = styled.div(templateObject_1 || (templateObjec
     return vertical;
 }, function (_a) {
     var horizontal = _a.horizontal;
-    return (horizontal === 'right' ? '' : '-');
+    return horizontal === 'right' ? '' : '-';
 }, function (_a) {
     var vertical = _a.vertical;
-    return (vertical === 'bottom' ? '' : '-');
+    return vertical === 'bottom' ? '' : '-';
 });
 var templateObject_1;

package/es6/components/Forms/Picker/DatePicker/styles/StyledDatePickerHeader.js

@@ -5,9 +5,9 @@ import { RcIconButtonClasses } from '../../../../Buttons/IconButton/utils';
 import { RcIcon } from '../../../../Icon';
 import { textColor } from '../utils';
 var monthInactiveStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &,\n  ", " {\n    color: ", ";\n  }\n"], ["\n  &,\n  ", " {\n    color: ", ";\n  }\n"])), RcIcon, focusVisibleColor);
-var StyledCurrentMonth = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"], ["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(", "deg);\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"])), flexCenterStyle, spacing(5), textColor, typography('body2'), radius('sm'), spacing(1, 0, 1, 1), focusVisibleShadowStyle('lg', undefined, undefined, 2), RcIcon, spacing(2), function (_a) {
+var StyledCurrentMonth = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(\n      ", "deg\n    );\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"], ["\n  background: none;\n  border: none;\n  cursor: pointer;\n  outline: inherit;\n\n  ", ";\n  position: relative;\n  cursor: pointer;\n  margin-left: ", ";\n  color: ", ";\n  ", ";\n  border-radius: ", ";\n\n  padding: ", ";\n\n  ", ";\n\n  ", " {\n    margin-left: ", ";\n    transform: rotate(\n      ", "deg\n    );\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n  }\n\n  ", " {\n    &:hover {\n      ", ";\n    }\n  }\n"])), flexCenterStyle, spacing(5), textColor, typography('body2'), radius('sm'), spacing(1, 0, 1, 1), focusVisibleShadowStyle('lg', undefined, undefined, 2), RcIcon, spacing(2), function (_a) {
     var view = _a.view;
-    return (view === 'day' ? '0' : '180');
+    return view === 'day' ? '0' : '180';
 }, palette2('neutral', 'f04'), focusVisible, monthInactiveStyle, nonTouchHoverMedia, monthInactiveStyle);
 var SwitchHeaderWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", "\n"])), function (_a) {
     var size = _a.size;
@@ -18,7 +18,7 @@ var SwitchHeaderWrapper = styled.div(templateObject_4 || (templateObject_4 = __m
 });
 var SwitchHeaderButtonWrapper = styled(RcIconButtonGroup)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  display: ", ";\n  justify-content: flex-end;\n  padding-right: 12px;\n\n  ", "\n"], ["\n  flex: 1;\n  display: ", ";\n  justify-content: flex-end;\n  padding-right: 12px;\n\n  ", "\n"])), function (_a) {
     var view = _a.view;
-    return (view === 'day' ? 'flex' : 'none');
+    return view === 'day' ? 'flex' : 'none';
 }, function (_a) {
     var size = _a.size;
     if (size === 'small') {

package/es6/components/Forms/Picker/TimePicker/styles/StyledSelectionItem.js

@@ -1,6 +1,6 @@
 import { __makeTemplateObject } from "tslib";
 import { spacing, styled, typography } from '../../../../../foundation';
-import { StyledTimeIconButton } from './StyledTimeIconButton';
+import { StyledTimeIconButton, } from './StyledTimeIconButton';
 export var StyledSelectionItem = styled(StyledTimeIconButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  && {\n    ", ";\n    /* when itemLength is 4 which makes it to become two line, so add padding for it. */\n    margin: ", ";\n  }\n"], ["\n  && {\n    ", ";\n    /* when itemLength is 4 which makes it to become two line, so add padding for it. */\n    margin: ", ";\n  }\n"])), typography('body1'), function (_a) {
     var itemLength = _a.itemLength, wrapperSize = _a.wrapperSize;
     return spacing(wrapperSize === 'small' && itemLength === 4 ? 2 : 1);

package/es6/components/PopupBox/PopupBox.js

@@ -26,7 +26,9 @@ var _RcPopupBox = forwardRef(function (inProps, ref) {
             React.createElement(RcDialogTitle, __assign({ "data-test-automation-id": 'DialogTitle' }, TitleProps), title),
             React.createElement(RcDialogContent, __assign({ "data-test-automation-id": 'DialogContent' }, ContentProps), typeof children === 'string' ? (React.createElement(RcDialogContentText, null, children)) : (children)),
             footer !== null && (React.createElement(RcDialogActions, __assign({ "data-test-automation-id": 'DialogActions' }, ActionsProps), footer || (React.createElement(React.Fragment, null,
-                cancelButtonText && (React.createElement(RcButton, __assign({ fullWidth: isXsmall, variant: "text", onClick: function (e) { return onCancel === null || onCancel === void 0 ? void 0 : onCancel(e, 'cancelClick'); }, "data-test-automation-id": "DialogCancelButton", disabled: loading }, cancelButtonProps), cancelButtonText)),
+                cancelButtonText && (React.createElement(RcButton, __assign({ fullWidth: isXsmall, variant: "text", onClick: function (e) {
+                        return onCancel === null || onCancel === void 0 ? void 0 : onCancel(e, 'cancelClick');
+                    }, "data-test-automation-id": "DialogCancelButton", disabled: loading }, cancelButtonProps), cancelButtonText)),
                 confirmButtonText && (React.createElement(RcButton, __assign({ fullWidth: isXsmall, onClick: onConfirm, variant: "contained", "data-test-automation-id": "DialogOKButton", disabled: loading, loading: loading }, confirmButtonProps), confirmButtonText)))))))));
 });
 /**

package/es6/foundation/styled-components.js

@@ -1,4 +1,5 @@
 /* eslint-disable import/no-duplicates */
+// @ts-ignore - styled-components 5.x type import workaround
 import * as styledComponents from 'styled-components';
 import { useTheme } from '@material-ui/core/styles';
 var _a = styledComponents, styled = _a.default, css = _a.css, keyframes = _a.keyframes, createGlobalStyle = _a.createGlobalStyle, withTheme = _a.withTheme, 

package/foundation/hooks/useFocusInside/useFocusInside.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 /**
  * non size for just render hidden element
  */
-export declare const RcFocusInside: import("styled-components").StyledComponent<"span", import("../..").RcTheme, React.HTMLAttributes<HTMLSpanElement>, never>;
+export declare const RcFocusInside: any;
 export type useFocusInsideParams = {
     /**
      * the container that should move focus inside witch `[data-focusable="true"]`

package/foundation/styled-components.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 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';
 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>;
+declare const styled: ThemedStyledComponentsModule<RcTheme>, css: ThemedStyledComponentsModule<RcTheme>, keyframes: ThemedStyledComponentsModule<RcTheme>, createGlobalStyle: ThemedStyledComponentsModule<RcTheme>, withTheme: ThemedStyledComponentsModule<RcTheme>, StyleSheetManager: ThemedStyledComponentsModule<RcTheme>, ThemeProvider: ThemedStyledComponentsModule<RcTheme>, ThemeConsumer: ThemedStyledComponentsModule<RcTheme>;
 type Dependencies = {
     dependencies?: (React.ComponentType | ((props: any) => JSX.Element))[];
 };

package/foundation/styled-components.js

@@ -3,6 +3,7 @@ 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 */
+// @ts-ignore - styled-components 5.x type import workaround
 var styledComponents = tslib_1.__importStar(require("styled-components"));
 var styles_1 = require("@material-ui/core/styles");
 var _a = styledComponents, styled = _a.default, css = _a.css, keyframes = _a.keyframes, createGlobalStyle = _a.createGlobalStyle, withTheme = _a.withTheme, 

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").GlobalStyleComponent<{}, import("../..").RcTheme>;
+export declare const RcGlobalScrollBarStyle: any;

package/foundation/styles/ellipsis.d.ts

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

package/foundation/styles/fakeBorder.d.ts

@@ -19,5 +19,5 @@ export type FakeBorderOption = {
 };
 export declare const fakeBorder: ({ pseudo, inset, radius, size, color, allowTransparent, }?: FakeBorderOption) => ({ theme }: {
     theme?: RcTheme | undefined;
-}) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<RcTheme>> | undefined;
+}) => any;
 export {};

package/foundation/styles/flexCenter.d.ts

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

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").FlattenSimpleInterpolation;
+export declare const flexWidth: (width: LiteralUnion<'auto'>) => any;

package/foundation/styles/focusRing.d.ts

@@ -26,4 +26,4 @@ export 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) => any;

package/foundation/styles/focusVisible.d.ts

@@ -2,5 +2,5 @@ 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?: 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>>;
+export declare const shadowBorder: (r?: Parameters<typeof radius>[0], color?: any, inset?: boolean, size?: number) => any;
+export declare const focusVisibleShadowStyle: (r?: Parameters<typeof radius>[0], color?: any, inset?: boolean, size?: number) => any;

package/foundation/styles/lineClamp.d.ts

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

package/foundation/styles/nonStyleButton.d.ts

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

package/foundation/styles/rippleEnter.d.ts

@@ -1,2 +1,2 @@
 import { RcTheme } from '../theme/theme.type';
-export declare const rippleEnter: (theme: RcTheme) => import("styled-components").Keyframes;
+export declare const rippleEnter: (theme: RcTheme) => any;

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: any;

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): any;
 export { typography, typographyProp };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.4",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",