@zeniai/web-components 3.16.99 → 3.17.2

package/dist/ZeniDatePicker-DPVT4-Kb.js

@@ -1,386 +0,0 @@
-import { j as o, C as A, a8 as F } from "./vendor-.pnpm-B2klaOGU.js";
-import { useState as z } from "react";
-import t from "@emotion/styled";
-import { zeniDate as g, getBusinessDayOfDate as M } from "@zeniai/client-epic-state";
-import { E as _, a as i, n as P, y as H, S as r, ax as B, fY as I, o as C, aL as W, t as v, F as T, p as E, G as Y, O as V } from "./index-CD9fwr4J.js";
-import { a as Z } from "./zeniDatePicker.helpers-vuXDt4_S.js";
-const G = t(I)`
-  border: none;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: 105px;
-  text-align: start;
-  padding: 0;
-  cursor: pointer;
-`, N = t.div`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.theme.colors.grey1};
-  fill: ${(e) => e.theme.colors.grey1};
-`, q = t.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${r.sp2};
-`, J = t(C)`
-  display: flex;
-  align-items: center;
-`, D = t.div`
-  display: flex;
-  align-items: center;
-  column-gap: ${r.sp1};
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, L = t(B)`
-  width: 12px;
-  height: 12px;
-`, K = ({
-  datePickerOpen: e,
-  showBusinessDay: f,
-  selectedDate: x,
-  placeHolder: S,
-  style: b,
-  inputStyles: { titleTextComponent: k } = {},
-  dateFormat: $,
-  value: m,
-  precomputedOptionsProperties: s,
-  onDatePickerToggle: u,
-  onClick: d
-}) => {
-  if (s != null) {
-    const {
-      preComputedOptionSelected: h,
-      preComputedOptions: n,
-      preComputedOptionDateFormat: l
-    } = s, y = n.find(
-      (c) => c.value === h
-    );
-    if (y != null)
-      return /* @__PURE__ */ o.jsxs(
-        D,
-        {
-          onClick: (c) => {
-            c.preventDefault(), d?.(), u(!e);
-          },
-          children: [
-            /* @__PURE__ */ o.jsx(_, { children: `${i.getLocalizedStrings().common.asOf} ${y.label}` }),
-            /* @__PURE__ */ o.jsx(L, {})
-          ]
-        }
-      );
-    const {
-      visual: { DMMMYYFormat: j }
-    } = i.getLocalizedStrings().dateFormat;
-    return /* @__PURE__ */ o.jsxs(
-      D,
-      {
-        onClick: (c) => {
-          c.preventDefault(), d?.(), u(!e);
-        },
-        children: [
-          /* @__PURE__ */ o.jsx(_, { children: `${i.getLocalizedStrings().common.asOf} ${x?.date.format(
-            l ?? j
-          )}` }),
-          /* @__PURE__ */ o.jsx(L, {})
-        ]
-      }
-    );
-  }
-  const p = k ?? P;
-  return /* @__PURE__ */ o.jsx(
-    G,
-    {
-      onClick: (h) => {
-        h.preventDefault(), d?.(), u(!e);
-      },
-      style: b,
-      children: m ? /* @__PURE__ */ o.jsx(p, { children: f === !0 ? `${i.getLocalizedStrings().common.datePicker.businessDay} ${x?.businessDay ?? ""}: ${g(
-        m
-      ).format($)}` : g(m).format($) }) : S ?? /* @__PURE__ */ o.jsxs(N, { children: [
-        /* @__PURE__ */ o.jsx(q, { children: /* @__PURE__ */ o.jsx(H, { width: r.sp3, height: r.sp3 }) }),
-        /* @__PURE__ */ o.jsx(J, { children: i.getLocalizedStrings().cockpit.management.placeholder.reportSent })
-      ] })
-    }
-  );
-}, Q = t.div`
-  display: flex;
-  flex-direction: column;
-`, U = t.div`
-  margin: ${r.sp1} 12px ${r.sp1} ${r.sp1};
-  display: flex;
-  justify-content: space-between;
-`, X = t(E)`
-  width: 12px;
-  height: 12px;
-`, ee = t(C)`
-  display: flex;
-  justify-content: center;
-  color: currentColor;
-  .react-datepicker-wrapper {
-    width: unset;
-  }
-  .react-datepicker-popper {
-    z-index: 2;
-    border-radius: ${r.sp1};
-    &[data-placement^="bottom"] {
-      padding-top: 6px;
-    }
-  }
-  .react-datepicker {
-    border-radius: ${r.sp1};
-    box-shadow: ${(e) => `${r.sp0} 2px ${r.sp2} ${e.theme.colors.dropShadowHover}`};
-    border: 1px solid ${(e) => e.theme.colors.grey5};
-    display: flex;
-    flex-direction: column;
-    > div {
-      display: flex;
-    }
-  }
-  .react-datepicker__input-container {
-    height: ${r.sp4};
-    display: flex;
-    align-content: center;
-    align-items: center;
-    > button {
-      padding: ${r.sp0};
-      color: currentColor;
-      background-color: ${(e) => e.theme.colors.grey5};
-      ${v.extraSmallRegular.css};
-      border: none;
-      outline: none;
-      ::placeholder {
-      }
-    }
-  }
-  .react-datepicker__month-container {
-    background-color: ${(e) => e.theme.colors.grey5};
-    display: flex;
-    flex-direction: column;
-  }
-  .react-datepicker__header {
-    border: none;
-    background-color: ${(e) => e.theme.colors.grey5};
-    padding: ${r.sp1} ${r.sp0} ${r.sp0} ${r.sp0};
-  }
-  .react-datepicker__day-names {
-    margin: ${r.sp0};
-    display: flex;
-    justify-content: center;
-  }
-  .react-datepicker__day-name {
-    color: ${(e) => e.theme.colors.hero};
-    ${v.smallRegular.css};
-    width: ${r.sp5};
-    padding: 5px 0;
-    margin: 0 1px;
-  }
-  .react-datepicker__month {
-    color: ${(e) => e.theme.colors.hero};
-    padding: ${r.sp1} ${r.sp2} ${r.sp2} ${r.sp2};
-    margin: ${r.sp0};
-  }
-  .react-datepicker__week {
-    display: flex;
-  }
-  .react-datepicker__day {
-    ${v.smallRegular.css};
-    color: ${(e) => e.theme.colors.hero};
-    width: ${r.sp5};
-    padding: 5px 0;
-    margin: 0 1px;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    background-color: unset;
-
-    &:hover {
-      background-color: ${(e) => e.theme.colors.primary};
-      color: ${(e) => e.theme.colors.grey5};
-    }
-  }
-  .react-datepicker__day--selected {
-    background-color: ${(e) => e.theme.colors.primary};
-    color: ${(e) => e.theme.colors.grey5};
-    display: flex;
-    justify-content: center;
-  }
-  .react-datepicker__day--disabled {
-    cursor: auto;
-    color: ${(e) => e.theme.colors.grey3};
-    &:hover {
-      color: ${(e) => e.theme.colors.grey3};
-      background-color: transparent;
-    }
-  }
-  .react-datepicker__day--outside-month {
-    visibility: hidden;
-  }
-`, O = t.button`
-  border: none;
-  background-color: ${(e) => e.theme.colors.grey5};
-  color: ${(e) => e.theme.colors.champion};
-  height: ${r.sp4};
-  width: ${r.sp4};
-  cursor: pointer;
-  :not(:disabled) {
-    :hover {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-  &:disabled {
-    cursor: auto;
-    color: ${(e) => e.theme.colors.grey3};
-  }
-`, re = t(C)`
-  color: ${(e) => e.theme.colors.primary};
-`, oe = t.div`
-  display: flex;
-  flex-direction: column;
-  padding-bottom: ${r.sp1};
-  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
-  margin-bottom: 12px;
-`, te = t.div`
-  display: flex;
-  justify-content: space-between;
-  padding: ${r.sp2};
-  align-items: center;
-  cursor: pointer;
-  background: ${(e) => e.isSelected ? e.theme.colors.background : "unset"};
-  &:hover {
-    background: ${(e) => e.theme.colors.background};
-  }
-`, ae = t(T)`
-  color: ${(e) => e.theme.colors.hero};
-`, se = i.getLocalizedStrings().dateFormat.visual.DMMMFormat, he = ({
-  selectedDate: e,
-  showBusinessDay: f = !1,
-  maxDate: x,
-  minDate: S,
-  dateFormat: b = se,
-  style: k,
-  inputStyles: $,
-  placeHolder: m,
-  precomputedOptionsProperties: s,
-  onSelectedDateChanged: u
-}) => {
-  const [d, p] = z(!1), h = i.getLocalizedStrings().dateFormat.visual.MMMformat;
-  return /* @__PURE__ */ o.jsx(
-    A,
-    {
-      onClickAway: () => {
-        p(!1);
-      },
-      children: /* @__PURE__ */ o.jsx(ee, { children: /* @__PURE__ */ o.jsx(
-        F,
-        {
-          open: d,
-          selected: e?.date?.toDate(),
-          maxDate: x?.toDate(),
-          minDate: S?.toDate(),
-          onSelect: (n, l) => {
-            l?.stopPropagation(), p(!1);
-          },
-          onChange: (n) => {
-            if (n != null) {
-              const l = g(n.toISOString());
-              u(
-                l,
-                M(l)
-              );
-            }
-          },
-          customInput: /* @__PURE__ */ o.jsx(
-            K,
-            {
-              datePickerOpen: d,
-              showBusinessDay: f,
-              onDatePickerToggle: p,
-              placeHolder: m,
-              selectedDate: e,
-              dateFormat: b,
-              style: k,
-              precomputedOptionsProperties: s,
-              inputStyles: $
-            }
-          ),
-          renderCustomHeader: ({
-            date: n,
-            decreaseMonth: l,
-            increaseMonth: y,
-            prevMonthButtonDisabled: j,
-            nextMonthButtonDisabled: c
-          }) => /* @__PURE__ */ o.jsxs(Q, { children: [
-            s != null ? /* @__PURE__ */ o.jsx(oe, { children: s.preComputedOptions.map(
-              (a) => {
-                const w = s.preComputedOptionSelected === a.value, R = Z(
-                  a.value
-                );
-                return /* @__PURE__ */ o.jsxs(
-                  te,
-                  {
-                    onClick: () => {
-                      p(!1), s.onPreComputedOptionSelected(
-                        R,
-                        a.value
-                      );
-                    },
-                    isSelected: w,
-                    children: [
-                      /* @__PURE__ */ o.jsx(ae, { children: a.label }),
-                      /* @__PURE__ */ o.jsx(
-                        W,
-                        {
-                          controller: w === !0,
-                          children: /* @__PURE__ */ o.jsx(X, {})
-                        }
-                      )
-                    ]
-                  },
-                  a.value
-                );
-              }
-            ) }) : null,
-            /* @__PURE__ */ o.jsxs(U, { children: [
-              /* @__PURE__ */ o.jsx(
-                O,
-                {
-                  onClick: (a) => {
-                    a.preventDefault(), l();
-                  },
-                  disabled: j,
-                  children: /* @__PURE__ */ o.jsx(ne, {})
-                }
-              ),
-              /* @__PURE__ */ o.jsx(re, { children: `${g(n.toISOString()).format(
-                h
-              )} ${g(
-                n.toISOString()
-              ).year()}` }),
-              /* @__PURE__ */ o.jsx(
-                O,
-                {
-                  onClick: (a) => {
-                    a.preventDefault(), y();
-                  },
-                  disabled: c,
-                  children: /* @__PURE__ */ o.jsx(le, {})
-                }
-              )
-            ] })
-          ] }),
-          showPopperArrow: !1
-        }
-      ) })
-    }
-  );
-}, ne = t(Y)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`, le = t(V)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`;
-export {
-  he as Z
-};

