@sps-woodland/key-value-set 7.0.2 → 7.1.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 (3) hide show
  1. package/lib/index.cjs.js +40 -24
  2. package/lib/index.es.js +60 -44
  3. package/package.json +5 -5
package/lib/index.cjs.js CHANGED
@@ -1,5 +1,6 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@sps-woodland/core"),K=require("react"),s=require("@spscommerce/utils");function b(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const l in t)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(t,l);Object.defineProperty(n,l,a.get?a:{enumerable:!0,get:()=>t[l]})}}return n.default=t,Object.freeze(n)}const e=b(K);var h="_18tyj090";function i({children:t,itemKey:n,...l}){const a=o.useChildTestIdAttrBuilder(l);return e.createElement(e.Fragment,null,e.createElement("span",{className:h,...a("key")},n),e.createElement("span",{...l},t))}o.Metadata.set(i,{name:"KeyValueSetItem",props:{itemKey:{type:"React.ReactNode | (() => React.ReactNode)",required:!0}}});function E(t,n,l){return n in t?Object.defineProperty(t,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):t[n]=l,t}function p(t,n){var l=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);n&&(a=a.filter(function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})),l.push.apply(l,a)}return l}function S(t){for(var n=1;n<arguments.length;n++){var l=arguments[n]!=null?arguments[n]:{};n%2?p(Object(l),!0).forEach(function(a){E(t,a,l[a])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(l)):p(Object(l)).forEach(function(a){Object.defineProperty(t,a,Object.getOwnPropertyDescriptor(l,a))})}return t}var g=(t,n,l)=>{for(var a of Object.keys(t)){var r;if(t[a]!==((r=n[a])!==null&&r!==void 0?r:l[a]))return!1}return!0},v=t=>n=>{var l=t.defaultClassName,a=S(S({},t.defaultVariants),n);for(var r in a){var m,d=(m=a[r])!==null&&m!==void 0?m:t.defaultVariants[r];if(d!=null){var u=d;typeof u=="boolean"&&(u=u===!0?"true":"false");var y=t.variantClassNames[r][u];y&&(l+=" "+y)}}for(var[V,f]of t.compoundVariants)g(V,a,t.defaultVariants)&&(l+=" "+f);return l},I=v({defaultClassName:"_1i7enhj1",variantClassNames:{inline:{true:"_1i7enhj0"}},defaultVariants:{},compoundVariants:[]});function c({children:t,className:n,inline:l,...a}){const[r]=o.selectChildren(t,[{type:i}]);return e.createElement("div",{className:o.cl(I({inline:l}),n),...a},r)}o.Metadata.set(c,{name:"KeyValueSet",props:{inline:{type:"boolean",default:"false"}}});const T={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:[c,i],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:s.code`
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@sps-woodland/core"),K=require("react"),s=require("@spscommerce/utils");function b(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const l in t)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(t,l);Object.defineProperty(n,l,a.get?a:{enumerable:!0,get:()=>t[l]})}}return n.default=t,Object.freeze(n)}const e=b(K);var h="_18tyj090";function i({children:t,itemKey:n,...l}){const a=o.useChildTestIdAttrBuilder(l);return e.createElement(e.Fragment,null,e.createElement("span",{className:h,...a("key")},n),e.createElement("span",{...l},t))}o.Metadata.set(i,{name:"KeyValueSetItem",props:{itemKey:{type:"React.ReactNode | (() => React.ReactNode)",required:!0}}});function E(t,n,l){return n in t?Object.defineProperty(t,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):t[n]=l,t}function p(t,n){var l=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);n&&(a=a.filter(function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})),l.push.apply(l,a)}return l}function S(t){for(var n=1;n<arguments.length;n++){var l=arguments[n]!=null?arguments[n]:{};n%2?p(Object(l),!0).forEach(function(a){E(t,a,l[a])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(l)):p(Object(l)).forEach(function(a){Object.defineProperty(t,a,Object.getOwnPropertyDescriptor(l,a))})}return t}var v=(t,n,l)=>{for(var a of Object.keys(t)){var r;if(t[a]!==((r=n[a])!==null&&r!==void 0?r:l[a]))return!1}return!0},g=t=>n=>{var l=t.defaultClassName,a=S(S({},t.defaultVariants),n);for(var r in a){var m,d=(m=a[r])!==null&&m!==void 0?m:t.defaultVariants[r];if(d!=null){var u=d;typeof u=="boolean"&&(u=u===!0?"true":"false");var y=t.variantClassNames[r][u];y&&(l+=" "+y)}}for(var[V,f]of t.compoundVariants)v(V,a,t.defaultVariants)&&(l+=" "+f);return l},I=g({defaultClassName:"_1i7enhj1",variantClassNames:{inline:{true:"_1i7enhj0"}},defaultVariants:{},compoundVariants:[]});function c({children:t,className:n,inline:l,...a}){const[r]=o.selectChildren(t,[{type:i}]);return e.createElement("div",{className:o.cl(I({inline:l}),n),...a},r)}o.Metadata.set(c,{name:"KeyValueSet",props:{inline:{type:"boolean",default:"false"}}});const N={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:[c,i],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:s.code`
2
2
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
3
+
3
4
  function Component() {
4
5
  return (
5
6
  <KeyValueSet>
@@ -11,6 +12,7 @@
11
12
  }
12
13
  `},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:s.code`
13
14
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
15
+
14
16
  function Component() {
15
17
  return (
16
18
  <KeyValueSet>
@@ -25,6 +27,7 @@
25
27
  `},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:s.code`
26
28
  import { Box } from "@sps-woodland/core";
27
29
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
30
+
28
31
  function Component() {
29
32
  return (
30
33
  <KeyValueSet>
@@ -39,6 +42,7 @@
39
42
  import { SpsTag } from "@spscommerce/ds-react";
40
43
  import { Box } from "@sps-woodland/core";
41
44
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
45
+
42
46
  function Component() {
43
47
  return (
44
48
  <KeyValueSet>
@@ -54,6 +58,7 @@
54
58
  `},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:s.code`
55
59
  import { Box } from "@sps-woodland/core";
56
60
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
61
+
57
62
  function Component() {
58
63
  return (
59
64
  <KeyValueSet>
@@ -66,6 +71,7 @@
66
71
  }
67
72
  `}}},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:s.code`
68
73
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
74
+
69
75
  function Component() {
70
76
  return (
71
77
  <KeyValueSet inline>
@@ -77,36 +83,46 @@
77
83
  }
78
84
  `},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:s.code`
79
85
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
86
+
80
87
  function Component() {
81
88
  return (
82
- <KeyValueSet inline>
83
- <KeyValueSetItem itemKey="Title One">
84
- Value
85
- </KeyValueSetItem>
86
- <KeyValueSetItem itemKey="Title Two">
87
- Value that wraps to a second line
88
- </KeyValueSetItem>
89
- <KeyValueSetItem itemKey="Title Three">
90
- Value
91
- </KeyValueSetItem>
92
- </KeyValueSet>
89
+ <div className={grid.root}>
90
+ <div className={grid[3]}>
91
+ <KeyValueSet inline>
92
+ <KeyValueSetItem itemKey="Title One">
93
+ Value
94
+ </KeyValueSetItem>
95
+ <KeyValueSetItem itemKey="Title Two">
96
+ Value that wraps to a second line
97
+ </KeyValueSetItem>
98
+ <KeyValueSetItem itemKey="Title Three">
99
+ Value
100
+ </KeyValueSetItem>
101
+ </KeyValueSet>
102
+ </div>
103
+ </div>
93
104
  )
94
105
  }
95
106
  `},withLinks:{description:()=>e.createElement("h4",null,"With Links"),react:s.code`
96
107
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
108
+
97
109
  function Component() {
98
110
  return (
99
- <KeyValueSet inline>
100
- <KeyValueSetItem itemKey="Title One">
101
- Value
102
- </KeyValueSetItem>
103
- <KeyValueSetItem itemKey="Title Two">
104
- Value that wraps to a <a href="#" target="_blank">second line</a>
105
- </KeyValueSetItem>
106
- <KeyValueSetItem itemKey="Title Three">
107
- Value
108
- </KeyValueSetItem>
109
- </KeyValueSet>
111
+ <div className={grid.root}>
112
+ <div className={grid[3]}>
113
+ <KeyValueSet inline>
114
+ <KeyValueSetItem itemKey="Title One">
115
+ Value
116
+ </KeyValueSetItem>
117
+ <KeyValueSetItem itemKey="Title Two">
118
+ Value that wraps to a <a href="#" target="_blank">second line</a>
119
+ </KeyValueSetItem>
120
+ <KeyValueSetItem itemKey="Title Three">
121
+ Value
122
+ </KeyValueSetItem>
123
+ </KeyValueSet>
124
+ </div>
125
+ </div>
110
126
  )
111
127
  }
112
- `}}}}},w={"Key Value Sets":T};exports.KeyValueSet=c;exports.KeyValueSetItem=i;exports.MANIFEST=w;
128
+ `}}}}},T={"Key Value Sets":N};exports.KeyValueSet=c;exports.KeyValueSetItem=i;exports.MANIFEST=T;
package/lib/index.es.js CHANGED
@@ -1,8 +1,8 @@
1
- import { Metadata as d, useChildTestIdAttrBuilder as f, selectChildren as h, cl as E } from "@sps-woodland/core";
1
+ import { Metadata as y, useChildTestIdAttrBuilder as f, selectChildren as h, cl as E } from "@sps-woodland/core";
2
2
  import * as e from "react";
3
3
  import { code as s } from "@spscommerce/utils";
4
4
  var b = "_18tyj090";
5
- function m({
5
+ function i({
6
6
  children: t,
7
7
  itemKey: n,
8
8
  ...l
@@ -15,7 +15,7 @@ function m({
15
15
  ...l
16
16
  }, t));
17
17
  }
18
- d.set(m, {
18
+ y.set(i, {
19
19
  name: "KeyValueSetItem",
20
20
  props: {
21
21
  itemKey: { type: "React.ReactNode | (() => React.ReactNode)", required: !0 }
@@ -29,7 +29,7 @@ function v(t, n, l) {
29
29
  writable: !0
30
30
  }) : t[n] = l, t;
31
31
  }
32
- function p(t, n) {
32
+ function d(t, n) {
33
33
  var l = Object.keys(t);
34
34
  if (Object.getOwnPropertySymbols) {
35
35
  var a = Object.getOwnPropertySymbols(t);
@@ -39,63 +39,63 @@ function p(t, n) {
39
39
  }
40
40
  return l;
41
41
  }
42
- function y(t) {
42
+ function p(t) {
43
43
  for (var n = 1; n < arguments.length; n++) {
44
44
  var l = arguments[n] != null ? arguments[n] : {};
45
- n % 2 ? p(Object(l), !0).forEach(function(a) {
45
+ n % 2 ? d(Object(l), !0).forEach(function(a) {
46
46
  v(t, a, l[a]);
47
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(l)) : p(Object(l)).forEach(function(a) {
47
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(l)) : d(Object(l)).forEach(function(a) {
48
48
  Object.defineProperty(t, a, Object.getOwnPropertyDescriptor(l, a));
49
49
  });
50
50
  }
51
51
  return t;
52
52
  }
53
- var I = (t, n, l) => {
53
+ var g = (t, n, l) => {
54
54
  for (var a of Object.keys(t)) {
55
55
  var r;
56
56
  if (t[a] !== ((r = n[a]) !== null && r !== void 0 ? r : l[a]))
57
57
  return !1;
58
58
  }
59
59
  return !0;
60
- }, g = (t) => (n) => {
61
- var l = t.defaultClassName, a = y(y({}, t.defaultVariants), n);
60
+ }, I = (t) => (n) => {
61
+ var l = t.defaultClassName, a = p(p({}, t.defaultVariants), n);
62
62
  for (var r in a) {
63
- var u, i = (u = a[r]) !== null && u !== void 0 ? u : t.defaultVariants[r];
64
- if (i != null) {
65
- var o = i;
63
+ var u, m = (u = a[r]) !== null && u !== void 0 ? u : t.defaultVariants[r];
64
+ if (m != null) {
65
+ var o = m;
66
66
  typeof o == "boolean" && (o = o === !0 ? "true" : "false");
67
67
  var c = t.variantClassNames[r][o];
68
68
  c && (l += " " + c);
69
69
  }
70
70
  }
71
71
  for (var [S, K] of t.compoundVariants)
72
- I(S, a, t.defaultVariants) && (l += " " + K);
72
+ g(S, a, t.defaultVariants) && (l += " " + K);
73
73
  return l;
74
- }, T = g({ defaultClassName: "_1i7enhj1", variantClassNames: { inline: { true: "_1i7enhj0" } }, defaultVariants: {}, compoundVariants: [] });
74
+ }, N = I({ defaultClassName: "_1i7enhj1", variantClassNames: { inline: { true: "_1i7enhj0" } }, defaultVariants: {}, compoundVariants: [] });
75
75
  function V({
76
76
  children: t,
77
77
  className: n,
78
78
  inline: l,
79
79
  ...a
80
80
  }) {
81
- const [r] = h(t, [{ type: m }]);
81
+ const [r] = h(t, [{ type: i }]);
82
82
  return /* @__PURE__ */ e.createElement("div", {
83
83
  className: E(
84
- T({ inline: l }),
84
+ N({ inline: l }),
85
85
  n
86
86
  ),
87
87
  ...a
88
88
  }, r);
89
89
  }
90
- d.set(V, {
90
+ y.set(V, {
91
91
  name: "KeyValueSet",
92
92
  props: {
93
93
  inline: { type: "boolean", default: "false" }
94
94
  }
95
95
  });
96
- const w = {
96
+ const T = {
97
97
  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)."),
98
- components: [V, m],
98
+ components: [V, i],
99
99
  examples: {
100
100
  vertical: {
101
101
  label: "Vertical Key Value Sets",
@@ -121,6 +121,7 @@ const w = {
121
121
  description: () => /* @__PURE__ */ e.createElement("h4", null, "Standard"),
122
122
  react: s`
123
123
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
124
+
124
125
  function Component() {
125
126
  return (
126
127
  <KeyValueSet>
@@ -136,6 +137,7 @@ const w = {
136
137
  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.")),
137
138
  react: s`
138
139
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
140
+
139
141
  function Component() {
140
142
  return (
141
143
  <KeyValueSet>
@@ -154,6 +156,7 @@ const w = {
154
156
  react: s`
155
157
  import { Box } from "@sps-woodland/core";
156
158
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
159
+
157
160
  function Component() {
158
161
  return (
159
162
  <KeyValueSet>
@@ -174,6 +177,7 @@ const w = {
174
177
  import { SpsTag } from "@spscommerce/ds-react";
175
178
  import { Box } from "@sps-woodland/core";
176
179
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
180
+
177
181
  function Component() {
178
182
  return (
179
183
  <KeyValueSet>
@@ -193,6 +197,7 @@ const w = {
193
197
  react: s`
194
198
  import { Box } from "@sps-woodland/core";
195
199
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
200
+
196
201
  function Component() {
197
202
  return (
198
203
  <KeyValueSet>
@@ -231,6 +236,7 @@ const w = {
231
236
  description: () => /* @__PURE__ */ e.createElement("h4", null, "Standard"),
232
237
  react: s`
233
238
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
239
+
234
240
  function Component() {
235
241
  return (
236
242
  <KeyValueSet inline>
@@ -246,19 +252,24 @@ const w = {
246
252
  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.")),
247
253
  react: s`
248
254
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
255
+
249
256
  function Component() {
250
257
  return (
251
- <KeyValueSet inline>
252
- <KeyValueSetItem itemKey="Title One">
253
- Value
254
- </KeyValueSetItem>
255
- <KeyValueSetItem itemKey="Title Two">
256
- Value that wraps to a second line
257
- </KeyValueSetItem>
258
- <KeyValueSetItem itemKey="Title Three">
259
- Value
260
- </KeyValueSetItem>
261
- </KeyValueSet>
258
+ <div className={grid.root}>
259
+ <div className={grid[3]}>
260
+ <KeyValueSet inline>
261
+ <KeyValueSetItem itemKey="Title One">
262
+ Value
263
+ </KeyValueSetItem>
264
+ <KeyValueSetItem itemKey="Title Two">
265
+ Value that wraps to a second line
266
+ </KeyValueSetItem>
267
+ <KeyValueSetItem itemKey="Title Three">
268
+ Value
269
+ </KeyValueSetItem>
270
+ </KeyValueSet>
271
+ </div>
272
+ </div>
262
273
  )
263
274
  }
264
275
  `
@@ -267,19 +278,24 @@ const w = {
267
278
  description: () => /* @__PURE__ */ e.createElement("h4", null, "With Links"),
268
279
  react: s`
269
280
  import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
281
+
270
282
  function Component() {
271
283
  return (
272
- <KeyValueSet inline>
273
- <KeyValueSetItem itemKey="Title One">
274
- Value
275
- </KeyValueSetItem>
276
- <KeyValueSetItem itemKey="Title Two">
277
- Value that wraps to a <a href="#" target="_blank">second line</a>
278
- </KeyValueSetItem>
279
- <KeyValueSetItem itemKey="Title Three">
280
- Value
281
- </KeyValueSetItem>
282
- </KeyValueSet>
284
+ <div className={grid.root}>
285
+ <div className={grid[3]}>
286
+ <KeyValueSet inline>
287
+ <KeyValueSetItem itemKey="Title One">
288
+ Value
289
+ </KeyValueSetItem>
290
+ <KeyValueSetItem itemKey="Title Two">
291
+ Value that wraps to a <a href="#" target="_blank">second line</a>
292
+ </KeyValueSetItem>
293
+ <KeyValueSetItem itemKey="Title Three">
294
+ Value
295
+ </KeyValueSetItem>
296
+ </KeyValueSet>
297
+ </div>
298
+ </div>
283
299
  )
284
300
  }
285
301
  `
@@ -288,10 +304,10 @@ const w = {
288
304
  }
289
305
  }
290
306
  }, x = {
291
- "Key Value Sets": w
307
+ "Key Value Sets": T
292
308
  };
293
309
  export {
294
310
  V as KeyValueSet,
295
- m as KeyValueSetItem,
311
+ i as KeyValueSetItem,
296
312
  x as MANIFEST
297
313
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sps-woodland/key-value-set",
3
3
  "description": "SPS Woodland Design System key value set component",
4
- "version": "7.0.2",
4
+ "version": "7.1.0",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/key-value-set",
@@ -14,8 +14,8 @@
14
14
  },
15
15
  "peerDependencies": {
16
16
  "@spscommerce/utils": "^6.12.1",
17
- "@sps-woodland/core": "7.0.2",
18
- "@sps-woodland/tokens": "7.0.2",
17
+ "@sps-woodland/core": "7.1.0",
18
+ "@sps-woodland/tokens": "7.1.0",
19
19
  "react": "^16.9.0",
20
20
  "react-dom": "^16.9.0"
21
21
  },
@@ -23,8 +23,8 @@
23
23
  "@vanilla-extract/css": "^1.9.1",
24
24
  "@vanilla-extract/recipes": "^0.2.5",
25
25
  "@spscommerce/utils": "^6.12.1",
26
- "@sps-woodland/core": "7.0.2",
27
- "@sps-woodland/tokens": "7.0.2",
26
+ "@sps-woodland/core": "7.1.0",
27
+ "@sps-woodland/tokens": "7.1.0",
28
28
  "react": "^16.9.0",
29
29
  "react-dom": "^16.9.0"
30
30
  },