@sps-woodland/zero-state 7.0.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/zero-state](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/zero-state#readme)
+
+SPS Woodland Design System zero state component

package/lib/ZeroState.css.d.ts

@@ -0,0 +1,43 @@
+export declare const zeroStateContainer: string;
+export declare const zeroStateWrapper: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    micro: {
+        true: {};
+        false: {
+            padding: string;
+            containerName: string;
+            containerType: "size";
+        };
+    };
+}>;
+export declare const zeroState: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    micro: {
+        true: {
+            alignItems: "center";
+            display: "flex";
+            flexDirection: "column";
+            height: "100%";
+            justifyContent: "center";
+            width: "auto";
+        };
+        false: {};
+    };
+}>;
+export declare const zeroStateImage: string;
+export declare const zeroStateHeading: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    micro: {
+        true: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
+        false: {
+            color: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+}>;
+export declare const zeroStateSubheading: string;
+export declare const zeroStateContent: string;
+export declare const microZeroStateIcon: string;

package/lib/ZeroState.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+import { IconName } from "@sps-woodland/tokens";
+export declare function ZeroState({ artwork, heading, illustration, subHeading, micro, children, className, icon, ...rest }: ComponentProps<{
+    artwork?: string;
+    heading?: string;
+    illustration?: string;
+    subHeading?: string;
+    micro: boolean;
+    icon?: IconName;
+}, HTMLDivElement>): React.ReactElement;

package/lib/ZeroState.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const ZeroStateExamples: ComponentManifestEntry;

package/lib/index.cjs.js

@@ -0,0 +1,169 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("react"),m=require("@sps-woodland/core"),v=require("@sps-woodland/illustrations"),s=require("@spscommerce/utils"),S=require("@sps-woodland/tokens");function w(e){if(e&&e.__esModule)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const o=w(C);function I(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function g(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,r)}return t}function b(e){for(var a=1;a<arguments.length;a++){var t=arguments[a]!=null?arguments[a]:{};a%2?g(Object(t),!0).forEach(function(r){I(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):g(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var y=(e,a,t)=>{for(var r of Object.keys(e)){var n;if(e[r]!==((n=a[r])!==null&&n!==void 0?n:t[r]))return!1}return!0},p=e=>a=>{var t=e.defaultClassName,r=b(b({},e.defaultVariants),a);for(var n in r){var i,d=(i=r[n])!==null&&i!==void 0?i:e.defaultVariants[n];if(d!=null){var l=d;typeof l=="boolean"&&(l=l===!0?"true":"false");var c=e.variantClassNames[n][l];c&&(t+=" "+c)}}for(var[u,h]of e.compoundVariants)y(u,r,e.defaultVariants)&&(t+=" "+h);return t},E="jrytnld",Z=p({defaultClassName:"jrytnl4",variantClassNames:{micro:{true:"jrytnl5",false:"jrytnl6"}},defaultVariants:{micro:!1},compoundVariants:[]}),N="jrytnlc",H=p({defaultClassName:"jrytnl8",variantClassNames:{micro:{true:"jrytnl9",false:"jrytnla"}},defaultVariants:{micro:!1},compoundVariants:[]}),A="jrytnl7",O="jrytnlb",j=p({defaultClassName:"jrytnl1",variantClassNames:{micro:{true:"jrytnl2",false:"jrytnl3"}},defaultVariants:{},compoundVariants:[]});function f({artwork:e,heading:a,illustration:t,subHeading:r,micro:n=!1,children:i,className:d,icon:l,...c}){const u=t||e||v.Illustrations.Large.BUILDING;return o.createElement("div",{className:j({micro:n})},o.createElement("div",{className:m.cl(Z({micro:n}),d),...c},n?o.createElement(o.Fragment,null,l?o.createElement(m.Icon,{className:E,icon:l,"aria-hidden":"true"}):o.createElement("img",{style:{height:"3rem"},src:u})):o.createElement("img",{className:A,src:u,alt:""}),o.createElement("h1",{className:H({micro:n})},a),o.createElement("h2",{className:O},r),o.createElement("div",{className:N},i)))}m.Metadata.set(f,{name:"ZeroState",props:{artwork:{type:"string"},heading:{type:"string"},illustration:{type:"string"},subHeading:{type:"string"},micro:{type:"boolean",default:"false"}}});const B={description:()=>o.createElement("p",null,"Zero States are placeholders in content areas when there is no content to show. You can view all available illustrations on the Illustrations page."),components:[f],examples:{general:{label:"Sizes",description:()=>o.createElement(o.Fragment,null,o.createElement("h5",{className:S.sprinkles({mb:"md"})},"There are 2 sizes of Zero States: Large and Small. They differ in appearance and are used in different cases."),o.createElement("h4",null,"Large Zero States"),o.createElement("h5",{className:S.sprinkles({mb:"md"})},"Use Large Zero States in primary or large areas of a page."),o.createElement("h4",null,"Small Zero States"),o.createElement("h5",null,"Use Small Zero States in secondary or small areas of a page."))},regular:{label:"Usage: Large Zero States",description:({NavigateTo:e})=>o.createElement("p",null,"Large Zero States may be accompanied by other components such as Headings, Subtitles,"," ",o.createElement(e,{to:"Button"},"Buttons"),","," ",o.createElement(e,{to:"List Toolbar"},"Search Bars"),", or a combination of these"),examples:{illustrationAndHeading:{description:"Illustration + Heading",react:s.code`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            
+            function Component() {
+              return (
+                <Card>
+                  <ZeroState
+                    heading="Search for a record"
+                    artwork={Illustrations.Large.GENERAL_SEARCH}
+                  />
+                </Card>
+              );
+            }
+          `},illustrationHeadingAndSubtitle:{description:"Illustration + Heading + Subtitle",react:s.code`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            
+            function Component() {
+              return (
+                <Card>
+                  <ZeroState
+                    artwork={Illustrations.Large.GENERAL_SEARCH}
+                    heading="Search for a record"
+                    subHeading="Find a new record by using the search box above."
+                  />
+                </Card>
+              );
+            }
+          `},illustrationHeadingAndButton:{description:"Illustration + Heading + Button",react:s.code`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            import { SpsButton } from "@spscommerce/ds-react";
+            import { ButtonKind } from "@spscommerce/ds-shared";
+            
+            function Component() {
+              return (
+                <Card>
+                  <ZeroState
+                    artwork={Illustrations.Large.GENERAL_SEARCH}
+                    heading="Search for a record"
+                  >
+                    <SpsButton kind={ButtonKind.CONFIRM}>
+                      Search
+                    </SpsButton>
+                  </ZeroState>
+                </Card>
+              );
+            }
+          `},illustrationHeadingSubtitleAndButton:{description:"Illustration + Heading + Subtitle + Button",react:s.code`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            import { SpsButton } from "@spscommerce/ds-react";
+            import { ButtonKind } from "@spscommerce/ds-shared";
+            
+            function Component() {
+              return (
+                <Card>
+                  <ZeroState
+                    artwork={Illustrations.Large.GENERAL_SEARCH}
+                    heading="Search for a record"
+                    subHeading="Find new companies by using the Search button below."
+                  >
+                    <SpsButton kind={ButtonKind.CONFIRM}>
+                      Search
+                    </SpsButton>
+                  </ZeroState>
+                </Card>
+              );
+            }
+          `},illustrationHeadingSubtitleAndSearch:{description:"Illustration + Heading + Subtitle + Search",react:s.code`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            import { SpsInputGroup, SpsTextInput, SpsButton } from "@spscommerce/ds-react";
+            import { ButtonKind, SpsIcon } from "@spscommerce/ds-shared";
+            
+            function Component() {
+              const [searchText, setSearchText] = React.useState("");
+
+              function handleChange(e) {
+                setSearchText(e.target.value);
+              }
+
+              return (
+                <Card>
+                  <ZeroState
+                    artwork={Illustrations.Large.GENERAL_SEARCH}
+                    heading="Search for a record"
+                  >
+                    <SpsInputGroup>
+                      <SpsTextInput
+                        name="search"
+                        value={searchText}
+                        placeholder="Search for a record"
+                        onChange={handleChange}
+                      />
+                      <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label="Search" />
+                    </SpsInputGroup>
+                  </ZeroState>
+                </Card>
+              );
+            }
+          `}}},micro:{label:"Usage: Small Zero State",description:"Small Zero States may be accompanied by Headings, Subtitles, or both.",examples:{illustrationAndHeading:{description:"Illustration + Heading",react:s.code`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            
+            function Component() {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <Card>
+                      <ZeroState
+                        heading="No Data Available"
+                        artwork={Illustrations.Small.BAR_CHART}
+                        micro
+                      />
+                    </Card>
+                  </div>
+                </div>
+              );
+            }
+          `},illustrationAndSubtitle:{description:"Illustration + Subtitle",react:s.code`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            
+            function Component() {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <Card>
+                      <ZeroState
+                        subHeading="No data available. Create a report and try again."
+                        artwork={Illustrations.Small.BAR_CHART}
+                        micro
+                      />
+                    </Card>
+                  </div>
+                </div>
+              );
+            }
+          `},illustrationHeadingAndSubtitle:{description:"Illustration + Heading + Subtitle",react:s.code`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            
+            function Component() {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <Card>
+                      <ZeroState
+                        heading="No Data Available"
+                        subHeading="No data available. Create a report and try again."
+                        artwork={Illustrations.Small.BAR_CHART}
+                        micro
+                      />
+                    </Card>
+                  </div>
+                </div>
+              );
+            }
+          `}}}}},R={"Zero States":B};exports.MANIFEST=R;exports.ZeroState=f;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ZeroState";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,338 @@
+import * as t from "react";
+import { Metadata as b, cl as C, Icon as v } from "@sps-woodland/core";
+import { Illustrations as w } from "@sps-woodland/illustrations";
+import { code as s } from "@spscommerce/utils";
+import { sprinkles as p } from "@sps-woodland/tokens";
+function I(e, o, r) {
+  return o in e ? Object.defineProperty(e, o, {
+    value: r,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[o] = r, e;
+}
+function f(e, o) {
+  var r = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var a = Object.getOwnPropertySymbols(e);
+    o && (a = a.filter(function(n) {
+      return Object.getOwnPropertyDescriptor(e, n).enumerable;
+    })), r.push.apply(r, a);
+  }
+  return r;
+}
+function S(e) {
+  for (var o = 1; o < arguments.length; o++) {
+    var r = arguments[o] != null ? arguments[o] : {};
+    o % 2 ? f(Object(r), !0).forEach(function(a) {
+      I(e, a, r[a]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : f(Object(r)).forEach(function(a) {
+      Object.defineProperty(e, a, Object.getOwnPropertyDescriptor(r, a));
+    });
+  }
+  return e;
+}
+var E = (e, o, r) => {
+  for (var a of Object.keys(e)) {
+    var n;
+    if (e[a] !== ((n = o[a]) !== null && n !== void 0 ? n : r[a]))
+      return !1;
+  }
+  return !0;
+}, u = (e) => (o) => {
+  var r = e.defaultClassName, a = S(S({}, e.defaultVariants), o);
+  for (var n in a) {
+    var i, d = (i = a[n]) !== null && i !== void 0 ? i : e.defaultVariants[n];
+    if (d != null) {
+      var l = d;
+      typeof l == "boolean" && (l = l === !0 ? "true" : "false");
+      var m = e.variantClassNames[n][l];
+      m && (r += " " + m);
+    }
+  }
+  for (var [c, h] of e.compoundVariants)
+    E(c, a, e.defaultVariants) && (r += " " + h);
+  return r;
+}, y = "jrytnld", Z = u({ defaultClassName: "jrytnl4", variantClassNames: { micro: { true: "jrytnl5", false: "jrytnl6" } }, defaultVariants: { micro: !1 }, compoundVariants: [] }), N = "jrytnlc", H = u({ defaultClassName: "jrytnl8", variantClassNames: { micro: { true: "jrytnl9", false: "jrytnla" } }, defaultVariants: { micro: !1 }, compoundVariants: [] }), A = "jrytnl7", B = "jrytnlb", j = u({ defaultClassName: "jrytnl1", variantClassNames: { micro: { true: "jrytnl2", false: "jrytnl3" } }, defaultVariants: {}, compoundVariants: [] });
+function g({
+  artwork: e,
+  heading: o,
+  illustration: r,
+  subHeading: a,
+  micro: n = !1,
+  children: i,
+  className: d,
+  icon: l,
+  ...m
+}) {
+  const c = r || e || w.Large.BUILDING;
+  return /* @__PURE__ */ t.createElement("div", {
+    className: j({ micro: n })
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: C(Z({ micro: n }), d),
+    ...m
+  }, n ? /* @__PURE__ */ t.createElement(t.Fragment, null, l ? /* @__PURE__ */ t.createElement(v, {
+    className: y,
+    icon: l,
+    "aria-hidden": "true"
+  }) : /* @__PURE__ */ t.createElement("img", {
+    style: { height: "3rem" },
+    src: c
+  })) : /* @__PURE__ */ t.createElement("img", {
+    className: A,
+    src: c,
+    alt: ""
+  }), /* @__PURE__ */ t.createElement("h1", {
+    className: H({ micro: n })
+  }, o), /* @__PURE__ */ t.createElement("h2", {
+    className: B
+  }, a), /* @__PURE__ */ t.createElement("div", {
+    className: N
+  }, i)));
+}
+b.set(g, {
+  name: "ZeroState",
+  props: {
+    artwork: { type: "string" },
+    heading: { type: "string" },
+    illustration: { type: "string" },
+    subHeading: { type: "string" },
+    micro: { type: "boolean", default: "false" }
+  }
+});
+const O = {
+  description: () => /* @__PURE__ */ t.createElement("p", null, "Zero States are placeholders in content areas when there is no content to show. You can view all available illustrations on the Illustrations page."),
+  components: [g],
+  examples: {
+    general: {
+      label: "Sizes",
+      description: () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("h5", {
+        className: p({ mb: "md" })
+      }, "There are 2 sizes of Zero States: Large and Small. They differ in appearance and are used in different cases."), /* @__PURE__ */ t.createElement("h4", null, "Large Zero States"), /* @__PURE__ */ t.createElement("h5", {
+        className: p({ mb: "md" })
+      }, "Use Large Zero States in primary or large areas of a page."), /* @__PURE__ */ t.createElement("h4", null, "Small Zero States"), /* @__PURE__ */ t.createElement("h5", null, "Use Small Zero States in secondary or small areas of a page."))
+    },
+    regular: {
+      label: "Usage: Large Zero States",
+      description: ({ NavigateTo: e }) => /* @__PURE__ */ t.createElement("p", null, "Large Zero States may be accompanied by other components such as Headings, Subtitles,", " ", /* @__PURE__ */ t.createElement(e, {
+        to: "Button"
+      }, "Buttons"), ",", " ", /* @__PURE__ */ t.createElement(e, {
+        to: "List Toolbar"
+      }, "Search Bars"), ", or a combination of these"),
+      examples: {
+        illustrationAndHeading: {
+          description: "Illustration + Heading",
+          react: s`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            
+            function Component() {
+              return (
+                <Card>
+                  <ZeroState
+                    heading="Search for a record"
+                    artwork={Illustrations.Large.GENERAL_SEARCH}
+                  />
+                </Card>
+              );
+            }
+          `
+        },
+        illustrationHeadingAndSubtitle: {
+          description: "Illustration + Heading + Subtitle",
+          react: s`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            
+            function Component() {
+              return (
+                <Card>
+                  <ZeroState
+                    artwork={Illustrations.Large.GENERAL_SEARCH}
+                    heading="Search for a record"
+                    subHeading="Find a new record by using the search box above."
+                  />
+                </Card>
+              );
+            }
+          `
+        },
+        illustrationHeadingAndButton: {
+          description: "Illustration + Heading + Button",
+          react: s`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            import { SpsButton } from "@spscommerce/ds-react";
+            import { ButtonKind } from "@spscommerce/ds-shared";
+            
+            function Component() {
+              return (
+                <Card>
+                  <ZeroState
+                    artwork={Illustrations.Large.GENERAL_SEARCH}
+                    heading="Search for a record"
+                  >
+                    <SpsButton kind={ButtonKind.CONFIRM}>
+                      Search
+                    </SpsButton>
+                  </ZeroState>
+                </Card>
+              );
+            }
+          `
+        },
+        illustrationHeadingSubtitleAndButton: {
+          description: "Illustration + Heading + Subtitle + Button",
+          react: s`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            import { SpsButton } from "@spscommerce/ds-react";
+            import { ButtonKind } from "@spscommerce/ds-shared";
+            
+            function Component() {
+              return (
+                <Card>
+                  <ZeroState
+                    artwork={Illustrations.Large.GENERAL_SEARCH}
+                    heading="Search for a record"
+                    subHeading="Find new companies by using the Search button below."
+                  >
+                    <SpsButton kind={ButtonKind.CONFIRM}>
+                      Search
+                    </SpsButton>
+                  </ZeroState>
+                </Card>
+              );
+            }
+          `
+        },
+        illustrationHeadingSubtitleAndSearch: {
+          description: "Illustration + Heading + Subtitle + Search",
+          react: s`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            import { SpsInputGroup, SpsTextInput, SpsButton } from "@spscommerce/ds-react";
+            import { ButtonKind, SpsIcon } from "@spscommerce/ds-shared";
+            
+            function Component() {
+              const [searchText, setSearchText] = React.useState("");
+
+              function handleChange(e) {
+                setSearchText(e.target.value);
+              }
+
+              return (
+                <Card>
+                  <ZeroState
+                    artwork={Illustrations.Large.GENERAL_SEARCH}
+                    heading="Search for a record"
+                  >
+                    <SpsInputGroup>
+                      <SpsTextInput
+                        name="search"
+                        value={searchText}
+                        placeholder="Search for a record"
+                        onChange={handleChange}
+                      />
+                      <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} aria-label="Search" />
+                    </SpsInputGroup>
+                  </ZeroState>
+                </Card>
+              );
+            }
+          `
+        }
+      }
+    },
+    micro: {
+      label: "Usage: Small Zero State",
+      description: "Small Zero States may be accompanied by Headings, Subtitles, or both.",
+      examples: {
+        illustrationAndHeading: {
+          description: "Illustration + Heading",
+          react: s`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            
+            function Component() {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <Card>
+                      <ZeroState
+                        heading="No Data Available"
+                        artwork={Illustrations.Small.BAR_CHART}
+                        micro
+                      />
+                    </Card>
+                  </div>
+                </div>
+              );
+            }
+          `
+        },
+        illustrationAndSubtitle: {
+          description: "Illustration + Subtitle",
+          react: s`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            
+            function Component() {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <Card>
+                      <ZeroState
+                        subHeading="No data available. Create a report and try again."
+                        artwork={Illustrations.Small.BAR_CHART}
+                        micro
+                      />
+                    </Card>
+                  </div>
+                </div>
+              );
+            }
+          `
+        },
+        illustrationHeadingAndSubtitle: {
+          description: "Illustration + Heading + Subtitle",
+          react: s`
+            import { ZeroState } from "@sps-woodland/zero-state";
+            import { Card } from "@sps-woodland/cards";
+            import { Illustrations } from "@sps-woodland/core";
+            
+            function Component() {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <Card>
+                      <ZeroState
+                        heading="No Data Available"
+                        subHeading="No data available. Create a report and try again."
+                        artwork={Illustrations.Small.BAR_CHART}
+                        micro
+                      />
+                    </Card>
+                  </div>
+                </div>
+              );
+            }
+          `
+        }
+      }
+    }
+  }
+}, T = {
+  "Zero States": O
+};
+export {
+  T as MANIFEST,
+  g as ZeroState
+};

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/lib/style.css

@@ -0,0 +1 @@
+.jrytnl3{padding:1rem;container-name:jrytnl0;container-type:size}.jrytnl4{margin:auto;padding-top:2rem;padding-right:0;padding-bottom:2rem;padding-left:0;text-align:center}.jrytnl5{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:auto}.jrytnl7{height:6.25rem;margin-bottom:1rem;width:12.5rem}.jrytnl8{margin-bottom:0}.jrytnl9{color:#4b5356;font-size:1rem;font-weight:600;line-height:1.25rem}.jrytnla{color:#1f282c;font-size:1.5rem;line-height:1.5rem}.jrytnlb{color:#4b5356;font-size:.875rem;line-height:1.25rem;margin-top:.25rem;margin-bottom:0}.jrytnlc{margin-top:1rem}.jrytnld{color:#717779;font-size:3rem;line-height:3rem;padding-bottom:.25rem}@media screen and (min-width: 768px){.jrytnl4{width:75%}}@media screen and (min-width: 992px){.jrytnl4{width:50%}}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@sps-woodland/zero-state",
+  "description": "SPS Woodland Design System zero state component",
+  "version": "7.0.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/zero-state",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/zero-state#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@sps-woodland/illustrations": "7.0.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@vanilla-extract/css": "^1.9.1",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "@spscommerce/utils": "^6.12.1",
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@sps-woodland/illustrations": "7.0.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});