@zeniai/web-components 3.16.33 → 3.16.34

package/dist/FollowStepsSection-SyRYm6Xk.js

@@ -0,0 +1,1313 @@
+import { d as V, m as _, u as X, j as t, C as we, S as ve, n as $e, c as ue, k as Y, e as Se, o as pe } from "./vendor-.pnpm-DxbX2tX4.js";
+import { R as y, u as W, j as I, aB as J, fO as G, S as r, D as i, C as h, iq as he, t as A, n as ke, a as ee, fS as ge, fT as me, B as be, z as fe } from "./index-rO5GHlOg.js";
+import d from "@emotion/styled";
+import { useState as re, useCallback as je, useEffect as te, memo as Le } from "react";
+const v = {
+  width: new y(343, 580, 726),
+  height: new y(i[6], i[6]),
+  controlHeight: new y(i[6], i[6]),
+  paddingLeftRight: new y(i[3], i[4]),
+  paddingTop: new y(i[3], i[3]),
+  paddingBottom: new y(i[3], i[2]),
+  marginTop: new y(i[2], i[2]),
+  marginBottom: new y(i[2], i[2]),
+  labelMarginLeft: new y(i[3], i[4]),
+  labelMarginRight: new y(i[3], i[4]),
+  labelMarginTop: new y(i[2], i[2])
+};
+function Oe({
+  isDisabled: e,
+  label: a,
+  firstText: o,
+  secondText: p,
+  style: S,
+  isFieldError: k
+}) {
+  const b = W(), {
+    formState: { errors: j }
+  } = V(), f = _(j, o.name), L = _(j, p.name), l = X();
+  return /* @__PURE__ */ t.jsxs(
+    Ce,
+    {
+      size: b,
+      style: S,
+      isDisabled: e != null,
+      isErrorFirstText: f,
+      isErrorSecondText: L,
+      "data-testid": I(
+        "labeled-multi-text-field",
+        o.name
+      ),
+      children: [
+        /* @__PURE__ */ t.jsx(
+          J,
+          {
+            isDisabled: e,
+            label: a.label,
+            style: {
+              marginRight: v.labelMarginRight.value(b),
+              width: a.width ?? "auto",
+              color: l.colors.champion
+            }
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(De, { labelWidth: a.width, children: [
+          /* @__PURE__ */ t.jsxs(
+            ie,
+            {
+              className: "firstField",
+              isDisabled: o.isDisabled,
+              children: [
+                /* @__PURE__ */ t.jsx(
+                  G,
+                  {
+                    type: o.type,
+                    name: o.name,
+                    placeholder: o.placeholder,
+                    prefix: "$",
+                    allowNegative: !1,
+                    isNumericString: !1,
+                    inputMode: "numeric",
+                    returnValueType: "floatValue",
+                    registerOptions: o.options,
+                    decimalScale: 0,
+                    allowLeadingZeros: !1,
+                    thousandSeparator: !0,
+                    thousandsGroupStyle: "thousand",
+                    isDisabled: o.isDisabled ? "disabled" : void 0,
+                    style: {
+                      display: "flex",
+                      flexGrow: 1,
+                      width: "-webkit-fill-available",
+                      height: v.controlHeight.value(b),
+                      cursor: "inherit",
+                      backgroundColor: l.colors.grey3,
+                      borderRadius: r.sp1,
+                      color: l.colors.primary
+                    },
+                    hoverBgColor: l.colors.background,
+                    bgColor: l.colors.background,
+                    disabledColor: l.colors.background,
+                    isFieldError: k,
+                    defaultValue: o.defaultValue
+                  }
+                ),
+                o.additionalInfoLabel && o.isDisabled || f && o.additionalErrorLabel ? /* @__PURE__ */ t.jsx(ae, { isError: f, children: f ? o.additionalErrorLabel : o.additionalInfoLabel }) : null
+              ]
+            }
+          ),
+          p.hideField ? null : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            /* @__PURE__ */ t.jsxs(Fe, { children: [
+              /* @__PURE__ */ t.jsx(se, {}),
+              /* @__PURE__ */ t.jsx(ze, {}),
+              /* @__PURE__ */ t.jsx(se, {})
+            ] }),
+            /* @__PURE__ */ t.jsxs(
+              ie,
+              {
+                className: "secondField",
+                isDisabled: p.isDisabled,
+                children: [
+                  /* @__PURE__ */ t.jsx(
+                    G,
+                    {
+                      type: p.type,
+                      name: p.name,
+                      placeholder: p.placeholder,
+                      prefix: "$",
+                      allowNegative: !1,
+                      isNumericString: !1,
+                      inputMode: "numeric",
+                      returnValueType: "floatValue",
+                      registerOptions: p.options,
+                      decimalScale: 0,
+                      allowLeadingZeros: !1,
+                      thousandSeparator: !0,
+                      thousandsGroupStyle: "thousand",
+                      isDisabled: p.isDisabled ? "disabled" : void 0,
+                      style: {
+                        display: "flex",
+                        flexGrow: 1,
+                        width: "-webkit-fill-available",
+                        height: v.controlHeight.value(b),
+                        cursor: "inherit",
+                        backgroundColor: l.colors.grey3,
+                        borderRadius: r.sp1,
+                        color: l.colors.primary
+                      },
+                      hoverBgColor: l.colors.background,
+                      bgColor: l.colors.background,
+                      disabledColor: l.colors.background,
+                      isFieldError: k,
+                      defaultValue: o.defaultValue
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(ae, { isError: L, children: p.additionalInfoLabel })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const Ce = d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => v.width.valuePx(e.size)};
+  min-height: ${(e) => v.height.valuePx(e.size)};
+  padding-left: ${(e) => v.paddingLeftRight.valuePx(e.size)};
+  padding-right: ${(e) => v.paddingLeftRight.valuePx(e.size)};
+  padding-top: ${(e) => v.paddingTop.valuePx(e.size)};
+  padding-bottom: ${(e) => v.paddingBottom.valuePx(e.size)};
+  gap: ${r.sp3};
+
+  :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: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+
+    .firstField {
+      input {
+        background-color: ${(e) => e.isErrorFirstText ? h.importantLight : e.theme.colors.background};
+      }
+    }
+
+    .secondField {
+      input {
+        background-color: ${(e) => e.isErrorSecondText ? h.importantLight : e.theme.colors.background};
+      }
+    }
+  }
+  .firstField {
+    input {
+      background-color: ${(e) => e.isErrorFirstText ? h.importantLight : e.theme.colors.background};
+    }
+  }
+
+  .secondField {
+    input {
+      background-color: ${(e) => e.isErrorSecondText ? h.importantLight : e.theme.colors.background};
+    }
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+
+    .firstField {
+      input {
+        background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isErrorFirstText ? h.importantLight : e.theme.colors.background};
+      }
+    }
+
+    .secondField {
+      input {
+        background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isErrorSecondText ? h.importantLight : e.theme.colors.background};
+      }
+    }
+  }
+`, De = d.div`
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  flex-grow: 1;
+  gap: ${r.sp3};
+  input {
+    text-align: left;
+  }
+`, ie = d.div`
+  width: inherit;
+  position: relative;
+`, Fe = d.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`, ze = d.div`
+  width: ${r.sp8};
+  height: 2px;
+  background-color: ${(e) => e.theme.colors.primary};
+`, se = d.div`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${(e) => e.theme.colors.primary};
+`, ae = d(he)`
+  display: flex;
+  color: ${(e) => e.isError ? h.important : e.theme.colors.hero};
+  white-space: pre-line;
+  margin-top: ${r.sp1};
+`;
+function Ue({
+  isDisabled: e,
+  label: a,
+  firstText: o,
+  secondText: p,
+  style: S,
+  isFieldError: k
+}) {
+  const b = W(), {
+    formState: { errors: j }
+  } = V(), f = _(j, o.name), L = _(j, p.name), l = X();
+  return /* @__PURE__ */ t.jsxs(
+    Ne,
+    {
+      size: b,
+      style: S,
+      isDisabled: e != null,
+      isErrorFirstText: f,
+      isErrorSecondText: L,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          J,
+          {
+            isDisabled: e,
+            label: a.label,
+            style: {
+              marginRight: v.labelMarginRight.value(b),
+              width: a.width ?? "auto",
+              color: l.colors.champion
+            }
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(Re, { labelWidth: a.width, children: [
+          p.hideField ? null : /* @__PURE__ */ t.jsxs(Be, { children: [
+            /* @__PURE__ */ t.jsx(de, {}),
+            /* @__PURE__ */ t.jsx(
+              Me,
+              {
+                isAdditionalLabel: (!!o.additionalInfoLabel && o.isDisabled) === !0
+              }
+            ),
+            /* @__PURE__ */ t.jsx(de, {})
+          ] }),
+          /* @__PURE__ */ t.jsxs(Ee, { children: [
+            /* @__PURE__ */ t.jsxs(
+              ne,
+              {
+                className: "firstField",
+                isDisabled: o.isDisabled,
+                children: [
+                  /* @__PURE__ */ t.jsx(
+                    G,
+                    {
+                      type: o.type,
+                      name: o.name,
+                      placeholder: o.placeholder,
+                      prefix: "$",
+                      allowNegative: !1,
+                      isNumericString: !1,
+                      inputMode: "numeric",
+                      returnValueType: "floatValue",
+                      registerOptions: o.options,
+                      decimalScale: 0,
+                      allowLeadingZeros: !1,
+                      thousandSeparator: !0,
+                      thousandsGroupStyle: "thousand",
+                      isDisabled: o.isDisabled ? "disabled" : void 0,
+                      style: {
+                        display: "flex",
+                        flexGrow: 1,
+                        width: "-webkit-fill-available",
+                        height: v.controlHeight.value(b),
+                        cursor: "inherit",
+                        backgroundColor: l.colors.grey3,
+                        borderRadius: r.sp1,
+                        color: l.colors.primary
+                      },
+                      hoverBgColor: l.colors.background,
+                      bgColor: l.colors.background,
+                      disabledColor: l.colors.background,
+                      isFieldError: k,
+                      defaultValue: o.defaultValue
+                    }
+                  ),
+                  o.additionalInfoLabel && o.isDisabled || f && o.additionalErrorLabel ? /* @__PURE__ */ t.jsx(ce, { isError: f, children: f ? o.additionalErrorLabel : o.additionalInfoLabel }) : null
+                ]
+              }
+            ),
+            p.hideField ? null : /* @__PURE__ */ t.jsxs(
+              ne,
+              {
+                className: "secondField",
+                isDisabled: p.isDisabled,
+                children: [
+                  /* @__PURE__ */ t.jsx(
+                    G,
+                    {
+                      type: p.type,
+                      name: p.name,
+                      placeholder: p.placeholder,
+                      prefix: "$",
+                      allowNegative: !1,
+                      isNumericString: !1,
+                      inputMode: "numeric",
+                      returnValueType: "floatValue",
+                      registerOptions: p.options,
+                      decimalScale: 0,
+                      allowLeadingZeros: !1,
+                      thousandSeparator: !0,
+                      thousandsGroupStyle: "thousand",
+                      isDisabled: p.isDisabled ? "disabled" : void 0,
+                      style: {
+                        display: "flex",
+                        flexGrow: 1,
+                        width: "-webkit-fill-available",
+                        height: v.controlHeight.value(b),
+                        cursor: "inherit",
+                        backgroundColor: l.colors.grey3,
+                        borderRadius: r.sp1,
+                        color: l.colors.primary
+                      },
+                      hoverBgColor: l.colors.background,
+                      bgColor: l.colors.background,
+                      disabledColor: l.colors.background,
+                      isFieldError: k,
+                      defaultValue: o.defaultValue
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(ce, { isError: L, children: p.additionalInfoLabel })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const Ne = d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => v.width.valuePx(e.size)};
+  min-height: ${(e) => v.height.valuePx(e.size)};
+  padding-left: ${(e) => v.paddingLeftRight.valuePx(e.size)};
+  padding-right: ${(e) => v.paddingLeftRight.valuePx(e.size)};
+  padding-top: ${(e) => v.paddingTop.valuePx(e.size)};
+  padding-bottom: ${(e) => v.paddingBottom.valuePx(e.size)};
+  gap: ${r.sp3};
+
+  :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: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+
+    .firstField {
+      input {
+        background-color: ${(e) => e.isErrorFirstText ? h.importantLight : e.theme.colors.background};
+      }
+    }
+
+    .secondField {
+      margin-top: ${r.sp3};
+      input {
+        background-color: ${(e) => e.isErrorSecondText ? h.importantLight : e.theme.colors.background};
+      }
+    }
+  }
+  .firstField {
+    input {
+      background-color: ${(e) => e.isErrorFirstText ? h.importantLight : e.theme.colors.background};
+    }
+  }
+
+  .secondField {
+    margin-top: ${r.sp3};
+    input {
+      background-color: ${(e) => e.isErrorSecondText ? h.importantLight : e.theme.colors.background};
+    }
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+
+    .firstField {
+      input {
+        background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isErrorFirstText ? h.importantLight : e.theme.colors.background};
+      }
+    }
+
+    .secondField {
+      margin-top: ${r.sp3};
+      input {
+        background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isErrorSecondText ? h.importantLight : e.theme.colors.background};
+      }
+    }
+  }
+`, Re = d.div`
+  display: flex;
+  width: 100%;
+  flex-grow: 1;
+  input {
+    text-align: left;
+  }
+`, Ee = d.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`, ne = d.div`
+  width: inherit;
+`, Be = d.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin-right: ${r.sp4};
+  margin-top: ${r.sp3};
+`, Me = d.div`
+  width: 2px;
+  height: ${(e) => e.isAdditionalLabel ? r.sp10 : r.sp7};
+  background-color: ${(e) => e.theme.colors.primary};
+`, de = d.div`
+  width: ${r.sp2};
+  height: ${r.sp2};
+  border-radius: 50%;
+  background-color: ${(e) => e.theme.colors.primary};
+`, ce = d(he)`
+  display: flex;
+  color: ${(e) => e.isError ? h.important : e.theme.colors.hero};
+  white-space: pre-line;
+  margin-top: ${r.sp1};
+`;
+function bt(e) {
+  return W() === "small" ? /* @__PURE__ */ t.jsx(Ue, { ...e }) : /* @__PURE__ */ t.jsx(Oe, { ...e });
+}
+const Te = ({
+  allOptions: e,
+  selectedValue: a,
+  name: o,
+  onSelectedValueChanged: p,
+  valueToLabel: S,
+  disable: k = !1,
+  defaultMenuIsOpen: b,
+  placeholderLabel: j
+}) => {
+  const {
+    formState: { errors: f }
+  } = V(), L = _(f, o ?? ""), l = X(), [C, D] = re(
+    void 0
+  ), [m, q] = re(b), R = (c) => c.map(($) => E($)), E = je(
+    (c) => ({
+      value: c,
+      label: S(c)
+    }),
+    [S]
+  );
+  te(() => {
+    const c = a == null ? void 0 : E(a);
+    D(c?.label === "" ? void 0 : c);
+  }, [a, S, E]);
+  const H = (c) => {
+    p(c);
+  }, F = l.colors.grey5, P = l.colors.grey5, B = A.smallRegular, z = A.extraSmallRegular, M = {
+    control: (c, { selectProps: $ }) => ({
+      ...c,
+      border: 0,
+      height: i[6],
+      backgroundColor: $.menuIsOpen === !0 ? l.colors.background : L === !0 ? h.importantLight : l.colors.background,
+      boxShadow: P,
+      ":hover": {
+        fill: l.colors.primary,
+        backgroundColor: l.colors.background,
+        borderColor: "none"
+      },
+      width: "auto",
+      minHeight: "auto",
+      cursor: "pointer"
+    }),
+    container: (c) => ({
+      ...c,
+      backgroundColor: P,
+      width: "100%"
+    }),
+    singleValue: (c, { data: $ }) => ({
+      ...c,
+      alignItems: "center",
+      margin: `${r.sp0}`,
+      height: `${r.sp4}`,
+      color: $.value === "require_approval" ? h.alertDark : h.successDark,
+      ...A.standardRegular.cssObject,
+      width: "100%",
+      textOverflow: "ellipsis"
+    }),
+    valueContainer: (c, { selectProps: $ }) => ({
+      ...c,
+      maxWidth: "100%",
+      cursor: "pointer",
+      ...z,
+      overflow: "visible",
+      minWidth: "auto",
+      padding: 0,
+      display: "flex",
+      justifyContent: $.menuIsOpen === !1 ? "flex-end" : "flex-start",
+      alignItems: "center",
+      flexWrap: "nowrap",
+      paddingLeft: r.sp3,
+      marginRight: r.sp3,
+      width: " -webkit-fill-available"
+    }),
+    menu: (c) => ({
+      ...c,
+      backgroundColor: F,
+      borderRadius: 4,
+      boxShadow: `${r.sp0} 2px ${r.sp2} ${l.colors.dropShadowHover}`,
+      whiteSpace: "nowrap",
+      zIndex: 10,
+      margin: 0,
+      width: "100%",
+      WebkitJustifyContent: "unset",
+      overflow: "hidden"
+    }),
+    menuList: (c) => ({
+      ...c,
+      borderRadius: 10
+    }),
+    placeholder: (c) => ({
+      ...c,
+      width: "100%",
+      height: i[4],
+      ...A.standardRegular.cssObject,
+      color: L === !0 ? h.important : l.colors.grey1,
+      display: "flex",
+      justifyContent: "flex-start",
+      alignItems: "center"
+    }),
+    option: (c, { isSelected: $, isFocused: U, isDisabled: N, data: s }) => ({
+      ...c,
+      ...B,
+      height: i[6],
+      color: s.value === "require_approval" ? h.alertDark : h.successDark,
+      backgroundColor: $ || U ? l.colors.background : F,
+      cursor: N ? "not-allowed" : "pointer",
+      borderTop: s.topBorder === !0 ? `1px solid ${h.optionBorderLight}` : "none",
+      ":hover": {
+        backgroundColor: l.colors.background
+      },
+      ":first-div": {
+        width: "100%"
+      },
+      "& label": {
+        flex: 1,
+        paddingRight: "10px",
+        cursor: N ? "not-allowed" : $ ? "default" : "pointer"
+      },
+      zIndex: 2
+    }),
+    input: (c, $) => ({
+      color: l.colors.primary,
+      overflow: "hidden",
+      zIndex: 2,
+      height: i[4],
+      width: $.selectProps.menuIsOpen ? "auto" : "0",
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      ...A.standardRegular.cssObject
+    })
+  };
+  return /* @__PURE__ */ t.jsx(
+    we,
+    {
+      onClickAway: () => {
+        q(!1);
+      },
+      children: /* @__PURE__ */ t.jsx(
+        ve,
+        {
+          isMulti: !1,
+          onChange: (c) => {
+            H(c);
+          },
+          minMenuHeight: 208,
+          menuPlacement: "auto",
+          menuShouldScrollIntoView: !1,
+          defaultValue: C,
+          value: C,
+          placeholder: j,
+          components: {
+            Option: Pe,
+            DropdownIndicator: _e,
+            IndicatorSeparator: Ge,
+            SingleValue: Ie
+          },
+          hideSelectedOptions: !1,
+          styles: M,
+          options: R(e),
+          isClearable: !1,
+          isSearchable: !1,
+          isDisabled: k,
+          defaultMenuIsOpen: m,
+          "data-testid": I("single-select", o)
+        },
+        $e()
+      )
+    }
+  );
+}, Ie = ({ children: e, ...a }) => /* @__PURE__ */ t.jsx(ue.SingleValue, { ...a, children: e }), Pe = (e) => {
+  const { data: a, options: o, isFocused: p, label: S, isSelected: k } = e, b = o.find((f) => f.value === a.value), j = typeof a.label == "string" ? a.label : a.value;
+  return /* @__PURE__ */ t.jsxs(ue.Option, { ...e, children: [
+    /* @__PURE__ */ t.jsxs(
+      Ve,
+      {
+        "data-testid": I("single-select-option", j),
+        children: [
+          /* @__PURE__ */ t.jsxs(We, { children: [
+            /* @__PURE__ */ t.jsx("label", { children: S }),
+            p === !0 && b?.id != null && /* @__PURE__ */ t.jsx(qe, { children: b.id })
+          ] }),
+          k ? /* @__PURE__ */ t.jsx(He, { children: /* @__PURE__ */ t.jsx(Ae, { className: "tick-icon" }) }) : null
+        ]
+      }
+    ),
+    b.additionalInfo !== "" && /* @__PURE__ */ t.jsx(t.Fragment, { children: b.additionalInfo })
+  ] });
+}, Ve = d.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`, We = d.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`, qe = d.div`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 1px 6px;
+  height: 20px;
+  border: 1px solid ${(e) => e.theme.colors.primary};
+  border-radius: ${r.sp1};
+  margin: 0 ${r.sp5} 0 ${r.sp3};
+`, He = d.div`
+  display: flex;
+`, Ae = d(ke)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.primary};
+`, _e = () => null, Ge = () => null, Ze = ({
+  name: e,
+  registerOptions: a,
+  value: o,
+  isDisabled: p,
+  defaultMenuIsOpen: S,
+  placeholderLabel: k
+}) => {
+  const { control: b } = V(), j = o.allOptions.map((l) => l.value ?? ""), f = (l) => o.allOptions.filter(
+    (D) => D.value === l
+  )[0]?.label ?? "", L = (l) => o.allOptions.find(
+    (C) => C.value === l.value
+  )?.value;
+  return /* @__PURE__ */ t.jsx(
+    Se,
+    {
+      name: e,
+      control: b,
+      defaultValue: o,
+      rules: a,
+      "data-testid": I("single-select-field", e),
+      render: ({ field: { value: l, onChange: C } }) => /* @__PURE__ */ t.jsx(
+        Te,
+        {
+          allOptions: j,
+          onSelectedValueChanged: (D) => {
+            C({
+              allOptions: o.allOptions,
+              selectedOption: L(
+                D
+              )
+            });
+          },
+          valueToLabel: (D) => f(D),
+          selectedValue: l.selectedOption,
+          disable: p,
+          name: e,
+          defaultMenuIsOpen: S,
+          placeholderLabel: k
+        }
+      )
+    }
+  );
+}, xe = Le(
+  Ze,
+  (e, a) => Y(e, a)
+), O = {
+  width: new y(343, 580, 726),
+  height: new y(i[6], i[6]),
+  controlHeight: new y(i[6], i[6]),
+  paddingLeftRight: new y(i[3], i[4]),
+  paddingTopBottom: new y(i[3], i[3]),
+  marginTop: new y(i[2], i[2]),
+  marginBottom: new y(i[2], i[2]),
+  labelMarginLeft: new y(i[3], i[4]),
+  labelMarginRight: new y(i[3], i[4]),
+  labelMarginTop: new y(i[2], i[2])
+}, Z = (e, a) => `${e}.${a}`;
+function Je({
+  label: e,
+  isDisabled: a,
+  sectionId: o,
+  style: p,
+  approversPlaceholder: S,
+  notifiersPlaceholder: k,
+  userSelectPlaceholder: b,
+  approveNotifyPlaceholder: j,
+  allUserWithRoles: f,
+  filteredApprovers: L,
+  allAttributes: l,
+  filteredAttributes: C,
+  allAccountingClasses: D,
+  stepsInfo: m,
+  productType: q
+}) {
+  const R = W(), {
+    commonSetUp: { approval: E }
+  } = ee.getLocalizedStrings(), H = L.length + C.length, F = f.map((s) => s.user), { control: P, setValue: B } = V(), { fields: z, replace: M } = pe({
+    name: o,
+    control: P
+  }), c = () => {
+    const s = m[m.length - 1].stepIndex, g = ye(
+      s + 1,
+      F,
+      l
+    );
+    B(o, [...m, g]);
+  }, $ = (s) => {
+    const g = m.filter((n, u) => u !== s);
+    B(o, g);
+  };
+  te(() => {
+    const s = z.map((n) => {
+      const { actors: u, stepType: w } = n;
+      return {
+        selectedUsers: u.selectedUsers.map((x) => x.userId),
+        selectedNonUsers: u.selectedNonUsers,
+        selectedOption: w.selectedOption
+      };
+    }), g = m.map((n) => {
+      const { actors: u, stepType: w } = n;
+      return {
+        selectedUsers: u.selectedUsers.map((x) => x.userId),
+        selectedNonUsers: u.selectedNonUsers,
+        selectedOption: w.selectedOption
+      };
+    });
+    if (!Y(s, g)) {
+      const n = m.map((u, w) => ({
+        actors: {
+          selectedUsers: u.actors.selectedUsers,
+          selectedNonUsers: u.actors.selectedNonUsers,
+          allUsers: F,
+          allNonUsers: oe(l)
+        },
+        stepIndex: w,
+        stepType: {
+          selectedOption: u.stepType.selectedOption,
+          allOptions: le
+        }
+      }));
+      M(n);
+    }
+  }, [F, m, z, M, l]);
+  const U = m[m.length - 1], N = a != null || H === 0 || U.actors.selectedUsers.length + U.actors.selectedNonUsers.length === 0 || !U.stepType.selectedOption;
+  return /* @__PURE__ */ t.jsxs(
+    Ke,
+    {
+      size: R,
+      style: p,
+      isDisabled: !1,
+      isError: !1,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          J,
+          {
+            label: e.label,
+            style: {
+              marginRight: O.labelMarginRight.value(R),
+              width: "auto"
+            }
+          }
+        ),
+        m.map((s, g) => /* @__PURE__ */ t.jsxs(
+          Qe,
+          {
+            labelWidth: e.width,
+            children: [
+              /* @__PURE__ */ t.jsxs(ot, { children: [
+                g + 1,
+                "."
+              ] }),
+              /* @__PURE__ */ t.jsx(et, { children: /* @__PURE__ */ t.jsx(
+                xe,
+                {
+                  name: Z(`${o}.${s.stepIndex}`, "stepType"),
+                  value: s.stepType,
+                  isDisabled: g === 0,
+                  defaultMenuIsOpen: g === 1 && s.stepType.selectedOption == null,
+                  registerOptions: {
+                    required: !0,
+                    validate: (n) => n != null && n.selectedOption != null || a != null
+                  },
+                  placeholderLabel: j
+                }
+              ) }),
+              /* @__PURE__ */ t.jsxs(tt, { children: [
+                /* @__PURE__ */ t.jsx(
+                  ge,
+                  {
+                    hideEmailTooltip: !1,
+                    shouldHaveBackgroundColor: !0,
+                    showBackgroundColorIfHasAnySelectedOption: !0,
+                    placeholderLabel: s.stepType.selectedOption == null ? b : s.stepType.selectedOption === "require_approval" ? S : k,
+                    name: Z(`${o}.${s.stepIndex}`, "actors"),
+                    value: s.actors,
+                    operator: s.stepType != null && s.stepType.selectedOption === "require_approval" ? "or" : "and",
+                    registerOptions: {
+                      required: !0,
+                      validate: (n) => n != null && (n.selectedUsers != null && n.selectedUsers.length > 0 || n.selectedNonUsers != null && n.selectedNonUsers.length > 0) || a != null
+                    },
+                    valueToSubtitle: (n) => {
+                      const u = f.map((x) => x.role).find((x) => x?.userId === n), w = [];
+                      if (u != null) {
+                        const x = me(
+                          u.userRoles,
+                          q
+                        );
+                        x.length > 0 && w.push(x), u.accountingClassIDs.forEach((K) => {
+                          const T = D.find(
+                            (Q) => Q.classId === K
+                          );
+                          T != null && T.className && w.push(T.className);
+                        });
+                      }
+                      return w;
+                    }
+                  }
+                ),
+                s.stepIndex > 0 && /* @__PURE__ */ t.jsx(Xe, { onClick: () => $(g) })
+              ] })
+            ]
+          },
+          z[g]?.id || g
+        )),
+        /* @__PURE__ */ t.jsx(Ye, { disabled: N, children: /* @__PURE__ */ t.jsx(
+          be,
+          {
+            onClick: c,
+            style: {
+              padding: `${r.sp1} ${r.sp2}`,
+              borderRadius: r.sp1
+            },
+            label: E.addStep,
+            size: "small",
+            disabled: N,
+            "data-testid": I("add-step-button-web")
+          }
+        ) })
+      ]
+    }
+  );
+}
+const ye = (e, a, o) => ({
+  stepIndex: e,
+  actors: {
+    allUsers: a,
+    selectedUsers: [],
+    allNonUsers: oe(o),
+    selectedNonUsers: []
+  },
+  stepType: {
+    allOptions: le,
+    selectedOption: void 0
+  }
+}), oe = (e) => {
+  const a = ee.getLocalizedStrings().commonSetUp.approval.nonUsers;
+  return e.map((o) => ({
+    label: a[o].label,
+    value: o,
+    position: "top",
+    subtitles: [a[o].subTitle]
+  }));
+}, le = [
+  { label: "Require", value: "require_approval" },
+  {
+    label: "Notify",
+    value: "send_notification"
+  }
+], Ke = d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => O.width.valuePx(e.size)};
+  min-height: ${(e) => O.height.valuePx(e.size)};
+  padding-left: ${(e) => O.paddingLeftRight.valuePx(e.size)};
+  padding-right: ${(e) => O.paddingLeftRight.valuePx(e.size)};
+  padding-top: ${(e) => O.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => O.paddingTopBottom.valuePx(e.size)};
+  gap: ${r.sp3};
+
+  :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: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+
+    input {
+      background-color: ${(e) => e.isError ? h.importantLight : e.theme.colors.background};
+    }
+  }
+  input {
+    background-color: ${(e) => e.isError ? h.importantLight : e.theme.colors.grey5};
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+    input {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? h.importantLight : e.theme.colors.background};
+    }
+  }
+`, Qe = d.div`
+  display: flex;
+  width: 100%;
+  align-items: baseline;
+  flex-grow: 1;
+  gap: ${r.sp3};
+`, Xe = d(fe)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${h.important};
+  }
+`, Ye = d.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  &:hover {
+    > button > div {
+      color: ${(e) => e.disabled ? e.theme.colors.grey1 : e.theme.colors.primary};
+    }
+  }
+`, et = d.div`
+  display: flex;
+  align-items: center;
+  width: 174px;
+`, tt = d.div`
+  flex: 2;
+  display: flex;
+  gap: ${r.sp3};
+  align-items: baseline;
+  max-height: 300px;
+`, ot = d.div`
+  width: ${r.sp5};
+  color: ${(e) => e.theme.colors.hero};
+`;
+function lt({
+  label: e,
+  isDisabled: a,
+  sectionId: o,
+  style: p,
+  approversPlaceholder: S,
+  notifiersPlaceholder: k,
+  userSelectPlaceholder: b,
+  approveNotifyPlaceholder: j,
+  allUserWithRoles: f,
+  filteredApprovers: L,
+  allAttributes: l,
+  filteredAttributes: C,
+  allAccountingClasses: D,
+  stepsInfo: m,
+  productType: q
+}) {
+  const R = W(), {
+    commonSetUp: { approval: E }
+  } = ee.getLocalizedStrings(), H = L.length + C.length, F = f.map((s) => s.user), { control: P, setValue: B } = V(), { fields: z, replace: M } = pe({
+    name: o,
+    control: P
+  }), c = () => {
+    const s = m[m.length - 1].stepIndex, g = ye(
+      s + 1,
+      F,
+      l
+    );
+    B(o, [...m, g]);
+  }, $ = (s) => {
+    const g = m.filter((n, u) => u !== s);
+    B(o, g);
+  };
+  te(() => {
+    const s = z.map((n) => {
+      const { actors: u, stepType: w } = n;
+      return {
+        selectedUsers: u.selectedUsers.map((x) => x.userId),
+        selectedNonUsers: u.selectedNonUsers,
+        selectedOption: w.selectedOption
+      };
+    }), g = m.map((n) => {
+      const { actors: u, stepType: w } = n;
+      return {
+        selectedUsers: u.selectedUsers.map((x) => x.userId),
+        selectedNonUsers: u.selectedNonUsers,
+        selectedOption: w.selectedOption
+      };
+    });
+    if (!Y(s, g)) {
+      const n = m.map((u, w) => ({
+        actors: {
+          selectedUsers: u.actors.selectedUsers,
+          selectedNonUsers: u.actors.selectedNonUsers,
+          allUsers: F,
+          allNonUsers: oe(l)
+        },
+        stepIndex: w,
+        stepType: {
+          selectedOption: u.stepType.selectedOption,
+          allOptions: le
+        }
+      }));
+      M(n);
+    }
+  }, [F, m, z, M, l]);
+  const U = m[m.length - 1], N = a != null || H === 0 || U.actors.selectedUsers.length + U.actors.selectedNonUsers.length === 0 || !U.stepType.selectedOption;
+  return /* @__PURE__ */ t.jsxs(
+    rt,
+    {
+      size: R,
+      style: p,
+      isDisabled: !1,
+      isError: !1,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          J,
+          {
+            label: e.label,
+            style: {
+              marginRight: O.labelMarginRight.value(R),
+              width: "auto"
+            }
+          }
+        ),
+        m.map((s, g) => /* @__PURE__ */ t.jsxs(
+          it,
+          {
+            labelWidth: e.width,
+            children: [
+              /* @__PURE__ */ t.jsxs(ut, { children: [
+                g + 1,
+                "."
+              ] }),
+              /* @__PURE__ */ t.jsxs(ct, { children: [
+                /* @__PURE__ */ t.jsx(
+                  xe,
+                  {
+                    name: Z(`${o}.${s.stepIndex}`, "stepType"),
+                    value: s.stepType,
+                    isDisabled: g === 0,
+                    defaultMenuIsOpen: g === 1 && s.stepType.selectedOption == null,
+                    registerOptions: {
+                      required: !0,
+                      validate: (n) => n != null && n.selectedOption != null || a != null
+                    },
+                    placeholderLabel: j
+                  }
+                ),
+                /* @__PURE__ */ t.jsxs(nt, { children: [
+                  /* @__PURE__ */ t.jsx(dt, { children: /* @__PURE__ */ t.jsx(
+                    ge,
+                    {
+                      hideEmailTooltip: !1,
+                      shouldHaveBackgroundColor: !0,
+                      showBackgroundColorIfHasAnySelectedOption: !0,
+                      placeholderLabel: s.stepType.selectedOption == null ? b : s.stepType.selectedOption === "require_approval" ? S : k,
+                      name: Z(`${o}.${s.stepIndex}`, "actors"),
+                      value: s.actors,
+                      operator: s.stepType != null && s.stepType.selectedOption === "require_approval" ? "or" : "and",
+                      registerOptions: {
+                        required: !0,
+                        validate: (n) => n != null && (n.selectedUsers != null && n.selectedUsers.length > 0 || n.selectedNonUsers != null && n.selectedNonUsers.length > 0) || a != null
+                      },
+                      valueToSubtitle: (n) => {
+                        const u = f.map((x) => x.role).find((x) => x?.userId === n), w = [];
+                        if (u != null) {
+                          const x = me(
+                            u.userRoles,
+                            q
+                          );
+                          x.length > 0 && w.push(x), u.accountingClassIDs.forEach(
+                            (K) => {
+                              const T = D.find(
+                                (Q) => Q.classId === K
+                              );
+                              T != null && T.className && w.push(T.className);
+                            }
+                          );
+                        }
+                        return w;
+                      }
+                    }
+                  ) }),
+                  s.stepIndex > 0 && /* @__PURE__ */ t.jsx(
+                    st,
+                    {
+                      onClick: () => $(g),
+                      "data-testid": I(
+                        "delete-step",
+                        g.toString()
+                      )
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          },
+          z[g]?.id || g
+        )),
+        /* @__PURE__ */ t.jsx(at, { disabled: N, children: /* @__PURE__ */ t.jsx(
+          be,
+          {
+            onClick: c,
+            style: {
+              width: "100%"
+            },
+            label: E.addStep,
+            size: "standard",
+            variant: "light_transparent",
+            disabled: N,
+            "data-testid": I("add-step-button-small")
+          }
+        ) })
+      ]
+    }
+  );
+}
+const rt = d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => O.width.valuePx(e.size)};
+  min-height: ${(e) => O.height.valuePx(e.size)};
+  padding-left: ${(e) => O.paddingLeftRight.valuePx(e.size)};
+  padding-right: ${(e) => O.paddingLeftRight.valuePx(e.size)};
+  padding-top: ${(e) => O.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => O.paddingTopBottom.valuePx(e.size)};
+  gap: ${r.sp3};
+
+  :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: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+
+    input {
+      background-color: ${(e) => e.isError ? h.importantLight : e.theme.colors.background};
+    }
+  }
+  input {
+    background-color: ${(e) => e.isError ? h.importantLight : e.theme.colors.grey5};
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+    input {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? h.importantLight : e.theme.colors.background};
+    }
+  }
+`, it = d.div`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  width: 100%;
+  max-width: 100%;
+  flex-grow: 1;
+  gap: ${r.sp2};
+`, st = d(fe)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  margin-left: ${r.sp2};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${h.important};
+  }
+`, at = d.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+`, nt = d.div`
+  flex: 2;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  width: 100%;
+`, dt = d.div`
+  display: flex;
+  width: 100%;
+  min-width: ${r.sp0};
+`, ct = d.div`
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  gap: ${r.sp2};
+  align-items: center;
+  max-width: 100%;
+  min-width: ${r.sp0};
+`, ut = d.div`
+  width: ${r.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`;
+function ft(e) {
+  return W() === "small" ? /* @__PURE__ */ t.jsx(lt, { ...e }) : /* @__PURE__ */ t.jsx(Je, { ...e });
+}
+export {
+  ft as F,
+  bt as L,
+  oe as g,
+  le as r
+};