@phillips/seldon 1.245.0 → 1.247.0

package/dist/node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-dismissable-layer/dist/index.js

@@ -0,0 +1,127 @@
+import * as n from "react";
+import { composeEventHandlers as h } from "../../primitive/dist/index.js";
+import { Primitive as w, dispatchDiscreteCustomEvent as k } from "../../react-primitive/dist/index.js";
+import { useComposedRefs as g } from "../../../../../react-compose-refs/dist/index.js";
+import { useCallbackRef as R } from "../../../../../react-use-callback-ref/dist/index.js";
+import { useEscapeKeydown as U } from "../../../../../react-use-escape-keydown/dist/index.js";
+import { jsx as T } from "react/jsx-runtime";
+var z = "DismissableLayer", y = "dismissableLayer.update", H = "dismissableLayer.pointerDownOutside", M = "dismissableLayer.focusOutside", C, B = n.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
+}), K = n.forwardRef(
+  (s, e) => {
+    const {
+      disableOutsidePointerEvents: r = !1,
+      onEscapeKeyDown: a,
+      onPointerDownOutside: i,
+      onFocusOutside: c,
+      onInteractOutside: f,
+      onDismiss: d,
+      ...E
+    } = s, o = n.useContext(B), [u, F] = n.useState(null), l = u?.ownerDocument ?? globalThis?.document, [, I] = n.useState({}), S = g(e, (t) => F(t)), p = Array.from(o.layers), [W] = [...o.layersWithOutsidePointerEventsDisabled].slice(-1), A = p.indexOf(W), b = u ? p.indexOf(u) : -1, N = o.layersWithOutsidePointerEventsDisabled.size > 0, D = b >= A, _ = Y((t) => {
+      const v = t.target, P = [...o.branches].some((m) => m.contains(v));
+      !D || P || (i?.(t), f?.(t), t.defaultPrevented || d?.());
+    }, l), O = q((t) => {
+      const v = t.target;
+      [...o.branches].some((m) => m.contains(v)) || (c?.(t), f?.(t), t.defaultPrevented || d?.());
+    }, l);
+    return U((t) => {
+      b === o.layers.size - 1 && (a?.(t), !t.defaultPrevented && d && (t.preventDefault(), d()));
+    }, l), n.useEffect(() => {
+      if (u)
+        return r && (o.layersWithOutsidePointerEventsDisabled.size === 0 && (C = l.body.style.pointerEvents, l.body.style.pointerEvents = "none"), o.layersWithOutsidePointerEventsDisabled.add(u)), o.layers.add(u), L(), () => {
+          r && o.layersWithOutsidePointerEventsDisabled.size === 1 && (l.body.style.pointerEvents = C);
+        };
+    }, [u, l, r, o]), n.useEffect(() => () => {
+      u && (o.layers.delete(u), o.layersWithOutsidePointerEventsDisabled.delete(u), L());
+    }, [u, o]), n.useEffect(() => {
+      const t = () => I({});
+      return document.addEventListener(y, t), () => document.removeEventListener(y, t);
+    }, []), /* @__PURE__ */ T(
+      w.div,
+      {
+        ...E,
+        ref: S,
+        style: {
+          pointerEvents: N ? D ? "auto" : "none" : void 0,
+          ...s.style
+        },
+        onFocusCapture: h(s.onFocusCapture, O.onFocusCapture),
+        onBlurCapture: h(s.onBlurCapture, O.onBlurCapture),
+        onPointerDownCapture: h(
+          s.onPointerDownCapture,
+          _.onPointerDownCapture
+        )
+      }
+    );
+  }
+);
+K.displayName = z;
+var j = "DismissableLayerBranch", X = n.forwardRef((s, e) => {
+  const r = n.useContext(B), a = n.useRef(null), i = g(e, a);
+  return n.useEffect(() => {
+    const c = a.current;
+    if (c)
+      return r.branches.add(c), () => {
+        r.branches.delete(c);
+      };
+  }, [r.branches]), /* @__PURE__ */ T(w.div, { ...s, ref: i });
+});
+X.displayName = j;
+function Y(s, e = globalThis?.document) {
+  const r = R(s), a = n.useRef(!1), i = n.useRef(() => {
+  });
+  return n.useEffect(() => {
+    const c = (d) => {
+      if (d.target && !a.current) {
+        let E = function() {
+          x(
+            H,
+            r,
+            o,
+            { discrete: !0 }
+          );
+        };
+        const o = { originalEvent: d };
+        d.pointerType === "touch" ? (e.removeEventListener("click", i.current), i.current = E, e.addEventListener("click", i.current, { once: !0 })) : E();
+      } else
+        e.removeEventListener("click", i.current);
+      a.current = !1;
+    }, f = window.setTimeout(() => {
+      e.addEventListener("pointerdown", c);
+    }, 0);
+    return () => {
+      window.clearTimeout(f), e.removeEventListener("pointerdown", c), e.removeEventListener("click", i.current);
+    };
+  }, [e, r]), {
+    // ensures we check React component tree (not just DOM tree)
+    onPointerDownCapture: () => a.current = !0
+  };
+}
+function q(s, e = globalThis?.document) {
+  const r = R(s), a = n.useRef(!1);
+  return n.useEffect(() => {
+    const i = (c) => {
+      c.target && !a.current && x(M, r, { originalEvent: c }, {
+        discrete: !1
+      });
+    };
+    return e.addEventListener("focusin", i), () => e.removeEventListener("focusin", i);
+  }, [e, r]), {
+    onFocusCapture: () => a.current = !0,
+    onBlurCapture: () => a.current = !1
+  };
+}
+function L() {
+  const s = new CustomEvent(y);
+  document.dispatchEvent(s);
+}
+function x(s, e, r, { discrete: a }) {
+  const i = r.originalEvent.target, c = new CustomEvent(s, { bubbles: !1, cancelable: !0, detail: r });
+  e && i.addEventListener(s, e, { once: !0 }), a ? k(i, c) : i.dispatchEvent(c);
+}
+export {
+  K as DismissableLayer,
+  X as DismissableLayerBranch
+};

