@sps-woodland/tags 7.17.9 → 8.0.0

package/lib/clickable-tag/ClickableTag.css.d.ts

@@ -1,6 +1,6 @@
 import { Tokens } from "@sps-woodland/tokens";
 import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
-export type ClickableTagKind = keyof typeof Tokens.component["clickable-tag"]["kind"];
+export declare type ClickableTagKind = keyof typeof Tokens.component["clickable-tag"]["kind"];
 interface ClickableTagVariantDefinitions extends VariantDefinitions {
     kind: RecipeVariant<ClickableTagKind>;
     disabled: BooleanRecipeVariant;

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("react"),c=require("@sps-woodland/core"),i=require("@spscommerce/utils");function K(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,l.get?l:{enumerable:!0,get:()=>e[a]})}}return r.default=e,Object.freeze(r)}const s=K(w);function _(e,r,a){return r in e?Object.defineProperty(e,r,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[r]=a,e}function y(e,r){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);r&&(l=l.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),a.push.apply(a,l)}return a}function v(e){for(var r=1;r<arguments.length;r++){var a=arguments[r]!=null?arguments[r]:{};r%2?y(Object(a),!0).forEach(function(l){_(e,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):y(Object(a)).forEach(function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(a,l))})}return e}var V=(e,r,a)=>{for(var l of Object.keys(e)){var n;if(e[l]!==((n=r[l])!==null&&n!==void 0?n:a[l]))return!1}return!0},g=e=>r=>{var a=e.defaultClassName,l=v(v({},e.defaultVariants),r);for(var n in l){var m,o=(m=l[n])!==null&&m!==void 0?m:e.defaultVariants[n];if(o!=null){var t=o;typeof t=="boolean"&&(t=t===!0?"true":"false");var f=e.variantClassNames[n][t];f&&(a+=" "+f)}}for(var[p,b]of e.compoundVariants)V(p,l,e.defaultVariants)&&(a+=" "+b);return a},O=g({defaultClassName:"_160drw10",variantClassNames:{kind:{blue:"_160drw11",gray:"_160drw12"},disabled:{true:"_160drw13",false:"_160drw14"}},defaultVariants:{kind:"blue",disabled:!1},compoundVariants:[]}),E="_160drw1e",h="_160drw1d",q=g({defaultClassName:"_160drw15",variantClassNames:{link:{true:"_160drw16",false:"_160drw17"},disabled:{true:"_160drw18",false:"_160drw19"},addOrRemove:{true:"_160drw1a",false:"_160drw1b"}},defaultVariants:{link:!1,disabled:!1,addOrRemove:!1},compoundVariants:[[{disabled:!1,addOrRemove:!0},"_160drw1c"]]}),F="_160drw1f";function T({children:e,className:r,onClick:a,disabled:l,href:n,kind:m,onAdd:o,onRemove:t,...f}){const p=s.Children.toArray(e).filter(u=>typeof u=="string").join("");s.useEffect(()=>{if(t&&o)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[o,t]);function b(u){o?o():t&&t(),u.stopPropagation()}function N(u){u.stopPropagation(),a&&a(u)}return s.createElement("div",{className:c.cl(O({kind:m,disabled:l}),r),...f},s.createElement("span",{className:c.cl(q({link:!!n||!!a,disabled:l,addOrRemove:o||t})),onClick:N,title:p},n?s.createElement("a",{className:F,href:n},e):e),(o||t)&&!l&&s.createElement("div",{className:h,onClick:l?void 0:b,tabIndex:-1,"aria-label":o?"Add":"Remove"},s.createElement(c.Icon,{className:E,"aria-hidden":"true",icon:o?"plus-sign":"x"})))}c.Metadata.set(T,{name:"Clickable Tag",props:{disabled:{type:"boolean",default:"false"},href:{type:"string"},kind:{type:"ClickableTagKind",default:"blue"},onAdd:{type:"() => void"},onRemove:{type:"() => void"}}});var P=g({defaultClassName:"_5f3efi0",variantClassNames:{kind:{default:"_5f3efi1",key:"_5f3efi2",warning:"_5f3efi3",error:"_5f3efi4",pending:"_5f3efi5",success:"_5f3efi6",info:"_5f3efi7"}},defaultVariants:{kind:"default"},compoundVariants:[]}),j=g({defaultClassName:"_5f3efi8",variantClassNames:{kind:{default:"_5f3efi9",key:"_5f3efia",warning:"_5f3efib",error:"_5f3efic",pending:"_5f3efid",success:"_5f3efie",info:"_5f3efif"}},defaultVariants:{kind:"default"},compoundVariants:[]});const C=Object.freeze({default:"info-circle",key:"info-circle",warning:"status-warning",error:"status-error",pending:"status-in-process",success:"status-ok",info:"info-circle"});function d({children:e,className:r,kind:a="default",icon:l,...n}){return s.createElement("span",{className:c.cl(P({kind:a}),r),...n},l&&s.createElement(c.Icon,{className:c.cl(j({kind:a})),icon:C[a]}),e)}c.Metadata.set(d,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean",default:"false"}}});var x="c357iq0",I="c357iq1",S="c357iqc",M=g({defaultClassName:"c357iq2",variantClassNames:{href:{true:"c357iq3",false:"c357iq4"},kind:{default:"c357iq5",key:"c357iq6",warning:"c357iq7",error:"c357iq8",pending:"c357iq9",success:"c357iqa",info:"c357iqb"}},defaultVariants:{href:!1,kind:"default"},compoundVariants:[]});function k({children:e,className:r,color:a="default",href:l,icon:n,tagKey:m,value:o,...t}){return s.createElement("span",{className:c.cl(x,r),...t},s.createElement(d,{className:c.cl(I),icon:n,kind:a},m),s.createElement(d,{className:c.cl(M({href:!!l,kind:a}))},l?s.createElement("a",{className:S,href:l},o):o))}c.Metadata.set(k,{name:"Key Value Tag",props:{color:{type:"TagKind",default:"key"},href:{type:"string"},icon:{type:"boolean",default:"false"},tagKey:{type:"string",required:!0},value:{type:"string",required:!0}}});const R={components:[T],examples:{basic:{label:"Basic Tag",examples:{basic:{react:i.code`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),i=require("@sps-woodland/core"),c=require("@spscommerce/utils");function N(a){if(a&&a.__esModule)return a;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const l=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(r,e,l.get?l:{enumerable:!0,get:()=>a[e]})}}return r.default=a,Object.freeze(r)}const n=N(_);function O(a,r,e){return r in a?Object.defineProperty(a,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):a[r]=e,a}function v(a,r){var e=Object.keys(a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(a);r&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(a,t).enumerable})),e.push.apply(e,l)}return e}function C(a){for(var r=1;r<arguments.length;r++){var e=arguments[r]!=null?arguments[r]:{};r%2?v(Object(e),!0).forEach(function(l){O(a,l,e[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(e)):v(Object(e)).forEach(function(l){Object.defineProperty(a,l,Object.getOwnPropertyDescriptor(e,l))})}return a}var S=(a,r,e)=>{for(var l of Object.keys(a)){var t;if(a[l]!==((t=r[l])!==null&&t!==void 0?t:e[l]))return!1}return!0},f=a=>r=>{var e=a.defaultClassName,l=C(C({},a.defaultVariants),r);for(var t in l){var m,o=(m=l[t])!==null&&m!==void 0?m:a.defaultVariants[t];if(o!=null){var s=o;typeof s=="boolean"&&(s=s===!0?"true":"false");var u=a.variantClassNames[t][s];u&&(e+=" "+u)}}for(var[p,b]of a.compoundVariants)S(p,l,a.defaultVariants)&&(e+=" "+b);return e},E=f({defaultClassName:"_160drw10",variantClassNames:{kind:{blue:"_160drw11",gray:"_160drw12"},disabled:{true:"_160drw13",false:"_160drw14"}},defaultVariants:{kind:"blue",disabled:!1},compoundVariants:[]}),h="_160drw1e",K="_160drw1d",P=f({defaultClassName:"_160drw15",variantClassNames:{link:{true:"_160drw16",false:"_160drw17"},disabled:{true:"_160drw18",false:"_160drw19"},addOrRemove:{true:"_160drw1a",false:"_160drw1b"}},defaultVariants:{link:!1,disabled:!1,addOrRemove:!1},compoundVariants:[[{disabled:!1,addOrRemove:!0},"_160drw1c"]]}),j="_160drw1f";function T({children:a,className:r,onClick:e,disabled:l,href:t,kind:m,onAdd:o,onRemove:s,...u}){const p=n.Children.toArray(a).filter(d=>typeof d=="string").join("");n.useEffect(()=>{if(s&&o)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[o,s]);function b(d){o?o():s&&s(),d.stopPropagation()}function y(d){d.stopPropagation(),e&&e(d)}return n.createElement("div",{className:i.cl(E({kind:m,disabled:l}),r),...u},n.createElement("span",{className:i.cl(P({link:!!t||!!e,disabled:l,addOrRemove:o||s})),onClick:y,title:p},t?n.createElement("a",{className:j,href:t},a):a),(o||s)&&!l&&n.createElement("div",{className:K,onClick:l?void 0:b,tabIndex:-1,"aria-label":o?"Add":"Remove"},n.createElement(i.Icon,{className:h,"aria-hidden":"true",icon:o?"plus-sign":"x"})))}i.Metadata.set(T,{name:"Clickable Tag",props:{disabled:{type:"boolean",default:"false"},href:{type:"string"},kind:{type:"ClickableTagKind",default:"blue"},onAdd:{type:"() => void"},onRemove:{type:"() => void"}}});var x=f({defaultClassName:"_5f3efi0",variantClassNames:{kind:{default:"_5f3efi1",key:"_5f3efi2",warning:"_5f3efi3",error:"_5f3efi4",pending:"_5f3efi5",success:"_5f3efi6",info:"_5f3efi7"}},defaultVariants:{kind:"default"},compoundVariants:[]}),F=f({defaultClassName:"_5f3efi8",variantClassNames:{kind:{default:"_5f3efi9",key:"_5f3efia",warning:"_5f3efib",error:"_5f3efic",pending:"_5f3efid",success:"_5f3efie",info:"_5f3efif"}},defaultVariants:{kind:"default"},compoundVariants:[]});const w=Object.freeze({default:"info-circle",key:"info-circle",warning:"status-warning",error:"status-error",pending:"status-in-process",success:"status-ok",info:"info-circle"});function g({children:a,className:r,kind:e="default",icon:l,...t}){return n.createElement("span",{className:i.cl(x({kind:e}),r),...t},l&&n.createElement(i.Icon,{className:i.cl(F({kind:e})),icon:w[e]}),a)}i.Metadata.set(g,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean",default:"false"}}});var V="_79ofse0",I="_79ofse1",M="_79ofsec",R=f({defaultClassName:"_79ofse2",variantClassNames:{href:{true:"_79ofse3",false:"_79ofse4"},kind:{default:"_79ofse5",key:"_79ofse6",warning:"_79ofse7",error:"_79ofse8",pending:"_79ofse9",success:"_79ofsea",info:"_79ofseb"}},defaultVariants:{href:!1,kind:"default"},compoundVariants:[]});function k({children:a,className:r,color:e="default",href:l,icon:t,tagKey:m,value:o,...s}){return n.createElement("span",{className:i.cl(V,r),...s},n.createElement(g,{className:i.cl(I),icon:t,kind:e},m),n.createElement(g,{className:i.cl(R({href:!!l,kind:e}))},l?n.createElement("a",{className:M,href:l},o):o))}i.Metadata.set(k,{name:"Split Tag",props:{color:{type:"TagKind",default:"key"},href:{type:"string"},icon:{type:"boolean",default:"false"},tagKey:{type:"string",required:!0},value:{type:"string",required:!0}}});const D={components:[T],examples:{basic:{label:"Basic Tag",examples:{basic:{react:c.code`
             import { ClickableTag } from "@sps-woodland/tags";
 
             function Component() {
@@ -9,7 +9,7 @@
                 </>
               );
             }
-          `},disabled:{react:i.code`
+          `},disabled:{react:c.code`
             import { ClickableTag } from "@sps-woodland/tags";
     
             function Component() {
@@ -19,7 +19,7 @@
                 </>
               );
             }
-          `}}},button:{label:"Button",examples:{remove:{react:i.code`
+          `}}},button:{label:"Button",examples:{remove:{react:c.code`
             import { ClickableTag } from "@sps-woodland/tags";
 
             function Component() {
@@ -30,7 +30,7 @@
                 </>
               );
             }
-          `},add:{react:i.code`
+          `},add:{react:c.code`
             import { ClickableTag } from "@sps-woodland/tags";
 
             function Component() {
@@ -41,7 +41,7 @@
                 </>
               );
             }
-          `}}},link:{label:"Link",examples:{basic:{react:i.code`
+          `}}},link:{label:"Link",examples:{basic:{react:c.code`
             import { ClickableTag } from "@sps-woodland/tags";
 
             function Component() {
@@ -52,7 +52,7 @@
                 </>
               );
             }
-          `},button:{react:i.code`
+          `},button:{react:c.code`
             import { ClickableTag } from "@sps-woodland/tags";
 
             function Component() {
@@ -63,7 +63,7 @@
                 </>
               );
             }
-          `}}}}},D={components:[d],examples:{basic:{label:"Basic Tag",examples:{basic:{react:i.code`
+          `}}}}},L={components:[g],examples:{basic:{label:"Basic Tag",examples:{basic:{react:c.code`
             import { Tag } from "@sps-woodland/tag";
 
             function Component() {
@@ -79,7 +79,7 @@
                 </>
               )
             }
-          `}}},withIcon:{label:"Tag with icon",examples:{basic:{react:i.code`
+          `}}},withIcon:{label:"Tag with icon",examples:{basic:{react:c.code`
             import { Tag } from "@sps-woodland/tag";
 
             function Component() {
@@ -95,44 +95,42 @@
                 </>
               )
             }
-          `}}}}},L={components:[k],examples:{basic:{label:"Basic",examples:{basic:{react:i.code`
-            import { KeyValueTag } from "@sps-woodland/tag";
+          `}}}}},q={components:[k],examples:{basic:{label:"Basic",examples:{basic:{react:c.code`
+            import { SplitTag } from "@sps-woodland/tag";
 
             function Component() {
               return (
                 <>
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="default" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="key" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="warning" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="error" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="pending" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="success" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="info" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="key" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="warning" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="error" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="pending" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="success" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="info" />
                 </>
               );
             }
-          `}}},icon:{label:"Icon",examples:{basic:{react:i.code`
-            import { KeyValueTag } from "@sps-woodland/tag";
+          `}}},icon:{label:"Icon",examples:{basic:{react:c.code`
+            import { SplitTag } from "@sps-woodland/tag";
 
             function Component() {
               return (
                 <>
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="default" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="key" icon />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="warning" icon />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="error" icon />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="pending" icon />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="success" icon />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="info" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="key" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="warning" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="error" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="pending" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="success" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="info" icon />
                 </>
               );
             }
-          `}}},link:{label:"Link",examples:{basic:{react:i.code`
-            import { KeyValueTag } from "@sps-woodland/tag";
+          `}}},link:{label:"Link",examples:{basic:{react:c.code`
+            import { SplitTag } from "@sps-woodland/tag";
 
             function Component() {
               return (
-                <KeyValueTag tagKey="Foo" value="1234" href="https://www.google.com" />
+                <SplitTag tagKey="Foo" value="1234" icon href="https://www.google.com" />
               );
             }
-          `}}}}},B={"Clickable Tags":R,Tags:D,"Key Value Tags":L};exports.ClickableTag=T;exports.KeyValueTag=k;exports.MANIFEST=B;exports.Tag=d;exports.TagIcons=C;
+          `}}}}},B={"Clickable Tags":D,Tags:L,"Split Tags":q};exports.ClickableTag=T;exports.MANIFEST=B;exports.SplitTag=k;exports.Tag=g;exports.TagIcons=w;

package/lib/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./clickable-tag/ClickableTag";
-export * from "./key-value-tag/KeyValueTag";
+export * from "./split-tag/SplitTag";
 export * from "./tag/Tag";
 export * from "./manifest";

package/lib/index.es.js

@@ -1,7 +1,7 @@
-import * as t from "react";
-import { Metadata as b, cl as m, Icon as v } from "@sps-woodland/core";
+import * as o from "react";
+import { Metadata as T, cl as m, Icon as C } from "@sps-woodland/core";
 import { code as i } from "@spscommerce/utils";
-function K(a, r, e) {
+function _(a, r, e) {
   return r in a ? Object.defineProperty(a, r, {
     value: e,
     enumerable: !0,
@@ -13,95 +13,95 @@ function k(a, r) {
   var e = Object.keys(a);
   if (Object.getOwnPropertySymbols) {
     var l = Object.getOwnPropertySymbols(a);
-    r && (l = l.filter(function(n) {
-      return Object.getOwnPropertyDescriptor(a, n).enumerable;
+    r && (l = l.filter(function(s) {
+      return Object.getOwnPropertyDescriptor(a, s).enumerable;
     })), e.push.apply(e, l);
   }
   return e;
 }
-function y(a) {
+function v(a) {
   for (var r = 1; r < arguments.length; r++) {
     var e = arguments[r] != null ? arguments[r] : {};
     r % 2 ? k(Object(e), !0).forEach(function(l) {
-      K(a, l, e[l]);
+      _(a, l, e[l]);
     }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(e)) : k(Object(e)).forEach(function(l) {
       Object.defineProperty(a, l, Object.getOwnPropertyDescriptor(e, l));
     });
   }
   return a;
 }
-var V = (a, r, e) => {
+var O = (a, r, e) => {
   for (var l of Object.keys(a)) {
-    var n;
-    if (a[l] !== ((n = r[l]) !== null && n !== void 0 ? n : e[l]))
+    var s;
+    if (a[l] !== ((s = r[l]) !== null && s !== void 0 ? s : e[l]))
       return !1;
   }
   return !0;
-}, u = (a) => (r) => {
-  var e = a.defaultClassName, l = y(y({}, a.defaultVariants), r);
-  for (var n in l) {
-    var c, s = (c = l[n]) !== null && c !== void 0 ? c : a.defaultVariants[n];
-    if (s != null) {
-      var o = s;
-      typeof o == "boolean" && (o = o === !0 ? "true" : "false");
-      var d = a.variantClassNames[n][o];
+}, f = (a) => (r) => {
+  var e = a.defaultClassName, l = v(v({}, a.defaultVariants), r);
+  for (var s in l) {
+    var c, t = (c = l[s]) !== null && c !== void 0 ? c : a.defaultVariants[s];
+    if (t != null) {
+      var n = t;
+      typeof n == "boolean" && (n = n === !0 ? "true" : "false");
+      var d = a.variantClassNames[s][n];
       d && (e += " " + d);
     }
   }
-  for (var [p, T] of a.compoundVariants)
-    V(p, l, a.defaultVariants) && (e += " " + T);
+  for (var [u, b] of a.compoundVariants)
+    O(u, l, a.defaultVariants) && (e += " " + b);
   return e;
-}, _ = u({ defaultClassName: "_160drw10", variantClassNames: { kind: { blue: "_160drw11", gray: "_160drw12" }, disabled: { true: "_160drw13", false: "_160drw14" } }, defaultVariants: { kind: "blue", disabled: !1 }, compoundVariants: [] }), O = "_160drw1e", E = "_160drw1d", h = u({ defaultClassName: "_160drw15", variantClassNames: { link: { true: "_160drw16", false: "_160drw17" }, disabled: { true: "_160drw18", false: "_160drw19" }, addOrRemove: { true: "_160drw1a", false: "_160drw1b" } }, defaultVariants: { link: !1, disabled: !1, addOrRemove: !1 }, compoundVariants: [[{ disabled: !1, addOrRemove: !0 }, "_160drw1c"]] }), x = "_160drw1f";
-function C({
+}, S = f({ defaultClassName: "_160drw10", variantClassNames: { kind: { blue: "_160drw11", gray: "_160drw12" }, disabled: { true: "_160drw13", false: "_160drw14" } }, defaultVariants: { kind: "blue", disabled: !1 }, compoundVariants: [] }), E = "_160drw1e", h = "_160drw1d", K = f({ defaultClassName: "_160drw15", variantClassNames: { link: { true: "_160drw16", false: "_160drw17" }, disabled: { true: "_160drw18", false: "_160drw19" }, addOrRemove: { true: "_160drw1a", false: "_160drw1b" } }, defaultVariants: { link: !1, disabled: !1, addOrRemove: !1 }, compoundVariants: [[{ disabled: !1, addOrRemove: !0 }, "_160drw1c"]] }), x = "_160drw1f";
+function w({
   children: a,
   className: r,
   onClick: e,
   disabled: l,
-  href: n,
+  href: s,
   kind: c,
-  onAdd: s,
-  onRemove: o,
+  onAdd: t,
+  onRemove: n,
   ...d
 }) {
-  const p = t.Children.toArray(a).filter((g) => typeof g == "string").join("");
-  t.useEffect(() => {
-    if (o && s)
+  const u = o.Children.toArray(a).filter((g) => typeof g == "string").join("");
+  o.useEffect(() => {
+    if (n && t)
       throw new Error("Clickable tag should have onRemove or onAdd, not both");
-  }, [s, o]);
-  function T(g) {
-    s ? s() : o && o(), g.stopPropagation();
+  }, [t, n]);
+  function b(g) {
+    t ? t() : n && n(), g.stopPropagation();
   }
-  function w(g) {
+  function y(g) {
     g.stopPropagation(), e && e(g);
   }
-  return /* @__PURE__ */ t.createElement("div", {
-    className: m(_({ kind: c, disabled: l }), r),
+  return /* @__PURE__ */ o.createElement("div", {
+    className: m(S({ kind: c, disabled: l }), r),
     ...d
-  }, /* @__PURE__ */ t.createElement("span", {
+  }, /* @__PURE__ */ o.createElement("span", {
     className: m(
-      h({
-        link: !!n || !!e,
+      K({
+        link: !!s || !!e,
         disabled: l,
-        addOrRemove: s || o
+        addOrRemove: t || n
       })
     ),
-    onClick: w,
-    title: p
-  }, n ? /* @__PURE__ */ t.createElement("a", {
+    onClick: y,
+    title: u
+  }, s ? /* @__PURE__ */ o.createElement("a", {
     className: x,
-    href: n
-  }, a) : a), (s || o) && !l && /* @__PURE__ */ t.createElement("div", {
-    className: E,
-    onClick: l ? void 0 : T,
+    href: s
+  }, a) : a), (t || n) && !l && /* @__PURE__ */ o.createElement("div", {
+    className: h,
+    onClick: l ? void 0 : b,
     tabIndex: -1,
-    "aria-label": s ? "Add" : "Remove"
-  }, /* @__PURE__ */ t.createElement(v, {
-    className: O,
+    "aria-label": t ? "Add" : "Remove"
+  }, /* @__PURE__ */ o.createElement(C, {
+    className: E,
     "aria-hidden": "true",
-    icon: s ? "plus-sign" : "x"
+    icon: t ? "plus-sign" : "x"
   })));
 }
-b.set(C, {
+T.set(w, {
   name: "Clickable Tag",
   props: {
     disabled: { type: "boolean", default: "false" },
@@ -111,7 +111,7 @@ b.set(C, {
     onRemove: { type: "() => void" }
   }
 });
-var F = u({ defaultClassName: "_5f3efi0", variantClassNames: { kind: { default: "_5f3efi1", key: "_5f3efi2", warning: "_5f3efi3", error: "_5f3efi4", pending: "_5f3efi5", success: "_5f3efi6", info: "_5f3efi7" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), q = u({ defaultClassName: "_5f3efi8", variantClassNames: { kind: { default: "_5f3efi9", key: "_5f3efia", warning: "_5f3efib", error: "_5f3efic", pending: "_5f3efid", success: "_5f3efie", info: "_5f3efif" } }, defaultVariants: { kind: "default" }, compoundVariants: [] });
+var F = f({ defaultClassName: "_5f3efi0", variantClassNames: { kind: { default: "_5f3efi1", key: "_5f3efi2", warning: "_5f3efi3", error: "_5f3efi4", pending: "_5f3efi5", success: "_5f3efi6", info: "_5f3efi7" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), V = f({ defaultClassName: "_5f3efi8", variantClassNames: { kind: { default: "_5f3efi9", key: "_5f3efia", warning: "_5f3efib", error: "_5f3efic", pending: "_5f3efid", success: "_5f3efie", info: "_5f3efif" } }, defaultVariants: { kind: "default" }, compoundVariants: [] });
 const P = Object.freeze({
   default: "info-circle",
   key: "info-circle",
@@ -121,55 +121,55 @@ const P = Object.freeze({
   success: "status-ok",
   info: "info-circle"
 });
-function f({
+function p({
   children: a,
   className: r,
   kind: e = "default",
   icon: l,
-  ...n
+  ...s
 }) {
-  return /* @__PURE__ */ t.createElement("span", {
+  return /* @__PURE__ */ o.createElement("span", {
     className: m(F({ kind: e }), r),
-    ...n
-  }, l && /* @__PURE__ */ t.createElement(v, {
-    className: m(q({ kind: e })),
+    ...s
+  }, l && /* @__PURE__ */ o.createElement(C, {
+    className: m(V({ kind: e })),
     icon: P[e]
   }), a);
 }
-b.set(f, {
+T.set(p, {
   name: "Tag",
   props: {
     kind: { type: "TagKind", default: "default" },
     icon: { type: "boolean", default: "false" }
   }
 });
-var j = "c357iq0", I = "c357iq1", R = "c357iqc", D = u({ defaultClassName: "c357iq2", variantClassNames: { href: { true: "c357iq3", false: "c357iq4" }, kind: { default: "c357iq5", key: "c357iq6", warning: "c357iq7", error: "c357iq8", pending: "c357iq9", success: "c357iqa", info: "c357iqb" } }, defaultVariants: { href: !1, kind: "default" }, compoundVariants: [] });
+var j = "_79ofse0", I = "_79ofse1", R = "_79ofsec", D = f({ defaultClassName: "_79ofse2", variantClassNames: { href: { true: "_79ofse3", false: "_79ofse4" }, kind: { default: "_79ofse5", key: "_79ofse6", warning: "_79ofse7", error: "_79ofse8", pending: "_79ofse9", success: "_79ofsea", info: "_79ofseb" } }, defaultVariants: { href: !1, kind: "default" }, compoundVariants: [] });
 function N({
   children: a,
   className: r,
   color: e = "default",
   href: l,
-  icon: n,
+  icon: s,
   tagKey: c,
-  value: s,
-  ...o
+  value: t,
+  ...n
 }) {
-  return /* @__PURE__ */ t.createElement("span", {
+  return /* @__PURE__ */ o.createElement("span", {
     className: m(j, r),
-    ...o
-  }, /* @__PURE__ */ t.createElement(f, {
+    ...n
+  }, /* @__PURE__ */ o.createElement(p, {
     className: m(I),
-    icon: n,
+    icon: s,
     kind: e
-  }, c), /* @__PURE__ */ t.createElement(f, {
+  }, c), /* @__PURE__ */ o.createElement(p, {
     className: m(D({ href: !!l, kind: e }))
-  }, l ? /* @__PURE__ */ t.createElement("a", {
+  }, l ? /* @__PURE__ */ o.createElement("a", {
     className: R,
     href: l
-  }, s) : s));
+  }, t) : t));
 }
-b.set(N, {
-  name: "Key Value Tag",
+T.set(N, {
+  name: "Split Tag",
   props: {
     color: { type: "TagKind", default: "key" },
     href: { type: "string" },
@@ -179,7 +179,7 @@ b.set(N, {
   }
 });
 const L = {
-  components: [C],
+  components: [w],
   examples: {
     basic: {
       label: "Basic Tag",
@@ -281,7 +281,7 @@ const L = {
     }
   }
 }, B = {
-  components: [f],
+  components: [p],
   examples: {
     basic: {
       label: "Basic Tag",
@@ -332,7 +332,7 @@ const L = {
       }
     }
   }
-}, S = {
+}, A = {
   components: [N],
   examples: {
     basic: {
@@ -340,18 +340,17 @@ const L = {
       examples: {
         basic: {
           react: i`
