@cashub/ui 0.27.1 → 0.29.0

package/assets/css/global.css

@@ -1,3 +1,2 @@
 @import './font.css';
-@import './normalize.css';
 @import './autocomplete.css';

package/index.js

@@ -295,6 +295,18 @@ Object.keys(_jsoneditor).forEach(function (key) {
     }
   });
 });
+var _layout = require("./layout");
+Object.keys(_layout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _layout[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _layout[key];
+    }
+  });
+});
 var _link = require("./link");
 Object.keys(_link).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -331,6 +343,18 @@ Object.keys(_modal).forEach(function (key) {
     }
   });
 });
+var _page = require("./page");
+Object.keys(_page).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _page[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _page[key];
+    }
+  });
+});
 var _paginate = require("./paginate");
 Object.keys(_paginate).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/layout/Aside.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _header = _interopRequireDefault(require("../styles/config/header.style"));
+var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _bgAside = _interopRequireDefault(require("../assets/images/bg-aside.png"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const Aside = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n\n  padding-top: var(--spacing-s);\n  height: calc(100vh - ", " - var(--spacing));\n  background: url(", "), var(--color-background2);\n  background-size: 356px 436px;\n  background-repeat: no-repeat;\n  background-position: bottom;\n  border-top-right-radius: var(--border-radius);\n  position: fixed;\n  top: calc(", " + var(--spacing));\n  transition: width 0.2s;\n  z-index: 60;\n\n  ", ";\n"])), _ref => {
+  let {
+    $display
+  } = _ref;
+  return $display ? "".concat(_sidebar.default.open.width) : "".concat(_sidebar.default.close.width);
+}, _header.default.height, _bgAside.default, _header.default.height, _media.default.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 100%;\n    top: 0;\n    padding-top:0;\n    border-top-right-radius:0;\n    left: 0;\n    box-shadow: var(--box-shadow);\n    \n    ", "\n  "])), props => props.$display === false && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        left: -", ";\n      "])), _sidebar.default.open.width)));
+var _default = exports.default = Aside;

package/layout/AsideHeader.jsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import media from '../styles/mixin/media';
+import Logo from './Logo';
+import MenuIcon from './MenuIcon';
+
+const AsideHeader = ({ theme, toggleSidebar }) => {
+  return (
+    <Brand>
+      <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />
+      <Logo />
+    </Brand>
+  );
+};
+
+const Brand = styled.div`
+  display: none;
+  height: ${headerStyle.height};
+
+  ${media.tablet`
+    padding: 0 var(--spacing-xs);
+    align-items: center;
+    display: flex
+  `};
+`;
+
+export default AsideHeader;

package/layout/Backdrop.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _backdrop = require("../backdrop");
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const Backdrop = (0, _styledComponents.default)(_backdrop.BaseBackdrop)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: hidden;\n\n  ", "\n"])), _media.default.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    visibility: ", ";\n  "])), _ref => {
+  let {
+    $display
+  } = _ref;
+  return $display === true ? 'visible' : 'hidden';
+}));
+var _default = exports.default = Backdrop;

package/layout/Container.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _header = _interopRequireDefault(require("../styles/config/header.style"));
+var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: 0.3s;\n  width: calc(100% - ", ");\n  margin-left: ", ";\n  padding: calc(", " + var(--spacing)) var(--spacing)\n    var(--spacing);\n\n  ", "\n\n  ", "\n"])), _sidebar.default.close.width, _sidebar.default.close.width, _header.default.height, _ref => {
+  let {
+    $display
+  } = _ref;
+  return $display === true && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      width: calc(100% - ", ");\n      margin-left: ", ";\n    "])), _sidebar.default.open.width, _sidebar.default.open.width);
+}, _media.default.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    margin-left: 0;\n  "]))));
+var _default = exports.default = Container;

package/layout/Footer.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
+var _media = _interopRequireDefault(require("../styles/mixin/media"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const Footer = _styledComponents.default.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: 0.3s;\n  border-top: var(--border-width) solid var(--border-color);\n  color: var(--font-on-mute);\n  height: 64px;\n  line-height: 64px;\n  font-size: var(--font-body2);\n  padding: 0 var(--spacing);\n\n  ", "\n\n  ", "\n"])), _ref => {
+  let {
+    hasSidebar
+  } = _ref;
+  return hasSidebar === true && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin: 0 var(--spacing) 0 calc(var(--spacing) + ", ");\n\n      ", "\n    "])), _sidebar.default.close.width, _media.default.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin:0 ;\n      "]))));
+}, _ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      margin: 0 var(--spacing) 0\n        calc(var(--spacing) + ", ");\n    "])), _sidebar.default.open.width);
+});
+var _default = exports.default = Footer;