package/dist/node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-presence/dist/index.js

@@ -0,0 +1,70 @@
+import * as i from "react";
+import { useComposedRefs as O } from "../../../../../react-compose-refs/dist/index.js";
+import { useLayoutEffect as A } from "../../../../../react-use-layout-effect/dist/index.js";
+function E(n, e) {
+  return i.useReducer((t, r) => e[t][r] ?? t, n);
+}
+var T = (n) => {
+  const { present: e, children: t } = n, r = R(e), a = typeof t == "function" ? t({ present: r.isPresent }) : i.Children.only(t), c = O(r.ref, v(a));
+  return typeof t == "function" || r.isPresent ? i.cloneElement(a, { ref: c }) : null;
+};
+T.displayName = "Presence";
+function R(n) {
+  const [e, t] = i.useState(), r = i.useRef(null), a = i.useRef(n), c = i.useRef("none"), p = n ? "mounted" : "unmounted", [N, s] = E(p, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  return i.useEffect(() => {
+    const o = l(r.current);
+    c.current = N === "mounted" ? o : "none";
+  }, [N]), A(() => {
+    const o = r.current, m = a.current;
+    if (m !== n) {
+      const f = c.current, u = l(o);
+      n ? s("MOUNT") : u === "none" || o?.display === "none" ? s("UNMOUNT") : s(m && f !== u ? "ANIMATION_OUT" : "UNMOUNT"), a.current = n;
+    }
+  }, [n, s]), A(() => {
+    if (e) {
+      let o;
+      const m = e.ownerDocument.defaultView ?? window, d = (u) => {
+        const g = l(r.current).includes(CSS.escape(u.animationName));
+        if (u.target === e && g && (s("ANIMATION_END"), !a.current)) {
+          const y = e.style.animationFillMode;
+          e.style.animationFillMode = "forwards", o = m.setTimeout(() => {
+            e.style.animationFillMode === "forwards" && (e.style.animationFillMode = y);
+          });
+        }
+      }, f = (u) => {
+        u.target === e && (c.current = l(r.current));
+      };
+      return e.addEventListener("animationstart", f), e.addEventListener("animationcancel", d), e.addEventListener("animationend", d), () => {
+        m.clearTimeout(o), e.removeEventListener("animationstart", f), e.removeEventListener("animationcancel", d), e.removeEventListener("animationend", d);
+      };
+    } else
+      s("ANIMATION_END");
+  }, [e, s]), {
+    isPresent: ["mounted", "unmountSuspended"].includes(N),
+    ref: i.useCallback((o) => {
+      r.current = o ? getComputedStyle(o) : null, t(o);
+    }, [])
+  };
+}
+function l(n) {
+  return n?.animationName || "none";
+}
+function v(n) {
+  let e = Object.getOwnPropertyDescriptor(n.props, "ref")?.get, t = e && "isReactWarning" in e && e.isReactWarning;
+  return t ? n.ref : (e = Object.getOwnPropertyDescriptor(n, "ref")?.get, t = e && "isReactWarning" in e && e.isReactWarning, t ? n.props.ref : n.props.ref || n.ref);
+}
+export {
+  T as Presence
+};

package/dist/node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-primitive/dist/index.js

@@ -0,0 +1,36 @@
+import * as f from "react";
+import * as p from "react-dom";
+import { createSlot as c } from "../../react-slot/dist/index.js";
+import { jsx as l } from "react/jsx-runtime";
+var u = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+], h = u.reduce((t, i) => {
+  const o = c(`Primitive.${i}`), r = f.forwardRef((e, m) => {
+    const { asChild: s, ...a } = e, n = s ? o : i;
+    return typeof window < "u" && (window[/* @__PURE__ */ Symbol.for("radix-ui")] = !0), /* @__PURE__ */ l(n, { ...a, ref: m });
+  });
+  return r.displayName = `Primitive.${i}`, { ...t, [i]: r };
+}, {});
+function w(t, i) {
+  t && p.flushSync(() => t.dispatchEvent(i));
+}
+export {
+  h as Primitive,
+  w as dispatchDiscreteCustomEvent
+};

