@webiny/ui 5.34.8 → 5.35.0-beta.1

package/Chips/index.js

@@ -3,9 +3,7 @@
 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;
@@ -16,9 +14,7 @@ Object.keys(_Chips).forEach(function (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;

package/Chips/index.js.map

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

@@ -4,9 +4,7 @@ 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": {
     "&.mdc-chip__icon--trailing": {

package/Chips/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["chipIconWrapper","css","boxSizing","display","marginLeft","marginRight","svg","width","height","disabledChips","opacity","pointerEvents"],"sources":["styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\nexport const chipIconWrapper = css({\n    \".mdc-chip__icon\": {\n        \"&.mdc-chip__icon--trailing\": {\n            boxSizing: \"border-box\",\n            display: \"flex\",\n            marginLeft: \"4px\",\n            marginRight: \"0px\"\n        },\n        svg: {\n            width: 18,\n            height: 18\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;IACf,8BAA8B;MAC1BC,SAAS,EAAE,YADe;MAE1BC,OAAO,EAAE,MAFiB;MAG1BC,UAAU,EAAE,KAHc;MAI1BC,WAAW,EAAE;IAJa,CADf;IAOfC,GAAG,EAAE;MACDC,KAAK,EAAE,EADN;MAEDC,MAAM,EAAE;IAFP;EAPU;AADY,CAAJ,2BAAxB;;AAeA,IAAMC,aAAa,gBAAG,IAAAR,YAAA,EAAI;EAC7BS,OAAO,EAAE,IADoB;EAE7BC,aAAa,EAAE;AAFc,CAAJ,yBAAtB"}
+{"version":3,"names":["chipIconWrapper","css","boxSizing","display","marginLeft","marginRight","svg","width","height","disabledChips","opacity","pointerEvents"],"sources":["styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\nexport const chipIconWrapper = css({\n    \".mdc-chip__icon\": {\n        \"&.mdc-chip__icon--trailing\": {\n            boxSizing: \"border-box\",\n            display: \"flex\",\n            marginLeft: \"4px\",\n            marginRight: \"0px\"\n        },\n        svg: {\n            width: 18,\n            height: 18\n        }\n    }\n});\n\nexport const disabledChips = css({\n    opacity: 0.75,\n    pointerEvents: \"none\"\n});\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,eAAe,gBAAG,IAAAC,YAAG,EAAC;EAC/B,iBAAiB,EAAE;IACf,4BAA4B,EAAE;MAC1BC,SAAS,EAAE,YAAY;MACvBC,OAAO,EAAE,MAAM;MACfC,UAAU,EAAE,KAAK;MACjBC,WAAW,EAAE;IACjB,CAAC;IACDC,GAAG,EAAE;MACDC,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE;IACZ;EACJ;AACJ,CAAC,2BAAC;AAAC;AAEI,IAAMC,aAAa,gBAAG,IAAAR,YAAG,EAAC;EAC7BS,OAAO,EAAE,IAAI;EACbC,aAAa,EAAE;AACnB,CAAC,yBAAC;AAAC"}

package/CodeEditor/CodeEditor.js

@@ -1,44 +1,26 @@
 "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/mode/html");
-
 require("brace/theme/github");
-
 require("brace/theme/twilight");
-
 require("brace/theme/chrome");
-
 var _FormElementMessage = require("../FormElementMessage");
-
 var _excluded = ["value", "description", "validation", "theme"];
-
 /**
  * Controls the helper text below the checkbox.
  * @type {string}
@@ -48,46 +30,37 @@ var webinyCheckboxHelperText = /*#__PURE__*/(0, _emotion.css)({}, {
     paddingTop: 5
   }
 }, "label:webinyCheckboxHelperText;");
-
 /**
  * CodeEditor component can be used to store simple boolean values.
  */
 var CodeEditor = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(CodeEditor, _React$Component);
-
   var _super = (0, _createSuper2.default)(CodeEditor);
-
   function CodeEditor() {
     var _this;
-
     (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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (value) {
       _this.props.onChange && _this.props.onChange(value);
     });
     return _this;
   }
-
   (0, _createClass2.default)(CodeEditor, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          value = _this$props.value,
-          description = _this$props.description,
-          validation = _this$props.validation,
-          _this$props$theme = _this$props.theme,
-          theme = _this$props$theme === void 0 ? "github" : _this$props$theme,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-
+        value = _this$props.value,
+        description = _this$props.description,
+        validation = _this$props.validation,
+        _this$props$theme = _this$props.theme,
+        theme = _this$props$theme === void 0 ? "github" : _this$props$theme,
+        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       var _ref = validation || {},
-          validationIsValid = _ref.isValid,
-          validationMessage = _ref.message;
-
+        validationIsValid = _ref.isValid,
+        validationMessage = _ref.message;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactAce.default, Object.assign({
         value: value ? String(value) : "",
         theme: theme,
@@ -105,5 +78,4 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
   }]);
   return CodeEditor;
 }(_react.default.Component);
-
 exports.CodeEditor = CodeEditor;

package/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"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\";\n// Modes\nimport \"brace/mode/html\";\n// Themes\nimport \"brace/theme/github\";\nimport \"brace/theme/twilight\";\nimport \"brace/theme/chrome\";\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;;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"}
+{"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\";\n// Modes\nimport \"brace/mode/html\";\n// Themes\nimport \"brace/theme/github\";\nimport \"brace/theme/twilight\";\nimport \"brace/theme/chrome\";\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;AAEA;AAEA;AACA;AACA;AACA;AAA0D;AAE1D;AACA;AACA;AACA;AACA,IAAMA,wBAAwB,gBAAG,IAAAC,YAAG,EAChC,CAAC,CAAC,EACF;EACI,8BAA8B,EAAE;IAC5BC,UAAU,EAAE;EAChB;AACJ,CAAC,oCACJ;AAWD;AACA;AACA;AAFA,IAGMC,UAAU;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uFACD,UAACC,KAAa,EAAK;MAC1B,MAAKC,KAAK,CAACC,QAAQ,IAAI,MAAKD,KAAK,CAACC,QAAQ,CAACF,KAAK,CAAC;IACrD,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MACrB,kBAAsE,IAAI,CAACC,KAAK;QAAxED,KAAK,eAALA,KAAK;QAAEG,WAAW,eAAXA,WAAW;QAAEC,UAAU,eAAVA,UAAU;QAAA,gCAAEC,KAAK;QAALA,KAAK,kCAAG,QAAQ;QAAKC,IAAI;MAEjE,WAAmEF,UAAU,IAAI,CAAC,CAAC;QAAlEG,iBAAiB,QAA1BC,OAAO;QAA8BC,iBAAiB,QAA1BC,OAAO;MAE3C,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,iBAAS;QACN,KAAK,EAAEV,KAAK,GAAGW,MAAM,CAACX,KAAK,CAAC,GAAG,EAAG;QAClC,KAAK,EAAEK,KAAM;QACb,QAAQ,EAAE,IAAI,CAACH;MAAS,GACpBI,IAAI;QACR,KAAK,EAAC,MAAM;QACZ,SAAS,EAAE;MAAiB,GAC9B,EAEDC,iBAAiB,KAAK,KAAK,iBACxB,6BAAC,sCAAkB;QAAC,KAAK;QAAC,SAAS,EAAEX;MAAyB,GACzDa,iBAAiB,CAEzB,EAEAF,iBAAiB,KAAK,KAAK,IAAIJ,WAAW,iBACvC,6BAAC,sCAAkB;QAAC,SAAS,EAAEP;MAAyB,GACnDO,WAAW,CAEnB,CACY;IAEzB;EAAC;EAAA;AAAA,EAlCoBS,cAAK,CAACC,SAAS;AAAA"}

