@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.085ff6572f

package/DelayedOnChange/DelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["emptyFunction","undefined","DelayedOnChange","children","other","onChange","delay","initialValue","value","useState","setValue","useEffect","localTimeout","React","useRef","applyValue","callback","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nconst emptyFunction = (): undefined => {\n    return undefined;\n};\n\ninterface ApplyValueCb {\n    (value: string, cb: (value: string) => void): void;\n}\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\ninterface OnChangeCallable {\n    (value: string, cb?: ApplyValueCb): void;\n}\ninterface OnBlurCallable {\n    (ev: React.SyntheticEvent): void;\n}\ninterface OnKeyDownCallable {\n    (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\ninterface ChildrenCallableParams {\n    value: string;\n    onChange: OnChangeCallable;\n}\ninterface ChildrenCallable {\n    (params: ChildrenCallableParams): React.ReactElement;\n}\nexport interface DelayedOnChangeProps {\n    value?: string;\n    delay?: number;\n    onChange?: OnChangeCallable;\n    onBlur?: OnBlurCallable;\n    onKeyDown?: OnKeyDownCallable;\n    children: React.ReactNode | ChildrenCallable;\n}\nexport const DelayedOnChange: React.FC<DelayedOnChangeProps> = ({ children, ...other }) => {\n    const { onChange, delay = 400, value: initialValue } = other;\n    const [value, setValue] = useState<string | undefined>(initialValue);\n    // Sync state and props\n    useEffect(() => {\n        if (initialValue !== value) {\n            setValue(initialValue);\n        }\n    }, [initialValue]);\n\n    const localTimeout = React.useRef<number | null>(null);\n\n    const applyValue = (value: string, callback: ApplyValueCb = emptyFunction) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        if (!onChange) {\n            return;\n        }\n        onChange(value, callback);\n    };\n\n    const onChangeLocal = React.useCallback((value: string) => {\n        setValue(value);\n    }, []);\n\n    // this is fired upon change value state\n    const onValueStateChanged = (nextValue: string) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        localTimeout.current = setTimeout(() => applyValue(nextValue), delay) as unknown as number;\n    };\n\n    // need to clear the timeout when unmounting the component\n    useEffect(() => {\n        return () => {\n            if (!localTimeout.current) {\n                return;\n            }\n            clearTimeout(localTimeout.current);\n            localTimeout.current = null;\n        };\n    }, []);\n\n    useEffect(() => {\n        onValueStateChanged(value || \"\");\n    }, [value]);\n\n    const newProps = {\n        ...other,\n        value: value || \"\",\n        onChange: onChangeLocal\n    };\n\n    const renderProp = typeof children === \"function\" ? (children as ChildrenCallable) : null;\n    const child = renderProp\n        ? renderProp(newProps)\n        : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n    const props = { ...child.props };\n    const realOnKeyDown = props.onKeyDown || emptyFunction;\n    const realOnBlur = props.onBlur || emptyFunction;\n\n    // Need to apply value if input lost focus\n    const onBlur: OnBlurCallable = ev => {\n        if (!ev[\"persist\"]) {\n            return;\n        }\n        ev.persist();\n        applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n    };\n\n    // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n    const onKeyDown: OnKeyDownCallable = ev => {\n        ev.persist();\n        if (ev.key === \"Tab\") {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else {\n            realOnKeyDown(ev);\n        }\n    };\n\n    return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n\nexport default DelayedOnChange;\n"],"mappings":"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"}

package/DelayedOnChange/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DelayedOnChange } from "./DelayedOnChange";
+export { default as withDelayedOnChange } from "./withDelayedOnChange";

package/DelayedOnChange/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DelayedOnChange", {
+  enumerable: true,
+  get: function get() {
+    return _DelayedOnChange.default;
+  }
+});
+Object.defineProperty(exports, "withDelayedOnChange", {
+  enumerable: true,
+  get: function get() {
+    return _withDelayedOnChange.default;
+  }
+});
+var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
+var _withDelayedOnChange = _interopRequireDefault(require("./withDelayedOnChange"));

package/DelayedOnChange/index.js.map

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

