@webiny/ui 5.23.1 → 5.25.0-beta.0

package/TopAppBar/TopAppBarTitle.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
-import * as React from "react";
+import React from "react";
 import { TopAppBarTitle as RmwcTopAppBarTitle } from "@rmwc/top-app-bar";
 
 var TopAppBarTitle = function TopAppBarTitle(props) {

package/TopAppBar/TopAppBarTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TopAppBarTitle.tsx"],"names":["React","TopAppBarTitle","RmwcTopAppBarTitle","props","children","rest"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACIC,cAAc,IAAIC,kBADtB,QAGO,mBAHP;;AAYA,IAAMD,cAAc,GAAG,SAAjBA,cAAiB,CAACE,KAAD,EAAgC;AACnD,MAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;AAAA,MAAqBC,IAArB,4BAA8BF,KAA9B;;AACA,sBAAO,oBAAC,kBAAD,EAAwBE,IAAxB,EAA+BD,QAA/B,CAAP;AACH,CAHD;;AAKA,SAASH,cAAT","sourcesContent":["import React from \"react\";\nimport {\n    TopAppBarTitle as RmwcTopAppBarTitle,\n    TopAppBarTitleProps as RmwcTopAppBarTitleProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarTitleProps = RmwcTopAppBarTitleProps & {\n    /**\n     * Element children\n     */\n    children: React.ReactNode[] | React.ReactNode;\n};\n\nconst TopAppBarTitle = (props: TopAppBarTitleProps) => {\n    const { children, ...rest } = props;\n    return <RmwcTopAppBarTitle {...rest}>{children}</RmwcTopAppBarTitle>;\n};\n\nexport { TopAppBarTitle };\n"]}

package/TopAppBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["export * from \"./TopAppBar\";\nexport * from \"./TopAppBarPrimary\";\nexport * from \"./TopAppBarSecondary\";\nexport * from \"./TopAppBarSection\";\nexport * from \"./TopAppBarTitle\";\nexport * from \"./TopAppBarNavigationIcon\";\nexport * from \"./TopAppBarActionItem\";\n"]}

package/TopProgressBar/TopProgressBar.d.ts

@@ -1,15 +1,15 @@
-import * as React from "react";
+import React from "react";
 import nprogress from "nprogress";
 import "./style.scss";
-export declare type TopProgressBarRender = {
+export interface TopProgressBarRender {
     start: () => void;
     finish: () => void;
-    nprogress: nprogress;
-};
-export declare type TopProgressBarProps = {
+    nprogress: typeof nprogress;
+}
+export interface TopProgressBarProps {
     /**
      * Elements that require top loading bar to be shown.
      */
     children: (params: TopProgressBarRender) => React.ReactElement;
-};
-export declare const TopProgressBar: (props: TopProgressBarProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+}
+export declare const TopProgressBar: (props: TopProgressBarProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/TopProgressBar/TopProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TopProgressBar.tsx"],"names":["nprogress","TopProgressBar","props","children","start","finish","done"],"mappings":"AACA,OAAOA,SAAP,MAAsB,WAAtB;AACA;AAeA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAgC;AAC1D,SAAOA,KAAK,CAACC,QAAN,CAAe;AAClBC,IAAAA,KAAK,EAAEJ,SAAS,CAACI,KADC;AAElBC,IAAAA,MAAM,EAAEL,SAAS,CAACM,IAFA;AAGlBN,IAAAA,SAAS,EAATA;AAHkB,GAAf,CAAP;AAKH,CANM","sourcesContent":["import React from \"react\";\nimport nprogress from \"nprogress\";\nimport \"./style.scss\";\n\nexport interface TopProgressBarRender {\n    start: () => void;\n    finish: () => void;\n    nprogress: typeof nprogress;\n}\n\nexport interface TopProgressBarProps {\n    /**\n     * Elements that require top loading bar to be shown.\n     */\n    children: (params: TopProgressBarRender) => React.ReactElement;\n}\n\nexport const TopProgressBar = (props: TopProgressBarProps) => {\n    return props.children({\n        start: nprogress.start,\n        finish: nprogress.done,\n        nprogress\n    });\n};\n"]}

package/TopProgressBar/TopProgressBar.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
 import readme from "./../TopProgressBar/README.md";

