@spaced-out/ui-design-system 0.4.11 → 0.4.13-beta.0

package/lib/components/EmptyState/EmptyImages/MessageEmptyImage.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+
+export const MessageEmptyImage = () => (<svg
+  width="140"
+  height="140"
+  viewBox="0 0 140 140"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M69.9997 120C97.613 120 120 97.6572 120 69.9998C120 42.3424 97.613 20 69.9997 20C42.3865 20 20 42.3424 20 69.9998C20 97.6572 42.3865 120 69.9997 120Z"
+    fill="#E6E5EF"
+  />
+  <path
+    d="M121.556 53.3176C123.82 53.3176 125.656 51.4819 125.656 49.2176C125.656 46.9532 123.82 45.1176 121.556 45.1176C119.291 45.1176 117.456 46.9532 117.456 49.2176C117.456 51.4819 119.291 53.3176 121.556 53.3176Z"
+    fill="#9F9FBC"
+  />
+  <path
+    d="M127.556 37.2176C129.102 37.2176 130.356 35.964 130.356 34.4176C130.356 32.8712 129.102 31.6176 127.556 31.6176C126.009 31.6176 124.756 32.8712 124.756 34.4176C124.756 35.964 126.009 37.2176 127.556 37.2176Z"
+    fill="#9F9FBC"
+  />
+  <path
+    d="M82.4554 39.8607C99.7181 39.8607 113.643 52.4152 113.643 67.8491C113.643 76.7178 109.04 84.6651 101.79 89.8481V101.481C101.79 103.094 99.9482 103.9 98.7974 102.979L88.9001 95.2615C86.8286 95.6071 84.7571 95.8374 82.5705 95.8374C65.3078 95.8374 51.3826 83.283 51.3826 67.8491C51.3826 52.4152 65.3078 39.8607 82.4554 39.8607Z"
+    fill="#FAFAFA"
+    stroke="#D3D2E0"
+    strokeWidth="2"
+    strokeMiterlimit="10"
+  />
+  <path
+    d="M51.9581 38.4785C32.739 38.4785 17.2026 52.4151 17.2026 69.5767C17.2026 79.482 22.3814 88.3507 30.4373 93.9945V106.895C30.4373 108.622 32.3938 109.659 33.7748 108.507L44.8229 99.9838C47.1246 100.445 49.4263 100.675 51.843 100.675C71.0621 100.675 86.5985 86.7383 86.5985 69.5767C86.5985 52.4151 71.0621 38.4785 51.9581 38.4785Z"
+    fill="white"
+    stroke="#D3D2E0"
+    strokeWidth="2"
+    strokeMiterlimit="10"
+  />
+  <path
+    d="M40.6223 70.8437C42.7197 70.8437 44.4201 69.142 44.4201 67.0428C44.4201 64.9437 42.7197 63.2419 40.6223 63.2419C38.5248 63.2419 36.8245 64.9437 36.8245 67.0428C36.8245 69.142 38.5248 70.8437 40.6223 70.8437Z"
+    fill="#66658D"
+  />
+  <path
+    d="M62.143 70.8437C64.2405 70.8437 65.9408 69.142 65.9408 67.0428C65.9408 64.9437 64.2405 63.2419 62.143 63.2419C60.0455 63.2419 58.3452 64.9437 58.3452 67.0428C58.3452 69.142 60.0455 70.8437 62.143 70.8437Z"
+    fill="#66658D"
+  />
+  <path
+    d="M43.3971 35.5555C43.2584 35.5555 43.1196 35.5555 42.9808 35.5555C42.287 35.2777 41.8707 34.5834 42.0095 33.889L44.3685 26.2508C44.646 25.5564 45.3398 25.1398 46.0336 25.2787C46.7274 25.5564 47.1437 26.2508 47.005 26.9452L44.7848 34.5834C44.646 35.1389 44.0909 35.5555 43.3971 35.5555Z"
+    fill="#66658D"
+  />
+  <path
+    d="M37.5689 37.222C37.0139 37.222 36.4588 36.8054 36.1813 36.2499L32.5735 25.2787C32.2959 24.5844 32.7122 23.7511 33.406 23.4734C34.0999 23.1956 34.9324 23.6122 35.2099 24.3066L38.8178 35.2778C39.0953 35.9722 38.679 36.8054 37.9852 37.0832C37.8464 37.222 37.7077 37.222 37.5689 37.222Z"
+    fill="#66658D"
+  />
+  <path
+    d="M32.1574 39.8607C31.7411 39.8607 31.4636 39.7219 31.186 39.4441L26.7456 35.139C26.1906 34.5835 26.1906 33.7502 26.7456 33.1947C27.3007 32.6392 28.1333 32.6392 28.6883 33.1947L33.1287 37.4998C33.6838 38.0554 33.6838 38.8886 33.1287 39.4441C32.8512 39.7219 32.4349 39.8607 32.1574 39.8607Z"
+    fill="#66658D"
+  />
+  <path
+    d="M47 77L57 77"
+    stroke="#66658D"
+    strokeWidth="3"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+</svg>);

