@sproutsocial/seeds-react-empty-state 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-empty-state/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     3.66 KB
+CJS dist/index.js.map 3.41 KB
+CJS ⚡️ Build success in 192ms
+ESM dist/esm/index.js     1.65 KB
+ESM dist/esm/index.js.map 3.27 KB
+ESM ⚡️ Build success in 197ms
+DTS Build start
+DTS ⚡️ Build success in 24267ms
+DTS dist/index.d.ts  858.00 B
+DTS dist/index.d.mts 858.00 B
+Done in 29.62s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-empty-state
+
+## 1.0.0
+
+### Major Changes
+
+- 69ed5b1: Migrated EmptyState from Racine to seeds-react-empty-state

package/dist/esm/index.js

@@ -0,0 +1,60 @@
+// src/EmptyState.tsx
+import * as React from "react";
+import Box from "@sproutsocial/seeds-react-box";
+import Text from "@sproutsocial/seeds-react-text";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EmptyState = ({
+  media,
+  headline,
+  subtext,
+  primaryAction,
+  secondaryAction,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(Box, { maxWidth: "400px", mx: "auto", "data-qa-emptystate": headline, ...rest, children: [
+    media && /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        mb: 450,
+        children: media
+      }
+    ),
+    /* @__PURE__ */ jsxs(Text, { as: "div", textAlign: "center", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "p",
+          m: 0,
+          color: "text.headline",
+          fontWeight: "semibold",
+          fontSize: 400,
+          children: headline
+        }
+      ),
+      subtext && /* @__PURE__ */ jsx(Text, { as: "p", color: "text.subtext", fontSize: 200, mb: 0, mt: 400, children: subtext }),
+      /* @__PURE__ */ jsxs(Box, { mt: primaryAction || secondaryAction ? 450 : 0, children: [
+        primaryAction && React.cloneElement(primaryAction, {
+          appearance: "primary"
+        }),
+        secondaryAction && /* @__PURE__ */ jsx(Box, { mt: 400, children: React.cloneElement(secondaryAction, {
+          appearance: "unstyled"
+        }) })
+      ] })
+    ] })
+  ] });
+};
+var EmptyState_default = EmptyState;
+
+// src/EmptyStateTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = EmptyState_default;
+export {
+  EmptyState_default as EmptyState,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/EmptyState.tsx","../../src/EmptyStateTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\n\nconst EmptyState = ({\n  media,\n  headline,\n  subtext,\n  primaryAction,\n  secondaryAction,\n  ...rest\n}: TypeEmptyStateProps) => {\n  return (\n    <Box maxWidth=\"400px\" mx=\"auto\" data-qa-emptystate={headline} {...rest}>\n      {media && (\n        <Box\n          display=\"flex\"\n          flexDirection=\"column\"\n          justifyContent=\"center\"\n          mb={450}\n        >\n          {media}\n        </Box>\n      )}\n\n      <Text as=\"div\" textAlign=\"center\">\n        <Text\n          as=\"p\"\n          m={0}\n          color=\"text.headline\"\n          fontWeight=\"semibold\"\n          fontSize={400}\n        >\n          {headline}\n        </Text>\n\n        {subtext && (\n          <Text as=\"p\" color=\"text.subtext\" fontSize={200} mb={0} mt={400}>\n            {subtext}\n          </Text>\n        )}\n\n        <Box mt={primaryAction || secondaryAction ? 450 : 0}>\n          {primaryAction &&\n            React.cloneElement(primaryAction, {\n              appearance: \"primary\",\n            })}\n\n          {secondaryAction && (\n            <Box mt={400}>\n              {React.cloneElement(secondaryAction, {\n                appearance: \"unstyled\",\n              })}\n            </Box>\n          )}\n        </Box>\n      </Text>\n    </Box>\n  );\n};\n\nexport default EmptyState;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeEmptyStateProps extends TypeBoxProps {\n  /** An image in (preferably in SVG format) */\n  media?: React.ReactNode;\n\n  /** A headline describing the empty state */\n  headline: React.ReactNode;\n\n  /** Optional description of the empty state */\n  subtext?: React.ReactNode;\n\n  /** Element for the primary call-to-action */\n  primaryAction?: React.ReactElement;\n\n  /** Element for any secondary call-to-action */\n  secondaryAction?: React.ReactElement;\n}\n","import EmptyState from \"./EmptyState\";\n\nexport default EmptyState;\nexport { EmptyState };\nexport * from \"./EmptyStateTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,OAAO,SAAS;AAEhB,OAAO,UAAU;AAcT,cA2BA,YA3BA;AAXR,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,SACE,qBAAC,OAAI,UAAS,SAAQ,IAAG,QAAO,sBAAoB,UAAW,GAAG,MAC/D;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,eAAc;AAAA,QACd,gBAAe;AAAA,QACf,IAAI;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IAGF,qBAAC,QAAK,IAAG,OAAM,WAAU,UACvB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,GAAG;AAAA,UACH,OAAM;AAAA,UACN,YAAW;AAAA,UACX,UAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAEC,WACC,oBAAC,QAAK,IAAG,KAAI,OAAM,gBAAe,UAAU,KAAK,IAAI,GAAG,IAAI,KACzD,mBACH;AAAA,MAGF,qBAAC,OAAI,IAAI,iBAAiB,kBAAkB,MAAM,GAC/C;AAAA,yBACO,mBAAa,eAAe;AAAA,UAChC,YAAY;AAAA,QACd,CAAC;AAAA,QAEF,mBACC,oBAAC,OAAI,IAAI,KACN,UAAM,mBAAa,iBAAiB;AAAA,UACnC,YAAY;AAAA,QACd,CAAC,GACH;AAAA,SAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,IAAO,qBAAQ;;;AC/Df,OAAuB;;;ACEvB,IAAO,cAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+
+interface TypeEmptyStateProps extends TypeBoxProps {
+    /** An image in (preferably in SVG format) */
+    media?: React.ReactNode;
+    /** A headline describing the empty state */
+    headline: React.ReactNode;
+    /** Optional description of the empty state */
+    subtext?: React.ReactNode;
+    /** Element for the primary call-to-action */
+    primaryAction?: React.ReactElement;
+    /** Element for any secondary call-to-action */
+    secondaryAction?: React.ReactElement;
+}
+
+declare const EmptyState: ({ media, headline, subtext, primaryAction, secondaryAction, ...rest }: TypeEmptyStateProps) => react_jsx_runtime.JSX.Element;
+
+export { EmptyState, type TypeEmptyStateProps, EmptyState as default };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+
+interface TypeEmptyStateProps extends TypeBoxProps {
+    /** An image in (preferably in SVG format) */
+    media?: React.ReactNode;
+    /** A headline describing the empty state */
+    headline: React.ReactNode;
+    /** Optional description of the empty state */
+    subtext?: React.ReactNode;
+    /** Element for the primary call-to-action */
+    primaryAction?: React.ReactElement;
+    /** Element for any secondary call-to-action */
+    secondaryAction?: React.ReactElement;
+}
+
+declare const EmptyState: ({ media, headline, subtext, primaryAction, secondaryAction, ...rest }: TypeEmptyStateProps) => react_jsx_runtime.JSX.Element;
+
+export { EmptyState, type TypeEmptyStateProps, EmptyState as default };

package/dist/index.js

@@ -0,0 +1,97 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  EmptyState: () => EmptyState_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/EmptyState.tsx
+var React = __toESM(require("react"));
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var EmptyState = ({
+  media,
+  headline,
+  subtext,
+  primaryAction,
+  secondaryAction,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.default, { maxWidth: "400px", mx: "auto", "data-qa-emptystate": headline, ...rest, children: [
+    media && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_seeds_react_box.default,
+      {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        mb: 450,
+        children: media
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_text.default, { as: "div", textAlign: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_seeds_react_text.default,
+        {
+          as: "p",
+          m: 0,
+          color: "text.headline",
+          fontWeight: "semibold",
+          fontSize: 400,
+          children: headline
+        }
+      ),
+      subtext && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { as: "p", color: "text.subtext", fontSize: 200, mb: 0, mt: 400, children: subtext }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.default, { mt: primaryAction || secondaryAction ? 450 : 0, children: [
+        primaryAction && React.cloneElement(primaryAction, {
+          appearance: "primary"
+        }),
+        secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { mt: 400, children: React.cloneElement(secondaryAction, {
+          appearance: "unstyled"
+        }) })
+      ] })
+    ] })
+  ] });
+};
+var EmptyState_default = EmptyState;
+
+// src/EmptyStateTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = EmptyState_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmptyState
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/EmptyState.tsx","../src/EmptyStateTypes.ts"],"sourcesContent":["import EmptyState from \"./EmptyState\";\n\nexport default EmptyState;\nexport { EmptyState };\nexport * from \"./EmptyStateTypes\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\n\nconst EmptyState = ({\n  media,\n  headline,\n  subtext,\n  primaryAction,\n  secondaryAction,\n  ...rest\n}: TypeEmptyStateProps) => {\n  return (\n    <Box maxWidth=\"400px\" mx=\"auto\" data-qa-emptystate={headline} {...rest}>\n      {media && (\n        <Box\n          display=\"flex\"\n          flexDirection=\"column\"\n          justifyContent=\"center\"\n          mb={450}\n        >\n          {media}\n        </Box>\n      )}\n\n      <Text as=\"div\" textAlign=\"center\">\n        <Text\n          as=\"p\"\n          m={0}\n          color=\"text.headline\"\n          fontWeight=\"semibold\"\n          fontSize={400}\n        >\n          {headline}\n        </Text>\n\n        {subtext && (\n          <Text as=\"p\" color=\"text.subtext\" fontSize={200} mb={0} mt={400}>\n            {subtext}\n          </Text>\n        )}\n\n        <Box mt={primaryAction || secondaryAction ? 450 : 0}>\n          {primaryAction &&\n            React.cloneElement(primaryAction, {\n              appearance: \"primary\",\n            })}\n\n          {secondaryAction && (\n            <Box mt={400}>\n              {React.cloneElement(secondaryAction, {\n                appearance: \"unstyled\",\n              })}\n            </Box>\n          )}\n        </Box>\n      </Text>\n    </Box>\n  );\n};\n\nexport default EmptyState;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeEmptyStateProps extends TypeBoxProps {\n  /** An image in (preferably in SVG format) */\n  media?: React.ReactNode;\n\n  /** A headline describing the empty state */\n  headline: React.ReactNode;\n\n  /** Optional description of the empty state */\n  subtext?: React.ReactNode;\n\n  /** Element for the primary call-to-action */\n  primaryAction?: React.ReactElement;\n\n  /** Element for any secondary call-to-action */\n  secondaryAction?: React.ReactElement;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAgB;AAEhB,8BAAiB;AAcT;AAXR,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,SACE,6CAAC,uBAAAA,SAAA,EAAI,UAAS,SAAQ,IAAG,QAAO,sBAAoB,UAAW,GAAG,MAC/D;AAAA,aACC;AAAA,MAAC,uBAAAA;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,eAAc;AAAA,QACd,gBAAe;AAAA,QACf,IAAI;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IAGF,6CAAC,wBAAAC,SAAA,EAAK,IAAG,OAAM,WAAU,UACvB;AAAA;AAAA,QAAC,wBAAAA;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,GAAG;AAAA,UACH,OAAM;AAAA,UACN,YAAW;AAAA,UACX,UAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAEC,WACC,4CAAC,wBAAAA,SAAA,EAAK,IAAG,KAAI,OAAM,gBAAe,UAAU,KAAK,IAAI,GAAG,IAAI,KACzD,mBACH;AAAA,MAGF,6CAAC,uBAAAD,SAAA,EAAI,IAAI,iBAAiB,kBAAkB,MAAM,GAC/C;AAAA,yBACO,mBAAa,eAAe;AAAA,UAChC,YAAY;AAAA,QACd,CAAC;AAAA,QAEF,mBACC,4CAAC,uBAAAA,SAAA,EAAI,IAAI,KACN,UAAM,mBAAa,iBAAiB;AAAA,UACnC,YAAY;AAAA,QACd,CAAC,GACH;AAAA,SAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,IAAO,qBAAQ;;;AC/Df,IAAAE,SAAuB;;;AFEvB,IAAO,cAAQ;","names":["Box","Text","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-empty-state",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@sproutsocial/seeds-react-empty-state",
+  "version": "1.0.0",
+  "description": "Seeds React EmptyState",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^*",
+    "@sproutsocial/seeds-react-system-props": "^*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-text": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-react-button": "*",
+    "@sproutsocial/seeds-react-image": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/EmptyState.stories.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Image } from "@sproutsocial/seeds-react-image";
+import EmptyState from "./EmptyState";
+
+const meta: Meta<typeof EmptyState> = {
+  title: "Components/EmptyState",
+  component: EmptyState,
+};
+export default meta;
+
+type Story = StoryObj<typeof EmptyState>;
+
+export const Default: Story = {
+  args: {
+    media: (
+      <Image
+        alt="No assets matching your search or filters"
+        src="https://cl.ly/c878e80ca537/telescope.svg"
+        m={0}
+      />
+    ),
+    headline: "No assets matching your search or filters",
+  },
+};
+
+export const WithSubtext: Story = {
+  args: {
+    media: (
+      <Image
+        alt="No assets matching your search or filters"
+        src="https://cl.ly/20065a490d48/not-found.svg"
+        m={0}
+      />
+    ),
+    headline: "Select a category to get started",
+    subtext:
+      "Select one or more categories from the right sidebar to see content.",
+  },
+};
+
+export const WithPrimaryAction: Story = {
+  args: {
+    media: (
+      <Image
+        alt="No assets matching your search or filters"
+        src="https://cl.ly/57b28cb6caef/abacus.svg"
+        m={0}
+      />
+    ),
+    headline: "Uh oh! Something went wrong, please try again.",
+    primaryAction: <Button>Reload Page</Button>,
+  },
+};
+
+export const WithSubtextAndPrimaryAction: Story = {
+  args: {
+    media: (
+      <Image
+        alt="No assets matching your search or filters"
+        src="https://cl.ly/b04c6087458f/notes.svg"
+        m={0}
+      />
+    ),
+    headline: "No content found",
+    subtext: "There is no content for the date range you’ve selected.",
+    primaryAction: <Button>Compose a Post</Button>,
+  },
+};
+
+export const WithSubtextPrimaryActionAndSecondaryAction: Story = {
+  args: {
+    media: (
+      <Image
+        alt="No assets matching your search or filters"
+        src="https://cl.ly/db498c7682df/download/analytics.svg"
+        m={0}
+      />
+    ),
+    headline: "Ready to create your first topic?",
+    subtext:
+      "Now that you have the basics down, it’s time to create a topic. Remember to look for the icon at any time you are feeling lost.",
+    primaryAction: <Button>Create a Topic</Button>,
+    secondaryAction: <Button>I'll do this later</Button>,
+  },
+};

