@sps-woodland/side-nav 8.0.2 → 8.0.4

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=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(P);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 j(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 w(a){for(var n=1;n<arguments.length;n++){var t=arguments[n]!=null?arguments[n]:{};n%2?j(Object(t),!0).forEach(function(i){H(a,i,t[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):j(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=w(w({},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,I]of a.compoundVariants)F(l,i,a.defaultVariants)&&(t+=" "+I);return t},O="_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:[]}),_="_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:{}});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,I]=e.useState(!0),[g,b]=e.useState(!0),S=e.useContext(E),p=e.useRef(null);return e.useEffect(()=>{var h;b(((h=p.current)==null?void 0:h.innerText.includes(S.filterValue))||!1)},[S]),e.createElement(e.Fragment,null,s.length?e.createElement("ul",{className:G},e.createElement("li",{ref:p,className:q,onClick:()=>I(!l)},e.createElement(c,{className:_,...o},e.createElement("div",null,e.createElement(r.Icon,{className:M,icon:l?"chevron-down":"chevron-up"})),m)),l&&s):e.createElement("li",{ref:p,className:z({selected:S.activeItem===d,inFilter:g})},e.createElement(c,{className:_,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"}}});const E=e.createContext({filterValue:"",activeItem:""});function C({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),[I,g]=e.useState(t),[b,S]=e.useState(""),p=r.modChildren(m,N=>N.type===v?[{onSelect:k=>T(k)}]:[]),h=r.modChildren(s,N=>N.type===f?[{onSelect:k=>T(k)}]:[]),T=N=>{g(N)};return t!==l.current&&(g(t),l.current=t),e.createElement(E.Provider,{value:{filterValue:b,activeItem:I}},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=>{S(N.target.value)}}))))),h,e.createElement("ul",{className:O},p)))}r.Metadata.set(C,{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:[C,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.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`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Icon } from "@sps-woodland/core";
 
@@ -238,4 +238,4 @@
                 </div>
               )
             }
-          `}}}}},J={"Side Navigation":W};exports.MANIFEST=J;exports.SideNav=C;exports.SideNavHeader=y;exports.SideNavItem=v;exports.SideNavSection=f;exports.navContext=E;
+          `}}}}},J={"Side Navigation":W};exports.MANIFEST=J;exports.SideNav=E;exports.SideNavHeader=y;exports.SideNavItem=v;exports.SideNavSection=f;

package/lib/index.es.js

@@ -1,7 +1,8 @@
 import * as e from "react";
-import { Metadata as h, selectChildren as E, Icon as H, modChildren as b, cl as F } from "@sps-woodland/core";
+import { createContext as H } from "react";
+import { Metadata as h, selectChildren as E, Icon as F, modChildren as b, cl as V } from "@sps-woodland/core";
 import { code as p } from "@spscommerce/utils";
