@sps-woodland/cards 8.51.2 → 8.52.0

package/README.md

@@ -1,48 +1,3 @@
 ## [@sps-woodland/cards](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/cards#readme)
 
-SPS Woodland Design System card, insight card, and scrollable container components.
-
-> **Heads up — this is a wrapper package.** The component source now lives in
-> [`@sps-woodland/core`](../react), split into **three independent families**:
-> `cards`, `insight-card`, and `scrollable-container`. This package re-exports
-> from all three so existing imports keep working, but new code should prefer
-> the mono-package paths.
-
-### Why three families and not one?
-
-The legacy `@sps-woodland/cards` wrapper bundled three semantically distinct
-things: layout cards (`Card`, `CardHeader`, `CardFooter`, `CardTitle`), data
-display widgets (`InsightCard`, `InsightCardSet`), and a layout utility
-(`ScrollableContainer`). They share no code. `InsightCard`'s CSS alone is
-roughly 9× the size of the entire Card family combined. Splitting them lets a
-consumer who only needs `Card` ship just Card's styles, not InsightCard's.
-
-### Preferred imports (mono-package)
-
-```ts
-// Cards (layout container family)
-import { Card, CardHeader, CardFooter, CardTitle } from "@sps-woodland/core/cards";
-import "@sps-woodland/core/cards/style.css";
-
-// Insight cards (data-display widget family — migrated to @sps-woodland/core)
-import { InsightCard, InsightCardSet } from "@sps-woodland/core/insight-card";
-import "@sps-woodland/core/insight-card/style.css";
-
-// Scrollable container (layout utility)
-import { ScrollableContainer } from "@sps-woodland/core/scrollable-container";
-import "@sps-woodland/core/scrollable-container/style.css";
-```
-
-Card pieces also have their own flat subpaths if you only need one:
-`@sps-woodland/core/card`, `/card-header`, `/card-footer`, `/card-title`.
-
-### Legacy imports (still supported)
-
-```ts
-import {
-  Card, CardHeader, CardFooter, CardTitle,
-  InsightCard, InsightCardSet,
-  ScrollableContainer,
-} from "@sps-woodland/cards";
-import "@sps-woodland/cards/style.css"; // concatenated bundle of all three
-```
+SPS Woodland Design System card, insight card, and scrollable container components

package/lib/card/card/Card.css.d.ts

@@ -0,0 +1 @@
+export declare const card: string;