package/TopProgressBar/TopProgressBar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TopProgressBar.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","ButtonPrimary","TopProgressBar","story","module","add","start","finish","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AACA,SAASC,aAAT;AACA,SAASC,cAAT;AAEA,IAAMC,KAAK,GAAGT,SAAS,CAAC,2BAAD,EAA8BU,MAA9B,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcL,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,cAAD,QACK;AAAA,QAAGM,KAAH,QAAGA,KAAH;AAAA,QAAUC,MAAV,QAAUA,MAAV;AAAA,wBACG,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,aAAD;AAAe,MAAA,OAAO,EAAED;AAAxB,eADJ,uBAGI,oBAAC,aAAD;AAAe,MAAA,OAAO,EAAEC;AAAxB,cAHJ,CADH;AAAA,GADL,CADJ,CADJ,eAYI,oBAAC,gBAAD,gcAZJ,CAFJ,CADJ;AA8BH,CAjCL,EAkCI;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACP,cAAD;AAAd;AAAR,CAlCJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../TopProgressBar/README.md\";\nimport { ButtonPrimary } from \"./../Button\";\nimport { TopProgressBar } from \"./TopProgressBar\";\n\nconst story = storiesOf(\"Components/TopProgressBar\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <TopProgressBar>\n                            {({ start, finish }) => (\n                                <React.Fragment>\n                                    <ButtonPrimary onClick={start}>Start</ButtonPrimary>\n                                    &nbsp;\n                                    <ButtonPrimary onClick={finish}>Done</ButtonPrimary>\n                                </React.Fragment>\n                            )}\n                        </TopProgressBar>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <TopProgressBar>\n                        {({start, done}) => (\n                            <React.Fragment>\n                                <ButtonPrimary onClick={start}>Start</ButtonPrimary>\n                                <ButtonPrimary onClick={done}>Done</ButtonPrimary>\n                            </React.Fragment>\n                        )}\n                    </TopProgressBar>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [TopProgressBar] } }\n);\n"]}

package/TopProgressBar/hoc/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["default","withTopProgressBar"],"mappings":"AAAA,SAASA,OAAO,IAAIC,kBAApB","sourcesContent":["export { default as withTopProgressBar } from \"./withTopProgressBar\";\n"]}

package/TopProgressBar/hoc/withTopProgressBar.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
+import React from "react";
 declare const withTopProgressBar: () => (BaseComponent: React.ComponentType<any>) => (props: any) => JSX.Element;
 export default withTopProgressBar;

package/TopProgressBar/hoc/withTopProgressBar.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { TopProgressBar } from "..";
 
 var withTopProgressBar = function withTopProgressBar() {

package/TopProgressBar/hoc/withTopProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["withTopProgressBar.tsx"],"names":["React","TopProgressBar","withTopProgressBar","BaseComponent","WithTopProgressBar","props","start","finish","nprogress"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,cAAT,QAA+B,IAA/B;;AAEA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC7B,SAAO,UAACC,aAAD,EAA6C;AAChD,QAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;AACvC,0BACI,oBAAC,cAAD,QACK;AAAA,YAAGC,KAAH,QAAGA,KAAH;AAAA,YAAUC,MAAV,QAAUA,MAAV;AAAA,YAAkBC,SAAlB,QAAkBA,SAAlB;AAAA,4BACG,oBAAC,aAAD,oBACQH,KADR;AAEI,UAAA,mBAAmB,EAAEC,KAFzB;AAGI,UAAA,oBAAoB,EAAEC,MAH1B;AAII,UAAA,SAAS,EAAEC;AAJf,WADH;AAAA,OADL,CADJ;AAYH,KAbD;;AAeA,WAAOJ,kBAAP;AACH,GAjBD;AAkBH,CAnBD;;AAqBA,eAAeF,kBAAf","sourcesContent":["import React from \"react\";\nimport { TopProgressBar } from \"..\";\n\nconst withTopProgressBar = () => {\n    return (BaseComponent: React.ComponentType<any>) => {\n        const WithTopProgressBar = (props: any) => {\n            return (\n                <TopProgressBar>\n                    {({ start, finish, nprogress }) => (\n                        <BaseComponent\n                            {...props}\n                            startTopProgressBar={start}\n                            finishTopProgressBar={finish}\n                            nprogress={nprogress}\n                        />\n                    )}\n                </TopProgressBar>\n            );\n        };\n\n        return WithTopProgressBar;\n    };\n};\n\nexport default withTopProgressBar;\n"]}

package/TopProgressBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA","sourcesContent":["export * from \"./TopProgressBar\";\n"]}

