@sps-woodland/cards 7.17.9 → 8.0.0

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@sps-woodland/core"),w=require("react"),s=require("@spscommerce/utils");function B(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(n,i,r.get?r:{enumerable:!0,get:()=>t[i]})}}return n.default=t,Object.freeze(n)}const e=B(w);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[r,[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},r,l?a.addProps(l,{context:"container"}):e.createElement(a.Content,{...d("body")},u),m)}a.Metadata.set(C,{name:"Card"});var _="_1f11ubh0";function b({children:t,className:n="",...i}){return e.createElement(a.CapContentTitle,{className:a.cl(_,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:r,kind:l="general",title:m,metric:u,partnerCount:d,totalPartners:c,...y}){const{t:h}=e.useContext(a.I18nContext),o=a.useChildTestIdAttrBuilder(y),[v,S,k]=(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")},r?e.createElement("i",{className:`sps-icon sps-icon-${r}`,...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,v),e.createElement("div",null,S),e.createElement("div",null,k)),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="_7b9vus0";function x({children:t,className:n,maxHeight:i,style:r,...l}){return e.createElement("div",{className:a.cl(F,n),style:{...r,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:s.code`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@sps-woodland/core"),B=require("react"),r=require("@spscommerce/utils");function S(t){if(t&&t.__esModule)return 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 _="_1f11ubh0";function b({children:t,className:n="",...i}){return e.createElement(a.CapContentTitle,{className:a.cl(_,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),[v,w,k]=(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,v),e.createElement("div",null,w),e.createElement("div",null,k)),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="_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 (
@@ -7,7 +7,7 @@
                 </Card>
               );
             }
-          `},sections:{react:s.code`
+          `},sections:{react:r.code`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -41,7 +41,7 @@
                 </Card>
               );
             }
-          `},nestedSections:{react:s.code`
+          `},nestedSections:{react:r.code`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -63,8 +63,8 @@
                 </Card>
               );
             }
-          `}}},headers:{label:"Card + Header",description:()=>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:s.code`
-            import { SpsButton } from "@spscommerce/ds-react";
+          `}}},headers:{label:"Card + Header",description:()=>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:r.code`
+            import { Button } from "@sps-woodland/buttons";
             import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
             import { sprinkles } from "@sps-woodland/tokens";
@@ -77,12 +77,12 @@
                       Jabberwocky
                     </CardTitle>
                     <div>
-                      <SpsButton kind="link" className={sprinkles({ mr: "sm" })}>
+                      <Button kind="link" className={sprinkles({ mr: "sm" })}>
                         Redefine
-                      </SpsButton>
-                      <SpsButton kind="icon" icon="printer" />
-                      <SpsButton kind="icon" icon="download-cloud" />
-                      <SpsButton className={sprinkles({ ml: "sm" })}>Innovate</SpsButton>
+                      </Button>
+                      <Button kind="icon" icon="printer" />
+                      <Button kind="icon" icon="download-cloud" />
+                      <Button className={sprinkles({ ml: "sm" })}>Innovate</Button>
                     </div>
                   </CardHeader>
                   <p>
@@ -93,8 +93,8 @@
                 </Card>
               );
             }
-          `}}},footers:{label:"Card + Footer",description:()=>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:s.code`
-            import { SpsButton } from "@spscommerce/ds-react";
+          `}}},footers:{label:"Card + Footer",description:()=>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:r.code`
+            import { Button } from "@sps-woodland/buttons";
             import { Card, CardFooter } from "@sps-woodland/cards";
             import { Box } from "@sps-woodland/core";
             function Component() {
@@ -107,17 +107,17 @@
                   </p>
                   <CardFooter>
                     <Box marginLeft="sm">
-                      <SpsButton kind="link">Manage Settings</SpsButton>
+                      <Button kind="link">Manage Settings</Button>
                     </Box>
                     <Box marginX="auto">
                       Whales are not fish, but mammals like a cheetah.
                     </Box>
-                    <SpsButton>Buy This</SpsButton>
+                    <Button>Buy This</Button>
                   </CardFooter>
                 </Card>
               );
             }
-          `}}},tabbed:{label:"Card + Tabs",description:()=>e.createElement(e.Fragment,null,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."),e.createElement("p",null,e.createElement("code",null,"<Item>")," comes from the ",e.createElement("code",null,"@react-stately/collections"),"package, which is a peer dependency of our React components.")),examples:{tabsOnly:{react:s.code`
+          `}}},tabbed:{label:"Card + Tabs",description:()=>e.createElement(e.Fragment,null,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."),e.createElement("p",null,e.createElement("code",null,"<Item>")," comes from the ",e.createElement("code",null,"@react-stately/collections"),"package, which is a peer dependency of our React components.")),examples:{tabsOnly:{react:r.code`
             import { Card } from "@sps-woodland/cards";
             import { Box, Icon } from "@sps-woodland/core";
             import { Tabs } from "@sps-woodland/tabs";
@@ -171,7 +171,7 @@
                 </Card>
               );
             }
