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

package/src/components/icons/Team.jsx

@@ -0,0 +1,164 @@
+import React from 'react';
+
+export const Team = ({ titleTag = "Team", width = 60, fill = "#02ac61" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 84 57"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <defs>
+      <polygon
+        id="path-1"
+        points="0.0117333333 0.437555556 21.3859556 0.437555556 21.3859556 21.8116963 0.0117333333 21.8116963"
+      />
+      <polygon
+        id="path-3"
+        points="0.000313967414 0.462482927 83.1929412 0.462482927 83.1929412 33.9997512 0.000313967414 33.9997512"
+      />
+      <polygon
+        id="path-5"
+        points="0.637921429 0.437555556 22.2948857 0.437555556 22.2948857 21.8116963 0.637921429 21.8116963"
+      />
+    </defs>
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <path
+        d="M42.0554902,12.6229177 C38.0076237,12.6229177 34.7157595,15.9321847 34.7157595,19.9995807 
+        C34.7157595,24.1365837 37.9391997,27.3762437 42.0554902,27.3762437 C46.0407738,27.3762437 
+        49.2842405,24.0669767 49.2842405,19.9995807 C49.2842405,16.000953 45.9740186,12.6229177 
+        42.0554902,12.6229177 M42.0554902,31 C35.9590745,31 31,26.0654519 31,19.9995807 C31,13.9345481 
+        35.9590745,9 42.0554902,9 C48.0901574,9 53,13.9345481 53,19.9995807 C53,26.0654519 48.0901574,
+        31 42.0554902,31"
+        fill={fill}
+      />
+      <path
+        d="M41.5550562,11.7630484 C37.2672975,11.7630484 33.8587818,15.3000832 33.8587818,19.4995839 
+        C33.8587818,23.8106052 37.2672975,27.2361194 41.5550562,27.2361194 C45.7335305,27.2361194 
+        49.1412182,23.8106052 49.1412182,19.4995839 C49.1412182,15.3000832 45.7335305,11.7630484 
+        41.5550562,11.7630484 M41.5550562,9 C47.2717918,9 52,13.7529426 52,19.4995839 C52,25.3577458 
+        47.2717918,30 41.5550562,30 C35.7273802,30 31,25.3577458 31,19.4995839 C31,13.7529426 35.7273802,
+        9 41.5550562,9"
+        fill={fill}
+      />
+      <g transform="translate(54.000000, 0.000000)">
+        <mask id="mask-2" fill="white">
+          <use xlinkHref="#path-1"></use>
+        </mask>
+        <path
+          d="M10.6988444,3.95747407 C6.74617778,3.95747407 3.53091852,7.17273333 3.53091852,11.1245852 
+            C3.53091852,15.1440667 6.67936296,18.2916963 10.6988444,18.2916963 C14.5904,18.2916963 17.7575852,
+            15.076437 17.7575852,11.1245852 C17.7575852,7.23954815 14.5252148,3.95747407 10.6988444,3.95747407 
+            M10.6988444,21.8116963 C4.7066963,21.8116963 0.0117333333,17.1175481 0.0117333333,11.1245852 
+            C0.0117333333,5.23102963 4.8061037,0.437474074 10.6988444,0.437474074 C16.5915852,0.437474074 
+            21.3859556,5.23102963 21.3859556,11.1245852 C21.3859556,17.0173259 16.5915852,21.8116963 10.6988444,
+            21.8116963"
+          fill={fill}
+          mask="url(#mask-2)"
+        />
+      </g>
+
+      <path
+        d="M65.5,2.76315789 C61.1888079,2.76315789 57.7623256,6.30033291 57.7623256,10.5 C57.7623256,
+          14.8111921 61.1888079,18.2368421 65.5,18.2368421 C69.6996671,18.2368421 73.1261493,14.8111921 
+          73.1261493,10.5 C73.1261493,6.30033291 69.6996671,2.76315789 65.5,2.76315789 M65.5,0 C71.2468691,
+          0 76,4.75229867 76,10.5 C76,16.3575618 71.2468691,21 65.5,21 C59.6416059,21 55,16.3575618 55,
+          10.5 C55,4.75229867 59.6416059,0 65.5,0"
+        fill={fill}
+      />
+      <g transform="translate(0.000000, 23.000000)">
+        <mask id="mask-4" fill="white">
+          <use xlinkHref="#path-3"></use>
+        </mask>
+        <path
+          d="M18.0292,4.15521463 C10.1702588,4.15521463 4.22272941,9.93106829 3.56555294,18.2005317 
+            C3.56637647,18.3298976 3.68331765,18.4957512 3.83237647,18.5455073 C8.49684706,20.3599463 
+            13.2675529,21.2762878 18.0292,21.2762878 C20.4273176,21.2762878 22.7299059,21.0756049 
+            25.0580235,20.6634585 C26.3517882,17.4110683 28.4139059,14.7458 31.1916706,12.7348244 
+            C28.8816706,7.35536098 23.9841412,4.15521463 18.0292,4.15521463 M58.1375529,20.6634585 
+            C60.4104941,21.0656537 62.8366118,21.2762878 65.1663765,21.2762878 C69.8720235,21.2762878 
+            74.6073176,20.3964341 79.2396706,18.6599463 C79.5880235,18.4824829 79.6275529,18.3730195 
+            79.6275529,18.167361 C78.9720235,9.93106829 73.0244941,4.15521463 65.1663765,4.15521463 
+            C59.3012,4.15521463 54.2867294,7.4333122 52.0030824,12.7348244 C54.7808471,14.7458 56.8429647,
+            17.4118976 58.1375529,20.6634585 M41.6521412,13.1859463 C33.6688471,13.1859463 27.8563765,
+            18.8299463 27.1893176,27.2312634 L27.1852,27.2818488 L27.1687294,27.3291171 C27.1637882,
+            27.3448732 27.1489647,27.3904829 27.1860235,27.4535073 C27.2189647,27.5074098 27.2766118,
+            27.5530195 27.3457882,27.5754098 C32.0119059,29.3915073 36.8196706,30.3078488 41.6521412,
+            30.3078488 C46.3561412,30.3078488 51.0914353,29.4279951 55.7262588,27.690678 C56.0746118,
+            27.5132146 56.1149647,27.402922 56.1149647,27.1980927 C55.4594353,18.9609707 49.5110824,
+            13.1859463 41.6521412,13.1859463 M41.6521412,33.9997512 C36.4861412,33.9997512 31.2484941,
+            32.9905317 26.0841412,30.9994585 C24.4346118,30.360922 23.4060235,28.7338976 23.5237882,
+            26.9501415 C23.6127294,26.1407756 23.7033176,25.3198 23.8523765,24.5004829 C22.1089647,
+            24.7451171 20.2403765,24.8595561 18.0292,24.8595561 C12.7454353,24.8595561 7.54484706,
+            23.8868244 2.57072941,21.9678976 C0.895670588,21.3675073 -0.112329412,19.7769707 0.0103764706,
+            17.920239 C0.8092,7.80233659 8.38731765,0.462482927 18.0292,0.462482927 C25.3734353,0.462482927 
+            31.4321412,4.39487317 34.3186118,11.0049707 C36.5586118,10.0015561 39.0234353,9.49321463 
+            41.6521412,9.49321463 C44.2124941,9.49321463 46.6410824,10.0015561 48.8769647,11.0049707 
+            C51.7626118,4.39487317 57.8213176,0.462482927 65.1663765,0.462482927 C74.8082588,0.462482927 
+            82.3855529,7.80233659 83.1843765,17.9144341 C83.3037882,19.7247268 82.2282588,21.3534098 
+            80.5062588,21.9712146 C75.6482588,23.8859951 70.4830824,24.8595561 65.1663765,24.8595561 
+            C62.9552,24.8595561 61.0866118,24.7451171 59.3423765,24.5004829 C59.4914353,25.3189707 
+            59.5820235,26.1366293 59.6693176,26.9318976 C59.7944941,28.8168244 58.6572,30.5251171 
+            56.9681412,31.0110683 C51.9479059,32.9897024 46.7835529,33.9997512 41.6521412,33.9997512"
+          fill={fill}
+          mask="url(#mask-4)"
+        />
+      </g>
+
+      <path
+        d="M42.054617,34.9995436 C33.6710661,34.9995436 27.9011237,41.2218701 27.2477216,49.5551189 
+          C27.1386846,49.8889509 27.3567586,50.2219461 27.6830497,50.3332235 C32.4732989,52.2224279 
+          37.2643679,53.1109731 42.054617,53.1109731 C46.736649,53.1109731 51.5268982,52.2224279 
+          56.2089302,50.4445008 C56.6442583,50.2219461 56.8623323,50.0002282 56.8623323,49.5551189 
+          C56.2089302,41.2218701 50.3291309,34.9995436 42.054617,34.9995436 M32.1470077,35.110821 
+          C29.9695472,29.6665991 25.0702611,25.8881903 18.5378796,25.8881903 C10.2633657,25.8881903 
+          4.38356643,32.1113534 3.73016431,40.4446022 C3.73016431,40.7775975 3.94823829,41.1114294 
+          4.27452944,41.2218701 C9.06559842,43.1110745 13.8558476,43.9996197 18.5378796,43.9996197 
+          C21.0416312,43.9996197 23.4371657,43.7770651 25.8318804,43.3336291 C27.1386846,39.8890523 
+          29.3161451,37.110466 32.1470077,35.110821 M51.8531893,35.110821 C54.6840519,37.110466 
+          56.8623323,39.8890523 58.1674969,43.3336291 C60.5630313,43.7770651 63.0676028,43.9996197 
+          65.4631373,43.9996197 C70.1443495,43.9996197 74.9345986,43.1110745 79.6158108,41.3331474 
+          C80.0519588,41.1114294 80.2692129,40.8888748 80.2692129,40.4446022 C79.6158108,32.1113534 
+          73.7376512,25.8881903 65.4631373,25.8881903 C59.038973,25.8881903 54.0306498,29.6665991 
+          51.8531893,35.110821 M18.5378796,23 C26.0499544,23 31.9289338,27.3331221 34.5417224,33.7771665 
+          C36.8282199,32.6669033 39.3327914,32.1113534 42.054617,32.1113534 C44.6682255,32.1113534 
+          47.1711573,32.6669033 49.4576548,33.7771665 C52.0712633,27.3331221 57.9502427,23 65.4631373,
+          23 C75.1526726,23 82.2294193,30.4447036 82.9918584,40.2220476 C83.1000755,41.8886973 82.1203823,
+          43.3336291 80.5963239,43.8883424 C75.5880007,45.8888241 70.4706406,46.7773693 65.4631373,46.7773693 
+          C63.284857,46.7773693 61.2164335,46.666092 59.1480099,46.3330967 C59.3652641,47.3329192 59.4743011,
+          48.3335784 59.5833381,49.3334009 C59.6923751,51.0000507 58.711862,52.5554232 57.1886234,53.0005324 
+          C52.1803003,54.9993408 47.0629402,56 42.054617,56 C36.9372569,56 31.8207166,54.9993408 26.7033565,
+          53.0005324 C25.2875152,52.4449825 24.307822,51.0000507 24.416859,49.3334009 C24.525896,48.3335784 
+          24.6341131,47.3329192 24.8521871,46.3330967 C22.7837636,46.666092 20.7153401,46.7773693 18.5378796,
+          46.7773693 C13.5295564,46.7773693 8.4121963,45.8888241 3.295656,43.8883424 C1.77077779,43.3336291 
+          0.900121513,41.8886973 1.0091585,40.2220476 C1.77077779,30.4447036 8.84752444,23 18.5378796,23"
+        fill={fill}
+      />
+      <g transform="translate(7.000000, 0.000000)">
+        <mask id="mask-6" fill="white">
+          <use xlinkHref="#path-5"></use>
+        </mask>
+        <path
+          d="M11.4117786,3.95747407 C7.55435,3.95747407 4.29492143,7.23954815 4.29492143,11.1245852 
+            C4.29492143,15.076437 7.48781429,18.2916963 11.4117786,18.2916963 C15.4630643,18.2916963 
+            18.6370643,15.1440667 18.6370643,11.1245852 C18.6370643,7.17273333 15.3957071,3.95747407 
+            11.4117786,3.95747407 M11.4117786,21.8116963 C5.47120714,21.8116963 0.637921429,17.0173259 
+            0.637921429,11.1245852 C0.637921429,5.23102963 5.47120714,0.437474074 11.4117786,0.437474074 
+            C17.4131357,0.437474074 22.2948857,5.23102963 22.2948857,11.1245852 C22.2948857,17.0173259 
+            17.4131357,21.8116963 11.4117786,21.8116963"
+          fill={fill}
+          mask="url(#mask-6)"
+        />
+      </g>
+      <path
+        d="M18.4449438,2.76315789 C14.2664695,2.76315789 10.8579539,6.30033291 10.8579539,10.5 C10.8579539,
+          14.8111921 14.2664695,18.2368421 18.4449438,18.2368421 C22.7327025,18.2368421 26.1412182,14.8111921 
+          26.1412182,10.5 C26.1412182,6.30033291 22.7327025,2.76315789 18.4449438,2.76315789 M18.4449438,
+          0 C24.2717918,0 29,4.75229867 29,10.5 C29,16.3575618 24.2717918,21 18.4449438,21 C12.7273802,
+          21 8,16.3575618 8,10.5 C8,4.75229867 12.7273802,0 18.4449438,0"
+        fill={fill}
+      />
+    </g>
+  </svg>
+);

package/src/components/icons/ThreeDotsIcon.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { IconContainer, IconContainerPropTypes } from '../IconContainer';
+
+export const ThreeDotsIcon = (props) => (
+  <IconContainer {...props}>
+    <svg width="24" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12 8.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"
+        className="fill"
+      />
+    </svg>
+  </IconContainer>
+);
+
+ThreeDotsIcon.propTypes = {
+  ...IconContainerPropTypes,
+};

package/src/components/icons/Thumb.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const Thumb = ({ titleTag, width = 40, fill = "#02ac61" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 34.3 45.5"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <path
+      fill={fill}
+      d="M2.74,44.67H7.09a2.7,2.7,0,0,0,1.52-.49A5.07,5.07,0,0,0,12,45.5H25.88c3.38,0,5.58-1.86,6-4.94l1.86-11.69v-.4a5.14,5.14,0,0,0-5.14-5.13H22.21V18.93c0-2.34-.68-4.06-2.1-5.08a6.45,6.45,0,0,0-5.29-.69,1.43,1.43,0,0,0-1,1.37v5.68c0,3.81-4.36,5.23-4.9,5.43a2.69,2.69,0,0,0-1.9-.79H2.69A2.72,2.72,0,0,0,0,27.54V41.93A2.8,2.8,0,0,0,2.74,44.67Zm7-16.24c.79-.25,7-2.3,7-8.18V15.8a2.77,2.77,0,0,1,1.76.39c.64.44.93,1.37.93,2.74V24.8a1.42,1.42,0,0,0,1.42,1.42h7.78a2.3,2.3,0,0,1,2.3,2.3v.05l-1.86,11.6v0c-.1.68-.29,2.44-3.13,2.44H12.08a2.3,2.3,0,0,1-2.3-2.3Zm-6.89-.69h4V41.83h-4ZM23,11.3a1.46,1.46,0,0,1,0-2L27.4,4.89a1.42,1.42,0,1,1,2,2L25,11.3a1.37,1.37,0,0,1-2,0Zm3.67,4h6.22a1.42,1.42,0,1,1,0,2.84H26.66a1.42,1.42,0,0,1,0-2.84ZM16.15,7.63V1.42a1.42,1.42,0,1,1,2.83,0V7.63a1.42,1.42,0,1,1-2.83,0ZM5.72,6.9a1.47,1.47,0,0,1,0-2,1.45,1.45,0,0,1,2,0l4.4,4.41a1.44,1.44,0,0,1,0,2,1.36,1.36,0,0,1-1,.44,1.45,1.45,0,0,1-1-.44ZM.83,16.73a1.43,1.43,0,0,1,1.42-1.42H8.46a1.42,1.42,0,0,1,0,2.84H2.3A1.43,1.43,0,0,1,.83,16.73Z"
+    />
+  </svg>
+);

package/src/components/icons/Traffic.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const Traffic = ({ titleTag, width = 25, stroke = "#33b222", strokeWidth = 0.8 }) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 13 22'
+    style={{
+      width,
+    }}>
+    {titleTag && <title>{titleTag}</title>}
+    <path
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      d='M2.104 21h9.292c.568 0 1.03-.462 1.03-1.03V2.03c0-.568-.462-1.03-1.03-1.03H2.104c-.568 0-1.03.462-1.03 1.03v17.94c0 .568.462 1.03 1.03 1.03zm-.53-18.97c0-.292.237-.53.53-.53h9.292c.293 0 .53.238.53.53v17.94c0 .292-.237.53-.53.53H2.104a.531.531 0 01-.53-.53V2.03z'
+    />
+    <path
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      d='M6.75 7.412A2.366 2.366 0 009.113 5.05c0-1.303-1.06-2.363-2.363-2.363s-2.363 1.06-2.363 2.363A2.366 2.366 0 006.75 7.412zm0-4.226c1.027 0 1.863.836 1.863 1.863S7.777 6.912 6.75 6.912 4.887 6.077 4.887 5.05s.836-1.863 1.863-1.863zM6.75 13.363c1.303 0 2.363-1.06 2.363-2.363S8.053 8.637 6.75 8.637 4.387 9.697 4.387 11s1.06 2.363 2.363 2.363zm0-4.226c1.027 0 1.863.836 1.863 1.863s-.836 1.863-1.863 1.863S4.887 12.027 4.887 11s.836-1.863 1.863-1.863zM6.75 19.314a2.366 2.366 0 002.363-2.363c0-1.303-1.06-2.363-2.363-2.363s-2.363 1.06-2.363 2.363a2.366 2.366 0 002.363 2.363zm0-4.226c1.027 0 1.863.835 1.863 1.863s-.836 1.863-1.863 1.863-1.863-.836-1.863-1.863.836-1.863 1.863-1.863z'
+    />
+  </svg>
+);

package/src/components/icons/Twitter.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export const Twitter = ({
+  titleTag = "Twitter",
+  width = 24,
+  bgFill = "#1da1f2",
+  stroke = null,
+  birdFill = null
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 25 25"
+    style={{
+      width,
+      height: width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="nonzero">
+      <g fill={stroke ? "transparent" : !birdFill ? bgFill : "transparent"}>
+        <path
+          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>
+      <g
+        transform="translate(4.687500, 6.125000)"
+        fill={stroke ? "transparent" : birdFill ? birdFill : "#FFFFFF"}
+        stroke={stroke && stroke}
+      >
+        <path
+          d="M4.9125,12.725 C10.80625,12.725 14.03125,7.8375 14.03125,3.60625 C14.03125,3.46875 
+        14.03125,3.33125 14.025,3.19375 C14.65,2.74375 15.19375,2.175 15.625,1.53125 C15.05,1.7875 
+        14.43125,1.95625 13.78125,2.0375 C14.44375,1.64375 14.95,1.0125 15.19375,0.2625 C14.575,0.63125 
+        13.8875,0.89375 13.15625,1.0375 C12.56875,0.4125 11.7375,0.025 10.81875,0.025 C9.05,0.025 7.6125,
+        1.4625 7.6125,3.23125 C7.6125,3.48125 7.64375,3.725 7.69375,3.9625 C5.03125,3.83125 2.66875,2.55 
+        1.0875,0.6125 C0.8125,1.0875 0.65625,1.6375 0.65625,2.225 C0.65625,3.3375 1.225,4.31875 2.08125,
+        4.89375 C1.55625,4.875 1.0625,4.73125 0.63125,4.49375 C0.63125,4.50625 0.63125,4.51875 0.63125,
+        4.5375 C0.63125,6.0875 1.7375,7.3875 3.2,7.68125 C2.93125,7.75625 2.65,7.79375 2.35625,7.79375 
+        C2.15,7.79375 1.95,7.775 1.75625,7.7375 C2.1625,9.0125 3.35,9.9375 4.75,9.9625 C3.65,10.825 2.26875,
+        11.3375 0.76875,11.3375 C0.5125,11.3375 0.25625,11.325 0.00625,11.29375 C1.41875,12.19375 3.10625,
+        12.725 4.9125,12.725"
+        />
+      </g>
+    </g>
+  </svg>
+);

package/src/components/icons/Upload.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Upload = ({width = 24, height = 24, color = '#333333'}) =>
+	<svg width={width} height={height} xmlns="http://www.w3.org/2000/svg">
+		<g fill={color} transform="translate(3, 4)">
+			<path
+				d="M0,12 L0,13.8181818 C0,14.7151515 0.727272727,15.4424242 1.64848485,15.4424242 L15.5636364,15.4424242 C16.4606061,15.4424242 17.2121212,14.7151515 17.2121212,13.8181818 L17.2121212,12 L16,12 L16,13.8181818 C16,14.0606061 15.8060606,14.230303 15.5636364,14.230303 L1.64848485,14.230303 C1.40606061,14.230303 1.21212121,14.0363636 1.21212121,13.8181818 L1.21212121,12 L0,12 Z"/>
+			<path
+				d="M8.2969697,0 L8.2969697,9.79393939 L5.8,7.53939394 L5,8.43636364 L8.51515152,11.5878788 C8.63636364,11.6848485 8.78181818,11.7333333 8.92727273,11.7333333 C9.07272727,11.7333333 9.21818182,11.6848485 9.33939394,11.5878788 L12.8545455,8.43636364 L12.0545455,7.53939394 L9.50909091,9.81818182 L9.50909091,0 L8.2969697,0 Z"
+				transform="translate(8.927273, 5.866667) scale(1, -1) translate(-8.927273, -5.866667)"/>
+		</g>
+	</svg>;

package/src/components/icons/VerticalDots.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export const VerticalDots = ({
+  titleTag = "Vertical Dots",
+  width = 20,
+  fill = "#dddddd"
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 95"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g
+      fill={fill}
+      transform="rotate(-180.000000)"
+      transform-origin="center center"
+      fillRule="evenodd"
+    >
+      <circle cx="8" cy="8" r="8" />
+      <circle cx="8" cy="40" r="6" />
+      <circle cx="8" cy="68" r="4" />
+      <circle cx="8" cy="92" r="3" />
+    </g>
+  </svg>
+);

package/src/components/icons/Warning.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+// from ondmarc app
+export const Warning = ({
+  titleTag = "Warning",
+  width = 30,
+  bgFill = false,
+  fill = "#02ac61",
+  fontWeight = 600,
+  fontFamily = "'Raleway', sans-serif"
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 31 31"
+    style={{
+      width,
+      fontWeight
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    {bgFill && (
+      <circle cx="15.5" cy="15.5" r="15.5" fillRule="evenodd" fill={bgFill} />
+    )}
+    <text
+      transform={bgFill ? "translate(13 21.5)" : "translate(12 23)"}
+      fill={fill}
+      fontFamily={fontFamily}
+      fontSize={16 + (width - 30) / 6}
+    >
+      !
+    </text>
+  </svg>
+);
+// text translate (bgFill):
+// small - 13 21
+// large - 12.5 23.5

package/src/components/icons/WarningTriangle.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+export const WarningTriangle = ({
+  titleTag = "Warning",
+  width = 50,
+  fill = "#02ac61",
+  fillBar = false,
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 16"
+    style={{
+      width,
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g stroke="none" fill={fill} fillRule="nonzero">
+      <path
+        fill={fill}
+        d="M17.31305,13.65851L10.04346,0.89758C9.77563,0.42926,9.33563,0.1756,8.79999,0.1756
+		c-0.51648,0-0.97565,0.27319-1.24347,0.72198L0.28693,13.65851c-0.26782,0.46832-0.26782,0.99518,0,1.46344
+		c0.26788,0.46832,0.70789,0.72192,1.24353,0.72192h14.53912c0.51648,0,0.97565-0.27313,1.24347-0.72192
+		C17.56177,14.65369,17.56177,14.12683,17.31305,13.65851z M16.3374,14.53656l-0.01917,0.01953
+		c0,0.01953-0.09564,0.15613-0.26782,0.15613H1.53046c-0.15308,0-0.22961-0.0976-0.28699-0.17566c0,0-0.09564-0.15607,0-0.33167
+		l7.2887-12.76099c0.09564-0.15613,0.24872-0.1756,0.26782-0.1756c0.01917,0,0.19135,0,0.28699,0.1756L16.3374,14.2049
+		C16.43304,14.38049,16.3374,14.53656,16.3374,14.53656z"
+      />
+      <rect
+        fill={fillBar ? fill : "none"}
+        x="8.24524"
+        y="7.78534"
+        width="1.09039"
+        height="5.38538"
+      />
+      <rect
+        fill={fillBar ? fill : "none"}
+        x="8.24524"
+        y="5.7561"
+        width="1.09039"
+        height="1.34631"
+      />
+    </g>
+  </svg>
+);

package/src/components/icons/Youtube.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export const Youtube = ({
+  titleTag = "Youtube",
+  width = 35,
+  fill = "#ffffff",
+  bgFill = "#ff0000"
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    viewBox="0 0 36 35"
+    style={{
+      width,
+      height: width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <path
+      fill={bgFill}
+      d="M34.3,8.8c-0.4-1.5-1.5-2.6-3-3C28.7,5,18,5,18,5S7.4,5,4.7,5.7c-1.5,0.4-2.6,1.5-3,3
+      C1,11.4,1,17,1,17s0,5.6,0.7,8.2c0.4,1.5,1.5,2.6,3,3C7.4,29,18,29,18,29s10.6,0,13.3-0.7c1.5-0.4,2.6-1.5,3-3
+      c0.7-2.7,0.7-8.2,0.7-8.2S35.1,11.4,34.3,8.8z"
+    />
+    <polygon fill={fill} points="14.5,22.1 23.5,17 14.5,11.9" />
+  </svg>
+);

package/src/components/icons/index.ts

@@ -0,0 +1,69 @@
+export * from './ActionsIcon';
+export * from './AddIcon';
+export * from './Arrow';
+export * from './ArrowDown';
+export * from './ArrowIcon';
+export * from './ArrowUp';
+export * from './BarchartHorizontal';
+export * from './BellIcon';
+export * from './BimiSetupIcon';
+export * from './Chevron';
+export * from './ChevronLeft';
+export * from './ChevronRight';
+export * from './ClearIcon';
+export * from './Cloud';
+export * from './Cross';
+export * from './DeleteIcon';
+export * from './DynamicDmarcIcon';
+export * from './EditOutline';
+export * from './Email';
+export * from './EmailSourcesIcon';
+export * from './ExpandLayoutIcon';
+export * from './ExportIcon';
+export * from './Eye';
+export * from './Facebook';
+export * from './FilterList';
+export * from './FindOutHowIcon';
+export * from './FlatArrow';
+export * from './ForwardArrowIcon';
+export * from './Github';
+export * from './Globe';
+export * from './Hand';
+export * from './IngrainIcon';
+export * from './InfinityLoop';
+export * from './InfinityLoopBreak';
+export * from './LanguageIcon';
+export * from './Linkedin';
+export * from './LocationPin';
+export * from './MicrosoftShield';
+export * from './News';
+export * from './Nodes';
+export * from './OnDmarcIcon';
+export * from './OnDmarcLogo';
+export * from './OnDomainIcon';
+export * from './OnInboxIcon';
+export * from './OnInboxLogo';
+export * from './OnInboxManagerIcon';
+export * from './OpenInNewTabIcon';
+export * from './Padlock';
+export * from './PlusIcon';
+export * from './Question';
+export * from './Recruiting';
+export * from './ReportsIcon';
+export * from './SearchIcon';
+export * from './Shield';
+export * from './ShieldPassIcon';
+export * from './ShieldSolid';
+export * from './ShieldWarningIcon';
+export * from './ShieldWarningInvertedIcon';
+export * from './Spinner';
+export * from './Team';
+export * from './ThreeDotsIcon';
+export * from './Thumb';
+export * from './Traffic';
+export * from './Twitter';
+export * from './Upload';
+export * from './VerticalDots';
+export * from './Warning';
+export * from './WarningTriangle';
+export * from './Youtube';

package/src/hooks/useDebouncedValue.jsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const DEBOUNCE_TIME = 100;
+
+export const useDebouncedValue = (value, delay = DEBOUNCE_TIME) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value]);
+
+  return [debouncedValue];
+};

package/src/hooks/useFetch.jsx

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+export const useFetch = (url, options) => {
+  const [response, setResponse] = useState(null);
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      try {
+        const res = await fetch(url, options);
+        const json = await res.json();
+        setResponse(json);
+        setIsLoading(false);
+      } catch (error) {
+        setError(error);
+      }
+    };
+    if (url && options) {
+      fetchData();
+    }
+  }, [options, url]);
+
+  return { response, error, isLoading };
+};

package/src/hooks/useIsMobile.jsx

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export const useIsMobile = () => {
+  const [state, setState] = useState(false);
+
+  useEffect(() => {
+    const check = window.matchMedia("(max-width: 767px)");
+    const checkIsMobile = () => {
+      if (state !== check.matches) {
+        setState(check.matches);
+      }
+    };
+
+    check.addListener(checkIsMobile);
+    checkIsMobile();
+    return () => {
+      check.removeListener(checkIsMobile);
+    };
+  }, []);
+
+  return { isMobile: state };
+};
+
+// Use: Place this with your other hooks:
+//  const { isMobile } = useIsMobile();

package/src/hooks/useOnClickOutside.jsx

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+
+export const useOnClickOutside = callback => {
+  const ref = useRef(null);
+  useEffect(() => {
+    const onClickOutside = evt => {
+      if (ref.current && !ref.current.contains(evt.target)) callback();
+    };
+    document.addEventListener("click", onClickOutside);
+    return () => document.removeEventListener("click", onClickOutside);
+  }, [callback]);
+
+  return ref;
+};

package/src/hooks/useToggle.jsx

@@ -0,0 +1,8 @@
+import { useState, useCallback } from 'react';
+
+export const useToggle = (initialState = false) => {
+  const [state, setState] = useState(initialState);
+  const toggle = useCallback(() => setState(state => !state), []);
+
+  return [state, toggle];
+};

package/src/index.ts

@@ -0,0 +1,23 @@
+export * from './hooks/useOnClickOutside';
+export * from './hooks/useFetch';
+export * from './hooks/useIsMobile';
+export * from './hooks/useToggle';
+export * from './hooks/useDebouncedValue';
+
+export * from './components/Alert';
+export * from './components/Button';
+export * from './components/Card';
+export * from './components/CardHeader';
+export * from './components/Checkbox';
+export * from './components/CheckboxTree';
+export * from './components/IconContainer';
+export * from './components/Input';
+export * from './components/Pagination';
+export * from './components/Radio';
+export * from './components/Select';
+export * from './components/Switch';
+export * from './components/Table';
+export * from './components/Tabs';
+export * from './components/Typography';
+
+export * from './components/icons';

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig"
+}