@webiny/ui 5.23.1 → 5.25.0-beta.0

package/RichTextEditor/createPropsFromConfig.js

@@ -1,18 +1,22 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+
 /**
  * Creates RichTextEditor props from the given config (or array of configs).
+ *
+ * TODO: figure out types for editor and return type of the function.
  */
 export var createPropsFromConfig = function createPropsFromConfig(config) {
   var configs = Array.isArray(config) ? config : [config];
   return {
-    onReady: function onReady(editor) {
+    onReady: function onReady(params) {
       configs.forEach(function (config) {
         if (typeof config.onReady === "function") {
-          config.onReady(editor);
+          config.onReady(params);
         }
       });
     },
     tools: configs.reduce(function (tools, config) {
-      return Object.assign(tools, config.tools);
+      return _objectSpread(_objectSpread({}, tools), config.tools);
     }, {})
   };
 };

package/RichTextEditor/createPropsFromConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["createPropsFromConfig.ts"],"names":["createPropsFromConfig","config","configs","Array","isArray","onReady","params","forEach","tools","reduce"],"mappings":";;AAeA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CACjCC,MADiC,EAEH;AAC9B,MAAMC,OAAO,GAAIC,KAAK,CAACC,OAAN,CAAcH,MAAd,IAAwBA,MAAxB,GAAiC,CAACA,MAAD,CAAlD;AAEA,SAAO;AACHI,IAAAA,OADG,mBACKC,MADL,EAC4B;AAC3BJ,MAAAA,OAAO,CAACK,OAAR,CAAgB,UAAAN,MAAM,EAAI;AACtB,YAAI,OAAOA,MAAM,CAACI,OAAd,KAA0B,UAA9B,EAA0C;AACtCJ,UAAAA,MAAM,CAACI,OAAP,CAAeC,MAAf;AACH;AACJ,OAJD;AAKH,KAPE;AAQHE,IAAAA,KAAK,EAAEN,OAAO,CAACO,MAAR,CAAe,UAACD,KAAD,EAAQP,MAAR,EAAmB;AACrC,6CACOO,KADP,GAEOP,MAAM,CAACO,KAFd;AAIH,KALM,EAKJ,EALI;AARJ,GAAP;AAeH,CApBM","sourcesContent":["import { RichTextEditorProps } from \"./RichTextEditor\";\nimport { ToolSettings } from \"@editorjs/editorjs\";\nimport { OutputData } from \"@editorjs/editorjs/types\";\n\ninterface CreatePropsFromConfigResult {\n    onReady: (editor: any) => void;\n    tools: {\n        [key: string]: ToolSettings;\n    };\n}\n\ninterface OnReadyParams {\n    editor: any;\n    initialData: OutputData;\n}\n/**\n * Creates RichTextEditor props from the given config (or array of configs).\n *\n * TODO: figure out types for editor and return type of the function.\n */\nexport const createPropsFromConfig = (\n    config: RichTextEditorProps[]\n): CreatePropsFromConfigResult => {\n    const configs = (Array.isArray(config) ? config : [config]) as RichTextEditorProps[];\n\n    return {\n        onReady(params: OnReadyParams) {\n            configs.forEach(config => {\n                if (typeof config.onReady === \"function\") {\n                    config.onReady(params);\n                }\n            });\n        },\n        tools: configs.reduce((tools, config) => {\n            return {\n                ...tools,\n                ...config.tools\n            };\n        }, {} as Record<string, ToolSettings>)\n    };\n};\n"]}

package/RichTextEditor/index.js.map

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

package/Ripple/Ripple.d.ts

@@ -1,11 +1,10 @@
-import * as React from "react";
-declare type Props = {
-    children?: React.ReactNode;
+import React from "react";
+interface Props {
     type?: "unbounded" | "primary" | "accent";
     disabled?: boolean;
-};
+}
 /**
  * Use Ripple component to display a list of choices, once the handler is triggered.
  */
-declare const Ripple: (props: Props) => JSX.Element;
+declare const Ripple: React.FC<Props>;
 export { Ripple };

