@zeniai/web-components 3.16.55 → 3.16.57

package/dist/LabeledEmailInputField-TISEjzh4.js

@@ -0,0 +1,425 @@
+import { j as t, d as H, m as U, e as W, an as N } from "./vendor-.pnpm-Q8NJHkXi.js";
+import F, { useRef as T, useCallback as q, useEffect as G, useState as X } from "react";
+import o from "@emotion/styled";
+import { S as r, o as B, b as V, u as _, ep as J, C as g, t as O, fE as Q, X as Y, eG as Z, a as ee, R as A, p as te, av as re, n as ne, e$ as oe, D as I } from "./index-DIy5Kjs9.js";
+const le = o.div`
+  display: flex;
+  align-items: center;
+  padding: ${r.sp1} ${r.sp2};
+  cursor: pointer;
+  border: ${(e) => `1px solid ${e.selected ? e.theme.colors.primary : e.theme.colors.grey1}`};
+  column-gap: ${r.sp2};
+  border-radius: ${r.sp1};
+  height: ${r.sp5};
+  margin-right: ${r.sp3};
+  box-sizing: border-box;
+`, ie = o(B)`
+  color: ${(e) => e.error ? e.theme.colors.hero : e.theme.colors.primary};
+`, se = o.button`
+  border: none;
+  color: ${(e) => e.error ? e.theme.colors.hero : e.theme.colors.primary};
+  background: none;
+  cursor: pointer;
+  display: flex;
+`, ae = o(V)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: inherit;
+`;
+function de(e) {
+  const { label: l, error: m, handleDelete: b, selected: w } = e;
+  return /* @__PURE__ */ t.jsxs(le, { selected: w, error: m, children: [
+    /* @__PURE__ */ t.jsx(ie, { selected: w, error: m, children: l }),
+    /* @__PURE__ */ t.jsx(se, { onClick: b, error: m, children: /* @__PURE__ */ t.jsx(ae, {}) })
+  ] });
+}
+const ce = o.div`
+  width: 100%;
+  position: relative;
+`, ue = o.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-flow: row wrap;
+  cursor: text;
+  border-radius: ${r.sp1};
+  padding: 0 ${r.sp3};
+  min-height: ${r.sp6};
+  align-items: center;
+  background-color: ${(e) => e.isFocused && !e.error ? e.theme.colors.background : e.disabled ? e.theme.colors.grey5 : e.error ? g.importantLight : "transparent"};
+  &:hover {
+    background-color: ${(e) => e.error ? g.importantLight : e.disabled ? e.theme.colors.grey5 : e.theme.colors.background};
+    & input {
+      background-color: ${(e) => e.error ? "transparent" : e.disabled ? e.theme.colors.grey5 : e.theme.colors.background};
+    }
+  }
+`, he = o.div`
+  display: flex;
+  flex-flow: row wrap;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: ${r.sp2} 0;
+  overflow-x: auto;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`, pe = o.div`
+  width: 100%;
+  border-radius: 0;
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex: 1;
+  padding: ${r.sp0};
+  margin-top: ${r.sp0};
+  min-width: 20;
+  background-color: transparent;
+  & input {
+    background-color: ${(e) => e.isFocused && !e.error ? e.theme.colors.background : e.error ? "transparent" : ""};
+  }
+  &:hover {
+    background-color: transparent;
+  }
+`, me = o(Q)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  appearance: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  float: left;
+  flex: 1;
+  background-color: transparent;
+  color: ${(e) => e.theme.colors.hero};
+  ::placeholder {
+    font-size: ${O.standardRegular.fontSize};
+    color: ${(e) => e.error ? g.important : e.theme.colors.grey1};
+    text-align: ${(e) => e.isFocused ? "left" : "right"};
+  }
+`, ge = o.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: ${r.sp1};
+`, fe = o(Y)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${g.important};
+`, xe = o(Z)`
+  color: ${g.important};
+  padding-left: ${r.sp1};
+`, P = o(B)`
+  color: ${(e) => e.error ? e.theme.colors.hero : e.theme.colors.primary};
+  max-width: 500px;
+  text-align: ${(e) => e.windowSize === "small" ? "start" : "end"};
+`, be = o.button`
+  border: none;
+  color: ${(e) => e.error ? e.theme.colors.hero : e.theme.colors.primary};
+  background: none;
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  display: flex;
+`, we = o(V)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: inherit;
+`, K = {
+  BACKSPACE: 8,
+  DELETE: 46
+}, $e = [9, 13, 32], ye = ["Enter", "Tab", "Space", " "], Se = (e) => {
+  const l = J;
+  return !!e.match(l);
+};
+function Ce(e) {
+  const {
+    error: l,
+    helpText: m,
+    inputValue: b,
+    placeholder: w,
+    chips: s,
+    disableInputWithChips: C = !1,
+    onUpdateInput: R,
+    onAdd: j,
+    onDelete: z,
+    onInvalidEmailAdd: v,
+    onDeleteAll: $
+  } = e, [a, y] = F.useState(!1), [u, h] = F.useState(-1), f = T(null), x = T(null), d = _(), E = (n) => {
+    R(n);
+  }, S = (n) => {
+    z(n);
+  }, p = q(
+    (n) => n.trim().length > 0 ? (Se(n) ? j(n) : v?.(n), !0) : !1,
+    [j, v]
+  ), k = (n) => {
+    h(n), i();
+  }, i = () => {
+    C === !1 && (y(!0), x?.current?.focus());
+  }, L = (n) => {
+    if ($e.indexOf(n.keyCode) >= 0 || ye.indexOf(n.key) >= 0) {
+      p(n.target.value) === !0 && n.preventDefault();
+      return;
+    }
+    switch (n.keyCode === 37 ? u > 0 ? h(u - 1) : u === -1 && h(s.length - 1) : n.keyCode === 39 && u !== s.length - 1 && h(u + 1), n.keyCode) {
+      case K.BACKSPACE:
+      case K.DELETE:
+        if (n.target.value === "") {
+          let c = s.length - 1;
+          u !== -1 && (c = u), S(c), h(-1);
+        }
+        break;
+    }
+  };
+  return G(() => {
+    const n = (c) => {
+      f.current != null && !f.current.contains(c.target) && a && (x?.current?.value != null && x?.current?.value.trim().length > 0 ? p(x.current.value) : (y(!1), h(-1)));
+    };
+    return document.addEventListener("mousedown", n), () => {
+      document.removeEventListener("mousedown", n);
+    };
+  }, [p, a]), /* @__PURE__ */ t.jsxs(ce, { windowSize: d, ref: f, children: [
+    /* @__PURE__ */ t.jsxs(
+      ue,
+      {
+        isFocused: a,
+        error: l,
+        disabled: C,
+        children: [
+          /* @__PURE__ */ t.jsxs(he, { chips: s, windowSize: d, children: [
+            a && /* @__PURE__ */ t.jsx(t.Fragment, { children: s.map((n, c) => /* @__PURE__ */ t.jsx(
+              de,
+              {
+                handleClick: () => {
+                  k(c);
+                },
+                handleDelete: () => S(c),
+                label: n,
+                selected: c === u,
+                error: l
+              },
+              n
+            )) }),
+            !a && d === "small" && /* @__PURE__ */ t.jsx(
+              P,
+              {
+                onClick: i,
+                error: l,
+                windowSize: d,
+                children: s.join(", ")
+              }
+            ),
+            /* @__PURE__ */ t.jsx(pe, { isFocused: a, error: l, disabled: !1, children: /* @__PURE__ */ t.jsx(
+              me,
+              {
+                id: "inputField",
+                isFocused: a,
+                error: l,
+                ref: x,
+                value: b,
+                onChange: E,
+                onKeyDown: L,
+                onFocus: i,
+                disabled: C,
+                autoComplete: "off",
+                placeholder: b.length === 0 && s.length === 0 ? w : void 0
+              }
+            ) }),
+            !a && d !== "small" && /* @__PURE__ */ t.jsx(
+              P,
+              {
+                onClick: i,
+                error: l,
+                windowSize: d,
+                children: s.join(", ")
+              }
+            )
+          ] }),
+          a && /* @__PURE__ */ t.jsx(be, { onClick: $, error: l, children: /* @__PURE__ */ t.jsx(we, {}) })
+        ]
+      },
+      "inputChips"
+    ),
+    m != null ? /* @__PURE__ */ t.jsxs(ge, { children: [
+      /* @__PURE__ */ t.jsx(fe, {}),
+      /* @__PURE__ */ t.jsx(xe, { children: m })
+    ] }) : ""
+  ] });
+}
+const D = {
+  width: new A(110, 150),
+  labelMarginLeft: new A(I[3], I[4]),
+  labelMarginRight: new A(I[3], I[4])
+}, Ee = {
+  infoLabel: new re("extraSmallRegular", "smallRegular")
+}, ke = o.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: 100%;
+  :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;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled ? "transparent" : e.theme.colors.primary};
+    .emailInputContainer {
+      background-color: ${(e) => e.isDisabled ? "transparent" : e.isError ? g.importantLight : e.theme.colors.background};
+    }
+  }
+`, je = o(te)`
+  color: ${(e) => e.theme.colors.hero};
+  width: ${(e) => D.width.valuePx(e.windowSize)};
+  margin-left: ${(e) => D.labelMarginLeft.valuePx(e.windowSize)};
+  margin-right: ${(e) => D.labelMarginRight.valuePx(e.windowSize)};
+  margin-top: ${r.sp2};
+  margin-bottom: ${r.sp2};
+`, ve = o.div`
+  width: calc(100% - ${(e) => D.width.valuePx(e.windowSize)});
+  margin-right: ${r.sp2};
+`, Ie = o(oe)`
+  color: ${(e) => e.theme.colors.grey1};
+  padding-right: ${r.sp2};
+  margin: 0;
+`, De = o.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+`, Re = o.div`
+  display: flex;
+  width: calc(100% - 150px);
+  justify-content: flex-end;
+  align-items: center;
+  text-align: end;
+  margin-top: ${r.sp1};
+`, M = o.label`
+  display: flex;
+  color: ${(e) => e.isError ? g.important : e.theme.colors.grey1};
+  ${(e) => `${Ee.infoLabel.style(e.size)}`};
+  padding-right: ${r.sp3};
+  text-align: right;
+`, ze = o.div`
+  display: flex;
+  margin-right: ${r.sp1};
+  align-items: center;
+`, Le = o(ne)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${g.successDark};
+`;
+function Ke({
+  name: e,
+  label: l,
+  style: m,
+  additionalInfoLabel: b,
+  showAdditionalInfoLabel: w = !0,
+  isSaveError: s = !1,
+  showErrorInfoLabel: C,
+  errorInfoLabel: R,
+  showTickIcon: j,
+  description: z,
+  placeholder: v,
+  registerOptions: $
+}) {
+  const [a, y] = X(""), {
+    control: u,
+    formState: { errors: h },
+    setError: f,
+    clearErrors: x
+  } = H(), d = _(), E = U(h, e), { cockpit: S } = ee.getLocalizedStrings();
+  return /* @__PURE__ */ t.jsx(
+    W,
+    {
+      name: e,
+      control: u,
+      defaultValue: [],
+      rules: $,
+      render: ({ field: { value: p, onChange: k } }) => /* @__PURE__ */ t.jsxs(
+        ke,
+        {
+          isError: E,
+          isDisabled: $?.disabled === !0,
+          style: m,
+          children: [
+            /* @__PURE__ */ t.jsxs(De, { children: [
+              /* @__PURE__ */ t.jsx(je, { windowSize: d, children: l }),
+              /* @__PURE__ */ t.jsx(
+                ve,
+                {
+                  windowSize: d,
+                  className: "emailInputContainer",
+                  children: /* @__PURE__ */ t.jsx(
+                    Ce,
+                    {
+                      placeholder: v ?? S.monthEndReport.addEmailAddress,
+                      inputValue: a,
+                      disableInputWithChips: $?.disabled === !0,
+                      chips: p,
+                      error: N(h, e, void 0) != null,
+                      onUpdateInput: (i) => {
+                        i.target.value.length === 0 && p.length === 0 && $?.required === !0 ? f(e, { type: "validate" }) : x(e), y(i.target.value);
+                      },
+                      onInvalidEmailAdd: () => {
+                        f(e, {
+                          message: S.monthEndReport.invalidEmail,
+                          type: "validate"
+                        });
+                      },
+                      onAdd: (i) => {
+                        if (p.indexOf(i) > -1) {
+                          f(e, {
+                            message: S.monthEndReport.duplicateEmail,
+                            type: "duplicate"
+                          });
+                          return;
+                        }
+                        k([...p, i]), y("");
+                      },
+                      onDelete: (i) => {
+                        const L = p.filter(
+                          (n, c) => i !== c
+                        );
+                        k(L);
+                      },
+                      onDeleteAll: () => {
+                        k([]), y("");
+                      }
+                    }
+                  )
+                }
+              )
+            ] }),
+            (w || E || s) && /* @__PURE__ */ t.jsxs(
+              M,
+              {
+                size: d,
+                isError: E || s,
+                children: [
+                  j === !0 ? /* @__PURE__ */ t.jsx(ze, { children: /* @__PURE__ */ t.jsx(Le, {}) }) : null,
+                  b
+                ]
+              }
+            ),
+            C === !0 && /* @__PURE__ */ t.jsx(M, { size: d, isError: !0, children: R }),
+            /* @__PURE__ */ t.jsx(Re, { children: /* @__PURE__ */ t.jsx(Ie, { children: z }) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Ke as L
+};

package/dist/LabeledItemWithButton-Bau76Nur.cjs

@@ -0,0 +1,21 @@
+"use strict";const n=require("./vendor-.pnpm-BW93Fnli.cjs"),a=require("@emotion/styled"),e=require("./index-C8marfrT.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]),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])};function d({isDisabled:i,label:o,button:r,style:p}){const s=e.useWindowSizeContext();return n.jsxRuntimeExports.jsxs(l,{size:s,style:p,children:[n.jsxRuntimeExports.jsx(e.Label,{isDisabled:i,label:o.label,style:{marginLeft:t.labelMarginLeft.value(s),marginRight:t.labelMarginRight.value(s),marginTop:t.labelMarginTop.value(s),width:o.width??"auto"}}),n.jsxRuntimeExports.jsx(e.ItemWithButton,{...r,style:{minHeight:t.controlHeight.value(s),display:"flex",flexGrow:1,...r.style}})]})}const l=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)};
+
+  :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;
+  }
+`;exports.LabeledItemWithButton=d;

