@webiny/ui 5.24.0-beta.0 → 5.25.0-beta.1

package/Drawer/Drawer.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Drawer as RmwcDrawer, DrawerContent as RmwcDrawerContent, DrawerHeader as RmwcDrawerHeader } from "@rmwc/drawer";
 
 /**

package/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Drawer.tsx"],"names":["React","Drawer","RmwcDrawer","DrawerContent","RmwcDrawerContent","DrawerHeader","RmwcDrawerHeader","props"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACIC,MAAM,IAAIC,UADd,EAEIC,aAAa,IAAIC,iBAFrB,EAGIC,YAAY,IAAIC,gBAHpB,QAOO,cAPP;;AAcA;AACA;AACA;AACA,IAAMD,YAAY,GAAG,SAAfA,YAAe,CAACE,KAAD;AAAA,sBAA8B,oBAAC,gBAAD,EAAsBA,KAAtB,CAA9B;AAAA,CAArB;;AAkBA;AACA;AACA;AACA,IAAMJ,aAAa,GAAG,SAAhBA,aAAgB,CAACI,KAAD;AAAA,sBAA+B,oBAAC,iBAAD,EAAuBA,KAAvB,CAA/B;AAAA,CAAtB;;AAiBA;AACA;AACA;AACA,IAAMN,MAAM,GAAG,SAATA,MAAS,CAACM,KAAD,EAAwB;AACnC,sBAAO,oBAAC,UAAD,EAAgBA,KAAhB,CAAP;AACH,CAFD;;AAIA,SAASN,MAAT,EAAiBI,YAAjB,EAA+BF,aAA/B","sourcesContent":["import React from \"react\";\nimport {\n    Drawer as RmwcDrawer,\n    DrawerContent as RmwcDrawerContent,\n    DrawerHeader as RmwcDrawerHeader,\n    DrawerProps as RmwcDrawerProps,\n    DrawerHeaderProps as RmwcDrawerHeaderProps,\n    DrawerContentProps as RmwcDrawerContentProps\n} from \"@rmwc/drawer\";\n\ntype DrawerHeaderProps = RmwcDrawerHeaderProps & {\n    children: any;\n    className?: string;\n};\n\n/**\n * Shows header of the drawer.\n */\nconst DrawerHeader = (props: DrawerHeaderProps) => <RmwcDrawerHeader {...props} />;\n\nexport type DrawerContentProps = RmwcDrawerContentProps & {\n    /**\n     * Drawer direction.\n     */\n    dir?: string;\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n\n/**\n * Shows drawer content. It can be anything, but commonly a List component would suffice here.\n */\nconst DrawerContent = (props: DrawerContentProps) => <RmwcDrawerContent {...props} />;\n\ntype DrawerProps = RmwcDrawerProps & {\n    /**\n     * Drawer direction.\n     */\n    dir?: string;\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n/**\n * Use Drawer component to display navigation for the whole app or just a small section of it.\n */\nconst Drawer = (props: DrawerProps) => {\n    return <RmwcDrawer {...props} />;\n};\n\nexport { Drawer, DrawerHeader, DrawerContent };\n"]}

package/Drawer/Drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Drawer.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","List","ListItem","readme","withKnobs","boolean","Drawer","DrawerHeader","DrawerContent","story","module","addDecorator","add","open","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,IAAT,EAAeC,QAAf;AAEA,OAAOC,MAAP;AACA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,SAASC,MAAT,EAAiBC,YAAjB,EAA+BC,aAA/B;AAEA,IAAMC,KAAK,GAAGd,SAAS,CAAC,mBAAD,EAAsBe,MAAtB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEAK,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,IAAI,GAAGR,OAAO,CAAC,MAAD,EAAS,IAAT,CAApB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcF,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAEU;AAAd,kBACI,oBAAC,YAAD,oBADJ,eAEI,oBAAC,aAAD,qBACI,oBAAC,IAAD,qBACI,oBAAC,QAAD,gBADJ,eAEI,oBAAC,QAAD,oBAFJ,eAGI,oBAAC,QAAD,iBAHJ,eAII,oBAAC,QAAD,cAJJ,eAKI,oBAAC,QAAD,mBALJ,CADJ,CAFJ,CADJ,CADJ,eAeI,oBAAC,gBAAD,4mBAfJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACT,MAAD,EAASC,YAAT,EAAuBC,aAAvB;AAAd;AAAR,CA3CJ","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 { List, ListItem } from \"./../List\";\n\nimport readme from \"./../Drawer/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { Drawer, DrawerHeader, DrawerContent } from \"./Drawer\";\n\nconst story = storiesOf(\"Components/Drawer\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const open = boolean(\"Open\", true);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"drawer\"}>\n                    <StorySandboxExample title={\"A list with all possible options\"}>\n                        <Drawer open={open}>\n                            <DrawerHeader>Main Menu</DrawerHeader>\n                            <DrawerContent>\n                                <List>\n                                    <ListItem>Users</ListItem>\n                                    <ListItem>Companies</ListItem>\n                                    <ListItem>Brands</ListItem>\n                                    <ListItem>ACL</ListItem>\n                                    <ListItem>Settings</ListItem>\n                                </List>\n                            </DrawerContent>\n                        </Drawer>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Drawer>\n                        <DrawerHeader>Main Menu</DrawerHeader>\n                        <DrawerContent>\n                            <List>\n                                <ListItem>Users</ListItem>\n                                <ListItem>Companies</ListItem>\n                                <ListItem>Brands</ListItem>\n                                <ListItem>ACL</ListItem>\n                                <ListItem>Settings</ListItem>\n                            </List>\n                        </DrawerContent>\n                    </Drawer>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Drawer, DrawerHeader, DrawerContent] } }\n);\n"]}

