@zeniai/web-components 3.17.11 → 3.17.13

package/dist/FollowStepsSection-ByZ5gQPJ.js

@@ -1,1313 +0,0 @@
-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-B2klaOGU.js";
-import d from "@emotion/styled";
-import { R as y, u as W, e as T, aB as J, fR as G, S as r, D as i, C as h, iy as he, t as A, p as ke, a as ee, fV as ge, fW as me, B as be, x as fe } from "./index-Dg4HzhKR.js";
-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": T(
-        "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 Ie = ({
-  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: Te
-          },
-          hideSelectedOptions: !1,
-          styles: M,
-          options: R(e),
-          isClearable: !1,
-          isSearchable: !1,
-          isDisabled: k,
-          defaultMenuIsOpen: m,
-          "data-testid": T("single-select", o)
-        },
-        $e()
-      )
-    }
-  );
-}, Te = ({ 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": T("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": T("single-select-field", e),
-      render: ({ field: { value: l, onChange: C } }) => /* @__PURE__ */ t.jsx(
-        Ie,
-        {
-          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 I = D.find(
-                            (Q) => Q.classId === K
-                          );
-                          I != null && I.className && w.push(I.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": T("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 I = D.find(
-                                (Q) => Q.classId === K
-                              );
-                              I != null && I.className && w.push(I.className);
-                            }
-                          );
-                        }
-                        return w;
-                      }
-                    }
-                  ) }),
-                  s.stepIndex > 0 && /* @__PURE__ */ t.jsx(
-                    st,
-                    {
-                      onClick: () => $(g),
-                      "data-testid": T(
-                        "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": T("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
-};