@gusto/embedded-react-sdk 0.47.0 → 0.48.0

package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js

@@ -1,292 +1,339 @@
-import { jsxs as s, jsx as i } from "react/jsx-runtime";
-import { useForm as Pe, useFieldArray as Re, useWatch as Te, FormProvider as ye } from "react-hook-form";
-import { useRef as Oe, useMemo as k, useState as w } from "react";
-import { PayrollEmployeeCompensationsTypePaymentMethod as L } from "@gusto/embedded-api-v-2025-11-15/models/components/payrollemployeecompensationstype";
-import { useTranslation as Me } from "react-i18next";
-import { z as a } from "zod";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { useForm as Re, useFieldArray as Oe, useWatch as Me, FormProvider as xe } from "react-hook-form";
+import { useRef as ve, useMemo as w, useState as G } from "react";
+import { PayrollEmployeeCompensationsTypePaymentMethod as _ } from "@gusto/embedded-api-v-2025-11-15/models/components/payrollemployeecompensationstype";
+import { useTranslation as Ae } from "react-i18next";
+import { z as s } from "zod";
 import { zodResolver as Se } from "@hookform/resolvers/zod";
-import l from "./PayrollEditEmployeePresentation.module.scss.js";
-import { TimeOffField as xe, PayoutTimeOffField as Ae } from "./TimeOffField.js";
-import { Flex as d } from "../../Common/Flex/Flex.js";
+import d from "./PayrollEditEmployeePresentation.module.scss.js";
+import { TimeOffField as De, PayoutTimeOffField as Ie } from "./TimeOffField.js";
+import { Flex as y } from "../../Common/Flex/Flex.js";
 import { Grid as x } from "../../Common/Grid/Grid.js";
