@webiny/ui 5.23.1 → 5.25.0-beta.0

package/Button/IconButton/IconButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["IconButton.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","readme","ReactComponent","CloudIcon","MoreIcon","Menu","MenuItem","IconButton","story","module","add","console","log","info","propTablesExclude"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAASC,KAAT,EAAgBC,WAAhB,EAA6BC,YAA7B,QAAiD,+BAAjD;AACA,OAAOC,MAAP;AACA,SAASC,cAAc,IAAIC,SAA3B;AACA,SAASD,cAAc,IAAIE,QAA3B;AACA,SAASC,IAAT,EAAeC,QAAf;AAEA,SAASC,UAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,mBAAD,EAAsBY,MAAtB,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,aADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcT,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,UAAD;AACI,IAAA,IAAI,eAAE,oBAAC,SAAD,OADV;AAEI,IAAA,KAAK,EAAC,YAFV;AAGI,IAAA,OAAO,EAAE;AAAA,aAAMU,OAAO,CAACC,GAAR,CAAY,gBAAZ,CAAN;AAAA;AAHb,IADJ,CAFJ,eASI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,IAAD;AACI,IAAA,MAAM,eACF,oBAAC,UAAD;AACI,MAAA,IAAI,eAAE,oBAAC,QAAD,OADV;AAEI,MAAA,KAAK,EAAC,aAFV;AAGI,MAAA,OAAO,EAAE;AAAA,eAAMD,OAAO,CAACC,GAAR,CAAY,gBAAZ,CAAN;AAAA;AAHb;AAFR,kBASI,oBAAC,QAAD;AACI,IAAA,OAAO,EAAE,mBAAM;AACXD,MAAAA,OAAO,CAACC,GAAR,CAAY,iBAAZ;AACH;AAHL,aATJ,eAgBI,oBAAC,QAAD,iBAhBJ,eAiBI,oBAAC,QAAD,qBAjBJ,CADJ,CATJ,CADJ;AAiCH,CApCL,EAqCI;AACIC,EAAAA,IAAI,EAAE;AACFC,IAAAA,iBAAiB,EAAE,CAACT,IAAD,EAAOC,QAAP,EAAiBR,KAAjB,EAAwBC,WAAxB,EAAqCC,YAArC;AADjB;AADV,CArCJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\nimport { ReactComponent as CloudIcon } from \"./../assets/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as MoreIcon } from \"./../assets/round-more_vert-24px.svg\";\nimport { Menu, MenuItem } from \"./../../Menu/index\";\n\nimport { IconButton } from \"./IconButton\";\n\nconst story = storiesOf(\"Components/Button\", module);\n\nstory.add(\n    \"icon button\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Icon button\"}>\n                    <IconButton\n                        icon={<CloudIcon />}\n                        label=\"Icon label\"\n                        onClick={() => console.log(\"Button clicked\")}\n                    />\n                </StorySandbox>\n                <StorySandbox title={\"Menu example\"}>\n                    <Menu\n                        handle={\n                            <IconButton\n                                icon={<MoreIcon />}\n                                label=\"Toggle menu\"\n                                onClick={() => console.log(\"Button clicked\")}\n                            />\n                        }\n                    >\n                        <MenuItem\n                            onClick={() => {\n                                console.log(\"Apple selected!\");\n                            }}\n                        >\n                            Apple\n                        </MenuItem>\n                        <MenuItem>Banana</MenuItem>\n                        <MenuItem>Watermelon</MenuItem>\n                    </Menu>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTablesExclude: [Menu, MenuItem, Story, StoryReadme, StorySandbox]\n        }\n    }\n);\n"]}

package/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA;AACA;AACA","sourcesContent":["export * from \"./Button\";\nexport * from \"./IconButton/IconButton\";\nexport * from \"./CopyButton/CopyButton\";\n"]}

package/Carousel/Carousel.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
+import React from "react";
 import { CarouselProps, CarouselRenderControl } from "nuka-carousel";