package/Drawer/index.js.map

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

package/DynamicFieldset/Fieldset.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
 interface ChildrenRenderPropRowCallableParams {
     index: number;
-    data: Record<string, any>;
+    data: any;
 }
 interface ChildrenRenderPropRowCallable {
     (params: ChildrenRenderPropRowCallableParams): React.ReactNode;
@@ -22,13 +22,13 @@ interface ChildrenRenderProp {
     empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;
 }
 interface FieldsetProps {
-    value?: Array<Object>;
+    value?: any[];
     description?: string;
     validation?: {
         isValid: null | boolean;
         message?: string;
     };
-    onChange?: Function;
+    onChange: Function;
     children: (props: ChildrenRenderProp) => React.ReactNode;
 }
 declare class Fieldset extends React.Component<FieldsetProps> {
@@ -45,7 +45,7 @@ declare class Fieldset extends React.Component<FieldsetProps> {
     renderHeader: (cb: () => React.ReactNode) => React.ReactNode;
     renderRow: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;
     renderEmpty: (cb: () => React.ReactNode) => React.ReactNode;
-    renderComponent(): {};
+    renderComponent(): React.ReactNode;
     render(): JSX.Element;
 }
 export default Fieldset;

package/DynamicFieldset/Fieldset.js

@@ -5,7 +5,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 dotProp from "dot-prop-immutable";
 import { FormElementMessage } from "../FormElementMessage";
 import styled from "@emotion/styled";
@@ -65,9 +65,12 @@ var Fieldset = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "addData", function () {
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-      var _this$props2 = _this.props,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange;
+      var onChange = _this.props.onChange;
+      var value = _this.props.value;
+
+      if (!value) {
+        value = [];
+      }
 
       if (index < 0) {
         onChange([].concat(_toConsumableArray(value), [{}]));
@@ -83,6 +86,11 @@ var Fieldset = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderRow", function (cb) {
       var value = _this.props.value;
+
+      if (!value) {
+        return null;
+      }
+
       _this.rows = value.map(function (record, index) {
         return /*#__PURE__*/React.createElement(DynamicFieldsetRow, {
           key: index
@@ -114,21 +122,21 @@ var Fieldset = /*#__PURE__*/function (_React$Component) {
         empty: this.renderEmpty
       });
 
-      if (value.length) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, this.header, this.rows);
+      if (!value || value.length === 0) {
+        return this.empty;
       }
 
-      return this.empty;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, this.header, this.rows);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          description = _this$props3.description,
-          _this$props3$validati = _this$props3.validation,
-          validation = _this$props3$validati === void 0 ? {
+      var _this$props2 = this.props,
+          description = _this$props2.description,
+          _this$props2$validati = _this$props2.validation,
+          validation = _this$props2$validati === void 0 ? {
         isValid: null
-      } : _this$props3$validati;
+      } : _this$props2$validati;
       return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderComponent(), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
       }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
@@ -139,8 +147,7 @@ var Fieldset = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 _defineProperty(Fieldset, "defaultProps", {
-  value: [],
-  description: null
+  value: []
 });
 
 export default Fieldset;

package/DynamicFieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Fieldset.tsx"],"names":["React","dotProp","FormElementMessage","styled","DynamicFieldsetRow","paddingBottom","padding","Fieldset","add","index","addData","remove","removeData","props","value","onChange","delete","slice","cb","header","rows","map","record","data","empty","children","actions","renderHeader","row","renderRow","renderEmpty","length","description","validation","isValid","renderComponent","message","Component"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport dotProp from \"dot-prop-immutable\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\n\ninterface ChildrenRenderPropRowCallableParams {\n    index: number;\n    data: any;\n}\ninterface ChildrenRenderPropRowCallable {\n    (params: ChildrenRenderPropRowCallableParams): React.ReactNode;\n}\n\ninterface ChildrenRenderPropHeaderCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderPropEmptyCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderProp {\n    actions: {\n        add: Function;\n        remove: Function;\n    };\n    header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;\n    row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;\n    empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;\n}\n\ninterface FieldsetProps {\n    value?: any[];\n    description?: string;\n    validation?: { isValid: null | boolean; message?: string };\n    onChange: Function;\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n}\n\nconst DynamicFieldsetRow = styled(\"div\")({\n    paddingBottom: 10,\n    \"> .mdc-layout-grid\": {\n        padding: 0\n    }\n});\n\nclass Fieldset extends React.Component<FieldsetProps> {\n    static defaultProps: Partial<FieldsetProps> = {\n        value: []\n    };\n\n    header: React.ReactNode = null;\n    rows: React.ReactNode = null;\n    empty: React.ReactNode = null;\n\n    actions = {\n        add:\n            (index = -1) =>\n            () =>\n                this.addData(index),\n        remove:\n            (index = -1) =>\n            () =>\n                this.removeData(index)\n    };\n\n    removeData = (index: number) => {\n        const { value, onChange } = this.props;\n        onChange(dotProp.delete(value, index));\n    };\n\n    addData = (index = -1) => {\n        const { onChange } = this.props;\n        let value = this.props.value;\n        if (!value) {\n            value = [];\n        }\n        if (index < 0) {\n            onChange([...value, {}]);\n        } else {\n            onChange([...value.slice(0, index + 1), {}, ...value.slice(index + 1)]);\n        }\n    };\n\n    renderHeader = (cb: () => React.ReactNode): React.ReactNode => {\n        this.header = cb();\n        return null;\n    };\n\n    renderRow = (cb: ChildrenRenderPropRowCallable): React.ReactNode => {\n        const { value } = this.props;\n        if (!value) {\n            return null;\n        }\n        this.rows = value.map((record, index) => {\n            return (\n                <DynamicFieldsetRow key={index}>{cb({ data: record, index })}</DynamicFieldsetRow>\n            );\n        });\n        return null;\n    };\n\n    renderEmpty = (cb: () => React.ReactNode): React.ReactNode => {\n        this.empty = cb();\n        return null;\n    };\n\n    public renderComponent(): React.ReactNode {\n        const { value } = this.props;\n        const { children } = this.props;\n\n        children({\n            actions: this.actions,\n            header: this.renderHeader,\n            row: this.renderRow,\n            empty: this.renderEmpty\n        });\n\n        if (!value || value.length === 0) {\n            return this.empty;\n        }\n\n        return (\n            <React.Fragment>\n                {this.header}\n                {this.rows}\n            </React.Fragment>\n        );\n    }\n\n    public override render() {\n        const { description, validation = { isValid: null } } = this.props;\n\n        return (\n            <>\n                {this.renderComponent()}\n                {validation.isValid === false && (\n                    <FormElementMessage error>{validation.message}</FormElementMessage>\n                )}\n\n                {validation.isValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </>\n        );\n    }\n}\n\nexport default Fieldset;\n"]}

package/DynamicFieldset/index.js.map

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

package/Elevation/Elevation.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type ElevationProps = {
     children?: React.ReactNode;
     z: number;

package/Elevation/Elevation.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Elevation as RmwcElevation } from "@rmwc/elevation";
 
 /**

package/Elevation/Elevation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Elevation.tsx"],"names":["React","Elevation","RmwcElevation","forwardRef","props","ref","children","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAS,IAAIC,aAAtB,QAA2C,iBAA3C;;AAmBA;AACA;AACA;AACA,IAAMD,SAAS,gBAAGD,KAAK,CAACG,UAAN,CAAiB,UAACC,KAAD,EAAwBC,GAAxB,EAAgD;AAC/E,sBACI,oBAAC,aAAD;AAAe,IAAA,GAAG,EAAEA;AAApB,KAA6BD,KAA7B,GACKA,KAAK,CAACE,QADX,CADJ;AAKH,CANiB,CAAlB;AAQAL,SAAS,CAACM,WAAV,GAAwB,WAAxB;AAEA,SAASN,SAAT","sourcesContent":["import React from \"react\";\nimport { Elevation as RmwcElevation } from \"@rmwc/elevation\";\n\nexport type ElevationProps = {\n    // Any element that needs to be highlighted.\n    children?: React.ReactNode;\n\n    // Increasing this number (from 0 to 24) will increase the amount of shadow applied.\n    z: number;\n\n    // Adds smooth transitions when the z value changes.\n    transition?: boolean;\n\n    // CSS class name\n    className?: string;\n\n    // Style object\n    style?: React.CSSProperties;\n};\n\n/**\n * Elevation component visually raises any content by applying shadow.\n */\nconst Elevation = React.forwardRef((props: ElevationProps, ref: React.Ref<any>) => {\n    return (\n        <RmwcElevation ref={ref} {...props}>\n            {props.children}\n        </RmwcElevation>\n    );\n});\n\nElevation.displayName = \"Elevation\";\n\nexport { Elevation };\n"]}