-function V(a, n, t) {
+function G(a, n, t) {
   return n in a ? Object.defineProperty(a, n, {
     value: t,
     enumerable: !0,
@@ -9,7 +10,7 @@ function V(a, n, t) {
     writable: !0
   }) : a[n] = t, a;
 }
-function w(a, n) {
+function T(a, n) {
   var t = Object.keys(a);
   if (Object.getOwnPropertySymbols) {
     var i = Object.getOwnPropertySymbols(a);
@@ -19,26 +20,26 @@ function w(a, n) {
   }
   return t;
 }
-function j(a) {
+function w(a) {
   for (var n = 1; n < arguments.length; n++) {
     var t = arguments[n] != null ? arguments[n] : {};
-    n % 2 ? w(Object(t), !0).forEach(function(i) {
-      V(a, i, t[i]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(t)) : w(Object(t)).forEach(function(i) {
+    n % 2 ? T(Object(t), !0).forEach(function(i) {
+      G(a, i, t[i]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(t)) : T(Object(t)).forEach(function(i) {
       Object.defineProperty(a, i, Object.getOwnPropertyDescriptor(t, i));
     });
   }
   return a;
 }
-var G = (a, n, t) => {
+var A = (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;
-}, A = (a) => (n) => {
-  var t = a.defaultClassName, i = j(j({}, a.defaultVariants), n);
+}, U = (a) => (n) => {
+  var t = a.defaultClassName, i = w(w({}, a.defaultVariants), n);
   for (var d in i) {
     var s, l = (s = i[d]) !== null && s !== void 0 ? s : a.defaultVariants[d];
     if (l != null) {
@@ -48,26 +49,30 @@ var G = (a, n, t) => {
       m && (t += " " + m);
     }
   }
-  for (var [o, N] of a.compoundVariants)
-    G(o, i, a.defaultVariants) && (t += " " + N);
+  for (var [o, I] of a.compoundVariants)
+    A(o, i, a.defaultVariants) && (t += " " + I);
   return t;
-}, _ = "_1j8bvco7", U = "_1j8bvco0", D = "_1j8bvco8", R = "_1j8bvcof", q = "_1j8bvcoe", B = "_1j8bvco3", L = "_1j8bvco4", z = "_1j8bvco1", M = A({ defaultClassName: "_1j8bvco9", variantClassNames: { selected: { true: "_1j8bvcoa", false: "_1j8bvcob" }, inFilter: { true: "_1j8bvcoc", false: "_1j8bvcod" } }, defaultVariants: { selected: !1, inFilter: !0 }, compoundVariants: [] }), x = "_1j8bvcog", K = "_1j8bvco5", W = "_1j8bvco6", J = "_1j8bvco2";
+}, x = "_1j8bvco7", D = "_1j8bvco0", R = "_1j8bvco8", q = "_1j8bvcof", B = "_1j8bvcoe", L = "_1j8bvco3", z = "_1j8bvco4", M = "_1j8bvco1", K = U({ defaultClassName: "_1j8bvco9", variantClassNames: { selected: { true: "_1j8bvcoa", false: "_1j8bvcob" }, inFilter: { true: "_1j8bvcoc", false: "_1j8bvcod" } }, defaultVariants: { selected: !1, inFilter: !0 }, compoundVariants: [] }), j = "_1j8bvcog", W = "_1j8bvco5", J = "_1j8bvco6", Q = "_1j8bvco2";
 function C({
   children: a,
   className: n,
   ...t
 }) {
   return /* @__PURE__ */ e.createElement("div", {
-    className: z,
+    className: M,
     ...t
   }, /* @__PURE__ */ e.createElement("div", {
-    className: J
+    className: Q
   }, a));
 }
 h.set(C, {
   name: "SideNavHeader",
   props: {}
 });
+const _ = H({
+  filterValue: "",
+  activeItem: ""
+});
 function c({
   children: a,
   className: n,
@@ -76,30 +81,30 @@ function c({
   keyId: d,
   ...s
 }) {
-  const l = i != null ? i : "a", [r, m] = E(a, [{ type: c }]), [o, N] = e.useState(!0), [u, y] = e.useState(!0), I = e.useContext(P), S = e.useRef(null);
+  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);
   return e.useEffect(() => {
     var f;
-    y(((f = S.current) == null ? void 0 : f.innerText.includes(I.filterValue)) || !1);
-  }, [I]), /* @__PURE__ */ e.createElement(e.Fragment, null, r.length ? /* @__PURE__ */ e.createElement("ul", {
-    className: D
+    y(((f = N.current) == null ? void 0 : f.innerText.includes(S.filterValue)) || !1);
+  }, [S]), /* @__PURE__ */ e.createElement(e.Fragment, null, r.length ? /* @__PURE__ */ e.createElement("ul", {
+    className: R
   }, /* @__PURE__ */ e.createElement("li", {
-    ref: S,
-    className: q,
-    onClick: () => N(!o)
+    ref: N,
+    className: B,
+    onClick: () => I(!o)
   }, /* @__PURE__ */ e.createElement(l, {
-    className: x,
+    className: j,
     ...s
-  }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(H, {
-    className: R,
+  }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(F, {
+    className: q,
     icon: o ? "chevron-down" : "chevron-up"
   })), m)), o && r) : /* @__PURE__ */ e.createElement("li", {
-    ref: S,
-    className: M({
-      selected: I.activeItem === d,
+    ref: N,
+    className: K({
+      selected: S.activeItem === d,
       inFilter: u
     })
   }, /* @__PURE__ */ e.createElement(l, {
-    className: x,
+    className: j,
     onClick: () => {
       t(d);
     },
@@ -120,22 +125,19 @@ function g({
   onSelect: i,
   ...d
 }) {
-  const [s, l] = E(a, [{ type: c }]), r = b(
-    s,
-    (m) => m.type === c ? [
-      {
-        onSelect: i ? (o) => i(o) : () => {
-        }
+  const [s, l] = E(a, [{ type: c }]), r = b(s, (m) => m.type === c ? [
+    {
+      onSelect: i ? (o) => i(o) : () => {
       }
-    ] : []
-  );
+    }
+  ] : []);
   return /* @__PURE__ */ e.createElement("div", {
-    className: K,
+    className: W,
     ...d
   }, t && /* @__PURE__ */ e.createElement("div", {
-    className: W
+    className: J
   }, t), /* @__PURE__ */ e.createElement("ul", {
-    className: _
+    className: x
   }, r), l);
 }
 h.set(g, {
@@ -144,11 +146,7 @@ h.set(g, {
     title: { type: "string" }
   }
 });
-const P = e.createContext({
-  filterValue: "",
-  activeItem: ""
-});
-function O({
+function P({
   children: a,
   className: n,
   activeNavItem: t,
@@ -156,32 +154,37 @@ function O({
   filterInputPlaceholder: d,
   ...s
 }) {
-  const [l, r, m] = E(a, [{ type: C }, { type: g }, { type: c }]), o = e.useRef(t), [N, u] = e.useState(t), [y, I] = e.useState(""), S = b(
-    m,
-    (v) => v.type === c ? [
-      {
-        onSelect: (k) => T(k)
-      }
-    ] : []
-  ), f = b(
+  const [
+    l,
+    r,
+    m
+  ] = E(a, [
+    { type: C },
+    { type: g },
+    { type: c }
+  ]), o = e.useRef(t), [I, u] = e.useState(t), [y, S] = e.useState(""), N = (v) => {
+    u(v);
+  }, f = b(m, (v) => v.type === c ? [
+    {
+      onSelect: (k) => N(k)
+    }
+  ] : []), O = b(
     r,
     (v) => v.type === g ? [
       {
-        onSelect: (k) => T(k)
+        onSelect: (k) => N(k)
       }
     ] : []
-  ), T = (v) => {
-    u(v);
-  };
-  return t !== o.current && (u(t), o.current = t), /* @__PURE__ */ e.createElement(P.Provider, {
-    value: { filterValue: y, activeItem: N }
+  );
+  return t !== o.current && (u(t), o.current = t), /* @__PURE__ */ e.createElement(_.Provider, {
+    value: { filterValue: y, activeItem: I }
   }, /* @__PURE__ */ e.createElement("div", {
-    className: F(U),
+    className: V(D),
     ...s
   }, l, i && /* @__PURE__ */ e.createElement("div", {
-    className: B
-  }, /* @__PURE__ */ e.createElement("div", {
     className: L
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: z
   }, /* @__PURE__ */ e.createElement("div", {
     className: "sps-text-input"
   }, /* @__PURE__ */ e.createElement("div", {
@@ -193,13 +196,13 @@ function O({
     className: "sps-text-input__input",
     placeholder: d,
     onChange: (v) => {
-      I(v.target.value);
+      S(v.target.value);
     }
-  }))))), f, /* @__PURE__ */ e.createElement("ul", {
-    className: _
-  }, S)));
+  }))))), O, /* @__PURE__ */ e.createElement("ul", {
+    className: x
+  }, f)));
 }
-h.set(O, {
+h.set(P, {
   name: "SideNav",
   props: {
     activeNavItem: { type: "string", required: !0 },
@@ -207,9 +210,14 @@ h.set(O, {
     filterInputPlaceholder: { type: "string" }
   }
 });
-const Q = {
+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: [O, C, g, c],
+  components: [
+    P,
+    C,
+    g,
+    c
+  ],
   examples: {
     general: {
       label: "Usage",
@@ -503,14 +511,13 @@ const Q = {
       }
     }
   }
-}, Z = {
-  "Side Navigation": Q
+}, ee = {
+  "Side Navigation": X
 };
 export {
-  Z as MANIFEST,
-  O as SideNav,
+  ee as MANIFEST,
+  P as SideNav,
   C as SideNavHeader,
   c as SideNavItem,
-  g as SideNavSection,
-  P as navContext
+  g as SideNavSection
 };

package/lib/side-nav/SideNav.d.ts

@@ -1,9 +1,5 @@
 import * as React from "react";
-import { ComponentProps } from "@sps-woodland/core";
-export declare const navContext: React.Context<{
-    filterValue: string;
-    activeItem: string;
-}>;
+import type { ComponentProps } from "@sps-woodland/core";
 export declare function SideNav({ children, className, activeNavItem, filterable, filterInputPlaceholder, ...rest }: ComponentProps<{
     activeNavItem: string;
     filterable?: boolean;

package/lib/side-nav/navContext.d.ts

@@ -0,0 +1,4 @@
+export declare const navContext: import("react").Context<{
+    filterValue: string;
+    activeItem: string;
+}>;

package/lib/side-nav-header/SideNavHeader.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-import { ComponentProps } from "@sps-woodland/core";
-export declare function SideNavHeader({ children, className, ...rest }: ComponentProps<{}, HTMLDivElement>): React.ReactElement;
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function SideNavHeader({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/side-nav-item/SideNavItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PolymorphicComponentProps } from "@sps-woodland/core";
+import type { PolymorphicComponentProps } from "@sps-woodland/core";
 declare type SideNavItemProps<T extends React.ElementType> = PolymorphicComponentProps<{
     onSelect: (key: string) => void;
     keyId: string;

package/lib/side-nav-section/SideNavSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ComponentProps } from "@sps-woodland/core";
+import type { ComponentProps } from "@sps-woodland/core";
 export declare function SideNavSection({ children, className, title, onSelect, ...rest }: ComponentProps<{
     title?: string;
     onSelect?: (string: string) => void;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@sps-woodland/side-nav",
   "description": "SPS Woodland Design System side navigation components",
-  "version": "8.0.2",
+  "version": "8.0.4",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/side-nav",
   "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/side-nav#readme",
   "type": "module",
+  "module": "./lib/index.es.js",
   "main": "./lib/index.cjs.js",
   "types": "./lib/index.d.ts",
   "exports": {
@@ -21,7 +22,6 @@
       "require": "./lib/style.css"
     }
   },
-  "module": "./lib/index.es.js",
   "publishConfig": {
     "access": "public"
   },
@@ -29,8 +29,8 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.0.2",
-    "@sps-woodland/tokens": "8.0.2"
+    "@sps-woodland/core": "8.0.4",
+    "@sps-woodland/tokens": "8.0.4"
   },
   "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.0.2",
-    "@sps-woodland/tokens": "8.0.2"
+    "@sps-woodland/core": "8.0.4",
+    "@sps-woodland/tokens": "8.0.4"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",