@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

package/src/components/Svgs/TTS-Icons/BackwardIconSvg.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export function BackwardSvgIcon({ isDarkMode }) {
+  const fill = isDarkMode ? "white" : "black";
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <path
+        d="M16.0003 28.6667C14.4277 28.6667 12.9542 28.3692 11.58 27.7743C10.2055 27.1795 9.00722 26.3709 7.98499 25.3487C6.96277 24.3265 6.15421 23.1281 5.55933 21.7537C4.96444 20.3795 4.66699 18.906 4.66699 17.3333H6.66699C6.66699 19.9333 7.57255 22.1389 9.38366 23.95C11.1948 25.7611 13.4003 26.6667 16.0003 26.6667C18.6003 26.6667 20.8059 25.7611 22.617 23.95C24.4281 22.1389 25.3337 19.9333 25.3337 17.3333C25.3337 14.7333 24.4281 12.5278 22.617 10.7167C20.8059 8.90556 18.6003 8.00001 16.0003 8.00001H15.6463L17.7643 10.118L16.3593 11.564L11.7953 6.98734L16.385 2.41034L17.79 3.85634L15.6463 6.00001H16.0003C17.573 6.00001 19.0464 6.29745 20.4207 6.89234C21.7951 7.48723 22.9934 8.29578 24.0157 9.31801C25.0379 10.3402 25.8464 11.5386 26.4413 12.913C27.0362 14.2872 27.3337 15.7607 27.3337 17.3333C27.3337 18.906 27.0362 20.3795 26.4413 21.7537C25.8464 23.1281 25.0379 24.3265 24.0157 25.3487C22.9934 26.3709 21.7951 27.1795 20.4207 27.7743C19.0464 28.3692 17.573 28.6667 16.0003 28.6667ZM12.2823 21.1283V15.1283H10.3593V13.5383H13.872V21.1283H12.2823ZM16.7953 21.1283C16.4176 21.1283 16.1009 21.0006 15.8453 20.745C15.5898 20.4895 15.462 20.1728 15.462 19.795V14.8717C15.462 14.4939 15.5898 14.1772 15.8453 13.9217C16.1009 13.6661 16.4176 13.5383 16.7953 13.5383H19.308C19.6858 13.5383 20.0024 13.6661 20.258 13.9217C20.5136 14.1772 20.6413 14.4939 20.6413 14.8717V19.795C20.6413 20.1728 20.5136 20.4895 20.258 20.745C20.0024 21.0006 19.6858 21.1283 19.308 21.1283H16.7953ZM17.2053 19.5383H18.8977C18.949 19.5383 18.9876 19.5256 19.0133 19.5C19.0389 19.4745 19.0517 19.436 19.0517 19.3847V15.282C19.0517 15.2307 19.0389 15.1922 19.0133 15.1667C18.9876 15.1411 18.949 15.1283 18.8977 15.1283H17.2053C17.1542 15.1283 17.1158 15.1411 17.09 15.1667C17.0644 15.1922 17.0517 15.2307 17.0517 15.282V19.3847C17.0517 19.436 17.0644 19.4745 17.09 19.5C17.1158 19.5256 17.1542 19.5383 17.2053 19.5383Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}

package/src/components/Svgs/TTS-Icons/ClosePlayerIconSvg.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export function CloseIcon({ isDarkMode }) {
+  const fill = isDarkMode ? "white" : "black";
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <path
+        d="M8.53268 25.3333L6.66602 23.4667L14.1327 16L6.66602 8.53333L8.53268 6.66666L15.9994 14.1333L23.466 6.66666L25.3327 8.53333L17.866 16L25.3327 23.4667L23.466 25.3333L15.9994 17.8667L8.53268 25.3333Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}

package/src/components/Svgs/TTS-Icons/ForwordIconSvg.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export function ForwardSvgIcon({ isDarkMode }) {
+  const fill = isDarkMode ? "white" : "black";
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <path
+        d="M12.2823 21.1283V15.1283H10.3593V13.5383H13.872V21.1283H12.2823ZM16.7953 21.1283C16.4176 21.1283 16.1009 21.0006 15.8453 20.745C15.5898 20.4895 15.462 20.1728 15.462 19.795V14.8717C15.462 14.4939 15.5898 14.1772 15.8453 13.9217C16.1009 13.6661 16.4176 13.5383 16.7953 13.5383H19.308C19.6858 13.5383 20.0024 13.6661 20.258 13.9217C20.5136 14.1772 20.6413 14.4939 20.6413 14.8717V19.795C20.6413 20.1728 20.5136 20.4895 20.258 20.745C20.0024 21.0006 19.6858 21.1283 19.308 21.1283H16.7953ZM17.2053 19.5383H18.8977C18.949 19.5383 18.9876 19.5256 19.0133 19.5C19.0389 19.4745 19.0517 19.436 19.0517 19.3847V15.282C19.0517 15.2307 19.0389 15.1922 19.0133 15.1667C18.9876 15.1411 18.949 15.1283 18.8977 15.1283H17.2053C17.1542 15.1283 17.1158 15.1411 17.09 15.1667C17.0644 15.1922 17.0517 15.2307 17.0517 15.282V19.3847C17.0517 19.436 17.0644 19.4745 17.09 19.5C17.1158 19.5256 17.1542 19.5383 17.2053 19.5383ZM16.0003 28.6667C14.4277 28.6667 12.9542 28.3692 11.58 27.7743C10.2055 27.1795 9.00722 26.3709 7.98499 25.3487C6.96277 24.3265 6.15421 23.1281 5.55933 21.7537C4.96444 20.3795 4.66699 18.906 4.66699 17.3333C4.66699 15.7607 4.96444 14.2872 5.55933 12.913C6.15421 11.5386 6.96277 10.3402 7.98499 9.31801C9.00722 8.29578 10.2055 7.48723 11.58 6.89234C12.9542 6.29745 14.4277 6.00001 16.0003 6.00001H16.3543L14.2107 3.85634L15.6157 2.41034L20.2053 6.98734L15.6413 11.564L14.2363 10.118L16.3543 8.00001H16.0003C13.4003 8.00001 11.1948 8.90556 9.38366 10.7167C7.57255 12.5278 6.66699 14.7333 6.66699 17.3333C6.66699 19.9333 7.57255 22.1389 9.38366 23.95C11.1948 25.7611 13.4003 26.6667 16.0003 26.6667C18.6003 26.6667 20.8059 25.7611 22.617 23.95C24.4281 22.1389 25.3337 19.9333 25.3337 17.3333H27.3337C27.3337 18.906 27.0362 20.3795 26.4413 21.7537C25.8464 23.1281 25.0379 24.3265 24.0157 25.3487C22.9934 26.3709 21.7951 27.1795 20.4207 27.7743C19.0464 28.3692 17.573 28.6667 16.0003 28.6667Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}

package/src/components/Svgs/TTS-Icons/PauseIconSvg.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export function PauseSvgIcon({ isDarkMode }) {
+  const fill = isDarkMode ? "white" : "black";
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+      <path
+        d="M14.106 23.625H16.3556V12.375H14.106V23.625ZM19.6444 23.625H21.894V12.375H19.6444V23.625ZM18.0026 32.25C16.0316 32.25 14.179 31.876 12.4448 31.128C10.7105 30.38 9.202 29.3649 7.91925 28.0826C6.6365 26.8004 5.62088 25.2925 4.87237 23.559C4.12412 21.8255 3.75 19.9734 3.75 18.0026C3.75 16.0316 4.124 14.179 4.872 12.4448C5.62 10.7105 6.63513 9.202 7.91738 7.91925C9.19963 6.6365 10.7075 5.62088 12.441 4.87237C14.1745 4.12412 16.0266 3.75 17.9974 3.75C19.9684 3.75 21.821 4.124 23.5553 4.872C25.2895 5.62 26.798 6.63513 28.0808 7.91738C29.3635 9.19963 30.3791 10.7075 31.1276 12.441C31.8759 14.1745 32.25 16.0266 32.25 17.9974C32.25 19.9684 31.876 21.821 31.128 23.5553C30.38 25.2895 29.3649 26.798 28.0826 28.0808C26.8004 29.3635 25.2925 30.3791 23.559 31.1276C21.8255 31.8759 19.9734 32.25 18.0026 32.25ZM18 30C21.35 30 24.1875 28.8375 26.5125 26.5125C28.8375 24.1875 30 21.35 30 18C30 14.65 28.8375 11.8125 26.5125 9.4875C24.1875 7.1625 21.35 6 18 6C14.65 6 11.8125 7.1625 9.4875 9.4875C7.1625 11.8125 6 14.65 6 18C6 21.35 7.1625 24.1875 9.4875 26.5125C11.8125 28.8375 14.65 30 18 30Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}

package/src/components/Svgs/TTS-Icons/PlayIconSvg.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+export function PlaySvgIcon({ isDarkMode }) {
+  const fill = isDarkMode ? "white" : "black";
+  const contrastFill = isDarkMode ? "black" : "white";
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+      <circle cx="20" cy="20" r="10" fill={contrastFill} />
+      <path
+        d="M16.2493 26.7308L26.7302 20L16.2493 13.2692V26.7308ZM20.0023 35.8333C17.8123 35.8333 15.7538 35.4178 13.8268 34.5867C11.8999 33.7556 10.2238 32.6276 8.79851 31.2029C7.37324 29.7782 6.24477 28.1028 5.4131 26.1767C4.58171 24.2506 4.16602 22.1926 4.16602 20.0029C4.16602 17.8129 4.58157 15.7544 5.41268 13.8275C6.24379 11.9006 7.37171 10.2244 8.79643 8.79916C10.2212 7.37389 11.8966 6.24541 13.8227 5.41375C15.7488 4.58236 17.8067 4.16666 19.9964 4.16666C22.1864 4.16666 24.2449 4.58222 26.1718 5.41333C28.0988 6.24444 29.7749 7.37236 31.2002 8.79708C32.6255 10.2218 33.7539 11.8972 34.5856 13.8233C35.417 15.7494 35.8327 17.8074 35.8327 19.9971C35.8327 22.1871 35.4171 24.2456 34.586 26.1725C33.7549 28.0994 32.627 29.7756 31.2023 31.2008C29.7775 32.6261 28.1021 33.7546 26.176 34.5862C24.2499 35.4176 22.192 35.8333 20.0023 35.8333Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}

package/src/components/Svgs/TTS-Icons/ReplayIcon.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+export function ReplaySvgIcon({ isDarkMode }) {
+  const fill = isDarkMode ? "white" : "black";
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+      <g clipPath="url(#clip0_4459_3220)">
+        <circle cx="16" cy="16" r="12" fill="white" />
+        <path
+          d="M15.9993 2.66666C8.63935 2.66666 2.66602 8.64 2.66602 16C2.66602 23.36 8.63935 29.3333 15.9993 29.3333C23.3593 29.3333 29.3327 23.36 29.3327 16C29.3327 8.64 23.3593 2.66666 15.9993 2.66666ZM15.9993 24.6667C11.586 24.6667 7.99935 21.08 7.99935 16.6667H10.666C10.666 19.6133 13.0527 22 15.9993 22C18.946 22 21.3327 19.6133 21.3327 16.6667C21.3327 13.68 18.866 11.2133 15.786 11.3467L17.8793 13.44L15.9993 15.3333L10.666 10L15.9993 4.66666L17.8793 6.54666L15.746 8.68C20.3727 8.53333 23.9993 12.24 23.9993 16.6667C23.9993 21.08 20.4127 24.6667 15.9993 24.6667Z"
+          fill={fill}
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Svgs/back-arrow.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const BackArrow = ({ color = '#000', bgColor = '#fff' }) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'>
+      <g clip-path='url(#a)'>
+        <path fill={color} d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2Z' />
+      </g>
+      <defs>
+        <clipPath id='a'>
+          <path fill={bgColor} d='M0 0h24v24H0z' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+BackArrow.propTypes = {
+  color: PropTypes.string,
+  bgColor: PropTypes.string
+};

package/src/components/Svgs/calender.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const CalenderIcon = ({ color = '#000' }) => {
+  return (
+    <svg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        id='Vector'
+        d='M9.32688 13.0127C8.7916 13.0127 8.33729 12.826 7.96396 12.4527C7.59063 12.0792 7.40396 11.6249 7.40396 11.0896C7.40396 10.5543 7.59063 10.1 7.96396 9.72667C8.33729 9.35333 8.7916 9.16667 9.32688 9.16667C9.86215 9.16667 10.3165 9.35333 10.69 9.72667C11.0633 10.1 11.25 10.5543 11.25 11.0896C11.25 11.6249 11.0633 12.0792 10.69 12.4527C10.3165 12.826 9.86215 13.0127 9.32688 13.0127ZM1.50646 15.9294C1.08549 15.9294 0.729167 15.7835 0.4375 15.4919C0.145833 15.2002 0 14.8439 0 14.4229V3.26917C0 2.84819 0.145833 2.49187 0.4375 2.20021C0.729167 1.90854 1.08549 1.76271 1.50646 1.76271H2.66021V0H3.94229V1.76271H10.2565V0H11.5065V1.76271H12.6602C13.0812 1.76271 13.4375 1.90854 13.7292 2.20021C14.0208 2.49187 14.1667 2.84819 14.1667 3.26917V14.4229C14.1667 14.8439 14.0208 15.2002 13.7292 15.4919C13.4375 15.7835 13.0812 15.9294 12.6602 15.9294H1.50646ZM1.50646 14.6794H12.6602C12.7244 14.6794 12.7831 14.6526 12.8365 14.5992C12.8899 14.5458 12.9167 14.4871 12.9167 14.4229V6.6025H1.25V14.4229C1.25 14.4871 1.27674 14.5458 1.33021 14.5992C1.38354 14.6526 1.44229 14.6794 1.50646 14.6794ZM1.25 5.3525H12.9167V3.26917C12.9167 3.205 12.8899 3.14625 12.8365 3.09292C12.7831 3.03944 12.7244 3.01271 12.6602 3.01271H1.50646C1.44229 3.01271 1.38354 3.03944 1.33021 3.09292C1.27674 3.14625 1.25 3.205 1.25 3.26917V5.3525Z'
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+CalenderIcon.propTypes = {
+  color: PropTypes.string
+};
+
+export default CalenderIcon;

package/src/components/Svgs/caret-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#FD7C1B" fill-rule="nonzero" d="M14.5 12.5l-5 5v-10z"/>
+</svg>

package/src/components/Svgs/clock-icon.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const ClockIcon = ({ color = "#333" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <path
+        fill={color}
+        fillRule="evenodd"
+        d="M12 19.75a7.513 7.513 0 003.875-1.047 7.832 7.832 0 002.828-2.828A7.513 7.513 0 0019.75 12a7.513 7.513 0 00-1.047-3.875c-.698-1.187-1.64-2.13-2.828-2.828S13.395 4.25 12 4.25a7.51 7.51 0 00-3.875 1.047c-1.188.698-2.13 1.64-2.828 2.828S4.25 10.605 4.25 12a7.51 7.51 0 001.047 3.875 7.824 7.824 0 002.828 2.828A7.513 7.513 0 0012 19.75zm.016-1a6.64 6.64 0 01-3.391-.906 6.716 6.716 0 01-2.469-2.453 6.563 6.563 0 01-.906-3.375c0-1.22.302-2.35.906-3.391A6.711 6.711 0 018.61 6.156a6.563 6.563 0 013.375-.906c1.22 0 2.35.302 3.391.906a6.716 6.716 0 012.469 2.453A6.592 6.592 0 0118.751 12a6.616 6.616 0 01-.906 3.375 6.716 6.716 0 01-2.453 2.469 6.563 6.563 0 01-3.375.906zm2.283-3.92l.076-.002a.343.343 0 00.25-.14l.25-.375a.365.365 0 00.078-.266.328.328 0 00-.14-.234l-2.22-1.625V7.625a.362.362 0 00-.109-.266.36.36 0 00-.265-.109h-.438a.357.357 0 00-.265.11.358.358 0 00-.11.265v5c0 .125.052.219.156.281l2.532 1.844a.383.383 0 00.281.078l-.076.001z"></path>
+    </svg>
+  );
+};
+
+ClockIcon.propTypes = {
+  color: PropTypes.string
+};

package/src/components/Svgs/close-icon.js

@@ -0,0 +1,15 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const CloseIcon = ({ color = "#333" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <g fill="none" stroke={color} strokeLinecap="square" strokeWidth="2">
+        <path d="M16.95 6.914l-9.9 9.9M16.95 17.107l-9.9-9.9"></path>
+      </g>
+    </svg>
+  );
+};
+CloseIcon.propTypes = {
+  color: PropTypes.string
+};

package/src/components/Svgs/crown.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const CrownIcon = ({ height, width, color = "#D8D8D8", positionTop }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      style={{ position: "relative", top: positionTop }}>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g>
+          <g transform="translate(8 8)">
+            <path d="M0 0H24V24H0z"></path>
+            <g fill={color} fillRule="nonzero" transform="translate(0 2)">
+              <path d="M21.043 19.553c0-.743-.601-1.344-1.344-1.344h-15.4a1.343 1.343 0 100 2.688h15.4c.743 0 1.344-.603 1.344-1.344zM1.598 8.673c.022 0 .042 0 .064-.003l2.131 7.713h16.411l2.132-7.713c.022 0 .041.003.063.003a1.599 1.599 0 10-1.52-1.108L17.025 9.82 12.882 2.95a1.599 1.599 0 10-1.765 0L6.976 9.82 3.121 7.565a1.599 1.599 0 10-1.523 1.107z"></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+CrownIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

package/src/components/Svgs/fallbackImage.js

@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const ImageFallbackIcon = ({ width = 40, height = 30, iconColor = "#99B0CB" }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 102 76" version="1.1">
+      <g
+        id="demo-home-copy"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+        transform="translate(-377.000000, -314.000000)"
+      >
+        <g id="Group-13" transform="translate(377.000000, 314.000000)">
+          <path
+            d="M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z"
+            id="Combined-Shape"
+            fill={iconColor}
+            fillRule="nonzero"
+          ></path>
+          <rect
+            id="Rectangle-19"
+            stroke={iconColor}
+            strokeWidth="3"
+            x="1.5"
+            y="1.5"
+            width="99"
+            height="73"
+            rx="3"
+          ></rect>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+ImageFallbackIcon.propTypes = {
+  width: PropTypes.object,
+  height: PropTypes.object,
+  iconColor: PropTypes.object
+};

package/src/components/Svgs/hyperlink.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+export const HyperLinkIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="28">
+      <g fill="none" fillRule="evenodd">
+        <rect width="36" height="28" fill="#3D6FCF" rx="4"></rect>
+        <path
+          stroke="#FFF"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M22 14.667v4c0 .736-.597 1.333-1.333 1.333h-7.334A1.333 1.333 0 0112 18.667v-7.334c0-.736.597-1.333 1.333-1.333h4M20 8h4v4m-7.333 3.333L24 8"></path>
+      </g>
+    </svg>
+  );
+};

package/src/components/Svgs/key.js

@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const KeyIcon = ({ height, width, color = "#D5D5D5", positionTop }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      style={{ position: "relative", top: positionTop }}>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g>
+          <g transform="translate(8 8)">
+            <path d="M0 0H24V24H0z"></path>
+            <path
+              fill={color}
+              fillRule="nonzero"
+              d="M12.71 4.364A6.54 6.54 0 000 6.545a6.54 6.54 0 0012.71 2.182h4.745v4.364h4.363V8.727H24V4.364H12.71zM6.544 8.727a2.181 2.181 0 110-4.362 2.181 2.181 0 010 4.362z"
+              transform="translate(0 5)"></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+KeyIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

package/src/components/Svgs/large-share-icon.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const FilledArrowShareIcon = ({ color = '#000' }) => {
+  return (
+    <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M18.6065 10.6152V5.40039L27.7324 14.5263L18.6065 23.6522V18.3071C12.088 18.3071 7.52501 20.393 4.26575 24.9559C5.56946 18.4374 9.48057 11.9189 18.6065 10.6152Z'
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+FilledArrowShareIcon.propTypes = {
+  color: PropTypes.string
+};
+
+export const OutlinedArrowShareIcon = ({ color = '#000' }) => {
+  return (
+    <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M5.12311 25.2568C5.03306 25.2573 4.94355 25.2427 4.85821 25.2138C4.67975 25.1554 4.52532 25.0396 4.41876 24.8841C4.3122 24.7286 4.25943 24.5422 4.2686 24.3535C4.2686 24.2244 5.14875 11.7329 17.5904 10.7522V6.26144C17.5903 6.0904 17.6408 5.9232 17.7355 5.7812C17.8302 5.63919 17.9648 5.52882 18.122 5.46418C18.2793 5.39955 18.4522 5.38358 18.6185 5.41833C18.7849 5.45307 18.9372 5.53694 19.0559 5.65923L27.49 14.331C27.6465 14.4918 27.7342 14.708 27.7342 14.9332C27.7342 15.1584 27.6465 15.3746 27.49 15.5354L19.0559 24.2072C18.9372 24.3295 18.7849 24.4134 18.6185 24.4481C18.4522 24.4829 18.2793 24.4669 18.122 24.4023C17.9648 24.3376 17.8302 24.2273 17.7355 24.0853C17.6408 23.9433 17.5903 23.7761 17.5904 23.605V19.2003C9.28459 19.5186 5.87936 24.7922 5.84518 24.8567C5.76808 24.9793 5.66146 25.0803 5.53521 25.1502C5.40897 25.2201 5.26721 25.2568 5.12311 25.2568ZM19.2995 8.36917V11.5566C19.2996 11.7796 19.2137 11.994 19.0599 12.1545C18.906 12.315 18.6963 12.4091 18.4749 12.4169C10.4254 12.7137 7.54566 18.112 6.5117 21.5833C8.64798 19.7251 12.4548 17.4539 18.3937 17.4539H18.4321C18.6588 17.4539 18.8761 17.5445 19.0364 17.7059C19.1966 17.8672 19.2867 18.086 19.2867 18.3142V21.5016L25.6955 14.9375L19.2995 8.36917Z'
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+OutlinedArrowShareIcon.propTypes = {
+  color: PropTypes.string
+};
+
+export const DotsConnectedShareIcon = ({ color = '#000' }) => {
+  return (
+    <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M21.8448 19.0483C21.2699 19.0525 20.7034 19.187 20.1878 19.4417C19.6722 19.6964 19.221 20.0646 18.868 20.5188L11.8027 16.9835C11.8936 16.6636 11.9423 16.3332 11.9474 16.0007C11.9423 15.6681 11.8936 15.3377 11.8027 15.0178L18.868 11.4826C19.221 11.9367 19.6722 12.305 20.1878 12.5597C20.7034 12.8143 21.2699 12.9488 21.8448 12.953C22.5977 12.953 23.3337 12.7296 23.9597 12.311C24.5857 11.8924 25.0736 11.2975 25.3618 10.6014C25.6499 9.90526 25.7253 9.13929 25.5784 8.40031C25.4315 7.66134 25.0689 6.98254 24.5366 6.44977C24.0042 5.917 23.3259 5.55418 22.5875 5.40719C21.849 5.26019 21.0836 5.33563 20.3881 5.62397C19.6925 5.9123 19.098 6.40058 18.6797 7.02705C18.2614 7.65353 18.0381 8.39006 18.0381 9.14352C18.0433 9.47605 18.0919 9.80648 18.1828 10.1264L11.1175 13.6616C10.7645 13.2074 10.3133 12.8392 9.79772 12.5845C9.28215 12.3298 8.71563 12.1954 8.14069 12.1911C7.13109 12.1911 6.16284 12.5925 5.44894 13.3069C4.73505 14.0213 4.33398 14.9903 4.33398 16.0007C4.33398 17.011 4.73505 17.98 5.44894 18.6944C6.16284 19.4088 7.13109 19.8102 8.14069 19.8102C8.71563 19.806 9.28215 19.6715 9.79772 19.4168C10.3133 19.1621 10.7645 18.7939 11.1175 18.3397L18.1828 21.875C17.9774 22.6445 18.0183 23.4591 18.2996 24.2042C18.5809 24.9493 19.0885 25.5874 19.751 26.0288C20.4136 26.4702 21.1977 26.6927 21.9931 26.665C22.7886 26.6373 23.5553 26.3607 24.1855 25.8743C24.8158 25.3878 25.2778 24.7159 25.5066 23.953C25.7354 23.1901 25.7196 22.3747 25.4612 21.6213C25.2029 20.8679 24.715 20.2145 24.0664 19.753C23.4177 19.2914 22.6407 19.045 21.8448 19.0483ZM21.8448 6.8578C22.2966 6.8578 22.7382 6.99185 23.1138 7.24301C23.4894 7.49417 23.7821 7.85115 23.955 8.26881C24.1279 8.68647 24.1731 9.14605 24.085 9.58944C23.9968 10.0328 23.7793 10.4401 23.4599 10.7598C23.1404 11.0794 22.7335 11.2971 22.2904 11.3853C21.8474 11.4735 21.3881 11.4282 20.9708 11.2552C20.5534 11.0822 20.1967 10.7893 19.9457 10.4134C19.6948 10.0375 19.5608 9.59559 19.5608 9.14352C19.5608 8.53731 19.8014 7.95592 20.2298 7.52727C20.6581 7.09861 21.2391 6.8578 21.8448 6.8578ZM8.14069 18.2864C7.68895 18.2864 7.24736 18.1523 6.87175 17.9012C6.49615 17.65 6.2034 17.293 6.03053 16.8754C5.85765 16.4577 5.81242 15.9981 5.90055 15.5547C5.98868 15.1114 6.20621 14.7041 6.52564 14.3844C6.84507 14.0648 7.25204 13.8471 7.6951 13.7589C8.13815 13.6707 8.5974 13.7159 9.01475 13.8889C9.4321 14.0619 9.78881 14.3549 10.0398 14.7308C10.2908 15.1067 10.4247 15.5486 10.4247 16.0007C10.4247 16.6069 10.1841 17.1883 9.75574 17.6169C9.3274 18.0456 8.74645 18.2864 8.14069 18.2864ZM21.8448 25.1435C21.3931 25.1435 20.9515 25.0095 20.5759 24.7583C20.2003 24.5072 19.9075 24.1502 19.7347 23.7325C19.5618 23.3149 19.5166 22.8553 19.6047 22.4119C19.6928 21.9685 19.9103 21.5612 20.2298 21.2416C20.5492 20.9219 20.9562 20.7042 21.3992 20.616C21.8423 20.5278 22.3015 20.5731 22.7189 20.7461C23.1362 20.9191 23.4929 21.2121 23.7439 21.5879C23.9949 21.9638 24.1288 22.4057 24.1288 22.8578C24.1288 23.464 23.8882 24.0454 23.4599 24.4741C23.0315 24.9027 22.4506 25.1435 21.8448 25.1435Z'
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+DotsConnectedShareIcon.propTypes = {
+  color: PropTypes.string
+};
+
+export const IPhoneShareIcon = ({ color = '#000' }) => {
+  return (
+    <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fill-rule='evenodd'
+        clip-rule='evenodd'
+        d='M15.07 6.31242C15.4866 5.89586 16.1619 5.89586 16.5785 6.31242L20.4573 10.1912C20.8738 10.6078 20.8738 11.2831 20.4573 11.6997C20.0407 12.1163 19.3653 12.1163 18.9488 11.6997L16.8909 9.64183V19.6727C16.8909 20.2618 16.4134 20.7394 15.8242 20.7394C15.2351 20.7394 14.7576 20.2618 14.7576 19.6727V9.64183L12.6997 11.6997C12.2831 12.1163 11.6078 12.1163 11.1912 11.6997C10.7746 11.2831 10.7746 10.6078 11.1912 10.1912L15.07 6.31242ZM8.06667 15.697C8.65577 15.697 9.13333 16.1745 9.13333 16.7636V24.5212C9.13333 24.7527 9.22528 24.9747 9.38895 25.1383C9.55262 25.302 9.7746 25.3939 10.0061 25.3939H21.6424C21.8739 25.3939 22.0959 25.302 22.2595 25.1383C22.4232 24.9747 22.5152 24.7527 22.5152 24.5212V16.7636C22.5152 16.1745 22.9927 15.697 23.5818 15.697C24.1709 15.697 24.6485 16.1745 24.6485 16.7636V24.5212C24.6485 25.3185 24.3318 26.0831 23.768 26.6468C23.2043 27.2106 22.4397 27.5273 21.6424 27.5273H10.0061C9.2088 27.5273 8.4442 27.2106 7.88046 26.6468C7.31671 26.0831 7 25.3185 7 24.5212V16.7636C7 16.1745 7.47756 15.697 8.06667 15.697Z'
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+IPhoneShareIcon.propTypes = {
+  color: PropTypes.string
+};

package/src/components/Svgs/left-arrow.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const LeftArrow = ({ color = "#333" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 10 16">
+      <g fill="none" fillRule="nonzero">
+        <path d="M17 20H-7V-4h24z" opacity=".384" />
+        <path stroke={color} d="M9 16L1 8l8-8" />
+      </g>
+    </svg>
+  );
+};
+
+LeftArrow.propTypes = {
+  color: PropTypes.string
+};

package/src/components/Svgs/liveicon.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+function LiveIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+      <g fill="none" fillRule="evenodd" transform="translate(1 1)">
+        <circle cx="11" cy="11" r="8.25" fill="#F81010" />
+        <circle cx="11" cy="11" r="11" stroke="#F81010" />
+      </g>
+    </svg>
+  );
+}
+
+export default LiveIcon;

package/src/components/Svgs/location.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const LocationIcon = ({ color = '#000' }) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='13' height='16' fill='none'>
+      <path
+        fill={color}
+        d='M6.291 7.804c.415 0 .77-.147 1.064-.443.294-.295.441-.65.441-1.064 0-.415-.147-.77-.442-1.064a1.454 1.454 0 0 0-1.065-.441c-.415 0-.77.147-1.064.443-.294.295-.441.65-.441 1.065 0 .414.147.769.442 1.063.296.294.65.441 1.065.441Zm-.001 6.374c1.63-1.46 2.878-2.86 3.743-4.2.865-1.34 1.297-2.514 1.297-3.521 0-1.52-.483-2.768-1.448-3.747-.965-.979-2.163-1.468-3.592-1.468-1.43 0-2.627.49-3.592 1.468-.965.979-1.448 2.228-1.448 3.747 0 1.007.432 2.181 1.297 3.521.865 1.34 2.113 2.74 3.743 4.2Zm0 1.663c-2.097-1.817-3.67-3.508-4.718-5.073C.524 9.202 0 7.765 0 6.457c0-1.923.622-3.48 1.866-4.671C3.11.596 4.585 0 6.29 0c1.705 0 3.18.595 4.424 1.786 1.244 1.19 1.866 2.748 1.866 4.67 0 1.31-.524 2.746-1.572 4.312-1.048 1.565-2.62 3.256-4.718 5.073Z'
+      />
+    </svg>
+  );
+};
+LocationIcon.propTypes = {
+  color: PropTypes.string
+};
+
+
+export default LocationIcon;

package/src/components/Svgs/lock.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const LockIcon = ({ height, width, color = "#D5D5D5", positionTop }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      style={{ position: "relative", top: positionTop }}>
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g>
+          <g transform="translate(8 8)">
+            <path d="M0 0H24V24H0z"></path>
+            <g fill={color} fillRule="nonzero" transform="translate(3)">
+              <path d="M15.692 9h-.747V6c0-3.31-2.681-6-5.978-6C5.67 0 2.989 2.69 2.989 6v3h-.747A2.249 2.249 0 000 11.25v10.5A2.249 2.249 0 002.242 24h13.45a2.249 2.249 0 002.242-2.25v-10.5A2.249 2.249 0 0015.692 9zM4.982 6c0-2.206 1.787-4 3.985-4s3.985 1.794 3.985 4v3h-7.97V6z"></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+LockIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};

package/src/components/Svgs/photo-icons.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { getIconColor } from "../../utils/utils";
+import PropTypes from "prop-types";
+
+export function PhotoIcon1({ background }) {
+  const iconColor = getIconColor(background);
+  return (
+    <svg width={"10%"} viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="100%" height="100%" fill={background} />
+
+      <g clipPath="url(#clip0_1430_2817)">
+        <path
+          d="M19.2083 5.79167V19.2083H5.79167V5.79167H19.2083ZM19.2083 3.875H5.79167C4.7375 3.875 3.875 4.7375 3.875 5.79167V19.2083C3.875 20.2625 4.7375 21.125 5.79167 21.125H19.2083C20.2625 21.125 21.125 20.2625 21.125 19.2083V5.79167C21.125 4.7375 20.2625 3.875 19.2083 3.875ZM14.5508 12.3658L11.6758 16.0746L9.625 13.5925L6.75 17.2917H18.25L14.5508 12.3658Z"
+          fill={iconColor}
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function PhotoIcon2({ background }) {
+  const iconColor = getIconColor(background);
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="10%" viewBox="0 0 23 23" fill="none">
+      <rect width="100%" height="100%" fill={background} />
+      <g clipPath="url(#clip0_1430_3084)">
+        <path
+          d="M19.125 17.4306V5.56944C19.125 4.6375 18.3625 3.875 17.4306 3.875H5.56944C4.6375 3.875 3.875 4.6375 3.875 5.56944V17.4306C3.875 18.3625 4.6375 19.125 5.56944 19.125H17.4306C18.3625 19.125 19.125 18.3625 19.125 17.4306ZM8.53472 12.7708L10.6528 15.321L13.6181 11.5L17.4306 16.5833H5.56944L8.53472 12.7708Z"
+          fill={iconColor}
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function PhotoIcon3({ background }) {
+  const iconColor = getIconColor(background);
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="10%" viewBox="0 0 23 23" fill="none">
+      <rect width="100%" height="100%" fill={background} />
+      <g clipPath="url(#clip0_1430_3065)">
+        <path
+          d="M13.3285 5.55831L14.9069 7.28331H18.4V17.6333H4.6V7.28331H8.09313L9.6715 5.55831H13.3285ZM14.0875 3.83331H8.9125L7.33413 5.55831H4.6C3.65125 5.55831 2.875 6.33456 2.875 7.28331V17.6333C2.875 18.5821 3.65125 19.3583 4.6 19.3583H18.4C19.3488 19.3583 20.125 18.5821 20.125 17.6333V7.28331C20.125 6.33456 19.3488 5.55831 18.4 5.55831H15.6659L14.0875 3.83331ZM11.5 9.87081C12.9231 9.87081 14.0875 11.0352 14.0875 12.4583C14.0875 13.8814 12.9231 15.0458 11.5 15.0458C10.0769 15.0458 8.9125 13.8814 8.9125 12.4583C8.9125 11.0352 10.0769 9.87081 11.5 9.87081ZM11.5 8.14581C9.1195 8.14581 7.1875 10.0778 7.1875 12.4583C7.1875 14.8388 9.1195 16.7708 11.5 16.7708C13.8805 16.7708 15.8125 14.8388 15.8125 12.4583C15.8125 10.0778 13.8805 8.14581 11.5 8.14581Z"
+          fill={iconColor}
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function PhotoIcon4({ background }) {
+  const iconColor = getIconColor(background);
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="10%" viewBox="0 0 23 23" fill="none">
+      <rect width="100%" height="100%" fill={background} />
+      <g clipPath="url(#clip0_1430_3070)">
+        <path
+          d="M11.5 15.2183C13.0243 15.2183 14.26 13.9826 14.26 12.4583C14.26 10.934 13.0243 9.6983 11.5 9.6983C9.97568 9.6983 8.73999 10.934 8.73999 12.4583C8.73999 13.9826 9.97568 15.2183 11.5 15.2183Z"
+          fill={iconColor}
+        />
+        <path
+          d="M8.9125 3.83331L7.33413 5.55831H4.6C3.65125 5.55831 2.875 6.33456 2.875 7.28331V17.6333C2.875 18.5821 3.65125 19.3583 4.6 19.3583H18.4C19.3488 19.3583 20.125 18.5821 20.125 17.6333V7.28331C20.125 6.33456 19.3488 5.55831 18.4 5.55831H15.6659L14.0875 3.83331H8.9125ZM11.5 16.7708C9.1195 16.7708 7.1875 14.8388 7.1875 12.4583C7.1875 10.0778 9.1195 8.14581 11.5 8.14581C13.8805 8.14581 15.8125 10.0778 15.8125 12.4583C15.8125 14.8388 13.8805 16.7708 11.5 16.7708Z"
+          fill={iconColor}
+        />
+      </g>
+    </svg>
+  );
+}
+
+PhotoIcon1.propTypes = {
+  background: PropTypes.string
+};
+
+PhotoIcon2.propTypes = {
+  background: PropTypes.string
+};
+
+PhotoIcon3.propTypes = {
+  background: PropTypes.string
+};
+
+PhotoIcon4.propTypes = {
+  background: PropTypes.string
+};

package/src/components/Svgs/right-arrow.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const RightArrow = ({ color = "#333" }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 10 16">
+      <g fill="none" fillRule="nonzero">
+        <path d="M-7-4h24v24H-7z" opacity=".384" />
+        <path stroke={color} d="M1 0l8 8-8 8" />
+      </g>
+    </svg>
+  );
+};
+
+RightArrow.propTypes = {
+  color: PropTypes.string
+};