-          `},activeTabInput:{react:s.code`
+          `},activeTabInput:{react:r.code`
             import { Card } from "@sps-woodland/cards";
             import { Tabs } from "@sps-woodland/tabs";
             import { Item } from "@react-stately/collections";
@@ -192,8 +192,9 @@
                 </Card>
               );
             }
-          `}}},everything:{label:"Card + Header + Footer + Tabs",description:()=>e.createElement("p",null,"Headers, Footers, and Tabs can be attached to Cards in any combination."),examples:{everything:{react:s.code`
-            import { SpsButton, SpsTag } from "@spscommerce/ds-react";
+          `}}},everything:{label:"Card + Header + Footer + Tabs",description:()=>e.createElement("p",null,"Headers, Footers, and Tabs can be attached to Cards in any combination."),examples:{everything:{react:r.code`
+            import { SpsTag } from "@spscommerce/ds-react";
+            import { Button } from "@sps-woodland/buttons";
             import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
             import { Box, Icon } from "@sps-woodland/core";
             import { Tabs } from "@sps-woodland/tabs";
@@ -208,12 +209,12 @@
                       <Box ml="xs">Panel With Header</Box>
                     </CardTitle>
                     <div>
-                      <SpsButton className={sp({ mr: "sm" })} kind="link">
+                      <Button className={sp({ mr: "sm" })} kind="link">
                         Redefine
-                      </SpsButton>
-                      <SpsButton kind="icon" icon="printer" />
-                      <SpsButton kind="icon" icon="download-cloud" />
-                      <SpsButton className={sp({ ml: "sm" })}>Innovate</SpsButton>
+                      </Button>
+                      <Button kind="icon" icon="printer" />
+                      <Button kind="icon" icon="download-cloud" />
+                      <Button className={sp({ ml: "sm" })}>Innovate</Button>
                     </div>
                   </CardHeader>
                   <Tabs>
@@ -259,18 +260,18 @@
                   </Tabs>
                   <CardFooter>
                     <Box ml="auto">
-                      <SpsButton className={sp({ mr: "sm" })} kind="link">
+                      <Button className={sp({ mr: "sm" })} kind="link">
                         Redefine
-                      </SpsButton>
-                      <SpsButton kind="icon" icon="printer" />
-                      <SpsButton kind="icon" icon="download-cloud" />
-                      <SpsButton className={sp({ ml: "sm" })}>Innovate</SpsButton>
+                      </Button>
+                      <Button kind="icon" icon="printer" />
+                      <Button kind="icon" icon="download-cloud" />
+                      <Button className={sp({ ml: "sm" })}>Innovate</Button>
                     </Box>
                   </CardFooter>
                 </Card>
               );
             }
