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

package/TopAppBar/TopAppBarTitle.js

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

package/TopAppBar/TopAppBarTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TopAppBarTitle","props","children","rest"],"sources":["TopAppBarTitle.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    TopAppBarTitle as RmwcTopAppBarTitle,\n    TopAppBarTitleProps as RmwcTopAppBarTitleProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarTitleProps = RmwcTopAppBarTitleProps & {\n    /**\n     * Element children\n     */\n    children: React.ReactNode[] | React.ReactNode;\n};\n\nconst TopAppBarTitle = (props: TopAppBarTitleProps) => {\n    const { children, ...rest } = props;\n    return <RmwcTopAppBarTitle {...rest}>{children}</RmwcTopAppBarTitle>;\n};\n\nexport { TopAppBarTitle };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAYA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAgC;EACnD,IAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;EAAA,IAAqBC,IAArB,0CAA8BF,KAA9B;EACA,oBAAO,6BAAC,yBAAD,EAAwBE,IAAxB,EAA+BD,QAA/B,CAAP;AACH,CAHD"}

package/TopAppBar/icons/baseline-autorenew-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/TopAppBar/icons/baseline-cloud_done-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
+</svg>

package/TopAppBar/icons/baseline-delete-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/TopAppBar/icons/baseline-email-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/TopAppBar/icons/baseline-menu-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>

package/TopAppBar/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./TopAppBar";
+export * from "./TopAppBarPrimary";
+export * from "./TopAppBarSecondary";
+export * from "./TopAppBarSection";
+export * from "./TopAppBarTitle";
+export * from "./TopAppBarNavigationIcon";
+export * from "./TopAppBarActionItem";

package/TopAppBar/index.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _TopAppBar = require("./TopAppBar");
+
+Object.keys(_TopAppBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TopAppBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TopAppBar[key];
+    }
+  });
+});
+
+var _TopAppBarPrimary = require("./TopAppBarPrimary");
+
+Object.keys(_TopAppBarPrimary).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TopAppBarPrimary[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TopAppBarPrimary[key];
+    }
+  });
+});
+
+var _TopAppBarSecondary = require("./TopAppBarSecondary");
+
+Object.keys(_TopAppBarSecondary).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TopAppBarSecondary[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TopAppBarSecondary[key];
+    }
+  });
+});
+
+var _TopAppBarSection = require("./TopAppBarSection");
+
+Object.keys(_TopAppBarSection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TopAppBarSection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TopAppBarSection[key];
+    }
+  });
+});
+
+var _TopAppBarTitle = require("./TopAppBarTitle");
+
+Object.keys(_TopAppBarTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TopAppBarTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TopAppBarTitle[key];
+    }
+  });
+});
+
+var _TopAppBarNavigationIcon = require("./TopAppBarNavigationIcon");
+
+Object.keys(_TopAppBarNavigationIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TopAppBarNavigationIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TopAppBarNavigationIcon[key];
+    }
+  });
+});
+
+var _TopAppBarActionItem = require("./TopAppBarActionItem");
+
+Object.keys(_TopAppBarActionItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TopAppBarActionItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TopAppBarActionItem[key];
+    }
+  });
+});

package/TopAppBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./TopAppBar\";\nexport * from \"./TopAppBarPrimary\";\nexport * from \"./TopAppBarSecondary\";\nexport * from \"./TopAppBarSection\";\nexport * from \"./TopAppBarTitle\";\nexport * from \"./TopAppBarNavigationIcon\";\nexport * from \"./TopAppBarActionItem\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/TopProgressBar/README.md

@@ -0,0 +1,11 @@
+# TopProgressBar
+
+### Description
+
+Use `TopProgressBar` to let users know their actions are being processed.
+
+### Import
+
+```js
+import { TopProgressBar } from "@webiny/ui/TopProgressBar";
+```

