@sps-woodland/cards 8.17.1 → 8.17.2

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@sps-woodland/core"),B=require("react"),r=require("@spscommerce/utils");function S(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(n,i,s.get?s:{enumerable:!0,get:()=>t[i]})}}return n.default=t,Object.freeze(n)}const e=S(B);var q="_1gxcp3j0";function p({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(q,n),...i},t)}a.Metadata.set(p,{name:"CardFooter"});var E="mxozo50";function g({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(E,n),...i},t)}a.Metadata.set(g,{name:"CardHeader"});var N="jyyttb0";function C({children:t,className:n,...i}){const[s,[l],m,u]=a.selectChildren(t,[{type:g},{custom:c=>a.Metadata.isWoodlandComponent(c)&&a.Metadata.get(c).name==="Tabs"},{type:p}]),d=a.useChildTestIdAttrBuilder(i);return e.createElement("div",{className:a.cl(N,n),...i},s,l?a.addProps(l,{context:"container"}):e.createElement(a.Content,{...d("body")},u),m)}a.Metadata.set(C,{name:"Card"});var F="_1f11ubh0";function b({children:t,className:n="",...i}){return e.createElement(a.CapContentTitle,{className:a.cl(F,n),...i},t)}a.Metadata.set(b,{name:"CardTitle"});const T=Object.freeze({general:"status-new",success:"status-ok",error:"status-error",warning:"status-warning",processing:"status-in-process"});function I({children:t,className:n,horizontal:i=!1,icon:s,kind:l="general",title:m,metric:u,partnerCount:d,totalPartners:c,...y}){const{t:h}=e.useContext(a.I18nContext),o=a.useChildTestIdAttrBuilder(y),[k,w,v]=(d?h("design-system:insightTile.partnerCount",{count:d,total:c}):"").split("|");return e.createElement(e.Fragment,null,e.createElement("div",{className:a.cl("sps-insight-tile",`sps-insight-tile--${l}`,i&&"sps-insight-tile--horizontal",t&&"sps-insight-tile--has-detail",n),...y},e.createElement("div",{className:"sps-insight-tile__body",...o("body")},s?e.createElement("i",{className:`sps-icon sps-icon-${s}`,...o("icon")}):e.createElement("i",{className:`sps-icon sps-icon-${T[l]}`,...o("icon")}),u&&e.createElement("div",{className:"sps-insight-tile__metric-count",...o("metric")},u),m&&e.createElement("div",{className:"sps-insight-tile__description",...o("description")},e.createElement("div",{className:"sps-insight-tile__title",style:{"-webkit-box-orient":"vertical"},...o("title")},m),e.createElement("div",{className:"sps-insight-tile__detail",...o("detail")},t))),d&&e.createElement("div",{className:"sps-insight-tile__partner-count",...o("partner-count")},d===c?e.createElement("div",null,h("design-system:insightTile.all")):e.createElement(e.Fragment,null,e.createElement("div",null,k),e.createElement("div",null,w),e.createElement("div",null,v)),e.createElement("div",{className:"sps-insight-tile__partners-text"},h("design-system:insightTile.partners")))))}a.Metadata.set(I,{name:"InsightCard",props:{horizontal:{type:"boolean",default:"false"},icon:"IconName",kind:{type:"InsightCardKind",default:'"general"'},title:"string",metric:"number | string",partnerCount:"number",totalPartners:"number"}});function f({children:t,...n}){return e.createElement("div",{className:"insight-tile-wrapper",...n},t)}a.Metadata.set(f,{name:"InsightCardSet"});var P="_7b9vus0";function x({children:t,className:n,maxHeight:i,style:s,...l}){return e.createElement("div",{className:a.cl(P,n),style:{...s,maxHeight:i},...l},t)}a.Metadata.set(x,{name:"ScrollableContainer",props:{maxHeight:"string"}});const D={description:()=>e.createElement("p",null,"Cards are used to group similar or related content together in a single container. They can be combined with additional elements such as Headers, Footers, or Tabs."),components:[C,p,g,b],examples:{general:{label:"General Usage",description:({Link:t,NavigateTo:n})=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Sizing and Layout"),e.createElement("p",null,"All varieties of Cards should be placed on the Woodland Grid (i.e. the width of a Card should span a specific number of grid columns). They should never be set to a custom width. See the ",e.createElement(t,{to:"/style-and-layout/grid"},"Woodland Grid")," and"," ",e.createElement(t,{to:"/style-and-layout/page-types"},"Page Layouts")," sections for more guidance on appropriate usage."),e.createElement("p",null,"The height of a Card should typically be based on the content inside of it, but in specific cases a fixed height can be set. For these cases, content will scroll vertically inside of the container."),e.createElement("h5",null,"Text Content"),e.createElement("p",null,"The only text content that can exist outside of a Card is the"," ",e.createElement(n,{to:"page-title"},"Page Title")," component."),e.createElement("p",null,"All other content should exist inside of a Card and should adhere to the Woodland Design System ",e.createElement(t,{to:"/style-and-layout/typography"},"Typography")," rules."),e.createElement("h5",null,"Nesting"),e.createElement("p",null,"Avoid nesting Cards inside of other Cards when possible. If nesting is necessary, avoid nesting more than one level deep (i.e. limit nesting to a Card inside of a Card)."))},basic:{label:"Basic card",description:()=>e.createElement("p",null,"Basic Cards can include any type of general content, such as body copy, description lists, or more complex content such as forms."),examples:{basic:{react:r.code`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@sps-woodland/core"),B=require("react"),r=require("@spscommerce/utils");function _(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(n,i,s.get?s:{enumerable:!0,get:()=>t[i]})}}return n.default=t,Object.freeze(n)}const e=_(B);var S="pkg_sps-woodland_cards__version_8_17_2__hash_1gxcp3j0";function p({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(S,n),...i},t)}a.Metadata.set(p,{name:"CardFooter"});var q="pkg_sps-woodland_cards__version_8_17_2__hash_mxozo50";function g({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(q,n),...i},t)}a.Metadata.set(g,{name:"CardHeader"});var E="pkg_sps-woodland_cards__version_8_17_2__hash_jyyttb0";function C({children:t,className:n,...i}){const[s,[l],m,u]=a.selectChildren(t,[{type:g},{custom:c=>a.Metadata.isWoodlandComponent(c)&&a.Metadata.get(c).name==="Tabs"},{type:p}]),d=a.useChildTestIdAttrBuilder(i);return e.createElement("div",{className:a.cl(E,n),...i},s,l?a.addProps(l,{context:"container"}):e.createElement(a.Content,{...d("body")},u),m)}a.Metadata.set(C,{name:"Card"});var N="pkg_sps-woodland_cards__version_8_17_2__hash_1f11ubh0";function b({children:t,className:n="",...i}){return e.createElement(a.CapContentTitle,{className:a.cl(N,n),...i},t)}a.Metadata.set(b,{name:"CardTitle"});const k=Object.freeze({general:"status-new",success:"status-ok",error:"status-error",warning:"status-warning",processing:"status-in-process"});function I({children:t,className:n,horizontal:i=!1,icon:s,kind:l="general",title:m,metric:u,partnerCount:d,totalPartners:c,...y}){const{t:h}=e.useContext(a.I18nContext),o=a.useChildTestIdAttrBuilder(y),[w,T,v]=(d?h("design-system:insightTile.partnerCount",{count:d,total:c}):"").split("|");return e.createElement(e.Fragment,null,e.createElement("div",{className:a.cl("sps-insight-tile",`sps-insight-tile--${l}`,i&&"sps-insight-tile--horizontal",t&&"sps-insight-tile--has-detail",n),...y},e.createElement("div",{className:"sps-insight-tile__body",...o("body")},s?e.createElement("i",{className:`sps-icon sps-icon-${s}`,...o("icon")}):e.createElement("i",{className:`sps-icon sps-icon-${k[l]}`,...o("icon")}),u&&e.createElement("div",{className:"sps-insight-tile__metric-count",...o("metric")},u),m&&e.createElement("div",{className:"sps-insight-tile__description",...o("description")},e.createElement("div",{className:"sps-insight-tile__title",style:{"-webkit-box-orient":"vertical"},...o("title")},m),e.createElement("div",{className:"sps-insight-tile__detail",...o("detail")},t))),d&&e.createElement("div",{className:"sps-insight-tile__partner-count",...o("partner-count")},d===c?e.createElement("div",null,h("design-system:insightTile.all")):e.createElement(e.Fragment,null,e.createElement("div",null,w),e.createElement("div",null,T),e.createElement("div",null,v)),e.createElement("div",{className:"sps-insight-tile__partners-text"},h("design-system:insightTile.partners")))))}a.Metadata.set(I,{name:"InsightCard",props:{horizontal:{type:"boolean",default:"false"},icon:"IconName",kind:{type:"InsightCardKind",default:'"general"'},title:"string",metric:"number | string",partnerCount:"number",totalPartners:"number"}});function f({children:t,...n}){return e.createElement("div",{className:"insight-tile-wrapper",...n},t)}a.Metadata.set(f,{name:"InsightCardSet"});var F="pkg_sps-woodland_cards__version_8_17_2__hash_7b9vus0";function x({children:t,className:n,maxHeight:i,style:s,...l}){return e.createElement("div",{className:a.cl(F,n),style:{...s,maxHeight:i},...l},t)}a.Metadata.set(x,{name:"ScrollableContainer",props:{maxHeight:"string"}});const P={description:()=>e.createElement("p",null,"Cards are used to group similar or related content together in a single container. They can be combined with additional elements such as Headers, Footers, or Tabs."),components:[C,p,g,b],examples:{general:{label:"General Usage",description:({Link:t,NavigateTo:n})=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Sizing and Layout"),e.createElement("p",null,"All varieties of Cards should be placed on the Woodland Grid (i.e. the width of a Card should span a specific number of grid columns). They should never be set to a custom width. See the ",e.createElement(t,{to:"/style-and-layout/grid"},"Woodland Grid")," and"," ",e.createElement(t,{to:"/style-and-layout/page-types"},"Page Layouts")," sections for more guidance on appropriate usage."),e.createElement("p",null,"The height of a Card should typically be based on the content inside of it, but in specific cases a fixed height can be set. For these cases, content will scroll vertically inside of the container."),e.createElement("h5",null,"Text Content"),e.createElement("p",null,"The only text content that can exist outside of a Card is the"," ",e.createElement(n,{to:"page-title"},"Page Title")," component."),e.createElement("p",null,"All other content should exist inside of a Card and should adhere to the Woodland Design System ",e.createElement(t,{to:"/style-and-layout/typography"},"Typography")," rules."),e.createElement("h5",null,"Nesting"),e.createElement("p",null,"Avoid nesting Cards inside of other Cards when possible. If nesting is necessary, avoid nesting more than one level deep (i.e. limit nesting to a Card inside of a Card)."))},basic:{label:"Basic card",description:()=>e.createElement("p",null,"Basic Cards can include any type of general content, such as body copy, description lists, or more complex content such as forms."),examples:{basic:{react:r.code`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -271,7 +271,7 @@
                 </Card>
               );
             }
-          `}}}}},H={components:[I,f],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:r.code`
+          `}}}}},D={components:[I,f],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:r.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -473,7 +473,7 @@
                 </InsightCardSet>
               );
             }
-          `}}}}},_={components:[x],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:r.code`
+          `}}}}},H={components:[x],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:r.code`
             import { Card, ScrollableContainer } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -537,4 +537,4 @@
                 </Card>
               );
             }
-          `}}}}},M={Cards:D,"Insight Cards":H,"Scrollable Container":_};exports.Card=C;exports.CardFooter=p;exports.CardHeader=g;exports.CardTitle=b;exports.InsightCard=I;exports.InsightCardIcons=T;exports.InsightCardSet=f;exports.MANIFEST=M;exports.ScrollableContainer=x;
+          `}}}}},M={Cards:P,"Insight Cards":D,"Scrollable Container":H};exports.Card=C;exports.CardFooter=p;exports.CardHeader=g;exports.CardTitle=b;exports.InsightCard=I;exports.InsightCardIcons=k;exports.InsightCardSet=f;exports.MANIFEST=M;exports.ScrollableContainer=x;

package/lib/index.es.js

@@ -1,54 +1,54 @@
-import { Metadata as r, CapContent as I, cl as c, selectChildren as E, useChildTestIdAttrBuilder as f, addProps as q, Content as N, CapContentTitle as F, I18nContext as P } from "@sps-woodland/core";
+import { Metadata as s, CapContent as I, cl as c, selectChildren as S, useChildTestIdAttrBuilder as f, addProps as E, Content as q, CapContentTitle as N, I18nContext as F } from "@sps-woodland/core";
 import * as e from "react";
-import { code as i } from "@spscommerce/utils";
-var H = "_1gxcp3j0";
+import { code as n } from "@spscommerce/utils";
+var P = "pkg_sps-woodland_cards__version_8_17_2__hash_1gxcp3j0";
 function g({
   children: t,
   className: a = "",
-  ...n
+  ...i
 }) {
-  return /* @__PURE__ */ e.createElement(I, { className: c(H, a), ...n }, t);
+  return /* @__PURE__ */ e.createElement(I, { className: c(P, a), ...i }, t);
 }
-r.set(g, { name: "CardFooter" });
-var D = "mxozo50";
+s.set(g, { name: "CardFooter" });
+var H = "pkg_sps-woodland_cards__version_8_17_2__hash_mxozo50";
 function C({
   children: t,
   className: a = "",
-  ...n
+  ...i
 }) {
-  return /* @__PURE__ */ e.createElement(I, { className: c(D, a), ...n }, t);
+  return /* @__PURE__ */ e.createElement(I, { className: c(H, a), ...i }, t);
 }
-r.set(C, { name: "CardHeader" });
-var _ = "jyyttb0";
+s.set(C, { name: "CardHeader" });
+var D = "pkg_sps-woodland_cards__version_8_17_2__hash_jyyttb0";
 function x({
   children: t,
   className: a,
-  ...n
+  ...i
 }) {
   const [
     l,
     [o],
     u,
     p
-  ] = E(t, [
+  ] = S(t, [
     { type: C },
     {
-      custom: (m) => r.isWoodlandComponent(m) && r.get(m).name === "Tabs"
+      custom: (m) => s.isWoodlandComponent(m) && s.get(m).name === "Tabs"
     },
     { type: g }
-  ]), d = f(n);
-  return /* @__PURE__ */ e.createElement("div", { className: c(_, a), ...n }, l, o ? q(o, { context: "container" }) : /* @__PURE__ */ e.createElement(N, { ...d("body") }, p), u);
+  ]), d = f(i);
+  return /* @__PURE__ */ e.createElement("div", { className: c(D, a), ...i }, l, o ? E(o, { context: "container" }) : /* @__PURE__ */ e.createElement(q, { ...d("body") }, p), u);
 }
-r.set(x, { name: "Card" });
-var z = "_1f11ubh0";
-function y({
+s.set(x, { name: "Card" });
+var z = "pkg_sps-woodland_cards__version_8_17_2__hash_1f11ubh0";
+function k({
   children: t,
   className: a = "",
-  ...n
+  ...i
 }) {
-  return /* @__PURE__ */ e.createElement(F, { className: c(z, a), ...n }, t);
+  return /* @__PURE__ */ e.createElement(N, { className: c(z, a), ...i }, t);
 }
-r.set(y, { name: "CardTitle" });
+s.set(k, { name: "CardTitle" });
 const W = Object.freeze({
   general: "status-new",
   success: "status-ok",
@@ -56,10 +56,10 @@ const W = Object.freeze({
   warning: "status-warning",
   processing: "status-in-process"
 });
-function T({
+function w({
   children: t,
   className: a,
-  horizontal: n = !1,
+  horizontal: i = !1,
   icon: l,
   kind: o = "general",
   title: u,
@@ -68,10 +68,10 @@ function T({
   totalPartners: m,
   ...b
 }) {
-  const { t: h } = e.useContext(P), s = f(b), [
-    v,
+  const { t: h } = e.useContext(F), r = f(b), [
+    T,
     B,
-    S
+    _
   ] = (d ? h("design-system:insightTile.partnerCount", {
     count: d,
     total: m
@@ -82,25 +82,25 @@ function T({
       className: c(
         "sps-insight-tile",
         `sps-insight-tile--${o}`,
-        n && "sps-insight-tile--horizontal",
+        i && "sps-insight-tile--horizontal",
         t && "sps-insight-tile--has-detail",
         a
       ),
       ...b
     },
-    /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__body", ...s("body") }, l ? /* @__PURE__ */ e.createElement("i", { className: `sps-icon sps-icon-${l}`, ...s("icon") }) : /* @__PURE__ */ e.createElement("i", { className: `sps-icon sps-icon-${W[o]}`, ...s("icon") }), p && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__metric-count", ...s("metric") }, p), u && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__description", ...s("description") }, /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__body", ...r("body") }, l ? /* @__PURE__ */ e.createElement("i", { className: `sps-icon sps-icon-${l}`, ...r("icon") }) : /* @__PURE__ */ e.createElement("i", { className: `sps-icon sps-icon-${W[o]}`, ...r("icon") }), p && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__metric-count", ...r("metric") }, p), u && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__description", ...r("description") }, /* @__PURE__ */ e.createElement(
       "div",
       {
         className: "sps-insight-tile__title",
         style: { "-webkit-box-orient": "vertical" },
-        ...s("title")
+        ...r("title")
       },
       u
-    ), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__detail", ...s("detail") }, t))),
-    d && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partner-count", ...s("partner-count") }, d === m ? /* @__PURE__ */ e.createElement("div", null, h("design-system:insightTile.all")) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", null, v), /* @__PURE__ */ e.createElement("div", null, B), /* @__PURE__ */ e.createElement("div", null, S)), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partners-text" }, h("design-system:insightTile.partners")))
+    ), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__detail", ...r("detail") }, t))),
+    d && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partner-count", ...r("partner-count") }, d === m ? /* @__PURE__ */ e.createElement("div", null, h("design-system:insightTile.all")) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", null, T), /* @__PURE__ */ e.createElement("div", null, B), /* @__PURE__ */ e.createElement("div", null, _)), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partners-text" }, h("design-system:insightTile.partners")))
   ));
 }
-r.set(T, {
+s.set(w, {
   name: "InsightCard",
   props: {
     horizontal: { type: "boolean", default: "false" },
@@ -112,18 +112,18 @@ r.set(T, {
     totalPartners: "number"
   }
 });
-function k({
+function y({
   children: t,
   ...a
 }) {
   return /* @__PURE__ */ e.createElement("div", { className: "insight-tile-wrapper", ...a }, t);
 }
-r.set(k, { name: "InsightCardSet" });
-var A = "_7b9vus0";
-function w({
+s.set(y, { name: "InsightCardSet" });
+var A = "pkg_sps-woodland_cards__version_8_17_2__hash_7b9vus0";
+function v({
   children: t,
   className: a,
-  maxHeight: n,
+  maxHeight: i,
   style: l,
   ...o
 }) {
@@ -131,13 +131,13 @@ function w({
     "div",
     {
       className: c(A, a),
-      style: { ...l, maxHeight: n },
+      style: { ...l, maxHeight: i },
       ...o
     },
     t
   );
 }
-r.set(w, {
+s.set(v, {
   name: "ScrollableContainer",
   props: {
     maxHeight: "string"
@@ -149,7 +149,7 @@ const R = {
     x,
     g,
     C,
-    y
+    k
   ],
   examples: {
     general: {
@@ -161,7 +161,7 @@ const R = {
       description: () => /* @__PURE__ */ e.createElement("p", null, "Basic Cards can include any type of general content, such as body copy, description lists, or more complex content such as forms."),
       examples: {
         basic: {
-          react: i`
+          react: n`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -173,7 +173,7 @@ const R = {
           `
         },
         sections: {
-          react: i`
+          react: n`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -210,7 +210,7 @@ const R = {
           `
         },
         nestedSections: {
-          react: i`
+          react: n`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -241,7 +241,7 @@ const R = {
       description: () => /* @__PURE__ */ e.createElement("p", null, "Headers can be attached to a Card to display a title (that describes the content inside the card) or add actions (buttons or links) that relate directly to the content inside of the card. Content is restricted to the left side (for titles) and right side (for actions) of the Header."),
       examples: {
         title: {
-          react: i`
+          react: n`
             import { Button } from "@sps-woodland/buttons";
             import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -280,7 +280,7 @@ const R = {
       description: () => /* @__PURE__ */ e.createElement("p", null, "Footers can be attached to a Card to add secondary actions (buttons or links) that relate directly to the content inside of it, or other types of general content that may be applicable. Content can be placed in the middle or either side of the Footer."),
       examples: {
         basicFooter: {
-          react: i`
+          react: n`
             import { Button } from "@sps-woodland/buttons";
             import { Card, CardFooter } from "@sps-woodland/cards";
             import { Box } from "@sps-woodland/core";
@@ -313,7 +313,7 @@ const R = {
       description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Use Tabs to combine multiple cards with unique but related content. Tabs can include optional details such as icons or tags."), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("code", null, "<Item>"), " comes from the ", /* @__PURE__ */ e.createElement("code", null, "@react-stately/collections"), "package, which is a peer dependency of our React components.")),
       examples: {
         tabsOnly: {
-          react: i`
+          react: n`
             import { Card } from "@sps-woodland/cards";
             import { Box, Icon } from "@sps-woodland/core";
             import { Tabs } from "@sps-woodland/tabs";
@@ -370,7 +370,7 @@ const R = {
           `
         },
         activeTabInput: {
-          react: i`
+          react: n`
             import { Card } from "@sps-woodland/cards";
             import { Tabs } from "@sps-woodland/tabs";
             import { Item } from "@react-stately/collections";
@@ -400,7 +400,7 @@ const R = {
       description: () => /* @__PURE__ */ e.createElement("p", null, "Headers, Footers, and Tabs can be attached to Cards in any combination."),
       examples: {
         everything: {
-          react: i`
+          react: n`
             import { SpsTag } from "@spscommerce/ds-react";
             import { Button } from "@sps-woodland/buttons";
             import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
@@ -485,13 +485,13 @@ const R = {
     }
   }
 }, U = {
-  components: [T, k],
+  components: [w, y],
   examples: {
     basic: {
       label: "Basic Insight Cards",
       examples: {
         basic: {
-          react: i`
+          react: n`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -532,7 +532,7 @@ const R = {
       label: "With Details",
       examples: {
         details: {
-          react: i`
+          react: n`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             import { Box } from "@sps-woodland/core";
             function Component() {
@@ -574,7 +574,7 @@ const R = {
       label: "Partner Count",
       examples: {
         partnerCount: {
-          react: i`
+          react: n`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -625,7 +625,7 @@ const R = {
       label: "Using alternate icons",
       examples: {
         alternateIcons: {
-          react: i`
+          react: n`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -671,7 +671,7 @@ const R = {
       label: "Horizontal",
       examples: {
         horizontal: {
-          react: i`
+          react: n`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -731,14 +731,14 @@ const R = {
     }
   }
 }, M = {
-  components: [w],
+  components: [v],
   examples: {
     basic: {
       label: "Basic",
       description: "Basic scrollable container",
       examples: {
         text: {
-          react: i`
+          react: n`
             import { Card, ScrollableContainer } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -784,7 +784,7 @@ const R = {
           `
         },
         components: {
-          react: i`
+          react: n`
             import { Card, ScrollableContainer } from "@sps-woodland/cards";
             import { SpsClickableTag } from "@spscommerce/ds-react";
             function Component() {
@@ -819,10 +819,10 @@ export {
   x as Card,
   g as CardFooter,
   C as CardHeader,
-  y as CardTitle,
-  T as InsightCard,
+  k as CardTitle,
+  w as InsightCard,
   W as InsightCardIcons,
-  k as InsightCardSet,
+  y as InsightCardSet,
   j as MANIFEST,
-  w as ScrollableContainer
+  v as ScrollableContainer
 };

package/lib/style.css

@@ -1 +1 @@
-._1gxcp3j0{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.mxozo50{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.jyyttb0{background-clip:border-box;background-color:#fff;border-color:#d2d4d4;border-radius:.25rem;border-style:solid;border-width:.0625rem;display:flex;flex-direction:column;min-width:0;word-wrap:break-word}._1f11ubh0{font-weight:600}._7b9vus0{overflow:scroll;background-attachment:local,local,scroll,scroll;background-color:#fff;background-image:linear-gradient(0deg,#fff,#fff0),linear-gradient(180deg,#fff,#fff0),linear-gradient(0deg,#00000026,#fff0),linear-gradient(180deg,#00000026,#fff0);background-position:100% 100%,0 0,100% 100%,0 0;background-repeat:no-repeat;background-size:100% 3.125rem,100% 3.125rem,100% .625rem,100% .625rem;display:block;overflow-x:hidden;overflow-y:auto}._7b9vus0 .sps-clickable-tag{background-color:#0000004d}
+.pkg_sps-woodland_cards__version_8_17_2__hash_1gxcp3j0{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_cards__version_8_17_2__hash_mxozo50{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_cards__version_8_17_2__hash_jyyttb0{background-clip:border-box;background-color:#fff;border-color:#d2d4d4;border-radius:.25rem;border-style:solid;border-width:.0625rem;display:flex;flex-direction:column;min-width:0;word-wrap:break-word}.pkg_sps-woodland_cards__version_8_17_2__hash_1f11ubh0{font-weight:600}.pkg_sps-woodland_cards__version_8_17_2__hash_7b9vus0{overflow:scroll;background-attachment:local,local,scroll,scroll;background-color:#fff;background-image:linear-gradient(0deg,#fff,#fff0),linear-gradient(180deg,#fff,#fff0),linear-gradient(0deg,#00000026,#fff0),linear-gradient(180deg,#00000026,#fff0);background-position:100% 100%,0 0,100% 100%,0 0;background-repeat:no-repeat;background-size:100% 3.125rem,100% 3.125rem,100% .625rem,100% .625rem;display:block;overflow-x:hidden;overflow-y:auto}.pkg_sps-woodland_cards__version_8_17_2__hash_7b9vus0 .sps-clickable-tag{background-color:#0000004d}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/cards",
   "description": "SPS Woodland Design System card, insight card, and scrollable container components",
-  "version": "8.17.1",
+  "version": "8.17.2",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
@@ -29,8 +29,8 @@
     "@spscommerce/utils": "^7.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "8.17.1",
-    "@sps-woodland/tokens": "8.17.1"
+    "@sps-woodland/core": "8.17.2",
+    "@sps-woodland/tokens": "8.17.2"
   },
   "devDependencies": {
     "@react-stately/collections": "^3.6.0",
@@ -38,9 +38,9 @@
     "@vanilla-extract/css": "^1.9.3",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "8.17.1",
-    "@sps-woodland/tabs": "8.17.1",
-    "@sps-woodland/tokens": "8.17.1"
+    "@sps-woodland/core": "8.17.2",
+    "@sps-woodland/tabs": "8.17.2",
+    "@sps-woodland/tokens": "8.17.2"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",

package/vite.config.mjs

@@ -1,11 +1,20 @@
 import path from "path";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
-
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
 import pkg from "./package.json";
 
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
 export default defineConfig({
-  plugins: [vanillaExtractPlugin()],
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),