package/DelayedOnChange/withDelayedOnChange.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DelayedOnChangeProps } from "./DelayedOnChange";
+export default function withDelayedOnChange(): (Component: React.FC<DelayedOnChangeProps>) => (props: DelayedOnChangeProps) => JSX.Element;

package/DelayedOnChange/withDelayedOnChange.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = withDelayedOnChange;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
+var _excluded = ["value", "onChange"];
+function withDelayedOnChange() {
+  return function decorator(Component) {
+    return function WithDelayedOnChange(props) {
+      var value = props.value,
+        onChange = props.onChange,
+        rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_DelayedOnChange.default, {
+        value: value,
+        onChange: onChange
+      }, function (_ref) {
+        var value = _ref.value,
+          onChange = _ref.onChange;
+        return /*#__PURE__*/_react.default.createElement(Component, Object.assign({}, rest, {
+          value: value,
+          onChange: onChange
+        }));
+      });
+    };
+  };
+}

package/DelayedOnChange/withDelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["withDelayedOnChange","decorator","Component","WithDelayedOnChange","props","value","onChange","rest"],"sources":["withDelayedOnChange.tsx"],"sourcesContent":["import React from \"react\";\nimport Delayed, { DelayedOnChangeProps } from \"./DelayedOnChange\";\n\nexport default function withDelayedOnChange() {\n    return function decorator(Component: React.FC<DelayedOnChangeProps>) {\n        return function WithDelayedOnChange(props: DelayedOnChangeProps) {\n            const { value, onChange, ...rest } = props;\n            return (\n                <Delayed value={value} onChange={onChange}>\n                    {({ value, onChange }) => (\n                        <Component {...rest} value={value} onChange={onChange} />\n                    )}\n                </Delayed>\n            );\n        };\n    };\n}\n"],"mappings":";;;;;;;;AAAA;AACA;AAAkE;AAEnD,SAASA,mBAAmB,GAAG;EAC1C,OAAO,SAASC,SAAS,CAACC,SAAyC,EAAE;IACjE,OAAO,SAASC,mBAAmB,CAACC,KAA2B,EAAE;MAC7D,IAAQC,KAAK,GAAwBD,KAAK,CAAlCC,KAAK;QAAEC,QAAQ,GAAcF,KAAK,CAA3BE,QAAQ;QAAKC,IAAI,0CAAKH,KAAK;MAC1C,oBACI,6BAAC,wBAAO;QAAC,KAAK,EAAEC,KAAM;QAAC,QAAQ,EAAEC;MAAS,GACrC;QAAA,IAAGD,KAAK,QAALA,KAAK;UAAEC,QAAQ,QAARA,QAAQ;QAAA,oBACf,6BAAC,SAAS,oBAAKC,IAAI;UAAE,KAAK,EAAEF,KAAM;UAAC,QAAQ,EAAEC;QAAS,GAAG;MAAA,CAC5D,CACK;IAElB,CAAC;EACL,CAAC;AACL"}

package/Dialog/Dialog.d.ts

@@ -1,29 +1,29 @@
-import * as React from "react";
+/// <reference types="web" />
+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 & {
-    children: any;
+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;
-    constructor(props: any);
+    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.
@@ -34,55 +34,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

@@ -1,101 +1,105 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-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";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogTitle = exports.DialogContent = exports.DialogCancel = exports.DialogButton = exports.DialogActions = exports.DialogAccept = exports.Dialog = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _dialog = require("@rmwc/dialog");
+var _emotion = require("emotion");
+var _Helpers = require("../Helpers");
 var _excluded = ["children"];
-import * as 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";
-export var Dialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(Dialog, _React$Component);
-
-  var _super = _createSuper(Dialog);
-
+var Dialog = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Dialog, _React$Component);
+  var _super = (0, _createSuper2.default)(Dialog);
   function Dialog(props) {
     var _this;
-
-    _classCallCheck(this, Dialog);
-
+    (0, _classCallCheck2.default)(this, Dialog);
     _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "container", void 0);
