@webiny/ui 5.34.8 → 5.35.0-beta.1

package/Carousel/Carouser.stories.js

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

package/Carousel/Carouser.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","Carousel"],"sources":["Carouser.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 } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport Carousel from \"./Carousel\";\n\nconst story = storiesOf(\"Components/Carousel\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage - single\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple checkbox with a label and description\"}>\n                        <Carousel>\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6\" />\n                        </Carousel>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Carousel>\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6\" />\n                    </Carousel>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Carousel] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,qBAAV,EAAiCC,MAAjC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,gBADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,iBAAD,qBACI;IAAK,GAAG,EAAC;EAAT,EADJ,eAEI;IAAK,GAAG,EAAC;EAAT,EAFJ,eAGI;IAAK,GAAG,EAAC;EAAT,EAHJ,eAII;IAAK,GAAG,EAAC;EAAT,EAJJ,eAKI;IAAK,GAAG,EAAC;EAAT,EALJ,eAMI;IAAK,GAAG,EAAC;EAAT,EANJ,CADJ,CADJ,eAWI,6BAAC,uBAAD,wqBAXJ,CAFJ,CADJ;AA6BH,CAhCL,EAiCI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,iBAAD;EAAd;AAAR,CAjCJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","readme","info","propTables","Carousel"],"sources":["Carouser.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 } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport Carousel from \"./Carousel\";\n\nconst story = storiesOf(\"Components/Carousel\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage - single\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple checkbox with a label and description\"}>\n                        <Carousel>\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5\" />\n                            <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6\" />\n                        </Carousel>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Carousel>\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide1\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide2\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide3\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide4\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide5\" />\n                        <img src=\"http://placehold.it/1000x400/ffffff/c0392b/&text=slide6\" />\n                    </Carousel>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Carousel] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,qBAAqB,EAAEC,MAAM,CAAC;AACtDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,gBAAgB,EAChB,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAA+C,gBACvE,6BAAC,iBAAQ,qBACL;IAAK,GAAG,EAAC;EAAyD,EAAG,eACrE;IAAK,GAAG,EAAC;EAAyD,EAAG,eACrE;IAAK,GAAG,EAAC;EAAyD,EAAG,eACrE;IAAK,GAAG,EAAC;EAAyD,EAAG,eACrE;IAAK,GAAG,EAAC;EAAyD,EAAG,eACrE;IAAK,GAAG,EAAC;EAAyD,EAAG,CAC9D,CACO,eACtB,6BAAC,uBAAgB,wqBAWE,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,iBAAQ;EAAE;AAAE,CAAC,CACvC"}

package/Carousel/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
-
 var _Carousel = _interopRequireDefault(require("./Carousel"));

package/Carousel/index.js.map

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

package/Checkbox/Checkbox.d.ts

@@ -7,6 +7,7 @@ interface Props extends FormComponentProps {
     onClick?: (value: boolean) => void;
     indeterminate?: boolean;
     description?: string;
+    "data-testid"?: string;
 }
 /**
  * Single Checkbox component can be used to store simple boolean values.

package/Checkbox/Checkbox.js

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = 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 _checkbox = require("@rmwc/checkbox");
-
 var _FormElementMessage = require("../FormElementMessage");
-
 /**
  * Single Checkbox component can be used to store simple boolean values.
  *
@@ -33,41 +22,33 @@ var _FormElementMessage = require("../FormElementMessage");
  */
 var Checkbox = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Checkbox, _React$Component);
-
   var _super = (0, _createSuper2.default)(Checkbox);
-
   function Checkbox() {
     var _this;
-
     (0, _classCallCheck2.default)(this, Checkbox);
-
     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 (e) {
       _this.props.onChange && _this.props.onChange(e.target.checked);
     });
     return _this;
   }
-
   (0, _createClass2.default)(Checkbox, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          value = _this$props.value,
-          label = _this$props.label,
-          disabled = _this$props.disabled,
-          indeterminate = _this$props.indeterminate,
-          description = _this$props.description,
-          validation = _this$props.validation,
-          _onClick = _this$props.onClick;
-
+        value = _this$props.value,
+        label = _this$props.label,
+        disabled = _this$props.disabled,
+        indeterminate = _this$props.indeterminate,
+        description = _this$props.description,
+        validation = _this$props.validation,
+        _onClick = _this$props.onClick;
       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(_checkbox.Checkbox, {
         indeterminate: indeterminate,
         disabled: disabled,
@@ -75,9 +56,11 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         onChange: this.onChange,
         onClick: function onClick() {
           return typeof _onClick === "function" && _onClick(Boolean(value));
-        } // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.
+        }
+        // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.
         ,
-        label: label
+        label: label,
+        "data-testid": this.props["data-testid"]
       }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
       }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
@@ -85,6 +68,5 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
   }]);
   return Checkbox;
 }(_react.default.Component);
-
 var _default = Checkbox;
 exports.default = _default;

