@ringcentral/juno 2.45.1 → 3.0.0-alpha.0

package/components/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RcPaletteProp } from '../../foundation';
-declare type RcDividerProps = {
+type RcDividerProps = {
     /** is that vertical */
     vertical?: boolean;
     /** size of divider */
@@ -14,34 +14,19 @@ declare type RcDividerProps = {
     /** component for render root */
     component?: React.ElementType;
 } & React.HTMLAttributes<HTMLHRElement>;
-declare const RcDivider: import("styled-components").StyledComponentClass<{
+declare const RcDivider: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
     /** is that vertical */
     vertical?: boolean | undefined;
     /** size of divider */
-    size?: "bold" | "default" | undefined;
+    size?: "default" | "bold" | undefined;
     /** divider color */
-    color?: (string & Record<never, never>) | "action.grayDark" | "action.grayLight" | "action.primary" | "avatar.ash" | "avatar.blueberry" | "avatar.brass" | "avatar.global" | "avatar.gold" | "avatar.lake" | "avatar.oasis" | "avatar.pear" | "avatar.persimmon" | "avatar.sage" | "avatar.tomato" | "content.brand" | "danger.b01" | "danger.b02" | "danger.b03" | "danger.b04" | "danger.f01" | "danger.f02" | "danger.f11" | "dialHeader.avatarBg" | "dialHeader.avatarIcon" | "dialHeader.bg" | "dialHeader.focusBorder" | "dialHeader.icon" | "dialHeader.text" | "dialHeader.textHint" | "disabled.b01" | "disabled.f01" | "disabled.f02" | "header.bgLeft" | "header.bgOverlay" | "header.bgOverlayDisabled" | "header.bgRight" | "header.border" | "header.divider" | "header.fabBg" | "header.fabIcon" | "header.focusBorder" | "header.icon" | "header.iconDisabled" | "header.text" | "header.textHint" | "highContrast" | "highlight.b01" | "highlight.b02" | "highlight.b03" | "highlight.f01" | "highlight.f02" | "informative.b01" | "informative.f01" | "informative.f02" | "interactive.b01" | "interactive.b02" | "interactive.f01" | "label.black02" | "label.blue01" | "label.blue02" | "label.green01" | "label.green02" | "label.orange01" | "label.orange02" | "label.purple01" | "label.purple02" | "label.red01" | "label.red02" | "label.teal01" | "label.teal02" | "label.yellow01" | "label.yellow02" | "nav.b01" | "nav.b02" | "nav.bookmark" | "nav.ctlDefault" | "nav.ctlSelected" | "nav.f01" | "nav.f02" | "nav.f03" | "nav.f04" | "nav.iconDefault" | "nav.iconSelected" | "nav.line" | "nav.mention" | "nav.menuBg" | "nav.menuText" | "neutral.b01" | "neutral.b02" | "neutral.b03" | "neutral.b04" | "neutral.b05" | "neutral.b06" | "neutral.elevation" | "neutral.f01" | "neutral.f02" | "neutral.f03" | "neutral.f04" | "neutral.f05" | "neutral.f06" | "neutral.f07" | "neutral.f11" | "neutral.l01" | "neutral.l02" | "neutral.l03" | "neutral.l04" | "neutral.transparent" | "presence.available" | "presence.busy" | "presence.invisible" | "subAction" | "success.b01" | "success.b02" | "success.b03" | "success.b04" | "success.b05" | "success.f01" | "success.f02" | "success.f11" | "tab.default" | "tab.selected" | "umi.bg" | "umi.mentioned" | "umi.text" | "warning.b01" | "warning.b02" | "warning.b03" | "warning.f01" | "warning.f02" | "warning.f11" | string[] | import("../../foundation/styles/newPalette").PaletteReturnType | undefined;
+    color?: RcPaletteProp | undefined;
     /** title on divider center, only work on horizontal */
     title?: string | undefined;
     /** title background color */
-    titleBgColor?: (string & Record<never, never>) | "action.grayDark" | "action.grayLight" | "action.primary" | "avatar.ash" | "avatar.blueberry" | "avatar.brass" | "avatar.global" | "avatar.gold" | "avatar.lake" | "avatar.oasis" | "avatar.pear" | "avatar.persimmon" | "avatar.sage" | "avatar.tomato" | "content.brand" | "danger.b01" | "danger.b02" | "danger.b03" | "danger.b04" | "danger.f01" | "danger.f02" | "danger.f11" | "dialHeader.avatarBg" | "dialHeader.avatarIcon" | "dialHeader.bg" | "dialHeader.focusBorder" | "dialHeader.icon" | "dialHeader.text" | "dialHeader.textHint" | "disabled.b01" | "disabled.f01" | "disabled.f02" | "header.bgLeft" | "header.bgOverlay" | "header.bgOverlayDisabled" | "header.bgRight" | "header.border" | "header.divider" | "header.fabBg" | "header.fabIcon" | "header.focusBorder" | "header.icon" | "header.iconDisabled" | "header.text" | "header.textHint" | "highContrast" | "highlight.b01" | "highlight.b02" | "highlight.b03" | "highlight.f01" | "highlight.f02" | "informative.b01" | "informative.f01" | "informative.f02" | "interactive.b01" | "interactive.b02" | "interactive.f01" | "label.black02" | "label.blue01" | "label.blue02" | "label.green01" | "label.green02" | "label.orange01" | "label.orange02" | "label.purple01" | "label.purple02" | "label.red01" | "label.red02" | "label.teal01" | "label.teal02" | "label.yellow01" | "label.yellow02" | "nav.b01" | "nav.b02" | "nav.bookmark" | "nav.ctlDefault" | "nav.ctlSelected" | "nav.f01" | "nav.f02" | "nav.f03" | "nav.f04" | "nav.iconDefault" | "nav.iconSelected" | "nav.line" | "nav.mention" | "nav.menuBg" | "nav.menuText" | "neutral.b01" | "neutral.b02" | "neutral.b03" | "neutral.b04" | "neutral.b05" | "neutral.b06" | "neutral.elevation" | "neutral.f01" | "neutral.f02" | "neutral.f03" | "neutral.f04" | "neutral.f05" | "neutral.f06" | "neutral.f07" | "neutral.f11" | "neutral.l01" | "neutral.l02" | "neutral.l03" | "neutral.l04" | "neutral.transparent" | "presence.available" | "presence.busy" | "presence.invisible" | "subAction" | "success.b01" | "success.b02" | "success.b03" | "success.b04" | "success.b05" | "success.f01" | "success.f02" | "success.f11" | "tab.default" | "tab.selected" | "umi.bg" | "umi.mentioned" | "umi.text" | "warning.b01" | "warning.b02" | "warning.b03" | "warning.f01" | "warning.f02" | "warning.f11" | string[] | import("../../foundation/styles/newPalette").PaletteReturnType | undefined;
+    titleBgColor?: RcPaletteProp | undefined;
     /** component for render root */
-    component?: "symbol" | "object" | "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "switch" | "table" | "style" | "clipPath" | "filter" | "mask" | "path" | "time" | "text" | React.ComponentClass<any, any> | React.FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "footer" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "map" | "mark" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "textPath" | "tspan" | "use" | "view" | undefined;
-} & React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<any>, import("../../foundation").RcTheme, Pick<{
-    /** is that vertical */
-    vertical?: boolean | undefined;
-    /** size of divider */
-    size?: "bold" | "default" | undefined;
-    /** divider color */
-    color?: (string & Record<never, never>) | "action.grayDark" | "action.grayLight" | "action.primary" | "avatar.ash" | "avatar.blueberry" | "avatar.brass" | "avatar.global" | "avatar.gold" | "avatar.lake" | "avatar.oasis" | "avatar.pear" | "avatar.persimmon" | "avatar.sage" | "avatar.tomato" | "content.brand" | "danger.b01" | "danger.b02" | "danger.b03" | "danger.b04" | "danger.f01" | "danger.f02" | "danger.f11" | "dialHeader.avatarBg" | "dialHeader.avatarIcon" | "dialHeader.bg" | "dialHeader.focusBorder" | "dialHeader.icon" | "dialHeader.text" | "dialHeader.textHint" | "disabled.b01" | "disabled.f01" | "disabled.f02" | "header.bgLeft" | "header.bgOverlay" | "header.bgOverlayDisabled" | "header.bgRight" | "header.border" | "header.divider" | "header.fabBg" | "header.fabIcon" | "header.focusBorder" | "header.icon" | "header.iconDisabled" | "header.text" | "header.textHint" | "highContrast" | "highlight.b01" | "highlight.b02" | "highlight.b03" | "highlight.f01" | "highlight.f02" | "informative.b01" | "informative.f01" | "informative.f02" | "interactive.b01" | "interactive.b02" | "interactive.f01" | "label.black02" | "label.blue01" | "label.blue02" | "label.green01" | "label.green02" | "label.orange01" | "label.orange02" | "label.purple01" | "label.purple02" | "label.red01" | "label.red02" | "label.teal01" | "label.teal02" | "label.yellow01" | "label.yellow02" | "nav.b01" | "nav.b02" | "nav.bookmark" | "nav.ctlDefault" | "nav.ctlSelected" | "nav.f01" | "nav.f02" | "nav.f03" | "nav.f04" | "nav.iconDefault" | "nav.iconSelected" | "nav.line" | "nav.mention" | "nav.menuBg" | "nav.menuText" | "neutral.b01" | "neutral.b02" | "neutral.b03" | "neutral.b04" | "neutral.b05" | "neutral.b06" | "neutral.elevation" | "neutral.f01" | "neutral.f02" | "neutral.f03" | "neutral.f04" | "neutral.f05" | "neutral.f06" | "neutral.f07" | "neutral.f11" | "neutral.l01" | "neutral.l02" | "neutral.l03" | "neutral.l04" | "neutral.transparent" | "presence.available" | "presence.busy" | "presence.invisible" | "subAction" | "success.b01" | "success.b02" | "success.b03" | "success.b04" | "success.b05" | "success.f01" | "success.f02" | "success.f11" | "tab.default" | "tab.selected" | "umi.bg" | "umi.mentioned" | "umi.text" | "warning.b01" | "warning.b02" | "warning.b03" | "warning.f01" | "warning.f02" | "warning.f11" | string[] | import("../../foundation/styles/newPalette").PaletteReturnType | undefined;
-    /** title on divider center, only work on horizontal */
-    title?: string | undefined;
-    /** title background color */
-    titleBgColor?: (string & Record<never, never>) | "action.grayDark" | "action.grayLight" | "action.primary" | "avatar.ash" | "avatar.blueberry" | "avatar.brass" | "avatar.global" | "avatar.gold" | "avatar.lake" | "avatar.oasis" | "avatar.pear" | "avatar.persimmon" | "avatar.sage" | "avatar.tomato" | "content.brand" | "danger.b01" | "danger.b02" | "danger.b03" | "danger.b04" | "danger.f01" | "danger.f02" | "danger.f11" | "dialHeader.avatarBg" | "dialHeader.avatarIcon" | "dialHeader.bg" | "dialHeader.focusBorder" | "dialHeader.icon" | "dialHeader.text" | "dialHeader.textHint" | "disabled.b01" | "disabled.f01" | "disabled.f02" | "header.bgLeft" | "header.bgOverlay" | "header.bgOverlayDisabled" | "header.bgRight" | "header.border" | "header.divider" | "header.fabBg" | "header.fabIcon" | "header.focusBorder" | "header.icon" | "header.iconDisabled" | "header.text" | "header.textHint" | "highContrast" | "highlight.b01" | "highlight.b02" | "highlight.b03" | "highlight.f01" | "highlight.f02" | "informative.b01" | "informative.f01" | "informative.f02" | "interactive.b01" | "interactive.b02" | "interactive.f01" | "label.black02" | "label.blue01" | "label.blue02" | "label.green01" | "label.green02" | "label.orange01" | "label.orange02" | "label.purple01" | "label.purple02" | "label.red01" | "label.red02" | "label.teal01" | "label.teal02" | "label.yellow01" | "label.yellow02" | "nav.b01" | "nav.b02" | "nav.bookmark" | "nav.ctlDefault" | "nav.ctlSelected" | "nav.f01" | "nav.f02" | "nav.f03" | "nav.f04" | "nav.iconDefault" | "nav.iconSelected" | "nav.line" | "nav.mention" | "nav.menuBg" | "nav.menuText" | "neutral.b01" | "neutral.b02" | "neutral.b03" | "neutral.b04" | "neutral.b05" | "neutral.b06" | "neutral.elevation" | "neutral.f01" | "neutral.f02" | "neutral.f03" | "neutral.f04" | "neutral.f05" | "neutral.f06" | "neutral.f07" | "neutral.f11" | "neutral.l01" | "neutral.l02" | "neutral.l03" | "neutral.l04" | "neutral.transparent" | "presence.available" | "presence.busy" | "presence.invisible" | "subAction" | "success.b01" | "success.b02" | "success.b03" | "success.b04" | "success.b05" | "success.f01" | "success.f02" | "success.f11" | "tab.default" | "tab.selected" | "umi.bg" | "umi.mentioned" | "umi.text" | "warning.b01" | "warning.b02" | "warning.b03" | "warning.f01" | "warning.f02" | "warning.f11" | string[] | import("../../foundation/styles/newPalette").PaletteReturnType | undefined;
-    /** component for render root */
-    component?: "symbol" | "object" | "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "switch" | "table" | "style" | "clipPath" | "filter" | "mask" | "path" | "time" | "text" | React.ComponentClass<any, any> | React.FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "footer" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "map" | "mark" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "textPath" | "tspan" | "use" | "view" | undefined;
-} & React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<any>, "ref" | "key" | "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "vertical" | "slot" | "title" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "component" | "titleBgColor"> & {
-    theme?: import("../../foundation").RcTheme | undefined;
-}>;
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+} & React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<any>>, import("../../foundation").RcTheme, {}, never>;
 export { RcDivider };
 export type { RcDividerProps };

