@webiny/ui 5.27.0 → 5.28.0-beta.0

package/Chips/index.js

@@ -1,3 +1,44 @@
-export * from "./Chips";
-export * from "./Chip";
-export * from "./ChipIcon";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Chips = require("./Chips");
+
+Object.keys(_Chips).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Chips[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Chips[key];
+    }
+  });
+});
+
+var _Chip = require("./Chip");
+
+Object.keys(_Chip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Chip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Chip[key];
+    }
+  });
+});
+
+var _ChipIcon = require("./ChipIcon");
+
+Object.keys(_ChipIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChipIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ChipIcon[key];
+    }
+  });
+});

package/Chips/index.js.map

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

package/Chips/styles.js

@@ -1,5 +1,13 @@
-import { css } from "emotion";
-export var chipIconWrapper = /*#__PURE__*/css({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.disabledChips = exports.chipIconWrapper = void 0;
+
+var _emotion = require("emotion");
+
+var chipIconWrapper = /*#__PURE__*/(0, _emotion.css)({
   ".mdc-chip__icon": {
     svg: {
       width: 18,
@@ -11,7 +19,9 @@ export var chipIconWrapper = /*#__PURE__*/css({
     }
   }
 }, "label:chipIconWrapper;");
-export var disabledChips = /*#__PURE__*/css({
+exports.chipIconWrapper = chipIconWrapper;
+var disabledChips = /*#__PURE__*/(0, _emotion.css)({
   opacity: 0.75,
   pointerEvents: "none"
-}, "label:disabledChips;");
+}, "label:disabledChips;");
+exports.disabledChips = disabledChips;

package/Chips/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["styles.ts"],"names":["css","chipIconWrapper","svg","width","height","boxSizing","display","disabledChips","opacity","pointerEvents"],"mappings":"AAAA,SAASA,GAAT,QAAoB,SAApB;AAEA,OAAO,IAAMC,eAAe,gBAAGD,GAAG,CAAC;AAC/B,qBAAmB;AACfE,IAAAA,GAAG,EAAE;AACDC,MAAAA,KAAK,EAAE,EADN;AAEDC,MAAAA,MAAM,EAAE,EAFP;AAGD,oCAA8B;AAC1BC,QAAAA,SAAS,EAAE,YADe;AAE1BC,QAAAA,OAAO,EAAE;AAFiB;AAH7B;AADU;AADY,CAAD,2BAA3B;AAaP,OAAO,IAAMC,aAAa,gBAAGP,GAAG,CAAC;AAC7BQ,EAAAA,OAAO,EAAE,IADoB;AAE7BC,EAAAA,aAAa,EAAE;AAFc,CAAD,yBAAzB","sourcesContent":["import { css } from \"emotion\";\n\nexport const chipIconWrapper = css({\n    \".mdc-chip__icon\": {\n        svg: {\n            width: 18,\n            height: 18,\n            \"&.mdc-chip__icon--trailing\": {\n                boxSizing: \"border-box\",\n                display: \"flex\"\n            }\n        }\n    }\n});\n\nexport const disabledChips = css({\n    opacity: 0.75,\n    pointerEvents: \"none\"\n});\n"]}
+{"version":3,"names":["chipIconWrapper","css","svg","width","height","boxSizing","display","disabledChips","opacity","pointerEvents"],"sources":["styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\nexport const chipIconWrapper = css({\n    \".mdc-chip__icon\": {\n        svg: {\n            width: 18,\n            height: 18,\n            \"&.mdc-chip__icon--trailing\": {\n                boxSizing: \"border-box\",\n                display: \"flex\"\n            }\n        }\n    }\n});\n\nexport const disabledChips = css({\n    opacity: 0.75,\n    pointerEvents: \"none\"\n});\n"],"mappings":";;;;;;;AAAA;;AAEO,IAAMA,eAAe,gBAAG,IAAAC,YAAA,EAAI;EAC/B,mBAAmB;IACfC,GAAG,EAAE;MACDC,KAAK,EAAE,EADN;MAEDC,MAAM,EAAE,EAFP;MAGD,8BAA8B;QAC1BC,SAAS,EAAE,YADe;QAE1BC,OAAO,EAAE;MAFiB;IAH7B;EADU;AADY,CAAJ,2BAAxB;;AAaA,IAAMC,aAAa,gBAAG,IAAAN,YAAA,EAAI;EAC7BO,OAAO,EAAE,IADoB;EAE7BC,aAAa,EAAE;AAFc,CAAJ,yBAAtB"}

package/CodeEditor/CodeEditor.js

@@ -1,23 +1,45 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-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";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeEditor = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+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 _emotion = require("emotion");
+
+var _reactAce = _interopRequireDefault(require("react-ace"));
+
+require("brace/theme/github");
+
+require("brace/theme/twilight");
+
+var _FormElementMessage = require("../FormElementMessage");
+
 var _excluded = ["value", "description", "validation", "theme"];
-import React from "react";
-import { css } from "emotion";
-import AceEditor from "react-ace";
-import "brace/theme/github";
-import "brace/theme/twilight";
-import { FormElementMessage } from "../FormElementMessage";
+
 /**
  * Controls the helper text below the checkbox.
  * @type {string}
  */
-
-var webinyCheckboxHelperText = /*#__PURE__*/css({}, {
+var webinyCheckboxHelperText = /*#__PURE__*/(0, _emotion.css)({}, {
   "&.mdc-text-field-helper-text": {
     paddingTop: 5
   }
@@ -27,29 +49,27 @@ var webinyCheckboxHelperText = /*#__PURE__*/css({}, {
  * CodeEditor component can be used to store simple boolean values.
  */
 var CodeEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(CodeEditor, _React$Component);
+  (0, _inherits2.default)(CodeEditor, _React$Component);
 
-  var _super = _createSuper(CodeEditor);
+  var _super = (0, _createSuper2.default)(CodeEditor);
 
   function CodeEditor() {
     var _this;
 
-    _classCallCheck(this, CodeEditor);
+    (0, _classCallCheck2.default)(this, CodeEditor);
 
     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));
-
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (value) {
       _this.props.onChange && _this.props.onChange(value);
     });
-
     return _this;
   }
 
-  _createClass(CodeEditor, [{
+  (0, _createClass2.default)(CodeEditor, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -58,29 +78,28 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
           validation = _this$props.validation,
           _this$props$theme = _this$props.theme,
           theme = _this$props$theme === void 0 ? "github" : _this$props$theme,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
 
       var _ref = validation || {},
           validationIsValid = _ref.isValid,
           validationMessage = _ref.message;
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AceEditor, Object.assign({
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactAce.default, Object.assign({
         value: value ? String(value) : "",
         theme: theme,
         onChange: this.onChange
       }, rest, {
         width: "100%",
         className: "mdc-text-field"
-      })), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true,
         className: webinyCheckboxHelperText
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         className: webinyCheckboxHelperText
       }, description));
     }
   }]);
-
   return CodeEditor;
-}(React.Component);
+}(_react.default.Component);
 
-export { CodeEditor };
+exports.CodeEditor = CodeEditor;

package/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CodeEditor.tsx"],"names":["React","css","AceEditor","FormElementMessage","webinyCheckboxHelperText","paddingTop","CodeEditor","value","props","onChange","description","validation","theme","rest","validationIsValid","isValid","validationMessage","message","String","Component"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,GAAT,QAAoB,SAApB;AAEA,OAAOC,SAAP,MAAsB,WAAtB;AACA,OAAO,oBAAP;AACA,OAAO,sBAAP;AACA,SAASC,kBAAT;AAEA;AACA;AACA;AACA;;AACA,IAAMC,wBAAwB,gBAAGH,GAAG,CAChC,EADgC,EAEhC;AACI,kCAAgC;AAC5BI,IAAAA,UAAU,EAAE;AADgB;AADpC,CAFgC,oCAApC;;AAkBA;AACA;AACA;IACMC,U;;;;;;;;;;;;;;;;+DACS,UAACC,KAAD,EAAmB;AAC1B,YAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAoBF,KAApB,CAAvB;AACH,K;;;;;;;WAED,kBAAyB;AACrB,wBAAsE,KAAKC,KAA3E;AAAA,UAAQD,KAAR,eAAQA,KAAR;AAAA,UAAeG,WAAf,eAAeA,WAAf;AAAA,UAA4BC,UAA5B,eAA4BA,UAA5B;AAAA,0CAAwCC,KAAxC;AAAA,UAAwCA,KAAxC,kCAAgD,QAAhD;AAAA,UAA6DC,IAA7D;;AAEA,iBAAmEF,UAAU,IAAI,EAAjF;AAAA,UAAiBG,iBAAjB,QAAQC,OAAR;AAAA,UAA6CC,iBAA7C,QAAoCC,OAApC;;AAEA,0BACI,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,SAAD;AACI,QAAA,KAAK,EAAEV,KAAK,GAAGW,MAAM,CAACX,KAAD,CAAT,GAAmB,EADnC;AAEI,QAAA,KAAK,EAAEK,KAFX;AAGI,QAAA,QAAQ,EAAE,KAAKH;AAHnB,SAIQI,IAJR;AAKI,QAAA,KAAK,EAAC,MALV;AAMI,QAAA,SAAS,EAAE;AANf,SADJ,EAUKC,iBAAiB,KAAK,KAAtB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK,MAAzB;AAA0B,QAAA,SAAS,EAAEV;AAArC,SACKY,iBADL,CAXR,EAgBKF,iBAAiB,KAAK,KAAtB,IAA+BJ,WAA/B,iBACG,oBAAC,kBAAD;AAAoB,QAAA,SAAS,EAAEN;AAA/B,SACKM,WADL,CAjBR,CADJ;AAwBH;;;;EAlCoBV,KAAK,CAACmB,S;;AAqC/B,SAASb,UAAT","sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\n\nimport AceEditor from \"react-ace\";\nimport \"brace/theme/github\";\nimport \"brace/theme/twilight\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst webinyCheckboxHelperText = css(\n    {},\n    {\n        \"&.mdc-text-field-helper-text\": {\n            paddingTop: 5\n        }\n    }\n);\n\ninterface Props extends FormComponentProps {\n    mode: string;\n\n    theme: string;\n\n    // Description beneath the input.\n    description?: React.ReactNode;\n}\n\n/**\n * CodeEditor component can be used to store simple boolean values.\n */\nclass CodeEditor extends React.Component<Props> {\n    onChange = (value: string) => {\n        this.props.onChange && this.props.onChange(value);\n    };\n\n    public override render() {\n        const { value, description, validation, theme = \"github\", ...rest } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <AceEditor\n                    value={value ? String(value) : \"\"}\n                    theme={theme}\n                    onChange={this.onChange}\n                    {...rest}\n                    width=\"100%\"\n                    className={\"mdc-text-field\"}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error className={webinyCheckboxHelperText}>\n                        {validationMessage}\n                    </FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage className={webinyCheckboxHelperText}>\n                        {description}\n                    </FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { CodeEditor };\n"]}
+{"version":3,"names":["webinyCheckboxHelperText","css","paddingTop","CodeEditor","value","props","onChange","description","validation","theme","rest","validationIsValid","isValid","validationMessage","message","String","React","Component"],"sources":["CodeEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\n\nimport AceEditor from \"react-ace\";\nimport \"brace/theme/github\";\nimport \"brace/theme/twilight\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst webinyCheckboxHelperText = css(\n    {},\n    {\n        \"&.mdc-text-field-helper-text\": {\n            paddingTop: 5\n        }\n    }\n);\n\ninterface Props extends FormComponentProps {\n    mode: string;\n\n    theme: string;\n\n    // Description beneath the input.\n    description?: React.ReactNode;\n}\n\n/**\n * CodeEditor component can be used to store simple boolean values.\n */\nclass CodeEditor extends React.Component<Props> {\n    onChange = (value: string) => {\n        this.props.onChange && this.props.onChange(value);\n    };\n\n    public override render() {\n        const { value, description, validation, theme = \"github\", ...rest } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <AceEditor\n                    value={value ? String(value) : \"\"}\n                    theme={theme}\n                    onChange={this.onChange}\n                    {...rest}\n                    width=\"100%\"\n                    className={\"mdc-text-field\"}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error className={webinyCheckboxHelperText}>\n                        {validationMessage}\n                    </FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage className={webinyCheckboxHelperText}>\n                        {description}\n                    </FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { CodeEditor };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA;AACA;AACA;AACA;AACA,IAAMA,wBAAwB,gBAAG,IAAAC,YAAA,EAC7B,EAD6B,EAE7B;EACI,gCAAgC;IAC5BC,UAAU,EAAE;EADgB;AADpC,CAF6B,oCAAjC;;AAkBA;AACA;AACA;IACMC,U;;;;;;;;;;;;;;;2FACS,UAACC,KAAD,EAAmB;MAC1B,MAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAoBF,KAApB,CAAvB;IACH,C;;;;;;WAED,kBAAyB;MACrB,kBAAsE,KAAKC,KAA3E;MAAA,IAAQD,KAAR,eAAQA,KAAR;MAAA,IAAeG,WAAf,eAAeA,WAAf;MAAA,IAA4BC,UAA5B,eAA4BA,UAA5B;MAAA,oCAAwCC,KAAxC;MAAA,IAAwCA,KAAxC,kCAAgD,QAAhD;MAAA,IAA6DC,IAA7D;;MAEA,WAAmEF,UAAU,IAAI,EAAjF;MAAA,IAAiBG,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,iBAAD;QACI,KAAK,EAAEV,KAAK,GAAGW,MAAM,CAACX,KAAD,CAAT,GAAmB,EADnC;QAEI,KAAK,EAAEK,KAFX;QAGI,QAAQ,EAAE,KAAKH;MAHnB,GAIQI,IAJR;QAKI,KAAK,EAAC,MALV;QAMI,SAAS,EAAE;MANf,GADJ,EAUKC,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK,MAAzB;QAA0B,SAAS,EAAEX;MAArC,GACKa,iBADL,CAXR,EAgBKF,iBAAiB,KAAK,KAAtB,IAA+BJ,WAA/B,iBACG,6BAAC,sCAAD;QAAoB,SAAS,EAAEP;MAA/B,GACKO,WADL,CAjBR,CADJ;IAwBH;;;EAlCoBS,cAAA,CAAMC,S"}

package/CodeEditor/CodeEditor.stories.js

@@ -1,32 +1,45 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, text } from "@storybook/addon-knobs";
-import readme from "./README.md";
-import { Form } from "@webiny/form";
-import { CodeEditor } from "./CodeEditor";
-import "brace/mode/json";
-import "brace/theme/github";
-var story = storiesOf("Components/CodeEditor", 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 _addonKnobs = require("@storybook/addon-knobs");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _form = require("@webiny/form");
+
+var _CodeEditor = require("./CodeEditor");
+
+require("brace/mode/json");
+
+require("brace/theme/github");
+
+var story = (0, _react2.storiesOf)("Components/CodeEditor", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var description = text("description", "Type your code here and see it in action.");
-  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(Form, {
+  var description = (0, _addonKnobs.text)("description", "Type your code here and see it in action.");
+  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(_form.Form, {
     data: {
       data: "{\"foo\": \"bar\"}"
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "data"
-    }, /*#__PURE__*/React.createElement(CodeEditor, {
+    }, /*#__PURE__*/_react.default.createElement(_CodeEditor.CodeEditor, {
       mode: "json",
       theme: "github",
       description: description
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Form data={{ data: `{\"foo\": \"bar\"}` }}>\n                        {({ Bind }) => (\n                            <Bind name=\"data\">\n                                 <CodeEditor\n                                    mode=\"json\"\n                                    theme=\"github\"\n                                    description={\"".concat(description, "\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        <Form data={{ data: `{\"foo\": \"bar\"}` }}>\n                        {({ Bind }) => (\n                            <Bind name=\"data\">\n                                 <CodeEditor\n                                    mode=\"json\"\n                                    theme=\"github\"\n                                    description={\"".concat(description, "\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))));
 }, {
   info: {
-    propTables: [CodeEditor]
+    propTables: [_CodeEditor.CodeEditor]
   }
 });

package/CodeEditor/CodeEditor.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CodeEditor.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","text","readme","Form","CodeEditor","story","module","addDecorator","add","description","data","Bind","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,IAApB,QAAgC,wBAAhC;AACA,OAAOC,MAAP;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,UAAT;AACA,OAAO,iBAAP;AACA,OAAO,oBAAP;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,uBAAD,EAA0BY,MAA1B,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEAK,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,WAAW,GAAGR,IAAI,CAAC,aAAD,EAAgB,2CAAhB,CAAxB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEQ,MAAAA,IAAI;AAAN;AAAZ,KACK;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,UAAD;AACI,MAAA,IAAI,EAAC,MADT;AAEI,MAAA,KAAK,EAAC,QAFV;AAGI,MAAA,WAAW,EAAEF;AAHjB,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAcI,oBAAC,gBAAD,gYAQgCA,WARhC,iKAdJ,CAFJ,CADJ;AAmCH,CAxCL,EAyCI;AAAEG,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACT,UAAD;AAAd;AAAR,CAzCJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, text } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport { Form } from \"@webiny/form\";\nimport { CodeEditor } from \"./CodeEditor\";\nimport \"brace/mode/json\";\nimport \"brace/theme/github\";\n\nconst story = storiesOf(\"Components/CodeEditor\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const description = text(\"description\", \"Type your code here and see it in action.\");\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ data: `{\"foo\": \"bar\"}` }}>\n                            {({ Bind }) => (\n                                <Bind name=\"data\">\n                                    <CodeEditor\n                                        mode=\"json\"\n                                        theme=\"github\"\n                                        description={description}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={{ data: \\`{\"foo\": \"bar\"}\\` }}>\n                        {({ Bind }) => (\n                            <Bind name=\"data\">\n                                 <CodeEditor\n                                    mode=\"json\"\n                                    theme=\"github\"\n                                    description={\"${description}\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [CodeEditor] } }\n);\n"]}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","description","text","readme","data","Bind","info","propTables","CodeEditor"],"sources":["CodeEditor.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\";\nimport { withKnobs, text } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport { Form } from \"@webiny/form\";\nimport { CodeEditor } from \"./CodeEditor\";\nimport \"brace/mode/json\";\nimport \"brace/theme/github\";\n\nconst story = storiesOf(\"Components/CodeEditor\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const description = text(\"description\", \"Type your code here and see it in action.\");\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ data: `{\"foo\": \"bar\"}` }}>\n                            {({ Bind }) => (\n                                <Bind name=\"data\">\n                                    <CodeEditor\n                                        mode=\"json\"\n                                        theme=\"github\"\n                                        description={description}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={{ data: \\`{\"foo\": \"bar\"}\\` }}>\n                        {({ Bind }) => (\n                            <Bind name=\"data\">\n                                 <CodeEditor\n                                    mode=\"json\"\n                                    theme=\"github\"\n                                    description={\"${description}\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [CodeEditor] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,uBAAV,EAAmCC,MAAnC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,WAAW,GAAG,IAAAC,gBAAA,EAAK,aAAL,EAAoB,2CAApB,CAApB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,IAAI;IAAN;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,sBAAD;MACI,IAAI,EAAC,MADT;MAEI,KAAK,EAAC,QAFV;MAGI,WAAW,EAAEJ;IAHjB,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAcI,6BAAC,uBAAD,gYAQgCA,WARhC,iKAdJ,CAFJ,CADJ;AAmCH,CAxCL,EAyCI;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,sBAAD;EAAd;AAAR,CAzCJ"}

package/CodeEditor/index.js

@@ -1 +1,18 @@
-export * from "./CodeEditor";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _CodeEditor = require("./CodeEditor");
+
+Object.keys(_CodeEditor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CodeEditor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CodeEditor[key];
+    }
+  });
+});

package/CodeEditor/index.js.map

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

package/ColorPicker/ColorPicker.js

@@ -1,24 +1,44 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-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 React from "react";
-import { SketchPicker } from "react-color";
-import { css } from "emotion";
-import { FormElementMessage } from "../FormElementMessage";
-import classNames from "classnames";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorPicker = void 0;
+
+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 _reactColor = require("react-color");
+
+var _emotion = require("emotion");
+
+var _FormElementMessage = require("../FormElementMessage");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var classes = {
-  label: /*#__PURE__*/css({
+  label: /*#__PURE__*/(0, _emotion.css)({
     marginBottom: "10px !important"
   }, "label:label;"),
-  color: /*#__PURE__*/css({
+  color: /*#__PURE__*/(0, _emotion.css)({
     width: "36px",
     height: "14px",
     borderRadius: "2px"
   }, "label:color;"),
-  swatch: /*#__PURE__*/css({
+  swatch: /*#__PURE__*/(0, _emotion.css)({
     padding: "5px",
     background: "#fff",
     borderRadius: "1px",
@@ -27,18 +47,18 @@ var classes = {
     cursor: "pointer"
   }, "label:swatch;"),
   // @ts-ignore
-  popover: /*#__PURE__*/css({
+  popover: /*#__PURE__*/(0, _emotion.css)({
     position: "absolute",
     zIndex: "2"
   }, "label:popover;"),
-  classNames: /*#__PURE__*/css({
+  classNames: /*#__PURE__*/(0, _emotion.css)({
     position: "fixed",
     top: "0px",
     right: "0px",
     bottom: "0px",
     left: "0px"
   }, "label:classNames;"),
-  disable: /*#__PURE__*/css({
+  disable: /*#__PURE__*/(0, _emotion.css)({
     opacity: 0.7,
     pointerEvents: "none"
   }, "label:disable;")
@@ -48,46 +68,41 @@ var classes = {
  * Use ColorPicker component to display a list of choices, once the handler is triggered.
  */
 var ColorPicker = /*#__PURE__*/function (_React$Component) {
-  _inherits(ColorPicker, _React$Component);
+  (0, _inherits2.default)(ColorPicker, _React$Component);
 
-  var _super = _createSuper(ColorPicker);
+  var _super = (0, _createSuper2.default)(ColorPicker);
 
   function ColorPicker() {
     var _this;
 
-    _classCallCheck(this, ColorPicker);
+    (0, _classCallCheck2.default)(this, ColorPicker);
 
     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));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       showColorPicker: false
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
       _this.setState({
         showColorPicker: !_this.state.showColorPicker
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClose", function () {
       _this.setState({
         showColorPicker: false
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (color) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (color) {
       var onChange = _this.props.onChange;
       onChange && onChange(color.hex);
     });
-
     return _this;
   }
 
-  _createClass(ColorPicker, [{
+  (0, _createClass2.default)(ColorPicker, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -108,31 +123,30 @@ var ColorPicker = /*#__PURE__*/function (_React$Component) {
           validationIsValid = _ref.isValid,
           validationMessage = _ref.message;
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(_defineProperty({}, classes.disable, disable))
-      }, label && /*#__PURE__*/React.createElement("div", {
-        className: classNames("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", classes.label)
-      }, label), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.disable, disable))
+      }, label && /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", classes.label)
+      }, label), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
         className: classes.swatch,
         onClick: this.handleClick
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: classes.color,
         style: backgroundColorStyle
-      })), this.state.showColorPicker ? /*#__PURE__*/React.createElement("div", {
+      })), this.state.showColorPicker ? /*#__PURE__*/_react.default.createElement("div", {
         className: classes.popover
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: classes.classNames,
         onClick: this.handleClose
-      }), /*#__PURE__*/React.createElement(SketchPicker, {
+      }), /*#__PURE__*/_react.default.createElement(_reactColor.SketchPicker, {
         color: value || "",
         onChange: this.handleChange
-      })) : null), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      })) : null), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
     }
   }]);
-
   return ColorPicker;
-}(React.Component);
+}(_react.default.Component);
 
-export { ColorPicker };
+exports.ColorPicker = ColorPicker;

package/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ColorPicker.tsx"],"names":["React","SketchPicker","css","FormElementMessage","classNames","classes","label","marginBottom","color","width","height","borderRadius","swatch","padding","background","boxShadow","display","cursor","popover","position","zIndex","top","right","bottom","left","disable","opacity","pointerEvents","ColorPicker","showColorPicker","setState","state","onChange","props","hex","value","description","validation","backgroundColorStyle","validationIsValid","isValid","validationMessage","message","handleClick","handleClose","handleChange","Component"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { SketchPicker, ColorResult } from \"react-color\";\nimport { css } from \"emotion\";\nimport { FormComponentProps } from \"~/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport classNames from \"classnames\";\n\nconst classes = {\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    color: css({\n        width: \"36px\",\n        height: \"14px\",\n        borderRadius: \"2px\"\n    }),\n    swatch: css({\n        padding: \"5px\",\n        background: \"#fff\",\n        borderRadius: \"1px\",\n        boxShadow: \"0 0 0 1px rgba(0,0,0,.1)\",\n        display: \"inline-block\",\n        cursor: \"pointer\"\n    }),\n    // @ts-ignore\n    popover: css({\n        position: \"absolute\",\n        zIndex: \"2\"\n    }),\n    classNames: css({\n        position: \"fixed\",\n        top: \"0px\",\n        right: \"0px\",\n        bottom: \"0px\",\n        left: \"0px\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface ColorPickerState {\n    showColorPicker: boolean;\n}\n\ninterface ColorPickerProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is color picker disabled?\n    disable?: boolean;\n\n    // Description beneath the color picker.\n    description?: string;\n}\n\n/**\n * Use ColorPicker component to display a list of choices, once the handler is triggered.\n */\nclass ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {\n    public override state = {\n        showColorPicker: false\n    };\n\n    handleClick = () => {\n        this.setState({ showColorPicker: !this.state.showColorPicker });\n    };\n\n    handleClose = () => {\n        this.setState({ showColorPicker: false });\n    };\n\n    handleChange = (color: ColorResult) => {\n        const { onChange } = this.props;\n        onChange && onChange(color.hex);\n    };\n\n    public override render() {\n        const { value, label, disable, description, validation } = this.props;\n\n        let backgroundColorStyle = {};\n        if (value) {\n            backgroundColorStyle = {\n                background: `${value}`\n            };\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <div className={classNames({ [classes.disable]: disable })}>\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n\n                <div>\n                    <div className={classes.swatch} onClick={this.handleClick}>\n                        <div className={classes.color} style={backgroundColorStyle} />\n                    </div>\n                    {this.state.showColorPicker ? (\n                        <div className={classes.popover}>\n                            <div className={classes.classNames} onClick={this.handleClose} />\n                            <SketchPicker color={value || \"\"} onChange={this.handleChange} />\n                        </div>\n                    ) : null}\n                </div>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { ColorPicker };\n"]}
+{"version":3,"names":["classes","label","css","marginBottom","color","width","height","borderRadius","swatch","padding","background","boxShadow","display","cursor","popover","position","zIndex","classNames","top","right","bottom","left","disable","opacity","pointerEvents","ColorPicker","showColorPicker","setState","state","onChange","props","hex","value","description","validation","backgroundColorStyle","validationIsValid","isValid","validationMessage","message","handleClick","handleClose","handleChange","React","Component"],"sources":["ColorPicker.tsx"],"sourcesContent":["import React from \"react\";\nimport { SketchPicker, ColorResult } from \"react-color\";\nimport { css } from \"emotion\";\nimport { FormComponentProps } from \"~/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport classNames from \"classnames\";\n\nconst classes = {\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    color: css({\n        width: \"36px\",\n        height: \"14px\",\n        borderRadius: \"2px\"\n    }),\n    swatch: css({\n        padding: \"5px\",\n        background: \"#fff\",\n        borderRadius: \"1px\",\n        boxShadow: \"0 0 0 1px rgba(0,0,0,.1)\",\n        display: \"inline-block\",\n        cursor: \"pointer\"\n    }),\n    // @ts-ignore\n    popover: css({\n        position: \"absolute\",\n        zIndex: \"2\"\n    }),\n    classNames: css({\n        position: \"fixed\",\n        top: \"0px\",\n        right: \"0px\",\n        bottom: \"0px\",\n        left: \"0px\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface ColorPickerState {\n    showColorPicker: boolean;\n}\n\ninterface ColorPickerProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is color picker disabled?\n    disable?: boolean;\n\n    // Description beneath the color picker.\n    description?: string;\n}\n\n/**\n * Use ColorPicker component to display a list of choices, once the handler is triggered.\n */\nclass ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {\n    public override state = {\n        showColorPicker: false\n    };\n\n    handleClick = () => {\n        this.setState({ showColorPicker: !this.state.showColorPicker });\n    };\n\n    handleClose = () => {\n        this.setState({ showColorPicker: false });\n    };\n\n    handleChange = (color: ColorResult) => {\n        const { onChange } = this.props;\n        onChange && onChange(color.hex);\n    };\n\n    public override render() {\n        const { value, label, disable, description, validation } = this.props;\n\n        let backgroundColorStyle = {};\n        if (value) {\n            backgroundColorStyle = {\n                background: `${value}`\n            };\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <div className={classNames({ [classes.disable]: disable })}>\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n\n                <div>\n                    <div className={classes.swatch} onClick={this.handleClick}>\n                        <div className={classes.color} style={backgroundColorStyle} />\n                    </div>\n                    {this.state.showColorPicker ? (\n                        <div className={classes.popover}>\n                            <div className={classes.classNames} onClick={this.handleClose} />\n                            <SketchPicker color={value || \"\"} onChange={this.handleChange} />\n                        </div>\n                    ) : null}\n                </div>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { ColorPicker };\n"],"mappings":"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"}

package/ColorPicker/ColorPicker.stories.js

@@ -1,30 +1,41 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandbox, StorySandboxCode, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./../ColorPicker/README.md";
-import { Form } from "@webiny/form";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import { ColorPicker } from "./ColorPicker";
-var story = storiesOf("Components/ColorPicker", 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("./../ColorPicker/README.md"));
+
+var _form = require("@webiny/form");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _ColorPicker = require("./ColorPicker");
+
+var story = (0, _react2.storiesOf)("Components/ColorPicker", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var disable = boolean("disable", false);
-  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(Form, {
+  var disable = (0, _addonKnobs.boolean)("disable", false);
+  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(_form.Form, {
     data: {
       color: "#80ff00"
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "color"
-    }, /*#__PURE__*/React.createElement(ColorPicker, {
+    }, /*#__PURE__*/_react.default.createElement(_ColorPicker.ColorPicker, {
       label: "Header background color",
       disable: disable,
       description: "A simple background color in the header section."
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                       <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"color\">\n                                <ColorPicker disable={".concat(disable, "} />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                       <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"color\">\n                                <ColorPicker disable={".concat(disable, "} />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))));
 }, {
   info: {
-    propTables: [ColorPicker]
+    propTables: [_ColorPicker.ColorPicker]
   }
 });