@sps-woodland/feedback-block 8.51.2 → 8.52.0

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.
Files changed (9) hide show
  1. package/README.md +1 -22
  2. package/lib/FeedbackBlock.css.d.ts +11 -0
  3. package/lib/FeedbackBlock.d.ts +9 -0
  4. package/lib/index.d.ts +1 -1
  5. package/lib/index.js +106 -20
  6. package/lib/index.umd.cjs +11 -11
  7. package/lib/style.css +1 -1
  8. package/package.json +8 -6
  9. package/vite.config.mjs +13 -6
package/README.md CHANGED
@@ -1,24 +1,3 @@
1
1
  ## [@sps-woodland/feedback-block](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/feedback-block#readme)
2
2
 
3
- SPS Woodland Design System feedback block component.
4
-
5
- > **Heads up — this is a wrapper package.** The component source now lives in
6
- > [`@sps-woodland/core`](../core). This package re-exports from core so
7
- > existing imports keep working, but new code should prefer the
8
- > subpath imports.
9
-
10
- ### Preferred imports (mono-package)
11
-
12
- ```ts
13
- import { FeedbackBlock } from "@sps-woodland/core/feedback-block";
14
- import "@sps-woodland/core/feedback-block/style.css";
15
- ```
16
-
17
- Single-component family — no flat subpath.
18
-
19
- ### Legacy imports (still supported)
20
-
21
- ```ts
22
- import { FeedbackBlock } from "@sps-woodland/feedback-block";
23
- import "@sps-woodland/feedback-block/style.css";
24
- ```
3
+ SPS Woodland Design System feedback block component
package/lib/FeedbackBlock.css.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { Tokens } from "@sps-woodland/tokens";
2
+ import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
3
+ export type FeedbackBlockKind = keyof (typeof Tokens.component)["feedback-block"]["kind"];
4
+ interface FeedbackBlockVariantDefinitions extends VariantDefinitions {
5
+ kind: RecipeVariant<FeedbackBlockKind>;
6
+ micro: BooleanRecipeVariant;
7
+ }
8
+ export declare const feedbackBlock: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<FeedbackBlockVariantDefinitions>;
9
+ export declare const feedbackBlockIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<FeedbackBlockVariantDefinitions>;
10
+ export declare const feedbackBlockText: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<FeedbackBlockVariantDefinitions, "micro">>;
11
+ export {};
package/lib/FeedbackBlock.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ import type { ComponentProps } from "@sps-woodland/core";
3
+ import type { IconName } from "@sps-woodland/tokens";
4
+ import type { FeedbackBlockKind } from "./FeedbackBlock.css";
5
+ export declare const FeedbackBlockIcons: Record<FeedbackBlockKind, IconName>;
6
+ export declare function FeedbackBlock({ children, className, kind, micro, ...rest }: ComponentProps<{
7
+ kind?: FeedbackBlockKind;
8
+ micro?: boolean;
9
+ }, HTMLDivElement>): React.ReactElement;
package/lib/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export * from "@sps-woodland/core/feedback-block";
1
+ export * from "./FeedbackBlock";
2
2
  export * from "./manifest";