package/Typography/Typography.d.ts

@@ -1,13 +1,13 @@
-import * as React from "react";
+import React from "react";
 import { TypographyProps as RmwcTypographyProps } from "@rmwc/typography";
-declare type TypographyProps = RmwcTypographyProps & {
+export interface TypographyProps extends RmwcTypographyProps {
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
     tag?: string;
-};
+}
 /**
  * Use Ripple component to display a list of choices, once the handler is triggered.
  */
-declare const Typography: (props: TypographyProps) => JSX.Element;
+declare const Typography: React.FC<TypographyProps>;
 export { Typography };

package/Typography/Typography.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Typography as RwmcTypography } from "@rmwc/typography";
 
 /**

package/Typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Typography.tsx"],"names":["React","Typography","RwmcTypography","props","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACIC,UAAU,IAAIC,cADlB,QAGO,kBAHP;;AAYA;AACA;AACA;AACA,IAAMD,UAAqC,GAAG,SAAxCA,UAAwC,CAAAE,KAAK,EAAI;AACnD,sBAAO,oBAAC,cAAD,EAAoBA,KAApB,EAA4BA,KAAK,CAACC,QAAlC,CAAP;AACH,CAFD;;AAIA,SAASH,UAAT","sourcesContent":["import React from \"react\";\nimport {\n    Typography as RwmcTypography,\n    TypographyProps as RmwcTypographyProps\n} from \"@rmwc/typography\";\n\nexport interface TypographyProps extends RmwcTypographyProps {\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    tag?: string;\n}\n\n/**\n * Use Ripple component to display a list of choices, once the handler is triggered.\n */\nconst Typography: React.FC<TypographyProps> = props => {\n    return <RwmcTypography {...props}>{props.children}</RwmcTypography>;\n};\n\nexport { Typography };\n"]}

package/Typography/Typography.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
 import readme from "./README.md";

package/Typography/Typography.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Typography.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","Typography","story","module","add","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAQA,OAAOC,MAAP;AACA,SAASC,UAAT;AAEA,IAAMC,KAAK,GAAGR,SAAS,CAAC,uBAAD,EAA0BS,MAA1B,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcJ,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,mBAAD,qBACI,6CACI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBADJ,CADJ,eAII,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBADJ,CAJJ,eAOI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBADJ,CAPJ,eAUI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBADJ,CAVJ,eAaI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBADJ,CAbJ,eAgBI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBADJ,CAhBJ,eAmBI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBADJ,CAnBJ,eAsBI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBADJ,CAtBJ,eAyBI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,aADJ,CAzBJ,eA4BI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,aADJ,CA5BJ,eA+BI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,eADJ,CA/BJ,eAkCI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,cADJ,CAlCJ,eAqCI,6CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,gBADJ,CArCJ,CADJ,CADJ,eA4CI,oBAAC,gBAAD,qBACI,8CACI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBADJ,eAEI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBAFJ,eAGI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBAHJ,eAII,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBAJJ,eAKI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBALJ,eAMI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBANJ,eAOI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBAPJ,eAQI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,iBARJ,eASI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,aATJ,eAUI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,aAVJ,eAWI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,eAXJ,eAYI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,cAZJ,eAaI,oBAAC,UAAD;AAAY,IAAA,GAAG,EAAC;AAAhB,gBAbJ,CADJ,CA5CJ,CAFJ,CADJ;AAmEH,CAtEL,EAuEI;AAAEK,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACL,UAAD;AAAd;AAAR,CAvEJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\n\nimport readme from \"./README.md\";\nimport { Typography } from \"./Typography\";\n\nconst story = storiesOf(\"Components/Typography\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Typography styles\"}>\n                    <StorySandboxExample>\n                        <ul>\n                            <li>\n                                <Typography use=\"headline1\">headline1</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"headline2\">headline2</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"headline3\">headline3</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"headline4\">headline4</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"headline5\">headline5</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"headline6\">headline6</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"subtitle1\">subtitle1</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"subtitle2\">subtitle2</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"body1\">body1</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"body2\">body2</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"caption\">caption</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"button\">button</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"overline\">overline</Typography>\n                            </li>\n                        </ul>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <div>\n                            <Typography use=\"headline1\">headline1</Typography>\n                            <Typography use=\"headline2\">headline2</Typography>\n                            <Typography use=\"headline3\">headline3</Typography>\n                            <Typography use=\"headline4\">headline4</Typography>\n                            <Typography use=\"headline5\">headline5</Typography>\n                            <Typography use=\"headline6\">headline6</Typography>\n                            <Typography use=\"subtitle1\">subtitle1</Typography>\n                            <Typography use=\"subtitle2\">subtitle2</Typography>\n                            <Typography use=\"body1\">body1</Typography>\n                            <Typography use=\"body2\">body2</Typography>\n                            <Typography use=\"caption\">caption</Typography>\n                            <Typography use=\"button\">button</Typography>\n                            <Typography use=\"overline\">overline</Typography>\n                        </div>\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Typography] } }\n);\n"]}

