@stokr/components-library 3.0.77 → 3.1.0-alpha.1

package/dist/components/StepsProgress/StepsProgress.js

@@ -1,67 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import { useNavigate } from "react-router-dom";
-import { Container, Wrap, Items, Item } from "./StepsProgress.styles.js";
-import { walletTypes } from "../../constants/globalVariables.js";
-const StepsProgressSignup = (props) => {
-  let navigate = useNavigate();
-  const { user = {} } = props;
-  const { country, kyc_status, self_declaration, wallets = [] } = user;
-  const KYCNotDone = !kyc_status || kyc_status === "Reaply" || kyc_status === "Cancelled" || kyc_status === "Draft";
-  const hasLiquidWallet = wallets?.filter((wallet) => wallet.type === walletTypes.LIQUID).length > 0;
-  const isActiveStep = (path) => typeof window !== "undefined" ? window.location.pathname.includes(path) : false;
-  const items = [
-    {
-      id: "country",
-      handleClick: () => navigate("/country-of-residence"),
-      isDone: !!country,
-      isActive: isActiveStep("/country-of-residence")
-    },
-    {
-      id: "verify",
-      handleClick: () => navigate("/verify-identity"),
-      isDone: !KYCNotDone,
-      isActive: isActiveStep("/verify-identity")
-    },
-    {
-      id: "self-certification",
-      handleClick: () => navigate("/self-certification"),
-      isDone: self_declaration?.confirmed === true,
-      isActive: isActiveStep("/self-certification")
-    },
-    {
-      id: "ampID",
-      handleClick: () => navigate("/register-liquid-securities"),
-      isDone: hasLiquidWallet,
-      isActive: isActiveStep("/register-liquid-securities")
-    }
-  ];
-  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Wrap, { children: /* @__PURE__ */ jsx(Items, { children: items.map((item) => /* @__PURE__ */ jsx(
-    Item,
-    {
-      isDone: item.isDone,
-      isActive: item.isActive,
-      onClick: () => {
-        if (item.handleClick) {
-          item.handleClick(item.id);
-        }
-      }
-    },
-    item.id
-  )) }) }) });
-};
-const StepsProgressHeader = ({ items, doneIndex, activeIndex }) => /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Wrap, { children: /* @__PURE__ */ jsx(Items, { children: items?.map((item, key) => /* @__PURE__ */ jsx(
-  Item,
-  {
-    isDone: key <= doneIndex,
-    isActive: key === activeIndex,
-    onClick: () => {
-      item.handleClick?.(item.id);
-    }
-  },
-  item.id
-)) }) }) });
-export {
-  StepsProgressHeader,
-  StepsProgressSignup
-};

package/dist/components/StepsProgress/StepsProgress.styles.js

@@ -1,105 +0,0 @@
-import styled from "styled-components";
-import rwd from "../../styles/rwd.js";
-import { colors } from "../../styles/colors.js";
-const Container = styled.div`
-  display: block;
-  width: 100%;
-  height: 100%;
-`;
-const Wrap = styled.div`
-  display: block;
-  margin: 0 auto;
-`;
-const Items = styled.div`
-  display: flex;
-  height: 100%;
-  font-size: 0;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: center;
-  margin: 0 -6px;
-  text-align: center;
-
-  ${rwd.Medium`
-    display: block;
-  `}
-`;
-const Item = styled.div.withConfig({
-  shouldForwardProp: (props) => !["isDone", "isActive"].includes(props)
-})`
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  padding: 0;
-  flex: 1;
-  margin: 0 4px;
-  height: 32px;
-  max-width: 32px;
-  cursor: pointer;
-
-  &:before {
-    z-index: 0;
-    content: '';
-    display: block;
-    width: 100%;
-    height: 4px;
-    position: absolute;
-    top: 14px;
-    left: 0;
-    border-radius: 3px;
-    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.05);
-    background-color: ${colors.lightGrey};
-  }
-
-  &:after {
-    z-index: 1;
-    content: '';
-    display: block;
-    width: 100%;
-    height: 4px;
-    position: absolute;
-    top: 14px;
-    left: 0;
-    border-radius: 3px;
-    background-color: transparent;
-    transition: background-color 0.2s;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:hover:after {
-    background-color: ${colors.black};
-  }
-
-  ${(props) => props.isDone && `
-    &:after {
-      background-color: ${colors.progressGreen};
-    }
-
-    &:hover:after {
-      background-color: ${colors.black};
-    }
-  `}
-
-  ${(props) => props.isActive && `
-    &:after {
-      background-color: ${colors.grey2};
-    }
-
-    &:hover:after {
-      background-color: ${colors.black};
-    }
-  `}
-
-  ${rwd.Medium`
-    width: 32px;
-  `}
-`;
-export {
-  Container,
-  Item,
-  Items,
-  Wrap
-};