package/Ripple/Ripple.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import { Ripple as RmwcRipple } from "@rmwc/ripple";
 
 /**

package/Ripple/Ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Ripple.tsx"],"names":["React","Ripple","RmwcRipple","props","type","children"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAM,IAAIC,UAAnB,QAAqC,cAArC;;AAUA;AACA;AACA;AACA,IAAMD,MAAuB,GAAG,SAA1BA,MAA0B,CAAAE,KAAK,EAAI;AACrC;AACA,MAAMC,IAAI,GAAGD,KAAK,CAACC,IAAN,IAAc,SAA3B;AAEA,sBACI,oBAAC,UAAD,wCAAmBA,IAAnB,EAA0B,IAA1B,GAAsCD,KAAtC,GACKA,KAAK,CAACE,QADX,CADJ;AAKH,CATD;;AAWA,SAASJ,MAAT","sourcesContent":["import React from \"react\";\nimport { Ripple as RmwcRipple } from \"@rmwc/ripple\";\n\ninterface Props {\n    // Choose the type of ripple.\n    type?: \"unbounded\" | \"primary\" | \"accent\";\n\n    // Makes the ripple disabled.\n    disabled?: boolean;\n}\n\n/**\n * Use Ripple component to display a list of choices, once the handler is triggered.\n */\nconst Ripple: React.FC<Props> = props => {\n    // Let's pass \"unbounded\" / \"primary\" / \"accent\" flags as \"type\" prop instead.\n    const type = props.type || \"surface\";\n\n    return (\n        <RmwcRipple {...{ [type]: true }} {...props}>\n            {props.children}\n        </RmwcRipple>\n    );\n};\n\nexport { Ripple };\n"]}

package/Ripple/Ripple.stories.js

@@ -1,8 +1,8 @@
-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 "./../Ripple/README.md";
-import { Icon } from "./../Icon";
+import { Icon } from "../Icon";
 import { withKnobs, boolean } from "@storybook/addon-knobs";
 import { ReactComponent as AutoRenewIcon } from "./svg/baseline-autorenew-24px.svg";
 import { ReactComponent as CloudDoneIcon } from "./svg/baseline-cloud_done-24px.svg";

package/Ripple/Ripple.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Ripple.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","Icon","withKnobs","boolean","ReactComponent","AutoRenewIcon","CloudDoneIcon","BaselineDeleteIcon","BaselineDoneIcon","Ripple","story","module","addDecorator","add","disabled","style","padding","width","height","display","info","propTables"],"mappings":"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","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 \"./../Ripple/README.md\";\nimport { Icon } from \"~/Icon\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./svg/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./svg/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as BaselineDeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as BaselineDoneIcon } from \"./svg/baseline-done-24px.svg\";\n\nimport { Ripple } from \"./Ripple\";\n\nconst story = storiesOf(\"Components/Ripple\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        const style = { padding: 20, width: 20, height: 20, display: \"inline-block\" };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Icon with and without ripple\"}>\n                    <StorySandboxExample>\n                        <div>\n                            <div>No effect</div>\n                            <div style={style}>\n                                <Icon icon={<AutoRenewIcon />} />\n                            </div>\n\n                            <div>\n                                <code>unbounded</code>\n                            </div>\n                            <Ripple type=\"unbounded\" disabled={disabled}>\n                                <div style={style}>\n                                    <Icon icon={<CloudDoneIcon />} />\n                                </div>\n                            </Ripple>\n\n                            <div>\n                                <code>primary</code>\n                            </div>\n                            <Ripple type=\"primary\" disabled={disabled}>\n                                <div style={style}>\n                                    <Icon icon={<BaselineDeleteIcon />} />\n                                </div>\n                            </Ripple>\n\n                            <div>\n                                <code>accent</code>\n                            </div>\n                            <Ripple type=\"accent\" disabled={disabled}>\n                                <div style={style}>\n                                    <Icon icon={<BaselineDoneIcon />} />\n                                </div>\n                            </Ripple>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <div>\n                            <div>\n                                <Icon icon={<AutoRenewIcon />} />\n                            </div>\n\n                            <Ripple type=\"unbounded\" disabled={disabled}>\n                                <div>\n                                    <Icon icon={<CloudDoneIcon />} />\n                                </div>\n                            </Ripple>\n\n                            <Ripple type=\"primary\" disabled={disabled}>\n                                <div>\n                                    <Icon icon={<BaselineDeleteIcon />} />\n                                </div>\n                            </Ripple>\n\n                            <Ripple type=\"accent\" disabled={disabled}>\n                                <div>\n                                    <Icon icon={<BaselineDoneIcon />} />\n                                </div>\n                            </Ripple>\n                        </div>\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Ripple] } }\n);\n"]}

package/Ripple/index.js.map

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

package/Scrollbar/Scrollbar.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-declare type Props = {
-    children?: React.ReactNode;
+import React from "react";
+import { ScrollbarProps } from "react-custom-scrollbars";
+interface Props extends ScrollbarProps {
     style?: React.CSSProperties;
     [key: string]: any;
-};
+}
 /**
  * Use Scrollbar component to show vertical or horizontal scrollbars.
  */
-declare const Scrollbar: (props: Props) => JSX.Element;
+declare const Scrollbar: React.FC<Props>;
 export { Scrollbar };

package/Scrollbar/Scrollbar.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Scrollbars } from "react-custom-scrollbars";
 
 /**

package/Scrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Scrollbar.tsx"],"names":["React","Scrollbars","Scrollbar","props"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAyBC,UAAzB,QAA2C,yBAA3C;;AAOA;AACA;AACA;AACA,IAAMC,SAA0B,GAAG,SAA7BA,SAA6B,CAAAC,KAAK,EAAI;AACxC,sBAAO,oBAAC,UAAD,EAAgBA,KAAhB,CAAP;AACH,CAFD;;AAIA,SAASD,SAAT","sourcesContent":["import React from \"react\";\nimport { ScrollbarProps, Scrollbars } from \"react-custom-scrollbars\";\n\ninterface Props extends ScrollbarProps {\n    style?: React.CSSProperties;\n    [key: string]: any;\n}\n\n/**\n * Use Scrollbar component to show vertical or horizontal scrollbars.\n */\nconst Scrollbar: React.FC<Props> = props => {\n    return <Scrollbars {...props} />;\n};\n\nexport { Scrollbar };\n"]}

package/Scrollbar/Scrollbar.stories.js

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

package/Scrollbar/Scrollbar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Scrollbar.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","readme","Scrollbar","story","module","add","width","height","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,KAAT,EAAgBC,WAAhB,EAA6BC,YAA7B,QAAiD,+BAAjD;AACA,OAAOC,MAAP;AACA,SAASC,SAAT;AAEA,IAAMC,KAAK,GAAGN,SAAS,CAAC,sBAAD,EAAyBO,MAAzB,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,SAAD;AAAW,IAAA,KAAK,EAAE;AAAEK,MAAAA,KAAK,EAAE,GAAT;AAAcC,MAAAA,MAAM,EAAE;AAAtB;AAAlB,u1BADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACP,SAAD;AAAd;AAAR,CAzBJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Scrollbar/README.md\";\nimport { Scrollbar } from \"./Scrollbar\";\n\nconst story = storiesOf(\"Components/Scrollbar\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Scrollbar demo\"}>\n                    <Scrollbar style={{ width: 300, height: 200 }}>\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem leo,\n                        aliquam aliquet arcu vel, faucibus feugiat est. Nulla facilisi. Donec\n                        lobortis metus dictum sem egestas, non lobortis erat suscipit. Nunc\n                        fermentum tempor nisi, nec venenatis odio egestas at. Nulla facilisi. Fusce\n                        sed venenatis velit, ac rhoncus ligula. Integer hendrerit egestas ante,\n                        tristique posuere augue auctor non. Curabitur accumsan, ipsum cursus euismod\n                        volutpat, enim ligula interdum diam, id suscipit ipsum lectus id ligula. Ut\n                        nec odio vel lacus volutpat commodo. In hac habitasse platea dictumst. Donec\n                        nunc lacus, venenatis non tellus vel, semper porta quam. Ut fermentum mattis\n                        urna non imperdiet. Fusce tincidunt enim nec tincidunt dapibus. Aliquam eu\n                        ligula quis ligula pretium tincidunt non sit amet velit. Curabitur vel\n                        interdum enim, ut molestie ligula.\n                    </Scrollbar>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Scrollbar] } }\n);\n"]}