-declare type Props = CarouselProps & {
+interface Props extends CarouselProps {
     children: React.ReactNode;
     renderNextSlide?: CarouselRenderControl | null;
     renderPreviousSlide?: CarouselRenderControl | null;
     renderBottomNav?: CarouselRenderControl | null;
-};
+}
 declare class Carousel extends React.Component<Props> {
     static defaultProps: {
         swiping: boolean;

package/Carousel/Carousel.js

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import NukaCarousel from "nuka-carousel";
 import pick from "lodash/pick";
 

package/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Carousel.tsx"],"names":["React","NukaCarousel","pick","Carousel","props","nukaProps","renderPreviousSlide","renderCenterLeftControls","renderNextSlide","renderCenterRightControls","renderBottomNav","renderBottomCenterControls","children","Component","swiping","dragging","heightMode","easing"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,YAAP,MAAmE,eAAnE;AACA,OAAOC,IAAP,MAAiB,aAAjB;;IAgBMC,Q;;;;;;;;;;;;;WAwBF,kBAAyB;AACrB,0BACI,oBAAC,YAAD,oBACQD,IAAI,CAAC,KAAKE,KAAN,EAAaD,QAAQ,CAACE,SAAtB,CADZ,EAES,KAAKD,KAAL,CAAWE,mBAAX,GACC;AAAEC,QAAAA,wBAAwB,EAAE,KAAKH,KAAL,CAAWE;AAAvC,OADD,GAEC,EAJV,EAKS,KAAKF,KAAL,CAAWI,eAAX,GACC;AAAEC,QAAAA,yBAAyB,EAAE,KAAKL,KAAL,CAAWI;AAAxC,OADD,GAEC,EAPV,EAQS,KAAKJ,KAAL,CAAWM,eAAX,GACC;AAAEC,QAAAA,0BAA0B,EAAE,KAAKP,KAAL,CAAWM;AAAzC,OADD,GAEC,EAVV,GAYK,KAAKN,KAAL,CAAWQ,QAZhB,CADJ;AAgBH;;;;EAzCkBZ,KAAK,CAACa,S;;gBAAvBV,Q,kBACoB;AAClBW,EAAAA,OAAO,EAAE,IADS;AAElBC,EAAAA,QAAQ,EAAE,KAFQ;AAGlBC,EAAAA,UAAU,EAAE,OAHM;AAIlBC,EAAAA,MAAM,EAAE;AAJU,C;;gBADpBd,Q,eAQiB,CACf,UADe,EAEf,YAFe,EAGf,UAHe,EAIf,kBAJe,EAKf,aALe,EAMf,UANe,EAOf,QAPe,EAQf,YARe,EASf,cATe,EAUf,YAVe,EAWf,OAXe,EAYf,SAZe,EAaf,gBAbe,C;;AAoCvB,eAAeA,QAAf","sourcesContent":["import React from \"react\";\nimport NukaCarousel, { CarouselProps, CarouselRenderControl } from \"nuka-carousel\";\nimport pick from \"lodash/pick\";\n\ninterface Props extends CarouselProps {\n    // slides as set of HTMLElements\n    children: React.ReactNode;\n\n    // render method for the next slide button\n    renderNextSlide?: CarouselRenderControl | null;\n\n    // render method for the previous slide button\n    renderPreviousSlide?: CarouselRenderControl | null;\n\n    // render method for the central navigation\n    renderBottomNav?: CarouselRenderControl | null;\n}\n\nclass Carousel extends React.Component<Props> {\n    static defaultProps = {\n        swiping: true,\n        dragging: false,\n        heightMode: \"first\",\n        easing: \"easeExpInOut\"\n    };\n\n    static nukaProps = [\n        \"children\",\n        \"afterSlide\",\n        \"autoplay\",\n        \"autoplayInterval\",\n        \"beforeSlide\",\n        \"dragging\",\n        \"easing\",\n        \"heightMode\",\n        \"pauseOnHover\",\n        \"slideIndex\",\n        \"speed\",\n        \"swiping\",\n        \"transitionMode\"\n    ];\n\n    public override render() {\n        return (\n            <NukaCarousel\n                {...pick(this.props, Carousel.nukaProps)}\n                {...(this.props.renderPreviousSlide\n                    ? { renderCenterLeftControls: this.props.renderPreviousSlide }\n                    : {})}\n                {...(this.props.renderNextSlide\n                    ? { renderCenterRightControls: this.props.renderNextSlide }\n                    : {})}\n                {...(this.props.renderBottomNav\n                    ? { renderBottomCenterControls: this.props.renderBottomNav }\n                    : {})}\n            >\n                {this.props.children}\n            </NukaCarousel>\n        );\n    }\n}\n\nexport default Carousel;\n"]}

package/Carousel/Carouser.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Carouser.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","readme","Carousel","story","module","addDecorator","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,SAASC,SAAT,QAA0B,wBAA1B;AACA,OAAOC,MAAP;AACA,OAAOC,QAAP;AAEA,IAAMC,KAAK,GAAGT,SAAS,CAAC,qBAAD,EAAwBU,MAAxB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBL,SAAnB;AAEAG,KAAK,CAACG,GAAN,CACI,gBADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcL,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,kBACI,oBAAC,QAAD,qBACI;AAAK,IAAA,GAAG,EAAC;AAAT,IADJ,eAEI;AAAK,IAAA,GAAG,EAAC;AAAT,IAFJ,eAGI;AAAK,IAAA,GAAG,EAAC;AAAT,IAHJ,eAII;AAAK,IAAA,GAAG,EAAC;AAAT,IAJJ,eAKI;AAAK,IAAA,GAAG,EAAC;AAAT,IALJ,eAMI;AAAK,IAAA,GAAG,EAAC;AAAT,IANJ,CADJ,CADJ,eAWI,oBAAC,gBAAD,wqBAXJ,CAFJ,CADJ;AA6BH,CAhCL,EAiCI;AAAEM,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACN,QAAD;AAAd;AAAR,CAjCJ","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"]}

package/Carousel/index.js.map

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

package/Checkbox/Checkbox.d.ts

@@ -1,12 +1,12 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+interface Props extends FormComponentProps {
     label?: React.ReactNode;
     disabled?: boolean;
-    onClick?: Function;
+    onClick?: (value: boolean) => void;
     indeterminate?: boolean;
     description?: string;
-};
+}
 /**
  * Single Checkbox component can be used to store simple boolean values.
  *
@@ -14,11 +14,6 @@ declare type Props = FormComponentProps & {
  * In that case, each Checkbox component must receive value and onChange callback via props.
  */
 declare class Checkbox extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
     render(): JSX.Element;
 }

