@stokr/components-library 0.5.4 → 0.5.5

package/dist/renderToBody/index.js

@@ -0,0 +1,2 @@
+export { default } from './renderToBody';
+export * from './renderToBody';

package/dist/renderToBody/renderToBody.js

@@ -0,0 +1,26 @@
+import { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+export class RenderToBody extends PureComponent {
+  componentDidMount() {
+    this.outsideWrapper = document.createElement('div');
+    document.body.appendChild(this.outsideWrapper);
+    this.renderOutsideBody();
+  }
+  componentDidUpdate() {
+    this.renderOutsideBody();
+  }
+  componentWillUnmount() {
+    ReactDOM.unmountComponentAtNode(this.outsideWrapper);
+    document.body.removeChild(this.outsideWrapper);
+  }
+  renderOutsideBody = () => {
+    const {
+      children
+    } = this.props;
+    ReactDOM.render(children, this.outsideWrapper);
+  };
+  render() {
+    return null;
+  }
+}
+export default RenderToBody;

package/dist/taxId/TaxId.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import TaxIdModal from './flow';
+
+// import { AlgoAdressSelect } from 'index'
+import { AuthProvider } from 'components/context/AuthContext';
+export default {
+  title: 'Components Library/Tax Id',
+  component: TaxIdModal,
+  argTypes: {
+    showFlow: {
+      type: 'boolean',
+      defaultValue: true
+    },
+    setShowFlow: {},
+    showBackButton: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    showSkipButton: {
+      type: 'boolean',
+      defaultValue: false
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(AuthProvider, null, /*#__PURE__*/React.createElement(TaxIdModal, args));
+export const TaxIdModalFlow = Template.bind({});
+export const TaxIdFlowWithBackButton = Template.bind({});
+TaxIdFlowWithBackButton.args = {
+  showBackButton: true,
+  showSkipButton: true
+};

package/dist/taxId/complete.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Text from 'components/Text/Text.styles';
+import { navigate } from '@reach/router';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import { TextButton } from 'components/TextLink/TextLink.styles';
+import Button from 'components/Button/Button.styles';
+const RegisterTaxIdComplete = ({
+  showBackButton,
+  onClick = () => {}
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showBackButton && /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingVertical: true
+  }, /*#__PURE__*/React.createElement(TextButton, {
+    onClick: () => navigate('/verify-identity')
+  }, "Back to verify identity")), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h1", null, "Your Tax Id has been submitted"), /*#__PURE__*/React.createElement("p", null, "You have successfully submitted your Tax ID information on STOKR. You will be ready to invest once you have completed all required steps on your checklist. Please continue!"))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingTop: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClick
+  }, "Continue")));
+};
+export default RegisterTaxIdComplete;

package/dist/taxId/flow.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Modal, ModalInner } from 'components/Modal/Modal';
+import RegisterTaxId from './register-taxid';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import RegisterTaxIdComplete from './complete';
+const RegisterTaxIdFlow = ({
+  showFlow,
+  setShowFlow,
+  showBackButton,
+  showSkipButton
+}) => {
+  const [showComplete, setShowComplete] = useState(false);
+  return /*#__PURE__*/React.createElement(Modal, {
+    fullscreen: true,
+    isOpen: showFlow,
+    onClose: () => setShowFlow(false)
+  }, /*#__PURE__*/React.createElement(ModalInner, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/React.createElement(ComponentScroll, null, showComplete ? /*#__PURE__*/React.createElement(RegisterTaxIdComplete, {
+    showBackButton: showBackButton,
+    onClick: () => {
+      setShowComplete(false);
+      setShowFlow(false);
+    }
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RegisterTaxId, {
+    setShowComplete: setShowComplete,
+    showBackButton: showBackButton,
+    showSkipButton: showSkipButton
+  })))));
+};
+export default RegisterTaxIdFlow;

package/dist/taxId/index.js

@@ -0,0 +1,4 @@
+import RegisterTaxId from './register-taxid';
+import RegisterTaxIdFlow from './flow';
+import RegisterTaxIdComplete from './complete';
+export { RegisterTaxId, RegisterTaxIdFlow, RegisterTaxIdComplete };