package/dist/node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-slot/dist/index.js

@@ -0,0 +1,49 @@
+import * as l from "react";
+import { composeRefs as m } from "../../../../../react-compose-refs/dist/index.js";
+import { jsx as u } from "react/jsx-runtime";
+// @__NO_SIDE_EFFECTS__
+function b(e) {
+  const r = /* @__PURE__ */ y(e), t = l.forwardRef((o, n) => {
+    const { children: i, ...c } = o, s = l.Children.toArray(i), a = s.find(E);
+    if (a) {
+      const f = a.props.children, d = s.map((p) => p === a ? l.Children.count(f) > 1 ? l.Children.only(null) : l.isValidElement(f) ? f.props.children : null : p);
+      return /* @__PURE__ */ u(r, { ...c, ref: n, children: l.isValidElement(f) ? l.cloneElement(f, void 0, d) : null });
+    }
+    return /* @__PURE__ */ u(r, { ...c, ref: n, children: i });
+  });
+  return t.displayName = `${e}.Slot`, t;
+}
+// @__NO_SIDE_EFFECTS__
+function y(e) {
+  const r = l.forwardRef((t, o) => {
+    const { children: n, ...i } = t;
+    if (l.isValidElement(n)) {
+      const c = S(n), s = C(i, n.props);
+      return n.type !== l.Fragment && (s.ref = o ? m(o, c) : c), l.cloneElement(n, s);
+    }
+    return l.Children.count(n) > 1 ? l.Children.only(null) : null;
+  });
+  return r.displayName = `${e}.SlotClone`, r;
+}
+var g = /* @__PURE__ */ Symbol("radix.slottable");
+function E(e) {
+  return l.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === g;
+}
+function C(e, r) {
+  const t = { ...r };
+  for (const o in r) {
+    const n = e[o], i = r[o];
+    /^on[A-Z]/.test(o) ? n && i ? t[o] = (...s) => {
+      const a = i(...s);
+      return n(...s), a;
+    } : n && (t[o] = n) : o === "style" ? t[o] = { ...n, ...i } : o === "className" && (t[o] = [n, i].filter(Boolean).join(" "));
+  }
+  return { ...e, ...t };
+}
+function S(e) {
+  let r = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, t = r && "isReactWarning" in r && r.isReactWarning;
+  return t ? e.ref : (r = Object.getOwnPropertyDescriptor(e, "ref")?.get, t = r && "isReactWarning" in r && r.isReactWarning, t ? e.props.ref : e.props.ref || e.ref);
+}
+export {
+  b as createSlot
+};

package/dist/node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-use-controllable-state/dist/index.js