package/src/EmptyState.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import Box from "@sproutsocial/seeds-react-box";
+// eslint-disable-next-line import/no-deprecated
+import Text from "@sproutsocial/seeds-react-text";
+import type { TypeEmptyStateProps } from "./EmptyStateTypes";
+
+const EmptyState = ({
+  media,
+  headline,
+  subtext,
+  primaryAction,
+  secondaryAction,
+  ...rest
+}: TypeEmptyStateProps) => {
+  return (
+    <Box maxWidth="400px" mx="auto" data-qa-emptystate={headline} {...rest}>
+      {media && (
+        <Box
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          mb={450}
+        >
+          {media}
+        </Box>
+      )}
+
+      <Text as="div" textAlign="center">
+        <Text
+          as="p"
+          m={0}
+          color="text.headline"
+          fontWeight="semibold"
+          fontSize={400}
+        >
+          {headline}
+        </Text>
+
+        {subtext && (
+          <Text as="p" color="text.subtext" fontSize={200} mb={0} mt={400}>
+            {subtext}
+          </Text>
+        )}
+
+        <Box mt={primaryAction || secondaryAction ? 450 : 0}>
+          {primaryAction &&
+            React.cloneElement(primaryAction, {
+              appearance: "primary",
+            })}
+
+          {secondaryAction && (
+            <Box mt={400}>
+              {React.cloneElement(secondaryAction, {
+                appearance: "unstyled",
+              })}
+            </Box>
+          )}
+        </Box>
+      </Text>
+    </Box>
+  );
+};
+
+export default EmptyState;

