@sps-woodland/side-nav 8.7.3 → 8.7.5

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"),r=require("@sps-woodland/core"),u=require("@spscommerce/utils");function x(a){if(a&&a.__esModule)return a;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:()=>a[t]})}}return n.default=a,Object.freeze(n)}const e=x(w);function H(a,n,t){return n in a?Object.defineProperty(a,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):a[n]=t,a}function C(a,n){var t=Object.keys(a);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(a);n&&(i=i.filter(function(d){return Object.getOwnPropertyDescriptor(a,d).enumerable})),t.push.apply(t,i)}return t}function T(a){for(var n=1;n<arguments.length;n++){var t=arguments[n]!=null?arguments[n]:{};n%2?C(Object(t),!0).forEach(function(i){H(a,i,t[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):C(Object(t)).forEach(function(i){Object.defineProperty(a,i,Object.getOwnPropertyDescriptor(t,i))})}return a}var F=(a,n,t)=>{for(var i of Object.keys(a)){var d;if(a[i]!==((d=n[i])!==null&&d!==void 0?d:t[i]))return!1}return!0},V=a=>n=>{var t=a.defaultClassName,i=T(T({},a.defaultVariants),n);for(var d in i){var o,c=(o=i[d])!==null&&o!==void 0?o:a.defaultVariants[d];if(c!=null){var s=c;typeof s=="boolean"&&(s=s===!0?"true":"false");var m=a.variantClassNames[d][s];m&&(t+=" "+m)}}for(var[l,S]of a.compoundVariants)F(l,i,a.defaultVariants)&&(t+=" "+S);return t},_="_1j8bvco7",A="_1j8bvco0",G="_1j8bvco8",M="_1j8bvcof",q="_1j8bvcoe",D="_1j8bvco3",U="_1j8bvco4",R="_1j8bvco1",z=V({defaultClassName:"_1j8bvco9",variantClassNames:{selected:{true:"_1j8bvcoa",false:"_1j8bvcob"},inFilter:{true:"_1j8bvcoc",false:"_1j8bvcod"}},defaultVariants:{selected:!1,inFilter:!0},compoundVariants:[]}),j="_1j8bvcog",B="_1j8bvco5",L="_1j8bvco6",K="_1j8bvco2";function y({children:a,className:n,...t}){return e.createElement("div",{className:R,...t},e.createElement("div",{className:K},a))}r.Metadata.set(y,{name:"SideNavHeader",props:{}});const O=w.createContext({filterValue:"",activeItem:""});function v({children:a,className:n,onSelect:t,as:i,keyId:d,...o}){const c=i!=null?i:"a",[s,m]=r.selectChildren(a,[{type:v}]),[l,S]=e.useState(!0),[g,b]=e.useState(!0),p=e.useContext(O),I=e.useRef(null);return e.useEffect(()=>{var h;b(((h=I.current)==null?void 0:h.innerText.includes(p.filterValue))||!1)},[p]),e.createElement(e.Fragment,null,s.length?e.createElement("ul",{className:G},e.createElement("li",{ref:I,className:q,onClick:()=>S(!l)},e.createElement(c,{className:j,...o},e.createElement("div",null,e.createElement(r.Icon,{className:M,icon:l?"chevron-down":"chevron-up"})),m)),l&&s):e.createElement("li",{ref:I,className:z({selected:p.activeItem===d,inFilter:g})},e.createElement(c,{className:j,onClick:()=>{t(d)},...o},a)))}r.Metadata.set(v,{name:"SideNavItem",props:{keyId:{type:"string",required:!0},as:{type:"string"}}});function f({children:a,className:n,title:t,onSelect:i,...d}){const[o,c]=r.selectChildren(a,[{type:v}]),s=r.modChildren(o,m=>m.type===v?[{onSelect:i?l=>i(l):()=>{}}]:[]);return e.createElement("div",{className:B,...d},t&&e.createElement("div",{className:L},t),e.createElement("ul",{className:_},s),c)}r.Metadata.set(f,{name:"SideNavSection",props:{title:{type:"string"}}});function E({children:a,className:n,activeNavItem:t,filterable:i,filterInputPlaceholder:d,...o}){const[c,s,m]=r.selectChildren(a,[{type:y},{type:f},{type:v}]),l=e.useRef(t),[S,g]=e.useState(t),[b,p]=e.useState(""),I=N=>{g(N)},h=r.modChildren(m,N=>N.type===v?[{onSelect:k=>I(k)}]:[]),P=r.modChildren(s,N=>N.type===f?[{onSelect:k=>I(k)}]:[]);return t!==l.current&&(g(t),l.current=t),e.createElement(O.Provider,{value:{filterValue:b,activeItem:S}},e.createElement("div",{className:r.cl(A),...o},c,i&&e.createElement("div",{className:D},e.createElement("div",{className:U},e.createElement("div",{className:"sps-text-input"},e.createElement("div",{className:"sps-form-control"},e.createElement("i",{className:"sps-text-input__icon sps-icon sps-icon-filter"}),e.createElement("input",{type:"text",className:"sps-text-input__input",placeholder:d,onChange:N=>{p(N.target.value)}}))))),P,e.createElement("ul",{className:_},h)))}r.Metadata.set(E,{name:"SideNav",props:{activeNavItem:{type:"string",required:!0},filterable:{type:"boolean"},filterInputPlaceholder:{type:"string"}}});const W={description:()=>e.createElement("p",null,"Side Navigations are used to provide quick access to a series of related pages or content. It can be used to navigate between different page views, or as an anchor-style menu to scroll to specific content on the same page."),components:[E,y,f,v],examples:{general:{label:"Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Use the Side Navigation if:"),e.createElement("ul",null,e.createElement("li",null,"The navigation benefits from subsections or nested structures"),e.createElement("li",null,"There are too many items for Tabbed Navigation"),e.createElement("li",null,"The navigation items have long names")),e.createElement("p",null,"Avoid using the Side Navigation if:"),e.createElement("ul",null,e.createElement("li",null,"Tabbed Navigation is sufficient"),e.createElement("li",null,"The full width of the page is required to sufficiently display content")))},filter:{label:"Filter",description:"Use Filters when the Side Navigation benefits from filtering, usually when it contains a long list of navigation items.",examples:{filter:{react:u.code`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),r=require("@sps-woodland/core"),u=require("@spscommerce/utils");function _(a){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:()=>a[t]})}}return n.default=a,Object.freeze(n)}const e=_(w);function H(a,n,t){return n in a?Object.defineProperty(a,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):a[n]=t,a}function C(a,n){var t=Object.keys(a);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(a);n&&(i=i.filter(function(d){return Object.getOwnPropertyDescriptor(a,d).enumerable})),t.push.apply(t,i)}return t}function T(a){for(var n=1;n<arguments.length;n++){var t=arguments[n]!=null?arguments[n]:{};n%2?C(Object(t),!0).forEach(function(i){H(a,i,t[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):C(Object(t)).forEach(function(i){Object.defineProperty(a,i,Object.getOwnPropertyDescriptor(t,i))})}return a}var F=(a,n,t)=>{for(var i of Object.keys(a)){var d;if(a[i]!==((d=n[i])!==null&&d!==void 0?d:t[i]))return!1}return!0},V=a=>n=>{var t=a.defaultClassName,i=T(T({},a.defaultVariants),n);for(var d in i){var o,c=(o=i[d])!==null&&o!==void 0?o:a.defaultVariants[d];if(c!=null){var s=c;typeof s=="boolean"&&(s=s===!0?"true":"false");var m=a.variantClassNames[d][s];m&&(t+=" "+m)}}for(var[l,S]of a.compoundVariants)F(l,i,a.defaultVariants)&&(t+=" "+S);return t},O="_1j8bvco7",A="_1j8bvco0",G="_1j8bvco8",D="_1j8bvcof",M="_1j8bvcoe",q="_1j8bvco3",U="_1j8bvco4",R="_1j8bvco1",z=V({defaultClassName:"_1j8bvco9",variantClassNames:{selected:{true:"_1j8bvcoa",false:"_1j8bvcob"},inFilter:{true:"_1j8bvcoc",false:"_1j8bvcod"}},defaultVariants:{selected:!1,inFilter:!0},compoundVariants:[]}),j="_1j8bvcog",B="_1j8bvco5",L="_1j8bvco6",K="_1j8bvco2";function y({children:a,className:n,...t}){return e.createElement("div",{className:R,...t},e.createElement("div",{className:K},a))}r.Metadata.set(y,{name:"SideNavHeader",props:{}});const P=w.createContext({filterValue:"",activeItem:""});function v({children:a,className:n,onSelect:t,as:i,keyId:d,...o}){const c=i??"a",[s,m]=r.selectChildren(a,[{type:v}]),[l,S]=e.useState(!0),[g,b]=e.useState(!0),p=e.useContext(P),I=e.useRef(null);return e.useEffect(()=>{var h;b(((h=I.current)==null?void 0:h.innerText.includes(p.filterValue))||!1)},[p]),e.createElement(e.Fragment,null,s.length?e.createElement("ul",{className:G},e.createElement("li",{ref:I,className:M,onClick:()=>S(!l)},e.createElement(c,{className:j,...o},e.createElement("div",null,e.createElement(r.Icon,{className:D,icon:l?"chevron-down":"chevron-up"})),m)),l&&s):e.createElement("li",{ref:I,className:z({selected:p.activeItem===d,inFilter:g})},e.createElement(c,{className:j,onClick:()=>{t(d)},...o},a)))}r.Metadata.set(v,{name:"SideNavItem",props:{keyId:{type:"string",required:!0},as:{type:"string"}}});function f({children:a,className:n,title:t,onSelect:i,...d}){const[o,c]=r.selectChildren(a,[{type:v}]),s=r.modChildren(o,m=>m.type===v?[{onSelect:i?l=>i(l):()=>{}}]:[]);return e.createElement("div",{className:B,...d},t&&e.createElement("div",{className:L},t),e.createElement("ul",{className:O},s),c)}r.Metadata.set(f,{name:"SideNavSection",props:{title:{type:"string"}}});function E({children:a,className:n,activeNavItem:t,filterable:i,filterInputPlaceholder:d,...o}){const[c,s,m]=r.selectChildren(a,[{type:y},{type:f},{type:v}]),l=e.useRef(t),[S,g]=e.useState(t),[b,p]=e.useState(""),I=N=>{g(N)},h=r.modChildren(m,N=>N.type===v?[{onSelect:k=>I(k)}]:[]),x=r.modChildren(s,N=>N.type===f?[{onSelect:k=>I(k)}]:[]);return t!==l.current&&(g(t),l.current=t),e.createElement(P.Provider,{value:{filterValue:b,activeItem:S}},e.createElement("div",{className:r.cl(A),...o},c,i&&e.createElement("div",{className:q},e.createElement("div",{className:U},e.createElement("div",{className:"sps-text-input"},e.createElement("div",{className:"sps-form-control"},e.createElement("i",{className:"sps-text-input__icon sps-icon sps-icon-filter"}),e.createElement("input",{type:"text",className:"sps-text-input__input",placeholder:d,onChange:N=>{p(N.target.value)}}))))),x,e.createElement("ul",{className:O},h)))}r.Metadata.set(E,{name:"SideNav",props:{activeNavItem:{type:"string",required:!0},filterable:{type:"boolean"},filterInputPlaceholder:{type:"string"}}});const W={description:()=>e.createElement("p",null,"Side Navigations are used to provide quick access to a series of related pages or content. It can be used to navigate between different page views, or as an anchor-style menu to scroll to specific content on the same page."),components:[E,y,f,v],examples:{general:{label:"Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Use the Side Navigation if:"),e.createElement("ul",null,e.createElement("li",null,"The navigation benefits from subsections or nested structures"),e.createElement("li",null,"There are too many items for Tabbed Navigation"),e.createElement("li",null,"The navigation items have long names")),e.createElement("p",null,"Avoid using the Side Navigation if:"),e.createElement("ul",null,e.createElement("li",null,"Tabbed Navigation is sufficient"),e.createElement("li",null,"The full width of the page is required to sufficiently display content")))},filter:{label:"Filter",description:"Use Filters when the Side Navigation benefits from filtering, usually when it contains a long list of navigation items.",examples:{filter:{react:u.code`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Icon } from "@sps-woodland/core";
 