package/Elevation/Elevation.stories.js

@@ -1,5 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-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 "./../Elevation/README.md";

package/Elevation/Elevation.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Elevation.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","withKnobs","boolean","select","Elevation","story","module","addDecorator","add","transition","z","Array","keys","style","padding","backgroundColor","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,EAA6BC,MAA7B,QAA2C,wBAA3C;AACA,SAASC,SAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,sBAAD,EAAyBY,MAAzB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBN,SAAnB;AAEAI,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,UAAU,GAAGP,OAAO,CAAC,YAAD,EAAe,IAAf,CAA1B;AACA,MAAMQ,CAAC,GAAGP,MAAM,CAAC,sBAAD,qBAA6BQ,KAAK,CAAC,EAAD,CAAL,CAAUC,IAAV,EAA7B,GAAgD,CAAhD,CAAhB;AAEA,MAAMC,KAAK,GAAG;AACVC,IAAAA,OAAO,EAAE,EADC;AAEVC,IAAAA,eAAe,EAAE;AAFP,GAAd;AAKA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcf,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,mBAAD,qBACI,oBAAC,SAAD;AAAW,IAAA,CAAC,EAAEU,CAAd;AAAiB,IAAA,UAAU,EAAED;AAA7B,kBACI;AAAK,IAAA,KAAK,EAAEI;AAAZ,oCADJ,CADJ,CADJ,eAMI,oBAAC,gBAAD,0DAEoBH,CAFpB,2BAEsCD,UAFtC,yIANJ,CAFJ,CADJ;AAmBH,CA9BL,EA+BI;AAAEO,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACb,SAAD;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 \"./../Elevation/README.md\";\nimport { withKnobs, boolean, select } from \"@storybook/addon-knobs\";\nimport { Elevation } from \"./Elevation\";\n\nconst story = storiesOf(\"Components/Elevation\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const transition = boolean(\"Transition\", true);\n        const z = select(\"Z (elevation height)\", [...Array(25).keys()], 1);\n\n        const style = {\n            padding: 20,\n            backgroundColor: \"white\"\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"An area with applied elevation\"}>\n                    <StorySandboxExample>\n                        <Elevation z={z} transition={transition}>\n                            <div style={style}>This is an elevated content.</div>\n                        </Elevation>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Elevation z={${z}} transition={${transition}}>\n                            <div>This is an elevated content.</div>\n                        </Elevation>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Elevation] } }\n);\n"]}

