@zeniai/web-components 3.17.3 → 3.17.4

package/dist/LabeledAddressValue-Cz5YOQ4S.js

@@ -0,0 +1,115 @@
+import { j as n } from "./vendor-.pnpm-B2klaOGU.js";
+import r from "@emotion/styled";
+import { u as m, aB as u, R as o, hf as p, D as i, aw as x } from "./index-CR2Dmphx.js";
+const t = {
+  width: new o(343, 580, 726),
+  height: new o(i[6], i[6]),
+  controlHeight: new o(i[6], i[6]),
+  controlMinHeight: new o(i[4], i[4]),
+  paddingTopBottom: new o(i[2], i[2]),
+  marginTop: new o(i[2], i[2]),
+  marginBottom: new o(i[2], i[2]),
+  marginRight: new o(i[2], i[2]),
+  labelMarginLeft: new o(i[3], i[4]),
+  labelMarginRight: new o(i[3], i[4]),
+  labelMarginTop: new o(i[2], i[2])
+}, c = {
+  infoLabel: new x("extraSmallRegular", "smallRegular")
+};
+function $({
+  isDisabled: e,
+  label: a,
+  additionalInfoLabel: d,
+  addressValue: s,
+  isOptional: g,
+  style: h
+}) {
+  const l = m();
+  return /* @__PURE__ */ n.jsxs(b, { size: l, style: h, isDisabled: e != null, children: [
+    /* @__PURE__ */ n.jsxs(w, { children: [
+      /* @__PURE__ */ n.jsx(
+        u,
+        {
+          isOptional: g,
+          isDisabled: e,
+          label: a.label,
+          style: {
+            marginLeft: t.labelMarginLeft.value(l),
+            marginRight: t.labelMarginRight.value(l),
+            marginTop: t.labelMarginTop.value(l),
+            width: a.width ?? "auto"
+          }
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        p,
+        {
+          ...s,
+          isDisabled: e,
+          style: {
+            minHeight: t.controlMinHeight.value(l),
+            paddingTop: t.paddingTopBottom.valuePx(l),
+            paddingBottom: t.paddingTopBottom.valuePx(l),
+            maxWidth: a.width != null ? `calc(100% - ${a.width}px)` : "auto",
+            display: "flex",
+            flexGrow: 1,
+            ...s.style
+          }
+        }
+      )
+    ] }),
+    d ? /* @__PURE__ */ n.jsx(f, { size: l, children: d }) : null
+  ] });
+}
+const f = r.label`
+  color: ${(e) => e.theme.colors.grey1};
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: calc(100% - ${(e) => t.marginRight.valuePx(e.size)});
+  padding-right: ${(e) => t.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => t.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => t.paddingTopBottom.valuePx(e.size)};
+  ${(e) => `${c.infoLabel.style(e.size)}`};
+`, w = r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+`, b = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => t.width.valuePx(e.size)};
+  min-height: ${(e) => t.height.valuePx(e.size)};
+  padding-right: ${(e) => t.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => t.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => t.paddingTopBottom.valuePx(e.size)};
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+    .address-value {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.theme.colors.background};
+    }
+  }
+`;
+export {
+  $ as L
+};

package/dist/LabeledAddressValue-Degv7hv6.cjs

@@ -0,0 +1,49 @@
+"use strict";const s=require("./vendor-.pnpm-D0ILHvHB.cjs"),l=require("@emotion/styled"),i=require("./index-DFkWjm-c.cjs"),t={width:new i.ResponsiveSized(343,580,726),height:new i.ResponsiveSized(i.sp[6],i.sp[6]),controlHeight:new i.ResponsiveSized(i.sp[6],i.sp[6]),controlMinHeight:new i.ResponsiveSized(i.sp[4],i.sp[4]),paddingTopBottom:new i.ResponsiveSized(i.sp[2],i.sp[2]),marginTop:new i.ResponsiveSized(i.sp[2],i.sp[2]),marginBottom:new i.ResponsiveSized(i.sp[2],i.sp[2]),marginRight:new i.ResponsiveSized(i.sp[2],i.sp[2]),labelMarginLeft:new i.ResponsiveSized(i.sp[3],i.sp[4]),labelMarginRight:new i.ResponsiveSized(i.sp[3],i.sp[4]),labelMarginTop:new i.ResponsiveSized(i.sp[2],i.sp[2])},g={infoLabel:new i.ResponsiveSizedStyle("extraSmallRegular","smallRegular")};function u({isDisabled:e,label:n,additionalInfoLabel:d,addressValue:r,isOptional:a,style:p}){const o=i.useWindowSizeContext();return s.jsxRuntimeExports.jsxs(m,{size:o,style:p,isDisabled:e!=null,children:[s.jsxRuntimeExports.jsxs(x,{children:[s.jsxRuntimeExports.jsx(i.Label,{isOptional:a,isDisabled:e,label:n.label,style:{marginLeft:t.labelMarginLeft.value(o),marginRight:t.labelMarginRight.value(o),marginTop:t.labelMarginTop.value(o),width:n.width??"auto"}}),s.jsxRuntimeExports.jsx(i.AddressValue,{...r,isDisabled:e,style:{minHeight:t.controlMinHeight.value(o),paddingTop:t.paddingTopBottom.valuePx(o),paddingBottom:t.paddingTopBottom.valuePx(o),maxWidth:n.width!=null?`calc(100% - ${n.width}px)`:"auto",display:"flex",flexGrow:1,...r.style}})]}),d?s.jsxRuntimeExports.jsx(h,{size:o,children:d}):null]})}const h=l.label`
+  color: ${e=>e.theme.colors.grey1};
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: calc(100% - ${e=>t.marginRight.valuePx(e.size)});
+  padding-right: ${e=>t.marginRight.valuePx(e.size)};
+  padding-top: ${e=>t.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>t.paddingTopBottom.valuePx(e.size)};
+  ${e=>`${g.infoLabel.style(e.size)}`};
+`,x=l.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+`,m=l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>t.width.valuePx(e.size)};
+  min-height: ${e=>t.height.valuePx(e.size)};
+  padding-right: ${e=>t.marginRight.valuePx(e.size)};
+  padding-top: ${e=>t.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>t.paddingTopBottom.valuePx(e.size)};
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${e=>e.isDisabled===!0?e.theme.colors.grey3:e.theme.colors.primary};
+    .address-value {
+      background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.theme.colors.background};
+    }
+  }
+`;exports.LabeledAddressValue=u;

package/dist/LabeledAddressValueField--aDJQeKV.cjs

@@ -0,0 +1,45 @@
+"use strict";const s=require("./vendor-.pnpm-D0ILHvHB.cjs"),a=require("@emotion/styled"),e=require("./index-DFkWjm-c.cjs"),t={width:new e.ResponsiveSized(343,580,726),height:new e.ResponsiveSized(e.sp[6],e.sp[6]),controlHeight:new e.ResponsiveSized(e.sp[6],e.sp[6]),controlMinHeight:new e.ResponsiveSized(e.sp[4],e.sp[4]),paddingTopBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginTop:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginRight:new e.ResponsiveSized(e.sp[2],e.sp[2]),labelMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[2])},x={infoLabel:new e.ResponsiveSizedStyle("extraSmallRegular","smallRegular")},b=e.appLocale.getLocalizedStrings();function v({isDisabled:i,label:l,addressValueField:n,additionalInfoLabel:d,showAdditionalInfoLabel:p=!1,style:g,hasHoverBorder:h,isOptional:m}){const o=e.useWindowSizeContext(),{formState:{errors:u}}=s.useFormContext(),r=s.has(u,n.name),c=r?d:b.commonSetUp.businessVerification.addressAdditionInfo;return s.jsxRuntimeExports.jsxs(f,{size:o,style:g,isDisabled:i!=null,isError:r,hasHoverBorder:h??!0,"data-testid":e.generateDataTestId("labeled-address-value-field",n.name),children:[s.jsxRuntimeExports.jsx(e.Label,{isDisabled:i,isOptional:m,label:l.label,htmlFor:n.name,style:{marginLeft:t.labelMarginLeft.value(o),marginRight:t.labelMarginRight.value(o),marginTop:t.labelMarginTop.value(o),width:l.width??"auto"}}),s.jsxRuntimeExports.jsxs(w,{labelWidth:l.width,children:[s.jsxRuntimeExports.jsx(e.AddressValueField,{...n,isDisabled:i,style:{minHeight:t.controlMinHeight.value(o),paddingTop:t.paddingTopBottom.valuePx(o),paddingBottom:t.paddingTopBottom.valuePx(o),width:"-webkit-fill-available",display:"flex",flexGrow:1,...n.style}}),(p||r)&&s.jsxRuntimeExports.jsx(z,{size:o,isError:r,children:c})]})]})}const f=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${i=>i.theme.colors.grey5};
+  width: ${i=>t.width.valuePx(i.size)};
+  min-height: ${i=>t.height.valuePx(i.size)};
+  padding-right: ${i=>t.marginRight.valuePx(i.size)};
+  padding-top: ${i=>t.paddingTopBottom.valuePx(i.size)};
+  padding-bottom: ${i=>t.paddingTopBottom.valuePx(i.size)};
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${i=>i.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  &:hover {
+    z-index: 1;
+    outline: ${i=>i.hasHoverBorder?`1px solid ${i.isDisabled===!0?i.theme.colors.grey3:i.theme.colors.primary}`:"none"};
+    .address-value {
+      background-color: ${i=>i.isDisabled===!0?i.theme.colors.grey5:i.isError?e.Colors.importantLight:i.theme.colors.background};
+    }
+  }
+`,w=a.div`
+  display: flex;
+  flex-direction: column;
+  width: ${i=>i.labelWidth!=null?`calc(100% - ${i.labelWidth}px)`:"auto"};
+  align-items: flex-end;
+  flex-grow: 1;
+`,z=a.label`
+  display: flex;
+  color: ${i=>i.isError?e.Colors.important:i.theme.colors.grey1};
+  ${i=>`${x.infoLabel.style(i.size)}`};
+  padding-right: 12px;
+  text-align: right;
+`;exports.LabeledAddressValueField=v;

package/dist/LabeledAddressValueField-CsmIs4b8.js

@@ -0,0 +1,130 @@
+import { d as b, m as w, j as n } from "./vendor-.pnpm-B2klaOGU.js";
+import d from "@emotion/styled";
+import { u as v, a as y, e as z, aB as $, R as i, hg as L, C as g, D as t, aw as S } from "./index-CR2Dmphx.js";
+const o = {
+  width: new i(343, 580, 726),
+  height: new i(t[6], t[6]),
+  controlHeight: new i(t[6], t[6]),
+  controlMinHeight: new i(t[4], t[4]),
+  paddingTopBottom: new i(t[2], t[2]),
+  marginTop: new i(t[2], t[2]),
+  marginBottom: new i(t[2], t[2]),
+  marginRight: new i(t[2], t[2]),
+  labelMarginLeft: new i(t[3], t[4]),
+  labelMarginRight: new i(t[3], t[4]),
+  labelMarginTop: new i(t[2], t[2])
+}, R = {
+  infoLabel: new S("extraSmallRegular", "smallRegular")
+}, T = y.getLocalizedStrings();
+function W({
+  isDisabled: e,
+  label: s,
+  addressValueField: l,
+  additionalInfoLabel: h,
+  showAdditionalInfoLabel: m = !1,
+  style: c,
+  hasHoverBorder: u,
+  isOptional: p
+}) {
+  const a = v(), {
+    formState: { errors: x }
+  } = b(), r = w(x, l.name), f = r ? h : T.commonSetUp.businessVerification.addressAdditionInfo;
+  return /* @__PURE__ */ n.jsxs(
+    B,
+    {
+      size: a,
+      style: c,
+      isDisabled: e != null,
+      isError: r,
+      hasHoverBorder: u ?? !0,
+      "data-testid": z(
+        "labeled-address-value-field",
+        l.name
+      ),
+      children: [
+        /* @__PURE__ */ n.jsx(
+          $,
+          {
+            isDisabled: e,
+            isOptional: p,
+            label: s.label,
+            htmlFor: l.name,
+            style: {
+              marginLeft: o.labelMarginLeft.value(a),
+              marginRight: o.labelMarginRight.value(a),
+              marginTop: o.labelMarginTop.value(a),
+              width: s.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ n.jsxs(M, { labelWidth: s.width, children: [
+          /* @__PURE__ */ n.jsx(
+            L,
+            {
+              ...l,
+              isDisabled: e,
+              style: {
+                minHeight: o.controlMinHeight.value(a),
+                paddingTop: o.paddingTopBottom.valuePx(a),
+                paddingBottom: o.paddingTopBottom.valuePx(a),
+                width: "-webkit-fill-available",
+                display: "flex",
+                flexGrow: 1,
+                ...l.style
+              }
+            }
+          ),
+          (m || r) && /* @__PURE__ */ n.jsx(j, { size: a, isError: r, children: f })
+        ] })
+      ]
+    }
+  );
+}
+const B = d.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => o.width.valuePx(e.size)};
+  min-height: ${(e) => o.height.valuePx(e.size)};
+  padding-right: ${(e) => o.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => o.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => o.paddingTopBottom.valuePx(e.size)};
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  &:hover {
+    z-index: 1;
+    outline: ${(e) => e.hasHoverBorder ? `1px solid ${e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary}` : "none"};
+    .address-value {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? g.importantLight : e.theme.colors.background};
+    }
+  }
+`, M = d.div`
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
+  align-items: flex-end;
+  flex-grow: 1;
+`, j = d.label`
+  display: flex;
+  color: ${(e) => e.isError ? g.important : e.theme.colors.grey1};
+  ${(e) => `${R.infoLabel.style(e.size)}`};
+  padding-right: 12px;
+  text-align: right;
+`;
+export {
+  W as L
+};

package/dist/LabeledControlledCheckBoxField-Clc9lKGx.cjs

@@ -0,0 +1,16 @@
+"use strict";const t=require("./vendor-.pnpm-D0ILHvHB.cjs"),d=require("@emotion/react"),o=require("@emotion/styled"),i=require("./index-DFkWjm-c.cjs"),a={width:new i.ResponsiveSized(343,580,726)};function r({label:e,checkBoxField:s,style:l}){const n=i.useWindowSizeContext();return t.jsxRuntimeExports.jsxs(c,{size:n,style:l,isDisabled:s.isDisabled,"data-testid":i.generateDataTestId(s.name,"labeled-check-box-field"),isSelected:s.defaultChecked??!1,children:[t.jsxRuntimeExports.jsx(i.ControlledCheckBoxField,{...s,style:{...s.style}}),t.jsxRuntimeExports.jsx(i.Label,{isDisabled:s.isDisabled,label:e.label,labelStyle:e.style,htmlFor:s.name,style:{display:"flex",flex:1,minHeight:i.Space.sp4,marginLeft:i.Space.sp2,width:e.width,backgroundColor:"inherit",...e.style}})]})}const c=o.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: ${e=>a.width.valuePx(e.size)};
+  min-height: ${i.Space.sp4};
+
+  label {
+    color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.hero};
+    ${e=>e.isDisabled==="disabled"&&d.css`
+        color: ${e.theme.colors.grey2};
+      `};
+    cursor: ${e=>e.isDisabled==="disabled"?"not-allowed":"pointer"};
+    pointer-events: ${e=>e.isDisabled==="disabled"||e.isDisabled==="readonly"?"none":"initial"};
+  }
+`;exports.LabeledControlledCheckBoxField=r;

package/dist/LabeledControlledCheckBoxField-D7IY-xRU.js

@@ -0,0 +1,73 @@
+import { j as i } from "./vendor-.pnpm-B2klaOGU.js";
+import { css as o } from "@emotion/react";
+import d from "@emotion/styled";
+import { u as n, e as r, h9 as m, aB as b, S as t, R as h } from "./index-CR2Dmphx.js";
+const f = {
+  width: new h(343, 580, 726)
+};
+function x({
+  label: e,
+  checkBoxField: s,
+  style: l
+}) {
+  const a = n();
+  return /* @__PURE__ */ i.jsxs(
+    y,
+    {
+      size: a,
+      style: l,
+      isDisabled: s.isDisabled,
+      "data-testid": r(
+        s.name,
+        "labeled-check-box-field"
+      ),
+      isSelected: s.defaultChecked ?? !1,
+      children: [
+        /* @__PURE__ */ i.jsx(
+          m,
+          {
+            ...s,
+            style: { ...s.style }
+          }
+        ),
+        /* @__PURE__ */ i.jsx(
+          b,
+          {
+            isDisabled: s.isDisabled,
+            label: e.label,
+            labelStyle: e.style,
+            htmlFor: s.name,
+            style: {
+              display: "flex",
+              flex: 1,
+              minHeight: t.sp4,
+              marginLeft: t.sp2,
+              width: e.width,
+              backgroundColor: "inherit",
+              ...e.style
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+const y = d.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: ${(e) => f.width.valuePx(e.size)};
+  min-height: ${t.sp4};
+
+  label {
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
+    ${(e) => e.isDisabled === "disabled" && o`
+        color: ${e.theme.colors.grey2};
+      `};
+    cursor: ${(e) => e.isDisabled === "disabled" ? "not-allowed" : "pointer"};
+    pointer-events: ${(e) => e.isDisabled === "disabled" || e.isDisabled === "readonly" ? "none" : "initial"};
+  }
+`;
+export {
+  x as L
+};