package/lib/index.es.js

@@ -45,7 +45,10 @@ var A = (a, n, t) => {
     if (l != null) {
       var r = l;
       typeof r == "boolean" && (r = r === !0 ? "true" : "false");
-      var m = a.variantClassNames[d][r];
+      var m = (
+        // @ts-expect-error
+        a.variantClassNames[d][r]
+      );
       m && (t += " " + m);
     }
   }
@@ -64,7 +67,7 @@ h.set(C, {
   name: "SideNavHeader",
   props: {}
 });
-const _ = H({
+const P = H({
   filterValue: "",
   activeItem: ""
 });
@@ -76,7 +79,7 @@ function c({
   keyId: d,
   ...s
 }) {
-  const l = i != null ? i : "a", [r, m] = E(a, [{ type: c }]), [o, I] = e.useState(!0), [u, y] = e.useState(!0), S = e.useContext(_), N = e.useRef(null);
+  const l = i ?? "a", [r, m] = E(a, [{ type: c }]), [o, I] = e.useState(!0), [u, y] = e.useState(!0), S = e.useContext(P), N = e.useRef(null);
   return e.useEffect(() => {
     var f;
     y(((f = N.current) == null ? void 0 : f.innerText.includes(S.filterValue)) || !1);
@@ -144,7 +147,7 @@ h.set(g, {
     title: { type: "string" }
   }
 });
-function P({
+function O({
   children: a,
   className: n,
   activeNavItem: t,
@@ -166,7 +169,7 @@ function P({
     {
       onSelect: (k) => N(k)
     }
-  ] : []), O = b(
+  ] : []), _ = b(
     r,
     (v) => v.type === g ? [
       {
@@ -174,7 +177,7 @@ function P({
       }
     ] : []
   );
-  return t !== o.current && (u(t), o.current = t), /* @__PURE__ */ e.createElement(_.Provider, { value: { filterValue: y, activeItem: I } }, /* @__PURE__ */ e.createElement("div", { className: V(D), ...s }, l, i && /* @__PURE__ */ e.createElement("div", { className: L }, /* @__PURE__ */ e.createElement("div", { className: z }, /* @__PURE__ */ e.createElement("div", { className: "sps-text-input" }, /* @__PURE__ */ e.createElement("div", { className: "sps-form-control" }, /* @__PURE__ */ e.createElement("i", { className: "sps-text-input__icon sps-icon sps-icon-filter" }), /* @__PURE__ */ e.createElement(
+  return t !== o.current && (u(t), o.current = t), /* @__PURE__ */ e.createElement(P.Provider, { value: { filterValue: y, activeItem: I } }, /* @__PURE__ */ e.createElement("div", { className: V(D), ...s }, l, i && /* @__PURE__ */ e.createElement("div", { className: L }, /* @__PURE__ */ e.createElement("div", { className: z }, /* @__PURE__ */ e.createElement("div", { className: "sps-text-input" }, /* @__PURE__ */ e.createElement("div", { className: "sps-form-control" }, /* @__PURE__ */ e.createElement("i", { className: "sps-text-input__icon sps-icon sps-icon-filter" }), /* @__PURE__ */ e.createElement(
     "input",
     {
       type: "text",
@@ -184,9 +187,9 @@ function P({
         S(v.target.value);
       }
     }
-  ))))), O, /* @__PURE__ */ e.createElement("ul", { className: x }, f)));
+  ))))), _, /* @__PURE__ */ e.createElement("ul", { className: x }, f)));
 }
-h.set(P, {
+h.set(O, {
   name: "SideNav",
   props: {
     activeNavItem: { type: "string", required: !0 },
@@ -197,7 +200,7 @@ h.set(P, {
 const X = {
   description: () => /* @__PURE__ */ e.createElement("p", null, "Side Navigations are used to provide quick access to a series of related pages or content. It can be used to navigate between different page views, or as an anchor-style menu to scroll to specific content on the same page."),
   components: [
-    P,
+    O,
     C,
     g,
     c
@@ -498,7 +501,7 @@ const X = {
 };
 export {
   ee as MANIFEST,
-  P as SideNav,
+  O as SideNav,
   C as SideNavHeader,
   c as SideNavItem,
   g as SideNavSection

package/lib/style.css

@@ -1 +1 @@
-._1j8bvco0{word-wrap:break-word;background-clip:border-box;background-color:oklch(100% 0 0);border-width:.0625rem;border-style:solid;border-color:oklch(86.84% .002 197.12);border-radius:.125rem;display:flex;flex-direction:column;min-width:0;position:relative}._1j8bvco1{background-color:oklch(100% 0 0);border-bottom:.0625rem solid oklch(86.84% .002 197.12);margin-bottom:0;padding:.5rem}._1j8bvco2{align-items:center;display:flex;float:left;font-size:.75rem;font-weight:600;line-height:1.5rem;margin-bottom:0;padding-left:.5rem;text-transform:uppercase}._1j8bvco2>i{font-size:.875rem;margin-right:.25rem}._1j8bvco3{border-bottom:.0625rem solid oklch(86.84% .002 197.12);padding:.5rem 0}._1j8bvco4{margin:6px 21px}._1j8bvco5{margin:0;padding:.5rem 0}._1j8bvco5+._1j8bvco5{border-top:.0625rem solid oklch(86.84% .002 197.12)}._1j8bvco6{color:oklch(56.48% .008 219.62);font-size:1rem;font-weight:400;margin:.25rem 0 .5rem 1rem}._1j8bvco7{list-style:none;margin-top:0;margin-bottom:0;padding:0;font-size:.875rem;line-height:1.25rem}._1j8bvco8{padding-left:0}._1j8bvco9{display:block;width:100%}._1j8bvcoa{background-color:oklch(95.39% .015 228.96);box-shadow:inset .125rem 0 oklch(56.21% .128 239.83);color:#1f282c;font-weight:700}._1j8bvcod{display:none}._1j8bvcoe{display:block;width:100%}._1j8bvcof{font-size:.625rem;vertical-align:middle;display:inline-block;line-height:1.25rem;margin-top:0;margin-right:.25rem;margin-bottom:0;margin-left:-.875rem}._1j8bvcog{color:oklch(26.99% .015 226.65);cursor:pointer;display:flex;font-size:.875rem;line-height:1.25rem;padding:.5rem 1rem .5rem 1.25rem;text-decoration:none}._1j8bvcog:hover{background-color:oklch(96.64% .001 197.14)}._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:2.125rem}._1j8bvco8>._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:3rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:3.875rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:undefined}._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:2.125rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:3rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:3.875rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:undefined}
+._1j8bvco0{word-wrap:break-word;background-clip:border-box;background-color:#fff;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;border-radius:.125rem;display:flex;flex-direction:column;min-width:0;position:relative}._1j8bvco1{background-color:#fff;border-bottom:.0625rem solid oklch(86.84% .002 197.12);margin-bottom:0;padding:.5rem}._1j8bvco2{align-items:center;display:flex;float:left;font-size:.75rem;font-weight:600;line-height:1.5rem;margin-bottom:0;padding-left:.5rem;text-transform:uppercase}._1j8bvco2>i{font-size:.875rem;margin-right:.25rem}._1j8bvco3{border-bottom:.0625rem solid oklch(86.84% .002 197.12);padding:.5rem 0}._1j8bvco4{margin:6px 21px}._1j8bvco5{margin:0;padding:.5rem 0}._1j8bvco5+._1j8bvco5{border-top:.0625rem solid oklch(86.84% .002 197.12)}._1j8bvco6{color:#717779;font-size:1rem;font-weight:400;margin:.25rem 0 .5rem 1rem}._1j8bvco7{list-style:none;margin-top:0;margin-bottom:0;padding:0;font-size:.875rem;line-height:1.25rem}._1j8bvco8{padding-left:0}._1j8bvco9{display:block;width:100%}._1j8bvcoa{background-color:#e6f2f8;box-shadow:inset .125rem 0 #027db8;color:#1f282c;font-weight:700}._1j8bvcod{display:none}._1j8bvcoe{display:block;width:100%}._1j8bvcof{font-size:.625rem;vertical-align:middle;display:inline-block;line-height:1.25rem;margin-top:0;margin-right:.25rem;margin-bottom:0;margin-left:-.875rem}._1j8bvcog{color:#1f282c;cursor:pointer;display:flex;font-size:.875rem;line-height:1.25rem;padding:.5rem 1rem .5rem 1.25rem;text-decoration:none}._1j8bvcog:hover{background-color:#f3f4f4}._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:2.125rem}._1j8bvco8>._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:3rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:3.875rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:undefined}._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:2.125rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:3rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:3.875rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:undefined}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/side-nav",
   "description": "SPS Woodland Design System side navigation components",
-  "version": "8.7.3",
+  "version": "8.7.5",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/side-nav",
@@ -29,8 +29,8 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.7.3",
-    "@sps-woodland/tokens": "8.7.3"
+    "@sps-woodland/core": "8.7.5",
+    "@sps-woodland/tokens": "8.7.5"
   },
   "devDependencies": {
     "@vanilla-extract/css": "^1.9.3",
@@ -38,8 +38,8 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.7.3",
-    "@sps-woodland/tokens": "8.7.3"
+    "@sps-woodland/core": "8.7.5",
+    "@sps-woodland/tokens": "8.7.5"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",