package/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import { Checkbox as RmwcCheckbox } from "@rmwc/checkbox";
 import { FormElementMessage } from "../FormElementMessage";
 
@@ -48,6 +48,11 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
           description = _this$props.description,
           validation = _this$props.validation,
           _onClick = _this$props.onClick;
+
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcCheckbox, {
         indeterminate: indeterminate,
         disabled: disabled,
@@ -58,19 +63,13 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         } // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.
         ,
         label: label
-      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
     }
   }]);
 
   return Checkbox;
 }(React.Component);
 
-_defineProperty(Checkbox, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
-
 export default Checkbox;

package/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Checkbox.tsx"],"names":["React","Checkbox","RmwcCheckbox","FormElementMessage","e","props","onChange","target","checked","value","label","disabled","indeterminate","description","validation","onClick","validationIsValid","isValid","validationMessage","message","Boolean","Component"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAQ,IAAIC,YAArB,QAAyC,gBAAzC;AACA,SAASC,kBAAT;;AAoBA;AACA;AACA;AACA;AACA;AACA;IACMF,Q;;;;;;;;;;;;;;;;+DACS,UAACG,CAAD,EAA+C;AACtD,YAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAqBF,CAAC,CAACG,MAAH,CAAkBC,OAAtC,CAAvB;AACH,K;;;;;;;WAED,kBAAyB;AACrB,wBACI,KAAKH,KADT;AAAA,UAAQI,KAAR,eAAQA,KAAR;AAAA,UAAeC,KAAf,eAAeA,KAAf;AAAA,UAAsBC,QAAtB,eAAsBA,QAAtB;AAAA,UAAgCC,aAAhC,eAAgCA,aAAhC;AAAA,UAA+CC,WAA/C,eAA+CA,WAA/C;AAAA,UAA4DC,UAA5D,eAA4DA,UAA5D;AAAA,UAAwEC,QAAxE,eAAwEA,OAAxE;;AAGA,iBAAmED,UAAU,IAAI,EAAjF;AAAA,UAAiBE,iBAAjB,QAAQC,OAAR;AAAA,UAA6CC,iBAA7C,QAAoCC,OAApC;;AAEA,0BACI,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,YAAD;AACI,QAAA,aAAa,EAAEP,aADnB;AAEI,QAAA,QAAQ,EAAED,QAFd;AAGI,QAAA,OAAO,EAAES,OAAO,CAACX,KAAD,CAHpB;AAII,QAAA,QAAQ,EAAE,KAAKH,QAJnB;AAKI,QAAA,OAAO,EAAE;AAAA,iBAAM,OAAOS,QAAP,KAAmB,UAAnB,IAAiCA,QAAO,CAACK,OAAO,CAACX,KAAD,CAAR,CAA9C;AAAA,SALb,CAMI;AANJ;AAOI,QAAA,KAAK,EAAEC;AAPX,QADJ,EAUKM,iBAAiB,KAAK,KAAtB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BE,iBAA3B,CAXR,EAcKF,iBAAiB,KAAK,KAAtB,IAA+BH,WAA/B,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CAfR,CADJ;AAoBH;;;;EA/BkBb,KAAK,CAACqB,S;;AAkC7B,eAAepB,QAAf","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"]}

