@sps-woodland/key-value-set 8.51.2 → 8.52.0

package/README.md

@@ -1,27 +1,3 @@
 ## [@sps-woodland/key-value-set](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/key-value-set#readme)
 
-SPS Woodland Design System key value set component.
-
-> **Heads up — this is a wrapper package.** The component source now lives in
-> [`@sps-woodland/core`](../core). This package re-exports from core so existing
-> imports keep working, but new code should prefer the core paths.
-
-### Preferred imports (core)
-
-```ts
-import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/core/key-value-set";
-// or, if you only need the item:
-import { KeyValueSetItem } from "@sps-woodland/core/key-value-set-item";
-
-import "@sps-woodland/core/key-value-set/style.css";
-```
-
-`KeyValueSet` is barrel-only (the family name and the parent component share a
-name). `KeyValueSetItem` additionally has its own flat subpath.
-
-### Legacy imports (still supported)
-
-```ts
-import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
-import "@sps-woodland/key-value-set/style.css";
-```
+SPS Woodland Design System key value set component

package/lib/index.d.ts

@@ -1,2 +1,3 @@
-export * from "@sps-woodland/core/key-value-set";
+export * from "./key-value-set/KeyValueSet";
+export * from "./key-value-set-item/KeyValueSetItem";
 export * from "./manifest";

package/lib/index.js

@@ -1,10 +1,98 @@
-import { KeyValueSet as a, KeyValueSetItem as n } from "@sps-woodland/core/key-value-set";
-export * from "@sps-woodland/core/key-value-set";
-import { code as t } from "@spscommerce/utils";
+import { Metadata as p, cl as y, useChildTestIdAttrBuilder as v } from "@sps-woodland/core";
 import * as e from "react";