package/dist/LabeledItemWithButton-CwfFEpAg.js

@@ -0,0 +1,74 @@
+import { j as n } from "./vendor-.pnpm-Q8NJHkXi.js";
+import d from "@emotion/styled";
+import { u as g, aB as h, R as t, aA as m, D as e } from "./index-DIy5Kjs9.js";
+const o = {
+  width: new t(343, 580, 726),
+  height: new t(e[6], e[6]),
+  controlHeight: new t(e[6], e[6]),
+  paddingTopBottom: new t(e[2], e[2]),
+  marginTop: new t(e[2], e[2]),
+  marginBottom: new t(e[2], e[2]),
+  marginRight: new t(e[2], e[2]),
+  labelMarginLeft: new t(e[3], e[4]),
+  labelMarginRight: new t(e[3], e[4]),
+  labelMarginTop: new t(e[2], e[2])
+};
+function x({
+  isDisabled: i,
+  label: r,
+  button: l,
+  style: s
+}) {
+  const a = g();
+  return /* @__PURE__ */ n.jsxs(p, { size: a, style: s, children: [
+    /* @__PURE__ */ n.jsx(
+      h,
+      {
+        isDisabled: i,
+        label: r.label,
+        style: {
+          marginLeft: o.labelMarginLeft.value(a),
+          marginRight: o.labelMarginRight.value(a),
+          marginTop: o.labelMarginTop.value(a),
+          width: r.width ?? "auto"
+        }
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      m,
+      {
+        ...l,
+        style: {
+          minHeight: o.controlHeight.value(a),
+          display: "flex",
+          flexGrow: 1,
+          ...l.style
+        }
+      }
+    )
+  ] });
+}
+const p = d.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(i) => i.theme.colors.grey5};
+  width: ${(i) => o.width.valuePx(i.size)};
+  min-height: ${(i) => o.height.valuePx(i.size)};
+  padding-right: ${(i) => o.marginRight.valuePx(i.size)};
+  padding-top: ${(i) => o.paddingTopBottom.valuePx(i.size)};
+  padding-bottom: ${(i) => o.paddingTopBottom.valuePx(i.size)};
+
+  :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;
+  }
+`;
+export {
+  x as L
+};

package/dist/LabeledNameField-2LMOrU0a.cjs

@@ -0,0 +1,141 @@
+"use strict";const o=require("./vendor-.pnpm-BW93Fnli.cjs"),l=require("@emotion/styled"),t=require("./index-C8marfrT.cjs"),k=require("react");function N({name:e,placeHolder:n,autoComplete:r="off",defaultValue:g,isDisabled:p,showFullNameError:x,style:i,registerOptions:a}){const[h,d]=k.useState(!1),{register:c,getValues:b,formState:{errors:f}}=o.useFormContext(),u=p==="disabled"||p==="readonly",y=Object.assign({},a),$=b(e),E=[$?.firstName,$?.lastName].join(" ").trim(),R=o.has(f,e)&&o.get(f,`${e}.firstName`)!=null,S=o.has(f,e)&&o.get(f,`${e}.lastName`)!=null,m=!(x===!0?R||S:!1)&&h===!1;return o.jsxRuntimeExports.jsx(o.ClickAwayListener,{onClickAway:()=>u===!1&&d(!1),children:o.jsxRuntimeExports.jsx(z,{style:i,isDisabled:u,tabIndex:u?void 0:0,onClick:()=>u===!1&&d(!0),children:o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[E.length>0?o.jsxRuntimeExports.jsx(w,{className:"name-field",isVisible:m,children:E}):o.jsxRuntimeExports.jsx(w,{className:"name-field name-placeholder",isVisible:m,children:n?.name}),o.jsxRuntimeExports.jsx(j,{placeholder:n?.firstName,type:void 0,isError:R,style:{...i,maxWidth:"100%"},disabled:u,...c(`${e}.firstName`,y),id:e,defaultValue:g?.firstName,autoComplete:r,isVisible:!m}),m?null:o.jsxRuntimeExports.jsx(L,{}),o.jsxRuntimeExports.jsx(j,{placeholder:n?.lastName,type:void 0,isError:S,style:{...i,maxWidth:"100%"},disabled:u,...c(`${e}.lastName`,y),id:e,defaultValue:g?.lastName,autoComplete:r,isVisible:!m})]})})})}const z=l.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey5};
+  &:hover,
+  &:focus {
+    input {
+      text-align: left;
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    span {
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.theme.colors.background};
+    }
+  }
+  input {
+    text-align: right;
+  }
+  &:focus-within {
+    outline: none;
+    ${t.textStyles.standardRegular.css};
+  }
+`,L=l.div`
+  background-color: ${e=>e.theme.colors.grey5};
+  min-width: ${t.Space.sp3};
+`,w=l(t.StandardRegularSp)`
+  display: ${e=>e.isVisible?"flex":"none"};
+  padding: 0 ${t.Space.sp3};
+  border-radius: ${t.Space.sp1};
+  height: 100%;
+  align-items: center;
+  width: 100%;
+  justify-content: flex-end;
+  color: ${e=>e.theme.colors.primary};
+  &.name-placeholder {
+    color: ${e=>e.theme.colors.grey1};
+  }
+`,j=l(t.StandardRegularInput)`
+  display: ${e=>e.isVisible?"flex":"none"};
+  width: 100%;
+  text-align: right;
+  border-radius: ${t.Space.sp1};
+  padding: 0 ${t.Space.sp3};
+  border-width: ${t.Space.sp0};
+  outline-width: ${t.Space.sp0};
+  color: ${e=>e.isError?t.Colors.important:e.theme.colors.primary};
+  background-color: inherit;
+  &:disabled {
+    background-color: ${e=>e.theme.colors.grey5};
+  }
+  ::placeholder {
+    color: ${e=>e.isError?t.Colors.important:e.theme.colors.grey1};
+  }
+  &:focus {
+    outline: none;
+  }
+`,s={width:new t.ResponsiveSized(343,580,726),height:new t.ResponsiveSized(t.sp[6],t.sp[6]),controlHeight:new t.ResponsiveSized(t.sp[6],t.sp[6]),paddingTopBottom:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginTop:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginBottom:new t.ResponsiveSized(t.sp[2],t.sp[2]),marginRight:new t.ResponsiveSized(t.sp[2],t.sp[2]),labelMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginTop:new t.ResponsiveSized(t.sp[2],t.sp[2])},C={infoLabel:new t.ResponsiveSizedStyle("extraSmallRegular","smallRegular")};function V({isDisabled:e,label:n,nameField:r,style:g,errorInfoLabel:p,showAdditionalInfoLabel:x}){const i=t.useWindowSizeContext(),{formState:{errors:a}}=o.useFormContext(),h=o.has(a,r.name)&&o.get(a,`${r.name}.firstName`)!=null,d=o.has(a,r.name)&&o.get(a,`${r.name}.lastName`)!=null,c=r.showFullNameError===!0?h||d:!1,b=h||d||c;return o.jsxRuntimeExports.jsxs(F,{size:i,style:g,isDisabled:e!=null,isFirstNameError:h,isLastNameError:d,children:[o.jsxRuntimeExports.jsx(t.Label,{isDisabled:e,label:n.label,style:{marginLeft:s.labelMarginLeft.value(i),marginRight:s.labelMarginRight.value(i),marginTop:s.labelMarginTop.value(i),width:n.width??"auto"}}),o.jsxRuntimeExports.jsxs(I,{labelWidth:n.width,children:[o.jsxRuntimeExports.jsx(N,{...r,isDisabled:e,style:{flexGrow:1,height:s.controlHeight.value(i)}}),(x!=null||c)&&o.jsxRuntimeExports.jsx(v,{size:i,hasError:c,children:x?.label}),b?o.jsxRuntimeExports.jsx(v,{size:i,hasError:b,children:p}):null]})]})}const F=l.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>s.width.valuePx(e.size)};
+  min-height: ${e=>s.height.valuePx(e.size)};
+  padding-right: ${e=>s.marginRight.valuePx(e.size)};
+  padding-top: ${e=>s.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>s.paddingTopBottom.valuePx(e.size)};
+
+  :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;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+
+    .name-field {
+      background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.theme.colors.background};
+    }
+
+    input:nth-of-type(1) {
+      background-color: ${e=>e.isFirstNameError?t.Colors.importantLight:e.theme.colors.background};
+    }
+
+    input:nth-of-type(2) {
+      background-color: ${e=>e.isLastNameError?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+  input {
+    text-align: left;
+    background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.theme.colors.background};
+  }
+
+  input:nth-of-type(1) {
+    background-color: ${e=>e.isFirstNameError?t.Colors.importantLight:e.theme.colors.background};
+  }
+
+  input:nth-of-type(2) {
+    background-color: ${e=>e.isLastNameError?t.Colors.importantLight:e.theme.colors.background};
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${e=>e.isDisabled===!0?e.theme.colors.grey3:e.theme.colors.primary};
+    input,
+    .name-field {
+      background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.theme.colors.background};
+    }
+
+    input:nth-of-type(1) {
+      background-color: ${e=>e.isFirstNameError?t.Colors.importantLight:e.theme.colors.background};
+    }
+
+    input:nth-of-type(2) {
+      background-color: ${e=>e.isLastNameError?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+`,v=l.label`
+  color: ${e=>e.hasError===!0?t.Colors.important:e.additionalInfoTextColor!=null?e.additionalInfoTextColor:e.theme.colors.grey1};
+  width: auto;
+  ${e=>`${C.infoLabel.style(e.size)}`};
+  padding-right: ${t.Space.sp3};
+  text-align: right;
+`,I=l.div`
+  display: flex;
+  width: ${e=>e.labelWidth!=null?`calc(100% - ${e.labelWidth}px)`:"auto"};
+  justify-content: flex-end;
+  flex-direction: column;
+  position: relative;
+`;exports.LabeledNameField=V;