@webiny/ui 5.34.8 → 5.35.0-beta.0

package/Tabs/Tabs.stories.js

@@ -1,23 +1,14 @@
 "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("./../Tabs/README.md"));
-
 var _baselineDelete24px = require("./svg/baseline-delete-24px.svg");
-
 var _baselineDone24px = require("./svg/baseline-done-24px.svg");
-
 var _addonKnobs = require("@storybook/addon-knobs");
-
 var _index = require("./index");
-
 var story = (0, _react2.storiesOf)("Components/Tabs", module);
 story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
@@ -28,7 +19,6 @@ story.add("usage", function () {
       }
     }, props.children);
   };
-
   return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Tabs example"
   }, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement("div", {

package/Tabs/Tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","Div","props","padding","children","readme","overflow","info","propTables","Tabs","Tab"],"sources":["Tabs.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 \"./../Tabs/README.md\";\n\nimport { ReactComponent as DeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as DoneIcon } from \"./svg/baseline-done-24px.svg\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\nimport { Tabs, Tab } from \"./index\";\n\nconst story = storiesOf(\"Components/Tabs\", module);\n\nstory.addDecorator(withKnobs);\nstory.add(\n    \"usage\",\n    () => {\n        const Div: React.FC = props => {\n            return <div style={{ padding: 50 }}>{props.children}</div>;\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Tabs example\"}>\n                    <StorySandboxExample>\n                        <div style={{ overflow: \"hidden\" }}>\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tabs, Tab] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AACAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,GAAa,GAAG,SAAhBA,GAAgB,CAAAC,KAAK,EAAI;IAC3B,oBAAO;MAAK,KAAK,EAAE;QAAEC,OAAO,EAAE;MAAX;IAAZ,GAA8BD,KAAK,CAACE,QAApC,CAAP;EACH,CAFD;;EAIA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAZ;EAAZ,gBACI,6BAAC,WAAD,qBACI,6BAAC,UAAD;IAAK,KAAK,EAAC,OAAX;IAAmB,IAAI,eAAE,6BAAC,kCAAD;EAAzB,gBACI,6BAAC,GAAD,QAAK,gBAAL,CADJ,CADJ,eAII,6BAAC,UAAD;IAAK,KAAK,EAAC,OAAX;IAAmB,IAAI,eAAE,6BAAC,gCAAD;EAAzB,gBACI,6BAAC,GAAD,QAAK,gBAAL,CADJ,CAJJ,eAOI,6BAAC,UAAD;IAAK,KAAK,EAAC;EAAX,gBACI,6BAAC,GAAD,QAAK,sCAAL,CADJ,CAPJ,eAUI,6BAAC,UAAD;IAAK,IAAI,eAAE,6BAAC,gCAAD;EAAX,gBACI,6BAAC,GAAD,QAAK,uCAAL,CADJ,CAVJ,CADJ,CADJ,CADJ,eAmBI,6BAAC,uBAAD,i0BAnBJ,CAFJ,CADJ;AA2CH,CAlDL,EAmDI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,WAAD,EAAOC,UAAP;EAAd;AAAR,CAnDJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","Div","props","padding","children","readme","overflow","info","propTables","Tabs","Tab"],"sources":["Tabs.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 \"./../Tabs/README.md\";\n\nimport { ReactComponent as DeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as DoneIcon } from \"./svg/baseline-done-24px.svg\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\nimport { Tabs, Tab } from \"./index\";\n\nconst story = storiesOf(\"Components/Tabs\", module);\n\nstory.addDecorator(withKnobs);\nstory.add(\n    \"usage\",\n    () => {\n        const Div: React.FC = props => {\n            return <div style={{ padding: 50 }}>{props.children}</div>;\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Tabs example\"}>\n                    <StorySandboxExample>\n                        <div style={{ overflow: \"hidden\" }}>\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tabs, Tab] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AAEA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,iBAAiB,EAAEC,MAAM,CAAC;AAElDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAC7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,GAAa,GAAG,SAAhBA,GAAa,CAAGC,KAAK,EAAI;IAC3B,oBAAO;MAAK,KAAK,EAAE;QAAEC,OAAO,EAAE;MAAG;IAAE,GAAED,KAAK,CAACE,QAAQ,CAAO;EAC9D,CAAC;EAED,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAe,gBAChC,6BAAC,0BAAmB,qBAChB;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAS;EAAE,gBAC/B,6BAAC,WAAI,qBACD,6BAAC,UAAG;IAAC,KAAK,EAAC,OAAO;IAAC,IAAI,eAAE,6BAAC,kCAAU;EAAI,gBACpC,6BAAC,GAAG,QAAC,gBAAc,CAAM,CACvB,eACN,6BAAC,UAAG;IAAC,KAAK,EAAC,OAAO;IAAC,IAAI,eAAE,6BAAC,gCAAQ;EAAI,gBAClC,6BAAC,GAAG,QAAC,gBAAc,CAAM,CACvB,eACN,6BAAC,UAAG;IAAC,KAAK,EAAC;EAAO,gBACd,6BAAC,GAAG,QAAC,sCAAoC,CAAM,CAC7C,eACN,6BAAC,UAAG;IAAC,IAAI,eAAE,6BAAC,gCAAQ;EAAI,gBACpB,6BAAC,GAAG,QAAC,uCAAqC,CAAM,CAC9C,CACH,CACL,CACY,eACtB,6BAAC,uBAAgB,i0BAiBE,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,WAAI,EAAEC,UAAG;EAAE;AAAE,CAAC,CACxC"}

package/Tabs/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Tabs = require("./Tabs");
-
 Object.keys(_Tabs).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Tabs[key]) return;
@@ -16,9 +14,7 @@ Object.keys(_Tabs).forEach(function (key) {
     }
   });
 });
-
 var _Tab = require("./Tab");
