@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.40876133bb

package/Grid/index.js

@@ -1 +1,18 @@
-export * from "./Grid";
+"use strict";
+
+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;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Grid[key];
+    }
+  });
+});

package/Grid/index.js.map

@@ -0,0 +1 @@
+{"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.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: any, appendClasses: any) => any;
+/**
+ * TODO @ts-refactor figure out propList type
+ */
+declare const getClasses: (propList: any, appendClasses: string[] | string) => any;
 export { getClasses };

package/Helpers/ClassNames.js

@@ -1,30 +1,41 @@
-import _clone from "lodash/clone";
-import classnames from "classnames";
+"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.
- * @param {*} propList
- * @param {*} appendClasses
  */
-var getClasses = function getClasses(propList, appendClasses) {
-  var classes = {};
 
-  var props = _clone(propList);
+/**
+ * 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 = classnames(propList.className);
+    classes = (0, _classnames.default)(propList.className);
     delete props.className;
   }
 
   if (typeof appendClasses !== "undefined") {
-    classes = classnames(classes, appendClasses);
+    classes = (0, _classnames.default)(classes, appendClasses);
   }
 
   props.className = classes;
   return props;
 };
 
-export { getClasses };
+exports.getClasses = getClasses;

package/Helpers/ClassNames.js.map

@@ -0,0 +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"}

package/Helpers/index.js

@@ -1,2 +1,13 @@
-import { getClasses } from "./ClassNames";
-export { getClasses };
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getClasses", {
+  enumerable: true,
+  get: function get() {
+    return _ClassNames.getClasses;
+  }
+});
+
+var _ClassNames = require("./ClassNames");

package/Helpers/index.js.map

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

package/Icon/Icon.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
+import React from "react";
 export declare type IconProps = {
     /**
      * SvgComponent containing the svg icon
      */
-    icon: React.ReactElement<any>;
+    icon: React.ReactElement;
     /**
      * Optional onclick handler
      */
@@ -16,9 +16,6 @@ export declare type IconProps = {
 };
 /**
  * Use Icon component to display an icon.
- * @param props
- * @returns {*}
- * @constructor
  */
-declare const Icon: (props: IconProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+declare const Icon: React.FC<IconProps>;
 export { Icon };

package/Icon/Icon.js

@@ -1,7 +1,19 @@
-import * as React from "react";
-import { css } from "emotion";
-import classNames from "classnames";
-var webinyIcon = /*#__PURE__*/css({}, {
+"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,
     width: "inherit",
@@ -10,17 +22,14 @@ var webinyIcon = /*#__PURE__*/css({}, {
 }, "label:webinyIcon;");
 /**
  * Use Icon component to display an icon.
- * @param props
- * @returns {*}
- * @constructor
  */
 
 var Icon = function Icon(props) {
-  return /*#__PURE__*/React.cloneElement(props.icon, {
+  return /*#__PURE__*/_react.default.cloneElement(props.icon, {
     "data-testid": props["data-testid"],
-    className: classNames("mdc-button__icon webiny-ui-icon", webinyIcon, props.className),
+    className: (0, _classnames.default)("mdc-button__icon webiny-ui-icon", webinyIcon, props.className),
     onClick: props.onClick
   });
 };
 
-export { Icon };
+exports.Icon = Icon;

package/Icon/Icon.js.map

@@ -0,0 +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"}

package/Icon/Icon.stories.js

@@ -1,27 +1,40 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandbox } from "@webiny/storybook-utils/Story";
-import readme from "./../Icon/README.md";
-import { ReactComponent as AutoRenewIcon } from "@svgr/webpack!./svg/baseline-autorenew-24px.svg";
-import { ReactComponent as CloudDoneIcon } from "@svgr/webpack!./svg/baseline-cloud_done-24px.svg";
-import { ReactComponent as BaselineDeleteIcon } from "@svgr/webpack!./svg/baseline-delete-24px.svg";
-import { ReactComponent as BaselineDoneIcon } from "@svgr/webpack!./svg/baseline-done-24px.svg";
-import { Icon } from "./Icon";
-var story = storiesOf("Components/Icon", module);
+"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.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "A simple icon"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(AutoRenewIcon, null)
-  }), "\xA0", /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(CloudDoneIcon, null)
-  }), "\xA0", /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(BaselineDeleteIcon, null)
-  }), "\xA0", /*#__PURE__*/React.createElement(Icon, {
-    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineAutorenew24px.ReactComponent, null)
+  }), "\xA0", /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineCloud_done24px.ReactComponent, null)
+  }), "\xA0", /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDelete24px.ReactComponent, null)
+  }), "\xA0", /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
   }), "\xA0")));
 }, {
   info: {
-    propTables: [Icon]
+    propTables: [_Icon.Icon]
   }
 });

package/Icon/Icon.stories.js.map

@@ -0,0 +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"}

package/Icon/index.js

@@ -1 +1,18 @@
-export * from "./Icon";
+"use strict";
+
+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;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Icon[key];
+    }
+  });
+});

package/Icon/index.js.map

@@ -0,0 +1 @@
+{"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.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
-declare type Props = {
+/// <reference types="web" />
+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,18 +1,30 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import * as React from "react"; // Accepts all props that a normal <img> element would accept.
+"use strict";
 
-var Image = function Image(_ref) {
-  var rest = Object.assign({}, _ref);
+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 finalProps = _objectSpread({}, rest);
+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 (finalProps.srcSet && typeof finalProps.srcSet === "object") {
-    finalProps.srcSet = Object.keys(finalProps.srcSet).map(function (key) {
-      return "".concat(finalProps.srcSet[key], " ").concat(key);
+  if (srcSet && typeof srcSet === "object") {
+    finalProps.srcSet = Object.keys(srcSet).map(function (key) {
+      return "".concat(srcSet[key], " ").concat(key);
     }).join(", ");
   }
 
-  return /*#__PURE__*/React.createElement("img", finalProps);
+  return /*#__PURE__*/_react.default.createElement("img", finalProps);
 };
 
-export { Image };
+exports.Image = Image;

package/Image/Image.js.map

@@ -0,0 +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"}

package/Image/Image.stories.js

@@ -1,21 +1,31 @@
-import * as 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";
-import { withKnobs } from "@storybook/addon-knobs";
-import { Image } from "./Image";
-var story = storiesOf("Components/Image", module);
-story.addDecorator(withKnobs);
+"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 () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(Image, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_Image.Image, {
     src: "http://i.pravatar.cc/150?img=49",
     alt: "Nice image."
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, /*#__PURE__*/React.createElement(Image, {
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, /*#__PURE__*/_react.default.createElement(_Image.Image, {
     src: "http://i.pravatar.cc/150?img=49",
     alt: "Nice image."
   }))));
 }, {
   info: {
-    propTables: [Image]
+    propTables: [_Image.Image]
   }
 });

package/Image/Image.stories.js.map

@@ -0,0 +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"}

package/Image/index.js

@@ -1 +1,18 @@
-export * from "./Image";
+"use strict";
+
+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;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Image[key];
+    }
+  });
+});

package/Image/index.js.map

@@ -0,0 +1 @@
+{"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.d.ts

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