@stokr/components-library 1.0.9 → 1.1.0

package/dist/components/Header/Header.stories.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HeaderWitouthUser = exports.HeaderWithUser = exports.HeaderWithSidebar = exports.HeaderWithProgressSignup = exports.HeaderWithProgress = exports.HeaderWithAdminUser = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _reactRouterDom = require("react-router-dom");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+// import Avatar from '../../static/images/avatar.png'
+var _default = {
+  title: 'Components Library/Header',
+  component: _Header.default,
+  argTypes: {
+    user: {
+      name: '',
+      country: '',
+      kyc_status: '',
+      KYCDocuments: '',
+      entity_name: '',
+      investor_eth_addresses: [],
+      is_risk_questionnaire_finished: true
+    },
+    progress: {
+      type: 'object',
+      defaultValue: null
+    },
+    signupFlow: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    withSidebar: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    isSidebarExpanded: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    loginHandler: {
+      type: 'function',
+      action: 'loginHandler'
+    },
+    signupHandler: {
+      type: 'function',
+      action: 'signupHandler'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Header.default, args)));
+};
+var userDev = {
+  _id: '61851acd5b9a890013297b12',
+  email: 'user-dev@email.com',
+  user_type: 'investor',
+  name: 'bilal',
+  lastname: 'dev',
+  username: 'user-dev',
+  entity_name: '',
+  active: true,
+  country: 'Germany',
+  is_risk_questionnaire_finished: false,
+  kyc_status: 'Accepted',
+  investor_algo_addresses: [{
+    name: 'another test',
+    address: 'TVNC3QHY5LXKBMX7RGJG3B25EJPW73V5WMMEMUB33V2HEPEA2H77UPOYTQ',
+    whitelistedAssets: ['20918100']
+  }, {
+    name: 'my algo test',
+    address: 'YFQD2RZIIZQSO67F6MG3DJVXLMF2QU4EKGBPVXVIF3XTLKGWUZ36WMG56A',
+    whitelistedAssets: ['20918100', '20013569', '92363258']
+  }, {
+    name: 'test algosigner',
+    address: 'Y4UGMCSV3B43Y7QAM2VUVPETDDO5JVHDRB3ZC5MBF2VTUTCP4X437A65JU',
+    whitelistedAssets: ['20918100', '20013569', '92363258']
+  }, {
+    name: 'test new address',
+    address: 'B36KBEDYKBUSEMNRITZFFE7VINEPMP5MJTNUCRM5S5AP6GNWMWW4B5PEQI',
+    whitelistedAssets: ['20918100', '92363258']
+  }, {
+    address: 'E3Q6B5Q7JHFCEWBGGXJGEMXVAL6MSJBUHCGURZRMASRTJFDD6RQTJHPF4A',
+    whitelistedAssets: ['20918100', '20013569']
+  }, {
+    name: 'test 30/05',
+    address: 'RTQWXHRWZCBT5FF474T4DTL3VRVHERY3Q6LWLMPP24IXNOYIXBDQXJ2Z6M',
+    whitelistedAssets: ['20918100']
+  }, {
+    name: 'test info 01/06',
+    address: 'U4EIZEMPRGC77P6HJSFCLWYE4NUMNILU5DBZCKV44QMJ3TQOADRETVVAZU',
+    whitelistedAssets: ['20918100', '92363258']
+  }],
+  wallets: [{
+    _id: '641dd681b08b7543f433af1e',
+    userId: '61851acd5b9a890013297b12',
+    type: 'liquid',
+    address: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+    name: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+    createdAt: '2021-11-19T16:19:33.390Z',
+    isPrimary: true
+  }, {
+    _id: '641dd681b08b7543f433af1f',
+    userId: '61851acd5b9a890013297b12',
+    type: 'liquid',
+    address: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+    assetIds: ['2812e39a-ad94-4368-9db4-9d98c1c00f38'],
+    liquidAccount: 'infinite-fleet',
+    registered_user: 6020,
+    name: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+    createdAt: '2021-11-19T16:19:33.390Z',
+    isPrimary: true
+  }, {
+    _id: '641dd681b08b7543f433af20',
+    userId: '61851acd5b9a890013297b12',
+    type: 'liquid',
+    address: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+    assetIds: ['35c3c8ed-59a3-4a87-9612-b48236aeab3b'],
+    liquidAccount: 'blockstream',
+    registered_user: 273,
+    name: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+    createdAt: '2021-11-19T16:19:33.390Z',
+    isPrimary: true
+  }],
+  liquid_network: {
+    GAID: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+    dt: '2021-11-19T16:19:33.390Z',
+    '2812e39a-ad94-4368-9db4-9d98c1c00f38': {
+      id: 6020,
+      GAID: 'GA2wpGUWe8uDz9VEdNXJ5v17UwD25f',
+      is_company: false,
+      name: '61851acd5b9a890013297b12',
+      categories: [3],
+      creator: 22,
+      whitelisted_gaids: ['GA2wpGUWe8uDz9VEdNXJ5v17UwD25f']
+    },
+    whitelisted_gaids: ['GA2wpGUWe8uDz9VEdNXJ5v17UwD25f', 'GA2skwb5v5nKaaAKNd61knuRJC47Jr', 'GA2skwb5v5nKaaAKNd61knuRJC47Jr'],
+    '35c3c8ed-59a3-4a87-9612-b48236aeab3b': {
+      id: 273,
+      GAID: 'GA2skwb5v5nKaaAKNd61knuRJC47Jr',
+      is_company: false,
+      name: '61851acd5b9a890013297b12',
+      categories: [24],
+      creator: 62,
+      whitelisted_gaids: ['GA2skwb5v5nKaaAKNd61knuRJC47Jr']
+    }
+  },
+  pass_reset: '',
+  taxId: '4355',
+  countryObj: {
+    _id: '630e0361b8d1fb0007929bc4',
+    name: 'Germany',
+    ISO2: 'DE',
+    ISO3: 'DEU',
+    isAllowed: true,
+    SEPA: true,
+    'infinite-fleet': true,
+    'la-boulangerie': true
+  }
+};
+var HeaderWithUser = Template.bind({});
+exports.HeaderWithUser = HeaderWithUser;
+HeaderWithUser.args = {
+  user: userDev
+};
+var HeaderWithAdminUser = Template.bind({});
+exports.HeaderWithAdminUser = HeaderWithAdminUser;
+HeaderWithAdminUser.args = {
+  user: _objectSpread(_objectSpread({}, userDev), {}, {
+    user_type: 'company_sa'
+  })
+};
+var HeaderWitouthUser = Template.bind({});
+exports.HeaderWitouthUser = HeaderWitouthUser;
+HeaderWitouthUser.args = {
+  user: {}
+};
+var HeaderWithProgress = Template.bind({});
+exports.HeaderWithProgress = HeaderWithProgress;
+HeaderWithProgress.args = {
+  user: userDev,
+  progress: {
+    items: [{
+      id: 'select-address',
+      handleClick: function handleClick() {}
+    }, {
+      id: 'order-tokens',
+      handleClick: function handleClick() {}
+    }, {
+      id: 'confirm',
+      handleClick: function handleClick() {}
+    }],
+    doneIndex: 1,
+    activeIndex: 2
+  }
+};
+var HeaderWithProgressSignup = Template.bind({});
+exports.HeaderWithProgressSignup = HeaderWithProgressSignup;
+HeaderWithProgressSignup.args = {
+  user: _objectSpread(_objectSpread({}, userDev), {}, {
+    kyc_status: 'Rejected'
+  }),
+  progress: {},
+  signupFlow: true
+};
+var HeaderWithSidebar = Template.bind({});
+exports.HeaderWithSidebar = HeaderWithSidebar;
+HeaderWithSidebar.args = {
+  user: _objectSpread(_objectSpread({}, userDev), {}, {
+    user_type: 'company_sa'
+  }),
+  // progress: {},
+  withSidebar: true,
+  isSidebarExpanded: true
+};