-
 Object.keys(_Tab).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Tab[key]) return;

package/Tabs/index.js.map

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

package/Tags/Tags.js

@@ -1,38 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Tags = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _emotion = require("emotion");
-
 var _keycode = _interopRequireDefault(require("keycode"));
-
 var _minimatch = _interopRequireDefault(require("minimatch"));
-
 var _Input = require("../Input");
-
 var _Chips = require("../Chips");
-
 var _baselineClose24px = require("./icons/baseline-close-24px.svg");
-
 var _FormElementMessage = require("../FormElementMessage");
-
 var _excluded = ["validation", "value", "disabled", "onChange", "description", "protectedTags"];
 var tagsStyle = /*#__PURE__*/(0, _emotion.css)({
   position: "relative",
@@ -55,21 +40,19 @@ var tagsStyle = /*#__PURE__*/(0, _emotion.css)({
     }
   }
 }, "label:tagsStyle;");
-
 var Tags = function Tags(props) {
   var _useState = (0, _react.useState)(""),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
   var validation = props.validation,
-      value = props.value,
-      disabled = props.disabled,
-      onChange = props.onChange,
-      description = props.description,
-      _props$protectedTags = props.protectedTags,
-      protectedTags = _props$protectedTags === void 0 ? [] : _props$protectedTags,
-      otherInputProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    value = props.value,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    description = props.description,
+    _props$protectedTags = props.protectedTags,
+    protectedTags = _props$protectedTags === void 0 ? [] : _props$protectedTags,
+    otherInputProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var isProtected = (0, _react.useCallback)(function (tag) {
     return protectedTags.some(function (pattern) {
       return (0, _minimatch.default)(tag, pattern);
@@ -84,12 +67,11 @@ var Tags = function Tags(props) {
       if (!onChange) {
         return;
       }
-
       var newValue = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+
       /**
        * We must cast as keycode only works with Event | string type.
        */
-
       switch ((0, _keycode.default)(ev)) {
         case "enter":
           if (inputValue) {
@@ -97,24 +79,19 @@ var Tags = function Tags(props) {
             onChange(newValue);
             setInputValue("");
           }
-
           break;
-
         case "backspace":
           if (newValue.length && !inputValue) {
             newValue.splice(-1, 1);
             onChange(newValue);
             break;
           }
-
       }
     }
   });
-
   var _ref = validation || {},
-      validationIsValid = _ref.isValid,
-      validationMessage = _ref.message;
-
+    validationIsValid = _ref.isValid,
+    validationMessage = _ref.message;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: tagsStyle
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Input.Input, inputProps), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
@@ -137,7 +114,6 @@ var Tags = function Tags(props) {
     });
   })) : null));
 };
-
 exports.Tags = Tags;
 var _default = Tags;
 exports.default = _default;

package/Tags/Tags.js.map

