@stokr/components-library 0.5.6 → 0.5.7

package/dist/Checklist/UserChecklist.js

@@ -1,247 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import ToDoList, { ToDoModal, ToDoTaskState } from 'components/ToDoList/ToDoList';
-export const UserChecklist = props => {
-  const {
-    user = {},
-    additionalTasks,
-    redirectCookie,
-    getTasksCount,
-    useRelativePath
-  } = props;
-  const isFromAllowedCountry = user.countryObj?.isAllowed;
-  //const isFromAllowedCountry = isFromAllowedCountryFunction(user.country)
-
-  const [mandatoryTasks, setmandatoryTasks] = useState([]);
-  const [mandatoryTasksCount, setmandatoryTasksCount] = useState(0);
-  const [walletTasks, setwalletTasks] = useState([]);
-  const [walletTasksCount, setwalletTasksCount] = useState(0);
-  const [optionalTasks, setoptionalTasks] = useState([]);
-  useEffect(() => {
-    generateTodos(user);
-  }, []);
-  useEffect(() => {
-    //calculate mandatory count from tasks
-    if (mandatoryTasks.length > 0) {
-      if (isFromAllowedCountry) {
-        const mandatoryTasksCount = mandatoryTasks.reduce((count, task) => {
-          if (task.state === ToDoTaskState.APPROVED || task.state === ToDoTaskState.IN_PROGRESS) {
-            return count;
-          }
-          return count + 1;
-        }, 0);
-        setmandatoryTasksCount(mandatoryTasksCount);
-      }
-    }
-  }, [mandatoryTasks, isFromAllowedCountry]);
-  useEffect(() => {
-    //calculate wallet count from tasks
-    if (walletTasks.length > 0) {
-      if (isFromAllowedCountry) {
-        const walletTasksCount = walletTasks.reduce((count, task) => {
-          if (task.title === 'Liquid Address') {
-            if (task.state === ToDoTaskState.APPROVED || task.state === ToDoTaskState.IN_PROGRESS) {
-              return count;
-            }
-            return count + 1;
-          }
-          return count;
-        }, 0);
-        setwalletTasksCount(walletTasksCount);
-      }
-    }
-  }, [walletTasks, isFromAllowedCountry]);
-  useEffect(() => {
-    //if you provide function to get tasks count, pass the counter into the function
-    if (getTasksCount) {
-      getTasksCount({
-        mandatoryTasksCount,
-        walletTasksCount
-      });
-    }
-  }, [mandatoryTasksCount, walletTasksCount, getTasksCount]);
-  const generateTodos = userData => {
-    const {
-      country,
-      entity_name,
-      investor_eth_addresses,
-      investor_algo_addresses,
-      countryObj,
-      liquid_network = {},
-      is_risk_questionnaire_finished,
-      kyc_status,
-      KYCDocuments,
-      lemonwayWallet
-    } = user;
-    const platformURL = useRelativePath === true ? '' : 'https://signup.stokr.info';
-    if (entity_name) {
-      setmandatoryTasks([{
-        title: 'Verify Identity',
-        message: 'You will be contacted by our compliance team dedicated to legal entities.',
-        state: ToDoTaskState.APPROVED
-        // link: '',
-      }, {
-        title: 'Risk Questionnaire',
-        message: is_risk_questionnaire_finished ? 'You have read and understood the risks' : 'Read the risks, tick the boxes, ta-da!',
-        state: is_risk_questionnaire_finished ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
-        link: `${platformURL}/risk-questionnaire`
-      }]);
-      setwalletTasks([{
-        title: 'Liquid Address',
-        message: liquid_network && liquid_network.GAID ? 'Your address is registered' : 'Register a Liquid address where you will receive the securities',
-        state: liquid_network && liquid_network.GAID ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
-        link: `${platformURL}/register-liquid-securities`
-      }, {
-        title: 'Ethereum Address',
-        message: investor_eth_addresses ? 'Your address is registered' : 'Register an Ethereum address where you will receive the securities',
-        state: investor_eth_addresses ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
-        //link: '', //`${platformURL}/register-ethereum`,
-        disabled: true
-      }, {
-        title: 'Algorand Address',
-        message: investor_algo_addresses ? 'Opt-in into more assets' : 'Register an Algorand address and opt-in into a project you want to invest in ',
-        state: investor_algo_addresses ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
-        //: '',
-        openModal: ToDoModal.ALGO
-      }]);
-    } else {
-      setmandatoryTasks([{
-        title: 'Country of Residence',
-        message: !country ? 'Please select your country of residence' : !isFromAllowedCountry ? 'STOKR is not yet available where you live' : 'Your country of residence has been registered',
-        state: !country ? ToDoTaskState.SKIPPED : !isFromAllowedCountry ? ToDoTaskState.DENIED : ToDoTaskState.APPROVED,
-        link: `${platformURL}/country-of-residence`
-      }, {
-        title: 'Verify Identity',
-        message: getVerifyIdentityChecklist(isFromAllowedCountry, user).message,
-        state: getVerifyIdentityChecklist(isFromAllowedCountry, user).state,
-        link: getVerifyIdentityChecklist(isFromAllowedCountry, user).hasLink && `${platformURL}/verify-identity`
-      }, {
-        title: 'Risk Questionnaire',
-        message: !isFromAllowedCountry ? 'Sorry, you are living in a country where this is not available' : is_risk_questionnaire_finished ? 'You have read and understood the risks' : 'Read the risks, tick the boxes, ta-da!',
-        state: !isFromAllowedCountry ? ToDoTaskState.NOT_AVAILABLE : is_risk_questionnaire_finished ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
-        link: isFromAllowedCountry && `${platformURL}/risk-questionnaire`
-      }]);
-      setwalletTasks([{
-        title: 'Liquid Address',
-        message: !isFromAllowedCountry ? 'Sorry, you are living in a country where this is not available' : liquid_network && liquid_network.GAID ? 'Your address is registered' : 'Register a Liquid address where you will receive the securities',
-        state: !isFromAllowedCountry ? ToDoTaskState.NOT_AVAILABLE : liquid_network && liquid_network.GAID ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
-        link: isFromAllowedCountry && `${platformURL}/register-liquid-securities`
-      }, {
-        title: 'Ethereum Address',
-        message: !isFromAllowedCountry ? 'Sorry, you are living in a country where this is not available' : investor_eth_addresses ? 'Your address is registered' : 'Register an Ethereum address where you will receive the securities',
-        state: !isFromAllowedCountry ? ToDoTaskState.NOT_AVAILABLE : investor_eth_addresses ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
-        disabled: true
-      }, {
-        title: 'Algorand Address',
-        message: investor_algo_addresses ? 'Opt-in into more assets' : 'Register an Algorand address and opt-in into a project you want to invest in ',
-        state: investor_algo_addresses ? ToDoTaskState.APPROVED : ToDoTaskState.SKIPPED,
-        openModal: ToDoModal.ALGO
-        //link: '',
-      }]);
-
-      setoptionalTasks([countryObj?.SEPA && {
-        title: 'Invest in Euro',
-        message: getInvestInEuroChecklist(isFromAllowedCountry, user).message,
-        state: getInvestInEuroChecklist(isFromAllowedCountry, user).state,
-        link: isFromAllowedCountry && kyc_status && kyc_status !== 'Draft' && `${platformURL}/verify-identity`
-      }, {
-        title: 'Tax ID',
-        message: !userData.taxId ? 'To invest in certain offerings, you need to provide your tax ID' : userData.taxId && 'You tax ID is submitted',
-        state: !userData.taxId ? ToDoTaskState.SKIPPED : userData.taxId && ToDoTaskState.APPROVED,
-        openModal: ToDoModal.TAX_ID,
-        tooltip: `STOKR is an entity regulated by the Luxembourg regulator CSSF and has implemented the Common Reporting Standard (the “CRS”) through the law of 18 December 2015 ( the “CRS Act”) and some Luxembourg based entities are likely to be treated as a Luxembourg Reporting Financial Institution. 
-Some of our offerings fall under this regulation. Before your invest in these offerings, we will ask you to provide your tax ID. This information is not mandatory for all our offerings.
-Your tax ID information will never be sold, and never shown publicly. We just use it to make sure you're legally allowed to invest through the STOKR interface.`
-      }]);
-    }
-  };
-  return /*#__PURE__*/React.createElement(ToDoList
-  // successText="Almost done!"
-  , {
-    mandatoryTasks: mandatoryTasks,
-    walletsTasks: walletTasks,
-    optionalTasks: optionalTasks,
-    additionalTasks: additionalTasks,
-    redirectCookie: redirectCookie,
-    mandatoryTasksCount: mandatoryTasksCount,
-    walletsTasksCount: walletTasksCount,
-    pendingTasksCount: mandatoryTasksCount + walletTasksCount
-  });
-};
-const getVerifyIdentityChecklist = (isFromAllowedCountry, user) => {
-  const {
-    kyc_status
-  } = user;
-  let message;
-  let state;
-  let hasLink = false;
-  if (!isFromAllowedCountry) {
-    message = 'Sorry, you are living in a country where this is not available';
-    state = ToDoTaskState.NOT_AVAILABLE;
-  } else if (!kyc_status || kyc_status.toUpperCase() === 'DRAFT') {
-    message = 'Scan your ID to get the green light from the anti-fraud squad';
-    state = ToDoTaskState.SKIPPED;
-    hasLink = true;
-  } else if (kyc_status.toUpperCase() === 'REJECTED' || kyc_status.toUpperCase() === 'ESCALATED' || kyc_status.toUpperCase() === 'IN PROGRESS' || kyc_status.toUpperCase() === 'INCONCLUSIVE' || kyc_status.toUpperCase() === 'APPROVED' || kyc_status.toUpperCase() === 'PENDING') {
-    message = 'Our anti-fraud squad is still working';
-    state = ToDoTaskState.IN_PROGRESS;
-  } else if (kyc_status.toUpperCase() === 'ACCEPTED') {
-    message = 'Your ID is verified';
-    state = ToDoTaskState.APPROVED;
-  } else if (kyc_status.toUpperCase() === 'REAPPLY') {
-    message = 'Document unreadable. Reapply with new ID';
-    state = ToDoTaskState.DENIED;
-    hasLink = true;
-  } else if (kyc_status.toUpperCase() === 'DENIED') {
-    message = 'There seems to be a problem. The compliance team will contact you.';
-    state = ToDoTaskState.DENIED;
-  }
-  return {
-    message,
-    state,
-    hasLink
-  };
-};
-const getInvestInEuroChecklist = (isFromAllowedCountry, user) => {
-  const {
-    kyc_status,
-    KYCDocuments,
-    lemonwayWallet
-  } = user;
-  let message;
-  let state;
-  if (!isFromAllowedCountry) {
-    message = 'Sorry, you are living in a country where this is not available';
-    state = ToDoTaskState.NOT_AVAILABLE;
-  } else if (lemonwayWallet?.STATUS === '6') {
-    message = 'Your document is verified';
-    state = ToDoTaskState.APPROVED;
-  } else if (lemonwayWallet?.STATUS === '3') {
-    message = 'There seems to be a problem. The compliance team will contact you';
-    state = ToDoTaskState.DENIED;
-  } else if (!kyc_status || kyc_status.toUpperCase() === 'DRAFT') {
-    message = 'In order to pay in EURO you need to verify your identity and provide a second identity document';
-    state = ToDoTaskState.NOT_AVAILABLE;
-  } else if (!KYCDocuments || kyc_status?.toUpperCase() === 'ACCEPTED') {
-    message = 'In order to pay in EURO you need to provide a second identity document';
-    state = ToDoTaskState.SKIPPED;
-  } else if (KYCDocuments.status?.toUpperCase() === 'PENDING' || KYCDocuments.status?.toUpperCase() === 'APPROVED' && !lemonwayWallet || lemonwayWallet?.STATUS === '5') {
-    message = 'The Lemonway team is having a look. This usually takes up to 24 hours';
-    state = ToDoTaskState.IN_PROGRESS;
-  } else if (KYCDocuments.status?.toUpperCase() === 'REJECTED') {
-    message = 'It seems there was a problem with your second identity document. Please try again or contact the compliance team at compliance@stokr.io';
-    state = ToDoTaskState.DENIED;
-  }
-  return {
-    message,
-    state
-  };
-};
-UserChecklist.propTypes = {
-  user: PropTypes.object.isRequired,
-  additionalTasks: PropTypes.any,
-  redirectCookie: PropTypes.bool,
-  getTasksCount: PropTypes.func,
-  useRelativePath: PropTypes.bool
-};
-export default UserChecklist;

