@sps-woodland/key-value-set 8.50.2 → 8.51.0

package/README.md

@@ -1,3 +1,27 @@
 ## [@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
+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";
+```

package/lib/index.d.ts

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

package/lib/index.js

@@ -1,98 +1,10 @@
-import { Metadata as p, cl as y, useChildTestIdAttrBuilder as v } from "@sps-woodland/core";
+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 * as e from "react";
-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_50_2__hash_1i7enhj1", variantClassNames: { inline: { true: "pkg_sps-woodland_key-value-set__version_8_50_2__hash_1i7enhj2 pkg_sps-woodland_key-value-set__version_8_50_2__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_50_2__hash_18tyj090", I = V({ defaultClassName: "pkg_sps-woodland_key-value-set__version_8_50_2__hash_18tyj091", variantClassNames: { wrap: { normal: "pkg_sps-woodland_key-value-set__version_8_50_2__hash_18tyj092", truncate: "pkg_sps-woodland_key-value-set__version_8_50_2__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 = {
+const r = {
   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: [S, h],
+  components: [a, n],
   examples: {
     vertical: {
       label: "Vertical Key Value Sets",
@@ -100,7 +12,7 @@ const w = {
       examples: {
         standard: {
           description: () => /* @__PURE__ */ e.createElement("h4", null, "Standard"),
-          react: s`
+          react: t`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -116,7 +28,7 @@ const w = {
         },
         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: s`
+          react: t`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -134,7 +46,7 @@ const w = {
         },
         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: s`
+          react: t`
             import { Box } from "@sps-woodland/core";
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
@@ -151,8 +63,8 @@ const w = {
           `
         },
         tags: {
-          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`
+          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`
             import { SpsTag } from "@spscommerce/ds-react";
             import { Box } from "@sps-woodland/core";
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
@@ -173,7 +85,7 @@ const w = {
         },
         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: s`
+          react: t`
             import { Box } from "@sps-woodland/core";
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
@@ -197,7 +109,7 @@ const w = {
       examples: {
         standard: {
           description: () => /* @__PURE__ */ e.createElement("h4", null, "Standard"),
-          react: s`
+          react: t`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -213,7 +125,7 @@ const w = {
         },
         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: s`
+          react: t`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -242,7 +154,7 @@ const w = {
         },
         withLinks: {
           description: () => /* @__PURE__ */ e.createElement("h4", null, "With Links"),
-          react: s`
+          react: t`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -269,11 +181,9 @@ const w = {
       }
     }
   }
-}, k = {
-  "Key Value Sets": w
+}, m = {
+  "Key Value Sets": r
 };
 export {
-  S as KeyValueSet,
-  h as KeyValueSetItem,
-  k as MANIFEST
+  m as MANIFEST
 };

package/lib/index.umd.cjs

@@ -1,4 +1,4 @@
-(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_50_2__hash_1i7enhj1",variantClassNames:{inline:{true:"pkg_sps-woodland_key-value-set__version_8_50_2__hash_1i7enhj2 pkg_sps-woodland_key-value-set__version_8_50_2__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_50_2__hash_18tyj090",g=S({defaultClassName:"pkg_sps-woodland_key-value-set__version_8_50_2__hash_18tyj091",variantClassNames:{wrap:{normal:"pkg_sps-woodland_key-value-set__version_8_50_2__hash_18tyj092",truncate:"pkg_sps-woodland_key-value-set__version_8_50_2__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`
+(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`
             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:u.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:n.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:u.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:n.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:u.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:n.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:u.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:n.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:u.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:n.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:u.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:n.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:u.code`
+          `},withLinks:{description:()=>e.createElement("h4",null,"With Links"),react:n.code`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -128,4 +128,4 @@
                 </div>
               )
             }
-          `}}}}}};s.KeyValueSet=d,s.KeyValueSetItem=p,s.MANIFEST=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
+          `}}}}}};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"})}));

package/lib/style.css

@@ -1 +1 @@
-.pkg_sps-woodland_key-value-set__version_8_50_2__hash_1i7enhj0{grid-template-columns:auto auto}.pkg_sps-woodland_key-value-set__version_8_50_2__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_50_2__hash_18tyj090{font-weight:600;min-width:0}.pkg_sps-woodland_key-value-set__version_8_50_2__hash_1i7enhj0 .pkg_sps-woodland_key-value-set__version_8_50_2__hash_18tyj090{text-align:right}.pkg_sps-woodland_key-value-set__version_8_50_2__hash_18tyj091{min-width:0;overflow-wrap:break-word}.pkg_sps-woodland_key-value-set__version_8_50_2__hash_18tyj092{overflow-wrap:normal}.pkg_sps-woodland_key-value-set__version_8_50_2__hash_18tyj093{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pkg_sps-woodland_core__version_8_51_0__hash_1ovxcsc0{grid-template-columns:auto auto}.pkg_sps-woodland_core__version_8_51_0__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_0__hash_fm6p690{font-weight:600;min-width:0}.pkg_sps-woodland_core__version_8_51_0__hash_1ovxcsc0 .pkg_sps-woodland_core__version_8_51_0__hash_fm6p690{text-align:right}.pkg_sps-woodland_core__version_8_51_0__hash_fm6p691{min-width:0;overflow-wrap:break-word}.pkg_sps-woodland_core__version_8_51_0__hash_fm6p692{overflow-wrap:normal}.pkg_sps-woodland_core__version_8_51_0__hash_fm6p693{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.50.2",
+  "version": "8.51.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/key-value-set",
@@ -17,6 +17,7 @@
       "import": "./lib/index.js",
       "default": "./lib/index.js"
     },
+    "./style.css": "./lib/style.css",
     "./lib/style.css": {
       "import": "./lib/style.css",
       "require": "./lib/style.css"
@@ -29,22 +30,19 @@
     "@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.50.2",
-    "@sps-woodland/tokens": "8.50.2"
+    "@sps-woodland/core": "8.51.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.50.2",
-    "@sps-woodland/tokens": "8.50.2"
+    "@sps-woodland/core": "8.51.0"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:types",
+    "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
     "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,31 +1,24 @@
 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";
 
-const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+// 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) : [];
 
 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: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+      // External must match subpath imports like @sps-woodland/core/key-value-set
+      external: (id) => peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
     },
   },
 });

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

@@ -1,6 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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;