package/Elevation/index.js.map

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

package/FormElementMessage/FormElementMessage.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 declare type Props = {
     children: React.ReactNode;
     className?: string;

package/FormElementMessage/FormElementMessage.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import classnames from "classnames";
 
 var FormElementMessage = function FormElementMessage(props) {

package/FormElementMessage/FormElementMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FormElementMessage.tsx"],"names":["React","classnames","FormElementMessage","props","classNames","className","error","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;AAaA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAkB;AACzC,MAAMC,UAAU,GAAGH,UAAU,CACzB,mEADyB,EAEzBE,KAAK,CAACE,SAFmB,EAGzB;AAAE,yCAAqCF,KAAK,CAACG;AAA7C,GAHyB,CAA7B;AAMA,sBAAO;AAAK,IAAA,SAAS,EAAEF;AAAhB,KAA6BD,KAAK,CAACI,QAAnC,CAAP;AACH,CARD;;AAUA,SAASL,kBAAT","sourcesContent":["import React from \"react\";\nimport classnames from \"classnames\";\n\ntype Props = {\n    // message to display\n    children: React.ReactNode;\n\n    // optional class name\n    className?: string;\n\n    // is it an error message we're displaying\n    error?: boolean;\n};\n\nconst FormElementMessage = (props: Props) => {\n    const classNames = classnames(\n        \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n        props.className,\n        { \"mdc-text-field-helper-text--error\": props.error }\n    );\n\n    return <div className={classNames}>{props.children}</div>;\n};\n\nexport { FormElementMessage };\n"]}

package/FormElementMessage/index.js.map

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

package/FullName/FullName.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FullName.ts"],"names":["FullName","props","data","output","firstName","lastName"],"mappings":"AAOA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAkB;AAC/B,MAAQC,IAAR,GAAiBD,KAAjB,CAAQC,IAAR;;AAEA,MAAI,CAACA,IAAL,EAAW;AACP,WAAO,KAAP;AACH;;AAED,MAAIC,MAAM,GAAG,EAAb;;AACA,MAAID,IAAI,CAACE,SAAT,EAAoB;AAChBD,IAAAA,MAAM,IAAID,IAAI,CAACE,SAAf;AACH;;AAED,MAAIF,IAAI,CAACG,QAAT,EAAmB;AACfF,IAAAA,MAAM,IAAI,MAAMD,IAAI,CAACG,QAArB;AACH;;AAED,SAAOF,MAAP;AACH,CAjBD;;AAmBA,SAASH,QAAT","sourcesContent":["type Props = {\n    data?: {\n        firstName?: string;\n        lastName?: string;\n    };\n};\n\nconst FullName = (props: Props) => {\n    const { data } = props;\n\n    if (!data) {\n        return \"N/A\";\n    }\n\n    let output = \"\";\n    if (data.firstName) {\n        output += data.firstName;\n    }\n\n    if (data.lastName) {\n        output += \" \" + data.lastName;\n    }\n\n    return output;\n};\n\nexport { FullName };\n"]}

package/FullName/index.js.map

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

