@webiny/ui 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

package/Grid/Grid.stories.js

@@ -1,17 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _Story = require("@webiny/storybook-utils/Story");
-
 var _README = _interopRequireDefault(require("./../Grid/README.md"));
-
 var _Grid = require("./Grid");
-
 var story = (0, _react2.storiesOf)("Components/Grid", module);
 story.add("usage", function () {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {

package/Grid/Grid.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Grid","Cell"],"sources":["Grid.stories.tsx"],"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"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,YADJ,eAII,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,aAJJ,eAOI,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,aAPJ,eAUI,6BAAC,UAAD;IAAM,IAAI,EAAE,CAAZ;IAAe,MAAM,EAAE,CAAvB;IAA0B,KAAK,EAAE;EAAjC,kBAVJ,CADJ,CAFJ,CADJ;AAqBH,CAxBL,EAyBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD,EAAOC,UAAP;EAAd;AAAR,CAzBJ"}
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Grid","Cell"],"sources":["Grid.stories.tsx"],"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"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,iBAAiB,EAAEC,MAAM,CAAC;AAElDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAiB,gBAClC,6BAAC,UAAI,qBACD,6BAAC,UAAI;IAAC,IAAI,EAAE,CAAE;IAAC,MAAM,EAAE,CAAE;IAAC,KAAK,EAAE;EAAG,GAAC,QAErC,CAAO,eACP,6BAAC,UAAI;IAAC,IAAI,EAAE,CAAE;IAAC,MAAM,EAAE,CAAE;IAAC,KAAK,EAAE;EAAG,GAAC,SAErC,CAAO,eACP,6BAAC,UAAI;IAAC,IAAI,EAAE,CAAE;IAAC,MAAM,EAAE,CAAE;IAAC,KAAK,EAAE;EAAG,GAAC,SAErC,CAAO,eACP,6BAAC,UAAI;IAAC,IAAI,EAAE,CAAE;IAAC,MAAM,EAAE,CAAE;IAAC,KAAK,EAAE;EAAG,GAAC,cAErC,CAAO,CACJ,CACI,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAI,EAAEC,UAAI;EAAE;AAAE,CAAC,CACzC"}

package/Grid/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Grid = require("./Grid");
-
 Object.keys(_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Grid[key]) return;

package/Grid/index.js.map

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

package/Helpers/ClassNames.js

@@ -1,41 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getClasses = void 0;
-
 var _clone2 = _interopRequireDefault(require("lodash/clone"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 /**
  * This is a pass-through that modifies your object's props and creates the required className prop by merging
  * 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.
  */
-
 /**
  * TODO @ts-refactor figure out propList type
  */
 var getClasses = function getClasses(propList, appendClasses) {
   var classes = "";
   var props = (0, _clone2.default)(propList);
-
   if (propList.hasOwnProperty("className")) {
     classes = (0, _classnames.default)(propList.className);
     delete props.className;
   }
-
   if (typeof appendClasses !== "undefined") {
     classes = (0, _classnames.default)(classes, appendClasses);
   }
-
   props.className = classes;
   return props;
 };
-
 exports.getClasses = getClasses;

package/Helpers/ClassNames.js.map

@@ -1 +1 @@
-{"version":3,"names":["getClasses","propList","appendClasses","classes","props","hasOwnProperty","classnames","className"],"sources":["ClassNames.ts"],"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"],"mappings":";;;;;;;;;;;AAAA;;AAGA;AACA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD,EAAgBC,aAAhB,EAAqD;EACpE,IAAIC,OAAO,GAAG,EAAd;EACA,IAAMC,KAAK,GAAG,qBAAMH,QAAN,CAAd;;EACA,IAAIA,QAAQ,CAACI,cAAT,CAAwB,WAAxB,CAAJ,EAA0C;IACtCF,OAAO,GAAG,IAAAG,mBAAA,EAAWL,QAAQ,CAACM,SAApB,CAAV;IACA,OAAOH,KAAK,CAACG,SAAb;EACH;;EAED,IAAI,OAAOL,aAAP,KAAyB,WAA7B,EAA0C;IACtCC,OAAO,GAAG,IAAAG,mBAAA,EAAWH,OAAX,EAAoBD,aAApB,CAAV;EACH;;EAEDE,KAAK,CAACG,SAAN,GAAkBJ,OAAlB;EAEA,OAAOC,KAAP;AACH,CAfD"}
+{"version":3,"names":["getClasses","propList","appendClasses","classes","props","hasOwnProperty","classnames","className"],"sources":["ClassNames.ts"],"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"],"mappings":";;;;;;;;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAa,EAAEC,aAAgC,EAAK;EACpE,IAAIC,OAAO,GAAG,EAAE;EAChB,IAAMC,KAAK,GAAG,qBAAMH,QAAQ,CAAC;EAC7B,IAAIA,QAAQ,CAACI,cAAc,CAAC,WAAW,CAAC,EAAE;IACtCF,OAAO,GAAG,IAAAG,mBAAU,EAACL,QAAQ,CAACM,SAAS,CAAC;IACxC,OAAOH,KAAK,CAACG,SAAS;EAC1B;EAEA,IAAI,OAAOL,aAAa,KAAK,WAAW,EAAE;IACtCC,OAAO,GAAG,IAAAG,mBAAU,EAACH,OAAO,EAAED,aAAa,CAAC;EAChD;EAEAE,KAAK,CAACG,SAAS,GAAGJ,OAAO;EAEzB,OAAOC,KAAK;AAChB,CAAC;AAAC"}

package/Helpers/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "getClasses", {
     return _ClassNames.getClasses;
   }
 });