package/CodeEditor/CodeEditor.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 _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 () {

package/CodeEditor/CodeEditor.stories.js.map

@@ -1 +1 @@
-{"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"}
+{"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,iBAAS,EAAC,uBAAuB,EAAEC,MAAM,CAAC;AACxDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,WAAW,GAAG,IAAAC,gBAAI,EAAC,aAAa,EAAE,2CAA2C,CAAC;EAEpF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEC,IAAI;IAAmB;EAAE,GAClC;IAAA,IAAGC,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAM,gBACb,6BAAC,sBAAU;MACP,IAAI,EAAC,MAAM;MACX,KAAK,EAAC,QAAQ;MACd,WAAW,EAAEJ;IAAY,EAC3B,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,gYAQeA,WAAW,iKAMxB,CACR,CACX;AAEhB,CAAC,EACD;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,sBAAU;EAAE;AAAE,CAAC,CACzC"}

package/CodeEditor/index.js

@@ -3,9 +3,7 @@
 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;

package/CodeEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./CodeEditor\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"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,34 +1,21 @@
 "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__*/(0, _emotion.css)({
     marginBottom: "10px !important"
@@ -63,24 +50,18 @@ var classes = {
     pointerEvents: "none"
   }, "label:disable;")
 };
-
 /**
  * Use ColorPicker component to display a list of choices, once the handler is triggered.
  */
 var ColorPicker = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPicker, _React$Component);