package/Checkbox/Checkbox.stories.js.map

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

package/Checkbox/Checkbox.styles.js.map

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

package/Checkbox/CheckboxGroup.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 interface ChildrenRenderProp {
     onChange: (id: string | number) => () => void;

package/Checkbox/CheckboxGroup.js

@@ -2,7 +2,7 @@ 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 * as React from "react";
+import React from "react";
 import { webinyCheckboxTitle } from "./Checkbox.styles";
 import { FormElementMessage } from "../FormElementMessage";
 

package/Checkbox/CheckboxGroup.js.map

@@ -0,0 +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,IAAkC,KAAI,CAACR,KAAL,CAAWQ,KAA7C,GAAqD,EAApE;AACA,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,WAVD;AAWH,SAbgB;AAcjBO,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;AAjBgB,OAApB,CAZL,EAgCKd,UAAU,CAACC,OAAX,KAAuB,KAAvB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BD,UAAU,CAACE,OAAtC,CAjCR,EAoCKF,UAAU,CAACC,OAAX,KAAuB,KAAvB,IAAgCH,WAAhC,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CArCR,CADJ;AA0CH;;;;EA9CuBL,KAAK,CAACuB,S;;AAiDlC,eAAepB,aAAf","sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"./../types\";\nimport { webinyCheckboxTitle } from \"./Checkbox.styles\";\nimport { FormElementMessage } from \"../FormElementMessage\";\n\ninterface 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) ? this.props.value : [];\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"]}

package/Checkbox/CheckboxGroup.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+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";

package/Checkbox/CheckboxGroup.stories.js.map

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

package/Checkbox/index.js.map

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

package/Chips/Chip.d.ts

@@ -1,9 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ChipProps as RmwcChipProps } from "@rmwc/chip";
-export declare type ChipProps = RmwcChipProps & {
-    /**
-     * Chip content
-     */
-    children?: React.ReactNode;
-};
-export declare const Chip: (props: ChipProps) => JSX.Element;
+export declare type ChipProps = RmwcChipProps;
+export declare const Chip: React.FC<ChipProps>;

package/Chips/Chip.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
-import * as React from "react";
+import React from "react";
 import { Chip as RmwcChip } from "@rmwc/chip";
 export var Chip = function Chip(props) {
   var children = props.children,

package/Chips/Chip.js.map

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

package/Chips/ChipIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { ChipIconProps as RmwcChipIconProps } from "@rmwc/chip";
 export declare type ChipIconProps = RmwcChipIconProps;
-export declare const ChipIcon: (props: ChipIconProps) => JSX.Element;
+export declare const ChipIcon: React.FC<ChipIconProps>;

package/Chips/ChipIcon.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ChipIcon as RmwcChipIcon } from "@rmwc/chip";
 import { chipIconWrapper } from "./styles";
 export var ChipIcon = function ChipIcon(props) {

package/Chips/ChipIcon.js.map

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

package/Chips/Chips.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+import React from "react";
 import { Chip } from "./Chip";
-export declare type ChipsProps = {
+export interface ChipsProps {
     /**
      * Chips to show
      */
@@ -17,5 +17,5 @@ export declare type ChipsProps = {
      * Style object.
      */
     style?: React.CSSProperties;
-};
-export declare const Chips: (props: ChipsProps) => JSX.Element;
+}
+export declare const Chips: React.FC<ChipsProps>;

package/Chips/Chips.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "disabled"];
-import * as React from "react";
+import React from "react";
 import classNames from "classnames";
 import { ChipSet } from "@rmwc/chip";
 import { chipIconWrapper, disabledChips } from "./styles";

package/Chips/Chips.js.map

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

package/Chips/Chips.stories.js.map

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

package/Chips/index.js.map

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

package/Chips/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["styles.ts"],"names":["css","chipIconWrapper","svg","width","height","boxSizing","display","disabledChips","opacity","pointerEvents"],"mappings":"AAAA,SAASA,GAAT,QAAoB,SAApB;AAEA,OAAO,IAAMC,eAAe,gBAAGD,GAAG,CAAC;AAC/B,qBAAmB;AACfE,IAAAA,GAAG,EAAE;AACDC,MAAAA,KAAK,EAAE,EADN;AAEDC,MAAAA,MAAM,EAAE,EAFP;AAGD,oCAA8B;AAC1BC,QAAAA,SAAS,EAAE,YADe;AAE1BC,QAAAA,OAAO,EAAE;AAFiB;AAH7B;AADU;AADY,CAAD,2BAA3B;AAaP,OAAO,IAAMC,aAAa,gBAAGP,GAAG,CAAC;AAC7BQ,EAAAA,OAAO,EAAE,IADoB;AAE7BC,EAAAA,aAAa,EAAE;AAFc,CAAD,yBAAzB","sourcesContent":["import { css } from \"emotion\";\n\nexport const chipIconWrapper = css({\n    \".mdc-chip__icon\": {\n        svg: {\n            width: 18,\n            height: 18,\n            \"&.mdc-chip__icon--trailing\": {\n                boxSizing: \"border-box\",\n                display: \"flex\"\n            }\n        }\n    }\n});\n\nexport const disabledChips = css({\n    opacity: 0.75,\n    pointerEvents: \"none\"\n});\n"]}