-import { useComponentContext as Ie } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as ve } from "../../../i18n/I18n.js";
-import { Form as De } from "../../Common/Form/Form.js";
-import { firstLastName as _e, formatNumberAsCurrency as ie } from "../../../helpers/formattedStrings.js";
-import { getAdditionalEarningsCompensations as Fe, calculateGrossPay as te } from "../helpers.js";
-import { PayrollCategory as v, isOffCyclePayroll as ae } from "../payrollTypes.js";
-import { COMPENSATION_NAME_REIMBURSEMENT as A, HOURS_COMPENSATION_NAMES as re, EXCLUDED_ADDITIONAL_EARNINGS as Le, COMPENSATION_NAME_DOUBLE_OVERTIME as Ue, COMPENSATION_NAME_OVERTIME as je, COMPENSATION_NAME_REGULAR_HOURS as ke, COMPENSATION_NAME_CASH_TIPS as we, COMPENSATION_NAME_COMMISSION as Ge, COMPENSATION_NAME_CORRECTION_PAYMENT as He, COMPENSATION_NAME_PAYCHECK_TIPS as $e, COMPENSATION_NAME_BONUS as Be } from "../../../shared/constants.js";
-import qe from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-import ze from "../../../assets/icons/plus-circle.svg.js";
-import We from "../../../assets/icons/trashcan.svg.js";
-import Ve from "../../../assets/icons/info.svg.js";
-import { TextInputField as G } from "../../Common/Fields/TextInputField/TextInputField.js";
-import { RadioGroupField as Ye } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
-const Ke = a.object({
-  uuid: a.string().nullable().optional(),
-  description: a.string(),
-  amount: a.string(),
-  recurring: a.boolean().optional()
-}), Xe = a.object({
-  hourlyCompensations: a.record(a.string(), a.record(a.string(), a.string().optional())),
-  timeOffCompensations: a.record(a.string(), a.string().optional()),
-  finalPayoutCompensations: a.record(a.string(), a.string().optional()),
-  fixedCompensations: a.record(a.string(), a.string().optional()),
-  reimbursements: a.array(Ke),
-  paymentMethod: a.enum(L).optional()
-}), se = (C, I, c, o, D = v.Regular) => {
-  const E = {
-    ...I,
-    paymentMethod: C.paymentMethod
+import { EmptyData as Fe } from "../../Common/EmptyData/EmptyData.js";
+import { useComponentContext as _e } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as Le } from "../../../i18n/I18n.js";
+import { Form as Ue } from "../../Common/Form/Form.js";
+import { formatNumberAsCurrency as re, firstLastName as ke } from "../../../helpers/formattedStrings.js";
+import { getAdditionalEarningsCompensations as je, calculateGrossPay as se } from "../helpers.js";
+import { PayrollCategory as S, isOffCyclePayroll as ue } from "../payrollTypes.js";
+import { COMPENSATION_NAME_REIMBURSEMENT as v, HOURS_COMPENSATION_NAMES as ae, EXCLUDED_ADDITIONAL_EARNINGS as we, COMPENSATION_NAME_DOUBLE_OVERTIME as Ge, COMPENSATION_NAME_OVERTIME as He, COMPENSATION_NAME_REGULAR_HOURS as $e, COMPENSATION_NAME_CASH_TIPS as Be, COMPENSATION_NAME_COMMISSION as Ve, COMPENSATION_NAME_CORRECTION_PAYMENT as qe, COMPENSATION_NAME_PAYCHECK_TIPS as ze, COMPENSATION_NAME_BONUS as We } from "../../../shared/constants.js";
+import Ye from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import oe from "../../../assets/icons/plus-circle.svg.js";
+import Ke from "../../../assets/icons/trashcan.svg.js";
+import { TextInputField as H } from "../../Common/Fields/TextInputField/TextInputField.js";
+import { RadioGroupField as Xe } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import { useDataView as Qe } from "../../Common/DataView/useDataView.js";
+import { DataView as Ze } from "../../Common/DataView/DataView.js";
+const Je = s.object({
+  uuid: s.string().nullable().optional(),
+  description: s.string(),
+  amount: s.string(),
+  recurring: s.boolean().optional()
+}), en = s.object({
+  hourlyCompensations: s.record(s.string(), s.record(s.string(), s.string().optional())),
+  timeOffCompensations: s.record(s.string(), s.string().optional()),
+  finalPayoutCompensations: s.record(s.string(), s.string().optional()),
+  fixedCompensations: s.record(s.string(), s.string().optional()),
+  reimbursements: s.array(Je),
+  paymentMethod: s.enum(_).optional()
+}), me = (f, A, c, o, D = S.Regular) => {
+  const C = {
+    ...A,
+    paymentMethod: f.paymentMethod
   };
-  E.hourlyCompensations = I?.hourlyCompensations?.map(
+  C.hourlyCompensations = A?.hourlyCompensations?.map(
     (r) => {
-      const m = r.jobUuid && r.name ? C.hourlyCompensations[r.jobUuid]?.[r.name] : void 0;
+      const m = r.jobUuid && r.name ? f.hourlyCompensations[r.jobUuid]?.[r.name] : void 0;
       return m ? {
         ...r,
         hours: m
       } : r;
     }
-  ), E.paidTimeOff = c.map((r) => {
-    const m = D === v.Dismissal, { finalPayoutUnusedHoursInput: U, ...p } = r;
+  ), C.paidTimeOff = c.map((r) => {
+    const m = D === S.Dismissal, { finalPayoutUnusedHoursInput: L, ...l } = r;
     if (m) {
-      const O = C.finalPayoutCompensations[r.name] ?? r.finalPayoutUnusedHoursInput;
+      const R = f.finalPayoutCompensations[r.name] ?? r.finalPayoutUnusedHoursInput;
       return {
         ...r,
-        hours: C.timeOffCompensations[r.name] || "0",
-        ...O != null ? { finalPayoutUnusedHoursInput: O || "0" } : {}
+        hours: f.timeOffCompensations[r.name] || "0",
+        ...R != null ? { finalPayoutUnusedHoursInput: R || "0" } : {}
       };
     }
     return {
-      ...p,
-      hours: C.timeOffCompensations[r.name] || "0"
+      ...l,
+      hours: f.timeOffCompensations[r.name] || "0"
     };
   });
-  const y = !ae(D), R = [];
-  return Object.entries(C.fixedCompensations).forEach(([r, m]) => {
-    if (r.toLowerCase() === A.toLowerCase() && y)
+  const P = !ue(D), E = [];
+  return Object.entries(f.fixedCompensations).forEach(([r, m]) => {
+    if (r.toLowerCase() === v.toLowerCase() && P)
       return;
-    const p = I?.fixedCompensations?.find(
-      (O) => O.name?.toLowerCase() === r.toLowerCase()
+    const l = A?.fixedCompensations?.find(
+      (R) => R.name?.toLowerCase() === r.toLowerCase()
     );
-    m !== void 0 && m !== "" && (p ? R.push({
-      name: p.name,
-      jobUuid: p.jobUuid,
+    m !== void 0 && m !== "" && (l ? E.push({
+      name: l.name,
+      jobUuid: l.jobUuid,
       amount: m
-    }) : parseFloat(m) !== 0 && R.push({
+    }) : parseFloat(m) !== 0 && E.push({
       name: r,
       jobUuid: o,
       amount: m
     }));
-  }), E.fixedCompensations = R, y ? E.reimbursements = C.reimbursements.map((r) => ({
+  }), C.fixedCompensations = E, P ? C.reimbursements = f.reimbursements.map((r) => ({
     amount: r.amount,
     description: r.description.trim() === "" ? null : r.description.trim(),
     uuid: r.uuid ?? null,
     recurring: r.recurring
-  })) : E.reimbursements = [], E;
-}, Tn = ({
-  onSave: C,
-  onCancel: I,
+  })) : C.reimbursements = [], C;
+}, An = ({
+  onSave: f,
+  onCancel: A,
   employee: c,
   employeeCompensation: o,
   isPending: D = !1,
-  fixedCompensationTypes: E,
-  payPeriodStartDate: y,
-  paySchedule: R,
-  payrollCategory: r = v.Regular,
+  fixedCompensationTypes: C,
+  payPeriodStartDate: P,
+  paySchedule: E,
+  payrollCategory: r = S.Regular,
   withReimbursements: m = !0,
-  hasDirectDepositSetup: U = !0
+  hasDirectDepositSetup: L = !0
 }) => {
-  const { Button: p, ButtonIcon: O, Heading: f, Text: M, TextInput: H } = Ie(), { t: n } = Me("Payroll.PayrollEditEmployee");
-  ve("Payroll.PayrollEditEmployee");
-  const g = c.jobs?.find((e) => e.primary), oe = o?.hourlyCompensations?.some(
-    (e) => e.jobUuid === g?.uuid
-  ), S = g && oe ? [g] : [], $ = Oe(null), N = qe({
-    ref: $
+  const { Button: l, ButtonIcon: R, Heading: p, Text: $, TextInput: B } = _e(), { t: n } = Ae("Payroll.PayrollEditEmployee");
+  Le("Payroll.PayrollEditEmployee");
+  const h = c.jobs?.find((e) => e.primary), le = o?.hourlyCompensations?.some(
+    (e) => e.jobUuid === h?.uuid
+  ), O = h && le ? [h] : [], V = ve(null), b = Ye({
+    ref: V
   }).includes("small");
   o?.hourlyCompensations?.forEach((e) => {
-    const t = c.jobs?.find((u) => u.uuid === e.jobUuid);
-    t && !S.find((u) => u.uuid === t.uuid) && S.push(t);
+    const i = c.jobs?.find((u) => u.uuid === e.jobUuid);
+    i && !O.find((u) => u.uuid === i.uuid) && O.push(i);
   });
-  const T = (o?.paidTimeOff || []).filter((e) => e.name), j = Fe({
-    flsaStatus: g?.compensations?.[0]?.flsaStatus,
+  const T = (o?.paidTimeOff || []).filter((e) => e.name), U = je({
+    flsaStatus: h?.compensations?.[0]?.flsaStatus,
     existingFixedCompensations: o?.fixedCompensations || [],
-    primaryJobUuid: g?.uuid,
-    fixedCompensationTypes: E,
-    excludedTypes: Le
-  }), _ = !ae(r), me = k(
-    () => m && _ ? o?.reimbursements ?? [] : [],
-    [m, _, o?.reimbursements]
-  ), ue = k(
+    primaryJobUuid: h?.uuid,
+    fixedCompensationTypes: C,
+    excludedTypes: we
+  }), I = !ue(r), de = w(
+    () => m && I ? o?.reimbursements ?? [] : [],
+    [m, I, o?.reimbursements]
+  ), ce = w(
     () => o?.fixedCompensations?.find(
-      (e) => e.name?.toLowerCase() === A.toLowerCase()
+      (e) => e.name?.toLowerCase() === v.toLowerCase()
     ),
     [o?.fixedCompensations]
-  ), B = m && !_ && !!g?.uuid, q = (e, t) => o?.hourlyCompensations?.find(
-    (u) => u.jobUuid === e && u.name?.toLowerCase() === t.toLowerCase()
-  ), le = (e) => {
+  ), q = m && !I && !!h?.uuid, z = (e, i) => o?.hourlyCompensations?.find(
+    (u) => u.jobUuid === e && u.name?.toLowerCase() === i.toLowerCase()
+  ), pe = (e) => {
     switch (e) {
-      case ke:
+      case $e:
         return n("compensationNames.regularHours");
-      case je:
+      case He:
         return n("compensationNames.overtime");
-      case Ue:
+      case Ge:
         return n("compensationNames.doubleOvertime");
       default:
         return e;
     }
-  }, z = (e) => {
+  }, W = (e) => {
     switch (e) {
-      case Be:
+      case We:
         return n("fixedCompensationNames.bonus");
-      case $e:
+      case ze:
         return n("fixedCompensationNames.paycheckTips");
-      case He:
+      case qe:
         return n("fixedCompensationNames.correctionPayment");
-      case Ge:
+      case Ve:
         return n("fixedCompensationNames.commission");
-      case we:
+      case Be:
         return n("fixedCompensationNames.cashTips");
-      case A:
+      case v:
         return n("fixedCompensationNames.reimbursement");
       default:
         return e;
     }
-  }, de = {
+  }, fe = {
     hourlyCompensations: (() => {
       const e = {};
-      return S.forEach((t) => {
-        re.forEach((u) => {
-          const h = q(t.uuid, u);
-          h && (e[t.uuid] || (e[t.uuid] = {}), e[t.uuid][h.name] = h.hours ? parseFloat(h.hours).toString() : "");
+      return O.forEach((i) => {
+        ae.forEach((u) => {
+          const M = z(i.uuid, u);
+          M && (e[i.uuid] || (e[i.uuid] = {}), e[i.uuid][M.name] = M.hours ? parseFloat(M.hours).toString() : "");
         });
       }), e;
     })(),
     timeOffCompensations: (() => {
       const e = {};
-      return T.forEach((t) => {
-        e[t.name] = t.hours ? parseFloat(t.hours).toString() : "";
+      return T.forEach((i) => {
+        e[i.name] = i.hours ? parseFloat(i.hours).toString() : "";
       }), e;
     })(),
     finalPayoutCompensations: (() => {
       const e = {};
-      return T.forEach((t) => {
-        e[t.name] = t.finalPayoutUnusedHoursInput ?? "0";
+      return T.forEach((i) => {
+        e[i.name] = i.finalPayoutUnusedHoursInput ?? "0";
       }), e;
     })(),
     fixedCompensations: (() => {
       const e = {};
-      return j.forEach((t) => {
-        e[t.name] = t.amount ?? "";
-      }), B && (e[A] = ue?.amount ?? "0.00"), e;
+      return U.forEach((i) => {
+        e[i.name] = i.amount ?? "";
+      }), q && (e[v] = ce?.amount ?? "0.00"), e;
     })(),
-    reimbursements: me.map((e) => ({
+    reimbursements: de.map((e) => ({
       uuid: e.uuid ?? null,
       description: e.description ?? "",
       amount: e.amount,
       recurring: e.recurring ?? !1
     })),
-    paymentMethod: o?.paymentMethod || L.DirectDeposit
-  }, F = Pe({
-    resolver: Se(Xe),
-    defaultValues: de
+    paymentMethod: o?.paymentMethod || _.DirectDeposit
+  }, F = Re({
+    resolver: Se(en),
+    defaultValues: fe
   }), {
-    fields: W,
-    append: ce,
-    remove: pe,
-    update: fe
-  } = Re({
+    fields: Y,
+    append: he,
+    remove: be,
+    update: Ce
+  } = Oe({
     control: F.control,
     name: "reimbursements"
-  }), he = (e) => {
-    const t = W[e];
-    t && (t.uuid ? fe(e, { ...t, amount: "0" }) : pe(e));
-  }, [be, V] = w(!1), [Y, K] = w(""), [X, Q] = w(""), Z = () => {
-    V(!1), K(""), Q("");
-  }, Ce = () => {
-    const e = X.trim(), t = parseFloat(e || "0");
-    Number.isNaN(t) || t <= 0 || (ce({
+  }), ge = (e) => {
+    const i = Y[e];
+    i && (i.uuid ? Ce(e, { ...i, amount: "0" }) : be(e));
+  }, k = Y.map((e, i) => ({ ...e, originalIndex: i })).filter((e) => parseFloat(e.amount || "0") !== 0), [K, j] = G(!1), [X, Q] = G(""), [Z, J] = G(""), ee = () => {
+    j(!1), Q(""), J("");
+  }, Ne = () => {
+    const e = Z.trim(), i = parseFloat(e || "0");
+    Number.isNaN(i) || i <= 0 || (he({
       uuid: null,
-      description: Y.trim(),
-      amount: t.toFixed(2),
+      description: X.trim(),
+      amount: i.toFixed(2),
       recurring: !1
-    }), Z());
-  }, P = Te({
+    }), ee());
+  }, ye = Qe({
+    data: k,
+    columns: [
+      {
+        key: "description",
+        title: n("reimbursementDescriptionColumn"),
+        render: (e) => e.description.trim() || n("reimbursementUnnamedFallback")
+      },
+      {
+        key: "amount",
+        title: n("reimbursementAmountColumn"),
+        render: (e) => re(parseFloat(e.amount || "0"))
+      },
+      {
+        key: "recurring",
+        title: n("reimbursementTypeColumn"),
+        render: (e) => e.recurring ? n("reimbursementTypeRecurring") : n("reimbursementTypeOneTime")
+      }
+    ],
+    itemMenu: (e) => {
+      if (e.recurring) return null;
+      const i = e.description.trim() || n("reimbursementUnnamedFallback");
+      return /* @__PURE__ */ t(
+        R,
+        {
+          variant: "tertiary",
+          onClick: () => {
+            ge(e.originalIndex);
+          },
+          "aria-label": n("removeReimbursementLabel", { description: i }),
+          children: /* @__PURE__ */ t(Ke, { "aria-hidden": !0 })
+        }
+      );
+    },
+    emptyState: () => /* @__PURE__ */ t(Fe, { title: n("reimbursementEmptyTitle"), children: /* @__PURE__ */ t(
+      l,
+      {
+        variant: "secondary",
+        onClick: () => {
+          j(!0);
+        },
+        icon: /* @__PURE__ */ t(oe, { "aria-hidden": !0 }),
+        children: n("addReimbursementCta")
+      }
+    ) })
+  }), g = Me({
     control: F.control
-  }), ge = k(() => {
+  }), Ee = w(() => {
     try {
       const e = {};
-      P.hourlyCompensations && Object.entries(P.hourlyCompensations).forEach(([b, ne]) => {
-        ne && (e[b] = ne);
+      g.hourlyCompensations && Object.entries(g.hourlyCompensations).forEach(([N, te]) => {
+        te && (e[N] = te);
       });
-      const t = (P.reimbursements ?? []).map((b) => ({
-        uuid: b.uuid ?? null,
-        description: b.description ?? "",
-        amount: b.amount ?? "0",
-        recurring: b.recurring
+      const i = (g.reimbursements ?? []).map((N) => ({
+        uuid: N.uuid ?? null,
+        description: N.description ?? "",
+        amount: N.amount ?? "0",
+        recurring: N.recurring
       })), u = {
         hourlyCompensations: e,
-        timeOffCompensations: P.timeOffCompensations || {},
-        finalPayoutCompensations: P.finalPayoutCompensations || {},
-        fixedCompensations: P.fixedCompensations || {},
-        reimbursements: t,
-        paymentMethod: P.paymentMethod
-      }, h = se(
+        timeOffCompensations: g.timeOffCompensations || {},
+        finalPayoutCompensations: g.finalPayoutCompensations || {},
+        fixedCompensations: g.fixedCompensations || {},
+        reimbursements: i,
+        paymentMethod: g.paymentMethod
+      }, M = me(
         u,
         o,
-        (o?.paidTimeOff || []).filter((b) => b.name),
-        g?.uuid,
+        (o?.paidTimeOff || []).filter((N) => N.name),
+        h?.uuid,
         r
       );
-      return te(
-        h,
+      return se(
+        M,
         c,
-        y,
-        R,
+        P,
+        E,
         r
       );
     } catch {
-      return o ? te(
+      return o ? se(
         o,
         c,
-        y,
-        R,
+        P,
+        E,
         r
       ) : 0;
     }
   }, [
-    P,
+    g,
     o,
-    g?.uuid,
+    h?.uuid,
     c,
-    y,
-    R,
+    P,
+    E,
     r
-  ]), Ne = _e({
+  ]), Te = ke({
     first_name: c.firstName,
     last_name: c.lastName
-  }), Ee = (e) => {
-    const t = se(
+  }), Pe = (e) => {
+    const i = me(
       e,
       o,
       T,
-      g?.uuid,
+      h?.uuid,
       r
     );
-    C(t);
-  }, J = ie(ge || 0), ee = /* @__PURE__ */ s(
-    d,
+    f(i);
+  }, ne = re(Ee || 0), ie = /* @__PURE__ */ a(
+    y,
     {
-      flexDirection: N ? "row" : "column",
-      justifyContent: N ? "flex-end" : "normal",
-      alignItems: N ? "flex-start" : "stretch",
+      flexDirection: b ? "row" : "column",
+      justifyContent: b ? "flex-end" : "normal",
+      alignItems: b ? "flex-start" : "stretch",
       gap: 12,
       children: [
-        /* @__PURE__ */ i(p, { variant: "secondary", onClick: I, title: n("cancelCta"), children: n("cancelCta") }),
-        /* @__PURE__ */ i(
-          p,
+        /* @__PURE__ */ t(l, { variant: "secondary", onClick: A, title: n("cancelCta"), children: n("cancelCta") }),
+        /* @__PURE__ */ t(
+          l,
           {
-            onClick: F.handleSubmit(Ee),
+            onClick: F.handleSubmit(Pe),
             title: n("saveCta"),
             isLoading: D,
             children: n("saveCta")
@@ -295,54 +342,54 @@ const Ke = a.object({
       ]
     }
   );
-  return /* @__PURE__ */ s("div", { ref: $, className: l.container, children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ a("div", { ref: V, className: d.container, children: [
+    /* @__PURE__ */ t(
       "div",
       {
-        className: `${l.headerSection} ${N ? "" : l.headerSectionSticky}`,
-        children: /* @__PURE__ */ s(d, { justifyContent: "space-between", children: [
-          /* @__PURE__ */ s(d, { flexDirection: "column", gap: N ? 8 : 2, children: [
-            /* @__PURE__ */ i(f, { as: "h1", styledAs: N ? "h2" : "h4", children: n("pageTitle", { employeeName: Ne }) }),
-            N ? /* @__PURE__ */ s(d, { flexDirection: "column", gap: 6, children: [
-              /* @__PURE__ */ i(f, { as: "h2", styledAs: "h3", children: J }),
-              /* @__PURE__ */ i(M, { className: l.grossPayLabel, children: n("grossPayLabel") })
-            ] }) : /* @__PURE__ */ i(f, { as: "h2", styledAs: "h6", className: l.grossPayLabel, children: n("grossPayLabelMobile", { grossPay: J }) })
+        className: `${d.headerSection} ${b ? "" : d.headerSectionSticky}`,
+        children: /* @__PURE__ */ a(y, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ a(y, { flexDirection: "column", gap: b ? 8 : 2, children: [
+            /* @__PURE__ */ t(p, { as: "h1", styledAs: b ? "h2" : "h4", children: n("pageTitle", { employeeName: Te }) }),
+            b ? /* @__PURE__ */ a(y, { flexDirection: "column", gap: 6, children: [
+              /* @__PURE__ */ t(p, { as: "h2", styledAs: "h3", children: ne }),
+              /* @__PURE__ */ t($, { className: d.grossPayLabel, children: n("grossPayLabel") })
+            ] }) : /* @__PURE__ */ t(p, { as: "h2", styledAs: "h6", className: d.grossPayLabel, children: n("grossPayLabelMobile", { grossPay: ne }) })
           ] }),
-          N && ee
+          b && ie
         ] })
       }
     ),
-    /* @__PURE__ */ s(ye, { ...F, children: [
-      /* @__PURE__ */ s(De, { children: [
-        S.length > 0 && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
-          /* @__PURE__ */ i(f, { as: "h3", children: n("regularHoursTitle") }),
-          S.map((e) => /* @__PURE__ */ s(d, { flexDirection: "column", gap: 8, children: [
-            S.length > 1 && /* @__PURE__ */ i(f, { as: "h4", children: e.title }),
-            /* @__PURE__ */ i(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: re.map((t) => {
-              const u = q(
+    /* @__PURE__ */ a(xe, { ...F, children: [
+      /* @__PURE__ */ a(Ue, { children: [
+        O.length > 0 && /* @__PURE__ */ a("div", { className: d.fieldGroup, children: [
+          /* @__PURE__ */ t(p, { as: "h3", children: n("regularHoursTitle") }),
+          O.map((e) => /* @__PURE__ */ a(y, { flexDirection: "column", gap: 8, children: [
+            O.length > 1 && /* @__PURE__ */ t(p, { as: "h4", children: e.title }),
+            /* @__PURE__ */ t(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: ae.map((i) => {
+              const u = z(
                 e.uuid,
-                t
+                i
               );
               if (u)
-                return /* @__PURE__ */ i(
-                  G,
+                return /* @__PURE__ */ t(
+                  H,
                   {
                     type: "number",
                     min: 0,
                     adornmentEnd: n("hoursUnit"),
                     isRequired: !0,
-                    label: le(t),
+                    label: pe(i),
                     name: `hourlyCompensations.${e.uuid}.${u.name}`
                   },
-                  t
+                  i
                 );
             }) })
           ] }, e.uuid))
         ] }),
-        T.length > 0 && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
-          /* @__PURE__ */ i(f, { as: "h4", children: r === v.Dismissal ? n("timeOffTitleDismissal") : n("timeOffTitle") }),
-          /* @__PURE__ */ i(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: T.map((e) => /* @__PURE__ */ i(
-            xe,
+        T.length > 0 && /* @__PURE__ */ a("div", { className: d.fieldGroup, children: [
+          /* @__PURE__ */ t(p, { as: "h4", children: r === S.Dismissal ? n("timeOffTitleDismissal") : n("timeOffTitle") }),
+          /* @__PURE__ */ t(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: T.map((e) => /* @__PURE__ */ t(
+            De,
             {
               timeOff: e,
               employee: c
@@ -350,13 +397,13 @@ const Ke = a.object({
             e.name
           )) })
         ] }),
-        r === v.Dismissal && T.length > 0 && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
-          /* @__PURE__ */ s(d, { flexDirection: "column", gap: 4, children: [
-            /* @__PURE__ */ i(f, { as: "h4", children: n("finalPayoutTitle") }),
-            /* @__PURE__ */ i(M, { variant: "supporting", children: n("finalPayoutDescription") })
+        r === S.Dismissal && T.length > 0 && /* @__PURE__ */ a("div", { className: d.fieldGroup, children: [
+          /* @__PURE__ */ a(y, { flexDirection: "column", gap: 4, children: [
+            /* @__PURE__ */ t(p, { as: "h4", children: n("finalPayoutTitle") }),
+            /* @__PURE__ */ t($, { variant: "supporting", children: n("finalPayoutDescription") })
           ] }),
-          /* @__PURE__ */ i(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: T.map((e) => /* @__PURE__ */ i(
-            Ae,
+          /* @__PURE__ */ t(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: T.map((e) => /* @__PURE__ */ t(
+            Ie,
             {
               timeOff: e,
               employee: c
@@ -364,21 +411,21 @@ const Ke = a.object({
             `payout-${e.name}`
           )) })
         ] }),
-        j.length > 0 && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
-          /* @__PURE__ */ i(f, { as: "h4", children: n("additionalEarningsTitle") }),
-          /* @__PURE__ */ i(
+        U.length > 0 && /* @__PURE__ */ a("div", { className: d.fieldGroup, children: [
+          /* @__PURE__ */ t(p, { as: "h4", children: n("additionalEarningsTitle") }),
+          /* @__PURE__ */ t(
             x,
             {
               gridTemplateColumns: { base: "1fr", small: [320, 320], large: [320, 320, 320] },
               gap: 20,
-              children: j.map((e) => /* @__PURE__ */ i(
-                G,
+              children: U.map((e) => /* @__PURE__ */ t(
+                H,
                 {
                   type: "number",
                   min: 0,
                   adornmentStart: "$",
                   isRequired: !0,
-                  label: z(e.name),
+                  label: W(e.name),
                   name: `fixedCompensations.${e.name}`
                 },
                 e.name
@@ -386,78 +433,37 @@ const Ke = a.object({
             }
           )
         ] }),
-        B && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
-          /* @__PURE__ */ i(f, { as: "h4", children: n("reimbursementTitle") }),
-          /* @__PURE__ */ i(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: /* @__PURE__ */ i(
-            G,
+        q && /* @__PURE__ */ a("div", { className: d.fieldGroup, children: [
+          /* @__PURE__ */ t(p, { as: "h4", children: n("reimbursementTitle") }),
+          /* @__PURE__ */ t(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: /* @__PURE__ */ t(
+            H,
             {
               type: "number",
               min: 0,
               adornmentStart: "$",
               isRequired: !0,
-              label: z(A),
-              name: `fixedCompensations.${A}`
+              label: W(v),
+              name: `fixedCompensations.${v}`
             }
           ) })
         ] }),
-        m && _ && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
-          /* @__PURE__ */ i(f, { as: "h4", children: n("reimbursementTitle") }),
-          W.map((e, t) => {
-            if (parseFloat(e.amount || "0") === 0)
-              return null;
-            const h = e.description.trim() || n("reimbursementUnnamedFallback"), b = ie(parseFloat(e.amount || "0"));
-            return e.recurring ? /* @__PURE__ */ s(
-              d,
-              {
-                alignItems: "center",
-                justifyContent: "space-between",
-                gap: 12,
-                "aria-label": n("recurringReimbursementLabel", {
-                  description: h
-                }),
-                children: [
-                  /* @__PURE__ */ i(M, { children: h }),
-                  /* @__PURE__ */ s(d, { alignItems: "center", gap: 8, children: [
-                    /* @__PURE__ */ i(M, { children: b }),
-                    /* @__PURE__ */ i(Ve, { "aria-label": n("recurringReimbursementTooltip"), role: "img" })
-                  ] })
-                ]
-              },
-              e.id
-            ) : /* @__PURE__ */ s(d, { alignItems: "center", justifyContent: "space-between", gap: 12, children: [
-              /* @__PURE__ */ i(M, { children: h }),
-              /* @__PURE__ */ s(d, { alignItems: "center", gap: 12, children: [
-                /* @__PURE__ */ i(M, { children: b }),
-                /* @__PURE__ */ i(
-                  O,
-                  {
-                    variant: "tertiary",
-                    onClick: () => {
-                      he(t);
-                    },
-                    "aria-label": n("removeReimbursementLabel", {
-                      description: h
-                    }),
-                    children: /* @__PURE__ */ i(We, { "aria-hidden": !0 })
-                  }
-                )
-              ] })
-            ] }, e.id);
-          }),
-          be ? /* @__PURE__ */ s(d, { flexDirection: "column", gap: 12, children: [
-            /* @__PURE__ */ s(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: [
-              /* @__PURE__ */ i(
-                H,
+        m && I && /* @__PURE__ */ a("div", { className: d.fieldGroup, children: [
+          /* @__PURE__ */ t(p, { as: "h4", children: n("reimbursementTitle") }),
+          !(k.length === 0 && K) && /* @__PURE__ */ t(Ze, { label: n("reimbursementsTableLabel"), ...ye }),
+          K ? /* @__PURE__ */ a(y, { flexDirection: "column", gap: 12, children: [
+            /* @__PURE__ */ a(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: [
+              /* @__PURE__ */ t(
+                B,
                 {
                   name: "newReimbursementDescription",
                   label: n("reimbursementDescriptionLabel"),
                   placeholder: n("reimbursementDescriptionPlaceholder"),
-                  value: Y,
-                  onChange: K
+                  value: X,
+                  onChange: Q
                 }
               ),
-              /* @__PURE__ */ i(
-                H,
+              /* @__PURE__ */ t(
+                B,
                 {
                   name: "newReimbursementAmount",
                   type: "number",
@@ -465,32 +471,32 @@ const Ke = a.object({
                   adornmentStart: "$",
                   isRequired: !0,
                   label: n("reimbursementAmountLabel"),
-                  value: X,
-                  onChange: Q
+                  value: Z,
+                  onChange: J
                 }
               )
             ] }),
-            /* @__PURE__ */ s(d, { gap: 12, children: [
-              /* @__PURE__ */ i(p, { onClick: Ce, children: n("saveReimbursementCta") }),
-              /* @__PURE__ */ i(p, { variant: "secondary", onClick: Z, children: n("cancelReimbursementCta") })
+            /* @__PURE__ */ a(y, { gap: 12, children: [
+              /* @__PURE__ */ t(l, { onClick: Ne, children: n("saveReimbursementCta") }),
+              /* @__PURE__ */ t(l, { variant: "secondary", onClick: ee, children: n("cancelReimbursementCta") })
             ] })
-          ] }) : /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(
-            p,
+          ] }) : k.length > 0 && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+            l,
             {
-              variant: "tertiary",
+              variant: "secondary",
               onClick: () => {
-                V(!0);
+                j(!0);
               },
               title: n("addReimbursementLink"),
-              icon: /* @__PURE__ */ i(ze, { "aria-hidden": !0 }),
+              icon: /* @__PURE__ */ t(oe, { "aria-hidden": !0 }),
               children: n("addReimbursementLink")
             }
           ) })
         ] }),
-        U && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
-          /* @__PURE__ */ i(f, { as: "h4", children: n("paymentMethodTitle") }),
-          /* @__PURE__ */ i(
-            Ye,
+        L && /* @__PURE__ */ a("div", { className: d.fieldGroup, children: [
+          /* @__PURE__ */ t(p, { as: "h4", children: n("paymentMethodTitle") }),
+          /* @__PURE__ */ t(
+            Xe,
             {
               name: "paymentMethod",
               isRequired: !0,
@@ -498,11 +504,11 @@ const Ke = a.object({
               description: n("paymentMethodDescription"),
               options: [
                 {
-                  value: L.DirectDeposit,
+                  value: _.DirectDeposit,
                   label: n("paymentMethodOptions.directDeposit")
                 },
                 {
-                  value: L.Check,
+                  value: _.Check,
                   label: n("paymentMethodOptions.check")
                 }
               ]
@@ -510,12 +516,12 @@ const Ke = a.object({
           )
         ] })
       ] }),
-      !N && ee
+      !b && ie
     ] })
   ] });
 };
 export {
-  Xe as PayrollEditEmployeeFormSchema,
-  Tn as PayrollEditEmployeePresentation
+  en as PayrollEditEmployeeFormSchema,
+  An as PayrollEditEmployeePresentation
 };
 //# sourceMappingURL=PayrollEditEmployeePresentation.js.map