package/lib/card/card/Card.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+export declare function Card({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/card/card-footer/CardFooter.css.d.ts

@@ -0,0 +1 @@
+export declare const cardFooter: string;

package/lib/card/card-footer/CardFooter.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+export declare function CardFooter({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/card/card-header/CardHeader.css.d.ts

@@ -0,0 +1 @@
+export declare const cardHeader: string;

package/lib/card/card-header/CardHeader.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+export declare function CardHeader({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/card/card-title/CardTitle.css.d.ts

@@ -0,0 +1 @@
+export declare const cardTitle: string;

package/lib/card/card-title/CardTitle.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+export declare function CardTitle({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/index.d.ts

@@ -1,4 +1,8 @@
-export * from "@sps-woodland/core/cards";
-export * from "@sps-woodland/core/insight-card";
-export * from "@sps-woodland/core/scrollable-container";
+export * from "./card/card/Card";
+export * from "./card/card-footer/CardFooter";
+export * from "./card/card-header/CardHeader";
+export * from "./card/card-title/CardTitle";
+export * from "./insight-card/InsightCard";
+export * from "./insight-card/InsightCardSet";
+export * from "./scrollable-container/ScrollableContainer";
 export * from "./manifest";

package/lib/index.js

@@ -1,30 +1,220 @@
-import { Card as n, CardFooter as o, CardHeader as r, CardTitle as s } from "@sps-woodland/core/cards";
-export * from "@sps-woodland/core/cards";
-import { InsightCard as l, InsightCardSet as d } from "@sps-woodland/core/insight-card";
-export * from "@sps-woodland/core/insight-card";
-import { ScrollableContainer as c } from "@sps-woodland/core/scrollable-container";
-export * from "@sps-woodland/core/scrollable-container";
+import { Metadata as d, CapContent as w, cl as _, selectChildren as P, useChildTestIdAttrBuilder as x, addProps as D, Content as F, CapContentTitle as V, Icon as b } from "@sps-woodland/core";
 import * as e from "react";
-import { code as t } from "@spscommerce/utils";
-const m = {
+import { useWoodlandLanguage as z } from "@spscommerce/i18n";
+import { code as i } from "@spscommerce/utils";
+var O = "pkg_sps-woodland_cards__version_8_52_0__hash_1gxcp3j0";
+function C({
+  children: t,
+  className: s = "",
+  ...a
+}) {
+  return /* @__PURE__ */ e.createElement(w, { className: _(O, s), ...a }, t);
+}
+d.set(C, { name: "CardFooter" });
+var H = "pkg_sps-woodland_cards__version_8_52_0__hash_mxozo50";
+function f({
+  children: t,
+  className: s = "",
+  ...a
+}) {
+  return /* @__PURE__ */ e.createElement(w, { className: _(H, s), ...a }, t);
+}
+d.set(f, { name: "CardHeader" });
+var j = "pkg_sps-woodland_cards__version_8_52_0__hash_jyyttb0";
+function k({
+  children: t,
+  className: s,
+  ...a
+}) {
+  const [
+    n,
+    [r],
+    c,
+    p
+  ] = P(t, [
+    { type: f },
+    {
+      custom: (l) => d.isWoodlandComponent(l) && d.get(l).name === "Tabs"
+    },
+    { type: C }
+  ]), o = x(a);
+  return /* @__PURE__ */ e.createElement("div", { className: _(j, s), ...a }, n, r ? D(r, { context: "container" }) : /* @__PURE__ */ e.createElement(F, { ...o("body") }, p), c);
+}
+d.set(k, { name: "Card" });
+var W = "pkg_sps-woodland_cards__version_8_52_0__hash_1f11ubh0";
+function y({
+  children: t,
+  className: s = "",
+  ...a
+}) {
+  return /* @__PURE__ */ e.createElement(V, { className: _(W, s), ...a }, t);
+}
+d.set(y, { name: "CardTitle" });
+function A(t, s, a) {
+  return s in t ? Object.defineProperty(t, s, {
+    value: a,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : t[s] = a, t;
+}
+function v(t, s) {
+  var a = Object.keys(t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(t);
+    s && (n = n.filter(function(r) {
+      return Object.getOwnPropertyDescriptor(t, r).enumerable;
+    })), a.push.apply(a, n);
+  }
+  return a;
+}
+function I(t) {
+  for (var s = 1; s < arguments.length; s++) {
+    var a = arguments[s] != null ? arguments[s] : {};
+    s % 2 ? v(Object(a), !0).forEach(function(n) {
+      A(t, n, a[n]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) : v(Object(a)).forEach(function(n) {
+      Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(a, n));
+    });
+  }
+  return t;
+}
+var R = (t, s, a) => {
+  for (var n of Object.keys(t)) {
+    var r;
+    if (t[n] !== ((r = s[n]) !== null && r !== void 0 ? r : a[n]))
+      return !1;
+  }
+  return !0;
+}, u = (t) => (s) => {
+  var a = t.defaultClassName, n = I(I({}, t.defaultVariants), s);
+  for (var r in n) {
+    var c, p = (c = n[r]) !== null && c !== void 0 ? c : t.defaultVariants[r];
+    if (p != null) {
+      var o = p;
+      typeof o == "boolean" && (o = o === !0 ? "true" : "false");
+      var l = (
+        // @ts-expect-error
+        t.variantClassNames[r][o]
+      );
+      l && (a += " " + l);
+    }
+  }
+  for (var [g, h] of t.compoundVariants)
+    R(g, n, t.defaultVariants) && (a += " " + h);
+  return a;
+}, L = "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq0", U = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq1", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq2", error: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq3", success: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq4", warning: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq5", processing: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq6" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq7", false: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq8" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), M = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq9", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqa", false: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqb" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), G = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqi", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqj", error: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqk", success: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsql", warning: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqm", processing: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqn" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqo", false: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqp" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), K = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqq", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqr", false: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqs" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), $ = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqt", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqu", false: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqv" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), J = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqw", variantClassNames: { hasDetail: { true: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqx", false: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqy" } }, defaultVariants: { hasDetail: !1 }, compoundVariants: [] }), X = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqz", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq10", error: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq11", success: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq12", warning: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq13", processing: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq14" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq15", false: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq16" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), Q = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq17", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq18", false: "pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq19" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] });
+const Y = Object.freeze({
+  general: "status-new",
+  success: "status-ok",
+  error: "status-error",
+  warning: "status-warning",
+  processing: "status-in-process"
+});
+function T({
+  children: t,
+  className: s,
+  horizontal: a = !1,
+  icon: n,
+  kind: r = "general",
+  title: c,
+  metric: p,
+  partnerCount: o,
+  totalPartners: l,
+  ...g
+}) {
+  const { t: h } = z(), m = x(g), [
+    S,
+    E,
+    N
+  ] = (o ? h("insightTile.partnerCount", {
+    count: o,
+    total: l,
+    defaultValue: `${o} |of| ${l}`
+  }) : "").split("|");
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: _(
+        U({ kind: r, horizontal: a }),
+        s
+      ),
+      ...g
+    },
+    /* @__PURE__ */ e.createElement("div", { className: M({ horizontal: a }), ...m("body") }, n ? /* @__PURE__ */ e.createElement(b, { icon: `${n}`, ...m("icon") }) : /* @__PURE__ */ e.createElement(b, { icon: `${Y[r]}`, ...m("icon") }), p && /* @__PURE__ */ e.createElement("div", { className: G({ kind: r, horizontal: a }), ...m("metric") }, p), c && /* @__PURE__ */ e.createElement("div", { className: $({ horizontal: a }), ...m("description") }, /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: K({ horizontal: a }),
+        style: { "-webkit-box-orient": "vertical" },
+        ...m("title")
+      },
+      c
+    ), /* @__PURE__ */ e.createElement("div", { className: J({ hasDetail: !!t }), ...m("detail") }, t))),
+    o && /* @__PURE__ */ e.createElement("div", { className: X({ kind: r, horizontal: a }), ...m("partner-count") }, o === l ? /* @__PURE__ */ e.createElement("div", null, h("insightTile.all", { defaultValue: "ALL" })) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", null, S), /* @__PURE__ */ e.createElement("div", null, E), /* @__PURE__ */ e.createElement("div", null, N)), /* @__PURE__ */ e.createElement("div", { className: Q({ horizontal: a }) }, h("insightTile.partners", { defaultValue: "PARTNERS" })))
+  ));
+}
+d.set(T, {
+  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 q({
+  children: t,
+  ...s
+}) {
+  return /* @__PURE__ */ e.createElement("div", { className: L, ...s }, t);
+}
+d.set(q, { name: "InsightCardSet" });
+var Z = "pkg_sps-woodland_cards__version_8_52_0__hash_7b9vus0";
+function B({
+  children: t,
+  className: s,
+  maxHeight: a,
+  style: n,
+  ...r
+}) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: _(Z, s),
+      style: { ...n, maxHeight: a },
+      ...r
+    },
+    t
+  );
+}
+d.set(B, {
+  name: "ScrollableContainer",
+  props: {
+    maxHeight: "string"
+  }
+});
+const ee = {
   description: () => /* @__PURE__ */ 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: [
-    n,
-    o,
-    r,
-    s
+    k,
+    C,
+    f,
+    y
   ],
   examples: {
     general: {
       label: "General Usage",
-      description: ({ Link: a, NavigateTo: i }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Sizing and Layout"), /* @__PURE__ */ 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 ", /* @__PURE__ */ e.createElement(a, { to: "/style-and-layout/grid" }, "Woodland Grid"), " and", " ", /* @__PURE__ */ e.createElement(a, { to: "/style-and-layout/page-types" }, "Page Layouts"), " sections for more guidance on appropriate usage."), /* @__PURE__ */ 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."), /* @__PURE__ */ e.createElement("h5", null, "Text Content"), /* @__PURE__ */ e.createElement("p", null, "The only text content that can exist outside of a Card is the", " ", /* @__PURE__ */ e.createElement(i, { to: "page-title" }, "Page Title"), " component."), /* @__PURE__ */ e.createElement("p", null, "All other content should exist inside of a Card and should adhere to the Woodland Design System ", /* @__PURE__ */ e.createElement(a, { to: "/style-and-layout/typography" }, "Typography"), " rules."), /* @__PURE__ */ e.createElement("h5", null, "Nesting"), /* @__PURE__ */ 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)."))
+      description: ({ Link: t, NavigateTo: s }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Sizing and Layout"), /* @__PURE__ */ 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 ", /* @__PURE__ */ e.createElement(t, { to: "/style-and-layout/grid" }, "Woodland Grid"), " and", " ", /* @__PURE__ */ e.createElement(t, { to: "/style-and-layout/page-types" }, "Page Layouts"), " sections for more guidance on appropriate usage."), /* @__PURE__ */ 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."), /* @__PURE__ */ e.createElement("h5", null, "Text Content"), /* @__PURE__ */ e.createElement("p", null, "The only text content that can exist outside of a Card is the", " ", /* @__PURE__ */ e.createElement(s, { to: "page-title" }, "Page Title"), " component."), /* @__PURE__ */ e.createElement("p", null, "All other content should exist inside of a Card and should adhere to the Woodland Design System ", /* @__PURE__ */ e.createElement(t, { to: "/style-and-layout/typography" }, "Typography"), " rules."), /* @__PURE__ */ e.createElement("h5", null, "Nesting"), /* @__PURE__ */ 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: () => /* @__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: t`
+          react: i`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -36,7 +226,7 @@ const m = {
           `
         },
         sections: {
-          react: t`
+          react: i`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -73,7 +263,7 @@ const m = {
           `
         },
         nestedSections: {
-          react: t`
+          react: i`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -104,7 +294,7 @@ const m = {
       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: t`
+          react: i`
             import { Button } from "@sps-woodland/buttons";
             import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -143,7 +333,7 @@ const m = {
       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: t`
+          react: i`
             import { Button } from "@sps-woodland/buttons";
             import { Card, CardFooter } from "@sps-woodland/cards";
             import { Box } from "@sps-woodland/core";
@@ -176,7 +366,7 @@ const m = {
       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: t`
+          react: i`
             import { Card } from "@sps-woodland/cards";
             import { Box, Icon } from "@sps-woodland/core";
             import { Tabs } from "@sps-woodland/tabs";
@@ -233,7 +423,7 @@ const m = {
           `
         },
         activeTabInput: {
-          react: t`
+          react: i`
             import { Card } from "@sps-woodland/cards";
             import { Tabs } from "@sps-woodland/tabs";
             import { Item } from "@react-stately/collections";
@@ -258,7 +448,7 @@ const m = {
         },
         scrollable: {
           description: () => /* @__PURE__ */ e.createElement("p", null, "When the list of tabs is wider than its container, the tabs become horizontally scrollable and chevron buttons appear on each side to scroll the tabs into view. The buttons are only shown when there is more content to scroll toward in that direction. Tab titles can also include icons or tags alongside the label."),
-          react: t`
+          react: i`
             import { SpsTag } from "@spscommerce/ds-react";
             import { Card } from "@sps-woodland/cards";
             import { Box, Icon } from "@sps-woodland/core";
@@ -306,7 +496,7 @@ const m = {
       description: () => /* @__PURE__ */ e.createElement("p", null, "Headers, Footers, and Tabs can be attached to Cards in any combination."),
       examples: {
         everything: {
-          react: t`
+          react: i`
             import { SpsTag } from "@spscommerce/ds-react";
             import { Button } from "@sps-woodland/buttons";
             import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
@@ -390,14 +580,14 @@ const m = {
       }
     }
   }
-}, u = {
-  components: [l, d],
+}, te = {
+  components: [T, q],
   examples: {
     basic: {
       label: "Basic Insight Cards",
       examples: {
         basic: {
-          react: t`
+          react: i`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -438,7 +628,7 @@ const m = {
       label: "With Details",
       examples: {
         details: {
-          react: t`
+          react: i`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             import { Box } from "@sps-woodland/core";
             function Component() {
@@ -480,7 +670,7 @@ const m = {
       label: "Partner Count",
       examples: {
         partnerCount: {
-          react: t`
+          react: i`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -531,7 +721,7 @@ const m = {
       label: "Using alternate icons",
       examples: {
         alternateIcons: {
-          react: t`
+          react: i`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -577,7 +767,7 @@ const m = {
       label: "Horizontal",
       examples: {
         horizontal: {
-          react: t`
+          react: i`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -636,15 +826,15 @@ const m = {
       }
     }
   }
-}, p = {
-  components: [c],
+}, ae = {
+  components: [B],
   examples: {
     basic: {
       label: "Basic",
       description: "Basic scrollable container",
       examples: {
         text: {
-          react: t`
+          react: i`
             import { Card, ScrollableContainer } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -690,7 +880,7 @@ const m = {
           `
         },
         components: {
-          react: t`
+          react: i`
             import { Card, ScrollableContainer } from "@sps-woodland/cards";
             import { SpsClickableTag } from "@spscommerce/ds-react";
             function Component() {
@@ -716,11 +906,19 @@ const m = {
       }
     }
   }
-}, I = {
-  Cards: m,
-  "Insight Cards": u,
-  "Scrollable Container": p
+}, ie = {
+  Cards: ee,
+  "Insight Cards": te,
+  "Scrollable Container": ae
 };
 export {
-  I as MANIFEST
+  k as Card,
+  C as CardFooter,
+  f as CardHeader,
+  y as CardTitle,
+  T as InsightCard,
+  Y as InsightCardIcons,
+  q as InsightCardSet,
+  ie as MANIFEST,
+  B as ScrollableContainer
 };

package/lib/index.umd.cjs

@@ -1,4 +1,4 @@
-(function(a,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("@sps-woodland/core/cards"),require("@sps-woodland/core/insight-card"),require("@sps-woodland/core/scrollable-container"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/cards","@sps-woodland/core/insight-card","@sps-woodland/core/scrollable-container","react","@spscommerce/utils"],i):(a=typeof globalThis<"u"?globalThis:a||self,i(a.Cards={},a.cards,a.insightCard,a.scrollableContainer,a.React,a.utils))})(this,(function(a,i,r,l,c,n){"use strict";function m(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const d=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(o,s,d.get?d:{enumerable:!0,get:()=>t[s]})}}return o.default=t,Object.freeze(o)}const e=m(c),u={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:[i.Card,i.CardFooter,i.CardHeader,i.CardTitle],examples:{general:{label:"General Usage",description:({Link:t,NavigateTo:o})=>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(o,{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:n.code`
+(function(o,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("@sps-woodland/core"),require("react"),require("@spscommerce/i18n"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core","react","@spscommerce/i18n","@spscommerce/utils"],s):(o=typeof globalThis<"u"?globalThis:o||self,s(o.Cards={},o.core,o.React,o.i18n,o.utils))})(this,(function(o,s,q,B,l){"use strict";function S(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(n,a,r.get?r:{enumerable:!0,get:()=>t[a]})}}return n.default=t,Object.freeze(n)}const e=S(q);var N="pkg_sps-woodland_cards__version_8_52_0__hash_1gxcp3j0";function g({children:t,className:n="",...a}){return e.createElement(s.CapContent,{className:s.cl(N,n),...a},t)}s.Metadata.set(g,{name:"CardFooter"});var E="pkg_sps-woodland_cards__version_8_52_0__hash_mxozo50";function f({children:t,className:n="",...a}){return e.createElement(s.CapContent,{className:s.cl(E,n),...a},t)}s.Metadata.set(f,{name:"CardHeader"});var P="pkg_sps-woodland_cards__version_8_52_0__hash_jyyttb0";function b({children:t,className:n,...a}){const[r,[i],u,_]=s.selectChildren(t,[{type:f},{custom:c=>s.Metadata.isWoodlandComponent(c)&&s.Metadata.get(c).name==="Tabs"},{type:g}]),d=s.useChildTestIdAttrBuilder(a);return e.createElement("div",{className:s.cl(P,n),...a},r,i?s.addProps(i,{context:"container"}):e.createElement(s.Content,{...d("body")},_),u)}s.Metadata.set(b,{name:"Card"});var D="pkg_sps-woodland_cards__version_8_52_0__hash_1f11ubh0";function v({children:t,className:n="",...a}){return e.createElement(s.CapContentTitle,{className:s.cl(D,n),...a},t)}s.Metadata.set(v,{name:"CardTitle"});function F(t,n,a){return n in t?Object.defineProperty(t,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[n]=a,t}function k(t,n){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);n&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),a.push.apply(a,r)}return a}function y(t){for(var n=1;n<arguments.length;n++){var a=arguments[n]!=null?arguments[n]:{};n%2?k(Object(a),!0).forEach(function(r){F(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):k(Object(a)).forEach(function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(a,r))})}return t}var O=(t,n,a)=>{for(var r of Object.keys(t)){var i;if(t[r]!==((i=n[r])!==null&&i!==void 0?i:a[r]))return!1}return!0},m=t=>n=>{var a=t.defaultClassName,r=y(y({},t.defaultVariants),n);for(var i in r){var u,_=(u=r[i])!==null&&u!==void 0?u:t.defaultVariants[i];if(_!=null){var d=_;typeof d=="boolean"&&(d=d===!0?"true":"false");var c=t.variantClassNames[i][d];c&&(a+=" "+c)}}for(var[C,h]of t.compoundVariants)O(C,r,t.defaultVariants)&&(a+=" "+h);return a},V="pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq0",z=m({defaultClassName:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq1",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq2",error:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq3",success:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq4",warning:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq5",processing:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq6"},horizontal:{true:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq7",false:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq8"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),H=m({defaultClassName:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq9",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqa",false:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqb"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),j=m({defaultClassName:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqi",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqj",error:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqk",success:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsql",warning:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqm",processing:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqn"},horizontal:{true:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqo",false:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqp"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),M=m({defaultClassName:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqq",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqr",false:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqs"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),A=m({defaultClassName:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqt",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqu",false:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqv"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),W=m({defaultClassName:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqw",variantClassNames:{hasDetail:{true:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqx",false:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqy"}},defaultVariants:{hasDetail:!1},compoundVariants:[]}),R=m({defaultClassName:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqz",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq10",error:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq11",success:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq12",warning:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq13",processing:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq14"},horizontal:{true:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq15",false:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq16"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),L=m({defaultClassName:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq17",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq18",false:"pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq19"}},defaultVariants:{horizontal:!1},compoundVariants:[]});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:a=!1,icon:r,kind:i="general",title:u,metric:_,partnerCount:d,totalPartners:c,...C}){const{t:h}=B.useWoodlandLanguage(),p=s.useChildTestIdAttrBuilder(C),[X,Q,Y]=(d?h("insightTile.partnerCount",{count:d,total:c,defaultValue:`${d} |of| ${c}`}):"").split("|");return e.createElement(e.Fragment,null,e.createElement("div",{className:s.cl(z({kind:i,horizontal:a}),n),...C},e.createElement("div",{className:H({horizontal:a}),...p("body")},r?e.createElement(s.Icon,{icon:`${r}`,...p("icon")}):e.createElement(s.Icon,{icon:`${T[i]}`,...p("icon")}),_&&e.createElement("div",{className:j({kind:i,horizontal:a}),...p("metric")},_),u&&e.createElement("div",{className:A({horizontal:a}),...p("description")},e.createElement("div",{className:M({horizontal:a}),style:{"-webkit-box-orient":"vertical"},...p("title")},u),e.createElement("div",{className:W({hasDetail:!!t}),...p("detail")},t))),d&&e.createElement("div",{className:R({kind:i,horizontal:a}),...p("partner-count")},d===c?e.createElement("div",null,h("insightTile.all",{defaultValue:"ALL"})):e.createElement(e.Fragment,null,e.createElement("div",null,X),e.createElement("div",null,Q),e.createElement("div",null,Y)),e.createElement("div",{className:L({horizontal:a})},h("insightTile.partners",{defaultValue:"PARTNERS"})))))}s.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 w({children:t,...n}){return e.createElement("div",{className:V,...n},t)}s.Metadata.set(w,{name:"InsightCardSet"});var U="pkg_sps-woodland_cards__version_8_52_0__hash_7b9vus0";function x({children:t,className:n,maxHeight:a,style:r,...i}){return e.createElement("div",{className:s.cl(U,n),style:{...r,maxHeight:a},...i},t)}s.Metadata.set(x,{name:"ScrollableContainer",props:{maxHeight:"string"}});const G={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:[b,g,f,v],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:l.code`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -7,7 +7,7 @@
                 </Card>
               );
             }
-          `},sections:{react:n.code`
+          `},sections:{react:l.code`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -41,7 +41,7 @@
                 </Card>
               );
             }
-          `},nestedSections:{react:n.code`
+          `},nestedSections:{react:l.code`
             import { Card } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -63,7 +63,7 @@
                 </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:n.code`
+          `}}},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:l.code`
             import { Button } from "@sps-woodland/buttons";
             import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
             import { Icon } from "@sps-woodland/core";
@@ -93,7 +93,7 @@
                 </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:n.code`
+          `}}},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:l.code`
             import { Button } from "@sps-woodland/buttons";
             import { Card, CardFooter } from "@sps-woodland/cards";
             import { Box } from "@sps-woodland/core";
@@ -117,7 +117,7 @@
                 </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:n.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:l.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:n.code`
+          `},activeTabInput:{react:l.code`
             import { Card } from "@sps-woodland/cards";
             import { Tabs } from "@sps-woodland/tabs";
             import { Item } from "@react-stately/collections";
@@ -192,7 +192,7 @@
                 </Card>
               );
             }
-          `},scrollable:{description:()=>e.createElement("p",null,"When the list of tabs is wider than its container, the tabs become horizontally scrollable and chevron buttons appear on each side to scroll the tabs into view. The buttons are only shown when there is more content to scroll toward in that direction. Tab titles can also include icons or tags alongside the label."),react:n.code`
+          `},scrollable:{description:()=>e.createElement("p",null,"When the list of tabs is wider than its container, the tabs become horizontally scrollable and chevron buttons appear on each side to scroll the tabs into view. The buttons are only shown when there is more content to scroll toward in that direction. Tab titles can also include icons or tags alongside the label."),react:l.code`
             import { SpsTag } from "@spscommerce/ds-react";
             import { Card } from "@sps-woodland/cards";
             import { Box, Icon } from "@sps-woodland/core";
@@ -231,7 +231,7 @@
                 </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:n.code`
+          `}}},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:l.code`
             import { SpsTag } from "@spscommerce/ds-react";
             import { Button } from "@sps-woodland/buttons";
             import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
@@ -310,7 +310,7 @@
                 </Card>
               );
             }
-          `}}}}},p={components:[r.InsightCard,r.InsightCardSet],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:n.code`
+          `}}}}},K={components:[I,w],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:l.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -343,7 +343,7 @@
                 </InsightCardSet>
               );
             }
-          `}}},details:{label:"With Details",examples:{details:{react:n.code`
+          `}}},details:{label:"With Details",examples:{details:{react:l.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             import { Box } from "@sps-woodland/core";
             function Component() {
@@ -377,7 +377,7 @@
                 </InsightCardSet>
               );
             }
-          `}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:n.code`
+          `}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:l.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -420,7 +420,7 @@
                 </InsightCardSet>
               );
             }
-          `}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:n.code`
+          `}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:l.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -458,7 +458,7 @@
                 </InsightCardSet>
               );
             }
-          `}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:n.code`
+          `}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:l.code`
             import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -512,7 +512,7 @@
                 </InsightCardSet>
               );
             }
-          `}}}}},h={components:[l.ScrollableContainer],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:n.code`
+          `}}}}},$={components:[x],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:l.code`
             import { Card, ScrollableContainer } from "@sps-woodland/cards";
             function Component() {
               return (
@@ -555,7 +555,7 @@
                 </Card>
               );
             }
-          `},components:{react:n.code`
+          `},components:{react:l.code`
             import { Card, ScrollableContainer } from "@sps-woodland/cards";
             import { SpsClickableTag } from "@spscommerce/ds-react";
             function Component() {
@@ -576,4 +576,4 @@
                 </Card>
               );
             }
-          `}}}}},g={Cards:u,"Insight Cards":p,"Scrollable Container":h};a.MANIFEST=g,Object.keys(i).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(a,t)&&Object.defineProperty(a,t,{enumerable:!0,get:()=>i[t]})}),Object.keys(r).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(a,t)&&Object.defineProperty(a,t,{enumerable:!0,get:()=>r[t]})}),Object.keys(l).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(a,t)&&Object.defineProperty(a,t,{enumerable:!0,get:()=>l[t]})}),Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
+          `}}}}},J={Cards:G,"Insight Cards":K,"Scrollable Container":$};o.Card=b,o.CardFooter=g,o.CardHeader=f,o.CardTitle=v,o.InsightCard=I,o.InsightCardIcons=T,o.InsightCardSet=w,o.MANIFEST=J,o.ScrollableContainer=x,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));

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

@@ -0,0 +1,19 @@
+import { Tokens } from "@sps-woodland/tokens";
+import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
+export type InsightCardKind = keyof (typeof Tokens.component)["insight-card"]["kind"];
+interface InsightCardVariantDefinitions extends VariantDefinitions {
+    kind: RecipeVariant<InsightCardKind>;
+    horizontal: BooleanRecipeVariant;
+    hasDetail: BooleanRecipeVariant;
+}
+export declare const insightCardWrapper: string;
+export declare const insightCard: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal" | "kind">>;
+export declare const insightCardBody: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
+export declare const insightCardIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "kind">>;
+export declare const insightCardMetricCount: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal" | "kind">>;
+export declare const insightCardTitle: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
+export declare const insightCardDescription: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
+export declare const insightCardDetail: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "hasDetail">>;
+export declare const insightCardPartnerCount: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal" | "kind">>;
+export declare const insightCardPartnersText: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
+export {};

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

@@ -0,0 +1,14 @@
+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 const InsightCardIcons: Record<InsightCardKind, IconName>;
+export declare function InsightCard({ children, className, horizontal, icon, kind, title, metric, partnerCount, totalPartners, ...rest }: ComponentProps<{
+    horizontal?: boolean;
+    icon?: IconName;
+    kind?: InsightCardKind;
+    title?: string;
+    metric?: number | string;
+    partnerCount?: number;
+    totalPartners?: number;
+}, HTMLDivElement>): React.ReactElement;

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

@@ -0,0 +1,2 @@
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function InsightCardSet({ children, ...rest }: ComponentProps<unknown, HTMLDivElement>): JSX.Element;

package/lib/scrollable-container/ScrollableContainer.css.d.ts

@@ -0,0 +1 @@
+export declare const scrollableContainer: string;

package/lib/scrollable-container/ScrollableContainer.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+export declare function ScrollableContainer({ children, className, maxHeight, style, ...rest }: ComponentProps<{
+    maxHeight?: string;
+}, HTMLDivElement>): React.ReactElement;

package/lib/style.css

@@ -1,3 +1 @@
-.pkg_sps-woodland_core__version_8_51_2__hash_jj9br00{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_core__version_8_51_2__hash_171xmyc0{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_core__version_8_51_2__hash_171xmyc0 svg{margin-bottom:0}.pkg_sps-woodland_core__version_8_51_2__hash_1yomitg0{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_core__version_8_51_2__hash_1c9yfku0{font-weight:600}
-.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l0{display:flex;flex-wrap:wrap;margin:-.5rem}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l1{background:#fff;border-width:.0625rem;border-style:solid;border-radius:.25rem;display:block;flex:1 0 calc(20% - 20px);margin:.5rem;min-width:0;padding:.9375rem 1.25rem;text-align:center}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l2{border-color:#007db8;color:#007db8}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l2:hover{background:#007db8}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l3{border-color:#de002e;color:#de002e}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l3:hover{background:#de002e}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l4{border-color:#0b8940;color:#0b8940}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l4:hover{background:#0b8940}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l5{border-color:#e7760b;color:#e7760b}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l5:hover{background:#e7760b}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l6{border-color:#91467f;color:#91467f}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l6:hover{background:#91467f}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l7{display:flex;flex:1 0 calc(50% - 20px);height:5.125rem;max-width:calc(50% - 20px)}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l9{display:block;min-width:0}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4la{align-items:center;display:flex;flex:1;text-align:left}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lc{display:block;font-size:2rem;line-height:2rem}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4ld{color:#007db8}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4le{color:#de002e}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lf{color:#0b8940}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lg{color:#e7760b}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lh{color:#91467f}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4li{font-size:3rem;font-weight:600;line-height:3rem;max-width:100%;word-wrap:break-word}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lj{color:#007db8}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lk{color:#de002e}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4ll{color:#0b8940}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lm{color:#e7760b}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4ln{color:#91467f}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lo{margin-left:.5rem;order:1}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lq{-webkit-box-orient:vertical;-webkit-box-pack:center;align-items:center;color:#1f282c;display:-webkit-box;font-weight:600;min-height:2.125rem;font-size:1rem;line-height:1rem;padding-bottom:.125rem;max-width:100%;word-wrap:break-word}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lr{min-height:1rem;margin-bottom:0}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lu{flex:1;margin-left:.5rem;min-width:0}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lw{color:#4b5356;display:none;height:12px;font-size:.75rem;line-height:.75rem;margin-top:.25rem;text-transform:uppercase;white-space:nowrap}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lx{display:block}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lz{color:#fff;font-weight:600;font-size:.75rem;line-height:1.125rem;margin:.9375rem -1.25rem -.9375rem;padding:.625rem 1.25rem}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l10{background:#007db8}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l11{background:#de002e}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l12{background:#0b8940}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l13{background:#e7760b}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l14{background:#91467f}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l15{display:flex;flex-direction:column;justify-content:center;line-height:.875rem;margin:-.9375rem -1.25rem -.9375rem 1.25rem;padding:1.25rem .625rem;width:3.75rem}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l18{display:none!important}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l9>svg{font-size:2rem;line-height:2rem}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lz>*{display:inline-block}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lz>*:not(:last-child){padding-right:.125rem}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l1:hover{cursor:pointer}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l1:hover>*{color:#fff!important}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l1:hover>.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l9>*{color:#fff!important}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l1:hover>.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l9>.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lt>*{color:#fff!important}.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l1:hover>.pkg_sps-woodland_core__version_8_51_2__hash_z81y4l9>.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lt>.pkg_sps-woodland_core__version_8_51_2__hash_z81y4lw>*{color:#fff!important}
-.pkg_sps-woodland_core__version_8_51_2__hash_xsjxqv0{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_core__version_8_51_2__hash_xsjxqv0 .sps-clickable-tag{background-color:#acd4e84d}
+.pkg_sps-woodland_cards__version_8_52_0__hash_1gxcp3j0{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_cards__version_8_52_0__hash_mxozo50{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_cards__version_8_52_0__hash_mxozo50 svg{margin-bottom:0}.pkg_sps-woodland_cards__version_8_52_0__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_52_0__hash_1f11ubh0{font-weight:600}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq0{display:flex;flex-wrap:wrap;margin:-.5rem}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq1{background:#fff;border-width:.0625rem;border-style:solid;border-radius:.25rem;display:block;flex:1 0 calc(20% - 20px);margin:.5rem;min-width:0;padding:.9375rem 1.25rem;text-align:center}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq2{border-color:#007db8;color:#007db8}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq2:hover{background:#007db8}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq3{border-color:#de002e;color:#de002e}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq3:hover{background:#de002e}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq4{border-color:#0b8940;color:#0b8940}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq4:hover{background:#0b8940}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq5{border-color:#e7760b;color:#e7760b}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq5:hover{background:#e7760b}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq6{border-color:#91467f;color:#91467f}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq6:hover{background:#91467f}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq7{display:flex;flex:1 0 calc(50% - 20px);height:5.125rem;max-width:calc(50% - 20px)}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq9{display:block;min-width:0}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqa{align-items:center;display:flex;flex:1;text-align:left}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqc{display:block;font-size:2rem;line-height:2rem}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqd{color:#007db8}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqe{color:#de002e}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqf{color:#0b8940}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqg{color:#e7760b}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqh{color:#91467f}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqi{font-size:3rem;font-weight:600;line-height:3rem;max-width:100%;word-wrap:break-word}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqj{color:#007db8}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqk{color:#de002e}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsql{color:#0b8940}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqm{color:#e7760b}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqn{color:#91467f}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqo{margin-left:.5rem;order:1}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqq{-webkit-box-orient:vertical;-webkit-box-pack:center;align-items:center;color:#1f282c;display:-webkit-box;font-weight:600;min-height:2.125rem;font-size:1rem;line-height:1rem;padding-bottom:.125rem;max-width:100%;word-wrap:break-word}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqr{min-height:1rem;margin-bottom:0}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqu{flex:1;margin-left:.5rem;min-width:0}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqw{color:#4b5356;display:none;height:12px;font-size:.75rem;line-height:.75rem;margin-top:.25rem;text-transform:uppercase;white-space:nowrap}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqx{display:block}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqz{color:#fff;font-weight:600;font-size:.75rem;line-height:1.125rem;margin:.9375rem -1.25rem -.9375rem;padding:.625rem 1.25rem}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq10{background:#007db8}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq11{background:#de002e}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq12{background:#0b8940}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq13{background:#e7760b}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq14{background:#91467f}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq15{display:flex;flex-direction:column;justify-content:center;line-height:.875rem;margin:-.9375rem -1.25rem -.9375rem 1.25rem;padding:1.25rem .625rem;width:3.75rem}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq18{display:none!important}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq9>svg{font-size:2rem;line-height:2rem}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqz>*{display:inline-block}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqz>*:not(:last-child){padding-right:.125rem}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq1:hover{cursor:pointer}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq1:hover>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq1:hover>.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq9>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq1:hover>.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq9>.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqt>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq1:hover>.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsq9>.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqt>.pkg_sps-woodland_cards__version_8_52_0__hash_1l3fxsqw>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_52_0__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_52_0__hash_7b9vus0 .sps-clickable-tag{background-color:#acd4e84d}

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.51.2",
+  "version": "8.52.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
@@ -17,7 +17,6 @@
       "import": "./lib/index.js",
       "default": "./lib/index.js"
     },
-    "./style.css": "./lib/style.css",
     "./lib/style.css": {
       "import": "./lib/style.css",
       "require": "./lib/style.css"
@@ -27,23 +26,31 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@react-stately/collections": "^3.0.0",
     "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@sps-woodland/core": "8.51.2"
+    "@sps-woodland/core": "8.52.0",
+    "@sps-woodland/tokens": "8.52.0",
+    "@spscommerce/i18n": "8.52.0"
   },
   "devDependencies": {
     "@react-stately/collections": "3.12.10",
     "@spscommerce/utils": "9.0.3",
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/css-utils": "0.1.3",
+    "@vanilla-extract/recipes": "0.2.5",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@sps-woodland/core": "8.51.2"
+    "@sps-woodland/core": "8.52.0",
+    "@sps-woodland/tabs": "8.52.0",
+    "@sps-woodland/tokens": "8.52.0",
+    "@spscommerce/i18n": "8.52.0"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
+    "build": "pnpm run build:js && pnpm run build:types",
     "build:js": "vite build",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
-    "build:css": "cat ../core/lib/cards/style.css ../core/lib/insight-card/style.css ../core/lib/scrollable-container/style.css > lib/style.css 2>/dev/null || echo 'one or more cards-family style.css files not found, skipping'",
     "watch": "vite build --watch",
     "clean": "git clean -fdX",
     "pub": "node ../../../scripts/publish-package.mjs"

package/vite.config.mjs

@@ -1,25 +1,31 @@
 import path from "node: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";
 
-// Cards is now a wrapper package that re-exports from @sps-woodland/core.
-// It aggregates three mono-package families: cards, insight-card, scrollable-container.
-// No vanilla-extract needed - CSS is provided by the mono-package.
-
-const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
 
 export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
       name: "Cards",
       fileName: "index",
+      cssFileName: "style",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,
     rollupOptions: {
-      // External must match subpath imports like @sps-woodland/core/card
-      external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
     },
   },
 });