package/Scrollbar/index.js.map

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

package/Section/Section.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Section.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","Section","styled","story","module","RenderSection","backgroundColor","padding","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;AAOA,OAAOC,MAAP;AAEA,OAAOC,OAAP;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AAEA,IAAMC,KAAK,GAAGT,SAAS,CAAC,oBAAD,EAAuBU,MAAvB,CAAvB;AAEA,IAAMC,aAAa,gBAAGH,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AAChCI,EAAAA,eAAe,EAAE,6BADe;AAEhCC,EAAAA,OAAO,EAAE;AAFuB,CAAjB,CAAnB;AAKAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcR,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,aAAD,qBACI,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAC;AAAf,mCADJ,eAEI,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAC;AAAf,mDAFJ,CADJ,CADJ,eAOI,oBAAC,gBAAD,yoBAPJ,CAFJ,CADJ;AA4BH,CA/BL,EAgCI;AAAES,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACT,OAAD;AAAd;AAAR,CAhCJ","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 \"./README.md\";\n\nimport Section from \"./index\";\nimport styled from \"@emotion/styled\";\n\nconst story = storiesOf(\"Components/Section\", module);\n\nconst RenderSection = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    padding: \"1px 25px 0 25px\"\n});\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <RenderSection>\n                            <Section title=\"Section 1\">Here goes the first section</Section>\n                            <Section title=\"Section 2\">And this is the second section 🦄</Section>\n                        </RenderSection>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        import styled from \"@emotion/styled\";\n                        \n                        const RenderSection = styled(\"div\")({\n                            backgroundColor: \"var(--mdc-theme-background)\",\n                            padding: \"1px 25px 0 25px\"\n                        });\n\n                         <RenderSection>\n                            <Section title=\"Section 1\">Here goes the first section</Section>\n                            <Section title=\"Section 2\">And this is the second section 🦄</Section>\n                        </RenderSection>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Section] } }\n);\n"]}

package/Section/index.d.ts

@@ -1,7 +1,6 @@
-import * as React from "react";
-declare type SectionProps = {
-    children?: React.ReactNode;
+import React from "react";
+interface SectionProps {
     title?: String;
-};
-declare const Section: ({ children, title, ...props }: SectionProps) => JSX.Element;
+}
+declare const Section: React.FC<SectionProps>;
 export default Section;

package/Section/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "title"];
-import * as React from "react";
+import React from "react";
 import styled from "@emotion/styled";
 import { css } from "emotion";
 import { Typography } from "../Typography";

package/Section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["React","styled","css","Typography","Elevation","SectionWrapper","backgroundColor","padding","titleStyle","display","alignItems","color","lineHeight","svg","height","ElevationContent","Section","children","title","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,SAASC,UAAT;AACA,SAASC,SAAT;AAEA,IAAMC,cAAc,gBAAGJ,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACjCK,EAAAA,eAAe,EAAE,6BADgB;AAEjCC,EAAAA,OAAO,EAAE;AAFwB,CAAjB,CAApB;AAKA,IAAMC,UAAU,gBAAGN,GAAG,CAAC;AACnBO,EAAAA,OAAO,EAAE,MADU;AAEnBC,EAAAA,UAAU,EAAE,QAFO;AAGnBC,EAAAA,KAAK,EAAE,6BAHY;AAInB,8BAA4B;AACxBC,IAAAA,UAAU,EAAE,MADY;AAExBC,IAAAA,GAAG,EAAE;AACDC,MAAAA,MAAM,EAAE,EADP;AAEDH,MAAAA,KAAK,EAAE;AAFN;AAFmB;AAJT,CAAD,sBAAtB;AAaA,IAAMI,gBAAgB,gBAAGd,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AACnCM,EAAAA,OAAO,EAAE,EAD0B;AAEnCD,EAAAA,eAAe,EAAE;AAFkB,CAAjB,CAAtB;;AASA,IAAMU,OAA+B,GAAG,SAAlCA,OAAkC,OAAmC;AAAA,MAAhCC,QAAgC,QAAhCA,QAAgC;AAAA,MAAtBC,KAAsB,QAAtBA,KAAsB;AAAA,MAAZC,KAAY;;AACvE,sBACI,oBAAC,cAAD,EAAoBA,KAApB,eACI,6CACI,oBAAC,UAAD;AAAY,IAAA,SAAS,EAAEX,UAAvB;AAAmC,IAAA,GAAG,EAAE;AAAxC,KACKU,KADL,CADJ,CADJ,eAOI,oBAAC,SAAD;AAAW,IAAA,CAAC,EAAE;AAAd,kBACI,oBAAC,gBAAD,QAAmBD,QAAnB,CADJ,CAPJ,CADJ;AAaH,CAdD;;AAgBA,eAAeD,OAAf","sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\nimport { Elevation } from \"~/Elevation\";\n\nconst SectionWrapper = styled(\"div\")({\n    backgroundColor: \"var(--mdc-theme-background)\",\n    padding: \"0 0 25px 0\"\n});\n\nconst titleStyle = css({\n    display: \"flex\",\n    alignItems: \"center\",\n    color: \"var(--mdc-theme-on-surface)\",\n    \".tooltip-content-wrapper\": {\n        lineHeight: \"100%\",\n        svg: {\n            height: 13,\n            color: \"var(--mdc-theme-on-surface)\"\n        }\n    }\n});\n\nconst ElevationContent = styled(\"div\")({\n    padding: 20,\n    backgroundColor: \"#fff\"\n});\n\ninterface SectionProps {\n    title?: String;\n}\n\nconst Section: React.FC<SectionProps> = ({ children, title, ...props }) => {\n    return (\n        <SectionWrapper {...props}>\n            <h4>\n                <Typography className={titleStyle} use={\"overline\"}>\n                    {title}\n                </Typography>\n            </h4>\n\n            <Elevation z={2}>\n                <ElevationContent>{children}</ElevationContent>\n            </Elevation>\n        </SectionWrapper>\n    );\n};\n\nexport default Section;\n"]}

