@zeniai/web-components 3.16.29 → 3.16.31

package/dist/PortfolioAllocationFormPage-BaGF99TU.cjs

@@ -1,207 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./vendor-.pnpm-B6vI-hvj.cjs"),S=require("react"),s=require("@emotion/styled"),t=require("./index-jJbUoV8Z.cjs"),N=require("./PortfolioDetails-CSuozFFG.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])},O={stepTitle:new t.ResponsiveSizedStyle("h6Regular","h5Regular")},F=({onBackClick:e,onNextClick:m,onUpdateFundAllocation:x,treasurySetupView:I,isReadOnly:c,isEditMode:d,isOnSetup:R=!1})=>{const o=t.useWindowSizeContext(),[T,A]=S.useState(!1),{fundsData:D,fundAllocationOptions:r,fundAllocationLocalData:l,currentAllocation:h,portfolioAllocationUpdateStatus:W}=I;S.useEffect(()=>{if(d&&h!==null){const n=!i.isEqual(l.allocation,h);A(n)}},[d,h,l]);const j=n=>{const g=r.find(H=>H.optionIndex===n);g&&x(g)},f=()=>{j(r.findIndex(n=>n.riskScore===0||n.riskLevel==="Conservative"))},q=()=>{let n;h!=null&&(n=r.find(g=>i.isEqual(g.allocation,h))),n!=null?x(n):f()},v=()=>{d&&q(),e()};return i.jsxRuntimeExports.jsxs(_,{children:[i.jsxRuntimeExports.jsxs(V,{windowSize:o,children:[i.jsxRuntimeExports.jsx(J,{windowSize:o,children:i.jsxRuntimeExports.jsx(t.Tooltip,{title:u.navBar.back,enterTouchDelay:600,placement:"bottom",children:i.jsxRuntimeExports.jsx(K,{"data-testid":t.generateDataTestId("nav-bar-back-portfolio-allocation"),onClick:v})})}),i.jsxRuntimeExports.jsxs(Q,{windowSize:o,children:[i.jsxRuntimeExports.jsxs(U,{windowSize:o,children:[i.jsxRuntimeExports.jsx(X,{windowSize:o,children:G(c,R,d)}),!c&&!d&&i.jsxRuntimeExports.jsx(Z,{children:i.jsxRuntimeExports.jsxs(M,{children:[i.jsxRuntimeExports.jsx(ee,{}),i.jsxRuntimeExports.jsx($,{}),i.jsxRuntimeExports.jsx($,{})]})})]}),i.jsxRuntimeExports.jsx(te,{isReadOnly:c,children:Y(c,R,d)}),i.jsxRuntimeExports.jsx(ie,{children:i.jsxRuntimeExports.jsxs(se,{windowSize:o,children:[i.jsxRuntimeExports.jsx(ne,{children:i.jsxRuntimeExports.jsx(N.PortfolioAllocationDetails,{isInReview:!1,isSetup:!0,fundDetails:D,allocation:l,page:R?"setup portfolio":"edit portfolio"})}),i.jsxRuntimeExports.jsxs(oe,{windowSize:o,children:[i.jsxRuntimeExports.jsx(re,{children:i.jsxRuntimeExports.jsx(le,{onClick:f,isRecommended:c||l.riskScore===0||l.riskLevel==="Conservative",children:p.resetButton})}),o==="small"?i.jsxRuntimeExports.jsxs(ae,{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(ce,{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(de,{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&&W.fetchState==="In-Progress",isDisabled:d&&!T}})]})};function G(e,m,x){return e||m&&x?p.title:x?p.editTitle:p.stepTitle}function Y(e,m,x){return e||m&&x?p.subtextReadOnly:x?p.subtextEdit:p.subtextSetup}const _=s.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: ${e=>e.theme.colors.grey4};
-`,V=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;
-`,J=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;
-`,K=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};
-  }
-`,Q=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};
-  `}
-`,U=s.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${t.Space.sp3};
-  width: 100%;
-`,X=s(t.StyledText)`
-  ${e=>`${O.stepTitle.style(e.windowSize)}`};
-  color: ${e=>e.theme.colors.primary};
-  text-align: left;
-`,Z=s.div`
-  display: flex;
-  align-items: center;
-`,M=s.div`
-  display: flex;
-  width: 100%;
-  gap: ${t.Space.sp3};
-`,ee=s.div`
-  width: 33.33%;
-  height: 2px;
-  background-color: ${e=>e.theme.colors.primary};
-  border-radius: ${t.Space.sp2};
-`,$=s.div`
-  width: 33.33%;
-  height: 2px;
-  background-color: ${e=>e.theme.colors.grey2};
-  border-radius: ${t.Space.sp2};
-`,te=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"};
-`,ie=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;
-`,se=s.div`
-  padding: ${e=>a.cardPadding.valuePx(e.windowSize)};
-  display: flex;
-  flex-direction: column;
-`,ne=s.div`
-  display: flex;
-  flex-direction: column;
-`,oe=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;
-  `}
-`,re=s.div`
-  display: flex;
-  flex-direction: column;
-  width: 245px;
-`,le=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};
-`,ae=s.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: ${t.Space.sp3};
-`,ce=s.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  width: auto;
-  padding-right: ${t.Space.sp0};
-  box-sizing: border-box;
-`,de=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=F;

package/dist/PortfolioAllocationFormPage-CMApmVdM.js

@@ -1,439 +0,0 @@
-import { k as S, j as t } from "./vendor-.pnpm-DxbX2tX4.js";
-import { useState as K, useEffect as V } from "react";
-import i from "@emotion/styled";
-import { u as Z, Z as _, a as J, j as Q, R as h, ap as U, S as n, b as X, av as M, K as E, p as ee, D as o, t as te, L as ie, E as W, C as y, G as ne, _ as oe } from "./index-B1WDj5pO.js";
-import { P as re } from "./PortfolioDetails-I9sFjjUc.js";
-const {
-  spendManagement: {
-    treasury: { portfolioAllocation: x }
-  },
-  common: u
-} = J.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])
-}, le = {
-  stepTitle: new M("h6Regular", "h5Regular")
-}, Ae = ({
-  onBackClick: e,
-  onNextClick: m,
-  onUpdateFundAllocation: g,
-  treasurySetupView: H,
-  isReadOnly: c,
-  isEditMode: p,
-  isOnSetup: $ = !1
-}) => {
-  const l = Z(), [N, G] = K(!1), {
-    fundsData: F,
-    fundAllocationOptions: s,
-    fundAllocationLocalData: a,
-    currentAllocation: f,
-    portfolioAllocationUpdateStatus: O
-  } = H;
-  V(() => {
-    if (p && f !== null) {
-      const r = !S(
-        a.allocation,
-        f
-      );
-      G(r);
-    }
-  }, [p, f, a]);
-  const w = (r) => {
-    const v = s.find(
-      (q) => q.optionIndex === r
-    );
-    v && g(v);
-  }, b = () => {
-    w(
-      s.findIndex(
-        (r) => r.riskScore === 0 || r.riskLevel === "Conservative"
-      )
-    );
-  }, Y = () => {
-    let r;
-    f != null && (r = s.find(
-      (v) => S(v.allocation, f)
-    )), r != null ? g(r) : b();
-  }, k = () => {
-    p && Y(), e();
-  };
-  return /* @__PURE__ */ t.jsxs(de, { children: [
-    /* @__PURE__ */ t.jsxs(ce, { windowSize: l, children: [
-      /* @__PURE__ */ t.jsx(pe, { windowSize: l, children: /* @__PURE__ */ t.jsx(
-        _,
-        {
-          title: u.navBar.back,
-          enterTouchDelay: 600,
-          placement: "bottom",
-          children: /* @__PURE__ */ t.jsx(
-            he,
-            {
-              "data-testid": Q(
-                "nav-bar-back-portfolio-allocation"
-              ),
-              onClick: k
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ t.jsxs(xe, { windowSize: l, children: [
-        /* @__PURE__ */ t.jsxs(ge, { windowSize: l, children: [
-          /* @__PURE__ */ t.jsx(ue, { windowSize: l, children: se(c, $, p) }),
-          !c && !p && /* @__PURE__ */ t.jsx(me, { children: /* @__PURE__ */ t.jsxs(fe, { children: [
-            /* @__PURE__ */ t.jsx(ve, {}),
-            /* @__PURE__ */ t.jsx(j, {}),
-            /* @__PURE__ */ t.jsx(j, {})
-          ] }) })
-        ] }),
-        /* @__PURE__ */ t.jsx($e, { isReadOnly: c, children: ae(c, $, p) }),
-        /* @__PURE__ */ t.jsx(we, { children: /* @__PURE__ */ t.jsxs(ye, { windowSize: l, children: [
-          /* @__PURE__ */ t.jsx(be, { children: /* @__PURE__ */ t.jsx(
-            re,
-            {
-              isInReview: !1,
-              isSetup: !0,
-              fundDetails: F,
-              allocation: a,
-              page: $ ? "setup portfolio" : "edit portfolio"
-            }
-          ) }),
-          /* @__PURE__ */ t.jsxs(ke, { windowSize: l, children: [
-            /* @__PURE__ */ t.jsx(Se, { children: /* @__PURE__ */ t.jsx(
-              je,
-              {
-                onClick: b,
-                isRecommended: c || a.riskScore === 0 || a.riskLevel === "Conservative",
-                children: x.resetButton
-              }
-            ) }),
-            l === "small" ? /* @__PURE__ */ t.jsxs(Re, { 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(Le, { 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(Ce, { windowSize: l, children: [
-                /* @__PURE__ */ t.jsx(A, { children: x.riskLevelLabel }),
-                /* @__PURE__ */ t.jsx(D, { children: a.riskLevel })
-              ] })
-            ] })
-          ] })
-        ] }) })
-      ] })
-    ] }),
-    c ? null : /* @__PURE__ */ t.jsx(
-      U,
-      {
-        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 && O.fetchState === "In-Progress",
-          isDisabled: p && !N
-        }
-      }
-    )
-  ] });
-};
-function se(e, m, g) {
-  return e || m && g ? x.title : g ? x.editTitle : x.stepTitle;
-}
-function ae(e, m, g) {
-  return e || m && g ? x.subtextReadOnly : g ? x.subtextEdit : x.subtextSetup;
-}
-const de = i.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, ce = 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;
-`, pe = 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;
-`, he = i(X)`
-  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};
-  }
-`, xe = 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};
-  `}
-`, ge = i.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${n.sp3};
-  width: 100%;
-`, ue = i(E)`
-  ${(e) => `${le.stepTitle.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  text-align: left;
-`, me = i.div`
-  display: flex;
-  align-items: center;
-`, fe = i.div`
-  display: flex;
-  width: 100%;
-  gap: ${n.sp3};
-`, ve = i.div`
-  width: 33.33%;
-  height: 2px;
-  background-color: ${(e) => e.theme.colors.primary};
-  border-radius: ${n.sp2};
-`, j = i.div`
-  width: 33.33%;
-  height: 2px;
-  background-color: ${(e) => e.theme.colors.grey2};
-  border-radius: ${n.sp2};
-`, $e = i(ee)`
-  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"};
-`, we = 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;
-`, ye = i.div`
-  padding: ${(e) => d.cardPadding.valuePx(e.windowSize)};
-  display: flex;
-  flex-direction: column;
-`, be = i.div`
-  display: flex;
-  flex-direction: column;
-`, ke = i.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  ${(e) => e.windowSize === "small" && `
-    flex-direction: column;
-    gap: ${n.sp3};
-    align-items: stretch;
-  `}
-`, Se = i.div`
-  display: flex;
-  flex-direction: column;
-  width: 245px;
-`, je = i.button`
-  background: none;
-  border: none;
-  cursor: ${(e) => e.isRecommended ? "default" : "pointer"};
-  color: ${(e) => e.isRecommended ? e.theme.colors.grey2 : e.theme.colors.hero};
-  ${te.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(ie)`
-  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};
-`, Re = i.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: ${n.sp3};
-`, Le = i.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  width: auto;
-  padding-right: ${n.sp0};
-  box-sizing: border-box;
-`, Ce = 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(ne)`
-  color: ${(e) => e.theme.colors.hero};
-  text-align: right;
-`, D = i(oe)`
-  color: ${(e) => e.theme.colors.hero};
-  text-align: right;
-`;
-export {
-  Ae as default
-};