@sps-woodland/key-value-set 8.20.17 → 8.21.1

package/lib/{index.es.js → index.js}

@@ -54,7 +54,7 @@ var b = (t, n, l) => {
   for (var [S, f] of t.compoundVariants)
     b(S, a, t.defaultVariants) && (l += " " + f);
   return l;
-}, g = v({ defaultClassName: "pkg_sps-woodland_key-value-set__version_8_20_17__hash_1i7enhj1", variantClassNames: { inline: { true: "pkg_sps-woodland_key-value-set__version_8_20_17__hash_1i7enhj0" } }, defaultVariants: {}, compoundVariants: [] });
+}, g = v({ defaultClassName: "pkg_sps-woodland_key-value-set__version_8_21_1__hash_1i7enhj1", variantClassNames: { inline: { true: "pkg_sps-woodland_key-value-set__version_8_21_1__hash_1i7enhj0" } }, defaultVariants: {}, compoundVariants: [] });
 function y({
   children: t,
   className: n,
@@ -72,7 +72,7 @@ p.set(y, {
     inline: { type: "boolean", default: "false" }
   }
 });
-var I = "pkg_sps-woodland_key-value-set__version_8_20_17__hash_18tyj090";
+var I = "pkg_sps-woodland_key-value-set__version_8_21_1__hash_18tyj090";
 function V({
   children: t,
   itemKey: n,

package/lib/{index.cjs.js → index.umd.cjs}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@sps-woodland/core"),K=require("react"),s=require("@spscommerce/utils");function h(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=h(K);function b(t,n,l){return n in t?Object.defineProperty(t,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):t[n]=l,t}function y(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?y(Object(l),!0).forEach(function(a){b(t,a,l[a])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(l)):y(Object(l)).forEach(function(a){Object.defineProperty(t,a,Object.getOwnPropertyDescriptor(l,a))})}return t}var E=(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 i,d=(i=a[r])!==null&&i!==void 0?i:t.defaultVariants[r];if(d!=null){var o=d;typeof o=="boolean"&&(o=o===!0?"true":"false");var p=t.variantClassNames[r][o];p&&(l+=" "+p)}}for(var[V,f]of t.compoundVariants)E(V,a,t.defaultVariants)&&(l+=" "+f);return l},g=v({defaultClassName:"pkg_sps-woodland_key-value-set__version_8_20_17__hash_1i7enhj1",variantClassNames:{inline:{true:"pkg_sps-woodland_key-value-set__version_8_20_17__hash_1i7enhj0"}},defaultVariants:{},compoundVariants:[]});function m({children:t,className:n,inline:l,...a}){return e.createElement("div",{className:u.cl(g({inline:l}),n),...a},t)}u.Metadata.set(m,{name:"KeyValueSet",props:{inline:{type:"boolean",default:"false"}}});var I="pkg_sps-woodland_key-value-set__version_8_20_17__hash_18tyj090";function c({children:t,itemKey:n,...l}){const a=u.useChildTestIdAttrBuilder(l);return e.createElement(e.Fragment,null,e.createElement("span",{className:I,...a("key")},n),e.createElement("span",{...l},t))}u.Metadata.set(c,{name:"KeyValueSetItem",props:{itemKey:{type:"React.ReactNode | (() => React.ReactNode)",required:!0}}});const w={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:[m,c],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`
+(function(r,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):(r=typeof globalThis<"u"?globalThis:r||self,o(r.KeyValueSet={},r.core,r.React,r.utils))})(this,function(r,o,V,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(V);function h(t,n,a){return n in t?Object.defineProperty(t,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[n]=a,t}function p(t,n){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);n&&(l=l.filter(function(s){return Object.getOwnPropertyDescriptor(t,s).enumerable})),a.push.apply(a,l)}return a}function y(t){for(var n=1;n<arguments.length;n++){var a=arguments[n]!=null?arguments[n]:{};n%2?p(Object(a),!0).forEach(function(l){h(t,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):p(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 s;if(t[l]!==((s=n[l])!==null&&s!==void 0?s:a[l]))return!1}return!0},E=t=>n=>{var a=t.defaultClassName,l=y(y({},t.defaultVariants),n);for(var s in l){var d,f=(d=l[s])!==null&&d!==void 0?d:t.defaultVariants[s];if(f!=null){var i=f;typeof i=="boolean"&&(i=i===!0?"true":"false");var S=t.variantClassNames[s][i];S&&(a+=" "+S)}}for(var[w,T]of t.compoundVariants)b(w,l,t.defaultVariants)&&(a+=" "+T);return a},v=E({defaultClassName:"pkg_sps-woodland_key-value-set__version_8_21_1__hash_1i7enhj1",variantClassNames:{inline:{true:"pkg_sps-woodland_key-value-set__version_8_21_1__hash_1i7enhj0"}},defaultVariants:{},compoundVariants:[]});function m({children:t,className:n,inline:a,...l}){return e.createElement("div",{className:o.cl(v({inline:a}),n),...l},t)}o.Metadata.set(m,{name:"KeyValueSet",props:{inline:{type:"boolean",default:"false"}}});var g="pkg_sps-woodland_key-value-set__version_8_21_1__hash_18tyj090";function c({children:t,itemKey:n,...a}){const l=o.useChildTestIdAttrBuilder(a);return e.createElement(e.Fragment,null,e.createElement("span",{className:g,...l("key")},n),e.createElement("span",{...a},t))}o.Metadata.set(c,{name:"KeyValueSetItem",props:{itemKey:{type:"React.ReactNode | (() => React.ReactNode)",required:!0}}});const I={"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:[m,c],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:s.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:s.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:s.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:s.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:s.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:s.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() {
@@ -103,7 +103,7 @@
                 </div>
               )
             }
-          `},withLinks:{description:()=>e.createElement("h4",null,"With Links"),react:s.code`
+          `},withLinks:{description:()=>e.createElement("h4",null,"With Links"),react:u.code`
             import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
             
             function Component() {
@@ -125,4 +125,4 @@
                 </div>
               )
             }
-          `}}}}},N={"Key Value Sets":w};exports.KeyValueSet=m;exports.KeyValueSetItem=c;exports.MANIFEST=N;
+          `}}}}}};r.KeyValueSet=m,r.KeyValueSetItem=c,r.MANIFEST=I,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/lib/style.css

