@zeniai/web-components 3.16.96 → 3.16.97

package/dist/LabeledEmailInputField-DrkByNUJ.cjs

@@ -0,0 +1,182 @@
+"use strict";const r=require("./vendor-.pnpm-D0ILHvHB.cjs"),f=require("react"),o=require("@emotion/styled"),t=require("./index-CQwLnHSI.cjs"),T=o.div`
+  display: flex;
+  align-items: center;
+  padding: ${t.Space.sp1} ${t.Space.sp2};
+  cursor: pointer;
+  border: ${e=>`1px solid ${e.selected?e.theme.colors.primary:e.theme.colors.grey1}`};
+  column-gap: ${t.Space.sp2};
+  border-radius: ${t.Space.sp1};
+  height: ${t.Space.sp5};
+  margin-right: ${t.Space.sp3};
+  box-sizing: border-box;
+`,P=o(t.StandardRegularSp)`
+  color: ${e=>e.error?e.theme.colors.hero:e.theme.colors.primary};
+`,K=o.button`
+  border: none;
+  color: ${e=>e.error?e.theme.colors.hero:e.theme.colors.primary};
+  background: none;
+  cursor: pointer;
+  display: flex;
+`,M=o(t.SvgClose)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: inherit;
+`;function q(e){const{label:i,error:x,handleDelete:S,selected:E}=e;return r.jsxRuntimeExports.jsxs(T,{selected:E,error:x,children:[r.jsxRuntimeExports.jsx(P,{selected:E,error:x,children:i}),r.jsxRuntimeExports.jsx(K,{onClick:S,error:x,children:r.jsxRuntimeExports.jsx(M,{})})]})}const B=o.div`
+  width: 100%;
+  position: relative;
+`,V=o.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-flow: row wrap;
+  cursor: text;
+  border-radius: ${t.Space.sp1};
+  padding: 0 ${t.Space.sp3};
+  min-height: ${t.Space.sp6};
+  align-items: center;
+  background-color: ${e=>e.isFocused&&!e.error?e.theme.colors.background:e.disabled?e.theme.colors.grey5:e.error?t.Colors.importantLight:"transparent"};
+  &:hover {
+    background-color: ${e=>e.error?t.Colors.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};
+    }
+  }
+`,W=o.div`
+  display: flex;
+  flex-flow: row wrap;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: ${t.Space.sp2} 0;
+  overflow-x: auto;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`,_=o.div`
+  width: 100%;
+  border-radius: 0;
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex: 1;
+  padding: ${t.Space.sp0};
+  margin-top: ${t.Space.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;
+  }
+`,H=o(t.StandardRegularInput)`
+  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: ${t.textStyles.standardRegular.fontSize};
+    color: ${e=>e.error?t.Colors.important:e.theme.colors.grey1};
+    text-align: ${e=>e.isFocused?"left":"right"};
+  }
+`,U=o.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: ${t.Space.sp1};
+`,N=o(t.SvgHighImportance)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${t.Colors.important};
+`,G=o(t.ExtraSmallMediumSp)`
+  color: ${t.Colors.important};
+  padding-left: ${t.Space.sp1};
+`,L=o(t.StandardRegularSp)`
+  color: ${e=>e.error?e.theme.colors.hero:e.theme.colors.primary};
+  max-width: 500px;
+  text-align: ${e=>e.windowSize==="small"?"start":"end"};
+`,J=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;
+`,O=o(t.SvgClose)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: inherit;
+`,A={BACKSPACE:8,DELETE:46},Q=[9,13,32],X=["Enter","Tab","Space"," "],Y=e=>{const i=t.EMAIL_PATTERN;return!!e.match(i)};function Z(e){const{error:i,helpText:x,inputValue:S,placeholder:E,chips:l,disableInputWithChips:$=!1,onUpdateInput:I,onAdd:R,onDelete:z,onInvalidEmailAdd:v,onDeleteAll:b}=e,[a,j]=f.useState(!1),[u,p]=f.useState(-1),m=f.useRef(null),g=f.useRef(null),c=t.useWindowSizeContext(),y=n=>{I(n)},w=n=>{z(n)},h=f.useCallback(n=>n.trim().length>0?(Y(n)?R(n):v?.(n),!0):!1,[R,v]),C=n=>{p(n),s()},s=()=>{$===!1&&(j(!0),g?.current?.focus())},D=n=>{if(Q.indexOf(n.keyCode)>=0||X.indexOf(n.key)>=0){h(n.target.value)===!0&&n.preventDefault();return}switch(n.keyCode===37?u>0?p(u-1):u===-1&&p(l.length-1):n.keyCode===39&&u!==l.length-1&&p(u+1),n.keyCode){case A.BACKSPACE:case A.DELETE:if(n.target.value===""){let d=l.length-1;u!==-1&&(d=u),w(d),p(-1)}break}};return f.useEffect(()=>{const n=d=>{m.current!=null&&!m.current.contains(d.target)&&a&&(g?.current?.value!=null&&g?.current?.value.trim().length>0?h(g.current.value):(j(!1),p(-1)))};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[h,a]),r.jsxRuntimeExports.jsxs(B,{windowSize:c,ref:m,children:[r.jsxRuntimeExports.jsxs(V,{isFocused:a,error:i,disabled:$,children:[r.jsxRuntimeExports.jsxs(W,{chips:l,windowSize:c,children:[a&&r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:l.map((n,d)=>r.jsxRuntimeExports.jsx(q,{handleClick:()=>{C(d)},handleDelete:()=>w(d),label:n,selected:d===u,error:i},n))}),!a&&c==="small"&&r.jsxRuntimeExports.jsx(L,{onClick:s,error:i,windowSize:c,children:l.join(", ")}),r.jsxRuntimeExports.jsx(_,{isFocused:a,error:i,disabled:!1,children:r.jsxRuntimeExports.jsx(H,{id:"inputField",isFocused:a,error:i,ref:g,value:S,onChange:y,onKeyDown:D,onFocus:s,disabled:$,autoComplete:"off",placeholder:S.length===0&&l.length===0?E:void 0})}),!a&&c!=="small"&&r.jsxRuntimeExports.jsx(L,{onClick:s,error:i,windowSize:c,children:l.join(", ")})]}),a&&r.jsxRuntimeExports.jsx(J,{onClick:b,error:i,children:r.jsxRuntimeExports.jsx(O,{})})]},"inputChips"),x!=null?r.jsxRuntimeExports.jsxs(U,{children:[r.jsxRuntimeExports.jsx(N,{}),r.jsxRuntimeExports.jsx(G,{children:x})]}):""]})}const k={width:new t.ResponsiveSized(110,150),labelMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),labelMarginRight:new t.ResponsiveSized(t.sp[3],t.sp[4])},ee={infoLabel:new t.ResponsiveSizedStyle("extraSmallRegular","smallRegular")},te=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?t.Colors.importantLight:e.theme.colors.background};
+    }
+  }
+`,re=o(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>k.width.valuePx(e.windowSize)};
+  margin-left: ${e=>k.labelMarginLeft.valuePx(e.windowSize)};
+  margin-right: ${e=>k.labelMarginRight.valuePx(e.windowSize)};
+  margin-top: ${t.Space.sp2};
+  margin-bottom: ${t.Space.sp2};
+`,ne=o.div`
+  width: calc(100% - ${e=>k.width.valuePx(e.windowSize)});
+  margin-right: ${t.Space.sp2};
+`,oe=o(t.SmallRegularP)`
+  color: ${e=>e.theme.colors.grey1};
+  padding-right: ${t.Space.sp2};
+  margin: 0;
+`,ie=o.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+`,se=o.div`
+  display: flex;
+  width: calc(100% - 150px);
+  justify-content: flex-end;
+  align-items: center;
+  text-align: end;
+  margin-top: ${t.Space.sp1};
+`,F=o.label`
+  display: flex;
+  color: ${e=>e.isError?t.Colors.important:e.theme.colors.grey1};
+  ${e=>`${ee.infoLabel.style(e.size)}`};
+  padding-right: ${t.Space.sp3};
+  text-align: right;
+`,le=o.div`
+  display: flex;
+  margin-right: ${t.Space.sp1};
+  align-items: center;
+`,ae=o(t.SvgTick)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${t.Colors.successDark};
+`;function ce({name:e,label:i,style:x,additionalInfoLabel:S,showAdditionalInfoLabel:E=!0,isSaveError:l=!1,showErrorInfoLabel:$,errorInfoLabel:I,showTickIcon:R,description:z,placeholder:v,registerOptions:b}){const[a,j]=f.useState(""),{control:u,formState:{errors:p},setError:m,clearErrors:g}=r.useFormContext(),c=t.useWindowSizeContext(),y=r.has(p,e),{cockpit:w}=t.appLocale.getLocalizedStrings();return r.jsxRuntimeExports.jsx(r.Controller,{name:e,control:u,defaultValue:[],rules:b,render:({field:{value:h,onChange:C}})=>r.jsxRuntimeExports.jsxs(te,{isError:y,isDisabled:b?.disabled===!0,style:x,children:[r.jsxRuntimeExports.jsxs(ie,{children:[r.jsxRuntimeExports.jsx(re,{windowSize:c,children:i}),r.jsxRuntimeExports.jsx(ne,{windowSize:c,className:"emailInputContainer",children:r.jsxRuntimeExports.jsx(Z,{placeholder:v??w.monthEndReport.addEmailAddress,inputValue:a,disableInputWithChips:b?.disabled===!0,chips:h,error:r.get(p,e,void 0)!=null,onUpdateInput:s=>{s.target.value.length===0&&h.length===0&&b?.required===!0?m(e,{type:"validate"}):g(e),j(s.target.value)},onInvalidEmailAdd:()=>{m(e,{message:w.monthEndReport.invalidEmail,type:"validate"})},onAdd:s=>{if(h.indexOf(s)>-1){m(e,{message:w.monthEndReport.duplicateEmail,type:"duplicate"});return}C([...h,s]),j("")},onDelete:s=>{const D=h.filter((n,d)=>s!==d);C(D)},onDeleteAll:()=>{C([]),j("")}})})]}),(E||y||l)&&r.jsxRuntimeExports.jsxs(F,{size:c,isError:y||l,children:[R===!0?r.jsxRuntimeExports.jsx(le,{children:r.jsxRuntimeExports.jsx(ae,{})}):null,S]}),$===!0&&r.jsxRuntimeExports.jsx(F,{size:c,isError:!0,children:I}),r.jsxRuntimeExports.jsx(se,{children:r.jsxRuntimeExports.jsx(oe,{children:z})})]})})}exports.LabeledEmailInputField=ce;