-
+    /**
+     * We can safely cast
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "container", void 0);
     _this.container = document.getElementById("dialog-container");
-
     if (!_this.container) {
       _this.container = document.createElement("div");
-
       _this.container.setAttribute("id", "dialog-container");
-
       var container = _this.container;
       document.body && document.body.appendChild(container);
     }
-
     return _this;
   }
-
-  _createClass(Dialog, [{
+  (0, _createClass2.default)(Dialog, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          children = _this$props.children,
-          props = _objectWithoutProperties(_this$props, _excluded);
-
-      var container = this.container; // Let's pass "permanent" / "persistent" / "temporary" flags as "mode" prop instead.
+        children = _this$props.children,
+        props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var container = this.container;
 
-      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(RmwcDialog, getClasses(props, "webiny-ui-dialog"), children), container);
+      // Let's pass "permanent" / "persistent" / "temporary" flags as "mode" prop instead.
+      return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_dialog.Dialog, (0, _Helpers.getClasses)(props, "webiny-ui-dialog"), children), container);
     }
   }]);
-
   return Dialog;
-}(React.Component);
-
+}(_react.default.Component);
+exports.Dialog = Dialog;
 /**
  * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
  */
-export var DialogTitle = function DialogTitle(props) {
-  return /*#__PURE__*/React.createElement(RmwcDialogTitle, getClasses(props, "webiny-ui-dialog__title"));
+var DialogTitle = function DialogTitle(props) {
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogTitle, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__title"));
 };
-
+exports.DialogTitle = DialogTitle;
 /**
  * A simple component for showing dialog's body.
  */
-export var DialogContent = function DialogContent(props) {
-  return /*#__PURE__*/React.createElement(RmwcDialogContent, getClasses(props, "webiny-ui-dialog__content"));
+var DialogContent = function DialogContent(props) {
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogContent, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__content"));
 };
+exports.DialogContent = DialogContent;
+var addMargin = /*#__PURE__*/(0, _emotion.css)("button:last-of-type{margin-left:8px;}label:addMargin;");
 
 /**
  * Can be used to show accept and cancel buttons.
  */
-export var DialogActions = function DialogActions(props) {
-  return /*#__PURE__*/React.createElement(RmwcDialogActions, getClasses(props, "webiny-ui-dialog__actions"));
+var DialogActions = function DialogActions(props) {
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogActions, (0, _Helpers.getClasses)(props, [addMargin, "webiny-ui-dialog__actions"]));
 };
-
+exports.DialogActions = DialogActions;
 /**
  * Use this to show a simple button.
  */
-export var DialogButton = function DialogButton(props) {
-  return /*#__PURE__*/React.createElement(RmwcDialogButton, getClasses(props, "webiny-ui-dialog__button"));
+var DialogButton = function DialogButton(props) {
+  return /*#__PURE__*/_react.default.createElement(_dialog.DialogButton, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__button"));
 };
-
+exports.DialogButton = DialogButton;
 /**
  * Use this to close the dialog without taking any additional action.
  */
-export var DialogCancel = function DialogCancel(props) {
-  return /*#__PURE__*/React.createElement(DialogButton, Object.assign({}, getClasses(props, "webiny-ui-dialog__button webiny-ui-dialog__button--cancel"), {
-    action: "close"
+var DialogCancel = function DialogCancel(props) {
+  return /*#__PURE__*/_react.default.createElement(DialogButton, Object.assign({}, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__button webiny-ui-dialog__button--cancel"), {
+    action: "close",
+    "data-testid": "dialog-cancel"
   }), props.children);
 };
-
+exports.DialogCancel = DialogCancel;
 /**
  * Use this to close the dialog without taking any additional action.
  */
-export var DialogAccept = function DialogAccept(props) {
-  return /*#__PURE__*/React.createElement(DialogButton, Object.assign({}, getClasses(props, "webiny-ui-dialog__button webiny-ui-dialog__button--accept"), {
-    action: "accept"
+var DialogAccept = function DialogAccept(props) {
+  return /*#__PURE__*/_react.default.createElement(DialogButton, Object.assign({}, (0, _Helpers.getClasses)(props, "webiny-ui-dialog__button webiny-ui-dialog__button--accept"), {
+    action: "accept",
+    "data-testid": "dialog-accept"
   }), props.children);
-};
+};
+exports.DialogAccept = DialogAccept;

package/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dialog","props","container","document","getElementById","createElement","setAttribute","body","appendChild","children","ReactDOM","createPortal","getClasses","React","Component","DialogTitle","DialogContent","addMargin","css","DialogActions","DialogButton","DialogCancel","DialogAccept"],"sources":["Dialog.tsx"],"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 { css } from \"emotion\";\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\nconst addMargin = css`\n    button:last-of-type {\n        margin-left: 8px;\n    }\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, [addMargin, \"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            data-testid=\"dialog-cancel\"\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            data-testid=\"dialog-accept\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AAaA;AACA;AAAuC;AAAA,IAkB1BA,MAAM;EAAA;EAAA;EAGf,gBAAYC,KAAkB,EAAE;IAAA;IAAA;IAC5B,0BAAMA,KAAK;IACX;AACR;AACA;IAFQ;IAGA,MAAKC,SAAS,GAAGC,QAAQ,CAACC,cAAc,CAAC,kBAAkB,CAAgB;IAE3E,IAAI,CAAC,MAAKF,SAAS,EAAE;MACjB,MAAKA,SAAS,GAAGC,QAAQ,CAACE,aAAa,CAAC,KAAK,CAAC;MAC9C,MAAKH,SAAS,CAACI,YAAY,CAAC,IAAI,EAAE,kBAAkB,CAAC;MACrD,IAAMJ,SAAS,GAAG,MAAKA,SAAS;MAChCC,QAAQ,CAACI,IAAI,IAAIJ,QAAQ,CAACI,IAAI,CAACC,WAAW,CAACN,SAAS,CAAC;IACzD;IAAC;EACL;EAAC;IAAA;IAAA,OAED,kBAAyB;MACrB,kBAA+B,IAAI,CAACD,KAAK;QAAjCQ,QAAQ,eAARA,QAAQ;QAAKR,KAAK;MAC1B,IAAMC,SAAS,GAAG,IAAI,CAACA,SAAS;;MAEhC;MACA,oBAAOQ,iBAAQ,CAACC,YAAY,eACxB,6BAAC,cAAU,EAAK,IAAAC,mBAAU,EAACX,KAAK,EAAE,kBAAkB,CAAC,EAAGQ,QAAQ,CAAc,EAC9EP,SAAS,CACZ;IACL;EAAC;EAAA;AAAA,EA3BuBW,cAAK,CAACC,SAAS;AAAA;AAqC3C;AACA;AACA;AACO,IAAMC,WAAuC,GAAG,SAA1CA,WAAuC,CAAGd,KAAK;EAAA,oBACxD,6BAAC,mBAAe,EAAK,IAAAW,mBAAU,EAACX,KAAK,EAAE,yBAAyB,CAAC,CAAI;AAAA,CACxE;AAAC;AAWF;AACA;AACA;AACO,IAAMe,aAA2C,GAAG,SAA9CA,aAA2C,CAAGf,KAAK;EAAA,oBAC5D,6BAAC,qBAAiB,EAAK,IAAAW,mBAAU,EAACX,KAAK,EAAE,2BAA2B,CAAC,CAAI;AAAA,CAC5E;AAAC;AAYF,IAAMgB,SAAS,oBAAGC,YAAG,0DAIpB;;AAED;AACA;AACA;AACO,IAAMC,aAA2C,GAAG,SAA9CA,aAA2C,CAAGlB,KAAK;EAAA,oBAC5D,6BAAC,qBAAiB,EAAK,IAAAW,mBAAU,EAACX,KAAK,EAAE,CAACgB,SAAS,EAAE,2BAA2B,CAAC,CAAC,CAAI;AAAA,CACzF;AAAC;AAWF;AACA;AACA;AACO,IAAMG,YAAyC,GAAG,SAA5CA,YAAyC,CAAGnB,KAAK;EAAA,oBAC1D,6BAAC,oBAAgB,EAAK,IAAAW,mBAAU,EAACX,KAAK,EAAE,0BAA0B,CAAC,CAAI;AAAA,CAC1E;AAAC;AASF;AACA;AACA;AACO,IAAMoB,YAAyC,GAAG,SAA5CA,YAAyC,CAAGpB,KAAK,EAAI;EAC9D,oBACI,6BAAC,YAAY,oBACL,IAAAW,mBAAU,EAACX,KAAK,EAAE,2DAA2D,CAAC;IAClF,MAAM,EAAC,OAAO;IACd,eAAY;EAAe,IAE1BA,KAAK,CAACQ,QAAQ,CACJ;AAEvB,CAAC;AAAC;AASF;AACA;AACA;AACO,IAAMa,YAAyC,GAAG,SAA5CA,YAAyC,CAAGrB,KAAK,EAAI;EAC9D,oBACI,6BAAC,YAAY,oBACL,IAAAW,mBAAU,EAACX,KAAK,EAAE,2DAA2D,CAAC;IAClF,MAAM,EAAC,QAAQ;IACf,eAAY;EAAe,IAE1BA,KAAK,CAACQ,QAAQ,CACJ;AAEvB,CAAC;AAAC"}

package/Dialog/Dialog.stories.js

@@ -1,30 +1,33 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./../Dialog/README.md";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import { Dialog, DialogButton, DialogAccept, DialogCancel, DialogActions, DialogTitle, DialogContent } from ".";
-var story = storiesOf("Components/Dialog", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _Story = require("@webiny/storybook-utils/Story");
+var _README = _interopRequireDefault(require("./../Dialog/README.md"));
+var _addonKnobs = require("@storybook/addon-knobs");
+var _ = require(".");
+var story = (0, _react2.storiesOf)("Components/Dialog", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var open = boolean("Open", false);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+  var open = (0, _addonKnobs.boolean)("Open", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "dialog"
-  }, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  }, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "A list with all possible options"
-  }, "Toggle ", /*#__PURE__*/React.createElement("code", null, "open"), " prop via the bottom knobs.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Note that instead of using ", /*#__PURE__*/React.createElement("code", null, "DialogFooter.Button"), " with", " ", /*#__PURE__*/React.createElement("code", null, "accept"), " or ", /*#__PURE__*/React.createElement("code", null, "cancel"), " prop, you can use a shorter", " ", /*#__PURE__*/React.createElement("code", null, "DialogAccept"), " and ", /*#__PURE__*/React.createElement("code", null, "DialogCancel"), " components respectively.", /*#__PURE__*/React.createElement(Dialog, {
+  }, "Toggle ", /*#__PURE__*/_react.default.createElement("code", null, "open"), " prop via the bottom knobs.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "Note that instead of using ", /*#__PURE__*/_react.default.createElement("code", null, "DialogFooter.Button"), " with", " ", /*#__PURE__*/_react.default.createElement("code", null, "accept"), " or ", /*#__PURE__*/_react.default.createElement("code", null, "cancel"), " prop, you can use a shorter", " ", /*#__PURE__*/_react.default.createElement("code", null, "DialogAccept"), " and ", /*#__PURE__*/_react.default.createElement("code", null, "DialogCancel"), " components respectively.", /*#__PURE__*/_react.default.createElement(_.Dialog, {
     open: open
-  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Delete confirmation"), /*#__PURE__*/React.createElement(DialogContent, null, "Are you sure you want to delete?"), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(DialogCancel, {
+  }, /*#__PURE__*/_react.default.createElement(_.DialogTitle, null, "Delete confirmation"), /*#__PURE__*/_react.default.createElement(_.DialogContent, null, "Are you sure you want to delete?"), /*#__PURE__*/_react.default.createElement(_.DialogActions, null, /*#__PURE__*/_react.default.createElement(_.DialogCancel, {
     onClick: function onClick() {
       return console.log("Cancel");
     }
-  }, "Cancel"), /*#__PURE__*/React.createElement(DialogAccept, {
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_.DialogAccept, {
     onClick: function onClick() {
       return console.log("Accept");
     }
-  }, "OK")))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Dialog open={".concat(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                    "))));
+  }, "OK")))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Dialog open={".concat(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                    "))));
 }, {
   info: {
-    propTables: [Dialog, DialogButton, DialogAccept, DialogCancel, DialogActions, DialogTitle, DialogContent]
+    propTables: [_.Dialog, _.DialogButton, _.DialogAccept, _.DialogCancel, _.DialogActions, _.DialogTitle, _.DialogContent]
   }
 });

