@gusto/embedded-react-sdk 0.57.0 → 0.57.2

package/dist/components/Payroll/UNSTABLE_PayrollEditEmployee/UNSTABLE_PayrollEditEmployee.js

@@ -1,53 +1,54 @@
-import { jsx as t, jsxs as m, Fragment as X } from "react/jsx-runtime";
+import { jsx as t, jsxs as m, Fragment as Z } from "react/jsx-runtime";
 import { useRef as fe, useMemo as Ee, Fragment as ge } from "react";
-import { useTranslation as ee } from "react-i18next";
-import { PayrollUpdatePaymentMethod as ye } from "@gusto/embedded-api/models/components/payrollupdate";
+import { useTranslation as re } from "react-i18next";
+import ye from "classnames";
+import { PayrollUpdatePaymentMethod as Ce } from "@gusto/embedded-api/models/components/payrollupdate";
 import { isSplitByWorkweek as U } from "../PayrollEditEmployee/shared/usePayrollEditEmployeeForm/fields.js";
 import { PayrollEditEmployeeErrorCodes as T } from "../PayrollEditEmployee/shared/usePayrollEditEmployeeForm/payrollEditEmployeeSchema.js";
-import E from "./UNSTABLE_PayrollEditEmployee.module.scss.js";
-import { componentEvents as J, COMPENSATION_NAME_REIMBURSEMENT as Ce, COMPENSATION_NAME_PAYCHECK_TIPS as Ne, COMPENSATION_NAME_CASH_TIPS as ve, COMPENSATION_NAME_CORRECTION_PAYMENT as Ae, COMPENSATION_NAME_COMMISSION as Oe, COMPENSATION_NAME_BONUS as Te, COMPENSATION_NAME_DOUBLE_OVERTIME as Me, COMPENSATION_NAME_OVERTIME as Pe, COMPENSATION_NAME_REGULAR_HOURS as Re } from "../../../shared/constants.js";
-import { BaseBoundaries as Se, BaseLayout as Q } from "../../Base/Base.js";
+import h from "./UNSTABLE_PayrollEditEmployee.module.scss.js";
+import { componentEvents as ee, BREAKPOINTS as Ne, COMPENSATION_NAME_REIMBURSEMENT as ve, COMPENSATION_NAME_PAYCHECK_TIPS as Ae, COMPENSATION_NAME_CASH_TIPS as Oe, COMPENSATION_NAME_CORRECTION_PAYMENT as Te, COMPENSATION_NAME_COMMISSION as Me, COMPENSATION_NAME_BONUS as Pe, COMPENSATION_NAME_DOUBLE_OVERTIME as Se, COMPENSATION_NAME_OVERTIME as Re, COMPENSATION_NAME_REGULAR_HOURS as ke } from "../../../shared/constants.js";
+import { BaseBoundaries as Le, BaseLayout as te } from "../../Base/Base.js";
 import "../../Base/useBase.js";