package/CodeEditor/CodeEditor.d.ts

@@ -1,21 +1,16 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
 import "brace/theme/github";
 import "brace/theme/twilight";
-declare type Props = FormComponentProps & {
+interface Props extends FormComponentProps {
     mode: string;
     theme: string;
     description?: React.ReactNode;
-};
+}
 /**
  * CodeEditor component can be used to store simple boolean values.
  */
 declare class CodeEditor extends React.Component<Props> {
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     onChange: (value: string) => void;
     render(): JSX.Element;
 }

package/CodeEditor/CodeEditor.js

@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["value", "description", "validation", "theme"];
-import * as React from "react";
+import React from "react";
 import { css } from "emotion";
 import AceEditor from "react-ace";
 import "brace/theme/github";
@@ -60,6 +60,10 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
           theme = _this$props$theme === void 0 ? "github" : _this$props$theme,
           rest = _objectWithoutProperties(_this$props, _excluded);
 
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AceEditor, Object.assign({
         value: value ? String(value) : "",
         theme: theme,
@@ -67,10 +71,10 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
       }, rest, {
         width: "100%",
         className: "mdc-text-field"
-      })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      })), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true,
         className: webinyCheckboxHelperText
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, {
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, {
         className: webinyCheckboxHelperText
       }, description));
     }
@@ -79,10 +83,4 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
   return CodeEditor;
 }(React.Component);
 
-_defineProperty(CodeEditor, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
-
 export { CodeEditor };

package/CodeEditor/CodeEditor.js.map

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

package/CodeEditor/CodeEditor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CodeEditor.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","withKnobs","text","readme","Form","CodeEditor","story","module","addDecorator","add","description","data","Bind","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,gBAHJ,EAIIC,YAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,SAASC,SAAT,EAAoBC,IAApB,QAAgC,wBAAhC;AACA,OAAOC,MAAP;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,UAAT;AACA,OAAO,iBAAP;AACA,OAAO,oBAAP;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,uBAAD,EAA0BY,MAA1B,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBP,SAAnB;AAEAK,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,WAAW,GAAGR,IAAI,CAAC,aAAD,EAAgB,2CAAhB,CAAxB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcC,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEQ,MAAAA,IAAI;AAAN;AAAZ,KACK;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,UAAD;AACI,MAAA,IAAI,EAAC,MADT;AAEI,MAAA,KAAK,EAAC,QAFV;AAGI,MAAA,WAAW,EAAEF;AAHjB,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAcI,oBAAC,gBAAD,gYAQgCA,WARhC,iKAdJ,CAFJ,CADJ;AAmCH,CAxCL,EAyCI;AAAEG,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACT,UAAD;AAAd;AAAR,CAzCJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, text } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\nimport { Form } from \"@webiny/form\";\nimport { CodeEditor } from \"./CodeEditor\";\nimport \"brace/mode/json\";\nimport \"brace/theme/github\";\n\nconst story = storiesOf(\"Components/CodeEditor\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const description = text(\"description\", \"Type your code here and see it in action.\");\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ data: `{\"foo\": \"bar\"}` }}>\n                            {({ Bind }) => (\n                                <Bind name=\"data\">\n                                    <CodeEditor\n                                        mode=\"json\"\n                                        theme=\"github\"\n                                        description={description}\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        <Form data={{ data: \\`{\"foo\": \"bar\"}\\` }}>\n                        {({ Bind }) => (\n                            <Bind name=\"data\">\n                                 <CodeEditor\n                                    mode=\"json\"\n                                    theme=\"github\"\n                                    description={\"${description}\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [CodeEditor] } }\n);\n"]}

package/CodeEditor/index.js.map

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