package/Dialog/Dialog.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","open","boolean","readme","console","log","info","propTables","Dialog","DialogButton","DialogAccept","DialogCancel","DialogActions","DialogTitle","DialogContent"],"sources":["Dialog.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../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"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AAUA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,mBAAmB,EAAEC,MAAM,CAAC;AACpDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,IAAI,GAAG,IAAAC,mBAAO,EAAC,MAAM,EAAE,KAAK,CAAC;EAEnC,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAS,gBAC1B,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAmC,GAAC,SACrD,0DAAM,MAAI,CAAO,+BACxB,uDAAM,eACN,wCAAM,+BACqB,0DAAM,qBAAmB,CAAO,SAAK,EAAC,GAAG,eACpE,2CAAM,QAAM,CAAO,QAAI,0DAAM,QAAM,CAAO,gCAA4B,EAAC,GAAG,eAC1E,2CAAM,cAAY,CAAO,SAAK,0DAAM,cAAY,CAAO,6BAEvD,4CAAC,QAAM;IAAC,IAAI,EAAEF;EAAK,gBACf,6BAAC,aAAW,QAAC,qBAAmB,CAAc,eAC9C,6BAAC,eAAa,QAAC,kCAAgC,CAAgB,eAC/D,6BAAC,eAAa,qBACV,6BAAC,cAAY;IAAC,OAAO,EAAE;MAAA,OAAMG,OAAO,CAACC,GAAG,CAAC,QAAQ,CAAC;IAAA;EAAC,GAAC,QAEpD,CAAe,eACf,6BAAC,cAAY;IAAC,OAAO,EAAE;MAAA,OAAMD,OAAO,CAACC,GAAG,CAAC,QAAQ,CAAC;IAAA;EAAC,GAAC,IAEpD,CAAe,CACH,CACX,CACS,eACtB,6BAAC,uBAAgB,sDAEDJ,IAAI,+iBAWD,CACR,CACX;AAEhB,CAAC,EACD;EACIK,IAAI,EAAE;IACFC,UAAU,EAAE,CACRC,QAAM,EACNC,cAAY,EACZC,cAAY,EACZC,cAAY,EACZC,eAAa,EACbC,aAAW,EACXC,eAAa;EAErB;AACJ,CAAC,CACJ"}