package/layout/Header.jsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import media from '../styles/mixin/media';
+import MenuIcon from './MenuIcon';
+import Logo from './Logo';
+
+const Header = ({ theme, logo, hasSidebar, toggleSidebar, children }) => {
+  return (
+    <>
+      <Wrapper>
+        <Brand>
+          {hasSidebar && (
+            <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />
+          )}
+          {logo && <Logo src={logo} />}
+        </Brand>
+        <Topbar>{children}</Topbar>
+      </Wrapper>
+    </>
+  );
+};
+
+const Wrapper = styled.header`
+  background: var(--color-background2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  z-index: 40;
+  width: 100%;
+  height: ${headerStyle.height};
+  padding: 0 calc(var(--spacing-s) + 0.25rem) 0 var(--spacing-s);
+
+  ${media.tablet`
+    padding: 0 var(--spacing-s) 0 calc(var(--spacing-s) - 0.25rem);
+  `}
+`;
+
+const Brand = styled.div`
+  display: flex;
+
+  > * {
+    flex: none;
+  }
+`;
+
+const Topbar = styled.div`
+  display: flex;
+
+  > *:not(:last-child) {
+    margin-right: calc(var(--spacing) - 0.5rem);
+  }
+`;
+
+export default Header;

package/layout/Layout.jsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { ScrollToTopButton } from '../button';
+import Header from './Header';
+import Container from './Container';
+import Footer from './Footer';
+import Sidebar from './Sidebar';
+import Backdrop from './Backdrop';
+
+const Layout = ({
+  mode,
+  theme,
+  logo,
+  headerContent,
+  navContent,
+  footerContent,
+  children,
+}) => {
+  const [display, setDisplay] = useState(!!navContent);
+
+  const toggleSidebar = () => {
+    setDisplay(!display);
+  };
+
+  // hide sidebar
+  useEffect(() => {
+    if (mode === 'tablet') {
+      setDisplay(false);
+    }
+  }, [mode, setDisplay]);
+
+  return (
+    <Wrapper>
+      <Header
+        theme={theme}
+        logo={logo}
+        hasSidebar={!!navContent}
+        toggleSidebar={toggleSidebar}
+      >
+        {headerContent}
+      </Header>
+
+      <Main>
+        <Backdrop $display={display} onClick={toggleSidebar} />
+
+        {navContent && (
+          <Sidebar
+            theme={theme}
+            $display={display}
+            toggleSidebar={toggleSidebar}
+          >
+            {navContent}
+          </Sidebar>
+        )}
+
+        <Container $display={display}>{children}</Container>
+
+        <ScrollToTopButton />
+      </Main>
+
+      <Footer hasSidebar={!!navContent} $display={display}>
+        {footerContent}
+      </Footer>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+`;
+
+const Main = styled.div`
+  display: flex;
+  flex: 1;
+  position: relative;
+`;
+
+export default Layout;

package/layout/Logo.jsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { ImageFluid } from '../image';
+
+const Logo = ({ src }) => {
+  return (
+    <Figure>
+      <ImageFluid src={src} alt='CasHUB logo' />
+    </Figure>
+  );
+};
+
+const Figure = styled.figure`
+  max-width: 220px;
+  height: 40px;
+`;
+
+export default Logo;

package/layout/MenuIcon.jsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { ImageFluid } from '../image';
+import { IconFigure } from '../figure';
+import { IconButton } from '../button';
+import burgerWhite from '../assets/icons/burger-white.png';
+import burgerBlack from '../assets/icons/burger-black.png';
+
+const MenuIcon = ({ theme, toggleSidebar }) => {
+  return (
+    <Wrapper onClick={toggleSidebar}>
+      <IconFigure>
+        <ImageFluid
+          crossOrigin='anonymous'
+          src={theme === 'Dark' ? burgerWhite : burgerBlack}
+          alt='Sidebar toggler'
+        />
+      </IconFigure>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(IconButton)`
+  margin: 0;
+  margin-right: calc(var(--spacing) - 0.5rem);
+`;
+
+export default MenuIcon;

package/layout/Sidebar.jsx

@@ -0,0 +1,229 @@
+import { useEffect, useState, useRef } from 'react';
+import { FaCaretRight } from 'react-icons/fa';
+import { Link, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import styled, { css } from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import media from '../styles/mixin/media';
+import scrollbar from '../styles/mixin/scrollbar';
+import Aside from './Aside';
+import AsideHeader from './AsideHeader';
+
+const Sidebar = ({ theme, $display, toggleSidebar, children }) => {
+  const location = useLocation();
+  const sidebarRef = useRef(null);
+  const [hoverDisplay, setHoverDisplay] = useState(false);
+
+  const nowPath = (path) => {
+    return location.pathname.includes(path);
+  };
+
+  const handleMouseOver = () => {
+    if ($display === true) {
+      return;
+    }
+
+    setHoverDisplay(true);
+  };
+
+  const handleMouseOut = (event) => {
+    if ($display === true) {
+      return;
+    }
+
+    if (sidebarRef.current.contains(event.relatedTarget)) {
+      return;
+    }
+
+    setHoverDisplay(false);
+  };
+
+  return (
+    <>
+      <Aside
+        ref={sidebarRef}
+        $display={$display || hoverDisplay}
+        onMouseOver={handleMouseOver}
+        onMouseOut={handleMouseOut}
+      >
+        <AsideHeader theme={theme} toggleSidebar={toggleSidebar} />
+        <Menu>
+          {children.map((prop, key) => {
+            if (prop.parent === true) {
+              return (
+                <MenuListWithSubMenu
+                  {...prop}
+                  active={nowPath(prop.path)}
+                  currentPath={location.pathname}
+                  key={key}
+                  $display={$display}
+                  hoverDisplay={hoverDisplay}
+                />
+              );
+            }
+
+            return <MenuList {...prop} active={nowPath(prop.path)} key={key} />;
+          })}
+        </Menu>
+      </Aside>
+    </>
+  );
+};
+
+const MenuList = ({ path, name, icon, active }) => {
+  const { t: trans } = useTranslation();
+
+  return (
+    <MenuItem active={active}>
+      <MenuItemLink to={path}>
+        <img
+          crossOrigin='anonymous'
+          src={icon}
+          alt={`${name} icon`}
+          width='24px'
+        />
+        <span>{trans(name)}</span>
+      </MenuItemLink>
+    </MenuItem>
+  );
+};
+
+const MenuListWithSubMenu = ({
+  path,
+  name,
+  icon,
+  child,
+  active,
+  currentPath,
+  $display,
+  hoverDisplay,
+}) => {
+  const { t: trans } = useTranslation();
+  const [open, setOpen] = useState(active);
+
+  const toggleOpen = () => {
+    setOpen(!open);
+  };
+
+  useEffect(() => {
+    $display === false && hoverDisplay === false && setOpen(false);
+  }, [$display, hoverDisplay]);
+
+  return (
+    <>
+      <MenuItem onClick={toggleOpen}>
+        <MenuItemButton as='button' open={open}>
+          <img crossOrigin='anonymous' src={icon} alt={`${name} icon`} />
+          <span>{trans(name)}</span>
+          <span className='arrow' role='presentation' aria-hidden='true'>
+            <FaCaretRight />
+          </span>
+        </MenuItemButton>
+      </MenuItem>
+      <SubMenu open={open}>
+        {child
+          .filter((prop) => prop.name)
+          .map((prop, key) => {
+            const href = `${path}${prop.path}`;
+            const active = currentPath.includes(prop.path);
+
+            return (
+              <SubMenuItem key={key} active={active}>
+                <Link to={href}>
+                  <span>{trans(prop.name)}</span>
+                </Link>
+              </SubMenuItem>
+            );
+          })}
+      </SubMenu>
+    </>
+  );
+};
+
+const Menu = styled.ul`
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+
+  span {
+    color: var(--font-on-background);
+    font-size: var(--font-body1);
+  }
+
+  li {
+    transition: 0.3s;
+
+    &:hover {
+      background: var(--color-hover);
+    }
+  }
+
+  ${scrollbar}
+
+  ${media.tablet`
+    height: calc(100% - ${headerStyle.height});
+  `};
+`;
+
+const MenuItem = styled.li`
+  ${(props) =>
+    props.active === true &&
+    css`
+      background: var(--color-active);
+    `};
+`;
+
+const MenuItemLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing);
+  height: 48px;
+
+  img {
+    width: 24px;
+    height: 24px;
+    margin-right: var(--spacing);
+    flex: 0 0 24px;
+  }
+`;
+
+const MenuItemButton = styled(MenuItemLink)`
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+
+  .arrow {
+    margin-left: auto;
+    color: var(--color-primary);
+
+    ${({ open }) =>
+      open === true &&
+      css`
+        transform: rotate(90deg);
+        transition: all 0.4s;
+      `};
+  }
+`;
+
+const SubMenu = styled.ul`
+  overflow: hidden;
+  height: ${(props) => (props.open === true ? 'auto' : '0px')};
+`;
+
+const SubMenuItem = styled.li`
+  a {
+    display: flex;
+    align-items: center;
+    padding: 0 calc(var(--spacing) * 2 + 1.5rem);
+    height: 48px;
+
+    ${({ active }) =>
+      active === true &&
+      css`
+        background: var(--color-active);
+      `};
+  }
+`;
+
+export default Sidebar;

package/layout/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Layout", {
+  enumerable: true,
+  get: function () {
+    return _Layout.default;
+  }
+});
+var _Layout = _interopRequireDefault(require("./Layout"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.27.1",
+  "version": "0.29.0",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",
@@ -26,6 +26,7 @@
     "leaflet-draw": "^1.0.4",
     "lodash.uniqueid": "^4.0.1",
     "moment": "^2.29.3",
+    "normalize.css": "^8.0.1",
     "overlapping-marker-spiderfier": "^1.1.4",
     "qrcode.react": "^3.0.2",
     "rc-time-picker": "^3.7.3",

package/page/Disclaimer.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const Disclaimer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius);\n  color: var(--font-on-background);\n  padding: var(--spacing);\n\n  > article {\n    line-height: 1.5;\n\n    &:not(:last-child) {\n      padding-bottom: var(--spacing-l);\n    }\n\n    > h2 {\n      text-align: center;\n      margin-bottom: var(--spacing-l);\n    }\n\n    > em {\n      display: block;\n      margin-bottom: var(--spacing-s);\n    }\n\n    > section {\n      margin-bottom: var(--spacing);\n\n      > h3 {\n        margin-bottom: var(--spacing-xs);\n      }\n\n      > p {\n        margin-bottom: var(--spacing-xs);\n      }\n\n      ul {\n        margin: var(--spacing-s) 0;\n\n        li {\n          margin: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-s);\n\n          &.disc {\n            list-style: disc;\n          }\n        }\n      }\n\n      ol {\n        padding: 0;\n        margin: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-s);\n\n        &.counter-number {\n          counter-reset: number;\n        }\n\n        &.counter-number-alpha {\n          counter-reset: number alpha;\n        }\n\n        &.nested-counter-number {\n          counter-reset: nested-number;\n        }\n\n        &.ml-0 {\n          margin-left: 0;\n        }\n\n        li {\n          margin: var(--spacing-s) 0;\n\n          &.decimal {\n            list-style: decimal;\n          }\n\n          &.counter-number-increment {\n            counter-increment: number;\n          }\n\n          &.counter-alpha-increment {\n            counter-increment: alpha;\n          }\n\n          &.counter-number {\n            display: flex;\n            margin: var(--spacing-xs) 0;\n\n            &::before {\n              margin-right: var(--spacing-xs);\n              content: counters(number, '.') ' ';\n            }\n          }\n\n          &.counter-alpha {\n            display: flex;\n            margin: var(--spacing-xs) 0;\n\n            &::before {\n              margin-right: var(--spacing-xs);\n              content: '(' counter(alpha, upper-alpha) ')';\n            }\n          }\n\n          &.nested-counter-number-increment {\n            counter-increment: nested-number;\n          }\n\n          &.nested-counter-number {\n            display: flex;\n            margin: var(--spacing-xs) 0;\n\n            &::before {\n              margin-right: var(--spacing-xs);\n              content: counters(number, '.') '.' counters(nested-number, '.');\n            }\n          }\n        }\n      }\n    }\n  }\n"])));
+var _default = exports.default = Disclaimer;

