@sps-woodland/cards 8.50.2 → 8.51.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,3 +1,48 @@
1
1
  ## [@sps-woodland/cards](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/cards#readme)
2
2
 
3
- SPS Woodland Design System card, insight card, and scrollable container components
3
+ SPS Woodland Design System card, insight card, and scrollable container components.
4
+
5
+ > **Heads up — this is a wrapper package.** The component source now lives in
6
+ > [`@sps-woodland/core`](../react), split into **three independent families**:
7
+ > `cards`, `insight-card`, and `scrollable-container`. This package re-exports
8
+ > from all three so existing imports keep working, but new code should prefer
9
+ > the mono-package paths.
10
+
11
+ ### Why three families and not one?
12
+
13
+ The legacy `@sps-woodland/cards` wrapper bundled three semantically distinct
14
+ things: layout cards (`Card`, `CardHeader`, `CardFooter`, `CardTitle`), data
15
+ display widgets (`InsightCard`, `InsightCardSet`), and a layout utility
16
+ (`ScrollableContainer`). They share no code. `InsightCard`'s CSS alone is
17
+ roughly 9× the size of the entire Card family combined. Splitting them lets a
18
+ consumer who only needs `Card` ship just Card's styles, not InsightCard's.
19
+
20
+ ### Preferred imports (mono-package)
21
+
22
+ ```ts
23
+ // Cards (layout container family)
24
+ import { Card, CardHeader, CardFooter, CardTitle } from "@sps-woodland/core/cards";
25
+ import "@sps-woodland/core/cards/style.css";
26
+
27
+ // Insight cards (data-display widget family — migrated to @sps-woodland/core)
28
+ import { InsightCard, InsightCardSet } from "@sps-woodland/core/insight-card";
29
+ import "@sps-woodland/core/insight-card/style.css";
30
+
31
+ // Scrollable container (layout utility)
32
+ import { ScrollableContainer } from "@sps-woodland/core/scrollable-container";
33
+ import "@sps-woodland/core/scrollable-container/style.css";
34
+ ```
35
+
36
+ Card pieces also have their own flat subpaths if you only need one:
37
+ `@sps-woodland/core/card`, `/card-header`, `/card-footer`, `/card-title`.
38
+
39
+ ### Legacy imports (still supported)
40
+
41
+ ```ts
42
+ import {
43
+ Card, CardHeader, CardFooter, CardTitle,
44
+ InsightCard, InsightCardSet,
45
+ ScrollableContainer,
46
+ } from "@sps-woodland/cards";
47
+ import "@sps-woodland/cards/style.css"; // concatenated bundle of all three
48
+ ```
package/lib/index.d.ts CHANGED
@@ -1,8 +1,4 @@
1
- export * from "./card/card/Card";
2
- export * from "./card/card-footer/CardFooter";
3
- export * from "./card/card-header/CardHeader";
4
- export * from "./card/card-title/CardTitle";
5
- export * from "./insight-card/InsightCard";
6
- export * from "./insight-card/InsightCardSet";
7
- export * from "./scrollable-container/ScrollableContainer";
1
+ export * from "@sps-woodland/core/cards";
2
+ export * from "@sps-woodland/core/insight-card";
3
+ export * from "@sps-woodland/core/scrollable-container";
8
4
  export * from "./manifest";
package/lib/index.js CHANGED
@@ -1,220 +1,30 @@
1
- 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";
1
+ import { Card as n, CardFooter as o, CardHeader as r, CardTitle as s } from "@sps-woodland/core/cards";
2
+ export * from "@sps-woodland/core/cards";
3
+ import { InsightCard as l, InsightCardSet as d } from "@sps-woodland/core/insight-card";
4
+ export * from "@sps-woodland/core/insight-card";
5
+ import { ScrollableContainer as c } from "@sps-woodland/core/scrollable-container";
6
+ export * from "@sps-woodland/core/scrollable-container";
2
7
  import * as e from "react";