package/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { SelectProps as RmwcSelectProps } from "@rmwc/select";
 import { FormComponentProps } from "../types";
 export declare type SelectProps = FormComponentProps & RmwcSelectProps & {
@@ -11,12 +11,9 @@ export declare type SelectProps = FormComponentProps & RmwcSelectProps & {
     rootProps?: Object;
     className?: string;
 };
-export declare const Select: {
-    (props: SelectProps): JSX.Element;
-    defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
-};
+/**
+ * We check for null and undefined in the value because React is complaining about those values.
+ * Error says to use the empty string in null/undefined case.
+ */
+export declare const Select: React.FC<SelectProps>;
 export default Select;

package/Select/Select.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
 var _excluded = ["value", "description", "validation"];
-import * as React from "react";
+import React from "react";
 import { Select as RmwcSelect } from "@rmwc/select";
 import { FormElementMessage } from "../FormElementMessage";
 import { css } from "emotion";
@@ -20,41 +21,98 @@ var noLabel = /*#__PURE__*/css({
     }
   }
 }, "label:noLabel;");
+/**
+ * TODO verify that this is correct method get all options.
+ */
+
+var getOptions = function getOptions(initialOptions) {
+  if (!initialOptions) {
+    return [];
+  } else if (Array.isArray(initialOptions)) {
+    var options = [];
+
+    var _iterator = _createForOfIteratorHelper(initialOptions),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var option = _step.value;
+
+        if (typeof option === "string") {
+          options.push({
+            label: option,
+            value: option
+          });
+          continue;
+        }
+
+        options.push({
+          label: option.label,
+          value: option.value,
+          options: option.options
+        });
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return options;
+  }
+
+  return Object.keys(initialOptions).map(function (key) {
+    return {
+      label: initialOptions[key],
+      value: key
+    };
+  });
+};
 /**
  * Select component lets users choose a value from given set of options.
  */
 
-var skipProps = ["validate"];
+
+var skipProps = ["validate", "form"];
 
 var getRmwcProps = function getRmwcProps(props) {
   var newProps = {};
   Object.keys(props).filter(function (name) {
     return !skipProps.includes(name);
-  }).forEach(function (name) {
+  }) // @ts-ignore
+  .forEach(function (name) {
     return newProps[name] = props[name];
   });
   return newProps;
 };
+/**
+ * We check for null and undefined in the value because React is complaining about those values.
+ * Error says to use the empty string in null/undefined case.
+ */
+
 
 export var Select = function Select(props) {
-  var value = props.value,
+  var initialValue = props.value,
       description = props.description,
       validation = props.validation,
       other = _objectWithoutProperties(props, _excluded);
 
+  var value = initialValue === null || initialValue === undefined ? "" : initialValue;
+
+  var _ref = validation || {},
+      validationIsValid = _ref.isValid,
+      validationMessage = _ref.message;
+
+  var options = getOptions(other.options);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcSelect, Object.assign({}, getRmwcProps(other), {
+    options: options,
     value: value,
     className: classNames("webiny-ui-select", props.className, _defineProperty({}, noLabel, !props.label)),
     onChange: function onChange(e) {
       props.onChange && props.onChange(e.target.value);
     }
-  })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+  })), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
     error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
-};
-Select.defaultProps = {
-  validation: {
-    isValid: null
-  }
+  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
 };
 export default Select;

