@sps-woodland/tags 7.0.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/tags](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/tags#readme)
+
+SPS Woodland Design System tag components

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

@@ -0,0 +1,15 @@
+import { Tokens } from "@sps-woodland/tokens";
+import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
+export declare type ClickableTagKind = keyof typeof Tokens.component["clickable-tag"]["kind"];
+interface ClickableTagVariantDefinitions extends VariantDefinitions {
+    kind: RecipeVariant<ClickableTagKind>;
+    disabled: BooleanRecipeVariant;
+    link: BooleanRecipeVariant;
+    addOrRemove: BooleanRecipeVariant;
+}
+export declare const clickableTag: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ClickableTagVariantDefinitions, "kind" | "disabled">>;
+export declare const clickableTagLabel: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Omit<ClickableTagVariantDefinitions, "kind">>;
+export declare const clickableTagIconWrapper: string;
+export declare const clickableTagIcon: string;
+export declare const clickableTagLink: string;
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+import type { ClickableTagKind } from "./ClickableTag.css";
+export declare function ClickableTag({ children, className, onClick, disabled, href, kind, onAdd, onRemove, ...rest }: ComponentProps<{
+    disabled?: boolean;
+    href?: string;
+    kind?: ClickableTagKind;
+    onAdd?: () => void;
+    onRemove?: () => void;
+}, HTMLDivElement>): React.ReactElement;

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

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

package/lib/index.cjs.js

@@ -0,0 +1,136 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const N=require("react"),c=require("@sps-woodland/core"),i=require("@spscommerce/utils");function _(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=_(N);function K(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){K(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},d=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=d({defaultClassName:"_160drw10",variantClassNames:{kind:{blue:"_160drw11",gray:"_160drw12"},disabled:{true:"_160drw13",false:"_160drw14"}},defaultVariants:{kind:"blue",disabled:!1},compoundVariants:[]}),E="_160drw1e",h="_160drw1d",P=d({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:e,className:r,onClick:a,disabled:l,href:n,kind:m,onAdd:o,onRemove:t,...f}){const p=s.Children.toArray(e).filter(g=>typeof g=="string").join("");s.useEffect(()=>{if(t&&o)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[o,t]);function b(g){o?o():t&&t(),g.stopPropagation()}function w(g){g.stopPropagation(),a&&a(g)}return s.createElement("div",{className:c.cl(O({kind:m,disabled:l}),r),...f},s.createElement("span",{className:c.cl(P({link:n||a,disabled:l,addOrRemove:o||t})),onClick:w,title:p},n?s.createElement("a",{className:j,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 x=d({defaultClassName:"_5f3efi0",variantClassNames:{kind:{default:"_5f3efi1",key:"_5f3efi2",warning:"_5f3efi3",error:"_5f3efi4",pending:"_5f3efi5",success:"_5f3efi6",info:"_5f3efi7"}},defaultVariants:{kind:"default"},compoundVariants:[]}),F=d({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 u({children:e,className:r,kind:a="default",icon:l,...n}){return s.createElement("span",{className:c.cl(x({kind:a}),r),...n},l&&s.createElement(c.Icon,{className:c.cl(F({kind:a})),icon:C[a]}),e)}c.Metadata.set(u,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean",default:"false"}}});var I="c357iq0",q="c357iq1",S="c357iq5",M=d({defaultClassName:"c357iq2",variantClassNames:{href:{true:"c357iq3",false:"c357iq4"}},defaultVariants:{href:!1},compoundVariants:[]});function k({children:e,className:r,color:a="key",href:l,icon:n,tagKey:m,value:o,...t}){return s.createElement("span",{className:c.cl(I,r),...t},s.createElement(u,{className:c.cl(q),icon:n,kind:a},m),s.createElement(u,{className:c.cl(M({href:!!l}))},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`
+            import { ClickableTag } from "@sps-woodland/tags";
+
+            function Component() {
+              return (
+                <>
+                  <ClickableTag className="mr-1">Blue</ClickableTag>
+                  <ClickableTag className="mr-1" kind="gray">Gray</ClickableTag>
+                </>
+              );
+            }
+          `},disabled:{react:i.code`
+            import { ClickableTag } from "@sps-woodland/tags";
+    
+            function Component() {
+              return (
+                <>
+                  <ClickableTag disabled>Disabled</ClickableTag>
+                </>
+              );
+            }
+          `}}},button:{label:"Button",examples:{remove:{react:i.code`
+            import { ClickableTag } from "@sps-woodland/tags";
+
+            function Component() {
+              return (
+                <>
+                  <ClickableTag className="mr-1" onRemove={() => console.log("removed")}>One</ClickableTag>
+                  <ClickableTag className="mr-1" onRemove={() => console.log("removed")} kind="gray">Two</ClickableTag>
+                </>
+              );
+            }
+          `},add:{react:i.code`
+            import { ClickableTag } from "@sps-woodland/tags";
+
+            function Component() {
+              return (
+                <>
+                  <ClickableTag className="mr-1" onAdd={() => console.log("added")}>One</ClickableTag>
+                  <ClickableTag className="mr-1" onAdd={() => console.log("added")} kind="gray">Two</ClickableTag>
+                </>
+              );
+            }
+          `}}},link:{label:"Link",examples:{basic:{react:i.code`
+            import { ClickableTag } from "@sps-woodland/tags";
+
+            function Component() {
+              return (
+                <>
+                  <ClickableTag className="mr-1" href="https://google.com">Link</ClickableTag>
+                  <ClickableTag className="mr-1" onClick={() => window.alert("hi")} kind="gray">Link</ClickableTag>
+                </>
+              );
+            }
+          `},button:{react:i.code`
+            import { ClickableTag } from "@sps-woodland/tags";
+
+            function Component() {
+              return (
+                <>
+                  <ClickableTag className="mr-1" href="https://google.com" onRemove={() => console.log("removed")}>Remove</ClickableTag>
+                  <ClickableTag className="mr-1" onClick={() => window.alert("hi")} onAdd={() => console.log("added")} kind="gray">Add</ClickableTag>
+                </>
+              );
+            }
+          `}}}}},D={components:[u],examples:{basic:{label:"Basic Tag",examples:{basic:{react:i.code`
+            import { Tag } from "@sps-woodland/tag";
+
+            function Component() {
+              return (
+                <>
+                  <Tag className="mr-1 mb-1">Default</Tag>
+                  <Tag className="mr-1 mb-1" kind="key">Key</Tag>
+                  <Tag className="mr-1 mb-1" kind="warning">Warning</Tag>
+                  <Tag className="mr-1 mb-1" kind="error">Error</Tag>
+                  <Tag className="mr-1 mb-1" kind="pending">Pending</Tag>
+                  <Tag className="mr-1 mb-1" kind="success">Success</Tag>
+                  <Tag className="mr-1 mb-1" kind="info">Info</Tag>
+                </>
+              )
+            }
+          `}}},withIcon:{label:"Tag with icon",examples:{basic:{react:i.code`
+            import { Tag } from "@sps-woodland/tag";
+
+            function Component() {
+              return (
+                <>
+                  <Tag className="mr-1 mb-1" icon>Default</Tag>
+                  <Tag className="mr-1 mb-1" kind="key" icon>Key</Tag>
+                  <Tag className="mr-1 mb-1" kind="warning" icon>Warning</Tag>
+                  <Tag className="mr-1 mb-1" kind="error" icon>Error</Tag>
+                  <Tag className="mr-1 mb-1" kind="pending" icon>Pending</Tag>
+                  <Tag className="mr-1 mb-1" kind="success" icon>Success</Tag>
+                  <Tag className="mr-1 mb-1" kind="info" icon>Info</Tag>
+                </>
+              )
+            }
+          `}}}}},L={components:[k],examples:{basic:{label:"Basic",examples:{basic:{react:i.code`
+            import { KeyValueTag } from "@sps-woodland/tag";
+
+            function Component() {
+              return (
+                <>
+                  <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" />
+                </>
+              );
+            }
+          `}}},icon:{label:"Icon",examples:{basic:{react:i.code`
+            import { KeyValueTag } from "@sps-woodland/tag";
+
+            function Component() {
+              return (
+                <>
+                  <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 />
+                </>
+              );
+            }
+          `}}},link:{label:"Link",examples:{basic:{react:i.code`
+            import { KeyValueTag } from "@sps-woodland/tag";
+
+            function Component() {
+              return (
+                <KeyValueTag 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=u;exports.TagIcons=C;

package/lib/index.d.ts

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

package/lib/index.es.js

@@ -0,0 +1,412 @@
+import * as t from "react";
+import { Metadata as b, cl as m, Icon as v } from "@sps-woodland/core";
+import { code as i } from "@spscommerce/utils";
+function K(a, r, e) {
+  return r in a ? Object.defineProperty(a, r, {
+    value: e,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : a[r] = e, a;
+}
+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;
+    })), e.push.apply(e, l);
+  }
+  return e;
+}
+function y(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]);
+    }) : 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) => {
+  for (var l of Object.keys(a)) {
+    var n;
+    if (a[l] !== ((n = r[l]) !== null && n !== void 0 ? n : 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];
+      d && (e += " " + d);
+    }
+  }
+  for (var [p, T] of a.compoundVariants)
+    V(p, l, a.defaultVariants) && (e += " " + T);
+  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({
+  children: a,
+  className: r,
+  onClick: e,
+  disabled: l,
+  href: n,
+  kind: c,
+  onAdd: s,
+  onRemove: o,
+  ...d
+}) {
+  const p = t.Children.toArray(a).filter((g) => typeof g == "string").join("");
+  t.useEffect(() => {
+    if (o && s)
+      throw new Error("Clickable tag should have onRemove or onAdd, not both");
+  }, [s, o]);
+  function T(g) {
+    s ? s() : o && o(), g.stopPropagation();
+  }
+  function N(g) {
+    g.stopPropagation(), e && e(g);
+  }
+  return /* @__PURE__ */ t.createElement("div", {
+    className: m(_({ kind: c, disabled: l }), r),
+    ...d
+  }, /* @__PURE__ */ t.createElement("span", {
+    className: m(
+      h({
+        link: n || e,
+        disabled: l,
+        addOrRemove: s || o
+      })
+    ),
+    onClick: N,
+    title: p
+  }, n ? /* @__PURE__ */ t.createElement("a", {
+    className: x,
+    href: n
+  }, a) : a), (s || o) && !l && /* @__PURE__ */ t.createElement("div", {
+    className: E,
+    onClick: l ? void 0 : T,
+    tabIndex: -1,
+    "aria-label": s ? "Add" : "Remove"
+  }, /* @__PURE__ */ t.createElement(v, {
+    className: O,
+    "aria-hidden": "true",
+    icon: s ? "plus-sign" : "x"
+  })));
+}
+b.set(C, {
+  name: "Clickable Tag",
+  props: {
+    disabled: { type: "boolean", default: "false" },
+    href: { type: "string" },
+    kind: { type: "ClickableTagKind", default: "blue" },
+    onAdd: { type: "() => void" },
+    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: [] }), P = u({ defaultClassName: "_5f3efi8", variantClassNames: { kind: { default: "_5f3efi9", key: "_5f3efia", warning: "_5f3efib", error: "_5f3efic", pending: "_5f3efid", success: "_5f3efie", info: "_5f3efif" } }, defaultVariants: { kind: "default" }, compoundVariants: [] });
+const j = 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 f({
+  children: a,
+  className: r,
+  kind: e = "default",
+  icon: l,
+  ...n
+}) {
+  return /* @__PURE__ */ t.createElement("span", {
+    className: m(F({ kind: e }), r),
+    ...n
+  }, l && /* @__PURE__ */ t.createElement(v, {
+    className: m(P({ kind: e })),
+    icon: j[e]
+  }), a);
+}
+b.set(f, {
+  name: "Tag",
+  props: {
+    kind: { type: "TagKind", default: "default" },
+    icon: { type: "boolean", default: "false" }
+  }
+});
+var I = "c357iq0", q = "c357iq1", R = "c357iq5", D = u({ defaultClassName: "c357iq2", variantClassNames: { href: { true: "c357iq3", false: "c357iq4" } }, defaultVariants: { href: !1 }, compoundVariants: [] });
+function w({
+  children: a,
+  className: r,
+  color: e = "key",
+  href: l,
+  icon: n,
+  tagKey: c,
+  value: s,
+  ...o
+}) {
+  return /* @__PURE__ */ t.createElement("span", {
+    className: m(I, r),
+    ...o
+  }, /* @__PURE__ */ t.createElement(f, {
+    className: m(q),
+    icon: n,
+    kind: e
+  }, c), /* @__PURE__ */ t.createElement(f, {
+    className: m(D({ href: !!l }))
+  }, l ? /* @__PURE__ */ t.createElement("a", {
+    className: R,
+    href: l
+  }, s) : s));
+}
+b.set(w, {
+  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 L = {
+  components: [C],
+  examples: {
+    basic: {
+      label: "Basic Tag",
+      examples: {
+        basic: {
+          react: i`
+            import { ClickableTag } from "@sps-woodland/tags";
+
+            function Component() {
+              return (
+                <>
+                  <ClickableTag className="mr-1">Blue</ClickableTag>
+                  <ClickableTag className="mr-1" kind="gray">Gray</ClickableTag>
+                </>
+              );
+            }
+          `
+        },
+        disabled: {
+          react: i`
+            import { ClickableTag } from "@sps-woodland/tags";
+    
+            function Component() {
+              return (
+                <>
+                  <ClickableTag disabled>Disabled</ClickableTag>
+                </>
+              );
+            }
+          `
+        }
+      }
+    },
+    button: {
+      label: "Button",
+      examples: {
+        remove: {
+          react: i`
+            import { ClickableTag } from "@sps-woodland/tags";
+
+            function Component() {
+              return (
+                <>
+                  <ClickableTag className="mr-1" onRemove={() => console.log("removed")}>One</ClickableTag>
+                  <ClickableTag className="mr-1" onRemove={() => console.log("removed")} kind="gray">Two</ClickableTag>
+                </>
+              );
+            }
+          `
+        },
+        add: {
+          react: i`
+            import { ClickableTag } from "@sps-woodland/tags";
+
+            function Component() {
+              return (
+                <>
+                  <ClickableTag className="mr-1" onAdd={() => console.log("added")}>One</ClickableTag>
+                  <ClickableTag className="mr-1" onAdd={() => console.log("added")} kind="gray">Two</ClickableTag>
+                </>
+              );
+            }
+          `
+        }
+      }
+    },
+    link: {
+      label: "Link",
+      examples: {
+        basic: {
+          react: i`
+            import { ClickableTag } from "@sps-woodland/tags";
+
+            function Component() {
+              return (
+                <>
+                  <ClickableTag className="mr-1" href="https://google.com">Link</ClickableTag>
+                  <ClickableTag className="mr-1" onClick={() => window.alert("hi")} kind="gray">Link</ClickableTag>
+                </>
+              );
+            }
+          `
+        },
+        button: {
+          react: i`
+            import { ClickableTag } from "@sps-woodland/tags";
+
+            function Component() {
+              return (
+                <>
+                  <ClickableTag className="mr-1" href="https://google.com" onRemove={() => console.log("removed")}>Remove</ClickableTag>
+                  <ClickableTag className="mr-1" onClick={() => window.alert("hi")} onAdd={() => console.log("added")} kind="gray">Add</ClickableTag>
+                </>
+              );
+            }
+          `
+        }
+      }
+    }
+  }
+}, B = {
+  components: [f],
+  examples: {
+    basic: {
+      label: "Basic Tag",
+      examples: {
+        basic: {
+          react: i`
+            import { Tag } from "@sps-woodland/tag";
+
+            function Component() {
+              return (
+                <>
+                  <Tag className="mr-1 mb-1">Default</Tag>
+                  <Tag className="mr-1 mb-1" kind="key">Key</Tag>
+                  <Tag className="mr-1 mb-1" kind="warning">Warning</Tag>
+                  <Tag className="mr-1 mb-1" kind="error">Error</Tag>
+                  <Tag className="mr-1 mb-1" kind="pending">Pending</Tag>
+                  <Tag className="mr-1 mb-1" kind="success">Success</Tag>
+                  <Tag className="mr-1 mb-1" kind="info">Info</Tag>
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    withIcon: {
+      label: "Tag with icon",
+      examples: {
+        basic: {
+          react: i`
+            import { Tag } from "@sps-woodland/tag";
+
+            function Component() {
+              return (
+                <>
+                  <Tag className="mr-1 mb-1" icon>Default</Tag>
+                  <Tag className="mr-1 mb-1" kind="key" icon>Key</Tag>
+                  <Tag className="mr-1 mb-1" kind="warning" icon>Warning</Tag>
+                  <Tag className="mr-1 mb-1" kind="error" icon>Error</Tag>
+                  <Tag className="mr-1 mb-1" kind="pending" icon>Pending</Tag>
+                  <Tag className="mr-1 mb-1" kind="success" icon>Success</Tag>
+                  <Tag className="mr-1 mb-1" kind="info" icon>Info</Tag>
+                </>
+              )
+            }
+          `
+        }
+      }
+    }
+  }
+}, S = {
+  components: [w],
+  examples: {
+    basic: {
+      label: "Basic",
+      examples: {
+        basic: {
+          react: i`
+            import { KeyValueTag } from "@sps-woodland/tag";
+
+            function Component() {
+              return (
+                <>
+                  <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" />
+                </>
+              );
+            }
+          `
+        }
+      }
+    },
+    icon: {
+      label: "Icon",
+      examples: {
+        basic: {
+          react: i`
+            import { KeyValueTag } from "@sps-woodland/tag";
+
+            function Component() {
+              return (
+                <>
+                  <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 />
+                </>
+              );
+            }
+          `
+        }
+      }
+    },
+    link: {
+      label: "Link",
+      examples: {
+        basic: {
+          react: i`
+            import { KeyValueTag } from "@sps-woodland/tag";
+
+            function Component() {
+              return (
+                <KeyValueTag tagKey="Foo" value="1234" icon href="https://www.google.com" />
+              );
+            }
+          `
+        }
+      }
+    }
+  }
+}, M = {
+  "Clickable Tags": L,
+  Tags: B,
+  "Key Value Tags": S
+};
+export {
+  C as ClickableTag,
+  w as KeyValueTag,
+  M as MANIFEST,
+  f as Tag,
+  j as TagIcons
+};

package/lib/key-value-tag/KeyValueTag.css.d.ts

@@ -0,0 +1,13 @@
+export declare const keyValueTag: string;
+export declare const keyValueTagKey: string;
+export declare const keyValueTagValue: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    href: {
+        true: {
+            cursor: "pointer";
+            textDecoration: "underline";
+            color: string;
+        };
+        false: {};
+    };
+}>;
+export declare const keyValueTagLink: string;

package/lib/key-value-tag/KeyValueTag.d.ts

@@ -0,0 +1,10 @@
+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<{
+    color: TagKind;
+    href?: string;
+    icon?: boolean;
+    tagKey: string;
+    value: string;
+}, HTMLDivElement>): React.ReactElement;

package/lib/key-value-tag/KeyValueTag.examples.d.ts

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

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 @@
+._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;padding:.125rem .25rem;text-overflow:ellipsis;white-space:nowrap}._160drw16{cursor:pointer;text-decoration:underline}._160drw16:hover{background-color:#09638d;color:#e6f2f8}._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 #4b5356 inset,-.0625rem 0 #4b5356 inset,0 .0625rem #4b5356 inset,0 -.0625rem #4b5356 inset}.c357iq3{cursor:pointer;text-decoration:underline;color:#4b5356}.c357iq5,.c357iq5:hover{color:#4b5356}

package/lib/tag/Tag.css.d.ts

@@ -0,0 +1,45 @@
+export declare const tag: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    kind: {
+        default: {
+            background: string;
+            color: string;
+        };
+        key: {
+            background: string;
+            color: string;
+        };
+        warning: {
+            background: string;
+            color: string;
+        };
+        error: {
+            background: string;
+            color: string;
+        };
+        pending: {
+            background: string;
+            color: string;
+        };
+        success: {
+            background: string;
+            color: string;
+        };
+        info: {
+            background: string;
+            color: string;
+        };
+    };
+}>;
+export declare const tagIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    kind: {
+        default: {
+            display: "none";
+        };
+        key: {};
+        warning: {};
+        error: {};
+        pending: {};
+        success: {};
+        info: {};
+    };
+}>;

package/lib/tag/Tag.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+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 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;
+    icon?: boolean;
+}, HTMLDivElement>): React.ReactElement;

package/lib/tag/Tag.examples.d.ts

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

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@sps-woodland/tags",
+  "description": "SPS Woodland Design System tag components",
+  "version": "7.0.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/cards#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tabs": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "@vanilla-extract/css": "^1.9.1",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "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) : [],
+    },
+  },
+});