package/src/EmptyStateTypes.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
+
+export interface TypeEmptyStateProps extends TypeBoxProps {
+  /** An image in (preferably in SVG format) */
+  media?: React.ReactNode;
+
+  /** A headline describing the empty state */
+  headline: React.ReactNode;
+
+  /** Optional description of the empty state */
+  subtext?: React.ReactNode;
+
+  /** Element for the primary call-to-action */
+  primaryAction?: React.ReactElement;
+
+  /** Element for any secondary call-to-action */
+  secondaryAction?: React.ReactElement;
+}

package/src/__tests__/EmptyState.test.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import { Button } from "@sproutsocial/seeds-react-button";
+import EmptyState from "../EmptyState";
+import Image from "@sproutsocial/seeds-react-image";
+
+describe("EmptyState", () => {
+  it("should render", () => {
+    render(
+      <EmptyState
+        media={
+          <Image
+            alt="No assets matching your search or filters"
+            src="https://cl.ly/c878e80ca537/telescope.svg"
+            m={0}
+          />
+        }
+        headline="No content found"
+      />
+    );
+    expect(
+      screen.getByDataQaLabel({
+        emptystate: "No content found",
+      })
+    ).toBeTruthy();
+  });
+  it("should render a media", async () => {
+    render(
+      <EmptyState
+        media={
+          <Image
+            alt="No assets matching your search or filters"
+            src="https://cl.ly/c878e80ca537/telescope.svg"
+            m={0}
+          />
+        }
+        headline="No assets matching your search or filters"
+      />
+    );
+    expect(
+      screen.getByDataQaLabel({
+        image: "No assets matching your search or filters",
+      })
+    ).toBeTruthy();
+    expect(
+      screen.getByDataQaLabel({
+        "image-src": "https://cl.ly/c878e80ca537/telescope.svg",
+      })
+    ).toBeTruthy();
+  });
+  it("should render a headline", async () => {
+    render(
+      <EmptyState
+        media={
+          <Image
+            alt="No assets matching your search or filters"
+            src="https://cl.ly/c878e80ca537/telescope.svg"
+            m={0}
+          />
+        }
+        headline="No assets matching your search or filters"
+      />
+    );
+    expect(
+      screen.getByText("No assets matching your search or filters")
+    ).toBeInTheDocument();
+  });
+  it("should render a subtext", async () => {
+    render(
+      <EmptyState
+        media={
+          <Image
+            alt="No assets matching your search or filters"
+            src="https://cl.ly/b04c6087458f/notes.svg"
+            m={0}
+          />
+        }
+        headline="No content found"
+        subtext="There is no content for the date range you’ve selected."
+        primaryAction={<Button>Compose a Post</Button>}
+      />
+    );
+    expect(
+      screen.getByText(
+        "There is no content for the date range you’ve selected."
+      )
+    ).toBeInTheDocument();
+  });
+  it("should render a primary button", async () => {
+    render(
+      <EmptyState
+        media={
+          <Image
+            alt="No assets matching your search or filters"
+            src="https://cl.ly/57b28cb6caef/abacus.svg"
+            m={0}
+          />
+        }
+        headline="Uh oh! Something went wrong, please try again."
+        primaryAction={<Button>Reload Page</Button>}
+      />
+    );
+    const element = screen.getByText("Reload Page");
+    expect(element).toBeInTheDocument();
+    expect(element).toHaveStyleRule("color", "#FFFFFF");
+  });
+  it("should render a secondary button", async () => {
+    render(
+      <EmptyState
+        media={
+          <Image
+            alt="No assets matching your search or filters"
+            src="https://cl.ly/db498c7682df/download/analytics.svg"
+            m={0}
+          />
+        }
+        headline="Ready to create your first topic?"
+        subtext="Now that you have the basics down, it’s time to create a topic. Remember to look for the icon at any time you are feeling lost."
+        primaryAction={<Button>Create a Topic</Button>}
+        secondaryAction={<Button>I&apos;ll do this later</Button>}
+      />
+    );
+    const element = screen.getByText("I'll do this later");
+    expect(element).toBeInTheDocument();
+    expect(element).toHaveStyleRule("color", "#515e5f");
+  });
+});