package/dist/components/Header/Header.styles.js

@@ -0,0 +1,182 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserName = exports.UserButton = exports.UserAvatar = exports.UserAccount = exports.StyledSubMenu = exports.StyledHeader = exports.SignupButton = exports.SidebarToggle = exports.QuickNavWrap = exports.ProgressWrap = exports.MobileMenuToggler = exports.MobileMenuPart = exports.MobileMenuItem = exports.MobileMenu = exports.MainNavWrap = exports.Logo = exports.LoginButton = exports.HeaderQuickNav = exports.HeaderMainNav = exports.HeaderInner = exports.HamburgerIcon = exports.CTAContainer = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _rwd = _interopRequireWildcard(require("../../styles/rwd"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _spacing = _interopRequireDefault(require("../../styles/spacing"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var sc = _interopRequireWildcard(require("../../constants/style"));
+var _FooterMenu = require("../Footer/FooterMenu.styles");
+var _Icon = _interopRequireWildcard(require("../Icon/Icon.style"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var StyledSubMenu = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__StyledSubMenu",
+  componentId: "sc-hifrdy-0"
+})(["position:relative;"]);
+exports.StyledSubMenu = StyledSubMenu;
+var StyledHeader = _styledComponents.default.header.withConfig({
+  displayName: "Headerstyles__StyledHeader",
+  componentId: "sc-hifrdy-1"
+})(["z-index:20;position:relative;color:", ";border-bottom:1px solid rgb(237,237,237);", ""], _colors.default.black, _rwd.default.MLarge(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: ", "px;\n    background-color: ", ";\n    box-shadow: inset 0 -1px 0 0 ", ";\n\n    ", "\n  "])), _spacing.default.headerHeight, _colors.default.white, _colors.default.lightGrey, function (props) {
+  return props.noFixedPosition && "\n      position:initial;\n    ";
+}));
+exports.StyledHeader = StyledHeader;
+var HeaderInner = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__HeaderInner",
+  componentId: "sc-hifrdy-2"
+})(["position:relative;padding:24px;", " ", ""], function (props) {
+  return props.withSidebar && "\n     left: 64px;\n    transition: 0.3s width;\n  ";
+}, _rwd.default.MLarge(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    padding: 28px 32px;\n    align-items: center;\n    height: 100%;\n\n    ", "\n  "])), function (props) {
+  return props.withSidebar && "\n      width:100%;\n      left:0;\n    ";
+}));
+exports.HeaderInner = HeaderInner;
+var MainNavWrap = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__MainNavWrap",
+  componentId: "sc-hifrdy-3"
+})(["z-index:2;position:relative;font-size:0;", ""], _rwd.default.MLarge(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex-grow: ", ";\n    width: ", ";\n\n", "\n\n      ", "\n"])), function (_ref) {
+  var isFixedWidth = _ref.isFixedWidth;
+  return !isFixedWidth && 1;
+}, function (_ref2) {
+  var isFixedWidth = _ref2.isFixedWidth;
+  return isFixedWidth && '200px';
+}, function (props) {
+  return props.noProgress && "\n    flex-grow: 3;\n  ";
+}, function (props) {
+  return props.hasProgress && "\n    width:33.3%;\n    ";
+}));
+exports.MainNavWrap = MainNavWrap;
+var SidebarToggle = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__SidebarToggle",
+  componentId: "sc-hifrdy-4"
+})(["width:64px;height:100%;background:", ";transition:0.3s width;flex-shrink:0;display:flex;position:absolute;cursor:pointer;z-index:10;", " ", ""], _colors.default.rustyRed, _rwd.default.MLarge(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: relative;\n    width: 100px;\n  "]))), function (props) {
+  return props.isSidebarExpanded && _rwd.default.MLarge(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 300px;\n  "])));
+});
+exports.SidebarToggle = SidebarToggle;
+var HamburgerIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
+  displayName: "Headerstyles__HamburgerIcon",
+  componentId: "sc-hifrdy-5"
+})(["display:block;width:18px;height:18px;position:absolute;top:50%;left:50%;margin-top:-9px;margin-left:-9px;font-size:18px;line-height:18px;color:", ";&:before{content:'", "';}", ""], _colors.default.white, _Icon.iconsMap.hamburger, _rwd.default.MLarge(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    left: 50px;\n  "]))));
+exports.HamburgerIcon = HamburgerIcon;
+var ProgressWrap = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__ProgressWrap",
+  componentId: "sc-hifrdy-6"
+})(["z-index:0;position:relative;text-align:center;margin-top:24px;", ""], _rwd.default.MLarge(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    flex-grow: 2;\n    margin-top: 0;\n\n    \n\n  "]))));
+exports.ProgressWrap = ProgressWrap;
+var QuickNavWrap = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__QuickNavWrap",
+  componentId: "sc-hifrdy-7"
+})(["z-index:2;position:absolute;top:0;right:0;height:100%;", ""], _rwd.default.MLarge(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    position: relative;\n    right: auto;\n    flex-grow: ", ";\n    width: ", ";\n    text-align: right;\n\n    ", "\n  "])), function (_ref3) {
+  var isFixedWidth = _ref3.isFixedWidth;
+  return !isFixedWidth && 1;
+}, function (_ref4) {
+  var isFixedWidth = _ref4.isFixedWidth;
+  return isFixedWidth && '200px';
+}, function (props) {
+  return props.hasProgress && "\n    width:33.3%;\n    ";
+}));
+exports.QuickNavWrap = QuickNavWrap;
+var Logo = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__Logo",
+  componentId: "sc-hifrdy-8"
+})(["display:inline-block;vertical-align:middle;color:", ";transition:color 0.4s;", " a{display:block;transition:opacity 0.2s;&:hover{opacity:0.5;}}img{display:block;height:16px;width:auto;}svg{display:block;height:16px;width:auto;fill:currentColor;}", ""], _colors.default.black, function (props) {
+  return props.isHighlight && "\n    color: ".concat(_colors.default.blue, ";\n  ");
+}, _rwd.default.MLarge(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin-left: 0;\n    margin-right: 42px;\n  "]))));
+exports.Logo = Logo;
+var HeaderMainNav = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__HeaderMainNav",
+  componentId: "sc-hifrdy-9"
+})(["display:none;", " button{text-transform:uppercase;}"], _rwd.default.MLarge(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    display: inline-block;\n  "]))));
+exports.HeaderMainNav = HeaderMainNav;
+var HeaderQuickNav = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__HeaderQuickNav",
+  componentId: "sc-hifrdy-10"
+})(["display:none;", " button{text-transform:uppercase;", "}"], _rwd.default.MLarge(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    display: inline-block;\n\n    & > * {\n      margin-left: 32px;\n\n      &:first-child {\n        margin-left: 0;\n      }\n    }\n\n      ", "\n  "])), function (props) {
+  return !props.isUserLogged && "\n         display: flex;\n    align-items: center;\n    justify-content: flex-end;\n         ";
+}), _rwd.default.MLarge(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      vertical-align: middle;\n    "]))));
+exports.HeaderQuickNav = HeaderQuickNav;
+var MobileMenuToggler = _styledComponents.default.button.withConfig({
+  displayName: "Headerstyles__MobileMenuToggler",
+  componentId: "sc-hifrdy-11"
+})(["display:block;width:32px;height:32px;position:absolute;top:16px;right:16px;outline:none;cursor:pointer;border:none;background-color:inherit;", " ", " span{display:block;width:16px;height:2px;position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-8px;background-color:", ";transition:background-color 0.4s,transform 0.4s;&:nth-child(1){transform:translateY(-6px);}&:nth-child(3){transform:translateY(6px);}}", ""], function (props) {
+  return props.withSidebar && "\n    right:-15px;\n  ";
+}, _rwd.default.MLarge(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    display: none;\n  "]))), _colors.default.black, function (props) {
+  return props.isActive && "\n    span {\n      background-color: ".concat(_colors.default.blue, ";\n\n      &:nth-child(1) {\n        transform: translateY(0) rotate(135deg);\n      }\n\n      &:nth-child(2) {\n        transform: scaleX(0);\n      }\n\n      &:nth-child(3) {\n        transform: translateY(0) rotate(-135deg);\n      }\n    }\n  ");
+});
+exports.MobileMenuToggler = MobileMenuToggler;
+var MobileMenu = _styledComponents.default.nav.withConfig({
+  displayName: "Headerstyles__MobileMenu",
+  componentId: "sc-hifrdy-12"
+})(["z-index:1;position:absolute;top:65px;left:0;display:flex;flex-direction:column;width:100%;min-height:calc(100vh - 65px);background-color:", ";padding:0;text-align:center;opacity:0;visibility:hidden;transition:opacity 0.4s,visibility 0.4s;height:calc(100vh - 65px);overflow:scroll;", " ", " ", " button{text-transform:uppercase;}"], _colors.default.white, function (props) {
+  return props.isActive && "\n    opacity: 1;\n    visibility: visible;\n  ";
+}, function (props) {
+  return props.withSidebar && "\n  width:180%;\n  left:-64px;\n  ";
+}, _rwd.default.MLarge(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+exports.MobileMenu = MobileMenu;
+var MobileMenuItem = _styledComponents.default.li.withConfig({
+  displayName: "Headerstyles__MobileMenuItem",
+  componentId: "sc-hifrdy-13"
+})(["align-items:center;display:flex !important;justify-content:center;", ""], function (props) {
+  return props.red && "\n    background: #D2200D;\n    color:white;\n        border-bottom: 1px solid #979797;\n  ";
+});
+exports.MobileMenuItem = MobileMenuItem;
+var MobileMenuPart = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__MobileMenuPart",
+  componentId: "sc-hifrdy-14"
+})(["", " ", " ", " ", " ", ""], function (props) {
+  return props.withPadding && "\n    padding: 30px 0;\n\n    @media screen and (max-width: 320px) {\n      padding: 15px 0;\n    }\n  ";
+}, function (props) {
+  return props.grow && "\n    flex-grow: ".concat(props.grow, ";\n  ");
+}, function (props) {
+  return props.flexColumn && "\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    button {\n      margin: 10px 0;\n    }\n  ";
+}, function (props) {
+  return props.noPaddingTop && "\n    padding-top: 0;\n  ";
+}, function (props) {
+  return props.borderTop && "\n    border-top: 1px solid ".concat(_colors.default.lightGrey, ";\n  ");
+});
+exports.MobileMenuPart = MobileMenuPart;
+var UserAccount = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__UserAccount",
+  componentId: "sc-hifrdy-15"
+})(["z-index:1;position:relative;display:inline-block;vertical-align:middle;", ""], _rwd.default.MLarge(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    margin: -4px 0;\n    margin-left: 32px;\n  "]))));
+exports.UserAccount = UserAccount;
+var UserButton = _styledComponents.default.button.withConfig({
+  displayName: "Headerstyles__UserButton",
+  componentId: "sc-hifrdy-16"
+})(["display:inline-block;vertical-align:middle;width:48px;height:48px;border-radius:24px;overflow:hidden;background-color:", ";opacity:1;transition:opacity 0.2s;outline:none;cursor:pointer;box-shadow:none;border:none;background-color:buttonface;padding:0;"], _colors.default.grey2);
+exports.UserButton = UserButton;
+var UserAvatar = _styledComponents.default.img.withConfig({
+  displayName: "Headerstyles__UserAvatar",
+  componentId: "sc-hifrdy-17"
+})(["display:block;width:100%;height:100%;object-fit:cover;object-position:center center;"]);
+exports.UserAvatar = UserAvatar;
+var UserName = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__UserName",
+  componentId: "sc-hifrdy-18"
+})(["z-index:0;position:relative;display:block;padding-top:36px;padding-bottom:20px;font-weight:600;font-size:16px;line-height:24px;background-color:", ";color:", ";margin-top:-24px;"], _colors.default.orangishRed, _colors.default.white);
+exports.UserName = UserName;
+var LoginButton = _styledComponents.default.span.withConfig({
+  displayName: "Headerstyles__LoginButton",
+  componentId: "sc-hifrdy-19"
+})(["cursor:pointer;margin-right:24px;display:none;&:hover{opacity:0.6;}@media screen and (min-width:992px){display:block;}"]);
+exports.LoginButton = LoginButton;
+var SignupButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "Headerstyles__SignupButton",
+  componentId: "sc-hifrdy-20"
+})(["padding-right:32px !important;color:", " !important;&:hover{background:", ";}", ""], sc.WHITE_HEX, sc.BLUE_BASE_RELEASED_HEX, function (props) {
+  return props.isMobile && "\n   margin: 0;\n  width: 163.94px;\n  ";
+});
+exports.SignupButton = SignupButton;
+var CTAContainer = _styledComponents.default.div.withConfig({
+  displayName: "Headerstyles__CTAContainer",
+  componentId: "sc-hifrdy-21"
+})(["align-items:center;border-top:1px solid ", ";display:flex;flex-direction:column;justify-content:center;padding:56px 0;width:100%;span{color:1px solid ", ";font-size:10px;letter-spacing:2.1px;margin-bottom:14px;}div{display:flex;flex-wrap:wrap;}", " ", "{display:flex;justify-content:center;background:transparent;margin:12px;svg{fill:rgb(32,32,32);height:18px !important;width:18px !important;}}"], sc.GRAY_BASE_HEX, sc.GRAY_BASE_HEX, _rwd.rwdMax.Medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    div{\n        width: 192px; /* Fit exactly 3 icons */\n    }\n  "]))), _FooterMenu.SocialLink);
+exports.CTAContainer = CTAContainer;

package/dist/components/Icon/Icon.style.js

@@ -0,0 +1,71 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconsMap = exports.default = exports.TooltipIcon = exports.Icon = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var iconsMap = {
+  expand: '\\e923',
+  shrink: '\\e924',
+  emoji: '\\e922',
+  arrowDown: '\\e900',
+  arrowLeft: '\\e901',
+  arrowRight: '\\e902',
+  arrowUp: '\\e903',
+  heart: '\\e904',
+  heartFill: '\\e921',
+  lock: '\\e905',
+  menu: '\\e906',
+  pen: '\\e907',
+  star: '\\e908',
+  trash: '\\e909',
+  unread: '\\e90a',
+  user: '\\e90b',
+  edit: '\\e90c',
+  check: '\\e90d',
+  inProgress: '\\e90e',
+  warning: '\\e90f',
+  logout: '\\e910',
+  tokenHolder: '\\e911',
+  teams: '\\e912',
+  tokenSales: '\\e913',
+  analytics: '\\e914',
+  updates: '\\e915',
+  overview: '\\e916',
+  comments: '\\e917',
+  hamburger: '\\e918',
+  share: '\\e919',
+  facebook: '\\e91a',
+  linkedin: '\\e91b',
+  medium: '\\e91c',
+  reddit: '\\e91d',
+  telegram: '\\e91e',
+  twitter: '\\e91f',
+  youtube: '\\e920'
+};
+exports.iconsMap = iconsMap;
+var TooltipIcon = _styledComponents.default.i.attrs({
+  className: 'ion ion-md-information-circle'
+}).withConfig({
+  displayName: "Iconstyle__TooltipIcon",
+  componentId: "sc-1v2m4hs-0"
+})(["position:relative;left:-0.4px;font-size:18px;opacity:0.2;transform:rotateY(180deg);margin:0 14px;"]);
+exports.TooltipIcon = TooltipIcon;
+var Icon = _styledComponents.default.i.withConfig({
+  displayName: "Iconstyle__Icon",
+  componentId: "sc-1v2m4hs-1"
+})(["font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;&::before{content:\"", "\";}", ""], function (props) {
+  return props.icon;
+}, function (_ref) {
+  var checklist = _ref.checklist;
+  return checklist && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      margin-left: 3px;\n      margin-right: 11px;\n    "])));
+});
+exports.Icon = Icon;
+var _default = Icon;
+exports.default = _default;

package/dist/components/InfoIcon/InfoIcon.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InfoIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactTippy = require("react-tippy");
+var _InfoIcon = require("./InfoIcon.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var InfoIcon = function InfoIcon(_ref) {
+  var title = _ref.title,
+    html = _ref.html,
+    position = _ref.position,
+    noMargin = _ref.noMargin,
+    noMarginLeft = _ref.noMarginLeft,
+    noMarginRight = _ref.noMarginRight;
+  return /*#__PURE__*/_react.default.createElement(_InfoIcon.Container, {
+    noMargin: noMargin,
+    noMarginLeft: noMarginLeft,
+    noMarginRight: noMarginRight
+  }, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
+    position: position,
+    title: title,
+    html: html,
+    theme: "light",
+    arrow: true,
+    duration: 200
+  }, /*#__PURE__*/_react.default.createElement(_InfoIcon.Icon, null)));
+};
+exports.InfoIcon = InfoIcon;
+InfoIcon.propTypes = {
+  title: _propTypes.default.string,
+  html: _propTypes.default.node,
+  position: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
+  noMargin: _propTypes.default.bool,
+  noMarginLeft: _propTypes.default.bool,
+  noMarginRight: _propTypes.default.bool
+};
+InfoIcon.defaultProps = {
+  title: null,
+  html: null,
+  position: 'bottom',
+  noMargin: false,
+  noMarginLeft: false,
+  noMarginRight: false
+};
+var _default = InfoIcon;
+exports.default = _default;

