@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/Tooltip/Tooltip.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import "rc-tooltip/assets/bootstrap_white.css";
+import "./style.scss";
+declare type TooltipPropsContent = (() => React.ReactChild) | React.ReactChild | React.ReactFragment | React.ReactPortal;
+export interface TooltipProps {
+    children: React.ReactNode;
+    content: TooltipPropsContent;
+    trigger?: string;
+    placement?: "left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+    className?: string;
+}
+interface State {
+    tooltipIsOpen: boolean;
+}
+/**
+ * Use Tooltip component to display a list of choices, once the handler is triggered.
+ */
+declare class Tooltip extends React.Component<TooltipProps, State> {
+    state: {
+        tooltipIsOpen: boolean;
+    };
+    onVisibleChange: (visible?: boolean) => void;
+    render(): JSX.Element;
+}
+export { Tooltip };

package/Tooltip/Tooltip.js

@@ -0,0 +1,79 @@
+"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
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onVisibleChange", function (visible) {
+      _this.setState({
+        tooltipIsOpen: visible || false
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(Tooltip, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_rcTooltip.default
+      /**
+       * rc-tooltip types do not have animation as prop, but the rc-tooltip lib has.
+       */
+      // @ts-ignore
+      , Object.assign({
+        animation: "fade",
+        onVisibleChange: this.onVisibleChange,
+        overlay: this.props.content
+      }, this.props), /*#__PURE__*/_react.default.createElement("span", {
+        className: "webiny-ui-tooltip tooltip-content-wrapper"
+      }, this.props.children));
+    }
+  }]);
+  return Tooltip;
+}(_react.default.Component);
+
+exports.Tooltip = Tooltip;

package/Tooltip/Tooltip.js.map

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

package/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Tooltip/Tooltip.stories.js

@@ -0,0 +1,26 @@
+"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, {
+    title: "A simple tooltip, triggered with a button"
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    content: /*#__PURE__*/_react.default.createElement("span", null, "This is a tooltip.")
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Hover to see additional information."))));
+}, {
+  info: {
+    propTables: [_Tooltip.Tooltip]
+  }
+});

package/Tooltip/Tooltip.stories.js.map

@@ -0,0 +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;EAAlB,gBACI,kFADJ,CADJ,CAFJ,CADJ;AAUH,CAbL,EAcI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,gBAAD;EAAd;AAAR,CAdJ"}

package/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tooltip";

package/Tooltip/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+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;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tooltip[key];
+    }
+  });
+});

package/Tooltip/index.js.map

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

package/Tooltip/style.scss

@@ -0,0 +1,97 @@
+// Ensures we have a "solid" child for the tooltip.
+// Will take height / width of its child element, making it easier for the tooltip to be applied.
+.tooltip-content-wrapper {
+  display: inline-block;
+}
+
+.rc-tooltip {
+  opacity: 1;
+  max-width: 250px;
+}
+
+.rc-tooltip-arrow {
+  //display: none;
+}
+
+.rc-tooltip-placement-top .rc-tooltip-arrow,
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  border-top-color: var(--mdc-theme-secondary);
+}
+
+.rc-tooltip-placement-right .rc-tooltip-arrow,
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  border-right-color: var(--mdc-theme-secondary);
+}
+
+.rc-tooltip-placement-left .rc-tooltip-arrow,
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  border-left-color: var(--mdc-theme-secondary);
+}
+
+.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  border-bottom-color: var(--mdc-theme-secondary);
+}
+
+.rc-tooltip-inner {
+  min-height: auto;
+  background-color: var(--mdc-theme-secondary);
+  border: none;
+  color: var(--mdc-theme-on-secondary);
+  border-radius: 0;
+
+  font-family: var(--mdc-typography-font-family);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-size: 0.75rem;
+  line-height: 125%;
+  font-weight: 500;
+  letter-spacing: 0.16667em;
+  text-decoration: none;
+  text-transform: uppercase;
+  text-align: center;
+  font-weight: 600;
+}
+
+.rc-tooltip.rc-tooltip-fade-enter {
+  display: block;
+  opacity: 0;
+}
+
+.rc-tooltip.rc-tooltip-fade-enter.rc-tooltip-fade-enter-active {
+  opacity: 1;
+  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  transition: opacity 0.2s;
+}
+
+.rc-tooltip.rc-tooltip-fade-leave {
+  opacity: 0;
+}
+
+.rc-tooltip.rc-tooltip-fade-enter.rc-tooltip-fade-lave-active {
+  opacity: 0;
+  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  transition: opacity 0.2s;
+}
+
+.example-enter {
+  opacity: 0.01;
+}
+
+.example-enter.example-enter-active {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
+}
+
+.example-leave {
+  opacity: 1;
+}
+
+.example-leave.example-leave-active {
+  opacity: 0.01;
+  transition: opacity 300ms ease-in;
+}

