Merge pull request #2772 from spotify/alund/transparent

emptystates: add transparent versions

packages/core/src/components/EmptyState/EmptyState.stories.tsx

@@ -26,13 +26,9 @@ export default {
 
 const containerStyle = { width: '100%', height: '100vh' };
 
-export const Field = () => (
+export const MissingAnnotation = () => (
   <div style={containerStyle}>
-    <EmptyState
-      missing="field"
-      title="Your plugin is missing an annotation"
-      description="Add a description here."
-    />
+    <MissingAnnotationEmptyState annotation="backstage.io/example" />
   </div>
 );
 
@@ -80,9 +76,3 @@ export const WithAction = () => (
     />
   </div>
 );
-
-export const MissingAnnotation = () => (
-  <div style={containerStyle}>
-    <MissingAnnotationEmptyState annotation="backstage.io/example" />
-  </div>
-);

packages/core/src/components/EmptyState/EmptyState.tsx

@@ -17,7 +17,6 @@
 import React from 'react';
 import { makeStyles, Typography, Grid } from '@material-ui/core';
 import { EmptyStateImage } from './EmptyStateImage';
-import Background from './assets/Background.svg';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -30,10 +29,6 @@ const useStyles = makeStyles(theme => ({
   imageContainer: {
     position: 'relative',
   },
-  backgroundImage: {
-    position: 'absolute',
-    width: '100%',
-  },
 }));
 
 type Props = {
@@ -66,11 +61,6 @@ export const EmptyState = ({ title, description, missing, action }: Props) => {
         </Grid>
       </Grid>
       <Grid item xs={12} md={6} className={classes.imageContainer}>
-        <img
-          src={Background}
-          className={classes.backgroundImage}
-          alt="background"
-        />
         <EmptyStateImage missing={missing} />
       </Grid>
     </Grid>

packages/core/src/components/EmptyState/EmptyStateImage.tsx

@@ -27,7 +27,7 @@ type Props = {
 
 const useStyles = makeStyles({
   generalImg: {
-    width: '75%',
+    width: '95%',
     zIndex: 2,
     position: 'absolute',
     left: '50%',

packages/core/src/components/EmptyState/assets/Background.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="641" height="393" fill="none" viewBox="0 0 641 393"><rect width="380.051" height="45.228" x="15.148" y="106.723" fill="#EEE" rx="22.614" transform="rotate(-10.5556 15.1477 106.723)"/><rect width="315.147" height="45.228" x="52.761" y="141.21" fill="#EEE" rx="22.614" transform="rotate(-10.5556 52.761 141.21)"/><rect width="411.631" height="45.228" x="51.057" y="256.093" fill="#EEE" rx="22.614" transform="rotate(-10.5556 51.0568 256.093)"/><rect width="411.033" height="45.228" x="35.578" y="300.474" fill="#EEE" rx="22.614" transform="rotate(-10.5556 35.5782 300.474)"/><rect width="406.8" height="45.228" x="199.649" y="137.293" fill="#EEE" rx="22.614" transform="rotate(-10.5556 199.649 137.293)"/><rect width="402.291" height="45.228" x="186.507" y="181.238" fill="#EEE" rx="22.614" transform="rotate(-10.5556 186.507 181.238)"/><rect width="368.583" height="45.228" x="219.599" y="273.399" fill="#EEE" rx="22.614" transform="rotate(-10.5556 219.599 273.399)"/><rect width="425.836" height="45.228" x="186.526" y="321.058" fill="#EEE" rx="22.614" transform="rotate(-10.5556 186.526 321.058)"/></svg>

packages/core/src/components/EmptyState/assets/createComponent.svg

@@ -1 +1,36 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="282" height="186" fill="none" viewBox="0 0 282 186"><g filter="url(#filter0_d)"><path fill="#9E9E9E" d="M254.494 16.3785H23.3728C20.6336 16.3785 18.4131 18.5995 18.4131 21.3392V36.221C18.4131 38.9607 20.6336 41.1816 23.3728 41.1816H254.494C257.233 41.1816 259.454 38.9607 259.454 36.221V21.3392C259.454 18.5995 257.233 16.3785 254.494 16.3785Z"/><mask id="mask0" width="242" height="146" x="18" y="16" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#404040" d="M254.494 16.3785H23.3728C20.6336 16.3785 18.4131 18.5995 18.4131 21.3392V156.268C18.4131 159.008 20.6336 161.228 23.3728 161.228H254.494C257.233 161.228 259.454 159.008 259.454 156.268V21.3392C259.454 18.5995 257.233 16.3785 254.494 16.3785Z"/></mask><g mask="url(#mask0)"><path fill="#EEE" d="M259.495 30.2683H18.4131V161.432H259.495V30.2683Z"/><path fill="#D9D9D9" d="M25.3567 25.306C26.4524 25.306 27.3406 24.418 27.3406 23.3226C27.3406 22.2272 26.4524 21.3392 25.3567 21.3392C24.261 21.3392 23.3728 22.2272 23.3728 23.3226C23.3728 24.418 24.261 25.306 25.3567 25.306Z" opacity=".4"/><path fill="#D9D9D9" d="M32.4084 25.306C33.5041 25.306 34.3923 24.418 34.3923 23.3226C34.3923 22.2272 33.5041 21.3392 32.4084 21.3392C31.3127 21.3392 30.4246 22.2272 30.4246 23.3226C30.4246 24.418 31.3127 25.306 32.4084 25.306Z" opacity=".4"/><path fill="#D9D9D9" d="M39.2439 25.306C40.3395 25.306 41.2278 24.418 41.2278 23.3226C41.2278 22.2272 40.3395 21.3392 39.2439 21.3392C38.1482 21.3392 37.26 22.2272 37.26 23.3226C37.26 24.418 38.1482 25.306 39.2439 25.306Z" opacity=".3"/><path fill="#616161" d="M32.5328 29.9937H18.4131V161.432H32.5328V29.9937Z"/><path fill="#D9D9D9" d="M259.495 29.9937H32.533V46.2271H259.495V29.9937Z"/><path fill="#fff" d="M67.3094 50.94H39.5928C38.5819 50.94 37.7625 51.7606 37.7625 52.7729C37.7625 53.7851 38.5819 54.6057 39.5928 54.6057H67.3094C68.3202 54.6057 69.1397 53.7851 69.1397 52.7729C69.1397 51.7606 68.3202 50.94 67.3094 50.94Z"/><path fill="#fff" d="M97.6407 57.224H39.5928C38.5819 57.224 37.7625 58.0445 37.7625 59.0568C37.7625 60.069 38.5819 60.8896 39.5928 60.8896H97.6407C98.6516 60.8896 99.471 60.069 99.471 59.0568C99.471 58.0445 98.6516 57.224 97.6407 57.224Z"/><path fill="#BDBDBD" d="M253.219 50.9401H228.118C227.54 50.9401 227.072 51.409 227.072 51.9874V58.2713C227.072 58.8497 227.54 59.3186 228.118 59.3186H253.219C253.797 59.3186 254.265 58.8497 254.265 58.2713V51.9874C254.265 51.409 253.797 50.9401 253.219 50.9401Z"/><path stroke="#D9D9D9" stroke-dasharray="5 5" stroke-width="2" d="M99.994 66.9117H40.3772C39.3663 66.9117 38.5469 67.7322 38.5469 68.7445V114.303C38.5469 115.315 39.3663 116.136 40.3772 116.136H99.994C101.005 116.136 101.824 115.315 101.824 114.303V68.7445C101.824 67.7322 101.005 66.9117 99.994 66.9117Z"/><path stroke="#D9D9D9" stroke-dasharray="5 5" stroke-width="2" d="M175.822 66.9117H112.545C111.534 66.9117 110.714 67.7322 110.714 68.7445V114.303C110.714 115.315 111.534 116.136 112.545 116.136H175.822C176.833 116.136 177.652 115.315 177.652 114.303V68.7445C177.652 67.7322 176.833 66.9117 175.822 66.9117Z"/><path stroke="#D9D9D9" stroke-dasharray="5 5" stroke-width="2" d="M251.65 66.9117H188.373C187.362 66.9117 186.543 67.7322 186.543 68.7445V114.303C186.543 115.315 187.362 116.136 188.373 116.136H251.65C252.661 116.136 253.481 115.315 253.481 114.303V68.7445C253.481 67.7322 252.661 66.9117 251.65 66.9117Z"/><path stroke="#D9D9D9" stroke-dasharray="5 5" stroke-width="2" d="M139.739 124.514H40.3772C39.3663 124.514 38.5469 125.335 38.5469 126.347V163.527C38.5469 164.539 39.3663 165.36 40.3772 165.36H139.739C140.749 165.36 141.569 164.539 141.569 163.527V126.347C141.569 125.335 140.749 124.514 139.739 124.514Z"/><path stroke="#D9D9D9" stroke-dasharray="5 5" stroke-width="2" d="M251.651 124.514H152.289C151.278 124.514 150.459 125.335 150.459 126.347V163.527C150.459 164.539 151.278 165.36 152.289 165.36H251.651C252.661 165.36 253.481 164.539 253.481 163.527V126.347C253.481 125.335 252.661 124.514 251.651 124.514Z"/></g></g><defs><filter id="filter0_d" width="281.041" height="184.85" x=".413" y=".379" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2" dy="4"/><feGaussianBlur stdDeviation="10"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter></defs></svg>
+<svg width="693" height="425" viewBox="0 0 693 425" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.4387 110.977C27.1556 113.452 18.3941 126.227 20.8693 139.51C23.3445 152.793 36.1192 161.555 49.4023 159.079L67.7036 155.669C62.6078 161.153 60.0854 168.896 61.562 176.82C64.0372 190.103 76.8118 198.865 90.0949 196.39L220.39 172.11C220.416 172.267 220.444 172.425 220.473 172.582C221.95 180.507 227.092 186.822 233.821 190.102L225.826 191.592C212.542 194.067 203.781 206.841 206.256 220.125C208.731 233.408 221.506 242.169 234.789 239.694L614.544 168.929C627.827 166.454 636.588 153.679 634.113 140.396C632.636 132.472 627.494 126.157 620.765 122.877L633.556 120.493C646.839 118.018 655.601 105.244 653.126 91.9604C650.65 78.6773 637.876 69.9158 624.593 72.3911L396.82 114.835C396.794 114.678 396.766 114.52 396.737 114.363C395.26 106.438 390.118 100.123 383.389 96.8431L405.503 92.7224C418.786 90.2471 427.547 77.4725 425.072 64.1894C422.597 50.9063 409.822 42.1448 396.539 44.62L40.4387 110.977ZM59.718 301.107C57.2428 287.824 66.0043 275.05 79.2874 272.574L468.975 199.959C482.258 197.484 495.032 206.245 497.508 219.528C499.983 232.811 491.221 245.586 477.938 248.061L466.779 250.141C468.082 250.776 469.325 251.524 470.493 252.376L605.53 227.213C618.813 224.738 631.588 233.499 634.063 246.782C635.54 254.707 633.017 262.45 627.922 267.934L630.641 267.427C643.924 264.952 656.699 273.713 659.174 286.996C661.649 300.279 652.888 313.054 639.604 315.529L234.809 390.96C221.526 393.435 208.751 384.674 206.276 371.391C203.801 358.108 212.563 345.333 225.846 342.858L255.404 337.35C254.101 336.715 252.858 335.966 251.69 335.114L71.5053 368.69C58.2222 371.165 45.4476 362.404 42.9723 349.121C40.4971 335.838 49.2586 323.063 62.5417 320.588L73.0655 318.627C66.3367 315.347 61.1946 309.032 59.718 301.107Z" fill="black" fill-opacity="0.05"/>
+<g filter="url(#filter0_d)">
+<path d="M567.437 70H125.484C120.246 70 116 74.2412 116 79.473V107.892C116 113.124 120.246 117.365 125.484 117.365H567.437C572.675 117.365 576.921 113.124 576.921 107.892V79.473C576.921 74.2412 572.675 70 567.437 70Z" fill="#9E9E9E"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="116" y="70" width="461" height="277">
+<path d="M567.437 70H125.484C120.246 70 116 74.2412 116 79.473V337.138C116 342.37 120.246 346.611 125.484 346.611H567.437C572.675 346.611 576.921 342.37 576.921 337.138V79.473C576.921 74.2412 572.675 70 567.437 70Z" fill="#404040"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M577 96.5244H116V347H577V96.5244Z" fill="#EEEEEE"/>
+<path opacity="0.4" d="M129.278 87.0483C131.373 87.0483 133.071 85.3525 133.071 83.2606C133.071 81.1687 131.373 79.4729 129.278 79.4729C127.182 79.4729 125.484 81.1687 125.484 83.2606C125.484 85.3525 127.182 87.0483 129.278 87.0483Z" fill="#D9D9D9"/>
+<path opacity="0.4" d="M142.762 87.0483C144.857 87.0483 146.555 85.3525 146.555 83.2606C146.555 81.1687 144.857 79.4729 142.762 79.4729C140.667 79.4729 138.968 81.1687 138.968 83.2606C138.968 85.3525 140.667 87.0483 142.762 87.0483Z" fill="#D9D9D9"/>
+<path opacity="0.3" d="M155.833 87.0483C157.928 87.0483 159.626 85.3525 159.626 83.2606C159.626 81.1687 157.928 79.4729 155.833 79.4729C153.738 79.4729 152.039 81.1687 152.039 83.2606C152.039 85.3525 153.738 87.0483 155.833 87.0483Z" fill="#D9D9D9"/>
+<rect x="116" y="96" width="27" height="251" fill="#616161"/>
+<rect x="143" y="96" width="434" height="31" fill="#D9D9D9"/>
+<rect x="153" y="136" width="60" height="7" rx="3.5" fill="white"/>
+<rect x="153" y="148" width="118" height="7" rx="3.5" fill="white"/>
+<rect x="515" y="136" width="52" height="16" rx="2" fill="#BDBDBD"/>
+<rect x="154.5" y="166.5" width="121" height="94" rx="3.5" stroke="#D9D9D9" stroke-width="3" stroke-dasharray="5 5"/>
+<rect x="292.5" y="166.5" width="128" height="94" rx="3.5" stroke="#D9D9D9" stroke-width="3" stroke-dasharray="5 5"/>
+<rect x="437.5" y="166.5" width="128" height="94" rx="3.5" stroke="#D9D9D9" stroke-width="3" stroke-dasharray="5 5"/>
+<rect x="154.5" y="276.5" width="197" height="78" rx="3.5" stroke="#D9D9D9" stroke-width="3" stroke-dasharray="5 5"/>
+<rect x="368.5" y="276.5" width="197" height="78" rx="3.5" stroke="#D9D9D9" stroke-width="3" stroke-dasharray="5 5"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="98" y="54" width="500.921" height="316.611" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="2" dy="4"/>
+<feGaussianBlur stdDeviation="10"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

packages/core/src/components/EmptyState/assets/missingAnnotation.svg

@@ -1 +1,42 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="259" height="162" fill="none" viewBox="0 0 259 162"><g filter="url(#filter0_d)"><rect width="243" height="25" x="6" y="4" fill="#9E9E9E" rx="5"/><mask id="mask0" width="243" height="146" x="6" y="4" mask-type="alpha" maskUnits="userSpaceOnUse"><rect width="243" height="146" x="6" y="4" fill="#404040" rx="5"/></mask><g mask="url(#mask0)"><rect width="247" height="139" x="6" y="18" fill="#EEE"/><rect width="181" height="4" x="42" y="61" fill="#fff" rx="2"/><rect width="113" height="4" x="42" y="70" fill="#fff" rx="2"/><rect width="50" height="4" x="42" y="43" fill="#fff" rx="2"/><rect width="36" height="4" x="22" y="25" fill="#fff" rx="2"/><rect width="4" height="4" x="11" y="25" fill="#F8F8F8" rx="2"/><rect width="4" height="4" x="11" y="34" fill="#F8F8F8" rx="2"/><rect width="4" height="4" x="11" y="43" fill="#F8F8F8" rx="2"/><rect width="4" height="4" x="11" y="52" fill="#F8F8F8" rx="2"/><rect width="4" height="4" x="11" y="62" fill="#F8F8F8" rx="2"/><rect width="4" height="4" x="11" y="70" fill="#F8F8F8" rx="2"/><rect width="4" height="4" x="11" y="79" fill="#F8F8F8" rx="2"/><rect width="4" height="4" x="11" y="88" fill="#F8F8F8" rx="2"/><rect width="181" height="4" x="42" y="52" fill="#fff" rx="2"/><rect width="35" height="4" x="22" y="88" fill="#fff" rx="2"/><rect width="92" height="4" x="32" y="79" fill="#fff" rx="2"/><rect width="45" height="4" x="32" y="34" fill="#fff" rx="2"/></g><ellipse cx="13" cy="10.999" fill="#D9D9D9" opacity=".4" rx="2" ry="1.999"/><ellipse cx="20.109" cy="10.999" fill="#D9D9D9" opacity=".4" rx="2" ry="1.999"/><ellipse cx="27" cy="10.999" fill="#D9D9D9" opacity=".3" rx="2" ry="1.999"/></g><defs><filter id="filter0_d" width="259" height="162" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2" dy="4"/><feGaussianBlur stdDeviation="4"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter></defs></svg>
+<svg width="687" height="421" viewBox="0 0 687 421" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.0514 109.914C26.8955 112.366 18.2179 125.018 20.6695 138.174C23.121 151.33 35.7733 160.007 48.9292 157.556L67.0549 154.178C62.008 159.609 59.5097 167.278 60.9722 175.127C63.4237 188.283 76.076 196.96 89.2319 194.509L218.279 170.462C218.305 170.617 218.333 170.773 218.362 170.929C219.824 178.778 224.917 185.032 231.582 188.281L223.663 189.757C210.507 192.208 201.83 204.861 204.281 218.016C206.733 231.172 219.385 239.85 232.541 237.398L608.658 167.311C621.814 164.86 630.492 152.208 628.04 139.052C626.578 131.203 621.485 124.949 614.821 121.7L627.489 119.339C640.645 116.888 649.322 104.236 646.871 91.0797C644.419 77.9238 631.767 69.2462 618.611 71.6977L393.02 113.735C392.994 113.579 392.966 113.423 392.937 113.267C391.475 105.419 386.382 99.1643 379.717 95.9156L401.619 91.8343C414.775 89.3828 423.453 76.7305 421.001 63.5746C418.55 50.4187 405.897 41.7411 392.742 44.1927L40.0514 109.914ZM59.146 298.224C56.6945 285.068 65.3721 272.416 78.528 269.964L464.483 198.044C477.639 195.592 490.292 204.27 492.743 217.426C495.195 230.582 486.517 243.234 473.361 245.685L462.309 247.745C463.599 248.374 464.83 249.115 465.987 249.959L599.731 225.037C612.887 222.585 625.539 231.263 627.991 244.419C629.453 252.267 626.955 259.937 621.908 265.368L624.601 264.866C637.757 262.414 650.41 271.092 652.861 284.248C655.313 297.404 646.635 310.056 633.479 312.507L232.561 387.216C219.405 389.667 206.752 380.99 204.301 367.834C201.849 354.678 210.527 342.026 223.683 339.574L252.958 334.119C251.668 333.49 250.437 332.749 249.279 331.905L70.8205 365.159C57.6646 367.611 45.0123 358.933 42.5608 345.777C40.1093 332.621 48.7869 319.969 61.9428 317.518L72.3657 315.575C65.7014 312.327 60.6085 306.072 59.146 298.224Z" fill="black" fill-opacity="0.05"/>
+<g filter="url(#filter0_d)">
+<path d="M566.795 76.0288H124.842C119.604 76.0288 115.358 80.27 115.358 85.5018V113.921C115.358 119.153 119.604 123.394 124.842 123.394H566.795C572.033 123.394 576.279 119.153 576.279 113.921V85.5018C576.279 80.27 572.033 76.0288 566.795 76.0288Z" fill="#9E9E9E"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="115" y="76" width="462" height="277">
+<path d="M566.795 76.0288H124.842C119.604 76.0288 115.358 80.27 115.358 85.5018V343.167C115.358 348.399 119.604 352.64 124.842 352.64H566.795C572.033 352.64 576.279 348.399 576.279 343.167V85.5018C576.279 80.27 572.033 76.0288 566.795 76.0288Z" fill="#404040"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M583.866 102.553H115.358V365.902H583.866V102.553Z" fill="#EEEEEE"/>
+<path d="M523.169 184.021H187.436C185.341 184.021 183.643 185.717 183.643 187.81C183.643 189.903 185.341 191.599 187.436 191.599H523.169C525.264 191.599 526.962 189.903 526.962 187.81C526.962 185.717 525.264 184.021 523.169 184.021Z" fill="white"/>
+<path d="M394.187 201.072H187.436C185.341 201.072 183.643 202.769 183.643 204.861C183.643 206.954 185.341 208.651 187.436 208.651H394.187C396.282 208.651 397.98 206.954 397.98 204.861C397.98 202.769 396.282 201.072 394.187 201.072Z" fill="white"/>
+<path d="M274.689 149.918H187.436C185.341 149.918 183.643 151.615 183.643 153.707C183.643 155.8 185.341 157.497 187.436 157.497H274.689C276.784 157.497 278.482 155.8 278.482 153.707C278.482 151.615 276.784 149.918 274.689 149.918Z" fill="white"/>
+<path d="M210.198 115.815H149.5C147.405 115.815 145.707 117.512 145.707 119.605C145.707 121.697 147.405 123.394 149.5 123.394H210.198C212.293 123.394 213.991 121.697 213.991 119.605C213.991 117.512 212.293 115.815 210.198 115.815Z" fill="white"/>
+<path d="M132.429 119.605C132.429 117.512 130.731 115.815 128.636 115.815C126.54 115.815 124.842 117.512 124.842 119.605C124.842 121.697 126.54 123.394 128.636 123.394C130.731 123.394 132.429 121.697 132.429 119.605Z" fill="#F8F8F8"/>
+<path d="M132.429 136.656C132.429 134.563 130.731 132.867 128.636 132.867C126.54 132.867 124.842 134.563 124.842 136.656C124.842 138.749 126.54 140.445 128.636 140.445C130.731 140.445 132.429 138.749 132.429 136.656Z" fill="#F8F8F8"/>
+<path d="M132.429 153.707C132.429 151.615 130.731 149.918 128.636 149.918C126.54 149.918 124.842 151.615 124.842 153.707C124.842 155.8 126.54 157.497 128.636 157.497C130.731 157.497 132.429 155.8 132.429 153.707Z" fill="#F8F8F8"/>
+<path d="M132.429 170.759C132.429 168.666 130.731 166.969 128.636 166.969C126.54 166.969 124.842 168.666 124.842 170.759C124.842 172.851 126.54 174.548 128.636 174.548C130.731 174.548 132.429 172.851 132.429 170.759Z" fill="#F8F8F8"/>
+<path d="M132.429 189.705C132.429 187.612 130.731 185.916 128.636 185.916C126.54 185.916 124.842 187.612 124.842 189.705C124.842 191.797 126.54 193.494 128.636 193.494C130.731 193.494 132.429 191.797 132.429 189.705Z" fill="#F8F8F8"/>
+<path d="M132.429 204.861C132.429 202.769 130.731 201.072 128.636 201.072C126.54 201.072 124.842 202.769 124.842 204.861C124.842 206.954 126.54 208.651 128.636 208.651C130.731 208.651 132.429 206.954 132.429 204.861Z" fill="#F8F8F8"/>
+<path d="M132.429 221.913C132.429 219.82 130.731 218.124 128.636 218.124C126.54 218.124 124.842 219.82 124.842 221.913C124.842 224.005 126.54 225.702 128.636 225.702C130.731 225.702 132.429 224.005 132.429 221.913Z" fill="#F8F8F8"/>
+<path d="M132.429 238.964C132.429 236.872 130.731 235.175 128.636 235.175C126.54 235.175 124.842 236.872 124.842 238.964C124.842 241.057 126.54 242.753 128.636 242.753C130.731 242.753 132.429 241.057 132.429 238.964Z" fill="#F8F8F8"/>
+<path d="M523.169 166.969H187.436C185.341 166.969 183.643 168.666 183.643 170.759C183.643 172.851 185.341 174.548 187.436 174.548H523.169C525.264 174.548 526.962 172.851 526.962 170.759C526.962 168.666 525.264 166.969 523.169 166.969Z" fill="white"/>
+<path d="M208.301 235.175H149.5C147.405 235.175 145.707 236.872 145.707 238.964C145.707 241.057 147.405 242.753 149.5 242.753H208.301C210.396 242.753 212.094 241.057 212.094 238.964C212.094 236.872 210.396 235.175 208.301 235.175Z" fill="white"/>
+<path d="M335.386 218.124H168.468C166.373 218.124 164.675 219.82 164.675 221.913C164.675 224.005 166.373 225.702 168.468 225.702H335.386C337.481 225.702 339.18 224.005 339.18 221.913C339.18 219.82 337.481 218.124 335.386 218.124Z" fill="white"/>
+<path d="M246.237 132.867H168.468C166.373 132.867 164.675 134.563 164.675 136.656C164.675 138.749 166.373 140.445 168.468 140.445H246.237C248.332 140.445 250.03 138.749 250.03 136.656C250.03 134.563 248.332 132.867 246.237 132.867Z" fill="white"/>
+<path opacity="0.4" d="M128.636 93.0771C130.731 93.0771 132.429 91.3813 132.429 89.2894C132.429 87.1975 130.731 85.5017 128.636 85.5017C126.54 85.5017 124.842 87.1975 124.842 89.2894C124.842 91.3813 126.54 93.0771 128.636 93.0771Z" fill="#D9D9D9"/>
+<path opacity="0.4" d="M142.12 93.0771C144.215 93.0771 145.913 91.3813 145.913 89.2894C145.913 87.1975 144.215 85.5017 142.12 85.5017C140.025 85.5017 138.326 87.1975 138.326 89.2894C138.326 91.3813 140.025 93.0771 142.12 93.0771Z" fill="#D9D9D9"/>
+<path opacity="0.3" d="M155.191 93.0771C157.286 93.0771 158.984 91.3813 158.984 89.2894C158.984 87.1975 157.286 85.5017 155.191 85.5017C153.096 85.5017 151.397 87.1975 151.397 89.2894C151.397 91.3813 153.096 93.0771 155.191 93.0771Z" fill="#D9D9D9"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="97.3579" y="60.0288" width="500.921" height="316.611" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="2" dy="4"/>
+<feGaussianBlur stdDeviation="10"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

packages/core/src/components/EmptyState/assets/noInformation.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="267" height="172" fill="none" viewBox="0 0 267 172"><g filter="url(#filter0_d)"><rect width="139" height="104.906" x="10" y="50.165" fill="#EEE" rx="5"/></g><mask id="mask0" width="121" height="98" x="19" y="58" mask-type="alpha" maskUnits="userSpaceOnUse"><rect width="9.179" height="70.156" x="19.835" y="85.571" fill="#fff" rx="4.59"/><rect width="9.179" height="78.679" x="38.194" y="77.047" fill="#fff" rx="4.59"/><rect width="9.179" height="97.693" x="56.552" y="58.033" fill="#fff" rx="4.59"/><rect width="9.179" height="81.957" x="74.91" y="73.769" fill="#fff" rx="4.59"/><rect width="9.179" height="60.321" x="93.269" y="95.406" fill="#fff" rx="4.59"/><rect width="9.179" height="74.09" x="111.627" y="81.637" fill="#fff" rx="4.59"/><rect width="9.179" height="93.104" x="129.986" y="62.623" fill="#fff" rx="4.59"/></mask><g mask="url(#mask0)"><rect width="139" height="100.316" x="10.656" y="50.165" fill="#C4C4C4"/></g><g filter="url(#filter1_d)"><rect width="144" height="108.679" x="109" y="8" fill="#EEE" rx="5"/></g><path fill="#D9D9D9" d="M173.85 62.1192C144.607 37.3215 129.993 65.1991 120.077 80.5984V106.585H241.923V25.7384C208.172 24.5834 212.569 94.9538 173.85 62.1192Z"/><path stroke="#9E9E9E" stroke-linecap="round" stroke-linejoin="round" d="M120.077 80.5984C129.993 65.1991 144.607 37.3215 173.85 62.1192C212.569 94.9539 208.172 24.5834 241.923 25.7384"/><defs><filter id="filter0_d" width="163" height="128.906" x="0" y="42.165" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2" dy="4"/><feGaussianBlur stdDeviation="6"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter><filter id="filter1_d" width="168" height="132.679" x="99" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2" dy="4"/><feGaussianBlur stdDeviation="6"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="267" height="172" fill="none" viewBox="0 0 267 172"><g filter="url(#filter0_d)"><rect width="139" height="104.906" x="10" y="50.165" fill="#EEE" rx="5"/></g><mask id="mask0" width="121" height="98" x="19" y="58" mask-type="alpha" maskUnits="userSpaceOnUse"><rect width="9.179" height="70.156" x="19.835" y="85.571" fill="#fff" rx="4.59"/><rect width="9.179" height="78.679" x="38.194" y="77.047" fill="#fff" rx="4.59"/><rect width="9.179" height="97.693" x="56.552" y="58.033" fill="#fff" rx="4.59"/><rect width="9.179" height="81.957" x="74.91" y="73.769" fill="#fff" rx="4.59"/><rect width="9.179" height="60.321" x="93.269" y="95.406" fill="#fff" rx="4.59"/><rect width="9.179" height="74.09" x="111.627" y="81.637" fill="#fff" rx="4.59"/><rect width="9.179" height="93.104" x="129.986" y="62.623" fill="#fff" rx="4.59"/></mask><g mask="url(#mask0)"><rect width="139" height="100.316" x="10.656" y="50.165" fill="#C4C4C4"/></g><g filter="url(#filter1_d)"><rect width="144" height="108.679" x="109" y="8" fill="#EEE" rx="5"/></g><path fill="#D9D9D9" d="M173.85 62.1192C144.607 37.3215 129.993 65.1991 120.077 80.5984V106.585H241.923V25.7384C208.172 24.5834 212.569 94.9538 173.85 62.1192Z"/><path stroke="#9E9E9E" stroke-linecap="round" stroke-linejoin="round" d="M120.077 80.5984C129.993 65.1991 144.607 37.3215 173.85 62.1192C212.569 94.9539 208.172 24.5834 241.923 25.7384"/><defs><filter id="filter0_d" width="163" height="128.906" x="0" y="42.165" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2" dy="4"/><feGaussianBlur stdDeviation="6"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter><filter id="filter1_d" width="168" height="132.679" x="99" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2" dy="4"/><feGaussianBlur stdDeviation="6"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" mode="normal" result="shape"/></filter></defs></svg>