package/src/__tests__/EmptyState.typetest.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Button } from "@sproutsocial/seeds-react-button";
+import EmptyState from "../EmptyState";
+import Image from "@sproutsocial/seeds-react-image";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function EmptyStateTypes() {
+  const url = "https://cl.ly/20065a490d48/not-found.svg";
+  return (
+    <>
+      <EmptyState
+        media={
+          <Image alt="No assets matching your search or filters" src={url} />
+        }
+        headline="No assets matching your search or filters"
+      />
+      <EmptyState
+        media={
+          <Image alt="No assets matching your search or filters" src={url} />
+        }
+        headline="Select a category to get started"
+        subtext="Select one or more categories from the right sidebar to see content."
+      />
+      <EmptyState
+        media={
+          <Image alt="No assets matching your search or filters" src={url} />
+        }
+        headline="Uh oh! Something went wrong, please try again."
+        primaryAction={<Button>Reload Page</Button>}
+      />
+      <EmptyState
+        media={
+          <Image alt="No assets matching your search or filters" src={url} />
+        }
+        headline="Ready to create your first topic?"
+        subtext="Now that you have the basics down, it’s time to create a topic. Remember to look for the icon at any time you are feeling lost."
+        primaryAction={<Button>Create a Topic</Button>}
+        secondaryAction={<Button>Ill do this later</Button>}
+      />
+      {/* @ts-expect-error - test that invalid type is rejected */}
+      <EmptyState />
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import EmptyState from "./EmptyState";
+
+export default EmptyState;
+export { EmptyState };
+export * from "./EmptyStateTypes";

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));