@zeniai/web-components 3.16.61 → 3.16.62

package/dist/PortfolioAllocationFormPage-C8hamsCL.cjs

@@ -1,207 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./vendor-.pnpm-CT-Z_-kn.cjs"),S=require("react"),s=require("@emotion/styled"),t=require("./index-CSb-Shbe.cjs"),O=require("./PortfolioDetails-DMGP9lGF.cjs"),{spendManagement:{treasury:{portfolioAllocation:p}},common:u}=t.appLocale.getLocalizedStrings(),a={containerPadding:new t.ResponsiveSized(t.sp[4],t.sp[4]),titleWidth:new t.ResponsiveSized(343,580,726,826),cardBorderRadius:t.sp[2],cardPadding:new t.ResponsiveSized(t.sp[3],t.sp[4]),cardPaddingLegacy:t.sp[6],sliderWidth:new t.ResponsiveSized(143,177),sliderHeight:t.sp[4],sliderContainerGap:new t.ResponsiveSized(t.sp[5],t.sp[3]),buttonGap:t.sp[6],navBarContainerPaddingYaxis:new t.ResponsiveSized(10,t.sp[3]),containerPaddingLeft:new t.ResponsiveSized(t.sp[3],t.sp[6],t.sp[8]),containerPaddingRight:new t.ResponsiveSized(t.sp[3],t.sp[6],t.sp[8]),riskLevelInfoPaddingRight:new t.ResponsiveSized(t.sp[0],t.sp[3])},F={stepTitle:new t.ResponsiveSizedStyle("h6Regular","h5Regular")},G=({onBackClick:e,onNextClick:m,onUpdateFundAllocation:x,treasurySetupView:I,isReadOnly:c,isEditMode:d,isOnSetup:R=!1,skipTransferStep:T})=>{const o=t.useWindowSizeContext(),[A,D]=S.useState(!1),{fundsData:W,fundAllocationOptions:r,fundAllocationLocalData:l,currentAllocation:h,portfolioAllocationUpdateStatus:q}=I;S.useEffect(()=>{if(d&&h!==null){const n=!i.isEqual(l.allocation,h);D(n)}},[d,h,l]);const j=n=>{const g=r.find(N=>N.optionIndex===n);g&&x(g)},f=()=>{j(r.findIndex(n=>n.riskScore===0||n.riskLevel==="Conservative"))},H=()=>{let n;h!=null&&(n=r.find(g=>i.isEqual(g.allocation,h))),n!=null?x(n):f()},v=()=>{d&&H(),e()};return i.jsxRuntimeExports.jsxs(V,{children:[i.jsxRuntimeExports.jsxs(J,{windowSize:o,children:[i.jsxRuntimeExports.jsx(K,{windowSize:o,children:i.jsxRuntimeExports.jsx(t.Tooltip,{title:u.navBar.back,enterTouchDelay:600,placement:"bottom",children:i.jsxRuntimeExports.jsx(Q,{"data-testid":t.generateDataTestId("nav-bar-back-portfolio-allocation"),onClick:v})})}),i.jsxRuntimeExports.jsxs(U,{windowSize:o,children:[i.jsxRuntimeExports.jsxs(X,{windowSize:o,children:[i.jsxRuntimeExports.jsx(Z,{windowSize:o,children:Y(c,R,d)}),!c&&!d&&i.jsxRuntimeExports.jsx(M,{children:i.jsxRuntimeExports.jsxs(ee,{children:[i.jsxRuntimeExports.jsx(te,{}),i.jsxRuntimeExports.jsx($,{}),T!==!0&&i.jsxRuntimeExports.jsx($,{})]})})]}),i.jsxRuntimeExports.jsx(ie,{isReadOnly:c,children:_(c,R,d)}),i.jsxRuntimeExports.jsx(se,{children:i.jsxRuntimeExports.jsxs(ne,{windowSize:o,children:[i.jsxRuntimeExports.jsx(oe,{children:i.jsxRuntimeExports.jsx(O.PortfolioAllocationDetails,{isInReview:!1,isSetup:!0,fundDetails:W,allocation:l,page:R?"setup portfolio":"edit portfolio"})}),i.jsxRuntimeExports.jsxs(re,{windowSize:o,children:[i.jsxRuntimeExports.jsx(le,{children:i.jsxRuntimeExports.jsx(ae,{onClick:f,isRecommended:c||l.riskScore===0||l.riskLevel==="Conservative",children:p.resetButton})}),o==="small"?i.jsxRuntimeExports.jsxs(ce,{children:[i.jsxRuntimeExports.jsxs(w,{windowSize:o,children:[i.jsxRuntimeExports.jsxs(y,{windowSize:o,children:[i.jsxRuntimeExports.jsx(b,{children:l.riskScore}),i.jsxRuntimeExports.jsx(E,{children:u.strings.slash}),i.jsxRuntimeExports.jsx(k,{children:r.length>0?Math.max(...r.map(n=>n.riskScore)):0})]}),i.jsxRuntimeExports.jsxs(L,{children:[i.jsxRuntimeExports.jsx(C,{type:"range",min:"0",max:r.length-1,step:"1",value:l.optionIndex,onChange:n=>j(Number(n.target.value)),disabled:c,isReadOnly:c,windowSize:o}),i.jsxRuntimeExports.jsx(P,{style:{width:`${r.length>1?l.optionIndex/(r.length-1)*(a.sliderWidth.value(o)-12):0}px`}})]})]}),i.jsxRuntimeExports.jsxs(de,{children:[i.jsxRuntimeExports.jsx(z,{children:p.riskLevelLabel}),i.jsxRuntimeExports.jsx(B,{children:l.riskLevel})]})]}):i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsxs(w,{windowSize:o,children:[i.jsxRuntimeExports.jsxs(y,{windowSize:o,children:[i.jsxRuntimeExports.jsx(b,{children:l.riskScore}),i.jsxRuntimeExports.jsx(E,{children:u.strings.slash}),i.jsxRuntimeExports.jsx(k,{children:r.length>0?Math.max(...r.map(n=>n.riskScore)):0})]}),i.jsxRuntimeExports.jsxs(L,{children:[i.jsxRuntimeExports.jsx(C,{type:"range",min:"0",max:r.length-1,step:"1",value:l.optionIndex,onChange:n=>j(Number(n.target.value)),disabled:c,isReadOnly:c,windowSize:o}),i.jsxRuntimeExports.jsx(P,{style:{width:`${r.length>1?l.optionIndex/(r.length-1)*(a.sliderWidth.value(o)-12):0}px`}})]})]}),i.jsxRuntimeExports.jsxs(pe,{windowSize:o,children:[i.jsxRuntimeExports.jsx(z,{children:p.riskLevelLabel}),i.jsxRuntimeExports.jsx(B,{children:l.riskLevel})]})]})]})]})})]})]}),c?null:i.jsxRuntimeExports.jsx(t.Footer,{style:{zIndex:4,paddingTop:t.Space.sp2,paddingBottom:t.Space.sp2},showCancel:!0,cancelBtn:{label:d?u.cancel:u.navBar.back,onClick:v},primaryBtn:{label:d?u.confirm:u.next,onClick:m,isLoading:d&&q.fetchState==="In-Progress",isDisabled:d&&!A}})]})};function Y(e,m,x){return e||m&&x?p.title:x?p.editTitle:p.stepTitle}function _(e,m,x){return e||m&&x?p.subtextReadOnly:x?p.subtextEdit:p.subtextSetup}const V=s.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: ${e=>e.theme.colors.grey4};
-`,J=s.div`
-  height: auto;
-  padding-left: ${e=>`${a.containerPaddingLeft.valuePx(e.windowSize)}`};
-  padding-right: ${e=>`${a.containerPaddingRight.valuePx(e.windowSize)}`};
-  flex: 1;
-  overflow-y: auto;
-`,K=s.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  width: 100%;
-  top: ${t.Space.sp0};
-  padding: ${e=>`${a.navBarContainerPaddingYaxis.valuePx(e.windowSize)} ${t.Space.sp0}`};
-  z-index: 2;
-`,Q=s(t.SvgClose)`
-  cursor: pointer;
-  color: ${e=>e.theme.colors.hero};
-  width: ${t.Space.sp4};
-  height: ${t.Space.sp4};
-  min-height: ${t.Space.sp4};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-  }
-`,U=s.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: ${t.Space.sp3};
-  flex: 1;
-  overflow-y: auto;
-  ${e=>e.windowSize==="small"&&`
-    margin-bottom: ${t.Space.sp5};
-  `}
-`,X=s.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${t.Space.sp3};
-  width: 100%;
-`,Z=s(t.StyledText)`
-  ${e=>`${F.stepTitle.style(e.windowSize)}`};
-  color: ${e=>e.theme.colors.primary};
-  text-align: left;
-`,M=s.div`
-  display: flex;
-  align-items: center;
-`,ee=s.div`
-  display: flex;
-  width: 100%;
-  gap: ${t.Space.sp3};
-`,te=s.div`
-  flex: 1;
-  height: 2px;
-  background-color: ${e=>e.theme.colors.primary};
-  border-radius: ${t.Space.sp2};
-`,$=s.div`
-  flex: 1;
-  height: 2px;
-  background-color: ${e=>e.theme.colors.grey2};
-  border-radius: ${t.Space.sp2};
-`,ie=s(t.StandardRegular)`
-  color: ${e=>e.theme.colors.hero};
-  text-align: left;
-  max-width: ${a.titleWidth.valuePx("medium-regular")}px;
-  width: 100%;
-  margin-top: ${e=>e.isReadOnly===!0?"-8px":"0"};
-`,se=s.div`
-  background: ${e=>e.theme.colors.grey5};
-  border: 1px solid ${e=>e.theme.colors.grey3};
-  border-radius: ${a.cardBorderRadius}px;
-  box-shadow: ${e=>e.theme.colors.elevation1};
-  width: 100%;
-  max-width: ${a.titleWidth.valuePx("medium-regular")}px;
-  display: flex;
-  flex-direction: column;
-`,ne=s.div`
-  padding: ${e=>a.cardPadding.valuePx(e.windowSize)};
-  display: flex;
-  flex-direction: column;
-`,oe=s.div`
-  display: flex;
-  flex-direction: column;
-`,re=s.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  ${e=>e.windowSize==="small"&&`
-    flex-direction: column;
-    gap: ${t.Space.sp3};
-    align-items: stretch;
-  `}
-`,le=s.div`
-  display: flex;
-  flex-direction: column;
-  width: 245px;
-`,ae=s.button`
-  background: none;
-  border: none;
-  cursor: ${e=>e.isRecommended?"default":"pointer"};
-  color: ${e=>e.isRecommended?e.theme.colors.grey2:e.theme.colors.hero};
-  ${t.textStyles.smallRegular.css};
-  text-align: left;
-  padding: ${t.Space.sp0};
-  text-decoration: underline;
-  pointer-events: ${e=>e.isRecommended?"none":"auto"};
-
-  &:hover {
-    color: ${e=>e.isRecommended?e.theme.colors.grey2:e.theme.colors.primary};
-  }
-`,w=s.div`
-  display: flex;
-  align-items: center;
-  gap: ${e=>a.sliderContainerGap.valuePx(e.windowSize)};
-  position: relative;
-  width: 240px;
-`,y=s.div`
-  color: ${e=>e.theme.colors.primary};
-  text-align: center;
-  display: flex;
-  align-items: baseline;
-  justify-content: center;
-  width: ${t.Space.sp7};
-
-  ${e=>e.windowSize==="small"&&`
-      width: auto;
-    `}
-`,b=s(t.LargeSemiBold)`
-  color: ${e=>e.theme.colors.primary};
-`,k=s(t.ExtraSmallRegular)`
-  color: ${e=>e.theme.colors.primary};
-`,E=s(t.ExtraSmallRegular)`
-  color: ${e=>e.theme.colors.primary};
-`,L=s.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
-`,C=s.input`
-  width: ${({windowSize:e})=>a.sliderWidth.valuePx(e)};
-  &[type="range"]::-webkit-slider-runnable-track {
-    height: 2px;
-    background-color: ${e=>e.theme.colors.grey3};
-  }
-
-  &[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  &[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: ${e=>e.isReadOnly===!0?t.Space.sp0:t.Space.sp3};
-    height: ${e=>e.isReadOnly===!0?t.Space.sp0:t.Space.sp3};
-    border-radius: 50%;
-    background: ${e=>e.theme.colors.grey5};
-    border: ${e=>e.isReadOnly===!0?"none":`2px solid ${t.Colors.success}`};
-    margin-top: -7px;
-    cursor: ${e=>e.isReadOnly===!0?"default":"pointer"};
-    opacity: ${e=>e.isReadOnly===!0?"0":"1"};
-  }
-
-  &::-moz-range-thumb {
-    width: ${e=>e.isReadOnly===!0?t.Space.sp0:t.Space.sp3};
-    height: ${e=>e.isReadOnly===!0?t.Space.sp0:t.Space.sp3};
-    border-radius: 50%;
-    background: ${e=>e.theme.colors.grey5};
-    border: ${e=>e.isReadOnly===!0?"none":`2px solid ${t.Colors.success}`};
-    margin-top: -7px;
-    cursor: ${e=>e.isReadOnly===!0?"default":"pointer"};
-    opacity: ${e=>e.isReadOnly===!0?"0":"1"};
-  }
-`,P=s.div`
-  position: absolute;
-  height: 2px;
-  background-color: ${t.Colors.success};
-`,ce=s.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: ${t.Space.sp3};
-`,de=s.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  width: auto;
-  padding-right: ${t.Space.sp0};
-  box-sizing: border-box;
-`,pe=s.div`
-  display: flex;
-  flex-direction: column;
-  align-items: ${e=>e.windowSize==="small"?"flex-start":"flex-end"};
-  width: 129px;
-  padding-right: ${e=>a.riskLevelInfoPaddingRight.valuePx(e.windowSize)};
-  box-sizing: border-box;
-`,z=s(t.SmallRegular)`
-  color: ${e=>e.theme.colors.hero};
-  text-align: right;
-`,B=s(t.StandardMedium)`
-  color: ${e=>e.theme.colors.hero};
-  text-align: right;
-`;exports.default=G;