3
- import { useWoodlandLanguage as z } from "@spscommerce/i18n";
4
- import { code as i } from "@spscommerce/utils";
5
- var O = "pkg_sps-woodland_cards__version_8_50_2__hash_1gxcp3j0";
6
- function C({
7
- children: t,
8
- className: s = "",
9
- ...a
10
- }) {
11
- return /* @__PURE__ */ e.createElement(w, { className: _(O, s), ...a }, t);
12
- }
13
- d.set(C, { name: "CardFooter" });
14
- var H = "pkg_sps-woodland_cards__version_8_50_2__hash_mxozo50";
15
- function f({
16
- children: t,
17
- className: s = "",
18
- ...a
19
- }) {
20
- return /* @__PURE__ */ e.createElement(w, { className: _(H, s), ...a }, t);
21
- }
22
- d.set(f, { name: "CardHeader" });
23
- var j = "pkg_sps-woodland_cards__version_8_50_2__hash_jyyttb0";
24
- function k({
25
- children: t,
26
- className: s,
27
- ...a
28
- }) {
29
- const [
30
- n,
31
- [r],
32
- c,
33
- p
34
- ] = P(t, [
35
- { type: f },
36
- {
37
- custom: (l) => d.isWoodlandComponent(l) && d.get(l).name === "Tabs"
38
- },
39
- { type: C }
40
- ]), o = x(a);
41
- return /* @__PURE__ */ e.createElement("div", { className: _(j, s), ...a }, n, r ? D(r, { context: "container" }) : /* @__PURE__ */ e.createElement(F, { ...o("body") }, p), c);
42
- }
43
- d.set(k, { name: "Card" });
44
- var W = "pkg_sps-woodland_cards__version_8_50_2__hash_1f11ubh0";
45
- function y({
46
- children: t,
47
- className: s = "",
48
- ...a
49
- }) {
50
- return /* @__PURE__ */ e.createElement(V, { className: _(W, s), ...a }, t);
51
- }
52
- d.set(y, { name: "CardTitle" });
53
- function A(t, s, a) {
54
- return s in t ? Object.defineProperty(t, s, {
55
- value: a,
56
- enumerable: !0,
57
- configurable: !0,
58
- writable: !0
59
- }) : t[s] = a, t;
60
- }
61
- function v(t, s) {
62
- var a = Object.keys(t);
63
- if (Object.getOwnPropertySymbols) {
64
- var n = Object.getOwnPropertySymbols(t);
65
- s && (n = n.filter(function(r) {
66
- return Object.getOwnPropertyDescriptor(t, r).enumerable;
67
- })), a.push.apply(a, n);
68
- }
69
- return a;
70
- }
71
- function I(t) {
72
- for (var s = 1; s < arguments.length; s++) {
73
- var a = arguments[s] != null ? arguments[s] : {};
74
- s % 2 ? v(Object(a), !0).forEach(function(n) {
75
- A(t, n, a[n]);
76
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) : v(Object(a)).forEach(function(n) {
77
- Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(a, n));
78
- });
79
- }
80
- return t;
81
- }
82
- var R = (t, s, a) => {
83
- for (var n of Object.keys(t)) {
84
- var r;
85
- if (t[n] !== ((r = s[n]) !== null && r !== void 0 ? r : a[n]))
86
- return !1;
87
- }
88
- return !0;
89
- }, u = (t) => (s) => {
90
- var a = t.defaultClassName, n = I(I({}, t.defaultVariants), s);
91
- for (var r in n) {
92
- var c, p = (c = n[r]) !== null && c !== void 0 ? c : t.defaultVariants[r];
93
- if (p != null) {
94
- var o = p;
95
- typeof o == "boolean" && (o = o === !0 ? "true" : "false");
96
- var l = (
97
- // @ts-expect-error
98
- t.variantClassNames[r][o]
99
- );
100
- l && (a += " " + l);
101
- }
102
- }
103
- for (var [g, h] of t.compoundVariants)
104
- R(g, n, t.defaultVariants) && (a += " " + h);
105
- return a;
106
- }, L = "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq0", U = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq1", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq2", error: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq3", success: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq4", warning: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq5", processing: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq6" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq7", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq8" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), M = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq9", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqa", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqb" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), G = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqi", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqj", error: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqk", success: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsql", warning: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqm", processing: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqn" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqo", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqp" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), K = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqq", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqr", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqs" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), $ = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqt", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqu", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqv" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), J = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqw", variantClassNames: { hasDetail: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqx", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqy" } }, defaultVariants: { hasDetail: !1 }, compoundVariants: [] }), X = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqz", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq10", error: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq11", success: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq12", warning: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq13", processing: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq14" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq15", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq16" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), Q = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq17", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq18", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq19" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] });
107
- const Y = Object.freeze({
108
- general: "status-new",
109
- success: "status-ok",
110
- error: "status-error",
111
- warning: "status-warning",
112
- processing: "status-in-process"
113
- });
114
- function T({
115
- children: t,
116
- className: s,
117
- horizontal: a = !1,
118
- icon: n,
119
- kind: r = "general",
120
- title: c,
121
- metric: p,
122
- partnerCount: o,
123
- totalPartners: l,
124
- ...g
125
- }) {
126
- const { t: h } = z(), m = x(g), [
127
- S,
128
- E,
129
- N
130
- ] = (o ? h("insightTile.partnerCount", {
131
- count: o,
132
- total: l,
133
- defaultValue: `${o} |of| ${l}`
134
- }) : "").split("|");
135
- return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
136
- "div",
137
- {
138
- className: _(
139
- U({ kind: r, horizontal: a }),
140
- s
141
- ),
142
- ...g
143
- },
144
- /* @__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(
145
- "div",
146
- {
147
- className: K({ horizontal: a }),
148
- style: { "-webkit-box-orient": "vertical" },
149
- ...m("title")
150
- },
151
- c
152
- ), /* @__PURE__ */ e.createElement("div", { className: J({ hasDetail: !!t }), ...m("detail") }, t))),
153
- 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" })))
154
- ));
155
- }
156
- d.set(T, {
157
- name: "InsightCard",
158
- props: {
159
- horizontal: { type: "boolean", default: "false" },
160
- icon: "IconName",
161
- kind: { type: "InsightCardKind", default: '"general"' },
162
- title: "string",
163
- metric: "number | string",
164
- partnerCount: "number",
165
- totalPartners: "number"
166
- }
167
- });
168
- function q({
169
- children: t,
170
- ...s
171
- }) {
172
- return /* @__PURE__ */ e.createElement("div", { className: L, ...s }, t);
173
- }
174
- d.set(q, { name: "InsightCardSet" });
175
- var Z = "pkg_sps-woodland_cards__version_8_50_2__hash_7b9vus0";
176
- function B({
177
- children: t,
178
- className: s,
179
- maxHeight: a,
180
- style: n,
181
- ...r
182
- }) {
183
- return /* @__PURE__ */ e.createElement(
184
- "div",
185
- {
186
- className: _(Z, s),
187
- style: { ...n, maxHeight: a },
188
- ...r
189
- },
190
- t
191
- );
192
- }
193
- d.set(B, {
194
- name: "ScrollableContainer",
195
- props: {
196
- maxHeight: "string"
197
- }
198
- });
199
- const ee = {
8
+ import { code as t } from "@spscommerce/utils";
9
+ const m = {
200
10
  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."),
201
11
  components: [
202
- k,
203
- C,
204
- f,
205
- y
12
+ n,
13
+ o,
14
+ r,
15
+ s
206
16
  ],
207
17
  examples: {
208
18
  general: {
209
19
  label: "General Usage",
210
- 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)."))
20
+ 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)."))
211
21
  },
212
22
  basic: {
213
23
  label: "Basic card",
214
24
  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."),
215
25
  examples: {
216
26
  basic: {
217
- react: i`
27
+ react: t`
218
28
  import { Card } from "@sps-woodland/cards";
219
29
  function Component() {
220
30
  return (
@@ -226,7 +36,7 @@ const ee = {
226
36
  `
227
37
  },
228
38
  sections: {
229
- react: i`
39
+ react: t`
230
40
  import { Card } from "@sps-woodland/cards";
231
41
  function Component() {
232
42
  return (
@@ -263,7 +73,7 @@ const ee = {
263
73
  `
264
74
  },
265
75
  nestedSections: {
266
- react: i`
76
+ react: t`
267
77
  import { Card } from "@sps-woodland/cards";
268
78
  function Component() {
269
79
  return (
@@ -294,7 +104,7 @@ const ee = {
294
104
  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."),
295
105
  examples: {
296
106
  title: {
297
- react: i`
107
+ react: t`
298
108
  import { Button } from "@sps-woodland/buttons";
299
109
  import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
300
110
  import { Icon } from "@sps-woodland/core";
@@ -333,7 +143,7 @@ const ee = {
333
143
  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."),
334
144
  examples: {
335
145
  basicFooter: {
336
- react: i`
146
+ react: t`
337
147
  import { Button } from "@sps-woodland/buttons";
338
148
  import { Card, CardFooter } from "@sps-woodland/cards";
339
149
  import { Box } from "@sps-woodland/core";
@@ -366,7 +176,7 @@ const ee = {
366
176
  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.")),
367
177
  examples: {
368
178
  tabsOnly: {
369
- react: i`
179
+ react: t`
370
180
  import { Card } from "@sps-woodland/cards";
371
181
  import { Box, Icon } from "@sps-woodland/core";
372
182
  import { Tabs } from "@sps-woodland/tabs";
@@ -423,7 +233,7 @@ const ee = {
423
233
  `
424
234
  },
425
235
  activeTabInput: {
426
- react: i`
236
+ react: t`
427
237
  import { Card } from "@sps-woodland/cards";
428
238
  import { Tabs } from "@sps-woodland/tabs";
429
239
  import { Item } from "@react-stately/collections";
@@ -448,7 +258,7 @@ const ee = {
448
258
  },
449
259
  scrollable: {
450
260
  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."),
451
- react: i`
261
+ react: t`
452
262
  import { SpsTag } from "@spscommerce/ds-react";
453
263
  import { Card } from "@sps-woodland/cards";
454
264
  import { Box, Icon } from "@sps-woodland/core";
@@ -496,7 +306,7 @@ const ee = {
496
306
  description: () => /* @__PURE__ */ e.createElement("p", null, "Headers, Footers, and Tabs can be attached to Cards in any combination."),
497
307
  examples: {
498
308
  everything: {
499
- react: i`
309
+ react: t`
500
310
  import { SpsTag } from "@spscommerce/ds-react";
501
311
  import { Button } from "@sps-woodland/buttons";
502
312
  import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
@@ -580,14 +390,14 @@ const ee = {
580
390
  }
581
391
  }
582
392
  }
583
- }, te = {
584
- components: [T, q],
393
+ }, u = {
394
+ components: [l, d],
585
395
  examples: {
586
396
  basic: {
587
397
  label: "Basic Insight Cards",
588
398
  examples: {
589
399
  basic: {
590
- react: i`
400
+ react: t`
591
401
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
592
402
  function Component() {
593
403
  return (
@@ -628,7 +438,7 @@ const ee = {
628
438
  label: "With Details",
629
439
  examples: {
630
440
  details: {
631
- react: i`
441
+ react: t`
632
442
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
633
443
  import { Box } from "@sps-woodland/core";
634
444
  function Component() {
@@ -670,7 +480,7 @@ const ee = {
670
480
  label: "Partner Count",
671
481
  examples: {
672
482
  partnerCount: {
673
- react: i`
483
+ react: t`
674
484
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
675
485
  function Component() {
676
486
  return (
@@ -721,7 +531,7 @@ const ee = {
721
531
  label: "Using alternate icons",
722
532
  examples: {
723
533
  alternateIcons: {
724
- react: i`
534
+ react: t`
725
535
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
726
536
  function Component() {
727
537
  return (
@@ -767,7 +577,7 @@ const ee = {
767
577
  label: "Horizontal",
768
578
  examples: {
769
579
  horizontal: {
770
- react: i`
580
+ react: t`
771
581
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
772
582
  function Component() {
773
583
  return (
@@ -826,15 +636,15 @@ const ee = {
826
636
  }
827
637
  }
828
638
  }
829
- }, ae = {
830
- components: [B],
639
+ }, p = {
640
+ components: [c],
831
641
  examples: {
832
642
  basic: {
833
643
  label: "Basic",
834
644
  description: "Basic scrollable container",
835
645
  examples: {
836
646
  text: {
837
- react: i`
647
+ react: t`
838
648
  import { Card, ScrollableContainer } from "@sps-woodland/cards";
839
649
  function Component() {
840
650
  return (
@@ -880,7 +690,7 @@ const ee = {
880
690
  `
881
691
  },
882
692
  components: {
883
- react: i`
693
+ react: t`
884
694
  import { Card, ScrollableContainer } from "@sps-woodland/cards";
885
695
  import { SpsClickableTag } from "@spscommerce/ds-react";
886
696
  function Component() {
@@ -906,19 +716,11 @@ const ee = {
906
716
  }
907
717
  }
908
718
  }
909
- }, ie = {
910
- Cards: ee,
911
- "Insight Cards": te,
912
- "Scrollable Container": ae
719
+ }, I = {
720
+ Cards: m,
721
+ "Insight Cards": u,
722
+ "Scrollable Container": p
913
723
  };
914
724
  export {
915
- k as Card,
916
- C as CardFooter,
917
- f as CardHeader,
918
- y as CardTitle,
919
- T as InsightCard,
920
- Y as InsightCardIcons,
921
- q as InsightCardSet,
922
- ie as MANIFEST,
923
- B as ScrollableContainer
725
+ I as MANIFEST
924
726
  };
package/lib/index.umd.cjs CHANGED
@@ -1,4 +1,4 @@
1
- (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_50_2__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_50_2__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_50_2__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_50_2__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_50_2__hash_1l3fxsq0",z=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq1",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq2",error:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq3",success:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq4",warning:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq5",processing:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq6"},horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq7",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq8"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),H=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq9",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqa",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqb"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),j=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqi",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqj",error:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqk",success:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsql",warning:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqm",processing:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqn"},horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqo",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqp"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),M=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqq",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqr",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqs"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),A=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqt",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqu",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqv"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),W=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqw",variantClassNames:{hasDetail:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqx",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqy"}},defaultVariants:{hasDetail:!1},compoundVariants:[]}),R=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqz",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq10",error:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq11",success:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq12",warning:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq13",processing:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq14"},horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq15",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq16"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),L=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq17",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq18",false:"pkg_sps-woodland_cards__version_8_50_2__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_50_2__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`
1
+ (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`
2
2
  import { Card } from "@sps-woodland/cards";
3
3
  function Component() {
4
4
  return (
@@ -7,7 +7,7 @@
7
7
  </Card>
8
8
  );
9
9
  }
10
- `},sections:{react:l.code`
10
+ `},sections:{react:n.code`
11
11
  import { Card } from "@sps-woodland/cards";
12
12
  function Component() {
13
13
  return (
@@ -41,7 +41,7 @@
41
41
  </Card>
42
42
  );
43
43
  }
44
- `},nestedSections:{react:l.code`
44
+ `},nestedSections:{react:n.code`
45
45
  import { Card } from "@sps-woodland/cards";
46
46
  function Component() {
47
47
  return (
@@ -63,7 +63,7 @@
63
63
  </Card>
64
64
  );
65
65
  }
66
- `}}},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`
66
+ `}}},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`
67
67
  import { Button } from "@sps-woodland/buttons";
68
68
  import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
69
69
  import { Icon } from "@sps-woodland/core";
@@ -93,7 +93,7 @@
93
93
  </Card>
94
94
  );
95
95
  }
96
- `}}},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`
96
+ `}}},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`
97
97
  import { Button } from "@sps-woodland/buttons";
98
98
  import { Card, CardFooter } from "@sps-woodland/cards";
99
99
  import { Box } from "@sps-woodland/core";
@@ -117,7 +117,7 @@
117
117
  </Card>
118
118
  );
119
119
  }
120
- `}}},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`
120
+ `}}},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`
121
121
  import { Card } from "@sps-woodland/cards";
122
122
  import { Box, Icon } from "@sps-woodland/core";
123
123
  import { Tabs } from "@sps-woodland/tabs";
@@ -171,7 +171,7 @@
171
171
  </Card>
172
172
  );
173
173
  }
174
- `},activeTabInput:{react:l.code`
174
+ `},activeTabInput:{react:n.code`
175
175
  import { Card } from "@sps-woodland/cards";
176
176
  import { Tabs } from "@sps-woodland/tabs";
177
177
  import { Item } from "@react-stately/collections";
@@ -192,7 +192,7 @@
192
192
  </Card>
193
193
  );
194
194
  }
195
- `},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`
195
+ `},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`
196
196
  import { SpsTag } from "@spscommerce/ds-react";
197
197
  import { Card } from "@sps-woodland/cards";
198
198
  import { Box, Icon } from "@sps-woodland/core";
@@ -231,7 +231,7 @@
231
231
  </Card>
232
232
  );
233
233
  }
234
- `}}},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`
234
+ `}}},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`
235
235
  import { SpsTag } from "@spscommerce/ds-react";
236
236
  import { Button } from "@sps-woodland/buttons";
237
237
  import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
@@ -310,7 +310,7 @@
310
310
  </Card>
311
311
  );
312
312
  }
313
- `}}}}},K={components:[I,w],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:l.code`
313
+ `}}}}},p={components:[r.InsightCard,r.InsightCardSet],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:n.code`
314
314
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
315
315
  function Component() {
316
316
  return (
@@ -343,7 +343,7 @@
343
343
  </InsightCardSet>
344
344
  );
345
345
  }
346
- `}}},details:{label:"With Details",examples:{details:{react:l.code`
346
+ `}}},details:{label:"With Details",examples:{details:{react:n.code`
347
347
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
348
348
  import { Box } from "@sps-woodland/core";
349
349
  function Component() {
@@ -377,7 +377,7 @@
377
377
  </InsightCardSet>
378
378
  );
379
379
  }
380
- `}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:l.code`
380
+ `}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:n.code`
381
381
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
382
382
  function Component() {
383
383
  return (
@@ -420,7 +420,7 @@
420
420
  </InsightCardSet>
421
421
  );
422
422
  }
423
- `}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:l.code`
423
+ `}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:n.code`
424
424
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
425
425
  function Component() {
426
426
  return (
@@ -458,7 +458,7 @@
458
458
  </InsightCardSet>
459
459
  );
460
460
  }
461
- `}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:l.code`
461
+ `}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:n.code`
462
462
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
463
463
  function Component() {
464
464
  return (
@@ -512,7 +512,7 @@
512
512
  </InsightCardSet>
513
513
  );
514
514
  }
515
- `}}}}},$={components:[x],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:l.code`
515
+ `}}}}},h={components:[l.ScrollableContainer],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:n.code`
516
516
  import { Card, ScrollableContainer } from "@sps-woodland/cards";
517
517
  function Component() {
518
518
  return (
@@ -555,7 +555,7 @@
555
555
  </Card>
556
556
  );
557
557
  }
558
- `},components:{react:l.code`
558
+ `},components:{react:n.code`
559
559
  import { Card, ScrollableContainer } from "@sps-woodland/cards";
560
560
  import { SpsClickableTag } from "@spscommerce/ds-react";
561
561
  function Component() {
@@ -576,4 +576,4 @@
576
576
  </Card>
577
577
  );
578
578
  }