package/components/Divider/Divider.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcDivider = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var foundation_1 = require("../../foundation");
 var styles_1 = require("./styles");
-var _RcDivider = react_1.forwardRef(function (inProps, ref) {
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDivider' });
+var _RcDivider = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcDivider' });
     var vertical = props.vertical, size = props.size, color = props.color, title = props.title, titleBgColor = props.titleBgColor, _a = props.component, ComponentProp = _a === void 0 ? 'hr' : _a, rest = tslib_1.__rest(props, ["vertical", "size", "color", "title", "titleBgColor", "component"]);
     return react_1.default.createElement(ComponentProp, tslib_1.__assign({ ref: ref, role: "separator" }, rest));
 });
-var RcDivider = foundation_1.styled(_RcDivider)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DividerStyle);
+var RcDivider = (0, foundation_1.styled)(_RcDivider)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DividerStyle);
 exports.RcDivider = RcDivider;
 RcDivider.displayName = 'RcDivider';
 RcDivider.defaultProps = {

package/components/Divider/styles/StyledDivider.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DividerStyle = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../foundation");
 var full = '100%';
-exports.DividerStyle = function (_a) {
+var DividerStyle = function (_a) {
     var vertical = _a.vertical, size = _a.size, color = _a.color, title = _a.title, titleBgColor = _a.titleBgColor;
-    var volume = (size === 'bold' ? 2 : 1) + "px";
-    return foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    position: relative;\n    margin: 0;\n    border: 0;\n    flex-shrink: 0;\n    overflow: initial;\n\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n\n    ", ";\n  "], ["\n    position: relative;\n    margin: 0;\n    border: 0;\n    flex-shrink: 0;\n    overflow: initial;\n\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n\n    ",
-        ";\n  "])), vertical ? volume : full, vertical ? full : volume, foundation_1.getParsePaletteColor(color, null, false), !(vertical || !title) && foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      &::after {\n        content: '", "';\n        ", ";\n        color: ", ";\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        padding: ", ";\n        transform: translate(-50%, -50%);\n        background-color: ", ";\n      }\n    "], ["\n      &::after {\n        content: '", "';\n        ", ";\n        color: ", ";\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        padding: ", ";\n        transform: translate(-50%, -50%);\n        background-color: ", ";\n      }\n    "])), title, foundation_1.typography('caption1'), foundation_1.palette2('neutral', 'f06'), foundation_1.spacing(0, 4), foundation_1.getParsePaletteColor(titleBgColor)));
+    var volume = "".concat(size === 'bold' ? 2 : 1, "px");
+    return (0, foundation_1.css)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    position: relative;\n    margin: 0;\n    border: 0;\n    flex-shrink: 0;\n    overflow: initial;\n\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n\n    ", ";\n  "], ["\n    position: relative;\n    margin: 0;\n    border: 0;\n    flex-shrink: 0;\n    overflow: initial;\n\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n\n    ", ";\n  "])), vertical ? volume : full, vertical ? full : volume, (0, foundation_1.getParsePaletteColor)(color, null, false), !(vertical || !title) && (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      &::after {\n        content: '", "';\n        ", ";\n        color: ", ";\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        padding: ", ";\n        transform: translate(-50%, -50%);\n        background-color: ", ";\n      }\n    "], ["\n      &::after {\n        content: '", "';\n        ", ";\n        color: ", ";\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        padding: ", ";\n        transform: translate(-50%, -50%);\n        background-color: ", ";\n      }\n    "])), title, (0, foundation_1.typography)('caption1'), (0, foundation_1.palette2)('neutral', 'f06'), (0, foundation_1.spacing)(0, 4), (0, foundation_1.getParsePaletteColor)(titleBgColor)));
 };