package/TopProgressBar/TopProgressBar.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import nprogress from "nprogress";
+import "./style.scss";
+export interface TopProgressBarRender {
+    start: () => void;
+    finish: () => void;
+    nprogress: typeof nprogress;
+}
+export interface TopProgressBarProps {
+    /**
+     * Elements that require top loading bar to be shown.
+     */
+    children: (params: TopProgressBarRender) => React.ReactElement;
+}
+export declare const TopProgressBar: (props: TopProgressBarProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/TopProgressBar/TopProgressBar.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopProgressBar = void 0;
+
+var _nprogress = _interopRequireDefault(require("nprogress"));
+
+require("./style.scss");
+
+var TopProgressBar = function TopProgressBar(props) {
+  return props.children({
+    start: _nprogress.default.start,
+    finish: _nprogress.default.done,
+    nprogress: _nprogress.default
+  });
+};
+
+exports.TopProgressBar = TopProgressBar;

package/TopProgressBar/TopProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TopProgressBar","props","children","start","nprogress","finish","done"],"sources":["TopProgressBar.tsx"],"sourcesContent":["import React from \"react\";\nimport nprogress from \"nprogress\";\nimport \"./style.scss\";\n\nexport interface TopProgressBarRender {\n    start: () => void;\n    finish: () => void;\n    nprogress: typeof nprogress;\n}\n\nexport interface TopProgressBarProps {\n    /**\n     * Elements that require top loading bar to be shown.\n     */\n    children: (params: TopProgressBarRender) => React.ReactElement;\n}\n\nexport const TopProgressBar = (props: TopProgressBarProps) => {\n    return props.children({\n        start: nprogress.start,\n        finish: nprogress.done,\n        nprogress\n    });\n};\n"],"mappings":";;;;;;;;;AACA;;AACA;;AAeO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAgC;EAC1D,OAAOA,KAAK,CAACC,QAAN,CAAe;IAClBC,KAAK,EAAEC,kBAAA,CAAUD,KADC;IAElBE,MAAM,EAAED,kBAAA,CAAUE,IAFA;IAGlBF,SAAS,EAATA;EAHkB,CAAf,CAAP;AAKH,CANM"}

package/TopProgressBar/TopProgressBar.stories.d.ts

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

package/TopProgressBar/TopProgressBar.stories.js

@@ -0,0 +1,32 @@
+"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("./../TopProgressBar/README.md"));
+
+var _Button = require("./../Button");
+
+var _TopProgressBar = require("./TopProgressBar");
+
+var story = (0, _react2.storiesOf)("Components/TopProgressBar", 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, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_TopProgressBar.TopProgressBar, null, function (_ref) {
+    var start = _ref.start,
+        finish = _ref.finish;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+      onClick: start
+    }, "Start"), "\xA0", /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+      onClick: finish
+    }, "Done"));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                    <TopProgressBar>\n                        {({start, done}) => (\n                            <React.Fragment>\n                                <ButtonPrimary onClick={start}>Start</ButtonPrimary>\n                                <ButtonPrimary onClick={done}>Done</ButtonPrimary>\n                            </React.Fragment>\n                        )}\n                    </TopProgressBar>\n                    ")));
+}, {
+  info: {
+    propTables: [_TopProgressBar.TopProgressBar]
+  }
+});

package/TopProgressBar/TopProgressBar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","start","finish","info","propTables","TopProgressBar"],"sources":["TopProgressBar.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 \"./../TopProgressBar/README.md\";\nimport { ButtonPrimary } from \"./../Button\";\nimport { TopProgressBar } from \"./TopProgressBar\";\n\nconst story = storiesOf(\"Components/TopProgressBar\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <TopProgressBar>\n                            {({ start, finish }) => (\n                                <React.Fragment>\n                                    <ButtonPrimary onClick={start}>Start</ButtonPrimary>\n                                    &nbsp;\n                                    <ButtonPrimary onClick={finish}>Done</ButtonPrimary>\n                                </React.Fragment>\n                            )}\n                        </TopProgressBar>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                    <TopProgressBar>\n                        {({start, done}) => (\n                            <React.Fragment>\n                                <ButtonPrimary onClick={start}>Start</ButtonPrimary>\n                                <ButtonPrimary onClick={done}>Done</ButtonPrimary>\n                            </React.Fragment>\n                        )}\n                    </TopProgressBar>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [TopProgressBar] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,2BAAV,EAAuCC,MAAvC,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,8BAAD,QACK;IAAA,IAAGC,KAAH,QAAGA,KAAH;IAAA,IAAUC,MAAV,QAAUA,MAAV;IAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,qBAAD;MAAe,OAAO,EAAED;IAAxB,WADJ,uBAGI,6BAAC,qBAAD;MAAe,OAAO,EAAEC;IAAxB,UAHJ,CADH;EAAA,CADL,CADJ,CADJ,eAYI,6BAAC,uBAAD,gcAZJ,CAFJ,CADJ;AA8BH,CAjCL,EAkCI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,8BAAD;EAAd;AAAR,CAlCJ"}

package/TopProgressBar/hoc/index.d.ts

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

package/TopProgressBar/hoc/index.js

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

package/TopProgressBar/hoc/index.js.map

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

package/TopProgressBar/hoc/withTopProgressBar.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const withTopProgressBar: () => (BaseComponent: React.ComponentType<any>) => (props: any) => JSX.Element;
+export default withTopProgressBar;