package/dist/LabeledItemWithButton-BqdMQUnO.cjs

@@ -0,0 +1,21 @@
+"use strict";const n=require("./vendor-.pnpm-D0ILHvHB.cjs"),a=require("@emotion/styled"),e=require("./index-CQwLnHSI.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-CRe8E9_S.js

@@ -0,0 +1,74 @@
+import { j as n } from "./vendor-.pnpm-B2klaOGU.js";
+import d from "@emotion/styled";
+import { u as g, aB as h, R as t, av as m, D as e } from "./index-C65jHl_B.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-CfZMtHcM.js

@@ -0,0 +1,293 @@
+import { d as C, m as k, X as N, j as r, C as I } from "./vendor-.pnpm-B2klaOGU.js";
+import c from "@emotion/styled";
+import { t as T, S as n, n as D, C as l, fH as F, u as W, aB as M, R as i, D as t, aw as B } from "./index-C65jHl_B.js";
+import { useState as P } from "react";
+function A({
+  name: e,
+  placeHolder: d,
+  autoComplete: a = "off",
+  defaultValue: x,
+  isDisabled: y,
+  showFullNameError: $,
+  style: o,
+  registerOptions: u
+}) {
+  const [b, h] = P(!1), {
+    register: g,
+    getValues: p,
+    formState: { errors: w }
+  } = C(), m = y === "disabled" || y === "readonly", v = Object.assign({}, u), E = p(e), S = [E?.firstName, E?.lastName].join(" ").trim(), j = k(w, e) && N(w, `${e}.firstName`) != null, L = k(w, e) && N(w, `${e}.lastName`) != null, f = !($ === !0 ? j || L : !1) && b === !1;
+  return /* @__PURE__ */ r.jsx(
+    I,
+    {
+      onClickAway: () => m === !1 && h(!1),
+      children: /* @__PURE__ */ r.jsx(
+        G,
+        {
+          style: o,
+          isDisabled: m,
+          tabIndex: m ? void 0 : 0,
+          onClick: () => m === !1 && h(!0),
+          children: /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+            S.length > 0 ? /* @__PURE__ */ r.jsx(
+              z,
+              {
+                className: "name-field",
+                isVisible: f,
+                children: S
+              }
+            ) : /* @__PURE__ */ r.jsx(
+              z,
+              {
+                className: "name-field name-placeholder",
+                isVisible: f,
+                children: d?.name
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              R,
+              {
+                placeholder: d?.firstName,
+                type: void 0,
+                isError: j,
+                style: { ...o, maxWidth: "100%" },
+                disabled: m,
+                ...g(`${e}.firstName`, v),
+                id: e,
+                defaultValue: x?.firstName,
+                autoComplete: a,
+                isVisible: !f
+              }
+            ),
+            f ? null : /* @__PURE__ */ r.jsx(H, {}),
+            /* @__PURE__ */ r.jsx(
+              R,
+              {
+                placeholder: d?.lastName,
+                type: void 0,
+                isError: L,
+                style: { ...o, maxWidth: "100%" },
+                disabled: m,
+                ...g(`${e}.lastName`, v),
+                id: e,
+                defaultValue: x?.lastName,
+                autoComplete: a,
+                isVisible: !f
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+const G = c.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.standardRegular.css};
+  }
+`, H = c.div`
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-width: ${n.sp3};
+`, z = c(D)`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  padding: 0 ${n.sp3};
+  border-radius: ${n.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};
+  }
+`, R = c(F)`
+  display: ${(e) => e.isVisible ? "flex" : "none"};
+  width: 100%;
+  text-align: right;
+  border-radius: ${n.sp1};
+  padding: 0 ${n.sp3};
+  border-width: ${n.sp0};
+  outline-width: ${n.sp0};
+  color: ${(e) => e.isError ? l.important : e.theme.colors.primary};
+  background-color: inherit;
+  &:disabled {
+    background-color: ${(e) => e.theme.colors.grey5};
+  }
+  ::placeholder {
+    color: ${(e) => e.isError ? l.important : e.theme.colors.grey1};
+  }
+  &:focus {
+    outline: none;
+  }
+`, s = {
+  width: new i(343, 580, 726),
+  height: new i(t[6], t[6]),
+  controlHeight: new i(t[6], t[6]),
+  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])
+}, O = {
+  infoLabel: new B("extraSmallRegular", "smallRegular")
+};
+function Z({
+  isDisabled: e,
+  label: d,
+  nameField: a,
+  style: x,
+  errorInfoLabel: y,
+  showAdditionalInfoLabel: $
+}) {
+  const o = W(), {
+    formState: { errors: u }
+  } = C(), b = k(u, a.name) && N(u, `${a.name}.firstName`) != null, h = k(u, a.name) && N(u, `${a.name}.lastName`) != null, g = a.showFullNameError === !0 ? b || h : !1, p = b || h || g;
+  return /* @__PURE__ */ r.jsxs(
+    X,
+    {
+      size: o,
+      style: x,
+      isDisabled: e != null,
+      isFirstNameError: b,
+      isLastNameError: h,
+      children: [
+        /* @__PURE__ */ r.jsx(
+          M,
+          {
+            isDisabled: e,
+            label: d.label,
+            style: {
+              marginLeft: s.labelMarginLeft.value(o),
+              marginRight: s.labelMarginRight.value(o),
+              marginTop: s.labelMarginTop.value(o),
+              width: d.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsxs(q, { labelWidth: d.width, children: [
+          /* @__PURE__ */ r.jsx(
+            A,
+            {
+              ...a,
+              isDisabled: e,
+              style: {
+                flexGrow: 1,
+                height: s.controlHeight.value(o)
+              }
+            }
+          ),
+          ($ != null || g) && /* @__PURE__ */ r.jsx(V, { size: o, hasError: g, children: $?.label }),
+          p ? /* @__PURE__ */ r.jsx(V, { size: o, hasError: p, children: y }) : null
+        ] })
+      ]
+    }
+  );
+}
+const X = c.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 ? l.importantLight : e.theme.colors.background};
+    }
+
+    input:nth-of-type(2) {
+      background-color: ${(e) => e.isLastNameError ? l.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 ? l.importantLight : e.theme.colors.background};
+  }
+
+  input:nth-of-type(2) {
+    background-color: ${(e) => e.isLastNameError ? l.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 ? l.importantLight : e.theme.colors.background};
+    }
+
+    input:nth-of-type(2) {
+      background-color: ${(e) => e.isLastNameError ? l.importantLight : e.theme.colors.background};
+    }
+  }
+`, V = c.label`
+  color: ${(e) => e.hasError === !0 ? l.important : e.additionalInfoTextColor != null ? e.additionalInfoTextColor : e.theme.colors.grey1};
+  width: auto;
+  ${(e) => `${O.infoLabel.style(e.size)}`};
+  padding-right: ${n.sp3};
+  text-align: right;
+`, q = c.div`
+  display: flex;
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
+  justify-content: flex-end;
+  flex-direction: column;
+  position: relative;
+`;
+export {
+  Z as L
+};