package/ColorPicker/ColorPicker.d.ts

@@ -1,25 +1,24 @@
-import * as React from "react";
+import React from "react";
+import { ColorResult } from "react-color";
 import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+interface ColorPickerState {
+    showColorPicker: boolean;
+}
+interface ColorPickerProps extends FormComponentProps {
     label?: string;
     disable?: boolean;
     description?: string;
-};
+}
 /**
  * Use ColorPicker component to display a list of choices, once the handler is triggered.
  */
-declare class ColorPicker extends React.Component<Props> {
+declare class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {
     state: {
         showColorPicker: boolean;
     };
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     handleClick: () => void;
     handleClose: () => void;
-    handleChange: (color: any) => void;
+    handleChange: (color: ColorResult) => void;
     render(): JSX.Element;
 }
 export { ColorPicker };

package/ColorPicker/ColorPicker.js

@@ -4,7 +4,7 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import * as React from "react";
+import React from "react";
 import { SketchPicker } from "react-color";
 import { css } from "emotion";
 import { FormElementMessage } from "../FormElementMessage";
@@ -96,7 +96,7 @@ var ColorPicker = /*#__PURE__*/function (_React$Component) {
           disable = _this$props.disable,
           description = _this$props.description,
           validation = _this$props.validation;
-      var backgroundColorStyle = null;
+      var backgroundColorStyle = {};
 
       if (value) {
         backgroundColorStyle = {
@@ -104,6 +104,10 @@ var ColorPicker = /*#__PURE__*/function (_React$Component) {
         };
       }
 
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
       return /*#__PURE__*/React.createElement("div", {
         className: classNames(_defineProperty({}, classes.disable, disable))
       }, label && /*#__PURE__*/React.createElement("div", {
@@ -122,19 +126,13 @@ var ColorPicker = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement(SketchPicker, {
         color: value || "",
         onChange: this.handleChange
-      })) : null), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+      })) : null), validationIsValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
         error: true
-      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
     }
   }]);
 
   return ColorPicker;
 }(React.Component);
 
-_defineProperty(ColorPicker, "defaultProps", {
-  validation: {
-    isValid: null
-  }
-});
-
 export { ColorPicker };