-
   var _super = (0, _createSuper2.default)(ColorPicker);
-
   function ColorPicker() {
     var _this;
-
     (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));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       showColorPicker: false
@@ -101,28 +82,24 @@ var ColorPicker = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(ColorPicker, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          value = _this$props.value,
-          label = _this$props.label,
-          disable = _this$props.disable,
-          description = _this$props.description,
-          validation = _this$props.validation;
+        value = _this$props.value,
+        label = _this$props.label,
+        disable = _this$props.disable,
+        description = _this$props.description,
+        validation = _this$props.validation;
       var backgroundColorStyle = {};
-
       if (value) {
         backgroundColorStyle = {
           background: "".concat(value)
         };
       }
-
       var _ref = validation || {},
-          validationIsValid = _ref.isValid,
-          validationMessage = _ref.message;
-
+        validationIsValid = _ref.isValid,
+        validationMessage = _ref.message;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.disable, disable))
       }, label && /*#__PURE__*/_react.default.createElement("div", {
@@ -148,5 +125,4 @@ var ColorPicker = /*#__PURE__*/function (_React$Component) {
   }]);
   return ColorPicker;
 }(_react.default.Component);
-
 exports.ColorPicker = ColorPicker;

package/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"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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"}
+{"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":";;;;;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAEA,IAAMA,OAAO,GAAG;EACZC,KAAK,eAAE,IAAAC,YAAG,EAAC;IACPC,YAAY,EAAE;EAClB,CAAC,iBAAC;EACFC,KAAK,eAAE,IAAAF,YAAG,EAAC;IACPG,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,YAAY,EAAE;EAClB,CAAC,iBAAC;EACFC,MAAM,eAAE,IAAAN,YAAG,EAAC;IACRO,OAAO,EAAE,KAAK;IACdC,UAAU,EAAE,MAAM;IAClBH,YAAY,EAAE,KAAK;IACnBI,SAAS,EAAE,0BAA0B;IACrCC,OAAO,EAAE,cAAc;IACvBC,MAAM,EAAE;EACZ,CAAC,kBAAC;EACF;EACAC,OAAO,eAAE,IAAAZ,YAAG,EAAC;IACTa,QAAQ,EAAE,UAAU;IACpBC,MAAM,EAAE;EACZ,CAAC,mBAAC;EACFC,UAAU,eAAE,IAAAf,YAAG,EAAC;IACZa,QAAQ,EAAE,OAAO;IACjBG,GAAG,EAAE,KAAK;IACVC,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,IAAI,EAAE;EACV,CAAC,sBAAC;EACFC,OAAO,eAAE,IAAApB,YAAG,EAAC;IACTqB,OAAO,EAAE,GAAG;IACZC,aAAa,EAAE;EACnB,CAAC;AACL,CAAC;AAiBD;AACA;AACA;AAFA,IAGMC,WAAW;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,oFACW;MACpBC,eAAe,EAAE;IACrB,CAAC;IAAA,0FAEa,YAAM;MAChB,MAAKC,QAAQ,CAAC;QAAED,eAAe,EAAE,CAAC,MAAKE,KAAK,CAACF;MAAgB,CAAC,CAAC;IACnE,CAAC;IAAA,0FAEa,YAAM;MAChB,MAAKC,QAAQ,CAAC;QAAED,eAAe,EAAE;MAAM,CAAC,CAAC;IAC7C,CAAC;IAAA,2FAEc,UAACtB,KAAkB,EAAK;MACnC,IAAQyB,QAAQ,GAAK,MAAKC,KAAK,CAAvBD,QAAQ;MAChBA,QAAQ,IAAIA,QAAQ,CAACzB,KAAK,CAAC2B,GAAG,CAAC;IACnC,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MACrB,kBAA2D,IAAI,CAACD,KAAK;QAA7DE,KAAK,eAALA,KAAK;QAAE/B,KAAK,eAALA,KAAK;QAAEqB,OAAO,eAAPA,OAAO;QAAEW,WAAW,eAAXA,WAAW;QAAEC,UAAU,eAAVA,UAAU;MAEtD,IAAIC,oBAAoB,GAAG,CAAC,CAAC;MAC7B,IAAIH,KAAK,EAAE;QACPG,oBAAoB,GAAG;UACnBzB,UAAU,YAAKsB,KAAK;QACxB,CAAC;MACL;MAEA,WAAmEE,UAAU,IAAI,CAAC,CAAC;QAAlEE,iBAAiB,QAA1BC,OAAO;QAA8BC,iBAAiB,QAA1BC,OAAO;MAE3C,oBACI;QAAK,SAAS,EAAE,IAAAtB,mBAAU,oCAAIjB,OAAO,CAACsB,OAAO,EAAGA,OAAO;MAAI,GACtDrB,KAAK,iBACF;QACI,SAAS,EAAE,IAAAgB,mBAAU,EACjB,mEAAmE,EACnEjB,OAAO,CAACC,KAAK;MACf,GAEDA,KAAK,CAEb,eAED,uDACI;QAAK,SAAS,EAAED,OAAO,CAACQ,MAAO;QAAC,OAAO,EAAE,IAAI,CAACgC;MAAY,gBACtD;QAAK,SAAS,EAAExC,OAAO,CAACI,KAAM;QAAC,KAAK,EAAE+B;MAAqB,EAAG,CAC5D,EACL,IAAI,CAACP,KAAK,CAACF,eAAe,gBACvB;QAAK,SAAS,EAAE1B,OAAO,CAACc;MAAQ,gBAC5B;QAAK,SAAS,EAAEd,OAAO,CAACiB,UAAW;QAAC,OAAO,EAAE,IAAI,CAACwB;MAAY,EAAG,eACjE,6BAAC,wBAAY;QAAC,KAAK,EAAET,KAAK,IAAI,EAAG;QAAC,QAAQ,EAAE,IAAI,CAACU;MAAa,EAAG,CAC/D,GACN,IAAI,CACN,EAELN,iBAAiB,KAAK,KAAK,iBACxB,6BAAC,sCAAkB;QAAC,KAAK;MAAA,GAAEE,iBAAiB,CAC/C,EAEAF,iBAAiB,KAAK,KAAK,IAAIH,WAAW,iBACvC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,CACC;IAEd;EAAC;EAAA;AAAA,EAhEqBU,cAAK,CAACC,SAAS;AAAA"}