package/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Select.tsx"],"names":["React","Select","RmwcSelect","FormElementMessage","css","classNames","noLabel","height","paddingTop","getOptions","initialOptions","Array","isArray","options","option","push","label","value","Object","keys","map","key","skipProps","getRmwcProps","props","newProps","filter","name","includes","forEach","initialValue","description","validation","other","undefined","validationIsValid","isValid","validationMessage","message","className","e","onChange","target"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport {\n    FormattedOption,\n    Select as RmwcSelect,\n    SelectProps as RmwcSelectProps\n} from \"@rmwc/select\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type SelectProps = FormComponentProps &\n    RmwcSelectProps & {\n        // Component label.\n        label?: string;\n\n        // Is checkbox disabled?\n        disabled?: boolean;\n\n        // Description beneath the select.\n        description?: string;\n\n        // Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n        placeholder?: string;\n\n        // Makes the Select have a visual box.\n        box?: string;\n\n        // One or more <option> or <optgroup> elements.\n        children?: Array<React.ReactElement<\"option\"> | React.ReactElement<\"optgroup\">>;\n\n        // IconProps for the root element. By default, additional props spread to the native select element.\n        rootProps?: Object;\n\n        // A className for the root element.\n        className?: string;\n    };\n\nconst noLabel = css({\n    \"&.mdc-select\": {\n        height: 35,\n        \".mdc-select__native-control\": {\n            paddingTop: 0\n        },\n        \"&.mdc-select--box\": {\n            \".mdc-select__native-control\": {\n                height: 35,\n                paddingTop: 5\n            }\n        }\n    }\n});\n/**\n * TODO verify that this is correct method get all options.\n */\nconst getOptions = (initialOptions: SelectProps[\"options\"]): FormattedOption[] => {\n    if (!initialOptions) {\n        return [];\n    } else if (Array.isArray(initialOptions)) {\n        const options: FormattedOption[] = [];\n        for (const option of initialOptions) {\n            if (typeof option === \"string\") {\n                options.push({\n                    label: option,\n                    value: option\n                });\n                continue;\n            }\n            options.push({\n                label: option.label,\n                value: option.value,\n                options: option.options\n            });\n        }\n        return options;\n    }\n    return Object.keys(initialOptions).map(key => {\n        return {\n            label: initialOptions[key],\n            value: key\n        };\n    });\n};\n\n/**\n * Select component lets users choose a value from given set of options.\n */\nconst skipProps = [\"validate\", \"form\"];\n\nconst getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps => {\n    const newProps: FormComponentProps & RmwcSelectProps = {};\n    Object.keys(props)\n        .filter(name => !skipProps.includes(name))\n        // @ts-ignore\n        .forEach((name: any) => (newProps[name] = props[name]));\n\n    return newProps;\n};\n/**\n * We check for null and undefined in the value because React is complaining about those values.\n * Error says to use the empty string in null/undefined case.\n */\nexport const Select: React.FC<SelectProps> = props => {\n    const { value: initialValue, description, validation, ...other } = props;\n\n    const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const options = getOptions(other.options);\n\n    return (\n        <React.Fragment>\n            <RmwcSelect\n                {...getRmwcProps(other)}\n                options={options}\n                value={value}\n                className={classNames(\"webiny-ui-select\", props.className, {\n                    [noLabel]: !props.label\n                })}\n                onChange={e => {\n                    props.onChange && props.onChange((e.target as any).value);\n                }}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default Select;\n"]}

package/Select/Select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Select.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","Select","story","module","addDecorator","add","disabled","box","Bind","toString","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,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,MAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,mBAAD,EAAsBY,MAAtB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEAK,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGR,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AACA,MAAMS,GAAG,GAAGT,OAAO,CAAC,KAAD,EAAQ,KAAR,CAAnB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD,QACK;AAAA,QAAGS,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,MAAD;AACI,MAAA,KAAK,EAAC,MADV;AAEI,MAAA,QAAQ,EAAEF,QAFd;AAGI,MAAA,GAAG,EAAEC,GAAG,CAACE,QAAJ,EAHT;AAII,MAAA,WAAW,EAAC;AAJhB,oBAMI;AAAU,MAAA,KAAK,EAAC;AAAhB,oBACI;AAAQ,MAAA,KAAK,EAAC;AAAd,yBADJ,eAEI;AAAQ,MAAA,KAAK,EAAC;AAAd,iBAFJ,eAGI;AAAQ,MAAA,KAAK,EAAC;AAAd,kBAHJ,CANJ,eAWI;AAAU,MAAA,KAAK,EAAC;AAAhB,oBACI;AAAQ,MAAA,KAAK,EAAC;AAAd,gBADJ,eAEI;AAAQ,MAAA,KAAK,EAAC;AAAd,aAFJ,eAGI;AAAQ,MAAA,KAAK,EAAC;AAAd,oBAHJ,CAXJ,CADJ,CADH;AAAA,GADL,CADJ,CADJ,eA0BI,oBAAC,gBAAD,85CA1BJ,CAFJ,CADJ;AA6DH,CAnEL,EAoEI;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACV,MAAD;AAAd;AAAR,CApEJ","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 { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Select } from \"./Select\";\n\nconst story = storiesOf(\"Components/Select\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n        const box = boolean(\"Box\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple select with a label and description\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind name=\"pet\">\n                                    <Select\n                                        label=\"Pets\"\n                                        disabled={disabled}\n                                        box={box.toString()}\n                                        description=\"Choose a pet of your liking.\"\n                                    >\n                                        <optgroup label=\"Dogs\">\n                                            <option value=\"germanShepherd\">German Shepherd</option>\n                                            <option value=\"bulldog\">Bulldog</option>\n                                            <option value=\"sharPei\">Shar-Pei</option>\n                                        </optgroup>\n                                        <optgroup label=\"Other\">\n                                            <option value=\"parrot\">Parrot</option>\n                                            <option value=\"cat\">Cat</option>\n                                            <option value=\"guinea \">Guinea Pig</option>\n                                        </optgroup>\n                                    </Select>\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"pet\">\n                               <Select\n                                    label=\"Pets\"\n                                    disabled={disabled}\n                                    box={box.toString()}\n                                    description=\"Choose a pet of your liking.\"\n                                >\n                                   <optgroup label=\"Dogs\">\n                                        <option value=\"germanShepherd\">\n                                            German Shepherd\n                                        </option>\n                                        <option value=\"bulldog\">Bulldog</option>\n                                        <option value=\"sharPei\">Shar-Pei</option>\n                                    </optgroup>\n                                    <optgroup label=\"Other\">\n                                        <option value=\"parrot\">Parrot</option>\n                                        <option value=\"cat\">Cat</option>\n                                        <option value=\"guinea \">Guinea Pig</option>\n                                    </optgroup>\n                                </Select>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Select] } }\n);\n"]}

package/Select/index.js.map

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