package/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ColorPicker.tsx"],"names":["React","SketchPicker","css","FormElementMessage","classNames","classes","label","marginBottom","color","width","height","borderRadius","swatch","padding","background","boxShadow","display","cursor","popover","position","zIndex","top","right","bottom","left","disable","opacity","pointerEvents","ColorPicker","showColorPicker","setState","state","onChange","props","hex","value","description","validation","backgroundColorStyle","validationIsValid","isValid","validationMessage","message","handleClick","handleClose","handleChange","Component"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,YAAT,QAA0C,aAA1C;AACA,SAASC,GAAT,QAAoB,SAApB;AAEA,SAASC,kBAAT;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,IAAMC,OAAO,GAAG;AACZC,EAAAA,KAAK,eAAEJ,GAAG,CAAC;AACPK,IAAAA,YAAY,EAAE;AADP,GAAD,iBADE;AAIZC,EAAAA,KAAK,eAAEN,GAAG,CAAC;AACPO,IAAAA,KAAK,EAAE,MADA;AAEPC,IAAAA,MAAM,EAAE,MAFD;AAGPC,IAAAA,YAAY,EAAE;AAHP,GAAD,iBAJE;AASZC,EAAAA,MAAM,eAAEV,GAAG,CAAC;AACRW,IAAAA,OAAO,EAAE,KADD;AAERC,IAAAA,UAAU,EAAE,MAFJ;AAGRH,IAAAA,YAAY,EAAE,KAHN;AAIRI,IAAAA,SAAS,EAAE,0BAJH;AAKRC,IAAAA,OAAO,EAAE,cALD;AAMRC,IAAAA,MAAM,EAAE;AANA,GAAD,kBATC;AAiBZ;AACAC,EAAAA,OAAO,eAAEhB,GAAG,CAAC;AACTiB,IAAAA,QAAQ,EAAE,UADD;AAETC,IAAAA,MAAM,EAAE;AAFC,GAAD,mBAlBA;AAsBZhB,EAAAA,UAAU,eAAEF,GAAG,CAAC;AACZiB,IAAAA,QAAQ,EAAE,OADE;AAEZE,IAAAA,GAAG,EAAE,KAFO;AAGZC,IAAAA,KAAK,EAAE,KAHK;AAIZC,IAAAA,MAAM,EAAE,KAJI;AAKZC,IAAAA,IAAI,EAAE;AALM,GAAD,sBAtBH;AA6BZC,EAAAA,OAAO,eAAEvB,GAAG,CAAC;AACTwB,IAAAA,OAAO,EAAE,GADA;AAETC,IAAAA,aAAa,EAAE;AAFN,GAAD;AA7BA,CAAhB;;AAkDA;AACA;AACA;IACMC,W;;;;;;;;;;;;;;;;4DACsB;AACpBC,MAAAA,eAAe,EAAE;AADG,K;;kEAIV,YAAM;AAChB,YAAKC,QAAL,CAAc;AAAED,QAAAA,eAAe,EAAE,CAAC,MAAKE,KAAL,CAAWF;AAA/B,OAAd;AACH,K;;kEAEa,YAAM;AAChB,YAAKC,QAAL,CAAc;AAAED,QAAAA,eAAe,EAAE;AAAnB,OAAd;AACH,K;;mEAEc,UAACrB,KAAD,EAAwB;AACnC,UAAQwB,QAAR,GAAqB,MAAKC,KAA1B,CAAQD,QAAR;AACAA,MAAAA,QAAQ,IAAIA,QAAQ,CAACxB,KAAK,CAAC0B,GAAP,CAApB;AACH,K;;;;;;;WAED,kBAAyB;AACrB,wBAA2D,KAAKD,KAAhE;AAAA,UAAQE,KAAR,eAAQA,KAAR;AAAA,UAAe7B,KAAf,eAAeA,KAAf;AAAA,UAAsBmB,OAAtB,eAAsBA,OAAtB;AAAA,UAA+BW,WAA/B,eAA+BA,WAA/B;AAAA,UAA4CC,UAA5C,eAA4CA,UAA5C;AAEA,UAAIC,oBAAoB,GAAG,EAA3B;;AACA,UAAIH,KAAJ,EAAW;AACPG,QAAAA,oBAAoB,GAAG;AACnBxB,UAAAA,UAAU,YAAKqB,KAAL;AADS,SAAvB;AAGH;;AAED,iBAAmEE,UAAU,IAAI,EAAjF;AAAA,UAAiBE,iBAAjB,QAAQC,OAAR;AAAA,UAA6CC,iBAA7C,QAAoCC,OAApC;;AAEA,0BACI;AAAK,QAAA,SAAS,EAAEtC,UAAU,qBAAIC,OAAO,CAACoB,OAAZ,EAAsBA,OAAtB;AAA1B,SACKnB,KAAK,iBACF;AACI,QAAA,SAAS,EAAEF,UAAU,CACjB,mEADiB,EAEjBC,OAAO,CAACC,KAFS;AADzB,SAMKA,KANL,CAFR,eAYI,8CACI;AAAK,QAAA,SAAS,EAAED,OAAO,CAACO,MAAxB;AAAgC,QAAA,OAAO,EAAE,KAAK+B;AAA9C,sBACI;AAAK,QAAA,SAAS,EAAEtC,OAAO,CAACG,KAAxB;AAA+B,QAAA,KAAK,EAAE8B;AAAtC,QADJ,CADJ,EAIK,KAAKP,KAAL,CAAWF,eAAX,gBACG;AAAK,QAAA,SAAS,EAAExB,OAAO,CAACa;AAAxB,sBACI;AAAK,QAAA,SAAS,EAAEb,OAAO,CAACD,UAAxB;AAAoC,QAAA,OAAO,EAAE,KAAKwC;AAAlD,QADJ,eAEI,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAET,KAAK,IAAI,EAA9B;AAAkC,QAAA,QAAQ,EAAE,KAAKU;AAAjD,QAFJ,CADH,GAKG,IATR,CAZJ,EAwBKN,iBAAiB,KAAK,KAAtB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BE,iBAA3B,CAzBR,EA4BKF,iBAAiB,KAAK,KAAtB,IAA+BH,WAA/B,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CA7BR,CADJ;AAkCH;;;;EAhEqBpC,KAAK,CAAC8C,S;;AAmEhC,SAASlB,WAAT","sourcesContent":["import React from \"react\";\nimport { SketchPicker, ColorResult } from \"react-color\";\nimport { css } from \"emotion\";\nimport { FormComponentProps } from \"~/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport classNames from \"classnames\";\n\nconst classes = {\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    color: css({\n        width: \"36px\",\n        height: \"14px\",\n        borderRadius: \"2px\"\n    }),\n    swatch: css({\n        padding: \"5px\",\n        background: \"#fff\",\n        borderRadius: \"1px\",\n        boxShadow: \"0 0 0 1px rgba(0,0,0,.1)\",\n        display: \"inline-block\",\n        cursor: \"pointer\"\n    }),\n    // @ts-ignore\n    popover: css({\n        position: \"absolute\",\n        zIndex: \"2\"\n    }),\n    classNames: css({\n        position: \"fixed\",\n        top: \"0px\",\n        right: \"0px\",\n        bottom: \"0px\",\n        left: \"0px\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface ColorPickerState {\n    showColorPicker: boolean;\n}\n\ninterface ColorPickerProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is color picker disabled?\n    disable?: boolean;\n\n    // Description beneath the color picker.\n    description?: string;\n}\n\n/**\n * Use ColorPicker component to display a list of choices, once the handler is triggered.\n */\nclass ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {\n    public override state = {\n        showColorPicker: false\n    };\n\n    handleClick = () => {\n        this.setState({ showColorPicker: !this.state.showColorPicker });\n    };\n\n    handleClose = () => {\n        this.setState({ showColorPicker: false });\n    };\n\n    handleChange = (color: ColorResult) => {\n        const { onChange } = this.props;\n        onChange && onChange(color.hex);\n    };\n\n    public override render() {\n        const { value, label, disable, description, validation } = this.props;\n\n        let backgroundColorStyle = {};\n        if (value) {\n            backgroundColorStyle = {\n                background: `${value}`\n            };\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <div className={classNames({ [classes.disable]: disable })}>\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n\n                <div>\n                    <div className={classes.swatch} onClick={this.handleClick}>\n                        <div className={classes.color} style={backgroundColorStyle} />\n                    </div>\n                    {this.state.showColorPicker ? (\n                        <div className={classes.popover}>\n                            <div className={classes.classNames} onClick={this.handleClose} />\n                            <SketchPicker color={value || \"\"} onChange={this.handleChange} />\n                        </div>\n                    ) : null}\n                </div>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { ColorPicker };\n"]}

