@zeniai/web-components 3.16.73 → 3.16.74

package/dist/LabeledCreatableSingleSelectField-CU_zTx1O.js

@@ -1,515 +0,0 @@
-import { u as N, j as i, br as _, n as A, V as G, c as j, d as T, m as I, e as q } from "./vendor-.pnpm-DtFedGku.js";
-import s from "@emotion/styled";
-import { a as J, S as l, j as S, hd as K, w as Q, C as p, gi as U, t as R, n as X, b as Y, u as Z, aB as ee, R as u, D as r, av as te } from "./index-BZH5WUM6.js";
-const ie = ({
-  allValues: e,
-  selectedValue: o,
-  name: n,
-  onSelectedValueChanged: a,
-  isDisabled: c,
-  placeholder: g,
-  isOptionRemovable: w = !0,
-  addIconInCreateLabel: x,
-  getLabelForId: f,
-  tagProperties: h,
-  hasError: C,
-  style: d
-}) => {
-  const $ = N(), y = je(e, f), O = J.getLocalizedStrings().dropDowns, L = y.sort((t, m) => t.label.localeCompare(m.label)), v = o != null && o ? V(o, f) : void 0, M = {
-    container: (t) => ({
-      ...t,
-      width: "100%",
-      ...d
-    }),
-    menu: (t) => ({
-      ...t,
-      backgroundColor: $.colors.grey5,
-      borderRadius: l.sp1,
-      boxShadow: `${l.sp0} 2px ${l.sp2} ${$.colors.dropShadowHover}`,
-      border: `1px solid ${$.colors.grey3}`,
-      // TODO - Add border and radius to every dropdown menu
-      whiteSpace: "nowrap",
-      zIndex: 2,
-      width: "100%",
-      margin: `1px ${l.sp0} ${l.sp0} ${l.sp0}`,
-      overflow: "hidden"
-    }),
-    menuList: (t) => ({
-      ...t,
-      borderRadius: l.sp1
-    }),
-    input: (t, { selectProps: m }) => ({
-      ...t,
-      ":after": {
-        width: m.inputValue.length > 0 ? l.sp0 : "unset"
-      }
-    })
-  }, E = (t) => /* @__PURE__ */ i.jsxs(xe, { children: [
-    /* @__PURE__ */ i.jsx(be, { children: /* @__PURE__ */ i.jsx(Q, { fill: "currentColor", height: l.sp3, width: l.sp3 }) }),
-    /* @__PURE__ */ i.jsx(fe, { children: `${O.createOption} "${t}"` })
-  ] }), B = (t) => {
-    const { menuIsOpen: m, isFocused: k, isDisabled: z, selectProps: W } = t, { value: F } = W;
-    return /* @__PURE__ */ i.jsx(
-      se,
-      {
-        menuIsOpen: m,
-        isFocused: k,
-        isDisabled: z,
-        selectedValue: F,
-        hasError: C,
-        "data-testid": S(
-          "creatable-single-select-control",
-          n
-        ),
-        children: /* @__PURE__ */ i.jsx(j.Control, { ...t, className: "select-control", children: t.children })
-      }
-    );
-  }, H = (t) => /* @__PURE__ */ i.jsx(ye, { children: /* @__PURE__ */ i.jsxs(j.SingleValue, { ...t, children: [
-    t.selectProps.menuIsOpen === !1 && h != null && h.isTagShownForOption(t.data.value) === !0 && /* @__PURE__ */ i.jsx(we, { children: /* @__PURE__ */ i.jsx($e, { style: h.style, children: h.tagName }) }),
-    t.children
-  ] }) }), P = (t) => {
-    const { selectProps: m } = t, { placeholder: k, value: z } = m;
-    return /* @__PURE__ */ i.jsx(
-      j.Input,
-      {
-        ...t,
-        autoComplete: "new-password",
-        placeholder: z == null ? k : void 0,
-        "data-testid": S("creatable-single-select-input", n),
-        children: t.children
-      }
-    );
-  };
-  return /* @__PURE__ */ i.jsx(
-    _,
-    {
-      isMulti: !1,
-      onCreateOption: (t) => {
-        const m = K(t);
-        a(m);
-      },
-      onChange: (t) => {
-        w !== !1 && t?.value != null && v?.value === t.value ? a(void 0) : a(t?.value);
-      },
-      formatCreateLabel: (t) => x === !0 ? E(t) : `${O.otherOption} ${t}`,
-      tabSelectsValue: !1,
-      openMenuOnFocus: !0,
-      "data-testid": S("creatable-single-select", n),
-      classNamePrefix: "creatable-single-select-field",
-      createOptionPosition: "last",
-      allowCreateWhileLoading: !0,
-      controlShouldRenderValue: !0,
-      placeholder: g,
-      menuPlacement: "auto",
-      maxMenuHeight: 288,
-      defaultValue: v,
-      value: v,
-      menuShouldScrollIntoView: !1,
-      closeMenuOnSelect: !0,
-      components: {
-        Control: B,
-        Option: re,
-        Input: P,
-        SingleValue: H,
-        ValueContainer: le,
-        DropdownIndicator: ve,
-        IndicatorSeparator: Se,
-        ClearIndicator: Ce,
-        Placeholder: ne,
-        MenuList: oe
-      },
-      hideSelectedOptions: !1,
-      styles: M,
-      options: L,
-      isClearable: !0,
-      isSearchable: !0,
-      isDisabled: c != null
-    },
-    A()
-  );
-}, le = (e) => /* @__PURE__ */ i.jsx(j.ValueContainer, { ...e, className: "select-value-container", children: e.children }), oe = (e) => {
-  const { options: n, children: a, maxHeight: c, getValue: g } = e, [w] = g(), x = n.indexOf(w) * 40;
-  return /* @__PURE__ */ i.jsx(
-    G,
-    {
-      height: a.length > 7 ? c : a.length * 40,
-      width: "100%",
-      itemCount: a.length,
-      itemSize: () => 40,
-      initialScrollOffset: x,
-      children: ({ index: f, style: h }) => /* @__PURE__ */ i.jsx(ue, { style: h, children: a[f] })
-    }
-  );
-}, ne = () => null, re = (e) => {
-  const { isSelected: o, isDisabled: n, isFocused: a, data: c } = e, g = typeof c.label == "string" ? c.label : c.value;
-  return /* @__PURE__ */ i.jsx(
-    ae,
-    {
-      isFocused: a,
-      isSelected: o,
-      isDisabled: n,
-      children: /* @__PURE__ */ i.jsx(j.Option, { ...e, className: "select-option", children: /* @__PURE__ */ i.jsxs(
-        ce,
-        {
-          "data-testid": S(
-            "creatable-single-select-option",
-            g
-          ),
-          children: [
-            /* @__PURE__ */ i.jsx(he, { children: /* @__PURE__ */ i.jsx(de, { isSelected: o, isDisabled: n, children: e.label }) }),
-            o ? /* @__PURE__ */ i.jsxs(ge, { children: [
-              /* @__PURE__ */ i.jsx(me, { className: "right-tick-icon" }),
-              /* @__PURE__ */ i.jsx(pe, { className: "close-tick-icon" })
-            ] }) : null
-          ]
-        }
-      ) })
-    }
-  );
-}, se = s.div`
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey5};
-  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
-  .select-control {
-    border: none;
-    height: ${l.sp6};
-    background-color: ${(e) => e.hasError === !0 ? p.importantLight : e.menuIsOpen ? e.theme.colors.background : e.theme.colors.grey5};
-    box-shadow: none;
-    &:hover {
-      fill: ${(e) => e.theme.colors.primary};
-      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.hasError === !0 ? p.importantLight : e.theme.colors.background};
-      border-color: none;
-    }
-    width: auto;
-    min-height: auto;
-    cursor: pointer;
-  }
-  .select-value-container {
-    width: 100%;
-    display: flex;
-    margin: ${l.sp0} ${l.sp3};
-    padding: 0;
-    max-width: 100%;
-    height: 100%;
-    min-width: auto;
-    align-items: center;
-    flex-wrap: nowrap;
-    cursor: pointer;
-    justify-content: ${(e) => e.menuIsOpen === !1 ? "flex-end" : "flex-start"};
-
-    .creatable-single-select-field__single-value {
-      display: flex;
-      border-radius: ${l.sp0};
-      margin: ${l.sp0};
-      color: ${(e) => e.hasError === !0 ? p.important : e.theme.colors.primary};
-      ${R.standardRegular.css};
-      box-sizing: border-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .creatable-single-select-field__input-container {
-      display: flex;
-      width: ${(e) => e.menuIsOpen === !1 && e.selectedValue != null ? l.sp0 : "100%"};
-      position: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "initial" : "absolute"};
-      ${R.standardRegular.css};
-      color: ${(e) => e.hasError === !0 ? p.important : e.theme.colors.primary};
-      margin: ${l.sp0};
-      cursor: inherit;
-
-      > input {
-        text-align: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "right" : "initial"};
-        align-items: center;
-        overflow: hidden;
-        cursor: inherit;
-        :disabled {
-          visibility: visible;
-        }
-        ::placeholder {
-          color: ${(e) => e.hasError === !0 ? p.important : e.theme.colors.grey1};
-        }
-      }
-    }
-  }
-`, ae = s.div`
-  border-radius: inherit;
-  .select-option {
-    ${R.smallRegular.css};
-    height: ${l.sp6};
-    padding: 9px ${l.sp3};
-    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
-    background-color: ${(e) => e.isSelected || e.isFocused ? e.theme.colors.background : e.theme.colors.grey5};
-    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
-    border-top: none;
-    border-radius: inherit;
-    .close-tick-icon {
-      display: none;
-    }
-
-    &:hover {
-      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
-      color: ${(e) => e.isDisabled ? e.theme.colors.champion : e.theme.colors.primary};
-      .right-tick-icon {
-        display: none;
-      }
-      .close-tick-icon {
-        display: inline-block;
-      }
-    }
-  }
-`, ce = s.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-`, de = s.label`
-  padding-right: 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: ${(e) => e.isDisabled ? "not-allowed" : e.isSelected ? "default" : "pointer"};
-`, he = s.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-`, ue = s.div`
-  :first-of-type {
-    border-top-left-radius: ${l.sp1};
-    border-top-right-radius: ${l.sp1};
-  }
-
-  :last-of-type {
-    border-bottom-left-radius: ${l.sp1};
-    border-bottom-right-radius: ${l.sp1};
-  }
-`, ge = s.div`
-  display: flex;
-`, me = s(X)`
-  width: ${l.sp3};
-  height: ${l.sp3};
-  color: ${(e) => e.theme.colors.primary};
-`, pe = s(Y)`
-  width: ${l.sp3};
-  height: ${l.sp3};
-  color: ${(e) => e.theme.colors.primary};
-`, be = s.div`
-  display: flex;
-  width: ${l.sp3};
-  align-items: center;
-  margin-right: ${l.sp2};
-`, xe = s.div`
-  display: flex;
-  flex-direction: row;
-`, fe = s.div``, we = s.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 3px 6px;
-  margin-right: ${l.sp2};
-`, $e = s(U)`
-  color: ${p.neutralGrey5Light};
-  border-radius: ${l.sp2};
-  padding: 3px 6px;
-  margin-left: 12px;
-  letter-spacing: 0.04em;
-`, ye = s.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: inherit;
-  align-items: center;
-  width: 100%;
-`, ve = () => null, Se = () => null, Ce = () => null, je = (e, o) => e.map((n) => V(n, o)), V = (e, o) => ({
-  value: e,
-  label: o !== void 0 ? o(e) : e
-}), Oe = ({
-  name: e,
-  registerOptions: o,
-  defaultValue: n,
-  placeholder: a,
-  isDisabled: c,
-  style: g,
-  addIconInCreateLabel: w,
-  isOptionRemovable: x,
-  tagProperties: f,
-  onSelectChange: h,
-  getLabelForId: C
-}) => {
-  const {
-    control: d,
-    formState: { errors: $ }
-  } = T(), y = I($, e ?? "");
-  return /* @__PURE__ */ i.jsx(
-    q,
-    {
-      name: e,
-      control: d,
-      defaultValue: n,
-      "data-testid": S("creatable-single-select-field", e),
-      rules: o,
-      render: ({ field: { value: O, onChange: L } }) => /* @__PURE__ */ i.jsx(i.Fragment, { children: /* @__PURE__ */ i.jsx(
-        ie,
-        {
-          onSelectedValueChanged: (v) => {
-            h?.(v ?? ""), L({
-              allOptions: n.allOptions,
-              selectedOption: v
-            });
-          },
-          placeholder: a,
-          style: g,
-          isDisabled: c,
-          selectedValue: O.selectedOption,
-          allValues: n.allOptions,
-          addIconInCreateLabel: w,
-          isOptionRemovable: x,
-          getLabelForId: C,
-          tagProperties: f,
-          hasError: y,
-          name: e
-        }
-      ) })
-    }
-  );
-}, b = {
-  width: new u(343, 580, 726),
-  height: new u(r[6], r[6]),
-  controlHeight: new u(r[6], r[6]),
-  paddingTopBottom: new u(r[2], r[2]),
-  marginTop: new u(r[2], r[2]),
-  marginBottom: new u(r[2], r[2]),
-  marginRight: new u(r[2], r[2]),
-  labelMarginLeft: new u(r[3], r[4]),
-  labelMarginRight: new u(r[3], r[4]),
-  labelMarginTop: new u(r[2], r[2])
-}, Le = {
-  infoLabel: new te("extraSmallRegular", "smallRegular")
-};
-function Ie({
-  isDisabled: e,
-  label: o,
-  creatableSingleSelectField: n,
-  style: a,
-  additionalInfoLabel: c,
-  errorInfoLabel: g,
-  isOptionRemovable: w,
-  addIconInCreateLabel: x,
-  additionalInfoTextColor: f,
-  onSelectChange: h,
-  getLabelForId: C
-}) {
-  const d = Z(), {
-    formState: { errors: $ }
-  } = T(), y = I($, n.name ?? "");
-  return /* @__PURE__ */ i.jsxs(
-    ke,
-    {
-      size: d,
-      style: a,
-      isDisabled: e != null,
-      hasError: y,
-      "data-testid": S(
-        "labeled-creatable-single-select-field",
-        n.name
-      ),
-      children: [
-        /* @__PURE__ */ i.jsx(
-          ee,
-          {
-            isDisabled: e,
-            label: o.label,
-            htmlFor: n.name,
-            style: {
-              marginLeft: b.labelMarginLeft.value(d),
-              marginRight: b.labelMarginRight.value(d),
-              marginTop: b.labelMarginTop.value(d),
-              width: o.width ?? "auto"
-            }
-          }
-        ),
-        /* @__PURE__ */ i.jsxs(ze, { labelWidth: o.width, children: [
-          /* @__PURE__ */ i.jsx(
-            Oe,
-            {
-              ...n,
-              isDisabled: e,
-              style: {
-                display: "flex",
-                flexGrow: 1,
-                maxWidth: o.width !== null && x === !1 ? `calc(100% - ${o.width}px)` : "auto",
-                height: b.controlHeight.value(d)
-              },
-              onSelectChange: h,
-              isOptionRemovable: w,
-              addIconInCreateLabel: x,
-              getLabelForId: C
-            }
-          ),
-          /* @__PURE__ */ i.jsx(
-            D,
-            {
-              size: d,
-              additionalInfoTextColor: f,
-              children: c
-            }
-          ),
-          y && /* @__PURE__ */ i.jsx(D, { size: d, hasError: y, children: g })
-        ] })
-      ]
-    }
-  );
-}
-const ke = s.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: ${(e) => b.width.valuePx(e.size)};
-  min-height: ${(e) => b.height.valuePx(e.size)};
-  padding-right: ${(e) => b.marginRight.valuePx(e.size)};
-  padding-top: ${(e) => b.paddingTopBottom.valuePx(e.size)};
-  padding-bottom: ${(e) => b.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};
-    .select-control {
-      background-color: ${(e) => e.hasError === !0 ? p.importantLight : e.theme.colors.background};
-    }
-  }
-
-  &:hover {
-    z-index: 1;
-    outline: ${(e) => e.isDisabled === !0 ? "none" : `1px solid ${e.theme.colors.primary}`};
-    .select-control {
-      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.hasError === !0 ? p.importantLight : e.theme.colors.background};
-    }
-  }
-`, ze = s.div`
-  display: flex;
-  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
-  justify-content: flex-end;
-  flex-direction: column;
-  position: relative;
-`, D = s.label`
-  color: ${(e) => e.hasError === !0 ? p.important : e.additionalInfoTextColor != null ? e.additionalInfoTextColor : e.theme.colors.grey1};
-  width: auto;
-  ${(e) => `${Le.infoLabel.style(e.size)}`};
-  padding-right: ${l.sp3};
-  text-align: right;
-`;
-export {
-  Ie as L
-};

package/dist/LabeledDocumentField-CEaYFTOa.js

@@ -1,147 +0,0 @@
-import { d as D, m as p, j as s } from "./vendor-.pnpm-DtFedGku.js";
-import d from "@emotion/styled";
-import { u as N, j as k, aB as I, R as t, fS as q, a as H, D as i, S as o, C as U, av as V } from "./index-BZH5WUM6.js";
-const a = {
-  width: new t(343, 580, 726),
-  height: new t(i[6], i[6]),
-  controlHeight: new t(i[6], i[6]),
-  paddingTopBottom: new t(i[2], i[2]),
-  marginTop: new t(i[2], i[2]),
-  marginBottom: new t(i[2], i[2]),
-  marginRight: new t(i[2], i[2]),
-  labelMarginLeft: new t(i[3], i[4]),
-  labelMarginRight: new t(i[3], i[4]),
-  labelMarginTop: new t(i[2], i[2])
-}, A = {
-  infoLabel: new V("extraSmallRegular", "smallRegular")
-};
-function Y({
-  label: e,
-  isDisabled: r,
-  isOptional: c,
-  style: u,
-  file: g,
-  name: n,
-  registerOptions: x,
-  additionalInfoLabel: f,
-  acceptableTypes: b,
-  sizeLimit: w,
-  filemetadataPayload: $,
-  deleteFileStatusById: z,
-  updateFileStatusById: y,
-  filesEndPoint: v,
-  authParams: S,
-  hasError: R = !1,
-  placeholderText: L,
-  showPhotoPicker: T,
-  useMobileCam: j,
-  showUploadSuccessAnimation: P,
-  showWebCamPopUpCloseIcon: M,
-  updateFilesEntity: W,
-  onDeleteFile: B,
-  onEditFileName: C,
-  onFileSizeError: E
-}) {
-  const l = N(), {
-    formState: { errors: m }
-  } = D(), h = p(m, n), F = p(m, `${n}.fileName`);
-  return /* @__PURE__ */ s.jsxs(
-    G,
-    {
-      size: l,
-      style: u,
-      isDisabled: r != null,
-      "data-testid": k("document-field", n),
-      children: [
-        /* @__PURE__ */ s.jsx(
-          I,
-          {
-            isDisabled: r,
-            label: e.label,
-            isOptional: c,
-            style: {
-              marginLeft: a.labelMarginLeft.value(l),
-              marginRight: a.labelMarginRight.value(l),
-              marginTop: a.labelMarginTop.value(l),
-              width: e.width ?? "auto",
-              ...e.style
-            }
-          }
-        ),
-        /* @__PURE__ */ s.jsxs(J, { labelWidth: e.width, size: l, children: [
-          /* @__PURE__ */ s.jsx(
-            q,
-            {
-              name: n,
-              filesEndPoint: v,
-              authParams: S,
-              registerOptions: x,
-              file: g,
-              sizeLimit: w,
-              acceptableTypes: b,
-              isDisabled: r === "disabled" || r === "readonly",
-              filemetadataPayload: $,
-              deleteFileStatusById: z,
-              updateFileStatusById: y,
-              hasError: R,
-              updateFilesEntity: W,
-              onFileSizeError: E,
-              onDeleteFile: B,
-              onEditFileName: C,
-              placeholderText: L,
-              showPhotoPicker: T,
-              useMobileCam: j,
-              showWebCamPopUpCloseIcon: M,
-              showUploadSuccessAnimation: P
-            }
-          ),
-          h && /* @__PURE__ */ s.jsx(K, { size: l, isError: h, children: F && g != null ? H.getLocalizedStrings().commonSetUp.businessVerification.fileNameRequired : f })
-        ] })
-      ]
-    }
-  );
-}
-const G = d.div`
-  display: flex;
-  flex-direction: ${(e) => e.size === "small" ? "column" : "row"};
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: ${(e) => a.width.valuePx(e.size)};
-  min-height: ${(e) => a.height.valuePx(e.size)};
-  padding-right: ${(e) => a.marginRight.valuePx(e.size)};
-  padding-top: ${(e) => a.paddingTopBottom.valuePx(e.size)};
-  padding-bottom: ${(e) => a.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;
-  }
-
-  &:hover {
-    z-index: 1;
-    outline: 1px solid
-      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
-  }
-`, J = d.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => e.size === "small" ? "100%" : e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
-  padding: ${(e) => e.size === "small" ? `${o.sp1} ${o.sp2} ${o.sp0} ${o.sp3}` : o.sp0};
-  box-sizing: ${(e) => e.size === "small" ? "border-box" : "inherit"};
-  align-items: flex-end;
-  flex-grow: 1;
-`, K = d.label`
-  display: flex;
-  color: ${(e) => e.isError ? U.important : e.theme.colors.grey1};
-  ${(e) => `${A.infoLabel.style(e.size)}`};
-  padding-right: ${o.sp3};
-  text-align: right;
-`;
-export {
-  Y as L
-};