-import { useComponentDictionary as _e, useI18n as Le } from "../../../i18n/I18n.js";
-import { useComponentContext as te } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useComponentDictionary as _e, useI18n as we } from "../../../i18n/I18n.js";
+import { useComponentContext as ie } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { Flex as u } from "../../Common/Flex/Flex.js";
-import { Grid as ke } from "../../Common/Grid/Grid.js";
-import { EmptyData as xe } from "../../Common/EmptyData/EmptyData.js";
-import { SDKFormProvider as we } from "../../../partner-hook-utils/form/SDKFormProvider.js";
-import { firstLastName as De, formatNumberAsCurrency as Ie } from "../../../helpers/formattedStrings.js";
-import { useDateFormatter as Ue } from "../../../hooks/useDateFormatter.js";
-import Be from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-import Z from "../../../assets/icons/plus-circle.svg.js";
-import Fe from "../../../assets/icons/trashcan.svg.js";
-import { usePayrollEditEmployeeForm as He } from "../PayrollEditEmployee/shared/usePayrollEditEmployeeForm/usePayrollEditEmployeeForm.js";
-import { DataView as _ } from "../../Common/DataView/DataView.js";
-import { useDataView as Ve } from "../../Common/DataView/useDataView.js";
-function ft({
-  FallbackComponent: h,
-  LoaderComponent: b,
+import { Grid as xe } from "../../Common/Grid/Grid.js";
+import { EmptyData as De } from "../../Common/EmptyData/EmptyData.js";
+import { SDKFormProvider as Ie } from "../../../partner-hook-utils/form/SDKFormProvider.js";
+import { firstLastName as Be, formatNumberAsCurrency as Ue } from "../../../helpers/formattedStrings.js";
+import { useDateFormatter as Fe } from "../../../hooks/useDateFormatter.js";
+import He from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import ne from "../../../assets/icons/plus-circle.svg.js";
+import Ve from "../../../assets/icons/trashcan.svg.js";
+import { usePayrollEditEmployeeForm as je } from "../PayrollEditEmployee/shared/usePayrollEditEmployeeForm/usePayrollEditEmployeeForm.js";
+import { DataView as M } from "../../Common/DataView/DataView.js";
+import { useDataView as We } from "../../Common/DataView/useDataView.js";
+function yt({
+  FallbackComponent: b,
+  LoaderComponent: f,
   ...N
 }) {
   return /* @__PURE__ */ t(
-    Se,
+    Le,
     {
       componentName: "Payroll.UNSTABLE_PayrollEditEmployee",
-      FallbackComponent: h,
-      LoaderComponent: b,
-      children: /* @__PURE__ */ t(We, { LoaderComponent: b, ...N })
+      FallbackComponent: b,
+      LoaderComponent: f,
+      children: /* @__PURE__ */ t(Ye, { LoaderComponent: f, ...N })
     }
   );
 }
-const je = ({
-  rows: h,
-  isAdding: b,
+const Ge = ({
+  rows: b,
+  isAdding: f,
   draftFields: N,
-  onBeginAdd: M,
-  onSave: P,
+  onBeginAdd: P,
+  onSave: S,
   onCancel: L,
   onRemove: R
 }) => {
-  const { t: e } = ee("Payroll.UNSTABLE_PayrollEditEmployee"), { Button: g, ButtonIcon: S, Heading: y } = te(), { Description: C, Amount: v } = N, A = Ve({
-    data: h,
+  const { t: e } = re("Payroll.UNSTABLE_PayrollEditEmployee"), { Button: g, ButtonIcon: k, Heading: y } = ie(), { Description: C, Amount: v } = N, A = We({
+    data: b,
     columns: [
       {
         key: "description",
@@ -58,7 +59,7 @@ const je = ({
         key: "amount",
         title: e("reimbursementAmountColumn"),
         justify: "end",
-        render: (d) => Ie(parseFloat(d.amount || "0"))
+        render: (d) => Ue(parseFloat(d.amount || "0"))
       },
       {
         key: "recurring",
@@ -70,24 +71,24 @@ const je = ({
       if (d.recurring) return null;
       const O = d.description.trim() || e("reimbursementUnnamedFallback");
       return /* @__PURE__ */ t(
-        S,
+        k,
         {
           variant: "tertiary",
           onClick: () => {
             R(d.index);
           },
           "aria-label": e("removeReimbursementLabel", { description: O }),
-          children: /* @__PURE__ */ t(Fe, { "aria-hidden": !0 })
+          children: /* @__PURE__ */ t(Ve, { "aria-hidden": !0 })
         }
       );
     },
-    emptyState: () => /* @__PURE__ */ t(xe, { title: e("reimbursementEmptyTitle"), children: /* @__PURE__ */ t(g, { variant: "secondary", onClick: M, icon: /* @__PURE__ */ t(Z, { "aria-hidden": !0 }), children: e("addReimbursementCta") }) })
+    emptyState: () => /* @__PURE__ */ t(De, { title: e("reimbursementEmptyTitle"), children: /* @__PURE__ */ t(g, { variant: "secondary", onClick: P, icon: /* @__PURE__ */ t(ne, { "aria-hidden": !0 }), children: e("addReimbursementCta") }) })
   });
   return /* @__PURE__ */ m(u, { flexDirection: "column", gap: 12, children: [
     /* @__PURE__ */ t(y, { as: "h3", styledAs: "h4", children: e("reimbursementTitle") }),
-    !(h.length === 0 && b) && /* @__PURE__ */ t(_, { label: e("reimbursementsTableLabel"), ...A }),
-    b ? /* @__PURE__ */ m(u, { flexDirection: "column", gap: 12, children: [
-      /* @__PURE__ */ m(ke, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: [
+    !(b.length === 0 && f) && /* @__PURE__ */ t(M, { label: e("reimbursementsTableLabel"), ...A }),
+    f ? /* @__PURE__ */ m(u, { flexDirection: "column", gap: 12, children: [
+      /* @__PURE__ */ m(xe, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: [
         /* @__PURE__ */ t(
           C,
           {
@@ -98,31 +99,31 @@ const je = ({
         /* @__PURE__ */ t(v, { label: e("reimbursementAmountLabel"), adornmentStart: "$", isRequired: !0 })
       ] }),
       /* @__PURE__ */ m(u, { gap: 12, children: [
-        /* @__PURE__ */ t(g, { onClick: P, title: e("saveReimbursementCta"), children: e("saveReimbursementCta") }),
+        /* @__PURE__ */ t(g, { onClick: S, title: e("saveReimbursementCta"), children: e("saveReimbursementCta") }),
         /* @__PURE__ */ t(g, { variant: "secondary", onClick: L, title: e("cancelReimbursementCta"), children: e("cancelReimbursementCta") })
       ] })
-    ] }) : h.length > 0 && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+    ] }) : b.length > 0 && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
       g,
       {
         variant: "secondary",
-        onClick: M,
+        onClick: P,
         title: e("addReimbursementLink"),
-        icon: /* @__PURE__ */ t(Z, { "aria-hidden": !0 }),
+        icon: /* @__PURE__ */ t(ne, { "aria-hidden": !0 }),
         children: e("addReimbursementLink")
       }
     ) })
   ] });
-}, We = ({
-  employeeId: h,
-  companyId: b,
+}, Ye = ({
+  employeeId: b,
+  companyId: f,
   payrollId: N,
-  withReimbursements: M = !0,
-  onEvent: P,
+  withReimbursements: P = !0,
+  onEvent: S,
   dictionary: L,
   LoaderComponent: R
 }) => {
-  _e("Payroll.UNSTABLE_PayrollEditEmployee", L), Le("Payroll.UNSTABLE_PayrollEditEmployee");
-  const { t: e } = ee("Payroll.UNSTABLE_PayrollEditEmployee"), g = Ue(), { Alert: S, Box: y, BoxHeader: C, Button: v, Heading: A, Text: d } = te(), O = fe(null), f = Be({ ref: O }).includes("small"), ne = Ee(
+  _e("Payroll.UNSTABLE_PayrollEditEmployee", L), we("Payroll.UNSTABLE_PayrollEditEmployee");
+  const { t: e } = re("Payroll.UNSTABLE_PayrollEditEmployee"), g = Fe(), { Alert: k, Box: y, BoxHeader: C, Button: v, Heading: A, Text: d } = ie(), O = fe(null), E = He({ ref: O }).includes("small"), ae = Ee(
     () => ({
       [T.NEGATIVE_AMOUNT]: e("validations.negativeAmount"),
       [T.MAX_HOURS]: e("validations.maxHours"),
@@ -133,86 +134,95 @@ const je = ({
       )
     }),
     [e]
-  ), r = He({
-    employeeId: h,
-    companyId: b,
+  ), r = je({
+    employeeId: b,
+    companyId: f,
     payrollId: N,
-    withReimbursements: M,
-    errorMessages: ne
+    withReimbursements: P,
+    errorMessages: ae
   });
   if (r.isLoading)
-    return /* @__PURE__ */ t("div", { ref: O, className: E.container, children: /* @__PURE__ */ t(Q, { isLoading: !0, error: r.errorHandling.errors, LoaderComponent: R }) });
-  const { employee: k } = r.data, c = r.form.Fields, B = De({
-    first_name: k.firstName,
-    last_name: k.lastName
-  }), re = (n) => {
+    return /* @__PURE__ */ t("div", { ref: O, className: h.container, children: /* @__PURE__ */ t(te, { isLoading: !0, error: r.errorHandling.errors, LoaderComponent: R }) });
+  const { employee: _ } = r.data, c = r.form.Fields, F = Be({
+    first_name: _.firstName,
+    last_name: _.lastName
+  }), le = (n) => {
     switch (n) {
-      case Re:
+      case ke:
         return e("compensationNames.regularHours");
-      case Pe:
+      case Re:
         return e("compensationNames.overtime");
-      case Me:
+      case Se:
         return e("compensationNames.doubleOvertime");
       default:
         return n;
     }
-  }, x = (n) => {
+  }, w = (n) => {
     switch (n) {
-      case Te:
+      case Pe:
         return e("fixedCompensationNames.bonus");
-      case Oe:
+      case Me:
         return e("fixedCompensationNames.commission");
-      case Ae:
+      case Te:
         return e("fixedCompensationNames.correctionPayment");
-      case ve:
+      case Oe:
         return e("fixedCompensationNames.cashTips");
-      case Ne:
+      case Ae:
         return e("fixedCompensationNames.paycheckTips");
-      case Ce:
+      case ve:
         return e("fixedCompensationNames.reimbursement");
       default:
         return n;
     }
-  }, w = (n) => U(n) ? n[r.data.workweeks[0]?.startDate ?? ""] ?? [] : n, F = (n, i) => {
-    const { label: o, rowHeader: a, valueColumnLabel: l, labelFor: s, adornmentStart: me, adornmentEnd: de } = i, ce = U(n), ue = w(n), $ = (p, D) => /* @__PURE__ */ t("div", { className: E.inputContainer, children: /* @__PURE__ */ t(
+  }, x = (n) => U(n) ? n[r.data.workweeks[0]?.startDate ?? ""] ?? [] : n, H = (n, i) => {
+    const { label: l, rowHeader: a, valueColumnLabel: o, labelFor: s, adornmentStart: ue, adornmentEnd: pe } = i, D = U(n), K = x(n), q = (p, I) => /* @__PURE__ */ t("div", { className: ye(h.inputContainer, D && h.workweekInputContainer), children: /* @__PURE__ */ t(
       p.Field,
       {
-        label: D,
+        label: I,
         shouldVisuallyHideLabel: !0,
-        adornmentStart: me,
-        adornmentEnd: de
+        adornmentStart: ue,
+        adornmentEnd: pe
       }
-    ) }), pe = {
-      title: l,
+    ) }), he = {
+      title: o,
       justify: "end",
-      render: (p) => $(p, s(p.name))
-    }, he = r.data.workweeks.map(
-      ({ startDate: p, endDate: D }) => {
-        const K = g.formatPayPeriodRange(p, D, {
+      render: (p) => q(p, s(p.name))
+    }, be = r.data.workweeks.map(
+      ({ startDate: p, endDate: I }) => {
+        const X = g.formatPayPeriodRange(p, I, {
           useShortMonth: !0
         });
         return {
-          title: K,
+          title: X,
           justify: "end",
-          render: (I) => {
-            const q = n[p]?.find(
-              (z) => z.jobUuid === I.jobUuid && z.name === I.name
+          render: (B) => {
+            const J = n[p]?.find(
+              (Q) => Q.jobUuid === B.jobUuid && Q.name === B.name
             );
-            return q ? $(q, `${s(I.name)} ${K}`) : null;
+            return J ? q(J, `${s(B.name)} ${X}`) : null;
           }
         };
       }
-    ), be = [
+    ), z = [
       { title: a, render: (p) => s(p.name) },
-      ...ce ? he : [pe]
+      ...D ? be : [he]
     ];
-    return /* @__PURE__ */ t(_, { label: o, isWithinBox: !0, columns: be, data: ue });
-  }, ie = (n, i) => {
-    const { title: o, footer: a, ...l } = i;
-    return w(n).length === 0 && !a ? null : /* @__PURE__ */ t(y, { header: /* @__PURE__ */ t(C, { title: o }), withPadding: !1, footer: a, children: F(n, l) });
-  }, H = (n, i) => {
+    return D ? /* @__PURE__ */ t("div", { className: h.workweekTableScroll, children: /* @__PURE__ */ t(
+      M,
+      {
+        label: l,
+        isWithinBox: !0,
+        columns: z,
+        data: K,
+        breakAt: Ne.SMALL
+      }
+    ) }) : /* @__PURE__ */ t(M, { label: l, isWithinBox: !0, columns: z, data: K });
+  }, oe = (n, i) => {
+    const { title: l, footer: a, ...o } = i;
+    return x(n).length === 0 && !a ? null : /* @__PURE__ */ t(y, { header: /* @__PURE__ */ t(C, { title: l }), withPadding: !1, footer: a, children: H(n, o) });
+  }, V = (n, i) => {
     if (n.length === 0) return null;
-    const { title: o, description: a } = i, l = [
+    const { title: l, description: a } = i, o = [
       {
         title: e("typeColumn"),
         render: (s) => s.name
@@ -220,7 +230,7 @@ const je = ({
       {
         title: e("hoursColumn"),
         justify: "end",
-        render: (s) => /* @__PURE__ */ t("div", { className: E.inputContainer, children: /* @__PURE__ */ t(
+        render: (s) => /* @__PURE__ */ t("div", { className: h.inputContainer, children: /* @__PURE__ */ t(
           s.Field,
           {
             label: s.name,
@@ -231,41 +241,41 @@ const je = ({
         ) })
       }
     ];
-    return /* @__PURE__ */ t(y, { header: /* @__PURE__ */ t(C, { title: o, description: a }), withPadding: !1, children: /* @__PURE__ */ t(_, { label: o, isWithinBox: !0, columns: l, data: n }) });
-  }, V = (n, i) => {
-    const o = [
+    return /* @__PURE__ */ t(y, { header: /* @__PURE__ */ t(C, { title: l, description: a }), withPadding: !1, children: /* @__PURE__ */ t(M, { label: l, isWithinBox: !0, columns: o, data: n }) });
+  }, j = (n, i) => {
+    const l = [
       { title: e("typeColumn"), render: (a) => a.label },
       {
         title: e("amountColumn"),
         justify: "end",
-        render: (a) => /* @__PURE__ */ t("div", { className: E.inputContainer, children: /* @__PURE__ */ t(a.Field, { label: a.label, shouldVisuallyHideLabel: !0, adornmentStart: "$" }) })
+        render: (a) => /* @__PURE__ */ t("div", { className: h.inputContainer, children: /* @__PURE__ */ t(a.Field, { label: a.label, shouldVisuallyHideLabel: !0, adornmentStart: "$" }) })
       }
     ];
-    return /* @__PURE__ */ t(_, { label: i, isWithinBox: !0, columns: o, data: n });
-  }, j = (n) => /* @__PURE__ */ t("div", { className: E.earningsGroupLabel, children: /* @__PURE__ */ t(d, { size: "sm", weight: "semibold", children: n }) }), ae = () => {
-    const n = c.overtimeIncludedEarnings, i = c.overtimeExcludedEarnings.map((l) => ({
-      label: x(l.id),
-      Field: l.Field
-    })), o = w(n).length > 0;
-    if (!o && i.length === 0) return null;
-    const a = F(n, {
+    return /* @__PURE__ */ t(M, { label: i, isWithinBox: !0, columns: l, data: n });
+  }, W = (n) => /* @__PURE__ */ t("div", { className: h.earningsGroupLabel, children: /* @__PURE__ */ t(d, { size: "sm", weight: "semibold", children: n }) }), se = () => {
+    const n = c.overtimeIncludedEarnings, i = c.overtimeExcludedEarnings.map((o) => ({
+      label: w(o.id),
+      Field: o.Field
+    })), l = x(n).length > 0;
+    if (!l && i.length === 0) return null;
+    const a = H(n, {
       label: e("additionalEarningsTitle"),
       rowHeader: e("typeColumn"),
       valueColumnLabel: e("amountColumn"),
-      labelFor: x,
+      labelFor: w,
       adornmentStart: "$"
     });
     if (!U(n)) {
-      const l = [
-        ...n.map((s) => ({ label: x(s.name), Field: s.Field })),
+      const o = [
+        ...n.map((s) => ({ label: w(s.name), Field: s.Field })),
         ...i
       ];
-      return /* @__PURE__ */ t(y, { header: /* @__PURE__ */ t(C, { title: e("additionalEarningsTitle") }), withPadding: !1, children: V(l, e("additionalEarningsTitle")) });
+      return /* @__PURE__ */ t(y, { header: /* @__PURE__ */ t(C, { title: e("additionalEarningsTitle") }), withPadding: !1, children: j(o, e("additionalEarningsTitle")) });
     }
     return /* @__PURE__ */ m(y, { header: /* @__PURE__ */ t(C, { title: e("additionalEarningsTitle") }), withPadding: !1, children: [
-      o ? /* @__PURE__ */ m(X, { children: [
-        /* @__PURE__ */ t("div", { className: E.earningsAlert, children: /* @__PURE__ */ t(
-          S,
+      l ? /* @__PURE__ */ m(Z, { children: [
+        /* @__PURE__ */ t("div", { className: h.earningsAlert, children: /* @__PURE__ */ t(
+          k,
           {
             status: "info",
             label: e("overtimeMultiplierEarningsAlert"),
@@ -273,36 +283,36 @@ const je = ({
             children: /* @__PURE__ */ t(d, { size: "sm", children: e("overtimeMultiplierEarningsAlertDescription") })
           }
         ) }),
-        j(e("overtimeIncludedEarningsGroupLabel")),
+        W(e("overtimeIncludedEarningsGroupLabel")),
         a
       ] }) : null,
-      i.length > 0 ? /* @__PURE__ */ m(X, { children: [
-        j(e("overtimeExcludedEarningsGroupLabel")),
-        V(i, e("overtimeExcludedEarningsGroupLabel"))
+      i.length > 0 ? /* @__PURE__ */ m(Z, { children: [
+        W(e("overtimeExcludedEarningsGroupLabel")),
+        j(i, e("overtimeExcludedEarningsGroupLabel"))
       ] }) : null
     ] });
-  }, W = c.paymentMethod, G = c.reimbursementDraft, le = r.data.reimbursements, oe = r.form.reimbursementDraft?.isAdding ?? !1, se = async () => {
+  }, G = c.paymentMethod, Y = c.reimbursementDraft, me = r.data.reimbursements, de = r.form.reimbursementDraft?.isAdding ?? !1, ce = async () => {
     const n = await r.actions.onSubmit();
-    n && P(J.RUN_PAYROLL_EMPLOYEE_SAVED, {
+    n && S(ee.RUN_PAYROLL_EMPLOYEE_SAVED, {
       payrollPrepared: n.data,
-      employee: k
+      employee: _
     });
-  }, Y = /* @__PURE__ */ m(
+  }, $ = /* @__PURE__ */ m(
     u,
     {
-      flexDirection: f ? "row" : "column",
-      justifyContent: f ? "flex-end" : "normal",
-      alignItems: f ? "flex-start" : "stretch",
+      flexDirection: E ? "row" : "column",
+      justifyContent: E ? "flex-end" : "normal",
+      alignItems: E ? "flex-start" : "stretch",
       gap: 12,
       children: [
         /* @__PURE__ */ t(v, { variant: "secondary", onClick: () => {
-          P(J.RUN_PAYROLL_EMPLOYEE_CANCELLED);
+          S(ee.RUN_PAYROLL_EMPLOYEE_CANCELLED);
         }, title: e("cancelCta"), children: e("cancelCta") }),
         /* @__PURE__ */ t(
           v,
           {
             onClick: () => {
-              se();
+              ce();
             },
             title: e("saveCta"),
             isLoading: r.status.isPending,
@@ -312,41 +322,41 @@ const je = ({
       ]
     }
   );
-  return /* @__PURE__ */ t("div", { ref: O, className: E.container, children: /* @__PURE__ */ t(Q, { error: r.errorHandling.errors, LoaderComponent: R, children: /* @__PURE__ */ t(we, { formHookResult: r, children: /* @__PURE__ */ m(u, { flexDirection: "column", gap: 24, children: [
+  return /* @__PURE__ */ t("div", { ref: O, className: h.container, children: /* @__PURE__ */ t(te, { error: r.errorHandling.errors, LoaderComponent: R, children: /* @__PURE__ */ t(Ie, { formHookResult: r, children: /* @__PURE__ */ m(u, { flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ m(
       u,
       {
-        flexDirection: f ? "row" : "column",
+        flexDirection: E ? "row" : "column",
         justifyContent: "space-between",
-        alignItems: f ? "flex-start" : "stretch",
+        alignItems: E ? "flex-start" : "stretch",
         gap: 12,
         children: [
-          /* @__PURE__ */ t(u, { flexDirection: "column", alignItems: "stretch", gap: 8, children: /* @__PURE__ */ t(A, { as: "h1", styledAs: "h2", children: e("pageTitle", { employeeName: B }) }) }),
-          f && Y
+          /* @__PURE__ */ t(u, { flexDirection: "column", alignItems: "stretch", gap: 8, children: /* @__PURE__ */ t(A, { as: "h1", styledAs: "h2", children: e("pageTitle", { employeeName: F }) }) }),
+          E && $
         ]
       }
     ),
-    !f && Y,
+    !E && $,
     (() => {
-      const n = c.jobs.length > 1, i = r.data.isOvertimeEligible ? e("regularHoursTitle") : e("regularHoursTitleWithoutOvertime"), o = !r.data.withOvertime && r.data.isOvertimeEligible, a = r.data.withOvertime && r.data.isOvertimeEligible;
+      const n = c.jobs.length > 1, i = r.data.isOvertimeEligible ? e("regularHoursTitle") : e("regularHoursTitleWithoutOvertime"), l = !r.data.withOvertime && r.data.isOvertimeEligible, a = r.data.withOvertime && r.data.isOvertimeEligible;
       return /* @__PURE__ */ m(u, { flexDirection: "column", gap: 16, children: [
         n ? /* @__PURE__ */ t(A, { as: "h3", children: i }) : null,
         a ? /* @__PURE__ */ t(
-          S,
+          k,
           {
             status: "info",
-            label: e("overtimeWorkweekAlert", { employeeName: B }),
+            label: e("overtimeWorkweekAlert", { employeeName: F }),
             disableScrollIntoView: !0
           }
         ) : null,
-        c.jobs.map((l) => /* @__PURE__ */ t(ge, { children: ie(l.hours, {
-          title: n ? l.title ?? i : i,
+        c.jobs.map((o) => /* @__PURE__ */ t(ge, { children: oe(o.hours, {
+          title: n ? o.title ?? i : i,
           label: i,
           rowHeader: e("hourTypeColumn"),
           valueColumnLabel: e("hoursColumn"),
-          labelFor: re,
+          labelFor: le,
           adornmentEnd: e("hoursUnit"),
-          footer: o ? /* @__PURE__ */ t(
+          footer: l ? /* @__PURE__ */ t(
             v,
             {
               variant: "secondary",
@@ -357,24 +367,24 @@ const je = ({
               children: e("addOvertimeCta")
             }
           ) : void 0
-        }) }, l.jobUuid))
+        }) }, o.jobUuid))
       ] });
     })(),
-    ae(),
-    H(c.timeOff, {
+    se(),
+    V(c.timeOff, {
       title: c.finalPayout ? e("timeOffTitleDismissal") : e("timeOffTitle")
     }),
-    c.finalPayout ? H(c.finalPayout, {
+    c.finalPayout ? V(c.finalPayout, {
       title: e("finalPayoutTitle"),
       description: e("finalPayoutDescription")
     }) : null,
-    W ? /* @__PURE__ */ m(u, { flexDirection: "column", gap: 24, children: [
-      G ? /* @__PURE__ */ t(
-        je,
+    G ? /* @__PURE__ */ m(u, { flexDirection: "column", gap: 24, children: [
+      Y ? /* @__PURE__ */ t(
+        Ge,
         {
-          rows: le ?? [],
-          isAdding: oe,
-          draftFields: G,
+          rows: me ?? [],
+          isAdding: de,
+          draftFields: Y,
           onBeginAdd: () => r.actions.beginAddReimbursement?.(),
           onSave: () => r.actions.saveReimbursement?.(),
           onCancel: () => r.actions.cancelReimbursement?.(),
@@ -384,11 +394,11 @@ const je = ({
       /* @__PURE__ */ m(u, { flexDirection: "column", gap: 12, children: [
         /* @__PURE__ */ t(A, { as: "h3", styledAs: "h4", children: e("paymentMethodTitle") }),
         /* @__PURE__ */ t(
-          W,
+          G,
           {
             label: e("paymentMethodLabel"),
             description: e("paymentMethodDescription"),
-            getOptionLabel: (n) => n === ye.Check ? e("paymentMethodOptions.check") : e("paymentMethodOptions.directDeposit")
+            getOptionLabel: (n) => n === Ce.Check ? e("paymentMethodOptions.check") : e("paymentMethodOptions.directDeposit")
           }
         )
       ] })
@@ -396,6 +406,6 @@ const je = ({
   ] }) }) }) });
 };
 export {
-  ft as UNSTABLE_PayrollEditEmployee
+  yt as UNSTABLE_PayrollEditEmployee
 };
 //# sourceMappingURL=UNSTABLE_PayrollEditEmployee.js.map