-            import { KeyValueTag } from "@sps-woodland/tag";
+            import { SplitTag } from "@sps-woodland/tag";
 
             function Component() {
               return (
                 <>
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="default" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="key" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="warning" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="error" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="pending" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="success" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="info" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="key" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="warning" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="error" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="pending" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="success" />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="info" />
                 </>
               );
             }
@@ -364,18 +363,17 @@ const L = {
       examples: {
         basic: {
           react: i`
-            import { KeyValueTag } from "@sps-woodland/tag";
+            import { SplitTag } from "@sps-woodland/tag";
 
             function Component() {
               return (
                 <>
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="default" />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="key" icon />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="warning" icon />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="error" icon />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="pending" icon />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="success" icon />
-                  <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="info" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="key" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="warning" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="error" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="pending" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="success" icon />
+                  <SplitTag className="mr-1" tagKey="Foo" value="1234" color="info" icon />
                 </>
               );
             }
@@ -388,11 +386,11 @@ const L = {
       examples: {
         basic: {
           react: i`
-            import { KeyValueTag } from "@sps-woodland/tag";
+            import { SplitTag } from "@sps-woodland/tag";
 
             function Component() {
               return (
-                <KeyValueTag tagKey="Foo" value="1234" href="https://www.google.com" />
+                <SplitTag tagKey="Foo" value="1234" icon href="https://www.google.com" />
               );
             }
           `
@@ -403,12 +401,12 @@ const L = {
 }, M = {
   "Clickable Tags": L,
   Tags: B,
-  "Key Value Tags": S
+  "Split Tags": A
 };
 export {
-  C as ClickableTag,
-  N as KeyValueTag,
+  w as ClickableTag,
   M as MANIFEST,
-  f as Tag,
+  N as SplitTag,
+  p as Tag,
   P as TagIcons
 };

package/lib/{key-value-tag/KeyValueTag.css.d.ts → split-tag/SplitTag.css.d.ts}

@@ -1,6 +1,6 @@
-export declare const keyValueTag: string;
-export declare const keyValueTagKey: string;
-export declare const keyValueTagValue: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+export declare const splitTag: string;
+export declare const splitTagKey: string;
+export declare const splitTagValue: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
     href: {
         true: {
             cursor: "pointer";
@@ -31,4 +31,4 @@ export declare const keyValueTagValue: import("@vanilla-extract/recipes/dist/dec
         };
     };
 }>;
-export declare const keyValueTagLink: string;
+export declare const splitTagLink: string;

package/lib/{key-value-tag/KeyValueTag.d.ts → split-tag/SplitTag.d.ts}

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ComponentProps } from "@sps-woodland/core";
 import type { TagKind } from "../tag/Tag";
-export declare function KeyValueTag({ children, className, color, href, icon, tagKey, value, ...rest }: ComponentProps<{
+export declare function SplitTag({ children, className, color, href, icon, tagKey, value, ...rest }: ComponentProps<{
     color: TagKind;
     href?: string;
     icon?: boolean;

package/lib/{key-value-tag/KeyValueTag.examples.d.ts → split-tag/SplitTag.examples.d.ts}

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

package/lib/style.css

@@ -1 +1 @@
-._160drw10{border-radius:.125rem;display:inline-flex;color:#09638d;font-size:.75rem;font-weight:600;height:1.125rem;line-height:.75rem;max-width:100%}._160drw11{background-color:#e6f2f8}._160drw12{background-color:#e9e9ea}._160drw13{background-color:#fff;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;color:#717779;cursor:not-allowed}._160drw15{border-radius:.125rem;flex-grow:1;flex-shrink:1;height:1.125rem;overflow:hidden;padding:.125rem .25rem;text-overflow:ellipsis;white-space:nowrap}._160drw16{cursor:pointer;text-decoration:underline}._160drw16:hover{color:#e6f2f8;background-color:#09638d;border-radius:.125rem}._160drw1c{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}._160drw1d{border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;color:#09638d;height:1.125rem;line-height:.75rem;padding:.125rem .25rem}._160drw1d:focus,._160drw1d:hover{background-color:#09638d;color:#e6f2f8;cursor:pointer}._160drw1e{cursor:pointer;font-size:.625rem;position:relative;text-decoration:none;top:-.0625rem;vertical-align:middle}span>._160drw1f{color:#09638d}span:hover>._160drw1f{color:#e6f2f8}._5f3efi0{border-radius:.125rem;display:inline-block;font-size:.75rem;font-weight:600;line-height:.75rem;overflow:hidden;padding:.125rem .25rem;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}._5f3efi1{background:#e9e9ea;color:#4b5356}._5f3efi2{background:#4b5356;color:#fff}._5f3efi3{background:#e7760b;color:#fff}._5f3efi4{background:#de002e;color:#fff}._5f3efi5{background:#91467f;color:#fff}._5f3efi6{background:#0b8940;color:#fff}._5f3efi7{background:#007db8;color:#fff}._5f3efi8{font-size:.75rem;line-height:.625rem;margin-right:.25rem}._5f3efi8:before{vertical-align:text-bottom}._5f3efi9{display:none}.c357iq0{display:inline-block}.c357iq1{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}.c357iq2{background:#ffffff;border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;padding:.125rem .25rem;box-shadow:.0625rem 0 #e9e9ea inset,-.0625rem 0 #e9e9ea inset,0 .0625rem #e9e9ea inset,0 -.0625rem #e9e9ea inset}.c357iq3{cursor:pointer;text-decoration:underline;color:#4b5356}.c357iq6{box-shadow:.0625rem 0 #4b5356 inset,-.0625rem 0 #4b5356 inset,0 .0625rem #4b5356 inset,0 -.0625rem #4b5356 inset}.c357iq7{box-shadow:.0625rem 0 #e7760b inset,-.0625rem 0 #e7760b inset,0 .0625rem #e7760b inset,0 -.0625rem #e7760b inset}.c357iq8{box-shadow:.0625rem 0 #de002e inset,-.0625rem 0 #de002e inset,0 .0625rem #de002e inset,0 -.0625rem #de002e inset}.c357iq9{box-shadow:.0625rem 0 #91467f inset,-.0625rem 0 #91467f inset,0 .0625rem #91467f inset,0 -.0625rem #91467f inset}.c357iqa{box-shadow:.0625rem 0 #0b8940 inset,-.0625rem 0 #0b8940 inset,0 .0625rem #0b8940 inset,0 -.0625rem #0b8940 inset}.c357iqb{box-shadow:.0625rem 0 #007db8 inset,-.0625rem 0 #007db8 inset,0 .0625rem #007db8 inset,0 -.0625rem #007db8 inset}.c357iqc,.c357iqc:hover{color:#4b5356}
+._160drw10{border-radius:.125rem;display:inline-flex;color:#09638d;font-size:.75rem;font-weight:600;height:1.125rem;line-height:.75rem;max-width:100%}._160drw11{background-color:#e6f2f8}._160drw12{background-color:#e9e9ea}._160drw13{background-color:#fff;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;color:#717779;cursor:not-allowed}._160drw15{border-radius:.125rem;flex-grow:1;flex-shrink:1;height:1.125rem;overflow:hidden;padding:.125rem .25rem;text-overflow:ellipsis;white-space:nowrap}._160drw16{cursor:pointer;text-decoration:underline}._160drw16:hover{color:#e6f2f8;background-color:#09638d;border-radius:.125rem}._160drw1c{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}._160drw1d{border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;color:#09638d;height:1.125rem;line-height:.75rem;padding:.125rem .25rem}._160drw1d:focus,._160drw1d:hover{background-color:#09638d;color:#e6f2f8;cursor:pointer}._160drw1e{cursor:pointer;font-size:.625rem;position:relative;text-decoration:none;top:-.0625rem;vertical-align:middle}span>._160drw1f{color:#09638d}span:hover>._160drw1f{color:#e6f2f8}._5f3efi0{border-radius:.125rem;display:inline-block;font-size:.75rem;font-weight:600;line-height:.75rem;overflow:hidden;padding:.125rem .25rem;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}._5f3efi1{background:#e9e9ea;color:#4b5356}._5f3efi2{background:#4b5356;color:#fff}._5f3efi3{background:#e7760b;color:#fff}._5f3efi4{background:#de002e;color:#fff}._5f3efi5{background:#91467f;color:#fff}._5f3efi6{background:#0b8940;color:#fff}._5f3efi7{background:#007db8;color:#fff}._5f3efi8{font-size:.75rem;line-height:.625rem;margin-right:.25rem}._5f3efi8:before{vertical-align:text-bottom}._5f3efi9{display:none}._79ofse0{display:inline-block}._79ofse1{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}._79ofse2{background:#ffffff;border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;padding:.125rem .25rem;box-shadow:.0625rem 0 #e9e9ea inset,-.0625rem 0 #e9e9ea inset,0 .0625rem #e9e9ea inset,0 -.0625rem #e9e9ea inset}._79ofse3{cursor:pointer;text-decoration:underline;color:#4b5356}._79ofse6{box-shadow:.0625rem 0 #4b5356 inset,-.0625rem 0 #4b5356 inset,0 .0625rem #4b5356 inset,0 -.0625rem #4b5356 inset}._79ofse7{box-shadow:.0625rem 0 #e7760b inset,-.0625rem 0 #e7760b inset,0 .0625rem #e7760b inset,0 -.0625rem #e7760b inset}._79ofse8{box-shadow:.0625rem 0 #de002e inset,-.0625rem 0 #de002e inset,0 .0625rem #de002e inset,0 -.0625rem #de002e inset}._79ofse9{box-shadow:.0625rem 0 #91467f inset,-.0625rem 0 #91467f inset,0 .0625rem #91467f inset,0 -.0625rem #91467f inset}._79ofsea{box-shadow:.0625rem 0 #0b8940 inset,-.0625rem 0 #0b8940 inset,0 .0625rem #0b8940 inset,0 -.0625rem #0b8940 inset}._79ofseb{box-shadow:.0625rem 0 #007db8 inset,-.0625rem 0 #007db8 inset,0 .0625rem #007db8 inset,0 -.0625rem #007db8 inset}._79ofsec,._79ofsec:hover{color:#4b5356}

package/lib/tag/Tag.d.ts

@@ -3,7 +3,7 @@ import type { ComponentProps } from "@sps-woodland/core";
 import type { IconName } from "@sps-woodland/tokens";
 import type { RecipeVariants } from "@vanilla-extract/recipes";
 import { tag } from "./Tag.css";
-export type TagKind = Required<NonNullable<RecipeVariants<typeof tag>>>["kind"];
+export declare type TagKind = Required<NonNullable<RecipeVariants<typeof tag>>>["kind"];
 export declare const TagIcons: Record<TagKind, IconName>;
 export declare function Tag({ children, className, kind, icon, ...rest }: ComponentProps<{
     kind?: TagKind;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/tags",
   "description": "SPS Woodland Design System tag components",
-  "version": "7.17.9",
+  "version": "8.0.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
@@ -29,8 +29,8 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "7.17.9",
-    "@sps-woodland/tokens": "7.17.9"
+    "@sps-woodland/core": "8.0.0",
+    "@sps-woodland/tokens": "8.0.0"
   },
   "devDependencies": {
     "@spscommerce/utils": "^6.12.1",
@@ -38,8 +38,8 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "7.17.9",
-    "@sps-woodland/tokens": "7.17.9"
+    "@sps-woodland/core": "8.0.0",
+    "@sps-woodland/tokens": "8.0.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",