-const r = {
+import { code as s } from "@spscommerce/utils";
+function _(t, n, a) {
+  return n in t ? Object.defineProperty(t, n, {
+    value: a,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : t[n] = a, t;
+}
+function c(t, n) {
+  var a = Object.keys(t);
+  if (Object.getOwnPropertySymbols) {
+    var l = Object.getOwnPropertySymbols(t);
+    n && (l = l.filter(function(r) {
+      return Object.getOwnPropertyDescriptor(t, r).enumerable;
+    })), a.push.apply(a, l);
+  }
+  return a;
+}
+function d(t) {
+  for (var n = 1; n < arguments.length; n++) {
+    var a = arguments[n] != null ? arguments[n] : {};
+    n % 2 ? c(Object(a), !0).forEach(function(l) {
+      _(t, l, a[l]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) : c(Object(a)).forEach(function(l) {
+      Object.defineProperty(t, l, Object.getOwnPropertyDescriptor(a, l));
+    });
+  }
+  return t;
+}
+var E = (t, n, a) => {
+  for (var l of Object.keys(t)) {
+    var r;
+    if (t[l] !== ((r = n[l]) !== null && r !== void 0 ? r : a[l]))
+      return !1;
+  }
+  return !0;
+}, V = (t) => (n) => {
+  var a = t.defaultClassName, l = d(d({}, t.defaultVariants), n);
+  for (var r in l) {
+    var o, u = (o = l[r]) !== null && o !== void 0 ? o : t.defaultVariants[r];
+    if (u != null) {
+      var i = u;
+      typeof i == "boolean" && (i = i === !0 ? "true" : "false");
+      var m = (
+        // @ts-expect-error
+        t.variantClassNames[r][i]
+      );
+      m && (a += " " + m);
+    }
+  }
+  for (var [f, K] of t.compoundVariants)
+    E(f, l, t.defaultVariants) && (a += " " + K);
+  return a;
+}, b = V({ defaultClassName: "pkg_sps-woodland_key-value-set__version_8_52_0__hash_1i7enhj1", variantClassNames: { inline: { true: "pkg_sps-woodland_key-value-set__version_8_52_0__hash_1i7enhj2 pkg_sps-woodland_key-value-set__version_8_52_0__hash_1i7enhj0" } }, defaultVariants: {}, compoundVariants: [] });
+function S({
+  children: t,
+  className: n,
+  inline: a,
+  ...l
+}) {
+  return /* @__PURE__ */ e.createElement("div", { className: y(
+    b({ inline: a }),
+    n
+  ), ...l }, t);
+}
+p.set(S, {
+  name: "KeyValueSet",
+  props: {
+    inline: { type: "boolean", default: "false" }
+  }
+});
+var g = "pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj090", I = V({ defaultClassName: "pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj091", variantClassNames: { wrap: { normal: "pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj092", truncate: "pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj093" } }, defaultVariants: {}, compoundVariants: [] });
+function h({
+  children: t,
+  className: n,
+  itemKey: a,
+  wrap: l,
+  ...r
+}) {
+  const o = v(r), u = l === "truncate" && typeof t == "string" ? t : void 0;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: g, ...o("key") }, a), /* @__PURE__ */ e.createElement("span", { className: y(I({ wrap: l }), n), title: u, ...r }, t));
+}
+p.set(h, {
+  name: "KeyValueSetItem",
+  props: {
+    itemKey: { type: "React.ReactNode | (() => React.ReactNode)", required: !0 },
+    wrap: { type: "'normal' | 'truncate'" }
+  }
+});
+const w = {
   description: () => /* @__PURE__ */ e.createElement("p", null, "Key Value Sets consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),
-  components: [a, n],
+  components: [S, h],
   examples: {
     vertical: {
       label: "Vertical Key Value Sets",
@@ -12,7 +100,7 @@ const r = {
       examples: {
         standard: {
           description: () => /* @__PURE__ */ e.createElement("h4", null, "Standard"),
-          react: t`
+          react: s`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -28,7 +116,7 @@ const r = {
         },
         multipleValues: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Multiple Values"), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("b", null, "Note:"), " There is no limit to the number of values that can be listed, but extensive lists should be avoided.")),
-          react: t`
+          react: s`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -46,7 +134,7 @@ const r = {
         },
         secondaryValues: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Secondary Values"), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("b", null, "Note:"), " When using a secondary value (styled in lighter grey text) the number of values listed should be limited to two (2).")),
-          react: t`
+          react: s`
             import { Box } from "@sps-woodland/core";
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
@@ -63,8 +151,8 @@ const r = {
           `
         },
         tags: {
-          description: ({ NavigateTo: l }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Tags"), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("b", null, "Note:"), " Tags can appear inline or on individual lines as the length of content requires. Reference the ", /* @__PURE__ */ e.createElement(l, { to: "tags" }, "Tag"), " component for spacing rules.")),
-          react: t`
+          description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Tags"), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("b", null, "Note:"), " Tags can appear inline or on individual lines as the length of content requires. Reference the ", /* @__PURE__ */ e.createElement(t, { to: "tags" }, "Tag"), " component for spacing rules.")),
+          react: s`
             import { SpsTag } from "@spscommerce/ds-react";
             import { Box } from "@sps-woodland/core";
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
@@ -85,7 +173,7 @@ const r = {
         },
         hyperlinksAndIcons: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Hyperlinks & Icons"), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("b", null, "Note:"), " Icons and Hyperlinks can be used independently of one another.")),
-          react: t`
+          react: s`
             import { Box } from "@sps-woodland/core";
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
@@ -109,7 +197,7 @@ const r = {
       examples: {
         standard: {
           description: () => /* @__PURE__ */ e.createElement("h4", null, "Standard"),
-          react: t`
+          react: s`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -125,7 +213,7 @@ const r = {
         },
         stacked: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Stacked"), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("b", null, "Note:"), " There is no limit to the number of stacked listings, but more than three in a single container should be avoided."), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("b", null, "Note:"), " Titles are right-aligned in the horizontal Key Value Sets to optimize scanability of the values.")),
-          react: t`
+          react: s`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -154,7 +242,7 @@ const r = {
         },
         withLinks: {
           description: () => /* @__PURE__ */ e.createElement("h4", null, "With Links"),
-          react: t`
+          react: s`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -181,9 +269,11 @@ const r = {
       }
     }
   }
-}, m = {
-  "Key Value Sets": r
+}, k = {
+  "Key Value Sets": w
 };
 export {
-  m as MANIFEST
+  S as KeyValueSet,
+  h as KeyValueSetItem,
+  k as MANIFEST
 };

package/lib/index.umd.cjs

@@ -1,4 +1,4 @@
-(function(l,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("@sps-woodland/core/key-value-set"),require("@spscommerce/utils"),require("react")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/key-value-set","@spscommerce/utils","react"],a):(l=typeof globalThis<"u"?globalThis:l||self,a(l.KeyValueSet={},l.keyValueSet,l.utils,l.React))})(this,(function(l,a,n,i){"use strict";function m(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(o,r,s.get?s:{enumerable:!0,get:()=>t[r]})}}return o.default=t,Object.freeze(o)}const e=m(i),u={"Key Value Sets":{description:()=>e.createElement("p",null,"Key Value Sets consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),components:[a.KeyValueSet,a.KeyValueSetItem],examples:{vertical:{label:"Vertical Key Value Sets",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use:"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Vertical containers such as a side bar or general card")),e.createElement("h5",null,"Do Not Use:"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"In Table cells or Description Lists")),e.createElement("h5",null,"Usage Rules"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Titles must be written in Title Case"),e.createElement("li",{className:"mb-2"},"Values can be written in Sentence Case or Title Case as best suits the content"),e.createElement("li",{className:"mb-2"},"Titles or Values can include hyperlinks and/or icons",e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Icons should always appear on the left before any text content"))),e.createElement("li",{className:"mb-2"},"Values can include tags"),e.createElement("li",{className:"mb-2"},"Can include multiple values on additional lines"))),examples:{standard:{description:()=>e.createElement("h4",null,"Standard"),react:n.code`
+(function(s,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@sps-woodland/core"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core","react","@spscommerce/utils"],o):(s=typeof globalThis<"u"?globalThis:s||self,o(s.KeyValueSet={},s.core,s.React,s.utils))})(this,(function(s,o,h,u){"use strict";function K(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(n,a,l.get?l:{enumerable:!0,get:()=>t[a]})}}return n.default=t,Object.freeze(n)}const e=K(h);function _(t,n,a){return n in t?Object.defineProperty(t,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[n]=a,t}function y(t,n){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);n&&(l=l.filter(function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})),a.push.apply(a,l)}return a}function f(t){for(var n=1;n<arguments.length;n++){var a=arguments[n]!=null?arguments[n]:{};n%2?y(Object(a),!0).forEach(function(l){_(t,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):y(Object(a)).forEach(function(l){Object.defineProperty(t,l,Object.getOwnPropertyDescriptor(a,l))})}return t}var b=(t,n,a)=>{for(var l of Object.keys(t)){var r;if(t[l]!==((r=n[l])!==null&&r!==void 0?r:a[l]))return!1}return!0},S=t=>n=>{var a=t.defaultClassName,l=f(f({},t.defaultVariants),n);for(var r in l){var i,m=(i=l[r])!==null&&i!==void 0?i:t.defaultVariants[r];if(m!=null){var c=m;typeof c=="boolean"&&(c=c===!0?"true":"false");var V=t.variantClassNames[r][c];V&&(a+=" "+V)}}for(var[I,N]of t.compoundVariants)b(I,l,t.defaultVariants)&&(a+=" "+N);return a},v=S({defaultClassName:"pkg_sps-woodland_key-value-set__version_8_52_0__hash_1i7enhj1",variantClassNames:{inline:{true:"pkg_sps-woodland_key-value-set__version_8_52_0__hash_1i7enhj2 pkg_sps-woodland_key-value-set__version_8_52_0__hash_1i7enhj0"}},defaultVariants:{},compoundVariants:[]});function d({children:t,className:n,inline:a,...l}){return e.createElement("div",{className:o.cl(v({inline:a}),n),...l},t)}o.Metadata.set(d,{name:"KeyValueSet",props:{inline:{type:"boolean",default:"false"}}});var E="pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj090",g=S({defaultClassName:"pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj091",variantClassNames:{wrap:{normal:"pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj092",truncate:"pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj093"}},defaultVariants:{},compoundVariants:[]});function p({children:t,className:n,itemKey:a,wrap:l,...r}){const i=o.useChildTestIdAttrBuilder(r),m=l==="truncate"&&typeof t=="string"?t:void 0;return e.createElement(e.Fragment,null,e.createElement("span",{className:E,...i("key")},a),e.createElement("span",{className:o.cl(g({wrap:l}),n),title:m,...r},t))}o.Metadata.set(p,{name:"KeyValueSetItem",props:{itemKey:{type:"React.ReactNode | (() => React.ReactNode)",required:!0},wrap:{type:"'normal' | 'truncate'"}}});const w={"Key Value Sets":{description:()=>e.createElement("p",null,"Key Value Sets consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),components:[d,p],examples:{vertical:{label:"Vertical Key Value Sets",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use:"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Vertical containers such as a side bar or general card")),e.createElement("h5",null,"Do Not Use:"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"In Table cells or Description Lists")),e.createElement("h5",null,"Usage Rules"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Titles must be written in Title Case"),e.createElement("li",{className:"mb-2"},"Values can be written in Sentence Case or Title Case as best suits the content"),e.createElement("li",{className:"mb-2"},"Titles or Values can include hyperlinks and/or icons",e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Icons should always appear on the left before any text content"))),e.createElement("li",{className:"mb-2"},"Values can include tags"),e.createElement("li",{className:"mb-2"},"Can include multiple values on additional lines"))),examples:{standard:{description:()=>e.createElement("h4",null,"Standard"),react:u.code`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -10,7 +10,7 @@
                 </KeyValueSet>
               )
             }
-          `},multipleValues:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Multiple Values"),e.createElement("p",null,e.createElement("b",null,"Note:")," There is no limit to the number of values that can be listed, but extensive lists should be avoided.")),react:n.code`
+          `},multipleValues:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Multiple Values"),e.createElement("p",null,e.createElement("b",null,"Note:")," There is no limit to the number of values that can be listed, but extensive lists should be avoided.")),react:u.code`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -24,7 +24,7 @@
                 </KeyValueSet>
               )
             }
-          `},secondaryValues:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Secondary Values"),e.createElement("p",null,e.createElement("b",null,"Note:")," When using a secondary value (styled in lighter grey text) the number of values listed should be limited to two (2).")),react:n.code`
+          `},secondaryValues:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Secondary Values"),e.createElement("p",null,e.createElement("b",null,"Note:")," When using a secondary value (styled in lighter grey text) the number of values listed should be limited to two (2).")),react:u.code`
             import { Box } from "@sps-woodland/core";
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
@@ -38,7 +38,7 @@
                 </KeyValueSet>
               )
             }
-          `},tags:{description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Tags"),e.createElement("p",null,e.createElement("b",null,"Note:")," Tags can appear inline or on individual lines as the length of content requires. Reference the ",e.createElement(t,{to:"tags"},"Tag")," component for spacing rules.")),react:n.code`
+          `},tags:{description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Tags"),e.createElement("p",null,e.createElement("b",null,"Note:")," Tags can appear inline or on individual lines as the length of content requires. Reference the ",e.createElement(t,{to:"tags"},"Tag")," component for spacing rules.")),react:u.code`
             import { SpsTag } from "@spscommerce/ds-react";
             import { Box } from "@sps-woodland/core";
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
@@ -55,7 +55,7 @@
                 </KeyValueSet>
               )
             }
-          `},hyperlinksAndIcons:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Hyperlinks & Icons"),e.createElement("p",null,e.createElement("b",null,"Note:")," Icons and Hyperlinks can be used independently of one another.")),react:n.code`
+          `},hyperlinksAndIcons:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Hyperlinks & Icons"),e.createElement("p",null,e.createElement("b",null,"Note:")," Icons and Hyperlinks can be used independently of one another.")),react:u.code`
             import { Box } from "@sps-woodland/core";
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
@@ -69,7 +69,7 @@
                 </KeyValueSet>
               )
             }
-          `}}},horizontal:{label:"Horizontal Key Value Sets",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use:"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Horizontal containers such as a content row")),e.createElement("h5",null,"Do Not Use:"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"In Table cells or Description Lists")),e.createElement("h5",null,"Usage Rules"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Titles must be written in Title Case"),e.createElement("li",{className:"mb-2"},"Values can be written in Sentence Case or Title Case as best suits the content"),e.createElement("li",{className:"mb-2"},"Titles or Values can include hyperlinks and/or icons",e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Icons should always appear on the left before any text content"))),e.createElement("li",{className:"mb-2"},"Can be used individually or stacked on top of one another",e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"When stacking, the value lists should share a common category or theme"))))),examples:{standard:{description:()=>e.createElement("h4",null,"Standard"),react:n.code`
+          `}}},horizontal:{label:"Horizontal Key Value Sets",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use:"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Horizontal containers such as a content row")),e.createElement("h5",null,"Do Not Use:"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"In Table cells or Description Lists")),e.createElement("h5",null,"Usage Rules"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Titles must be written in Title Case"),e.createElement("li",{className:"mb-2"},"Values can be written in Sentence Case or Title Case as best suits the content"),e.createElement("li",{className:"mb-2"},"Titles or Values can include hyperlinks and/or icons",e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Icons should always appear on the left before any text content"))),e.createElement("li",{className:"mb-2"},"Can be used individually or stacked on top of one another",e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"When stacking, the value lists should share a common category or theme"))))),examples:{standard:{description:()=>e.createElement("h4",null,"Standard"),react:u.code`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -81,7 +81,7 @@
                 </KeyValueSet>
               )
             }