package/lib/components/EmptyState/EmptyImages/UploadEmptyImage.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const UploadEmptyImage: () => React.JSX.Element;
+//# sourceMappingURL=UploadEmptyImage.d.ts.map

package/lib/components/EmptyState/EmptyImages/UploadEmptyImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadEmptyImage.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyImages/UploadEmptyImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,gBAAgB,yBA+DtB,CAAC"}

package/lib/components/EmptyState/EmptyImages/UploadEmptyImage.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+
+export const UploadEmptyImage = () => (<svg
+  width="140"
+  height="140"
+  viewBox="0 0 140 140"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M70.0001 120C97.6138 120 120 97.6575 120 70C120 42.3425 97.5151 20 70.0001 20C42.3867 20 20.0002 42.3425 20.0002 70C20.0002 97.6575 42.3867 120 70.0001 120Z"
+    fill="#E6E5EF"
+  />
+  <path
+    d="M122.1 41.5999C124.364 41.5999 126.2 39.7642 126.2 37.4999C126.2 35.2355 124.364 33.3999 122.1 33.3999C119.835 33.3999 118 35.2355 118 37.4999C118 39.7642 119.835 41.5999 122.1 41.5999Z"
+    fill="#9F9FBC"
+  />
+  <path
+    d="M127.8 25.6C129.346 25.6 130.6 24.3464 130.6 22.8C130.6 21.2536 129.346 20 127.8 20C126.253 20 125 21.2536 125 22.8C125 24.3464 126.253 25.6 127.8 25.6Z"
+    fill="#9F9FBC"
+  />
+  <path
+    d="M26.3002 33.6C27.8466 33.6 29.1002 32.3464 29.1002 30.8C29.1002 29.2536 27.8466 28 26.3002 28C24.7538 28 23.5002 29.2536 23.5002 30.8C23.5002 32.3464 24.7538 33.6 26.3002 33.6Z"
+    fill="#9F9FBC"
+  />
+  <path
+    d="M104.3 108.853L36.6643 109.338C32.7603 109.355 29.5768 106.208 29.5246 102.33L29.0004 37.6185C28.9786 33.7137 32.1217 30.5333 35.9995 30.4854L103.635 30.0001C107.539 29.9827 110.723 33.1299 110.775 37.0085L111.299 101.719C111.321 105.624 108.178 108.805 104.3 108.853Z"
+    fill="white"
+    stroke="#D3D2E0"
+    strokeWidth="2"
+    strokeMiterlimit="10"
+  />
+  <path
+    d="M100.492 99.1909L41.0341 99.6409C39.3523 99.6559 37.9986 98.3279 37.9817 96.6459L37.5307 43.1654C37.5138 41.4832 38.8397 40.1307 40.5216 40.1158L99.979 39.6658C101.661 39.6509 103.015 40.9785 103.032 42.6607L103.483 96.1409C103.5 97.8229 102.174 99.1759 100.492 99.1909Z"
+    fill="#E6E5EF"
+  />
+  <path
+    d="M71.7375 79.1193L50.0476 79.27L60.7996 66.8944L71.7375 79.1193Z"
+    fill="#66658D"
+  />
+  <path
+    d="M89.724 78.9726L58.4568 79.195L73.9418 61.4233L89.724 78.9726Z"
+    fill="#8D8CAF"
+  />
+  <path
+    d="M60.7787 61.4514C62.4936 59.9765 62.6868 57.3891 61.2102 55.6722C59.7336 53.9554 57.1464 53.7593 55.4316 55.2342C53.7167 56.7091 53.5235 59.2965 55.0001 61.0133C56.4766 62.7302 59.0638 62.9263 60.7787 61.4514Z"
+    fill="#66658D"
+  />
+  <path
+    d="M84.6642 116.059C84.3578 117.358 83.8982 118.732 83.3614 119.878C81.9055 122.704 79.6069 124.919 76.7718 126.371C73.86 127.822 70.4119 128.433 66.9639 127.669C58.8417 125.989 53.6312 118.046 55.317 109.949C57.0027 101.852 64.895 96.582 73.0172 98.3378C75.9289 98.9497 78.4576 100.401 80.603 102.387C84.2046 105.977 85.7367 111.171 84.6642 116.059Z"
+    fill="#F1F1F5"
+    stroke="#D3D2E0"
+    strokeWidth="2"
+    strokeMiterlimit="10"
+  />
+  <path
+    d="M74.7228 110.722H72.2777V108.278C72.2777 107.088 71.3421 106 70.0002 106C68.8102 106 67.7228 106.935 67.7228 108.278V110.722H65.2778C64.0878 110.722 63.0002 111.659 63.0002 113C63.0002 113.616 63.2199 114.198 63.6498 114.628C64.0797 115.058 64.6615 115.278 65.2778 115.278H67.7228V117.722C67.7228 118.913 68.6584 120 70.0002 120C71.1902 120 72.2777 119.065 72.2777 117.722V115.278H74.7228C75.9127 115.278 77.0002 114.342 77.0002 113C77.0002 111.659 75.9127 110.722 74.7228 110.722Z"
+    fill="white"
+    stroke="#D3D2E0"
+    strokeWidth="2"
+  />
+  <path
+    d="M9.20024 87.6001C12.0721 87.6001 14.4002 85.2721 14.4002 82.4001C14.4002 79.5281 12.0721 77.2 9.20024 77.2C6.32834 77.2 4.00024 79.5281 4.00024 82.4001C4.00024 85.2721 6.32834 87.6001 9.20024 87.6001Z"
+    fill="#9F9FBC"
+  />
+</svg>);