package/dist/LabeledDocumentField-D9jW_xQA.cjs

@@ -1,41 +0,0 @@
-"use strict";const t=require("./vendor-.pnpm-CT-Z_-kn.cjs"),r=require("@emotion/styled"),e=require("./index-D_NpiSKE.cjs"),s={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])},W={infoLabel:new e.ResponsiveSizedStyle("extraSmallRegular","smallRegular")};function q({label:i,isDisabled:n,isOptional:g,style:c,file:a,name:l,registerOptions:m,additionalInfoLabel:h,acceptableTypes:u,sizeLimit:x,filemetadataPayload:z,deleteFileStatusById:b,updateFileStatusById:f,filesEndPoint:S,authParams:R,hasError:v=!1,placeholderText:w,showPhotoPicker:$,useMobileCam:y,showUploadSuccessAnimation:L,showWebCamPopUpCloseIcon:j,updateFilesEntity:E,onDeleteFile:T,onEditFileName:P,onFileSizeError:F}){const o=e.useWindowSizeContext(),{formState:{errors:d}}=t.useFormContext(),p=t.has(d,l),M=t.has(d,`${l}.fileName`);return t.jsxRuntimeExports.jsxs(B,{size:o,style:c,isDisabled:n!=null,"data-testid":e.generateDataTestId("document-field",l),children:[t.jsxRuntimeExports.jsx(e.Label,{isDisabled:n,label:i.label,isOptional:g,style:{marginLeft:s.labelMarginLeft.value(o),marginRight:s.labelMarginRight.value(o),marginTop:s.labelMarginTop.value(o),width:i.width??"auto",...i.style}}),t.jsxRuntimeExports.jsxs(C,{labelWidth:i.width,size:o,children:[t.jsxRuntimeExports.jsx(e.FileElementWithPhotoPicker,{name:l,filesEndPoint:S,authParams:R,registerOptions:m,file:a,sizeLimit:x,acceptableTypes:u,isDisabled:n==="disabled"||n==="readonly",filemetadataPayload:z,deleteFileStatusById:b,updateFileStatusById:f,hasError:v,updateFilesEntity:E,onFileSizeError:F,onDeleteFile:T,onEditFileName:P,placeholderText:w,showPhotoPicker:$,useMobileCam:y,showWebCamPopUpCloseIcon:j,showUploadSuccessAnimation:L}),p&&t.jsxRuntimeExports.jsx(D,{size:o,isError:p,children:M&&a!=null?e.appLocale.getLocalizedStrings().commonSetUp.businessVerification.fileNameRequired:h})]})]})}const B=r.div`
-  display: flex;
-  flex-direction: ${i=>i.size==="small"?"column":"row"};
-  align-items: flex-start;
-  background-color: ${i=>i.theme.colors.grey5};
-  width: ${i=>s.width.valuePx(i.size)};
-  min-height: ${i=>s.height.valuePx(i.size)};
-  padding-right: ${i=>s.marginRight.valuePx(i.size)};
-  padding-top: ${i=>s.paddingTopBottom.valuePx(i.size)};
-  padding-bottom: ${i=>s.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;
-  }
-
-  &:hover {
-    z-index: 1;
-    outline: 1px solid
-      ${i=>i.isDisabled===!0?i.theme.colors.grey3:i.theme.colors.primary};
-  }
-`,C=r.div`
-  display: flex;
-  flex-direction: column;
-  width: ${i=>i.size==="small"?"100%":i.labelWidth!=null?`calc(100% - ${i.labelWidth}px)`:"auto"};
-  padding: ${i=>i.size==="small"?`${e.Space.sp1} ${e.Space.sp2} ${e.Space.sp0} ${e.Space.sp3}`:e.Space.sp0};
-  box-sizing: ${i=>i.size==="small"?"border-box":"inherit"};
-  align-items: flex-end;
-  flex-grow: 1;
-`,D=r.label`
-  display: flex;
-  color: ${i=>i.isError?e.Colors.important:i.theme.colors.grey1};
-  ${i=>`${W.infoLabel.style(i.size)}`};
-  padding-right: ${e.Space.sp3};
-  text-align: right;
-`;exports.LabeledDocumentField=q;