@zeniai/web-components 3.17.3 → 3.17.4

package/dist/LabeledNameField-bh6Q69X5.js

@@ -1,293 +0,0 @@
-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-BEMjPEfs.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
-};

package/dist/LabeledSingleSelectField-BNFqvAVV.js

@@ -1,372 +0,0 @@
-import { u as S, j as n, S as C, n as j, c as x, d as k, e as O } from "./vendor-.pnpm-B2klaOGU.js";
-import m from "@emotion/styled";
-import { S as r, p as R, b as D, t as w, u as z, aB as L, R as d, D as t } from "./index-BEMjPEfs.js";
-const I = ({
-  allValues: e,
-  selectedValue: o,
-  onSelectedValueChanged: i,
-  isDisabled: a,
-  placeholder: c,
-  style: p,
-  customStyleConfig: g
-}) => {
-  const u = S(), f = K(e).sort((l, s) => l.label.localeCompare(s.label)), b = o != null && o ? $(o) : void 0, y = {
-    control: (l, s) => ({
-      ...l,
-      height: r.sp6,
-      backgroundColor: s.menuIsOpen ? u.colors.brandColorGoldDark : u.colors.grey5,
-      ":hover": {
-        fill: u.colors.primary,
-        backgroundColor: s.isDisabled ? u.colors.grey5 : u.colors.background,
-        borderColor: "none"
-      },
-      ...g?.control?.(l, s)
-    }),
-    container: (l, s) => ({
-      ...l,
-      width: "100%",
-      ...p,
-      ...g?.container?.(l, s)
-    }),
-    valueContainer: (l, s) => ({
-      ...l,
-      margin: `${r.sp0} ${r.sp3}`,
-      justifyContent: s.selectProps.menuIsOpen === !1 ? "flex-end" : "flex-start",
-      ...g?.valueContainer?.(l, s)
-    }),
-    menu: (l, s) => ({
-      ...l,
-      backgroundColor: u.colors.grey5,
-      borderRadius: r.sp1,
-      boxShadow: `${r.sp0} 2px ${r.sp2} ${u.colors.dropShadowHover}`,
-      whiteSpace: "nowrap",
-      zIndex: 2,
-      width: "100%",
-      margin: 0,
-      ...g?.menu?.(l, s)
-    }),
-    menuList: (l, s) => ({
-      ...l,
-      borderRadius: 0,
-      ...g?.menuList?.(l, s)
-    })
-  };
-  return /* @__PURE__ */ n.jsx(
-    C,
-    {
-      isMulti: !1,
-      onChange: (l) => {
-        l?.value != null && b?.value === l.value ? i(void 0) : i(l?.value);
-      },
-      tabSelectsValue: !1,
-      openMenuOnFocus: !0,
-      classNamePrefix: "single-select-field",
-      placeholder: c,
-      menuPlacement: "auto",
-      maxMenuHeight: 288,
-      defaultValue: b,
-      value: b,
-      menuShouldScrollIntoView: !1,
-      closeMenuOnSelect: !0,
-      components: {
-        Control: M,
-        Option: B,
-        Input: V,
-        SingleValue: F,
-        ValueContainer: P,
-        DropdownIndicator: q,
-        IndicatorSeparator: A,
-        ClearIndicator: J,
-        Placeholder: T
-      },
-      hideSelectedOptions: !1,
-      styles: y,
-      options: f,
-      isClearable: !0,
-      isSearchable: !0,
-      isDisabled: a != null
-    },
-    j()
-  );
-}, M = (e) => {
-  const { menuIsOpen: o, isFocused: i, isDisabled: a, selectProps: c } = e, { value: p } = c;
-  return /* @__PURE__ */ n.jsx(
-    N,
-    {
-      menuIsOpen: o,
-      isFocused: i,
-      isDisabled: a,
-      selectedValue: p,
-      children: /* @__PURE__ */ n.jsx(x.Control, { ...e, className: "select-control", children: e.children })
-    }
-  );
-}, P = (e) => /* @__PURE__ */ n.jsx(x.ValueContainer, { ...e, className: "select-value-container", children: e.children }), V = (e) => {
-  const { selectProps: o } = e, { placeholder: i, value: a } = o;
-  return /* @__PURE__ */ n.jsx(
-    x.Input,
-    {
-      ...e,
-      autoComplete: "new-password",
-      placeholder: a == null ? i : void 0,
-      children: e.children
-    }
-  );
-}, F = (e) => /* @__PURE__ */ n.jsx(x.SingleValue, { ...e, children: e.children }), T = () => null, B = (e) => {
-  const { isSelected: o, isDisabled: i, isFocused: a } = e;
-  return /* @__PURE__ */ n.jsx(
-    H,
-    {
-      isFocused: a,
-      isSelected: o,
-      isDisabled: i,
-      children: /* @__PURE__ */ n.jsx(x.Option, { ...e, className: "select-option", children: /* @__PURE__ */ n.jsxs(_, { children: [
-        /* @__PURE__ */ n.jsx(G, { children: /* @__PURE__ */ n.jsx(W, { isSelected: o, isDisabled: i, children: e.label }) }),
-        o ? /* @__PURE__ */ n.jsxs(E, { children: [
-          /* @__PURE__ */ n.jsx(
-            R,
-            {
-              className: "right-tick-icon",
-              width: r.sp3,
-              height: r.sp3,
-              style: { marginRight: "2px" },
-              color: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ n.jsx(
-            D,
-            {
-              className: "close-tick-icon",
-              width: r.sp3,
-              height: r.sp3,
-              color: "currentColor"
-            }
-          )
-        ] }) : null
-      ] }) })
-    }
-  );
-}, N = m.div`
-  width: 100%;
-  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
-
-  .select-control {
-    border: none;
-    box-shadow: none;
-    width: auto;
-    min-height: auto;
-    cursor: pointer;
-  }
-  .select-value-container {
-    width: 100%;
-    display: flex;
-    padding: 0;
-    max-width: 100%;
-    height: 100%;
-    min-width: auto;
-    align-items: center;
-    flex-wrap: nowrap;
-    cursor: pointer;
-
-    .single-select-field__single-value {
-      border-radius: ${r.sp0};
-      margin: ${r.sp0};
-      color: ${(e) => e.theme.colors.primary};
-      ${w.standardRegular.css};
-      box-sizing: border-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .single-select-field__input-container {
-      display: flex;
-      width: ${(e) => e.menuIsOpen === !1 && e.selectedValue != null ? r.sp0 : "100%"};
-      position: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "initial" : "absolute"};
-      ${w.standardRegular.css};
-      color: ${(e) => e.theme.colors.primary};
-      margin: ${r.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.theme.colors.grey1};
-        }
-      }
-    }
-  }
-`, H = m.div`
-  .select-option {
-    ${w.smallRegular.css};
-    height: ${r.sp6};
-    padding: 9px ${r.sp3};
-    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
-    background-color: ${(e) => e.isSelected ? e.theme.colors.grey3 : e.isFocused ? e.theme.colors.background : e.theme.colors.grey5};
-    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
-    border-top: none;
-    .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;
-      }
-    }
-  }
-`, _ = m.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-`, W = m.label`
-  ${w.standardRegular.css};
-  padding-right: 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: ${(e) => e.isDisabled ? "not-allowed" : e.isSelected ? "default" : "pointer"};
-`, G = m.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-`, E = m.div`
-  display: flex;
-  color: ${(e) => e.theme.colors.primary};
-  fill: ${(e) => e.theme.colors.primary};
-`, q = () => null, A = () => null, J = () => null, K = (e) => e.map((o) => $(o)), $ = (e) => ({
-  value: e,
-  label: e
-}), Q = ({
-  name: e,
-  registerOptions: o,
-  defaultValue: i,
-  placeholder: a,
-  isDisabled: c,
-  style: p,
-  customStyleConfig: g
-}) => {
-  const { control: u } = k();
-  return /* @__PURE__ */ n.jsx(
-    O,
-    {
-      name: e,
-      control: u,
-      defaultValue: i,
-      rules: o,
-      render: ({ field: { value: v, onChange: f } }) => /* @__PURE__ */ n.jsx(
-        I,
-        {
-          onSelectedValueChanged: (b) => f({
-            allOptions: i.allOptions,
-            selectedOption: b
-          }),
-          style: p,
-          placeholder: a,
-          selectedValue: v.selectedOption,
-          allValues: i.allOptions,
-          isDisabled: c,
-          customStyleConfig: g
-        }
-      )
-    }
-  );
-}, h = {
-  width: new d(343, 580, 726),
-  height: new d(t[6], t[6]),
-  controlHeight: new d(t[6], t[6]),
-  paddingTopBottom: new d(t[2], t[2]),
-  marginTop: new d(t[2], t[2]),
-  marginBottom: new d(t[2], t[2]),
-  marginRight: new d(t[2], t[2]),
-  labelMarginLeft: new d(t[3], t[4]),
-  labelMarginRight: new d(t[3], t[4]),
-  labelMarginTop: new d(t[2], t[2])
-};
-function ee({
-  isDisabled: e,
-  label: o,
-  singleSelectField: i,
-  style: a
-}) {
-  const c = z();
-  return /* @__PURE__ */ n.jsxs(U, { size: c, style: a, isDisabled: e != null, children: [
-    /* @__PURE__ */ n.jsx(
-      L,
-      {
-        isDisabled: e,
-        label: o.label,
-        htmlFor: i.name,
-        style: {
-          marginLeft: h.labelMarginLeft.value(c),
-          marginRight: h.labelMarginRight.value(c),
-          marginTop: h.labelMarginTop.value(c),
-          width: o.width ?? "auto"
-        }
-      }
-    ),
-    /* @__PURE__ */ n.jsx(
-      Q,
-      {
-        ...i,
-        isDisabled: e,
-        style: {
-          display: "flex",
-          flexGrow: 1,
-          maxWidth: o.width != null ? `calc(100% - ${o.width}px)` : "auto",
-          height: h.controlHeight.value(c)
-        }
-      }
-    )
-  ] });
-}
-const U = m.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: ${(e) => h.width.valuePx(e.size)};
-  min-height: ${(e) => h.height.valuePx(e.size)};
-  padding-right: ${(e) => h.marginRight.valuePx(e.size)};
-  padding-top: ${(e) => h.paddingTopBottom.valuePx(e.size)};
-  padding-bottom: ${(e) => h.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.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.theme.colors.background};
-    }
-  }
-`;
-export {
-  ee as L
-};