package/Grid/Grid.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { GridCellProps as RmwcGridCellProps, GridProps as RmwcGridProps } from "@rmwc/grid";
 import { CSSProperties } from "react";
 export declare type CellProps = RmwcGridCellProps & {

package/Grid/Grid.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { Grid as RmwcGrid, GridCell as RmwcGridCell, GridInner as RmwcGridInner } from "@rmwc/grid";
 
 /**

package/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Grid.tsx"],"names":["React","Grid","RmwcGrid","GridCell","RmwcGridCell","GridInner","RmwcGridInner","Cell","props","children","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACIC,IAAI,IAAIC,QADZ,EAEIC,QAAQ,IAAIC,YAFhB,EAGIC,SAAS,IAAIC,aAHjB,QAMO,YANP;;AAwBA;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD,EAAsB;AACtC,sBAAO,oBAAC,YAAD,EAAkBA,KAAlB,EAA0BA,KAAK,CAACC,QAAhC,CAAP;AACH,CAFM;AAcP,OAAO,IAAMJ,SAAS,GAAG,SAAZA,SAAY,CAACG,KAAD,EAA2B;AAChD,sBAAO,oBAAC,aAAD,EAAmBA,KAAnB,EAA2BA,KAAK,CAACC,QAAjC,CAAP;AACH,CAFM;AAIPJ,SAAS,CAACK,WAAV,GAAwB,WAAxB;AAEA;AACA;AACA;;AACA,OAAO,IAAMT,IAAI,GAAG,SAAPA,IAAO,CAACO,KAAD,EAAsB;AACtC,sBAAO,oBAAC,QAAD,EAAcA,KAAd,EAAsBA,KAAK,CAACC,QAA5B,CAAP;AACH,CAFM","sourcesContent":["import React from \"react\";\nimport {\n    Grid as RmwcGrid,\n    GridCell as RmwcGridCell,\n    GridInner as RmwcGridInner,\n    GridCellProps as RmwcGridCellProps,\n    GridProps as RmwcGridProps\n} from \"@rmwc/grid\";\nimport { CSSProperties } from \"react\";\n\nexport type CellProps = RmwcGridCellProps & {\n    // One or more Cell components.\n    children?: React.ReactNode;\n\n    // CSS class name that will be added to the element\n    className?: string;\n\n    style?: { [key: string]: any };\n};\n\nexport type GridProps = RmwcGridProps & {\n    className?: string;\n    style?: CSSProperties;\n};\n\n/**\n * Cell must be direct children of Grid component.\n */\nexport const Cell = (props: CellProps) => {\n    return <RmwcGridCell {...props}>{props.children}</RmwcGridCell>;\n};\n\nexport type GridInnerProps = {\n    // One or more Cell components.\n    children: React.ReactElement<typeof Cell> | React.ReactElement<typeof Cell>[];\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n\nexport const GridInner = (props: GridInnerProps) => {\n    return <RmwcGridInner {...props}>{props.children}</RmwcGridInner>;\n};\n\nGridInner.displayName = \"GridInner\";\n\n/**\n * Use Grid component to display a list of choices, once the handler is triggered.\n */\nexport const Grid = (props: GridProps) => {\n    return <RmwcGrid {...props}>{props.children}</RmwcGrid>;\n};\n"]}

package/Grid/Grid.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Grid.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","readme","Grid","Cell","story","module","add","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,IAAT,EAAeC,IAAf;AAEA,IAAMC,KAAK,GAAGP,SAAS,CAAC,iBAAD,EAAoBQ,MAApB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcL,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,IAAD,qBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,MAAM,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAjC,cADJ,eAII,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,MAAM,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAjC,eAJJ,eAOI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,MAAM,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAjC,eAPJ,eAUI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE,CAAZ;AAAe,IAAA,MAAM,EAAE,CAAvB;AAA0B,IAAA,KAAK,EAAE;AAAjC,oBAVJ,CADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;AAAEM,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACN,IAAD,EAAOC,IAAP;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 \"./../Grid/README.md\";\nimport { Grid, Cell } from \"./Grid\";\n\nconst story = storiesOf(\"Components/Grid\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple grid.\"}>\n                    <Grid>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Apples\n                        </Cell>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Oranges\n                        </Cell>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Bananas\n                        </Cell>\n                        <Cell span={3} tablet={6} phone={12}>\n                            Strawberries\n                        </Cell>\n                    </Grid>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Grid, Cell] } }\n);\n"]}

package/Grid/index.js.map

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

package/Helpers/ClassNames.d.ts

@@ -3,8 +3,9 @@
  * the provided appendClasses(string) and any class names defined inside your props.
  * To you the function just do: {...getClasses (props)}
  * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.
- * @param {*} propList
- * @param {*} appendClasses
  */
-declare const getClasses: (propList: Record<string, any>, appendClasses: string[] | string) => Record<string, any>;
+/**
+ * TODO @ts-refactor figure out propList type
+ */
+declare const getClasses: (propList: any, appendClasses: string[] | string) => any;
 export { getClasses };

package/Helpers/ClassNames.js

@@ -6,11 +6,13 @@ import classnames from "classnames";
  * the provided appendClasses(string) and any class names defined inside your props.
  * To you the function just do: {...getClasses (props)}
  * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.
