@redsift/design-system-legacy 8.0.0-alpha.8 → 8.0.1

package/src/components/icons/ArrowUp.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const ArrowUp = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
+  </svg>
+);

package/src/components/icons/BarchartHorizontal.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const BarchartHorizontal = ({ titleTag, width = 30, fill = "#33b222", stroke = "#33b222", strokeWidth = 0.5 }) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 18 18'
+    style={{
+      width,
+    }}>
+    {titleTag && <title>{titleTag}</title>}
+    <path
+      fill={fill}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      d='M1.939 4.756h5.164c.26 0 .47.21.47.47v3.286h3.286c.26 0 .47.21.47.47v3.286h5.164c.26 0 .47.21.47.47v3.755c0 .26-.21.47-.47.47H1.469a.47.47 0 01-.469-.47V1.469C1 1.21 1.21 1 1.47 1h15.023a.47.47 0 110 .939H1.939v2.817zm0 .939v2.817h4.695V5.695H1.939zm0 3.756v2.817h8.45V9.45H1.94zm0 3.756v2.816h14.084v-2.816H1.94z'
+    />
+  </svg>
+);

package/src/components/icons/BellIcon.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const BellIcon = ({ titleTag = "Bell", width = 50, fill = "#02ac61" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 64 64"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+
+    <g fill={fill}>
+      <path d="M45.1364536,28.8469311 C45.3436917,28.951103 45.5613963,29 45.7784031,29 C46.3128958,29 46.8264554,28.6988228 47.0797463,28.1800893 C47.778913,26.743651 48.0894212,25.1321757 47.9777778,23.5207003 C47.8647389,21.909225 47.3414105,20.3579851 46.4622188,19.0342226 C45.5823294,17.7111687 44.3626254,16.6361432 42.9321946,15.9260735 C41.519208,15.2287597 39.9331741,14.9134094 38.3555135,15.0204159 C37.5558678,15.0728562 36.9502024,15.7737133 37.003233,16.5858288 C37.0562636,17.3979444 37.7372883,18.0052594 38.5453073,17.9606143 C39.6219682,17.8854972 40.7028157,18.1016361 41.6608555,18.5743072 C42.6335485,19.0568995 43.4604073,19.785394 44.0570017,20.6818392 C44.6522005,21.578993 45.0080638,22.6320504 45.0848186,23.7290441 C45.1594801,24.8182427 44.9515443,25.9053154 44.479851,26.8740431 C44.1246855,27.6025376 44.4184471,28.4869357 45.1364536,28.8469311 Z" />
+      <path d="M53.1777059,15.4070689 C51.5516796,12.9528659 49.3192795,10.9793249 46.7236108,9.69920924 C44.1203017,8.41131818 41.2266556,7.83311023 38.3427336,8.04163266 C37.5474324,8.09747426 36.9480045,8.79938195 37.0035714,9.60943856 C37.0577491,10.4187883 37.7363598,11.0316322 38.543469,10.9729632 C40.9217322,10.8068521 43.3118034,11.2790317 45.4636315,12.3435563 C47.602957,13.398185 49.4429159,15.0260737 50.7841618,17.0505083 C52.126797,19.0728225 52.9193199,21.4202902 53.0804639,23.8391503 C53.2450808,26.2565968 52.7810972,28.6952489 51.7378287,30.8907426 C51.3919248,31.6216314 51.6933752,32.500253 52.4108827,32.852974 C52.6130073,32.9533475 52.8276345,33 53.0373995,33 C53.5736201,33 54.0903922,32.6939315 54.3383595,32.1694446 C55.5983389,29.5130809 56.1595645,26.5626653 55.9609129,23.6391102 C55.7664287,20.7049522 54.8051214,17.8577375 53.1777059,15.4070689 Z" />
+      <path d="M63.939634 22.7398843C63.6307601 18.4705156 62.1804894 14.3346307 59.743259 10.7771766 57.3010003 7.22042862 53.943613 4.34734471 50.0280977 2.46726866 46.106836.591430192 41.7395029-.242668162 37.3879727.0610255658 36.5647878.117526724 35.9456034.820259884 36.0037867 1.62893272 36.0612516 2.43760555 36.7644784 3.05205565 37.5984379 2.99061064 41.4270375 2.72788025 45.2707216 3.45745146 48.7193344 5.10728529 52.1614825 6.76065044 55.1173338 9.28978355 57.2665214 12.4199477 59.4106808 15.5501119 60.6885567 19.1901991 60.9600784 22.9468198 61.2272902 26.7055594 60.4780915 30.4890182 58.7900598 33.8882692 58.4294675 34.6164279 58.7369047 35.4950209 59.4789204 35.8502719 59.6908222 35.951974 59.9127804 36 60.1318654 36 60.6856835 36 61.2172339 35.6956 61.4751077 35.1750831 63.3922807 31.3132289 64.244198 27.0134907 63.939634 22.7398843zM46.2651891 38.4600403C46.2388689 38.4543009 43.5776916 37.7648655 41.8398525 35.5344235 41.8384298 35.5329887 41.8377184 35.5315539 41.837007 35.5315539 40.2556659 33.501988 38.883463 30.9680796 37.428743 28.2835142 33.7830509 21.5584697 29.6486584 13.9352222 20.9345653 13.1604144 20.9338539 13.1604144 20.9324312 13.159697 20.9317198 13.159697 19.7337988 13.0513674 18.1012401 13.2113508 17.0591057 13.34479 17.0519922 12.8641222 16.9829908 12.2715377 16.7617595 11.6581482 16.7617595 11.6567134 16.7617595 11.6552786 16.7610482 11.6538437 16.2574092 10.2627768 15.2479971 9.15150162 13.9170527 8.52519868 12.5846857 7.89602607 11.0901298 7.83002393 9.71223604 8.33867088 6.86112704 9.38394395 5.38506637 12.5735693 6.42222129 15.4482496 6.42222129 15.448967 6.42293265 15.448967 6.42293265 15.4496844 6.64345255 16.0573346 6.96285074 16.553068 7.26161965 16.9254062 6.53034718 17.3924431 5.49176955 18.0983791 4.78326043 18.750509-2.00092781 24.9862767-.0824046186 33.7086034 1.60990783 41.4021575 2.26079723 44.3593405 2.87327349 47.1543878 3.01056492 49.7026444 3.00985357 49.7306236 3.00487408 49.757168 3.00558544 49.7837123 3.09592746 52.629696 1.48968891 54.8802256 1.47759589 54.898161.12104278 56.737612-.117260991 59.6625113.934832373 61.5536162 1.78845782 63.0888835 3.51776071 64 5.29828112 64 5.88514861 64 6.47912965 63.9002794 7.04821329 63.6915117L12.8329484 61.5686819C12.9360948 61.5306589 13.030705 61.4818748 13.1196243 61.4244816 13.221348 61.4101333 13.3223603 61.3878934 13.4226613 61.3513053L19.5438671 59.1043628C20.3996266 60.7013277 21.7241688 61.9790431 23.3851816 62.761025 24.5197921 63.2947814 25.7305176 63.5623771 26.9462225 63.5623771 27.9193555 63.5623771 28.8953339 63.3901976 29.836456 63.0444038 31.9555811 62.2667263 33.6471822 60.7041973 34.599686 58.6437826 35.3743511 56.9686195 35.574953 55.1298859 35.2114509 53.3514151L41.8178005 50.9272712 47.6039583 48.8030065C49.8980767 47.9621966 51.3556421 45.502182 50.9245613 43.2050204 50.5240687 41.0742991 48.4775017 38.9902096 46.2651891 38.4600403zM31.9193021 57.38472C31.3004236 58.7212634 30.2013808 59.7371224 28.8249098 60.2414649 27.4484388 60.7465248 25.9617078 60.6805226 24.6350316 60.0570894 23.6946209 59.615162 22.9192444 58.9242917 22.3665219 58.0684161L32.3895074 54.3887966C32.5132831 55.4053731 32.3596305 56.434863 31.9193021 57.38472zM46.5931235 46.0015025L40.8062543 48.1250497 12.4104038 58.5490839C12.3086801 58.5863894 12.2147813 58.6344562 12.1272847 58.6904145 12.0241383 58.7047628 11.9224146 58.7284375 11.8206909 58.7650257L6.03524442 60.8878555C5.11475165 61.2250403 3.93745988 60.8555718 3.51491529 60.0958297 3.02408066 59.2126924 3.18342407 57.5848787 3.85067463 56.678784 3.94101666 56.5561061 6.02528546 53.6764039 5.9605522 49.8446925 5.96766574 49.7751033 5.97477929 49.7069489 5.97193387 49.6344901 5.83108567 46.8114636 5.18375304 43.8700638 4.49871862 40.7564844 2.83201493 33.182021 1.25849869 26.0279627 6.77647585 20.955124 7.55896585 20.2362746 9.09051217 19.2778087 9.61478047 18.9693204 10.282031 18.5761772 10.6903485 17.9376782 10.7337412 17.2166766 10.7771338 16.4956749 10.4499107 15.8119788 9.84952746 15.3506812 9.84525934 15.3478115 9.40564223 14.9847997 9.20361754 14.4302382 9.20361754 14.4295208 9.20361754 14.4295208 9.20361754 14.4295208 8.97100461 13.7859999 9.00230421 13.0893904 9.28826873 12.4681093 9.57565597 11.8475457 10.0856972 11.3762043 10.7252049 11.1423271 11.3604445 10.9070151 12.0511698 10.937864 12.6672028 11.2284169 13.2832358 11.5182524 13.7498844 12.0312038 13.9824973 12.6761596 13.9824973 12.676877 13.9832087 12.676877 13.9832087 12.6775944 14.1809653 13.2256991 14.0785302 13.780978 14.0792416 13.780978 13.9085165 14.5385679 14.0920459 15.2739178 14.5807465 15.7997827 14.9826618 16.2323837 15.5396524 16.4641086 16.1471492 16.4641086 16.2787498 16.4641086 16.4124844 16.4533474 16.5476418 16.4311076 17.2838938 16.3112993 19.46135 16.0214638 20.6699414 16.1312283 20.6706527 16.1312283 20.6713641 16.1312283 20.6720754 16.1312283 27.8133637 16.7647054 31.3829407 23.3484191 34.8337216 29.7154737 36.3489068 32.5098036 37.7794408 35.1491719 39.5101663 37.3738746 39.5123004 37.3760268 39.5137231 37.3760268 39.5151458 37.3788965 41.9109879 40.4558877 45.4329042 41.3275464 45.5815773 41.3626997 46.6692384 41.6231212 47.8308804 42.7681149 48.018678 43.763169 48.1794441 44.6168924 47.5129049 45.6621654 46.5931235 46.0015025z" />
+    </g>
+  </svg>
+);

package/src/components/icons/BimiSetupIcon.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { IconContainer, IconContainerPropTypes } from '../IconContainer';
+
+export const BimiSetupIcon = (props) => (
+  <IconContainer {...props}>
+    <svg
+      fill="none"
+      width="38"
+      height="37"
+      viewBox="16 18 38 37"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M32.4535 40.7666L32.899 41.1859L33.3277 40.7495L42.2492 31.6688L41.3575 30.7928L32.8648 39.4371L29.2478 36.0329L28.3911 36.9432L32.4535 40.7666ZM44.9929 24.5918L44.995 24.6018L44.9975 24.6116C45.1194 25.0993 45.5026 25.6483 46.193 25.7888L50.2272 26.6589C50.4476 26.7299 50.5568 26.9377 50.5015 27.1471L49.237 31.0196C49.0092 31.6108 49.104 32.3065 49.6613 32.7447L52.6564 35.5033C52.8007 35.6546 52.8014 35.8846 52.6586 36.0367L49.5674 38.8108L49.5549 38.8221L49.5429 38.834C49.1094 39.2675 49.0273 39.9056 49.133 40.4341L49.1383 40.4606L49.1459 40.4865L50.2601 44.3067C50.2602 44.3071 50.2604 44.3075 50.2605 44.3079C50.3204 44.52 50.2113 44.7319 49.9882 44.8037L45.95 45.6747L45.94 45.6769L45.9302 45.6793C45.4425 45.8013 44.8934 46.1845 44.753 46.8749L43.8829 50.9091C43.8119 51.1294 43.6042 51.2386 43.3947 51.1834L39.5223 49.9189C38.931 49.691 38.2354 49.7859 37.7972 50.3432L35.0385 53.3383C34.8865 53.4832 34.6549 53.4832 34.5028 53.3383L31.7255 50.323L31.7168 50.3135L31.7077 50.3044C31.2743 49.871 30.6362 49.7889 30.1077 49.8946L30.0714 49.9018L30.0363 49.9133L26.1466 51.1834C25.9371 51.2386 25.7294 51.1294 25.6584 50.9091L24.7874 46.8708L24.7853 46.8609L24.7828 46.851C24.6609 46.3633 24.2777 45.8143 23.5873 45.6738L19.5531 44.8037C19.3327 44.7328 19.2235 44.525 19.2788 44.3155L20.5432 40.4431C20.7711 39.8518 20.6762 39.1562 20.1189 38.718L17.1238 35.9593C16.9789 35.8073 16.9789 35.5757 17.1238 35.4236L20.1392 32.6464L20.1486 32.6377L20.1577 32.6286C20.5912 32.1951 20.6733 31.5571 20.5676 31.0286L20.5603 30.9923L20.5489 30.9571L19.2788 27.0675C19.2235 26.858 19.3327 26.6502 19.5531 26.5792L23.5913 25.7083L23.6013 25.7061L23.6112 25.7036C24.0988 25.5817 24.6479 25.1985 24.7883 24.5082L25.6584 20.4739C25.7294 20.2536 25.9371 20.1444 26.1466 20.1996L30.2579 21.5437C30.8492 21.7716 31.5449 21.6768 31.9831 21.1194L34.7418 18.1243C34.8938 17.9794 35.1254 17.9794 35.2775 18.1243L38.0548 21.1397L38.0634 21.1491L38.0725 21.1582C38.506 21.5917 39.144 21.6738 39.6726 21.5681L39.7088 21.5608L39.744 21.5493L43.6336 20.2793C43.8431 20.224 44.0509 20.3332 44.1219 20.5536L44.9929 24.5918Z"
+        className="stroke"
+        strokeWidth="1.25"
+      />
+    </svg>
+  </IconContainer>
+);
+
+BimiSetupIcon.propTypes = {
+  ...IconContainerPropTypes,
+};

package/src/components/icons/Chevron.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+export const Chevron = ({
+  titleTag = "Arrow",
+  width = 20,
+  fill = "#fff",
+  direction = "right"
+}) => {
+  const degree = {
+    left: 90,
+    right: -90,
+    up: -180,
+    down: 0
+  };
+  const arrowDirection = `rotate(${degree[direction]}deg)`;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      style={{
+        width,
+        transform: arrowDirection,
+        transformOrigin: "50% 50%"
+      }}
+    >
+      <title>{titleTag}</title>
+      <defs>
+        <polygon
+          id="path-1"
+          points="0.00025 0.000323580861 19.935 0.000323580861 19.935 12.2483 0.00025 12.2483"
+        ></polygon>
+      </defs>
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <path
+          fill={fill}
+          d="M19.532,0.4235 C19.051,-0.1055 18.232,-0.1435 17.703,0.3375 C17.673,0.3645 17.644,0.3935 17.617,0.4235 L9.956,8.6515 L2.318,0.4235 C1.838,-0.1055 1.018,-0.1435 0.49,0.3375 C0.46,0.3645 0.43,0.3935 0.403,0.4235 C-0.134,1.0095 -0.134,1.9095 0.403,2.4955 L8.666,11.4045 L9.049,11.8225 C9.461,12.3215 10.199,12.3925 10.698,11.9805 C10.756,11.9325 10.808,11.8805 10.856,11.8225 L11.239,11.4045 L19.532,2.4955 C20.07,1.9095 20.07,1.0095 19.532,0.4235"
+        ></path>
+      </g>
+    </svg>
+  );
+};