package/TopAppBar/README.md

@@ -0,0 +1,20 @@
+# TopAppBar
+
+### Design
+
+<a href="https://material.io/design/components/app-bars-top.html" target="_blank">https://material.io/design/components/app-bars-top.html</a>
+
+### Description
+
+Use `TopAppBar` component to display title, navigation or additional actions for your app.
+
+### Import
+
+```js
+import {
+  TopAppBar,
+  TopAppBarSection,
+  TopAppBarActionItem,
+  TopAppBarTitle
+} from "@webiny/ui/TopAppBar";
+```

package/TopAppBar/TopAppBar.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { TopAppBarProps as RmwcTopAppBarProps } from "@rmwc/top-app-bar";
+export declare type TopAppBarProps = RmwcTopAppBarProps & {
+    /**
+     * Element children
+     */
+    children: React.ReactNode[] | React.ReactNode;
+    /**
+     * CSS class name
+     */
+    className?: string;
+    /**
+     * Style object
+     */
+    style?: React.CSSProperties;
+};
+declare const TopAppBar: (props: TopAppBarProps) => JSX.Element;
+export { TopAppBar };

package/TopAppBar/TopAppBar.js

@@ -0,0 +1,24 @@
+"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);
+  return /*#__PURE__*/_react.default.createElement(_topAppBar.TopAppBar, rest, /*#__PURE__*/_react.default.createElement(_topAppBar.TopAppBarRow, null, children));
+};
+
+exports.TopAppBar = TopAppBar;

package/TopAppBar/TopAppBar.js.map

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

package/TopAppBar/TopAppBar.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/TopAppBar/TopAppBar.stories.js

@@ -0,0 +1,70 @@
+"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");
+  style.type = "text/css";
+  style.appendChild(document.createTextNode(css));
+  head.appendChild(style);
+};
+
+story.add("usage", function () {
+  appendCssOverrides();
+  var title = (0, _addonKnobs.text)("title", "Webiny");
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "top-app-bar-storybook"
+  }, /*#__PURE__*/_react.default.createElement(_index.TopAppBar, null, /*#__PURE__*/_react.default.createElement(_index.TopAppBarSection, {
+    alignStart: true
+  }, /*#__PURE__*/_react.default.createElement(_index.TopAppBarNavigationIcon, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineMenu24px.ReactComponent, null)
+  }), /*#__PURE__*/_react.default.createElement(_index.TopAppBarTitle, null, title)), /*#__PURE__*/_react.default.createElement(_index.TopAppBarSection, {
+    alignEnd: true
+  }, /*#__PURE__*/_react.default.createElement(_index.TopAppBarActionItem, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineCloud_done24px.ReactComponent, null)
+  }), /*#__PURE__*/_react.default.createElement(_index.TopAppBarActionItem, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineAutorenew24px.ReactComponent, null)
+  }), /*#__PURE__*/_react.default.createElement(_index.TopAppBarActionItem, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineEmail24px.ReactComponent, null)
+  }))))));
+}, {
+  info: {
+    propTables: [_index.TopAppBar, _index.TopAppBarSection, _index.TopAppBarNavigationIcon, _index.TopAppBarTitle, _index.TopAppBarActionItem]
+  }
+});

package/TopAppBar/TopAppBar.stories.js.map

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