package/dist/taxId/register-taxid.js

@@ -0,0 +1,156 @@
+import React, { useContext, useState } from 'react';
+import { navigate } from '@reach/router';
+import styled from 'styled-components/macro';
+import Text from 'components/Text/Text.styles';
+import * as Yup from 'yup';
+import { Formik } from 'formik';
+import Input from 'components/Input/Input';
+import Form, { FormField, FormError } from 'components/Form/Form';
+import ToDoTask from 'components/ToDoList/ToDoListTask';
+import { ToDoTaskState } from 'components/ToDoList/ToDoList';
+import { iconsMap } from 'components/Icon/Icon.style';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import { TextButton } from 'components/TextLink/TextLink.styles';
+import Button from 'components/Button/Button.styles';
+import CryptoAddressWrapper from 'components/CryptoAddressWrapper/CryptoAddressWrapper';
+import RefreshButton from 'components/RefreshButton/RefreshButton';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import FAQ from 'components/FAQ/FAQ';
+import { AuthContext } from 'components/context/AuthContext';
+const LiquidDescription = styled.div`
+  li {
+    font-size: 20px !important;
+    line-height: 1.5em;
+
+    img {
+      vertical-align: middle;
+      padding-bottom: 2px;
+    }
+  }
+`;
+const RegisterTaxId = ({
+  setShowComplete = () => {},
+  showBackButton,
+  showSkipButton
+}) => {
+  const {
+    user = {}
+  } = useContext(AuthContext);
+  const {
+    taxId
+  } = user;
+  const {
+    updateUser
+  } = useContext(AuthContext);
+  const [isUpdatingUser, setIsUpdatingUser] = useState(false);
+  const [error, setError] = useState('');
+  const initialValues = {
+    taxId: ''
+  };
+  const validationSchema = Yup.object().shape({
+    taxId: Yup.string().required('Oops, this can‘t be blank')
+  });
+  const handleOnSubmit = async e => {
+    setIsUpdatingUser(true);
+    try {
+      await updateUser({
+        taxId: e.taxId
+      });
+      setShowComplete(true);
+    } catch (error) {
+      setError('Something went wrong. Try again.');
+      setIsUpdatingUser(false);
+    }
+  };
+  const onRefreshClick = () => {
+    setError(false);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showBackButton && /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingVertical: true
+  }, /*#__PURE__*/React.createElement(TextButton, {
+    onClick: () => navigate('/verify-identity')
+  }, "Back to verify identity")), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(LiquidDescription, null, /*#__PURE__*/React.createElement("h1", null, "Provide your tax id"), /*#__PURE__*/React.createElement("p", null, "Depending on the offering you want to invest in, you may need to provide your tax ID. This step is optional and you will have to add it later on from your investor dashboard. Please keep in mind that you won't be allowed to invest in some offerings without providing your tax ID.")))), taxId && /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, "You have successfully submitted your Tax ID information."))), !isUpdatingUser && !error && !taxId && /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Formik, {
+    initialValues: initialValues,
+    validationSchema: validationSchema,
+    onSubmit: handleOnSubmit
+  }, ({
+    values,
+    errors,
+    touched,
+    handleChange,
+    handleBlur
+  }) => {
+    const submitDisabled = !values.taxId;
+    return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true
+    }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, {
+      id: "tax-id",
+      name: "taxId",
+      type: "input",
+      label: "enter your tax id",
+      value: values.taxId,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      error: !!errors.taxId,
+      touched: !!touched.taxId
+    }), /*#__PURE__*/React.createElement(FormError, {
+      show: errors.taxId && touched.taxId
+    }, errors.taxId))), /*#__PURE__*/React.createElement("br", null), !taxId && /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      minWidth: "230px",
+      type: "submit",
+      disabled: submitDisabled || isUpdatingUser || taxId
+    }, "Submit")));
+  })), (isUpdatingUser || error) && /*#__PURE__*/React.createElement(ComponentWrapper, {
+    borderTop: true,
+    borderBottom: true,
+    center: true
+  }, /*#__PURE__*/React.createElement(CryptoAddressWrapper, {
+    noFailedIcon: true,
+    relative: true,
+    refresh: isUpdatingUser && 'Please wait while we submit your Tax ID.',
+    failed: error
+  })), error && /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(RefreshButton, {
+    onClick: onRefreshClick
+  }, "TRY AGAIN")), taxId && /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingTop: true
+  }, /*#__PURE__*/React.createElement(ToDoTask, {
+    title: "Tax ID",
+    message: "You tax ID is submitted",
+    state: ToDoTaskState.APPROVED,
+    icon: iconsMap.check
+  })), showSkipButton && /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingTop: true
+  }, /*#__PURE__*/React.createElement(TextButton, {
+    onClick: () => {
+      navigate('/risk-questionnaire');
+    }
+  }, taxId ? 'Continue' : "I'll do this later")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingBottom: true
+  }, /*#__PURE__*/React.createElement(SectionTitle, null, "Frequently Asked Questions")), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, {
+    items: [{
+      title: 'Why do I need to provide my Tax ID?',
+      content: `Luxembourg 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. 
+As a result, some of the Issuers on STOKR will be required to report information on their  Noteholders to comply with the CRS due diligence and reporting requirements, as adopted by the CRS Act. The Issuer is required to annually report to the Luxembourg tax authorities personal and financial information related, 
+inter alia, to the identification of, holdings by and payments made to certain Noteholders qualifying as Reportable Persons (each, a Reportable Person) being (i) Individuals resident of a reportable jurisdiction, i.e. an EU Member State or a third country listed in a Grand-Ducal Regulation, (ii) Certain entities resident of a reportable jurisdiction (unless exempt from reporting), and (iii) Controlling Persons of passive non-financial entities (NFEs) which are themselves Reportable Persons. 
+This information, as exhaustively set out in Annex I of the CRS Act, will include personal data related to the Reportable Persons. 
+In this respect, Noteholders may be required to provide additional information to the Issuer to enable it to satisfy its obligations under the CRS. Failure to provide requested information may subject a Noteholder to liability for any resulting penalties or other charges and/or mandatory termination of its holding of Notes. 
+`
+    }]
+  })), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, {
+    items: [{
+      title: 'How will my information be used?',
+      content: `The Issuer, or the Management Company of the Issuer if applicable, acting on behalf of the Issuer, is responsible for the processing of personal data and each Noteholder has among others the right to access the data communicated to the Luxembourg tax authorities and to correct such data (if necessary). Any data obtained by the Issuer are to be processed in accordance with the applicable data protection legislation. 
+The Noteholders are further informed that the Information related to Reportable Persons will be disclosed to the Luxembourg tax authorities annually for the purposes set out in the CRS Act. `
+    }]
+  })), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, {
+    items: [{
+      title: "What if I'd like to do this later?",
+      content: 'You can always skip this step and complete it from the Checklist in your Investor Dashboard at a later point in time. However, you will not be able to invest before doing so and being verified.'
+    }]
+  })));
+};
+export default RegisterTaxId;