-          `},stacked:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Stacked"),e.createElement("p",null,e.createElement("b",null,"Note:")," There is no limit to the number of stacked listings, but more than three in a single container should be avoided."),e.createElement("p",null,e.createElement("b",null,"Note:")," Titles are right-aligned in the horizontal Key Value Sets to optimize scanability of the values.")),react:n.code`
+          `},stacked:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Stacked"),e.createElement("p",null,e.createElement("b",null,"Note:")," There is no limit to the number of stacked listings, but more than three in a single container should be avoided."),e.createElement("p",null,e.createElement("b",null,"Note:")," Titles are right-aligned in the horizontal Key Value Sets to optimize scanability of the values.")),react:u.code`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -106,7 +106,7 @@
                 </div>
               )
             }
-          `},withLinks:{description:()=>e.createElement("h4",null,"With Links"),react:n.code`
+          `},withLinks:{description:()=>e.createElement("h4",null,"With Links"),react:u.code`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -128,4 +128,4 @@
                 </div>
               )
             }
-          `}}}}}};l.MANIFEST=u,Object.keys(a).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(l,t)&&Object.defineProperty(l,t,{enumerable:!0,get:()=>a[t]})}),Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+          `}}}}}};s.KeyValueSet=d,s.KeyValueSetItem=p,s.MANIFEST=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/lib/key-value-set/KeyValueSet.css.d.ts