package/dist/components/TermsModal/TermsModal.js

@@ -1,145 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default from "react";
-import { Formik } from "formik";
-import * as Yup from "yup";
-import parse from "html-react-parser";
-import stdin_default$1 from "../ComponentScroll/ComponentScroll.js";
-import { Modal } from "../Modal/Modal.js";
-import { Row, Column } from "../Grid/Grid.styles.js";
-import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
-import { Wrapper, Header, HeaderTitle, Body } from "./_styles.js";
-import styled from "styled-components";
-import theme from "../../styles/theme.js";
-import { ModalInner, ModalBack } from "../Modal/Modal.styles.js";
-const StyledPrivacyText = styled.div.withConfig({
-  shouldForwardProp: (props) => !["thridParties"].includes(props)
-})`
-  && {
-    width: 100%;
-
-    p {
-      color: ${theme.cBlack};
-      font-size: 16px;
-      line-height: 1.5;
-      font-weight: 300;
-      margin: 0;
-      padding-bottom: 10px;
-      font-style: normal;
-      font-stretch: normal;
-      letter-spacing: 0.6px;
-    }
-    a {
-      text-decoration: none;
-      color: ${theme.cBlack};
-      font-weight: 300;
-      word-break: break-all !important;
-    }
-
-    h4 {
-      font-size: 17.2px !important;
-      font-weight: 700 !important;
-      line-height: 1.28571em;
-      letter-spacing: normal;
-      position: relative;
-      margin-top: 29px;
-      margin-bottom: 16px;
-    }
-
-    table {
-      border-collapse: collapse;
-      margin: 32px 0;
-      font-size: 16px;
-
-      tr {
-        td:first-child {
-          width: ${(props) => props.thirdParties ? "30%" : "40%"};
-          text-align: center;
-        }
-        td:last-child {
-          width: ${(props) => props.thirdParties ? "70%" : "60%"};
-        }
-      }
-
-      td,
-      th {
-        border: 1px solid #2e2e2e;
-        padding: 10px;
-
-        li {
-          margin-bottom: 0;
-        }
-      }
-    }
-
-    ul {
-      list-style-type: disclosure-closed;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    li {
-      padding: 0 0 0 32px;
-      color: ${theme.cBlack};
-      font-size: 0.75rem;
-      letter-spacing: normal;
-      line-height: 1.31rem;
-      font-weight: 200;
-      margin-bottom: 16px;
-      position: relative;
-      /* top: 1px; */
-
-      font-size: 16px !important;
-      font-weight: 300;
-      font-style: normal;
-      font-stretch: normal;
-      line-height: 1.5 !important;
-      letter-spacing: 0.6px;
-
-      a {
-        word-break: break-all !important;
-      }
-
-      &:before {
-        content: '';
-        position: absolute;
-        width: 10px;
-        height: 10px;
-        background: #0050ca;
-        border-radius: 100px;
-        left: 0;
-        top: 3px;
-        margin-top: 0.4rem;
-      }
-    }
-  }
-`;
-class TermsModal extends React__default.Component {
-  // state = { popupOpen: false }
-  validationSchema = Yup.object().shape({
-    termsAccepted: Yup.bool().test("termsAccepted", "Agreement is required", (value) => value === true).required("Agreement is required")
-  });
-  // handlePopup = (isOpen, values) => {
-  //   const buttonDisabled = !values.termsAccepted
-  //   this.setState({
-  //     popupOpen: buttonDisabled ? isOpen : false,
-  //   })
-  // }
-  render() {
-    const { isModalOpen, onModalClose, onFormSend, onModalSwitch, termsData } = this.props;
-    return /* @__PURE__ */ jsx(Formik, { onSubmit: onFormSend, validationSchema: this.validationSchema, children: () => {
-      return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, children: /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsxs(ModalInner, { noPadding: true, isMobile: true, children: [
-        /* @__PURE__ */ jsx(ModalBack, { onClick: onModalSwitch }),
-        /* @__PURE__ */ jsxs(Wrapper, { children: [
-          /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderTitle, { children: "STOKR PRIVACY TERMS" }) }),
-          /* @__PURE__ */ jsx(Body, { noHorizontalPadding: true, children: /* @__PURE__ */ jsx(stdin_default$1, { children: /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, children: /* @__PURE__ */ jsx(StyledPrivacyText, { children: termsData && parse(termsData.text) }) }) }) })
-        ] })
-      ] }) }) }) });
-    } });
-  }
-}
-var stdin_default = TermsModal;
-export {
-  TermsModal,
-  stdin_default as default
-};

