@zeniai/web-components 3.16.42 → 3.16.44

package/dist/PortfolioAllocationFormPage-DDlpEiGN.cjs

@@ -0,0 +1,207 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./vendor-.pnpm-DHyNpoQL.cjs"),S=require("react"),s=require("@emotion/styled"),t=require("./index-DccWx-ku.cjs"),O=require("./PortfolioDetails-CAAqNSOZ.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-K3oukUP6.js

@@ -0,0 +1,440 @@
+import { k as S, j as t } from "./vendor-.pnpm-BZbZ6JJC.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-oyJQP6ol.js";
+import { P as le } from "./PortfolioDetails-DZt--a7R.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
+};