package/ColorPicker/ColorPicker.stories.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Story, StoryReadme, StorySandbox, StorySandboxCode, StorySandboxExample } from "@webiny/storybook-utils/Story";
 import readme from "./../ColorPicker/README.md";

package/ColorPicker/ColorPicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ColorPicker.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandbox","StorySandboxCode","StorySandboxExample","readme","Form","withKnobs","boolean","ColorPicker","story","module","addDecorator","add","disable","color","Bind","info","propTables"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SACIC,KADJ,EAEIC,WAFJ,EAGIC,YAHJ,EAIIC,gBAJJ,EAKIC,mBALJ,QAMO,+BANP;AAOA,OAAOC,MAAP;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AACA,SAASC,WAAT;AAEA,IAAMC,KAAK,GAAGX,SAAS,CAAC,wBAAD,EAA2BY,MAA3B,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBL,SAAnB;AAEAG,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,OAAO,GAAGN,OAAO,CAAC,SAAD,EAAY,KAAZ,CAAvB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcH,MAAd,CADJ,eAEI,oBAAC,YAAD,qBACI,oBAAC,mBAAD,qBACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAE;AAAEU,MAAAA,KAAK,EAAE;AAAT;AAAZ,KACK;AAAA,QAAGC,IAAH,QAAGA,IAAH;AAAA,wBACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAC;AAAX,oBACI,oBAAC,WAAD;AACI,MAAA,KAAK,EAAE,yBADX;AAEI,MAAA,OAAO,EAAEF,OAFb;AAGI,MAAA,WAAW,EACP;AAJR,MADJ,CADH;AAAA,GADL,CADJ,CADJ,eAgBI,oBAAC,gBAAD,sMAKoCA,OALpC,8HAhBJ,CAFJ,CADJ;AAiCH,CAtCL,EAuCI;AAAEG,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACT,WAAD;AAAd;AAAR,CAvCJ","sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandbox,\n    StorySandboxCode,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../ColorPicker/README.md\";\nimport { Form } from \"@webiny/form\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { ColorPicker } from \"./ColorPicker\";\n\nconst story = storiesOf(\"Components/ColorPicker\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disable = boolean(\"disable\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <Form data={{ color: \"#80ff00\" }}>\n                            {({ Bind }) => (\n                                <Bind name=\"color\">\n                                    <ColorPicker\n                                        label={\"Header background color\"}\n                                        disable={disable}\n                                        description={\n                                            \"A simple background color in the header section.\"\n                                        }\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                       <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"color\">\n                                <ColorPicker disable={${disable}} />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [ColorPicker] } }\n);\n"]}

package/ColorPicker/index.js.map

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