@zeniai/web-components 3.16.60 → 3.16.62

package/dist/LabeledNameField-0BHn47wL.js

@@ -1,293 +0,0 @@
-import { d as C, m as k, an as N, j as o, C as I } from "./vendor-.pnpm-DtFedGku.js";
-import c from "@emotion/styled";
-import { t as T, S as n, o as D, C as l, fE as F, u as W, aB as M, R as i, D as t, av as B } from "./index-BPKgPg77.js";
-import { useState as P } from "react";
-function A({
-  name: e,
-  placeHolder: d,
-  autoComplete: a = "off",
-  defaultValue: x,
-  isDisabled: y,
-  showFullNameError: $,
-  style: r,
-  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__ */ o.jsx(
-    I,
-    {
-      onClickAway: () => m === !1 && h(!1),
-      children: /* @__PURE__ */ o.jsx(
-        G,
-        {
-          style: r,
-          isDisabled: m,
-          tabIndex: m ? void 0 : 0,
-          onClick: () => m === !1 && h(!0),
-          children: /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-            S.length > 0 ? /* @__PURE__ */ o.jsx(
-              z,
-              {
-                className: "name-field",
-                isVisible: f,
-                children: S
-              }
-            ) : /* @__PURE__ */ o.jsx(
-              z,
-              {
-                className: "name-field name-placeholder",
-                isVisible: f,
-                children: d?.name
-              }
-            ),
-            /* @__PURE__ */ o.jsx(
-              R,
-              {
-                placeholder: d?.firstName,
-                type: void 0,
-                isError: j,
-                style: { ...r, maxWidth: "100%" },
-                disabled: m,
-                ...g(`${e}.firstName`, v),
-                id: e,
-                defaultValue: x?.firstName,
-                autoComplete: a,
-                isVisible: !f
-              }
-            ),
-            f ? null : /* @__PURE__ */ o.jsx(O, {}),
-            /* @__PURE__ */ o.jsx(
-              R,
-              {
-                placeholder: d?.lastName,
-                type: void 0,
-                isError: L,
-                style: { ...r, 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};
-  }
-`, O = 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])
-}, q = {
-  infoLabel: new B("extraSmallRegular", "smallRegular")
-};
-function Z({
-  isDisabled: e,
-  label: d,
-  nameField: a,
-  style: x,
-  errorInfoLabel: y,
-  showAdditionalInfoLabel: $
-}) {
-  const r = 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__ */ o.jsxs(
-    H,
-    {
-      size: r,
-      style: x,
-      isDisabled: e != null,
-      isFirstNameError: b,
-      isLastNameError: h,
-      children: [
-        /* @__PURE__ */ o.jsx(
-          M,
-          {
-            isDisabled: e,
-            label: d.label,
-            style: {
-              marginLeft: s.labelMarginLeft.value(r),
-              marginRight: s.labelMarginRight.value(r),
-              marginTop: s.labelMarginTop.value(r),
-              width: d.width ?? "auto"
-            }
-          }
-        ),
-        /* @__PURE__ */ o.jsxs(J, { labelWidth: d.width, children: [
-          /* @__PURE__ */ o.jsx(
-            A,
-            {
-              ...a,
-              isDisabled: e,
-              style: {
-                flexGrow: 1,
-                height: s.controlHeight.value(r)
-              }
-            }
-          ),
-          ($ != null || g) && /* @__PURE__ */ o.jsx(V, { size: r, hasError: g, children: $?.label }),
-          p ? /* @__PURE__ */ o.jsx(V, { size: r, hasError: p, children: y }) : null
-        ] })
-      ]
-    }
-  );
-}
-const H = 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) => `${q.infoLabel.style(e.size)}`};
-  padding-right: ${n.sp3};
-  text-align: right;
-`, J = 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
-};

package/dist/LabeledNameField-D1y4s093.cjs

@@ -1,141 +0,0 @@
-"use strict";const o=require("./vendor-.pnpm-CT-Z_-kn.cjs"),l=require("@emotion/styled"),t=require("./index-DUVvaTyk.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;