package/dist/Checklist/UserChecklist.stories.js

@@ -1,115 +0,0 @@
-import React from 'react';
-import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
-import UserChecklist from './UserChecklist';
-export default {
-  title: 'Components Library/Checklist',
-  component: UserChecklist,
-  argTypes: {
-    user: {
-      type: 'object',
-      defaultValue: {},
-      required: true
-    },
-    additionalTasks: {
-      type: 'node',
-      defaultValue: null
-    },
-    redirectCookie: {
-      type: 'bool',
-      defaultValue: false
-    },
-    useRelativePath: {
-      type: 'bool',
-      defaultValue: false
-    },
-    getTasksCount: {
-      type: 'function',
-      action: 'getTasksCount'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(UserChecklist, args));
-const 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: true,
-  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']
-  }],
-  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
-  }
-};
-export const UserChecklist_user_dev = Template.bind({});
-UserChecklist_user_dev.args = {
-  user: userDev,
-  useRelativePath: true,
-  getTasksCount: data => {
-    console.log(data);
-  }
-};

package/dist/ComponentScroll/ComponentScroll.js

@@ -1,99 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Scrollbars } from 'react-custom-scrollbars';
-import { Container, Outer, Inner, TrackH, ThumbH, TrackV, ThumbV } from './ComponentScroll.styles';
-export const ComponentScroll = props => {
-  const {
-    children,
-    noMobileScroll,
-    autoHeight,
-    autoHeightMax,
-    autoHeightMin,
-    offset,
-    barPadding,
-    topPadding,
-    className,
-    handleScroll
-  } = props;
-  useEffect(() => {
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
-  const [scroll, setScroll] = useState();
-  const [debounce, setDebounce] = useState(false);
-  const [timer, setTimer] = useState();
-  const setRef = el => {
-    if (scroll) return;
-    setScroll(el);
-  };
-  const onMouseMove = () => {
-    if (!debounce) {
-      setDebounce(true);
-      refreshScrollBar();
-    }
-    clearTimeout(timer);
-    setTimer(setTimeout(onDebounce, 300));
-  };
-  const onDebounce = () => {
-    setDebounce(false);
-    refreshScrollBar();
-  };
-  const refreshScrollBar = () => {
-    if (!scroll) return;
-    scroll.handleScroll();
-  };
-  const onScroll = e => {
-    handleScroll && handleScroll(e);
-  };
-  return /*#__PURE__*/React.createElement(Container, {
-    className: className,
-    noMobileScroll: noMobileScroll
-  }, /*#__PURE__*/React.createElement(Outer, {
-    offset: offset,
-    barPadding: barPadding,
-    topPadding: topPadding
-  }, /*#__PURE__*/React.createElement(Scrollbars, {
-    ref: () => setRef(),
-    style: {
-      height: '100%'
-    },
-    renderTrackHorizontal: props => /*#__PURE__*/React.createElement(TrackH, props),
-    renderThumbHorizontal: props => /*#__PURE__*/React.createElement(ThumbH, props),
-    renderTrackVertical: props => /*#__PURE__*/React.createElement(TrackV, props),
-    renderThumbVertical: props => /*#__PURE__*/React.createElement(ThumbV, props),
-    hideTracksWhenNotNeeded: true,
-    onMouseMove: () => onMouseMove(),
-    onScroll: e => onScroll(e.target.value),
-    autoHeight: autoHeight,
-    autoHeightMax: autoHeightMax,
-    autoHeightMin: autoHeightMin,
-    universal: true
-  }, /*#__PURE__*/React.createElement(Inner, {
-    offset: offset
-  }, children))));
-};
-ComponentScroll.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  noMobileScroll: PropTypes.bool,
-  autoHeight: PropTypes.bool,
-  autoHeightMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  autoHeightMin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  barPadding: PropTypes.number,
-  topPadding: PropTypes.number,
-  offset: PropTypes.number,
-  handleScroll: PropTypes.func
-};
-ComponentScroll.defaultProps = {
-  className: '',
-  noMobileScroll: false,
-  autoHeight: false,
-  autoHeightMax: 0,
-  autoHeightMin: 0,
-  barPadding: 32,
-  topPadding: 0,
-  offset: 0,
-  handleScroll: null
-};
-export default ComponentScroll;

package/dist/ComponentScroll/ComponentScroll.stories.js

@@ -1,92 +0,0 @@
-import React from 'react';
-import { ComponentScroll } from './ComponentScroll';
-import { OneSvg, TwoSvg, FourSvg } from 'components/SvgIcons';
-export default {
-  title: 'Components Library/ComponentScroll',
-  component: ComponentScroll,
-  argTypes: {
-    children: {
-      type: 'node',
-      defaultValue: [],
-      required: true
-    },
-    className: {
-      type: 'string',
-      defaultValue: ''
-    },
-    noMobileScroll: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    autoHeight: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    autoHeightMax: {
-      type: 'number or string',
-      defaultValue: 0
-    },
-    autoHeightMin: {
-      type: 'number or string',
-      defaultValue: 0
-    },
-    barPadding: {
-      type: 'number',
-      defaultValue: 32
-    },
-    topPadding: {
-      type: 'number',
-      defaultValue: 0
-    },
-    offset: {
-      type: 'number',
-      defaultValue: 0
-    },
-    handleScroll: {
-      type: 'function',
-      defaultValue: null
-    },
-    setRef: {
-      type: 'function',
-      action: 'setRef'
-    },
-    onMouseMove: {
-      type: 'function',
-      action: 'mouseMove'
-    },
-    onDebounce: {
-      type: 'function',
-      action: 'debounceRefresh'
-    },
-    refreshScrollBar: {
-      type: 'function',
-      action: 'refreshScrollbar'
-    },
-    onScroll: {
-      type: 'function',
-      action: 'handleScroll'
-    }
-  },
-  parameters: {
-    backgrounds: {
-      default: 'grey'
-    }
-  }
-};
-//making default background grey in story as this reveals height /offset properties ..
-
-const Template = args => /*#__PURE__*/React.createElement(ComponentScroll, args);
-export const ScrollAutoHeight1000 = Template.bind({});
-ScrollAutoHeight1000.args = {
-  children: [/*#__PURE__*/React.createElement(OneSvg, null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TwoSvg, null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(FourSvg, null)],
-  autoHeight: true,
-  autoHeightMax: 1000,
-  autoHeightMin: 1000
-};
-export const ScrollAutoHeight2000 = Template.bind({});
-ScrollAutoHeight2000.args = {
-  children: [/*#__PURE__*/React.createElement(OneSvg, null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TwoSvg, null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(FourSvg, null)],
-  autoHeight: true,
-  autoHeightMax: 2000,
-  autoHeightMin: 2000
-};

package/dist/ComponentScroll/ComponentScroll.styles.js

@@ -1,104 +0,0 @@
-import styled, { css } from 'styled-components/macro';
-import rwd from 'styles/rwd';
-import theme from 'styles/theme';
-export const Container = styled.div`
-  position: relative;
-  height: 100%;
-  width: 100%;
-  display: flex;
-
-  ${props => props.noMobileScroll && css`
-      & > div > div {
-        overflow: visible !important;
-
-        > div:first-child {
-          overflow: visible !important;
-        }
-      }
-
-      ${rwd.Medium`
-      & > div > div {
-        overflow: hidden !important;
-
-        > div:first-child {
-          overflow: scroll !important;  
-        }
-      }
-    `}
-    `}
-`;
-export const TrackH = styled.div`
-  background-color: ${props => theme.cGrey};
-  left: 16px;
-  right: 16px;
-  bottom: 14px;
-  height: 4px;
-  border-radius: 4px;
-
-  ${rwd.Large`
-    left: 32px;
-    right: 32px;
-    bottom: 30px;
-  `}
-`;
-export const ThumbH = styled.div`
-  background-color: ${props => theme.cWarning};
-  height: 4px;
-  border-radius: 4px;
-`;
-export const TrackV = styled.div`
-  background-color: ${props => theme.cGrey};
-  top: 16px;
-  bottom: 16px;
-  right: 14px;
-  width: 4px;
-  border-radius: 4px;
-
-  ${rwd.Large`
-    top: 32px;
-    bottom: 32px;
-    right: 30px;
-  `}
-`;
-export const ThumbV = styled.div`
-  background-color: ${props => theme.cWarning};
-  width: 4px;
-  border-radius: 4px;
-`;
-export const Outer = styled.div`
-  position: relative;
-  flex-grow: 1;
-  max-height: 100%;
-  max-width: 100%;
-
-  ${props => props.barPadding > -1 && props.offset && `
-    margin-right: ${props.offset}px;
-    margin-bottom: ${props.offset}px;
-
-    ${TrackH} {
-      left: ${props.barPadding}px;
-      right: ${props.barPadding - props.offset}px;
-      bottom: 0;
-    }
-
-    ${TrackV} {
-      top: ${props.barPadding}px;
-      bottom: ${props.barPadding - props.offset}px;
-      right: 0;
-    }
-  `}
-
-  ${props => props.topPadding !== 0 && `
-    ${TrackV} {
-      top: ${props.topPadding}px;
-    }
-  `}
-`;
-export const Inner = styled.div`
-  position: relative;
-
-  ${props => props.offset && `
-    padding-right: ${-props.offset}px;
-    padding-bottom: ${-props.offset}px;
-  `}
-`;