@@ -1 +1 @@
-{"version":3,"names":["tagsStyle","css","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","Tags","props","useState","inputValue","setInputValue","validation","value","disabled","onChange","description","protectedTags","otherInputProps","isProtected","useCallback","tag","some","pattern","minimatch","inputProps","onKeyDown","ev","newValue","Array","isArray","keycode","push","length","splice","validationIsValid","isValid","validationMessage","message","map","item","index"],"sources":["Tags.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useState } from \"react\";\nimport { css } from \"emotion\";\nimport keycode from \"keycode\";\nimport minimatch from \"minimatch\";\nimport { Input, InputProps } from \"~/Input\";\nimport { Chips, Chip } from \"~/Chips\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ninterface TagsProps extends FormComponentProps {\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Are input and chosen tags disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n     */\n    placeholder?: string;\n\n    /**\n     * Description beneath the input.\n     */\n    description?: string;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * A list of tags.\n     */\n    value?: string[];\n\n    /**\n     * Callback that gets executed on change of input value.\n     */\n    onInput?: Function;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: Function;\n\n    /**\n     * Automatically focus on the tags input.\n     */\n    autoFocus?: boolean;\n\n    /**\n     * Protected tags cannot be removed by the user.\n     */\n    protectedTags?: string[];\n}\n\nconst tagsStyle = css({\n    position: \"relative\",\n    \".mdc-elevation--z1\": {\n        position: \"absolute\",\n        width: \"calc(100% - 2px)\",\n        left: 1,\n        top: 56,\n        zIndex: 10,\n        maxHeight: 200,\n        overflowY: \"scroll\",\n        backgroundColor: \"var(--mdc-theme-surface)\"\n    },\n    ul: {\n        listStyle: \"none\",\n        width: \"100%\",\n        padding: 0,\n        li: {\n            padding: 10\n        }\n    }\n});\n\nexport const Tags: React.FC<TagsProps> = props => {\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const {\n        validation,\n        value,\n        disabled,\n        onChange,\n        description,\n        protectedTags = [],\n        ...otherInputProps\n    } = props;\n\n    const isProtected = useCallback(\n        (tag: string) => protectedTags.some(pattern => minimatch(tag, pattern)),\n        [protectedTags]\n    );\n\n    const inputProps: InputProps<string> = {\n        ...otherInputProps,\n        value: inputValue,\n        onChange: inputValue => {\n            setInputValue(inputValue);\n        },\n        onKeyDown: (ev: SyntheticEvent) => {\n            if (!onChange) {\n                return;\n            }\n\n            const newValue = Array.isArray(value) ? [...value] : [];\n\n            /**\n             * We must cast as keycode only works with Event | string type.\n             */\n            switch (keycode(ev as unknown as Event)) {\n                case \"enter\":\n                    if (inputValue) {\n                        newValue.push(inputValue);\n                        onChange(newValue);\n                        setInputValue(\"\");\n                    }\n                    break;\n                case \"backspace\":\n                    if (newValue.length && !inputValue) {\n                        newValue.splice(-1, 1);\n                        onChange(newValue);\n                        break;\n                    }\n            }\n        }\n    };\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    return (\n        <div className={tagsStyle}>\n            <div>\n                <Input {...inputProps} />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(value) && value.length ? (\n                    <Chips disabled={disabled}>\n                        {value.map((item, index) => {\n                            return (\n                                <Chip\n                                    label={item}\n                                    trailingIcon={isProtected(item) ? null : <BaselineCloseIcon />}\n                                    key={`${item}-${index}`}\n                                    onRemove={() => {\n                                        // On removal, let's update the value and call \"onChange\" callback.\n                                        if (onChange) {\n                                            const newValue = [...value];\n                                            newValue.splice(index, 1);\n                                            onChange(newValue);\n                                        }\n                                    }}\n                                />\n                            );\n                        })}\n                    </Chips>\n                ) : null}\n            </div>\n        </div>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}
+{"version":3,"names":["tagsStyle","css","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","Tags","props","useState","inputValue","setInputValue","validation","value","disabled","onChange","description","protectedTags","otherInputProps","isProtected","useCallback","tag","some","pattern","minimatch","inputProps","onKeyDown","ev","newValue","Array","isArray","keycode","push","length","splice","validationIsValid","isValid","validationMessage","message","map","item","index"],"sources":["Tags.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useState } from \"react\";\nimport { css } from \"emotion\";\nimport keycode from \"keycode\";\nimport minimatch from \"minimatch\";\nimport { Input, InputProps } from \"~/Input\";\nimport { Chips, Chip } from \"~/Chips\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ninterface TagsProps extends FormComponentProps {\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Are input and chosen tags disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n     */\n    placeholder?: string;\n\n    /**\n     * Description beneath the input.\n     */\n    description?: string;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * A list of tags.\n     */\n    value?: string[];\n\n    /**\n     * Callback that gets executed on change of input value.\n     */\n    onInput?: Function;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: Function;\n\n    /**\n     * Automatically focus on the tags input.\n     */\n    autoFocus?: boolean;\n\n    /**\n     * Protected tags cannot be removed by the user.\n     */\n    protectedTags?: string[];\n}\n\nconst tagsStyle = css({\n    position: \"relative\",\n    \".mdc-elevation--z1\": {\n        position: \"absolute\",\n        width: \"calc(100% - 2px)\",\n        left: 1,\n        top: 56,\n        zIndex: 10,\n        maxHeight: 200,\n        overflowY: \"scroll\",\n        backgroundColor: \"var(--mdc-theme-surface)\"\n    },\n    ul: {\n        listStyle: \"none\",\n        width: \"100%\",\n        padding: 0,\n        li: {\n            padding: 10\n        }\n    }\n});\n\nexport const Tags: React.FC<TagsProps> = props => {\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const {\n        validation,\n        value,\n        disabled,\n        onChange,\n        description,\n        protectedTags = [],\n        ...otherInputProps\n    } = props;\n\n    const isProtected = useCallback(\n        (tag: string) => protectedTags.some(pattern => minimatch(tag, pattern)),\n        [protectedTags]\n    );\n\n    const inputProps: InputProps<string> = {\n        ...otherInputProps,\n        value: inputValue,\n        onChange: inputValue => {\n            setInputValue(inputValue);\n        },\n        onKeyDown: (ev: SyntheticEvent) => {\n            if (!onChange) {\n                return;\n            }\n\n            const newValue = Array.isArray(value) ? [...value] : [];\n\n            /**\n             * We must cast as keycode only works with Event | string type.\n             */\n            switch (keycode(ev as unknown as Event)) {\n                case \"enter\":\n                    if (inputValue) {\n                        newValue.push(inputValue);\n                        onChange(newValue);\n                        setInputValue(\"\");\n                    }\n                    break;\n                case \"backspace\":\n                    if (newValue.length && !inputValue) {\n                        newValue.splice(-1, 1);\n                        onChange(newValue);\n                        break;\n                    }\n            }\n        }\n    };\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    return (\n        <div className={tagsStyle}>\n            <div>\n                <Input {...inputProps} />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(value) && value.length ? (\n                    <Chips disabled={disabled}>\n                        {value.map((item, index) => {\n                            return (\n                                <Chip\n                                    label={item}\n                                    trailingIcon={isProtected(item) ? null : <BaselineCloseIcon />}\n                                    key={`${item}-${index}`}\n                                    onRemove={() => {\n                                        // On removal, let's update the value and call \"onChange\" callback.\n                                        if (onChange) {\n                                            const newValue = [...value];\n                                            newValue.splice(index, 1);\n                                            onChange(newValue);\n                                        }\n                                    }}\n                                />\n                            );\n                        })}\n                    </Chips>\n                ) : null}\n            </div>\n        </div>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}

package/Tags/Tags.stories.js

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

package/Tags/Tags.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","tags","Bind","info","propTables","Tags"],"sources":["Tags.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Tags } from \"./Tags\";\n\nconst story = storiesOf(\"Components/Tags\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value\"}>\n                        <Form data={{ tags: [\"animals\", \"dogs\", \"food\"] }}>\n                            {({ Bind }) => (\n                                <Bind name=\"tags\">\n                                    <Tags\n                                        label=\"Tags\"\n                                        disabled={disabled}\n                                        description=\"Choose your tags\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{ tags: ['animals', 'dogs', 'food'] }}>\n                        {({ Bind }) => (\n                            <Bind name=\"tags\">\n                                <Tags\n                                    label=\"Tags\"\n                                    disabled={disabled}\n                                    description=\"Choose your tags\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tags] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,IAAI,EAAE,CAAC,SAAD,EAAY,MAAZ,EAAoB,MAApB;IAAR;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,UAAD;MACI,KAAK,EAAC,MADV;MAEI,QAAQ,EAAEJ,QAFd;MAGI,WAAW,EAAC;IAHhB,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAcI,6BAAC,uBAAD,miBAdJ,CAFJ,CADJ;AAmCH,CAxCL,EAyCI;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD;EAAd;AAAR,CAzCJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","tags","Bind","info","propTables","Tags"],"sources":["Tags.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Tags } from \"./Tags\";\n\nconst story = storiesOf(\"Components/Tags\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value\"}>\n                        <Form data={{ tags: [\"animals\", \"dogs\", \"food\"] }}>\n                            {({ Bind }) => (\n                                <Bind name=\"tags\">\n                                    <Tags\n                                        label=\"Tags\"\n                                        disabled={disabled}\n                                        description=\"Choose your tags\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{ tags: ['animals', 'dogs', 'food'] }}>\n                        {({ Bind }) => (\n                            <Bind name=\"tags\">\n                                <Tags\n                                    label=\"Tags\"\n                                    disabled={disabled}\n                                    description=\"Choose your tags\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tags] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AAEA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,iBAAiB,EAAEC,MAAM,CAAC;AAClDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;AAE7BJ,KAAK,CAACK,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAO,EAAC,UAAU,EAAE,KAAK,CAAC;EAE3C,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAe,gBACvC,6BAAC,UAAI;IAAC,IAAI,EAAE;MAAEC,IAAI,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM;IAAE;EAAE,GAC7C;IAAA,IAAGC,IAAI,QAAJA,IAAI;IAAA,oBACJ,6BAAC,IAAI;MAAC,IAAI,EAAC;IAAM,gBACb,6BAAC,UAAI;MACD,KAAK,EAAC,MAAM;MACZ,QAAQ,EAAEJ,QAAS;MACnB,WAAW,EAAC;IAAkB,EAChC,CACC;EAAA,CACV,CACE,CACW,eACtB,6BAAC,uBAAgB,miBAcE,CACR,CACX;AAEhB,CAAC,EACD;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAI;EAAE;AAAE,CAAC,CACnC"}

package/Tags/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Tags = require("./Tags");
-
 Object.keys(_Tags).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Tags[key]) return;

package/Tags/index.js.map

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

package/Tooltip/Tooltip.js

@@ -1,49 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tooltip = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _rcTooltip = _interopRequireDefault(require("rc-tooltip"));
-
 require("rc-tooltip/assets/bootstrap_white.css");
-
 require("./style.scss");
-
 /**
  * Use Tooltip component to display a list of choices, once the handler is triggered.
  */
 var Tooltip = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Tooltip, _React$Component);