package/TopProgressBar/hoc/withTopProgressBar.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var withTopProgressBar = function withTopProgressBar() {
+  return function (BaseComponent) {
+    var WithTopProgressBar = function WithTopProgressBar(props) {
+      return /*#__PURE__*/_react.default.createElement(_.TopProgressBar, null, function (_ref) {
+        var start = _ref.start,
+            finish = _ref.finish,
+            nprogress = _ref.nprogress;
+        return /*#__PURE__*/_react.default.createElement(BaseComponent, Object.assign({}, props, {
+          startTopProgressBar: start,
+          finishTopProgressBar: finish,
+          nprogress: nprogress
+        }));
+      });
+    };
+
+    return WithTopProgressBar;
+  };
+};
+
+var _default = withTopProgressBar;
+exports.default = _default;

package/TopProgressBar/hoc/withTopProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["withTopProgressBar","BaseComponent","WithTopProgressBar","props","start","finish","nprogress"],"sources":["withTopProgressBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { TopProgressBar } from \"..\";\n\nconst withTopProgressBar = () => {\n    return (BaseComponent: React.ComponentType<any>) => {\n        const WithTopProgressBar = (props: any) => {\n            return (\n                <TopProgressBar>\n                    {({ start, finish, nprogress }) => (\n                        <BaseComponent\n                            {...props}\n                            startTopProgressBar={start}\n                            finishTopProgressBar={finish}\n                            nprogress={nprogress}\n                        />\n                    )}\n                </TopProgressBar>\n            );\n        };\n\n        return WithTopProgressBar;\n    };\n};\n\nexport default withTopProgressBar;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;EAC7B,OAAO,UAACC,aAAD,EAA6C;IAChD,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgB;MACvC,oBACI,6BAAC,gBAAD,QACK;QAAA,IAAGC,KAAH,QAAGA,KAAH;QAAA,IAAUC,MAAV,QAAUA,MAAV;QAAA,IAAkBC,SAAlB,QAAkBA,SAAlB;QAAA,oBACG,6BAAC,aAAD,oBACQH,KADR;UAEI,mBAAmB,EAAEC,KAFzB;UAGI,oBAAoB,EAAEC,MAH1B;UAII,SAAS,EAAEC;QAJf,GADH;MAAA,CADL,CADJ;IAYH,CAbD;;IAeA,OAAOJ,kBAAP;EACH,CAjBD;AAkBH,CAnBD;;eAqBeF,kB"}

package/TopProgressBar/index.d.ts

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

package/TopProgressBar/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _TopProgressBar = require("./TopProgressBar");
+
+Object.keys(_TopProgressBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TopProgressBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TopProgressBar[key];
+    }
+  });
+});

package/TopProgressBar/index.js.map

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

package/TopProgressBar/style.scss

@@ -0,0 +1,21 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: var(--mdc-theme-secondary);
+
+  position: fixed;
+  z-index: 1031;
+  top: 64px;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: none;
+}

package/Typography/README.md

@@ -0,0 +1,15 @@
+# Typography
+
+### Design
+
+<a href="https://material.io/design/typography/the-type-system.html" target="_blank">https://material.io/design/typography/the-type-system.html</a>
+
+### Description
+
+`Typography` component is used to represent different text sizes and styles.
+
+### Import
+
+```js
+import { Typography } from "@webiny/ui/Typography";
+```

package/Typography/Typography.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { TypographyProps as RmwcTypographyProps } from "@rmwc/typography";
+interface TypographyProps extends RmwcTypographyProps {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    tag?: string;
+}
+/**
+ * Use Ripple component to display a list of choices, once the handler is triggered.
+ */
+declare const Typography: React.FC<TypographyProps>;
+export { Typography, TypographyProps };

package/Typography/Typography.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Typography = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _typography = require("@rmwc/typography");
+
+/**
+ * Use Ripple component to display a list of choices, once the handler is triggered.
+ */
+var Typography = function Typography(props) {
+  return /*#__PURE__*/_react.default.createElement(_typography.Typography, props, props.children);
+};
+
+exports.Typography = Typography;

package/Typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Typography","props","children"],"sources":["Typography.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Typography as RwmcTypography,\n    TypographyProps as RmwcTypographyProps\n} from \"@rmwc/typography\";\n\ninterface TypographyProps extends RmwcTypographyProps {\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    tag?: string;\n}\n\n/**\n * Use Ripple component to display a list of choices, once the handler is triggered.\n */\nconst Typography: React.FC<TypographyProps> = props => {\n    return <RwmcTypography {...props}>{props.children}</RwmcTypography>;\n};\n\nexport { Typography, TypographyProps };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAYA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,oBAAO,6BAAC,sBAAD,EAAoBA,KAApB,EAA4BA,KAAK,CAACC,QAAlC,CAAP;AACH,CAFD"}

