@sps-woodland/key-value-set 7.0.0

package/README.md

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

package/lib/KeyValueSet.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const KeyValueSetExamples: ComponentManifestEntry;

package/lib/index.cjs.js

@@ -0,0 +1,112 @@
+"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`
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet>
+                  <KeyValueSetItem itemKey="Company">
+                    SPS Commerce
+                  </KeyValueSetItem>
+                </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:s.code`
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet>
+                  <KeyValueSetItem itemKey="Program Requirements">
+                    Electronic Order
+                    <br />
+                    Fulfillment
+                  </KeyValueSetItem>
+                </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:s.code`
+            import { Box } from "@sps-woodland/core";
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet>
+                  <KeyValueSetItem itemKey="Company">
+                    SPS Commerce
+                    <Box color="grey-medium">Minneapolis, MN</Box>
+                  </KeyValueSetItem>
+                </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:s.code`
+            import { SpsTag } from "@spscommerce/ds-react";
+            import { Box } from "@sps-woodland/core";
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet>
+                  <KeyValueSetItem itemKey="Accepted Documents">
+                    <Box mt="sm" display="flex" flexWrap="wrap" gap="xs">
+                      <SpsTag>850</SpsTag>
+                      <SpsTag>855</SpsTag>
+                    </Box>
+                  </KeyValueSetItem>
+                </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:s.code`
+            import { Box } from "@sps-woodland/core";
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet>
+                  <KeyValueSetItem itemKey="Company">
+                    <a href="#" target="_blank">SPS Commerce</a>
+                    <Box color="grey-medium">Minneapolis, MN</Box>
+                  </KeyValueSetItem>
+                </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:s.code`
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet inline>
+                  <KeyValueSetItem itemKey="Company">
+                    SPS Commerce
+                  </KeyValueSetItem>
+                </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:s.code`
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet inline>
+                  <KeyValueSetItem itemKey="Title One">
+                    Value
+                  </KeyValueSetItem>
+                  <KeyValueSetItem itemKey="Title Two">
+                    Value that wraps to a second line
+                  </KeyValueSetItem>
+                  <KeyValueSetItem itemKey="Title Three">
+                    Value
+                  </KeyValueSetItem>
+                </KeyValueSet>
+              )
+            }
+          `},withLinks:{description:()=>e.createElement("h4",null,"With Links"),react:s.code`
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet inline>
+                  <KeyValueSetItem itemKey="Title One">
+                    Value
+                  </KeyValueSetItem>
+                  <KeyValueSetItem itemKey="Title Two">
+                    Value that wraps to a <a href="#" target="_blank">second line</a>
+                  </KeyValueSetItem>
+                  <KeyValueSetItem itemKey="Title Three">
+                    Value
+                  </KeyValueSetItem>
+                </KeyValueSet>
+              )
+            }
+          `}}}}},w={"Key Value Sets":T};exports.KeyValueSet=c;exports.KeyValueSetItem=i;exports.MANIFEST=w;

package/lib/index.d.ts

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

package/lib/index.es.js

@@ -0,0 +1,297 @@
+import { Metadata as d, useChildTestIdAttrBuilder as f, selectChildren as h, cl as E } from "@sps-woodland/core";
+import * as e from "react";
+import { code as s } from "@spscommerce/utils";
+var b = "_18tyj090";
+function m({
+  children: t,
+  itemKey: n,
+  ...l
+}) {
+  const a = f(l);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", {
+    className: b,
+    ...a("key")
+  }, n), /* @__PURE__ */ e.createElement("span", {
+    ...l
+  }, t));
+}
+d.set(m, {
+  name: "KeyValueSetItem",
+  props: {
+    itemKey: { type: "React.ReactNode | (() => React.ReactNode)", required: !0 }
+  }
+});
+function v(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 y(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) {
+      v(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 I = (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 = y(y({}, t.defaultVariants), n);
+  for (var r in a) {
+    var u, i = (u = a[r]) !== null && u !== void 0 ? u : t.defaultVariants[r];
+    if (i != null) {
+      var o = i;
+      typeof o == "boolean" && (o = o === !0 ? "true" : "false");
+      var c = t.variantClassNames[r][o];
+      c && (l += " " + c);
+    }
+  }
+  for (var [S, K] of t.compoundVariants)
+    I(S, a, t.defaultVariants) && (l += " " + K);
+  return l;
+}, T = g({ defaultClassName: "_1i7enhj1", variantClassNames: { inline: { true: "_1i7enhj0" } }, defaultVariants: {}, compoundVariants: [] });
+function V({
+  children: t,
+  className: n,
+  inline: l,
+  ...a
+}) {
+  const [r] = h(t, [{ type: m }]);
+  return /* @__PURE__ */ e.createElement("div", {
+    className: E(
+      T({ inline: l }),
+      n
+    ),
+    ...a
+  }, r);
+}
+d.set(V, {
+  name: "KeyValueSet",
+  props: {
+    inline: { type: "boolean", default: "false" }
+  }
+});
+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: [V, m],
+  examples: {
+    vertical: {
+      label: "Vertical Key Value Sets",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Use:"), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Vertical containers such as a side bar or general card")), /* @__PURE__ */ e.createElement("h5", null, "Do Not Use:"), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "In Table cells or Description Lists")), /* @__PURE__ */ e.createElement("h5", null, "Usage Rules"), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Titles must be written in Title Case"), /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Values can be written in Sentence Case or Title Case as best suits the content"), /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Titles or Values can include hyperlinks and/or icons", /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Icons should always appear on the left before any text content"))), /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Values can include tags"), /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Can include multiple values on additional lines"))),
+      examples: {
+        standard: {
+          description: () => /* @__PURE__ */ e.createElement("h4", null, "Standard"),
+          react: s`
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet>
+                  <KeyValueSetItem itemKey="Company">
+                    SPS Commerce
+                  </KeyValueSetItem>
+                </KeyValueSet>
+              )
+            }
+          `
+        },
+        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`
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet>
+                  <KeyValueSetItem itemKey="Program Requirements">
+                    Electronic Order
+                    <br />
+                    Fulfillment
+                  </KeyValueSetItem>
+                </KeyValueSet>
+              )
+            }
+          `
+        },
+        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`
+            import { Box } from "@sps-woodland/core";
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet>
+                  <KeyValueSetItem itemKey="Company">
+                    SPS Commerce
+                    <Box color="grey-medium">Minneapolis, MN</Box>
+                  </KeyValueSetItem>
+                </KeyValueSet>
+              )
+            }
+          `
+        },
+        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`
+            import { SpsTag } from "@spscommerce/ds-react";
+            import { Box } from "@sps-woodland/core";
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet>
+                  <KeyValueSetItem itemKey="Accepted Documents">
+                    <Box mt="sm" display="flex" flexWrap="wrap" gap="xs">
+                      <SpsTag>850</SpsTag>
+                      <SpsTag>855</SpsTag>
+                    </Box>
+                  </KeyValueSetItem>
+                </KeyValueSet>
+              )
+            }
+          `
+        },
+        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`
+            import { Box } from "@sps-woodland/core";
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet>
+                  <KeyValueSetItem itemKey="Company">
+                    <a href="#" target="_blank">SPS Commerce</a>
+                    <Box color="grey-medium">Minneapolis, MN</Box>
+                  </KeyValueSetItem>
+                </KeyValueSet>
+              )
+            }
+          `
+        }
+      }
+    },
+    horizontal: {
+      label: "Horizontal Key Value Sets",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Use:"), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Horizontal containers such as a content row")), /* @__PURE__ */ e.createElement("h5", null, "Do Not Use:"), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "In Table cells or Description Lists")), /* @__PURE__ */ e.createElement("h5", null, "Usage Rules"), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Titles must be written in Title Case"), /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Values can be written in Sentence Case or Title Case as best suits the content"), /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Titles or Values can include hyperlinks and/or icons", /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Icons should always appear on the left before any text content"))), /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "Can be used individually or stacked on top of one another", /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", {
+        className: "mb-2"
+      }, "When stacking, the value lists should share a common category or theme"))))),
+      examples: {
+        standard: {
+          description: () => /* @__PURE__ */ e.createElement("h4", null, "Standard"),
+          react: s`
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet inline>
+                  <KeyValueSetItem itemKey="Company">
+                    SPS Commerce
+                  </KeyValueSetItem>
+                </KeyValueSet>
+              )
+            }
+          `
+        },
+        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`
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet inline>
+                  <KeyValueSetItem itemKey="Title One">
+                    Value
+                  </KeyValueSetItem>
+                  <KeyValueSetItem itemKey="Title Two">
+                    Value that wraps to a second line
+                  </KeyValueSetItem>
+                  <KeyValueSetItem itemKey="Title Three">
+                    Value
+                  </KeyValueSetItem>
+                </KeyValueSet>
+              )
+            }
+          `
+        },
+        withLinks: {
+          description: () => /* @__PURE__ */ e.createElement("h4", null, "With Links"),
+          react: s`
+            import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+            function Component() {
+              return (
+                <KeyValueSet inline>
+                  <KeyValueSetItem itemKey="Title One">
+                    Value
+                  </KeyValueSetItem>
+                  <KeyValueSetItem itemKey="Title Two">
+                    Value that wraps to a <a href="#" target="_blank">second line</a>
+                  </KeyValueSetItem>
+                  <KeyValueSetItem itemKey="Title Three">
+                    Value
+                  </KeyValueSetItem>
+                </KeyValueSet>
+              )
+            }
+          `
+        }
+      }
+    }
+  }
+}, x = {
+  "Key Value Sets": w
+};
+export {
+  V as KeyValueSet,
+  m as KeyValueSetItem,
+  x as MANIFEST
+};

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 @@
+export declare const key: string;

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

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

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/lib/style.css

@@ -0,0 +1 @@
+._1i7enhj0{grid-template-columns:auto auto}._1i7enhj1{column-gap:.5rem;display:inline-grid;font-size:.75rem;line-height:1.125rem}._18tyj090{font-weight:600}._1i7enhj0 ._18tyj090{text-align:right}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@sps-woodland/key-value-set",
+  "description": "SPS Woodland Design System key value set component",
+  "version": "7.0.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/key-value-set",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/key-value-set#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@vanilla-extract/css": "^1.9.1",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "@spscommerce/utils": "^6.12.1",
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});