package/Dialog/index.js

@@ -1 +1,16 @@
-export * from "./Dialog";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Dialog = require("./Dialog");
+Object.keys(_Dialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Dialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Dialog[key];
+    }
+  });
+});

package/Dialog/index.js.map

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

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;

package/Drawer/Drawer.js

@@ -1,25 +1,30 @@
-import * as React from "react";
-import { Drawer as RmwcDrawer, DrawerContent as RmwcDrawerContent, DrawerHeader as RmwcDrawerHeader } from "@rmwc/drawer";
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerHeader = exports.DrawerContent = exports.Drawer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _drawer = require("@rmwc/drawer");
 /**
  * Shows header of the drawer.
  */
 var DrawerHeader = function DrawerHeader(props) {
-  return /*#__PURE__*/React.createElement(RmwcDrawerHeader, props);
+  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerHeader, props);
 };
-
+exports.DrawerHeader = DrawerHeader;
 /**
  * Shows drawer content. It can be anything, but commonly a List component would suffice here.
  */
 var DrawerContent = function DrawerContent(props) {
-  return /*#__PURE__*/React.createElement(RmwcDrawerContent, props);
+  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerContent, props);
 };
-
+exports.DrawerContent = DrawerContent;
 /**
  * Use Drawer component to display navigation for the whole app or just a small section of it.
  */
 var Drawer = function Drawer(props) {
-  return /*#__PURE__*/React.createElement(RmwcDrawer, props);
+  return /*#__PURE__*/_react.default.createElement(_drawer.Drawer, props);
 };
