@zeniai/web-components 3.16.56 → 3.16.57

package/dist/CreditCardPaymentPlgSection-CiIFvksj.js

@@ -0,0 +1,196 @@
+import { u as z, j as o } from "./vendor-.pnpm-Q8NJHkXi.js";
+import t from "@emotion/styled";
+import { u as M, a as B, dK as T, ex as L, j as S, B as W, M as R, S as l, C as n, R as a, eN as D, _ as I, ba as G, G as H, D as i } from "./index-DIy5Kjs9.js";
+const r = {
+  iconContainerMaxWidthHeight: new a(i[6], i[7]),
+  iconContainerMarginRight: new a(i[3], i[3]),
+  iconWidthHeight: new a(20, i[4]),
+  iconPadding: new a(10, 12),
+  containerPaddingTopBottom: new a(i[4], i[4]),
+  containerPaddingLeftRight: new a(i[3], i[4]),
+  buttonLeftMargin: new a(i[8], i[0]),
+  buttonTopMargin: new a(i[4], i[2]),
+  bulletContainerGap: new a(12, i[3])
+};
+function Y({
+  heading: e,
+  buttonText: c,
+  analytics: g,
+  maxInsuredAmount: w,
+  pageName: h,
+  style: x,
+  onSignUpClick: b,
+  onSwitchClick: C,
+  onMoveMoneyClick: f
+}) {
+  const s = M(), y = z(), { common: $, commonSetUp: v } = B.getLocalizedStrings(), d = v.setUp.accountsPlg, P = () => {
+    switch (c) {
+      case d.signUpButtonText:
+        g?.trackPlgPromoClicked(h, "Sign Up for Free"), b?.();
+        break;
+      case d.switchButtonText:
+        g?.trackPlgPromoClicked(h, "Switch Now"), C?.();
+        break;
+      default:
+        g?.trackPlgPromoClicked(h, "Move Money"), f?.();
+    }
+  }, k = T(
+    L(w),
+    w,
+    $.currency.currencySymbol
+  ).toUpperCase();
+  return /* @__PURE__ */ o.jsxs(
+    K,
+    {
+      windowSize: s,
+      width: x?.width,
+      style: x,
+      "data-testid": S("credit-card-payment-plg-section"),
+      children: [
+        /* @__PURE__ */ o.jsxs(U, { children: [
+          /* @__PURE__ */ o.jsx(
+            A,
+            {
+              windowSize: s,
+              isDarkMode: y.mode === "dark",
+              children: /* @__PURE__ */ o.jsx(E, { windowSize: s, children: /* @__PURE__ */ o.jsx(J, {}) })
+            }
+          ),
+          /* @__PURE__ */ o.jsx(O, { children: /* @__PURE__ */ o.jsxs(V, { children: [
+            /* @__PURE__ */ o.jsx(_, { windowSize: s, children: e }),
+            /* @__PURE__ */ o.jsxs(q, { windowSize: s, children: [
+              /* @__PURE__ */ o.jsxs(u, { children: [
+                /* @__PURE__ */ o.jsx(p, {}),
+                /* @__PURE__ */ o.jsx(m, { children: d.bulletPoints.two.replace(
+                  "__amount__",
+                  k
+                ) })
+              ] }),
+              /* @__PURE__ */ o.jsxs(u, { children: [
+                /* @__PURE__ */ o.jsx(p, {}),
+                /* @__PURE__ */ o.jsx(m, { children: d.bulletPoints.three })
+              ] }),
+              /* @__PURE__ */ o.jsxs(u, { children: [
+                /* @__PURE__ */ o.jsx(p, {}),
+                /* @__PURE__ */ o.jsx(m, { children: d.bulletPoints.four })
+              ] })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ o.jsx(F, { windowSize: s, children: /* @__PURE__ */ o.jsx(
+          W,
+          {
+            label: c,
+            "data-testid": S("accounts-plg-button", c),
+            onClick: (j) => {
+              j.stopPropagation(), P();
+            },
+            buttonColors: {
+              borderColor: {
+                default: n.brandColorSapphire,
+                hover: n.brandColorSapphire,
+                disabled: n.brandColorSapphire
+              },
+              backgroundColor: {
+                default: n.brandColorSapphire,
+                hover: n.brandColorSapphire,
+                disabled: n.brandColorSapphire
+              },
+              textColor: {
+                default: n.neutralGrey5Light,
+                hover: n.neutralGrey5Light,
+                disabled: n.neutralGrey5Light
+              }
+            },
+            size: "small",
+            style: { padding: `6px ${l.sp3}`, borderRadius: "6px" },
+            textStyle: { fontWeight: R.regular }
+          }
+        ) })
+      ]
+    }
+  );
+}
+const U = t.div`
+  display: flex;
+  align-items: center;
+`, _ = t(I)`
+  color: ${(e) => e.theme.colors.primary};
+  width: 100%;
+`, F = t.div`
+  display: flex;
+  color: inherit;
+  margin-bottom: auto;
+  margin-left: ${(e) => r.buttonLeftMargin.valuePx(e.windowSize)};
+  margin-top: ${(e) => r.buttonTopMargin.valuePx(e.windowSize)};
+`, E = t.div`
+  width: ${(e) => r.iconWidthHeight.valuePx(e.windowSize)};
+  height: ${(e) => r.iconWidthHeight.valuePx(e.windowSize)};
+`, J = t(D)`
+  color: ${(e) => e.theme.colors.primary};
+  width: inherit;
+  height: inherit;
+`, A = t.div`
+  display: flex;
+  margin-bottom: auto;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: ${(e) => e.windowSize === "small" ? "flex-start" : "unset"};
+  padding: ${(e) => r.iconPadding.valuePx(e.windowSize)};
+  background: ${(e) => e.isDarkMode ? e.theme.colors.brandColorJadeDark : e.theme.colors.brandColorJadeLight};
+  border-radius: ${l.sp11};
+  color: ${(e) => e.isDarkMode ? n.neutralGrey5Light : e.theme.colors.brandColorOnyx};
+  max-width: ${(e) => r.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
+  max-height: ${(e) => r.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
+  margin-right: ${(e) => r.iconContainerMarginRight.valuePx(e.windowSize)};
+`, K = t.div`
+  display: flex;
+  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  padding: ${(e) => `${r.containerPaddingTopBottom.valuePx(
+  e.windowSize
+)} ${r.containerPaddingLeftRight.valuePx(e.windowSize)}`};
+  background-color: ${(e) => e.theme.colors.grey5};
+  fill: ${(e) => e.theme.colors.grey1};
+  color: ${(e) => e.theme.colors.grey1};
+  justify-content: space-between;
+  box-sizing: border-box;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    fill: ${(e) => e.theme.colors.primary};
+  }
+  background-color: ${(e) => e.theme.colors.grey3};
+  background-image:
+    url(https://storage.googleapis.com/zeni-apis.appspot.com/images/cards-plg-background-lower.svg),
+    url(https://storage.googleapis.com/zeni-apis.appspot.com/images/cards-plg-background-upper.svg);
+  background-position:
+    100% 100%,
+    0% 0%;
+  background-repeat: no-repeat;
+`, O = t.div`
+  display: flex;
+  flex-direction: column;
+`, V = t.div``, q = t.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  gap: ${(e) => r.bulletContainerGap.valuePx(e.windowSize)};
+  justify-content: space-between;
+  margin: ${(e) => e.windowSize === "small" ? l.sp3 : l.sp1}
+    auto 0 0;
+`, u = t.div`
+  display: flex;
+  align-items: center;
+`, p = t(G)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+  vertical-align: middle;
+  margin-right: ${l.sp1};
+  color: ${n.success};
+`, m = t(H)`
+  color: ${(e) => e.theme.colors.primary};
+  white-space: nowrap;
+`;
+export {
+  Y as C
+};

package/dist/CreditCardPaymentPlgSection-DgBtXMAk.cjs

@@ -0,0 +1,78 @@
+"use strict";const t=require("./vendor-.pnpm-BW93Fnli.cjs"),i=require("@emotion/styled"),o=require("./index-C8marfrT.cjs"),n={iconContainerMaxWidthHeight:new o.ResponsiveSized(o.sp[6],o.sp[7]),iconContainerMarginRight:new o.ResponsiveSized(o.sp[3],o.sp[3]),iconWidthHeight:new o.ResponsiveSized(20,o.sp[4]),iconPadding:new o.ResponsiveSized(10,12),containerPaddingTopBottom:new o.ResponsiveSized(o.sp[4],o.sp[4]),containerPaddingLeftRight:new o.ResponsiveSized(o.sp[3],o.sp[4]),buttonLeftMargin:new o.ResponsiveSized(o.sp[8],o.sp[0]),buttonTopMargin:new o.ResponsiveSized(o.sp[4],o.sp[2]),bulletContainerGap:new o.ResponsiveSized(12,o.sp[3])};function y({heading:e,buttonText:a,analytics:l,maxInsuredAmount:g,pageName:d,style:x,onSignUpClick:m,onSwitchClick:h,onMoveMoneyClick:w}){const r=o.useWindowSizeContext(),S=t.useTheme(),{common:C,commonSetUp:b}=o.appLocale.getLocalizedStrings(),s=b.setUp.accountsPlg,j=()=>{switch(a){case s.signUpButtonText:l?.trackPlgPromoClicked(d,"Sign Up for Free"),m?.();break;case s.switchButtonText:l?.trackPlgPromoClicked(d,"Switch Now"),h?.();break;default:l?.trackPlgPromoClicked(d,"Move Money"),w?.()}},v=o.amountValueToString(o.getAmountFormatString(g),g,C.currency.currencySymbol).toUpperCase();return t.jsxRuntimeExports.jsxs(M,{windowSize:r,width:x?.width,style:x,"data-testid":o.generateDataTestId("credit-card-payment-plg-section"),children:[t.jsxRuntimeExports.jsxs($,{children:[t.jsxRuntimeExports.jsx(E,{windowSize:r,isDarkMode:S.mode==="dark",children:t.jsxRuntimeExports.jsx(P,{windowSize:r,children:t.jsxRuntimeExports.jsx(k,{})})}),t.jsxRuntimeExports.jsx(B,{children:t.jsxRuntimeExports.jsxs(T,{children:[t.jsxRuntimeExports.jsx(f,{windowSize:r,children:e}),t.jsxRuntimeExports.jsxs(L,{windowSize:r,children:[t.jsxRuntimeExports.jsxs(c,{children:[t.jsxRuntimeExports.jsx(p,{}),t.jsxRuntimeExports.jsx(u,{children:s.bulletPoints.two.replace("__amount__",v)})]}),t.jsxRuntimeExports.jsxs(c,{children:[t.jsxRuntimeExports.jsx(p,{}),t.jsxRuntimeExports.jsx(u,{children:s.bulletPoints.three})]}),t.jsxRuntimeExports.jsxs(c,{children:[t.jsxRuntimeExports.jsx(p,{}),t.jsxRuntimeExports.jsx(u,{children:s.bulletPoints.four})]})]})]})})]}),t.jsxRuntimeExports.jsx(z,{windowSize:r,children:t.jsxRuntimeExports.jsx(o.Button,{label:a,"data-testid":o.generateDataTestId("accounts-plg-button",a),onClick:R=>{R.stopPropagation(),j()},buttonColors:{borderColor:{default:o.Colors.brandColorSapphire,hover:o.Colors.brandColorSapphire,disabled:o.Colors.brandColorSapphire},backgroundColor:{default:o.Colors.brandColorSapphire,hover:o.Colors.brandColorSapphire,disabled:o.Colors.brandColorSapphire},textColor:{default:o.Colors.neutralGrey5Light,hover:o.Colors.neutralGrey5Light,disabled:o.Colors.neutralGrey5Light}},size:"small",style:{padding:`6px ${o.Space.sp3}`,borderRadius:"6px"},textStyle:{fontWeight:o.FontWeight.regular}})})]})}const $=i.div`
+  display: flex;
+  align-items: center;
+`,f=i(o.StandardMedium)`
+  color: ${e=>e.theme.colors.primary};
+  width: 100%;
+`,z=i.div`
+  display: flex;
+  color: inherit;
+  margin-bottom: auto;
+  margin-left: ${e=>n.buttonLeftMargin.valuePx(e.windowSize)};
+  margin-top: ${e=>n.buttonTopMargin.valuePx(e.windowSize)};
+`,P=i.div`
+  width: ${e=>n.iconWidthHeight.valuePx(e.windowSize)};
+  height: ${e=>n.iconWidthHeight.valuePx(e.windowSize)};
+`,k=i(o.SvgBankBuilding)`
+  color: ${e=>e.theme.colors.primary};
+  width: inherit;
+  height: inherit;
+`,E=i.div`
+  display: flex;
+  margin-bottom: auto;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: ${e=>e.windowSize==="small"?"flex-start":"unset"};
+  padding: ${e=>n.iconPadding.valuePx(e.windowSize)};
+  background: ${e=>e.isDarkMode?e.theme.colors.brandColorJadeDark:e.theme.colors.brandColorJadeLight};
+  border-radius: ${o.Space.sp11};
+  color: ${e=>e.isDarkMode?o.Colors.neutralGrey5Light:e.theme.colors.brandColorOnyx};
+  max-width: ${e=>n.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
+  max-height: ${e=>n.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
+  margin-right: ${e=>n.iconContainerMarginRight.valuePx(e.windowSize)};
+`,M=i.div`
+  display: flex;
+  align-items: ${e=>e.windowSize==="small"?"flex-start":"center"};
+  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
+  padding: ${e=>`${n.containerPaddingTopBottom.valuePx(e.windowSize)} ${n.containerPaddingLeftRight.valuePx(e.windowSize)}`};
+  background-color: ${e=>e.theme.colors.grey5};
+  fill: ${e=>e.theme.colors.grey1};
+  color: ${e=>e.theme.colors.grey1};
+  justify-content: space-between;
+  box-sizing: border-box;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+    fill: ${e=>e.theme.colors.primary};
+  }
+  background-color: ${e=>e.theme.colors.grey3};
+  background-image:
+    url(https://storage.googleapis.com/zeni-apis.appspot.com/images/cards-plg-background-lower.svg),
+    url(https://storage.googleapis.com/zeni-apis.appspot.com/images/cards-plg-background-upper.svg);
+  background-position:
+    100% 100%,
+    0% 0%;
+  background-repeat: no-repeat;
+`,B=i.div`
+  display: flex;
+  flex-direction: column;
+`,T=i.div``,L=i.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
+  gap: ${e=>n.bulletContainerGap.valuePx(e.windowSize)};
+  justify-content: space-between;
+  margin: ${e=>e.windowSize==="small"?o.Space.sp3:o.Space.sp1}
+    auto 0 0;
+`,c=i.div`
+  display: flex;
+  align-items: center;
+`,p=i(o.SvgTickRoundFill)`
+  width: ${o.Space.sp3};
+  height: ${o.Space.sp3};
+  vertical-align: middle;
+  margin-right: ${o.Space.sp1};
+  color: ${o.Colors.success};
+`,u=i(o.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+  white-space: nowrap;
+`;exports.CreditCardPaymentPlgSection=y;

package/dist/CurrencySelectField-Bz1wETR-.js

@@ -0,0 +1,348 @@
+import { d as R, u as E, m as M, j as o, e as P, S as N, n as z, V as H, c as g, aq as T, ar as _ } from "./vendor-.pnpm-Q8NJHkXi.js";
+import { useState as B, createElement as q } from "react";
+import i from "@emotion/styled";
+import { a as A, j as x, S as t, p as G, t as S, hg as W, G as J, n as K, b as Q, C as p } from "./index-DIy5Kjs9.js";
+const Se = ({
+  name: e,
+  registerOptions: s,
+  defaultValue: l,
+  isDisabled: a,
+  style: c,
+  placeholder: d,
+  isOptionRemovable: r = !0,
+  menuItemHeight: u = 40,
+  controlStyle: h
+}) => {
+  const {
+    control: b,
+    formState: { errors: f }
+  } = R(), y = E(), [j, O] = B(!1), v = M(f, e ?? ""), k = A.getLocalizedStrings().common.currency, F = (n) => {
+    if (!(n == null || !n))
+      return {
+        value: n,
+        label: l.allOptions.find((m) => m.value === n)?.label ?? n,
+        countryCode: l.allOptions.find((m) => m.value === n)?.countryCode ?? k.countryCode
+      };
+  }, I = {
+    container: (n) => ({
+      ...n,
+      width: "100%",
+      ...c
+    }),
+    menu: (n) => ({
+      ...n,
+      backgroundColor: y.colors.grey5,
+      borderRadius: t.sp1,
+      boxShadow: `${t.sp0} 2px ${t.sp2} ${y.colors.dropShadowHover}`,
+      border: `1px solid ${y.colors.grey3}`,
+      // TODO - Add border and radius to every dropdown menu
+      whiteSpace: "nowrap",
+      zIndex: 2,
+      width: "100%",
+      margin: `1px ${t.sp0} ${t.sp0} ${t.sp0}`,
+      overflow: "hidden"
+    }),
+    menuList: (n) => ({
+      ...n,
+      borderRadius: t.sp1
+    }),
+    input: () => ({
+      color: y.colors.primary,
+      margin: 0
+    }),
+    singleValue: (n) => ({
+      ...n,
+      margin: 0,
+      position: "absolute"
+    })
+  }, D = {
+    hasError: v,
+    menuItemHeight: u,
+    controlStyle: h,
+    isOptionRemovable: r
+  };
+  return /* @__PURE__ */ o.jsx(
+    P,
+    {
+      name: e,
+      control: b,
+      defaultValue: l,
+      rules: s,
+      "data-testid": x("currency-select-field", e),
+      render: ({ field: { onChange: n, onBlur: m, value: V, ref: L } }) => {
+        const C = V;
+        return /* @__PURE__ */ q(
+          N,
+          {
+            ...D,
+            ref: L,
+            isMulti: !1,
+            isSearchable: !0,
+            isClearable: r,
+            autoFocus: j === !0,
+            openMenuOnClick: !0,
+            controlShouldRenderValue: !0,
+            placeholder: d,
+            value: F(C.selectedOption),
+            options: l.allOptions,
+            "data-testid": x("currency-select", e),
+            onChange: ($) => {
+              r && $?.value != null && C?.selectedOption === $.value ? n({
+                selectedOption: void 0,
+                allOptions: l.allOptions
+              }) : n({
+                selectedOption: $?.value,
+                allOptions: l.allOptions
+              });
+            },
+            onMenuClose: () => O(!1),
+            key: z(),
+            tabSelectsValue: !1,
+            openMenuOnFocus: !0,
+            classNamePrefix: "currency-select-field",
+            onBlur: m,
+            menuPlacement: "auto",
+            maxMenuHeight: 240,
+            menuShouldScrollIntoView: !1,
+            closeMenuOnSelect: !0,
+            components: {
+              Control: U,
+              Option: X,
+              Input: ee,
+              SingleValue: te,
+              ValueContainer: Z,
+              DropdownIndicator: pe,
+              IndicatorSeparator: ge,
+              Placeholder: oe,
+              ClearIndicator: ye,
+              MenuList: Y
+            },
+            hideSelectedOptions: !1,
+            styles: I,
+            isDisabled: a != null
+          }
+        );
+      }
+    }
+  );
+}, U = (e) => {
+  const { menuIsOpen: s, isFocused: l, isDisabled: a, selectProps: c } = e, { value: d, hasError: r, controlStyle: u } = c;
+  return /* @__PURE__ */ o.jsx(
+    ne,
+    {
+      controlStyle: u,
+      menuIsOpen: s,
+      isFocused: l,
+      isDisabled: a,
+      selectedValue: d,
+      hasError: r,
+      children: /* @__PURE__ */ o.jsx(g.Control, { ...e, className: "select-control", children: e.children })
+    }
+  );
+}, X = (e) => {
+  const { data: s, isSelected: l, isDisabled: a, isFocused: c, selectProps: d } = e, { isOptionRemovable: r } = d, u = s.countryCode, h = typeof s.label == "string" ? s.label : s.value;
+  return /* @__PURE__ */ o.jsx(
+    se,
+    {
+      isOptionRemovable: r,
+      className: "select-option-wrapper",
+      isFocused: c,
+      isSelected: l,
+      isDisabled: a,
+      "data-testid": x(
+        "currency-select-field-option",
+        h
+      ),
+      children: /* @__PURE__ */ o.jsx(g.Option, { ...e, className: "select-option", children: /* @__PURE__ */ o.jsxs(re, { children: [
+        /* @__PURE__ */ o.jsx(le, { countryCode: u }),
+        /* @__PURE__ */ o.jsx(ce, { isSelected: l, children: /* @__PURE__ */ o.jsx(ae, { isSelected: l, isDisabled: a, children: s.label }) }),
+        l ? /* @__PURE__ */ o.jsxs(ue, { children: [
+          /* @__PURE__ */ o.jsx(he, { className: "right-tick-icon" }),
+          /* @__PURE__ */ o.jsx(me, { className: "close-tick-icon" })
+        ] }) : null
+      ] }) })
+    }
+  );
+}, Y = (e) => {
+  const { options: s, children: l, maxHeight: a, getValue: c, selectProps: d } = e, { menuItemHeight: r } = d, [u] = c(), h = s.indexOf(u) * r;
+  return /* @__PURE__ */ o.jsx(
+    H,
+    {
+      height: l.length > 7 ? a : l.length * r,
+      width: "100%",
+      itemCount: l.length,
+      itemSize: () => r,
+      initialScrollOffset: h,
+      children: ({ index: b, style: f }) => /* @__PURE__ */ o.jsx(de, { style: f, children: l[b] })
+    }
+  );
+}, Z = (e) => /* @__PURE__ */ o.jsx(g.ValueContainer, { ...e, className: "select-value-container", children: e.children }), ee = (e) => {
+  const { selectProps: s } = e, { placeholder: l, value: a } = s;
+  return /* @__PURE__ */ o.jsx(w, { children: /* @__PURE__ */ o.jsx(
+    g.Input,
+    {
+      ...e,
+      autoComplete: "new-password",
+      placeholder: a == null ? l : void 0,
+      children: e.children
+    }
+  ) });
+}, te = (e) => {
+  const { data: s } = e;
+  return /* @__PURE__ */ o.jsx(g.SingleValue, { ...e, children: /* @__PURE__ */ o.jsx(w, { children: s.label }) });
+}, w = i(G)`
+  color: ${(e) => e.theme.colors.primary};
+`, oe = () => null, le = ({
+  countryCode: e
+}) => {
+  if (e != null && T(e) === !1)
+    return /* @__PURE__ */ o.jsx(o.Fragment, {});
+  {
+    const l = (
+      //added this typecasting since above if condition will filter out any CountryCode whose flag is not present. EX-"AN"
+      _[`${W(
+        e ?? ""
+      )}`]
+    );
+    return /* @__PURE__ */ o.jsx(ie, { children: /* @__PURE__ */ o.jsx(l, { width: t.sp4, height: t.sp3 }) });
+  }
+}, ne = i.span`
+  width: 100%;
+  background-color: ${(e) => e.hasError ? p.importantLight : e.menuIsOpen ? e.theme.colors.background : e.controlStyle?.backgroundColor != null ? e.controlStyle?.backgroundColor : e.theme.colors.grey5};
+  border-radius: ${t.sp1};
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+  .select-control {
+    border: none;
+    height: ${t.sp6};
+    background-color: inherit;
+    box-shadow: none;
+    &:hover {
+      fill: ${(e) => e.theme.colors.primary};
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.hasError ? p.importantLight : e.theme.colors.background};
+      border-color: none;
+    }
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    margin: ${t.sp0} ${t.sp3};
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    justify-content: ${(e) => e.controlStyle?.justifyContent != null ? e.controlStyle?.justifyContent : e.menuIsOpen === !1 ? "flex-end" : "flex-start"};
+
+    .currency-select-field__single-value {
+      display: flex;
+      margin: ${t.sp0};
+      color: ${(e) => e.hasError ? p.important : e.theme.colors.primary};
+      ${S.standardRegular.css};
+    }
+
+    .currency-select-field__input-container {
+      display: flex;
+      width: ${(e) => e.menuIsOpen === !1 && e.selectedValue != null ? t.sp0 : "100%"};
+      position: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "initial" : "absolute"};
+      ${S.standardRegular.css};
+      color: ${(e) => e.hasError === !0 ? p.important : e.theme.colors.primary};
+      margin: ${t.sp0};
+      cursor: inherit;
+      top: ${t.sp2};
+
+      > input {
+        text-align: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "right" : "initial"};
+        text-align: ${(e) => e.isFocused === !1 ? "right" : "left"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${(e) => e.hasError ? p.important : e.theme.colors.grey1};
+        }
+      }
+    }
+  }
+`, se = i.div`
+  border-radius: inherit;
+  .select-option {
+    ${S.smallRegular.css};
+    height: ${t.sp6};
+    padding: 9px ${t.sp3};
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
+    opacity: ${(e) => e.isDisabled ? 0.32 : 1};
+    background-color: ${(e) => e.isSelected ? e.theme.colors.grey3 : e.theme.colors.grey5};
+    ${(e) => e.isFocused && `background-color: ${e.theme.colors.background}`};
+    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+    border-top: none;
+    border-radius: inherit;
+    .close-tick-icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+      color: ${(e) => e.isDisabled ? e.theme.colors.champion : e.theme.colors.primary};
+      .right-tick-icon {
+        display: ${(e) => e.isOptionRemovable ? "none" : "inline-block"};
+      }
+      .close-tick-icon {
+        display: ${(e) => e.isOptionRemovable ? "inline-block" : "none"};
+      }
+    }
+  }
+`, re = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`, ie = i.div`
+  padding-right: ${t.sp2};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  fill: initial;
+  color: initial;
+`, ae = i(J)`
+  padding-right: 10px;
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+  ${(e) => e.isSelected && "cursor: default"};
+`, ce = i.div`
+  width: ${(e) => e.isSelected ? `calc(100% - ${t.sp3})` : "100%"};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`, de = i.div`
+  :first-of-type {
+    border-top-left-radius: ${t.sp1};
+    border-top-right-radius: ${t.sp1};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${t.sp1};
+    border-bottom-right-radius: ${t.sp1};
+  }
+`, ue = i.div`
+  display: flex;
+`, he = i(K)`
+  width: 12px;
+  height: 12px;
+  margin-right: 2px;
+  margin-left: ${t.sp1};
+  color: ${(e) => e.theme.colors.primary};
+`, me = i(Q)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, pe = () => null, ge = () => null, ye = () => null;
+export {
+  Se as C
+};