package/dist/PortfolioAllocationFormPage-CZkJD6tu.js

@@ -1,440 +0,0 @@
-import { k as S, j as t } from "./vendor-.pnpm-DtFedGku.js";
-import { useState as V, useEffect as Z } from "react";
-import i from "@emotion/styled";
-import { u as _, Z as J, a as Q, j as U, R as h, ap as X, S as n, b as M, av as E, K as ee, p as te, D as o, t as ie, L as ne, E as W, C as y, G as oe, _ as re } from "./index-Bi0bR3JC.js";
-import { P as le } from "./PortfolioDetails-D4yT8r35.js";
-const {
-  spendManagement: {
-    treasury: { portfolioAllocation: x }
-  },
-  common: u
-} = Q.getLocalizedStrings(), d = {
-  containerPadding: new h(o[4], o[4]),
-  titleWidth: new h(343, 580, 726, 826),
-  cardBorderRadius: o[2],
-  cardPadding: new h(o[3], o[4]),
-  cardPaddingLegacy: o[6],
-  sliderWidth: new h(143, 177),
-  sliderHeight: o[4],
-  sliderContainerGap: new h(o[5], o[3]),
-  buttonGap: o[6],
-  navBarContainerPaddingYaxis: new h(10, o[3]),
-  containerPaddingLeft: new h(o[3], o[6], o[8]),
-  containerPaddingRight: new h(o[3], o[6], o[8]),
-  riskLevelInfoPaddingRight: new h(o[0], o[3])
-}, se = {
-  stepTitle: new E("h6Regular", "h5Regular")
-}, De = ({
-  onBackClick: e,
-  onNextClick: m,
-  onUpdateFundAllocation: g,
-  treasurySetupView: H,
-  isReadOnly: c,
-  isEditMode: p,
-  isOnSetup: $ = !1,
-  skipTransferStep: N
-}) => {
-  const l = _(), [G, F] = V(!1), {
-    fundsData: O,
-    fundAllocationOptions: s,
-    fundAllocationLocalData: a,
-    currentAllocation: f,
-    portfolioAllocationUpdateStatus: Y
-  } = H;
-  Z(() => {
-    if (p && f !== null) {
-      const r = !S(
-        a.allocation,
-        f
-      );
-      F(r);
-    }
-  }, [p, f, a]);
-  const w = (r) => {
-    const v = s.find(
-      (K) => K.optionIndex === r
-    );
-    v && g(v);
-  }, b = () => {
-    w(
-      s.findIndex(
-        (r) => r.riskScore === 0 || r.riskLevel === "Conservative"
-      )
-    );
-  }, q = () => {
-    let r;
-    f != null && (r = s.find(
-      (v) => S(v.allocation, f)
-    )), r != null ? g(r) : b();
-  }, k = () => {
-    p && q(), e();
-  };
-  return /* @__PURE__ */ t.jsxs(ce, { children: [
-    /* @__PURE__ */ t.jsxs(pe, { windowSize: l, children: [
-      /* @__PURE__ */ t.jsx(he, { windowSize: l, children: /* @__PURE__ */ t.jsx(
-        J,
-        {
-          title: u.navBar.back,
-          enterTouchDelay: 600,
-          placement: "bottom",
-          children: /* @__PURE__ */ t.jsx(
-            xe,
-            {
-              "data-testid": U(
-                "nav-bar-back-portfolio-allocation"
-              ),
-              onClick: k
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ t.jsxs(ge, { windowSize: l, children: [
-        /* @__PURE__ */ t.jsxs(ue, { windowSize: l, children: [
-          /* @__PURE__ */ t.jsx(me, { windowSize: l, children: ae(c, $, p) }),
-          !c && !p && /* @__PURE__ */ t.jsx(fe, { children: /* @__PURE__ */ t.jsxs(ve, { children: [
-            /* @__PURE__ */ t.jsx($e, {}),
-            /* @__PURE__ */ t.jsx(j, {}),
-            N !== !0 && /* @__PURE__ */ t.jsx(j, {})
-          ] }) })
-        ] }),
-        /* @__PURE__ */ t.jsx(we, { isReadOnly: c, children: de(c, $, p) }),
-        /* @__PURE__ */ t.jsx(ye, { children: /* @__PURE__ */ t.jsxs(be, { windowSize: l, children: [
-          /* @__PURE__ */ t.jsx(ke, { children: /* @__PURE__ */ t.jsx(
-            le,
-            {
-              isInReview: !1,
-              isSetup: !0,
-              fundDetails: O,
-              allocation: a,
-              page: $ ? "setup portfolio" : "edit portfolio"
-            }
-          ) }),
-          /* @__PURE__ */ t.jsxs(Se, { windowSize: l, children: [
-            /* @__PURE__ */ t.jsx(je, { children: /* @__PURE__ */ t.jsx(
-              Re,
-              {
-                onClick: b,
-                isRecommended: c || a.riskScore === 0 || a.riskLevel === "Conservative",
-                children: x.resetButton
-              }
-            ) }),
-            l === "small" ? /* @__PURE__ */ t.jsxs(Le, { children: [
-              /* @__PURE__ */ t.jsxs(R, { windowSize: l, children: [
-                /* @__PURE__ */ t.jsxs(L, { windowSize: l, children: [
-                  /* @__PURE__ */ t.jsx(C, { children: a.riskScore }),
-                  /* @__PURE__ */ t.jsx(z, { children: u.strings.slash }),
-                  /* @__PURE__ */ t.jsx(P, { children: s.length > 0 ? Math.max(
-                    ...s.map((r) => r.riskScore)
-                  ) : 0 })
-                ] }),
-                /* @__PURE__ */ t.jsxs(B, { children: [
-                  /* @__PURE__ */ t.jsx(
-                    I,
-                    {
-                      type: "range",
-                      min: "0",
-                      max: s.length - 1,
-                      step: "1",
-                      value: a.optionIndex,
-                      onChange: (r) => w(Number(r.target.value)),
-                      disabled: c,
-                      isReadOnly: c,
-                      windowSize: l
-                    }
-                  ),
-                  /* @__PURE__ */ t.jsx(
-                    T,
-                    {
-                      style: {
-                        width: `${s.length > 1 ? a.optionIndex / (s.length - 1) * (d.sliderWidth.value(l) - 12) : 0}px`
-                      }
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ t.jsxs(Ce, { children: [
-                /* @__PURE__ */ t.jsx(A, { children: x.riskLevelLabel }),
-                /* @__PURE__ */ t.jsx(D, { children: a.riskLevel })
-              ] })
-            ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-              /* @__PURE__ */ t.jsxs(R, { windowSize: l, children: [
-                /* @__PURE__ */ t.jsxs(L, { windowSize: l, children: [
-                  /* @__PURE__ */ t.jsx(C, { children: a.riskScore }),
-                  /* @__PURE__ */ t.jsx(z, { children: u.strings.slash }),
-                  /* @__PURE__ */ t.jsx(P, { children: s.length > 0 ? Math.max(
-                    ...s.map((r) => r.riskScore)
-                  ) : 0 })
-                ] }),
-                /* @__PURE__ */ t.jsxs(B, { children: [
-                  /* @__PURE__ */ t.jsx(
-                    I,
-                    {
-                      type: "range",
-                      min: "0",
-                      max: s.length - 1,
-                      step: "1",
-                      value: a.optionIndex,
-                      onChange: (r) => w(Number(r.target.value)),
-                      disabled: c,
-                      isReadOnly: c,
-                      windowSize: l
-                    }
-                  ),
-                  /* @__PURE__ */ t.jsx(
-                    T,
-                    {
-                      style: {
-                        width: `${s.length > 1 ? a.optionIndex / (s.length - 1) * (d.sliderWidth.value(l) - 12) : 0}px`
-                      }
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ t.jsxs(Pe, { windowSize: l, children: [
-                /* @__PURE__ */ t.jsx(A, { children: x.riskLevelLabel }),
-                /* @__PURE__ */ t.jsx(D, { children: a.riskLevel })
-              ] })
-            ] })
-          ] })
-        ] }) })
-      ] })
-    ] }),
-    c ? null : /* @__PURE__ */ t.jsx(
-      X,
-      {
-        style: {
-          zIndex: 4,
-          paddingTop: n.sp2,
-          paddingBottom: n.sp2
-        },
-        showCancel: !0,
-        cancelBtn: {
-          label: p ? u.cancel : u.navBar.back,
-          onClick: k
-        },
-        primaryBtn: {
-          label: p ? u.confirm : u.next,
-          onClick: m,
-          isLoading: p && Y.fetchState === "In-Progress",
-          isDisabled: p && !G
-        }
-      }
-    )
-  ] });
-};
-function ae(e, m, g) {
-  return e || m && g ? x.title : g ? x.editTitle : x.stepTitle;
-}
-function de(e, m, g) {
-  return e || m && g ? x.subtextReadOnly : g ? x.subtextEdit : x.subtextSetup;
-}
-const ce = i.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, pe = i.div`
-  height: auto;
-  padding-left: ${(e) => `${d.containerPaddingLeft.valuePx(e.windowSize)}`};
-  padding-right: ${(e) => `${d.containerPaddingRight.valuePx(e.windowSize)}`};
-  flex: 1;
-  overflow-y: auto;
-`, he = i.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  width: 100%;
-  top: ${n.sp0};
-  padding: ${(e) => `${d.navBarContainerPaddingYaxis.valuePx(e.windowSize)} ${n.sp0}`};
-  z-index: 2;
-`, xe = i(M)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${n.sp4};
-  height: ${n.sp4};
-  min-height: ${n.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, ge = i.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: ${n.sp3};
-  flex: 1;
-  overflow-y: auto;
-  ${(e) => e.windowSize === "small" && `
-    margin-bottom: ${n.sp5};
-  `}
-`, ue = i.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${n.sp3};
-  width: 100%;
-`, me = i(ee)`
-  ${(e) => `${se.stepTitle.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  text-align: left;
-`, fe = i.div`
-  display: flex;
-  align-items: center;
-`, ve = i.div`
-  display: flex;
-  width: 100%;
-  gap: ${n.sp3};
-`, $e = i.div`
-  flex: 1;
-  height: 2px;
-  background-color: ${(e) => e.theme.colors.primary};
-  border-radius: ${n.sp2};
-`, j = i.div`
-  flex: 1;
-  height: 2px;
-  background-color: ${(e) => e.theme.colors.grey2};
-  border-radius: ${n.sp2};
-`, we = i(te)`
-  color: ${(e) => e.theme.colors.hero};
-  text-align: left;
-  max-width: ${d.titleWidth.valuePx("medium-regular")}px;
-  width: 100%;
-  margin-top: ${(e) => e.isReadOnly === !0 ? "-8px" : "0"};
-`, ye = i.div`
-  background: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  border-radius: ${d.cardBorderRadius}px;
-  box-shadow: ${(e) => e.theme.colors.elevation1};
-  width: 100%;
-  max-width: ${d.titleWidth.valuePx("medium-regular")}px;
-  display: flex;
-  flex-direction: column;
-`, be = i.div`
-  padding: ${(e) => d.cardPadding.valuePx(e.windowSize)};
-  display: flex;
-  flex-direction: column;
-`, ke = i.div`
-  display: flex;
-  flex-direction: column;
-`, Se = i.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  ${(e) => e.windowSize === "small" && `
-    flex-direction: column;
-    gap: ${n.sp3};
-    align-items: stretch;
-  `}
-`, je = i.div`
-  display: flex;
-  flex-direction: column;
-  width: 245px;
-`, Re = i.button`
-  background: none;
-  border: none;
-  cursor: ${(e) => e.isRecommended ? "default" : "pointer"};
-  color: ${(e) => e.isRecommended ? e.theme.colors.grey2 : e.theme.colors.hero};
-  ${ie.smallRegular.css};
-  text-align: left;
-  padding: ${n.sp0};
-  text-decoration: underline;
-  pointer-events: ${(e) => e.isRecommended ? "none" : "auto"};
-
-  &:hover {
-    color: ${(e) => e.isRecommended ? e.theme.colors.grey2 : e.theme.colors.primary};
-  }
-`, R = i.div`
-  display: flex;
-  align-items: center;
-  gap: ${(e) => d.sliderContainerGap.valuePx(e.windowSize)};
-  position: relative;
-  width: 240px;
-`, L = i.div`
-  color: ${(e) => e.theme.colors.primary};
-  text-align: center;
-  display: flex;
-  align-items: baseline;
-  justify-content: center;
-  width: ${n.sp7};
-
-  ${(e) => e.windowSize === "small" && `
-      width: auto;
-    `}
-`, C = i(ne)`
-  color: ${(e) => e.theme.colors.primary};
-`, P = i(W)`
-  color: ${(e) => e.theme.colors.primary};
-`, z = i(W)`
-  color: ${(e) => e.theme.colors.primary};
-`, B = i.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
-`, I = i.input`
-  width: ${({ windowSize: e }) => d.sliderWidth.valuePx(e)};
-  &[type="range"]::-webkit-slider-runnable-track {
-    height: 2px;
-    background-color: ${(e) => e.theme.colors.grey3};
-  }
-
-  &[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  &[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: ${(e) => e.isReadOnly === !0 ? n.sp0 : n.sp3};
-    height: ${(e) => e.isReadOnly === !0 ? n.sp0 : n.sp3};
-    border-radius: 50%;
-    background: ${(e) => e.theme.colors.grey5};
-    border: ${(e) => e.isReadOnly === !0 ? "none" : `2px solid ${y.success}`};
-    margin-top: -7px;
-    cursor: ${(e) => e.isReadOnly === !0 ? "default" : "pointer"};
-    opacity: ${(e) => e.isReadOnly === !0 ? "0" : "1"};
-  }
-
-  &::-moz-range-thumb {
-    width: ${(e) => e.isReadOnly === !0 ? n.sp0 : n.sp3};
-    height: ${(e) => e.isReadOnly === !0 ? n.sp0 : n.sp3};
-    border-radius: 50%;
-    background: ${(e) => e.theme.colors.grey5};
-    border: ${(e) => e.isReadOnly === !0 ? "none" : `2px solid ${y.success}`};
-    margin-top: -7px;
-    cursor: ${(e) => e.isReadOnly === !0 ? "default" : "pointer"};
-    opacity: ${(e) => e.isReadOnly === !0 ? "0" : "1"};
-  }
-`, T = i.div`
-  position: absolute;
-  height: 2px;
-  background-color: ${y.success};
-`, Le = i.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: ${n.sp3};
-`, Ce = i.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  width: auto;
-  padding-right: ${n.sp0};
-  box-sizing: border-box;
-`, Pe = i.div`
-  display: flex;
-  flex-direction: column;
-  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "flex-end"};
-  width: 129px;
-  padding-right: ${(e) => d.riskLevelInfoPaddingRight.valuePx(e.windowSize)};
-  box-sizing: border-box;
-`, A = i(oe)`
-  color: ${(e) => e.theme.colors.hero};
-  text-align: right;
-`, D = i(re)`
-  color: ${(e) => e.theme.colors.hero};
-  text-align: right;
-`;
-export {
-  De as default
-};