@everlywell/consumer-ui 1.41.1 → 1.41.2

package/index.mjs

@@ -1,9 +1,9 @@
-import { useSteps as en, Box as w, Stepper as tn, Icon as J, Flex as E, Text as P, Link as Y, Button as Rt, Image as nn, IconButton as rn, theme as se, VStack as ln, Skeleton as Ke, HStack as pt, SkeletonCircle as Me, DrawerContent as St, DrawerOverlay as _t, Drawer as Tt, DrawerHeader as kt, DrawerBody as Dt, Grid as on, GridItem as an, Accordion as sn, AccordionItem as un, AccordionButton as cn, AccordionPanel as dn, InputGroup as fn, Input as hn, InputRightElement as pn, Container as gn, DrawerFooter as xn, DrawerCloseButton as vn, Modal as mn, ModalOverlay as bn, ModalContent as jn, ModalHeader as wn, ModalBody as Cn, ModalFooter as yn, ModalCloseButton as En, useMediaQuery as Rn } from "@everlywell/ui-kit";
-import Re, { useEffect as te, forwardRef as It, useRef as Sn, useCallback as Lt, useState as K } from "react";
-import { Text as _n, useBreakpointValue as He, Box as Tn, InputGroup as kn, Input as Dn, InputRightElement as In, Icon as Ln } from "@chakra-ui/react";
-import { CaretRight as gt, MagnifyingGlass as Ot, List as On, Basket as An, CaretLeft as Pn, X as At, User as xt, QrCode as Mn, CaretDown as $n, ArrowRight as Bn, InstagramLogo as Hn, LinkedinLogo as Fn, FacebookLogo as Wn, TiktokLogo as zn, XLogo as Nn } from "@phosphor-icons/react";
-import { motion as lt, AnimatePresence as Vn } from "framer-motion";
-var et = { exports: {} }, ye = {};
+import { useSteps as tn, Box as C, Stepper as nn, Icon as J, Flex as k, Text as W, Link as X, Button as pt, Image as rn, IconButton as on, theme as K, useMediaQuery as Ot, VStack as ln, Skeleton as ot, HStack as Ct, SkeletonCircle as We, DrawerContent as At, DrawerOverlay as Pt, Drawer as $t, DrawerHeader as Ft, DrawerBody as Ht, Grid as an, GridItem as sn, Accordion as cn, AccordionItem as un, AccordionButton as dn, AccordionPanel as fn, InputGroup as pn, Input as hn, InputRightElement as gn, Container as xn, DrawerFooter as vn, DrawerCloseButton as mn, Modal as bn, ModalOverlay as wn, ModalContent as jn, ModalHeader as Cn, ModalBody as yn, ModalFooter as En, ModalCloseButton as kn } from "@everlywell/ui-kit";
+import Ae, { useEffect as le, forwardRef as Mt, useRef as Rn, useCallback as Bt, useState as Z } from "react";
+import { Text as _n, useBreakpointValue as ye, Box as Sn, InputGroup as Tn, Input as Dn, InputRightElement as In, Icon as Ln } from "@chakra-ui/react";
+import { CaretRight as yt, MagnifyingGlass as st, List as On, Basket as An, CaretLeft as Pn, X as zt, User as Et, QrCode as $n, CaretDown as Fn, ArrowRight as Hn, InstagramLogo as Mn, LinkedinLogo as Bn, FacebookLogo as zn, TiktokLogo as Wn, XLogo as Nn } from "@phosphor-icons/react";
+import { motion as ht, AnimatePresence as Vn } from "framer-motion";
+var ct = { exports: {} }, Le = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -13,21 +13,21 @@ var et = { exports: {} }, ye = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var vt;
+var kt;
 function Yn() {
-  if (vt) return ye;
-  vt = 1;
-  var n = Re, l = Symbol.for("react.element"), a = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, s = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, u = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function f(C, p, j) {
-    var c, g = {}, m = null, x = null;
-    j !== void 0 && (m = "" + j), p.key !== void 0 && (m = "" + p.key), p.ref !== void 0 && (x = p.ref);
-    for (c in p) i.call(p, c) && !u.hasOwnProperty(c) && (g[c] = p[c]);
-    if (C && C.defaultProps) for (c in p = C.defaultProps, p) g[c] === void 0 && (g[c] = p[c]);
-    return { $$typeof: l, type: C, key: m, ref: x, props: g, _owner: s.current };
+  if (kt) return Le;
+  kt = 1;
+  var n = Ae, o = Symbol.for("react.element"), c = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, s = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, u = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function p(v, x, f) {
+    var d, g = {}, w = null, y = null;
+    f !== void 0 && (w = "" + f), x.key !== void 0 && (w = "" + x.key), x.ref !== void 0 && (y = x.ref);
+    for (d in x) i.call(x, d) && !u.hasOwnProperty(d) && (g[d] = x[d]);
+    if (v && v.defaultProps) for (d in x = v.defaultProps, x) g[d] === void 0 && (g[d] = x[d]);
+    return { $$typeof: o, type: v, key: w, ref: y, props: g, _owner: s.current };
   }
-  return ye.Fragment = a, ye.jsx = f, ye.jsxs = f, ye;
+  return Le.Fragment = c, Le.jsx = p, Le.jsxs = p, Le;
 }
-var Ee = {};
+var Oe = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -37,54 +37,54 @@ var Ee = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var mt;
+var Rt;
 function Gn() {
-  return mt || (mt = 1, process.env.NODE_ENV !== "production" && function() {
-    var n = Re, l = Symbol.for("react.element"), a = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), s = Symbol.for("react.strict_mode"), u = Symbol.for("react.profiler"), f = Symbol.for("react.provider"), C = Symbol.for("react.context"), p = Symbol.for("react.forward_ref"), j = Symbol.for("react.suspense"), c = Symbol.for("react.suspense_list"), g = Symbol.for("react.memo"), m = Symbol.for("react.lazy"), x = Symbol.for("react.offscreen"), T = Symbol.iterator, G = "@@iterator";
-    function Q(e) {
+  return Rt || (Rt = 1, process.env.NODE_ENV !== "production" && function() {
+    var n = Ae, o = Symbol.for("react.element"), c = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), s = Symbol.for("react.strict_mode"), u = Symbol.for("react.profiler"), p = Symbol.for("react.provider"), v = Symbol.for("react.context"), x = Symbol.for("react.forward_ref"), f = Symbol.for("react.suspense"), d = Symbol.for("react.suspense_list"), g = Symbol.for("react.memo"), w = Symbol.for("react.lazy"), y = Symbol.for("react.offscreen"), D = Symbol.iterator, $ = "@@iterator";
+    function m(e) {
       if (e === null || typeof e != "object")
         return null;
-      var r = T && e[T] || e[G];
+      var r = D && e[D] || e[$];
       return typeof r == "function" ? r : null;
     }
-    var O = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    var H = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
     function _(e) {
       {
-        for (var r = arguments.length, o = new Array(r > 1 ? r - 1 : 0), h = 1; h < r; h++)
-          o[h - 1] = arguments[h];
-        X("error", e, o);
+        for (var r = arguments.length, a = new Array(r > 1 ? r - 1 : 0), h = 1; h < r; h++)
+          a[h - 1] = arguments[h];
+        V("error", e, a);
       }
     }
-    function X(e, r, o) {
+    function V(e, r, a) {
       {
-        var h = O.ReactDebugCurrentFrame, y = h.getStackAddendum();
-        y !== "" && (r += "%s", o = o.concat([y]));
-        var R = o.map(function(b) {
-          return String(b);
+        var h = H.ReactDebugCurrentFrame, E = h.getStackAddendum();
+        E !== "" && (r += "%s", a = a.concat([E]));
+        var R = a.map(function(j) {
+          return String(j);
         });
         R.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, R);
       }
     }
-    var A = !1, $ = !1, W = !1, U = !1, L = !1, S;
-    S = Symbol.for("react.module.reference");
-    function B(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === i || e === u || L || e === s || e === j || e === c || U || e === x || A || $ || W || typeof e == "object" && e !== null && (e.$$typeof === m || e.$$typeof === g || e.$$typeof === f || e.$$typeof === C || e.$$typeof === p || // This needs to include all possible module reference object
+    var A = !1, M = !1, F = !1, ee = !1, ae = !1, Q;
+    Q = Symbol.for("react.module.reference");
+    function S(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === i || e === u || ae || e === s || e === f || e === d || ee || e === y || A || M || F || typeof e == "object" && e !== null && (e.$$typeof === w || e.$$typeof === g || e.$$typeof === p || e.$$typeof === v || e.$$typeof === x || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
-      e.$$typeof === S || e.getModuleId !== void 0));
+      e.$$typeof === Q || e.getModuleId !== void 0));
     }
-    function Se(e, r, o) {
+    function Y(e, r, a) {
       var h = e.displayName;
       if (h)
         return h;
-      var y = r.displayName || r.name || "";
-      return y !== "" ? o + "(" + y + ")" : o;
+      var E = r.displayName || r.name || "";
+      return E !== "" ? a + "(" + E + ")" : a;
     }
-    function xe(e) {
+    function ie(e) {
       return e.displayName || "Context";
     }
-    function z(e) {
+    function B(e) {
       if (e == null)
         return null;
       if (typeof e.tag == "number" && _("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
@@ -94,34 +94,34 @@ function Gn() {
       switch (e) {
         case i:
           return "Fragment";
-        case a:
+        case c:
           return "Portal";
         case u:
           return "Profiler";
         case s:
           return "StrictMode";
-        case j:
+        case f:
           return "Suspense";
-        case c:
+        case d:
           return "SuspenseList";
       }
       if (typeof e == "object")
         switch (e.$$typeof) {
-          case C:
+          case v:
             var r = e;
-            return xe(r) + ".Consumer";
-          case f:
-            var o = e;
-            return xe(o._context) + ".Provider";
+            return ie(r) + ".Consumer";
           case p:
-            return Se(e, e.render, "ForwardRef");
+            var a = e;
+            return ie(a._context) + ".Provider";
+          case x:
+            return Y(e, e.render, "ForwardRef");
           case g:
             var h = e.displayName || null;
-            return h !== null ? h : z(e.type) || "Memo";
-          case m: {
-            var y = e, R = y._payload, b = y._init;
+            return h !== null ? h : B(e.type) || "Memo";
+          case w: {
+            var E = e, R = E._payload, j = E._init;
             try {
-              return z(b(R));
+              return B(j(R));
             } catch {
               return null;
             }
@@ -129,18 +129,18 @@ function Gn() {
         }
       return null;
     }
-    var q = Object.assign, ee = 0, _e, Te, ve, ke, De, ue, Ie;
-    function me() {
+    var I = Object.assign, te = 0, ne, Pe, $e, Re, _e, se, Se;
+    function re() {
     }
-    me.__reactDisabledLog = !0;
-    function be() {
+    re.__reactDisabledLog = !0;
+    function Ge() {
       {
-        if (ee === 0) {
-          _e = console.log, Te = console.info, ve = console.warn, ke = console.error, De = console.group, ue = console.groupCollapsed, Ie = console.groupEnd;
+        if (te === 0) {
+          ne = console.log, Pe = console.info, $e = console.warn, Re = console.error, _e = console.group, se = console.groupCollapsed, Se = console.groupEnd;
           var e = {
             configurable: !0,
             enumerable: !0,
-            value: me,
+            value: re,
             writable: !0
           };
           Object.defineProperties(console, {
@@ -153,336 +153,336 @@ function Gn() {
             groupEnd: e
           });
         }
-        ee++;
+        te++;
       }
     }
-    function Fe() {
+    function Ue() {
       {
-        if (ee--, ee === 0) {
+        if (te--, te === 0) {
           var e = {
             configurable: !0,
             enumerable: !0,
             writable: !0
           };
           Object.defineProperties(console, {
-            log: q({}, e, {
-              value: _e
+            log: I({}, e, {
+              value: ne
             }),
-            info: q({}, e, {
-              value: Te
+            info: I({}, e, {
+              value: Pe
             }),
-            warn: q({}, e, {
-              value: ve
+            warn: I({}, e, {
+              value: $e
             }),
-            error: q({}, e, {
-              value: ke
+            error: I({}, e, {
+              value: Re
             }),
-            group: q({}, e, {
-              value: De
+            group: I({}, e, {
+              value: _e
             }),
-            groupCollapsed: q({}, e, {
-              value: ue
+            groupCollapsed: I({}, e, {
+              value: se
             }),
-            groupEnd: q({}, e, {
-              value: Ie
+            groupEnd: I({}, e, {
+              value: Se
             })
           });
         }
-        ee < 0 && _("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        te < 0 && _("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var je = O.ReactCurrentDispatcher, ne;
-    function Z(e, r, o) {
+    var Te = H.ReactCurrentDispatcher, fe;
+    function xe(e, r, a) {
       {
-        if (ne === void 0)
+        if (fe === void 0)
           try {
             throw Error();
-          } catch (y) {
-            var h = y.stack.trim().match(/\n( *(at )?)/);
-            ne = h && h[1] || "";
+          } catch (E) {
+            var h = E.stack.trim().match(/\n( *(at )?)/);
+            fe = h && h[1] || "";
           }
         return `
-` + ne + e;
+` + fe + e;
       }
     }
-    var we = !1, ce;
+    var ve = !1, ce;
     {
-      var We = typeof WeakMap == "function" ? WeakMap : Map;
-      ce = new We();
+      var Ze = typeof WeakMap == "function" ? WeakMap : Map;
+      ce = new Ze();
     }
-    function Le(e, r) {
-      if (!e || we)
+    function Fe(e, r) {
+      if (!e || ve)
         return "";
       {
-        var o = ce.get(e);
-        if (o !== void 0)
-          return o;
+        var a = ce.get(e);
+        if (a !== void 0)
+          return a;
       }
       var h;
-      we = !0;
-      var y = Error.prepareStackTrace;
+      ve = !0;
+      var E = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
       var R;
-      R = je.current, je.current = null, be();
+      R = Te.current, Te.current = null, Ge();
       try {
         if (r) {
-          var b = function() {
+          var j = function() {
             throw Error();
           };
-          if (Object.defineProperty(b.prototype, "props", {
+          if (Object.defineProperty(j.prototype, "props", {
             set: function() {
               throw Error();
             }
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
-              Reflect.construct(b, []);
-            } catch (F) {
-              h = F;
+              Reflect.construct(j, []);
+            } catch (G) {
+              h = G;
             }
-            Reflect.construct(e, [], b);
+            Reflect.construct(e, [], j);
           } else {
             try {
-              b.call();
-            } catch (F) {
-              h = F;
+              j.call();
+            } catch (G) {
+              h = G;
             }
-            e.call(b.prototype);
+            e.call(j.prototype);
           }
         } else {
           try {
             throw Error();
-          } catch (F) {
-            h = F;
+          } catch (G) {
+            h = G;
           }
           e();
         }
-      } catch (F) {
-        if (F && h && typeof F.stack == "string") {
-          for (var v = F.stack.split(`
-`), M = h.stack.split(`
-`), D = v.length - 1, I = M.length - 1; D >= 1 && I >= 0 && v[D] !== M[I]; )
-            I--;
-          for (; D >= 1 && I >= 0; D--, I--)
-            if (v[D] !== M[I]) {
-              if (D !== 1 || I !== 1)
+      } catch (G) {
+        if (G && h && typeof G.stack == "string") {
+          for (var b = G.stack.split(`
+`), N = h.stack.split(`
+`), O = b.length - 1, P = N.length - 1; O >= 1 && P >= 0 && b[O] !== N[P]; )
+            P--;
+          for (; O >= 1 && P >= 0; O--, P--)
+            if (b[O] !== N[P]) {
+              if (O !== 1 || P !== 1)
                 do
-                  if (D--, I--, I < 0 || v[D] !== M[I]) {
-                    var V = `
-` + v[D].replace(" at new ", " at ");
-                    return e.displayName && V.includes("<anonymous>") && (V = V.replace("<anonymous>", e.displayName)), typeof e == "function" && ce.set(e, V), V;
+                  if (O--, P--, P < 0 || b[O] !== N[P]) {
+                    var U = `
+` + b[O].replace(" at new ", " at ");
+                    return e.displayName && U.includes("<anonymous>") && (U = U.replace("<anonymous>", e.displayName)), typeof e == "function" && ce.set(e, U), U;
                   }
-                while (D >= 1 && I >= 0);
+                while (O >= 1 && P >= 0);
               break;
             }
         }
       } finally {
-        we = !1, je.current = R, Fe(), Error.prepareStackTrace = y;
+        ve = !1, Te.current = R, Ue(), Error.prepareStackTrace = E;
       }
-      var he = e ? e.displayName || e.name : "", ae = he ? Z(he) : "";
-      return typeof e == "function" && ce.set(e, ae), ae;
+      var Ce = e ? e.displayName || e.name : "", ge = Ce ? xe(Ce) : "";
+      return typeof e == "function" && ce.set(e, ge), ge;
     }
-    function ze(e, r, o) {
-      return Le(e, !1);
+    function me(e, r, a) {
+      return Fe(e, !1);
     }
-    function Ne(e) {
+    function oe(e) {
       var r = e.prototype;
       return !!(r && r.isReactComponent);
     }
-    function de(e, r, o) {
+    function be(e, r, a) {
       if (e == null)
         return "";
       if (typeof e == "function")
-        return Le(e, Ne(e));
+        return Fe(e, oe(e));
       if (typeof e == "string")
-        return Z(e);
+        return xe(e);
       switch (e) {
-        case j:
-          return Z("Suspense");
-        case c:
-          return Z("SuspenseList");
+        case f:
+          return xe("Suspense");
+        case d:
+          return xe("SuspenseList");
       }
       if (typeof e == "object")
         switch (e.$$typeof) {
-          case p:
-            return ze(e.render);
+          case x:
+            return me(e.render);
           case g:
-            return de(e.type, r, o);
-          case m: {
-            var h = e, y = h._payload, R = h._init;
+            return be(e.type, r, a);
+          case w: {
+            var h = e, E = h._payload, R = h._init;
             try {
-              return de(R(y), r, o);
+              return be(R(E), r, a);
             } catch {
             }
           }
         }
       return "";
     }
-    var le = Object.prototype.hasOwnProperty, Oe = {}, Ce = O.ReactDebugCurrentFrame;
-    function oe(e) {
+    var pe = Object.prototype.hasOwnProperty, He = {}, we = H.ReactDebugCurrentFrame;
+    function ue(e) {
       if (e) {
-        var r = e._owner, o = de(e.type, e._source, r ? r.type : null);
-        Ce.setExtraStackFrame(o);
+        var r = e._owner, a = be(e.type, e._source, r ? r.type : null);
+        we.setExtraStackFrame(a);
       } else
-        Ce.setExtraStackFrame(null);
+        we.setExtraStackFrame(null);
     }
-    function Ae(e, r, o, h, y) {
+    function Xe(e, r, a, h, E) {
       {
-        var R = Function.call.bind(le);
-        for (var b in e)
-          if (R(e, b)) {
-            var v = void 0;
+        var R = Function.call.bind(pe);
+        for (var j in e)
+          if (R(e, j)) {
+            var b = void 0;
             try {
-              if (typeof e[b] != "function") {
-                var M = Error((h || "React class") + ": " + o + " type `" + b + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[b] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw M.name = "Invariant Violation", M;
+              if (typeof e[j] != "function") {
+                var N = Error((h || "React class") + ": " + a + " type `" + j + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[j] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw N.name = "Invariant Violation", N;
               }
-              v = e[b](r, b, h, o, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (D) {
-              v = D;
+              b = e[j](r, j, h, a, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (O) {
+              b = O;
             }
-            v && !(v instanceof Error) && (oe(y), _("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", h || "React class", o, b, typeof v), oe(null)), v instanceof Error && !(v.message in Oe) && (Oe[v.message] = !0, oe(y), _("Failed %s type: %s", o, v.message), oe(null));
+            b && !(b instanceof Error) && (ue(E), _("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", h || "React class", a, j, typeof b), ue(null)), b instanceof Error && !(b.message in He) && (He[b.message] = !0, ue(E), _("Failed %s type: %s", a, b.message), ue(null));
           }
       }
     }
-    var d = Array.isArray;
-    function k(e) {
-      return d(e);
+    var Ke = Array.isArray;
+    function De(e) {
+      return Ke(e);
     }
-    function H(e) {
+    function Je(e) {
       {
-        var r = typeof Symbol == "function" && Symbol.toStringTag, o = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return o;
+        var r = typeof Symbol == "function" && Symbol.toStringTag, a = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return a;
       }
     }
-    function N(e) {
+    function q(e) {
       try {
-        return Pe(e), !1;
+        return Me(e), !1;
       } catch {
         return !0;
       }
     }
-    function Pe(e) {
+    function Me(e) {
       return "" + e;
     }
-    function re(e) {
-      if (N(e))
-        return _("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", H(e)), Pe(e);
+    function Be(e) {
+      if (q(e))
+        return _("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Je(e)), Me(e);
     }
-    var ie = O.ReactCurrentOwner, Mt = {
+    var de = H.ReactCurrentOwner, ze = {
       key: !0,
       ref: !0,
       __self: !0,
       __source: !0
-    }, ot, it, Ve;
-    Ve = {};
-    function $t(e) {
-      if (le.call(e, "ref")) {
+    }, Ie, l, T;
+    T = {};
+    function L(e) {
+      if (pe.call(e, "ref")) {
         var r = Object.getOwnPropertyDescriptor(e, "ref").get;
         if (r && r.isReactWarning)
           return !1;
       }
       return e.ref !== void 0;
     }
-    function Bt(e) {
-      if (le.call(e, "key")) {
+    function z(e) {
+      if (pe.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning)
           return !1;
       }
       return e.key !== void 0;
     }
-    function Ht(e, r) {
-      if (typeof e.ref == "string" && ie.current && r && ie.current.stateNode !== r) {
-        var o = z(ie.current.type);
-        Ve[o] || (_('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', z(ie.current.type), e.ref), Ve[o] = !0);
+    function Qe(e, r) {
+      if (typeof e.ref == "string" && de.current && r && de.current.stateNode !== r) {
+        var a = B(de.current.type);
+        T[a] || (_('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', B(de.current.type), e.ref), T[a] = !0);
       }
     }
-    function Ft(e, r) {
+    function he(e, r) {
       {
-        var o = function() {
-          ot || (ot = !0, _("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+        var a = function() {
+          Ie || (Ie = !0, _("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
         };
-        o.isReactWarning = !0, Object.defineProperty(e, "key", {
-          get: o,
+        a.isReactWarning = !0, Object.defineProperty(e, "key", {
+          get: a,
           configurable: !0
         });
       }
     }
-    function Wt(e, r) {
+    function qe(e, r) {
       {
-        var o = function() {
-          it || (it = !0, _("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+        var a = function() {
+          l || (l = !0, _("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
         };
-        o.isReactWarning = !0, Object.defineProperty(e, "ref", {
-          get: o,
+        a.isReactWarning = !0, Object.defineProperty(e, "ref", {
+          get: a,
           configurable: !0
         });
       }
     }
-    var zt = function(e, r, o, h, y, R, b) {
-      var v = {
+    var Nt = function(e, r, a, h, E, R, j) {
+      var b = {
         // This tag allows us to uniquely identify this as a React Element
-        $$typeof: l,
+        $$typeof: o,
         // Built-in properties that belong on the element
         type: e,
         key: r,
-        ref: o,
-        props: b,
+        ref: a,
+        props: j,
         // Record the component responsible for creating this element.
         _owner: R
       };
-      return v._store = {}, Object.defineProperty(v._store, "validated", {
+      return b._store = {}, Object.defineProperty(b._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: !1
-      }), Object.defineProperty(v, "_self", {
+      }), Object.defineProperty(b, "_self", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
         value: h
-      }), Object.defineProperty(v, "_source", {
+      }), Object.defineProperty(b, "_source", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: y
-      }), Object.freeze && (Object.freeze(v.props), Object.freeze(v)), v;
+        value: E
+      }), Object.freeze && (Object.freeze(b.props), Object.freeze(b)), b;
     };
-    function Nt(e, r, o, h, y) {
+    function Vt(e, r, a, h, E) {
       {
-        var R, b = {}, v = null, M = null;
-        o !== void 0 && (re(o), v = "" + o), Bt(r) && (re(r.key), v = "" + r.key), $t(r) && (M = r.ref, Ht(r, y));
+        var R, j = {}, b = null, N = null;
+        a !== void 0 && (Be(a), b = "" + a), z(r) && (Be(r.key), b = "" + r.key), L(r) && (N = r.ref, Qe(r, E));
         for (R in r)
-          le.call(r, R) && !Mt.hasOwnProperty(R) && (b[R] = r[R]);
+          pe.call(r, R) && !ze.hasOwnProperty(R) && (j[R] = r[R]);
         if (e && e.defaultProps) {
-          var D = e.defaultProps;
-          for (R in D)
-            b[R] === void 0 && (b[R] = D[R]);
+          var O = e.defaultProps;
+          for (R in O)
+            j[R] === void 0 && (j[R] = O[R]);
         }
-        if (v || M) {
-          var I = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          v && Ft(b, I), M && Wt(b, I);
+        if (b || N) {
+          var P = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          b && he(j, P), N && qe(j, P);
         }
-        return zt(e, v, M, y, h, ie.current, b);
+        return Nt(e, b, N, E, h, de.current, j);
       }
     }
-    var Ye = O.ReactCurrentOwner, at = O.ReactDebugCurrentFrame;
-    function fe(e) {
+    var et = H.ReactCurrentOwner, gt = H.ReactDebugCurrentFrame;
+    function je(e) {
       if (e) {
-        var r = e._owner, o = de(e.type, e._source, r ? r.type : null);
-        at.setExtraStackFrame(o);
+        var r = e._owner, a = be(e.type, e._source, r ? r.type : null);
+        gt.setExtraStackFrame(a);
       } else
-        at.setExtraStackFrame(null);
+        gt.setExtraStackFrame(null);
     }
-    var Ge;
-    Ge = !1;
-    function Ue(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === l;
+    var tt;
+    tt = !1;
+    function nt(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === o;
     }
-    function st() {
+    function xt() {
       {
-        if (Ye.current) {
-          var e = z(Ye.current.type);
+        if (et.current) {
+          var e = B(et.current.type);
           if (e)
             return `
 
@@ -491,199 +491,199 @@ Check the render method of \`` + e + "`.";
         return "";
       }
     }
-    function Vt(e) {
+    function Yt(e) {
       return "";
     }
-    var ut = {};
-    function Yt(e) {
+    var vt = {};
+    function Gt(e) {
       {
-        var r = st();
+        var r = xt();
         if (!r) {
-          var o = typeof e == "string" ? e : e.displayName || e.name;
-          o && (r = `
+          var a = typeof e == "string" ? e : e.displayName || e.name;
+          a && (r = `
 
-Check the top-level render call using <` + o + ">.");
+Check the top-level render call using <` + a + ">.");
         }
         return r;
       }
     }
-    function ct(e, r) {
+    function mt(e, r) {
       {
         if (!e._store || e._store.validated || e.key != null)
           return;
         e._store.validated = !0;
-        var o = Yt(r);
-        if (ut[o])
+        var a = Gt(r);
+        if (vt[a])
           return;
-        ut[o] = !0;
+        vt[a] = !0;
         var h = "";
-        e && e._owner && e._owner !== Ye.current && (h = " It was passed a child from " + z(e._owner.type) + "."), fe(e), _('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', o, h), fe(null);
+        e && e._owner && e._owner !== et.current && (h = " It was passed a child from " + B(e._owner.type) + "."), je(e), _('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', a, h), je(null);
       }
     }
-    function dt(e, r) {
+    function bt(e, r) {
       {
         if (typeof e != "object")
           return;
-        if (k(e))
-          for (var o = 0; o < e.length; o++) {
-            var h = e[o];
-            Ue(h) && ct(h, r);
+        if (De(e))
+          for (var a = 0; a < e.length; a++) {
+            var h = e[a];
+            nt(h) && mt(h, r);
           }
-        else if (Ue(e))
+        else if (nt(e))
           e._store && (e._store.validated = !0);
         else if (e) {
-          var y = Q(e);
-          if (typeof y == "function" && y !== e.entries)
-            for (var R = y.call(e), b; !(b = R.next()).done; )
-              Ue(b.value) && ct(b.value, r);
+          var E = m(e);
+          if (typeof E == "function" && E !== e.entries)
+            for (var R = E.call(e), j; !(j = R.next()).done; )
+              nt(j.value) && mt(j.value, r);
         }
       }
     }
-    function Gt(e) {
+    function Ut(e) {
       {
         var r = e.type;
         if (r == null || typeof r == "string")
           return;
-        var o;
+        var a;
         if (typeof r == "function")
-          o = r.propTypes;
-        else if (typeof r == "object" && (r.$$typeof === p || // Note: Memo only checks outer props here.
+          a = r.propTypes;
+        else if (typeof r == "object" && (r.$$typeof === x || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
         r.$$typeof === g))
-          o = r.propTypes;
+          a = r.propTypes;
         else
           return;
-        if (o) {
-          var h = z(r);
-          Ae(o, e.props, "prop", h, e);
-        } else if (r.PropTypes !== void 0 && !Ge) {
-          Ge = !0;
-          var y = z(r);
-          _("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", y || "Unknown");
+        if (a) {
+          var h = B(r);
+          Xe(a, e.props, "prop", h, e);
+        } else if (r.PropTypes !== void 0 && !tt) {
+          tt = !0;
+          var E = B(r);
+          _("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", E || "Unknown");
         }
         typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && _("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
     }
-    function Ut(e) {
+    function Zt(e) {
       {
-        for (var r = Object.keys(e.props), o = 0; o < r.length; o++) {
-          var h = r[o];
+        for (var r = Object.keys(e.props), a = 0; a < r.length; a++) {
+          var h = r[a];
           if (h !== "children" && h !== "key") {
-            fe(e), _("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", h), fe(null);
+            je(e), _("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", h), je(null);
             break;
           }
         }
-        e.ref !== null && (fe(e), _("Invalid attribute `ref` supplied to `React.Fragment`."), fe(null));
+        e.ref !== null && (je(e), _("Invalid attribute `ref` supplied to `React.Fragment`."), je(null));
       }
     }
-    var ft = {};
-    function ht(e, r, o, h, y, R) {
+    var wt = {};
+    function jt(e, r, a, h, E, R) {
       {
-        var b = B(e);
-        if (!b) {
-          var v = "";
-          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (v += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var M = Vt();
-          M ? v += M : v += st();
-          var D;
-          e === null ? D = "null" : k(e) ? D = "array" : e !== void 0 && e.$$typeof === l ? (D = "<" + (z(e.type) || "Unknown") + " />", v = " Did you accidentally export a JSX literal instead of a component?") : D = typeof e, _("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", D, v);
+        var j = S(e);
+        if (!j) {
+          var b = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (b += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var N = Yt();
+          N ? b += N : b += xt();
+          var O;
+          e === null ? O = "null" : De(e) ? O = "array" : e !== void 0 && e.$$typeof === o ? (O = "<" + (B(e.type) || "Unknown") + " />", b = " Did you accidentally export a JSX literal instead of a component?") : O = typeof e, _("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", O, b);
         }
-        var I = Nt(e, r, o, y, R);
-        if (I == null)
-          return I;
-        if (b) {
-          var V = r.children;
-          if (V !== void 0)
+        var P = Vt(e, r, a, E, R);
+        if (P == null)
+          return P;
+        if (j) {
+          var U = r.children;
+          if (U !== void 0)
             if (h)
-              if (k(V)) {
-                for (var he = 0; he < V.length; he++)
-                  dt(V[he], e);
-                Object.freeze && Object.freeze(V);
+              if (De(U)) {
+                for (var Ce = 0; Ce < U.length; Ce++)
+                  bt(U[Ce], e);
+                Object.freeze && Object.freeze(U);
               } else
                 _("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
             else
-              dt(V, e);
+              bt(U, e);
         }
-        if (le.call(r, "key")) {
-          var ae = z(e), F = Object.keys(r).filter(function(qt) {
-            return qt !== "key";
-          }), Ze = F.length > 0 ? "{key: someKey, " + F.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!ft[ae + Ze]) {
-            var Qt = F.length > 0 ? "{" + F.join(": ..., ") + ": ...}" : "{}";
+        if (pe.call(r, "key")) {
+          var ge = B(e), G = Object.keys(r).filter(function(en) {
+            return en !== "key";
+          }), rt = G.length > 0 ? "{key: someKey, " + G.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!wt[ge + rt]) {
+            var qt = G.length > 0 ? "{" + G.join(": ..., ") + ": ...}" : "{}";
             _(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`, Ze, ae, Qt, ae), ft[ae + Ze] = !0;
+  <%s key={someKey} {...props} />`, rt, ge, qt, ge), wt[ge + rt] = !0;
           }
         }
-        return e === i ? Ut(I) : Gt(I), I;
+        return e === i ? Zt(P) : Ut(P), P;
       }
     }
-    function Zt(e, r, o) {
-      return ht(e, r, o, !0);
+    function Xt(e, r, a) {
+      return jt(e, r, a, !0);
     }
-    function Kt(e, r, o) {
-      return ht(e, r, o, !1);
+    function Kt(e, r, a) {
+      return jt(e, r, a, !1);
     }
-    var Xt = Kt, Jt = Zt;
-    Ee.Fragment = i, Ee.jsx = Xt, Ee.jsxs = Jt;
-  }()), Ee;
+    var Jt = Kt, Qt = Xt;
+    Oe.Fragment = i, Oe.jsx = Jt, Oe.jsxs = Qt;
+  }()), Oe;
 }
-process.env.NODE_ENV === "production" ? et.exports = Yn() : et.exports = Gn();
-var t = et.exports;
-const Xe = 60, bt = 6, Un = (n) => {
+process.env.NODE_ENV === "production" ? ct.exports = Yn() : ct.exports = Gn();
+var t = ct.exports;
+const lt = 60, _t = 6, Un = (n) => {
   const {
-    activeStepIndex: l,
-    hideIndicators: a = !1,
+    activeStepIndex: o,
+    hideIndicators: c = !1,
     steps: i,
     stepperTheme: s = {
       light: "eggplant.light",
       base: "eggplant.base"
     }
-  } = n, { activeStep: u, setActiveStep: f } = en({
-    index: l,
+  } = n, { activeStep: u, setActiveStep: p } = tn({
+    index: o,
     count: i.length
   });
-  return te(() => {
-    f(l);
-  }, [l, f]), /* @__PURE__ */ t.jsx(
-    w,
+  return le(() => {
+    p(o);
+  }, [o, p]), /* @__PURE__ */ t.jsx(
+    C,
     { position: "relative", width: "100%", "data-testid": "stepper", children: /* @__PURE__ */ t.jsx(
-      tn,
+      nn,
       {
         role: "progressbar",
         index: u,
         width: "100%",
         display: "flex",
         flexWrap: "nowrap",
-        children: i.map((C, p) => {
-          const j = u === p, c = p === 0, g = p === i.length - 1, m = u > p;
-          let x = `${Xe}px`;
-          const T = `calc(100% - ((${Xe * (i.length - 1)}px) - (${i.length - 1} * ${bt * 2}px)))`;
-          return j ? x = T : (c || g) && (x = `${Xe - bt}px`), /* @__PURE__ */ t.jsx(
-            w,
+        children: i.map((v, x) => {
+          const f = u === x, d = x === 0, g = x === i.length - 1, w = u > x;
+          let y = `${lt}px`;
+          const D = `calc(100% - ((${lt * (i.length - 1)}px) - (${i.length - 1} * ${_t * 2}px)))`;
+          return f ? y = D : (d || g) && (y = `${lt - _t}px`), /* @__PURE__ */ t.jsx(
+            C,
             {
-              width: x,
-              opacity: m || j ? 1 : 0.2,
+              width: y,
+              opacity: w || f ? 1 : 0.2,
               paddingRight: g ? "0" : "6px",
-              paddingLeft: c ? "0" : "6px",
+              paddingLeft: d ? "0" : "6px",
               transition: "width 0.4s ease-in-out, opacity 0.4s ease-in-out",
               children: /* @__PURE__ */ t.jsx(
-                w,
+                C,
                 {
-                  paddingTop: a ? 2 : 5,
+                  paddingTop: c ? 2 : 5,
                   position: "relative",
                   width: "100%",
                   children: /* @__PURE__ */ t.jsx(
-                    w,
+                    C,
                     {
                       width: "100%",
                       position: "absolute",
                       top: "0",
-                      backgroundColor: m ? s.light : s.base,
-                      height: a ? "4px" : "8px",
+                      backgroundColor: w ? s.light : s.base,
+                      height: c ? "4px" : "8px",
                       borderRadius: "4",
                       left: "0"
                     }
@@ -691,59 +691,60 @@ const Xe = 60, bt = 6, Un = (n) => {
                 }
               )
             },
-            `step-${p}`
+            `step-${x}`
           );
         })
       }
     ) }
   );
-}, gr = Re.memo(Un), xr = ({
+}, gr = Ae.memo(Un), xr = ({
   children: n,
-  ...l
+  ...o
 }) => /* @__PURE__ */ t.jsx(
   _n,
-  { color: "tints.uiGrey", fontSize: ["md", null, null, "lg"], ...l, children: n }
-), ge = (n, l) => {
-  const a = (n == null ? void 0 : n.startsWith("http")) || (n == null ? void 0 : n.startsWith("mailto"));
-  return l && !a ? {
+  { color: "tints.uiGrey", fontSize: ["md", null, null, "lg"], ...o, children: n }
+), ke = (n, o) => {
+  const c = (n == null ? void 0 : n.startsWith("http")) || (n == null ? void 0 : n.startsWith("mailto"));
+  return o && !c ? {
     to: n
   } : {
     href: n
   };
-}, Je = It(
-  (n, l) => {
+}, Ne = Mt(
+  (n, o) => {
     const {
-      label: a,
+      label: c,
       additionalContent: i,
       mainTextFontSize: s,
       linkComponent: u,
-      href: f,
-      ...C
-    } = n, p = u || Y, j = ge(f, !!u);
+      href: p,
+      forceMobileStyle: v = !1,
+      ...x
+    } = n, f = u || X, d = ke(p, !!u), g = v ? s || "xl" : [s || "xl", null, null, "lg"], w = v ? "xl" : ["xl", null, null, "lg"], y = v ? void 0 : [null, null, null, 1], D = v ? void 0 : [null, null, null, "space-between"], $ = v ? "3" : [3, null, null, 0], m = v ? "1px" : ["1px", null, null, "unset"], H = v ? "tints.cream" : ["tints.cream", null, null, "unset"], _ = v ? "100%" : ["100%", null, null, "fit-content"], V = v ? "none" : ["none", null, null, "block"], A = v ? "100%" : ["100%", null, null, "auto"], M = v ? "block" : ["block", null, null, "none"];
     return /* @__PURE__ */ t.jsxs(
-      w,
+      C,
       {
-        ref: l,
-        as: p,
+        ref: o,
+        as: f,
         display: "flex",
         alignItems: "center",
-        gap: [null, null, null, 1],
-        justifyContent: [null, null, null, "space-between"],
-        paddingY: [3, null, null, 0],
+        gap: y,
+        justifyContent: D,
+        paddingY: $,
         color: "tints.black",
         _hover: { color: "viridian.base", textDecoration: "none" },
-        borderBottom: ["1px", null, null, "unset"],
-        borderColor: ["tints.cream", null, null, "unset"],
-        width: ["100%", null, null, "fit-content"],
+        borderBottom: m,
+        borderColor: H,
+        width: _,
         cursor: "pointer",
-        ...j,
-        ...C,
+        ...d,
+        ...x,
         children: [
           /* @__PURE__ */ t.jsx(
             J,
             {
-              display: ["none", null, null, "block"],
-              as: gt,
+              display: V,
+              as: yt,
               fontSize: "lg",
               color: "viridian.light",
               role: "img",
@@ -752,20 +753,20 @@ const Xe = 60, bt = 6, Un = (n) => {
             }
           ),
           /* @__PURE__ */ t.jsxs(
-            E,
-            { alignItems: "center", gap: "1", width: ["100%", null, null, "auto"], children: [
+            k,
+            { alignItems: "center", gap: "1", width: A, children: [
               /* @__PURE__ */ t.jsx(
-                P,
+                W,
                 {
-                  fontSize: [s || "xl", null, null, "lg"],
+                  fontSize: g,
                   fontWeight: "medium",
-                  children: a
+                  children: c
                 }
               ),
               i && (typeof i == "string" ? /* @__PURE__ */ t.jsx(
-                P,
+                W,
                 {
-                  fontSize: ["xl", null, null, "lg"],
+                  fontSize: w,
                   fontWeight: "medium",
                   color: "tints.uiGrey",
                   sx: {
@@ -779,8 +780,8 @@ const Xe = 60, bt = 6, Un = (n) => {
               /* @__PURE__ */ t.jsx(
                 J,
                 {
-                  display: ["block", null, null, "none"],
-                  as: gt,
+                  display: M,
+                  as: yt,
                   fontSize: "2xl",
                   color: "tints.uiGrey",
                   role: "img",
@@ -794,13 +795,13 @@ const Xe = 60, bt = 6, Un = (n) => {
       }
     );
   }
-), $e = It(
-  (n, l) => {
-    const { children: a, isSelected: i, ...s } = n, u = n.backgroundColor || (i ? "tints.lightCream" : "transparent");
+), Ve = Mt(
+  (n, o) => {
+    const { children: c, isSelected: i, ...s } = n, u = n.backgroundColor || (i ? "tints.lightCream" : "transparent");
     return /* @__PURE__ */ t.jsx(
-      Rt,
+      pt,
       {
-        ref: l,
+        ref: o,
         borderRadius: "full",
         backgroundColor: u,
         fontSize: "lg !important",
@@ -825,124 +826,127 @@ const Xe = 60, bt = 6, Un = (n) => {
           filter: "brightness(0.95)"
         },
         ...s,
-        children: a
+        children: c
       }
     );
   }
 ), Zn = ({
   title: n,
-  description: l,
-  imageSrc: a,
+  description: o,
+  imageSrc: c,
   imageElement: i,
   button: s,
   backgroundColor: u = "viridian.wash",
-  onClick: f,
-  href: C,
-  linkComponent: p
+  onClick: p,
+  href: v,
+  linkComponent: x,
+  forceMobileStyle: f = !1
 }) => {
-  const m = p || Y, x = ge(C, !!p), T = He({
+  const y = x || X, D = ke(v, !!x), $ = ye({
     base: !1,
     tablet: !1,
     largeTablet: !1,
     desktop: !0
   });
   return /* @__PURE__ */ t.jsxs(
-    E,
+    k,
     {
-      direction: ["row", null, null, "column"],
-      alignItems: ["center"],
+      direction: f ? "row" : ["row", null, null, "column"],
+      alignItems: "center",
       borderRadius: "xl",
       overflow: "hidden",
-      height: ["80px", null, null, "272px"],
+      height: f ? "80px" : ["80px", null, null, "272px"],
       backgroundColor: u,
-      onClick: f,
+      onClick: p,
       "data-testid": "spotlight-card",
       position: "relative",
       transition: "box-shadow 0.2s ease-in-out",
       border: "1px solid",
       borderColor: "transparent",
-      minWidth: ["100%", null, null, "320px"],
-      maxWidth: ["100%", null, null, "380px"],
+      minWidth: f ? "100%" : ["100%", null, null, "320px"],
+      maxWidth: f ? "100%" : ["100%", null, null, "380px"],
       _hover: {
         boxShadow: "lg",
         textDecoration: "none",
         border: "1px solid",
         borderColor: "tints.white"
       },
-      as: T ? E : m,
-      ...T ? {} : x,
+      as: f ? y : $ ? k : y,
+      ...f ? D : $ ? {} : D,
       children: [
         /* @__PURE__ */ t.jsx(
-          w,
+          C,
           {
-            width: ["72px", null, null, "100%"],
-            height: ["100%", null, null, "188px"],
+            width: f ? "72px" : ["72px", null, null, "100%"],
+            height: f ? "100%" : ["100%", null, null, "188px"],
             sx: {
               img: {
-                height: T ? "188px" : "100%"
+                height: f ? "100%" : $ ? "188px" : "100%",
+                objectFit: f ? "cover" : "contain"
               }
             },
-            children: a ? /* @__PURE__ */ t.jsx(
-              nn,
+            children: c ? /* @__PURE__ */ t.jsx(
+              rn,
               {
-                src: a,
+                src: c,
                 objectFit: "cover",
                 width: "100%",
                 alt: "",
                 "data-testid": "spotlight-card-image"
               }
             ) : /* @__PURE__ */ t.jsx(
-              w,
+              C,
               {
-                height: [80, null, null, 188],
+                height: f ? 80 : [80, null, null, 188],
                 overflow: "hidden",
+                ...f ? { sx: { div: { height: "100%" } } } : {},
                 children: i
               }
             )
           }
         ),
         /* @__PURE__ */ t.jsxs(
-          E,
+          k,
           {
-            direction: ["column", null, null, "row"],
-            justifyContent: [null, null, null, "space-between"],
-            alignItems: ["left", null, null, "center"],
+            direction: f ? "column" : ["column", null, null, "row"],
+            justifyContent: f ? void 0 : [null, null, null, "space-between"],
+            alignItems: f ? "left" : ["left", null, null, "center"],
             padding: "4",
-            height: [
+            height: f ? "80px" : [
               "80px",
               null,
               null,
               "84px"
             ],
             width: "100%",
-            bottom: [null, null, null, "0"],
-            backgroundColor: [null, null, null, `${u}CC`],
-            backdropFilter: [null, null, null, "blur(8px)"],
+            bottom: f ? void 0 : [null, null, null, "0"],
+            backgroundColor: f ? void 0 : [null, null, null, `${u}CC`],
+            backdropFilter: f ? void 0 : [null, null, null, "blur(8px)"],
             flex: "1",
-            gap: [null, null, null, 3],
+            gap: f ? void 0 : [null, null, null, 3],
             children: [
               /* @__PURE__ */ t.jsxs(
-                E,
+                k,
                 { direction: "column", justifyContent: "center", height: "100%", children: [
                   /* @__PURE__ */ t.jsx(
-                    P,
+                    W,
                     { fontSize: "lg", fontWeight: "medium", color: "tints.black", children: n }
                   ),
                   /* @__PURE__ */ t.jsx(
-                    P,
-                    { fontSize: "sm", color: "tints.darkGrey", children: l }
+                    W,
+                    { fontSize: "sm", color: "tints.darkGrey", children: o }
                   )
                 ] }
               ),
-              T ? /* @__PURE__ */ t.jsx(w, { children: s }) : null
+              f ? null : $ ? /* @__PURE__ */ t.jsx(C, { children: s }) : null
             ]
           }
         )
       ]
     }
   );
-}, pe = (n) => /* @__PURE__ */ t.jsx(
-  rn,
+}, Ee = (n) => /* @__PURE__ */ t.jsx(
+  on,
   {
     size: "sm",
     width: ["40px", null, null, "46px"],
@@ -962,14 +966,14 @@ const Xe = 60, bt = 6, Un = (n) => {
     },
     ...n
   }
-), Pt = ({
-  color: n = se.colors.viridian.base,
-  width: l
+), Wt = ({
+  color: n = K.colors.viridian.base,
+  width: o
 }) => /* @__PURE__ */ t.jsx(
-  Tn,
+  Sn,
   {
     as: "svg",
-    width: l,
+    width: o,
     height: "auto",
     viewBox: "0 0 116 24",
     fill: "none",
@@ -990,80 +994,105 @@ const Xe = 60, bt = 6, Un = (n) => {
       ) }
     )
   }
-), Kn = ({
+), Xn = ({
   desktopTopButtons: n,
-  kitRegistrationElement: l,
-  profileElement: a,
+  kitRegistrationElement: o,
+  profileElement: c,
   cartElement: i,
   onSearchClick: s,
   onMenuClick: u,
-  hasSearch: f = !1,
-  logoLink: C = "https://www.everlywell.com",
-  setTopOffset: p,
-  linkComponent: j,
-  onLogoClick: c
+  hasSearch: p = !1,
+  logoLink: v = "https://www.everlywell.com",
+  setTopOffset: x,
+  linkComponent: f,
+  onLogoClick: d
 }) => {
-  const g = Sn(null), m = Lt(() => {
+  const g = Rn(null), [w] = Ot(`(max-width: ${K.breakpoints.mediumTablet})`), y = Bt(() => {
     if (g.current) {
-      const x = g.current.getBoundingClientRect();
-      p(x.bottom);
+      const D = g.current.getBoundingClientRect();
+      x(D.bottom);
     }
   }, []);
-  return te(() => {
-    m();
-  }, [m]), /* @__PURE__ */ t.jsx(
-    w,
+  return le(() => {
+    y();
+  }, [y]), /* @__PURE__ */ t.jsx(
+    C,
     {
       ref: g,
       paddingY: "4",
-      paddingX: [4, null, null, 12],
+      paddingX: [4, null, null, 6],
       borderBottom: "1px solid",
       borderColor: "tints.lightCream",
       backgroundColor: "tints.white",
       width: "100%",
-      onMouseEnter: m,
+      onMouseEnter: y,
       children: /* @__PURE__ */ t.jsxs(
-        E,
+        k,
         { justifyContent: "space-between", alignItems: "center", children: [
           /* @__PURE__ */ t.jsxs(
-            E,
+            k,
             { alignItems: "center", gap: "5", children: [
               /* @__PURE__ */ t.jsx(
-                w,
+                C,
                 {
                   "aria-label": "Go to homepage",
-                  onClick: c,
-                  as: j || Y,
-                  ...ge(C, !!j),
-                  children: /* @__PURE__ */ t.jsx(Pt, { width: "116px" })
+                  onClick: d,
+                  as: f || X,
+                  ...ke(v, !!f),
+                  children: /* @__PURE__ */ t.jsx(Wt, { width: "116px" })
                 }
               ),
               /* @__PURE__ */ t.jsx(
-                E,
-                { display: ["none", null, null, "flex"], children: n }
+                k,
+                { display: ["none", null, "none", "none", "flex", "flex"], children: n }
               )
             ] }
           ),
           /* @__PURE__ */ t.jsxs(
-            E,
+            k,
             { alignItems: "center", gap: "2", children: [
               /* @__PURE__ */ t.jsx(
-                w,
-                { display: ["none", null, null, "block"], children: l }
+                C,
+                { display: ["none", null, "none", "none", "none", "block"], children: o }
               ),
-              f ? /* @__PURE__ */ t.jsx(
-                pe,
+              p ? w ? /* @__PURE__ */ t.jsx(
+                Ee,
                 {
-                  "aria-label": "Search",
-                  icon: /* @__PURE__ */ t.jsx(J, { as: Ot }),
-                  onClick: s
+                  "aria-label": "Ask or Search",
+                  icon: /* @__PURE__ */ t.jsx(J, { as: st }),
+                  onClick: s,
+                  backgroundColor: "eggplant.wash",
+                  color: "eggplant.base",
+                  _hover: {
+                    backgroundColor: "eggplant.wash",
+                    filter: "brightness(0.95)"
+                  }
+                }
+              ) : /* @__PURE__ */ t.jsxs(
+                pt,
+                {
+                  "aria-label": "Ask or Search",
+                  onClick: s,
+                  backgroundColor: "eggplant.wash",
+                  color: "eggplant.base",
+                  height: "48px",
+                  paddingX: "16px !important",
+                  fontSize: "lg",
+                  _hover: {
+                    backgroundColor: "eggplant.wash",
+                    filter: "brightness(0.95)"
+                  },
+                  children: [
+                    /* @__PURE__ */ t.jsx(J, { as: st }),
+                    "Ask or Search"
+                  ]
                 }
               ) : null,
               i,
               /* @__PURE__ */ t.jsx(
-                w,
-                { display: ["flex", null, null, "none"], children: /* @__PURE__ */ t.jsx(
-                  pe,
+                C,
+                { display: ["flex", null, null, "flex", "flex", "flex", "none"], children: /* @__PURE__ */ t.jsx(
+                  Ee,
                   {
                     icon: /* @__PURE__ */ t.jsx(On, {}),
                     "aria-label": "menu",
@@ -1072,22 +1101,22 @@ const Xe = 60, bt = 6, Un = (n) => {
                   }
                 ) }
               ),
-              /* @__PURE__ */ t.jsx(w, { display: ["none", null, null, "block"], children: a })
+              /* @__PURE__ */ t.jsx(C, { display: ["none", null, null, "none", "none", "none", "block"], children: c })
             ] }
           )
         ] }
       )
     }
   );
-}, Xn = ({
+}, Kn = ({
   count: n = 0,
-  ...l
+  ...o
 }) => /* @__PURE__ */ t.jsxs(
-  w,
+  C,
   { position: "relative", display: "inline-block", children: [
-    /* @__PURE__ */ t.jsx(pe, { icon: /* @__PURE__ */ t.jsx(An, {}), ...l }),
+    /* @__PURE__ */ t.jsx(Ee, { icon: /* @__PURE__ */ t.jsx(An, {}), ...o }),
     n > 0 && /* @__PURE__ */ t.jsx(
-      w,
+      C,
       {
         display: "flex",
         minWidth: "20px",
@@ -1110,22 +1139,22 @@ const Xe = 60, bt = 6, Un = (n) => {
   ] }
 ), vr = ({
   numDesktopLinks: n = 5,
-  showPromoButton: l = !1
+  showPromoButton: o = !1
 }) => /* @__PURE__ */ t.jsx(
   ln,
   { spacing: 0, align: "stretch", children: /* @__PURE__ */ t.jsx(
-    w,
+    C,
     {
       paddingY: 4,
       paddingX: 6,
       borderBottomWidth: "1px",
       borderColor: "tints.lightCream",
       children: /* @__PURE__ */ t.jsxs(
-        E,
+        k,
         { justify: "space-between", align: "center", children: [
-          /* @__PURE__ */ t.jsx(Ke, { w: "120px", h: "48px" }),
+          /* @__PURE__ */ t.jsx(ot, { w: "120px", h: "48px" }),
           /* @__PURE__ */ t.jsxs(
-            pt,
+            Ct,
             {
               spacing: 8,
               marginLeft: 12,
@@ -1133,17 +1162,17 @@ const Xe = 60, bt = 6, Un = (n) => {
               "data-testid": "desktop-nav",
               children: [
                 Array.from({ length: n }).map(
-                  (a, i) => /* @__PURE__ */ t.jsx(Ke, { width: "90px", height: "48px" }, i)
+                  (c, i) => /* @__PURE__ */ t.jsx(ot, { width: "90px", height: "48px" }, i)
                 ),
-                l && /* @__PURE__ */ t.jsx(Ke, { width: "110px", height: "48px", borderRadius: "full" })
+                o && /* @__PURE__ */ t.jsx(ot, { width: "110px", height: "48px", borderRadius: "full" })
               ]
             }
           ),
           /* @__PURE__ */ t.jsxs(
-            pt,
+            Ct,
             { spacing: 4, ml: "auto", children: [
               /* @__PURE__ */ t.jsx(
-                Me,
+                We,
                 {
                   width: "120px",
                   height: "48px",
@@ -1152,11 +1181,11 @@ const Xe = 60, bt = 6, Un = (n) => {
                 }
               ),
               " ",
-              /* @__PURE__ */ t.jsx(Me, { width: "48px", height: "48px" }),
+              /* @__PURE__ */ t.jsx(We, { width: "48px", height: "48px" }),
               " ",
-              /* @__PURE__ */ t.jsx(Me, { width: "48px", height: "48px" }),
+              /* @__PURE__ */ t.jsx(We, { width: "48px", height: "48px" }),
               " ",
-              /* @__PURE__ */ t.jsx(Me, { width: "48px", height: "48px" }),
+              /* @__PURE__ */ t.jsx(We, { width: "48px", height: "48px" }),
               " "
             ] }
           )
@@ -1164,126 +1193,147 @@ const Xe = 60, bt = 6, Un = (n) => {
       )
     }
   ) }
-), Jn = (n, l) => {
-  let a;
+), Jn = (n, o) => {
+  let c;
   return (...i) => {
-    a && clearTimeout(a), a = setTimeout(() => {
+    c && clearTimeout(c), c = setTimeout(() => {
       n(...i);
-    }, l);
+    }, o);
   };
-}, Qe = (n) => n.toLowerCase().replace(/['']/g, "").replace(/[^a-z0-9]/g, ""), Qn = (n, l) => {
-  n.length < l.length && ([n, l] = [l, n]);
-  let a = Array(l.length + 1).fill(0), i = Array(l.length + 1).fill(0);
-  for (let s = 0; s <= l.length; s++)
-    a[s] = s;
+}, at = (n) => n.toLowerCase().replace(/['']/g, "").replace(/[^a-z0-9]/g, ""), Qn = (n, o) => {
+  n.length < o.length && ([n, o] = [o, n]);
+  let c = Array(o.length + 1).fill(0), i = Array(o.length + 1).fill(0);
+  for (let s = 0; s <= o.length; s++)
+    c[s] = s;
   for (let s = 1; s <= n.length; s++) {
     i[0] = s;
-    for (let u = 1; u <= l.length; u++) {
-      const f = n[s - 1] === l[u - 1] ? 0 : 1;
+    for (let u = 1; u <= o.length; u++) {
+      const p = n[s - 1] === o[u - 1] ? 0 : 1;
       i[u] = Math.min(
         i[u - 1] + 1,
         // Insertion
-        a[u] + 1,
+        c[u] + 1,
         // Deletion
-        a[u - 1] + f
+        c[u - 1] + p
         // Substitution
       );
     }
-    [a, i] = [i, a];
+    [c, i] = [i, c];
   }
-  return a[l.length];
-}, Be = (n, l, a = 0.6) => {
-  if (n.length <= 3 || l.length <= 3)
-    return n.includes(l) || l.includes(n);
-  const i = Qn(n, l), s = Math.max(n.length, l.length);
-  return 1 - i / s >= a;
-}, jt = (n, l) => {
-  const a = n.split(/\s+/);
-  return l.length <= 4 ? a.some((i) => i.includes(l)) : a.some((i) => {
-    if (Be(i, l))
+  return c[o.length];
+}, Ye = (n, o, c = 0.6) => {
+  if (n.length <= 3 || o.length <= 3)
+    return n.includes(o) || o.includes(n);
+  const i = Qn(n, o), s = Math.max(n.length, o.length);
+  return 1 - i / s >= c;
+}, St = (n, o) => {
+  const c = n.split(/\s+/);
+  return o.length <= 4 ? c.some((i) => i.includes(o)) : c.some((i) => {
+    if (Ye(i, o))
       return !0;
-    if (i.length >= l.length)
-      for (let s = 0; s <= i.length - l.length; s++) {
-        const u = i.slice(s, s + l.length + 1);
-        if (Be(l, u))
+    if (i.length >= o.length)
+      for (let s = 0; s <= i.length - o.length; s++) {
+        const u = i.slice(s, s + o.length + 1);
+        if (Ye(o, u))
           return !0;
       }
     return !1;
   });
-}, tt = "nav-drawer-hover", nt = "nav-drawer-animation-start", rt = "nav-drawer-animation-end", wt = (n) => {
+}, ut = "nav-drawer-hover", dt = "nav-drawer-animation-start", ft = "nav-drawer-animation-end", Tt = (n) => {
   window.dispatchEvent(
-    new CustomEvent(tt, {
+    new CustomEvent(ut, {
       detail: { isHovering: n },
       bubbles: !0,
       cancelable: !0
     })
   );
-}, Ct = (n) => {
+}, Dt = (n) => {
   window.dispatchEvent(
     new CustomEvent(n, {
       bubbles: !0,
       cancelable: !0
     })
   );
-}, qn = (n = !1, l = !1, a = !1) => n || !l ? "column" : a ? "row" : "row-reverse", er = lt(St), tr = lt(_t), qe = ({
+}, qn = (n = !1, o = !1, c = !1) => n || !o ? "column" : c ? "row" : "row-reverse", er = ht(At), tr = ht(Pt), it = ({
   isOpen: n = !1,
-  onClose: l,
-  title: a,
+  onClose: o,
+  title: c,
   navDrawerLinks: i,
   bottomNavButtons: s,
   spotlightCards: u,
-  bottomButton: f,
-  hasBackButton: C = !0,
-  onBackClick: p,
-  hasOnlySpotlightCards: j = !1,
-  hasSearch: c = !1,
+  bottomButton: p,
+  hasBackButton: v = !0,
+  onBackClick: x,
+  hasOnlySpotlightCards: f = !1,
+  hasSearch: d = !1,
   onSearch: g = () => ({}),
-  topOffset: m
+  topOffset: w,
+  forceMobilePlacement: y = !1
 }) => {
-  var W, U;
-  const x = He({
+  var ae, Q, S, Y, ie, B;
+  const D = ye({
     base: !1,
     tablet: !1,
     largeTablet: !1,
-    desktop: !0
-  }), T = x ? "top" : "right", [G, Q] = K(0), [O, _] = K(!1), X = () => {
-    Q((L) => L + 1);
-  }, A = Lt(
-    Jn((L) => {
-      g(L), X();
+    mediumDesktop: !0,
+    desktop: !0,
+    fullDesktop: !0
+  }) ?? !1, $ = y ? "right" : D ? "top" : "right", m = $ === "right", [H, _] = Z(0), [V, A] = Z(!1), M = () => {
+    _((I) => I + 1);
+  }, F = Bt(
+    Jn((I) => {
+      g(I), M();
     }, 100),
     []
   );
-  te(() => {
-    n && (_(!0), Ct(nt));
+  le(() => {
+    n && (A(!0), Dt(dt));
   }, [n]);
-  const $ = () => {
-    n || (_(!1), l()), Ct(rt);
+  const ee = () => {
+    n || (A(!1), o()), Dt(ft);
   };
   return /* @__PURE__ */ t.jsx(
-    Tt,
+    $t,
     {
-      isOpen: O || n,
+      isOpen: V || n,
+      closeOnOverlayClick: !0,
       onClose: () => {
-        O && x || l();
+        V && !m || o();
       },
-      placement: T,
+      placement: $,
       blockScrollOnMount: !1,
       autoFocus: !1,
-      ...x ? {
+      ...m ? {
+        styleConfig: {
+          baseStyle: {
+            ...K.components.Drawer.baseStyle,
+            dialogContainer: {
+              ...(Q = (ae = K.components.Drawer) == null ? void 0 : ae.baseStyle) == null ? void 0 : Q.dialogContainer,
+              // Higher z-index for drawer content to be above overlay and navigation
+              zIndex: "popover"
+            },
+            dialog: {
+              ...(Y = (S = K.components.Drawer) == null ? void 0 : S.baseStyle) == null ? void 0 : Y.dialog,
+              // Ensure mobile drawer doesn't expand to full width
+              maxW: "560px",
+              width: "auto"
+            }
+          }
+        }
+      } : {
         styleConfig: {
           baseStyle: {
-            ...se.components.Drawer.baseStyle,
+            ...K.components.Drawer.baseStyle,
             dialogContainer: {
-              ...(U = (W = se.components.Drawer) == null ? void 0 : W.baseStyle) == null ? void 0 : U.dialogContainer,
+              ...(B = (ie = K.components.Drawer) == null ? void 0 : ie.baseStyle) == null ? void 0 : B.dialogContainer,
               // Push the drawer down by the top offset on desktop to not cover the top navigation
-              top: x ? `${m}px` : void 0,
+              top: `${w}px`,
               // Lower index on desktop to make sure the drawer is below the top navigation
-              zIndex: ["overlay"]
+              zIndex: "overlay"
             }
           }
         }
-      } : {},
+      },
       children: /* @__PURE__ */ t.jsx(
         Vn,
         { children: n ? /* @__PURE__ */ t.jsxs(
@@ -1293,9 +1343,10 @@ const Xe = 60, bt = 6, Un = (n) => {
               tr,
               {
                 backgroundColor: "tints.black",
-                top: ["0", null, null, `${m}px`],
-                opacity: x ? void 0 : "0.4 !important",
-                ...x ? {
+                top: m ? "0" : `${w}px`,
+                opacity: m ? "0.4 !important" : void 0,
+                zIndex: m ? "modal" : "overlay",
+                ...m ? {} : {
                   initial: { opacity: 0 },
                   animate: { opacity: 0.4 },
                   exit: { opacity: 0 },
@@ -1304,89 +1355,94 @@ const Xe = 60, bt = 6, Un = (n) => {
                     delay: 0.15,
                     ease: "easeOut"
                   }
-                } : {}
+                }
               }
             ),
             /* @__PURE__ */ t.jsxs(
               er,
               {
-                onClick: (L) => {
-                  const B = L.target.closest("a");
-                  B && B.href === window.location.href && l();
+                onClick: (I) => {
+                  const ne = I.target.closest("a");
+                  ne && ne.href === window.location.href && o();
                 },
                 onMouseEnter: () => {
-                  x && wt(!0);
+                  m || Tt(!0);
                 },
-                onMouseLeave: (L) => {
-                  x && (!c || c && (L.target === L.currentTarget || !L.currentTarget.contains(L.target) && !O)) && wt(!1);
+                onMouseLeave: (I) => {
+                  m || (!d || d && (I.target === I.currentTarget || !I.currentTarget.contains(I.target) && !V)) && Tt(!1);
                 },
                 paddingTop: "4",
-                paddingX: [4, null, null, 12],
+                paddingX: m ? "4" : "12",
                 paddingBottom: "24",
-                overflow: ["auto", null, null, "hidden"],
+                overflow: m ? "auto" : "hidden",
                 maxHeight: "100vh",
                 position: "relative",
-                top: x ? `${m}px !important` : void 0,
-                onAnimationComplete: $,
+                top: m ? void 0 : `${w}px !important`,
+                onAnimationComplete: ee,
                 boxShadow: "none",
-                ...x ? {
+                ...m ? {
+                  // Mobile drawers should use slide animation, not height expansion
+                  initial: !1,
+                  animate: !1,
+                  exit: !1
+                } : {
                   initial: { height: 0, opacity: 0 },
                   animate: { height: "auto", opacity: 1 },
                   exit: { height: 0, opacity: 0 },
                   transition: { duration: 0.3 }
-                } : {},
+                },
                 children: [
-                  !c && x ? null : /* @__PURE__ */ t.jsxs(
-                    kt,
+                  !d && !m ? null : /* @__PURE__ */ t.jsxs(
+                    Ft,
                     {
                       padding: "0",
-                      flexDirection: c ? "column" : "row",
-                      gap: c ? "4" : "0",
+                      flexDirection: d ? "column" : "row",
+                      gap: d ? "4" : "0",
                       children: [
-                        x ? null : /* @__PURE__ */ t.jsxs(
-                          E,
+                        m ? /* @__PURE__ */ t.jsxs(
+                          k,
                           {
                             width: "100%",
                             justifyContent: "space-between",
                             alignItems: "center",
                             children: [
-                              C ? /* @__PURE__ */ t.jsx(
-                                pe,
+                              v ? /* @__PURE__ */ t.jsx(
+                                Ee,
                                 {
                                   icon: /* @__PURE__ */ t.jsx(Pn, {}),
                                   onClick: () => {
-                                    p && p();
+                                    x && x();
                                   },
                                   "aria-label": "Back"
                                 }
                               ) : null,
                               /* @__PURE__ */ t.jsx(
-                                P,
+                                W,
                                 {
                                   color: "tints.uiGrey",
-                                  fontSize: ["xl", null, null, "lg"],
-                                  children: a
+                                  fontSize: "xl",
+                                  children: c
                                 }
                               ),
                               /* @__PURE__ */ t.jsx(
-                                pe,
+                                Ee,
                                 {
-                                  icon: /* @__PURE__ */ t.jsx(At, {}),
-                                  onClick: l,
+                                  icon: /* @__PURE__ */ t.jsx(zt, {}),
+                                  onClick: o,
                                   "aria-label": "Close"
                                 }
                               )
                             ]
                           }
-                        ),
-                        c && /* @__PURE__ */ t.jsxs(
-                          kn,
+                        ) : null,
+                        d && /* @__PURE__ */ t.jsxs(
+                          Tn,
                           { width: "100%", children: [
                             /* @__PURE__ */ t.jsx(
                               Dn,
                               {
-                                onChange: (L) => {
-                                  A(L.target.value);
+                                onChange: (I) => {
+                                  F(I.target.value);
                                 },
                                 placeholder: "Search",
                                 autoFocus: !0,
@@ -1396,7 +1452,7 @@ const Xe = 60, bt = 6, Un = (n) => {
                             ),
                             /* @__PURE__ */ t.jsx(
                               In,
-                              { pointerEvents: "none", children: /* @__PURE__ */ t.jsx(Ln, { as: Ot, color: "gray.500" }) }
+                              { pointerEvents: "none", children: /* @__PURE__ */ t.jsx(Ln, { as: st, color: "gray.500" }) }
                             )
                           ] }
                         )
@@ -1404,15 +1460,15 @@ const Xe = 60, bt = 6, Un = (n) => {
                     }
                   ),
                   /* @__PURE__ */ t.jsx(
-                    Dt,
+                    Ht,
                     {
                       paddingX: "0",
-                      paddingBottom: [6, null, null, 4],
-                      "data-testid": `navbar-drawer-body-${a.toLowerCase()}`,
+                      paddingBottom: m ? "6" : "4",
+                      "data-testid": `navbar-drawer-body-${c.toLowerCase()}`,
                       children: /* @__PURE__ */ t.jsxs(
-                        lt.div,
+                        ht.div,
                         {
-                          ...x ? {
+                          ...m ? {} : {
                             initial: { opacity: 0, y: -5 },
                             animate: { opacity: 1, y: 0 },
                             exit: { opacity: 0, y: -5 },
@@ -1426,48 +1482,49 @@ const Xe = 60, bt = 6, Un = (n) => {
                                 ease: [0.4, 0, 0.2, 1]
                               }
                             }
-                          } : {},
+                          },
                           style: {
                             display: "flex",
                             flexDirection: qn(
-                              j,
-                              x,
-                              c
+                              f,
+                              !m,
+                              d
                             ),
                             gap: "24px",
                             justifyContent: "space-between"
                           },
                           children: [
                             u ? /* @__PURE__ */ t.jsx(
-                              w,
+                              C,
                               {
-                                gap: [3, null, null, 6],
+                                gap: m ? "3" : "6",
                                 display: "flex",
-                                justifyContent: [null, null, null, "center"],
+                                justifyContent: m ? void 0 : "center",
                                 sx: {
                                   flexWrap: "wrap",
-                                  flexDirection: ["column", null, null, "row"]
+                                  flexDirection: m ? "column" : "row"
                                 },
                                 children: u
                               }
                             ) : null,
                             /* @__PURE__ */ t.jsxs(
-                              E,
+                              k,
                               {
-                                position: [null, null, null, "relative"],
+                                position: m ? void 0 : "relative",
                                 flexDirection: "column",
                                 gap: "6",
-                                width: ["100%", null, null, c ? null : "auto"],
+                                width: m ? "100%" : d ? void 0 : "auto",
                                 children: [
-                                  i ? /* @__PURE__ */ t.jsx(w, { children: i }) : null,
-                                  s && !x ? /* @__PURE__ */ t.jsx(w, { children: s }) : null,
-                                  f ? /* @__PURE__ */ t.jsx(
-                                    w,
+                                  i ? /* @__PURE__ */ t.jsx(C, { children: i }) : null,
+                                  s && m ? /* @__PURE__ */ t.jsx(C, { children: s }) : null,
+                                  p ? /* @__PURE__ */ t.jsx(
+                                    C,
                                     {
-                                      width: ["100%"],
-                                      position: [null, null, null, "absolute"],
-                                      bottom: [null, null, null, 0],
-                                      children: f
+                                      width: "100%",
+                                      position: m ? void 0 : "absolute",
+                                      bottom: m ? void 0 : 0,
+                                      ...m ? { sx: { a: { width: "100%" } } } : {},
+                                      children: p
                                     }
                                   ) : null
                                 ]
@@ -1475,7 +1532,7 @@ const Xe = 60, bt = 6, Un = (n) => {
                             )
                           ]
                         },
-                        G
+                        H
                       )
                     }
                   )
@@ -1489,409 +1546,471 @@ const Xe = 60, bt = 6, Un = (n) => {
   );
 }, nr = ({
   source: n,
-  onSearchCallback: l,
-  isActive: a
+  onSearchCallback: o,
+  isActive: c
 }) => {
-  const [i, s] = K(""), [u, f] = K([]), C = (c, g) => {
-    if (!c) return [];
-    const x = Qe(c).split(/\s+/);
-    return g.filter((T) => {
-      const G = Qe(T.label);
-      if (x.some((A) => jt(G, A))) return !0;
-      const O = G.split(/\s+/), _ = x.some((A) => O.some(($) => $.includes(A) || Be(A, $))), X = typeof T.additionalContent == "string" && x.some((A) => {
-        const $ = Qe(T.additionalContent);
-        return jt($, A) || $.split(/\s+/).some((W) => W.includes(A) || Be(A, W));
+  const [i, s] = Z(""), [u, p] = Z([]), v = (d, g) => {
+    if (!d) return [];
+    const y = at(d).split(/\s+/);
+    return g.filter((D) => {
+      const $ = at(D.label);
+      if (y.some((A) => St($, A))) return !0;
+      const H = $.split(/\s+/), _ = y.some((A) => H.some((M) => M.includes(A) || Ye(A, M))), V = typeof D.additionalContent == "string" && y.some((A) => {
+        const M = at(D.additionalContent);
+        return St(M, A) || M.split(/\s+/).some((F) => F.includes(A) || Ye(A, F));
       });
-      return _ || X;
-    }).sort((T, G) => T.label.localeCompare(G.label));
-  }, p = (c) => {
-    if (s(c), !c) {
-      f([]);
+      return _ || V;
+    }).sort((D, $) => D.label.localeCompare($.label));
+  }, x = (d) => {
+    if (s(d), !d) {
+      p([]);
       return;
     }
-    const g = C(c, n);
-    f(g), l && l(c, g);
-  }, j = () => {
-    s(""), f([]);
+    const g = v(d, n);
+    p(g), o && o(d, g);
+  }, f = () => {
+    s(""), p([]);
   };
-  return te(() => {
-    a || (s(""), f([]));
-  }, [a]), {
+  return le(() => {
+    c || (s(""), p([]));
+  }, [c]), {
     query: i,
     results: u,
-    handleClose: j,
-    handleSearch: p
+    handleClose: f,
+    handleSearch: x
   };
 }, rr = (n) => {
-  const l = /* @__PURE__ */ new Set();
-  return n.reduce((a, i) => {
+  const o = /* @__PURE__ */ new Set();
+  return n.reduce((c, i) => {
     var u;
-    const s = ((u = i.sections) == null ? void 0 : u.reduce((f, C) => {
-      const p = C.links.filter((j) => l.has(j.label) || j.isSearchable !== !0 ? !1 : (l.add(j.label), !0));
-      return [...f, ...p];
+    const s = ((u = i.sections) == null ? void 0 : u.reduce((p, v) => {
+      const x = v.links.filter((f) => o.has(f.label) || f.isSearchable !== !0 ? !1 : (o.add(f.label), !0));
+      return [...p, ...x];
     }, [])) ?? [];
-    return [...a, ...s];
+    return [...c, ...s];
   }, []);
 }, mr = ({
   categories: n = [],
-  onCartClick: l,
-  mainCategoryLabel: a = "Menu",
+  onCartClick: o,
+  mainCategoryLabel: c = "Menu",
   logoLink: i = "https://www.everlywell.com",
   hasSearch: s = !0,
   onSearchClick: u,
-  registrationUrl: f,
-  profileUrl: C = "https://secure.everlywell.com/login",
-  mobileBottomButtons: p = [],
-  numberOfCartItems: j = 0,
-  linkComponent: c,
+  registrationUrl: p,
+  profileUrl: v = "https://secure.everlywell.com/login",
+  mobileBottomButtons: x = [],
+  numberOfCartItems: f = 0,
+  linkComponent: d,
   onSearchCallback: g,
-  onLinkClick: m,
-  onCategoryOpen: x,
-  onMobileMenuOpen: T,
-  onBackToMainMenu: G,
-  onRegisterKitClick: Q,
-  onProfileClick: O,
+  onLinkClick: w,
+  onCategoryOpen: y,
+  onMobileMenuOpen: D,
+  onBackToMainMenu: $,
+  onRegisterKitClick: m,
+  onProfileClick: H,
   onLogoClick: _,
-  shopAllProductsUrl: X,
-  onShopAllProductsClick: A
+  shopAllProductsUrl: V,
+  onShopAllProductsClick: A,
+  hideableButtons: M
 }) => {
-  var Ce, oe, Ae;
-  const [$, W] = K(!1), [U, L] = K(!1), [S, B] = K(null), [Se, xe] = K(!1), [z, q] = K(!1), [ee, _e] = K(0), [Te, ve] = K(!1);
-  te(() => {
-    const d = () => ve(!0), k = () => ve(!1);
-    return window.addEventListener(nt, d), window.addEventListener(rt, k), () => {
+  var de, ze, Ie;
+  const [F, ee] = Z(!1), [ae, Q] = Z(!1), [S, Y] = Z(null), [ie, B] = Z(!1), [I, te] = Z(!1), [ne, Pe] = Z(0), [$e, Re] = Z(!1), [_e, se] = Z(!1);
+  le(() => {
+    const l = () => Re(!0), T = () => Re(!1);
+    return window.addEventListener(dt, l), window.addEventListener(ft, T), () => {
       window.removeEventListener(
-        nt,
-        d
-      ), window.removeEventListener(rt, k);
+        dt,
+        l
+      ), window.removeEventListener(ft, T);
     };
   }, []);
-  const ke = He({
+  const Se = ye({
     base: !1,
     tablet: !1,
     largeTablet: !1,
-    desktop: !0
-  }) ?? !1;
-  te(() => {
-    ne(), B(null);
-  }, [ke]);
+    mediumDesktop: !0,
+    desktop: !0,
+    fullDesktop: !0
+  }) ?? !1, re = ye({
+    base: !1,
+    tablet: !1,
+    largeTablet: !1,
+    mediumDesktop: !1,
+    desktop: !1,
+    fullDesktop: !0
+  }) ?? !1, Ge = !re, Ue = ye({
+    base: !0,
+    tablet: !0,
+    largeTablet: !0,
+    mediumDesktop: !1,
+    desktop: !1,
+    fullDesktop: !1
+  }) ?? !0;
+  le(() => {
+    me(), Y(null);
+  }, [Se]);
   const {
-    query: De,
-    results: ue,
-    handleSearch: Ie
+    query: Te,
+    results: fe,
+    handleSearch: xe
   } = nr({
     source: rr(n),
     onSearchCallback: g,
-    isActive: U
-  }), me = ue.length > 0, be = c || Y, Fe = ge(X, !!c), je = De && /* @__PURE__ */ t.jsxs(
-    E,
-    { gap: me ? "6" : 0, direction: "column", children: [
-      me ? /* @__PURE__ */ t.jsx(P, { color: "tints.uiGrey", children: `${ue.length} Results` }) : /* @__PURE__ */ t.jsxs(
-        E,
+    isActive: ae
+  }), ve = fe.length > 0, ce = d || X, Ze = ke(V, !!d), Fe = Te && /* @__PURE__ */ t.jsxs(
+    k,
+    { gap: ve ? "6" : 0, direction: "column", children: [
+      ve ? /* @__PURE__ */ t.jsx(W, { color: "tints.uiGrey", children: `${fe.length} Results` }) : /* @__PURE__ */ t.jsxs(
+        k,
         { direction: "column", gap: "6", alignItems: "flex-start", children: [
           /* @__PURE__ */ t.jsx(
-            P,
+            W,
             { color: "tints.uiGrey", children: "We didn't find what you were looking for." }
           ),
           /* @__PURE__ */ t.jsx(
-            Rt,
+            pt,
             {
-              as: be,
+              as: ce,
               onClick: A,
               _hover: { textDecoration: "none" },
               width: ["100%", null, null, "auto"],
-              ...Fe,
+              ...Ze,
               children: "Shop all products"
             }
           )
         ] }
       ),
       /* @__PURE__ */ t.jsx(
-        on,
-        { columns: [1, 1, 1, 4], children: ue.map(
-          (d, k) => /* @__PURE__ */ t.jsx(
-            an,
+        an,
+        { columns: [1, 1, 1, 4], children: fe.map(
+          (l, T) => /* @__PURE__ */ t.jsx(
+            sn,
             { children: /* @__PURE__ */ t.jsx(
-              Je,
+              Ne,
               {
-                href: d.href,
-                label: d.label,
-                additionalContent: d == null ? void 0 : d.additionalContent,
-                linkComponent: c
+                href: l.href,
+                label: l.label,
+                additionalContent: l == null ? void 0 : l.additionalContent,
+                linkComponent: d,
+                forceMobileStyle: !Se
               }
             ) },
-            `${d.label}-${k}`
+            `${l.label}-${T}`
           )
         ) }
       )
     ] }
-  ), ne = () => {
-    W(!1), B(null);
-  }, Z = (d) => "href" in d, we = (d) => {
-    Z(d) ? m == null || m(d.label) : B(d);
-  }, ce = (d) => {
-    xe(!0), L(!1), B(null), !Z(d) && (d.sections || d.spotlightCards) && B(d);
-  }, We = () => {
-    xe(!1);
+  ), me = () => {
+    ee(!1), Y(null);
+  }, oe = (l) => "href" in l, be = (l) => {
+    oe(l) ? w == null || w(l.label) : (se(F || !re), Y(l));
+  }, pe = (l) => {
+    B(!0), Q(!1), Y(null), !oe(l) && (l.sections || l.spotlightCards) && (se(!1), Y(l));
+  }, He = () => {
+    B(!1);
   };
-  te(() => {
-    const d = (k) => {
-      q(k.detail.isHovering);
+  le(() => {
+    const l = (T) => {
+      te(T.detail.isHovering);
     };
     return window.addEventListener(
-      tt,
-      d
+      ut,
+      l
     ), () => {
       window.removeEventListener(
-        tt,
-        d
+        ut,
+        l
       );
     };
-  }, []), te(() => {
-    !Se && !z && (B(null), L(!1));
-  }, [Se, z]), te(() => {
-    let d = window.location.href;
-    const k = () => {
-      const N = window.location.href;
-      N !== d && (d = N, ne(), B(null));
-    }, H = setInterval(k, 100);
-    return window.addEventListener("popstate", k), () => {
-      window.removeEventListener("popstate", k), clearInterval(H);
+  }, []), le(() => {
+    !ie && !I && (Y(null), Q(!1), !F && re && se(!1));
+  }, [ie, I, F, re]), le(() => {
+    let l = window.location.href;
+    const T = () => {
+      const z = window.location.href;
+      z !== l && (l = z, me(), Y(null));
+    }, L = setInterval(T, 100);
+    return window.addEventListener("popstate", T), () => {
+      window.removeEventListener("popstate", T), clearInterval(L);
     };
   }, []);
-  const Le = n == null ? void 0 : n.map(
-    (d, k) => /* @__PURE__ */ t.jsx(
-      $e,
-      {
-        onMouseEnter: () => {
-          ce(d), x == null || x(d.label);
+  const we = (l) => (oe(l) || !l.sections || l.sections.length === 0) && (!l.buttonProps || Object.keys(l.buttonProps).length === 0 || l.buttonProps === void 0), ue = re ? n : n == null ? void 0 : n.filter((l) => !M.includes(l.label)), Xe = ue == null ? void 0 : ue.map(
+    (l, T) => {
+      var L, z;
+      return /* @__PURE__ */ t.jsx(
+        Ve,
+        {
+          height: "48px",
+          paddingInline: "16px !important",
+          onMouseEnter: () => {
+            pe(l), y == null || y(l.label);
+          },
+          onMouseLeave: He,
+          isSelected: (S == null ? void 0 : S.label) === l.label,
+          as: oe(l) && ce ? ce : X,
+          href: oe(l) ? l.href : void 0,
+          onClick: oe(l) ? () => w == null ? void 0 : w(l.label) : void 0,
+          ...((L = l == null ? void 0 : l.context) == null ? void 0 : L.desktop) === "link" || we(l) ? {
+            _hover: {
+              backgroundColor: "tints.lightCream",
+              textDecoration: "none",
+              filter: "brightness(0.95)"
+            }
+          } : {},
+          ...((z = l == null ? void 0 : l.context) == null ? void 0 : z.desktop) !== "link" && l.buttonProps,
+          children: l.label
         },
-        onMouseLeave: We,
-        isSelected: (S == null ? void 0 : S.label) === d.label,
-        as: Z(d) && be ? be : Y,
-        href: Z(d) ? d.href : void 0,
-        onClick: Z(d) ? () => m == null ? void 0 : m(d.label) : void 0,
-        ...d.buttonProps,
-        children: d.label
-      },
-      `${d.label}-${k}`
-    )
-  ), ze = (Ce = n.filter(
-    (d) => !Z(d) && d.isMobileTopLink !== !1
-  )) == null ? void 0 : Ce.map((d, k) => {
-    const H = d;
-    return /* @__PURE__ */ t.jsx(
-      w,
+        `${l.label}-${T}`
+      );
+    }
+  ), Ke = (de = n.filter(
+    (l) => {
+      var T;
+      return (!oe(l) && l.isMobileTopLink !== !1 || we(l)) && (Ge && M.includes(l.label) || Ue) && ((T = l == null ? void 0 : l.context) == null ? void 0 : T.mobile) !== "link";
+    }
+  )) == null ? void 0 : de.map((l, T) => {
+    const L = l;
+    return we(L) ? /* @__PURE__ */ t.jsx(
+      C,
+      { children: /* @__PURE__ */ t.jsx(
+        Ne,
+        {
+          label: L.label,
+          role: "link",
+          href: L.href,
+          mainTextFontSize: "3xl",
+          linkComponent: d
+        }
+      ) },
+      `${L.label}-${T}`
+    ) : /* @__PURE__ */ t.jsx(
+      C,
       {
         onClick: () => {
-          we(H), x == null || x(H.label);
+          be(L), y == null || y(L.label);
         },
         children: /* @__PURE__ */ t.jsx(
-          Je,
+          Ne,
           {
-            label: H.label,
+            label: L.label,
             role: "link",
-            additionalContent: H.additionalContent,
+            additionalContent: L.additionalContent,
             mainTextFontSize: "3xl",
-            linkComponent: c
+            linkComponent: d,
+            forceMobileStyle: !0
           }
         )
       },
-      `${H.label}-${k}`
+      `${L.label}-${T}`
     );
-  }), Ne = /* @__PURE__ */ t.jsxs(
+  }), De = /* @__PURE__ */ t.jsxs(
     t.Fragment,
     { children: [
       /* @__PURE__ */ t.jsx(
-        $e,
+        Ve,
         {
-          as: Y,
-          href: C,
+          as: X,
+          href: v,
           width: "100%",
           backgroundColor: "tints.cream",
-          onClick: O,
+          onClick: H,
           children: /* @__PURE__ */ t.jsxs(
-            E,
+            k,
             { gap: "2", children: [
-              "My Everly",
-              /* @__PURE__ */ t.jsx(J, { as: xt, size: 24 })
+              "Log in to My Everly",
+              /* @__PURE__ */ t.jsx(J, { as: Et, size: 24 })
             ] }
           )
         },
         "my-everly"
       ),
       /* @__PURE__ */ t.jsx(
-        $e,
+        Ve,
         {
-          as: Y,
+          as: X,
           width: "100%",
-          href: f,
+          href: p,
           backgroundColor: "tints.cream",
-          onClick: Q,
+          onClick: m,
           children: /* @__PURE__ */ t.jsxs(
-            E,
+            k,
             { gap: "2", children: [
               "Register kit",
-              /* @__PURE__ */ t.jsx(J, { as: Mn, size: 24 })
+              /* @__PURE__ */ t.jsx(J, { as: $n, size: 24 })
             ] }
           )
         },
         "register-kit"
       )
     ] }
-  ), de = /* @__PURE__ */ t.jsxs(
-    E,
+  ), Je = /* @__PURE__ */ t.jsxs(
+    k,
     { gap: "2", flexDirection: "column", children: [
-      p,
-      Ne
+      x,
+      De
     ] }
-  ), le = S ? /* @__PURE__ */ t.jsx(
-    E,
-    { direction: ["column", null, null, "row"], gap: "8", children: (oe = S == null ? void 0 : S.sections) == null ? void 0 : oe.map((d, k) => {
-      const H = [];
-      for (let N = 0; N < d.links.length; N += 3)
-        H.push(d.links.slice(N, N + 3));
+  ), q = _e || F, Me = S ? /* @__PURE__ */ t.jsx(
+    k,
+    { direction: q ? "column" : ["column", null, null, "row"], gap: "8", children: (ze = S == null ? void 0 : S.sections) == null ? void 0 : ze.map((l, T) => {
+      const L = [];
+      for (let z = 0; z < l.links.length; z += 3)
+        L.push(l.links.slice(z, z + 3));
       return /* @__PURE__ */ t.jsxs(
-        w,
+        C,
         { children: [
           /* @__PURE__ */ t.jsx(
-            P,
+            W,
             {
               fontSize: "md",
               color: "tints.uiGrey",
-              marginBottom: [0, null, null, 6],
-              children: d.title
+              marginBottom: q ? 0 : [0, null, null, 6],
+              children: l.title
             }
           ),
           /* @__PURE__ */ t.jsx(
-            E,
+            k,
             {
-              flexDirection: ["column", null, null, "row"],
-              gap: [null, null, null, 8],
-              children: H == null ? void 0 : H.map(
-                (N, Pe) => /* @__PURE__ */ t.jsx(
-                  E,
+              flexDirection: q ? "column" : ["column", null, null, "row"],
+              gap: q ? void 0 : [null, null, null, 8],
+              children: L == null ? void 0 : L.map(
+                (z, Qe) => /* @__PURE__ */ t.jsx(
+                  k,
                   {
-                    flexDirection: ["column"],
-                    gap: [null, null, null, 5],
-                    marginLeft: [null, null, null, -2],
-                    children: N == null ? void 0 : N.map(
-                      (re, ie) => /* @__PURE__ */ t.jsx(
-                        Je,
+                    flexDirection: "column",
+                    gap: q ? void 0 : [null, null, null, 5],
+                    marginLeft: q ? void 0 : [null, null, null, -2],
+                    children: z == null ? void 0 : z.map(
+                      (he, qe) => /* @__PURE__ */ t.jsx(
+                        Ne,
                         {
-                          label: re.label,
-                          href: re.href,
-                          additionalContent: re.additionalContent,
-                          linkComponent: c,
-                          onClick: () => m == null ? void 0 : m(re.label)
+                          label: he.label,
+                          href: he.href,
+                          additionalContent: he.additionalContent,
+                          linkComponent: d,
+                          forceMobileStyle: q,
+                          onClick: () => w == null ? void 0 : w(he.label)
                         },
-                        `${re.label}-${ie}`
+                        `${he.label}-${qe}`
                       )
                     )
                   },
-                  Pe
+                  Qe
                 )
               )
             }
           )
         ] },
-        `${d.title}-${k}`
+        `${l.title}-${T}`
       );
     }) }
-  ) : null, Oe = S != null && S.spotlightCards ? (Ae = S.spotlightCards) == null ? void 0 : Ae.map(
-    (d, k) => /* @__PURE__ */ t.jsx(Zn, { ...d }, `${d.title}-${k}`)
-  ) : /* @__PURE__ */ t.jsx(w, {});
+  ) : null, Be = S != null && S.spotlightCards ? (Ie = S.spotlightCards) == null ? void 0 : Ie.map(
+    (l, T) => /* @__PURE__ */ t.jsx(
+      Zn,
+      {
+        ...l,
+        forceMobileStyle: q
+      },
+      `${l.title}-${T}`
+    )
+  ) : /* @__PURE__ */ t.jsx(C, {});
   return /* @__PURE__ */ t.jsxs(
-    w,
+    C,
     {
       as: "nav",
       "aria-label": "Main navigation",
       position: "sticky",
       top: "0",
       width: "100%",
-      zIndex: ["sticky", null, null, Te ? "modal" : "sticky"],
+      zIndex: ["sticky", null, null, $e ? "modal" : "sticky"],
       children: [
         /* @__PURE__ */ t.jsx(
-          Kn,
+          Xn,
           {
-            desktopTopButtons: Le,
+            desktopTopButtons: Xe,
             kitRegistrationElement: /* @__PURE__ */ t.jsx(
-              $e,
+              Ve,
               {
-                as: Y,
-                href: f,
-                onClick: Q,
+                as: X,
+                height: "48px",
+                paddingInline: "16px !important",
+                href: p,
+                onClick: m,
                 backgroundColor: "tints.cream",
                 children: "Register Kit"
               }
             ),
             profileElement: /* @__PURE__ */ t.jsx(
-              Y,
-              { href: C, "aria-label": "login", onClick: O, children: /* @__PURE__ */ t.jsx(pe, { icon: /* @__PURE__ */ t.jsx(J, { as: xt }), "aria-label": "Profile" }) }
+              X,
+              { href: v, "aria-label": "login", onClick: H, children: /* @__PURE__ */ t.jsx(Ee, { icon: /* @__PURE__ */ t.jsx(J, { as: Et }), "aria-label": "Profile" }) }
             ),
             cartElement: /* @__PURE__ */ t.jsx(
-              Xn,
+              Kn,
               {
                 "aria-label": "Cart",
-                count: j,
-                onClick: l
+                count: f,
+                onClick: o
               }
             ),
             onSearchClick: () => {
-              L(!U), u == null || u();
+              Q(!ae), u == null || u();
             },
             onMenuClick: () => {
-              W(!0), T == null || T();
+              ee(!0), D == null || D();
             },
             hasSearch: s,
             logoLink: i,
-            linkComponent: c,
+            linkComponent: d,
             onLogoClick: _,
-            setTopOffset: _e
+            setTopOffset: Pe
           }
         ),
         /* @__PURE__ */ t.jsxs(
-          w,
+          C,
           { position: "relative", zIndex: "modal", children: [
             /* @__PURE__ */ t.jsx(
-              qe,
+              it,
               {
-                isOpen: $,
-                onClose: ne,
-                title: a,
-                navDrawerLinks: ze,
-                bottomNavButtons: de,
+                isOpen: F,
+                onClose: me,
+                title: c,
+                navDrawerLinks: Ke,
+                bottomNavButtons: Je,
                 hasBackButton: !1,
-                topOffset: ee
+                topOffset: ne,
+                forceMobilePlacement: !0
               }
             ),
             /* @__PURE__ */ t.jsx(
-              qe,
+              it,
               {
                 isOpen: !!S,
                 onClose: () => {
-                  ne(), B(null);
+                  me(), Y(null), F || se(!1);
                 },
                 title: (S == null ? void 0 : S.label) || "",
-                navDrawerLinks: le,
-                onBackClick: () => B(null),
-                spotlightCards: Oe,
+                navDrawerLinks: Me,
+                onBackClick: () => {
+                  Y(null), F || se(!1);
+                },
+                spotlightCards: Be,
                 hasOnlySpotlightCards: S == null ? void 0 : S.hasOnlySpotlightCards,
                 bottomButton: S == null ? void 0 : S.bottomButton,
-                topOffset: ee
+                topOffset: ne,
+                forceMobilePlacement: _e || F || // Below 1400px, if main menu is open, always use mobile closing
+                F && !re
               }
             ),
             /* @__PURE__ */ t.jsx(
-              qe,
+              it,
               {
-                isOpen: U,
-                onClose: () => L(!1),
+                isOpen: ae,
+                onClose: () => Q(!1),
                 title: "Search",
-                navDrawerLinks: je,
-                onSearch: Ie,
+                navDrawerLinks: Fe,
+                onSearch: xe,
                 hasSearch: !0,
                 hasBackButton: !1,
-                topOffset: ee
+                topOffset: ne
               }
             )
           ] }
@@ -1899,46 +2018,46 @@ const Xe = 60, bt = 6, Un = (n) => {
       ]
     }
   );
-}, yt = ({ links: n, linkComponent: l, onLinkClick: a }) => {
-  const i = l || Y, s = (u) => {
-    a && a(u);
+}, It = ({ links: n, linkComponent: o, onLinkClick: c }) => {
+  const i = o || X, s = (u) => {
+    c && c(u);
   };
   return /* @__PURE__ */ t.jsx(
-    E,
+    k,
     { direction: "column", gap: 6, children: n.map(
       (u) => /* @__PURE__ */ t.jsx(
-        P,
+        W,
         {
           as: i,
           color: "white",
           size: "lg",
           _hover: { color: "viridian.lighter", textDecoration: "none" },
           onClick: () => s(u.label),
-          ...ge(u.href, !!l),
+          ...ke(u.href, !!o),
           children: u.label
         },
         u.label
       )
     ) }
   );
-}, lr = ({ title: n, links: l, isLast: a }) => {
-  const i = a ? "transparent" : `${se.colors.viridian.lighter}20`;
-  return l ? /* @__PURE__ */ t.jsx(
+}, or = ({ title: n, links: o, isLast: c }) => {
+  const i = c ? "transparent" : `${K.colors.viridian.lighter}20`;
+  return o ? /* @__PURE__ */ t.jsx(
     un,
     { borderColor: i, children: ({ isExpanded: s }) => /* @__PURE__ */ t.jsxs(
       t.Fragment,
       { children: [
         /* @__PURE__ */ t.jsxs(
-          cn,
+          dn,
           { paddingX: 0, paddingY: 4, _hover: { bg: "transparent" }, children: [
             /* @__PURE__ */ t.jsx(
-              P,
+              W,
               { color: "viridian.lighter", size: "lg", flex: "1", textAlign: "left", children: n }
             ),
             /* @__PURE__ */ t.jsx(
               J,
               {
-                as: $n,
+                as: Fn,
                 size: "sm",
                 color: "viridian.lighter",
                 transform: s ? "rotate(-180deg)" : "rotate(0deg)",
@@ -1948,48 +2067,48 @@ const Xe = 60, bt = 6, Un = (n) => {
           ] }
         ),
         /* @__PURE__ */ t.jsx(
-          dn,
-          { pb: 4, px: 0, children: l }
+          fn,
+          { pb: 4, px: 0, children: o }
         )
       ] }
     ) }
   ) : null;
-}, or = ({ title: n, links: l }) => l ? /* @__PURE__ */ t.jsxs(
-  w,
+}, lr = ({ title: n, links: o }) => o ? /* @__PURE__ */ t.jsxs(
+  C,
   { children: [
     /* @__PURE__ */ t.jsx(
-      P,
+      W,
       { color: "viridian.lighter", mb: 6, fontSize: "lg", children: n }
     ),
-    l
+    o
   ] }
-) : null, ir = ({
+) : null, ar = ({
   sections: n,
-  linkComponent: l,
-  onLinkClick: a
-}) => He({
+  linkComponent: o,
+  onLinkClick: c
+}) => ye({
   base: !1,
   tablet: !1,
   largeTablet: !0,
   desktop: !0
 }) ? /* @__PURE__ */ t.jsx(
-  E,
+  k,
   {
     justify: "space-between",
     align: "flex-start",
     children: /* @__PURE__ */ t.jsx(
-      E,
+      k,
       { gap: 120, children: n.map(
         ({ title: s, links: u }) => /* @__PURE__ */ t.jsx(
-          or,
+          lr,
           {
             title: s,
             links: /* @__PURE__ */ t.jsx(
-              yt,
+              It,
               {
                 links: u,
-                linkComponent: l,
-                onLinkClick: a
+                linkComponent: o,
+                onLinkClick: c
               }
             )
           },
@@ -1999,7 +2118,7 @@ const Xe = 60, bt = 6, Un = (n) => {
     )
   }
 ) : /* @__PURE__ */ t.jsx(
-  sn,
+  cn,
   {
     allowMultiple: !0,
     defaultIndex: [0],
@@ -2007,57 +2126,57 @@ const Xe = 60, bt = 6, Un = (n) => {
     display: "flex",
     flexDirection: "column",
     children: n.map(
-      ({ title: s, links: u }, f) => /* @__PURE__ */ t.jsx(
-        lr,
+      ({ title: s, links: u }, p) => /* @__PURE__ */ t.jsx(
+        or,
         {
           title: s,
           links: /* @__PURE__ */ t.jsx(
-            yt,
+            It,
             {
               links: u,
-              linkComponent: l,
-              onLinkClick: a
+              linkComponent: o,
+              onLinkClick: c
             }
           ),
-          isLast: f === n.length - 1
+          isLast: p === n.length - 1
         },
         s
       )
     )
   }
-), Et = {
-  instagram: Hn,
-  linkedin: Fn,
-  facebook: Wn,
-  tiktok: zn,
+), Lt = {
+  instagram: Mn,
+  linkedin: Bn,
+  facebook: zn,
+  tiktok: Wn,
   x: Nn
-}, ar = ({
+}, ir = ({
   socialLinks: n,
-  onEmailSubmit: l,
-  socialMediaLabel: a,
+  onEmailSubmit: o,
+  socialMediaLabel: c,
   newsletterLabel: i,
   onLinkClick: s,
   showNewsletter: u = !0
 }) => {
-  const [f, C] = Re.useState(""), p = () => {
-    f && l && (l(f), C(""));
-  }, j = (g) => {
-    g.key === "Enter" && p();
-  }, c = (g) => {
+  const [p, v] = Ae.useState(""), x = () => {
+    p && o && (o(p), v(""));
+  }, f = (g) => {
+    g.key === "Enter" && x();
+  }, d = (g) => {
     s && s(g);
   };
   return /* @__PURE__ */ t.jsxs(
-    w,
+    C,
     { width: ["100%", null, null, "440px"], children: [
       u && /* @__PURE__ */ t.jsxs(
-        w,
+        C,
         { mb: [8, 10], children: [
           /* @__PURE__ */ t.jsx(
-            P,
+            W,
             { color: "viridian.lighter", mb: 6, size: "lg", children: i }
           ),
           /* @__PURE__ */ t.jsxs(
-            fn,
+            pn,
             { children: [
               /* @__PURE__ */ t.jsx(
                 hn,
@@ -2071,23 +2190,23 @@ const Xe = 60, bt = 6, Un = (n) => {
                   opacity: 0.66,
                   height: "52px",
                   pr: "48px",
-                  value: f,
-                  onChange: (g) => C(g.target.value),
-                  onKeyPress: j
+                  value: p,
+                  onChange: (g) => v(g.target.value),
+                  onKeyPress: f
                 }
               ),
               /* @__PURE__ */ t.jsx(
-                pn,
+                gn,
                 { h: "52px", pr: 4, children: /* @__PURE__ */ t.jsx(
                   J,
                   {
-                    as: Bn,
+                    as: Hn,
                     color: "viridian.lighter",
                     width: "24px",
                     height: "24px",
                     opacity: 0.66,
                     cursor: "pointer",
-                    onClick: p,
+                    onClick: x,
                     "data-testid": "arrow-right-icon",
                     role: "button",
                     "aria-label": "Submit"
@@ -2099,27 +2218,27 @@ const Xe = 60, bt = 6, Un = (n) => {
         ] }
       ),
       /* @__PURE__ */ t.jsxs(
-        w,
+        C,
         { children: [
           /* @__PURE__ */ t.jsx(
-            P,
-            { color: "viridian.lighter", marginBottom: 4, size: "lg", children: a }
+            W,
+            { color: "viridian.lighter", marginBottom: 4, size: "lg", children: c }
           ),
           /* @__PURE__ */ t.jsx(
-            E,
+            k,
             { gap: 3, children: n == null ? void 0 : n.map(
               (g) => /* @__PURE__ */ t.jsx(
-                Y,
+                X,
                 {
                   href: g.href,
                   target: "_blank",
                   rel: "noopener noreferrer",
                   "aria-label": g.name,
-                  onClick: () => c(g.name),
-                  children: Et[g.name.toLowerCase()] && /* @__PURE__ */ t.jsx(
+                  onClick: () => d(g.name),
+                  children: Lt[g.name.toLowerCase()] && /* @__PURE__ */ t.jsx(
                     J,
                     {
-                      as: Et[g.name.toLowerCase()],
+                      as: Lt[g.name.toLowerCase()],
                       color: "white",
                       width: ["48px", null, "24px", null],
                       height: ["48px", null, "24px", null]
@@ -2136,28 +2255,28 @@ const Xe = 60, bt = 6, Un = (n) => {
   );
 }, sr = ({
   links: n,
-  linkComponent: l,
-  onLinkClick: a
+  linkComponent: o,
+  onLinkClick: c
 }) => {
-  const i = l || Y, s = (f) => {
-    a && a(f);
+  const i = o || X, s = (p) => {
+    c && c(p);
   }, u = n == null ? void 0 : n.map(
-    (f) => /* @__PURE__ */ t.jsx(
-      P,
+    (p) => /* @__PURE__ */ t.jsx(
+      W,
       {
         as: i,
         color: "viridian.lighter",
         size: "sm",
         _hover: { color: "white", textDecoration: "none" },
-        onClick: () => s(f.label),
-        ...ge(f.href, !!l),
-        children: f.label
+        onClick: () => s(p.label),
+        ...ke(p.href, !!o),
+        children: p.label
       },
-      f.label
+      p.label
     )
   );
   return /* @__PURE__ */ t.jsxs(
-    E,
+    k,
     {
       direction: ["column", "column", "row"],
       justify: "space-between",
@@ -2165,7 +2284,7 @@ const Xe = 60, bt = 6, Un = (n) => {
       gap: [6, 6, 0],
       children: [
         /* @__PURE__ */ t.jsx(
-          E,
+          k,
           {
             direction: "row",
             flexWrap: "wrap",
@@ -2175,7 +2294,7 @@ const Xe = 60, bt = 6, Un = (n) => {
           }
         ),
         /* @__PURE__ */ t.jsxs(
-          P,
+          W,
           { color: "viridian.lighter", fontSize: "sm", children: [
             "© Everlywell ",
             (/* @__PURE__ */ new Date()).getFullYear()
@@ -2184,33 +2303,33 @@ const Xe = 60, bt = 6, Un = (n) => {
       ]
     }
   );
-}, br = Re.forwardRef(({
+}, br = Ae.forwardRef(({
   navigationSections: n = [],
-  disclaimer: l,
-  newsletterLabel: a,
+  disclaimer: o,
+  newsletterLabel: c,
   socialMediaLabel: i,
   socialLinks: s,
   complianceLinks: u,
-  linkComponent: f,
-  onEmailSubmit: C,
-  additionalContent: p,
-  onLinkClick: j,
-  onSocialMediaClick: c,
+  linkComponent: p,
+  onEmailSubmit: v,
+  additionalContent: x,
+  onLinkClick: f,
+  onSocialMediaClick: d,
   showNewsletter: g = !0
-}, m) => /* @__PURE__ */ t.jsx(
-  w,
-  { as: "footer", bg: "viridian.dark", py: [6, 8], px: [4, 6], ref: m, children: /* @__PURE__ */ t.jsxs(
-    gn,
+}, w) => /* @__PURE__ */ t.jsx(
+  C,
+  { as: "footer", bg: "viridian.dark", py: [6, 8], px: [4, 6], ref: w, children: /* @__PURE__ */ t.jsxs(
+    xn,
     { size: "fluid", children: [
       /* @__PURE__ */ t.jsxs(
-        E,
+        k,
         { direction: "column", gap: [8, 12], children: [
           /* @__PURE__ */ t.jsx(
-            w,
-            { children: /* @__PURE__ */ t.jsx(Pt, { width: ["150px", "202px"], color: "white" }) }
+            C,
+            { children: /* @__PURE__ */ t.jsx(Wt, { width: ["150px", "202px"], color: "white" }) }
           ),
           /* @__PURE__ */ t.jsxs(
-            E,
+            k,
             {
               direction: ["column", null, null, "row"],
               justify: "space-between",
@@ -2218,21 +2337,21 @@ const Xe = 60, bt = 6, Un = (n) => {
               gap: [8, 8, 8, 0],
               children: [
                 /* @__PURE__ */ t.jsx(
-                  ir,
+                  ar,
                   {
                     sections: n,
-                    linkComponent: f,
-                    onLinkClick: j
+                    linkComponent: p,
+                    onLinkClick: f
                   }
                 ),
                 /* @__PURE__ */ t.jsx(
-                  ar,
+                  ir,
                   {
                     socialLinks: s,
-                    newsletterLabel: a,
+                    newsletterLabel: c,
                     socialMediaLabel: i,
-                    onEmailSubmit: C,
-                    onLinkClick: c,
+                    onEmailSubmit: v,
+                    onLinkClick: d,
                     showNewsletter: g
                   }
                 )
@@ -2240,7 +2359,7 @@ const Xe = 60, bt = 6, Un = (n) => {
             }
           ),
           /* @__PURE__ */ t.jsxs(
-            E,
+            k,
             {
               direction: ["column", "column", "row"],
               justify: "space-between",
@@ -2248,29 +2367,29 @@ const Xe = 60, bt = 6, Un = (n) => {
               align: ["flex-start", "flex-start", "center"],
               gap: [6, 6, 0],
               children: [
-                l && /* @__PURE__ */ t.jsx(
-                  P,
+                o && /* @__PURE__ */ t.jsx(
+                  W,
                   {
                     color: "viridian.lighter",
                     fontSize: "sm",
                     maxWidth: ["100%", "100%", "1024px"],
-                    dangerouslySetInnerHTML: { __html: l },
+                    dangerouslySetInnerHTML: { __html: o },
                     sx: {
                       "a:hover": { color: "viridian.light", textDecoration: "underline" }
                     }
                   }
                 ),
-                p
+                x
               ]
             }
           )
         ] }
       ),
       /* @__PURE__ */ t.jsx(
-        w,
+        C,
         {
           borderTop: "1px solid",
-          borderColor: `${se.colors.viridian.lighter}20`,
+          borderColor: `${K.colors.viridian.lighter}20`,
           marginTop: "10",
           marginBottom: "8"
         }
@@ -2278,74 +2397,74 @@ const Xe = 60, bt = 6, Un = (n) => {
       /* @__PURE__ */ t.jsx(
         sr,
         {
-          disclaimer: l,
+          disclaimer: o,
           links: u,
-          linkComponent: f,
-          onLinkClick: j
+          linkComponent: p,
+          onLinkClick: f
         }
       )
     ] }
   ) }
-)), ur = (n) => n ? {
-  Container: Tt,
-  Overlay: _t,
-  Content: St,
-  Header: kt,
-  Body: Dt,
-  Footer: xn,
-  CloseButton: vn
+)), cr = (n) => n ? {
+  Container: $t,
+  Overlay: Pt,
+  Content: At,
+  Header: Ft,
+  Body: Ht,
+  Footer: vn,
+  CloseButton: mn
 } : {
-  Container: mn,
-  Overlay: bn,
+  Container: bn,
+  Overlay: wn,
   Content: jn,
-  Header: wn,
-  Body: Cn,
-  Footer: yn,
-  CloseButton: En
-}, jr = ({
+  Header: Cn,
+  Body: yn,
+  Footer: En,
+  CloseButton: kn
+}, wr = ({
   isOpen: n,
-  onClose: l,
-  children: a,
+  onClose: o,
+  children: c,
   header: i,
   footer: s,
   headerProps: u,
-  bodyProps: f,
-  footerProps: C,
-  contentProps: p,
-  ...j
+  bodyProps: p,
+  footerProps: v,
+  contentProps: x,
+  ...f
 }) => {
-  var X, A, $, W, U;
-  const [c] = Rn(`(max-width: ${se.breakpoints.tablet})`), g = (U = (W = ($ = (A = (X = se) == null ? void 0 : X.components) == null ? void 0 : A.Modal) == null ? void 0 : $.baseStyle) == null ? void 0 : W.overlay) == null ? void 0 : U.background, {
-    Container: m,
-    Overlay: x,
-    Content: T,
-    Header: G,
-    Body: Q,
-    Footer: O,
+  var V, A, M, F, ee;
+  const [d] = Ot(`(max-width: ${K.breakpoints.tablet})`), g = (ee = (F = (M = (A = (V = K) == null ? void 0 : V.components) == null ? void 0 : A.Modal) == null ? void 0 : M.baseStyle) == null ? void 0 : F.overlay) == null ? void 0 : ee.background, {
+    Container: w,
+    Overlay: y,
+    Content: D,
+    Header: $,
+    Body: m,
+    Footer: H,
     CloseButton: _
-  } = ur(c);
+  } = cr(d);
   return /* @__PURE__ */ t.jsxs(
-    m,
+    w,
     {
-      ...j,
+      ...f,
       isOpen: n,
-      onClose: l,
+      onClose: o,
       size: "xl",
-      ...c ? { placement: "bottom" } : {},
+      ...d ? { placement: "bottom" } : {},
       children: [
-        /* @__PURE__ */ t.jsx(x, { backdropFilter: "auto", backgroundColor: g }),
+        /* @__PURE__ */ t.jsx(y, { backdropFilter: "auto", backgroundColor: g }),
         /* @__PURE__ */ t.jsxs(
-          T,
+          D,
           {
             backgroundColor: "tints.white",
-            borderRadius: c ? "20px 20px 0 0" : "20px",
+            borderRadius: d ? "20px 20px 0 0" : "20px",
             overflowY: "auto",
             gap: 0,
-            ...i && c && { paddingTop: 0 },
-            ...p,
+            ...i && d && { paddingTop: 0 },
+            ...x,
             children: [
               /* @__PURE__ */ t.jsxs(
-                G,
+                $,
                 {
                   display: "flex",
                   width: "100%",
@@ -2359,7 +2478,7 @@ const Xe = 60, bt = 6, Un = (n) => {
                   zIndex: "modal",
                   backgroundColor: "tints.white",
                   paddingInline: 4,
-                  ...c ? { paddingBlock: 4 } : { paddingTop: 6, paddingBlockEnd: 2 },
+                  ...d ? { paddingBlock: 4 } : { paddingTop: 6, paddingBlockEnd: 2 },
                   ...u,
                   children: [
                     i,
@@ -2375,22 +2494,22 @@ const Xe = 60, bt = 6, Un = (n) => {
                             fontSize: "1rem"
                           }
                         },
-                        children: /* @__PURE__ */ t.jsx(J, { as: At, weight: "light" })
+                        children: /* @__PURE__ */ t.jsx(J, { as: zt, weight: "light" })
                       }
                     )
                   ]
                 }
               ),
               /* @__PURE__ */ t.jsx(
-                Q,
+                m,
                 {
                   color: "tints.darkGrey",
                   paddingInline: 4,
-                  ...f,
-                  children: a
+                  ...p,
+                  children: c
                 }
               ),
-              /* @__PURE__ */ t.jsx(O, { paddingInline: 4, ...C, children: s })
+              /* @__PURE__ */ t.jsx(H, { paddingInline: 4, ...v, children: s })
             ]
           }
         )
@@ -2399,17 +2518,17 @@ const Xe = 60, bt = 6, Un = (n) => {
   );
 };
 export {
-  Xn as BasketButton,
+  Kn as BasketButton,
   xr as CategoryLabel,
-  jr as DrawerModal,
+  wr as DrawerModal,
   br as Footer,
-  $e as NavButton,
+  Ve as NavButton,
   vr as NavSkeleton,
-  qe as NavbarDrawer,
-  Je as NavbarDrawerLink,
+  it as NavbarDrawer,
+  Ne as NavbarDrawerLink,
   mr as NavigationBar,
   Zn as SpotlightCard,
   gr as Stepper,
-  pe as TopNavIconButton,
-  Kn as TopNavigation
+  Ee as TopNavIconButton,
+  Xn as TopNavigation
 };