package/lib/index.js CHANGED
@@ -1,10 +1,94 @@
1
- import { FeedbackBlock as c } from "@sps-woodland/core/feedback-block";
2
- export * from "@sps-woodland/core/feedback-block";
3
- import * as e from "react";
4
- import { code as o } from "@spscommerce/utils";
5
- const a = {
6
- components: [c],
7
- description: ({ NavigateTo: r }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Message Blocks show static informational messages on a page. They should not dynamically appear or disappear. For feedback that responds to a user action, Use a", " ", /* @__PURE__ */ e.createElement(r, { to: "growler" }, "Growler"), " instead."), /* @__PURE__ */ e.createElement("h5", null, "Variants"), /* @__PURE__ */ e.createElement("p", null, "Variants are generally tied to a specific color and an accompanying icon."), /* @__PURE__ */ e.createElement(c, { kind: "error", micro: !0 }, "Error"), /* @__PURE__ */ e.createElement(c, { kind: "info", micro: !0 }, "Information"), /* @__PURE__ */ e.createElement(c, { kind: "tip", micro: !0 }, "Tip"), /* @__PURE__ */ e.createElement(c, { kind: "success", micro: !0 }, "Success"), /* @__PURE__ */ e.createElement(c, { kind: "warning", micro: !0 }, "Warning")),
1
+ import * as c from "react";
2
+ import { Metadata as u, cl as h, Icon as g } from "@sps-woodland/core";
3
+ import { code as t } from "@spscommerce/utils";
4
+ function w(e, r, o) {
5
+ return r in e ? Object.defineProperty(e, r, {
6
+ value: o,
7
+ enumerable: !0,
8
+ configurable: !0,
9
+ writable: !0
10
+ }) : e[r] = o, e;
11
+ }
12
+ function p(e, r) {
13
+ var o = Object.keys(e);
14
+ if (Object.getOwnPropertySymbols) {
15
+ var a = Object.getOwnPropertySymbols(e);
16
+ r && (a = a.filter(function(n) {
17
+ return Object.getOwnPropertyDescriptor(e, n).enumerable;
18
+ })), o.push.apply(o, a);
19
+ }
20
+ return o;
21
+ }
22
+ function f(e) {
23
+ for (var r = 1; r < arguments.length; r++) {
24
+ var o = arguments[r] != null ? arguments[r] : {};
25
+ r % 2 ? p(Object(o), !0).forEach(function(a) {
26
+ w(e, a, o[a]);
27
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : p(Object(o)).forEach(function(a) {
28
+ Object.defineProperty(e, a, Object.getOwnPropertyDescriptor(o, a));
29
+ });
30
+ }
31
+ return e;
32
+ }
33
+ var v = (e, r, o) => {
34
+ for (var a of Object.keys(e)) {
35
+ var n;
36
+ if (e[a] !== ((n = r[a]) !== null && n !== void 0 ? n : o[a]))
37
+ return !1;
38
+ }
39
+ return !0;
40
+ }, l = (e) => (r) => {
41
+ var o = e.defaultClassName, a = f(f({}, e.defaultVariants), r);
42
+ for (var n in a) {
43
+ var d, k = (d = a[n]) !== null && d !== void 0 ? d : e.defaultVariants[n];
44
+ if (k != null) {
45
+ var i = k;
46
+ typeof i == "boolean" && (i = i === !0 ? "true" : "false");
47
+ var _ = (
48
+ // @ts-expect-error
49
+ e.variantClassNames[n][i]
50
+ );
51
+ _ && (o += " " + _);
52
+ }
53
+ }
54
+ for (var [b, m] of e.compoundVariants)
55
+ v(b, a, e.defaultVariants) && (o += " " + m);
56
+ return o;
57
+ }, B = l({ defaultClassName: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l560", variantClassNames: { kind: { tip: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l561", success: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l562", warning: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l563", info: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l564", error: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l565" }, micro: { true: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l566", false: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l567" } }, defaultVariants: { kind: "tip", micro: !1 }, compoundVariants: [] }), F = l({ defaultClassName: "", variantClassNames: { kind: { tip: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l568", success: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l569", warning: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56a", info: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56b", error: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56c" }, micro: { true: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56d", false: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56e" } }, defaultVariants: { kind: "tip", micro: !1 }, compoundVariants: [[{ kind: "tip", micro: !0 }, "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56f"]] }), y = l({ defaultClassName: "", variantClassNames: { micro: { true: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56g", false: "pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56h" } }, defaultVariants: { micro: !1 }, compoundVariants: [] });
58
+ const C = Object.freeze({
59
+ tip: "lightbulb",
60
+ success: "checkmark",
61
+ warning: "exclamation-triangle",
62
+ error: "exclamation-circle",
63
+ info: "info-circle"
64
+ });
65
+ function s({
66
+ children: e,
67
+ className: r,
68
+ kind: o = "tip",
69
+ micro: a,
70
+ ...n
71
+ }) {
72
+ return /* @__PURE__ */ c.createElement("div", { className: h(B({ kind: o, micro: a }), r), ...n }, /* @__PURE__ */ c.createElement(
73
+ g,
74
+ {
75
+ size: a ? "sm" : "lg",
76
+ className: F({ kind: o, micro: a }),
77
+ icon: C[o],
78
+ "aria-hidden": "true"
79
+ }
80
+ ), /* @__PURE__ */ c.createElement("span", { className: y({ micro: a }) }, e));
81
+ }
82
+ u.set(s, {
83
+ name: "FeedbackBlock",
84
+ props: {
85
+ kind: { type: "FeedbackBlockKind", default: "tip" },
86
+ micro: { type: "boolean", default: "false" }
87
+ }
88
+ });
89
+ const E = {
90
+ components: [s],
91
+ description: ({ NavigateTo: e }) => /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement("p", null, "Message Blocks show static informational messages on a page. They should not dynamically appear or disappear. For feedback that responds to a user action, Use a", " ", /* @__PURE__ */ c.createElement(e, { to: "growler" }, "Growler"), " instead."), /* @__PURE__ */ c.createElement("h5", null, "Variants"), /* @__PURE__ */ c.createElement("p", null, "Variants are generally tied to a specific color and an accompanying icon."), /* @__PURE__ */ c.createElement(s, { kind: "error", micro: !0 }, "Error"), /* @__PURE__ */ c.createElement(s, { kind: "info", micro: !0 }, "Information"), /* @__PURE__ */ c.createElement(s, { kind: "tip", micro: !0 }, "Tip"), /* @__PURE__ */ c.createElement(s, { kind: "success", micro: !0 }, "Success"), /* @__PURE__ */ c.createElement(s, { kind: "warning", micro: !0 }, "Warning")),
8
92
  examples: {
9
93
  standard: {
10
94
  label: "Standard Size",
@@ -12,7 +96,7 @@ const a = {
12
96
  examples: {
13
97
  error: {
14
98
  description: "Error",
15
- react: o`
99
+ react: t`
16
100
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
17
101
 
18
102
  function Component() {
@@ -26,7 +110,7 @@ const a = {
26
110
  },
27
111
  info: {
28
112
  description: "Information",
29
- react: o`
113
+ react: t`
30
114
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
31
115
 
32
116
  function Component() {
@@ -40,7 +124,7 @@ const a = {
40
124
  },
41
125
  proTip: {
42
126
  description: "Pro Tip",
43
- react: o`
127
+ react: t`
44
128
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
45
129
 
46
130
  function Component() {
@@ -54,7 +138,7 @@ const a = {
54
138
  },
55
139
  success: {
56
140
  description: "Success",
57
- react: o`
141
+ react: t`
58
142
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
59
143
 
60
144
  function Component() {
@@ -68,7 +152,7 @@ const a = {
68
152
  },
69
153
  warning: {
70
154
  description: "Warning",
71
- react: o`
155
+ react: t`
72
156
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
73
157
 
74
158
  function Component() {
@@ -88,7 +172,7 @@ const a = {
88
172
  examples: {
89
173
  error: {
90
174
  description: "Error",
91
- react: o`
175
+ react: t`
92
176
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
93
177
 
94
178
  function Component() {
@@ -102,7 +186,7 @@ const a = {
102
186
  },
103
187
  info: {
104
188
  description: "Information",
105
- react: o`
189
+ react: t`
106
190
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
107
191
 
108
192
  function Component() {
@@ -116,7 +200,7 @@ const a = {
116
200
  },
117
201
  proTip: {
118
202
  description: "Pro Tip",
119
- react: o`
203
+ react: t`
120
204
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
121
205
 
122
206
  function Component() {
@@ -130,7 +214,7 @@ const a = {
130
214
  },
131
215
  success: {
132
216
  description: "Success",
133
- react: o`
217
+ react: t`
134
218
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
135
219
 
136
220
  function Component() {
@@ -144,7 +228,7 @@ const a = {
144
228
  },
145
229
  warning: {
146
230
  description: "Warning",
147
- react: o`
231
+ react: t`
148
232
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
149
233
 
150
234
  function Component() {
@@ -159,9 +243,11 @@ const a = {
159
243
  }
160
244
  }
161
245
  }
162
- }, i = {
163
- "Message Blocks": a
246
+ }, S = {
247
+ "Message Blocks": E
164
248
  };
165
249
  export {
166
- i as MANIFEST
250
+ s as FeedbackBlock,
251
+ C as FeedbackBlockIcons,
252
+ S as MANIFEST
167
253
  };
package/lib/index.umd.cjs CHANGED
@@ -1,4 +1,4 @@
1
- (function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@sps-woodland/core/feedback-block"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/feedback-block","react","@spscommerce/utils"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.FeedbackBlock={},c.feedbackBlock,c.React,c.utils))})(this,(function(c,e,d,t){"use strict";function s(o){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(n,a,i.get?i:{enumerable:!0,get:()=>o[a]})}}return n.default=o,Object.freeze(n)}const r=s(d),l={"Message Blocks":{components:[e.FeedbackBlock],description:({NavigateTo:o})=>r.createElement(r.Fragment,null,r.createElement("p",null,"Message Blocks show static informational messages on a page. They should not dynamically appear or disappear. For feedback that responds to a user action, Use a"," ",r.createElement(o,{to:"growler"},"Growler")," instead."),r.createElement("h5",null,"Variants"),r.createElement("p",null,"Variants are generally tied to a specific color and an accompanying icon."),r.createElement(e.FeedbackBlock,{kind:"error",micro:!0},"Error"),r.createElement(e.FeedbackBlock,{kind:"info",micro:!0},"Information"),r.createElement(e.FeedbackBlock,{kind:"tip",micro:!0},"Tip"),r.createElement(e.FeedbackBlock,{kind:"success",micro:!0},"Success"),r.createElement(e.FeedbackBlock,{kind:"warning",micro:!0},"Warning")),examples:{standard:{label:"Standard Size",description:"Use Standard Size Message Blocks for the majority of cases. If a smaller or more subtle solution is needed, use the Micro Size Message Block.",examples:{error:{description:"Error",react:t.code`
1
+ (function(n,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],d):(n=typeof globalThis<"u"?globalThis:n||self,d(n.FeedbackBlock={},n.React,n.core,n.utils))})(this,(function(n,d,k,s){"use strict";function g(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,a.get?a:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const c=g(d);function w(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function f(e,r){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);r&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),o.push.apply(o,a)}return o}function b(e){for(var r=1;r<arguments.length;r++){var o=arguments[r]!=null?arguments[r]:{};r%2?f(Object(o),!0).forEach(function(a){w(e,a,o[a])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):f(Object(o)).forEach(function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(o,a))})}return e}var v=(e,r,o)=>{for(var a of Object.keys(e)){var t;if(e[a]!==((t=r[a])!==null&&t!==void 0?t:o[a]))return!1}return!0},_=e=>r=>{var o=e.defaultClassName,a=b(b({},e.defaultVariants),r);for(var t in a){var p,u=(p=a[t])!==null&&p!==void 0?p:e.defaultVariants[t];if(u!=null){var l=u;typeof l=="boolean"&&(l=l===!0?"true":"false");var h=e.variantClassNames[t][l];h&&(o+=" "+h)}}for(var[E,C]of e.compoundVariants)v(E,a,e.defaultVariants)&&(o+=" "+C);return o},B=_({defaultClassName:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l560",variantClassNames:{kind:{tip:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l561",success:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l562",warning:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l563",info:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l564",error:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l565"},micro:{true:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l566",false:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l567"}},defaultVariants:{kind:"tip",micro:!1},compoundVariants:[]}),F=_({defaultClassName:"",variantClassNames:{kind:{tip:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l568",success:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l569",warning:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56a",info:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56b",error:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56c"},micro:{true:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56d",false:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56e"}},defaultVariants:{kind:"tip",micro:!1},compoundVariants:[[{kind:"tip",micro:!0},"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56f"]]}),y=_({defaultClassName:"",variantClassNames:{micro:{true:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56g",false:"pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56h"}},defaultVariants:{micro:!1},compoundVariants:[]});const m=Object.freeze({tip:"lightbulb",success:"checkmark",warning:"exclamation-triangle",error:"exclamation-circle",info:"info-circle"});function i({children:e,className:r,kind:o="tip",micro:a,...t}){return c.createElement("div",{className:k.cl(B({kind:o,micro:a}),r),...t},c.createElement(k.Icon,{size:a?"sm":"lg",className:F({kind:o,micro:a}),icon:m[o],"aria-hidden":"true"}),c.createElement("span",{className:y({micro:a})},e))}k.Metadata.set(i,{name:"FeedbackBlock",props:{kind:{type:"FeedbackBlockKind",default:"tip"},micro:{type:"boolean",default:"false"}}});const O={"Message Blocks":{components:[i],description:({NavigateTo:e})=>c.createElement(c.Fragment,null,c.createElement("p",null,"Message Blocks show static informational messages on a page. They should not dynamically appear or disappear. For feedback that responds to a user action, Use a"," ",c.createElement(e,{to:"growler"},"Growler")," instead."),c.createElement("h5",null,"Variants"),c.createElement("p",null,"Variants are generally tied to a specific color and an accompanying icon."),c.createElement(i,{kind:"error",micro:!0},"Error"),c.createElement(i,{kind:"info",micro:!0},"Information"),c.createElement(i,{kind:"tip",micro:!0},"Tip"),c.createElement(i,{kind:"success",micro:!0},"Success"),c.createElement(i,{kind:"warning",micro:!0},"Warning")),examples:{standard:{label:"Standard Size",description:"Use Standard Size Message Blocks for the majority of cases. If a smaller or more subtle solution is needed, use the Micro Size Message Block.",examples:{error:{description:"Error",react:s.code`
2
2
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
3
3
 
4
4
  function Component() {
@@ -8,7 +8,7 @@
8
8
  </FeedbackBlock>
9
9
  );
10
10
  }
11
- `},info:{description:"Information",react:t.code`
11
+ `},info:{description:"Information",react:s.code`
12
12
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
13
13
 
14
14
  function Component() {
@@ -18,7 +18,7 @@
18
18
  </FeedbackBlock>
19
19
  );
20
20
  }
21
- `},proTip:{description:"Pro Tip",react:t.code`
21
+ `},proTip:{description:"Pro Tip",react:s.code`
22
22
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
23
23
 
24
24
  function Component() {
@@ -28,7 +28,7 @@
28
28
  </FeedbackBlock>
29
29
  );
30
30
  }
31
- `},success:{description:"Success",react:t.code`
31
+ `},success:{description:"Success",react:s.code`
32
32
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
33
33
 
34
34
  function Component() {
@@ -38,7 +38,7 @@
38
38
  </FeedbackBlock>
39
39
  );
40
40
  }
41
- `},warning:{description:"Warning",react:t.code`
41
+ `},warning:{description:"Warning",react:s.code`
42
42
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
43
43
 
44
44
  function Component() {
@@ -48,7 +48,7 @@
48
48
  </FeedbackBlock>
49
49
  );
50
50
  }
51
- `}}},micro:{label:"Micro Size",description:"Use Micro Size Message Blocks when a Standard Size Message Block is too large or too visually overwhelming.",examples:{error:{description:"Error",react:t.code`
51
+ `}}},micro:{label:"Micro Size",description:"Use Micro Size Message Blocks when a Standard Size Message Block is too large or too visually overwhelming.",examples:{error:{description:"Error",react:s.code`
52
52
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
53
53
 
54
54
  function Component() {
@@ -58,7 +58,7 @@
58
58
  </FeedbackBlock>
59
59
  );
60
60
  }
61
- `},info:{description:"Information",react:t.code`
61
+ `},info:{description:"Information",react:s.code`
62
62
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
63
63
 
64
64
  function Component() {
@@ -68,7 +68,7 @@
68
68
  </FeedbackBlock>
69
69
  );
70
70
  }
71
- `},proTip:{description:"Pro Tip",react:t.code`
71
+ `},proTip:{description:"Pro Tip",react:s.code`
72
72
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
73
73
 
74
74
  function Component() {
@@ -78,7 +78,7 @@
78
78
  </FeedbackBlock>
79
79
  );
80
80
  }
81
- `},success:{description:"Success",react:t.code`
81
+ `},success:{description:"Success",react:s.code`
82
82
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
83
83
 
84
84
  function Component() {
@@ -88,7 +88,7 @@
88
88
  </FeedbackBlock>
89
89
  );
90
90
  }
91
- `},warning:{description:"Warning",react:t.code`
91
+ `},warning:{description:"Warning",react:s.code`
92
92
  import { FeedbackBlock } from "@sps-woodland/feedback-block";
93
93
 
94
94
  function Component() {
@@ -98,4 +98,4 @@
98
98
  </FeedbackBlock>
99
99
  );
100
100
  }
101
- `}}}}}};c.MANIFEST=l,Object.keys(e).forEach(o=>{o!=="default"&&!Object.prototype.hasOwnProperty.call(c,o)&&Object.defineProperty(c,o,{enumerable:!0,get:()=>e[o]})}),Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));
101
+ `}}}}}};n.FeedbackBlock=i,n.FeedbackBlockIcons=m,n.MANIFEST=O,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .pkg_sps-woodland_core__version_8_51_2__hash_1x0ztso0{display:flex;align-items:center}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztso1{background-color:#fff8e0;border-color:#fc0}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztso2{background-color:#e7f3ec;border-color:#0b8940}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztso3{background-color:#fcf1e7;border-color:#e7760b}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztso4{background-color:#e6f2f8;border-color:#09638d}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztso5{background-color:#fbe6ea;border-color:#de002e}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztso6{gap:.125rem;height:1rem;border:none;background-color:transparent}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztso7{gap:.5rem;border-radius:.125rem;border-style:solid;border-width:.0625rem;font-size:.875rem;font-weight:400;line-height:1.25rem;margin-bottom:1rem;padding:.5rem 1rem .5rem .5rem}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztso8{color:#fc0}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztso9{color:#0b8940}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztsoa{color:#e7760b}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztsob{color:#09638d}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztsoc{color:#de002e}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztsof{color:#09638d}.pkg_sps-woodland_core__version_8_51_2__hash_1x0ztsog{color:#4b5356;font-size:.75rem;font-weight:600;line-height:1.125rem;margin-left:.25rem}
1
+ .pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l560{display:flex;align-items:center}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l561{background-color:#fff8e0;border-color:#fc0}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l562{background-color:#e7f3ec;border-color:#0b8940}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l563{background-color:#fcf1e7;border-color:#e7760b}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l564{background-color:#e6f2f8;border-color:#09638d}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l565{background-color:#fbe6ea;border-color:#de002e}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l566{gap:.125rem;height:1rem;border:none;background-color:transparent}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l567{gap:.5rem;border-radius:.125rem;border-style:solid;border-width:.0625rem;font-size:.875rem;font-weight:400;line-height:1.25rem;margin-bottom:1rem;padding:.5rem 1rem .5rem .5rem}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l568{color:#fc0}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l569{color:#0b8940}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56a{color:#e7760b}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56b{color:#09638d}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56c{color:#de002e}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56f{color:#09638d}.pkg_sps-woodland_feedback-block__version_8_52_0__hash_1r00l56g{color:#4b5356;font-size:.75rem;font-weight:600;line-height:1.125rem;margin-left:.25rem}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sps-woodland/feedback-block",
3
3
  "description": "SPS Woodland Design System feedback block component",
4
- "version": "8.51.2",
4
+ "version": "8.52.0",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/feedback-block",
@@ -17,7 +17,6 @@
17
17
  "import": "./lib/index.js",
18
18
  "default": "./lib/index.js"
19
19
  },
20
- "./style.css": "./lib/style.css",
21
20
  "./lib/style.css": {
22
21
  "import": "./lib/style.css",
23
22
  "require": "./lib/style.css"
@@ -30,19 +29,22 @@
30
29
  "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
31
30
  "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
32
31
  "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
33
- "@sps-woodland/core": "8.51.2"
32
+ "@sps-woodland/core": "8.52.0",
33
+ "@sps-woodland/tokens": "8.52.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@spscommerce/utils": "9.0.3",
37
+ "@vanilla-extract/css": "1.17.4",
38
+ "@vanilla-extract/recipes": "0.2.5",
37
39
  "react": "16.14.0",
38
40
  "react-dom": "16.14.0",
39
- "@sps-woodland/core": "8.51.2"
41
+ "@sps-woodland/core": "8.52.0",
42
+ "@sps-woodland/tokens": "8.52.0"
40
43
  },
41
44
  "scripts": {
42
- "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
45
+ "build": "pnpm run build:js && pnpm run build:types",
43
46
  "build:js": "vite build",
44
47
  "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
45
- "build:css": "cp ../core/lib/feedback-block/style.css lib/style.css 2>/dev/null || echo 'feedback-block style.css not found, skipping'",
46
48
  "watch": "vite build --watch",
47
49
  "clean": "git clean -fdX",
48
50
  "pub": "node ../../../scripts/publish-package.mjs"
package/vite.config.mjs CHANGED
@@ -1,24 +1,31 @@
1
1
  import path from "node:path";
2
+ import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
2
3
  import { defineConfig } from "vite";
4
+ import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
3
5
  import pkg from "./package.json";
4
6
 
5
- // Feedback-block is now a wrapper package that re-exports from @sps-woodland/core.
6
- // No vanilla-extract needed - CSS is provided by the core package.
7
-
8
- const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
7
+ const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
9
8
 
10
9
  export default defineConfig({
10
+ plugins: [
11
+ vanillaExtractPlugin(
12
+ getVanillaExtractPluginProps({
13
+ packageName: pkg.name,
14
+ packageVersion,
15
+ })
16
+ ),
17
+ ],
11
18
  build: {
12
19
  lib: {
13
20
  entry: path.resolve(__dirname, "src/index.ts"),
14
21
  name: "FeedbackBlock",
15
22
  fileName: "index",
23
+ cssFileName: "style",
16
24
  },
17
25
  outDir: path.resolve(__dirname, "./lib"),
18
26
  emptyOutDir: false,
19
27
  rollupOptions: {
20
- // External must match subpath imports like @sps-woodland/core/feedback-block
21
- external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
28
+ external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
22
29
  },
23
30
  },
24
31
  });