package/ColorPicker/ColorPicker.stories.js

@@ -1,21 +1,13 @@
 "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 () {

package/ColorPicker/ColorPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disable","boolean","readme","color","Bind","info","propTables","ColorPicker"],"sources":["ColorPicker.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandbox,\n    StorySandboxCode,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../ColorPicker/README.md\";\nimport { Form } from \"@webiny/form\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { ColorPicker } from \"./ColorPicker\";\n\nconst story = storiesOf(\"Components/ColorPicker\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disable = boolean(\"disable\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ color: \"#80ff00\" }}>\n                            {({ Bind }) => (\n                                <Bind name=\"color\">\n                                    <ColorPicker\n                                        label={\"Header background color\"}\n                                        disable={disable}\n                                        description={\n                                            \"A simple background color in the header section.\"\n                                        }\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                       <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"color\">\n                                <ColorPicker disable={${disable}} />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [ColorPicker] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,wBAAV,EAAoCC,MAApC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,OAAO,GAAG,IAAAC,mBAAA,EAAQ,SAAR,EAAmB,KAAnB,CAAhB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,KAAK,EAAE;IAAT;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,wBAAD;MACI,KAAK,EAAE,yBADX;MAEI,OAAO,EAAEJ,OAFb;MAGI,WAAW,EACP;IAJR,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAgBI,6BAAC,uBAAD,sMAKoCA,OALpC,8HAhBJ,CAFJ,CADJ;AAiCH,CAtCL,EAuCI;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,wBAAD;EAAd;AAAR,CAvCJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disable","boolean","readme","color","Bind","info","propTables","ColorPicker"],"sources":["ColorPicker.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandbox,\n    StorySandboxCode,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../ColorPicker/README.md\";\nimport { Form } from \"@webiny/form\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { ColorPicker } from \"./ColorPicker\";\n\nconst story = storiesOf(\"Components/ColorPicker\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disable = boolean(\"disable\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ color: \"#80ff00\" }}>\n                            {({ Bind }) => (\n                                <Bind name=\"color\">\n                                    <ColorPicker\n                                        label={\"Header background color\"}\n                                        disable={disable}\n                                        description={\n                                            \"A simple background color in the header section.\"\n                                        }\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                       <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"color\">\n                                <ColorPicker disable={${disable}} />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [ColorPicker] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,wBAAwB,EAAEC,MAAM,CAAC;AACzDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,OAAO,GAAG,IAAAC,mBAAO,EAAC,SAAS,EAAE,KAAK,CAAC;EAEzC,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB,qBAChB,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEC,KAAK,EAAE;IAAU;EAAE,GAC5B;IAAA,IAAGC,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAO,gBACd,6BAAC,wBAAW;MACR,KAAK,EAAE,yBAA0B;MACjC,OAAO,EAAEJ,OAAQ;MACjB,WAAW,EACP;IACH,EACH,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,sMAKmBA,OAAO,8HAKxB,CACR,CACX;AAEhB,CAAC,EACD;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,wBAAW;EAAE;AAAE,CAAC,CAC1C"}