- * @param {*} propList
- * @param {*} appendClasses
+ */
+
+/**
+ * TODO @ts-refactor figure out propList type
  */
 var getClasses = function getClasses(propList, appendClasses) {
-  var classes = {};
+  var classes = "";
 
   var props = _clone(propList);
 

package/Helpers/ClassNames.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClassNames.ts"],"names":["classnames","getClasses","propList","appendClasses","classes","props","hasOwnProperty","className"],"mappings":";AAAA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD,EAAgBC,aAAhB,EAAqD;AACpE,MAAIC,OAAO,GAAG,EAAd;;AACA,MAAMC,KAAK,GAAG,OAAMH,QAAN,CAAd;;AACA,MAAIA,QAAQ,CAACI,cAAT,CAAwB,WAAxB,CAAJ,EAA0C;AACtCF,IAAAA,OAAO,GAAGJ,UAAU,CAACE,QAAQ,CAACK,SAAV,CAApB;AACA,WAAOF,KAAK,CAACE,SAAb;AACH;;AAED,MAAI,OAAOJ,aAAP,KAAyB,WAA7B,EAA0C;AACtCC,IAAAA,OAAO,GAAGJ,UAAU,CAACI,OAAD,EAAUD,aAAV,CAApB;AACH;;AAEDE,EAAAA,KAAK,CAACE,SAAN,GAAkBH,OAAlB;AAEA,SAAOC,KAAP;AACH,CAfD;;AAiBA,SAASJ,UAAT","sourcesContent":["import classnames from \"classnames\";\nimport { clone } from \"lodash\";\n\n/**\n * This is a pass-through that modifies your object's props and creates the required className prop by merging\n * the provided appendClasses(string) and any class names defined inside your props.\n * To you the function just do: {...getClasses (props)}\n * and make sure you are not spreading the `props` element, as this will clone and spread your current `props` element already.\n */\n/**\n * TODO @ts-refactor figure out propList type\n */\nconst getClasses = (propList: any, appendClasses: string[] | string) => {\n    let classes = \"\";\n    const props = clone(propList);\n    if (propList.hasOwnProperty(\"className\")) {\n        classes = classnames(propList.className);\n        delete props.className;\n    }\n\n    if (typeof appendClasses !== \"undefined\") {\n        classes = classnames(classes, appendClasses);\n    }\n\n    props.className = classes;\n\n    return props;\n};\n\nexport { getClasses };\n"]}

package/Helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["getClasses"],"mappings":"AAAA,SAASA,UAAT;AAEA,SAASA,UAAT","sourcesContent":["import { getClasses } from \"./ClassNames\";\n\nexport { getClasses };\n"]}

package/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type IconProps = {
     /**
      * SvgComponent containing the svg icon

package/Icon/Icon.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { css } from "emotion";
 import classNames from "classnames";
 var webinyIcon = /*#__PURE__*/css({}, {

package/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Icon.tsx"],"names":["React","css","classNames","webinyIcon","marginLeft","width","display","Icon","props","cloneElement","icon","className","onClick"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,QAAoB,SAApB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAsBA,IAAMC,UAAU,gBAAGF,GAAG,CAClB,EADkB,EAElB;AACI,wBAAsB;AAClBG,IAAAA,UAAU,EAAE,CADM;AAElBC,IAAAA,KAAK,EAAE,SAFW;AAGlBC,IAAAA,OAAO,EAAE;AAHS;AAD1B,CAFkB,sBAAtB;AAWA;AACA;AACA;;AACA,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,CAAAC,KAAK,EAAI;AACvC,sBAAOR,KAAK,CAACS,YAAN,CAAmBD,KAAK,CAACE,IAAzB,EAA+B;AAClC,mBAAeF,KAAK,CAAC,aAAD,CADc;AAElCG,IAAAA,SAAS,EAAET,UAAU,CAAC,iCAAD,EAAoCC,UAApC,EAAgDK,KAAK,CAACG,SAAtD,CAFa;AAGlCC,IAAAA,OAAO,EAAEJ,KAAK,CAACI;AAHmB,GAA/B,CAAP;AAKH,CAND;;AAQA,SAASL,IAAT","sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type IconProps = {\n    /**\n     * SvgComponent containing the svg icon\n     */\n    icon: React.ReactElement;\n\n    /**\n     * Optional onclick handler\n     */\n    onClick?: Function;\n\n    /**\n     * CSS class to be added to the icon\n     */\n    className?: string;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n};\n\nconst webinyIcon = css(\n    {},\n    {\n        \"&.mdc-button__icon\": {\n            marginLeft: 0,\n            width: \"inherit\",\n            display: \"block\"\n        }\n    }\n);\n\n/**\n * Use Icon component to display an icon.\n */\nconst Icon: React.FC<IconProps> = props => {\n    return React.cloneElement(props.icon, {\n        \"data-testid\": props[\"data-testid\"],\n        className: classNames(\"mdc-button__icon webiny-ui-icon\", webinyIcon, props.className),\n        onClick: props.onClick\n    });\n};\n\nexport { Icon };\n"]}

package/Icon/Icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Icon.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","readme","ReactComponent","AutoRenewIcon","CloudDoneIcon","BaselineDeleteIcon","BaselineDoneIcon","Icon","story","module","add","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;AAEA,SAASC,cAAc,IAAIC,aAA3B;AACA,SAASD,cAAc,IAAIE,aAA3B;AACA,SAASF,cAAc,IAAIG,kBAA3B;AACA,SAASH,cAAc,IAAII,gBAA3B;AACA,SAASC,IAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,iBAAD,EAAoBY,MAApB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcT,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,8CACI,oBAAC,IAAD;AAAM,IAAA,IAAI,eAAE,oBAAC,aAAD;AAAZ,IADJ,uBAGI,oBAAC,IAAD;AAAM,IAAA,IAAI,eAAE,oBAAC,aAAD;AAAZ,IAHJ,uBAKI,oBAAC,IAAD;AAAM,IAAA,IAAI,eAAE,oBAAC,kBAAD;AAAZ,IALJ,uBAOI,oBAAC,IAAD;AAAM,IAAA,IAAI,eAAE,oBAAC,gBAAD;AAAZ,IAPJ,SADJ,CAFJ,CADJ;AAiBH,CApBL,EAqBI;AAAEU,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACL,IAAD;AAAd;AAAR,CArBJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Icon/README.md\";\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\";\nimport { Icon } from \"./Icon\";\n\nconst story = storiesOf(\"Components/Icon\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple icon\"}>\n                    <div>\n                        <Icon icon={<AutoRenewIcon />} />\n                        &nbsp;\n                        <Icon icon={<CloudDoneIcon />} />\n                        &nbsp;\n                        <Icon icon={<BaselineDeleteIcon />} />\n                        &nbsp;\n                        <Icon icon={<BaselineDoneIcon />} />\n                        &nbsp;\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Icon] } }\n);\n"]}