package/lib/components/EmptyState/EmptyImages/index.d.ts

@@ -0,0 +1,7 @@
+export * from './CalendarEmptyImage';
+export * from './ChartEmptyImage';
+export * from './DataEmptyImage';
+export * from './FileEmptyImage';
+export * from './MessageEmptyImage';
+export * from './UploadEmptyImage';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/EmptyState/EmptyImages/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyState/EmptyImages/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/lib/components/EmptyState/EmptyImages/index.ts

@@ -0,0 +1,6 @@
+export * from './CalendarEmptyImage';
+export * from './ChartEmptyImage';
+export * from './DataEmptyImage';
+export * from './FileEmptyImage';
+export * from './MessageEmptyImage';
+export * from './UploadEmptyImage';

package/lib/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,20 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    image?: string;
+    title?: string;
+    description?: string;
+    children?: string;
+}>;
+export type EmptyStateProps = {
+    classNames?: ClassNames;
+    children?: React.ReactNode;
+    imageVariant?: 'calendar' | 'data' | 'file' | 'message' | 'upload' | 'chart';
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    customImageUrl?: string;
+};
+export declare const EmptyState: Flow.AbstractComponent<EmptyStateProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=EmptyState.d.ts.map

package/lib/components/EmptyState/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CA+CvE,CAAC"}

