@zeniai/web-components 3.16.99 → 3.17.1

package/dist/BankAccountWarningSection-D7paF4Ky.cjs

@@ -0,0 +1,51 @@
+"use strict";const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),t=require("@emotion/styled"),e=require("./index-oPmOjv0R.cjs"),{common:{navBar:{back:m}}}=e.appLocale.getLocalizedStrings(),s={navBarContainerPadding:new e.ResponsiveSized(10,e.sp[3]),formTitleMarginTop:new e.ResponsiveSized(e.sp[0],e.sp[3]),formTitleMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[0]),customTitleMarginBottom:new e.ResponsiveSized(e.sp[0],e.sp[3]),customTitleMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[6]),customTitleMarginRight:new e.ResponsiveSized(e.sp[5],e.sp[8])},x={formTitle:new e.ResponsiveSizedStyle("h6Medium","h5Medium")},u=({header:n,isDirty:r,isMagicLink:l,onBackClick:c,setShowConfirmationPopup:p})=>{const i=e.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[i==="small"?o.jsxRuntimeExports.jsxs($,{windowSize:i,children:[l?null:o.jsxRuntimeExports.jsx(g,{onClick:()=>r?p?.(!0):c?.(),"data-testid":e.generateDataTestId("bank-account-page-back-click-mobile")}),o.jsxRuntimeExports.jsx(d,{windowSize:i,children:n})]}):o.jsxRuntimeExports.jsx(S,{children:l?null:o.jsxRuntimeExports.jsx(e.Tooltip,{title:m,enterDelay:600,placement:"bottom",children:o.jsxRuntimeExports.jsx(g,{onClick:()=>r?p?.(!0):c?.(),"data-testid":e.generateDataTestId("bank-account-page-back-click")})})}),i!=="small"?o.jsxRuntimeExports.jsx(d,{windowSize:i,children:n}):null]})},d=t(e.StyledText)`
+  ${n=>`${x.formTitle.style(n.windowSize)}`};
+  color: ${n=>n.theme.colors.primary};
+  margin-bottom: ${n=>s.customTitleMarginBottom.valuePx(n.windowSize)};
+  margin-top: ${e.Space.sp3};
+  margin-left: ${n=>s.customTitleMarginLeft.valuePx(n.windowSize)};
+  margin-right: ${n=>s.customTitleMarginRight.valuePx(n.windowSize)};
+`,g=t(e.SvgArrowLeft)`
+  cursor: pointer;
+  color: ${n=>n.theme.colors.hero};
+  width: 20px;
+  height: 20px;
+  &:hover {
+    color: ${n=>n.theme.colors.primary};
+  }
+`,S=t.div`
+  margin: ${e.Space.sp3} ${e.Space.sp8} ${e.Space.sp3} ${e.Space.sp6};
+`,$=t.div`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: ${e.Space.sp0};
+  padding-top: ${n=>s.navBarContainerPadding.valuePx(n.windowSize)};
+  padding-bottom: ${n=>s.navBarContainerPadding.valuePx(n.windowSize)};
+  padding-right: ${e.Space.sp5};
+  padding-left: ${e.Space.sp0};
+  z-index: 2;
+  background-color: ${n=>n.theme.colors.grey4};
+`,a={marginBottom:new e.ResponsiveSized(e.sp[5],e.sp[3]),marginRight:new e.ResponsiveSized(e.sp[3],e.sp[8]),marginLeft:new e.ResponsiveSized(e.sp[3],e.sp[6])},v=({warningText:n})=>{const r=e.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(h,{size:r,children:[o.jsxRuntimeExports.jsx(R,{children:o.jsxRuntimeExports.jsx(z,{})}),o.jsxRuntimeExports.jsx(w,{children:n})]})},h=t.div`
+  display: flex;
+  background-color: ${e.Colors.alertLight};
+  border: 1px solid ${e.Colors.brandColorGoldDark};
+  border-radius: ${e.Space.sp2};
+  color: ${e.Colors.alertDark};
+  margin-bottom: ${n=>a.marginBottom.valuePx(n.size)};
+  padding: ${e.Space.sp3} ${e.Space.sp4} ${e.Space.sp3} ${e.Space.sp4};
+  margin-right: ${n=>a.marginRight.valuePx(n.size)};
+  margin-left: ${n=>a.marginLeft.valuePx(n.size)};
+`,w=t(e.StandardRegular)`
+  display: flex;
+  flex-grow: 1;
+  color: ${e.Colors.brandColorGoldDark};
+`,R=t.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${e.Space.sp2};
+`,z=t(e.SvgHighImportanceFilled)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  color: ${e.Colors.brandColorGoldDark};
+`;exports.BankAccountPageNavSection=u;exports.BankAccountWarningSection=v;