-
 var _ClassNames = require("./ClassNames");

package/Helpers/index.js.map

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

package/Icon/Icon.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Icon = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _emotion = require("emotion");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var webinyIcon = /*#__PURE__*/(0, _emotion.css)({}, {
   "&.mdc-button__icon": {
     marginLeft: 0,
@@ -20,10 +15,10 @@ var webinyIcon = /*#__PURE__*/(0, _emotion.css)({}, {
     display: "block"
   }
 }, "label:webinyIcon;");
+
 /**
  * Use Icon component to display an icon.
  */
-
 var Icon = function Icon(props) {
   return /*#__PURE__*/_react.default.cloneElement(props.icon, {
     "data-testid": props["data-testid"],
@@ -31,5 +26,4 @@ var Icon = function Icon(props) {
     onClick: props.onClick
   });
 };
-
 exports.Icon = Icon;

package/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"names":["webinyIcon","css","marginLeft","width","display","Icon","props","React","cloneElement","icon","className","classNames","onClick"],"sources":["Icon.tsx"],"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"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAsBA,IAAMA,UAAU,gBAAG,IAAAC,YAAA,EACf,EADe,EAEf;EACI,sBAAsB;IAClBC,UAAU,EAAE,CADM;IAElBC,KAAK,EAAE,SAFW;IAGlBC,OAAO,EAAE;EAHS;AAD1B,CAFe,sBAAnB;AAWA;AACA;AACA;;AACA,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,CAAAC,KAAK,EAAI;EACvC,oBAAOC,cAAA,CAAMC,YAAN,CAAmBF,KAAK,CAACG,IAAzB,EAA+B;IAClC,eAAeH,KAAK,CAAC,aAAD,CADc;IAElCI,SAAS,EAAE,IAAAC,mBAAA,EAAW,iCAAX,EAA8CX,UAA9C,EAA0DM,KAAK,CAACI,SAAhE,CAFuB;IAGlCE,OAAO,EAAEN,KAAK,CAACM;EAHmB,CAA/B,CAAP;AAKH,CAND"}
+{"version":3,"names":["webinyIcon","css","marginLeft","width","display","Icon","props","React","cloneElement","icon","className","classNames","onClick"],"sources":["Icon.tsx"],"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"],"mappings":";;;;;;;AAAA;AACA;AACA;AAsBA,IAAMA,UAAU,gBAAG,IAAAC,YAAG,EAClB,CAAC,CAAC,EACF;EACI,oBAAoB,EAAE;IAClBC,UAAU,EAAE,CAAC;IACbC,KAAK,EAAE,SAAS;IAChBC,OAAO,EAAE;EACb;AACJ,CAAC,sBACJ;;AAED;AACA;AACA;AACA,IAAMC,IAAyB,GAAG,SAA5BA,IAAyB,CAAGC,KAAK,EAAI;EACvC,oBAAOC,cAAK,CAACC,YAAY,CAACF,KAAK,CAACG,IAAI,EAAE;IAClC,aAAa,EAAEH,KAAK,CAAC,aAAa,CAAC;IACnCI,SAAS,EAAE,IAAAC,mBAAU,EAAC,iCAAiC,EAAEX,UAAU,EAAEM,KAAK,CAACI,SAAS,CAAC;IACrFE,OAAO,EAAEN,KAAK,CAACM;EACnB,CAAC,CAAC;AACN,CAAC;AAAC"}

package/Icon/Icon.stories.js

@@ -1,25 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _Story = require("@webiny/storybook-utils/Story");
-
 var _README = _interopRequireDefault(require("./../Icon/README.md"));
-
 var _baselineAutorenew24px = require("./svg/baseline-autorenew-24px.svg");
-
 var _baselineCloud_done24px = require("./svg/baseline-cloud_done-24px.svg");
-
 var _baselineDelete24px = require("./svg/baseline-delete-24px.svg");
-
 var _baselineDone24px = require("./svg/baseline-done-24px.svg");
-
 var _Icon = require("./Icon");
-
 var story = (0, _react2.storiesOf)("Components/Icon", module);
 story.add("usage", function () {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {

package/Icon/Icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Icon"],"sources":["Icon.stories.tsx"],"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"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,uDACI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,qCAAD;EAAZ,EADJ,uBAGI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,sCAAD;EAAZ,EAHJ,uBAKI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,kCAAD;EAAZ,EALJ,uBAOI,6BAAC,UAAD;IAAM,IAAI,eAAE,6BAAC,gCAAD;EAAZ,EAPJ,SADJ,CAFJ,CADJ;AAiBH,CApBL,EAqBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD;EAAd;AAAR,CArBJ"}
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Icon"],"sources":["Icon.stories.tsx"],"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"],"mappings":";;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,iBAAiB,EAAEC,MAAM,CAAC;AAElDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAgB,gBACjC,uDACI,6BAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,qCAAa;EAAI,EAAG,QAEjC,4CAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,sCAAa;EAAI,EAAG,QAEjC,4CAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,kCAAkB;EAAI,EAAG,QAEtC,4CAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,gCAAgB;EAAI,EAAG,QAExC,CAAM,CACK,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAI;EAAE;AAAE,CAAC,CACnC"}

package/Icon/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Icon = require("./Icon");
-
 Object.keys(_Icon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Icon[key]) return;

package/Icon/index.js.map

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

package/Image/Image.js

@@ -1,30 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Image = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var Image = function Image(_ref) {
   var rest = Object.assign({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
   var finalProps = (0, _objectSpread2.default)({}, rest);
   var srcSet = finalProps.srcSet;
-
   if (srcSet && typeof srcSet === "object") {
     finalProps.srcSet = Object.keys(srcSet).map(function (key) {
       return "".concat(srcSet[key], " ").concat(key);
     }).join(", ");
   }
-
   return /*#__PURE__*/_react.default.createElement("img", finalProps);
 };
-
 exports.Image = Image;

package/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["Image","rest","finalProps","srcSet","Object","keys","map","key","join"],"sources":["Image.tsx"],"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"],"mappings":";;;;;;;;;;;;;AAAA;;AAQA,IAAMA,KAAsB,GAAG,SAAzBA,KAAyB,OAAiB;EAAA,IAAXC,IAAW;EAC5C,IAAMC,UAAU,mCAAQD,IAAR,CAAhB;EACA,IAAME,MAAM,GAAGD,UAAU,CAACC,MAA1B;;EACA,IAAIA,MAAM,IAAI,OAAOA,MAAP,KAAkB,QAAhC,EAA0C;IACtCD,UAAU,CAACC,MAAX,GAAoBC,MAAM,CAACC,IAAP,CAAYF,MAAZ,EACfG,GADe,CACX,UAAAC,GAAG;MAAA,iBAAOJ,MAAM,CAACI,GAAD,CAAb,cAAsBA,GAAtB;IAAA,CADQ,EAEfC,IAFe,CAEV,IAFU,CAApB;EAGH;;EAED,oBAAO,oCAASN,UAAT,CAAP;AACH,CAVD"}
+{"version":3,"names":["Image","rest","finalProps","srcSet","Object","keys","map","key","join"],"sources":["Image.tsx"],"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"],"mappings":";;;;;;;;;AAAA;AAQA,IAAMA,KAAsB,GAAG,SAAzBA,KAAsB,OAAoB;EAAA,IAAXC,IAAI;EACrC,IAAMC,UAAU,mCAAQD,IAAI,CAAE;EAC9B,IAAME,MAAM,GAAGD,UAAU,CAACC,MAAM;EAChC,IAAIA,MAAM,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;IACtCD,UAAU,CAACC,MAAM,GAAGC,MAAM,CAACC,IAAI,CAACF,MAAM,CAAC,CAClCG,GAAG,CAAC,UAAAC,GAAG;MAAA,iBAAOJ,MAAM,CAACI,GAAG,CAAC,cAAIA,GAAG;IAAA,CAAE,CAAC,CACnCC,IAAI,CAAC,IAAI,CAAC;EACnB;EAEA,oBAAO,oCAASN,UAAU,CAAI;AAClC,CAAC;AAAC"}

package/Image/Image.stories.js

@@ -1,19 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _Story = require("@webiny/storybook-utils/Story");
-
 var _README = _interopRequireDefault(require("./../Image/README.md"));
-
 var _addonKnobs = require("@storybook/addon-knobs");
-
 var _Image = require("./Image");
-
 var story = (0, _react2.storiesOf)("Components/Image", module);
 story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {

package/Image/Image.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","Image"],"sources":["Image.stories.tsx"],"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"],"mappings":";;;;AAAA;;AACA;;AACA;;AAQA;;AACA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,YAAD;IAAO,GAAG,EAAC,iCAAX;IAA6C,GAAG,EAAC;EAAjD,EADJ,CADJ,eAII,6BAAC,uBAAD,qBACI,6BAAC,YAAD;IAAO,GAAG,EAAC,iCAAX;IAA6C,GAAG,EAAC;EAAjD,EADJ,CAJJ,CAFJ,CADJ;AAaH,CAhBL,EAiBI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,YAAD;EAAd;AAAR,CAjBJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","Image"],"sources":["Image.stories.tsx"],"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"],"mappings":";;;AAAA;AACA;AACA;AAQA;AACA;AAEA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,kBAAkB,EAAEC,MAAM,CAAC;AACnDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB,6BAAC,YAAK;IAAC,GAAG,EAAC,iCAAiC;IAAC,GAAG,EAAC;EAAa,EAAG,CAC/C,eACtB,6BAAC,uBAAgB,qBACb,6BAAC,YAAK;IAAC,GAAG,EAAC,iCAAiC;IAAC,GAAG,EAAC;EAAa,EAAG,CAClD,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,YAAK;EAAE;AAAE,CAAC,CACpC"}

package/Image/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Image = require("./Image");
-
 Object.keys(_Image).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Image[key]) return;

package/Image/index.js.map

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

package/ImageEditor/ImageEditor.js

@@ -1,44 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageEditor = void 0;
-
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _toolbar = require("./toolbar");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _Button = require("../Button");
-
 var _loadScript = _interopRequireDefault(require("load-script"));
-
 /**
  * Package load-script does not have types.
  */
 // @ts-ignore
+
 var toolbar = {
   flip: _toolbar.flip,
   filter: _toolbar.filter,
@@ -80,32 +65,24 @@ var ApplyCancelActions = /*#__PURE__*/(0, _styled.default)("div", {
 })({
   textAlign: "center"
 });
-
 var initScripts = function initScripts() {
   return new Promise(function (resolve) {
     // @ts-ignore
     if (window.Caman) {
       return resolve();
     }
-
     return (0, _loadScript.default)("https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js", resolve);
   });
 };
-
 var ImageEditor = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ImageEditor, _React$Component);
-
   var _super = (0, _createSuper2.default)(ImageEditor);
-
   function ImageEditor() {
     var _this;
-
     (0, _classCallCheck2.default)(this, ImageEditor);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       tool: null,
@@ -117,7 +94,6 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
       var src = _this.props.src;
       _this.image = new window.Image();
       var canvas = _this.canvas.current;
-
       if (canvas) {
         _this.image.onload = function () {
           if (_this.image) {
@@ -127,7 +103,6 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
             ctx.drawImage(_this.image, 0, 0);
           }
         };
-
         _this.image.src = src;
       }
     });
@@ -135,7 +110,6 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
       if (typeof tool === "string") {
         tool = toolbar[tool];
       }
-
       _this.setState({
         tool: tool
       }, function () {
@@ -153,121 +127,93 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCanvasDataUrl", function () {
       var canvas = _this.canvas.current;
-
       if (canvas) {
         var src = _this.props.src;
-
         if (src.startsWith("data:image/jpeg;")) {
           return canvas.toDataURL("image/jpeg", 1.0);
         }
-
         return canvas.toDataURL();
       }
-
       return "";
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
       var tool;
       return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              tool = _this.state.tool;
-
-              if (tool) {
-                _context.next = 3;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 3:
-              if (!tool.apply) {
-                _context.next = 6;
-                break;
-              }
-
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            tool = _this.state.tool;
+            if (tool) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            if (!tool.apply) {
               _context.next = 6;
-              return tool.apply({
-                canvas: _this.canvas
-              });
-
-            case 6:
-              _this.deactivateTool();
-
-            case 7:
-            case "end":
-              return _context.stop();
-          }
+              break;
+            }
+            _context.next = 6;
+            return tool.apply({
+              canvas: _this.canvas
+            });
+          case 6:
+            _this.deactivateTool();
+          case 7:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     })));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
       var tool;
       return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              tool = _this.state.tool;