package/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 declare type Props = FormComponentProps & {
     label?: string;
@@ -15,11 +15,6 @@ declare type Props = FormComponentProps & {
  * Slider component lets users choose a value from given range.
  */
 declare class Slider extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     onChange: (e: {
         detail: {
             value: number;

package/Slider/Slider.js

@@ -4,7 +4,7 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import { Slider as RmwcSlider } from "@rmwc/slider";
 import styled from "@emotion/styled";
 import { FormElementMessage } from "../FormElementMessage";
@@ -63,25 +63,23 @@ var Slider = /*#__PURE__*/function (_React$Component) {
         sliderValue = this.props.min || 0;
       }
 
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
       return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
         className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent"
       }, label), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(RmwcSlider, Object.assign({}, this.props, {
         value: sliderValue,
         onChange: this.onChange,
         onInput: this.onInput
-      }))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }))), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
     }
   }]);
 
   return Slider;
 }(React.Component);
 
-_defineProperty(Slider, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
-
 export default Slider;

package/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Slider.tsx"],"names":["React","Slider","RmwcSlider","styled","FormElementMessage","Wrapper","width","left","e","props","onChange","detail","value","onInput","label","description","validation","sliderValue","min","validationIsValid","isValid","validationMessage","message","Component"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAM,IAAIC,UAAnB,QAAqC,cAArC;AAEA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,kBAAT;AA+BA;AACA,IAAMC,OAAO,gBAAGF,MAAH,CAAU,KAAV;AAAA;AAAA;AAAA,GAAiB;AAC1BG,EAAAA,KAAK,EAAE,MADmB;AAE1B,8CAA4C;AACxCC,IAAAA,IAAI,EAAE;AADkC;AAFlB,CAAjB,CAAb;AAOA;AACA;AACA;;IACMN,M;;;;;;;;;;;;;;;;+DACS,UAACO,CAAD,EAAsC;AAC7C,YAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAoBF,CAAC,CAACG,MAAF,CAASC,KAA7B,CAAvB;AACH,K;;8DAES,UAACJ,CAAD,EAAsC;AAC5C,YAAKC,KAAL,CAAWI,OAAX,IAAsB,MAAKJ,KAAL,CAAWI,OAAX,CAAmBL,CAAC,CAACG,MAAF,CAASC,KAA5B,CAAtB;AACH,K;;;;;;;WAED,kBAAyB;AACrB,wBAAkD,KAAKH,KAAvD;AAAA,UAAQG,KAAR,eAAQA,KAAR;AAAA,UAAeE,KAAf,eAAeA,KAAf;AAAA,UAAsBC,WAAtB,eAAsBA,WAAtB;AAAA,UAAmCC,UAAnC,eAAmCA,UAAnC;AAEA,UAAIC,WAAW,GAAGL,KAAlB;;AACA,UAAIA,KAAK,KAAK,IAAV,IAAkB,OAAOA,KAAP,KAAiB,WAAvC,EAAoD;AAChDK,QAAAA,WAAW,GAAG,KAAKR,KAAL,CAAWS,GAAX,IAAkB,CAAhC;AACH;;AAED,iBAAmEF,UAAU,IAAI,EAAjF;AAAA,UAAiBG,iBAAjB,QAAQC,OAAR;AAAA,UAA6CC,iBAA7C,QAAoCC,OAApC;;AAEA,0BACI,oBAAC,KAAD,CAAO,QAAP,QACKR,KAAK,iBACF;AAAK,QAAA,SAAS,EAAC;AAAf,SACKA,KADL,CAFR,eAOI,oBAAC,OAAD,qBACI,oBAAC,UAAD,oBACQ,KAAKL,KADb;AAEI,QAAA,KAAK,EAAEQ,WAFX;AAGI,QAAA,QAAQ,EAAE,KAAKP,QAHnB;AAII,QAAA,OAAO,EAAE,KAAKG;AAJlB,SADJ,CAPJ,EAgBKM,iBAAiB,KAAK,KAAtB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BE,iBAA3B,CAjBR,EAoBKF,iBAAiB,KAAK,KAAtB,IAA+BJ,WAA/B,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CArBR,CADJ;AA0BH;;;;EA7CgBf,KAAK,CAACuB,S;;AAgD3B,eAAetB,MAAf","sourcesContent":["import React from \"react\";\nimport { Slider as RmwcSlider } from \"@rmwc/slider\";\nimport { FormComponentProps } from \"~/types\";\nimport styled from \"@emotion/styled\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ntype Props = FormComponentProps & {\n    // Component label.\n    label?: string;\n\n    // Is checkbox disabled?\n    disabled?: boolean;\n\n    // Description beneath the slider.\n    description?: string;\n\n    // The minimum value of the Slider.\n    min: number | string;\n\n    // The maximum value of the Slider.\n    max: number | string;\n\n    // A step to quantize values by.\n    step?: number | string;\n\n    // Displays the exact value of the Slider on the knob.\n    discrete?: boolean;\n\n    // Displays the individual step markers on the Slider track.\n    displayMarkers?: boolean;\n\n    // Function that gets triggered on each input.\n    onInput?: Function;\n};\n\n// wrapper fixes a bug in slider where the slider handle is rendered outside the bounds of the slider box\nconst Wrapper = styled(\"div\")({\n    width: \"100%\",\n    \".mdc-slider .mdc-slider__thumb-container\": {\n        left: 5\n    }\n});\n\n/**\n * Slider component lets users choose a value from given range.\n */\nclass Slider extends React.Component<Props> {\n    onChange = (e: { detail: { value: number } }) => {\n        this.props.onChange && this.props.onChange(e.detail.value);\n    };\n\n    onInput = (e: { detail: { value: number } }) => {\n        this.props.onInput && this.props.onInput(e.detail.value);\n    };\n\n    public override render() {\n        const { value, label, description, validation } = this.props;\n\n        let sliderValue = value;\n        if (value === null || typeof value === \"undefined\") {\n            sliderValue = this.props.min || 0;\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                {label && (\n                    <div className=\"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\">\n                        {label}\n                    </div>\n                )}\n\n                <Wrapper>\n                    <RmwcSlider\n                        {...this.props}\n                        value={sliderValue}\n                        onChange={this.onChange}\n                        onInput={this.onInput}\n                    />\n                </Wrapper>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default Slider;\n"]}

