@gusto/embedded-react-sdk 0.42.0 → 0.43.0

package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.js

@@ -1,4 +1,4 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { useMemo as A, useCallback as F } from "react";
 import { useFormContext as G } from "react-hook-form";
 import { useTranslation as r } from "react-i18next";
@@ -8,15 +8,16 @@ import a from "./OffCycleCreationPresentation.module.scss.js";
 import { useI18n as c } from "../../../i18n/I18n.js";
 import { useComponentContext as k } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { Flex as o } from "../../Common/Flex/Flex.js";
+import "classnames";
 import { OffCycleReasonSelectionPresentation as N } from "../OffCycleReasonSelection/OffCycleReasonSelectionPresentation.js";
 import { MultiSelectComboBoxField as R } from "../../Common/Fields/MultiSelectComboBoxField/MultiSelectComboBoxField.js";
 import { RadioGroupField as j } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
 import { OffCycleTaxWithholdingTable as I } from "../OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTable.js";
 import { OffCycleTaxWithholdingModal as L } from "../OffCycleTaxWithholdingModal/OffCycleTaxWithholdingModal.js";
 import { SwitchField as M } from "../../Common/Fields/SwitchField/SwitchField.js";
-function oe({
+function ie({
   employees: g,
-  isPending: m,
+  isPending: d,
   taxWithholdingConfig: u,
   isTaxWithholdingModalOpen: C,
   onTaxWithholdingEditClick: x,
@@ -24,7 +25,7 @@ function oe({
   onTaxWithholdingModalCancel: b
 }) {
   c("Payroll.OffCycleCreation"), c("Payroll.OffCycleDeductionsSetting"), c("Payroll.EmployeeSelection"), c("Payroll.OffCycleTaxWithholding");
-  const { t: i } = r("Payroll.OffCycleCreation"), { t } = r("Payroll.OffCycleDeductionsSetting"), { t: s } = r("Payroll.EmployeeSelection"), { t: p } = r("Payroll.OffCycleTaxWithholding"), { Heading: d, Text: f, Button: D } = k(), P = A(
+  const { t: i } = r("Payroll.OffCycleCreation"), { t: n } = r("Payroll.OffCycleDeductionsSetting"), { t: s } = r("Payroll.EmployeeSelection"), { t: p } = r("Payroll.OffCycleTaxWithholding"), { Heading: m, Text: f, Button: D } = k(), P = A(
     () => W.map((l) => {
       const y = {
         category: l,
@@ -41,21 +42,21 @@ function oe({
   ), v = [
     {
       value: !1,
-      label: t("options.include.label")
+      label: n("options.include.label")
     },
     {
       value: !0,
-      label: t("options.skip.label")
+      label: n("options.skip.label")
     }
   ];
-  return /* @__PURE__ */ n(o, { flexDirection: "column", gap: 32, children: [
-    /* @__PURE__ */ n(o, { flexDirection: "column", gap: 4, children: [
-      /* @__PURE__ */ e(d, { as: "h2", children: i("pageTitle") }),
+  return /* @__PURE__ */ t(o, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ t(o, { flexDirection: "column", gap: 4, children: [
+      /* @__PURE__ */ e(m, { as: "h2", children: i("pageTitle") }),
       /* @__PURE__ */ e(f, { variant: "supporting", children: i("pageDescription") })
     ] }),
-    /* @__PURE__ */ n(o, { flexDirection: "column", gap: 20, children: [
-      /* @__PURE__ */ n(o, { flexDirection: "column", gap: 4, children: [
-        /* @__PURE__ */ e(d, { as: "h3", children: i("payPeriodSectionTitle") }),
+    /* @__PURE__ */ t(o, { flexDirection: "column", gap: 20, children: [
+      /* @__PURE__ */ t(o, { flexDirection: "column", gap: 4, children: [
+        /* @__PURE__ */ e(m, { as: "h3", children: i("payPeriodSectionTitle") }),
         /* @__PURE__ */ e(f, { variant: "supporting", children: i("payPeriodSectionDescription") })
       ] }),
       /* @__PURE__ */ e(w, {})
@@ -63,8 +64,8 @@ function oe({
     /* @__PURE__ */ e("hr", { className: a.divider }),
     /* @__PURE__ */ e(o, { flexDirection: "column", gap: 20, children: /* @__PURE__ */ e(N, { name: "reason" }) }),
     /* @__PURE__ */ e("hr", { className: a.divider }),
-    /* @__PURE__ */ n(o, { flexDirection: "column", gap: 12, children: [
-      /* @__PURE__ */ e(d, { as: "h3", children: s("sectionTitle") }),
+    /* @__PURE__ */ t(o, { flexDirection: "column", gap: 12, children: [
+      /* @__PURE__ */ e(m, { as: "h3", children: s("sectionTitle") }),
       /* @__PURE__ */ e(
         M,
         {
@@ -89,8 +90,8 @@ function oe({
       j,
       {
         name: "skipRegularDeductions",
-        label: t("title"),
-        description: t("description"),
+        label: n("title"),
+        description: n("description"),
         options: v,
         convertValueToString: (l) => String(l)
       }
@@ -113,10 +114,10 @@ function oe({
         onCancel: b
       }
     ),
-    /* @__PURE__ */ e(o, { justifyContent: "flex-end", gap: 12, children: /* @__PURE__ */ e(D, { type: "submit", isLoading: m, isDisabled: m, children: i("continueCta") }) })
+    /* @__PURE__ */ e(o, { justifyContent: "flex-end", gap: 12, children: /* @__PURE__ */ e(D, { type: "submit", isLoading: d, isDisabled: d, children: i("continueCta") }) })
   ] });
 }
 export {
-  oe as OffCycleCreationPresentation
+  ie as OffCycleCreationPresentation
 };
 //# sourceMappingURL=OffCycleCreationPresentation.js.map

package/dist/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"OffCycleCreationPresentation.js","sources":["../../../../src/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { OffCycleReasonSelectionPresentation } from '../OffCycleReasonSelection'\nimport { OffCyclePayPeriodDateFormPresentation } from '../OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation'\nimport { OffCycleTaxWithholdingTable } from '../OffCycleTaxWithholdingTable'\nimport { OffCycleTaxWithholdingModal } from '../OffCycleTaxWithholdingModal'\nimport {\n  WAGE_TYPE_CATEGORIES,\n  type WageTypeGroup,\n} from '../OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes'\nimport type {\n  OffCycleCreationFormData,\n  OffCycleCreationPresentationProps,\n} from './OffCycleCreationTypes'\nimport styles from './OffCycleCreationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex, RadioGroupField, SwitchField, MultiSelectComboBoxField } from '@/components/Common'\n\nexport function OffCycleCreationPresentation({\n  employees,\n  isPending,\n  taxWithholdingConfig,\n  isTaxWithholdingModalOpen,\n  onTaxWithholdingEditClick,\n  onTaxWithholdingModalDone,\n  onTaxWithholdingModalCancel,\n}: OffCycleCreationPresentationProps) {\n  useI18n('Payroll.OffCycleCreation')\n  useI18n('Payroll.OffCycleDeductionsSetting')\n  useI18n('Payroll.EmployeeSelection')\n  useI18n('Payroll.OffCycleTaxWithholding')\n  const { t } = useTranslation('Payroll.OffCycleCreation')\n  const { t: tDeductions } = useTranslation('Payroll.OffCycleDeductionsSetting')\n  const { t: tEmployees } = useTranslation('Payroll.EmployeeSelection')\n  const { t: tWithholding } = useTranslation('Payroll.OffCycleTaxWithholding')\n  const { Heading, Text, Button } = useComponentContext()\n\n  const wageTypeGroups: WageTypeGroup[] = useMemo(\n    () =>\n      WAGE_TYPE_CATEGORIES.map(category => {\n        const group: WageTypeGroup = {\n          category,\n          label: tWithholding(`wageTypeGroups.${category}.label`),\n        }\n        if (category === 'regular' || category === 'supplemental') {\n          group.description = tWithholding(`wageTypeGroups.${category}.description`)\n        }\n        return group\n      }),\n    [tWithholding],\n  )\n\n  const { setValue, watch } = useFormContext<OffCycleCreationFormData>()\n  const includeAllEmployees = watch('includeAllEmployees')\n\n  const handleToggleIncludeAll = useCallback(\n    (checked: boolean) => {\n      if (checked) {\n        setValue('selectedEmployeeUuids', [])\n      }\n    },\n    [setValue],\n  )\n\n  const deductionsOptions = [\n    {\n      value: false,\n      label: tDeductions('options.include.label'),\n    },\n    {\n      value: true,\n      label: tDeductions('options.skip.label'),\n    },\n  ]\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={4}>\n        <Heading as=\"h2\">{t('pageTitle')}</Heading>\n        <Text variant=\"supporting\">{t('pageDescription')}</Text>\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={20}>\n        <Flex flexDirection=\"column\" gap={4}>\n          <Heading as=\"h3\">{t('payPeriodSectionTitle')}</Heading>\n          <Text variant=\"supporting\">{t('payPeriodSectionDescription')}</Text>\n        </Flex>\n        <OffCyclePayPeriodDateFormPresentation />\n      </Flex>\n\n      <hr className={styles.divider} />\n\n      <Flex flexDirection=\"column\" gap={20}>\n        <OffCycleReasonSelectionPresentation name=\"reason\" />\n      </Flex>\n\n      <hr className={styles.divider} />\n\n      <Flex flexDirection=\"column\" gap={12}>\n        <Heading as=\"h3\">{tEmployees('sectionTitle')}</Heading>\n        <SwitchField\n          name=\"includeAllEmployees\"\n          label={t('includeAllEmployeesLabel')}\n          onChange={handleToggleIncludeAll}\n        />\n        {!includeAllEmployees && (\n          <MultiSelectComboBoxField\n            name=\"selectedEmployeeUuids\"\n            label={tEmployees('sectionTitle')}\n            shouldVisuallyHideLabel\n            placeholder={tEmployees('searchPlaceholder')}\n            options={employees}\n          />\n        )}\n      </Flex>\n\n      <hr className={styles.divider} />\n\n      <Flex flexDirection=\"column\" gap={20}>\n        <RadioGroupField<boolean>\n          name=\"skipRegularDeductions\"\n          label={tDeductions('title')}\n          description={tDeductions('description')}\n          options={deductionsOptions}\n          convertValueToString={value => String(value)}\n        />\n      </Flex>\n\n      <hr className={styles.divider} />\n\n      <OffCycleTaxWithholdingTable\n        wageTypeGroups={wageTypeGroups}\n        config={taxWithholdingConfig}\n        onEditClick={onTaxWithholdingEditClick}\n      />\n      {isTaxWithholdingModalOpen && (\n        <OffCycleTaxWithholdingModal\n          isOpen\n          defaultConfig={taxWithholdingConfig}\n          onDone={onTaxWithholdingModalDone}\n          onCancel={onTaxWithholdingModalCancel}\n        />\n      )}\n\n      <Flex justifyContent=\"flex-end\" gap={12}>\n        <Button type=\"submit\" isLoading={isPending} isDisabled={isPending}>\n          {t('continueCta')}\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["OffCycleCreationPresentation","employees","isPending","taxWithholdingConfig","isTaxWithholdingModalOpen","onTaxWithholdingEditClick","onTaxWithholdingModalDone","onTaxWithholdingModalCancel","useI18n","t","useTranslation","tDeductions","tEmployees","tWithholding","Heading","Text","Button","useComponentContext","wageTypeGroups","useMemo","WAGE_TYPE_CATEGORIES","category","group","setValue","watch","useFormContext","includeAllEmployees","handleToggleIncludeAll","useCallback","checked","deductionsOptions","jsxs","Flex","jsx","OffCyclePayPeriodDateFormPresentation","styles","OffCycleReasonSelectionPresentation","SwitchField","MultiSelectComboBoxField","RadioGroupField","value","OffCycleTaxWithholdingTable","OffCycleTaxWithholdingModal"],"mappings":"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"}
+{"version":3,"file":"OffCycleCreationPresentation.js","sources":["../../../../src/components/Payroll/OffCycleCreation/OffCycleCreationPresentation.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { OffCycleReasonSelectionPresentation } from '../OffCycleReasonSelection'\nimport { OffCyclePayPeriodDateFormPresentation } from '../OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation'\nimport { OffCycleTaxWithholdingTable } from '../OffCycleTaxWithholdingTable'\nimport { OffCycleTaxWithholdingModal } from '../OffCycleTaxWithholdingModal'\nimport {\n  WAGE_TYPE_CATEGORIES,\n  type WageTypeGroup,\n} from '../OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes'\nimport type {\n  OffCycleCreationFormData,\n  OffCycleCreationPresentationProps,\n} from './OffCycleCreationTypes'\nimport styles from './OffCycleCreationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex, RadioGroupField, SwitchField, MultiSelectComboBoxField } from '@/components/Common'\n\nexport function OffCycleCreationPresentation({\n  employees,\n  isPending,\n  taxWithholdingConfig,\n  isTaxWithholdingModalOpen,\n  onTaxWithholdingEditClick,\n  onTaxWithholdingModalDone,\n  onTaxWithholdingModalCancel,\n}: OffCycleCreationPresentationProps) {\n  useI18n('Payroll.OffCycleCreation')\n  useI18n('Payroll.OffCycleDeductionsSetting')\n  useI18n('Payroll.EmployeeSelection')\n  useI18n('Payroll.OffCycleTaxWithholding')\n  const { t } = useTranslation('Payroll.OffCycleCreation')\n  const { t: tDeductions } = useTranslation('Payroll.OffCycleDeductionsSetting')\n  const { t: tEmployees } = useTranslation('Payroll.EmployeeSelection')\n  const { t: tWithholding } = useTranslation('Payroll.OffCycleTaxWithholding')\n  const { Heading, Text, Button } = useComponentContext()\n\n  const wageTypeGroups: WageTypeGroup[] = useMemo(\n    () =>\n      WAGE_TYPE_CATEGORIES.map(category => {\n        const group: WageTypeGroup = {\n          category,\n          label: tWithholding(`wageTypeGroups.${category}.label`),\n        }\n        if (category === 'regular' || category === 'supplemental') {\n          group.description = tWithholding(`wageTypeGroups.${category}.description`)\n        }\n        return group\n      }),\n    [tWithholding],\n  )\n\n  const { setValue, watch } = useFormContext<OffCycleCreationFormData>()\n  const includeAllEmployees = watch('includeAllEmployees')\n\n  const handleToggleIncludeAll = useCallback(\n    (checked: boolean) => {\n      if (checked) {\n        setValue('selectedEmployeeUuids', [])\n      }\n    },\n    [setValue],\n  )\n\n  const deductionsOptions = [\n    {\n      value: false,\n      label: tDeductions('options.include.label'),\n    },\n    {\n      value: true,\n      label: tDeductions('options.skip.label'),\n    },\n  ]\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={4}>\n        <Heading as=\"h2\">{t('pageTitle')}</Heading>\n        <Text variant=\"supporting\">{t('pageDescription')}</Text>\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={20}>\n        <Flex flexDirection=\"column\" gap={4}>\n          <Heading as=\"h3\">{t('payPeriodSectionTitle')}</Heading>\n          <Text variant=\"supporting\">{t('payPeriodSectionDescription')}</Text>\n        </Flex>\n        <OffCyclePayPeriodDateFormPresentation />\n      </Flex>\n\n      <hr className={styles.divider} />\n\n      <Flex flexDirection=\"column\" gap={20}>\n        <OffCycleReasonSelectionPresentation name=\"reason\" />\n      </Flex>\n\n      <hr className={styles.divider} />\n\n      <Flex flexDirection=\"column\" gap={12}>\n        <Heading as=\"h3\">{tEmployees('sectionTitle')}</Heading>\n        <SwitchField\n          name=\"includeAllEmployees\"\n          label={t('includeAllEmployeesLabel')}\n          onChange={handleToggleIncludeAll}\n        />\n        {!includeAllEmployees && (\n          <MultiSelectComboBoxField\n            name=\"selectedEmployeeUuids\"\n            label={tEmployees('sectionTitle')}\n            shouldVisuallyHideLabel\n            placeholder={tEmployees('searchPlaceholder')}\n            options={employees}\n          />\n        )}\n      </Flex>\n\n      <hr className={styles.divider} />\n\n      <Flex flexDirection=\"column\" gap={20}>\n        <RadioGroupField<boolean>\n          name=\"skipRegularDeductions\"\n          label={tDeductions('title')}\n          description={tDeductions('description')}\n          options={deductionsOptions}\n          convertValueToString={value => String(value)}\n        />\n      </Flex>\n\n      <hr className={styles.divider} />\n\n      <OffCycleTaxWithholdingTable\n        wageTypeGroups={wageTypeGroups}\n        config={taxWithholdingConfig}\n        onEditClick={onTaxWithholdingEditClick}\n      />\n      {isTaxWithholdingModalOpen && (\n        <OffCycleTaxWithholdingModal\n          isOpen\n          defaultConfig={taxWithholdingConfig}\n          onDone={onTaxWithholdingModalDone}\n          onCancel={onTaxWithholdingModalCancel}\n        />\n      )}\n\n      <Flex justifyContent=\"flex-end\" gap={12}>\n        <Button type=\"submit\" isLoading={isPending} isDisabled={isPending}>\n          {t('continueCta')}\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["OffCycleCreationPresentation","employees","isPending","taxWithholdingConfig","isTaxWithholdingModalOpen","onTaxWithholdingEditClick","onTaxWithholdingModalDone","onTaxWithholdingModalCancel","useI18n","t","useTranslation","tDeductions","tEmployees","tWithholding","Heading","Text","Button","useComponentContext","wageTypeGroups","useMemo","WAGE_TYPE_CATEGORIES","category","group","setValue","watch","useFormContext","includeAllEmployees","handleToggleIncludeAll","useCallback","checked","deductionsOptions","jsxs","Flex","jsx","OffCyclePayPeriodDateFormPresentation","styles","OffCycleReasonSelectionPresentation","SwitchField","MultiSelectComboBoxField","RadioGroupField","value","OffCycleTaxWithholdingTable","OffCycleTaxWithholdingModal"],"mappings":"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"}

package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js

@@ -1,19 +1,20 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { useTranslation as l } from "react-i18next";
-import r from "./OffCyclePayPeriodDateFormPresentation.module.scss.js";
+import a from "./OffCyclePayPeriodDateFormPresentation.module.scss.js";
 import { useI18n as o } from "../../../i18n/I18n.js";
+import "classnames";
 import { CheckboxField as c } from "../../Common/Fields/CheckboxField/CheckboxField.js";
 import { DatePickerField as t } from "../../Common/Fields/DatePickerField/DatePickerField.js";
-function D() {
+function h() {
   o("Payroll.OffCyclePayPeriodDateForm");
   const { t: e } = l("Payroll.OffCyclePayPeriodDateForm");
-  return /* @__PURE__ */ i("div", { className: r.root, children: [
-    /* @__PURE__ */ i("div", { className: r.dateFields, children: [
-      /* @__PURE__ */ a(t, { name: "startDate", label: e("startDateLabel"), isRequired: !0 }),
-      /* @__PURE__ */ a(t, { name: "endDate", label: e("endDateLabel"), isRequired: !0 })
+  return /* @__PURE__ */ i("div", { className: a.root, children: [
+    /* @__PURE__ */ i("div", { className: a.dateFields, children: [
+      /* @__PURE__ */ r(t, { name: "startDate", label: e("startDateLabel"), isRequired: !0 }),
+      /* @__PURE__ */ r(t, { name: "endDate", label: e("endDateLabel"), isRequired: !0 })
     ] }),
-    /* @__PURE__ */ a("div", { className: r.checkDateField, children: /* @__PURE__ */ a(t, { name: "checkDate", label: e("checkDateLabel"), isRequired: !0 }) }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ r("div", { className: a.checkDateField, children: /* @__PURE__ */ r(t, { name: "checkDate", label: e("checkDateLabel"), isRequired: !0 }) }),
+    /* @__PURE__ */ r(
       c,
       {
         name: "isCheckOnly",
@@ -24,6 +25,6 @@ function D() {
   ] });
 }
 export {
-  D as OffCyclePayPeriodDateFormPresentation
+  h as OffCyclePayPeriodDateFormPresentation
 };
 //# sourceMappingURL=OffCyclePayPeriodDateFormPresentation.js.map

package/dist/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"OffCyclePayPeriodDateFormPresentation.js","sources":["../../../../src/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport styles from './OffCyclePayPeriodDateFormPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { CheckboxField, DatePickerField } from '@/components/Common'\n\nexport function OffCyclePayPeriodDateFormPresentation() {\n  useI18n('Payroll.OffCyclePayPeriodDateForm')\n  const { t } = useTranslation('Payroll.OffCyclePayPeriodDateForm')\n\n  return (\n    <div className={styles.root}>\n      <div className={styles.dateFields}>\n        <DatePickerField name=\"startDate\" label={t('startDateLabel')} isRequired />\n        <DatePickerField name=\"endDate\" label={t('endDateLabel')} isRequired />\n      </div>\n\n      <div className={styles.checkDateField}>\n        <DatePickerField name=\"checkDate\" label={t('checkDateLabel')} isRequired />\n      </div>\n\n      <CheckboxField\n        name=\"isCheckOnly\"\n        label={t('checkOnlyLabel')}\n        description={t('checkOnlyDescription')}\n      />\n    </div>\n  )\n}\n"],"names":["OffCyclePayPeriodDateFormPresentation","useI18n","t","useTranslation","jsxs","styles","jsx","DatePickerField","CheckboxField"],"mappings":";;;;;;AAKO,SAASA,IAAwC;AACtD,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,mCAAmC;AAEhE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,MACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,YACrB,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,aAAY,OAAOL,EAAE,gBAAgB,GAAG,YAAU,IAAC;AAAA,MACzE,gBAAAI,EAACC,KAAgB,MAAK,WAAU,OAAOL,EAAE,cAAc,GAAG,YAAU,GAAA,CAAC;AAAA,IAAA,GACvE;AAAA,IAEA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,gBACrB,UAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,aAAY,OAAOL,EAAE,gBAAgB,GAAG,YAAU,IAAC,GAC3E;AAAA,IAEA,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAON,EAAE,gBAAgB;AAAA,QACzB,aAAaA,EAAE,sBAAsB;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GACF;AAEJ;"}
+{"version":3,"file":"OffCyclePayPeriodDateFormPresentation.js","sources":["../../../../src/components/Payroll/OffCyclePayPeriodDateForm/OffCyclePayPeriodDateFormPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport styles from './OffCyclePayPeriodDateFormPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { CheckboxField, DatePickerField } from '@/components/Common'\n\nexport function OffCyclePayPeriodDateFormPresentation() {\n  useI18n('Payroll.OffCyclePayPeriodDateForm')\n  const { t } = useTranslation('Payroll.OffCyclePayPeriodDateForm')\n\n  return (\n    <div className={styles.root}>\n      <div className={styles.dateFields}>\n        <DatePickerField name=\"startDate\" label={t('startDateLabel')} isRequired />\n        <DatePickerField name=\"endDate\" label={t('endDateLabel')} isRequired />\n      </div>\n\n      <div className={styles.checkDateField}>\n        <DatePickerField name=\"checkDate\" label={t('checkDateLabel')} isRequired />\n      </div>\n\n      <CheckboxField\n        name=\"isCheckOnly\"\n        label={t('checkOnlyLabel')}\n        description={t('checkOnlyDescription')}\n      />\n    </div>\n  )\n}\n"],"names":["OffCyclePayPeriodDateFormPresentation","useI18n","t","useTranslation","jsxs","styles","jsx","DatePickerField","CheckboxField"],"mappings":";;;;;;;AAKO,SAASA,IAAwC;AACtD,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,mCAAmC;AAEhE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,MACrB,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,YACrB,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,aAAY,OAAOL,EAAE,gBAAgB,GAAG,YAAU,IAAC;AAAA,MACzE,gBAAAI,EAACC,KAAgB,MAAK,WAAU,OAAOL,EAAE,cAAc,GAAG,YAAU,GAAA,CAAC;AAAA,IAAA,GACvE;AAAA,IAEA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAO,gBACrB,UAAA,gBAAAC,EAACC,GAAA,EAAgB,MAAK,aAAY,OAAOL,EAAE,gBAAgB,GAAG,YAAU,IAAC,GAC3E;AAAA,IAEA,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAON,EAAE,gBAAgB;AAAA,QACzB,aAAaA,EAAE,sBAAsB;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GACF;AAEJ;"}

package/dist/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelectionPresentation.js

@@ -1,6 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { useMemo as r } from "react";
 import { useTranslation as s } from "react-i18next";
+import "classnames";
 import { RadioGroupField as l } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
 function f({
   name: e,

package/dist/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelectionPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"OffCycleReasonSelectionPresentation.js","sources":["../../../../src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelectionPresentation.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { OffCycleReason } from './types'\nimport { RadioGroupField } from '@/components/Common'\n\ninterface OffCycleReasonSelectionPresentationProps {\n  name: string\n  onChange?: (value: OffCycleReason) => void\n}\n\nexport function OffCycleReasonSelectionPresentation({\n  name,\n  onChange,\n}: OffCycleReasonSelectionPresentationProps) {\n  const { t } = useTranslation('Payroll.OffCycleReasonSelection')\n\n  const options = useMemo(\n    () => [\n      {\n        value: 'correction' as OffCycleReason,\n        label: t('options.correction.label'),\n        description: t('options.correction.description'),\n      },\n      {\n        value: 'bonus' as OffCycleReason,\n        label: t('options.bonus.label'),\n        description: t('options.bonus.description'),\n      },\n    ],\n    [t],\n  )\n\n  return (\n    <RadioGroupField<OffCycleReason>\n      name={name}\n      label={t('title')}\n      options={options}\n      isRequired\n      onChange={onChange}\n    />\n  )\n}\n"],"names":["OffCycleReasonSelectionPresentation","name","onChange","t","useTranslation","options","useMemo","jsx","RadioGroupField"],"mappings":";;;;AAUO,SAASA,EAAoC;AAAA,EAClD,MAAAC;AAAA,EACA,UAAAC;AACF,GAA6C;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,iCAAiC,GAExDC,IAAUC;AAAA,IACd,MAAM;AAAA,MACJ;AAAA,QACE,OAAO;AAAA,QACP,OAAOH,EAAE,0BAA0B;AAAA,QACnC,aAAaA,EAAE,gCAAgC;AAAA,MAAA;AAAA,MAEjD;AAAA,QACE,OAAO;AAAA,QACP,OAAOA,EAAE,qBAAqB;AAAA,QAC9B,aAAaA,EAAE,2BAA2B;AAAA,MAAA;AAAA,IAC5C;AAAA,IAEF,CAACA,CAAC;AAAA,EAAA;AAGJ,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,OAAOE,EAAE,OAAO;AAAA,MAChB,SAAAE;AAAA,MACA,YAAU;AAAA,MACV,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"OffCycleReasonSelectionPresentation.js","sources":["../../../../src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelectionPresentation.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { OffCycleReason } from './types'\nimport { RadioGroupField } from '@/components/Common'\n\ninterface OffCycleReasonSelectionPresentationProps {\n  name: string\n  onChange?: (value: OffCycleReason) => void\n}\n\nexport function OffCycleReasonSelectionPresentation({\n  name,\n  onChange,\n}: OffCycleReasonSelectionPresentationProps) {\n  const { t } = useTranslation('Payroll.OffCycleReasonSelection')\n\n  const options = useMemo(\n    () => [\n      {\n        value: 'correction' as OffCycleReason,\n        label: t('options.correction.label'),\n        description: t('options.correction.description'),\n      },\n      {\n        value: 'bonus' as OffCycleReason,\n        label: t('options.bonus.label'),\n        description: t('options.bonus.description'),\n      },\n    ],\n    [t],\n  )\n\n  return (\n    <RadioGroupField<OffCycleReason>\n      name={name}\n      label={t('title')}\n      options={options}\n      isRequired\n      onChange={onChange}\n    />\n  )\n}\n"],"names":["OffCycleReasonSelectionPresentation","name","onChange","t","useTranslation","options","useMemo","jsx","RadioGroupField"],"mappings":";;;;;AAUO,SAASA,EAAoC;AAAA,EAClD,MAAAC;AAAA,EACA,UAAAC;AACF,GAA6C;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,iCAAiC,GAExDC,IAAUC;AAAA,IACd,MAAM;AAAA,MACJ;AAAA,QACE,OAAO;AAAA,QACP,OAAOH,EAAE,0BAA0B;AAAA,QACnC,aAAaA,EAAE,gCAAgC;AAAA,MAAA;AAAA,MAEjD;AAAA,QACE,OAAO;AAAA,QACP,OAAOA,EAAE,qBAAqB;AAAA,QAC9B,aAAaA,EAAE,2BAA2B;AAAA,MAAA;AAAA,IAC5C;AAAA,IAEF,CAACA,CAAC;AAAA,EAAA;AAGJ,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,OAAOE,EAAE,OAAO;AAAA,MAChB,SAAAE;AAAA,MACA,YAAU;AAAA,MACV,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/OffCycleTaxWithholdingModal/OffCycleTaxWithholdingModal.js

@@ -5,12 +5,13 @@ import { useTranslation as L } from "react-i18next";
 import { WithholdingPayPeriod as N } from "@gusto/embedded-api/models/operations/postv1companiescompanyidpayrolls";
 import { WITHHOLDING_PAY_PERIOD_I18N_KEY as p } from "../OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes.js";
 import l from "./OffCycleTaxWithholdingModal.module.scss.js";
+import "classnames";
 import { ActionsLayout as T } from "../../Common/ActionsLayout/ActionsLayout.js";
 import { useComponentContext as W } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as w } from "../../../i18n/I18n.js";
 import { SelectField as D } from "../../Common/Fields/SelectField/SelectField.js";
 import { RadioGroupField as H } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
-function Y({
+function K({
   isOpen: h,
   defaultConfig: f,
   onDone: g,
@@ -95,6 +96,6 @@ function Y({
   );
 }
 export {
-  Y as OffCycleTaxWithholdingModal
+  K as OffCycleTaxWithholdingModal
 };
 //# sourceMappingURL=OffCycleTaxWithholdingModal.js.map

package/dist/components/Payroll/OffCycleTaxWithholdingModal/OffCycleTaxWithholdingModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"OffCycleTaxWithholdingModal.js","sources":["../../../../src/components/Payroll/OffCycleTaxWithholdingModal/OffCycleTaxWithholdingModal.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { FormProvider, useForm, useWatch } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { WithholdingPayPeriod } from '@gusto/embedded-api/models/operations/postv1companiescompanyidpayrolls'\nimport { WITHHOLDING_PAY_PERIOD_I18N_KEY } from '../OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes'\nimport type { OffCycleTaxWithholdingConfig } from '../OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes'\nimport styles from './OffCycleTaxWithholdingModal.module.scss'\nimport type { OffCycleTaxWithholdingModalProps } from './OffCycleTaxWithholdingModalTypes'\nimport { ActionsLayout, SelectField, RadioGroupField } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\n\nexport function OffCycleTaxWithholdingModal({\n  isOpen,\n  defaultConfig,\n  onDone,\n  onCancel,\n}: OffCycleTaxWithholdingModalProps) {\n  useI18n('Payroll.OffCycleTaxWithholding')\n  const { t } = useTranslation('Payroll.OffCycleTaxWithholding')\n  const { Modal, Heading, Text, Button } = useComponentContext()\n  const modalContainerRef = useRef<HTMLDivElement>(null)\n\n  const formHandlers = useForm<OffCycleTaxWithholdingConfig>({\n    defaultValues: defaultConfig,\n  })\n\n  const currentWithholdingPayPeriod = useWatch({\n    control: formHandlers.control,\n    name: 'withholdingPayPeriod',\n  })\n\n  const frequencyOptions = useMemo(\n    () =>\n      Object.values(WithholdingPayPeriod).map(value => ({\n        value,\n        label: t(WITHHOLDING_PAY_PERIOD_I18N_KEY[value]),\n      })),\n    [t],\n  )\n\n  const frequencyDisplayText = t(\n    WITHHOLDING_PAY_PERIOD_I18N_KEY[currentWithholdingPayPeriod],\n  ).toLowerCase()\n\n  const withholdingRateOptions = useMemo(\n    () => [\n      {\n        value: 'supplemental' as const,\n        label: t('modal.supplementalSection.useSupplementalRate'),\n        description: t('modal.supplementalSection.useSupplementalRateDescription'),\n      },\n      {\n        value: 'regular' as const,\n        label: t('modal.supplementalSection.useRegularRate', {\n          frequency: frequencyDisplayText,\n        }),\n        description: t('modal.supplementalSection.useRegularRateDescription'),\n      },\n    ],\n    [t, frequencyDisplayText],\n  )\n\n  const handleSubmit = formHandlers.handleSubmit(onDone)\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onCancel}\n      containerRef={modalContainerRef}\n      footer={\n        <ActionsLayout>\n          <Button variant=\"secondary\" onClick={onCancel}>\n            {t('modal.cancelButton')}\n          </Button>\n          <Button variant=\"primary\" onClick={handleSubmit}>\n            {t('modal.doneButton')}\n          </Button>\n        </ActionsLayout>\n      }\n    >\n      <FormProvider {...formHandlers}>\n        <div className={styles.content}>\n          <Heading as=\"h2\">{t('modal.title')}</Heading>\n\n          <div className={styles.section}>\n            <Heading as=\"h3\">{t('modal.regularSection.title')}</Heading>\n            <Text variant=\"supporting\">{t('modal.regularSection.subtitle')}</Text>\n\n            <div className={styles.rateInfo}>\n              <Text weight=\"semibold\">{t('modal.regularSection.rateLabel')}</Text>\n              <Text variant=\"supporting\">{t('modal.regularSection.rateDescription')}</Text>\n            </div>\n\n            <SelectField\n              name=\"withholdingPayPeriod\"\n              label={t('modal.regularSection.rateLabel')}\n              options={frequencyOptions}\n              shouldVisuallyHideLabel\n              portalContainer={modalContainerRef.current ?? undefined}\n            />\n          </div>\n\n          <hr className={styles.divider} />\n\n          <div className={styles.section}>\n            <Heading as=\"h3\">{t('modal.supplementalSection.title')}</Heading>\n            <RadioGroupField\n              name=\"withholdingRate\"\n              label={t('modal.supplementalSection.title')}\n              options={withholdingRateOptions}\n              shouldVisuallyHideLabel\n            />\n          </div>\n        </div>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["OffCycleTaxWithholdingModal","isOpen","defaultConfig","onDone","onCancel","useI18n","t","useTranslation","Modal","Heading","Text","Button","useComponentContext","modalContainerRef","useRef","formHandlers","useForm","currentWithholdingPayPeriod","useWatch","frequencyOptions","useMemo","WithholdingPayPeriod","value","WITHHOLDING_PAY_PERIOD_I18N_KEY","frequencyDisplayText","withholdingRateOptions","handleSubmit","jsx","ActionsLayout","FormProvider","styles","jsxs","SelectField","RadioGroupField"],"mappings":"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"}
+{"version":3,"file":"OffCycleTaxWithholdingModal.js","sources":["../../../../src/components/Payroll/OffCycleTaxWithholdingModal/OffCycleTaxWithholdingModal.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { FormProvider, useForm, useWatch } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { WithholdingPayPeriod } from '@gusto/embedded-api/models/operations/postv1companiescompanyidpayrolls'\nimport { WITHHOLDING_PAY_PERIOD_I18N_KEY } from '../OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes'\nimport type { OffCycleTaxWithholdingConfig } from '../OffCycleTaxWithholdingTable/OffCycleTaxWithholdingTableTypes'\nimport styles from './OffCycleTaxWithholdingModal.module.scss'\nimport type { OffCycleTaxWithholdingModalProps } from './OffCycleTaxWithholdingModalTypes'\nimport { ActionsLayout, SelectField, RadioGroupField } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\n\nexport function OffCycleTaxWithholdingModal({\n  isOpen,\n  defaultConfig,\n  onDone,\n  onCancel,\n}: OffCycleTaxWithholdingModalProps) {\n  useI18n('Payroll.OffCycleTaxWithholding')\n  const { t } = useTranslation('Payroll.OffCycleTaxWithholding')\n  const { Modal, Heading, Text, Button } = useComponentContext()\n  const modalContainerRef = useRef<HTMLDivElement>(null)\n\n  const formHandlers = useForm<OffCycleTaxWithholdingConfig>({\n    defaultValues: defaultConfig,\n  })\n\n  const currentWithholdingPayPeriod = useWatch({\n    control: formHandlers.control,\n    name: 'withholdingPayPeriod',\n  })\n\n  const frequencyOptions = useMemo(\n    () =>\n      Object.values(WithholdingPayPeriod).map(value => ({\n        value,\n        label: t(WITHHOLDING_PAY_PERIOD_I18N_KEY[value]),\n      })),\n    [t],\n  )\n\n  const frequencyDisplayText = t(\n    WITHHOLDING_PAY_PERIOD_I18N_KEY[currentWithholdingPayPeriod],\n  ).toLowerCase()\n\n  const withholdingRateOptions = useMemo(\n    () => [\n      {\n        value: 'supplemental' as const,\n        label: t('modal.supplementalSection.useSupplementalRate'),\n        description: t('modal.supplementalSection.useSupplementalRateDescription'),\n      },\n      {\n        value: 'regular' as const,\n        label: t('modal.supplementalSection.useRegularRate', {\n          frequency: frequencyDisplayText,\n        }),\n        description: t('modal.supplementalSection.useRegularRateDescription'),\n      },\n    ],\n    [t, frequencyDisplayText],\n  )\n\n  const handleSubmit = formHandlers.handleSubmit(onDone)\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onCancel}\n      containerRef={modalContainerRef}\n      footer={\n        <ActionsLayout>\n          <Button variant=\"secondary\" onClick={onCancel}>\n            {t('modal.cancelButton')}\n          </Button>\n          <Button variant=\"primary\" onClick={handleSubmit}>\n            {t('modal.doneButton')}\n          </Button>\n        </ActionsLayout>\n      }\n    >\n      <FormProvider {...formHandlers}>\n        <div className={styles.content}>\n          <Heading as=\"h2\">{t('modal.title')}</Heading>\n\n          <div className={styles.section}>\n            <Heading as=\"h3\">{t('modal.regularSection.title')}</Heading>\n            <Text variant=\"supporting\">{t('modal.regularSection.subtitle')}</Text>\n\n            <div className={styles.rateInfo}>\n              <Text weight=\"semibold\">{t('modal.regularSection.rateLabel')}</Text>\n              <Text variant=\"supporting\">{t('modal.regularSection.rateDescription')}</Text>\n            </div>\n\n            <SelectField\n              name=\"withholdingPayPeriod\"\n              label={t('modal.regularSection.rateLabel')}\n              options={frequencyOptions}\n              shouldVisuallyHideLabel\n              portalContainer={modalContainerRef.current ?? undefined}\n            />\n          </div>\n\n          <hr className={styles.divider} />\n\n          <div className={styles.section}>\n            <Heading as=\"h3\">{t('modal.supplementalSection.title')}</Heading>\n            <RadioGroupField\n              name=\"withholdingRate\"\n              label={t('modal.supplementalSection.title')}\n              options={withholdingRateOptions}\n              shouldVisuallyHideLabel\n            />\n          </div>\n        </div>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["OffCycleTaxWithholdingModal","isOpen","defaultConfig","onDone","onCancel","useI18n","t","useTranslation","Modal","Heading","Text","Button","useComponentContext","modalContainerRef","useRef","formHandlers","useForm","currentWithholdingPayPeriod","useWatch","frequencyOptions","useMemo","WithholdingPayPeriod","value","WITHHOLDING_PAY_PERIOD_I18N_KEY","frequencyDisplayText","withholdingRateOptions","handleSubmit","jsx","ActionsLayout","FormProvider","styles","jsxs","SelectField","RadioGroupField"],"mappings":"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"}

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.js

@@ -3,15 +3,16 @@ import { useTranslation as A } from "react-i18next";
 import { hasActionableBlockers as K, getBlockerTranslationKeys as P, isActionableBlocker as D } from "../payrollHelpers.js";
 import { useComponentContext as C } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { Flex as B } from "../../../Common/Flex/Flex.js";
+import "classnames";
 import { useI18n as I } from "../../../../i18n/I18n.js";
-function H({
+function M({
   blockers: o,
   onViewBlockersClick: i,
   viewBlockersLabel: y,
   className: a
 }) {
   I("Payroll.PayrollBlocker");
-  const { t } = A("Payroll.PayrollBlocker"), { Alert: d, Button: p, Text: u, UnorderedList: x } = C();
+  const { t } = A("Payroll.PayrollBlocker"), { Alert: p, Button: d, Text: u, UnorderedList: x } = C();
   if (o.length === 0)
     return null;
   const s = o.length > 1, h = !!i && (s || K(o)), m = o.map((r) => {
@@ -28,26 +29,26 @@ function H({
     };
   }), n = y || t(s ? "viewAllBlockers" : "viewBlocker"), l = m[0];
   if (!s && l)
-    return /* @__PURE__ */ e(d, { status: "error", label: l.title, className: a, children: /* @__PURE__ */ f(B, { flexDirection: "column", gap: 8, children: [
+    return /* @__PURE__ */ e(p, { status: "error", label: l.title, className: a, children: /* @__PURE__ */ f(B, { flexDirection: "column", gap: 8, children: [
       /* @__PURE__ */ e(u, { children: l.description }),
       l.helpText && l.helpText !== l.description && /* @__PURE__ */ e(u, { variant: "supporting", size: "sm", children: l.helpText }),
-      h && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(p, { variant: "secondary", onClick: i, title: n, children: n }) })
+      h && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(d, { variant: "secondary", onClick: i, title: n, children: n }) })
     ] }) });
   const g = m.map((r) => r.title);
   return /* @__PURE__ */ e(
-    d,
+    p,
     {
       status: "error",
       label: t("multipleIssuesTitle", { count: o.length }),
       className: a,
       children: /* @__PURE__ */ f(B, { flexDirection: "column", gap: 16, children: [
         /* @__PURE__ */ e(x, { items: g }),
-        h && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(p, { variant: "secondary", onClick: i, title: n, children: n }) })
+        h && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(d, { variant: "secondary", onClick: i, title: n, children: n }) })
       ] })
     }
   );
 }
 export {
-  H as PayrollBlockerAlerts
+  M as PayrollBlockerAlerts
 };
 //# sourceMappingURL=PayrollBlockerAlerts.js.map

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollBlockerAlerts.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport {\n  type ApiPayrollBlocker,\n  getBlockerTranslationKeys,\n  hasActionableBlockers,\n  isActionableBlocker,\n} from '../payrollHelpers'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\n\ninterface PayrollBlockerAlertsProps {\n  blockers: ApiPayrollBlocker[]\n  className?: string\n  onViewBlockersClick?: () => void\n  viewBlockersLabel?: string\n}\n\nexport function PayrollBlockerAlerts({\n  blockers,\n  onViewBlockersClick,\n  viewBlockersLabel,\n  className,\n}: PayrollBlockerAlertsProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Alert, Button, Text, UnorderedList } = useComponentContext()\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  const hasMultipleBlockers = blockers.length > 1\n  const showViewBlockersCta =\n    Boolean(onViewBlockersClick) && (hasMultipleBlockers || hasActionableBlockers(blockers))\n\n  const enrichedBlockers = blockers.map(blocker => {\n    const translationKeys = getBlockerTranslationKeys(blocker.key)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: t('defaultBlockerDescription'),\n    })\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n    const helpText = isActionableBlocker(blocker.key)\n      ? undefined\n      : t(translationKeys.helpTextKey, { defaultValue: t('defaultBlockerHelp') })\n\n    return {\n      ...blocker,\n      title,\n      description,\n      helpText,\n    }\n  })\n\n  const ctaLabel = viewBlockersLabel || t(hasMultipleBlockers ? 'viewAllBlockers' : 'viewBlocker')\n\n  const singleBlocker = enrichedBlockers[0]\n\n  if (!hasMultipleBlockers && singleBlocker) {\n    return (\n      <Alert status=\"error\" label={singleBlocker.title} className={className}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Text>{singleBlocker.description}</Text>\n          {singleBlocker.helpText && singleBlocker.helpText !== singleBlocker.description && (\n            <Text variant=\"supporting\" size=\"sm\">\n              {singleBlocker.helpText}\n            </Text>\n          )}\n          {showViewBlockersCta && (\n            <div>\n              <Button variant=\"secondary\" onClick={onViewBlockersClick} title={ctaLabel}>\n                {ctaLabel}\n              </Button>\n            </div>\n          )}\n        </Flex>\n      </Alert>\n    )\n  }\n\n  const listItems = enrichedBlockers.map(blocker => blocker.title)\n\n  return (\n    <Alert\n      status=\"error\"\n      label={t('multipleIssuesTitle', { count: blockers.length })}\n      className={className}\n    >\n      <Flex flexDirection=\"column\" gap={16}>\n        <UnorderedList items={listItems} />\n        {showViewBlockersCta && (\n          <div>\n            <Button variant=\"secondary\" onClick={onViewBlockersClick} title={ctaLabel}>\n              {ctaLabel}\n            </Button>\n          </div>\n        )}\n      </Flex>\n    </Alert>\n  )\n}\n"],"names":["PayrollBlockerAlerts","blockers","onViewBlockersClick","viewBlockersLabel","className","useI18n","useTranslation","Alert","Button","Text","UnorderedList","useComponentContext","hasMultipleBlockers","showViewBlockersCta","hasActionableBlockers","enrichedBlockers","blocker","translationKeys","getBlockerTranslationKeys","title","description","helpText","isActionableBlocker","ctaLabel","singleBlocker","jsx","jsxs","Flex","listItems"],"mappings":";;;;;;AAkBO,SAASA,EAAqB;AAAA,EACnC,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAA8B;AAC5B,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA;AAE/C,MAAIV,EAAS,WAAW;AACtB,WAAO;AAGT,QAAMW,IAAsBX,EAAS,SAAS,GACxCY,IACJ,EAAQX,MAAyBU,KAAuBE,EAAsBb,CAAQ,IAElFc,IAAmBd,EAAS,IAAI,CAAAe,MAAW;AAC/C,UAAMC,IAAkBC,EAA0BF,EAAQ,GAAG,GAEvDG,IAAQ,EAAEF,EAAgB,UAAU;AAAA,MACxC,cAAc,EAAE,2BAA2B;AAAA,IAAA,CAC5C,GACKG,IAAc,EAAEH,EAAgB,gBAAgB;AAAA,MACpD,cAAcD,EAAQ,WAAW,EAAE,2BAA2B;AAAA,IAAA,CAC/D,GACKK,IAAWC,EAAoBN,EAAQ,GAAG,IAC5C,SACA,EAAEC,EAAgB,aAAa,EAAE,cAAc,EAAE,oBAAoB,GAAG;AAE5E,WAAO;AAAA,MACL,GAAGD;AAAA,MACH,OAAAG;AAAA,MACA,aAAAC;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,EAEJ,CAAC,GAEKE,IAAWpB,KAAqB,EAAES,IAAsB,oBAAoB,aAAa,GAEzFY,IAAgBT,EAAiB,CAAC;AAExC,MAAI,CAACH,KAAuBY;AAC1B,WACE,gBAAAC,EAAClB,GAAA,EAAM,QAAO,SAAQ,OAAOiB,EAAc,OAAO,WAAApB,GAChD,UAAA,gBAAAsB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAF,EAAChB,GAAA,EAAM,YAAc,YAAA,CAAY;AAAA,MAChCe,EAAc,YAAYA,EAAc,aAAaA,EAAc,eAClE,gBAAAC,EAAChB,GAAA,EAAK,SAAQ,cAAa,MAAK,MAC7B,YAAc,UACjB;AAAA,MAEDI,KACC,gBAAAY,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACjB,GAAA,EAAO,SAAQ,aAAY,SAASN,GAAqB,OAAOqB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAIJ,QAAMK,IAAYb,EAAiB,IAAI,CAAAC,MAAWA,EAAQ,KAAK;AAE/D,SACE,gBAAAS;AAAA,IAAClB;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAO,EAAE,uBAAuB,EAAE,OAAON,EAAS,QAAQ;AAAA,MAC1D,WAAAG;AAAA,MAEA,UAAA,gBAAAsB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAF,EAACf,GAAA,EAAc,OAAOkB,EAAA,CAAW;AAAA,QAChCf,KACC,gBAAAY,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACjB,GAAA,EAAO,SAAQ,aAAY,SAASN,GAAqB,OAAOqB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"PayrollBlockerAlerts.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport {\n  type ApiPayrollBlocker,\n  getBlockerTranslationKeys,\n  hasActionableBlockers,\n  isActionableBlocker,\n} from '../payrollHelpers'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\n\ninterface PayrollBlockerAlertsProps {\n  blockers: ApiPayrollBlocker[]\n  className?: string\n  onViewBlockersClick?: () => void\n  viewBlockersLabel?: string\n}\n\nexport function PayrollBlockerAlerts({\n  blockers,\n  onViewBlockersClick,\n  viewBlockersLabel,\n  className,\n}: PayrollBlockerAlertsProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Alert, Button, Text, UnorderedList } = useComponentContext()\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  const hasMultipleBlockers = blockers.length > 1\n  const showViewBlockersCta =\n    Boolean(onViewBlockersClick) && (hasMultipleBlockers || hasActionableBlockers(blockers))\n\n  const enrichedBlockers = blockers.map(blocker => {\n    const translationKeys = getBlockerTranslationKeys(blocker.key)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: t('defaultBlockerDescription'),\n    })\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n    const helpText = isActionableBlocker(blocker.key)\n      ? undefined\n      : t(translationKeys.helpTextKey, { defaultValue: t('defaultBlockerHelp') })\n\n    return {\n      ...blocker,\n      title,\n      description,\n      helpText,\n    }\n  })\n\n  const ctaLabel = viewBlockersLabel || t(hasMultipleBlockers ? 'viewAllBlockers' : 'viewBlocker')\n\n  const singleBlocker = enrichedBlockers[0]\n\n  if (!hasMultipleBlockers && singleBlocker) {\n    return (\n      <Alert status=\"error\" label={singleBlocker.title} className={className}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Text>{singleBlocker.description}</Text>\n          {singleBlocker.helpText && singleBlocker.helpText !== singleBlocker.description && (\n            <Text variant=\"supporting\" size=\"sm\">\n              {singleBlocker.helpText}\n            </Text>\n          )}\n          {showViewBlockersCta && (\n            <div>\n              <Button variant=\"secondary\" onClick={onViewBlockersClick} title={ctaLabel}>\n                {ctaLabel}\n              </Button>\n            </div>\n          )}\n        </Flex>\n      </Alert>\n    )\n  }\n\n  const listItems = enrichedBlockers.map(blocker => blocker.title)\n\n  return (\n    <Alert\n      status=\"error\"\n      label={t('multipleIssuesTitle', { count: blockers.length })}\n      className={className}\n    >\n      <Flex flexDirection=\"column\" gap={16}>\n        <UnorderedList items={listItems} />\n        {showViewBlockersCta && (\n          <div>\n            <Button variant=\"secondary\" onClick={onViewBlockersClick} title={ctaLabel}>\n              {ctaLabel}\n            </Button>\n          </div>\n        )}\n      </Flex>\n    </Alert>\n  )\n}\n"],"names":["PayrollBlockerAlerts","blockers","onViewBlockersClick","viewBlockersLabel","className","useI18n","useTranslation","Alert","Button","Text","UnorderedList","useComponentContext","hasMultipleBlockers","showViewBlockersCta","hasActionableBlockers","enrichedBlockers","blocker","translationKeys","getBlockerTranslationKeys","title","description","helpText","isActionableBlocker","ctaLabel","singleBlocker","jsx","jsxs","Flex","listItems"],"mappings":";;;;;;;AAkBO,SAASA,EAAqB;AAAA,EACnC,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAA8B;AAC5B,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA;AAE/C,MAAIV,EAAS,WAAW;AACtB,WAAO;AAGT,QAAMW,IAAsBX,EAAS,SAAS,GACxCY,IACJ,EAAQX,MAAyBU,KAAuBE,EAAsBb,CAAQ,IAElFc,IAAmBd,EAAS,IAAI,CAAAe,MAAW;AAC/C,UAAMC,IAAkBC,EAA0BF,EAAQ,GAAG,GAEvDG,IAAQ,EAAEF,EAAgB,UAAU;AAAA,MACxC,cAAc,EAAE,2BAA2B;AAAA,IAAA,CAC5C,GACKG,IAAc,EAAEH,EAAgB,gBAAgB;AAAA,MACpD,cAAcD,EAAQ,WAAW,EAAE,2BAA2B;AAAA,IAAA,CAC/D,GACKK,IAAWC,EAAoBN,EAAQ,GAAG,IAC5C,SACA,EAAEC,EAAgB,aAAa,EAAE,cAAc,EAAE,oBAAoB,GAAG;AAE5E,WAAO;AAAA,MACL,GAAGD;AAAA,MACH,OAAAG;AAAA,MACA,aAAAC;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,EAEJ,CAAC,GAEKE,IAAWpB,KAAqB,EAAES,IAAsB,oBAAoB,aAAa,GAEzFY,IAAgBT,EAAiB,CAAC;AAExC,MAAI,CAACH,KAAuBY;AAC1B,WACE,gBAAAC,EAAClB,GAAA,EAAM,QAAO,SAAQ,OAAOiB,EAAc,OAAO,WAAApB,GAChD,UAAA,gBAAAsB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAF,EAAChB,GAAA,EAAM,YAAc,YAAA,CAAY;AAAA,MAChCe,EAAc,YAAYA,EAAc,aAAaA,EAAc,eAClE,gBAAAC,EAAChB,GAAA,EAAK,SAAQ,cAAa,MAAK,MAC7B,YAAc,UACjB;AAAA,MAEDI,KACC,gBAAAY,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACjB,GAAA,EAAO,SAAQ,aAAY,SAASN,GAAqB,OAAOqB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAIJ,QAAMK,IAAYb,EAAiB,IAAI,CAAAC,MAAWA,EAAQ,KAAK;AAE/D,SACE,gBAAAS;AAAA,IAAClB;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAO,EAAE,uBAAuB,EAAE,OAAON,EAAS,QAAQ;AAAA,MAC1D,WAAAG;AAAA,MAEA,UAAA,gBAAAsB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAF,EAACf,GAAA,EAAc,OAAOkB,EAAA,CAAW;AAAA,QAChCf,KACC,gBAAAY,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACjB,GAAA,EAAO,SAAQ,aAAY,SAASN,GAAqB,OAAOqB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js

@@ -8,6 +8,7 @@ import $ from "./PayrollConfigurationPresentation.module.scss.js";
 import { useI18n as ee } from "../../../i18n/I18n.js";
 import { Flex as u, FlexItem as h } from "../../Common/Flex/Flex.js";
 import { Grid as te } from "../../Common/Grid/Grid.js";
+import "classnames";
 import { useComponentContext as re } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import ne from "../../../assets/icons/pencil.svg.js";
 import oe from "../../../assets/icons/x-circle.svg.js";
@@ -19,7 +20,7 @@ import me from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.j
 import { PayrollLoading as ce } from "../../Common/PayrollLoading/PayrollLoading.js";
 import { HamburgerMenu as ue } from "../../Common/HamburgerMenu/HamburgerMenu.js";
 import { DataView as de } from "../../Common/DataView/DataView.js";
-const pe = (i, p) => i?.startDate && i.endDate ? p.formatPayPeriod(i.startDate, i.endDate) : { startDate: "", endDate: "" }, Ge = ({
+const pe = (i, p) => i?.startDate && i.endDate ? p.formatPayPeriod(i.startDate, i.endDate) : { startDate: "", endDate: "" }, Ie = ({
   employeeCompensations: i,
   employeeDetails: p,
   payPeriod: f,
@@ -214,6 +215,6 @@ const pe = (i, p) => i?.startDate && i.endDate ? p.formatPayPeriod(i.startDate,
   ] }) });
 };
 export {
-  Ge as PayrollConfigurationPresentation
+  Ie as PayrollConfigurationPresentation
 };
 //# sourceMappingURL=PayrollConfigurationPresentation.js.map

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\nimport type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payroll'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PaySchedule as PayScheduleObject } from '@gusto/embedded-api/models/components/payschedule'\nimport { Trans, useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport { PayrollCategory } from '../payrollTypes'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid, PayrollLoading } from '@/components/Common'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport XCircle from '@/assets/icons/x-circle.svg?react'\nimport PlusCircle from '@/assets/icons/plus-circle.svg?react'\nimport CoinsHandSvg from '@/assets/icons/coins-hand.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  onToggleExclude: (employeeCompensation: PayrollEmployeeCompensationsType) => void\n  onViewBlockers: () => void\n  payrollCategory?: PayrollCategory\n  alerts?: ReactNode\n  payrollAlert?: {\n    label: string\n    content?: ReactNode\n    variant: 'info' | 'warning'\n  }\n  isPending?: boolean\n  isCalculating?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n  pagination?: PaginationControlProps\n  withReimbursements?: boolean\n  isCalculateDisabled?: boolean\n  grossUpEnabled?: boolean\n  onGrossUpSelect?: (employeeUuid: string) => void\n}\n\nconst getPayrollConfigurationTitle = (\n  payPeriod: PayrollPayPeriodType | undefined,\n  dateFormatter: ReturnType<typeof useDateFormatter>,\n) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    return dateFormatter.formatPayPeriod(payPeriod.startDate, payPeriod.endDate)\n  }\n  return { startDate: '', endDate: '' }\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onEdit,\n  onToggleExclude,\n  onCalculatePayroll,\n  onViewBlockers,\n  payrollCategory = PayrollCategory.Regular,\n  alerts,\n  payrollAlert,\n  isPending,\n  isCalculating,\n  payrollBlockers = [],\n  pagination,\n  withReimbursements = true,\n  isCalculateDisabled = false,\n  grossUpEnabled = false,\n  onGrossUpSelect,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const dateFormatter = useDateFormatter()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isDesktop = breakpoints.includes('small')\n\n  const employeeMap = new Map(employeeDetails.map(employee => [employee.uuid, employee]))\n\n  const getEmployeeName = (employeeUuid: string) => {\n    const employee = employeeMap.get(employeeUuid)\n    return employee\n      ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n      : null\n  }\n\n  return (\n    <div ref={containerRef} className={styles.container}>\n      <Flex flexDirection=\"column\" gap={32}>\n        <Flex\n          flexDirection={isDesktop ? 'row' : 'column'}\n          justifyContent={isDesktop ? 'space-between' : 'normal'}\n          alignItems={isDesktop ? 'center' : 'stretch'}\n          gap={isDesktop ? 0 : 16}\n        >\n          <FlexItem>\n            <Heading as=\"h1\">{t('pageTitle')}</Heading>\n            {payPeriod && (\n              <Text variant=\"supporting\">\n                <Trans\n                  i18nKey={\n                    payrollCategory === PayrollCategory.Dismissal\n                      ? 'descriptionDismissal'\n                      : 'description'\n                  }\n                  t={t}\n                  components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n                  values={{\n                    ...getPayrollConfigurationTitle(payPeriod, dateFormatter),\n                    payrollType: payrollCategory,\n                  }}\n                />\n              </Text>\n            )}\n          </FlexItem>\n          <FlexItem flexGrow={isDesktop ? 0 : 0}>\n            {isDesktop ? (\n              <Button\n                title={t('calculatePayrollTitle')}\n                onClick={onCalculatePayroll}\n                isDisabled={isCalculateDisabled || isPending || isCalculating}\n              >\n                {isCalculating ? t('calculatingPayroll') : t('calculatePayroll')}\n              </Button>\n            ) : (\n              <Flex flexDirection=\"column\" justifyContent=\"normal\" alignItems=\"stretch\" gap={12}>\n                <Button\n                  title={t('calculatePayrollTitle')}\n                  onClick={onCalculatePayroll}\n                  isDisabled={isCalculateDisabled || isPending || isCalculating}\n                >\n                  {isCalculating ? t('calculatingPayroll') : t('calculatePayroll')}\n                </Button>\n              </Flex>\n            )}\n          </FlexItem>\n        </Flex>\n\n        {(alerts || payrollAlert) && (\n          <Grid gap={16} gridTemplateColumns=\"1fr\">\n            {payrollAlert && (\n              <Alert label={payrollAlert.label} status={payrollAlert.variant}>\n                {payrollAlert.content}\n              </Alert>\n            )}\n            {alerts}\n          </Grid>\n        )}\n\n        {isPending ? (\n          <PayrollLoading\n            title={isCalculating ? t('calculatingTitle') : t('loadingTitle')}\n            description={isCalculating ? t('calculatingDescription') : t('loadingDescription')}\n          />\n        ) : (\n          <>\n            {payrollBlockers.length > 0 && (\n              <PayrollBlockerAlerts\n                blockers={payrollBlockers}\n                onViewBlockersClick={onViewBlockers}\n              />\n            )}\n            <Flex flexDirection=\"column\" gap={20}>\n              <FlexItem>\n                <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n                <Text variant=\"supporting\">{t('hoursAndEarningsDescription')}</Text>\n              </FlexItem>\n\n              <DataView\n                label={t('employeeCompensationsTitle')}\n                columns={[\n                  {\n                    title: t('tableColumns.employees'),\n                    render: (item: EmployeeCompensations) => {\n                      const employee = employeeMap.get(item.employeeUuid || '')\n                      const payRateDisplay = formatEmployeePayRate(employee)\n                      return (\n                        <Flex flexDirection=\"column\" gap={0}>\n                          {getEmployeeName(item.employeeUuid || '')}\n                          {payRateDisplay && (\n                            <Text size=\"xs\" variant=\"supporting\">\n                              {payRateDisplay}\n                            </Text>\n                          )}\n                          {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                        </Flex>\n                      )\n                    },\n                  },\n                  {\n                    title: t('tableColumns.hours'),\n                    render: (item: EmployeeCompensations) => {\n                      const hours = getRegularHours(item)\n                      const overtimeHours = getOvertimeHours(item)\n                      return formatHoursDisplay(hours + overtimeHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.timeOff'),\n                    render: (item: EmployeeCompensations) => {\n                      const ptoHours = getTotalPtoHours(item)\n                      return formatHoursDisplay(ptoHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.additionalEarnings'),\n                    render: (item: EmployeeCompensations) => {\n                      const earnings = getAdditionalEarnings(item)\n                      return formatNumberAsCurrency(earnings)\n                    },\n                  },\n                  ...(withReimbursements\n                    ? [\n                        {\n                          title: t('tableColumns.reimbursements'),\n                          render: (item: EmployeeCompensations) => {\n                            const reimbursements = getReimbursements(item)\n                            return formatNumberAsCurrency(reimbursements)\n                          },\n                        },\n                      ]\n                    : []),\n                  {\n                    title: t('tableColumns.totalPay'),\n                    render: (item: PayrollEmployeeCompensationsType) => {\n                      const employee = employeeMap.get(item.employeeUuid || '')\n                      const calculatedGrossPay = employee\n                        ? calculateGrossPay(\n                            item,\n                            employee,\n                            payPeriod?.startDate,\n                            paySchedule,\n                            payrollCategory,\n                          )\n                        : 0\n                      return formatNumberAsCurrency(calculatedGrossPay)\n                    },\n                  },\n                ]}\n                data={employeeCompensations}\n                itemMenu={(item: EmployeeCompensations) => (\n                  <HamburgerMenu\n                    items={[\n                      {\n                        label: t('editMenu.edit'),\n                        icon: <PencilSvg aria-hidden />,\n                        onClick: () => {\n                          const employee = employeeMap.get(item.employeeUuid || '')\n                          if (employee) {\n                            onEdit(employee)\n                          }\n                        },\n                      },\n                      {\n                        label: t(item.excluded ? 'editMenu.unskip' : 'editMenu.skip'),\n                        icon: item.excluded ? <PlusCircle aria-hidden /> : <XCircle aria-hidden />,\n                        onClick: () => {\n                          const employee = employeeMap.get(item.employeeUuid || '')\n                          if (employee) {\n                            onToggleExclude(item)\n                          }\n                        },\n                      },\n                      ...(grossUpEnabled\n                        ? [\n                            {\n                              label: t('editMenu.setNetEarnings'),\n                              icon: <CoinsHandSvg aria-hidden />,\n                              onClick: () => {\n                                if (item.employeeUuid) {\n                                  onGrossUpSelect?.(item.employeeUuid)\n                                }\n                              },\n                            },\n                          ]\n                        : []),\n                    ]}\n                    triggerLabel={t('editMenu.edit')}\n                  />\n                )}\n                pagination={pagination}\n              />\n            </Flex>\n          </>\n        )}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","dateFormatter","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","payrollCategory","PayrollCategory","alerts","payrollAlert","isPending","isCalculating","payrollBlockers","pagination","withReimbursements","isCalculateDisabled","grossUpEnabled","onGrossUpSelect","Button","Heading","Text","Badge","Alert","useComponentContext","useI18n","useTranslation","useDateFormatter","formatEmployeePayRate","useFormatEmployeePayRate","containerRef","useRef","isDesktop","useContainerBreakpoints","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsx","styles","jsxs","Flex","FlexItem","Trans","Grid","PayrollLoading","Fragment","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","HamburgerMenu","PencilSvg","PlusCircle","XCircle","CoinsHandSvg"],"mappings":"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"}
+{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\nimport type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payroll'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PaySchedule as PayScheduleObject } from '@gusto/embedded-api/models/components/payschedule'\nimport { Trans, useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport { PayrollCategory } from '../payrollTypes'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid, PayrollLoading } from '@/components/Common'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport XCircle from '@/assets/icons/x-circle.svg?react'\nimport PlusCircle from '@/assets/icons/plus-circle.svg?react'\nimport CoinsHandSvg from '@/assets/icons/coins-hand.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  onToggleExclude: (employeeCompensation: PayrollEmployeeCompensationsType) => void\n  onViewBlockers: () => void\n  payrollCategory?: PayrollCategory\n  alerts?: ReactNode\n  payrollAlert?: {\n    label: string\n    content?: ReactNode\n    variant: 'info' | 'warning'\n  }\n  isPending?: boolean\n  isCalculating?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n  pagination?: PaginationControlProps\n  withReimbursements?: boolean\n  isCalculateDisabled?: boolean\n  grossUpEnabled?: boolean\n  onGrossUpSelect?: (employeeUuid: string) => void\n}\n\nconst getPayrollConfigurationTitle = (\n  payPeriod: PayrollPayPeriodType | undefined,\n  dateFormatter: ReturnType<typeof useDateFormatter>,\n) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    return dateFormatter.formatPayPeriod(payPeriod.startDate, payPeriod.endDate)\n  }\n  return { startDate: '', endDate: '' }\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onEdit,\n  onToggleExclude,\n  onCalculatePayroll,\n  onViewBlockers,\n  payrollCategory = PayrollCategory.Regular,\n  alerts,\n  payrollAlert,\n  isPending,\n  isCalculating,\n  payrollBlockers = [],\n  pagination,\n  withReimbursements = true,\n  isCalculateDisabled = false,\n  grossUpEnabled = false,\n  onGrossUpSelect,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const dateFormatter = useDateFormatter()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isDesktop = breakpoints.includes('small')\n\n  const employeeMap = new Map(employeeDetails.map(employee => [employee.uuid, employee]))\n\n  const getEmployeeName = (employeeUuid: string) => {\n    const employee = employeeMap.get(employeeUuid)\n    return employee\n      ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n      : null\n  }\n\n  return (\n    <div ref={containerRef} className={styles.container}>\n      <Flex flexDirection=\"column\" gap={32}>\n        <Flex\n          flexDirection={isDesktop ? 'row' : 'column'}\n          justifyContent={isDesktop ? 'space-between' : 'normal'}\n          alignItems={isDesktop ? 'center' : 'stretch'}\n          gap={isDesktop ? 0 : 16}\n        >\n          <FlexItem>\n            <Heading as=\"h1\">{t('pageTitle')}</Heading>\n            {payPeriod && (\n              <Text variant=\"supporting\">\n                <Trans\n                  i18nKey={\n                    payrollCategory === PayrollCategory.Dismissal\n                      ? 'descriptionDismissal'\n                      : 'description'\n                  }\n                  t={t}\n                  components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n                  values={{\n                    ...getPayrollConfigurationTitle(payPeriod, dateFormatter),\n                    payrollType: payrollCategory,\n                  }}\n                />\n              </Text>\n            )}\n          </FlexItem>\n          <FlexItem flexGrow={isDesktop ? 0 : 0}>\n            {isDesktop ? (\n              <Button\n                title={t('calculatePayrollTitle')}\n                onClick={onCalculatePayroll}\n                isDisabled={isCalculateDisabled || isPending || isCalculating}\n              >\n                {isCalculating ? t('calculatingPayroll') : t('calculatePayroll')}\n              </Button>\n            ) : (\n              <Flex flexDirection=\"column\" justifyContent=\"normal\" alignItems=\"stretch\" gap={12}>\n                <Button\n                  title={t('calculatePayrollTitle')}\n                  onClick={onCalculatePayroll}\n                  isDisabled={isCalculateDisabled || isPending || isCalculating}\n                >\n                  {isCalculating ? t('calculatingPayroll') : t('calculatePayroll')}\n                </Button>\n              </Flex>\n            )}\n          </FlexItem>\n        </Flex>\n\n        {(alerts || payrollAlert) && (\n          <Grid gap={16} gridTemplateColumns=\"1fr\">\n            {payrollAlert && (\n              <Alert label={payrollAlert.label} status={payrollAlert.variant}>\n                {payrollAlert.content}\n              </Alert>\n            )}\n            {alerts}\n          </Grid>\n        )}\n\n        {isPending ? (\n          <PayrollLoading\n            title={isCalculating ? t('calculatingTitle') : t('loadingTitle')}\n            description={isCalculating ? t('calculatingDescription') : t('loadingDescription')}\n          />\n        ) : (\n          <>\n            {payrollBlockers.length > 0 && (\n              <PayrollBlockerAlerts\n                blockers={payrollBlockers}\n                onViewBlockersClick={onViewBlockers}\n              />\n            )}\n            <Flex flexDirection=\"column\" gap={20}>\n              <FlexItem>\n                <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n                <Text variant=\"supporting\">{t('hoursAndEarningsDescription')}</Text>\n              </FlexItem>\n\n              <DataView\n                label={t('employeeCompensationsTitle')}\n                columns={[\n                  {\n                    title: t('tableColumns.employees'),\n                    render: (item: EmployeeCompensations) => {\n                      const employee = employeeMap.get(item.employeeUuid || '')\n                      const payRateDisplay = formatEmployeePayRate(employee)\n                      return (\n                        <Flex flexDirection=\"column\" gap={0}>\n                          {getEmployeeName(item.employeeUuid || '')}\n                          {payRateDisplay && (\n                            <Text size=\"xs\" variant=\"supporting\">\n                              {payRateDisplay}\n                            </Text>\n                          )}\n                          {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                        </Flex>\n                      )\n                    },\n                  },\n                  {\n                    title: t('tableColumns.hours'),\n                    render: (item: EmployeeCompensations) => {\n                      const hours = getRegularHours(item)\n                      const overtimeHours = getOvertimeHours(item)\n                      return formatHoursDisplay(hours + overtimeHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.timeOff'),\n                    render: (item: EmployeeCompensations) => {\n                      const ptoHours = getTotalPtoHours(item)\n                      return formatHoursDisplay(ptoHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.additionalEarnings'),\n                    render: (item: EmployeeCompensations) => {\n                      const earnings = getAdditionalEarnings(item)\n                      return formatNumberAsCurrency(earnings)\n                    },\n                  },\n                  ...(withReimbursements\n                    ? [\n                        {\n                          title: t('tableColumns.reimbursements'),\n                          render: (item: EmployeeCompensations) => {\n                            const reimbursements = getReimbursements(item)\n                            return formatNumberAsCurrency(reimbursements)\n                          },\n                        },\n                      ]\n                    : []),\n                  {\n                    title: t('tableColumns.totalPay'),\n                    render: (item: PayrollEmployeeCompensationsType) => {\n                      const employee = employeeMap.get(item.employeeUuid || '')\n                      const calculatedGrossPay = employee\n                        ? calculateGrossPay(\n                            item,\n                            employee,\n                            payPeriod?.startDate,\n                            paySchedule,\n                            payrollCategory,\n                          )\n                        : 0\n                      return formatNumberAsCurrency(calculatedGrossPay)\n                    },\n                  },\n                ]}\n                data={employeeCompensations}\n                itemMenu={(item: EmployeeCompensations) => (\n                  <HamburgerMenu\n                    items={[\n                      {\n                        label: t('editMenu.edit'),\n                        icon: <PencilSvg aria-hidden />,\n                        onClick: () => {\n                          const employee = employeeMap.get(item.employeeUuid || '')\n                          if (employee) {\n                            onEdit(employee)\n                          }\n                        },\n                      },\n                      {\n                        label: t(item.excluded ? 'editMenu.unskip' : 'editMenu.skip'),\n                        icon: item.excluded ? <PlusCircle aria-hidden /> : <XCircle aria-hidden />,\n                        onClick: () => {\n                          const employee = employeeMap.get(item.employeeUuid || '')\n                          if (employee) {\n                            onToggleExclude(item)\n                          }\n                        },\n                      },\n                      ...(grossUpEnabled\n                        ? [\n                            {\n                              label: t('editMenu.setNetEarnings'),\n                              icon: <CoinsHandSvg aria-hidden />,\n                              onClick: () => {\n                                if (item.employeeUuid) {\n                                  onGrossUpSelect?.(item.employeeUuid)\n                                }\n                              },\n                            },\n                          ]\n                        : []),\n                    ]}\n                    triggerLabel={t('editMenu.edit')}\n                  />\n                )}\n                pagination={pagination}\n              />\n            </Flex>\n          </>\n        )}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","dateFormatter","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","payrollCategory","PayrollCategory","alerts","payrollAlert","isPending","isCalculating","payrollBlockers","pagination","withReimbursements","isCalculateDisabled","grossUpEnabled","onGrossUpSelect","Button","Heading","Text","Badge","Alert","useComponentContext","useI18n","useTranslation","useDateFormatter","formatEmployeePayRate","useFormatEmployeePayRate","containerRef","useRef","isDesktop","useContainerBreakpoints","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsx","styles","jsxs","Flex","FlexItem","Trans","Grid","PayrollLoading","Fragment","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","HamburgerMenu","PencilSvg","PlusCircle","XCircle","CoinsHandSvg"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAMA,KAA+B,CACnCC,GACAC,MAEID,GAAW,aAAaA,EAAU,UAC7BC,EAAc,gBAAgBD,EAAU,WAAWA,EAAU,OAAO,IAEtE,EAAE,WAAW,IAAI,SAAS,GAAA,GAGtBE,KAAmC,CAAC;AAAA,EAC/C,uBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAJ;AAAA,EACA,aAAAK;AAAA,EACA,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC,IAAkBC,EAAgB;AAAA,EAClC,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAA;AAAA,EAClB,YAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,qBAAAC,IAAsB;AAAA,EACtB,gBAAAC,IAAiB;AAAA,EACjB,iBAAAC;AACF,MAA6C;AAC3C,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,GAAM,OAAAC,GAAO,OAAAC,EAAA,IAAUC,GAAA;AAChD,EAAAC,GAAQ,8BAA8B;AACtC,QAAM,EAAE,EAAA,IAAMC,EAAe,8BAA8B,GACrD5B,IAAgB6B,GAAA,GAChBC,IAAwBC,EAAA,GACxBC,IAAeC,EAAuB,IAAI,GAE1CC,IADcC,GAAwB,EAAE,KAAKH,GAAc,EACnC,SAAS,OAAO,GAExCI,IAAc,IAAI,IAAIjC,EAAgB,IAAI,CAAAkC,MAAY,CAACA,EAAS,MAAMA,CAAQ,CAAC,CAAC,GAEhFC,IAAkB,CAACC,MAAyB;AAChD,UAAMF,IAAWD,EAAY,IAAIG,CAAY;AAC7C,WAAOF,IACHG,GAAc,EAAE,YAAYH,EAAS,WAAW,WAAWA,EAAS,SAAA,CAAU,IAC9E;AAAA,EACN;AAEA,SACE,gBAAAI,EAAC,OAAA,EAAI,KAAKT,GAAc,WAAWU,EAAO,WACxC,UAAA,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,eAAeV,IAAY,QAAQ;AAAA,QACnC,gBAAgBA,IAAY,kBAAkB;AAAA,QAC9C,YAAYA,IAAY,WAAW;AAAA,QACnC,KAAKA,IAAY,IAAI;AAAA,QAErB,UAAA;AAAA,UAAA,gBAAAS,EAACE,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAJ,EAACnB,GAAA,EAAQ,IAAG,MAAM,UAAA,EAAE,WAAW,GAAE;AAAA,YAChCvB,KACC,gBAAA0C,EAAClB,GAAA,EAAK,SAAQ,cACZ,UAAA,gBAAAkB;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,SACErC,MAAoBC,EAAgB,YAChC,yBACA;AAAA,gBAEN;AAAA,gBACA,YAAY,EAAE,aAAa,gBAAA+B,EAAClB,KAAK,QAAO,QAAO,IAAG,OAAA,CAAO,EAAA;AAAA,gBACzD,QAAQ;AAAA,kBACN,GAAGzB,GAA6BC,GAAWC,CAAa;AAAA,kBACxD,aAAaS;AAAA,gBAAA;AAAA,cACf;AAAA,YAAA,EACF,CACF;AAAA,UAAA,GAEJ;AAAA,4BACCoC,GAAA,EAAS,UAAsB,GAC7B,UAAAX,IACC,gBAAAO;AAAA,YAACpB;AAAA,YAAA;AAAA,cACC,OAAO,EAAE,uBAAuB;AAAA,cAChC,SAASd;AAAA,cACT,YAAYW,KAAuBL,KAAaC;AAAA,cAE/C,UAAgB,EAAhBA,IAAkB,uBAA0B,kBAAN;AAAA,YAAwB;AAAA,UAAA,IAGjE,gBAAA2B,EAACG,GAAA,EAAK,eAAc,UAAS,gBAAe,UAAS,YAAW,WAAU,KAAK,IAC7E,UAAA,gBAAAH;AAAA,YAACpB;AAAA,YAAA;AAAA,cACC,OAAO,EAAE,uBAAuB;AAAA,cAChC,SAASd;AAAA,cACT,YAAYW,KAAuBL,KAAaC;AAAA,cAE/C,UAAgB,EAAhBA,IAAkB,uBAA0B,kBAAN;AAAA,YAAwB;AAAA,UAAA,GAEnE,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,KAGAH,KAAUC,MACV,gBAAA+B,EAACI,MAAK,KAAK,IAAI,qBAAoB,OAChC,UAAA;AAAA,MAAAnC,KACC,gBAAA6B,EAAChB,KAAM,OAAOb,EAAa,OAAO,QAAQA,EAAa,SACpD,UAAAA,EAAa,QAAA,CAChB;AAAA,MAEDD;AAAA,IAAA,GACH;AAAA,IAGDE,IACC,gBAAA4B;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,OAAuB,EAAhBlC,IAAkB,qBAAwB,cAAN;AAAA,QAC3C,aAA6B,EAAhBA,IAAkB,2BAA8B,oBAAN;AAAA,MAA0B;AAAA,IAAA,IAGnF,gBAAA6B,EAAAM,GAAA,EACG,UAAA;AAAA,MAAAlC,EAAgB,SAAS,KACxB,gBAAA0B;AAAA,QAACS;AAAA,QAAA;AAAA,UACC,UAAUnC;AAAA,UACV,qBAAqBP;AAAA,QAAA;AAAA,MAAA;AAAA,MAGzB,gBAAAmC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAJ,EAACnB,GAAA,EAAQ,IAAG,MAAM,UAAA,EAAE,uBAAuB,GAAE;AAAA,4BAC5CC,GAAA,EAAK,SAAQ,cAAc,UAAA,EAAE,6BAA6B,EAAA,CAAE;AAAA,QAAA,GAC/D;AAAA,QAEA,gBAAAkB;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,4BAA4B;AAAA,YACrC,SAAS;AAAA,cACP;AAAA,gBACE,OAAO,EAAE,wBAAwB;AAAA,gBACjC,QAAQ,CAACC,MAAgC;AACvC,wBAAMf,IAAWD,EAAY,IAAIgB,EAAK,gBAAgB,EAAE,GAClDC,IAAiBvB,EAAsBO,CAAQ;AACrD,yBACE,gBAAAM,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAC/B,UAAA;AAAA,oBAAAN,EAAgBc,EAAK,gBAAgB,EAAE;AAAA,oBACvCC,KACC,gBAAAZ,EAAClB,GAAA,EAAK,MAAK,MAAK,SAAQ,cACrB,UAAA8B,GACH;AAAA,oBAEDD,EAAK,YAAY,gBAAAX,EAACjB,GAAA,EAAM,QAAO,WAAW,UAAA,EAAE,cAAc,EAAA,CAAE;AAAA,kBAAA,GAC/D;AAAA,gBAEJ;AAAA,cAAA;AAAA,cAEF;AAAA,gBACE,OAAO,EAAE,oBAAoB;AAAA,gBAC7B,QAAQ,CAAC4B,MAAgC;AACvC,wBAAME,IAAQC,EAAgBH,CAAI,GAC5BI,IAAgBC,EAAiBL,CAAI;AAC3C,yBAAOM,EAAmBJ,IAAQE,CAAa;AAAA,gBACjD;AAAA,cAAA;AAAA,cAEF;AAAA,gBACE,OAAO,EAAE,sBAAsB;AAAA,gBAC/B,QAAQ,CAACJ,MAAgC;AACvC,wBAAMO,IAAWC,EAAiBR,CAAI;AACtC,yBAAOM,EAAmBC,CAAQ;AAAA,gBACpC;AAAA,cAAA;AAAA,cAEF;AAAA,gBACE,OAAO,EAAE,iCAAiC;AAAA,gBAC1C,QAAQ,CAACP,MAAgC;AACvC,wBAAMS,IAAWC,EAAsBV,CAAI;AAC3C,yBAAOW,EAAuBF,CAAQ;AAAA,gBACxC;AAAA,cAAA;AAAA,cAEF,GAAI5C,IACA;AAAA,gBACE;AAAA,kBACE,OAAO,EAAE,6BAA6B;AAAA,kBACtC,QAAQ,CAACmC,MAAgC;AACvC,0BAAMY,IAAiBC,EAAkBb,CAAI;AAC7C,2BAAOW,EAAuBC,CAAc;AAAA,kBAC9C;AAAA,gBAAA;AAAA,cACF,IAEF,CAAA;AAAA,cACJ;AAAA,gBACE,OAAO,EAAE,uBAAuB;AAAA,gBAChC,QAAQ,CAACZ,MAA2C;AAClD,wBAAMf,IAAWD,EAAY,IAAIgB,EAAK,gBAAgB,EAAE,GAClDc,IAAqB7B,IACvB8B;AAAA,oBACEf;AAAA,oBACAf;AAAA,oBACAtC,GAAW;AAAA,oBACXK;AAAA,oBACAK;AAAA,kBAAA,IAEF;AACJ,yBAAOsD,EAAuBG,CAAkB;AAAA,gBAClD;AAAA,cAAA;AAAA,YACF;AAAA,YAEF,MAAMhE;AAAA,YACN,UAAU,CAACkD,MACT,gBAAAX;AAAA,cAAC2B;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,kBACL;AAAA,oBACE,OAAO,EAAE,eAAe;AAAA,oBACxB,MAAM,gBAAA3B,EAAC4B,IAAA,EAAU,eAAW,GAAA,CAAC;AAAA,oBAC7B,SAAS,MAAM;AACb,4BAAMhC,IAAWD,EAAY,IAAIgB,EAAK,gBAAgB,EAAE;AACxD,sBAAIf,KACFhC,EAAOgC,CAAQ;AAAA,oBAEnB;AAAA,kBAAA;AAAA,kBAEF;AAAA,oBACE,OAAO,EAAEe,EAAK,WAAW,oBAAoB,eAAe;AAAA,oBAC5D,MAAMA,EAAK,WAAW,gBAAAX,EAAC6B,IAAA,EAAW,eAAW,GAAA,CAAC,IAAK,gBAAA7B,EAAC8B,IAAA,EAAQ,eAAW,GAAA,CAAC;AAAA,oBACxE,SAAS,MAAM;AAEb,sBADiBnC,EAAY,IAAIgB,EAAK,gBAAgB,EAAE,KAEtD9C,EAAgB8C,CAAI;AAAA,oBAExB;AAAA,kBAAA;AAAA,kBAEF,GAAIjC,IACA;AAAA,oBACE;AAAA,sBACE,OAAO,EAAE,yBAAyB;AAAA,sBAClC,MAAM,gBAAAsB,EAAC+B,IAAA,EAAa,eAAW,GAAA,CAAC;AAAA,sBAChC,SAAS,MAAM;AACb,wBAAIpB,EAAK,gBACPhC,IAAkBgC,EAAK,YAAY;AAAA,sBAEvC;AAAA,oBAAA;AAAA,kBACF,IAEF,CAAA;AAAA,gBAAC;AAAA,gBAEP,cAAc,EAAE,eAAe;AAAA,cAAA;AAAA,YAAA;AAAA,YAGnC,YAAApC;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;"}

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

@@ -9,6 +9,7 @@ import d from "./PayrollEditEmployeePresentation.module.scss.js";
 import { TimeOffField as se, PayoutTimeOffField as oe } from "./TimeOffField.js";
 import { Flex as T } from "../../Common/Flex/Flex.js";
 import { Grid as _ } from "../../Common/Grid/Grid.js";
+import "classnames";
 import { useComponentContext as ae } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as re } from "../../../i18n/I18n.js";
 import { Form as le } from "../../Common/Form/Form.js";
@@ -68,7 +69,7 @@ const ye = a.object({
       amount: o
     }));
   }), N.fixedCompensations = g, N;
-}, Ye = ({
+}, Ke = ({
   onSave: h,
   onCancel: y,
   employee: u,
@@ -376,6 +377,6 @@ const ye = a.object({
 };
 export {
   ye as PayrollEditEmployeeFormSchema,
-  Ye as PayrollEditEmployeePresentation
+  Ke as PayrollEditEmployeePresentation
 };
 //# sourceMappingURL=PayrollEditEmployeePresentation.js.map