-
-              if (tool) {
-                _context2.next = 3;
-                break;
-              }
-
-              return _context2.abrupt("return");
-
-            case 3:
-              if (!tool.cancel) {
-                _context2.next = 6;
-                break;
-              }
-
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            tool = _this.state.tool;
+            if (tool) {
+              _context2.next = 3;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 3:
+            if (!tool.cancel) {
               _context2.next = 6;
-              return tool.cancel({
-                canvas: _this.canvas
-              });
-
-            case 6:
-              _this.deactivateTool();
-
-            case 7:
-            case "end":
-              return _context2.stop();
-          }
+              break;
+            }
+            _context2.next = 6;
+            return tool.cancel({
+              canvas: _this.canvas
+            });
+          case 6:
+            _this.deactivateTool();
+          case 7:
+          case "end":
+            return _context2.stop();
         }
       }, _callee2);
     })));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getToolOptions", function (tool) {
       var options = _this.props.options;
-
       if (!options || typeof options !== "object") {
         return {};
       }
-
       return options[tool.name] || {};
     });
     return _this;
   }
-
   (0, _createClass2.default)(ImageEditor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-
       initScripts().then(function () {
         _this2.updateCanvas();
-
         setTimeout(function () {
           var options = _this2.props.options;
-
           if (!options || typeof options !== "object") {
             return;
           }
-
           for (var key in options) {
             var option = options[key];
-
             if (option.autoEnable === true) {
               var tool = toolbar[key];
               tool && _this2.activateTool(tool);
@@ -281,20 +227,16 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this3 = this;
-
       var _this$props = this.props,
-          src = _this$props.src,
-          tools = _this$props.tools,
-          children = _this$props.children;
+        src = _this$props.src,
+        tools = _this$props.tools,
+        children = _this$props.children;
       var tool = this.state.tool;
-
       var editor = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Toolbar, null, tools.map(function (key) {
         var tool = toolbar[key];
-
         if (!tool) {
           return null;
         }
-
         return /*#__PURE__*/_react.default.createElement("div", {
           key: key,
           className: (0, _classnames.default)({
@@ -336,7 +278,6 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         },
         ref: this.canvas
       })));
-
       if (typeof children === "function") {
         return children({
           render: function render() {
@@ -349,13 +290,11 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
           cancelActiveTool: this.cancelActiveTool
         });
       }
-
       return editor;
     }
   }]);
   return ImageEditor;
 }(_react.default.Component);
-
 exports.ImageEditor = ImageEditor;
 (0, _defineProperty2.default)(ImageEditor, "defaultProps", {
   tools: ["crop", "flip", "rotate", "filter"]