@@ -0,0 +1,52 @@
+import * as o from "react";
+import { useLayoutEffect as m } from "../../../../../react-use-layout-effect/dist/index.js";
+var v = o[" useInsertionEffect ".trim().toString()] || m;
+function w({
+  prop: e,
+  defaultProp: s,
+  onChange: t = () => {
+  },
+  caller: f
+}) {
+  const [u, c, i] = R({
+    defaultProp: s,
+    onChange: t
+  }), n = e !== void 0, a = n ? e : u;
+  {
+    const r = o.useRef(e !== void 0);
+    o.useEffect(() => {
+      const l = r.current;
+      l !== n && console.warn(
+        `${f} is changing from ${l ? "controlled" : "uncontrolled"} to ${n ? "controlled" : "uncontrolled"}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
+      ), r.current = n;
+    }, [n, f]);
+  }
+  const d = o.useCallback(
+    (r) => {
+      if (n) {
+        const l = C(r) ? r(e) : r;
+        l !== e && i.current?.(l);
+      } else
+        c(r);
+    },
+    [n, e, c, i]
+  );
+  return [a, d];
+}
+function R({
+  defaultProp: e,
+  onChange: s
+}) {
+  const [t, f] = o.useState(e), u = o.useRef(t), c = o.useRef(s);
+  return v(() => {
+    c.current = s;
+  }, [s]), o.useEffect(() => {
+    u.current !== t && (c.current?.(t), u.current = t);
+  }, [t, u]), [t, f, c];
+}
+function C(e) {
+  return typeof e == "function";
+}
+export {
+  w as useControllableState
+};

package/dist/node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-visually-hidden/dist/index.js

@@ -0,0 +1,32 @@
+import * as a from "react";
+import { Primitive as o } from "../../react-primitive/dist/index.js";
+import { jsx as t } from "react/jsx-runtime";
+var d = Object.freeze({
+  // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+  position: "absolute",
+  border: 0,
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  wordWrap: "normal"
+}), l = "VisuallyHidden", e = a.forwardRef(
+  (r, i) => /* @__PURE__ */ t(
+    o.span,
+    {
+      ...r,
+      ref: i,
+      style: { ...d, ...r.style }
+    }
+  )
+);
+e.displayName = l;
+var p = e;
+export {
+  p as Root,
+  d as VISUALLY_HIDDEN_STYLES,
+  e as VisuallyHidden
+};

package/dist/node_modules/ics/dist/index.js

@@ -1,4 +1,4 @@
-import { __exports as o } from "../../../_virtual/index8.js";
+import { __exports as o } from "../../../_virtual/index9.js";
 import { __require as q } from "./pipeline/index.js";
 var O;
 function R() {

package/dist/node_modules/ics/dist/pipeline/index.js

@@ -1,4 +1,4 @@
-import { __exports as u } from "../../../../_virtual/index10.js";
+import { __exports as u } from "../../../../_virtual/index11.js";
 import { __require as o } from "./build.js";
 import { __require as d } from "./format.js";
 import { __require as f } from "./validate.js";

package/dist/node_modules/prop-types/index.js

@@ -1,4 +1,4 @@
-import { __module as r } from "../../_virtual/index9.js";
+import { __module as r } from "../../_virtual/index8.js";
 import { __require as s } from "./node_modules/react-is/index.js";
 import { __require as t } from "./factoryWithTypeCheckers.js";
 import { __require as p } from "./factoryWithThrowingShims.js";

package/dist/node_modules/prop-types/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../../../_virtual/index11.js";
+import { __module as e } from "../../../../_virtual/index10.js";
 import { __require as o } from "./cjs/react-is.production.min.js";
 import { __require as t } from "./cjs/react-is.development.js";
 var r;

package/dist/node_modules/react-transition-group/esm/CSSTransition.js

@@ -1,7 +1,7 @@
 import C from "../../@babel/runtime/helpers/esm/extends.js";
 import x from "../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";
 import N from "../../@babel/runtime/helpers/esm/inheritsLoose.js";
-import v from "../../../_virtual/index7.js";
+import v from "../../../_virtual/index6.js";
 import A from "../../dom-helpers/esm/addClass.js";
 import _ from "../../dom-helpers/esm/removeClass.js";
 import c from "react";

package/dist/node_modules/react-transition-group/esm/Transition.js

@@ -1,6 +1,6 @@
 import C from "../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";
 import D from "../../@babel/runtime/helpers/esm/inheritsLoose.js";
-import o from "../../../_virtual/index7.js";
+import o from "../../../_virtual/index6.js";
 import v from "react";
 import b from "react-dom";
 import T from "./config.js";

package/dist/node_modules/react-transition-group/esm/utils/PropTypes.js

@@ -1,4 +1,4 @@
-import e from "../../../../_virtual/index7.js";
+import e from "../../../../_virtual/index6.js";
 var n = process.env.NODE_ENV !== "production" ? e.oneOfType([e.number, e.shape({
   enter: e.number,
   exit: e.number,

package/dist/patterns/UserManagement/UserManagement.js

@@ -1,34 +1,52 @@
-import { jsx as o, Fragment as x, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as A } from "react";
+import { jsx as o, Fragment as x, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
 import { getCommonProps as w, noOp as C } from "../../utils/index.js";
 import $ from "../../_virtual/index.js";
-import { AuthState as a } from "./types.js";
-import { TextVariants as s } from "../../components/Text/types.js";
-import i from "../../components/Text/Text.js";
-import r from "../../components/Icon/Icon.js";
-const b = A(
+import { AuthState as e } from "./types.js";
+import { TextVariants as m } from "../../components/Text/types.js";
+import l from "../../components/Text/Text.js";
+import g from "../../components/Icon/Icon.js";
+const v = y(
   ({
-    accountDetailsLinkComponent: l = "a",
-    className: d,
-    onLogin: g = C,
-    authState: t = a.LoggedOut,
-    loginLabel: h = "Login",
-    accountLabel: u = "Account",
-    href: f = "/account",
-    disabled: e = !1,
-    ...c
-  }, p) => {
-    const { className: n, ...N } = w(c, "UserManagement"), _ = t === a.LoggedIn, L = t !== a.Loading;
-    return /* @__PURE__ */ o("div", { ...N, className: $(n, d), ...c, ref: p, children: L && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ m(l, { className: `${n}__login`, href: f, disabled: e, children: [
-      /* @__PURE__ */ o(r, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
-      /* @__PURE__ */ o(i, { variant: s.bodySmall, children: u })
-    ] }) : /* @__PURE__ */ m("button", { className: `${n}__login`, onClick: g, disabled: e, children: [
-      /* @__PURE__ */ o(r, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
-      /* @__PURE__ */ o(i, { variant: s.bodySmall, children: h })
-    ] }) }) });
+    accountDetailsLinkComponent: d = "a",
+    className: f,
+    onLogin: h = C,
+    authState: r = e.LoggedOut,
+    loginLabel: t = "Login",
+    accountLabel: a = "Account",
+    href: p = "/account",
+    disabled: c = !1,
+    ...i
+  }, u) => {
+    const { className: n, ...N } = w(i, "UserManagement"), _ = r === e.LoggedIn, A = r !== e.Loading;
+    return /* @__PURE__ */ o("div", { ...N, className: $(n, f), ...i, ref: u, children: A && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ s(
+      d,
+      {
+        "aria-label": typeof a == "string" ? a : "Account",
+        className: `${n}__login`,
+        href: p,
+        disabled: c,
+        children: [
+          /* @__PURE__ */ o(g, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
+          /* @__PURE__ */ o(l, { variant: m.bodySmall, children: a })
+        ]
+      }
+    ) : /* @__PURE__ */ s(
+      "button",
+      {
+        "aria-label": typeof t == "string" ? t : "Login",
+        className: `${n}__login`,
+        onClick: h,
+        disabled: c,
+        children: [
+          /* @__PURE__ */ o(g, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
+          /* @__PURE__ */ o(l, { variant: m.bodySmall, children: t })
+        ]
+      }
+    ) }) });
   }
 );
-b.displayName = "UserManagement";
+v.displayName = "UserManagement";
 export {
-  b as default
+  v as default
 };

package/dist/scss/componentStyles.scss

@@ -13,7 +13,7 @@
 @use 'components/Grid/grid';
 @use 'components/Navigation/navigation';
 @use 'components/Navigation/NavigationItem/navigationItem';
-@use 'components/Navigation/NavigationItemTrigger/navigationItemTrigger';
+@use 'components/Navigation/NavigationItemWithSubmenu/navigationItemWithSubmenu';
 @use 'components/Navigation/NavigationList/navigationList';
 @use 'components/Input/input';
 @use 'components/Row/row';

package/dist/scss/components/Accordion/_accordion.scss

@@ -110,6 +110,12 @@
   text-align: inherit;
   width: 100%;
 
+  // Disabled state: keep normal appearance (no gray-out), only interaction is disabled
+  &[data-disabled] {
+    color: inherit;
+    opacity: 1;
+  }
+
   &--hoverable {
     cursor: pointer;
 
@@ -134,24 +140,12 @@
     width: 1.5rem;
   }
 
-  &__icon--sm {
-    flex: initial;
-    height: 0.75rem;
-    width: 1.25rem;
-  }
-
   @include media($breakpoint-md) {
     &__icon {
       flex: initial;
       height: 1rem;
       width: 1.5rem;
     }
-
-    &__icon--sm {
-      flex: initial;
-      height: 0.875rem;
-      width: 1.5rem;
-    }
   }
 
   &--blue-fill {

package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss

@@ -71,18 +71,6 @@
       display: flex;
     }
   }
-
-  @include isHeaderDesktop {
-    & > .#{$px}-nav__list-item-trigger::before {
-      background: $grey-50;
-      content: '';
-      height: 2px;
-      left: 0;
-      position: absolute;
-      top: 100%;
-      width: 100%;
-    }
-  }
 }
 
 .#{$px}-nav__list__section {