@webiny/ui 5.24.0-beta.0 → 5.25.0-beta.1

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,17 +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: Partial<Props>;
     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,11 +83,4 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
   return CodeEditor;
 }(React.Component);
 
-_defineProperty(CodeEditor, "defaultProps", {
-  validation: {
-    isValid: null,
-    message: 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,19 +1,21 @@
-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: Partial<Props>;
     handleClick: () => void;
     handleClose: () => void;
     handleChange: (color: ColorResult) => void;

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

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"]}

package/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -1,12 +1,12 @@
-import * as React from "react";
+import React from "react";
 interface ChildrenRenderProp {
     showConfirmation: (onAccept?: () => void, onCancel?: () => void) => any;
 }
 interface ConfirmationCallbacks {
-    onAccept: Function;
-    onCancel: Function;
+    onAccept?: () => void;
+    onCancel?: () => void;
 }
-declare type Props = {
+interface Props {
     title?: React.ReactNode;
     message?: React.ReactNode;
     loading?: React.ReactNode;
@@ -14,15 +14,15 @@ declare type Props = {
     children: (props: ChildrenRenderProp) => React.ReactNode;
     disableConfirm?: boolean;
     style?: React.CSSProperties;
-};
-declare type State = {
+}
+interface ConfirmationDialogState {
     show: boolean;
     loading: boolean;
-};
+}
 /**
  * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.
  */
-declare class ConfirmationDialog extends React.Component<Props, State> {
+declare class ConfirmationDialog extends React.Component<Props, ConfirmationDialogState> {
     static defaultProps: {
         title: string;
         message: string;
@@ -36,10 +36,10 @@ declare class ConfirmationDialog extends React.Component<Props, State> {
     };
     componentDidMount(): void;
     componentWillUnmount(): void;
-    showConfirmation: (onAccept?: Function, onCancel?: Function) => void;
-    hideConfirmation: () => void;
-    onAccept: () => Promise<void>;
-    onCancel: () => Promise<void>;
+    private readonly showConfirmation;
+    private readonly hideConfirmation;
+    private readonly onAccept;
+    private readonly onCancel;
     render(): JSX.Element;
 }
 export { ConfirmationDialog };

package/ConfirmationDialog/ConfirmationDialog.js

@@ -6,8 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from "react";
-import noop from "lodash/noop";
+import React from "react";
 import { Dialog, DialogButton, DialogCancel, DialogActions, DialogTitle, DialogContent } from "./../Dialog";
 import { CircularProgress } from "../Progress";
 
@@ -33,8 +32,12 @@ var ConfirmationDialog = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "__isMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "callbacks", {
-      onAccept: noop,
-      onCancel: noop
+      onAccept: function onAccept() {
+        return void 0;
+      },
+      onCancel: function onCancel() {
+        return void 0;
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "state", {

package/ConfirmationDialog/ConfirmationDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ConfirmationDialog.tsx"],"names":["React","Dialog","DialogButton","DialogCancel","DialogActions","DialogTitle","DialogContent","CircularProgress","ConfirmationDialog","onAccept","onCancel","show","loading","callbacks","setState","__isMounted","props","style","state","hideConfirmation","title","message","disableConfirm","children","showConfirmation","Component"],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport {\n    Dialog,\n    DialogButton,\n    DialogCancel,\n    DialogActions,\n    DialogTitle,\n    DialogContent\n} from \"./../Dialog\";\n\nimport { CircularProgress } from \"../Progress\";\n\ninterface ChildrenRenderProp {\n    showConfirmation: (onAccept?: () => void, onCancel?: () => void) => any;\n}\n\ninterface ConfirmationCallbacks {\n    onAccept?: () => void;\n    onCancel?: () => void;\n}\n\ninterface Props {\n    // Title of confirmation dialog\n    title?: React.ReactNode;\n\n    // Message of confirmation dialog\n    message?: React.ReactNode;\n\n    // This element will be rendered during loading\n    loading?: React.ReactNode;\n\n    // For testing purposes\n    \"data-testid\"?: string;\n\n    // An element that will trigger the confirmation dialog.\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n\n    // Is `Confirm` button disabled\n    disableConfirm?: boolean;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\ninterface ConfirmationDialogState {\n    show: boolean;\n    loading: boolean;\n}\n\n/**\n * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.\n */\nclass ConfirmationDialog extends React.Component<Props, ConfirmationDialogState> {\n    static defaultProps = {\n        title: \"Confirmation\",\n        message: \"Are you sure you want to continue?\",\n        loading: <CircularProgress />\n    };\n\n    __isMounted = false;\n\n    callbacks: ConfirmationCallbacks = {\n        onAccept: () => {\n            return void 0;\n        },\n        onCancel: () => {\n            return void 0;\n        }\n    };\n\n    public override state = {\n        show: false,\n        loading: false\n    };\n\n    public override componentDidMount() {\n        this.__isMounted = true;\n    }\n\n    public override componentWillUnmount() {\n        this.__isMounted = false;\n    }\n\n    private readonly showConfirmation = (onAccept?: () => void, onCancel?: () => void) => {\n        this.callbacks = {\n            onAccept,\n            onCancel\n        };\n        this.setState({ show: true });\n    };\n\n    private readonly hideConfirmation = () => {\n        this.setState({ show: false });\n    };\n\n    private readonly onAccept = async () => {\n        const { onAccept } = this.callbacks;\n        if (typeof onAccept === \"function\") {\n            this.setState({ loading: true });\n            await onAccept();\n            if (this.__isMounted) {\n                this.setState({ loading: false, show: false });\n            }\n        }\n    };\n\n    private readonly onCancel = async () => {\n        const { onCancel } = this.callbacks;\n        if (typeof onCancel === \"function\") {\n            await onCancel();\n        }\n    };\n\n    public override render() {\n        return (\n            <React.Fragment>\n                <Dialog\n                    style={this.props.style}\n                    open={this.state.show}\n                    onClose={this.hideConfirmation}\n                    data-testid={this.props[\"data-testid\"]}\n                >\n                    {this.state.loading ? this.props.loading : null}\n                    <DialogTitle>{this.props.title}</DialogTitle>\n                    <DialogContent>{this.props.message}</DialogContent>\n                    <DialogActions>\n                        <DialogCancel onClick={this.onCancel}>Cancel</DialogCancel>\n                        <DialogButton\n                            data-testid=\"confirmationdialog-confirm-action\"\n                            onClick={this.onAccept}\n                            disabled={this.props.disableConfirm}\n                        >\n                            Confirm\n                        </DialogButton>\n                    </DialogActions>\n                </Dialog>\n                {this.props.children({\n                    showConfirmation: this.showConfirmation\n                })}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { ConfirmationDialog };\n"]}

package/ConfirmationDialog/ConfirmationDialog.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 readme from "./../ConfirmationDialog/README.md";

package/ConfirmationDialog/ConfirmationDialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ConfirmationDialog.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","ButtonPrimary","ConfirmationDialog","story","module","add","showConfirmation","console","log","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;AACA,SAASC,aAAT;AACA,SAASC,kBAAT;AAEA,IAAMC,KAAK,GAAGT,SAAS,CAAC,+BAAD,EAAkCU,MAAlC,CAAvB;AAEAD,KAAK,CAACE,GAAN,CACI,OADJ,EAEI,YAAM;AACF,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcL,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,mBAAD,qBACI,oBAAC,kBAAD;AACI,IAAA,KAAK,EAAC,aADV;AAEI,IAAA,OAAO,EAAC;AAFZ,KAIK,gBAA0B;AAAA,QAAvBM,gBAAuB,QAAvBA,gBAAuB;AACvB,wBACI,oBAAC,aAAD;AACI,MAAA,OAAO,EAAE,mBAAM;AACXA,QAAAA,gBAAgB,CACZ;AAAA,iBAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ,CAAN;AAAA,SADY,EAEZ;AAAA,iBAAMD,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;AAAA,SAFY,CAAhB;AAIH;AANL,qBADJ;AAYH,GAjBL,CADJ,CADJ,eAsBI,oBAAC,gBAAD,o7BAtBJ,CAFJ,CADJ;AAmDH,CAtDL,EAuDI;AAAEC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE,CAACR,kBAAD;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 \"./../ConfirmationDialog/README.md\";\nimport { ButtonPrimary } from \"./../Button\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\n\nconst story = storiesOf(\"Components/ConfirmationDialog\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Icon with and without ConfirmationDialog\"}>\n                    <StorySandboxExample>\n                        <ConfirmationDialog\n                            title=\"Pay Invoice\"\n                            message=\"Are you sure you want pay this invoice?\"\n                        >\n                            {({ showConfirmation }) => {\n                                return (\n                                    <ButtonPrimary\n                                        onClick={() => {\n                                            showConfirmation(\n                                                () => console.log(\"Confirm\"),\n                                                () => console.log(\"Cancel\")\n                                            );\n                                        }}\n                                    >\n                                        Pay Invoice\n                                    </ButtonPrimary>\n                                );\n                            }}\n                        </ConfirmationDialog>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <ConfirmationDialog\n                        title=\"Pay Invoice\"\n                        message=\"Are you sure you want pay this invoice?\"\n                    >\n                        {({ showConfirmation }) => {\n                            return (\n                                <ButtonPrimary\n                                    onClick={() => {\n                                        showConfirmation(\n                                            () => console.log(\"Confirm\"),\n                                            () => console.log(\"Cancel\")\n                                        );\n                                    }}\n                                >\n                                    Pay Invoice\n                                </ButtonPrimary>\n                            );\n                        }}\n                    </ConfirmationDialog>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [ConfirmationDialog] } }\n);\n"]}

package/ConfirmationDialog/index.js.map

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

package/ConfirmationDialog/withConfirmation.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 declare type ConfirmationProps = {
     title?: React.ReactNode;
     message?: React.ReactNode;

package/ConfirmationDialog/withConfirmation.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ConfirmationDialog } from "./ConfirmationDialog";
 export var withConfirmation = function withConfirmation(dialogProps) {
   return function (Component) {

package/ConfirmationDialog/withConfirmation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["withConfirmation.tsx"],"names":["React","ConfirmationDialog","withConfirmation","dialogProps","Component","withConfirmationRender","ownProps","props","showConfirmation"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,kBAAT;AAaA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,WAAD,EAAmD;AAC/E,SAAO,UAACC,SAAD,EAAuC;AAC1C,WAAO,SAASC,sBAAT,CAAgCC,QAAhC,EAA+D;AAClE,UAAMC,KAAK,GAAG,OAAOJ,WAAP,KAAuB,UAAvB,GAAoCA,WAAW,CAACG,QAAD,CAA/C,GAA4DH,WAA1E;AACA,0BACI,oBAAC,kBAAD,EAAwBI,KAAxB,EACK;AAAA,YAAGC,gBAAH,QAAGA,gBAAH;AAAA,4BACG,oBAAC,SAAD,oBAAeF,QAAf;AAAyB,UAAA,gBAAgB,EAAEE;AAA3C,WADH;AAAA,OADL,CADJ;AAOH,KATD;AAUH,GAXD;AAYH,CAbM","sourcesContent":["import React from \"react\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\n\ntype ConfirmationProps = {\n    title?: React.ReactNode;\n    message?: React.ReactNode;\n};\n\ntype WithConfirmationParams = (props: Record<string, any>) => ConfirmationProps;\n\nexport type WithConfirmationProps = {\n    showConfirmation: (confirm: Function, cancel: Function) => void;\n};\n\nexport const withConfirmation = (dialogProps: WithConfirmationParams): Function => {\n    return (Component: typeof React.Component) => {\n        return function withConfirmationRender(ownProps: Record<string, any>) {\n            const props = typeof dialogProps === \"function\" ? dialogProps(ownProps) : dialogProps;\n            return (\n                <ConfirmationDialog {...props}>\n                    {({ showConfirmation }) => (\n                        <Component {...ownProps} showConfirmation={showConfirmation} />\n                    )}\n                </ConfirmationDialog>\n            );\n        };\n    };\n};\n"]}

package/Dialog/Dialog.d.ts

@@ -1,28 +1,28 @@
-import * as React from "react";
+import React from "react";
 import { DialogProps as RmwcDialogProps, DialogOnCloseEventT, DialogContentProps as RmwcDialogContentProps, DialogTitleProps as RmwcDialogTitleProps, DialogActionsProps as RmwcDialogActionsProps, DialogButtonProps as RmwcDialogButtonProps } from "@rmwc/dialog";
 export declare type DialogOnClose = (event: DialogOnCloseEventT) => void;
-export declare type DialogProps = RmwcDialogProps & {
+export interface DialogProps extends RmwcDialogProps {
     className?: string;
     style?: React.CSSProperties;
     open?: boolean;
     onClose?: (evt: DialogOnCloseEventT) => void;
     preventOutsideDismiss?: boolean;
-};
+}
 export declare class Dialog extends React.Component<DialogProps> {
-    container?: Element;
+    container: HTMLElement;
     constructor(props: DialogProps);
     render(): React.ReactPortal;
 }
-export declare type DialogTitleProps = RmwcDialogTitleProps & {
+export interface DialogTitleProps extends RmwcDialogTitleProps {
     /**
      * Title text.
      */
     children: React.ReactNode[] | React.ReactNode;
-};
+}
 /**
  * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
  */
-export declare const DialogTitle: (props: DialogTitleProps) => JSX.Element;
+export declare const DialogTitle: React.FC<DialogTitleProps>;
 export declare type DialogContentProps = RmwcDialogContentProps & {
     /**
      * Dialog content.
@@ -33,55 +33,47 @@ export declare type DialogContentProps = RmwcDialogContentProps & {
 /**
  * A simple component for showing dialog's body.
  */
-export declare const DialogContent: (props: DialogContentProps) => JSX.Element;
-export declare type DialogActionsProps = RmwcDialogActionsProps & {
+export declare const DialogContent: React.FC<DialogContentProps>;
+export interface DialogActionsProps extends RmwcDialogActionsProps {
     /**
      * Action buttons.
      */
     children: React.ReactNode[] | React.ReactNode;
     style?: React.CSSProperties;
-};
+}
 /**
  * Can be used to show accept and cancel buttons.
  */
-export declare const DialogActions: (props: DialogActionsProps) => JSX.Element;
-declare type DialogButtonProps = RmwcDialogButtonProps & {
+export declare const DialogActions: React.FC<DialogActionsProps>;
+interface DialogButtonProps extends RmwcDialogButtonProps {
     /**
      * Callback to execute then button is clicked.
      */
     onClick?: (e: React.MouseEvent) => void;
     className?: string;
-};
+}
 /**
  * Use this to show a simple button.
  */
-export declare const DialogButton: (props: DialogButtonProps) => JSX.Element;
-declare type DialogCancelProps = RmwcDialogButtonProps & {
-    /**
-     * Children elements.
-     */
-    children: React.ReactNode;
+export declare const DialogButton: React.FC<DialogButtonProps>;
+interface DialogCancelProps extends RmwcDialogButtonProps {
     /**
      * Callback to execute then button is clicked.
      */
     onClick?: (e: React.MouseEvent) => void;
-};
+}
 /**
  * Use this to close the dialog without taking any additional action.
  */
-export declare const DialogCancel: (props: DialogCancelProps) => JSX.Element;
-declare type DialogAcceptProps = RmwcDialogButtonProps & {
-    /**
-     * Children elements.
-     */
-    children: React.ReactNode;
+export declare const DialogCancel: React.FC<DialogCancelProps>;
+interface DialogAcceptProps extends RmwcDialogButtonProps {
     /**
      * Callback to execute then button is clicked.
      */
     onClick?: (e: React.MouseEvent) => void;
-};
+}
 /**
  * Use this to close the dialog without taking any additional action.
  */
-export declare const DialogAccept: (props: DialogAcceptProps) => JSX.Element;
+export declare const DialogAccept: React.FC<DialogAcceptProps>;
 export {};

package/Dialog/Dialog.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 = ["children"];
-import * as React from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 import { Dialog as RmwcDialog, DialogContent as RmwcDialogContent, DialogTitle as RmwcDialogTitle, DialogActions as RmwcDialogActions, DialogButton as RmwcDialogButton } from "@rmwc/dialog";
 import { getClasses } from "../Helpers";
@@ -21,6 +21,9 @@ export var Dialog = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, Dialog);
 
     _this = _super.call(this, props);
+    /**
+     * We can safely cast
+     */
 
     _defineProperty(_assertThisInitialized(_this), "container", void 0);
 

package/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Dialog.tsx"],"names":["React","ReactDOM","Dialog","RmwcDialog","DialogContent","RmwcDialogContent","DialogTitle","RmwcDialogTitle","DialogActions","RmwcDialogActions","DialogButton","RmwcDialogButton","getClasses","props","container","document","getElementById","createElement","setAttribute","body","appendChild","children","createPortal","Component","DialogCancel","DialogAccept"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;AACA,SACIC,MAAM,IAAIC,UADd,EAIIC,aAAa,IAAIC,iBAJrB,EAMIC,WAAW,IAAIC,eANnB,EAQIC,aAAa,IAAIC,iBARrB,EAUIC,YAAY,IAAIC,gBAVpB,QAYO,cAZP;AAaA,SAASC,UAAT;AAkBA,WAAaV,MAAb;AAAA;;AAAA;;AAGI,kBAAYW,KAAZ,EAAgC;AAAA;;AAAA;;AAC5B,8BAAMA,KAAN;AACA;AACR;AACA;;AAJoC;;AAK5B,UAAKC,SAAL,GAAiBC,QAAQ,CAACC,cAAT,CAAwB,kBAAxB,CAAjB;;AAEA,QAAI,CAAC,MAAKF,SAAV,EAAqB;AACjB,YAAKA,SAAL,GAAiBC,QAAQ,CAACE,aAAT,CAAuB,KAAvB,CAAjB;;AACA,YAAKH,SAAL,CAAeI,YAAf,CAA4B,IAA5B,EAAkC,kBAAlC;;AACA,UAAMJ,SAAS,GAAG,MAAKA,SAAvB;AACAC,MAAAA,QAAQ,CAACI,IAAT,IAAiBJ,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BN,SAA1B,CAAjB;AACH;;AAZ2B;AAa/B;;AAhBL;AAAA;AAAA,WAkBI,kBAAyB;AACrB,wBAA+B,KAAKD,KAApC;AAAA,UAAQQ,QAAR,eAAQA,QAAR;AAAA,UAAqBR,KAArB;;AACA,UAAMC,SAAS,GAAG,KAAKA,SAAvB,CAFqB,CAIrB;;AACA,0BAAOb,QAAQ,CAACqB,YAAT,eACH,oBAAC,UAAD,EAAgBV,UAAU,CAACC,KAAD,EAAQ,kBAAR,CAA1B,EAAwDQ,QAAxD,CADG,EAEHP,SAFG,CAAP;AAIH;AA3BL;;AAAA;AAAA,EAA4Bd,KAAK,CAACuB,SAAlC;;AAqCA;AACA;AACA;AACA,OAAO,IAAMjB,WAAuC,GAAG,SAA1CA,WAA0C,CAAAO,KAAK;AAAA,sBACxD,oBAAC,eAAD,EAAqBD,UAAU,CAACC,KAAD,EAAQ,yBAAR,CAA/B,CADwD;AAAA,CAArD;;AAaP;AACA;AACA;AACA,OAAO,IAAMT,aAA2C,GAAG,SAA9CA,aAA8C,CAAAS,KAAK;AAAA,sBAC5D,oBAAC,iBAAD,EAAuBD,UAAU,CAACC,KAAD,EAAQ,2BAAR,CAAjC,CAD4D;AAAA,CAAzD;;AAcP;AACA;AACA;AACA,OAAO,IAAML,aAA2C,GAAG,SAA9CA,aAA8C,CAAAK,KAAK;AAAA,sBAC5D,oBAAC,iBAAD,EAAuBD,UAAU,CAACC,KAAD,EAAQ,2BAAR,CAAjC,CAD4D;AAAA,CAAzD;;AAaP;AACA;AACA;AACA,OAAO,IAAMH,YAAyC,GAAG,SAA5CA,YAA4C,CAAAG,KAAK;AAAA,sBAC1D,oBAAC,gBAAD,EAAsBD,UAAU,CAACC,KAAD,EAAQ,0BAAR,CAAhC,CAD0D;AAAA,CAAvD;;AAWP;AACA;AACA;AACA,OAAO,IAAMW,YAAyC,GAAG,SAA5CA,YAA4C,CAAAX,KAAK,EAAI;AAC9D,sBACI,oBAAC,YAAD,oBACQD,UAAU,CAACC,KAAD,EAAQ,2DAAR,CADlB;AAEI,IAAA,MAAM,EAAC;AAFX,MAIKA,KAAK,CAACQ,QAJX,CADJ;AAQH,CATM;;AAkBP;AACA;AACA;AACA,OAAO,IAAMI,YAAyC,GAAG,SAA5CA,YAA4C,CAAAZ,KAAK,EAAI;AAC9D,sBACI,oBAAC,YAAD,oBACQD,UAAU,CAACC,KAAD,EAAQ,2DAAR,CADlB;AAEI,IAAA,MAAM,EAAC;AAFX,MAIKA,KAAK,CAACQ,QAJX,CADJ;AAQH,CATM","sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n    Dialog as RmwcDialog,\n    DialogProps as RmwcDialogProps,\n    DialogOnCloseEventT,\n    DialogContent as RmwcDialogContent,\n    DialogContentProps as RmwcDialogContentProps,\n    DialogTitle as RmwcDialogTitle,\n    DialogTitleProps as RmwcDialogTitleProps,\n    DialogActions as RmwcDialogActions,\n    DialogActionsProps as RmwcDialogActionsProps,\n    DialogButton as RmwcDialogButton,\n    DialogButtonProps as RmwcDialogButtonProps\n} from \"@rmwc/dialog\";\nimport { getClasses } from \"~/Helpers\";\n\nexport type DialogOnClose = (event: DialogOnCloseEventT) => void;\n\nexport interface DialogProps extends RmwcDialogProps {\n    className?: string;\n\n    // Component's custom in-line styles.\n    style?: React.CSSProperties;\n\n    // If true, dialog will be permanently fixed inside of a view (works for temporary and persistent modes).\n    open?: boolean;\n\n    onClose?: (evt: DialogOnCloseEventT) => void;\n\n    preventOutsideDismiss?: boolean;\n}\n\nexport class Dialog extends React.Component<DialogProps> {\n    container: HTMLElement;\n\n    constructor(props: DialogProps) {\n        super(props);\n        /**\n         * We can safely cast\n         */\n        this.container = document.getElementById(\"dialog-container\") as HTMLElement;\n\n        if (!this.container) {\n            this.container = document.createElement(\"div\");\n            this.container.setAttribute(\"id\", \"dialog-container\");\n            const container = this.container;\n            document.body && document.body.appendChild(container);\n        }\n    }\n\n    public override render() {\n        const { children, ...props } = this.props;\n        const container = this.container;\n\n        // Let's pass \"permanent\" / \"persistent\" / \"temporary\" flags as \"mode\" prop instead.\n        return ReactDOM.createPortal(\n            <RmwcDialog {...getClasses(props, \"webiny-ui-dialog\")}>{children}</RmwcDialog>,\n            container\n        );\n    }\n}\n\nexport interface DialogTitleProps extends RmwcDialogTitleProps {\n    /**\n     * Title text.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n}\n\n/**\n * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.\n */\nexport const DialogTitle: React.FC<DialogTitleProps> = props => (\n    <RmwcDialogTitle {...getClasses(props, \"webiny-ui-dialog__title\")} />\n);\n\nexport type DialogContentProps = RmwcDialogContentProps & {\n    /**\n     * Dialog content.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    className?: string;\n};\n\n/**\n * A simple component for showing dialog's body.\n */\nexport const DialogContent: React.FC<DialogContentProps> = props => (\n    <RmwcDialogContent {...getClasses(props, \"webiny-ui-dialog__content\")} />\n);\n\nexport interface DialogActionsProps extends RmwcDialogActionsProps {\n    /**\n     * Action buttons.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\n/**\n * Can be used to show accept and cancel buttons.\n */\nexport const DialogActions: React.FC<DialogActionsProps> = props => (\n    <RmwcDialogActions {...getClasses(props, \"webiny-ui-dialog__actions\")} />\n);\n\ninterface DialogButtonProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n\n    className?: string;\n}\n\n/**\n * Use this to show a simple button.\n */\nexport const DialogButton: React.FC<DialogButtonProps> = props => (\n    <RmwcDialogButton {...getClasses(props, \"webiny-ui-dialog__button\")} />\n);\n\ninterface DialogCancelProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogCancel: React.FC<DialogCancelProps> = props => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--cancel\")}\n            action=\"close\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n\ninterface DialogAcceptProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogAccept: React.FC<DialogAcceptProps> = props => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--accept\")}\n            action=\"accept\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n"]}

package/Dialog/Dialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Dialog.stories.tsx"],"names":["React","storiesOf","Story","StoryReadme","StorySandboxCode","StorySandbox","StorySandboxExample","readme","withKnobs","boolean","Dialog","DialogButton","DialogAccept","DialogCancel","DialogActions","DialogTitle","DialogContent","story","module","addDecorator","add","open","console","log","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;AACA,SAASC,SAAT,EAAoBC,OAApB,QAAmC,wBAAnC;AAEA,SACIC,MADJ,EAEIC,YAFJ,EAGIC,YAHJ,EAIIC,YAJJ,EAKIC,aALJ,EAMIC,WANJ,EAOIC,aAPJ,QAQO,GARP;AAUA,IAAMC,KAAK,GAAGhB,SAAS,CAAC,mBAAD,EAAsBiB,MAAtB,CAAvB;AACAD,KAAK,CAACE,YAAN,CAAmBX,SAAnB;AAEAS,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;AACF,MAAMC,IAAI,GAAGZ,OAAO,CAAC,MAAD,EAAS,KAAT,CAApB;AAEA,sBACI,oBAAC,KAAD,qBACI,oBAAC,WAAD,QAAcF,MAAd,CADJ,eAEI,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAE;AAArB,kBACI,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAE;AAA5B,6BACW,yCADX,8CAEI,+BAFJ,eAGI,+BAHJ,8CAI+B,wDAJ/B,WAIqE,GAJrE,eAKI,2CALJ,uBAK2B,2CAL3B,kCAK2E,GAL3E,eAMI,iDANJ,wBAMkC,iDANlC,4CAQI,oBAAC,MAAD;AAAQ,IAAA,IAAI,EAAEc;AAAd,kBACI,oBAAC,WAAD,8BADJ,eAEI,oBAAC,aAAD,2CAFJ,eAGI,oBAAC,aAAD,qBACI,oBAAC,YAAD;AAAc,IAAA,OAAO,EAAE;AAAA,aAAMC,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;AAAA;AAAvB,cADJ,eAII,oBAAC,YAAD;AAAc,IAAA,OAAO,EAAE;AAAA,aAAMD,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;AAAA;AAAvB,UAJJ,CAHJ,CARJ,CADJ,eAsBI,oBAAC,gBAAD,sDAEgBF,IAFhB,+iBAtBJ,CAFJ,CADJ;AA0CH,CA/CL,EAgDI;AACIG,EAAAA,IAAI,EAAE;AACFC,IAAAA,UAAU,EAAE,CACRf,MADQ,EAERC,YAFQ,EAGRC,YAHQ,EAIRC,YAJQ,EAKRC,aALQ,EAMRC,WANQ,EAORC,aAPQ;AADV;AADV,CAhDJ","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 \"./../Dialog/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\n\nimport {\n    Dialog,\n    DialogButton,\n    DialogAccept,\n    DialogCancel,\n    DialogActions,\n    DialogTitle,\n    DialogContent\n} from \".\";\n\nconst story = storiesOf(\"Components/Dialog\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const open = boolean(\"Open\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"dialog\"}>\n                    <StorySandboxExample title={\"A list with all possible options\"}>\n                        Toggle <code>open</code> prop via the bottom knobs.\n                        <br />\n                        <br />\n                        Note that instead of using <code>DialogFooter.Button</code> with{\" \"}\n                        <code>accept</code> or <code>cancel</code> prop, you can use a shorter{\" \"}\n                        <code>DialogAccept</code> and <code>DialogCancel</code> components\n                        respectively.\n                        <Dialog open={open}>\n                            <DialogTitle>Delete confirmation</DialogTitle>\n                            <DialogContent>Are you sure you want to delete?</DialogContent>\n                            <DialogActions>\n                                <DialogCancel onClick={() => console.log(\"Cancel\")}>\n                                    Cancel\n                                </DialogCancel>\n                                <DialogAccept onClick={() => console.log(\"Accept\")}>\n                                    OK\n                                </DialogAccept>\n                            </DialogActions>\n                        </Dialog>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Dialog open={${open}}>\n                        <DialogTitle>\n                            Delete confirmation\n                        </DialogTitle>\n                        <DialogBody>Are you sure you want to delete?</DialogBody>\n                        <DialogFooter>\n                            <DialogCancel onClick={() => console.log(\"Cancel\")}>Cancel</DialogCancel>\n                            <DialogAccept onClick={() => console.log(\"Accept\")}>OK</DialogAccept>\n                        </DialogFooter>\n                    </Dialog>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [\n                Dialog,\n                DialogButton,\n                DialogAccept,\n                DialogCancel,\n                DialogActions,\n                DialogTitle,\n                DialogContent\n            ]\n        }\n    }\n);\n"]}

package/Dialog/index.js.map

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

package/Drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { DrawerProps as RmwcDrawerProps, DrawerHeaderProps as RmwcDrawerHeaderProps, DrawerContentProps as RmwcDrawerContentProps } from "@rmwc/drawer";
 declare type DrawerHeaderProps = RmwcDrawerHeaderProps & {
     children: any;