@webiny/ui 5.27.0 → 5.28.0-beta.0

package/Checkbox/Checkbox.stories.js

@@ -1,28 +1,39 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README_Checkbox.md";
-import { Form } from "@webiny/form";
-import Checkbox from "./Checkbox";
-var story = storiesOf("Components/Checkbox", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _README_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 () {
-  var disabled = boolean("Disabled", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README_Checkbox.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Simple checkbox with a label and description"
-  }, /*#__PURE__*/React.createElement(Form, null, function (_ref) {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, null, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "rememberMe"
-    }, /*#__PURE__*/React.createElement(Checkbox, {
+    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
       label: "Remember me",
       disabled: disabled,
       description: "You won't be logged out after you leave the app."
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\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                    ")));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\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                    ")));
 }, {
   info: {
-    propTables: [Checkbox]
+    propTables: [_Checkbox.default]
   }
 });

package/Checkbox/Checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","Checkbox","story","module","addDecorator","add","disabled","Bind","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,OAAOC,QAAP;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,qBAAD,EAAwBY,MAAxB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEAK,KAAK,CAACG,GAAN,CACI,gBADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGR,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD,QACK;AAAA,QAAGQ,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,QAAD;AACI,MAAA,KAAK,EAAE,aADX;AAEI,MAAA,QAAQ,EAAED,QAFd;AAGI,MAAA,WAAW,EACP;AAJR,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAgBI,oBAAC,gBAAD,4iBAhBJ,CAFJ,CADJ;AAqCH,CA1CL,EA2CI;AAAEE,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACR,QAAD;AAAd;AAAR,CA3CJ","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"]}
+{"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"}

package/Checkbox/Checkbox.styles.js

@@ -1,10 +1,17 @@
-import { css } from "emotion";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webinyCheckboxTitle = void 0;
+
+var _emotion = require("emotion");
+
 /**
  * Controls the helper text below the checkbox.
  * @type {string}
  */