-
   var _super = (0, _createSuper2.default)(Tooltip);
-
   function Tooltip() {
     var _this;
-
     (0, _classCallCheck2.default)(this, Tooltip);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       tooltipIsOpen: false
@@ -55,7 +38,6 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(Tooltip, [{
     key: "render",
     value: function render() {
@@ -75,5 +57,4 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
   }]);
   return Tooltip;
 }(_react.default.Component);
-
 exports.Tooltip = Tooltip;

package/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["Tooltip","tooltipIsOpen","visible","setState","onVisibleChange","props","content","children","React","Component"],"sources":["Tooltip.tsx"],"sourcesContent":["import React from \"react\";\nimport { default as RcTooltip } from \"rc-tooltip\";\nimport \"rc-tooltip/assets/bootstrap_white.css\";\nimport \"./style.scss\";\n\ntype TooltipPropsContent =\n    | (() => React.ReactChild)\n    | React.ReactChild\n    | React.ReactFragment\n    | React.ReactPortal;\n\nexport interface TooltipProps {\n    // A component (eg. button) which will trigger the tooltip.\n    children: React.ReactNode;\n\n    // Content which will be shown inside the tooltip.\n    content: TooltipPropsContent;\n\n    // Defines which action will trigger the tooltip: \"hover\", \"click\" or \"focus\".\n    trigger?: string;\n\n    // Can be \"left\",\"right\",\"top\",\"bottom\", \"topLeft\", \"topRight\", \"bottomLeft\" or \"bottomRight\".\n    placement?:\n        | \"left\"\n        | \"right\"\n        | \"top\"\n        | \"bottom\"\n        | \"topLeft\"\n        | \"topRight\"\n        | \"bottomLeft\"\n        | \"bottomRight\";\n\n    // CSS class name\n    className?: string;\n}\n\ninterface State {\n    tooltipIsOpen: boolean;\n}\n\n/**\n * Use Tooltip component to display a list of choices, once the handler is triggered.\n */\nclass Tooltip extends React.Component<TooltipProps, State> {\n    public override state = {\n        tooltipIsOpen: false\n    };\n\n    onVisibleChange = (visible?: boolean) => {\n        this.setState({\n            tooltipIsOpen: visible || false\n        });\n    };\n\n    public override render() {\n        return (\n            <RcTooltip\n                /**\n                 * rc-tooltip types do not have animation as prop, but the rc-tooltip lib has.\n                 */\n                // @ts-ignore\n                animation={\"fade\"}\n                onVisibleChange={this.onVisibleChange}\n                overlay={this.props.content}\n                {...this.props}\n            >\n                <span className=\"webiny-ui-tooltip tooltip-content-wrapper\">\n                    {this.props.children}\n                </span>\n            </RcTooltip>\n        );\n    }\n}\n\nexport { Tooltip };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAqCA;AACA;AACA;IACMA,O;;;;;;;;;;;;;;;wFACsB;MACpBC,aAAa,EAAE;IADK,C;kGAIN,UAACC,OAAD,EAAuB;MACrC,MAAKC,QAAL,CAAc;QACVF,aAAa,EAAEC,OAAO,IAAI;MADhB,CAAd;IAGH,C;;;;;;WAED,kBAAyB;MACrB,oBACI,6BAAC;MACG;AAChB;AACA;MACgB;MAJJ;QAKI,SAAS,EAAE,MALf;QAMI,eAAe,EAAE,KAAKE,eAN1B;QAOI,OAAO,EAAE,KAAKC,KAAL,CAAWC;MAPxB,GAQQ,KAAKD,KARb,gBAUI;QAAM,SAAS,EAAC;MAAhB,GACK,KAAKA,KAAL,CAAWE,QADhB,CAVJ,CADJ;IAgBH;;;EA5BiBC,cAAA,CAAMC,S"}
+{"version":3,"names":["Tooltip","tooltipIsOpen","visible","setState","onVisibleChange","props","content","children","React","Component"],"sources":["Tooltip.tsx"],"sourcesContent":["import React from \"react\";\nimport { default as RcTooltip } from \"rc-tooltip\";\nimport \"rc-tooltip/assets/bootstrap_white.css\";\nimport \"./style.scss\";\n\ntype TooltipPropsContent =\n    | (() => React.ReactChild)\n    | React.ReactChild\n    | React.ReactFragment\n    | React.ReactPortal;\n\nexport interface TooltipProps {\n    // A component (eg. button) which will trigger the tooltip.\n    children: React.ReactNode;\n\n    // Content which will be shown inside the tooltip.\n    content: TooltipPropsContent;\n\n    // Defines which action will trigger the tooltip: \"hover\", \"click\" or \"focus\".\n    trigger?: string;\n\n    // Can be \"left\",\"right\",\"top\",\"bottom\", \"topLeft\", \"topRight\", \"bottomLeft\" or \"bottomRight\".\n    placement?:\n        | \"left\"\n        | \"right\"\n        | \"top\"\n        | \"bottom\"\n        | \"topLeft\"\n        | \"topRight\"\n        | \"bottomLeft\"\n        | \"bottomRight\";\n\n    // CSS class name\n    className?: string;\n}\n\ninterface State {\n    tooltipIsOpen: boolean;\n}\n\n/**\n * Use Tooltip component to display a list of choices, once the handler is triggered.\n */\nclass Tooltip extends React.Component<TooltipProps, State> {\n    public override state = {\n        tooltipIsOpen: false\n    };\n\n    onVisibleChange = (visible?: boolean) => {\n        this.setState({\n            tooltipIsOpen: visible || false\n        });\n    };\n\n    public override render() {\n        return (\n            <RcTooltip\n                /**\n                 * rc-tooltip types do not have animation as prop, but the rc-tooltip lib has.\n                 */\n                // @ts-ignore\n                animation={\"fade\"}\n                onVisibleChange={this.onVisibleChange}\n                overlay={this.props.content}\n                {...this.props}\n            >\n                <span className=\"webiny-ui-tooltip tooltip-content-wrapper\">\n                    {this.props.children}\n                </span>\n            </RcTooltip>\n        );\n    }\n}\n\nexport { Tooltip };\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAqCA;AACA;AACA;AAFA,IAGMA,OAAO;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,oFACe;MACpBC,aAAa,EAAE;IACnB,CAAC;IAAA,8FAEiB,UAACC,OAAiB,EAAK;MACrC,MAAKC,QAAQ,CAAC;QACVF,aAAa,EAAEC,OAAO,IAAI;MAC9B,CAAC,CAAC;IACN,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MACrB,oBACI,6BAAC;MACG;AAChB;AACA;MACgB;MAAA;QACA,SAAS,EAAE,MAAO;QAClB,eAAe,EAAE,IAAI,CAACE,eAAgB;QACtC,OAAO,EAAE,IAAI,CAACC,KAAK,CAACC;MAAQ,GACxB,IAAI,CAACD,KAAK,gBAEd;QAAM,SAAS,EAAC;MAA2C,GACtD,IAAI,CAACA,KAAK,CAACE,QAAQ,CACjB,CACC;IAEpB;EAAC;EAAA;AAAA,EA5BiBC,cAAK,CAACC,SAAS;AAAA"}

package/Tooltip/Tooltip.stories.js

@@ -1,17 +1,11 @@
 "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("./../Tooltip/README.md"));
-
 var _Tooltip = require("./Tooltip");
-
 var story = (0, _react2.storiesOf)("Components/Tooltip", module);
 story.add("usage", function () {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {

package/Tooltip/Tooltip.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Tooltip"],"sources":["Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Tooltip/README.md\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst story = storiesOf(\"Components/Tooltip\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple tooltip, triggered with a button\"}>\n                    <Tooltip content={<span>This is a tooltip.</span>}>\n                        <span>Hover to see additional information.</span>\n                    </Tooltip>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tooltip] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,oBAAV,EAAgCC,MAAhC,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,gBAAD;IAAS,OAAO,eAAE,2CAAM,oBAAN;EAAlB,gBACI,2CAAM,sCAAN,CADJ,CADJ,CAFJ,CADJ;AAUH,CAbL,EAcI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,gBAAD;EAAd;AAAR,CAdJ"}
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Tooltip"],"sources":["Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Tooltip/README.md\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst story = storiesOf(\"Components/Tooltip\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple tooltip, triggered with a button\"}>\n                    <Tooltip content={<span>This is a tooltip.</span>}>\n                        <span>Hover to see additional information.</span>\n                    </Tooltip>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tooltip] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,oBAAoB,EAAEC,MAAM,CAAC;AAErDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAA4C,gBAC7D,6BAAC,gBAAO;IAAC,OAAO,eAAE,2CAAM,oBAAkB;EAAQ,gBAC9C,2CAAM,sCAAoC,CAAO,CAC3C,CACC,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,gBAAO;EAAE;AAAE,CAAC,CACtC"}

package/Tooltip/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Tooltip = require("./Tooltip");
-
 Object.keys(_Tooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Tooltip[key]) return;

package/Tooltip/index.js.map

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

package/TopAppBar/TopAppBar.js

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

package/TopAppBar/TopAppBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["TopAppBar","props","children","rest"],"sources":["TopAppBar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    TopAppBar as RmwcTopAppBar,\n    TopAppBarProps as RmwcTopAppBarProps,\n    TopAppBarRow\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarProps = RmwcTopAppBarProps & {\n    /**\n     * Element children\n     */\n    children: React.ReactNode[] | React.ReactNode;\n    /**\n     * CSS class name\n     */\n    className?: string;\n    /**\n     * Style object\n     */\n    style?: React.CSSProperties;\n};\n\nconst TopAppBar = (props: TopAppBarProps) => {\n    const { children, ...rest } = props;\n    return (\n        <RmwcTopAppBar {...rest}>\n            <TopAppBarRow>{children}</TopAppBarRow>\n        </RmwcTopAppBar>\n    );\n};\n\nexport { TopAppBar };\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;;;AAqBA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAA2B;EACzC,IAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;EAAA,IAAqBC,IAArB,0CAA8BF,KAA9B;EACA,oBACI,6BAAC,oBAAD,EAAmBE,IAAnB,eACI,6BAAC,uBAAD,QAAeD,QAAf,CADJ,CADJ;AAKH,CAPD"}
+{"version":3,"names":["TopAppBar","props","children","rest"],"sources":["TopAppBar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    TopAppBar as RmwcTopAppBar,\n    TopAppBarProps as RmwcTopAppBarProps,\n    TopAppBarRow\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarProps = RmwcTopAppBarProps & {\n    /**\n     * Element children\n     */\n    children: React.ReactNode[] | React.ReactNode;\n    /**\n     * CSS class name\n     */\n    className?: string;\n    /**\n     * Style object\n     */\n    style?: React.CSSProperties;\n};\n\nconst TopAppBar = (props: TopAppBarProps) => {\n    const { children, ...rest } = props;\n    return (\n        <RmwcTopAppBar {...rest}>\n            <TopAppBarRow>{children}</TopAppBarRow>\n        </RmwcTopAppBar>\n    );\n};\n\nexport { TopAppBar };\n"],"mappings":";;;;;;;;AAAA;AAEA;AAI2B;AAiB3B,IAAMA,SAAS,GAAG,SAAZA,SAAS,CAAIC,KAAqB,EAAK;EACzC,IAAQC,QAAQ,GAAcD,KAAK,CAA3BC,QAAQ;IAAKC,IAAI,0CAAKF,KAAK;EACnC,oBACI,6BAAC,oBAAa,EAAKE,IAAI,eACnB,6BAAC,uBAAY,QAAED,QAAQ,CAAgB,CAC3B;AAExB,CAAC;AAAC"}

package/TopAppBar/TopAppBar.stories.js

@@ -1,50 +1,37 @@
 "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("./../TopAppBar/README.md"));
-
 var _addonKnobs = require("@storybook/addon-knobs");
-
 var _baselineAutorenew24px = require("./icons/baseline-autorenew-24px.svg");
-
 var _baselineCloud_done24px = require("./icons/baseline-cloud_done-24px.svg");
-
 var _baselineEmail24px = require("./icons/baseline-email-24px.svg");
-
 var _baselineMenu24px = require("./icons/baseline-menu-24px.svg");
-
 var _index = require("./index");
-
 var story = (0, _react2.storiesOf)("Components/TopAppBar", module);
 story.addDecorator(_addonKnobs.withKnobs);
+
 /**
  * Top app bar is by default rendered with "position: fixed", which then messes up the presentation.
  * For demonstration purposes, we had to switch to absolute positioning.
  */
 
 var appendedCssOverrides = false;
-
 var appendCssOverrides = function appendCssOverrides() {
   if (appendedCssOverrides) {
     return;
   }
-
   appendedCssOverrides = true;
   var css = ".top-app-bar-storybook .mdc-top-app-bar { position: relative; top: 0 !important }\n                .top-app-bar-storybook .mdc-top-app-bar img { background: none; }",
-      head = document.head || document.getElementsByTagName("head")[0],
-      style = document.createElement("style");
+    head = document.head || document.getElementsByTagName("head")[0],
+    style = document.createElement("style");
   style.type = "text/css";
   style.appendChild(document.createTextNode(css));
   head.appendChild(style);
 };
-
 story.add("usage", function () {
   appendCssOverrides();
   var title = (0, _addonKnobs.text)("title", "Webiny");

package/TopAppBar/TopAppBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","appendedCssOverrides","appendCssOverrides","css","head","document","getElementsByTagName","style","createElement","type","appendChild","createTextNode","add","title","text","readme","info","propTables","TopAppBar","TopAppBarSection","TopAppBarNavigationIcon","TopAppBarTitle","TopAppBarActionItem"],"sources":["TopAppBar.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../TopAppBar/README.md\";\nimport { withKnobs, text } from \"@storybook/addon-knobs\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./icons/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./icons/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as EnvelopeIcon } from \"./icons/baseline-email-24px.svg\";\nimport { ReactComponent as MenuIcon } from \"./icons/baseline-menu-24px.svg\";\n\nimport {\n    TopAppBar,\n    TopAppBarSection,\n    TopAppBarNavigationIcon,\n    TopAppBarTitle,\n    TopAppBarActionItem\n} from \"./index\";\n\nconst story = storiesOf(\"Components/TopAppBar\", module);\nstory.addDecorator(withKnobs);\n\n/**\n * Top app bar is by default rendered with \"position: fixed\", which then messes up the presentation.\n * For demonstration purposes, we had to switch to absolute positioning.\n */\n\nlet appendedCssOverrides = false;\nconst appendCssOverrides = () => {\n    if (appendedCssOverrides) {\n        return;\n    }\n\n    appendedCssOverrides = true;\n    const css = `.top-app-bar-storybook .mdc-top-app-bar { position: relative; top: 0 !important }\n                .top-app-bar-storybook .mdc-top-app-bar img { background: none; }`,\n        head = document.head || document.getElementsByTagName(\"head\")[0],\n        style = document.createElement(\"style\");\n\n    style.type = \"text/css\";\n    style.appendChild(document.createTextNode(css));\n    head.appendChild(style);\n};\n\nstory.add(\n    \"usage\",\n    () => {\n        appendCssOverrides();\n\n        const title = text(\"title\", \"Webiny\");\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <div className=\"top-app-bar-storybook\">\n                        <TopAppBar>\n                            <TopAppBarSection alignStart>\n                                <TopAppBarNavigationIcon icon={<MenuIcon />} />\n                                <TopAppBarTitle>{title}</TopAppBarTitle>\n                            </TopAppBarSection>\n                            <TopAppBarSection alignEnd>\n                                <TopAppBarActionItem icon={<CloudDoneIcon />} />\n                                <TopAppBarActionItem icon={<AutoRenewIcon />} />\n                                <TopAppBarActionItem icon={<EnvelopeIcon />} />\n                            </TopAppBarSection>\n                        </TopAppBar>\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [\n                TopAppBar,\n                TopAppBarSection,\n                TopAppBarNavigationIcon,\n                TopAppBarTitle,\n                TopAppBarActionItem\n            ]\n        }\n    }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;AAQA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,sBAAV,EAAkCC,MAAlC,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEA;AACA;AACA;AACA;;AAEA,IAAIC,oBAAoB,GAAG,KAA3B;;AACA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;EAC7B,IAAID,oBAAJ,EAA0B;IACtB;EACH;;EAEDA,oBAAoB,GAAG,IAAvB;EACA,IAAME,GAAG,yKAAT;EAAA,IAEIC,IAAI,GAAGC,QAAQ,CAACD,IAAT,IAAiBC,QAAQ,CAACC,oBAAT,CAA8B,MAA9B,EAAsC,CAAtC,CAF5B;EAAA,IAGIC,KAAK,GAAGF,QAAQ,CAACG,aAAT,CAAuB,OAAvB,CAHZ;EAKAD,KAAK,CAACE,IAAN,GAAa,UAAb;EACAF,KAAK,CAACG,WAAN,CAAkBL,QAAQ,CAACM,cAAT,CAAwBR,GAAxB,CAAlB;EACAC,IAAI,CAACM,WAAL,CAAiBH,KAAjB;AACH,CAdD;;AAgBAX,KAAK,CAACgB,GAAN,CACI,OADJ,EAEI,YAAM;EACFV,kBAAkB;EAElB,IAAMW,KAAK,GAAG,IAAAC,gBAAA,EAAK,OAAL,EAAc,QAAd,CAAd;EACA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI;IAAK,SAAS,EAAC;EAAf,gBACI,6BAAC,gBAAD,qBACI,6BAAC,uBAAD;IAAkB,UAAU;EAA5B,gBACI,6BAAC,8BAAD;IAAyB,IAAI,eAAE,6BAAC,gCAAD;EAA/B,EADJ,eAEI,6BAAC,qBAAD,QAAiBF,KAAjB,CAFJ,CADJ,eAKI,6BAAC,uBAAD;IAAkB,QAAQ;EAA1B,gBACI,6BAAC,0BAAD;IAAqB,IAAI,eAAE,6BAAC,sCAAD;EAA3B,EADJ,eAEI,6BAAC,0BAAD;IAAqB,IAAI,eAAE,6BAAC,qCAAD;EAA3B,EAFJ,eAGI,6BAAC,0BAAD;IAAqB,IAAI,eAAE,6BAAC,iCAAD;EAA3B,EAHJ,CALJ,CADJ,CADJ,CAFJ,CADJ;AAoBH,CA1BL,EA2BI;EACIG,IAAI,EAAE;IACFC,UAAU,EAAE,CACRC,gBADQ,EAERC,uBAFQ,EAGRC,8BAHQ,EAIRC,qBAJQ,EAKRC,0BALQ;EADV;AADV,CA3BJ"}
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","appendedCssOverrides","appendCssOverrides","css","head","document","getElementsByTagName","style","createElement","type","appendChild","createTextNode","add","title","text","readme","info","propTables","TopAppBar","TopAppBarSection","TopAppBarNavigationIcon","TopAppBarTitle","TopAppBarActionItem"],"sources":["TopAppBar.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../TopAppBar/README.md\";\nimport { withKnobs, text } from \"@storybook/addon-knobs\";\n\nimport { ReactComponent as AutoRenewIcon } from \"./icons/baseline-autorenew-24px.svg\";\nimport { ReactComponent as CloudDoneIcon } from \"./icons/baseline-cloud_done-24px.svg\";\nimport { ReactComponent as EnvelopeIcon } from \"./icons/baseline-email-24px.svg\";\nimport { ReactComponent as MenuIcon } from \"./icons/baseline-menu-24px.svg\";\n\nimport {\n    TopAppBar,\n    TopAppBarSection,\n    TopAppBarNavigationIcon,\n    TopAppBarTitle,\n    TopAppBarActionItem\n} from \"./index\";\n\nconst story = storiesOf(\"Components/TopAppBar\", module);\nstory.addDecorator(withKnobs);\n\n/**\n * Top app bar is by default rendered with \"position: fixed\", which then messes up the presentation.\n * For demonstration purposes, we had to switch to absolute positioning.\n */\n\nlet appendedCssOverrides = false;\nconst appendCssOverrides = () => {\n    if (appendedCssOverrides) {\n        return;\n    }\n\n    appendedCssOverrides = true;\n    const css = `.top-app-bar-storybook .mdc-top-app-bar { position: relative; top: 0 !important }\n                .top-app-bar-storybook .mdc-top-app-bar img { background: none; }`,\n        head = document.head || document.getElementsByTagName(\"head\")[0],\n        style = document.createElement(\"style\");\n\n    style.type = \"text/css\";\n    style.appendChild(document.createTextNode(css));\n    head.appendChild(style);\n};\n\nstory.add(\n    \"usage\",\n    () => {\n        appendCssOverrides();\n\n        const title = text(\"title\", \"Webiny\");\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <div className=\"top-app-bar-storybook\">\n                        <TopAppBar>\n                            <TopAppBarSection alignStart>\n                                <TopAppBarNavigationIcon icon={<MenuIcon />} />\n                                <TopAppBarTitle>{title}</TopAppBarTitle>\n                            </TopAppBarSection>\n                            <TopAppBarSection alignEnd>\n                                <TopAppBarActionItem icon={<CloudDoneIcon />} />\n                                <TopAppBarActionItem icon={<AutoRenewIcon />} />\n                                <TopAppBarActionItem icon={<EnvelopeIcon />} />\n                            </TopAppBarSection>\n                        </TopAppBar>\n                    </div>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [\n                TopAppBar,\n                TopAppBarSection,\n                TopAppBarNavigationIcon,\n                TopAppBarTitle,\n                TopAppBarActionItem\n            ]\n        }\n    }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAQA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,sBAAsB,EAAEC,MAAM,CAAC;AACvDF,KAAK,CAACG,YAAY,CAACC,qBAAS,CAAC;;AAE7B;AACA;AACA;AACA;;AAEA,IAAIC,oBAAoB,GAAG,KAAK;AAChC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,GAAS;EAC7B,IAAID,oBAAoB,EAAE;IACtB;EACJ;EAEAA,oBAAoB,GAAG,IAAI;EAC3B,IAAME,GAAG,yKACqE;IAC1EC,IAAI,GAAGC,QAAQ,CAACD,IAAI,IAAIC,QAAQ,CAACC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAChEC,KAAK,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;EAE3CD,KAAK,CAACE,IAAI,GAAG,UAAU;EACvBF,KAAK,CAACG,WAAW,CAACL,QAAQ,CAACM,cAAc,CAACR,GAAG,CAAC,CAAC;EAC/CC,IAAI,CAACM,WAAW,CAACH,KAAK,CAAC;AAC3B,CAAC;AAEDX,KAAK,CAACgB,GAAG,CACL,OAAO,EACP,YAAM;EACFV,kBAAkB,EAAE;EAEpB,IAAMW,KAAK,GAAG,IAAAC,gBAAI,EAAC,OAAO,EAAE,QAAQ,CAAC;EACrC,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT;IAAK,SAAS,EAAC;EAAuB,gBAClC,6BAAC,gBAAS,qBACN,6BAAC,uBAAgB;IAAC,UAAU;EAAA,gBACxB,6BAAC,8BAAuB;IAAC,IAAI,eAAE,6BAAC,gCAAQ;EAAI,EAAG,eAC/C,6BAAC,qBAAc,QAAEF,KAAK,CAAkB,CACzB,eACnB,6BAAC,uBAAgB;IAAC,QAAQ;EAAA,gBACtB,6BAAC,0BAAmB;IAAC,IAAI,eAAE,6BAAC,sCAAa;EAAI,EAAG,eAChD,6BAAC,0BAAmB;IAAC,IAAI,eAAE,6BAAC,qCAAa;EAAI,EAAG,eAChD,6BAAC,0BAAmB;IAAC,IAAI,eAAE,6BAAC,iCAAY;EAAI,EAAG,CAChC,CACX,CACV,CACK,CACX;AAEhB,CAAC,EACD;EACIG,IAAI,EAAE;IACFC,UAAU,EAAE,CACRC,gBAAS,EACTC,uBAAgB,EAChBC,8BAAuB,EACvBC,qBAAc,EACdC,0BAAmB;EAE3B;AACJ,CAAC,CACJ"}

package/TopAppBar/TopAppBarActionItem.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TopAppBarActionItem = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _topAppBar = require("@rmwc/top-app-bar");
-
 var TopAppBarActionItem = function TopAppBarActionItem(props) {
   return /*#__PURE__*/_react.default.createElement(_topAppBar.TopAppBarActionItem, props);
 };
-
 exports.TopAppBarActionItem = TopAppBarActionItem;

package/TopAppBar/TopAppBarActionItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["TopAppBarActionItem","props"],"sources":["TopAppBarActionItem.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    TopAppBarActionItem as RmwcTopAppBarActionItem,\n    TopAppBarActionItemProps as RmwcTopAppBarActionItemProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarActionItemProps = Omit<RmwcTopAppBarActionItemProps, \"onChange\">;\n\nconst TopAppBarActionItem = (props: TopAppBarActionItemProps) => {\n    return <RmwcTopAppBarActionItem {...props} />;\n};\n\nexport { TopAppBarActionItem };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAOA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD,EAAqC;EAC7D,oBAAO,6BAAC,8BAAD,EAA6BA,KAA7B,CAAP;AACH,CAFD"}
+{"version":3,"names":["TopAppBarActionItem","props"],"sources":["TopAppBarActionItem.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    TopAppBarActionItem as RmwcTopAppBarActionItem,\n    TopAppBarActionItemProps as RmwcTopAppBarActionItemProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarActionItemProps = Omit<RmwcTopAppBarActionItemProps, \"onChange\">;\n\nconst TopAppBarActionItem = (props: TopAppBarActionItemProps) => {\n    return <RmwcTopAppBarActionItem {...props} />;\n};\n\nexport { TopAppBarActionItem };\n"],"mappings":";;;;;;;AAAA;AACA;AAOA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,KAA+B,EAAK;EAC7D,oBAAO,6BAAC,8BAAuB,EAAKA,KAAK,CAAI;AACjD,CAAC;AAAC"}