package/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["Checkbox","e","props","onChange","target","checked","value","label","disabled","indeterminate","description","validation","onClick","validationIsValid","isValid","validationMessage","message","Boolean","React","Component"],"sources":["Checkbox.tsx"],"sourcesContent":["import React from \"react\";\nimport { Checkbox as RmwcCheckbox } from \"@rmwc/checkbox\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\n\ninterface Props extends FormComponentProps {\n    // Component label.\n    label?: React.ReactNode;\n\n    // Is checkbox disabled?\n    disabled?: boolean;\n\n    // onClick callback.\n    onClick?: (value: boolean) => void;\n\n    // Use when checkbox is not checked nor unchecked.\n    indeterminate?: boolean;\n\n    // Description beneath the checkbox.\n    description?: string;\n}\n\n/**\n * Single Checkbox component can be used to store simple boolean values.\n *\n * Grouping multiple Checkbox components with CheckboxGroup will allow to store an array of selected values.\n * In that case, each Checkbox component must receive value and onChange callback via props.\n */\nclass Checkbox extends React.Component<Props> {\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        this.props.onChange && this.props.onChange((e.target as any).checked);\n    };\n\n    public override render() {\n        const { value, label, disabled, indeterminate, description, validation, onClick } =\n            this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcCheckbox\n                    indeterminate={indeterminate}\n                    disabled={disabled}\n                    checked={Boolean(value)}\n                    onChange={this.onChange}\n                    onClick={() => typeof onClick === \"function\" && onClick(Boolean(value))}\n                    // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.\n                    label={label}\n                />\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAoBA;AACA;AACA;AACA;AACA;AACA;IACMA,Q;;;;;;;;;;;;;;;2FACS,UAACC,CAAD,EAA+C;MACtD,MAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAqBF,CAAC,CAACG,MAAH,CAAkBC,OAAtC,CAAvB;IACH,C;;;;;;WAED,kBAAyB;MACrB,kBACI,KAAKH,KADT;MAAA,IAAQI,KAAR,eAAQA,KAAR;MAAA,IAAeC,KAAf,eAAeA,KAAf;MAAA,IAAsBC,QAAtB,eAAsBA,QAAtB;MAAA,IAAgCC,aAAhC,eAAgCA,aAAhC;MAAA,IAA+CC,WAA/C,eAA+CA,WAA/C;MAAA,IAA4DC,UAA5D,eAA4DA,UAA5D;MAAA,IAAwEC,QAAxE,eAAwEA,OAAxE;;MAGA,WAAmED,UAAU,IAAI,EAAjF;MAAA,IAAiBE,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,kBAAD;QACI,aAAa,EAAEP,aADnB;QAEI,QAAQ,EAAED,QAFd;QAGI,OAAO,EAAES,OAAO,CAACX,KAAD,CAHpB;QAII,QAAQ,EAAE,KAAKH,QAJnB;QAKI,OAAO,EAAE;UAAA,OAAM,OAAOS,QAAP,KAAmB,UAAnB,IAAiCA,QAAO,CAACK,OAAO,CAACX,KAAD,CAAR,CAA9C;QAAA,CALb,CAMI;QANJ;QAOI,KAAK,EAAEC;MAPX,EADJ,EAUKM,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CAXR,EAcKF,iBAAiB,KAAK,KAAtB,IAA+BH,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CAfR,CADJ;IAoBH;;;EA/BkBQ,cAAA,CAAMC,S;;eAkCdnB,Q"}
+{"version":3,"names":["Checkbox","e","props","onChange","target","checked","value","label","disabled","indeterminate","description","validation","onClick","validationIsValid","isValid","validationMessage","message","Boolean","React","Component"],"sources":["Checkbox.tsx"],"sourcesContent":["import React from \"react\";\nimport { Checkbox as RmwcCheckbox } from \"@rmwc/checkbox\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\n\ninterface Props extends FormComponentProps {\n    // Component label.\n    label?: React.ReactNode;\n\n    // Is checkbox disabled?\n    disabled?: boolean;\n\n    // onClick callback.\n    onClick?: (value: boolean) => void;\n\n    // Use when checkbox is not checked nor unchecked.\n    indeterminate?: boolean;\n\n    // Description beneath the checkbox.\n    description?: string;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\n/**\n * Single Checkbox component can be used to store simple boolean values.\n *\n * Grouping multiple Checkbox components with CheckboxGroup will allow to store an array of selected values.\n * In that case, each Checkbox component must receive value and onChange callback via props.\n */\nclass Checkbox extends React.Component<Props> {\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        this.props.onChange && this.props.onChange((e.target as any).checked);\n    };\n\n    public override render() {\n        const { value, label, disabled, indeterminate, description, validation, onClick } =\n            this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcCheckbox\n                    indeterminate={indeterminate}\n                    disabled={disabled}\n                    checked={Boolean(value)}\n                    onChange={this.onChange}\n                    onClick={() => typeof onClick === \"function\" && onClick(Boolean(value))}\n                    // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.\n                    label={label}\n                    data-testid={this.props[\"data-testid\"]}\n                />\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AAuBA;AACA;AACA;AACA;AACA;AACA;AALA,IAMMA,QAAQ;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uFACC,UAACC,CAAyC,EAAK;MACtD,MAAKC,KAAK,CAACC,QAAQ,IAAI,MAAKD,KAAK,CAACC,QAAQ,CAAEF,CAAC,CAACG,MAAM,CAASC,OAAO,CAAC;IACzE,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MACrB,kBACI,IAAI,CAACH,KAAK;QADNI,KAAK,eAALA,KAAK;QAAEC,KAAK,eAALA,KAAK;QAAEC,QAAQ,eAARA,QAAQ;QAAEC,aAAa,eAAbA,aAAa;QAAEC,WAAW,eAAXA,WAAW;QAAEC,UAAU,eAAVA,UAAU;QAAEC,QAAO,eAAPA,OAAO;MAG/E,WAAmED,UAAU,IAAI,CAAC,CAAC;QAAlEE,iBAAiB,QAA1BC,OAAO;QAA8BC,iBAAiB,QAA1BC,OAAO;MAE3C,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,kBAAY;QACT,aAAa,EAAEP,aAAc;QAC7B,QAAQ,EAAED,QAAS;QACnB,OAAO,EAAES,OAAO,CAACX,KAAK,CAAE;QACxB,QAAQ,EAAE,IAAI,CAACH,QAAS;QACxB,OAAO,EAAE;UAAA,OAAM,OAAOS,QAAO,KAAK,UAAU,IAAIA,QAAO,CAACK,OAAO,CAACX,KAAK,CAAC,CAAC;QAAA;QACvE;QAAA;QACA,KAAK,EAAEC,KAAM;QACb,eAAa,IAAI,CAACL,KAAK,CAAC,aAAa;MAAE,EACzC,EACDW,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,CACY;IAEzB;EAAC;EAAA;AAAA,EAhCkBQ,cAAK,CAACC,SAAS;AAAA,eAmCvBnB,QAAQ;AAAA"}

package/Checkbox/Checkbox.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 _addonKnobs = require("@storybook/addon-knobs");
-
 var _README_Checkbox = _interopRequireDefault(require("./README_Checkbox.md"));
-
 var _form = require("@webiny/form");
-
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-
 var story = (0, _react2.storiesOf)("Components/Checkbox", module);
 story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage - single", function () {

package/Checkbox/Checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","Bind","info","propTables","Checkbox"],"sources":["Checkbox.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, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README_Checkbox.md\";\n\nimport { Form } from \"@webiny/form\";\nimport Checkbox from \"./Checkbox\";\n\nconst story = storiesOf(\"Components/Checkbox\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage - single\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple checkbox with a label and description\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind name=\"rememberMe\">\n                                    <Checkbox\n                                        label={\"Remember me\"}\n                                        disabled={disabled}\n                                        description={\n                                            \"You won't be logged out after you leave the app.\"\n                                        }\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"rememberMe\">\n                                  <Checkbox\n                                    label={\"Remember me\"}\n                                    disabled={disabled}\n                                    description={\"You won't be logged out after you leave the app.\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Checkbox] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,qBAAV,EAAiCC,MAAjC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,gBADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,wBAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD,QACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,iBAAD;MACI,KAAK,EAAE,aADX;MAEI,QAAQ,EAAEH,QAFd;MAGI,WAAW,EACP;IAJR,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAgBI,6BAAC,uBAAD,4iBAhBJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;EAAEI,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,iBAAD;EAAd;AAAR,CA3CJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","Bind","info","propTables","Checkbox"],"sources":["Checkbox.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, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README_Checkbox.md\";\n\nimport { Form } from \"@webiny/form\";\nimport Checkbox from \"./Checkbox\";\n\nconst story = storiesOf(\"Components/Checkbox\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage - single\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple checkbox with a label and description\"}>\n                        <Form>\n                            {({ Bind }) => (\n                                <Bind name=\"rememberMe\">\n                                    <Checkbox\n                                        label={\"Remember me\"}\n                                        disabled={disabled}\n                                        description={\n                                            \"You won't be logged out after you leave the app.\"\n                                        }\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"rememberMe\">\n                                  <Checkbox\n                                    label={\"Remember me\"}\n                                    disabled={disabled}\n                                    description={\"You won't be logged out after you leave the app.\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Checkbox] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,qBAAqB,EAAEC,MAAM,CAAC;AACtDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,gBAAgB,EAChB,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,wBAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAA+C,gBACvE,6BAAC,UAAI,QACA;IAAA,IAAGC,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAY,gBACnB,6BAAC,iBAAQ;MACL,KAAK,EAAE,aAAc;MACrB,QAAQ,EAAEH,QAAS;MACnB,WAAW,EACP;IACH,EACH,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,4iBAcE,CACR,CACX;AAEhB,CAAC,EACD;EAAEI,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,iBAAQ;EAAE;AAAE,CAAC,CACvC"}