package/dist/components/TermsModal/_styles.js

@@ -1,313 +0,0 @@
-import styled, { css } from "styled-components";
-import rwd from "../../styles/rwd.js";
-import stdin_default from "../Button/Button.styles.js";
-import "../Form/Form.js";
-import { Row } from "../Grid/Grid.styles.js";
-import { Text } from "../Text/Text.styles.js";
-import { Icon, iconsMap } from "../Icon/Icon.style.js";
-import { FormField, FormError } from "../Form/Form.styles.js";
-const Wrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 33px 0;
-
-  ${Text} {
-    p {
-      ${rwd.XLarge`
-        font-size: 16px;
-      `}
-    }
-  }
-`;
-const Header = styled.div`
-  min-height: 82px;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 12px 24px;
-  flex-shrink: 0;
-
-  ${rwd.Large`
-    padding: 21px 64px;
-  `}
-`;
-const HeaderTitle = styled.div.withConfig({
-  shouldForwardProp: (props) => !["withMargin"].includes(props)
-})`
-  font-family: 'Open Sans';
-  font-weight: 800;
-  font-size: 22px;
-  line-height: 1.27em;
-  letter-spacing: 0.8px;
-  text-transform: uppercase;
-  ${(props) => props.withMargin && "margin-top: 16px;"}
-`;
-styled.div`
-  margin: 0 auto;
-  padding: 8px 0;
-
-  & > * {
-    display: inline-block !important;
-  }
-
-  ${rwd.Large`
-    margin-right: 0;
-  `}
-
-  ${stdin_default}${stdin_default}${stdin_default} {
-    margin-right: 16px;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-`;
-const Body = styled.div.withConfig({
-  shouldForwardProp: (props) => !["noVerticalPadding", "noHorizontalPadding", "form"].includes(props)
-})`
-  padding: 21px 24px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  overflow-y: auto;
-
-  @media screen and (max-width: 767px) {
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-  }
-
-  ${(props) => props.noVerticalPadding && `
-    padding-top: 0!important;
-    padding-bottom: 0!important;
-  `}
-
-  ${(props) => props.noHorizontalPadding && `
-    padding-left: 0;
-    padding-right: 0;
-  `}
-
-  ${(props) => props.form && css`
-      padding: 21px 48px;
-      justify-content: flex-start;
-
-      ${Row} {
-        flex-shrink: 0;
-      }
-    `}
-`;
-styled.div`
-  ${FormField} {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-
-    ${rwd.Medium`
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 44px;
-    `}
-
-    + ${FormField} {
-      padding-top: 32px;
-
-      ${rwd.Medium`
-        padding-top: 0;
-      `}
-    }
-
-    ${FormError} {
-      white-space: nowrap;
-      padding-left: 28px;
-    }
-  }
-`;
-styled.div.withConfig({
-  shouldForwardProp: (props) => !["faceScan"].includes(props)
-})`
-  text-align: center;
-  margin: 0 auto;
-  font-size: 11px;
-  font-weight: bold;
-  line-height: 1.82;
-  letter-spacing: 2px;
-
-  ${(props) => props.faceScan && `
-    margin-top: 20px;
-  `}
-`;
-styled.div.withConfig({
-  shouldForwardProp: (props) => ![
-    "verticalPadding",
-    "horizontalPadding",
-    "formInner",
-    "withSeparator",
-    "verticalCenter",
-    "verticalSpaceAround"
-  ].includes(props)
-})`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-
-  ${(props) => props.verticalPadding && `
-    padding-top: 40px;
-    padding-bottom: 40px;
-  `}
-
-  ${(props) => props.horizontalPadding && `
-    padding-left: 36px;
-    padding-right: 36px;
-  `}
-
-  ${(props) => props.formInner && `
-    padding-left: 18px;
-    padding-right: 18px;
-    align-items: stretch;
-  `}
-  
-  ${(props) => props.withSeparator && `
-    border-bottom: 1px solid ${props.theme.cLightGrey};
-  `}
-
-  ${(props) => props.verticalCenter && `
-    justify-content: center;
-  `}
-
-  ${(props) => props.verticalSpaceAround && `
-    justify-content: space-around;
-  `}
-
-  ${rwd.Medium`
-    ${(props) => props.withSeparator && `
-      border-bottom: 0;
-      border-right: 1px solid ${props.theme.cLightGrey};
-    `}
-  `}
-`;
-styled.input.attrs((props) => ({
-  type: "file",
-  ...props
-}))`
-  visibility: hidden;
-  position: absolute;
-  width: 0.1px;
-  height: 0.1px;
-  z-index: -1;
-`;
-styled(stdin_default).attrs({
-  as: "label",
-  type: void 0
-})`
-  position: relative;
-  word-break: break-all;
-`;
-styled(Icon).attrs({
-  icon: iconsMap.trash
-})`
-  position: absolute;
-  top: 50%;
-  right: 0px;
-  transform: translateY(-50%);
-  font-size: 16px;
-  cursor: pointer;
-  transition: 0.3s color;
-  color: ${(props) => props.theme.cWarning};
-  border-radius: 50%;
-  border: 1px solid ${(props) => props.theme.cLightGrey};
-  padding: 10px;
-
-  &:hover {
-    color: ${(props) => props.theme.cPrimary};
-  }
-`;
-styled(Icon).withConfig({
-  shouldForwardProp: (props) => !["isHidden"].includes(props)
-}).attrs({
-  icon: iconsMap.check
-})`
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-  color: ${(props) => props.theme.cSuccess};
-  margin: auto;
-  font-size: 18px;
-
-  ${(props) => props.isHidden && `
-    opacity: 0;
-  `}
-`;
-styled.ul`
-  list-style-type: none;
-  padding: 0;
-  font-size: 12px;
-  width: 100%;
-`;
-styled.li`
-  padding: 0 46px 0 8px;
-  margin-right: 8px;
-  position: relative;
-  word-break: break-all;
-`;
-const DocumentScanButtonsStyle = css`
-  width: 40px;
-  height: 40px;
-  margin-top: 20px;
-  margin-bottom: 10px;
-  border-radius: 50%;
-  background: ${(props) => props.theme.cPrimary};
-  color: ${(props) => props.theme.cWhite};
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-  font-size: 18px;
-
-  & > svg {
-    fill: ${(props) => props.theme.cWhite};
-    stroke: ${(props) => props.theme.cWhite};
-  }
-`;
-styled.button`
-  ${DocumentScanButtonsStyle};
-
-  & > svg {
-    width: 22px !important;
-    height: 23px !important;
-  }
-`;
-styled.button.attrs({
-  className: "ion ion-md-checkmark"
-})`
-  ${DocumentScanButtonsStyle};
-`;
-styled.div`
-  width: 100%;
-  height: 100%;
-  background: rgba(201, 255, 233, 0.6);
-  position: relative;
-`;
-styled(Row)`
-  padding-left: 18px;
-  padding-right: 18px;
-  padding-top: 64px;
-`;
-styled.div`
-  padding-top: 32px;
-  margin: auto;
-
-  ${rwd.Medium`
-    padding-top: 0;
-    margin-right: 0;
-  `}
-`;
-export {
-  Body,
-  Header,
-  HeaderTitle,
-  Wrapper
-};