-
-var webinyCheckboxTitle = /*#__PURE__*/css({}, {
+var webinyCheckboxTitle = /*#__PURE__*/(0, _emotion.css)({}, {
   "&.mdc-text-field-helper-text": {
     //paddingLeft: 10,
     textTransform: "uppercase",
@@ -12,4 +19,4 @@ var webinyCheckboxTitle = /*#__PURE__*/css({}, {
     marginBottom: "5px"
   }
 }, "label:webinyCheckboxTitle;");
-export { webinyCheckboxTitle };
+exports.webinyCheckboxTitle = webinyCheckboxTitle;

package/Checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.styles.ts"],"names":["css","webinyCheckboxTitle","textTransform","fontWeight","marginBottom"],"mappings":"AAAA,SAASA,GAAT,QAAoB,SAApB;AAEA;AACA;AACA;AACA;;AACA,IAAMC,mBAAmB,gBAAGD,GAAG,CAC3B,EAD2B,EAE3B;AACI,kCAAgC;AAC5B;AACAE,IAAAA,aAAa,EAAE,WAFa;AAG5BC,IAAAA,UAAU,EAAE,MAHgB;AAI5BC,IAAAA,YAAY,EAAE;AAJc;AADpC,CAF2B,+BAA/B;AAYA,SAASH,mBAAT","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"]}
+{"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"}

package/Checkbox/CheckboxGroup.js

@@ -1,24 +1,39 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import React from "react";
-import { webinyCheckboxTitle } from "./Checkbox.styles";
-import { FormElementMessage } from "../FormElementMessage";
+"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) {
-  _inherits(CheckboxGroup, _React$Component);
+  (0, _inherits2.default)(CheckboxGroup, _React$Component);
 
-  var _super = _createSuper(CheckboxGroup);
+  var _super = (0, _createSuper2.default)(CheckboxGroup);
 
   function CheckboxGroup() {
-    _classCallCheck(this, CheckboxGroup);
-
+    (0, _classCallCheck2.default)(this, CheckboxGroup);
     return _super.apply(this, arguments);
   }
 
-  _createClass(CheckboxGroup, [{
+  (0, _createClass2.default)(CheckboxGroup, [{
     key: "render",
     value: function render() {
       var _this = this;
@@ -31,12 +46,12 @@ var CheckboxGroup = /*#__PURE__*/function (_React$Component) {
         isValid: null,
         message: null
       } : _this$props$validatio;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
-        className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent " + webinyCheckboxTitle
+      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({
         onChange: function onChange(value) {
           return function () {
-            var values = Array.isArray(_this.props.value) ? _toConsumableArray(_this.props.value) : [];
+            var values = Array.isArray(_this.props.value) ? (0, _toConsumableArray2.default)(_this.props.value) : [];
             var index = values.indexOf(value);
 
             if (index > -1) {
@@ -52,13 +67,13 @@ var CheckboxGroup = /*#__PURE__*/function (_React$Component) {
           var values = Array.isArray(_this.props.value) ? _this.props.value : [];
           return values.includes(id);
         }
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
     }
   }]);
-
   return CheckboxGroup;
-}(React.Component);
+}(_react.default.Component);
 
-export default CheckboxGroup;
+var _default = CheckboxGroup;
+exports.default = _default;

package/Checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CheckboxGroup.tsx"],"names":["React","webinyCheckboxTitle","FormElementMessage","CheckboxGroup","props","description","label","validation","isValid","message","children","onChange","value","values","Array","isArray","index","indexOf","splice","push","getValue","id","includes","Component"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,mBAAT;AACA,SAASC,kBAAT;;IAkBMC,a;;;;;;;;;;;;;WACF,kBAAyB;AAAA;;AACrB,wBAA8E,KAAKC,KAAnF;AAAA,UAAQC,WAAR,eAAQA,WAAR;AAAA,UAAqBC,KAArB,eAAqBA,KAArB;AAAA,8CAA4BC,UAA5B;AAAA,UAA4BA,UAA5B,sCAAyC;AAAEC,QAAAA,OAAO,EAAE,IAAX;AAAiBC,QAAAA,OAAO,EAAE;AAA1B,OAAzC;AAEA,0BACI,oBAAC,KAAD,CAAO,QAAP,QACKH,KAAK,iBACF;AACI,QAAA,SAAS,EACL,uEACAL;AAHR,SAMKK,KANL,CAFR,EAYK,KAAKF,KAAL,CAAWM,QAAX,CAAoB;AACjBC,QAAAA,QAAQ,EAAE,kBAAAC,KAAK,EAAI;AACf,iBAAO,YAAM;AACT,gBAAMC,MAAM,GAAGC,KAAK,CAACC,OAAN,CAAc,KAAI,CAACX,KAAL,CAAWQ,KAAzB,uBACL,KAAI,CAACR,KAAL,CAAWQ,KADN,IAET,EAFN;AAGA,gBAAMI,KAAK,GAAGH,MAAM,CAACI,OAAP,CAAeL,KAAf,CAAd;;AACA,gBAAII,KAAK,GAAG,CAAC,CAAb,EAAgB;AACZH,cAAAA,MAAM,CAACK,MAAP,CAAcF,KAAd,EAAqB,CAArB;AACH,aAFD,MAEO;AACHH,cAAAA,MAAM,CAACM,IAAP,CAAYP,KAAZ;AACH;;AAED,YAAA,KAAI,CAACR,KAAL,CAAWO,QAAX,IAAuB,KAAI,CAACP,KAAL,CAAWO,QAAX,CAAoBE,MAApB,CAAvB;AACH,WAZD;AAaH,SAfgB;AAgBjBO,QAAAA,QAAQ,EAAE,kBAAAC,EAAE,EAAI;AACZ,cAAMR,MAAM,GAAGC,KAAK,CAACC,OAAN,CAAc,KAAI,CAACX,KAAL,CAAWQ,KAAzB,IAAkC,KAAI,CAACR,KAAL,CAAWQ,KAA7C,GAAqD,EAApE;AACA,iBAAOC,MAAM,CAACS,QAAP,CAAgBD,EAAhB,CAAP;AACH;AAnBgB,OAApB,CAZL,EAkCKd,UAAU,CAACC,OAAX,KAAuB,KAAvB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BD,UAAU,CAACE,OAAtC,CAnCR,EAsCKF,UAAU,CAACC,OAAX,KAAuB,KAAvB,IAAgCH,WAAhC,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CAvCR,CADJ;AA4CH;;;;EAhDuBL,KAAK,CAACuB,S;;AAmDlC,eAAepB,aAAf","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"]}
+{"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"}

package/Checkbox/CheckboxGroup.stories.js

@@ -1,14 +1,25 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import readme from "./README_CheckboxGroup.md";
-import { Form } from "@webiny/form";
-import { Checkbox, CheckboxGroup } from ".";
-var story = storiesOf("Components/Checkbox", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _README_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 () {
-  var disabled = boolean("Disabled", false);
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
   var options = [{
     id: "apple",
     name: "Apple"
@@ -19,26 +30,26 @@ story.add("usage - group", function () {
     id: "orange",
     name: "Orange"
   }];
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README_CheckboxGroup.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Simple checkbox with label and description"
-  }, /*#__PURE__*/React.createElement(Form, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
     data: {
       fruits: ["pear"]
     }
   }, function (_ref) {
     var Bind = _ref.Bind;
-    return /*#__PURE__*/React.createElement(Bind, {
+    return /*#__PURE__*/_react.default.createElement(Bind, {
       name: "fruits"
-    }, /*#__PURE__*/React.createElement(CheckboxGroup, {
+    }, /*#__PURE__*/_react.default.createElement(_.CheckboxGroup, {
       label: "Fruits selection",
       description: "Choose only fruits you like."
     }, function (_ref2) {
       var onChange = _ref2.onChange,
           getValue = _ref2.getValue;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(function (_ref3) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options.map(function (_ref3) {
         var id = _ref3.id,
             name = _ref3.name;
-        return /*#__PURE__*/React.createElement(Checkbox, {
+        return /*#__PURE__*/_react.default.createElement(_.Checkbox, {
           disabled: disabled,
           key: id,
           label: name,
@@ -47,9 +58,9 @@ story.add("usage - group", function () {
         });
       }));
     }));
-  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\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                    ")));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\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                    ")));
 }, {
   info: {
-    propTables: [CheckboxGroup]
+    propTables: [_.CheckboxGroup]
   }
 });

package/Checkbox/CheckboxGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CheckboxGroup.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","boolean","readme","Form","Checkbox","CheckboxGroup","story","module","addDecorator","add","disabled","options","id","name","fruits","Bind","onChange","getValue","map","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,OAAOC,MAAP;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,QAAT,EAAmBC,aAAnB,QAAwC,GAAxC;AAEA,IAAMC,KAAK,GAAGZ,SAAS,CAAC,qBAAD,EAAwBa,MAAxB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBR,SAAnB;AAEAM,KAAK,CAACG,GAAN,CACI,eADJ,EAEI,YAAM;AACF,MAAMC,QAAQ,GAAGT,OAAO,CAAC,UAAD,EAAa,KAAb,CAAxB;AAEA,MAAMU,OAAO,GAAG,CACZ;AAAEC,IAAAA,EAAE,EAAE,OAAN;AAAeC,IAAAA,IAAI,EAAE;AAArB,GADY,EAEZ;AAAED,IAAAA,EAAE,EAAE,MAAN;AAAcC,IAAAA,IAAI,EAAE;AAApB,GAFY,EAGZ;AAAED,IAAAA,EAAE,EAAE,QAAN;AAAgBC,IAAAA,IAAI,EAAE;AAAtB,GAHY,CAAhB;AAMA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcX,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEY,MAAAA,MAAM,EAAE,CAAC,MAAD;AAAV;AAAZ,KACK;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,aAAD;AACI,MAAA,KAAK,EAAC,kBADV;AAEI,MAAA,WAAW,EAAE;AAFjB,OAIK;AAAA,UAAGC,QAAH,SAAGA,QAAH;AAAA,UAAaC,QAAb,SAAaA,QAAb;AAAA,0BACG,oBAAC,KAAD,CAAO,QAAP,QACKN,OAAO,CAACO,GAAR,CAAY;AAAA,YAAGN,EAAH,SAAGA,EAAH;AAAA,YAAOC,IAAP,SAAOA,IAAP;AAAA,4BACT,oBAAC,QAAD;AACI,UAAA,QAAQ,EAAEH,QADd;AAEI,UAAA,GAAG,EAAEE,EAFT;AAGI,UAAA,KAAK,EAAEC,IAHX;AAII,UAAA,KAAK,EAAEI,QAAQ,CAACL,EAAD,CAJnB;AAKI,UAAA,QAAQ,EAAEI,QAAQ,CAACJ,EAAD;AALtB,UADS;AAAA,OAAZ,CADL,CADH;AAAA,KAJL,CADJ,CADH;AAAA,GADL,CADJ,CADJ,eA2BI,oBAAC,gBAAD,01CA3BJ,CAFJ,CADJ;AA6DH,CAxEL,EAyEI;AAAEO,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACf,aAAD;AAAd;AAAR,CAzEJ","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"]}
+{"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"}

package/Checkbox/index.js

@@ -1,2 +1,23 @@
-export { default as Checkbox } from "./Checkbox";
-export { default as CheckboxGroup } from "./CheckboxGroup";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function get() {
+    return _CheckboxGroup.default;
+  }
+});
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));

package/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["default","Checkbox","CheckboxGroup"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAApB;AACA,SAASD,OAAO,IAAIE,aAApB","sourcesContent":["export { default as Checkbox } from \"./Checkbox\";\nexport { default as CheckboxGroup } from \"./CheckboxGroup\";\n"]}
+{"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,10 +1,24 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+"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"];
-import React from "react";
-import { Chip as RmwcChip } from "@rmwc/chip";
-export var Chip = function Chip(props) {
+
+var Chip = function Chip(props) {
   var children = props.children,
-      rest = _objectWithoutProperties(props, _excluded);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_chip.Chip, rest, children);
+};
 
-  return /*#__PURE__*/React.createElement(RmwcChip, rest, children);
-};
+exports.Chip = Chip;

package/Chips/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Chip.tsx"],"names":["React","Chip","RmwcChip","props","children","rest"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAI,IAAIC,QAAjB,QAA6D,YAA7D;AAIA,OAAO,IAAMD,IAAyB,GAAG,SAA5BA,IAA4B,CAAAE,KAAK,EAAI;AAC9C,MAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;AAAA,MAAqBC,IAArB,4BAA8BF,KAA9B;;AACA,sBAAO,oBAAC,QAAD,EAAcE,IAAd,EAAqBD,QAArB,CAAP;AACH,CAHM","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"]}
+{"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"}

package/Chips/ChipIcon.js

@@ -1,8 +1,22 @@
-import React from "react";
-import { ChipIcon as RmwcChipIcon } from "@rmwc/chip";
-import { chipIconWrapper } from "./styles";
-export var ChipIcon = function ChipIcon(props) {
-  return /*#__PURE__*/React.createElement(RmwcChipIcon, Object.assign({
-    className: chipIconWrapper
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _chip = require("@rmwc/chip");
+
+var _styles = require("./styles");
+
+var ChipIcon = function ChipIcon(props) {
+  return /*#__PURE__*/_react.default.createElement(_chip.ChipIcon, Object.assign({
+    className: _styles.chipIconWrapper
   }, props));
-};
+};
+
+exports.ChipIcon = ChipIcon;

package/Chips/ChipIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChipIcon.tsx"],"names":["React","ChipIcon","RmwcChipIcon","chipIconWrapper","props"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAQ,IAAIC,YAArB,QAA6E,YAA7E;AACA,SAASC,eAAT;AAIA,OAAO,IAAMF,QAAiC,GAAG,SAApCA,QAAoC,CAAAG,KAAK,EAAI;AACtD,sBAAO,oBAAC,YAAD;AAAc,IAAA,SAAS,EAAED;AAAzB,KAA8CC,KAA9C,EAAP;AACH,CAFM","sourcesContent":["import React from \"react\";\nimport { ChipIcon as RmwcChipIcon, ChipIconProps as RmwcChipIconProps } from \"@rmwc/chip\";\nimport { chipIconWrapper } from \"./styles\";\n\nexport type ChipIconProps = RmwcChipIconProps;\n\nexport const ChipIcon: React.FC<ChipIconProps> = props => {\n    return <RmwcChipIcon className={chipIconWrapper} {...props} />;\n};\n"]}
+{"version":3,"names":["ChipIcon","props","chipIconWrapper"],"sources":["ChipIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { ChipIcon as RmwcChipIcon, ChipIconProps as RmwcChipIconProps } from \"@rmwc/chip\";\nimport { chipIconWrapper } from \"./styles\";\n\nexport type ChipIconProps = RmwcChipIconProps;\n\nexport const ChipIcon: React.FC<ChipIconProps> = props => {\n    return <RmwcChipIcon className={chipIconWrapper} {...props} />;\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAIO,IAAMA,QAAiC,GAAG,SAApCA,QAAoC,CAAAC,KAAK,EAAI;EACtD,oBAAO,6BAAC,cAAD;IAAc,SAAS,EAAEC;EAAzB,GAA8CD,KAA9C,EAAP;AACH,CAFM"}

package/Chips/Chips.js

@@ -1,17 +1,34 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+"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"];
-import React from "react";
-import classNames from "classnames";
-import { ChipSet } from "@rmwc/chip";
-import { chipIconWrapper, disabledChips } from "./styles";
-export var Chips = function Chips(props) {
+
+var Chips = function Chips(props) {
   var children = props.children,
       className = props.className,
       disabled = props.disabled,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ChipSet, Object.assign({}, rest, {
-    className: classNames(className, chipIconWrapper, _defineProperty({}, disabledChips, 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,"sources":["Chips.tsx"],"names":["React","classNames","ChipSet","chipIconWrapper","disabledChips","Chips","props","children","className","disabled","rest"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,OAAT,QAAwB,YAAxB;AAEA,SAASC,eAAT,EAA0BC,aAA1B;AAwBA,OAAO,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;AAChD,MAAQC,QAAR,GAAmDD,KAAnD,CAAQC,QAAR;AAAA,MAAkBC,SAAlB,GAAmDF,KAAnD,CAAkBE,SAAlB;AAAA,MAA6BC,QAA7B,GAAmDH,KAAnD,CAA6BG,QAA7B;AAAA,MAA0CC,IAA1C,4BAAmDJ,KAAnD;;AAEA,sBACI,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,OAAD,oBACQI,IADR;AAEI,IAAA,SAAS,EAAET,UAAU,CAACO,SAAD,EAAYL,eAAZ,sBAChBC,aADgB,EACAK,QADA;AAFzB,MAMKF,QANL,CADJ,CADJ;AAYH,CAfM","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"]}
+{"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"}

package/Chips/Chips.stories.js

@@ -1,25 +1,36 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./README.md";
-import { ReactComponent as BaselineDoneIcon } from "./icons/baseline-done-24px.svg";
-import { ReactComponent as BaselineEmailIcon } from "./icons/baseline-email-24px.svg";
-import { Chip, ChipIcon, Chips } from "./index";
-var story = storiesOf("Components/Chips", module);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./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.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  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, {
     title: "Simple chips with a label and description"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Chips, null, /*#__PURE__*/React.createElement(Chip, {
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.Chips, null, /*#__PURE__*/_react.default.createElement(_index.Chip, {
     selected: true
-  }, "Cookies"), /*#__PURE__*/React.createElement(Chip, null, "Pizza"), /*#__PURE__*/React.createElement(Chip, null, "Icecream")), /*#__PURE__*/React.createElement(Chips, null, /*#__PURE__*/React.createElement(Chip, null, /*#__PURE__*/React.createElement(ChipIcon, {
+  }, "Cookies"), /*#__PURE__*/_react.default.createElement(_index.Chip, null, "Pizza"), /*#__PURE__*/_react.default.createElement(_index.Chip, null, "Icecream")), /*#__PURE__*/_react.default.createElement(_index.Chips, null, /*#__PURE__*/_react.default.createElement(_index.Chip, null, /*#__PURE__*/_react.default.createElement(_index.ChipIcon, {
     leading: true,
-    icon: /*#__PURE__*/React.createElement(BaselineEmailIcon, null)
-  }), "Cookies"), /*#__PURE__*/React.createElement(Chip, null, "Cookies", /*#__PURE__*/React.createElement(ChipIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineEmail24px.ReactComponent, null)
+  }), "Cookies"), /*#__PURE__*/_react.default.createElement(_index.Chip, null, "Cookies", /*#__PURE__*/_react.default.createElement(_index.ChipIcon, {
     trailing: true,
-    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
-  }))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\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                    ")));
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
+  }))))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\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                    ")));
 }, {
   info: {
-    propTables: [Chip, ChipIcon, Chips]
+    propTables: [_index.Chip, _index.ChipIcon, _index.Chips]
   }
 });

package/Chips/Chips.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Chips.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","ReactComponent","BaselineDoneIcon","BaselineEmailIcon","Chip","ChipIcon","Chips","story","module","add","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AAEA,SAASC,cAAc,IAAIC,gBAA3B;AACA,SAASD,cAAc,IAAIE,iBAA3B;AACA,SAASC,IAAT,EAAeC,QAAf,EAAyBC,KAAzB;AAEA,IAAMC,KAAK,GAAGb,SAAS,CAAC,kBAAD,EAAqBc,MAArB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcT,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,8CACI,oBAAC,KAAD,qBACI,oBAAC,IAAD;AAAM,IAAA,QAAQ;AAAd,eADJ,eAEI,oBAAC,IAAD,gBAFJ,eAGI,oBAAC,IAAD,mBAHJ,CADJ,eAOI,oBAAC,KAAD,qBACI,oBAAC,IAAD,qBACI,oBAAC,QAAD;AAAU,IAAA,OAAO,MAAjB;AAAkB,IAAA,IAAI,eAAE,oBAAC,iBAAD;AAAxB,IADJ,YADJ,eAKI,oBAAC,IAAD,gCAEI,oBAAC,QAAD;AAAU,IAAA,QAAQ,MAAlB;AAAmB,IAAA,IAAI,eAAE,oBAAC,gBAAD;AAAzB,IAFJ,CALJ,CAPJ,CADJ,CADJ,eAqBI,oBAAC,gBAAD,q6BArBJ,CAFJ,CADJ;AAmDH,CAtDL,EAuDI;AAAEU,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACP,IAAD,EAAOC,QAAP,EAAiBC,KAAjB;AAAd;AAAR,CAvDJ","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, ChipIcon, 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>\n                                    <ChipIcon leading icon={<BaselineEmailIcon />} />\n                                    Cookies\n                                </Chip>\n                                <Chip>\n                                    Cookies\n                                    <ChipIcon trailing icon={<BaselineDoneIcon />} />\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, ChipIcon, Chips] } }\n);\n"]}
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Chip","ChipIcon","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, ChipIcon, 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>\n                                    <ChipIcon leading icon={<BaselineEmailIcon />} />\n                                    Cookies\n                                </Chip>\n                                <Chip>\n                                    Cookies\n                                    <ChipIcon trailing icon={<BaselineDoneIcon />} />\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, ChipIcon, 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,aADJ,eAEI,6BAAC,WAAD,gBAFJ,eAGI,6BAAC,WAAD,mBAHJ,CADJ,eAOI,6BAAC,YAAD,qBACI,6BAAC,WAAD,qBACI,6BAAC,eAAD;IAAU,OAAO,MAAjB;IAAkB,IAAI,eAAE,6BAAC,iCAAD;EAAxB,EADJ,YADJ,eAKI,6BAAC,WAAD,gCAEI,6BAAC,eAAD;IAAU,QAAQ,MAAlB;IAAmB,IAAI,eAAE,6BAAC,gCAAD;EAAzB,EAFJ,CALJ,CAPJ,CADJ,CADJ,eAqBI,6BAAC,uBAAD,q6BArBJ,CAFJ,CADJ;AAmDH,CAtDL,EAuDI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,WAAD,EAAOC,eAAP,EAAiBC,YAAjB;EAAd;AAAR,CAvDJ"}