-          `}}}}},H={components:[I,f],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:s.code`
+          `}}}}},H={components:[I,f],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:r.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -303,7 +304,7 @@
                 </InsightCardSet>
               );
             }
-          `}}},details:{label:"With Details",examples:{details:{react:s.code`
+          `}}},details:{label:"With Details",examples:{details:{react:r.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             import { Box } from "@sps-woodland/core";
             function Component() {
@@ -337,7 +338,7 @@
                 </InsightCardSet>
               );
             }
-          `}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:s.code`
+          `}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:r.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -380,7 +381,7 @@
                 </InsightCardSet>
               );
             }
-          `}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:s.code`
+          `}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:r.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -418,7 +419,7 @@
                 </InsightCardSet>
               );
             }
-          `}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:s.code`
+          `}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:r.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -472,7 +473,7 @@
                 </InsightCardSet>
               );
             }
-          `}}}}},D={components:[x],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:s.code`
+          `}}}}},D={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 (
@@ -515,7 +516,7 @@
                 </Card>
               );
             }
-          `},components:{react:s.code`
+          `},components:{react:r.code`
             import { Card, ScrollableContainer } from "@sps-woodland/cards";
             import { SpsClickableTag } from "@spscommerce/ds-react";
             function Component() {

package/lib/index.es.js

@@ -1,15 +1,15 @@
 import { Metadata as s, CapContent as I, cl as c, selectChildren as E, useChildTestIdAttrBuilder as f, addProps as q, Content as N, CapContentTitle as _, I18nContext as F } from "@sps-woodland/core";
 import * as e from "react";
-import { code as i } from "@spscommerce/utils";
+import { code as n } from "@spscommerce/utils";
 var P = "_1gxcp3j0";
 function g({
   children: t,
   className: a = "",
-  ...n
+  ...i
 }) {
   return /* @__PURE__ */ e.createElement(I, {
     className: c(P, a),
-    ...n
+    ...i
   }, t);
 }
 s.set(g, { name: "CardFooter" });
@@ -17,11 +17,11 @@ var H = "mxozo50";
 function C({
   children: t,
   className: a = "",
-  ...n
+  ...i
 }) {
   return /* @__PURE__ */ e.createElement(I, {
     className: c(H, a),
-    ...n
+    ...i
   }, t);
 }
 s.set(C, { name: "CardHeader" });
@@ -29,7 +29,7 @@ var D = "jyyttb0";
 function x({
   children: t,
   className: a,
-  ...n
+  ...i
 }) {
   const [
     l,
@@ -42,10 +42,10 @@ function x({
       custom: (m) => s.isWoodlandComponent(m) && s.get(m).name === "Tabs"
     },
     { type: g }
-  ]), d = f(n);
+  ]), d = f(i);
   return /* @__PURE__ */ e.createElement("div", {
     className: c(D, a),
-    ...n
+    ...i
   }, l, o ? q(o, { context: "container" }) : /* @__PURE__ */ e.createElement(N, {
     ...d("body")
   }, p), u);
@@ -55,11 +55,11 @@ var z = "_1f11ubh0";
 function y({
   children: t,
   className: a = "",
-  ...n
+  ...i
 }) {
   return /* @__PURE__ */ e.createElement(_, {
     className: c(z, a),
-    ...n
+    ...i
   }, t);
 }
 s.set(y, { name: "CardTitle" });