package/Checkbox/Checkbox.styles.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.webinyCheckboxTitle = void 0;
-
 var _emotion = require("emotion");
-
 /**
  * Controls the helper text below the checkbox.
  * @type {string}

package/Checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["webinyCheckboxTitle","css","textTransform","fontWeight","marginBottom"],"sources":["Checkbox.styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst webinyCheckboxTitle = css(\n    {},\n    {\n        \"&.mdc-text-field-helper-text\": {\n            //paddingLeft: 10,\n            textTransform: \"uppercase\",\n            fontWeight: \"bold\",\n            marginBottom: \"5px\"\n        }\n    }\n);\n\nexport { webinyCheckboxTitle };\n"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA,IAAMA,mBAAmB,gBAAG,IAAAC,YAAA,EACxB,EADwB,EAExB;EACI,gCAAgC;IAC5B;IACAC,aAAa,EAAE,WAFa;IAG5BC,UAAU,EAAE,MAHgB;IAI5BC,YAAY,EAAE;EAJc;AADpC,CAFwB,+BAA5B"}
+{"version":3,"names":["webinyCheckboxTitle","css","textTransform","fontWeight","marginBottom"],"sources":["Checkbox.styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst webinyCheckboxTitle = css(\n    {},\n    {\n        \"&.mdc-text-field-helper-text\": {\n            //paddingLeft: 10,\n            textTransform: \"uppercase\",\n            fontWeight: \"bold\",\n            marginBottom: \"5px\"\n        }\n    }\n);\n\nexport { webinyCheckboxTitle };\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA,IAAMA,mBAAmB,gBAAG,IAAAC,YAAG,EAC3B,CAAC,CAAC,EACF;EACI,8BAA8B,EAAE;IAC5B;IACAC,aAAa,EAAE,WAAW;IAC1BC,UAAU,EAAE,MAAM;IAClBC,YAAY,EAAE;EAClB;AACJ,CAAC,+BACJ;AAAC"}

package/Checkbox/CheckboxGroup.js

@@ -1,51 +1,37 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Checkbox = require("./Checkbox.styles");
-
 var _FormElementMessage = require("../FormElementMessage");
-
 var CheckboxGroup = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(CheckboxGroup, _React$Component);
-
   var _super = (0, _createSuper2.default)(CheckboxGroup);
-
   function CheckboxGroup() {
     (0, _classCallCheck2.default)(this, CheckboxGroup);
     return _super.apply(this, arguments);
   }
-
   (0, _createClass2.default)(CheckboxGroup, [{
     key: "render",
     value: function render() {
       var _this = this;
-
       var _this$props = this.props,
-          description = _this$props.description,
-          label = _this$props.label,
-          _this$props$validatio = _this$props.validation,
-          validation = _this$props$validatio === void 0 ? {
-        isValid: null,
-        message: null
-      } : _this$props$validatio;
+        description = _this$props.description,
+        label = _this$props.label,
+        _this$props$validatio = _this$props.validation,
+        validation = _this$props$validatio === void 0 ? {
+          isValid: null,
+          message: null
+        } : _this$props$validatio;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
         className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent " + _Checkbox.webinyCheckboxTitle
       }, label), this.props.children({
@@ -53,13 +39,11 @@ var CheckboxGroup = /*#__PURE__*/function (_React$Component) {
           return function () {
             var values = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
             var index = values.indexOf(value);
-
             if (index > -1) {
               values.splice(index, 1);
             } else {
               values.push(value);
             }
-
             _this.props.onChange && _this.props.onChange(values);
           };
         },
@@ -74,6 +58,5 @@ var CheckboxGroup = /*#__PURE__*/function (_React$Component) {
   }]);
   return CheckboxGroup;
 }(_react.default.Component);
-
 var _default = CheckboxGroup;
 exports.default = _default;