package/Typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA","sourcesContent":["export * from \"./Typography\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/ui",
-	"version": "5.23.1",
+	"version": "5.25.0-beta.0",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -14,13 +14,13 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@babel/runtime": "7.16.7",
-		"@editorjs/editorjs": "2.22.3",
+		"@babel/runtime": "7.17.2",
+		"@editorjs/editorjs": "2.23.2",
 		"@emotion/core": "10.3.1",
 		"@emotion/styled": "10.3.0",
 		"@material/base": "3.1.0",
 		"@material/textfield": "3.2.0",
-		"@rmwc/base": "5.7.2",
+		"@rmwc/base": "file:./rmwc/base",
 		"@rmwc/button": "5.7.2",
 		"@rmwc/checkbox": "5.7.2",
 		"@rmwc/chip": "5.7.2",
@@ -54,10 +54,13 @@
 		"dot-prop-immutable": "2.1.1",
 		"downshift": "2.2.3",
 		"emotion": "10.0.17",
+		"focus-trap": "5.1.0",
+		"hyperform": "0.9.23",
 		"keycode": "2.2.1",
 		"load-script": "1.0.0",
 		"lodash": "4.17.21",
 		"material-components-web": "3.2.0",
+		"mutation-observer": "1.0.3",
 		"nprogress": "0.2.0",
 		"nuka-carousel": "4.7.1",
 		"rc-tooltip": "3.7.3",
@@ -81,11 +84,18 @@
 		"@storybook/addon-knobs": "^5.0.5",
 		"@storybook/addon-links": "^5.0.5",
 		"@storybook/react": "^5.2.8",
-		"@webiny/cli": "^5.23.1",
-		"@webiny/form": "^5.23.1",
-		"@webiny/project-utils": "^5.23.1",
-		"@webiny/storybook-utils": "^5.23.1",
-		"@webiny/validation": "^5.23.1",
+		"@testing-library/react": "^12.1.2",
+		"@types/classnames": "^2.2.7",
+		"@types/nprogress": "^0.2.0",
+		"@types/rc-tooltip": "^3.7.2",
+		"@types/react-custom-scrollbars": "^4.0.10",
+		"@types/react-transition-group": "^4.4.4",
+		"@types/shortid": "^0.0.29",
+		"@webiny/cli": "^5.25.0-beta.0",
+		"@webiny/form": "^5.25.0-beta.0",
+		"@webiny/project-utils": "^5.25.0-beta.0",
+		"@webiny/storybook-utils": "^5.25.0-beta.0",
+		"@webiny/validation": "^5.25.0-beta.0",
 		"babel-loader": "^8.0.0-beta.6",
 		"babel-plugin-emotion": "^9.2.8",
 		"execa": "^5.0.0",
@@ -94,13 +104,12 @@
 		"raw-loader": "^0.5.1",
 		"react-docgen": "^5.0.0",
 		"react-docgen-typescript-loader": "^3.6.0",
-		"react-testing-library": "^8.0.1",
 		"regenerator-runtime": "^0.13.2",
 		"rimraf": "^3.0.2",
 		"sass": "^1.38.0",
 		"sass-loader": "^12.1.0",
 		"ttypescript": "^1.5.13",
-		"typescript": "^4.1.3",
+		"typescript": "4.5.5",
 		"webpack": "^4.46.0"
 	},
 	"peerDependencies": {
@@ -133,5 +142,5 @@
 			]
 		}
 	},
-	"gitHead": "a726d09d2647d13e5a4f376cef23463564ef7ca0"
+	"gitHead": "2d3e7833575e88fde77d84e5490e746933a5ec28"
 }

package/rmwc/base/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 James Friedman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/rmwc/base/README.md

