@gusto/embedded-react-sdk 0.55.4 → 0.55.6

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

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