package/Typography/Typography.stories.d.ts

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

package/Typography/Typography.stories.js

@@ -0,0 +1,76 @@
+"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("./README.md"));
+
+var _Typography = require("./Typography");
+
+var story = (0, _react2.storiesOf)("Components/Typography", 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: "Typography styles"
+  }, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline1"
+  }, "headline1")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline2"
+  }, "headline2")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline3"
+  }, "headline3")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline4"
+  }, "headline4")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline5"
+  }, "headline5")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline6"
+  }, "headline6")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "subtitle1"
+  }, "subtitle1")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "subtitle2"
+  }, "subtitle2")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body1"
+  }, "body1")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body2"
+  }, "body2")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "caption"
+  }, "caption")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "button"
+  }, "button")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "overline"
+  }, "overline")))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline1"
+  }, "headline1"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline2"
+  }, "headline2"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline3"
+  }, "headline3"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline4"
+  }, "headline4"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline5"
+  }, "headline5"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline6"
+  }, "headline6"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "subtitle1"
+  }, "subtitle1"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "subtitle2"
+  }, "subtitle2"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body1"
+  }, "body1"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body2"
+  }, "body2"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "caption"
+  }, "caption"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "button"
+  }, "button"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "overline"
+  }, "overline")))));
+}, {
+  info: {
+    propTables: [_Typography.Typography]
+  }
+});

package/Typography/Typography.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Typography"],"sources":["Typography.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\";\n\nimport readme from \"./README.md\";\nimport { Typography } from \"./Typography\";\n\nconst story = storiesOf(\"Components/Typography\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Typography styles\"}>\n                    <StorySandboxExample>\n                        <ul>\n                            <li>\n                                <Typography use=\"headline1\">headline1</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"headline2\">headline2</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"headline3\">headline3</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"headline4\">headline4</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"headline5\">headline5</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"headline6\">headline6</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"subtitle1\">subtitle1</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"subtitle2\">subtitle2</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"body1\">body1</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"body2\">body2</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"caption\">caption</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"button\">button</Typography>\n                            </li>\n                            <li>\n                                <Typography use=\"overline\">overline</Typography>\n                            </li>\n                        </ul>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <div>\n                            <Typography use=\"headline1\">headline1</Typography>\n                            <Typography use=\"headline2\">headline2</Typography>\n                            <Typography use=\"headline3\">headline3</Typography>\n                            <Typography use=\"headline4\">headline4</Typography>\n                            <Typography use=\"headline5\">headline5</Typography>\n                            <Typography use=\"headline6\">headline6</Typography>\n                            <Typography use=\"subtitle1\">subtitle1</Typography>\n                            <Typography use=\"subtitle2\">subtitle2</Typography>\n                            <Typography use=\"body1\">body1</Typography>\n                            <Typography use=\"body2\">body2</Typography>\n                            <Typography use=\"caption\">caption</Typography>\n                            <Typography use=\"button\">button</Typography>\n                            <Typography use=\"overline\">overline</Typography>\n                        </div>\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Typography] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAQA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,uBAAV,EAAmCC,MAAnC,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,0BAAD,qBACI,sDACI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eADJ,CADJ,eAII,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eADJ,CAJJ,eAOI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eADJ,CAPJ,eAUI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eADJ,CAVJ,eAaI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eADJ,CAbJ,eAgBI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eADJ,CAhBJ,eAmBI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eADJ,CAnBJ,eAsBI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eADJ,CAtBJ,eAyBI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,WADJ,CAzBJ,eA4BI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,WADJ,CA5BJ,eA+BI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,aADJ,CA/BJ,eAkCI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,YADJ,CAlCJ,eAqCI,sDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,cADJ,CArCJ,CADJ,CADJ,eA4CI,6BAAC,uBAAD,qBACI,uDACI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eADJ,eAEI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eAFJ,eAGI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eAHJ,eAII,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eAJJ,eAKI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eALJ,eAMI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eANJ,eAOI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eAPJ,eAQI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,eARJ,eASI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,WATJ,eAUI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,WAVJ,eAWI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,aAXJ,eAYI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,YAZJ,eAaI,6BAAC,sBAAD;IAAY,GAAG,EAAC;EAAhB,cAbJ,CADJ,CA5CJ,CAFJ,CADJ;AAmEH,CAtEL,EAuEI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,sBAAD;EAAd;AAAR,CAvEJ"}

package/Typography/index.d.ts

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

package/Typography/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Typography = require("./Typography");
+
+Object.keys(_Typography).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Typography[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Typography[key];
+    }
+  });
+});

package/Typography/index.js.map

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