package/page/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Disclaimer", {
+  enumerable: true,
+  get: function () {
+    return _Disclaimer.default;
+  }
+});
+var _Disclaimer = _interopRequireDefault(require("./Disclaimer"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/styles/GlobalStyle.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = require("styled-components");
+require("normalize.css");
 require("../assets/css/global.css");
 var _templateObject;
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    --color-white: ", ";\n    --color-dark: ", ";\n    --color-grey: ", ";\n    --color-primary: ", ";\n    --color-success: ", ";\n    --color-warning: ", ";\n    --color-danger: ", ";\n    --color-hover: ", ";\n    --color-active: ", ";\n    --color-scroll-bar: ", ";\n    --color-background1: ", ";\n    --color-background2: ", ";\n    --color-background3: ", ";\n    --color-backdrop: ", ";\n\n    --font-h1: ", ";\n    --font-h2: ", ";\n    --font-h3: ", ";\n    --font-body1: ", ";\n    --font-body2: ", ";\n    --font-button: ", ";\n    --font-caption: ", ";\n    --font-family: ", ";\n    --font-normal: ", ";\n    --font-bold: ", ";\n    --font-on-primary: ", ";\n    --font-on-success: ", ";\n    --font-on-warning: ", ";\n    --font-on-danger: ", ";\n    --font-on-background: ", ";\n    --font-on-mute: ", ";\n\n    --box-shadow: ", ";\n    --border-color: ", ";\n    --border-width: ", ";\n    --border-radius-s: ", ";\n    --border-radius: ", ";\n    --border-radius-l: ", ";\n    --border-radius-round: ", ";\n\n    --spacing-xs: ", ";\n    --spacing-s: ", ";\n    --spacing: ", ";\n    --spacing-l: ", ";\n\n    background : ", ";\n  }\n\n  .margin-bottom-s {\n    margin-bottom: var(--spacing-s);\n  }\n"])), _ref => {
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    --color-white: ", ";\n    --color-dark: ", ";\n    --color-grey: ", ";\n    --color-primary: ", ";\n    --color-success: ", ";\n    --color-warning: ", ";\n    --color-danger: ", ";\n    --color-hover: ", ";\n    --color-active: ", ";\n    --color-scroll-bar: ", ";\n    --color-background1: ", ";\n    --color-background2: ", ";\n    --color-background3: ", ";\n    --color-backdrop: ", ";\n\n    --font-h1: ", ";\n    --font-h2: ", ";\n    --font-h3: ", ";\n    --font-body1: ", ";\n    --font-body2: ", ";\n    --font-button: ", ";\n    --font-caption: ", ";\n    --font-family: ", ";\n    --font-normal: ", ";\n    --font-bold: ", ";\n    --font-on-primary: ", ";\n    --font-on-success: ", ";\n    --font-on-warning: ", ";\n    --font-on-danger: ", ";\n    --font-on-background: ", ";\n    --font-on-mute: ", ";\n\n    --box-shadow: ", ";\n    --border-color: ", ";\n    --border-width: ", ";\n    --border-radius-s: ", ";\n    --border-radius: ", ";\n    --border-radius-l: ", ";\n    --border-radius-round: ", ";\n\n    --spacing-xs: ", ";\n    --spacing-s: ", ";\n    --spacing: ", ";\n    --spacing-l: ", ";\n\n    /* Global style */\n    font-size: 16px;\n    font-family: Helvetica;\n    overflow-x: hidden;\n    background: var(--color-background1);\n  }\n\n  /* Custom normalize */\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  html {\n    line-height: 1;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n  }\n  \n  a {\n    text-decoration: none;\n  }\n\n  button,\n  input,\n  optgroup,\n  select,\n  textarea {\n    line-height: 1;\n  }\n\n  ul {\n    padding: 0;\n    margin: 0;\n  }\n\n  li {\n    list-style: none;\n  }\n\n  figure {\n    margin: 0;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  dl,\n  dt,\n  dd {\n    margin: 0;\n  }\n\n  .margin-bottom-s {\n    margin-bottom: var(--spacing-s);\n  }\n"])), _ref => {
   let {
     theme
   } = _ref;
@@ -213,10 +214,5 @@ const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject ||
     theme
   } = _ref41;
   return theme.spacerL;
-}, _ref42 => {
-  let {
-    theme
-  } = _ref42;
-  return theme.bgColor1;
 });
 var _default = exports.default = GlobalStyle;

package/assets/css/normalize.css

@@ -1,386 +0,0 @@
-/*! Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) */
-
-/* Document */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-  font-size: 16px;
-  font-family: Helvetica;
-  overflow-x: hidden;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-}
-
-/* Grouping content */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: Helvetica;
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-  text-decoration: none;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: Helvetica;
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: Helvetica;
-  font-size: 100%; /* 1 */
-  line-height: 1; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input {
-  /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select {
-  /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type='button']:-moz-focusring,
-[type='reset']:-moz-focusring,
-[type='submit']:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type='checkbox'],
-[type='radio'] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}
-
-/* Custom reset */
-
-ul {
-  padding: 0;
-  margin: 0;
-}
-
-li {
-  list-style: none;
-}
-
-figure {
-  margin: 0;
-}
-
-p,
-h3 {
-  margin: 0;
-}
-
-dl,
-dt,
-dd {
-  margin: 0;
-}