package/Checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["CheckboxGroup","props","description","label","validation","isValid","message","webinyCheckboxTitle","children","onChange","value","values","Array","isArray","index","indexOf","splice","push","getValue","id","includes","React","Component"],"sources":["CheckboxGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"./../types\";\nimport { webinyCheckboxTitle } from \"./Checkbox.styles\";\nimport { FormElementMessage } from \"../FormElementMessage\";\n\nexport interface ChildrenRenderProp {\n    onChange: (id: string | number) => () => void;\n    getValue: (id: string | number) => boolean;\n}\n\ntype Props = FormComponentProps & {\n    // Form element's label.\n    label?: string;\n\n    // Form element's description.\n    description?: string;\n\n    // An array of Checkbox components.\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n};\n\nclass CheckboxGroup extends React.Component<Props> {\n    public override render() {\n        const { description, label, validation = { isValid: null, message: null } } = this.props;\n\n        return (\n            <React.Fragment>\n                {label && (\n                    <div\n                        className={\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent \" +\n                            webinyCheckboxTitle\n                        }\n                    >\n                        {label}\n                    </div>\n                )}\n\n                {this.props.children({\n                    onChange: value => {\n                        return () => {\n                            const values = Array.isArray(this.props.value)\n                                ? [...this.props.value]\n                                : [];\n                            const index = values.indexOf(value);\n                            if (index > -1) {\n                                values.splice(index, 1);\n                            } else {\n                                values.push(value);\n                            }\n\n                            this.props.onChange && this.props.onChange(values);\n                        };\n                    },\n                    getValue: id => {\n                        const values = Array.isArray(this.props.value) ? this.props.value : [];\n                        return values.includes(id);\n                    }\n                })}\n\n                {validation.isValid === false && (\n                    <FormElementMessage error>{validation.message}</FormElementMessage>\n                )}\n\n                {validation.isValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;IAkBMA,a;;;;;;;;;;;;WACF,kBAAyB;MAAA;;MACrB,kBAA8E,KAAKC,KAAnF;MAAA,IAAQC,WAAR,eAAQA,WAAR;MAAA,IAAqBC,KAArB,eAAqBA,KAArB;MAAA,wCAA4BC,UAA5B;MAAA,IAA4BA,UAA5B,sCAAyC;QAAEC,OAAO,EAAE,IAAX;QAAiBC,OAAO,EAAE;MAA1B,CAAzC;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,QACKH,KAAK,iBACF;QACI,SAAS,EACL,uEACAI;MAHR,GAMKJ,KANL,CAFR,EAYK,KAAKF,KAAL,CAAWO,QAAX,CAAoB;QACjBC,QAAQ,EAAE,kBAAAC,KAAK,EAAI;UACf,OAAO,YAAM;YACT,IAAMC,MAAM,GAAGC,KAAK,CAACC,OAAN,CAAc,KAAI,CAACZ,KAAL,CAAWS,KAAzB,qCACL,KAAI,CAACT,KAAL,CAAWS,KADN,IAET,EAFN;YAGA,IAAMI,KAAK,GAAGH,MAAM,CAACI,OAAP,CAAeL,KAAf,CAAd;;YACA,IAAII,KAAK,GAAG,CAAC,CAAb,EAAgB;cACZH,MAAM,CAACK,MAAP,CAAcF,KAAd,EAAqB,CAArB;YACH,CAFD,MAEO;cACHH,MAAM,CAACM,IAAP,CAAYP,KAAZ;YACH;;YAED,KAAI,CAACT,KAAL,CAAWQ,QAAX,IAAuB,KAAI,CAACR,KAAL,CAAWQ,QAAX,CAAoBE,MAApB,CAAvB;UACH,CAZD;QAaH,CAfgB;QAgBjBO,QAAQ,EAAE,kBAAAC,EAAE,EAAI;UACZ,IAAMR,MAAM,GAAGC,KAAK,CAACC,OAAN,CAAc,KAAI,CAACZ,KAAL,CAAWS,KAAzB,IAAkC,KAAI,CAACT,KAAL,CAAWS,KAA7C,GAAqD,EAApE;UACA,OAAOC,MAAM,CAACS,QAAP,CAAgBD,EAAhB,CAAP;QACH;MAnBgB,CAApB,CAZL,EAkCKf,UAAU,CAACC,OAAX,KAAuB,KAAvB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BD,UAAU,CAACE,OAAtC,CAnCR,EAsCKF,UAAU,CAACC,OAAX,KAAuB,KAAvB,IAAgCH,WAAhC,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CAvCR,CADJ;IA4CH;;;EAhDuBmB,cAAA,CAAMC,S;;eAmDnBtB,a"}
+{"version":3,"names":["CheckboxGroup","props","description","label","validation","isValid","message","webinyCheckboxTitle","children","onChange","value","values","Array","isArray","index","indexOf","splice","push","getValue","id","includes","React","Component"],"sources":["CheckboxGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"./../types\";\nimport { webinyCheckboxTitle } from \"./Checkbox.styles\";\nimport { FormElementMessage } from \"../FormElementMessage\";\n\nexport interface ChildrenRenderProp {\n    onChange: (id: string | number) => () => void;\n    getValue: (id: string | number) => boolean;\n}\n\ntype Props = FormComponentProps & {\n    // Form element's label.\n    label?: string;\n\n    // Form element's description.\n    description?: string;\n\n    // An array of Checkbox components.\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n};\n\nclass CheckboxGroup extends React.Component<Props> {\n    public override render() {\n        const { description, label, validation = { isValid: null, message: null } } = this.props;\n\n        return (\n            <React.Fragment>\n                {label && (\n                    <div\n                        className={\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent \" +\n                            webinyCheckboxTitle\n                        }\n                    >\n                        {label}\n                    </div>\n                )}\n\n                {this.props.children({\n                    onChange: value => {\n                        return () => {\n                            const values = Array.isArray(this.props.value)\n                                ? [...this.props.value]\n                                : [];\n                            const index = values.indexOf(value);\n                            if (index > -1) {\n                                values.splice(index, 1);\n                            } else {\n                                values.push(value);\n                            }\n\n                            this.props.onChange && this.props.onChange(values);\n                        };\n                    },\n                    getValue: id => {\n                        const values = Array.isArray(this.props.value) ? this.props.value : [];\n                        return values.includes(id);\n                    }\n                })}\n\n                {validation.isValid === false && (\n                    <FormElementMessage error>{validation.message}</FormElementMessage>\n                )}\n\n                {validation.isValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;;;;;;;AAAA;AAEA;AACA;AAA2D,IAkBrDA,aAAa;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA,OACf,kBAAyB;MAAA;MACrB,kBAA8E,IAAI,CAACC,KAAK;QAAhFC,WAAW,eAAXA,WAAW;QAAEC,KAAK,eAALA,KAAK;QAAA,oCAAEC,UAAU;QAAVA,UAAU,sCAAG;UAAEC,OAAO,EAAE,IAAI;UAAEC,OAAO,EAAE;QAAK,CAAC;MAEzE,oBACI,6BAAC,cAAK,CAAC,QAAQ,QACVH,KAAK,iBACF;QACI,SAAS,EACL,oEAAoE,GACpEI;MACH,GAEAJ,KAAK,CAEb,EAEA,IAAI,CAACF,KAAK,CAACO,QAAQ,CAAC;QACjBC,QAAQ,EAAE,kBAAAC,KAAK,EAAI;UACf,OAAO,YAAM;YACT,IAAMC,MAAM,GAAGC,KAAK,CAACC,OAAO,CAAC,KAAI,CAACZ,KAAK,CAACS,KAAK,CAAC,oCACpC,KAAI,CAACT,KAAK,CAACS,KAAK,IACpB,EAAE;YACR,IAAMI,KAAK,GAAGH,MAAM,CAACI,OAAO,CAACL,KAAK,CAAC;YACnC,IAAII,KAAK,GAAG,CAAC,CAAC,EAAE;cACZH,MAAM,CAACK,MAAM,CAACF,KAAK,EAAE,CAAC,CAAC;YAC3B,CAAC,MAAM;cACHH,MAAM,CAACM,IAAI,CAACP,KAAK,CAAC;YACtB;YAEA,KAAI,CAACT,KAAK,CAACQ,QAAQ,IAAI,KAAI,CAACR,KAAK,CAACQ,QAAQ,CAACE,MAAM,CAAC;UACtD,CAAC;QACL,CAAC;QACDO,QAAQ,EAAE,kBAAAC,EAAE,EAAI;UACZ,IAAMR,MAAM,GAAGC,KAAK,CAACC,OAAO,CAAC,KAAI,CAACZ,KAAK,CAACS,KAAK,CAAC,GAAG,KAAI,CAACT,KAAK,CAACS,KAAK,GAAG,EAAE;UACtE,OAAOC,MAAM,CAACS,QAAQ,CAACD,EAAE,CAAC;QAC9B;MACJ,CAAC,CAAC,EAEDf,UAAU,CAACC,OAAO,KAAK,KAAK,iBACzB,6BAAC,sCAAkB;QAAC,KAAK;MAAA,GAAED,UAAU,CAACE,OAAO,CAChD,EAEAF,UAAU,CAACC,OAAO,KAAK,KAAK,IAAIH,WAAW,iBACxC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,CACY;IAEzB;EAAC;EAAA;AAAA,EAhDuBmB,cAAK,CAACC,SAAS;AAAA,eAmD5BtB,aAAa;AAAA"}

package/Checkbox/CheckboxGroup.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 _addonKnobs = require("@storybook/addon-knobs");
-
 var _README_CheckboxGroup = _interopRequireDefault(require("./README_CheckboxGroup.md"));
-
 var _form = require("@webiny/form");
-
 var _ = require(".");
-
 var story = (0, _react2.storiesOf)("Components/Checkbox", module);
 story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage - group", function () {
@@ -45,10 +37,10 @@ story.add("usage - group", function () {
       description: "Choose only fruits you like."
     }, function (_ref2) {
       var onChange = _ref2.onChange,
-          getValue = _ref2.getValue;
+        getValue = _ref2.getValue;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options.map(function (_ref3) {
         var id = _ref3.id,
-            name = _ref3.name;
+          name = _ref3.name;
         return /*#__PURE__*/_react.default.createElement(_.Checkbox, {
           disabled: disabled,
           key: id,

package/Checkbox/CheckboxGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","options","id","name","readme","fruits","Bind","onChange","getValue","map","info","propTables","CheckboxGroup"],"sources":["CheckboxGroup.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, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README_CheckboxGroup.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Checkbox, CheckboxGroup } from \".\";\n\nconst story = storiesOf(\"Components/Checkbox\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage - group\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        const options = [\n            { id: \"apple\", name: \"Apple\" },\n            { id: \"pear\", name: \"Pear\" },\n            { id: \"orange\", name: \"Orange\" }\n        ];\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple checkbox with label and description\"}>\n                        <Form data={{ fruits: [\"pear\"] }}>\n                            {({ Bind }) => (\n                                <Bind name=\"fruits\">\n                                    <CheckboxGroup\n                                        label=\"Fruits selection\"\n                                        description={\"Choose only fruits you like.\"}\n                                    >\n                                        {({ onChange, getValue }) => (\n                                            <React.Fragment>\n                                                {options.map(({ id, name }) => (\n                                                    <Checkbox\n                                                        disabled={disabled}\n                                                        key={id}\n                                                        label={name}\n                                                        value={getValue(id)}\n                                                        onChange={onChange(id)}\n                                                    />\n                                                ))}\n                                            </React.Fragment>\n                                        )}\n                                    </CheckboxGroup>\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{fruits: ['pear']}}>\n                        {({ Bind }) => (\n                            <Bind name=\"fruits\">\n                                <CheckboxGroup\n                                    label=\"Fruits selection\"\n                                    description={\"Choose only fruits you like.\"}\n                                >\n                                    {({ onChange, getValue }) => (\n                                        <React.Fragment>\n                                            {options.map(({id, name}) => (\n                                                <Checkbox\n                                                    disabled={disabled}\n                                                    key={id}\n                                                    label={name}\n                                                    value={getValue(id)}\n                                                    onChange={onChange(id)}\n                                                />\n                                            ))}\n                                        </React.Fragment>\n                                    )}\n                                </CheckboxGroup>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [CheckboxGroup] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,qBAAV,EAAiCC,MAAjC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,eADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,IAAMC,OAAO,GAAG,CACZ;IAAEC,EAAE,EAAE,OAAN;IAAeC,IAAI,EAAE;EAArB,CADY,EAEZ;IAAED,EAAE,EAAE,MAAN;IAAcC,IAAI,EAAE;EAApB,CAFY,EAGZ;IAAED,EAAE,EAAE,QAAN;IAAgBC,IAAI,EAAE;EAAtB,CAHY,CAAhB;EAMA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,6BAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,MAAM,EAAE,CAAC,MAAD;IAAV;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,eAAD;MACI,KAAK,EAAC,kBADV;MAEI,WAAW,EAAE;IAFjB,GAIK;MAAA,IAAGC,QAAH,SAAGA,QAAH;MAAA,IAAaC,QAAb,SAAaA,QAAb;MAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,QACKP,OAAO,CAACQ,GAAR,CAAY;QAAA,IAAGP,EAAH,SAAGA,EAAH;QAAA,IAAOC,IAAP,SAAOA,IAAP;QAAA,oBACT,6BAAC,UAAD;UACI,QAAQ,EAAEJ,QADd;UAEI,GAAG,EAAEG,EAFT;UAGI,KAAK,EAAEC,IAHX;UAII,KAAK,EAAEK,QAAQ,CAACN,EAAD,CAJnB;UAKI,QAAQ,EAAEK,QAAQ,CAACL,EAAD;QALtB,EADS;MAAA,CAAZ,CADL,CADH;IAAA,CAJL,CADJ,CADH;EAAA,CADL,CADJ,CADJ,eA2BI,6BAAC,uBAAD,01CA3BJ,CAFJ,CADJ;AA6DH,CAxEL,EAyEI;EAAEQ,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,eAAD;EAAd;AAAR,CAzEJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","options","id","name","readme","fruits","Bind","onChange","getValue","map","info","propTables","CheckboxGroup"],"sources":["CheckboxGroup.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, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README_CheckboxGroup.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Checkbox, CheckboxGroup } from \".\";\n\nconst story = storiesOf(\"Components/Checkbox\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage - group\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        const options = [\n            { id: \"apple\", name: \"Apple\" },\n            { id: \"pear\", name: \"Pear\" },\n            { id: \"orange\", name: \"Orange\" }\n        ];\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple checkbox with label and description\"}>\n                        <Form data={{ fruits: [\"pear\"] }}>\n                            {({ Bind }) => (\n                                <Bind name=\"fruits\">\n                                    <CheckboxGroup\n                                        label=\"Fruits selection\"\n                                        description={\"Choose only fruits you like.\"}\n                                    >\n                                        {({ onChange, getValue }) => (\n                                            <React.Fragment>\n                                                {options.map(({ id, name }) => (\n                                                    <Checkbox\n                                                        disabled={disabled}\n                                                        key={id}\n                                                        label={name}\n                                                        value={getValue(id)}\n                                                        onChange={onChange(id)}\n                                                    />\n                                                ))}\n                                            </React.Fragment>\n                                        )}\n                                    </CheckboxGroup>\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{fruits: ['pear']}}>\n                        {({ Bind }) => (\n                            <Bind name=\"fruits\">\n                                <CheckboxGroup\n                                    label=\"Fruits selection\"\n                                    description={\"Choose only fruits you like.\"}\n                                >\n                                    {({ onChange, getValue }) => (\n                                        <React.Fragment>\n                                            {options.map(({id, name}) => (\n                                                <Checkbox\n                                                    disabled={disabled}\n                                                    key={id}\n                                                    label={name}\n                                                    value={getValue(id)}\n                                                    onChange={onChange(id)}\n                                                />\n                                            ))}\n                                        </React.Fragment>\n                                    )}\n                                </CheckboxGroup>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [CheckboxGroup] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,qBAAqB,EAAEC,MAAM,CAAC;AACtDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,eAAe,EACf,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,IAAMC,OAAO,GAAG,CACZ;IAAEC,EAAE,EAAE,OAAO;IAAEC,IAAI,EAAE;EAAQ,CAAC,EAC9B;IAAED,EAAE,EAAE,MAAM;IAAEC,IAAI,EAAE;EAAO,CAAC,EAC5B;IAAED,EAAE,EAAE,QAAQ;IAAEC,IAAI,EAAE;EAAS,CAAC,CACnC;EAED,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,6BAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAA6C,gBACrE,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEC,MAAM,EAAE,CAAC,MAAM;IAAE;EAAE,GAC5B;IAAA,IAAGC,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAQ,gBACf,6BAAC,eAAa;MACV,KAAK,EAAC,kBAAkB;MACxB,WAAW,EAAE;IAA+B,GAE3C;MAAA,IAAGC,QAAQ,SAARA,QAAQ;QAAEC,QAAQ,SAARA,QAAQ;MAAA,oBAClB,6BAAC,cAAK,CAAC,QAAQ,QACVP,OAAO,CAACQ,GAAG,CAAC;QAAA,IAAGP,EAAE,SAAFA,EAAE;UAAEC,IAAI,SAAJA,IAAI;QAAA,oBACpB,6BAAC,UAAQ;UACL,QAAQ,EAAEJ,QAAS;UACnB,GAAG,EAAEG,EAAG;UACR,KAAK,EAAEC,IAAK;UACZ,KAAK,EAAEK,QAAQ,CAACN,EAAE,CAAE;UACpB,QAAQ,EAAEK,QAAQ,CAACL,EAAE;QAAE,EACzB;MAAA,CACL,CAAC,CACW;IAAA,CACpB,CACW,CACb;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,01CA2BE,CACR,CACX;AAEhB,CAAC,EACD;EAAEQ,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,eAAa;EAAE;AAAE,CAAC,CAC5C"}

package/Checkbox/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "CheckboxGroup", {
     return _CheckboxGroup.default;
   }
 });
-
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-
 var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));

package/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as Checkbox } from \"./Checkbox\";\nexport { default as CheckboxGroup } from \"./CheckboxGroup\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as Checkbox } from \"./Checkbox\";\nexport { default as CheckboxGroup } from \"./CheckboxGroup\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AACA"}