579
- `}}}}},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"})}));
579
+ `}}}}},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"})}));
package/lib/style.css CHANGED
@@ -1 +1,3 @@
1
- .pkg_sps-woodland_cards__version_8_50_2__hash_1gxcp3j0{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_cards__version_8_50_2__hash_mxozo50{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_cards__version_8_50_2__hash_mxozo50 svg{margin-bottom:0}.pkg_sps-woodland_cards__version_8_50_2__hash_jyyttb0{background-clip:border-box;background-color:#fff;border-color:#d2d4d4;border-radius:.25rem;border-style:solid;border-width:.0625rem;display:flex;flex-direction:column;min-width:0;word-wrap:break-word}.pkg_sps-woodland_cards__version_8_50_2__hash_1f11ubh0{font-weight:600}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq0{display:flex;flex-wrap:wrap;margin:-.5rem}.pkg_sps-woodland_cards__version_8_50_2__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_50_2__hash_1l3fxsq2{border-color:#007db8;color:#007db8}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq2:hover{background:#007db8}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq3{border-color:#de002e;color:#de002e}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq3:hover{background:#de002e}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq4{border-color:#0b8940;color:#0b8940}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq4:hover{background:#0b8940}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq5{border-color:#e7760b;color:#e7760b}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq5:hover{background:#e7760b}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq6{border-color:#91467f;color:#91467f}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq6:hover{background:#91467f}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq7{display:flex;flex:1 0 calc(50% - 20px);height:5.125rem;max-width:calc(50% - 20px)}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq9{display:block;min-width:0}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqa{align-items:center;display:flex;flex:1;text-align:left}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqc{display:block;font-size:2rem;line-height:2rem}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqd{color:#007db8}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqe{color:#de002e}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqf{color:#0b8940}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqg{color:#e7760b}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqh{color:#91467f}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqi{font-size:3rem;font-weight:600;line-height:3rem;max-width:100%;word-wrap:break-word}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqj{color:#007db8}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqk{color:#de002e}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsql{color:#0b8940}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqm{color:#e7760b}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqn{color:#91467f}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqo{margin-left:.5rem;order:1}.pkg_sps-woodland_cards__version_8_50_2__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_50_2__hash_1l3fxsqr{min-height:1rem;margin-bottom:0}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqu{flex:1;margin-left:.5rem;min-width:0}.pkg_sps-woodland_cards__version_8_50_2__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_50_2__hash_1l3fxsqx{display:block}.pkg_sps-woodland_cards__version_8_50_2__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_50_2__hash_1l3fxsq10{background:#007db8}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq11{background:#de002e}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq12{background:#0b8940}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq13{background:#e7760b}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq14{background:#91467f}.pkg_sps-woodland_cards__version_8_50_2__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_50_2__hash_1l3fxsq18{display:none!important}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq9>svg{font-size:2rem;line-height:2rem}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqz>*{display:inline-block}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqz>*:not(:last-child){padding-right:.125rem}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq1:hover{cursor:pointer}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq1:hover>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq1:hover>.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq9>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq1:hover>.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq9>.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqt>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq1:hover>.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq9>.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqt>.pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqw>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_50_2__hash_7b9vus0{overflow:scroll;background-attachment:local,local,scroll,scroll;background-color:#fff;background-image:linear-gradient(0deg,#fff,#fff0),linear-gradient(180deg,#fff,#fff0),linear-gradient(0deg,#00000026,#fff0),linear-gradient(180deg,#00000026,#fff0);background-position:100% 100%,0 0,100% 100%,0 0;background-repeat:no-repeat;background-size:100% 3.125rem,100% 3.125rem,100% .625rem,100% .625rem;display:block;overflow-x:hidden;overflow-y:auto}.pkg_sps-woodland_cards__version_8_50_2__hash_7b9vus0 .sps-clickable-tag{background-color:#acd4e84d}
1
+ .pkg_sps-woodland_core__version_8_51_1__hash_jj9br00{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_core__version_8_51_1__hash_171xmyc0{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_core__version_8_51_1__hash_171xmyc0 svg{margin-bottom:0}.pkg_sps-woodland_core__version_8_51_1__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_1__hash_1c9yfku0{font-weight:600}
2
+ .pkg_sps-woodland_core__version_8_51_1__hash_z81y4l0{display:flex;flex-wrap:wrap;margin:-.5rem}.pkg_sps-woodland_core__version_8_51_1__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_1__hash_z81y4l2{border-color:#007db8;color:#007db8}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l2:hover{background:#007db8}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l3{border-color:#de002e;color:#de002e}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l3:hover{background:#de002e}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l4{border-color:#0b8940;color:#0b8940}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l4:hover{background:#0b8940}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l5{border-color:#e7760b;color:#e7760b}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l5:hover{background:#e7760b}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l6{border-color:#91467f;color:#91467f}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l6:hover{background:#91467f}.pkg_sps-woodland_core__version_8_51_1__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_1__hash_z81y4l9{display:block;min-width:0}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4la{align-items:center;display:flex;flex:1;text-align:left}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lc{display:block;font-size:2rem;line-height:2rem}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4ld{color:#007db8}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4le{color:#de002e}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lf{color:#0b8940}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lg{color:#e7760b}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lh{color:#91467f}.pkg_sps-woodland_core__version_8_51_1__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_1__hash_z81y4lj{color:#007db8}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lk{color:#de002e}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4ll{color:#0b8940}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lm{color:#e7760b}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4ln{color:#91467f}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lo{margin-left:.5rem;order:1}.pkg_sps-woodland_core__version_8_51_1__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_1__hash_z81y4lr{min-height:1rem;margin-bottom:0}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lu{flex:1;margin-left:.5rem;min-width:0}.pkg_sps-woodland_core__version_8_51_1__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_1__hash_z81y4lx{display:block}.pkg_sps-woodland_core__version_8_51_1__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_1__hash_z81y4l10{background:#007db8}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l11{background:#de002e}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l12{background:#0b8940}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l13{background:#e7760b}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l14{background:#91467f}.pkg_sps-woodland_core__version_8_51_1__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_1__hash_z81y4l18{display:none!important}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l9>svg{font-size:2rem;line-height:2rem}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lz>*{display:inline-block}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lz>*:not(:last-child){padding-right:.125rem}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1:hover{cursor:pointer}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1:hover>*{color:#fff!important}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1:hover>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l9>*{color:#fff!important}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1:hover>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l9>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lt>*{color:#fff!important}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1:hover>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l9>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lt>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lw>*{color:#fff!important}
3
+ .pkg_sps-woodland_core__version_8_51_1__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_1__hash_xsjxqv0 .sps-clickable-tag{background-color:#acd4e84d}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sps-woodland/cards",
3
3
  "description": "SPS Woodland Design System card, insight card, and scrollable container components",
4
- "version": "8.50.2",
4
+ "version": "8.51.1",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
@@ -17,6 +17,7 @@
17
17
  "import": "./lib/index.js",
18
18
  "default": "./lib/index.js"
19
19
  },
20
+ "./style.css": "./lib/style.css",
20
21
  "./lib/style.css": {
21
22
  "import": "./lib/style.css",
22
23
  "require": "./lib/style.css"
@@ -26,31 +27,23 @@
26
27
  "access": "public"
27
28
  },
28
29
  "peerDependencies": {
29
- "@react-stately/collections": "^3.0.0",
30
30
  "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
31
31
  "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
32
32
  "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
33
- "@sps-woodland/core": "8.50.2",
34
- "@sps-woodland/tokens": "8.50.2",
35
- "@spscommerce/i18n": "8.50.2"
33
+ "@sps-woodland/core": "8.51.1"
36
34
  },
37
35
  "devDependencies": {
38
36
  "@react-stately/collections": "3.12.10",
39
37
  "@spscommerce/utils": "9.0.3",
40
- "@vanilla-extract/css": "1.17.4",
41
- "@vanilla-extract/css-utils": "0.1.3",
42
- "@vanilla-extract/recipes": "0.2.5",
43
38
  "react": "16.14.0",
44
39
  "react-dom": "16.14.0",
45
- "@sps-woodland/core": "8.50.2",
46
- "@sps-woodland/tabs": "8.50.2",
47
- "@sps-woodland/tokens": "8.50.2",
48
- "@spscommerce/i18n": "8.50.2"
40
+ "@sps-woodland/core": "8.51.1"
49
41
  },
50
42
  "scripts": {
51
- "build": "pnpm run build:js && pnpm run build:types",
43
+ "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
52
44
  "build:js": "vite build",
53
45
  "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
46
+ "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'",
54
47
  "watch": "vite build --watch",
55
48
  "clean": "git clean -fdX",
56
49
  "pub": "node ../../../scripts/publish-package.mjs"
package/vite.config.mjs CHANGED
@@ -1,31 +1,25 @@
1
1
  import path from "node:path";
2
- import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
3
2
  import { defineConfig } from "vite";
4
- import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
5
3
  import pkg from "./package.json";
6
4
 
7
- const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
5
+ // Cards is now a wrapper package that re-exports from @sps-woodland/core.
6
+ // It aggregates three mono-package families: cards, insight-card, scrollable-container.
7
+ // No vanilla-extract needed - CSS is provided by the mono-package.
8
+
9
+ const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
8
10
 
9
11
  export default defineConfig({
10
- plugins: [
11
- vanillaExtractPlugin(
12
- getVanillaExtractPluginProps({
13
- packageName: pkg.name,
14
- packageVersion,
15
- })
16
- ),
17
- ],
18
12
  build: {
19
13
  lib: {
20
14
  entry: path.resolve(__dirname, "src/index.ts"),
21
15
  name: "Cards",
22
16
  fileName: "index",
23
- cssFileName: "style",
24
17
  },
25
18
  outDir: path.resolve(__dirname, "./lib"),
26
19
  emptyOutDir: false,
27
20
  rollupOptions: {
28
- external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
21
+ // External must match subpath imports like @sps-woodland/core/card
22
+ external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
29
23
  },
30
24
  },
31
25
  });
@@ -1 +0,0 @@
1
- export declare const card: string;
@@ -1,3 +0,0 @@
1
- import type { ComponentProps } from "@sps-woodland/core";
2
- import * as React from "react";
3
- export declare function Card({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;
@@ -1 +0,0 @@
1
- export declare const cardFooter: string;
@@ -1,3 +0,0 @@
1
- import type { ComponentProps } from "@sps-woodland/core";
2
- import * as React from "react";
3
- export declare function CardFooter({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;
@@ -1 +0,0 @@
1
- export declare const cardHeader: string;
@@ -1,3 +0,0 @@
1
- import type { ComponentProps } from "@sps-woodland/core";
2
- import * as React from "react";
3
- export declare function CardHeader({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;
@@ -1 +0,0 @@
1
- export declare const cardTitle: string;
@@ -1,3 +0,0 @@
1
- import type { ComponentProps } from "@sps-woodland/core";
2
- import * as React from "react";
3
- export declare function CardTitle({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;
@@ -1,19 +0,0 @@
1
- import { Tokens } from "@sps-woodland/tokens";
2
- import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
3
- export type InsightCardKind = keyof (typeof Tokens.component)["insight-card"]["kind"];
4
- interface InsightCardVariantDefinitions extends VariantDefinitions {
5
- kind: RecipeVariant<InsightCardKind>;
6
- horizontal: BooleanRecipeVariant;
7
- hasDetail: BooleanRecipeVariant;
8
- }
9
- export declare const insightCardWrapper: string;
10
- export declare const insightCard: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal" | "kind">>;
11
- export declare const insightCardBody: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
12
- export declare const insightCardIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "kind">>;
13
- export declare const insightCardMetricCount: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal" | "kind">>;
14
- export declare const insightCardTitle: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
15
- export declare const insightCardDescription: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
16
- export declare const insightCardDetail: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "hasDetail">>;
17
- export declare const insightCardPartnerCount: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal" | "kind">>;
18
- export declare const insightCardPartnersText: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
19
- export {};
@@ -1,14 +0,0 @@
1
- import type { ComponentProps } from "@sps-woodland/core";
2
- import type { IconName } from "@sps-woodland/tokens";
3
- import * as React from "react";
4
- export type InsightCardKind = "general" | "success" | "error" | "warning" | "processing";
5
- export declare const InsightCardIcons: Record<InsightCardKind, IconName>;
6
- export declare function InsightCard({ children, className, horizontal, icon, kind, title, metric, partnerCount, totalPartners, ...rest }: ComponentProps<{
7
- horizontal?: boolean;
8
- icon?: IconName;
9
- kind?: InsightCardKind;
10
- title?: string;
11
- metric?: number | string;
12
- partnerCount?: number;
13
- totalPartners?: number;
14
- }, HTMLDivElement>): React.ReactElement;
@@ -1,2 +0,0 @@
1
- import type { ComponentProps } from "@sps-woodland/core";
2
- export declare function InsightCardSet({ children, ...rest }: ComponentProps<unknown, HTMLDivElement>): JSX.Element;
@@ -1 +0,0 @@
1
- export declare const scrollableContainer: string;
@@ -1,5 +0,0 @@
1
- import type { ComponentProps } from "@sps-woodland/core";
2
- import * as React from "react";
3
- export declare function ScrollableContainer({ children, className, maxHeight, style, ...rest }: ComponentProps<{
4
- maxHeight?: string;
5
- }, HTMLDivElement>): React.ReactElement;