package/TopAppBar/TopAppBarActionItem.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TopAppBarActionItemProps as RmwcTopAppBarActionItemProps } from "@rmwc/top-app-bar";
+export declare type TopAppBarActionItemProps = Omit<RmwcTopAppBarActionItemProps, "onChange">;
+declare const TopAppBarActionItem: (props: TopAppBarActionItemProps) => JSX.Element;
+export { TopAppBarActionItem };

package/TopAppBar/TopAppBarActionItem.js

@@ -0,0 +1,18 @@
+"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

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

package/TopAppBar/TopAppBarNavigationIcon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TopAppBarNavigationIconProps as RmwcTopAppBarNavigationIconProps } from "@rmwc/top-app-bar";
+export declare type TopAppBarNavigationIconProps = Omit<RmwcTopAppBarNavigationIconProps, "onChange">;
+declare const TopAppBarNavigationIcon: (props: TopAppBarNavigationIconProps) => JSX.Element;
+export { TopAppBarNavigationIcon };

package/TopAppBar/TopAppBarNavigationIcon.js

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

package/TopAppBar/TopAppBarNavigationIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TopAppBarNavigationIcon","props"],"sources":["TopAppBarNavigationIcon.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    TopAppBarNavigationIcon as RmwcTopAppBarNavigationIcon,\n    TopAppBarNavigationIconProps as RmwcTopAppBarNavigationIconProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarNavigationIconProps = Omit<RmwcTopAppBarNavigationIconProps, \"onChange\">;\n\nconst TopAppBarNavigationIcon = (props: TopAppBarNavigationIconProps) => {\n    return <RmwcTopAppBarNavigationIcon {...props} />;\n};\n\nexport { TopAppBarNavigationIcon };\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAOA,IAAMA,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,KAAD,EAAyC;EACrE,oBAAO,6BAAC,kCAAD,EAAiCA,KAAjC,CAAP;AACH,CAFD"}

package/TopAppBar/TopAppBarPrimary.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TopAppBarProps } from "./TopAppBar";
+export declare type TopAppBarPrimaryProps = TopAppBarProps;
+declare const TopAppBarPrimary: (props: TopAppBarPrimaryProps) => JSX.Element;
+export { TopAppBarPrimary };

package/TopAppBar/TopAppBarPrimary.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopAppBarPrimary = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TopAppBar = require("./TopAppBar");
+
+var _excluded = ["children"];
+
+var TopAppBarPrimary = function TopAppBarPrimary(props) {
+  var children = props.children,
+      other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBar, Object.assign({}, other, {
+    className: "primary"
+  }), children);
+};
+
+exports.TopAppBarPrimary = TopAppBarPrimary;

package/TopAppBar/TopAppBarPrimary.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TopAppBarPrimary","props","children","other"],"sources":["TopAppBarPrimary.tsx"],"sourcesContent":["import React from \"react\";\nimport { TopAppBar, TopAppBarProps } from \"./TopAppBar\";\n\nexport type TopAppBarPrimaryProps = TopAppBarProps;\n\nconst TopAppBarPrimary = (props: TopAppBarPrimaryProps) => {\n    const { children, ...other } = props;\n    return (\n        <TopAppBar {...other} className={\"primary\"}>\n            {children}\n        </TopAppBar>\n    );\n};\n\nexport { TopAppBarPrimary };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAIA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAkC;EACvD,IAAQC,QAAR,GAA+BD,KAA/B,CAAQC,QAAR;EAAA,IAAqBC,KAArB,0CAA+BF,KAA/B;EACA,oBACI,6BAAC,oBAAD,oBAAeE,KAAf;IAAsB,SAAS,EAAE;EAAjC,IACKD,QADL,CADJ;AAKH,CAPD"}

package/TopAppBar/TopAppBarSecondary.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TopAppBarProps } from "./TopAppBar";
+export declare type TopAppBarSecondaryProps = TopAppBarProps;
+declare const TopAppBarSecondary: (props: TopAppBarSecondaryProps) => JSX.Element;
+export { TopAppBarSecondary };