-
-export { Drawer, DrawerHeader, DrawerContent };
+exports.Drawer = Drawer;

package/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DrawerHeader","props","DrawerContent","Drawer"],"sources":["Drawer.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Drawer as RmwcDrawer,\n    DrawerContent as RmwcDrawerContent,\n    DrawerHeader as RmwcDrawerHeader,\n    DrawerProps as RmwcDrawerProps,\n    DrawerHeaderProps as RmwcDrawerHeaderProps,\n    DrawerContentProps as RmwcDrawerContentProps\n} from \"@rmwc/drawer\";\n\ntype DrawerHeaderProps = RmwcDrawerHeaderProps & {\n    children: any;\n    className?: string;\n};\n\n/**\n * Shows header of the drawer.\n */\nconst DrawerHeader = (props: DrawerHeaderProps) => <RmwcDrawerHeader {...props} />;\n\nexport type DrawerContentProps = RmwcDrawerContentProps & {\n    /**\n     * Drawer direction.\n     */\n    dir?: string;\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n\n/**\n * Shows drawer content. It can be anything, but commonly a List component would suffice here.\n */\nconst DrawerContent = (props: DrawerContentProps) => <RmwcDrawerContent {...props} />;\n\ntype DrawerProps = RmwcDrawerProps & {\n    /**\n     * Drawer direction.\n     */\n    dir?: string;\n    /**\n     * Drawer content.\n     */\n    children: React.ReactNode;\n\n    /**\n     * CSS class name\n     */\n    className?: string;\n};\n/**\n * Use Drawer component to display navigation for the whole app or just a small section of it.\n */\nconst Drawer = (props: DrawerProps) => {\n    return <RmwcDrawer {...props} />;\n};\n\nexport { Drawer, DrawerHeader, DrawerContent };\n"],"mappings":";;;;;;;AAAA;AACA;AAcA;AACA;AACA;AACA,IAAMA,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAwB;EAAA,oBAAK,6BAAC,oBAAgB,EAAKA,KAAK,CAAI;AAAA;AAAC;AAkBnF;AACA;AACA;AACA,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAID,KAAyB;EAAA,oBAAK,6BAAC,qBAAiB,EAAKA,KAAK,CAAI;AAAA;AAAC;AAiBtF;AACA;AACA;AACA,IAAME,MAAM,GAAG,SAATA,MAAM,CAAIF,KAAkB,EAAK;EACnC,oBAAO,6BAAC,cAAU,EAAKA,KAAK,CAAI;AACpC,CAAC;AAAC"}