package/Chips/Chip.js

@@ -1,24 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Chip = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _chip = require("@rmwc/chip");
-
 var _excluded = ["children"];
-
 var Chip = function Chip(props) {
   var children = props.children,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_chip.Chip, rest, children);
 };
-
 exports.Chip = Chip;

package/Chips/Chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["Chip","props","children","rest"],"sources":["Chip.tsx"],"sourcesContent":["import React from \"react\";\nimport { Chip as RmwcChip, ChipProps as RmwcChipProps } from \"@rmwc/chip\";\n\nexport type ChipProps = RmwcChipProps;\n\nexport const Chip: React.FC<ChipProps> = props => {\n    const { children, ...rest } = props;\n    return <RmwcChip {...rest}>{children}</RmwcChip>;\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAIO,IAAMA,IAAyB,GAAG,SAA5BA,IAA4B,CAAAC,KAAK,EAAI;EAC9C,IAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;EAAA,IAAqBC,IAArB,0CAA8BF,KAA9B;EACA,oBAAO,6BAAC,UAAD,EAAcE,IAAd,EAAqBD,QAArB,CAAP;AACH,CAHM"}
+{"version":3,"names":["Chip","props","children","rest"],"sources":["Chip.tsx"],"sourcesContent":["import React from \"react\";\nimport { Chip as RmwcChip, ChipProps as RmwcChipProps } from \"@rmwc/chip\";\n\nexport type ChipProps = RmwcChipProps;\n\nexport const Chip: React.FC<ChipProps> = props => {\n    const { children, ...rest } = props;\n    return <RmwcChip {...rest}>{children}</RmwcChip>;\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AAA0E;AAInE,IAAMA,IAAyB,GAAG,SAA5BA,IAAyB,CAAGC,KAAK,EAAI;EAC9C,IAAQC,QAAQ,GAAcD,KAAK,CAA3BC,QAAQ;IAAKC,IAAI,0CAAKF,KAAK;EACnC,oBAAO,6BAAC,UAAQ,EAAKE,IAAI,EAAGD,QAAQ,CAAY;AACpD,CAAC;AAAC"}

package/Chips/Chips.js

@@ -1,34 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Chips = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _chip = require("@rmwc/chip");
-
 var _styles = require("./styles");
-
 var _excluded = ["children", "className", "disabled"];
-
 var Chips = function Chips(props) {
   var children = props.children,
-      className = props.className,
-      disabled = props.disabled,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+    className = props.className,
+    disabled = props.disabled,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_chip.ChipSet, Object.assign({}, rest, {
     className: (0, _classnames.default)(className, _styles.chipIconWrapper, (0, _defineProperty2.default)({}, _styles.disabledChips, disabled))
   }), children));
 };