package/dist/components/InfoIcon/InfoIcon.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InfoIconTop = exports.InfoIconBottom = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _InfoIcon = require("./InfoIcon");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Icons/Info Icon',
+  component: _InfoIcon.InfoIcon,
+  argTypes: {
+    title: {
+      type: 'string',
+      defaultValue: 'default is null/ add some title'
+    },
+    html: {
+      type: 'node',
+      defaultValue: 'default is null/ add some html'
+    },
+    position: {
+      type: 'string',
+      defaultValue: 'bottom'
+    },
+    noMargin: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    noMarginLeft: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    noMarginRight: {
+      type: 'boolean',
+      defaultValue: false
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, args)));
+};
+var InfoIconBottom = Template.bind({});
+exports.InfoIconBottom = InfoIconBottom;
+InfoIconBottom.args = {};
+var InfoIconTop = Template.bind({});
+exports.InfoIconTop = InfoIconTop;
+InfoIconTop.args = {
+  position: 'top'
+};

package/dist/components/InfoIcon/InfoIcon.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "InfoIconstyles__Container",
+  componentId: "sc-d3sdn3-0"
+})(["display:inline-block;vertical-align:middle;margin:0 12px;font-size:0;line-height:0;", " ", " ", " & > div{position:relative;display:inline-block!important;}"], function (props) {
+  return props.noMargin && "\n    margin: 0;\n  ";
+}, function (props) {
+  return props.noMarginLeft && "\n    margin-left: 0;\n  ";
+}, function (props) {
+  return props.noMarginRight && "\n    margin-right: 0;\n  ";
+});
+exports.Container = Container;
+var Icon = _styledComponents.default.i.attrs({
+  className: 'ion ion-md-information-circle'
+}).withConfig({
+  displayName: "InfoIconstyles__Icon",
+  componentId: "sc-d3sdn3-1"
+})(["position:relative;left:-0.4px;display:inline-block;vertical-align:middle;font-size:16px;line-height:16px;vertical-align:middle;color:", ";transition:color 0.2s;&:hover{color:", ";}"], function (props) {
+  return _theme.default.cGrey2;
+}, function (props) {
+  return _theme.default.cPrimary;
+});
+exports.Icon = Icon;