+exports.DividerStyle = DividerStyle;
 var templateObject_1, templateObject_2;

package/components/DnD/DragDropContext/DragDropContext.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
 import { DragDropContextProps } from 'react-beautiful-dnd';
-declare type RcDragDropContextProps = DragDropContextProps;
+type RcDragDropContextProps = DragDropContextProps;
 declare const RcDragDropContext: FunctionComponent<RcDragDropContextProps>;
 export { RcDragDropContext };
 export type { RcDragDropContextProps };

package/components/DnD/DragDropContext/DragDropContext.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcDragDropContext = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var react_beautiful_dnd_1 = require("react-beautiful-dnd");
 var foundation_1 = require("../../../foundation");
 var styles_1 = require("./styles");
 var RcDragDropContext = function (inProps) {
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDragDropContext' });
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcDragDropContext' });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(styles_1.GlobalDraggableStyle, null),
         react_1.default.createElement(react_beautiful_dnd_1.DragDropContext, tslib_1.__assign({}, props))));

package/components/DnD/DragDropContext/styles/StyledGlobalDraggable.d.ts

@@ -1 +1 @@
-export declare const GlobalDraggableStyle: import("styled-components").GlobalStyleClass<any, import("../../../../foundation").RcTheme>;
+export declare const GlobalDraggableStyle: import("styled-components").GlobalStyleComponent<any, import("../../../../foundation").RcTheme>;