package/Icon/index.js.map

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

package/Image/Image.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-declare type Props = {
+import React from "react";
+interface Props extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
     [key: string]: any;
-};
-declare const Image: ({ ...rest }: Props) => JSX.Element;
+}
+declare const Image: React.FC<Props>;
 export { Image };

package/Image/Image.js

@@ -1,14 +1,16 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import * as React from "react"; // Accepts all props that a normal <img> element would accept.
+import React from "react"; // Accepts all props that a normal <img> element would accept.
 
 var Image = function Image(_ref) {
   var rest = Object.assign({}, _ref);
 
   var finalProps = _objectSpread({}, rest);
 
-  if (finalProps.srcSet && typeof finalProps.srcSet === "object") {
-    finalProps.srcSet = Object.keys(finalProps.srcSet).map(function (key) {
-      return "".concat(finalProps.srcSet[key], " ").concat(key);
+  var srcSet = finalProps.srcSet;
+
+  if (srcSet && typeof srcSet === "object") {
+    finalProps.srcSet = Object.keys(srcSet).map(function (key) {
+      return "".concat(srcSet[key], " ").concat(key);
     }).join(", ");
   }
 

package/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Image.tsx"],"names":["React","Image","rest","finalProps","srcSet","Object","keys","map","key","join"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB,C,CAEA;;AAMA,IAAMC,KAAsB,GAAG,SAAzBA,KAAyB,OAAiB;AAAA,MAAXC,IAAW;;AAC5C,MAAMC,UAAU,qBAAQD,IAAR,CAAhB;;AACA,MAAME,MAAM,GAAGD,UAAU,CAACC,MAA1B;;AACA,MAAIA,MAAM,IAAI,OAAOA,MAAP,KAAkB,QAAhC,EAA0C;AACtCD,IAAAA,UAAU,CAACC,MAAX,GAAoBC,MAAM,CAACC,IAAP,CAAYF,MAAZ,EACfG,GADe,CACX,UAAAC,GAAG;AAAA,uBAAOJ,MAAM,CAACI,GAAD,CAAb,cAAsBA,GAAtB;AAAA,KADQ,EAEfC,IAFe,CAEV,IAFU,CAApB;AAGH;;AAED,sBAAO,2BAASN,UAAT,CAAP;AACH,CAVD;;AAYA,SAASF,KAAT","sourcesContent":["import React from \"react\";\n\n// Accepts all props that a normal <img> element would accept.\ninterface Props\n    extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {\n    [key: string]: any;\n}\n\nconst Image: React.FC<Props> = ({ ...rest }) => {\n    const finalProps = { ...rest };\n    const srcSet = finalProps.srcSet;\n    if (srcSet && typeof srcSet === \"object\") {\n        finalProps.srcSet = Object.keys(srcSet)\n            .map(key => `${srcSet[key]} ${key}`)\n            .join(\", \");\n    }\n\n    return <img {...finalProps} />;\n};\n\nexport { Image };\n"]}

package/Image/Image.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 "./../Image/README.md";

package/Image/Image.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Image.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","withKnobs","Image","story","module","addDecorator","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,SAAT,QAA0B,wBAA1B;AAEA,SAASC,KAAT;AAEA,IAAMC,KAAK,GAAGT,SAAS,CAAC,kBAAD,EAAqBU,MAArB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBJ,SAAnB;AAEAE,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcN,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAC,iCAAX;AAA6C,IAAA,GAAG,EAAC;AAAjD,IADJ,CADJ,eAII,oBAAC,gBAAD,qBACI,oBAAC,KAAD;AAAO,IAAA,GAAG,EAAC,iCAAX;AAA6C,IAAA,GAAG,EAAC;AAAjD,IADJ,CAJJ,CAFJ,CADJ;AAaH,CAhBL,EAiBI;AAAEO,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACN,KAAD;AAAd;AAAR,CAjBJ","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 \"./../Image/README.md\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\n\nimport { Image } from \"./Image\";\n\nconst story = storiesOf(\"Components/Image\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Image src=\"http://i.pravatar.cc/150?img=49\" alt=\"Nice image.\" />\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Image src=\"http://i.pravatar.cc/150?img=49\" alt=\"Nice image.\" />\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Image] } }\n);\n"]}

package/Image/index.js.map

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

package/ImageEditor/ImageEditor.d.ts

@@ -1,45 +1,45 @@
-import * as React from "react";
+import React from "react";
 import { ImageEditorTool, ToolbarTool } from "./toolbar/types";
 interface RenderPropArgs {
     render: Function;
     getCanvasDataUrl: () => string;
-    activeTool?: ImageEditorTool;
-    applyActiveTool: Function;
-    cancelActiveTool: Function;
+    activeTool: ImageEditorTool | null;
+    applyActiveTool: () => Promise<void>;
+    cancelActiveTool: () => Promise<void>;
 }
-interface PropsOptions {
+interface ImageEditorPropsPropsOptions {
     autoEnable: boolean;
 }
-interface Props {
+interface ImageEditorProps {
     src: string;
     tools: ToolbarTool[];
     options?: {
-        flip: PropsOptions;
-        filter: PropsOptions;
-        crop: PropsOptions;
-        rotate: PropsOptions;
+        flip: ImageEditorPropsPropsOptions;
+        filter: ImageEditorPropsPropsOptions;
+        crop: ImageEditorPropsPropsOptions;
+        rotate: ImageEditorPropsPropsOptions;
     };
     onToolActivate?: Function;
     onToolDeactivate?: Function;
     children?: (props: RenderPropArgs) => React.ReactNode;
 }
-interface State {
-    tool?: ImageEditorTool;
+interface ImageEditorState {
+    tool: ImageEditorTool | null;
     src: string;
 }
-declare class ImageEditor extends React.Component<Props, State> {
-    static defaultProps: Partial<Props>;
-    state: State;
+declare class ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {
+    static defaultProps: Partial<ImageEditorProps>;
+    state: ImageEditorState;
     canvas: React.RefObject<HTMLCanvasElement>;
-    image: HTMLImageElement;
+    image?: HTMLImageElement;
     componentDidMount(): void;
-    updateCanvas: () => void;
-    activateTool: (tool: ToolbarTool | ImageEditorTool) => void;
-    deactivateTool: () => void;
-    getCanvasDataUrl: () => string;
-    applyActiveTool: () => Promise<void>;
-    cancelActiveTool: () => Promise<void>;
-    getToolOptions: (tool: ImageEditorTool) => {};
-    render(): {};
+    private readonly updateCanvas;
+    private readonly activateTool;
+    private readonly deactivateTool;
+    readonly getCanvasDataUrl: () => string;
+    private readonly applyActiveTool;
+    private readonly cancelActiveTool;
+    private readonly getToolOptions;
+    render(): React.ReactNode;
 }
 export { ImageEditor };

package/ImageEditor/ImageEditor.js

@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from "react";
+import React from "react";
 import { flip, filter, crop, rotate } from "./toolbar";
 import styled from "@emotion/styled";
 import classNames from "classnames";
@@ -93,7 +93,7 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "canvas", /*#__PURE__*/React.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "image", null);
+    _defineProperty(_assertThisInitialized(_this), "image", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "updateCanvas", function () {
       var src = _this.props.src;
@@ -168,22 +168,20 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
               return _context.abrupt("return");
 
             case 3:
-              _context.t0 = tool.apply;
-
-              if (!_context.t0) {
-                _context.next = 7;
+              if (!tool.apply) {
+                _context.next = 6;
                 break;
               }
 
-              _context.next = 7;
+              _context.next = 6;
               return tool.apply({
                 canvas: _this.canvas
               });
 
-            case 7:
+            case 6:
               _this.deactivateTool();
 
-            case 8:
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -207,22 +205,20 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
               return _context2.abrupt("return");
 
             case 3:
-              _context2.t0 = tool.cancel;
-
-              if (!_context2.t0) {
-                _context2.next = 7;
+              if (!tool.cancel) {
+                _context2.next = 6;
                 break;
               }
 
-              _context2.next = 7;
+              _context2.next = 6;
               return tool.cancel({
                 canvas: _this.canvas
               });
 
-            case 7:
+            case 6:
               _this.deactivateTool();
 
-            case 8:
+            case 7:
             case "end":
               return _context2.stop();
           }
@@ -302,9 +298,13 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         image: this.image,
         canvas: this.canvas
       }), /*#__PURE__*/React.createElement(ApplyCancelActions, null, /*#__PURE__*/React.createElement(ButtonSecondary, {
-        onClick: this.cancelActiveTool
+        onClick: function onClick() {
+          _this3.cancelActiveTool();
+        }
       }, "Cancel"), "\xA0", /*#__PURE__*/React.createElement(ButtonPrimary, {
-        onClick: this.applyActiveTool
+        onClick: function onClick() {
+          _this3.applyActiveTool();
+        }
       }, "Apply"))) : /*#__PURE__*/React.createElement("div", {
         style: {
           textAlign: "center"