@@ -0,0 +1,3 @@
+# RMWC Base module
+
+This module contains core functionality shared between all RMWC components.

package/rmwc/base/code/component.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+import * as RMWC from '@rmwc/types';
+import * as React from 'react';
+import { DeprecateT } from './utils/deprecation';
+declare type ClassNamesInputT = ((props: any) => Array<string | undefined | null | {
+    [className: string]: boolean | undefined | string | number;
+}>) | string[];
+interface ComponentFactoryOpts<Props> {
+    displayName: string;
+    classNames?: ClassNamesInputT;
+    tag?: RMWC.TagT;
+    deprecate?: DeprecateT;
+    consumeProps?: string[];
+    defaultProps?: any & Partial<RMWC.ComponentProps & Props>;
+    render?: (props: any, ref: React.Ref<any>, tag: RMWC.TagT) => React.ReactElement<any>;
+}
+export declare const componentFactory: <P extends {}>({ displayName, classNames, tag: defaultTag, deprecate, defaultProps, consumeProps, render }: ComponentFactoryOpts<P>) => React.ComponentType<RMWC.MergeInterfacesT<P, RMWC.ComponentProps>>;
+export {};

package/rmwc/base/code/component.js

@@ -0,0 +1,163 @@
+/* eslint-disable */
+"use strict";
+var __assign =
+    (this && this.__assign) ||
+    function () {
+        __assign =
+            Object.assign ||
+            function (t) {
+                for (var s, i = 1, n = arguments.length; i < n; i++) {
+                    s = arguments[i];
+                    for (var p in s) {
+                        if (Object.prototype.hasOwnProperty.call(s, p)) {
+                            t[p] = s[p];
+                        }
+                    }
+                }
+                return t;
+            };
+        return __assign.apply(this, arguments);
+    };
+var __rest =
+    (this && this.__rest) ||
+    function (s, e) {
+        var t = {};
+        for (var p in s) {
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) {
+                t[p] = s[p];
+            }
+        }
+        if (s != null && typeof Object.getOwnPropertySymbols === "function") {
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) {
+                    t[p[i]] = s[p[i]];
+                }
+            }
+        }
+        return t;
+    };
+var __read =
+    (this && this.__read) ||
+    function (o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) {
+            return o;
+        }
+        var i = m.call(o),
+            r,
+            ar = [],
+            e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
+                ar.push(r.value);
+            }
+        } catch (error) {
+            e = { error: error };
+        } finally {
+            try {
+                if (r && !r.done && (m = i["return"])) {
+                    m.call(i);
+                }
+            } finally {
+                if (e) {
+                    throw e.error;
+                }
+            }
+        }
+        return ar;
+    };
+var __spread =
+    (this && this.__spread) ||
+    function () {
+        for (var ar = [], i = 0; i < arguments.length; i++) {
+            ar = ar.concat(__read(arguments[i]));
+        }
+        return ar;
+    };
+var __importStar =
+    (this && this.__importStar) ||
+    function (mod) {
+        if (mod && mod.__esModule) {
+            return mod;
+        }
+        var result = {};
+        if (mod != null) {
+            for (var k in mod) {
+                if (Object.hasOwnProperty.call(mod, k)) {
+                    result[k] = mod[k];
+                }
+            }
+        }
+        result["default"] = mod;
+        return result;
+    };
+var __importDefault =
+    (this && this.__importDefault) ||
+    function (mod) {
+        return mod && mod.__esModule ? mod : { default: mod };
+    };
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var with_theme_1 = require("./with-theme");
+var deprecation_1 = require("./utils/deprecation");
+// ALL OF THESE FUNCTIONS MUTATE THE COPY OF PROPS
+// this is intentional and done for speed and memory
+var handleClassNames = function (props, classNames, className, theme) {
+    var finalClassNames = classnames_1.default.apply(
+        void 0,
+        __spread(
+            [className],
+            !!theme ? with_theme_1.parseThemeOptions(theme) : [],
+            typeof classNames === "function" ? classNames(props) : classNames
+        )
+    );
+    props.className = finalClassNames;
+};
+var handleTag = function (props, defaultTag, tag) {
+    // Handle the case where we are extending a component but passing
+    // a string as a tag. For instance, extending an Icon but rendering a span
+    if (typeof defaultTag !== "string") {
+        props.tag = tag;
+        return defaultTag;
+    }
+    return tag || defaultTag;
+};
+var handleConsumeProps = function (props, consumeProps) {
+    consumeProps.forEach(function (p) {
+        delete props[p];
+    });
+};
+exports.componentFactory = function (_a) {
+    var displayName = _a.displayName,
+        _b = _a.classNames,
+        classNames = _b === void 0 ? [] : _b,
+        _c = _a.tag,
+        defaultTag = _c === void 0 ? "div" : _c,
+        deprecate = _a.deprecate,
+        defaultProps = _a.defaultProps,
+        _d = _a.consumeProps,
+        consumeProps = _d === void 0 ? [] : _d,
+        render = _a.render;
+    var Component = React.forwardRef(function (props, ref) {
+        var className = props.className,
+            theme = props.theme,
+            tag = props.tag,
+            rest = __rest(props, ["className", "theme", "tag"]);
+        var newProps = rest;
+        handleClassNames(newProps, classNames, className, theme);
+        var Tag = handleTag(newProps, defaultTag, tag);
+        if (deprecate) {
+            newProps = deprecation_1.handleDeprecations(newProps, deprecate, displayName);
+        }
+        handleConsumeProps(newProps, consumeProps);
+        var finalProps = newProps;
+        // @ts-ignore
+        return render
+            ? render(finalProps, ref, Tag)
+            : React.createElement(Tag, __assign({}, finalProps, { ref: ref }));
+    });
+    Component.displayName = displayName;
+    Component.defaultProps = defaultProps;
+    return Component;
+};