@@ -73,7 +73,7 @@ const W = Object.freeze({
 function v({
   children: t,
   className: a,
-  horizontal: n = !1,
+  horizontal: i = !1,
   icon: l,
   kind: o = "general",
   title: u,
@@ -84,8 +84,8 @@ function v({
 }) {
   const { t: h } = e.useContext(F), r = f(b), [
     w,
-    S,
-    B
+    B,
+    S
   ] = (d ? h("design-system:insightTile.partnerCount", {
     count: d,
     total: m
@@ -94,7 +94,7 @@ function v({
     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
     ),
@@ -124,7 +124,7 @@ function v({
   }, 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, w), /* @__PURE__ */ e.createElement("div", null, S), /* @__PURE__ */ e.createElement("div", null, B)), /* @__PURE__ */ e.createElement("div", {
+  }, d === m ? /* @__PURE__ */ e.createElement("div", null, h("design-system:insightTile.all")) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", null, w), /* @__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")))));
 }
@@ -154,13 +154,13 @@ var A = "_7b9vus0";
 function k({
   children: t,
   className: a,
-  maxHeight: n,
+  maxHeight: i,
   style: l,
   ...o
 }) {
   return /* @__PURE__ */ e.createElement("div", {
     className: c(A, a),
-    style: { ...l, maxHeight: n },
+    style: { ...l, maxHeight: i },
     ...o
   }, t);
 }
@@ -196,7 +196,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 (
@@ -208,7 +208,7 @@ const R = {
           `
         },
         sections: {
-          react: i`
+          react: n`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -245,7 +245,7 @@ const R = {
           `
         },
         nestedSections: {
-          react: i`
+          react: n`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -276,8 +276,8 @@ 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`
-            import { SpsButton } from "@spscommerce/ds-react";
+          react: n`
+            import { Button } from "@sps-woodland/buttons";
             import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
             import { sprinkles } from "@sps-woodland/tokens";
@@ -290,12 +290,12 @@ const R = {
                       Jabberwocky
                     </CardTitle>
                     <div>
-                      <SpsButton kind="link" className={sprinkles({ mr: "sm" })}>
+                      <Button kind="link" className={sprinkles({ mr: "sm" })}>
                         Redefine
-                      </SpsButton>
-                      <SpsButton kind="icon" icon="printer" />
-                      <SpsButton kind="icon" icon="download-cloud" />
-                      <SpsButton className={sprinkles({ ml: "sm" })}>Innovate</SpsButton>
+                      </Button>
+                      <Button kind="icon" icon="printer" />
+                      <Button kind="icon" icon="download-cloud" />
+                      <Button className={sprinkles({ ml: "sm" })}>Innovate</Button>
                     </div>
                   </CardHeader>
                   <p>
@@ -315,8 +315,8 @@ 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`
-            import { SpsButton } from "@spscommerce/ds-react";
+          react: n`
+            import { Button } from "@sps-woodland/buttons";
             import { Card, CardFooter } from "@sps-woodland/cards";
             import { Box } from "@sps-woodland/core";
             function Component() {
@@ -329,12 +329,12 @@ const R = {
                   </p>
                   <CardFooter>
                     <Box marginLeft="sm">
-                      <SpsButton kind="link">Manage Settings</SpsButton>
+                      <Button kind="link">Manage Settings</Button>
                     </Box>
                     <Box marginX="auto">
                       Whales are not fish, but mammals like a cheetah.
                     </Box>
-                    <SpsButton>Buy This</SpsButton>
+                    <Button>Buy This</Button>
                   </CardFooter>
                 </Card>
               );
@@ -348,7 +348,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";
@@ -405,7 +405,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";
@@ -435,8 +435,9 @@ const R = {
       description: () => /* @__PURE__ */ e.createElement("p", null, "Headers, Footers, and Tabs can be attached to Cards in any combination."),
       examples: {
         everything: {
-          react: i`
-            import { SpsButton, SpsTag } from "@spscommerce/ds-react";
+          react: n`
+            import { SpsTag } from "@spscommerce/ds-react";
+            import { Button } from "@sps-woodland/buttons";
             import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
             import { Box, Icon } from "@sps-woodland/core";
             import { Tabs } from "@sps-woodland/tabs";
@@ -451,12 +452,12 @@ const R = {
                       <Box ml="xs">Panel With Header</Box>
                     </CardTitle>
                     <div>
-                      <SpsButton className={sp({ mr: "sm" })} kind="link">
+                      <Button className={sp({ mr: "sm" })} kind="link">
                         Redefine
-                      </SpsButton>
-                      <SpsButton kind="icon" icon="printer" />
-                      <SpsButton kind="icon" icon="download-cloud" />
-                      <SpsButton className={sp({ ml: "sm" })}>Innovate</SpsButton>
+                      </Button>
+                      <Button kind="icon" icon="printer" />
+                      <Button kind="icon" icon="download-cloud" />
+                      <Button className={sp({ ml: "sm" })}>Innovate</Button>
                     </div>
                   </CardHeader>
                   <Tabs>
@@ -502,12 +503,12 @@ const R = {
                   </Tabs>
                   <CardFooter>
                     <Box ml="auto">
-                      <SpsButton className={sp({ mr: "sm" })} kind="link">
+                      <Button className={sp({ mr: "sm" })} kind="link">
                         Redefine
-                      </SpsButton>
-                      <SpsButton kind="icon" icon="printer" />
-                      <SpsButton kind="icon" icon="download-cloud" />
-                      <SpsButton className={sp({ ml: "sm" })}>Innovate</SpsButton>
+                      </Button>
+                      <Button kind="icon" icon="printer" />
+                      <Button kind="icon" icon="download-cloud" />
+                      <Button className={sp({ ml: "sm" })}>Innovate</Button>
                     </Box>
                   </CardFooter>
                 </Card>
@@ -525,7 +526,7 @@ const R = {
       label: "Basic Insight Cards",
       examples: {
         basic: {
-          react: i`
+          react: n`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -566,7 +567,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() {
@@ -608,7 +609,7 @@ const R = {
       label: "Partner Count",
       examples: {
         partnerCount: {
-          react: i`
+          react: n`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -659,7 +660,7 @@ const R = {
       label: "Using alternate icons",
       examples: {
         alternateIcons: {
-          react: i`
+          react: n`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -705,7 +706,7 @@ const R = {
       label: "Horizontal",
       examples: {
         horizontal: {
-          react: i`
+          react: n`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -772,7 +773,7 @@ const R = {
       description: "Basic scrollable container",
       examples: {
         text: {
-          react: i`
+          react: n`
             import { Card, ScrollableContainer } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -818,7 +819,7 @@ const R = {
           `
         },
         components: {
-          react: i`
+          react: n`
             import { Card, ScrollableContainer } from "@sps-woodland/cards";
             import { SpsClickableTag } from "@spscommerce/ds-react";
             function Component() {

package/lib/insight-card/InsightCard.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps } from "@sps-woodland/core";
 import type { IconName } from "@sps-woodland/tokens";
 import * as React from "react";
-export type InsightCardKind = "general" | "success" | "error" | "warning" | "processing";
+export declare type InsightCardKind = "general" | "success" | "error" | "warning" | "processing";
 export declare const InsightCardIcons: Record<InsightCardKind, IconName>;
 export declare function InsightCard({ children, className, horizontal, icon, kind, title, metric, partnerCount, totalPartners, ...rest }: ComponentProps<{
     horizontal?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/cards",
   "description": "SPS Woodland Design System card, insight card, and scrollable container components",
-  "version": "7.17.9",
+  "version": "8.0.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
@@ -14,8 +14,8 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "7.17.9",
-    "@sps-woodland/tokens": "7.17.9"
+    "@sps-woodland/core": "8.0.0",
+    "@sps-woodland/tokens": "8.0.0"
   },
   "type": "module",
   "main": "./lib/index.cjs.js",
@@ -38,9 +38,9 @@
     "@vanilla-extract/css": "^1.9.3",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "7.17.9",
-    "@sps-woodland/tabs": "7.17.9",
-    "@sps-woodland/tokens": "7.17.9"
+    "@sps-woodland/core": "8.0.0",
+    "@sps-woodland/tabs": "8.0.0",
+    "@sps-woodland/tokens": "8.0.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",