package/lib/components/EmptyState/EmptyState.stories.d.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import type { EmptyStateProps } from './EmptyState';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<EmptyStateProps, HTMLDivElement>;
+    argTypes: {
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            type: {
+                optional: boolean;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        imageVariant: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        title: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        description: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        customImageUrl: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _EmptyState: {
+    (args: EmptyStateProps): React.JSX.Element;
+    args: {
+        title: string;
+        description: string;
+        imageVariant: string;
+    };
+};
+//# sourceMappingURL=EmptyState.stories.d.ts.map

package/lib/components/EmptyState/EmptyState.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.stories.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMlD,wBA6EE;AAIF,eAAO,MAAM,WAAW;WAAU,eAAe;;;;;;CAI1C,CAAC"}

package/lib/components/EmptyState/EmptyState.stories.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._EmptyState = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _tokens = require("../../utils/tokens");
+var _Button = require("../Button");
+var _EmptyState2 = require("./EmptyState");
+var _EmptyStateStoriesModule = _interopRequireDefault(require("./EmptyState.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/Empty State',
+  component: _EmptyState2.EmptyState,
+  argTypes: {
+    classNames: {
+      description: 'External classNames to be applied',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{ wrapper?: string, image?: string, title?: string, description?: string, children?: string}'
+        }
+      }
+    },
+    children: {
+      type: {
+        optional: true
+      },
+      description: 'Custom component for Empty state. This is rendered below **image, title and description**. Use this to maybe show a button.',
+      table: {
+        type: {
+          summary: 'React.Component'
+        }
+      }
+    },
+    imageVariant: {
+      description: 'Image flavour of the Empty state',
+      options: ['calendar', 'data', 'file', 'message', 'upload', 'chart'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    title: {
+      description: 'Title of the Empty State',
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    },
+    description: {
+      description: 'Description of the Empty State',
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    },
+    customImageUrl: {
+      description: 'Custom hero image. This would **override the imageVariant flavour**',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a EmptyState component.',
+      description: {
+        component: `
+\`\`\`js
+import { EmptyState } from "@spaced-out/ui-design-system/lib/components/EmptyState";
+\`\`\`
+Empty State is a generic component that can come in handy to display content when there is no data/records available.
+
+It accepts title, description, image and a custom component. Each of these are optional and you can mix and match to
+obtain the design that you want. classnames are also exposed to each of these entries for them to be easily customizable.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/EmptyState'
+    }
+  }
+};
+const emptyText = (0, _tokens.getRandomDataVariation)();
+const _EmptyState = args => /*#__PURE__*/React.createElement("div", {
+  className: _EmptyStateStoriesModule.default.container
+}, /*#__PURE__*/React.createElement(_EmptyState2.EmptyState, _extends({}, args, {
+  classNames: {
+    wrapper: _EmptyStateStoriesModule.default.emptyStateWrapper
+  }
+}), /*#__PURE__*/React.createElement(_Button.Button, null, "Button Text")));
+exports._EmptyState = _EmptyState;
+_EmptyState.args = {
+  title: emptyText.title,
+  description: emptyText.description,
+  imageVariant: 'data'
+};

package/lib/components/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+
+import type {DataVariation} from '../../utils/tokens';
+import {getRandomDataVariation} from '../../utils/tokens';
+import {Button} from '../Button';
+
+import type {EmptyStateProps} from './EmptyState';
+import {EmptyState} from './EmptyState';
+
+import css from './EmptyState.stories.module.css';
+
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Empty State',
+  component: EmptyState,
+  argTypes: {
+    classNames: {
+      description: 'External classNames to be applied',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {
+          summary:
+            '{ wrapper?: string, image?: string, title?: string, description?: string, children?: string}',
+        },
+      },
+    },
+    children: {
+      type: {optional: true},
+      description:
+        'Custom component for Empty state. This is rendered below **image, title and description**. Use this to maybe show a button.',
+      table: {
+        type: {summary: 'React.Component'},
+      },
+    },
+    imageVariant: {
+      description: 'Image flavour of the Empty state',
+      options: ['calendar', 'data', 'file', 'message', 'upload', 'chart'],
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+    title: {
+      description: 'Title of the Empty State',
+      table: {
+        type: {summary: 'React.ReactNode'},
+      },
+    },
+    description: {
+      description: 'Description of the Empty State',
+      table: {
+        type: {summary: 'React.ReactNode'},
+      },
+    },
+    customImageUrl: {
+      description:
+        'Custom hero image. This would **override the imageVariant flavour**',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a EmptyState component.',
+      description: {
+        component: `
+\`\`\`js
+import { EmptyState } from "@spaced-out/ui-design-system/lib/components/EmptyState";
+\`\`\`
+Empty State is a generic component that can come in handy to display content when there is no data/records available.
+
+It accepts title, description, image and a custom component. Each of these are optional and you can mix and match to
+obtain the design that you want. classnames are also exposed to each of these entries for them to be easily customizable.
+        `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/EmptyState',
+    },
+  },
+};
+
+const emptyText: DataVariation = getRandomDataVariation();
+
+export const _EmptyState = (args: EmptyStateProps) => (<div className={css.container}>
+  <EmptyState {...args} classNames={{wrapper: css.emptyStateWrapper}}>
+    <Button>Button Text</Button>
+  </EmptyState>
+</div>);
+
+_EmptyState.args = {
+  title: emptyText.title,
+  description: emptyText.description,
+  imageVariant: 'data',
+};

package/lib/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,83 @@
+import {Flow} from 'flow-to-typescript-codemod';
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import {
+  CalendarEmptyImage,
+  ChartEmptyImage,
+  DataEmptyImage,
+  FileEmptyImage,
+  MessageEmptyImage,
+  UploadEmptyImage,
+} from './EmptyImages';
+
+import css from './EmptyState.module.css';
+
+
+type ClassNames = Readonly<{
+  wrapper?: string;
+  image?: string;
+  title?: string;
+  description?: string;
+  children?: string;
+}>;
+
+export type EmptyStateProps = {
+  classNames?: ClassNames;
+  children?: React.ReactNode;
+  imageVariant?: 'calendar' | 'data' | 'file' | 'message' | 'upload' | 'chart';
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  customImageUrl?: string;
+};
+
+export const EmptyState: Flow.AbstractComponent<EmptyStateProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, EmptyStateProps>((
+  {
+    classNames,
+    children,
+    imageVariant,
+    title,
+    description,
+    customImageUrl,
+    ...props
+  }: EmptyStateProps,
+  ref,
+) => (<div
+  {...props}
+  data-testid="EmptyState"
+  className={classify(css.wrapper, classNames?.wrapper)}
+  ref={ref}
+>
+  {!!imageVariant && !customImageUrl && (
+    <div className={classify(css.image, classNames?.image)}>
+      {imageVariant === 'calendar' && <CalendarEmptyImage />}
+      {imageVariant === 'data' && <DataEmptyImage />}
+      {imageVariant === 'file' && <FileEmptyImage />}
+      {imageVariant === 'message' && <MessageEmptyImage />}
+      {imageVariant === 'upload' && <UploadEmptyImage />}
+      {imageVariant === 'chart' && <ChartEmptyImage />}
+    </div>
+  )}
+  {customImageUrl && (
+    <img
+      className={classify(css.image, classNames?.image)}
+      src={customImageUrl}
+      alt="Empty State"
+    />
+  )}
+  {!!title && (
+    <div className={classify(css.title, classNames?.title)}>{title}</div>
+  )}
+  {!!description && (
+    <div className={classify(css.description, classNames?.description)}>
+      {description}
+    </div>
+  )}
+  {!!children && (
+    <div className={classify(css.childrenWrapper, classNames?.children)}>
+      {children}
+    </div>
+  )}
+</div>));

package/lib/components/EmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export * from './EmptyState';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/EmptyState/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/components/EmptyState/index.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

package/lib/components/ErrorMessage/ErrorImages/ForbiddenImage.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const ForbiddenImage: () => React.JSX.Element;
+//# sourceMappingURL=ForbiddenImage.d.ts.map

package/lib/components/ErrorMessage/ErrorImages/ForbiddenImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForbiddenImage.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorMessage/ErrorImages/ForbiddenImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,cAAc,yBAiFpB,CAAC"}