package/Drawer/Drawer.stories.js

@@ -1,23 +1,26 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import { List, ListItem } from "./../List";
-import readme from "./../Drawer/README.md";
-import { withKnobs, boolean } from "@storybook/addon-knobs";
-import { Drawer, DrawerHeader, DrawerContent } from "./Drawer";
-var story = storiesOf("Components/Drawer", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _Story = require("@webiny/storybook-utils/Story");
+var _List = require("./../List");
+var _README = _interopRequireDefault(require("./../Drawer/README.md"));
+var _addonKnobs = require("@storybook/addon-knobs");
+var _Drawer = require("./Drawer");
+var story = (0, _react2.storiesOf)("Components/Drawer", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
-  var open = boolean("Open", true);
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+  var open = (0, _addonKnobs.boolean)("Open", true);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "drawer"
-  }, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  }, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "A list with all possible options"
-  }, /*#__PURE__*/React.createElement(Drawer, {
+  }, /*#__PURE__*/_react.default.createElement(_Drawer.Drawer, {
     open: open
-  }, /*#__PURE__*/React.createElement(DrawerHeader, null, "Main Menu"), /*#__PURE__*/React.createElement(DrawerContent, null, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, "Users"), /*#__PURE__*/React.createElement(ListItem, null, "Companies"), /*#__PURE__*/React.createElement(ListItem, null, "Brands"), /*#__PURE__*/React.createElement(ListItem, null, "ACL"), /*#__PURE__*/React.createElement(ListItem, null, "Settings"))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Drawer>\n                        <DrawerHeader>Main Menu</DrawerHeader>\n                        <DrawerContent>\n                            <List>\n                                <ListItem>Users</ListItem>\n                                <ListItem>Companies</ListItem>\n                                <ListItem>Brands</ListItem>\n                                <ListItem>ACL</ListItem>\n                                <ListItem>Settings</ListItem>\n                            </List>\n                        </DrawerContent>\n                    </Drawer>\n                    ")));
+  }, /*#__PURE__*/_react.default.createElement(_Drawer.DrawerHeader, null, "Main Menu"), /*#__PURE__*/_react.default.createElement(_Drawer.DrawerContent, null, /*#__PURE__*/_react.default.createElement(_List.List, null, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Users"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Companies"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Brands"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "ACL"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Settings"))))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <Drawer>\n                        <DrawerHeader>Main Menu</DrawerHeader>\n                        <DrawerContent>\n                            <List>\n                                <ListItem>Users</ListItem>\n                                <ListItem>Companies</ListItem>\n                                <ListItem>Brands</ListItem>\n                                <ListItem>ACL</ListItem>\n                                <ListItem>Settings</ListItem>\n                            </List>\n                        </DrawerContent>\n                    </Drawer>\n                    ")));
 }, {
   info: {
-    propTables: [Drawer, DrawerHeader, DrawerContent]
+    propTables: [_Drawer.Drawer, _Drawer.DrawerHeader, _Drawer.DrawerContent]
   }
 });