package/dist/BankAccountWarningSection-aF1r11G6.js

@@ -0,0 +1,110 @@
+import { j as t } from "./vendor-.pnpm-B2klaOGU.js";
+import i from "@emotion/styled";
+import { u as h, e as u, Z as w, a as f, S as o, R as a, G as v, aw as S, J as b, D as n, C as s, ap as z, o as T } from "./index-DOPIZEh4.js";
+const {
+  common: {
+    navBar: { back: k }
+  }
+} = f.getLocalizedStrings(), l = {
+  navBarContainerPadding: new a(10, n[3]),
+  formTitleMarginTop: new a(n[0], n[3]),
+  formTitleMarginLeft: new a(n[3], n[0]),
+  customTitleMarginBottom: new a(n[0], n[3]),
+  customTitleMarginLeft: new a(n[3], n[6]),
+  customTitleMarginRight: new a(n[5], n[8])
+}, B = {
+  formTitle: new S("h6Medium", "h5Medium")
+}, W = ({
+  header: e,
+  isDirty: c,
+  isMagicLink: g,
+  onBackClick: m,
+  setShowConfirmationPopup: p
+}) => {
+  const r = h();
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    r === "small" ? /* @__PURE__ */ t.jsxs(y, { windowSize: r, children: [
+      g ? null : /* @__PURE__ */ t.jsx(
+        $,
+        {
+          onClick: () => c ? p?.(!0) : m?.(),
+          "data-testid": u(
+            "bank-account-page-back-click-mobile"
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(x, { windowSize: r, children: e })
+    ] }) : /* @__PURE__ */ t.jsx(j, { children: g ? null : /* @__PURE__ */ t.jsx(w, { title: k, enterDelay: 600, placement: "bottom", children: /* @__PURE__ */ t.jsx(
+      $,
+      {
+        onClick: () => c ? p?.(!0) : m?.(),
+        "data-testid": u("bank-account-page-back-click")
+      }
+    ) }) }),
+    r !== "small" ? /* @__PURE__ */ t.jsx(x, { windowSize: r, children: e }) : null
+  ] });
+}, x = i(b)`
+  ${(e) => `${B.formTitle.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${(e) => l.customTitleMarginBottom.valuePx(e.windowSize)};
+  margin-top: ${o.sp3};
+  margin-left: ${(e) => l.customTitleMarginLeft.valuePx(e.windowSize)};
+  margin-right: ${(e) => l.customTitleMarginRight.valuePx(e.windowSize)};
+`, $ = i(v)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: 20px;
+  height: 20px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, j = i.div`
+  margin: ${o.sp3} ${o.sp8} ${o.sp3} ${o.sp6};
+`, y = i.div`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: ${o.sp0};
+  padding-top: ${(e) => l.navBarContainerPadding.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => l.navBarContainerPadding.valuePx(e.windowSize)};
+  padding-right: ${o.sp5};
+  padding-left: ${o.sp0};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, d = {
+  marginBottom: new a(n[5], n[3]),
+  marginRight: new a(n[3], n[8]),
+  marginLeft: new a(n[3], n[6])
+}, A = ({ warningText: e }) => {
+  const c = h();
+  return /* @__PURE__ */ t.jsxs(C, { size: c, children: [
+    /* @__PURE__ */ t.jsx(M, { children: /* @__PURE__ */ t.jsx(R, {}) }),
+    /* @__PURE__ */ t.jsx(P, { children: e })
+  ] });
+}, C = i.div`
+  display: flex;
+  background-color: ${s.alertLight};
+  border: 1px solid ${s.brandColorGoldDark};
+  border-radius: ${o.sp2};
+  color: ${s.alertDark};
+  margin-bottom: ${(e) => d.marginBottom.valuePx(e.size)};
+  padding: ${o.sp3} ${o.sp4} ${o.sp3} ${o.sp4};
+  margin-right: ${(e) => d.marginRight.valuePx(e.size)};
+  margin-left: ${(e) => d.marginLeft.valuePx(e.size)};
+`, P = i(T)`
+  display: flex;
+  flex-grow: 1;
+  color: ${s.brandColorGoldDark};
+`, M = i.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${o.sp2};
+`, R = i(z)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${s.brandColorGoldDark};
+`;
+export {
+  W as B,
+  A as a
+};