package/src/components/icons/ChevronLeft.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const ChevronLeft = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+  </svg>
+);

package/src/components/icons/ChevronRight.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const ChevronRight = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+  </svg>
+);

package/src/components/icons/ClearIcon.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const ClearIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+  </svg>
+);

package/src/components/icons/Cloud.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export const Cloud = ({
+  titleTag = "Cloud",
+  width = 60,
+  stroke = "#02ac61",
+  strokeWidth = 5
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 70 40"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g
+      fill="transparent"
+      fillRule="nonzero"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      transform="translate(2, 3)"
+    >
+      <path
+        d="M54.4,34.68 C58.8726881,34.3232171 62.2977677,30.5514059 62.222926,26.0651344 C62.1480843,
+      21.5788629 58.5991,17.9233957 54.117,17.716 C53.6100061,17.7252018 53.1051859,17.7848289 52.61,17.894 
+      C51.779,13.407 47.538,9.994 42.431,9.994 C41.0810508,9.99137268 39.7420096,10.2357282 38.48,10.715 
+      C36.088,4.573 30.525,0.273 24.045,0.273 C16.172,0.273 9.654,6.622 8.53,14.898 C3.6104069,15.9479793 
+      0.242666239,20.4971128 0.6746966,25.5089191 C1.10672696,30.5207255 5.20329486,34.4264167 10.23,34.619 
+      L53.282,34.619 C53.6063189,34.660876 53.9329887,34.682 54.26,34.682 L54.4,34.68 Z"
+      />
+    </g>
+  </svg>
+);

package/src/components/icons/Cross.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export const Cross = ({
+  titleTag = "Cross",
+  rotation = "0deg",
+  width = 24,
+  fill = "#000000",
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    viewBox="0 0 44 44"
+    style={{
+      width,
+      transform: `rotate(${rotation})`,
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <path
+      fill={fill}
+      d="m41.490645,35.984653l-14.08397,-14.08397l14.08397,-14.08397c1.520551,-1.520551 1.520551,-3.968531 0,-5.489082c-1.520551,-1.520551 -3.968531,-1.520551 -5.489082,0l-14.08397,14.08397l-14.08397,-14.08397c-1.520551,-1.520551 -3.968531,-1.520551 -5.489082,0c-1.520551,1.520551 -1.520551,3.968531 0,5.489082l14.08397,14.08397l-14.08397,14.08397c-1.520551,1.520551 -1.520551,3.968531 0,5.489082c1.520551,1.520551 3.968531,1.520551 5.489082,0l14.08397,-14.08397l14.08397,14.08397c1.520551,1.520551 3.968531,1.520551 5.489082,0c1.509767,-1.520551 1.509767,-3.979315 0,-5.489082z"
+    />
+  </svg>
+);

package/src/components/icons/DeleteIcon.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const DeleteIcon = ({ titleTag = "Bell", width = 24, fill = "#000" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    style={{
+      width,
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <path
+      fill={fill}
+      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z"
+    />
+  </svg>
+);

package/src/components/icons/DynamicDmarcIcon.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { IconContainer, IconContainerPropTypes } from '../IconContainer';
+
+export const DynamicDmarcIcon = (props) => (
+  <IconContainer {...props}>
+    <svg
+      width="34"
+      height="33"
+      viewBox="0 0 34 33"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <ellipse
+        cx="16.8541"
+        cy="16.5765"
+        rx="14.8272"
+        ry="14.6995"
+        className="stroke"
+        strokeWidth="1.41176"
+      />
+      <path
+        d="M24.0198 3.44434C24.0198 3.44434 29.3603 20.7277 11.4126 30.0626"
+        className="stroke"
+        strokeWidth="1.41176"
+      />
+      <path
+        d="M3.25098 12.5311C3.25098 12.5311 18.4863 4.47606 31.8172 16.5769"
+        className="stroke"
+        strokeWidth="1.41176"
+      />
+      <path
+        d="M5.97168 5.78809C22.487 13.034 19.5746 31.4111 19.5746 31.4111"
+        className="stroke"
+        strokeWidth="1.41176"
+      />
+    </svg>
+  </IconContainer>
+);
+
+DynamicDmarcIcon.propTypes = {
+  ...IconContainerPropTypes,
+};

package/src/components/icons/EditOutline.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const EditOutline = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <path d="M0 0h24v24H0V0z" fill="none"/>
+    <path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/>
+  </svg>
+);

package/src/components/icons/Email.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Path = styled.path`
+  fill-rule: evenodd;
+  clip-rule: evenodd;
+`;
+
+export const Email = ({
+  titleTag = "Email",
+  width = 35,
+  fill = "#ffffff",
+  bgFill = false
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    viewBox="0 0 35 35"
+    style={{
+      width,
+      height: width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+
+    {bgFill ? (
+      <g transform="translate(5, 5)" fillRule="nonzero">
+        <path
+          fill={bgFill}
+          d="M21.875,25 L3.125,25 C1.4,25 0,23.6 0,21.875 L0,3.125 C0,1.4 1.4,0 3.125,0 L21.875,0 C23.6,0 25,1.4 25,3.125 L25,21.875 C25,23.6 23.6,25 21.875,25 Z"
+        />
+        <g transform="translate(5.000000, 7.000000)" fill={fill}>
+          <path d="M7.56683168,10.5861386 L1.43019802,10.5861386 C0.791584158,10.5861386 0.308910891,10.2207921 0.176732673,9.64306931 C0.156570775,9.54537751 0.147109044,9.44578033 0.148514851,9.3460396 L0.148514851,1.37227723 C0.148514851,0.607425743 0.660891089,0.108415842 1.44653465,0.108415842 C5.53762376,0.108415842 9.62821782,0.108415842 13.7183168,0.108415842 C14.480198,0.108415842 14.9985149,0.613366337 14.9985149,1.35594059 C14.9985149,4.01633663 14.9985149,6.67673267 14.9985149,9.33712871 C14.9985149,10.079703 14.4787129,10.5846535 13.7019802,10.5846535 L7.56683168,10.5846535 L7.56683168,10.5861386 Z M9.65346535,6.18118812 C9.67408037,6.22776623 9.70107145,6.27125186 9.73366337,6.31039604 C10.4455446,7.00346535 11.1589109,7.69405941 11.8737624,8.38217822 C12.0623762,8.56336634 12.2465347,8.7490099 12.439604,8.92722772 C12.6013618,9.08736932 12.8419208,9.13792158 13.0544554,9.05643564 C13.2634893,8.99216777 13.4163769,8.81264064 13.4465347,8.5960396 C13.476149,8.38863357 13.3943226,8.18096375 13.2311881,8.04950495 C12.3470297,7.1980198 11.4643564,6.34653465 10.5831683,5.4950495 C10.5386139,5.4519802 10.4955446,5.40594059 10.4346535,5.34653465 C10.4896995,5.3081936 10.5427396,5.26705028 10.5935644,5.22326733 L13.1940594,2.67326733 C13.229703,2.63910891 13.2653465,2.60643564 13.2980198,2.56930693 C13.4428216,2.41511253 13.4909462,2.19370868 13.4232174,1.99331835 C13.3554886,1.79292802 13.1829132,1.64611736 12.9742574,1.61138614 C12.7540702,1.56764389 12.5273326,1.64530153 12.380198,1.81485149 C10.9178218,3.23564356 9.45544554,4.6529703 7.99306931,6.06683168 C7.6960396,6.36386139 7.4539604,6.36386139 7.1539604,6.06683168 L2.82178218,1.86534653 C2.77474666,1.81812245 2.72516793,1.77350159 2.67326733,1.73168317 C2.51345369,1.60522204 2.30067438,1.567806 2.1073066,1.63216215 C1.91393881,1.6965183 1.76601866,1.85398138 1.71386139,2.0509901 C1.66327583,2.27189242 1.74277719,2.50233117 1.91881188,2.6450495 C2.8029703,3.50445545 3.68613861,4.36485149 4.56831683,5.22623762 C4.60990099,5.26633663 4.65,5.30940594 4.6960396,5.35693069 C4.64554455,5.40742574 4.60544554,5.45049505 4.56386139,5.49207921 L1.91435644,8.05247525 C1.75609315,8.18100719 1.67479911,8.38171938 1.6990099,8.58415842 C1.72388254,8.80826807 1.88076339,8.99558848 2.0970297,9.05940594 C2.32741015,9.14152108 2.58456941,9.07708482 2.7490099,8.8960396 L5.42227723,6.31188119 C5.46386139,6.27178218 5.50990099,6.23316832 5.54108911,6.2019802 C5.87524752,6.51980198 6.20049505,6.83168317 6.52425743,7.12871287 C7.16584158,7.7450495 7.99009901,7.74356436 8.62871287,7.12871287 C8.9509901,6.81683168 9.28366337,6.51683168 9.6519802,6.17376238 L9.6519802,6.17376238 L9.65346535,6.18118812 Z" />
+        </g>
+      </g>
+    ) : (
+      <g transform="translate(6.176471, 9.264706)">
+        <path
+          fill={fill}
+          d="M18.5,16.5H4.1c-2.3,0-4.1-1.8-4.1-4.1V4.1C0,1.8,1.8,0,4.1,0h14.4
+				c2.3,0,4.1,1.8,4.1,4.1v8.2C22.6,14.6,20.8,16.5,18.5,16.5z M3.9,2.1C2.8,2.1,1.9,3,1.9,4.1v8.2c0,1.1,0.9,2.1,2.1,2.1h14.8
+				c1.1,0,2.1-0.9,2.1-2.1V4.1c0-1.1-0.9-2.1-2.1-2.1H3.9z"
+        />
+        <Path
+          fill={fill}
+          d="M3,11l2.6-2.6c0.3-0.3,0.7-0.3,1,0l0.5,0.5c0.3,0.3,0.3,0.7,0,1l-2.6,2.6
+				c-0.3,0.3-0.7,0.3-1,0L3,12C2.7,11.7,2.7,11.3,3,11z"
+        />
+        <Path
+          fill={fill}
+          d="M18.2,12.5l-2.6-2.6c-0.3-0.3-0.3-0.7,0-1L16,8.4c0.3-0.3,0.7-0.3,1,0l2.6,2.6
+				c0.3,0.3,0.3,0.7,0,1l-0.5,0.5C18.9,12.7,18.5,12.7,18.2,12.5z"
+        />
+        <Path
+          fill={fill}
+          d="M4.5,3.4l7.7,4.4c0.3,0.2,0.5,0.6,0.3,1l-0.3,0.6c-0.2,0.3-0.6,0.5-1,0.3L3.4,5.2
+				C3.1,5,3,4.6,3.2,4.3l0.3-0.6C3.7,3.4,4.1,3.2,4.5,3.4z"
+        />
+        <Path
+          fill={fill}
+          d="M10.5,7.9l7.7-4.4c0.3-0.2,0.8-0.1,1,0.3l0.3,0.6c0.2,0.3,0.1,0.8-0.3,1l-7.7,4.4
+				c-0.3,0.2-0.8,0.1-1-0.3l-0.3-0.6C10,8.5,10.2,8.1,10.5,7.9z"
+        />
+      </g>
+    )}
+  </svg>
+);

package/src/components/icons/EmailSourcesIcon.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { IconContainer, IconContainerPropTypes } from '../IconContainer';
+
+export const EmailSourcesIcon = (props) => (
+  <IconContainer {...props}>
+    <svg
+      width="38"
+      height="37"
+      viewBox="0 0 38 37"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.2915 10.1446C2.2915 6.26626 5.529 3.05664 9.44098 3.05664C13.4879 3.05664 16.5905 6.26626 16.5905 10.1446C16.5905 14.0228 13.353 17.2325 9.44098 17.2325C5.529 17.2325 2.2915 14.0228 2.2915 10.1446ZM4.9894 10.1445C4.9894 12.6855 7.01284 14.5578 9.44096 14.5578C12.004 14.5578 13.8925 12.5517 13.8925 10.1445C13.8925 7.73732 11.8691 5.73131 9.44096 5.73131C7.01284 5.73131 4.9894 7.60358 4.9894 10.1445Z"
+        className="fill"
+      />
+      <path
+        d="M2.2915 27.9317C2.2915 24.0534 5.39411 20.8438 9.44098 20.8438C13.4879 20.8438 16.5905 24.1871 16.5905 28.0654C16.5905 31.9437 13.353 35.1533 9.44098 35.1533C5.529 35.1533 2.2915 31.81 2.2915 27.9317ZM4.9894 28.0654C4.9894 30.4726 7.01284 32.4786 9.44096 32.4786C12.004 32.4786 13.8925 30.4726 13.8925 28.0654C13.8925 25.6581 11.8691 23.6521 9.44096 23.6521C7.01284 23.6521 4.9894 25.6581 4.9894 28.0654Z"
+        className="fill"
+      />
+      <path
+        d="M34.6666 10.2783C34.6666 14.1566 31.564 17.3662 27.5172 17.3662C23.4703 17.3662 20.3677 14.0228 20.3677 10.1446C20.3677 6.26626 23.6052 3.05664 27.5172 3.05664C31.4291 3.05664 34.6666 6.4 34.6666 10.2783ZM31.9687 10.1445C31.9687 7.73732 29.9453 5.73131 27.5171 5.73131C24.9541 5.73131 23.0656 7.73732 23.0656 10.1445C23.0656 12.5517 25.089 14.5578 27.5171 14.5578C29.9453 14.5578 31.9687 12.5517 31.9687 10.1445Z"
+        className="fill"
+      />
+      <path
+        d="M20.3677 27.9317C20.3677 24.0534 23.4703 20.8438 27.5172 20.8438C31.4291 20.8438 34.6666 24.0534 34.6666 27.9317C34.6666 31.81 31.4291 35.0196 27.5172 35.0196C23.6052 35.0196 20.3677 31.81 20.3677 27.9317ZM23.0656 28.0654C23.0656 30.4726 25.089 32.4786 27.5171 32.4786C29.9453 32.4786 31.9687 30.4726 31.9687 28.0654C31.9687 25.6581 29.9453 23.6521 27.5171 23.6521C25.089 23.6521 23.0656 25.6581 23.0656 28.0654Z"
+        className="fill"
+      />
+    </svg>
+  </IconContainer>
+);
+
+EmailSourcesIcon.propTypes = {
+  ...IconContainerPropTypes,
+};

package/src/components/icons/ExpandLayoutIcon.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { IconContainer, IconContainerPropTypes } from '../IconContainer';
+
+export const ExpandLayoutIcon = ({ isExpanded = true, ...props }) => {
+  return (
+    <IconContainer {...props}>
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {!isExpanded && (
+          <path
+            d="M2 9H0V14H5V12H2V9ZM0 5H2V2H5V0H0V5ZM12 12H9V14H14V9H12V12ZM9 0V2H12V5H14V0H9Z"
+            className="fill"
+          />
+        )}
+        {isExpanded && (
+          <path
+            d="M0 11H3V14H5V9H0V11ZM3 3H0V5H5V0H3V3ZM9 14H11V11H14V9H9V14ZM11 3V0H9V5H14V3H11Z"
+            className="fill"
+          />
+        )}
+      </svg>
+    </IconContainer>
+  );
+};
+
+ExpandLayoutIcon.propTypes = {
+  ...IconContainerPropTypes,
+  isExpanded: PropTypes.bool.isRequired,
+  fill: PropTypes.string,
+  size: PropTypes.string,
+};

package/src/components/icons/ExportIcon.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const ExportIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+    <path d="M15.7 17.1H1.4c-.8 0-1.4-.6-1.4-1.4V1.4C0 .6.6 0 1.4 0h4.3c.5 0 .9.4.9.8s-.4.9-.9.9H2.6c-.5 0-.9.4-.9.9v12c0 .5.4.8.9.8h12c.5 0 .9-.4.9-.8v-3.2c0-.5.4-.8.8-.8.5 0 .9.4.9.8v4.3c0 .8-.7 1.4-1.5 1.4zm.6-9.1c-.5 0-.8-.4-.8-.8V2.9l-5 5.1c-.5.4-1 .4-1.4 0-.4-.4-.4-.9 0-1.3l5-5H10c-.5 0-.9-.4-.9-.8s.4-.9.9-.9h5.7c.8 0 1.4.6 1.4 1.4v5.7c.1.5-.3.9-.8.9z" fill="#222"/>
+  </svg>
+);

package/src/components/icons/Eye.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export const Eye = ({ titleTag = "Eye", width = 60, fill = "#02ac61" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 81 39"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <circle
+        cx="5"
+        cy="5"
+        r="5"
+        strokeWidth="4"
+        stroke={fill}
+        fill="none"
+        transform="translate(35, 14)"
+      />
+      <path
+        fill={fill}
+        d="M71.1984,22.8372 C67.2424,25.5612 61.9964,28.3982 56.6144,30.6082 C56.9924,30.0742 57.3444,29.5232 57.6674,28.9532 C59.2394,26.1752 60.1364,22.9832 60.1364,19.5902 C60.1364,16.1972 59.2384,13.0052 57.6674,10.2272 C57.3444,9.6572 56.9924,9.1062 56.6144,8.5732 C61.9964,10.7822 67.2414,13.6192 71.1974,16.3432 C72.8234,17.4632 74.2274,18.5622 75.3364,19.5902 C74.2274,20.6192 72.8244,21.7172 71.1984,22.8372 M40.2804,34.6242 C31.7444,34.6242 24.7984,27.8802 24.7984,19.5902 C24.7984,11.3002 31.7444,4.5562 40.2804,4.5562 C48.8164,4.5562 55.7614,11.3002 55.7614,19.5902 C55.7614,27.8802 48.8164,34.6242 40.2804,34.6242 M9.3624,22.8372 C7.7364,21.7172 6.3334,20.6192 5.2244,19.5902 C6.3334,18.5622 7.7374,17.4632 9.3634,16.3432 C13.3204,13.6192 18.5644,10.7822 23.9454,8.5732 C23.5684,9.1062 23.2164,9.6582 22.8934,10.2272 C21.3214,13.0052 20.4234,16.1972 20.4234,19.5902 C20.4234,22.9832 21.3214,26.1752 22.8934,28.9532 C23.2164,29.5232 23.5684,30.0742 23.9454,30.6082 C18.5644,28.3982 13.3184,25.5612 9.3624,22.8372 M80.5554,19.3822 C80.5494,19.3112 80.5324,19.2422 80.5184,19.1722 C80.5054,19.1042 80.4964,19.0362 80.4754,18.9692 C80.4564,18.9042 80.4274,18.8422 80.4024,18.7782 C80.3754,18.7092 80.3494,18.6402 80.3144,18.5732 C80.2844,18.5172 80.2464,18.4642 80.2114,18.4102 C80.1674,18.3422 80.1254,18.2732 80.0734,18.2092 C80.0644,18.1982 80.0584,18.1862 80.0494,18.1752 C74.3084,11.4102 54.6074,0.7442 41.3084,0.2072 C40.9684,0.1902 40.6244,0.1802 40.2804,0.1802 C39.9344,0.1802 39.5914,0.1892 39.2514,0.2072 C25.9514,0.7442 6.2514,11.4092 0.5104,18.1752 C0.5014,18.1862 0.4964,18.1982 0.4874,18.2092 C0.4354,18.2732 0.3934,18.3412 0.3494,18.4092 C0.3144,18.4632 0.2744,18.5162 0.2454,18.5732 C0.2104,18.6392 0.1864,18.7092 0.1584,18.7772 C0.1334,18.8412 0.1034,18.9042 0.0844,18.9702 C0.0644,19.0362 0.0544,19.1042 0.0414,19.1722 C0.0284,19.2422 0.0104,19.3122 0.0044,19.3822 C-0.0026,19.4522 0.0014,19.5232 0.0014,19.5922 C0.0014,19.6622 -0.0026,19.7312 0.0044,19.7992 C0.0104,19.8712 0.0284,19.9412 0.0424,20.0132 C0.0554,20.0792 0.0644,20.1462 0.0834,20.2112 C0.1034,20.2782 0.1334,20.3422 0.1594,20.4082 C0.1864,20.4762 0.2114,20.5432 0.2444,20.6082 C0.2754,20.6662 0.3154,20.7192 0.3514,20.7752 C0.3944,20.8422 0.4364,20.9082 0.4864,20.9712 C0.4964,20.9832 0.5014,20.9952 0.5104,21.0062 C6.2504,27.7712 25.9514,38.4362 39.2504,38.9742 C39.5914,38.9902 39.9344,39.0002 40.2794,39.0002 C40.6244,39.0002 40.9674,38.9912 41.3074,38.9742 C54.6064,38.4362 74.3074,27.7712 80.0484,21.0062 C80.0574,20.9952 80.0624,20.9832 80.0714,20.9722 C80.1244,20.9082 80.1664,20.8392 80.2104,20.7712 C80.2454,20.7172 80.2834,20.6652 80.3134,20.6082 C80.3484,20.5412 80.3734,20.4722 80.4014,20.4022 C80.4274,20.3382 80.4564,20.2762 80.4744,20.2122 C80.4954,20.1452 80.5044,20.0772 80.5174,20.0082 C80.5314,19.9392 80.5484,19.8702 80.5544,19.7992 C80.5614,19.7302 80.5574,19.6602 80.5574,19.5902 C80.5584,19.5212 80.5624,19.4512 80.5554,19.3822"
+      ></path>
+    </g>
+  </svg>
+);

package/src/components/icons/Facebook.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export const Facebook = ({
+  titleTag = "Facebook",
+  width = 35,
+  fill = "#ffffff",
+  bgFill = false
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    viewBox="0 0 35 35"
+    style={{
+      width,
+      height: width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+
+    {bgFill && (
+      <circle fill={fill} cx="12" cy="12" r="12" transform="translate(6, 5)" />
+    )}
+
+    <path
+      fill={bgFill ? bgFill : fill}
+      d="M30,17c0-6.6-5.4-12-12-12S6,10.4,6,17c0,6,4.4,11,10.1,11.9v-8.4h-3V17h3v-2.6
+			c0-3,1.8-4.7,4.5-4.7c1.3,0,2.7,0.2,2.7,0.2v3h-1.5c-1.5,0-2,0.9-2,1.9V17h3.3l-0.5,3.5h-2.8v8.4C25.6,28,30,23,30,17z"
+    />
+  </svg>
+);

package/src/components/icons/FilterList.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const FilterList = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+  </svg>
+);

package/src/components/icons/FindOutHowIcon.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { IconContainer, IconContainerPropTypes } from '../IconContainer';
+
+export const FindOutHowIcon = (props) => (
+  <IconContainer {...props}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      viewBox="0 0 48 48"
+      width="48"
+      height="48"
+    >
+      <g
+        id="book-bookmark"
+        strokeWidth="2px"
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        stroke="#818A97"
+      >
+        <path
+          d="M35 31l-6-6-6 6V7h12v24z"
+          stroke="#818A97"
+          fill="none"
+          strokeWidth="2px"
+        />
+        <path
+          d="M35 9h6v38H11a4 4 0 0 1-4-4V5"
+          strokeLinejoin="round"
+          stroke="#818A97"
+          fill="none"
+          strokeWidth="2px"
+        />
+        <path
+          d="M39 9V1H11a4 4 0 0 0 0 8h12"
+          strokeLinejoin="round"
+          stroke="#818A97"
+          fill="none"
+          strokeWidth="2px"
+        />
+      </g>
+    </svg>
+  </IconContainer>
+);
+
+FindOutHowIcon.propTypes = {
+  ...IconContainerPropTypes,
+};

package/src/components/icons/FlatArrow.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const degree = {
+  left: 90,
+  right: -90,
+  up: -180,
+  down: 0,
+};
+
+export const FlatArrow = ({
+  titleTag,
+  width = 30,
+  fill = "#02ac61",
+  direction = "down",
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    viewBox="0 0 9 6"
+    style={{
+      width,
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g transform={`rotate(${degree[direction]})`} transform-origin="50% 50%">
+      <path
+        fill={fill}
+        d="M0.92221,0.18394C0.90945,0.20718,0.90278,0.23296,0.90278,0.25912        c0,0.03265,0.01058,0.06453,0.03022,0.09144l3.42319,4.67691C4.38814,5.07115,4.44087,5.09723,4.4972,5.09723        c0.05633,0,0.10906-0.02608,0.14101-0.06976l3.42894-4.67691c0.03624-0.04984,0.04-0.11453,0.00975-0.16779        C8.04665,0.12951,7.98742,0.09653,7.92327,0.09722H1.07401C1.01021,0.09722,0.9517,0.13067,0.92221,0.18394z"
+      />
+    </g>
+  </svg>
+);