package/components/DnD/DragDropContext/styles/StyledGlobalDraggable.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalDraggableStyle = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../foundation");
 var utils_1 = require("../../Draggable/utils");
-exports.GlobalDraggableStyle = foundation_1.createGlobalStyle(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  .", " {\n    &::before, &::after {\n      content: '';\n      opacity: 0;\n      transition: opacity .2s;\n    }\n  }\n\n  .", " {\n    &::before, &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      opacity: 1;\n    }\n\n    &::before {\n      background-color: ", ";\n      opacity: ", ";\n    }\n\n    &::after {\n      box-shadow: ", ";\n    }\n\n    background-color: ", " !important;\n    ", ";\n    opacity: ", " !important;\n    position: relative;\n  }\n"], ["\n  .", " {\n    &::before, &::after {\n      content: '';\n      opacity: 0;\n      transition: opacity .2s;\n    }\n  }\n\n  .", " {\n    &::before, &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      opacity: 1;\n    }\n\n    &::before {\n      background-color: ", ";\n      opacity: ", ";\n    }\n\n    &::after {\n      box-shadow: ", ";\n    }\n\n    background-color: ", " !important;\n    ", ";\n    opacity: ", " !important;\n    position: relative;\n  }\n"])), utils_1.RcDraggableClasses.root, utils_1.RcDraggableClasses.isDragging, foundation_1.palette2('action', 'grayLight'), foundation_1.opacity('16'), foundation_1.shadows('8'), foundation_1.palette2('neutral', 'elevation'), foundation_1.fakeBorder(), foundation_1.opacity('88'));
+exports.GlobalDraggableStyle = (0, foundation_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  .", " {\n    &::before, &::after {\n      content: '';\n      opacity: 0;\n      transition: opacity .2s;\n    }\n  }\n\n  .", " {\n    &::before, &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      opacity: 1;\n    }\n\n    &::before {\n      background-color: ", ";\n      opacity: ", ";\n    }\n\n    &::after {\n      box-shadow: ", ";\n    }\n\n    background-color: ", " !important;\n    ", ";\n    opacity: ", " !important;\n    position: relative;\n  }\n"], ["\n  .", " {\n    &::before, &::after {\n      content: '';\n      opacity: 0;\n      transition: opacity .2s;\n    }\n  }\n\n  .", " {\n    &::before, &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      opacity: 1;\n    }\n\n    &::before {\n      background-color: ", ";\n      opacity: ", ";\n    }\n\n    &::after {\n      box-shadow: ", ";\n    }\n\n    background-color: ", " !important;\n    ", ";\n    opacity: ", " !important;\n    position: relative;\n  }\n"])), utils_1.RcDraggableClasses.root, utils_1.RcDraggableClasses.isDragging, (0, foundation_1.palette2)('action', 'grayLight'), (0, foundation_1.opacity)('16'), (0, foundation_1.shadows)('8'), (0, foundation_1.palette2)('neutral', 'elevation'), (0, foundation_1.fakeBorder)(), (0, foundation_1.opacity)('88'));
 var templateObject_1;