package/dist/ZeniTransferAmountSlider-BoCJ1mQO.cjs

@@ -1,63 +0,0 @@
-"use strict";const h=require("./vendor-.pnpm-D0ILHvHB.cjs"),S=require("react"),f=require("@emotion/styled"),o=require("./index-CZKgJQb3.cjs"),T=o.appLocale.getLocalizedStrings().spendManagement.zeniAccounts.zeniAccountList;function q({zeniAccountsConfigDetail:r,transferAmount:$,minStep:m,currentAccountBalance:A,setYieldEarned:d,setTotalBalance:y}){const[l,k]=S.useState(0),{depositProductConfig:b}=r.zeniAccountsConfigDetail,c=S.useMemo(()=>b?.depositProducts!=null?b?.depositProducts.map(e=>e.annualPercentageYield):[],[b?.depositProducts]),s=S.useMemo(()=>b?.depositProducts!=null?b?.depositProducts.map(e=>{const[t,n]=e.range;return n==null&&t!=null?t+25e5:n??0}):[],[b?.depositProducts]),F=e=>{const t=parseFloat(e.target.value),{returnedYield:n,totalAmount:u}=C(t);k(t),d(n),y(u)},I=e=>`${j(e)}${T.transferDrawer.calculator.sliderTooltipText}`,j=e=>e===0?c[0]:e>0&&e<1?c[1]:e>=1&&e<2?c[2]:e>=2&&e<3?c[3]:(e>=3&&e<4,c[4]),C=e=>{const t=j(e),[n,u]=e.toLocaleString().split(".",2).map(i=>parseInt(i));if(e>=0&&e<1){const i=(s[1]-s[0])*m,a=s[n]+i*(u??0);return{returnedYield:x(a,t),totalAmount:a}}else if(e>=1&&e<2){const i=(s[2]-s[1])*m,a=s[n]+i*(u??0);return{returnedYield:x(a,t),totalAmount:a}}else if(e>=2&&e<3){const i=(s[3]-s[2])*m,a=s[n]+i*(u??0);return{returnedYield:x(a,t),totalAmount:a}}else if(e>=3&&e<4){const i=(s[4]-s[3])*m,a=s[n]+i*(u??0);return{returnedYield:x(a,t),totalAmount:a}}else return{returnedYield:x(5e6,t),totalAmount:5e6}},L=e=>{const{returnedYield:t,totalAmount:n}=C(e);k(e),y(n),d(t)},R=S.useCallback((e,t,n,u)=>{let i=0,g=0,a=0,w=0;if(e<n[0])i=t[0];else{for(let p=0;p<n.length-1;p++)if(e>=n[p]&&e<n[p+1]){i=t[p+1],g=(n[p+1]-n[p])*u,a=e-n[p],w=a/g*u+p;break}e>=n[n.length-1]&&(i=t[t.length-1],w=n.length-1)}k(w),d(x(e,i))},[d]);return S.useEffect(()=>{const e=$+A;y(e),R(e,c,s,m)},[$,A,y,c,m,d,s,R]),h.jsxRuntimeExports.jsxs(z,{sliderValue:l,children:[h.jsxRuntimeExports.jsx(D,{sliderValue:l,type:"range",min:0,max:c.length-1,step:m,value:l,onChange:F}),h.jsxRuntimeExports.jsx(E,{style:{width:`calc(${l/(c.length-1)*100}% - ${l*7.5}px)`}}),h.jsxRuntimeExports.jsx(_,{sliderValue:l,style:{left:`calc(${l/(c.length-1)*100}% - ${l*10+20}px)`},children:I(l)}),h.jsxRuntimeExports.jsx(Y,{children:s.map((e,t)=>h.jsxRuntimeExports.jsx(N,{onClick:()=>L(t),"data-testid":o.generateDataTestId("slider-label",e.toString()),style:{left:M(t)},children:h.jsxRuntimeExports.jsx(Z,{isSelected:l>=t,children:P(e)})},t))})]})}const x=(r,$)=>{const A=$/100,d=r*Math.pow(1+A/12,12);return Math.floor(d-r)},M=r=>{switch(r){case 0:return"3%";case 1:return"28%";case 2:return"50.2%";case 3:return"74.5%";case 4:return"98%";default:return"100%"}},P=r=>r===25e4?`<${Intl.NumberFormat("en",{notation:"compact"}).format(r)}`:r===5e6?T.transferDrawer.calculator.greaterThanTwoAndHalfMillion:Intl.NumberFormat("en",{notation:"compact"}).format(r),D=f.input`
-  width: 100%;
-  &[type="range"]::-webkit-slider-runnable-track {
-    height: 2px;
-    cursor: pointer;
-    background-color: ${r=>r.theme.colors.grey3};
-  }
-
-  &[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  &[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    height: ${o.Space.sp5};
-    width: ${o.Space.sp5};
-    border-radius: 100%;
-    margin-top: -${o.Space.sp3}; // Centers thumb on the track
-    box-shadow: ${o.Space.sp0} ${o.Space.sp0} 2px ${o.Colors.blackColor};
-    background-image: ${r=>`url(https://storage.googleapis.com/zeni-apis.appspot.com/images/slider-icon-${r.theme.mode==="dark"?"light":"dark"}.svg)`};
-    background-repeat: no-repeat;
-    cursor: pointer;
-  }
-`,z=f.div`
-  position: relative;
-  width: 70%;
-  margin-left: 30px;
-  margin-right: 30px;
-  margin-bottom: 20px;
-  margin-top: ${o.Space.sp5};
-  min-height: ${o.Space.sp8};
-`,E=f.div`
-  position: absolute;
-  height: 2px;
-  margin-top: -${o.Space.sp2};
-  background-color: ${r=>r.theme.colors.hero};
-`,Y=f.div`
-  position: absolute;
-  bottom: 0;
-  top: ${o.Space.sp5};
-  width: 100%;
-  display: flex;
-  justify-content: center;
-`,N=f.span`
-  position: absolute;
-  cursor: pointer;
-  transform: translateX(-50%);
-`,Z=f(o.SmallRegular)`
-  color: ${r=>r.isSelected?r.theme.colors.primary:r.theme.colors.grey1};
-  white-space: nowrap;
-`,_=f(o.SmallRegular)`
-  position: absolute;
-  top: -${o.Space.sp5};
-  white-space: nowrap;
-  color: ${o.Colors.primaryDark};
-  background-color: ${o.Colors.success};
-  display: flex;
-  border-radius: ${o.Space.sp1};
-  justify-content: center;
-  align-items: center;
-  padding: 2px ${o.Space.sp2};
-`;exports.ZeniTransferAmountSlider=q;

package/dist/ZeniTransferAmountSlider-D8XPdsrA.js

@@ -1,215 +0,0 @@
-import { j as h } from "./vendor-.pnpm-B2klaOGU.js";
-import { useState as R, useMemo as T, useCallback as z, useEffect as Y } from "react";
-import f from "@emotion/styled";
-import { e as q, a as N, S as i, C as w, F as I } from "./index-CD9fwr4J.js";
-const L = N.getLocalizedStrings().spendManagement.zeniAccounts.zeniAccountList;
-function v({
-  zeniAccountsConfigDetail: r,
-  transferAmount: x,
-  minStep: m,
-  currentAccountBalance: S,
-  setYieldEarned: d,
-  setTotalBalance: y
-}) {
-  const [l, A] = R(0), { depositProductConfig: b } = r.zeniAccountsConfigDetail, c = T(() => b?.depositProducts != null ? b?.depositProducts.map(
-    (t) => t.annualPercentageYield
-  ) : [], [b?.depositProducts]), o = T(() => b?.depositProducts != null ? b?.depositProducts.map((t) => {
-    const [e, n] = t.range;
-    return n == null && e != null ? e + 25e5 : n ?? 0;
-  }) : [], [b?.depositProducts]), P = (t) => {
-    const e = parseFloat(t.target.value), { returnedYield: n, totalAmount: u } = j(e);
-    A(e), d(n), y(u);
-  }, D = (t) => `${C(t)}${L.transferDrawer.calculator.sliderTooltipText}`, C = (t) => t === 0 ? c[0] : t > 0 && t < 1 ? c[1] : t >= 1 && t < 2 ? c[2] : t >= 2 && t < 3 ? c[3] : (t >= 3 && t < 4, c[4]), j = (t) => {
-    const e = C(t), [n, u] = t.toLocaleString().split(".", 2).map((s) => parseInt(s));
-    if (t >= 0 && t < 1) {
-      const s = (o[1] - o[0]) * m, a = o[n] + s * (u ?? 0);
-      return {
-        returnedYield: $(a, e),
-        totalAmount: a
-      };
-    } else if (t >= 1 && t < 2) {
-      const s = (o[2] - o[1]) * m, a = o[n] + s * (u ?? 0);
-      return {
-        returnedYield: $(a, e),
-        totalAmount: a
-      };
-    } else if (t >= 2 && t < 3) {
-      const s = (o[3] - o[2]) * m, a = o[n] + s * (u ?? 0);
-      return {
-        returnedYield: $(a, e),
-        totalAmount: a
-      };
-    } else if (t >= 3 && t < 4) {
-      const s = (o[4] - o[3]) * m, a = o[n] + s * (u ?? 0);
-      return {
-        returnedYield: $(a, e),
-        totalAmount: a
-      };
-    } else
-      return {
-        returnedYield: $(
-          5e6,
-          e
-        ),
-        totalAmount: 5e6
-      };
-  }, M = (t) => {
-    const { returnedYield: e, totalAmount: n } = j(t);
-    A(t), y(n), d(e);
-  }, F = z(
-    (t, e, n, u) => {
-      let s = 0, g = 0, a = 0, k = 0;
-      if (t < n[0])
-        s = e[0];
-      else {
-        for (let p = 0; p < n.length - 1; p++)
-          if (t >= n[p] && t < n[p + 1]) {
-            s = e[p + 1], g = (n[p + 1] - n[p]) * u, a = t - n[p], k = a / g * u + p;
-            break;
-          }
-        t >= n[n.length - 1] && (s = e[e.length - 1], k = n.length - 1);
-      }
-      A(k), d($(t, s));
-    },
-    [d]
-  );
-  return Y(() => {
-    const t = x + S;
-    y(t), F(t, c, o, m);
-  }, [
-    x,
-    S,
-    y,
-    c,
-    m,
-    d,
-    o,
-    F
-  ]), /* @__PURE__ */ h.jsxs(X, { sliderValue: l, children: [
-    /* @__PURE__ */ h.jsx(
-      O,
-      {
-        sliderValue: l,
-        type: "range",
-        min: 0,
-        max: c.length - 1,
-        step: m,
-        value: l,
-        onChange: P
-      }
-    ),
-    /* @__PURE__ */ h.jsx(
-      G,
-      {
-        style: {
-          width: `calc(${l / (c.length - 1) * 100}% - ${l * 7.5}px)`
-        }
-      }
-    ),
-    /* @__PURE__ */ h.jsx(
-      U,
-      {
-        sliderValue: l,
-        style: {
-          left: `calc(${l / (c.length - 1) * 100}% - ${l * 10 + 20}px)`
-          // Position based on slider value
-        },
-        children: D(l)
-      }
-    ),
-    /* @__PURE__ */ h.jsx(J, { children: o.map((t, e) => /* @__PURE__ */ h.jsx(
-      K,
-      {
-        onClick: () => M(e),
-        "data-testid": q("slider-label", t.toString()),
-        style: { left: Z(e) },
-        children: /* @__PURE__ */ h.jsx(Q, { isSelected: l >= e, children: H(t) })
-      },
-      e
-    )) })
-  ] });
-}
-const $ = (r, x) => {
-  const S = x / 100, d = r * Math.pow(1 + S / 12, 12);
-  return Math.floor(d - r);
-}, Z = (r) => {
-  switch (r) {
-    case 0:
-      return "3%";
-    case 1:
-      return "28%";
-    case 2:
-      return "50.2%";
-    case 3:
-      return "74.5%";
-    case 4:
-      return "98%";
-    default:
-      return "100%";
-  }
-}, H = (r) => r === 25e4 ? `<${Intl.NumberFormat("en", { notation: "compact" }).format(r)}` : r === 5e6 ? L.transferDrawer.calculator.greaterThanTwoAndHalfMillion : Intl.NumberFormat("en", { notation: "compact" }).format(r), O = f.input`
-  width: 100%;
-  &[type="range"]::-webkit-slider-runnable-track {
-    height: 2px;
-    cursor: pointer;
-    background-color: ${(r) => r.theme.colors.grey3};
-  }
-
-  &[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  &[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    height: ${i.sp5};
-    width: ${i.sp5};
-    border-radius: 100%;
-    margin-top: -${i.sp3}; // Centers thumb on the track
-    box-shadow: ${i.sp0} ${i.sp0} 2px ${w.blackColor};
-    background-image: ${(r) => `url(https://storage.googleapis.com/zeni-apis.appspot.com/images/slider-icon-${r.theme.mode === "dark" ? "light" : "dark"}.svg)`};
-    background-repeat: no-repeat;
-    cursor: pointer;
-  }
-`, X = f.div`
-  position: relative;
-  width: 70%;
-  margin-left: 30px;
-  margin-right: 30px;
-  margin-bottom: 20px;
-  margin-top: ${i.sp5};
-  min-height: ${i.sp8};
-`, G = f.div`
-  position: absolute;
-  height: 2px;
-  margin-top: -${i.sp2};
-  background-color: ${(r) => r.theme.colors.hero};
-`, J = f.div`
-  position: absolute;
-  bottom: 0;
-  top: ${i.sp5};
-  width: 100%;
-  display: flex;
-  justify-content: center;
-`, K = f.span`
-  position: absolute;
-  cursor: pointer;
-  transform: translateX(-50%);
-`, Q = f(I)`
-  color: ${(r) => r.isSelected ? r.theme.colors.primary : r.theme.colors.grey1};
-  white-space: nowrap;
-`, U = f(I)`
-  position: absolute;
-  top: -${i.sp5};
-  white-space: nowrap;
-  color: ${w.primaryDark};
-  background-color: ${w.success};
-  display: flex;
-  border-radius: ${i.sp1};
-  justify-content: center;
-  align-items: center;
-  padding: 2px ${i.sp2};
-`;
-export {
-  v as Z
-};