package/Slider/Slider.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 { withKnobs, boolean } from "@storybook/addon-knobs";

package/Slider/Slider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Slider.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","Slider","story","module","addDecorator","add","disabled","width","Bind","value","onChange","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,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,OAAOC,MAAP;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,mBAAD,EAAsBY,MAAtB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEAK,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGR,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEQ,MAAAA,KAAK,EAAE;AAAT;AAAZ,KACK;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,OACK;AAAA,UAAGC,KAAH,SAAGA,KAAH;AAAA,UAAUC,QAAV,SAAUA,QAAV;AAAA,0BACG,oBAAC,MAAD;AACI,QAAA,KAAK,EAAE,kBADX;AAEI,QAAA,QAAQ,EAAEJ,QAFd;AAGI,QAAA,WAAW,EACP,+CAJR;AAMI,QAAA,QAAQ,MANZ;AAOI,QAAA,cAAc,MAPlB;AAQI,QAAA,GAAG,EAAE,CART;AASI,QAAA,GAAG,EAAE,EATT;AAUI,QAAA,IAAI,EAAE,CAVV;AAWI,QAAA,OAAO,EAAEI,QAXb;AAYI,QAAA,QAAQ,EAAEA,QAZd;AAaI,QAAA,KAAK,EAAED;AAbX,QADH;AAAA,KADL,CADH;AAAA,GADL,CADJ,CADJ,eA0BI,oBAAC,gBAAD,wrCA1BJ,CAFJ,CADJ;AA2DH,CAhEL,EAiEI;AAAEE,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACX,MAAD;AAAd;AAAR,CAjEJ","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 { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport Slider from \"./Slider\";\n\nconst story = storiesOf(\"Components/Slider\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple slider with a label and description\"}>\n                        <Form data={{ width: 200 }}>\n                            {({ Bind }) => (\n                                <Bind name=\"width\">\n                                    {({ value, onChange }) => (\n                                        <Slider\n                                            label={\"Number of rooms:\"}\n                                            disabled={disabled}\n                                            description={\n                                                \"Choose the number of rooms in your apartment.\"\n                                            }\n                                            discrete\n                                            displayMarkers\n                                            min={1}\n                                            max={10}\n                                            step={1}\n                                            onInput={onChange}\n                                            onChange={onChange}\n                                            value={value}\n                                        />\n                                    )}\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{ width: 200 }}>\n                        {({ Bind }) => (\n                            <Bind name=\"width\">\n                                {({ value, onChange }) => (\n                                    <Slider\n                                        label={\"Number of rooms:\"}\n                                        disabled={disabled}\n                                        description={\n                                            \"Choose the number of rooms in your apartment.\"\n                                        }\n                                        discrete\n                                        displayMarkers\n                                        min={1}\n                                        max={10}\n                                        step={1}\n                                        onInput={onChange}\n                                        onChange={onChange}\n                                        value={value}\n                                    />\n                                )}\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Slider] } }\n);\n"]}

package/Slider/index.js.map

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

package/Snackbar/Snackbar.d.ts

@@ -1,15 +1,12 @@
-import * as React from "react";
+import React from "react";
 import { SnackbarAction, SnackbarProps } from "@rmwc/snackbar";
 declare type Props = SnackbarProps;
 /**
  * Use Snackbar component to display an informative or alert message and allow users to act upon it.
- * @param props
- * @returns {*}
- * @constructor
  */
 declare class Snackbar extends React.Component<Props> {
-    container?: Element;
-    constructor(props: any);
-    render(): JSX.Element;
+    readonly container: HTMLElement | null;
+    constructor(props: Props);
+    render(): React.ReactElement;
 }
 export { Snackbar, SnackbarAction };

package/Snackbar/Snackbar.js

@@ -4,14 +4,11 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import { Snackbar as RmwcSnackbar, SnackbarAction } from "@rmwc/snackbar";
 
 /**
  * Use Snackbar component to display an informative or alert message and allow users to act upon it.
- * @param props
- * @returns {*}
- * @constructor
  */
 var Snackbar = /*#__PURE__*/function (_React$Component) {
   _inherits(Snackbar, _React$Component);
@@ -25,7 +22,7 @@ var Snackbar = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "container", void 0);
+    _defineProperty(_assertThisInitialized(_this), "container", null);
 
     _this.container = document.getElementById("snackbar-container");
 