@@ -0,0 +1,6 @@
+export declare const kvsInlineStyle: string;
+export declare const keyValueSet: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    inline: {
+        true: string[];
+    };
+}>;

package/lib/key-value-set/KeyValueSet.d.ts

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

package/lib/key-value-set-item/KeyValueSetItem.css.d.ts

@@ -0,0 +1,13 @@
+export declare const key: string;
+export declare const value: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    wrap: {
+        normal: {
+            overflowWrap: "normal";
+        };
+        truncate: {
+            overflow: "hidden";
+            textOverflow: "ellipsis";
+            whiteSpace: "nowrap";
+        };
+    };
+}>;

package/lib/key-value-set-item/KeyValueSetItem.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+export declare function KeyValueSetItem({ children, className, itemKey, wrap, ...rest }: ComponentProps<{
+    itemKey: React.ReactNode | (() => React.ReactNode);
+    wrap?: "normal" | "truncate";
+}, HTMLSpanElement>): React.ReactElement;

package/lib/style.css

@@ -1 +1 @@
-.pkg_sps-woodland_core__version_8_51_2__hash_1ovxcsc0{grid-template-columns:auto auto}.pkg_sps-woodland_core__version_8_51_2__hash_1ovxcsc1{column-gap:.5rem;display:inline-grid;font-size:.75rem;line-height:1.125rem;max-width:100%}.pkg_sps-woodland_core__version_8_51_2__hash_fm6p690{font-weight:600;min-width:0}.pkg_sps-woodland_core__version_8_51_2__hash_1ovxcsc0 .pkg_sps-woodland_core__version_8_51_2__hash_fm6p690{text-align:right}.pkg_sps-woodland_core__version_8_51_2__hash_fm6p691{min-width:0;overflow-wrap:break-word}.pkg_sps-woodland_core__version_8_51_2__hash_fm6p692{overflow-wrap:normal}.pkg_sps-woodland_core__version_8_51_2__hash_fm6p693{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pkg_sps-woodland_key-value-set__version_8_52_0__hash_1i7enhj0{grid-template-columns:auto auto}.pkg_sps-woodland_key-value-set__version_8_52_0__hash_1i7enhj1{column-gap:.5rem;display:inline-grid;font-size:.75rem;line-height:1.125rem;max-width:100%}.pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj090{font-weight:600;min-width:0}.pkg_sps-woodland_key-value-set__version_8_52_0__hash_1i7enhj0 .pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj090{text-align:right}.pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj091{min-width:0;overflow-wrap:break-word}.pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj092{overflow-wrap:normal}.pkg_sps-woodland_key-value-set__version_8_52_0__hash_18tyj093{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/key-value-set",
   "description": "SPS Woodland Design System key value set component",
-  "version": "8.51.2",
+  "version": "8.52.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/key-value-set",
@@ -17,7 +17,6 @@
       "import": "./lib/index.js",
       "default": "./lib/index.js"
     },
-    "./style.css": "./lib/style.css",
     "./lib/style.css": {
       "import": "./lib/style.css",
       "require": "./lib/style.css"
@@ -30,19 +29,22 @@
     "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@sps-woodland/core": "8.51.2"
+    "@sps-woodland/core": "8.52.0",
+    "@sps-woodland/tokens": "8.52.0"
   },
   "devDependencies": {
     "@spscommerce/utils": "9.0.3",
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/recipes": "0.2.5",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@sps-woodland/core": "8.51.2"
+    "@sps-woodland/core": "8.52.0",
+    "@sps-woodland/tokens": "8.52.0"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
+    "build": "pnpm run build:js && pnpm run build:types",
     "build:js": "vite build",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
-    "build:css": "cp ../core/lib/key-value-set/style.css lib/style.css 2>/dev/null || echo 'key-value-set style.css not found, skipping'",
     "watch": "vite build --watch",
     "clean": "git clean -fdX",
     "pub": "node ../../../scripts/publish-package.mjs"

package/vite.config.mjs

@@ -1,24 +1,31 @@
 import path from "node:path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
 import pkg from "./package.json";
 
-// Key-value-set is now a wrapper package that re-exports from @sps-woodland/core.
-// No vanilla-extract needed - CSS is provided by the mono-package.
-
-const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
 
 export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
       name: "KeyValueSet",
       fileName: "index",
+      cssFileName: "style",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,
     rollupOptions: {
-      // External must match subpath imports like @sps-woodland/core/key-value-set
-      external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
     },
   },
 });