@@ -1 +1 @@
-.pkg_sps-woodland_key-value-set__version_8_20_17__hash_1i7enhj0{grid-template-columns:auto auto}.pkg_sps-woodland_key-value-set__version_8_20_17__hash_1i7enhj1{column-gap:.5rem;display:inline-grid;font-size:.75rem;line-height:1.125rem}.pkg_sps-woodland_key-value-set__version_8_20_17__hash_18tyj090{font-weight:600}.pkg_sps-woodland_key-value-set__version_8_20_17__hash_1i7enhj0 .pkg_sps-woodland_key-value-set__version_8_20_17__hash_18tyj090{text-align:right}
+.pkg_sps-woodland_key-value-set__version_8_21_1__hash_1i7enhj0{grid-template-columns:auto auto}.pkg_sps-woodland_key-value-set__version_8_21_1__hash_1i7enhj1{column-gap:.5rem;display:inline-grid;font-size:.75rem;line-height:1.125rem}.pkg_sps-woodland_key-value-set__version_8_21_1__hash_18tyj090{font-weight:600}.pkg_sps-woodland_key-value-set__version_8_21_1__hash_1i7enhj0 .pkg_sps-woodland_key-value-set__version_8_21_1__hash_18tyj090{text-align:right}

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@sps-woodland/key-value-set",
   "description": "SPS Woodland Design System key value set component",
-  "version": "8.20.17",
+  "version": "8.21.1",
   "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",
   "type": "module",
-  "module": "./lib/index.es.js",
-  "main": "./lib/index.cjs.js",
+  "module": "./lib/index.js",
+  "main": "./lib/index.umd.cjs",
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/index.es.js",
-      "require": "./lib/index.cjs.js",
-      "default": "./lib/index.cjs.js",
+      "require": "./lib/index.umd.cjs",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js",
       "types": "./lib/index.d.ts"
     },
     "./lib/style.css": {
@@ -29,8 +29,8 @@
     "@spscommerce/utils": "^7.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "8.20.17",
-    "@sps-woodland/tokens": "8.20.17"
+    "@sps-woodland/core": "8.21.1",
+    "@sps-woodland/tokens": "8.21.1"
   },
   "devDependencies": {
     "@spscommerce/utils": "^7.0.0",
@@ -38,8 +38,8 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "8.20.17",
-    "@sps-woodland/tokens": "8.20.17"
+    "@sps-woodland/core": "8.21.1",
+    "@sps-woodland/tokens": "8.21.1"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",

package/vite.config.mjs

@@ -18,8 +18,8 @@ export default defineConfig({
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
-      formats: ["es", "cjs"],
-      fileName: (format) => `index.${format}.js`,
+      name: "KeyValueSet",
+      fileName: "index",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,