package/ColorPicker/index.js

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

package/ColorPicker/index.js.map

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

package/ConfirmationDialog/ConfirmationDialog.js

@@ -1,51 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ConfirmationDialog = 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 _Dialog = require("./../Dialog");
-
 var _Progress = require("../Progress");
-
+var _Button = require("../Button");
 /**
  * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.
  */
 var ConfirmationDialog = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ConfirmationDialog, _React$Component);
-
   var _super = (0, _createSuper2.default)(ConfirmationDialog);
-
   function ConfirmationDialog() {
     var _this;
-
     (0, _classCallCheck2.default)(this, ConfirmationDialog);
-
     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), "__isMounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "callbacks", {
@@ -65,7 +48,6 @@ var ConfirmationDialog = /*#__PURE__*/function (_React$Component) {
         onAccept: onAccept,
         onCancel: onCancel
       };
-
       _this.setState({
         show: true
       });
@@ -78,64 +60,51 @@ var ConfirmationDialog = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onAccept", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
       var onAccept;
       return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              onAccept = _this.callbacks.onAccept;
-
-              if (!(typeof onAccept === "function")) {
-                _context.next = 6;
-                break;
-              }
-
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            onAccept = _this.callbacks.onAccept;
+            if (!(typeof onAccept === "function")) {
+              _context.next = 6;
+              break;
+            }
+            _this.setState({
+              loading: true
+            });
+            _context.next = 5;
+            return onAccept();
+          case 5:
+            if (_this.__isMounted) {
               _this.setState({
-                loading: true
+                loading: false,
+                show: false
               });
-
-              _context.next = 5;
-              return onAccept();
-
-            case 5:
-              if (_this.__isMounted) {
-                _this.setState({
-                  loading: false,
-                  show: false
-                });
-              }
-
-            case 6:
-            case "end":
-              return _context.stop();
-          }
+            }
+          case 6:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     })));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCancel", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
       var onCancel;
       return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              onCancel = _this.callbacks.onCancel;
-
-              if (!(typeof onCancel === "function")) {
-                _context2.next = 4;
-                break;
-              }
-
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            onCancel = _this.callbacks.onCancel;
+            if (!(typeof onCancel === "function")) {
               _context2.next = 4;
-              return onCancel();
-
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
+              break;
+            }
+            _context2.next = 4;
+            return onCancel();
+          case 4:
+          case "end":
+            return _context2.stop();
         }
       }, _callee2);
     })));
     return _this;
   }
-
   (0, _createClass2.default)(ConfirmationDialog, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -156,7 +125,7 @@ var ConfirmationDialog = /*#__PURE__*/function (_React$Component) {
         "data-testid": this.props["data-testid"]
       }, this.state.loading ? this.props.loading : null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, this.props.title), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, this.props.message), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogCancel, {
         onClick: this.onCancel
-      }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Dialog.DialogButton, {
+      }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
         "data-testid": "confirmationdialog-confirm-action",
         onClick: this.onAccept,
         disabled: this.props.disableConfirm
@@ -167,7 +136,6 @@ var ConfirmationDialog = /*#__PURE__*/function (_React$Component) {
   }]);
   return ConfirmationDialog;
 }(_react.default.Component);
-
 exports.ConfirmationDialog = ConfirmationDialog;
 (0, _defineProperty2.default)(ConfirmationDialog, "defaultProps", {
   title: "Confirmation",