package/components/DnD/DragHandle/DragHandle.d.ts

@@ -1,15 +1,13 @@
 import React from 'react';
 import { RcClassesProps } from '../../../foundation';
-declare type RcDragHandleClassesType = RcClassesProps<'root'>;
-declare type RcDragHandleProps = {
+type RcDragHandleClassesType = RcClassesProps<'root'>;
+type RcDragHandleProps = {
     className?: string;
+    children?: React.ReactNode;
 } & RcDragHandleClassesType;
-declare const RcDragHandle: import("styled-components").StyledComponentClass<{
+declare const RcDragHandle: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
     className?: string | undefined;
-} & RcClassesProps<"root"> & React.RefAttributes<any>, import("../../../foundation").RcTheme, Pick<{
-    className?: string | undefined;
-} & RcClassesProps<"root"> & React.RefAttributes<any>, "ref" | "key" | "className" | "classes"> & {
-    theme?: import("../../../foundation").RcTheme | undefined;
-}>;
+    children?: React.ReactNode;
+} & RcDragHandleClassesType & React.RefAttributes<any>>, import("../../../foundation").RcTheme, {}, never>;
 export { RcDragHandle };
 export type { RcDragHandleProps };

package/components/DnD/DragHandle/DragHandle.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcDragHandle = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var clsx_1 = tslib_1.__importDefault(require("clsx"));
@@ -9,13 +10,13 @@ var Icon_1 = require("../../Icon");
 var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var defaultChildren = react_1.default.createElement(Icon_1.RcIcon, { size: "xsmall", symbol: juno_icon_1.DragableArea });