package/rmwc/base/code/foundation-component.d.ts

@@ -0,0 +1,79 @@
+/* eslint-disable */
+import * as RMWC from "@rmwc/types";
+import { SpecificEventListener } from "@material/base/types";
+import * as React from "react";
+export declare class FoundationElement<Props, ElementType = HTMLElement> {
+    private _classes;
+    private _events;
+    private _style;
+    private _props;
+    private _ref;
+    _onChange: (() => void) | null;
+    constructor(onChange: () => void);
+    onChange(): void;
+    destroy(): void;
+    /**************************************************
+     * Classes
+     **************************************************/
+    addClass(className: string): void;
+    removeClass(className: string): void;
+    hasClass(className: string): boolean;
+    /**************************************************
+     * Props
+     **************************************************/
+    setProp(propName: keyof Props, value: any): void;
+    getProp(propName: keyof Props): Partial<Props>[keyof Props];
+    removeProp(propName: keyof Props): void;
+    props(propsToMerge: { [key: string]: any }): any;
+    /**************************************************
+     * Styles
+     **************************************************/
+    setStyle(propertyName: string, value: number | string | null): void;
+    /**************************************************
+     * Events
+     **************************************************/
+    addEventListener(evtName: string, callback: SpecificEventListener<any>): void;
+    removeEventListener(evtName: string, callback: SpecificEventListener<any>): void;
+    /**************************************************
+     * Refs
+     **************************************************/
+    setRef(el: any): void;
+    readonly ref: ElementType | null;
+}
+declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends React.Component<
+    infer TProps,
+    any
+>
+    ? TProps
+    : TComponentOrTProps;
+export interface FoundationProps extends RMWC.ComponentProps {}
+interface FoundationState {}
+declare type FoundationPropsT<P> = RMWC.MergeInterfacesT<P, FoundationProps>;
+declare type FoundationStateT<S> = S & FoundationState;
+export declare class FoundationComponent<
+    Foundation extends any,
+    P,
+    S extends any = {}
+> extends React.Component<FoundationPropsT<P>, FoundationStateT<S>> {
+    static shouldDebounce: boolean;
+    foundation: Foundation;
+    elements: {
+        [key: string]: FoundationElement<any, any>;
+    };
+    constructor(props: any);
+    public override componentDidMount(): void;
+    componentDidUpdate(prevProps: FoundationPropsT<P>): void;
+    componentWillUnmount(): void;
+    createElement<ElementType extends HTMLElement = HTMLElement>(
+        elementName: string
+    ): FoundationElement<ExtractProps<ElementType>, ElementType>;
+    update(): void;
+    sync(props: any, prevProps?: any): void;
+    syncProp(prop: any, prevProp: any, callback: () => void): void;
+    getDefaultFoundation(): Foundation;
+    /**
+     * Fires a cross-browser-compatible custom event from the component root of the given type,
+     */
+    emit(evtType: string, evtData: any, shouldBubble?: boolean): CustomEvent<any>;
+}
+export {};