package/dist/video/Video.js

@@ -0,0 +1,274 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import * as sc from 'constants/style';
+import { breakpoint } from 'utils/breakpoint';
+import { CSSTransition } from 'react-transition-group';
+import { RenderToBody } from 'components/renderToBody';
+import { X } from 'components/icons';
+const Wrapper = styled.div`
+  position: relative;
+  cursor: pointer;
+  ${({
+  videoStyle
+}) => videoStyle}
+
+  ${({
+  isInvestingExpanded
+}) => isInvestingExpanded && css`
+      align-items: center;
+      display: flex;
+    `}
+`;
+const zIndex = 9999;
+const LightboxVideo = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: ${zIndex};
+
+  &::before {
+    display: block;
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: white;
+    opacity: 0.8;
+    z-index: ${zIndex - 1};
+    transform-origin: left center;
+  }
+  &.lightbox-enter::before {
+    transform: scaleX(0.01);
+    transition: all ${props => props.lightboxAnimationLen}ms
+      cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  }
+  &.lightbox-enter-active::before {
+    transform: scaleX(1);
+  }
+  &.lightbox-exit::before {
+    transform: scaleX(1);
+    transform-origin: right center;
+  }
+  &.lightbox-exit-active::before {
+    transform: scaleX(0);
+    transition: all ${props => props.lightboxAnimationLen / 2}ms
+      cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    transition-delay: ${props => props.videoAnimationLen / 2}ms;
+  }
+
+  video {
+    max-width: 80vw;
+    max-height: 90vh;
+    position: relative;
+    z-index: ${zIndex + 1};
+    box-shadow: 0 0 20px 1px black;
+    transition: all 0.4s;
+
+    ${breakpoint.below('tablet')} {
+      max-width: 88vw;
+    }
+
+    @media screen and (max-width: 768px) {
+      max-width: 95vw;
+    }
+  }
+  &.lightbox-enter video {
+    transform: scale(0.8) translate3d(-12%, 0, 0);
+    opacity: 0.01;
+    transition: all ${props => props.videoAnimationLen}ms
+      cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    transition-delay: ${props => props.lightboxAnimationLen * 0.75}ms;
+  }
+  &.lightbox-enter-active video {
+    transform: scale(1) translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  &.lightbox-exit video {
+    transform: scale(1) translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  &.lightbox-exit-active video {
+    transform: scale(0.8) translate3d(13%, 0, 0);
+    opacity: 0;
+    transition: all ${props => props.videoAnimationLen * 0.75}ms
+      cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  }
+`;
+const PlayButton = styled.div`
+  position: absolute;
+  height: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: ${({
+  isSmallCard
+}) => isSmallCard ? 'flex-start' : 'center'};
+  z-index: 10;
+
+  ${({
+  isCenter
+}) => isCenter && css`
+      height: calc(100% - 48px);
+    `}
+
+  ${({
+  isInvestingExpanded
+}) => isInvestingExpanded && css`
+      bottom: unset;
+    `}
+
+  img {
+    transition: transform 0.3s;
+    position: relative;
+    top: ${({
+  isSmallCard
+}) => isSmallCard ? '100px' : '0px'};
+
+    @media screen and (min-width: 769px) {
+      top: ${({
+  isSmallCard
+}) => isSmallCard ? '132px' : '0px'};
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    img {
+      transform: scale(1.25);
+    }
+  }
+`;
+const CloseButtonContainer = styled.div`
+  align-items: center;
+  background: ${sc.BLUE_BASE_HEX};
+  cursor: pointer;
+  display: flex;
+  height: 48px;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 48px;
+  transition: all 0.2s;
+  z-index: 99999;
+
+  &:hover {
+    background: transparent;
+
+    svg {
+      transform: rotate(-180deg);
+      fill: #000;
+    }
+  }
+
+  svg {
+    fill: #fff;
+    transition: all 0.2s;
+  }
+`;
+export const StyledSlideImage = styled.div`
+  background-size: cover;
+  background-position: center;
+  height: 400px;
+  width: 100%;
+  @media screen and (max-width: 480px) {
+    height: 250px;
+  }
+`;
+export const Video = props => {
+  const [isPlaying, setIsPlaying] = useState(props.autoplay);
+  const {
+    src,
+    poster,
+    videoStyle,
+    isCenter,
+    isSmallCard,
+    isInvestingExpanded,
+    noPlayButton,
+    play,
+    prevProps,
+    onOpen,
+    onClose,
+    lightboxAnimationLen,
+    videoAnimationLen,
+    animationLen,
+    ...otherProps
+  } = props;
+  props.lightboxAnimationLen = 550;
+  props.videoAnimationLen = 440;
+  props.animationLen = props.lightboxAnimationLen + props.videoAnimationLen;
+  const mounted = useRef(); //initializing .current for componentDidUpdate
+
+  useEffect(() => {
+    if (!mounted.current) {
+      // do componentDidMount logic
+      mounted.current = true;
+    } else {
+      // do componentDidUpdate logic
+      if (prevProps.play !== play) {
+        play ? togglePlay() : toggleStop();
+      }
+    }
+  });
+  const togglePlay = () => {
+    setIsPlaying(true);
+    onOpen && onOpen();
+    document.body.style.overflow = 'hidden';
+  };
+  const toggleStop = () => {
+    setIsPlaying(false);
+    onClose && onClose();
+    document.body.style.overflow = 'unset';
+  };
+  delete otherProps.onOpen;
+  delete otherProps.onClose;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    onClick: !noPlayButton ? this.togglePlay : () => {},
+    videoStyle: videoStyle,
+    isInvestingExpanded: isInvestingExpanded
+  }, poster && poster, !noPlayButton && /*#__PURE__*/React.createElement(PlayButton, {
+    isCenter: isCenter,
+    isSmallCard: isSmallCard,
+    isInvestingExpanded: isInvestingExpanded
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "Play video",
+    src: require('./img/play-btn.svg')
+  })), /*#__PURE__*/React.createElement(RenderToBody, null, /*#__PURE__*/React.createElement(CSSTransition, {
+    in: isPlaying,
+    timeout: animationLen,
+    classNames: "lightbox",
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(LightboxVideo, {
+    isPlaying: isPlaying,
+    onClick: toggleStop,
+    lightboxAnimationLen: lightboxAnimationLen,
+    videoAnimationLen: videoAnimationLen
+  }, /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(X, null)), /*#__PURE__*/React.createElement("video", _extends({
+    ref: video => video && video.play(),
+    controls: true,
+    src: src
+  }, otherProps))))));
+};
+Video.propTypes = {
+  src: PropTypes.string.isRequired,
+  autoplay: PropTypes.bool,
+  // Hack to let the component know the default attribute
+  poster: PropTypes.any,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func
+};
+export default Video;
+
+//doublecheck: do not know whether this is working, no working storybook to check.

package/dist/video/Video.stories.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import Video from './Video';
+export default {
+  title: 'Components Library/Video',
+  component: Video,
+  argTypes: {
+    src: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    autoplay: {
+      type: 'boolean',
+      defaultValue: true
+    },
+    poster: {
+      type: 'any'
+    },
+    onOpen: {
+      type: 'function',
+      action: 'onOpen'
+    },
+    onClose: {
+      type: 'function',
+      action: 'onClose'
+    },
+    isPlaying: {
+      type: 'boolean',
+      defaultValue: false
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(Video, args);
+
+// export const VideoDefault = Template.bind({})
+// VideoDefault.args = {}
+
+export const VideoMP4 = Template.bind({});
+VideoMP4.args = {
+  src: '/static/videos/Capybara-with-mandarin orange-on-head.mp4'
+};
+
+// doublecheck:
+//src should be mp4
+// constant styles(<found and copied folder to CL)   and breakpoint from utils breaking storybook

package/dist/video/img/play-btn.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60" viewBox="0 0 60 60"><defs><path id="ftiva" d="M392 327c0-13.255 10.745-24 24-24s24 10.745 24 24-10.745 24-24 24-24-10.745-24-24z"/><path id="ftivd" d="M417.5 323l6.5 8h-13z"/><mask id="ftivc" width="2" height="2" x="-1" y="-1"><path fill="#fff" d="M392 303h48v48h-48z"/><use xlink:href="#ftiva"/></mask><filter id="ftivb" width="82" height="84" x="375" y="286" filterUnits="userSpaceOnUse"><feOffset dy="2" in="SourceGraphic" result="FeOffset1029Out"/><feGaussianBlur in="FeOffset1029Out" result="FeGaussianBlur1030Out" stdDeviation="2.8 2.8"/></filter></defs><g><g transform="translate(-386 -299)"><g><g><g><g filter="url(#ftivb)"><use fill="none" stroke-opacity=".16" stroke-width="0" mask="url(&quot;#ftivc&quot;)" xlink:href="#ftiva"/><use fill-opacity=".16" xlink:href="#ftiva"/></g><use fill="#ee220d" xlink:href="#ftiva"/></g><g transform="rotate(90 417.5 327)"><use fill="#fff" xlink:href="#ftivd"/></g></g></g></g></g></svg>

package/dist/video/index.js

@@ -0,0 +1,2 @@
+export { default } from './Video';
+export * from './Video';