package/Drawer/Drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","open","boolean","readme","info","propTables","Drawer","DrawerHeader","DrawerContent"],"sources":["Drawer.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { List, ListItem } from \"./../List\";\n\nimport readme from \"./../Drawer/README.md\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport { Drawer, DrawerHeader, DrawerContent } from \"./Drawer\";\n\nconst story = storiesOf(\"Components/Drawer\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const open = boolean(\"Open\", true);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"drawer\"}>\n                    <StorySandboxExample title={\"A list with all possible options\"}>\n                        <Drawer open={open}>\n                            <DrawerHeader>Main Menu</DrawerHeader>\n                            <DrawerContent>\n                                <List>\n                                    <ListItem>Users</ListItem>\n                                    <ListItem>Companies</ListItem>\n                                    <ListItem>Brands</ListItem>\n                                    <ListItem>ACL</ListItem>\n                                    <ListItem>Settings</ListItem>\n                                </List>\n                            </DrawerContent>\n                        </Drawer>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <Drawer>\n                        <DrawerHeader>Main Menu</DrawerHeader>\n                        <DrawerContent>\n                            <List>\n                                <ListItem>Users</ListItem>\n                                <ListItem>Companies</ListItem>\n                                <ListItem>Brands</ListItem>\n                                <ListItem>ACL</ListItem>\n                                <ListItem>Settings</ListItem>\n                            </List>\n                        </DrawerContent>\n                    </Drawer>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Drawer, DrawerHeader, DrawerContent] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AAEA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,mBAAmB,EAAEC,MAAM,CAAC;AACpDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,IAAI,GAAG,IAAAC,mBAAO,EAAC,MAAM,EAAE,IAAI,CAAC;EAElC,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAS,gBAC1B,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAmC,gBAC3D,6BAAC,cAAM;IAAC,IAAI,EAAEF;EAAK,gBACf,6BAAC,oBAAY,QAAC,WAAS,CAAe,eACtC,6BAAC,qBAAa,qBACV,6BAAC,UAAI,qBACD,6BAAC,cAAQ,QAAC,OAAK,CAAW,eAC1B,6BAAC,cAAQ,QAAC,WAAS,CAAW,eAC9B,6BAAC,cAAQ,QAAC,QAAM,CAAW,eAC3B,6BAAC,cAAQ,QAAC,KAAG,CAAW,eACxB,6BAAC,cAAQ,QAAC,UAAQ,CAAW,CAC1B,CACK,CACX,CACS,eACtB,6BAAC,uBAAgB,4mBAeE,CACR,CACX;AAEhB,CAAC,EACD;EAAEG,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,cAAM,EAAEC,oBAAY,EAAEC,qBAAa;EAAE;AAAE,CAAC,CAClE"}

package/Drawer/index.js

@@ -1 +1,16 @@
-export * from "./Drawer";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Drawer = require("./Drawer");
+Object.keys(_Drawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Drawer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Drawer[key];
+    }
+  });
+});

package/Drawer/index.js.map

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