package/Snackbar/Snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Snackbar.tsx"],"names":["React","Snackbar","RmwcSnackbar","SnackbarAction","props","container","document","getElementById","createElement","setAttribute","body","appendChild","Component"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAQ,IAAIC,YAArB,EAAmCC,cAAnC,QAAwE,gBAAxE;;AAIA;AACA;AACA;IACMF,Q;;;;;AAGF,oBAAmBG,KAAnB,EAAiC;AAAA;;AAAA;;AAC7B,8BAAMA,KAAN;;AAD6B,gEAFe,IAEf;;AAG7B,UAAKC,SAAL,GAAiBC,QAAQ,CAACC,cAAT,CAAwB,oBAAxB,CAAjB;;AAEA,QAAI,CAAC,MAAKF,SAAV,EAAqB;AACjB,YAAKA,SAAL,GAAiBC,QAAQ,CAACE,aAAT,CAAuB,KAAvB,CAAjB;;AACA,YAAKH,SAAL,CAAeI,YAAf,CAA4B,IAA5B,EAAkC,oBAAlC;;AACA,UAAMJ,SAAsB,GAAG,MAAKA,SAApC;AACAC,MAAAA,QAAQ,CAACI,IAAT,IAAiBJ,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BN,SAA1B,CAAjB;AACH;;AAV4B;AAWhC;;;;WAED,kBAA6C;AACzC,0BAAO,oBAAC,YAAD,EAAkB,KAAKD,KAAvB,CAAP;AACH;;;;EAlBkBJ,KAAK,CAACY,S;;AAqB7B,SAASX,QAAT,EAAmBE,cAAnB","sourcesContent":["import React from \"react\";\nimport { Snackbar as RmwcSnackbar, SnackbarAction, SnackbarProps } from \"@rmwc/snackbar\";\n\ntype Props = SnackbarProps;\n\n/**\n * Use Snackbar component to display an informative or alert message and allow users to act upon it.\n */\nclass Snackbar extends React.Component<Props> {\n    public readonly container: HTMLElement | null = null;\n\n    public constructor(props: Props) {\n        super(props);\n\n        this.container = document.getElementById(\"snackbar-container\");\n\n        if (!this.container) {\n            this.container = document.createElement(\"div\");\n            this.container.setAttribute(\"id\", \"snackbar-container\");\n            const container: HTMLElement = this.container;\n            document.body && document.body.appendChild(container);\n        }\n    }\n\n    public override render(): React.ReactElement {\n        return <RmwcSnackbar {...this.props} />;\n    }\n}\n\nexport { Snackbar, SnackbarAction };\n"]}

package/Snackbar/Snackbar.stories.js

@@ -4,7 +4,7 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 "./../Snackbar/README.md";

package/Snackbar/Snackbar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Snackbar.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","withKnobs","boolean","ButtonPrimary","Snackbar","story","module","addDecorator","SnackbarContainer","show","state","setState","props","leading","Component","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;AAOA,OAAOC,MAAP;AACA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,SAASC,aAAT;AACA,SAASC,QAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,qBAAD,EAAwBY,MAAxB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBN,SAAnB;;IAEMO,iB;;;;;;;;;;;;;;;;4DACsB;AACpBC,MAAAA,IAAI,EAAE;AADc,K;;;;;;;WAIxB,kBAAyB;AAAA;;AACrB,0BACI,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,QAAD;AACI,QAAA,IAAI,EAAE,KAAKC,KAAL,CAAWD,IADrB;AAEI,QAAA,OAAO,EAAE;AAAA,iBAAM,MAAI,CAACE,QAAL,CAAc;AAAEF,YAAAA,IAAI,EAAE;AAAR,WAAd,CAAN;AAAA,SAFb;AAGI,QAAA,OAAO,EAAC,oBAHZ;AAII,QAAA,OAAO,EAAE,KAAKG,KAAL,CAAWC,OAJxB;AAKI,QAAA,MAAM,EAAC;AALX,QADJ,eAQI,oBAAC,aAAD;AAAe,QAAA,OAAO,EAAE;AAAA,iBAAM,MAAI,CAACF,QAAL,CAAc;AAAEF,YAAAA,IAAI,EAAE;AAAR,WAAd,CAAN;AAAA;AAAxB,wBARJ,CADJ;AAcH;;;;EApB2BhB,KAAK,CAACqB,S;;AAuBtCT,KAAK,CAACU,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMF,OAAO,GAAGX,OAAO,CAAC,SAAD,EAAY,KAAZ,CAAvB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcF,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,iBAAD;AAAmB,IAAA,OAAO;AAA1B,IADJ,CADJ,eAII,oBAAC,gBAAD,4LAKuBa,OALvB,maAJJ,CAFJ,CADJ;AAyBH,CA9BL,EA+BI;AAAEG,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACb,QAAD;AAAd;AAAR,CA/BJ","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 \"./../Snackbar/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { ButtonPrimary } from \"./../Button\";\nimport { Snackbar } from \"./Snackbar\";\n\nconst story = storiesOf(\"Components/Snackbar\", module);\nstory.addDecorator(withKnobs);\n\nclass SnackbarContainer extends React.Component<{ leading: boolean }, { show: boolean }> {\n    public override state = {\n        show: false\n    };\n\n    public override render() {\n        return (\n            <React.Fragment>\n                <Snackbar\n                    open={this.state.show}\n                    onClose={() => this.setState({ show: false })}\n                    message=\"This is a message.\"\n                    leading={this.props.leading}\n                    action=\"Something\"\n                />\n                <ButtonPrimary onClick={() => this.setState({ show: true })}>\n                    Show message\n                </ButtonPrimary>\n            </React.Fragment>\n        );\n    }\n}\n\nstory.add(\n    \"usage\",\n    () => {\n        const leading = boolean(\"leading\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <SnackbarContainer leading />\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <div>\n                             <Snackbar\n                                open={this.state.show}\n                                leading={${leading}}\n                                onHide={() => this.setState({ show: false })}\n                                message=\"This is a message.\"\n                            />\n                            <ButtonPrimary onClick={() => this.setState({ show: true })}>\n                                Show message\n                            </ButtonPrimary>\n                        </div>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Snackbar] } }\n);\n"]}

package/Snackbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["Snackbar","SnackbarAction"],"mappings":"AAAA,SAASA,QAAT,EAAmBC,cAAnB","sourcesContent":["export { Snackbar, SnackbarAction } from \"./Snackbar\";\n"]}

package/Switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { SwitchProps } from "@rmwc/switch";
 import { FormComponentProps } from "../types";
 declare type Props = FormComponentProps & SwitchProps & {
@@ -9,11 +9,6 @@ declare type Props = FormComponentProps & SwitchProps & {
  * Switch component can be used to store simple boolean values.
  */
 declare class Switch extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     static rmwcProps: string[];
     onChange: (e: React.SyntheticEvent<HTMLElement>) => void;
     render(): JSX.Element;