package/TopAppBar/TopAppBarSecondary.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopAppBarSecondary = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TopAppBar = require("./TopAppBar");
+
+var _excluded = ["style", "children"];
+
+var TopAppBarSecondary = function TopAppBarSecondary(props) {
+  var _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      children = props.children,
+      other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBar, Object.assign({}, other, {
+    style: style
+  }), children);
+};
+
+exports.TopAppBarSecondary = TopAppBarSecondary;

package/TopAppBar/TopAppBarSecondary.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TopAppBarSecondary","props","style","children","other"],"sources":["TopAppBarSecondary.tsx"],"sourcesContent":["import React from \"react\";\nimport { TopAppBar, TopAppBarProps } from \"./TopAppBar\";\n\nexport type TopAppBarSecondaryProps = TopAppBarProps;\n\nconst TopAppBarSecondary = (props: TopAppBarSecondaryProps) => {\n    const { style = {}, children, ...other } = props;\n    return (\n        <TopAppBar {...other} style={style}>\n            {children}\n        </TopAppBar>\n    );\n};\n\nexport { TopAppBarSecondary };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAIA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAoC;EAC3D,mBAA2CA,KAA3C,CAAQC,KAAR;EAAA,IAAQA,KAAR,6BAAgB,EAAhB;EAAA,IAAoBC,QAApB,GAA2CF,KAA3C,CAAoBE,QAApB;EAAA,IAAiCC,KAAjC,0CAA2CH,KAA3C;EACA,oBACI,6BAAC,oBAAD,oBAAeG,KAAf;IAAsB,KAAK,EAAEF;EAA7B,IACKC,QADL,CADJ;AAKH,CAPD"}

package/TopAppBar/TopAppBarSection.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { TopAppBarSectionProps as RmwcTopAppBarSectionProps } from "@rmwc/top-app-bar";
+export declare type TopAppBarSectionProps = RmwcTopAppBarSectionProps & {
+    /**
+     * Element children
+     */
+    children: React.ReactNode[] | React.ReactNode;
+    /**
+     * Style object.
+     */
+    style?: React.CSSProperties;
+    /**
+     * CSS class name.
+     */
+    className?: string;
+};
+declare const TopAppBarSection: (props: TopAppBarSectionProps) => JSX.Element;
+export { TopAppBarSection };

package/TopAppBar/TopAppBarSection.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopAppBarSection = 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 TopAppBarSection = function TopAppBarSection(props) {
+  var children = props.children,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_topAppBar.TopAppBarSection, rest, children);
+};
+
+exports.TopAppBarSection = TopAppBarSection;

package/TopAppBar/TopAppBarSection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TopAppBarSection","props","children","rest"],"sources":["TopAppBarSection.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    TopAppBarSection as RmwcTopAppBarSection,\n    TopAppBarSectionProps as RmwcTopAppBarSectionProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarSectionProps = RmwcTopAppBarSectionProps & {\n    /**\n     * Element children\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    /**\n     * Style object.\n     */\n    style?: React.CSSProperties;\n\n    /**\n     * CSS class name.\n     */\n    className?: string;\n};\n\nconst TopAppBarSection = (props: TopAppBarSectionProps) => {\n    const { children, ...rest } = props;\n    return <RmwcTopAppBarSection {...rest}>{children}</RmwcTopAppBarSection>;\n};\n\nexport { TopAppBarSection };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAsBA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAkC;EACvD,IAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;EAAA,IAAqBC,IAArB,0CAA8BF,KAA9B;EACA,oBAAO,6BAAC,2BAAD,EAA0BE,IAA1B,EAAiCD,QAAjC,CAAP;AACH,CAHD"}

package/TopAppBar/TopAppBarTitle.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { TopAppBarTitleProps as RmwcTopAppBarTitleProps } from "@rmwc/top-app-bar";
+export declare type TopAppBarTitleProps = RmwcTopAppBarTitleProps & {
+    /**
+     * Element children
+     */
+    children: React.ReactNode[] | React.ReactNode;
+};
+declare const TopAppBarTitle: (props: TopAppBarTitleProps) => JSX.Element;
+export { TopAppBarTitle };