-
 exports.Chips = Chips;

package/Chips/Chips.js.map

@@ -1 +1 @@
-{"version":3,"names":["Chips","props","children","className","disabled","rest","classNames","chipIconWrapper","disabledChips"],"sources":["Chips.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ChipSet } from \"@rmwc/chip\";\nimport { Chip } from \"./Chip\";\nimport { chipIconWrapper, disabledChips } from \"./styles\";\n\nexport interface ChipsProps {\n    /**\n     * Chips to show\n     */\n    children?: React.ReactElement<typeof Chip> | React.ReactElement<typeof Chip>[];\n\n    /**\n     * Is chip disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n\n    /**\n     * Style object.\n     */\n    style?: React.CSSProperties;\n}\n\nexport const Chips: React.FC<ChipsProps> = props => {\n    const { children, className, disabled, ...rest } = props;\n\n    return (\n        <React.Fragment>\n            <ChipSet\n                {...rest}\n                className={classNames(className, chipIconWrapper, {\n                    [disabledChips]: disabled\n                })}\n            >\n                {children}\n            </ChipSet>\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAwBO,IAAMA,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;EAChD,IAAQC,QAAR,GAAmDD,KAAnD,CAAQC,QAAR;EAAA,IAAkBC,SAAlB,GAAmDF,KAAnD,CAAkBE,SAAlB;EAAA,IAA6BC,QAA7B,GAAmDH,KAAnD,CAA6BG,QAA7B;EAAA,IAA0CC,IAA1C,0CAAmDJ,KAAnD;EAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,aAAD,oBACQI,IADR;IAEI,SAAS,EAAE,IAAAC,mBAAA,EAAWH,SAAX,EAAsBI,uBAAtB,oCACNC,qBADM,EACUJ,QADV;EAFf,IAMKF,QANL,CADJ,CADJ;AAYH,CAfM"}
+{"version":3,"names":["Chips","props","children","className","disabled","rest","classNames","chipIconWrapper","disabledChips"],"sources":["Chips.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport { ChipSet } from \"@rmwc/chip\";\nimport { Chip } from \"./Chip\";\nimport { chipIconWrapper, disabledChips } from \"./styles\";\n\nexport interface ChipsProps {\n    /**\n     * Chips to show\n     */\n    children?: React.ReactElement<typeof Chip> | React.ReactElement<typeof Chip>[];\n\n    /**\n     * Is chip disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n\n    /**\n     * Style object.\n     */\n    style?: React.CSSProperties;\n}\n\nexport const Chips: React.FC<ChipsProps> = props => {\n    const { children, className, disabled, ...rest } = props;\n\n    return (\n        <React.Fragment>\n            <ChipSet\n                {...rest}\n                className={classNames(className, chipIconWrapper, {\n                    [disabledChips]: disabled\n                })}\n            >\n                {children}\n            </ChipSet>\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAA0D;AAwBnD,IAAMA,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EAChD,IAAQC,QAAQ,GAAmCD,KAAK,CAAhDC,QAAQ;IAAEC,SAAS,GAAwBF,KAAK,CAAtCE,SAAS;IAAEC,QAAQ,GAAcH,KAAK,CAA3BG,QAAQ;IAAKC,IAAI,0CAAKJ,KAAK;EAExD,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,aAAO,oBACAI,IAAI;IACR,SAAS,EAAE,IAAAC,mBAAU,EAACH,SAAS,EAAEI,uBAAe,oCAC3CC,qBAAa,EAAGJ,QAAQ;EAC1B,IAEFF,QAAQ,CACH,CACG;AAEzB,CAAC;AAAC"}

package/Chips/Chips.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("./README.md"));
-
 var _baselineDone24px = require("./icons/baseline-done-24px.svg");
-
 var _baselineEmail24px = require("./icons/baseline-email-24px.svg");
-
 var _index = require("./index");
-
 var story = (0, _react2.storiesOf)("Components/Chips", module);
 story.add("usage", function () {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {

package/Chips/Chips.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Chip","Chips"],"sources":["Chips.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 readme from \"./README.md\";\n\nimport { ReactComponent as BaselineDoneIcon } from \"./icons/baseline-done-24px.svg\";\nimport { ReactComponent as BaselineEmailIcon } from \"./icons/baseline-email-24px.svg\";\nimport { Chip, Chips } from \"./index\";\n\nconst story = storiesOf(\"Components/Chips\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple chips with a label and description\"}>\n                        <div>\n                            <Chips>\n                                <Chip selected>Cookies</Chip>\n                                <Chip>Pizza</Chip>\n                                <Chip>Icecream</Chip>\n                            </Chips>\n\n                            <Chips>\n                                <Chip icon={<BaselineEmailIcon />}>Cookies</Chip>\n                                <Chip trailingIcon icon={<BaselineDoneIcon />}>\n                                    Cookies\n                                </Chip>\n                                <Chip icon={<BaselineEmailIcon />}>Cookies</Chip>\n                                <Chip trailingIcon icon={<BaselineDoneIcon />}>\n                                    Cookies\n                                </Chip>\n                            </Chips>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                         <div>\n                            <Chips>\n                                <Chip selected>\n                                    Cookies\n                                </Chip>\n                                <Chip>\n                                    Pizza\n                                </Chip>\n                                <Chip>\n                                    Icecream\n                                </Chip>\n                            </Chips>\n                            <Chips>\n                                <Chip>\n                                    <ChipIcon leading icon={<BaselineEmailIcon />} />\n                                    Cookies\n                                    <ChipIcon trailing icon={<BaselineDoneIcon />} />\n                                </Chip>\n                            </Chips>\n                        </div>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Chip, Chips] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,uDACI,6BAAC,YAAD,qBACI,6BAAC,WAAD;IAAM,QAAQ;EAAd,GAAe,SAAf,CADJ,eAEI,6BAAC,WAAD,QAAM,OAAN,CAFJ,eAGI,6BAAC,WAAD,QAAM,UAAN,CAHJ,CADJ,eAOI,6BAAC,YAAD,qBACI,6BAAC,WAAD;IAAM,IAAI,eAAE,6BAAC,iCAAD;EAAZ,GAAmC,SAAnC,CADJ,eAEI,6BAAC,WAAD;IAAM,YAAY,MAAlB;IAAmB,IAAI,eAAE,6BAAC,gCAAD;EAAzB,GAA+C,SAA/C,CAFJ,eAKI,6BAAC,WAAD;IAAM,IAAI,eAAE,6BAAC,iCAAD;EAAZ,GAAmC,SAAnC,CALJ,eAMI,6BAAC,WAAD;IAAM,YAAY,MAAlB;IAAmB,IAAI,eAAE,6BAAC,gCAAD;EAAzB,GAA+C,SAA/C,CANJ,CAPJ,CADJ,CADJ,eAqBI,6BAAC,uBAAD,q6BArBJ,CAFJ,CADJ;AAmDH,CAtDL,EAuDI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,WAAD,EAAOC,YAAP;EAAd;AAAR,CAvDJ"}
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Chip","Chips"],"sources":["Chips.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 readme from \"./README.md\";\n\nimport { ReactComponent as BaselineDoneIcon } from \"./icons/baseline-done-24px.svg\";\nimport { ReactComponent as BaselineEmailIcon } from \"./icons/baseline-email-24px.svg\";\nimport { Chip, Chips } from \"./index\";\n\nconst story = storiesOf(\"Components/Chips\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple chips with a label and description\"}>\n                        <div>\n                            <Chips>\n                                <Chip selected>Cookies</Chip>\n                                <Chip>Pizza</Chip>\n                                <Chip>Icecream</Chip>\n                            </Chips>\n\n                            <Chips>\n                                <Chip icon={<BaselineEmailIcon />}>Cookies</Chip>\n                                <Chip trailingIcon icon={<BaselineDoneIcon />}>\n                                    Cookies\n                                </Chip>\n                                <Chip icon={<BaselineEmailIcon />}>Cookies</Chip>\n                                <Chip trailingIcon icon={<BaselineDoneIcon />}>\n                                    Cookies\n                                </Chip>\n                            </Chips>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                         <div>\n                            <Chips>\n                                <Chip selected>\n                                    Cookies\n                                </Chip>\n                                <Chip>\n                                    Pizza\n                                </Chip>\n                                <Chip>\n                                    Icecream\n                                </Chip>\n                            </Chips>\n                            <Chips>\n                                <Chip>\n                                    <ChipIcon leading icon={<BaselineEmailIcon />} />\n                                    Cookies\n                                    <ChipIcon trailing icon={<BaselineDoneIcon />} />\n                                </Chip>\n                            </Chips>\n                        </div>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Chip, Chips] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AAEA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,kBAAkB,EAAEC,MAAM,CAAC;AAEnDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAA4C,gBACpE,uDACI,6BAAC,YAAK,qBACF,6BAAC,WAAI;IAAC,QAAQ;EAAA,GAAC,SAAO,CAAO,eAC7B,6BAAC,WAAI,QAAC,OAAK,CAAO,eAClB,6BAAC,WAAI,QAAC,UAAQ,CAAO,CACjB,eAER,6BAAC,YAAK,qBACF,6BAAC,WAAI;IAAC,IAAI,eAAE,6BAAC,iCAAiB;EAAI,GAAC,SAAO,CAAO,eACjD,6BAAC,WAAI;IAAC,YAAY;IAAC,IAAI,eAAE,6BAAC,gCAAgB;EAAI,GAAC,SAE/C,CAAO,eACP,6BAAC,WAAI;IAAC,IAAI,eAAE,6BAAC,iCAAiB;EAAI,GAAC,SAAO,CAAO,eACjD,6BAAC,WAAI;IAAC,YAAY;IAAC,IAAI,eAAE,6BAAC,gCAAgB;EAAI,GAAC,SAE/C,CAAO,CACH,CACN,CACY,eACtB,6BAAC,uBAAgB,q6BAuBE,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,WAAI,EAAEC,YAAK;EAAE;AAAE,CAAC,CAC1C"}