-var _DragHandle = react_1.forwardRef(function (inProps, ref) {
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDragHandle' });
+var _DragHandle = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcDragHandle' });
     var _a = props.children, children = _a === void 0 ? defaultChildren : _a, className = props.className, rest = tslib_1.__rest(props, ["children", "className"]);
-    var ClassName = clsx_1.default(utils_1.RcDragHandleClasses.root, className);
+    var ClassName = (0, clsx_1.default)(utils_1.RcDragHandleClasses.root, className);
     return (react_1.default.createElement("div", tslib_1.__assign({}, rest, { className: ClassName, ref: ref }), children));
 });
-var RcDragHandle = foundation_1.styled(_DragHandle)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.dragHandleStyle);
+var RcDragHandle = (0, foundation_1.styled)(_DragHandle)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.dragHandleStyle);
 exports.RcDragHandle = RcDragHandle;
 RcDragHandle.defaultProps = {};
 RcDragHandle.displayName = 'RcDragHandle';

package/components/DnD/DragHandle/styles/StyledDragHandle.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.dragHandleStyle = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../foundation");
-exports.dragHandleStyle = function () {
-    return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    outline: none;\n    margin-right: 4px;\n    padding: 2px 0;\n\n    ", ";\n\n    ", " {\n      box-shadow: 0 0 0 1px ", ";\n      border-radius: ", ";\n    }\n  "], ["\n    outline: none;\n    margin-right: 4px;\n    padding: 2px 0;\n\n    ", ";\n\n    ", " {\n      box-shadow: 0 0 0 1px ", ";\n      border-radius: ", ";\n    }\n  "])), foundation_1.flexCenterStyle, foundation_1.focusVisible, foundation_1.focusVisibleColor, foundation_1.radius('sm'));
+var dragHandleStyle = function () {
+    return (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    outline: none;\n    margin-right: 4px;\n    padding: 2px 0;\n\n    ", ";\n\n    ", " {\n      box-shadow: 0 0 0 1px ", ";\n      border-radius: ", ";\n    }\n  "], ["\n    outline: none;\n    margin-right: 4px;\n    padding: 2px 0;\n\n    ", ";\n\n    ", " {\n      box-shadow: 0 0 0 1px ", ";\n      border-radius: ", ";\n    }\n  "])), foundation_1.flexCenterStyle, foundation_1.focusVisible, foundation_1.focusVisibleColor, (0, foundation_1.radius)('sm'));
 };
+exports.dragHandleStyle = dragHandleStyle;
 var templateObject_1;

package/components/DnD/DragHandle/utils/DragHandleUtils.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcDragHandleClasses = void 0;
 var foundation_1 = require("../../../../foundation");
-exports.RcDragHandleClasses = foundation_1.RcClasses(['root'], 'RcDraggable');
+exports.RcDragHandleClasses = (0, foundation_1.RcClasses)(['root'], 'RcDraggable');

package/components/DnD/Draggable/Draggable.d.ts

@@ -1,26 +1,21 @@
 import React from 'react';
 import { Direction, DraggableProps, DraggableProvided, DraggableRubric, DraggableStateSnapshot } from 'react-beautiful-dnd';
 import { RcClassesProps } from '../../../foundation';
-declare type RcDraggableProvided = DraggableProvided & {
+type RcDraggableProvided = DraggableProvided & {
     draggableProps: {
         className?: string;
     };
 };
-declare type RcDraggableStateSnapshot = DraggableStateSnapshot;
-declare type RcDraggableRubric = DraggableRubric;
-declare type RcDraggableChildrenFn = (provided: RcDraggableProvided, snapshot: RcDraggableStateSnapshot, rubric: RcDraggableRubric) => React.ReactElement<HTMLElement>;
-declare type RcDraggableProps = {
+type RcDraggableStateSnapshot = DraggableStateSnapshot;
+type RcDraggableRubric = DraggableRubric;
+type RcDraggableChildrenFn = (provided: RcDraggableProvided, snapshot: RcDraggableStateSnapshot, rubric: RcDraggableRubric) => React.ReactElement<HTMLElement>;
+type RcDraggableProps = {
     directionOnly?: Direction;
     children: RcDraggableChildrenFn;
 } & RcClassesProps<'root' | 'isDragging'> & Omit<DraggableProps, 'children'>;
-declare const RcDraggable: import("styled-components").StyledComponentClass<{
-    directionOnly?: "horizontal" | "vertical" | undefined;
+declare const RcDraggable: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
+    directionOnly?: Direction | undefined;
     children: RcDraggableChildrenFn;
-} & RcClassesProps<"root" | "isDragging"> & Pick<DraggableProps, "draggableId" | "index" | "isDragDisabled" | "disableInteractiveElementBlocking" | "shouldRespectForcePress"> & React.RefAttributes<any>, import("../../../foundation").RcTheme, Pick<{
-    directionOnly?: "horizontal" | "vertical" | undefined;
-    children: RcDraggableChildrenFn;
-} & RcClassesProps<"root" | "isDragging"> & Pick<DraggableProps, "draggableId" | "index" | "isDragDisabled" | "disableInteractiveElementBlocking" | "shouldRespectForcePress"> & React.RefAttributes<any>, "ref" | "key" | "children" | "classes" | "draggableId" | "index" | "isDragDisabled" | "disableInteractiveElementBlocking" | "shouldRespectForcePress" | "directionOnly"> & {
-    theme?: import("../../../foundation").RcTheme | undefined;
-}>;
+} & RcClassesProps<"root" | "isDragging"> & Omit<DraggableProps, "children"> & React.RefAttributes<any>>, import("../../../foundation").RcTheme, {}, never>;
 export { RcDraggable };
 export type { RcDraggableProps, RcDraggableProvided, RcDraggableRubric, RcDraggableStateSnapshot, };

package/components/DnD/Draggable/Draggable.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcDraggable = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var clsx_1 = tslib_1.__importDefault(require("clsx"));
 var react_beautiful_dnd_1 = require("react-beautiful-dnd");
 var foundation_1 = require("../../../foundation");
 var utils_1 = require("./utils");
-var _RcDraggable = react_1.forwardRef(function (inProps, ref) {
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDraggable' });
+var _RcDraggable = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcDraggable' });
     var classes = props.classes, children = props.children, directionOnly = props.directionOnly, rest = tslib_1.__rest(props, ["classes", "children", "directionOnly"]);
     return (react_1.default.createElement(react_beautiful_dnd_1.Draggable, tslib_1.__assign({}, rest, { ref: ref }), function (provided, snapshot) {
         var args = [];
@@ -15,14 +16,14 @@ var _RcDraggable = react_1.forwardRef(function (inProps, ref) {
             args[_i - 2] = arguments[_i];
         }
         var preStyle = provided.draggableProps.style;
-        var directionOnlyStyle = utils_1.getDirectionOnlyItemStyle(directionOnly, preStyle);
+        var directionOnlyStyle = (0, utils_1.getDirectionOnlyItemStyle)(directionOnly, preStyle);
         provided.draggableProps.style = directionOnlyStyle;
-        provided.draggableProps['className'] = clsx_1.default(utils_1.RcDraggableClasses.root, classes === null || classes === void 0 ? void 0 : classes.root, snapshot.isDragging &&
-            clsx_1.default(utils_1.RcDraggableClasses.isDragging, classes === null || classes === void 0 ? void 0 : classes.isDragging));
-        return children.apply(void 0, tslib_1.__spread([provided, snapshot], args));
+        provided.draggableProps['className'] = (0, clsx_1.default)(utils_1.RcDraggableClasses.root, classes === null || classes === void 0 ? void 0 : classes.root, snapshot.isDragging &&
+            (0, clsx_1.default)(utils_1.RcDraggableClasses.isDragging, classes === null || classes === void 0 ? void 0 : classes.isDragging));
+        return children.apply(void 0, tslib_1.__spreadArray([provided, snapshot], tslib_1.__read(args), false));
     }));
 });
-var RcDraggable = foundation_1.styled(_RcDraggable)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+var RcDraggable = (0, foundation_1.styled)(_RcDraggable)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
 exports.RcDraggable = RcDraggable;
 RcDraggable.defaultProps = {};
 RcDraggable.displayName = 'RcDraggable';

package/components/DnD/Draggable/utils/DraggableUtils.d.ts

@@ -1,2 +1,3 @@
+import { Direction, DraggableProvidedDraggableProps } from 'react-beautiful-dnd';
 export declare const RcDraggableClasses: Partial<import("../../../../foundation").UnitMap<"root" | "isDragging", any>>;
-export declare const getDirectionOnlyItemStyle: (direction?: "horizontal" | "vertical" | undefined, style?: import("react-beautiful-dnd").DraggingStyle | import("react-beautiful-dnd").NotDraggingStyle | undefined) => import("react-beautiful-dnd").DraggingStyle | import("react-beautiful-dnd").NotDraggingStyle | undefined;
+export declare const getDirectionOnlyItemStyle: (direction?: Direction, style?: DraggableProvidedDraggableProps['style']) => DraggableProvidedDraggableProps['style'];

package/components/DnD/Draggable/utils/DraggableUtils.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDirectionOnlyItemStyle = exports.RcDraggableClasses = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../foundation");
-exports.RcDraggableClasses = foundation_1.RcClasses(['root', 'isDragging'], 'RcDraggable');
-exports.getDirectionOnlyItemStyle = function (direction, style) {
+exports.RcDraggableClasses = (0, foundation_1.RcClasses)(['root', 'isDragging'], 'RcDraggable');
+var getDirectionOnlyItemStyle = function (direction, style) {
     if (!direction) {
         return style;
     }
@@ -14,7 +15,8 @@ exports.getDirectionOnlyItemStyle = function (direction, style) {
         style.transform.match(/translate\((-?\d+)px,\s+(-?\d+)px\)/);
     if (currentTransformMatch) {
         var transform = parseInt(currentTransformMatch[isVertical ? 2 : 1], 10);
-        overrideStyles['transform'] = "translate(" + (isVertical ? 0 : transform) + "px, " + (isVertical ? transform : 0) + "px)";
+        overrideStyles['transform'] = "translate(".concat(isVertical ? 0 : transform, "px, ").concat(isVertical ? transform : 0, "px)");
     }
     return tslib_1.__assign(tslib_1.__assign({}, style), overrideStyles);
 };
+exports.getDirectionOnlyItemStyle = getDirectionOnlyItemStyle;

package/components/DnD/Droppable/Droppable.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
 import { DroppableProps, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
-declare type RcDroppableProps = DroppableProps;
-declare type RcDroppableProvided = DroppableProvided;
-declare type RcDroppableStateSnapshot = DroppableStateSnapshot;
-declare const RcDroppable: import("styled-components").StyledComponentClass<DroppableProps & React.RefAttributes<any>, import("../../../foundation").RcTheme, Pick<DroppableProps & React.RefAttributes<any>, "ref" | "key" | "type" | "direction" | "mode" | "children" | "droppableId" | "isDropDisabled" | "isCombineEnabled" | "ignoreContainerClipping" | "renderClone" | "getContainerForClone"> & {
-    theme?: import("../../../foundation").RcTheme | undefined;
-}>;
+type RcDroppableProps = DroppableProps;
+type RcDroppableProvided = DroppableProvided;
+type RcDroppableStateSnapshot = DroppableStateSnapshot;
+declare const RcDroppable: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<DroppableProps & React.RefAttributes<any>>, import("../../../foundation").RcTheme, {}, never>;
 export { RcDroppable };
 export type { RcDroppableProps, RcDroppableProvided, RcDroppableStateSnapshot };

package/components/DnD/Droppable/Droppable.js

@@ -1,21 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcDroppable = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_beautiful_dnd_1 = require("react-beautiful-dnd");
 var foundation_1 = require("../../../foundation");
-var _RcDroppable = react_1.forwardRef(function (inProps, ref) {
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDroppable' });
+var _RcDroppable = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcDroppable' });
     var children = props.children, rest = tslib_1.__rest(props, ["children"]);
     return (react_1.default.createElement(react_beautiful_dnd_1.Droppable, tslib_1.__assign({}, rest, { ref: ref }), function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
-        return children.apply(void 0, tslib_1.__spread(args));
+        return children.apply(void 0, tslib_1.__spreadArray([], tslib_1.__read(args), false));
     }));
 });
-var RcDroppable = foundation_1.styled(_RcDroppable)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+var RcDroppable = (0, foundation_1.styled)(_RcDroppable)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
 exports.RcDroppable = RcDroppable;
 RcDroppable.defaultProps = {};
 RcDroppable.displayName = 'RcDroppable';

package/components/Downshift/Downshift.d.ts

@@ -24,8 +24,8 @@ export interface RcDownshiftRenderOptionState {
     /** if that item is group title, that will have that `expandIconProps` */
     expandIconProps?: Partial<RcIconButtonProps>;
 }
-export declare type RcDownshiftCloseReason = 'toggleInput' | 'escape' | 'select-option' | 'blur';
-declare type RcDownshiftProps<T extends RcDownshiftSelectedItem = RcDownshiftSelectedItem> = {
+export type RcDownshiftCloseReason = 'toggleInput' | 'escape' | 'select-option' | 'blur';
+type RcDownshiftProps<T extends RcDownshiftSelectedItem = RcDownshiftSelectedItem> = {
     /**
      * display mode,
      * when be `autocomplete`, that `multiple` will be `false`
@@ -362,7 +362,7 @@ declare type RcDownshiftProps<T extends RcDownshiftSelectedItem = RcDownshiftSel
     /** @deprecated TextField props */
     TextFieldProps?: Pick<RcTextFieldProps, 'required' | 'inputProps'>;
 };
-declare type RcDownshiftRef<T = RcDownshiftSelectedItem> = {
+type RcDownshiftRef<T = RcDownshiftSelectedItem> = {
     /** get current active index */
     getActiveIndex: () => number;
     /** set current active index */